Merge branch 'main' into feature/1364

lerna.json

@@ -1,5 +1,5 @@
 {
   "packages": ["packages/*"],
-  "version": "2.6.2",
+  "version": "2.8.0",
   "$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }

packages/example-react/package.json

@@ -1,15 +1,15 @@
 {
   "name": "example-react",
   "private": true,
-  "version": "2.6.2",
+  "version": "2.8.0",
   "scripts": {
     "start": "vite --open",
     "build": "tsc && vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@livechat/design-system-icons": "^2.5.3",
-    "@livechat/design-system-react-components": "^2.6.2",
+    "@livechat/design-system-icons": "^2.8.0",
+    "@livechat/design-system-react-components": "^2.8.0",
     "react": "^18.3.0",
     "react-dom": "^18.3.0"
   },

packages/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livechat/design-system-icons",
-  "version": "2.5.3",
+  "version": "2.8.0",
   "description": "",
   "publishConfig": {
     "access": "public"

packages/react-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livechat/design-system-react-components",
-  "version": "2.6.2",
+  "version": "2.8.0",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -76,7 +76,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.25",
     "@livechat/data-utils": "^0.2.16",
-    "@livechat/design-system-icons": "^2.5.3",
+    "@livechat/design-system-icons": "^2.8.0",
     "clsx": "^1.1.1",
     "date-fns": "^2.28.0",
     "lodash.debounce": "^4.0.8",

packages/react-components/src/components/Accordion/Accordion.mdx

@@ -6,24 +6,54 @@ import * as AccordionStories from './Accordion.stories';
 
 <Title>Accordion</Title>
 
-[Intro](#Intro) | [Component API](#ComponentAPI)
+[Intro](#Intro) | [Default Accordion](#Default) | [Promo Accordion](#Promo) | [Component API](#ComponentAPI)
 
 ## Intro <a id="Intro" />
 
 Accordion is a simple component for building expandable tiles that display provided content when opened.
 
+### Default Accordion <a id="Default" />
+
 <Canvas of={AccordionStories.Examples} sourceState="none" />
 
 #### Example implementation
 
 ```jsx
 import { Accordion } from '@livechat/design-system-react-components';
 
-  <Accordion label="Default">
+  <Accordion
+    label={{
+      closed: (<div>Label for closed accordion</div>),
+      open: (<div>Label for open accordion</div>),
+    }}
+    multilineElement={<div>Multiline element</div>}
+    footer={<div>Footer element</div>}
+  >
   Default accordion content
 </Accordion>
 ```
 
+### Promo Accordion <a id="Promo" />
+
+<Canvas of={AccordionStories.AccordionPromoExamples} sourceState="none" />
+
+#### Example implementation
+
+```jsx
+import { AccordionPromo } from '@livechat/design-system-react-components';
+
+  <AccordionPromo
+    label={{
+      closed: (<div>Label for closed accordion</div>),
+      open: (<div>Label for open accordion</div>),
+    }}
+    multilineElement={<div>Multiline element</div>}
+    footer={<div>Footer element</div>}
+  >
+  Default accordion content
+</AccordionPromo>
+```
+
 ## Component API <a id="ComponentAPI" />
 
 <ArgTypes of={AccordionStories.Default} sort="requiredFirst" />

packages/react-components/src/components/Accordion/Accordion.module.scss

@@ -39,6 +39,11 @@ $base-class: 'accordion';
     }
   }
 
+  &--promo {
+    border: 1px solid var(--border-basic-secondary);
+    background-color: var(--surface-primary-default);
+  }
+
   &--open {
     border: 1px solid var(--action-primary-default);
     box-shadow: var(--shadow-float);
@@ -59,6 +64,10 @@ $base-class: 'accordion';
     &--open {
       transform: rotate(180deg);
     }
+
+    &--promo {
+      top: 26px;
+    }
   }
 
   &__label {
@@ -69,6 +78,11 @@ $base-class: 'accordion';
     &:hover {
       cursor: pointer;
     }
+
+    &--promo {
+      padding: var(--spacing-6) var(--spacing-12) var(--spacing-6)
+        var(--spacing-6);
+    }
   }
 
   &__content {
@@ -84,6 +98,19 @@ $base-class: 'accordion';
       &--open {
         opacity: 1;
       }
+
+      &--promo {
+        padding: 0 var(--spacing-12) var(--spacing-6) var(--spacing-6);
+      }
+    }
+  }
+
+  &__footer {
+    border-top: 1px solid var(--border-basic-secondary);
+    padding: var(--spacing-5);
+
+    &--promo {
+      padding: var(--spacing-6);
     }
   }
 }

packages/react-components/src/components/Accordion/Accordion.spec.tsx

@@ -44,26 +44,26 @@ describe('<Accordion> component', () => {
   it('should call onClose and onOpen handlers on label click', async () => {
     const onClose = vi.fn();
     const onOpen = vi.fn();
-    const { getByRole } = renderComponent({
+    const { getByText } = renderComponent({
       ...DEFAULT_PROPS,
       onClose,
       onOpen,
     });
 
-    expect(getByRole('button')).toHaveAttribute('aria-expanded', 'false');
-    userEvent.click(getByRole('button'));
+    expect(getByText('Label')).toHaveAttribute('aria-expanded', 'false');
+    userEvent.click(getByText('Label'));
     expect(onOpen).toHaveBeenCalledTimes(1);
 
     await waitFor(() => {
-      expect(getByRole('button')).toHaveAttribute('aria-expanded', 'false');
+      expect(getByText('Label')).toHaveAttribute('aria-expanded', 'false');
     });
 
-    userEvent.click(getByRole('button'));
+    userEvent.click(getByText('Label'));
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 
   it('should show different label content when open and closed', async () => {
-    const { getByText, getByRole } = renderComponent({
+    const { getByText } = renderComponent({
       ...DEFAULT_PROPS,
       label: {
         open: <div>Open label</div>,
@@ -72,7 +72,7 @@ describe('<Accordion> component', () => {
     });
 
     expect(getByText('Closed label')).toBeInTheDocument();
-    userEvent.click(getByRole('button'));
+    userEvent.click(getByText('Closed label'));
     await waitFor(() => expect(getByText('Open label')).toBeInTheDocument());
   });
 
@@ -84,4 +84,15 @@ describe('<Accordion> component', () => {
 
     expect(getByText('Multi')).toBeInTheDocument();
   });
+
+  it('should show footer element if open', async () => {
+    const { queryByText, getByText } = renderComponent({
+      ...DEFAULT_PROPS,
+      footer: <div>Footer</div>,
+    });
+
+    expect(queryByText('Footer')).not.toBeInTheDocument();
+    userEvent.click(getByText('Label'));
+    await waitFor(() => expect(queryByText('Footer')).toBeInTheDocument());
+  });
 });

packages/react-components/src/components/Accordion/Accordion.stories.css

@@ -29,3 +29,11 @@
     }
   }
 }
+
+.accordion-promo-closed-heading {
+  margin-bottom: 4px;
+}
+
+.accordion-promo-closed-description {
+  color: var(--content-basic-secondary);
+}