diff --git a/frontend/src/features/admin-form/settings/SettingsMultiLangPage.stories.tsx b/frontend/src/features/admin-form/settings/SettingsMultiLangPage.stories.tsx new file mode 100644 index 0000000000..69b94aa7a2 --- /dev/null +++ b/frontend/src/features/admin-form/settings/SettingsMultiLangPage.stories.tsx @@ -0,0 +1,81 @@ +import { Meta, Story } from '@storybook/react' + +import { FormSettings, Language } from '~shared/types' + +import { + getAdminFormSettings, + patchAdminFormSettings, +} from '~/mocks/msw/handlers/admin-form' + +import { + getMobileViewParameters, + StoryRouter, + viewports, +} from '~utils/storybook' + +import { SettingsMultiLangPage } from './SettingsMultiLangPage' + +const buildMswRoutes = ({ + overrides, + delay, +}: { + overrides?: Partial + delay?: number | 'infinite' +} = {}) => [ + getAdminFormSettings({ overrides, delay }), + patchAdminFormSettings({ overrides }), +] + +export default { + title: 'Pages/AdminFormPage/Settings/MultiLang', + component: SettingsMultiLangPage, + decorators: [StoryRouter({ initialEntries: ['/12345'], path: '/:formId' })], + parameters: { + // Required so skeleton "animation" does not hide content. + chromatic: { pauseAnimationAtEnd: true }, + msw: buildMswRoutes(), + }, +} as Meta + +const Template: Story = () => +export const MultiLangNotSelected = Template.bind({}) +MultiLangNotSelected.parameters = { + msw: buildMswRoutes({ + overrides: { hasMultiLang: false }, + }), +} + +export const MultiLangAllLanguagesSelected = Template.bind({}) +MultiLangAllLanguagesSelected.parameters = { + msw: buildMswRoutes({ + overrides: { hasMultiLang: true }, + }), +} + +export const MultiLangEnglishChineseMalaySelected = Template.bind({}) +MultiLangEnglishChineseMalaySelected.parameters = { + msw: buildMswRoutes({ + overrides: { + hasMultiLang: true, + supportedLanguages: [Language.ENGLISH, Language.CHINESE, Language.MALAY], + }, + }), +} + +export const Loading = Template.bind({}) +Loading.parameters = { + msw: buildMswRoutes({ delay: 'infinite' }), +} + +export const Mobile = Template.bind({}) +Mobile.parameters = { + ...getMobileViewParameters(), +} + +export const Tablet = Template.bind({}) +Tablet.parameters = { + viewport: { + defaultViewport: 'tablet', + }, + chromatic: { viewports: [viewports.md] }, +}