diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-05-24 19:35:12 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-05-24 19:35:12 +0200 |
| commit | c85ab5ad43ccf52881ee224672c41ec30021cf48 (patch) | |
| tree | 8058808d9bfca19383f120c46b34d99ff2f89f63 /src/components/WidgetParts/ExpandableWidget/ExpandableWidget.tsx | |
| parent | 52404177c07a2aab7fc894362fb3060dff2431a0 (diff) | |
| parent | 11b9de44a4b2f305a6a484187805e429b2767118 (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.tsx | 61 |
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; |
