feat: adding toggle text as an option for accordion component

priceline · Nov 27, 2024 · 68e9b80 · 68e9b80
1 parent b70e69d
commit 68e9b80
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 29 deletions.
diff --git a/common/changes/pcln-design-system/accordion-toggle-text-option_2024-11-26-17-55.json b/common/changes/pcln-design-system/accordion-toggle-text-option_2024-11-26-17-55.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-design-system",
+      "comment": "adding new prop useTextToggle to accordion component",
+      "type": "patch"
+    }
+  ],
+  "packageName": "pcln-design-system"
+}
diff --git a/packages/core/src/Accordion/Accordion.spec.tsx b/packages/core/src/Accordion/Accordion.spec.tsx
@@ -41,6 +41,24 @@ describe('Accordion', () => {
     expect(onToggle).toHaveBeenCalled()
   })
 
+  it('toggles items with text toggle', () => {
+    const onToggle = jest.fn()
+    const items = testItems[0]
+    render(<Accordion items={[items]} onToggle={onToggle} useTextToggle />)
+    const header1 = screen.getByText('Header 1')
+    const moreTextTriggers = screen.getByText(/more/i)
+    const lessTextTriggers = screen.getByText(/less/i)
+
+    expect(moreTextTriggers).toHaveStyle('display: none')
+    expect(lessTextTriggers).toHaveStyle('display: inline')
+
+    fireEvent.click(header1)
+
+    expect(onToggle).toHaveBeenCalled()
+    expect(moreTextTriggers).toHaveStyle('display: inline')
+    expect(lessTextTriggers).toHaveStyle('display: none')
+  })
+
   it('toggles items isExternallyControlled', () => {
     const onToggle = jest.fn()
     render(<Accordion items={testItems} onToggle={onToggle} isExternallyControlled />)

diff --git a/packages/core/src/Accordion/Accordion.stories.tsx b/packages/core/src/Accordion/Accordion.stories.tsx
@@ -42,6 +42,8 @@ const items = [
       </>
     ),
     value: 'item-1',
+    headerBg: 'success.light',
+    hoverBg: 'success.light',
   },
   {
     headerLabel: (
@@ -58,6 +60,8 @@ const items = [
       </>
     ),
     value: 'item-2',
+    headerBg: 'success.light',
+    hoverBg: 'success.light',
   },
   {
     content: (
@@ -69,6 +73,8 @@ const items = [
       </>
     ),
     value: 'item-3',
+    headerBg: 'success.light',
+    hoverBg: 'success.light',
   },
 ]
 
@@ -141,6 +147,10 @@ export const ChevronClose = {
   render: (args) => <Accordion {...args} isAnimatedChevron items={items} />,
 }
 
+export const UseTextToggle = {
+  render: (args) => <Accordion {...args} items={items} useTextToggle itemsState={['item-1', 'item-2']} />,
+}
+
 export const TrackStateMultiple = {
   render: (args) => {
     const [itemsState, setItemsState] = useState(['item-1', 'item-3'])

diff --git a/packages/core/src/Accordion/Accordion.styled.tsx b/packages/core/src/Accordion/Accordion.styled.tsx
@@ -53,19 +53,40 @@ export const StyledContent = styled(Accordion.Content)`
 `
 
 export const StyledTrigger = styled(Accordion.Trigger).attrs(borderRadiusAttrs)`
+  span[data-text-toggle='open'],
+  span[data-text-toggle='closed'] {
+    padding-left: 8px;
+  }
   all: unset;
   box-sizing: border-box;
   display: flex;
+  align-items: center;
   justify-content: space-between;
   width: 100%;
   color: ${(props) => (props.variation === 'hug' ? getPaletteColor('text.lightest')(props) : '')};
   &[data-state='open'] .chevron {
     transform: rotate(180deg);
   }
   &[data-state='closed'] {
+    span[data-text-toggle='open'] {
+      display: none;
+    }
+
+    span[data-text-toggle='closed'] {
+      display: inline;
+    }
     ${(props) =>
       props.variation === 'flatCard' ? `background-color: ${getPaletteColor('background.light')(props)}` : ''}
   }
+  &[data-state='open'] {
+    span[data-text-toggle='open'] {
+      display: inline;
+    }
+
+    span[data-text-toggle='closed'] {
+      display: none;
+    }
+  }
   ${(props) =>
     props.variation === 'ladder'
       ? ''

diff --git a/packages/core/src/Accordion/Accordion.tsx b/packages/core/src/Accordion/Accordion.tsx
@@ -11,6 +11,7 @@ import {
   StyledItem,
   StyledTrigger,
 } from './Accordion.styled'
+import { Text } from '../Text/Text'
 
 /**
  * @public
@@ -23,6 +24,7 @@ export type AccordionProps = SpaceProps & {
   variation?: string
   isExternallyControlled?: boolean
   headerDividerColor?: string
+  useTextToggle?: boolean
 }
 
 /**
@@ -50,6 +52,7 @@ export function Accordion({
   variation = 'default',
   p = '12px',
   headerDividerColor,
+  useTextToggle = false,
   ...props
 }: AccordionProps): React.ReactElement {
   return items ? (
@@ -66,35 +69,48 @@ export function Accordion({
         isolation: 'isolate',
       }}
     >
-      {items.map((child: AccordionItemProps, index) => (
-        <RadixAccordion.Item key={child.value} asChild value={child.value}>
-          <StyledItem
-            variation={variation}
-            overflow='hidden'
-            borderRadius='12px'
-            marginBottom='12px'
-            headerBg={child.headerBg}
-            hoverBg={child.hoverBg}
-            data-testid={`styled-item-${child.value}`}
-            headerDividerColor={index > 0 && headerDividerColor}
-          >
-            <StyledTrigger {...props} p={p} variation={variation}>
-              <Flex width='100%' justifyContent='space-between' alignItems='center'>
-                {child.headerLabel}
-                {child.headerActions ? (
-                  <Box onClick={(e) => e.preventDefault()}>{child.headerActions}</Box>
-                ) : null}
-              </Flex>
-              <IconContainer margin='auto' height='25px'>
-                <StyledChevron className='chevron' variation={variation} />
-              </IconContainer>
-            </StyledTrigger>
-            <StyledContent {...props} p={p} variation={variation} contentBg={child.contentBg}>
-              {child.content}
-            </StyledContent>
-          </StyledItem>
-        </RadixAccordion.Item>
-      ))}
+      {items.map((child: AccordionItemProps, index) => {
+        return (
+          <RadixAccordion.Item key={child.value} asChild value={child.value}>
+            <StyledItem
+              variation={variation}
+              overflow='hidden'
+              borderRadius='12px'
+              marginBottom='12px'
+              headerBg={child.headerBg}
+              hoverBg={child.hoverBg}
+              data-testid={`styled-item-${child.value}`}
+              headerDividerColor={index > 0 && headerDividerColor}
+            >
+              <StyledTrigger {...props} p={p} variation={variation} hoverBg={child.hoverBg}>
+                <Flex width='100%' justifyContent='space-between' alignItems='center'>
+                  {child.headerLabel}
+                  {child.headerActions ? (
+                    <Box onClick={(e) => e.preventDefault()}>{child.headerActions}</Box>
+                  ) : null}
+                </Flex>
+                {useTextToggle ? (
+                  <>
+                    <Text.span textStyle='captionBold' color='primary.base' data-text-toggle='open'>
+                      Less
+                    </Text.span>
+                    <Text.span textStyle='captionBold' color='primary.base' data-text-toggle='closed'>
+                      More
+                    </Text.span>
+                  </>
+                ) : (
+                  <IconContainer margin='auto' height='25px'>
+                    <StyledChevron className='chevron' variation={variation} />
+                  </IconContainer>
+                )}
+              </StyledTrigger>
+              <StyledContent {...props} p={p} variation={variation} contentBg={child.contentBg}>
+                {child.content}
+              </StyledContent>
+            </StyledItem>
+          </RadixAccordion.Item>
+        )
+      })}
     </StyledAccordionRoot>
   ) : null
 }