feat(Accordion): new component

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

@@ -0,0 +1,29 @@
+import { Canvas, ArgTypes, Meta, Title } from '@storybook/blocks';
+
+import * as AccordionStories from './Accordion.stories';
+
+<Meta of={AccordionStories} />
+
+<Title>Accordion</Title>
+
+[Intro](#Intro) | [Component API](#ComponentAPI)
+
+## Intro <a id="Intro" />
+
+Accordion is a simple component for building expandable tiles that display provided content when opened.
+
+<Canvas of={AccordionStories.Examples} sourceState="none" />
+
+#### Example implementation
+
+```jsx
+import { Accordion } from '@livechat/design-system-react-components';
+
+  <Accordion label="Default">
+  Default accordion content
+</Accordion>
+```
+
+## Component API <a id="ComponentAPI" />
+
+<ArgTypes of={AccordionStories.Default} sort="requiredFirst" />

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

@@ -0,0 +1,89 @@
+$base-class: 'accordion';
+
+.#{$base-class} {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  justify-content: space-between;
+  transition: all var(--transition-duration-moderate-1);
+  border: 1px solid transparent;
+  border-radius: var(--radius-4);
+  box-shadow: unset;
+  background-color: var(--surface-secondary-default);
+  width: 100%;
+  min-height: 24px;
+
+  &:focus-visible {
+    outline: 0;
+    box-shadow: var(--shadow-focus);
+  }
+
+  &:hover {
+    border-color: var(--border-basic-hover);
+    box-shadow: var(--shadow-float);
+  }
+
+  &--warning {
+    background-color: var(--surface-accent-emphasis-min-warning);
+
+    &:hover {
+      border-color: var(--border-basic-warning);
+    }
+  }
+
+  &--error {
+    background-color: var(--surface-accent-emphasis-min-negative);
+
+    &:hover {
+      border-color: var(--content-basic-negative);
+    }
+  }
+
+  &--open {
+    border: 1px solid var(--action-primary-default);
+    box-shadow: var(--shadow-float);
+    background-color: var(--surface-primary-default);
+
+    &:hover {
+      border-color: var(--action-primary-default);
+    }
+  }
+
+  &__chevron {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    transition: inherit;
+    pointer-events: none;
+
+    &--open {
+      transform: rotate(180deg);
+    }
+  }
+
+  &__label {
+    margin: 0;
+    padding: var(--spacing-5) var(--spacing-12) var(--spacing-5)
+      var(--spacing-5);
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  &__content {
+    transition: inherit;
+    height: 100%;
+    overflow: hidden;
+
+    &__inner {
+      transition: all var(--transition-duration-moderate-1);
+      opacity: 0;
+      padding: 0 var(--spacing-12) var(--spacing-5) var(--spacing-5);
+
+      &--open {
+        opacity: 1;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,83 @@
+import * as React from 'react';
+
+import { vi } from 'vitest';
+
+import { render, userEvent, waitFor } from 'test-utils';
+
+import { Accordion } from './Accordion';
+import { IAccordionProps } from './types';
+
+const DEFAULT_PROPS = {
+  label: 'Label',
+  children: <div>Content</div>,
+};
+
+const renderComponent = (props: IAccordionProps) => {
+  return render(<Accordion {...props} />);
+};
+
+describe('<Accordion> component', () => {
+  it('should allow for custom class', () => {
+    const { container } = renderComponent({
+      ...DEFAULT_PROPS,
+      className: 'my-class',
+    });
+
+    expect(container.firstChild).toHaveClass('my-class');
+  });
+
+  it('should render as closed by default', () => {
+    const { getByText, queryByText } = renderComponent(DEFAULT_PROPS);
+
+    expect(getByText('Label')).toBeInTheDocument();
+    expect(queryByText('Content')).not.toBeInTheDocument();
+  });
+
+  it('should render as open if openOnInit is set true', () => {
+    const { getByText } = renderComponent({
+      ...DEFAULT_PROPS,
+      openOnInit: true,
+    });
+
+    expect(getByText('Label')).toBeInTheDocument();
+    expect(getByText('Content')).toBeInTheDocument();
+  });
+
+  it('should call onClose and onOpen handlers on label click', () => {
+    const onClose = vi.fn();
+    const onOpen = vi.fn();
+    const { getByRole } = renderComponent({
+      ...DEFAULT_PROPS,
+      onClose,
+      onOpen,
+    });
+
+    userEvent.click(getByRole('button'));
+    expect(onOpen).toHaveBeenCalledTimes(1);
+    userEvent.click(getByRole('button'));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('should show different label content when open and closed', async () => {
+    const { getByText, getByRole } = renderComponent({
+      ...DEFAULT_PROPS,
+      label: {
+        open: <div>Open label</div>,
+        closed: <div>Closed label</div>,
+      },
+    });
+
+    expect(getByText('Closed label')).toBeInTheDocument();
+    userEvent.click(getByRole('button'));
+    await waitFor(() => expect(getByText('Open label')).toBeInTheDocument());
+  });
+
+  it('should show multiline element if closed', () => {
+    const { getByText } = renderComponent({
+      ...DEFAULT_PROPS,
+      multilineElement: <div>Multi</div>,
+    });
+
+    expect(getByText('Multi')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,31 @@
+.accordion-content-container {
+  border-left: 1px dashed var(--border-basic-primary);
+  padding-left: var(--spacing-6);
+}
+
+.rule-picker {
+  margin-bottom: var(--spacing-4);
+  max-width: 50%;
+}
+
+.label {
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+  align-items: center;
+}
+
+.multiline {
+  border-radius: var(--radius-3);
+  background-color: var(--surface-tertiary-default);
+  padding: var(--spacing-3);
+  white-space: pre-wrap;
+
+  p {
+    margin-top: 0;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}

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

@@ -0,0 +1,113 @@
+import * as React from 'react';
+
+import { Tag as TagIcon } from '@livechat/design-system-icons';
+import { Meta } from '@storybook/react';
+
+import { StoryDescriptor } from '../../stories/components/StoryDescriptor';
+import { Icon } from '../Icon';
+import { IPickerListItem, Picker } from '../Picker';
+import { Tag } from '../Tag';
+
+import { Accordion } from './Accordion';
+import { RULE_PICKER_OPTIONS, TAGS_PICKER_OPTIONS } from './stories-helpers';
+
+import './Accordion.stories.css';
+
+export default {
+  title: 'Components/Accordion',
+  component: Accordion,
+} as Meta<typeof Accordion>;
+
+export const Default = (): React.ReactElement => {
+  return <Accordion label="Accordion label">Accordion content</Accordion>;
+};
+
+export const Kinds = (): React.ReactElement => {
+  return (
+    <div>
+      <StoryDescriptor title="Default">
+        <Accordion label="Default" kind="default">
+          Default accordion content
+        </Accordion>
+      </StoryDescriptor>
+      <StoryDescriptor title="Warning">
+        <Accordion label="Warning" kind="warning">
+          Warning accordion content
+        </Accordion>
+      </StoryDescriptor>
+      <StoryDescriptor title="Error">
+        <Accordion label="Error" kind="error">
+          Error accordion content
+        </Accordion>
+      </StoryDescriptor>
+    </div>
+  );
+};
+
+export const Examples = (): React.ReactElement => {
+  const [ruleSelected, setRuleSelected] = React.useState<
+    IPickerListItem[] | null
+  >([RULE_PICKER_OPTIONS[0]]);
+  const [tagSelected, setTagSelected] = React.useState<
+    IPickerListItem[] | null
+  >([TAGS_PICKER_OPTIONS[0]]);
+
+  return (
+    <div>
+      <StoryDescriptor title="With changing label">
+        <Accordion
+          label={{
+            closed: (
+              <div className="label">
+                <Icon source={TagIcon} />
+                Tag <Tag>{ruleSelected && ruleSelected[0].name}</Tag>
+                and
+                {tagSelected &&
+                  tagSelected &&
+                  tagSelected.map((tag) => <Tag key={tag.key}>{tag.name}</Tag>)}
+              </div>
+            ),
+            open: <div className="label">Edit your tags</div>,
+          }}
+        >
+          <div className="accordion-content-container">
+            <div className="rule-picker">
+              <Picker
+                id="rule-picker"
+                options={RULE_PICKER_OPTIONS}
+                selected={ruleSelected}
+                hideClearButton
+                searchDisabled
+                onSelect={(selected) => setRuleSelected(selected)}
+              />
+            </div>
+            <Picker
+              id="first-picker"
+              type="multi"
+              options={TAGS_PICKER_OPTIONS}
+              selected={tagSelected}
+              onSelect={(selected) => setTagSelected(selected)}
+            />
+          </div>
+        </Accordion>
+      </StoryDescriptor>
+      <StoryDescriptor title="With multiline element">
+        <Accordion
+          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
+        </Accordion>
+      </StoryDescriptor>
+    </div>
+  );
+};