From 408c27ecf60d0e1429c6e8dc585815d2dc9c8669 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=B4me=20Boukorras?= <jerome.boukorras@onfido.com>
Date: Mon, 12 Jun 2023 13:36:55 +0200
Subject: [PATCH] feat(react): accordion component

---
 .../src/components/accordion/accordion.scss   | 124 ++++++++++
 packages/core/src/components/index.scss       |   3 +
 .../accordion/accordion.stories.tsx           | 109 +++++++++
 .../src/components/accordion/accordion.tsx    | 219 ++++++++++++++++++
 packages/react/src/components/index.ts        |   1 +
 yarn.lock                                     |  15 ++
 6 files changed, 471 insertions(+)
 create mode 100644 packages/core/src/components/accordion/accordion.scss
 create mode 100644 packages/react/src/components/accordion/accordion.stories.tsx
 create mode 100644 packages/react/src/components/accordion/accordion.tsx

diff --git a/packages/core/src/components/accordion/accordion.scss b/packages/core/src/components/accordion/accordion.scss
new file mode 100644
index 000000000..2c7b29982
--- /dev/null
+++ b/packages/core/src/components/accordion/accordion.scss
@@ -0,0 +1,124 @@
+@use '../../helpers';
+@use '../../mixins';
+
+@mixin Accordion() {
+  @if not mixins.includes('Accordion') {
+    @include _Accordion();
+  }
+}
+
+@mixin _Accordion() {
+  .ods-accordion-box:not(.-separated) {
+    background-color: helpers.color('background-surface');
+    border: 1px solid helpers.color('border-separator');
+    border-radius: helpers.border-radius('large');
+    overflow: hidden;
+  }
+
+  .ods-accordion-item {
+    overflow: hidden;
+    position: relative;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid helpers.color('border-separator');
+    }
+  }
+
+  .-separated > .ods-accordion-item {
+    background-color: helpers.color('background-surface');
+    border: 1px solid helpers.color('border-separator');
+    border-radius: helpers.border-radius('large');
+
+    &:not(:last-child) {
+      margin-bottom: helpers.space(2);
+    }
+  }
+
+  .ods-accordion-toggler {
+    @include helpers.font('400-regular');
+    align-items: center;
+    background-color: transparent;
+    border: 0;
+    cursor: pointer;
+    display: flex;
+    gap: helpers.space(2);
+    justify-content: flex-start;
+    outline-offset: helpers.space(-0.5);
+    padding: var(--padding);
+    transition: background-color linear 0.2s;
+    width: 100%;
+
+    &:hover {
+      background-color: helpers.color('background-action-subtle-hover');
+    }
+
+    &:active {
+      background-color: helpers.color('background-action-subtle');
+    }
+  }
+
+  .ods-accordion-secondary-content {
+    * {
+      margin: 0;
+    }
+  }
+
+  .ods-accordion-chevron {
+    transition: transform linear 0.2s;
+  }
+
+  .-open > .ods-accordion-toggler > .ods-accordion-chevron {
+    transform: rotateZ(180deg);
+  }
+
+  .ods-accordion-title {
+    @include helpers.font('400-bold');
+    margin-right: auto;
+  }
+
+  .ods-accordion-content-wrapper {
+    box-sizing: border-box;
+    overflow: hidden;
+    position: absolute;
+    transition: height ease-in-out 0.3s;
+    visibility: hidden;
+    will-change: height;
+
+    &.-ready {
+      position: relative;
+      visibility: visible;
+    }
+
+    &.-with-separator {
+      position: relative;
+    }
+
+    &.-with-separator::before {
+      border-bottom: 1px solid helpers.color('border-separator');
+      content: '';
+      left: var(--padding);
+      position: absolute;
+      right: var(--padding);
+      top: 0;
+    }
+  }
+
+  .-with-separator > .ods-accordion-content {
+    margin-top: var(--padding);
+  }
+
+  .ods-accordion-content {
+    animation: fadeIn 0.4s;
+    margin: helpers.space(1) var(--padding) var(--padding);
+  }
+
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+}
diff --git a/packages/core/src/components/index.scss b/packages/core/src/components/index.scss
index f1a7e78c2..fc1dd84aa 100644
--- a/packages/core/src/components/index.scss
+++ b/packages/core/src/components/index.scss
@@ -42,6 +42,8 @@
 @forward './tooltip/tooltip';
 @use './validation/validation';
 @forward './validation/validation';
