feat: implemented basic auxiliary components

packages/forma-36-react-components/src/components/Accordion/AccordionHeader/AccordionHeader.tsx

@@ -0,0 +1,38 @@
+import React, { FC } from 'react';
+
+import Subheading from '../../Typography/Subheading';
+import Icon from '../../Icon';
+
+interface AccordionHeaderProps {
+  children: React.ReactNode;
+  handleClick: VoidFunction;
+  isOpen: boolean;
+  ariaId: number | null;
+}
+
+export const AccordionHeader: FC<AccordionHeaderProps> = ({
+  children,
+  handleClick,
+  isOpen,
+  ariaId,
+}: AccordionHeaderProps) => {
+  return (
+    <Subheading>
+      <button
+        type="button"
+        aria-expanded={isOpen}
+        aria-controls={`accordion-panel--${ariaId}`}
+        id={`accordion--${ariaId}`}
+        onClick={handleClick}
+      >
+        <Icon icon={isOpen ? 'ChevronDown' : 'ChevronRight'} />
+        {children}
+      </button>
+    </Subheading>
+  );
+};
+AccordionHeader.defaultProps = {
+  isOpen: false,
+};
+
+export default AccordionHeader;

packages/forma-36-react-components/src/components/Accordion/AccordionHeader/index.ts

@@ -0,0 +1 @@
+export { default } from './AccordionHeader';

packages/forma-36-react-components/src/components/Accordion/AccordionItem/AccordionItem.tsx

@@ -0,0 +1,48 @@
+import React, { FC, useState } from 'react';
+
+import useId from '../../../utils/useId';
+import AccordionHeader from '../AccordionHeader';
+import AccordionPanel from '../AccordionPanel';
+
+export interface AccordionItemProps {
+  /**
+   * Child nodes to be rendered in the component
+   */
+  children?: React.ReactNode;
+  /**
+   * An ID used for testing purposes applied as a data attribute (data-test-id)
+   */
+  testId?: string;
+  /**
+   * A boolean that controls if the content of the accordion is expanded or not
+   */
+  isOpen?: boolean;
+}
+
+const defaultProps: AccordionItemProps = {
+  testId: 'cf-ui-accordion',
+};
+
+const AccordionItem: FC<AccordionItemProps> = ({
+  testId,
+}: AccordionItemProps) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const id = useId();
+
+  const onClick = () => setIsExpanded(!isExpanded);
+
+  return (
+    <li data-test-id={testId}>
+      <AccordionHeader handleClick={onClick} isOpen={isExpanded} ariaId={id}>
+        Accordion {id}
+      </AccordionHeader>
+
+      <AccordionPanel ariaId={id} isOpen={isExpanded}>
+        Content for accordion {id}
+      </AccordionPanel>
+    </li>
+  );
+};
+AccordionItem.defaultProps = defaultProps;
+
+export default AccordionItem;

packages/forma-36-react-components/src/components/Accordion/AccordionItem/index.ts

@@ -0,0 +1 @@
+export { default } from './AccordionItem';

packages/forma-36-react-components/src/components/Accordion/AccordionPanel/AccordionPanel.css

@@ -0,0 +1,16 @@
+@import 'settings/colors';
+@import 'settings/typography';
+@import 'settings/transitions';
+
+.AccordionPanel {
+  box-sizing: border-box;
+  overflow: hidden;
+  height: 0;
+  /* max-height: 0; */
+  /* transition: all 1s ease-in-out; */
+}
+
+.AccordionPanel--expanded {
+  height: auto;
+  /* max-height: 600px; */
+}

packages/forma-36-react-components/src/components/Accordion/AccordionPanel/AccordionPanel.tsx

@@ -0,0 +1,34 @@
+import React, { FC } from 'react';
+import cn from 'classnames';
+
+import styles from './AccordionPanel.css';
+
+interface AccordionPanelProps {
+  children: React.ReactNode;
+  isOpen: boolean;
+  ariaId: number | null;
+}
+
+export const AccordionPanel: FC<AccordionPanelProps> = ({
+  children,
+  isOpen,
+  ariaId,
+}: AccordionPanelProps) => {
+  return (
+    <div
+      id={`accordion-panel--${ariaId}`}
+      role="region"
+      aria-labelledby={`accordion--${ariaId}`}
+      className={cn(styles.AccordionPanel, {
+        [styles['AccordionPanel--expanded']]: isOpen,
+      })}
+    >
+      {children}
+    </div>
+  );
+};
+AccordionPanel.defaultProps = {
+  isOpen: false,
+};
+
+export default AccordionPanel;

packages/forma-36-react-components/src/components/Accordion/AccordionPanel/index.ts

@@ -0,0 +1 @@
+export { default } from './AccordionPanel';