aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/organisms/forms/theme-toggle
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2023-10-30 12:44:11 +0100
committerArmand Philippot <git@armandphilippot.com>2023-11-11 18:15:27 +0100
commit0e52a59917406ad03c174e030c6c1c92ab23449d (patch)
tree693bbcc5edbe78ebd2f0050fddbc45c706e0ba61 /src/components/organisms/forms/theme-toggle
parent84a679b0e48ed76eee2fa44d3caac83591aa3c8c (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/theme-toggle')
-rw-r--r--src/components/organisms/forms/theme-toggle/index.ts1
-rw-r--r--src/components/organisms/forms/theme-toggle/theme-toggle.stories.tsx20
-rw-r--r--src/components/organisms/forms/theme-toggle/theme-toggle.test.tsx14
-rw-r--r--src/components/organisms/forms/theme-toggle/theme-toggle.tsx76
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'}
- />
- );
-};