aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/molecules/buttons/main-nav-button.tsx
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2022-04-14 19:12:54 +0200
committerArmand Philippot <git@armandphilippot.com>2022-04-14 19:24:46 +0200
commit15fd9f4a6ecf947c7648c6b7865b97c40124fde1 (patch)
tree528ef96e731b0dd9c3c15d398b75f2877473289e /src/components/molecules/buttons/main-nav-button.tsx
parent872b0c172a38db4f440dc6044eb1d5725c03abb1 (diff)
chore: add a MainNav component
Diffstat (limited to 'src/components/molecules/buttons/main-nav-button.tsx')
-rw-r--r--src/components/molecules/buttons/main-nav-button.tsx75
1 files changed, 0 insertions, 75 deletions
diff --git a/src/components/molecules/buttons/main-nav-button.tsx b/src/components/molecules/buttons/main-nav-button.tsx
deleted file mode 100644
index 59407db..0000000
--- a/src/components/molecules/buttons/main-nav-button.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import Checkbox, { CheckboxProps } from '@components/atoms/forms/checkbox';
-import Label from '@components/atoms/forms/label';
-import Hamburger from '@components/atoms/icons/hamburger';
-import { VFC } from 'react';
-import { useIntl } from 'react-intl';
-import styles from './main-nav-button.module.scss';
-
-export type MainNavButtonProps = {
- /**
- * Set additional classnames to the checkbox.
- */
- checkboxClassName?: string;
- /**
- * The button state.
- */
- isActive: CheckboxProps['value'];
- /**
- * Set additional classnames to the label.
- */
- labelClassName?: string;
- /**
- * A callback function to handle button state.
- */
- setIsActive: CheckboxProps['setValue'];
-};
-
-/**
- * MainNavButton component
- *
- * Render a hamburger icon or a close icon depending on state.
- */
-const MainNavButton: VFC<MainNavButtonProps> = ({
- checkboxClassName = '',
- isActive,
- labelClassName = '',
- setIsActive,
-}) => {
- const intl = useIntl();
- const label = isActive
- ? intl.formatMessage({
- defaultMessage: 'Close menu',
- id: 'wT7YZb',
- description: 'MainNavButton: close menu label',
- })
- : intl.formatMessage({
- defaultMessage: 'Open menu',
- id: 'P7j8ZZ',
- description: 'MainNavButton: open menu label',
- });
- const hamburgerModifier = isActive ? 'icon--active' : '';
-
- return (
- <>
- <Checkbox
- id="main-nav-button"
- name="main-nav-button"
- value={isActive}
- setValue={setIsActive}
- className={`${styles.checkbox} ${checkboxClassName}`}
- />
- <Label
- htmlFor="main-nav-button"
- className={`${styles.label} ${labelClassName}`}
- aria-label={label}
- >
- <Hamburger
- className={styles.icon__wrapper}
- iconClassName={styles[hamburgerModifier]}
- />
- </Label>
- </>
- );
-};
-
-export default MainNavButton;