refactor(accordion): implement accordion width & position

vickonrails · Jun 9, 2021 · dc1e122 · dc1e122 · vercel · Jun 9, 2021
1 parent be90f81
commit dc1e122
Showing 1 changed file with 138 additions and 2 deletions.
diff --git a/src/components/accordion/accordion.stories.tsx b/src/components/accordion/accordion.stories.tsx
@@ -139,7 +139,7 @@ export const Sizes = () => (
 export const Width = () => (
   <>
     <Heading level='h2' size='xl'>
-      Width of 10em
+      10em Width
     </Heading>
     <Accordion width='10em'>
       <AccordionPanel header='One'>
@@ -171,7 +171,7 @@ export const Width = () => (
     </Accordion>
 
     <Heading level='h2' size='xl'>
-      Width of 30em
+      30em Width
     </Heading>
     <Accordion width='30em'>
       <AccordionPanel header='One'>
@@ -235,3 +235,139 @@ export const Width = () => (
     </Accordion>
   </>
 )
+
+export const ShowIcon = () => (
+  <>
+    <Heading level='h2' size='xl'>
+      Hide Accordion Icon
+    </Heading>
+    <Accordion showIcon={false}>
+      <AccordionPanel header='One'>
+        <Box>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet ullam
+          aspernatur velit blanditiis nobis magnam amet expedita dolorem!
+          Doloremque temporibus, atque eveniet possimus culpa veritatis quia
+          perferendis aspernatur maxime earum.
+        </Box>
+      </AccordionPanel>
+
+      <AccordionPanel header='Two'>
+        <Box>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet ullam
+          aspernatur velit blanditiis nobis magnam amet expedita dolorem!
+          Doloremque temporibus, atque eveniet possimus culpa veritatis quia
+          perferendis aspernatur maxime earum.
+        </Box>
+      </AccordionPanel>
+
+      <AccordionPanel header='Three'>
+        <Box>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet ullam
+          aspernatur velit blanditiis nobis magnam amet expedita dolorem!
+          Doloremque temporibus, atque eveniet possimus culpa veritatis quia
+          perferendis aspernatur maxime earum.
+        </Box>
+      </AccordionPanel>
+    </Accordion>
+
+    <Heading level='h2' size='xl'>
+      Show Accordion Icon
+    </Heading>
+    <Accordion showIcon>
+      <AccordionPanel header='One'>
+        <Box>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet ullam
+          aspernatur velit blanditiis nobis magnam amet expedita dolorem!
+          Doloremque temporibus, atque eveniet possimus culpa veritatis quia
+          perferendis aspernatur maxime earum.
+        </Box>
+      </AccordionPanel>
+
+      <AccordionPanel header='Two'>
+        <Box>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet ullam
+          aspernatur velit blanditiis nobis magnam amet expedita dolorem!
+          Doloremque temporibus, atque eveniet possimus culpa veritatis quia
+          perferendis aspernatur maxime earum.
+        </Box>
+      </AccordionPanel>
+
+      <AccordionPanel header='Three'>
+        <Box>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet ullam
+          aspernatur velit blanditiis nobis magnam amet expedita dolorem!
+          Doloremque temporibus, atque eveniet possimus culpa veritatis quia
+          perferendis aspernatur maxime earum.
+        </Box>
+      </AccordionPanel>
+    </Accordion>
+  </>
+)
+
+export const IconPosition = () => (
+  <>
+    <Heading level='h2' size='xl'>
+      Left Icon Position
+    </Heading>
+    <Accordion iconPosition='left'>
+      <AccordionPanel header='One'>
+        <Box>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet ullam
+          aspernatur velit blanditiis nobis magnam amet expedita dolorem!
+          Doloremque temporibus, atque eveniet possimus culpa veritatis quia
+          perferendis aspernatur maxime earum.
+        </Box>
+      </AccordionPanel>
+
+      <AccordionPanel header='Two'>
+        <Box>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet ullam
+          aspernatur velit blanditiis nobis magnam amet expedita dolorem!
+          Doloremque temporibus, atque eveniet possimus culpa veritatis quia
+          perferendis aspernatur maxime earum.
+        </Box>
+      </AccordionPanel>
+
+      <AccordionPanel header='Three'>
+        <Box>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet ullam
+          aspernatur velit blanditiis nobis magnam amet expedita dolorem!
+          Doloremque temporibus, atque eveniet possimus culpa veritatis quia
+          perferendis aspernatur maxime earum.
+        </Box>
+      </AccordionPanel>
+    </Accordion>
+
+    <Heading level='h2' size='xl'>
+      Right Icon Position
+    </Heading>
+    <Accordion iconPosition='right'>
+      <AccordionPanel header='One'>
+        <Box>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet ullam
+          aspernatur velit blanditiis nobis magnam amet expedita dolorem!
+          Doloremque temporibus, atque eveniet possimus culpa veritatis quia
+          perferendis aspernatur maxime earum.
+        </Box>
+      </AccordionPanel>
+
+      <AccordionPanel header='Two'>
+        <Box>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet ullam
+          aspernatur velit blanditiis nobis magnam amet expedita dolorem!
+          Doloremque temporibus, atque eveniet possimus culpa veritatis quia
+          perferendis aspernatur maxime earum.
+        </Box>
+      </AccordionPanel>
+
+      <AccordionPanel header='Three'>
+        <Box>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet ullam
+          aspernatur velit blanditiis nobis magnam amet expedita dolorem!
+          Doloremque temporibus, atque eveniet possimus culpa veritatis quia
+          perferendis aspernatur maxime earum.
+        </Box>
+      </AccordionPanel>
+    </Accordion>
+  </>
+)