chore: add a PrismThemeToggle component

4 files changed, 87 insertions, 6 deletions

diff --git a/src/components/molecules/forms/prism-theme-toggle.stories.tsx b/src/components/molecules/forms/prism-theme-toggle.stories.tsx
new file mode 100644
index 0000000..fee54ef
--- /dev/null
+++ b/src/components/molecules/forms/prism-theme-toggle.stories.tsx
@@ -0,0 +1,16 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { IntlProvider } from 'react-intl';
+import PrismThemeToggleComponent from './prism-theme-toggle';
+
+export default {
+  title: 'Molecules/Forms',
+  component: PrismThemeToggleComponent,
+} as ComponentMeta<typeof PrismThemeToggleComponent>;
+
+const Template: ComponentStory<typeof PrismThemeToggleComponent> = (args) => (
+  <IntlProvider locale="en">
+    <PrismThemeToggleComponent {...args} />
+  </IntlProvider>
+);
+
+export const PrismThemeToggle = Template.bind({});
diff --git a/src/components/molecules/forms/prism-theme-toggle.test.tsx b/src/components/molecules/forms/prism-theme-toggle.test.tsx
new file mode 100644
index 0000000..0dceb92
--- /dev/null
+++ b/src/components/molecules/forms/prism-theme-toggle.test.tsx
@@ -0,0 +1,13 @@
+import { render, screen } from '@test-utils';
+import PrismThemeToggle from './prism-theme-toggle';
+
+describe('PrismThemeToggle', () => {
+  it('renders a checked toggle (dark theme choice)', () => {
+    render(<PrismThemeToggle value={true} />);
+    expect(
+      screen.getByRole('checkbox', {
+        name: `Code blocks: Light theme Dark theme`,
+      })
+    ).toBeChecked();
+  });
+});
diff --git a/src/components/molecules/forms/prism-theme-toggle.tsx b/src/components/molecules/forms/prism-theme-toggle.tsx
new file mode 100644
index 0000000..cedb71a
--- /dev/null
+++ b/src/components/molecules/forms/prism-theme-toggle.tsx
@@ -0,0 +1,52 @@
+import Toggle, {
+  ToggleChoices,
+  ToggleProps,
+} from '@components/atoms/forms/toggle';
+import Moon from '@components/atoms/icons/moon';
+import Sun from '@components/atoms/icons/sun';
+import { FC, useState } from 'react';
+import { useIntl } from 'react-intl';
+
+export type PrismThemeToggleProps = Pick<ToggleProps, 'value'>;
+
+/**
+ * PrismThemeToggle component
+ *
+ * Render a Toggle component to set code blocks theme.
+ */
+const PrismThemeToggle: FC<PrismThemeToggleProps> = ({ value }) => {
+  const intl = useIntl();
+  const [isDarkTheme, setIsDarkTheme] = useState<boolean>(value);
+  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 themeChoices: ToggleChoices = {
+    left: <Sun title={lightThemeLabel} />,
+    right: <Moon title={darkThemeLabel} />,
+  };
+
+  return (
+    <Toggle
+      id="prism-theme-settings"
+      name="prism-theme-settings"
+      label={themeLabel}
+      choices={themeChoices}
+      value={isDarkTheme}
+      setValue={setIsDarkTheme}
+    />
+  );
+};
+
+export default PrismThemeToggle;
diff --git a/src/components/molecules/forms/theme-toggle.tsx b/src/components/molecules/forms/theme-toggle.tsx
index 1c43acf..c927151 100644
--- a/src/components/molecules/forms/theme-toggle.tsx
+++ b/src/components/molecules/forms/theme-toggle.tsx
@@ -19,18 +19,18 @@ const ThemeToggle: FC<ThemeToggleProps> = ({ value }) => {
   const [isDarkTheme, setIsDarkTheme] = useState<boolean>(value);
   const themeLabel = intl.formatMessage({
     defaultMessage: 'Theme:',
-    description: 'SettingsModal: theme label',
-    id: 'SGPivK',
+    description: 'ThemeToggle: theme label',
+    id: 'suXOBu',
   });
   const lightThemeLabel = intl.formatMessage({
     defaultMessage: 'Light theme',
-    description: 'SettingsModal: light theme label',
-    id: 'jPxP9t',
+    description: 'ThemeToggle: light theme label',
+    id: 'Ygea7s',
   });
   const darkThemeLabel = intl.formatMessage({
     defaultMessage: 'Dark theme',
-    description: 'SettingsModal: dark theme label',
-    id: 'E5JCDA',
+    description: 'ThemeToggle: dark theme label',
+    id: '2QwvtS',
   });
   const themeChoices: ToggleChoices = {
     left: <Sun title={lightThemeLabel} />,