feat(Accordion): new promo version

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

@@ -84,4 +84,15 @@ describe('<Accordion> component', () => {
 
     expect(getByText('Multi')).toBeInTheDocument();
   });
+
+  it('should show footer element if open', async () => {
+    const { queryByText, getByRole } = renderComponent({
+      ...DEFAULT_PROPS,
+      footer: <div>Footer</div>,
+    });
+
+    expect(queryByText('Footer')).not.toBeInTheDocument();
+    userEvent.click(getByRole('button'));
+    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);
+}

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

@@ -7,15 +7,22 @@ import { StoryDescriptor } from '../../stories/components/StoryDescriptor';
 import { Icon } from '../Icon';
 import { IPickerListItem, Picker } from '../Picker';
 import { Tag } from '../Tag';
+import { Heading, Text } from '../Typography';
 
-import { Accordion } from './Accordion';
+import {
+  Accordion,
+  AccordionPromo as AccordionPromoComponent,
+} from './Accordion';
 import { RULE_PICKER_OPTIONS, TAGS_PICKER_OPTIONS } from './stories-helpers';
 
 import './Accordion.stories.css';
 
 export default {
   title: 'Components/Accordion',
   component: Accordion,
+  subcomponents: {
+    AccordionPromo: AccordionPromoComponent,
+  },
 } as Meta<typeof Accordion>;
 
 export const Default = (): React.ReactElement => {
@@ -108,6 +115,83 @@ export const Examples = (): React.ReactElement => {
           Default accordion content
         </Accordion>
       </StoryDescriptor>
+      <StoryDescriptor title="With footer">
+        <Accordion label="Default" footer={<div>Example footer element</div>}>
+          Default accordion content
+        </Accordion>
+      </StoryDescriptor>
+    </div>
+  );
+};
+
+export const AccordionPromo = (): React.ReactElement => {
+  return (
+    <AccordionPromoComponent label="Default">
+      Default accordion content
+    </AccordionPromoComponent>
+  );
+};
+
+export const AccordionPromoExamples = (): React.ReactElement => {
+  return (
+    <div>
+      <StoryDescriptor title="With changing label">
+        <AccordionPromoComponent
+          label={{
+            closed: (
+              <div>
+                <Heading
+                  as="div"
+                  size="xs"
+                  className="accordion-promo-closed-heading"
+                >
+                  This example headline has 40 characters
+                </Heading>
+                <Text
+                  as="div"
+                  size="sm"
+                  className="accordion-promo-closed-description"
+                >
+                  A description with a maximum of 100 characters. That usually
+                  means only one or two sentences
+                </Text>
+              </div>
+            ),
+            open: (
+              <Heading as="div" size="xs">
+                Example headline for open state
+              </Heading>
+            ),
+          }}
+        >
+          Default accordion content
+        </AccordionPromoComponent>
+      </StoryDescriptor>
+      <StoryDescriptor title="With multiline element">
+        <AccordionPromoComponent
+          label="Default"
+          multilineElement={
+            <div className="multiline">
+              <p>{`Hello {{ticket.requesterName}},`}</p>
+              <p>
+                We haven't heard back from you for some time. If you need any
+                further help, please follow up on this email.
+              </p>
+              <p>Thank you.</p>
+            </div>
+          }
+        >
+          Default accordion content
+        </AccordionPromoComponent>
+      </StoryDescriptor>
+      <StoryDescriptor title="With footer">
+        <AccordionPromoComponent
+          label="Default"
+          footer={<div>Example footer element</div>}
+        >
+          Default accordion content
+        </AccordionPromoComponent>
+      </StoryDescriptor>
     </div>
   );
 };