aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/WidgetParts/ExpandableWidget/ExpandableWidget.tsx
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2022-05-24 19:35:12 +0200
committerGitHub <noreply@github.com>2022-05-24 19:35:12 +0200
commitc85ab5ad43ccf52881ee224672c41ec30021cf48 (patch)
tree8058808d9bfca19383f120c46b34d99ff2f89f63 /src/components/WidgetParts/ExpandableWidget/ExpandableWidget.tsx
parent52404177c07a2aab7fc894362fb3060dff2431a0 (diff)
parent11b9de44a4b2f305a6a484187805e429b2767118 (diff)
refactor: use storybook and atomic design (#16)
BREAKING CHANGE: rewrite most of the Typescript types, so the content format (the meta in particular) needs to be updated.
Diffstat (limited to 'src/components/WidgetParts/ExpandableWidget/ExpandableWidget.tsx')
-rw-r--r--src/components/WidgetParts/ExpandableWidget/ExpandableWidget.tsx61
1 files changed, 0 insertions, 61 deletions
diff --git a/src/components/WidgetParts/ExpandableWidget/ExpandableWidget.tsx b/src/components/WidgetParts/ExpandableWidget/ExpandableWidget.tsx
deleted file mode 100644
index 38e57ad..0000000
--- a/src/components/WidgetParts/ExpandableWidget/ExpandableWidget.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { TitleLevel } from '@ts/types/app';
-import { ReactNode, useState } from 'react';
-import { useIntl } from 'react-intl';
-import styles from './ExpandableWidget.module.scss';
-
-const ExpandableWidget = ({
- children,
- title,
- titleLevel = 2,
- expand = false,
- withBorders = false,
- kind = 'regular',
-}: {
- children: ReactNode;
- title: string;
- titleLevel?: TitleLevel;
- expand?: boolean;
- withBorders?: boolean;
- kind?: 'regular' | 'toc';
-}) => {
- const intl = useIntl();
- const [isExpanded, setIsExpanded] = useState<boolean>(expand);
-
- const handleExpanse = () => setIsExpanded((prev) => !prev);
-
- const TitleTag = `h${titleLevel}` as keyof JSX.IntrinsicElements;
-
- const wrapperKindClass = styles[`wrapper--${kind}`];
- const wrapperClasses = `${styles.wrapper} ${
- isExpanded ? styles['wrapper--expanded'] : ''
- } ${wrapperKindClass}`;
-
- const bodyClasses = `${styles.body} ${
- withBorders ? styles['body--borders'] : ''
- }`;
-
- return (
- <div className={wrapperClasses}>
- <button type="button" className={styles.header} onClick={handleExpanse}>
- <span className="screen-reader-text">
- {isExpanded
- ? intl.formatMessage({
- defaultMessage: 'Collapse',
- description: 'ExpandableWidget: collapse text',
- id: 'WRkY1/',
- })
- : intl.formatMessage({
- defaultMessage: 'Expand',
- description: 'ExpandableWidget: expand text',
- id: 'hV0qHp',
- })}
- </span>
- <TitleTag className={styles.title}>{title}</TitleTag>
- <span className={styles.icon} aria-hidden={true}></span>
- </button>
- <div className={bodyClasses}>{children}</div>
- </div>
- );
-};
-
-export default ExpandableWidget;