diff options
| author | Armand Philippot <git@armandphilippot.com> | 2023-10-30 12:44:11 +0100 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2023-11-11 18:15:27 +0100 |
| commit | 0e52a59917406ad03c174e030c6c1c92ab23449d (patch) | |
| tree | 693bbcc5edbe78ebd2f0050fddbc45c706e0ba61 /src/components/organisms/forms/prism-theme-toggle | |
| parent | 84a679b0e48ed76eee2fa44d3caac83591aa3c8c (diff) | |
refactor(components): extract SettingsForm component form SettingsModal
We could use an array of items and map over it instead of repeating the
Switch component for each settings but with translations, it becomes
quickly unreadable. So I prefer to keep separate components.
Diffstat (limited to 'src/components/organisms/forms/prism-theme-toggle')
4 files changed, 0 insertions, 110 deletions
diff --git a/src/components/organisms/forms/prism-theme-toggle/index.ts b/src/components/organisms/forms/prism-theme-toggle/index.ts deleted file mode 100644 index f4e490f..0000000 --- a/src/components/organisms/forms/prism-theme-toggle/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './prism-theme-toggle'; diff --git a/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.stories.tsx b/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.stories.tsx deleted file mode 100644 index 3aeb78b..0000000 --- a/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.stories.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { PrismThemeToggle } from './prism-theme-toggle'; - -/** - * PrismThemeToggle - Storybook Meta - */ -export default { - title: 'Organisms/Forms/Toggle', - component: PrismThemeToggle, - argTypes: {}, -} as ComponentMeta<typeof PrismThemeToggle>; - -const Template: ComponentStory<typeof PrismThemeToggle> = (args) => ( - <PrismThemeToggle {...args} /> -); - -/** - * Toggle Stories - Prism theme - */ -export const PrismTheme = Template.bind({}); diff --git a/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.test.tsx b/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.test.tsx deleted file mode 100644 index ad8658d..0000000 --- a/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.test.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render, screen as rtlScreen } from '../../../../../tests/utils'; -import { PrismThemeToggle } from './prism-theme-toggle'; - -describe('PrismThemeToggle', () => { - it('renders a toggle component', () => { - render(<PrismThemeToggle />); - expect( - rtlScreen.getByRole('radiogroup', { - name: /Code blocks:/i, - }) - ).toBeInTheDocument(); - }); -}); diff --git a/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.tsx b/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.tsx deleted file mode 100644 index 1eba191..0000000 --- a/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import type { FC } from 'react'; -import { useIntl } from 'react-intl'; -import { usePrismTheme } from '../../../../utils/hooks'; -import { Icon, Legend } from '../../../atoms'; -import { - Switch, - type SwitchOption, - type SwitchProps, -} from '../../../molecules'; - -export type PrismThemeToggleProps = Omit< - SwitchProps, - 'isInline' | 'items' | 'name' | 'onSwitch' | 'value' ->; - -/** - * PrismThemeToggle component - * - * Render a Toggle component to set code blocks theme. - */ -export const PrismThemeToggle: FC<PrismThemeToggleProps> = (props) => { - const intl = useIntl(); - const { currentTheme, toggleTheme } = usePrismTheme(); - - const themeLabel = intl.formatMessage({ - defaultMessage: 'Code blocks:', - description: 'PrismThemeToggle: theme label', - id: 'ftXN+0', - }); - const lightThemeLabel = intl.formatMessage({ - defaultMessage: 'Light theme', - description: 'PrismThemeToggle: light theme label', - id: 'tsWh8x', - }); - const darkThemeLabel = intl.formatMessage({ - defaultMessage: 'Dark theme', - description: 'PrismThemeToggle: dark theme label', - id: 'og/zWL', - }); - - const options: [SwitchOption, SwitchOption] = [ - { - id: 'code-blocks-light', - label: ( - <> - <span className="screen-reader-text">{lightThemeLabel}</span> - <Icon shape="sun" /> - </> - ), - value: 'light', - }, - { - id: 'code-blocks-dark', - label: ( - <> - <span className="screen-reader-text">{darkThemeLabel}</span> - <Icon shape="moon" /> - </> - ), - value: 'dark', - }, - ]; - - return ( - <Switch - {...props} - isInline - items={options} - legend={<Legend>{themeLabel}</Legend>} - name="code-blocks" - onSwitch={toggleTheme} - value={currentTheme} - /> - ); -}; |
