diff options
Diffstat (limited to 'src/components/organisms/forms/theme-toggle')
4 files changed, 0 insertions, 111 deletions
diff --git a/src/components/organisms/forms/theme-toggle/index.ts b/src/components/organisms/forms/theme-toggle/index.ts deleted file mode 100644 index 0dbf668..0000000 --- a/src/components/organisms/forms/theme-toggle/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './theme-toggle'; diff --git a/src/components/organisms/forms/theme-toggle/theme-toggle.stories.tsx b/src/components/organisms/forms/theme-toggle/theme-toggle.stories.tsx deleted file mode 100644 index bfec65e..0000000 --- a/src/components/organisms/forms/theme-toggle/theme-toggle.stories.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { ThemeToggle } from './theme-toggle'; - -/** - * ThemeToggle - Storybook Meta - */ -export default { - title: 'Organisms/Forms/Toggle', - component: ThemeToggle, - argTypes: {}, -} as ComponentMeta<typeof ThemeToggle>; - -const Template: ComponentStory<typeof ThemeToggle> = (args) => ( - <ThemeToggle {...args} /> -); - -/** - * Toggle Stories - Theme - */ -export const Theme = Template.bind({}); diff --git a/src/components/organisms/forms/theme-toggle/theme-toggle.test.tsx b/src/components/organisms/forms/theme-toggle/theme-toggle.test.tsx deleted file mode 100644 index d735936..0000000 --- a/src/components/organisms/forms/theme-toggle/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 { ThemeToggle } from './theme-toggle'; - -describe('ThemeToggle', () => { - it('renders a toggle component', () => { - render(<ThemeToggle />); - expect( - rtlScreen.getByRole('radiogroup', { - name: /Theme:/i, - }) - ).toBeInTheDocument(); - }); -}); diff --git a/src/components/organisms/forms/theme-toggle/theme-toggle.tsx b/src/components/organisms/forms/theme-toggle/theme-toggle.tsx deleted file mode 100644 index 88f3c75..0000000 --- a/src/components/organisms/forms/theme-toggle/theme-toggle.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import type { FC } from 'react'; -import { useIntl } from 'react-intl'; -import { Icon, Legend } from '../../../atoms'; -import { - Switch, - type SwitchOption, - type SwitchProps, -} from '../../../molecules'; -import { useTheme } from 'src/utils/hooks'; - -export type ThemeToggleProps = Omit< - SwitchProps, - 'isInline' | 'items' | 'name' | 'onSwitch' | 'value' ->; - -/** - * ThemeToggle component - * - * Render a Toggle component to set theme. - */ -export const ThemeToggle: FC<ThemeToggleProps> = (props) => { - const intl = useIntl(); - const { resolvedTheme, toggleTheme } = useTheme(); - const isDarkTheme = resolvedTheme === 'dark'; - - const themeLabel = intl.formatMessage({ - defaultMessage: 'Theme:', - description: 'ThemeToggle: theme label', - id: 'suXOBu', - }); - const lightThemeLabel = intl.formatMessage({ - defaultMessage: 'Light theme', - description: 'ThemeToggle: light theme label', - id: 'Ygea7s', - }); - const darkThemeLabel = intl.formatMessage({ - defaultMessage: 'Dark theme', - description: 'ThemeToggle: dark theme label', - id: '2QwvtS', - }); - - const options: [SwitchOption, SwitchOption] = [ - { - id: 'theme-light', - label: ( - <> - <span className="screen-reader-text">{lightThemeLabel}</span> - <Icon shape="sun" /> - </> - ), - value: 'light', - }, - { - id: 'theme-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="theme" - onSwitch={toggleTheme} - value={isDarkTheme ? 'dark' : 'light'} - /> - ); -}; |
