Feature/accordion

src/components/Accordion/Accordion.stories.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { withDesign } from 'storybook-addon-designs';
+import { Accordion, AccordionProps } from './Accordion';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/Accordion',
+  component: Accordion,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  args: {
+    title: 'Accordion Title',
+    titleSize: 'h3',
+  },
+  parameters: {
+    design: [
+      {
+        name: 'light',
+        type: 'figma',
+        url: 'https://www.figma.com/file/qUvylGh5ubOWlpqlplVORt/IZ-Design-System---%F0%9F%9A%80-Live?type=design&node-id=3261%3A4322&mode=design&t=nkOlaGT8Xge4iBwT-1',
+      },
+      {
+        name: 'dark',
+        type: 'figma',
+        url: 'https://www.figma.com/file/qUvylGh5ubOWlpqlplVORt/IZ-Design-System---%F0%9F%9A%80-Live?type=design&node-id=3407%3A10656&mode=design&t=nkOlaGT8Xge4iBwT-1',
+      },
+    ],
+  },
+  decorators: [withDesign],
+} as Meta<typeof Accordion>;
+
+/*
+ * Example Dialog story
+ */
+const ExampleAccordion = ({ ...restProps }: AccordionProps) => {
+  return (
+    <Accordion {...restProps}>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+      est laborum.
+    </Accordion>
+  );
+};
+
+/*
+ * Example Dialog story
+ */
+const ExampleMultiAccordion = ({ ...restProps }: AccordionProps) => {
+  return (
+    <>
+      <Accordion {...restProps}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
+      </Accordion>
+      <Accordion {...restProps}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
+      </Accordion>
+      <Accordion {...restProps}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
+      </Accordion>
+    </>
+  );
+};
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: StoryFn<typeof Accordion> = (args) => (
+  <ExampleAccordion {...args}></ExampleAccordion>
+);
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const MultiTemplate: StoryFn<typeof Accordion> = (args) => (
+  <ExampleMultiAccordion {...args}></ExampleMultiAccordion>
+);
+
+/**
+ * Default variant (not specified)
+ */
+export const DefaultVariant = Template.bind({});
+
+/**
+ * Multiple accordions
+ */
+export const MultipleAccordionVariant = MultiTemplate.bind({});

src/components/Accordion/Accordion.tsx

@@ -0,0 +1,103 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { pxToRem, ComponentBaseProps } from '../../shared';
+import { MdKeyboardArrowDown, MdKeyboardArrowUp } from 'react-icons/md';
+import { Typography } from '../Typography';
+
+/**
+ * Dimensions of accordion component
+ */
+const accordionDimensions = {
+  accordionTitle: {
+    paddingTop: 16,
+    paddingRight: 16,
+    paddingBottom: 16,
+    paddingLeft: 24,
+  },
+  accordionContent: {
+    paddingTop: 0,
+    paddingRight: 24,
+    paddingBottom: 24,
+    paddingLeft: 24,
+  },
+  iconSize: 24,
+  marginBottom: 8,
+};
+
+type AccordionTitleSize = 'h2' | 'h3';
+
+/**
+ * Accordion component properties
+ * Extends html div element attributes
+ */
+export interface AccordionProps extends ComponentBaseProps<HTMLDivElement> {
+  /**
+   * Accordion title
+   */
+  title?: string;
+
+  /**
+   * Accordion title size
+   */
+  titleSize?: AccordionTitleSize;
+
+  /**
+   * Children
+   */
+  children: React.ReactNode;
+}
+
+const InternalAccordion = styled.div<AccordionProps>`
+  background-color: ${(props) => props.theme.colors.grayScale.digitalBlack100};
+  margin-bottom: ${pxToRem(accordionDimensions.marginBottom)};
+`;
+
+const AccordionTitle = styled.div<AccordionProps>`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  cursor: pointer;
+  user-select: none;
+  padding: ${pxToRem(accordionDimensions.accordionTitle.paddingTop)}
+    ${pxToRem(accordionDimensions.accordionTitle.paddingRight)}
+    ${pxToRem(accordionDimensions.accordionTitle.paddingBottom)}
+    ${pxToRem(accordionDimensions.accordionTitle.paddingLeft)};
+`;
+const AccordionContent = styled.div<AccordionProps>`
+  padding: ${pxToRem(accordionDimensions.accordionContent.paddingTop)}
+    ${pxToRem(accordionDimensions.accordionContent.paddingRight)}
+    ${pxToRem(accordionDimensions.accordionContent.paddingBottom)}
+    ${pxToRem(accordionDimensions.accordionContent.paddingLeft)};
+`;
+
+/**
+ * Accordion arrow icon wrapper component
+ */
+const AccordionArrow = styled.div<AccordionProps>`
+  align-self: center;
+  font-size: ${pxToRem(accordionDimensions.iconSize)};
+`;
+
+/**
+ * Accordion component
+ */
+export const Accordion = ({
+  children,
+  title,
+  titleSize = 'h2',
+  ...restProps
+}: AccordionProps) => {
+  const [accordionIsOpen, setAccordionOpen] = useState(false);
+  return (
+    <InternalAccordion {...restProps}>
+      <AccordionTitle onClick={() => setAccordionOpen(!accordionIsOpen)}>
+        <Typography variant={titleSize}>{title}</Typography>
+        <AccordionArrow>
+          {accordionIsOpen && <MdKeyboardArrowUp />}
+          {!accordionIsOpen && <MdKeyboardArrowDown />}
+        </AccordionArrow>
+      </AccordionTitle>
+      {accordionIsOpen && <AccordionContent>{children}</AccordionContent>}
+    </InternalAccordion>
+  );
+};

src/components/Accordion/index.ts

@@ -0,0 +1 @@
+export * from './Accordion';

src/components/index.ts

@@ -1,3 +1,4 @@
+export * from './Accordion';
 export * from './Box';
 export * from './Button';
 export * from './Card';