feat(react): accordion component

onfido · Sep 4, 2023 · 044484b · 044484b
1 parent 3bee6a9
commit 044484b
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 18 deletions.
diff --git a/packages/core/src/components/accordion/accordion.scss b/packages/core/src/components/accordion/accordion.scss
@@ -17,6 +17,7 @@
 
   .ods-accordion-item {
     overflow: hidden;
+    position: relative;
 
     &:not(:last-child) {
       border-bottom: 1px solid helpers.color('border-separator');
@@ -85,15 +86,15 @@
 
     &.-with-separator {
       position: relative;
+    }
 
-      &::before {
-        border-bottom: 1px solid helpers.color('border-separator');
-        content: '';
-        left: var(--padding);
-        position: absolute;
-        right: var(--padding);
-        top: 0;
-      }
+    &.-with-separator::before {
+      border-bottom: 1px solid helpers.color('border-separator');
+      content: '';
+      left: var(--padding);
+      position: absolute;
+      right: var(--padding);
+      top: 0;
     }
   }
 

diff --git a/packages/react/src/components/accordion/accordion.stories.tsx b/packages/react/src/components/accordion/accordion.stories.tsx
@@ -1,4 +1,4 @@
-import { Accordion, type AccordionProps } from '@onfido/castor-react';
+import { Accordion, Icon, type AccordionProps } from '@onfido/castor-react';
 import React from 'react';
 import { Meta, Story } from '../../../../../docs';
 
@@ -8,17 +8,102 @@ export default {
   args: {
     list: [
       {
-        title: 'A title with an icon',
-        iconName: 'bolt',
-        content: <div>Content example.</div>,
+        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: 'Another title without icon',
-        content: <div>Another content example.</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
@@ -22,7 +22,7 @@ export type AccordionStyles = {
   padding?: number;
 };
 
-interface Props {
+export interface AccordionProps {
   list: AccordionItem[];
   onChange?: (accordionItem: AccordionItem) => void;
   onlyOneOpen?: boolean;
@@ -53,7 +53,7 @@ const useWindowSize = () => {
   return size;
 };
 
-export const Accordion: FC<Props> = ({
+export const Accordion: FC<AccordionProps> = ({
   list: listProps,
   onChange,
   onlyOneOpen = false,
@@ -79,7 +79,12 @@ export const Accordion: FC<Props> = ({
   };
 
   const updateHeights = () =>
-    setHeights(content.current.map((item) => item.clientHeight));
+    setHeights(
+      content.current.map((item) => {
+        console.log(item.clientHeight);
+        return item.clientHeight;
+      })
+    );
 
   useEffect(() => {
     setReady(false);
@@ -154,7 +159,7 @@ export const Accordion: FC<Props> = ({
       {list.map((item, index) => (
         <div
           key={index}
-          className={classy(c('accordion-item'), { '--open': item.isOpen })}
+          className={classy(c('accordion-item'), { '-open': item.isOpen })}
         >
           <button
             className={classy(c('accordion-toggler'))}