[Feature] Accordion

packages/react/rollup.config.js

@@ -75,6 +75,7 @@ export default [
       index: 'src/index.ts',
       'components/index': 'src/components/index.ts',
       'icons/index': 'src/icons/index.ts',
+      'components/Accordion/index': 'src/components/accordion/index.ts',
       'components/Button/index': 'src/components/button/index.ts',
       'components/Card/index': 'src/components/card/index.ts',
       'components/Checkbox/index': 'src/components/checkbox/index.ts',

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

@@ -0,0 +1,79 @@
+.accordion {
+  --background-color: var(--color-white);
+  --border-color: var(--color-black-60);
+  --padding-horizontal: var(--spacing-m);
+  --padding-vertical: var(--spacing-m);
+  --header-font-color: var(--color-black-90);
+  --header-font-size: var(--fontsize-heading-m);
+  --header-line-height: var(--lineheight-m);
+  --button-size: 28px;
+  --button-border-color-hover: var(--color-coat-of-arms);
+  --content-font-color: var(--color-black-90);
+  --content-font-size: var(--fontsize-body-m);
+  --content-line-height: var(--lineheight-l);
+
+  &:not(.card) {
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  &.card {
+    background-color: var(--background-color);
+    padding-left: var(--padding-horizontal);
+    padding-right: var(--padding-horizontal);
+  }
+
+  &.border {
+    border: 2px solid var(--border-color);
+  }
+}
+
+.accordionHeader {
+  position: relative;
+  color: var(--header-font-color);
+  font-size: var(--header-font-size);
+  font-weight: bold;
+  line-height: var(--header-line-height);
+  padding-top: var(--padding-vertical);
+  padding-bottom: var(--padding-vertical);
+  padding-right: var(--button-size);
+}
+
+.accordionButton {
+  box-sizing: border-box;
+  border: 2px solid transparent;
+  width: var(--button-size);
+  height: var(--button-size);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  cursor: pointer;
+  background-color: transparent;
+  color: var(--header-font-color);
+
+  position: absolute;
+  top: 50%;
+  right: 0;
+
+  margin-top: calc(-1*(var(--button-size)/2));
+  padding: 0;
+
+  &:focus {
+    outline: none;
+    border: 2px solid var(--button-border-color-hover, transparent);
+  }
+
+  .accordionButtonIcon {
+    width: 100%;
+    height: 100%;
+    color: var(--header-font-color);
+  }
+}
+
+.accordionContent {
+  font-size: var(--content-font-size);
+  line-height: var(--content-line-height);
+  padding-bottom: var(--padding-vertical);
+  color: var(--content-font-color);
+}

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

@@ -0,0 +1,123 @@
+import React from 'react';
+
+import { IconAngleDown, IconAngleUp } from '../../icons';
+import { Button } from '../button';
+import { Card } from '../card';
+import { Select } from '../dropdown/select';
+import { Accordion } from './Accordion';
+import { useAccordion } from './useAccordion';
+
+export default {
+  component: Accordion,
+  title: 'Components/Accordion',
+  decorators: [(storyFn) => <div style={{ maxWidth: '480px' }}>{storyFn()}</div>],
+  parameters: {
+    controls: { hideNoControlsWarning: true },
+  },
+  args: {
+    heading: 'How to publish data?',
+    children: 'To publish your data, open your profile settings and click buttton "Publish".',
+    style: { maxWidth: '360px' },
+  },
+};
+
+export const Default = (args) => <Accordion {...args} />;
+
+export const CardAccordion = (args) => (
+  <>
+    <Accordion {...args} card />
+    <Accordion {...args} card border />
+  </>
+);
+CardAccordion.storyName = 'Card';
+CardAccordion.args = {
+  style: { marginBottom: 'var(--spacing-m)', maxWidth: '360px' },
+};
+
+export const CustomTheme = (args) => (
+  <>
+    <Accordion
+      {...args}
+      card
+      border
+      theme={{
+        '--background-color': 'var(--color-white)',
+        '--border-color': 'var(--color-brick)',
+        '--padding-horizontal': 'var(--spacing-m)',
+        '--padding-vertical': 'var(--spacing-m)',
+        '--header-font-color': 'var(--color-black-90)',
+        '--header-font-size': 'var(--fontsize-heading-l)',
+        '--header-line-height': 'var(--lineheight-l)',
+        '--button-size': '28px',
+        '--button-border-color-hover': 'var(--color-coat-of-arms)',
+        '--content-font-color': 'var(--color-black-90)',
+        '--content-font-size': 'var(--fontsize-body-m)',
+        '--content-line-height': 'var(--lineheight-l)',
+      }}
+    />
+    <Accordion
+      {...args}
+      card
+      style={{ maxWidth: '360px', marginTop: 'var(--spacing-s)' }}
+      theme={{
+        '--background-color': 'var(--color-bus)',
+        '--padding-horizontal': 'var(--spacing-m)',
+        '--padding-vertical': 'var(--spacing-m)',
+        '--header-font-color': 'var(--color-white)',
+        '--header-font-size': 'var(--fontsize-heading-s)',
+        '--header-line-height': 'var(--lineheight-s)',
+        '--button-size': '28px',
+        '--button-border-color-hover': 'var(--color-white)',
+        '--content-font-color': 'var(--color-white)',
+        '--content-font-size': 'var(--fontsize-body-m)',
+        '--content-line-height': 'var(--lineheight-l)',
+      }}
+    />
+  </>
+);
+CustomTheme.storyName = 'Custom theme';
+CustomTheme.args = {
+  style: { marginBottom: 'var(--spacing-m)', maxWidth: '480px' },
+};
+
+export const CustomAccordion = () => {
+  const { isOpen, buttonProps, contentProps } = useAccordion({ initiallyOpen: false });
+  const icon = isOpen ? <IconAngleUp aria-hidden /> : <IconAngleDown aria-hidden />;
+  return (
+    <>
+      <Button iconLeft={icon} {...buttonProps}>
+        Advanced filters
+      </Button>
+      <Card border aria-label="Advanced filters" style={{ marginTop: 'var(--spacing-m)' }} {...contentProps}>
+        <Select
+          multiselect
+          label="Filter by event category"
+          placeholder="No selected categories"
+          options={[{ label: 'Culture & arts' }, { label: 'Sports' }, { label: 'Museums' }, { label: 'Music' }]}
+          clearButtonAriaLabel="Clear all selections"
+          selectedItemRemoveButtonAriaLabel="Remove"
+        />
+        <Select
+          multiselect
+          label="Filter by event location"
+          placeholder="No selected locations"
+          options={[
+            { label: 'Haaga' },
+            { label: 'Herttoniemi' },
+            { label: 'Kallio' },
+            { label: 'Kamppi' },
+            { label: 'Laajasalo' },
+            { label: 'Lauttasaari' },
+            { label: 'Mellunkylä' },
+            { label: 'Pasila' },
+          ]}
+          clearButtonAriaLabel="Clear all selections"
+          selectedItemRemoveButtonAriaLabel="Remove"
+          style={{ marginTop: 'var(--spacing-s)' }}
+        />
+      </Card>
+    </>
+  );
+};
+CustomAccordion.storyName = 'Custom accordion';
+CustomAccordion.args = {};

packages/react/src/components/accordion/Accordion.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import { Accordion } from './Accordion';
+
+describe('<Accordion /> spec', () => {
+  it('renders the component', () => {
+    const { asFragment } = render(<Accordion heading="Foo">Bar</Accordion>);
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should not have basic accessibility issues', async () => {
+    const { container } = render(<Accordion heading="Foo">Bar</Accordion>);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});