+@use './accordion/accordion.scss';
+@forward './accordion/accordion.scss';
 
 @mixin components() {
   @include asterisk.Asterisk();
@@ -66,4 +68,5 @@
   @include textarea.Textarea();
   @include tooltip.Tooltip();
   @include validation.Validation();
+  @include accordion.Accordion();
 }
diff --git a/packages/react/src/components/accordion/accordion.stories.tsx b/packages/react/src/components/accordion/accordion.stories.tsx
new file mode 100644
index 000000000..860e47e97
--- /dev/null
+++ b/packages/react/src/components/accordion/accordion.stories.tsx
@@ -0,0 +1,109 @@
+import { Accordion, Icon, type AccordionProps } from '@onfido/castor-react';
+import React from 'react';
+import { Meta, Story } from '../../../../../docs';
+
+export default {
+  title: 'React/Accordion',
+  component: Accordion,
+  args: {
+    list: [
+      {
+        title: <>Long text</>,
+        name: '1',
+        iconName: 'book-open',
+        content: (
+          <div style={{ overflow: 'hidden' }}>
+            <p style={{ margin: '0 0 8px' }}>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              Vestibulum non augue facilisis, accumsan magna ut, tempus turpis.
+              Aenean quis bibendum nulla, ut luctus arcu. Sed et porta ante.
+              Donec commodo mi sit amet est pharetra, ut sagittis velit rhoncus.
+              Fusce risus arcu, feugiat a dapibus eget, commodo eleifend dui.
+              Nunc quam leo, aliquam id nisi a, dictum eleifend orci. Morbi
+              lacinia felis dolor, sed sagittis nisi hendrerit ut. Phasellus
+              iaculis rutrum ipsum in sollicitudin. Mauris faucibus commodo
+              elementum. Nunc in augue sit amet sem elementum congue. Fusce
+              mollis lorem augue. Aenean quis sem iaculis, tempor nunc ut,
+              sollicitudin risus. Nulla sem sem, bibendum eu velit vel, semper
+              placerat risus.
+            </p>
+            <p style={{ margin: '0 0 8px' }}>
+              Nunc aliquam elit erat, semper egestas nisi volutpat non. Duis sed
+              ultrices ipsum. Nulla non nisl a magna sodales interdum tempor ut
+              mi. Quisque ut aliquet sem. Aliquam erat volutpat. In molestie
+              fermentum mi eu scelerisque. Vestibulum in lacinia quam.
+            </p>
+            <p style={{ margin: '0 0 8px' }}>
+              Integer sit amet tristique est. Nunc porttitor nunc nec luctus
+              dignissim. Integer at nisi ipsum. Cras aliquet justo leo, a
+              condimentum dolor imperdiet quis. Cras viverra erat at ornare
+              venenatis. Donec in facilisis mauris. Aliquam sit amet maximus
+              ligula. Proin gravida elit mi, eget maximus mi consequat auctor.
+              Aliquam erat volutpat.
+            </p>
+            <p style={{ margin: '0 0 8px' }}>
+              Nunc ultrices ligula sit amet elit placerat, eu rutrum massa
+              bibendum. Praesent et pulvinar ipsum. Vestibulum justo justo,
+              auctor sed ligula sit amet, posuere maximus ipsum. Aenean nec arcu
+              dui. Integer non sagittis nisi. Aenean placerat vehicula lacinia.
+              Mauris blandit massa dui. Vivamus ut nisl nunc. Suspendisse non
+              risus non nibh mattis maximus at id enim. Mauris bibendum est
+              eros, eu consequat tellus finibus eu. Sed euismod nec tellus ac
+              elementum. Duis non lectus congue, rhoncus mi eget, vestibulum
+              odio. Morbi iaculis venenatis augue non euismod.
+            </p>
+            <p style={{ margin: '0' }}>
+              Class aptent taciti sociosqu ad litora torquent per conubia
+              nostra, per inceptos himenaeos. Ut lectus elit, mollis ut lectus
+              at, tempor bibendum purus. Donec volutpat facilisis mi, id laoreet
+              purus fermentum a. Proin pharetra tristique magna, non fermentum
+              odio accumsan in. In neque odio, pretium at lectus nec, pulvinar
+              eleifend massa. Sed placerat urna at lorem auctor rhoncus. Morbi
+              metus ligula, ullamcorper ut erat fringilla, congue tempor arcu.
+              Vestibulum dapibus nec elit et iaculis.
+            </p>
+          </div>
+        ),
+      },
+      {
+        title: <>List</>,
+        iconName: 'list-ul',
+        name: '2',
+        content: (
+          <ul>
+            <li>Mercury</li>
+            <li>Venus</li>
+            <li>Earth</li>
+            <li>Mars</li>
+            <li>Jupiter</li>
+            <li>Saturn</li>
+            <li>Uranus</li>
+            <li>Neptune</li>
+          </ul>
+        ),
+      },
+      {
+        title: <>Empty</>,
+        name: '2',
+        secondaryContent: <Icon name="error-circle" aria-hidden="true" />,
+        content: (
+          <div style={{ padding: 100, textAlign: 'center' }}>
+            Nothing to see here.
+          </div>
+        ),
+      },
+    ],
+  },
+  parameters: {},
+} as Meta<AccordionProps>;
+
+export const Playground: Story<AccordionProps> = {};
+export const Separated: Story<AccordionProps> = {
+  render: (props) => <Accordion {...props} separated />,
+};
+export const WithSeparator: Story<AccordionProps> = {
+  render: (props) => <Accordion {...props} withSeparator />,
+};
+export const OnlyOneOpen: Story<AccordionProps> = {
+  render: (props) => <Accordion {...props} onlyOneOpen />,
+};
diff --git a/packages/react/src/components/accordion/accordion.tsx b/packages/react/src/components/accordion/accordion.tsx
new file mode 100644
index 000000000..556296938
--- /dev/null
+++ b/packages/react/src/components/accordion/accordion.tsx
@@ -0,0 +1,219 @@
+import { c, classy, cssVars, space } from '@onfido/castor';
+import type { IconName } from '@onfido/castor-icons';
+import { Icon } from '@onfido/castor-react';
+import React, {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type FC,
+} from 'react';
+
+export type AccordionItem = {
+  name: string;
+  isOpen?: boolean;
+  title: React.ReactElement;
+  iconName?: IconName;
+  content: React.ReactElement;
+  secondaryContent?: React.ReactElement;
+};
+
+export type AccordionStyles = {
+  padding?: number;
+};
+
+interface AccordionBaseProps {
+  list: AccordionItem[];
+  onChange?: (accordionItem: AccordionItem) => void;
+  onlyOneOpen?: boolean;
+  separated?: boolean;
+  withSeparator?: boolean;
+  styles?: AccordionStyles;
+  className?: string;
+}
+
+interface AccordionPropsWithoutOnlyOneOpen
+  extends Omit<AccordionBaseProps, 'onlyOneOpen'> {
+  onlyOneOpen?: never;
+}
+
+export type AccordionProps = AccordionBaseProps['separated'] extends true
+  ? AccordionPropsWithoutOnlyOneOpen
+  : AccordionBaseProps;
+
+const defaultStyles = {
+  padding: 3,
+};
+
+const useWindowSize = () => {
+  const [size, setSize] = useState([0, 0]);
+
+  useLayoutEffect(() => {
+    const updateSize = () => {
+      setSize([window.innerWidth, window.innerHeight]);
+    };
+
+    window.addEventListener('resize', updateSize);
+    updateSize();
+
+    return () => window.removeEventListener('resize', updateSize);
+  }, []);
+
+  return size;
+};
+
+export const Accordion: FC<AccordionProps> = ({
+  list: listProps,
+  onChange,
+  onlyOneOpen = false,
+  separated = false,
+  withSeparator = false,
+  styles: stylesProps = defaultStyles,
+  className = '',
+}) => {
+  const initHeights: number[] = [];
+  const [list, setList] = useState(listProps);
+  const [heights, setHeights] = useState(initHeights);
+  const [ready, setReady] = useState(false);
+  const init: HTMLDivElement[] = [];
+  const content = useRef(init);
+  const [windowWidth] = useWindowSize();
+  const [animatedItems, setAnimatedItems] = useState(
+    new Array(list.length).fill(false)
+  );
+
+  const _styles = {
+    ...defaultStyles,
+    ...stylesProps,
+  };
+
+  const updateHeights = () =>
+    setHeights(
+      content.current.map((item) => {
+        console.log(item.clientHeight);
+        return item.clientHeight;
+      })
+    );
+
+  useEffect(() => {
+    setReady(false);
+  }, [windowWidth]);
+
+  useEffect(() => {
+    if (!ready) {
+      updateHeights();
+    }
+  }, [ready]);
+
+  useEffect(() => {
+    if (content.current.length) {
+      updateHeights();
+    }
+  }, [content]);
+
+  useEffect(() => {
+    if (heights.length === list.length) {
+      setReady(true);
+    }
+  }, [heights]);
+
+  const handleClick = (index: number) => () => {
+    let newList = [...list];
+
+    if (onlyOneOpen && !separated) {
+      newList = newList.map((item, newIndex) => ({
+        ...item,
+        isOpen: newIndex !== index ? false : !item.isOpen,
+      }));
+    } else {
+      newList[index].isOpen = !list[index].isOpen;
+    }
+    setList(newList);
+    if (onChange) onChange(newList[index]);
+  };
+
+  const handleRef = (index: number) => (el: HTMLDivElement) =>
+    (content.current[index] = el);
+
+  const style = cssVars({ padding: space(_styles.padding) });
+
+  const animate = (index: number, started: boolean) => () => {
+    const newAnimatedItems = [...animatedItems];
+    newAnimatedItems[index] = started;
+    setAnimatedItems(newAnimatedItems);
+  };
+
+  useLayoutEffect(() => {
+    list.forEach((_, index) => {
+      const el = content.current[index];
+      el.addEventListener('transitionstart', animate(index, true));
+      el.addEventListener('transitionend', animate(index, false));
+    });
+
+    return () =>
+      list.forEach((_, index) => {
+        const el = content.current[index];
+        el.removeEventListener('transitionstart', animate(index, true));
+        el.removeEventListener('transitionend', animate(index, false));
+      });
+  }, []);
+
+  return (
+    <div
+      style={style}
+      className={classy(c('accordion-box'), className, {
+        '-separated': separated,
+      })}
+    >
+      {list.map((item, index) => (
+        <div
+          key={index}
+          className={classy(c('accordion-item'), { '-open': item.isOpen })}
+        >
+          <button
+            className={classy(c('accordion-toggler'))}
+            onClick={handleClick(index)}
+            aria-expanded={item.isOpen}
+            aria-controls={`${item.name}-content`}
+            id={`${item.name}-toggler`}
+          >
+            {item.iconName && <Icon name={item.iconName} aria-hidden="true" />}
+            <span className={classy(c('accordion-title'))}>{item.title}</span>
+            {item.secondaryContent && (
+              <span className={classy(c('accordion-secondary-content'))}>
+                {item.secondaryContent}
+              </span>
+            )}
+            <Icon
+              className={classy(c('accordion-chevron'))}
+              name="chevron-down"
+              aria-hidden="true"
+            />
+          </button>
+          <div
+            id={`${item.name}-content`}
+            ref={handleRef(index)}
+            role="region"
+            aria-labelledby={`${item.name}-toggler`}
+            className={classy(c('accordion-content-wrapper'), {
+              '-ready': ready,
+              '-with-separator': withSeparator,
+            })}
+            style={{
+              height: ready ? (item.isOpen ? heights[index] : 0) : 'auto',
+            }}
+            aria-hidden={!item.isOpen}
+          >
+            {(!ready ||
+              content.current[index].clientHeight !== 0 ||
+              animatedItems[index]) && (
+              <div className={classy(c('accordion-content'))}>
+                {item.content}
+              </div>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts
index 34a4d39ab..b19eb3447 100644
--- a/packages/react/src/components/index.ts
+++ b/packages/react/src/components/index.ts
@@ -1,3 +1,4 @@
+export * from './accordion/accordion';
 export * from './asterisk/asterisk';
 export * from './button/button';
 export * from './checkbox/checkbox';
diff --git a/yarn.lock b/yarn.lock
index 73b9f4cee..c811aefe1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12735,6 +12735,14 @@ react-dom@^17.0.2:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
+react-dom@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
+  dependencies:
+    loose-envify "^1.1.0"
+    scheduler "^0.23.0"
+
 react-element-to-jsx-string@^14.3.4:
   version "14.3.4"
   resolved "https://registry.yarnpkg.com/react-element-to-jsx-string/-/react-element-to-jsx-string-14.3.4.tgz#709125bc72f06800b68f9f4db485f2c7d31218a8"
@@ -13393,6 +13401,13 @@ scheduler@^0.20.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+scheduler@^0.23.0:
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
+  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
+  dependencies:
+    loose-envify "^1.1.0"
+
 schema-utils@2.7.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.0.tgz#17151f76d8eae67fbbf77960c33c676ad9f4efc7"