@simplybusiness/mobius 3.8.0 → 3.9.0

package/src/components/Chopin/QuestionGroup/QuestionGroup.stories.tsx

@@ -0,0 +1,187 @@
+import type { Meta } from "@storybook/react";
+import { useContext, useEffect } from "react";
+import {
+  ThemeProvider,
+  ThemeContext,
+  BreakpointsType,
+} from "../../../contexts";
+import { QuestionGroup, QuestionGroupProps } from "./QuestionGroup";
+import { Question } from "../Question";
+import { Section } from "../Section";
+import { RadioButton, RadioGroup } from "../../Radio";
+import { excludeControls } from "../../../utils/excludeControls";
+
+const breakpoints = [
+  { size: "xs", value: 320 },
+  { size: "sm", value: 480 },
+  { size: "md", value: 670 },
+  { size: "lg", value: 960 },
+  { size: "xl", value: 1200 },
+  { size: "xxl", value: 1320 },
+] as BreakpointsType;
+
+export default {
+  title: "Chopin/QuestionGroup",
+  component: QuestionGroup,
+  argTypes: excludeControls("className", "elementType", "help", "onChange"),
+  decorators: [
+    Story => (
+      <ThemeProvider>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+} satisfies Meta<typeof QuestionGroup>;
+
+export const Normal: Meta<typeof QuestionGroup> = {
+  render: (args: QuestionGroupProps) => {
+    // eslint-disable-next-line
+    const { setBreakpoints } = useContext(ThemeContext);
+
+    // eslint-disable-next-line
+    useEffect(() => {
+      setBreakpoints(breakpoints);
+    }, [setBreakpoints]);
+
+    return (
+      <Section title="About your Not For Profit organisation">
+        <QuestionGroup {...args}>
+          <Question
+            label={
+              <>
+                <strong>...do work</strong>in or on an offshore installation or
+                support vessel?
+              </>
+            }
+          >
+            <RadioGroup orientation="horizontal">
+              <RadioButton value="yes" label="Yes" />
+              <RadioButton value="no" label="No" />
+            </RadioGroup>
+          </Question>
+          <Question
+            label={
+              <>
+                <strong>...do work</strong>that involves travelling to or from
+                an offshore installation or support vessel?
+              </>
+            }
+          >
+            <RadioGroup orientation="horizontal">
+              <RadioButton value="yes" label="Yes" />
+              <RadioButton value="no" label="No" />
+            </RadioGroup>
+          </Question>
+          <Question
+            label={
+              <>
+                <strong>...do work</strong>in or on aircraft, hovercrafts,
+                airports, airfields, railways, watercraft (except where
+                they&lsquo;re hand propelled), docks, harbours, piers, wharves,
+                breakwaters or sea walls?
+              </>
+            }
+          >
+            <RadioGroup orientation="horizontal">
+              <RadioButton value="yes" label="Yes" />
+              <RadioButton value="no" label="No" />
+            </RadioGroup>
+          </Question>
+          <Question
+            label={
+              <>
+                <strong>...do work</strong>in or on towers, steeples (except for
+                bell ringing or guided tours), chimney shafts, blast furnaces,
+                dams, canals, viaducts, bridges or tunnels?
+              </>
+            }
+          >
+            <RadioGroup orientation="horizontal">
+              <RadioButton value="yes" label="Yes" />
+              <RadioButton value="no" label="No" />
+            </RadioGroup>
+          </Question>
+          <Question
+            label={
+              <>
+                <strong>...do work</strong>in or on collieries, mines, quarries,
+                chemical works, gas works, oil refineries, bulk storage
+                facilities for gas or oil, power stations, wind farms or nuclear
+                installations or plants?
+              </>
+            }
+          >
+            <RadioGroup orientation="horizontal">
+              <RadioButton value="yes" label="Yes" />
+              <RadioButton value="no" label="No" />
+            </RadioGroup>
+          </Question>
+          <Question
+            label={
+              <>
+                <strong>...do any</strong>activity away from your premises that
+                involves the use of heat?
+              </>
+            }
+            help={
+              <p>
+                This could include activities such as burning debris or garden
+                waste.
+              </p>
+            }
+          >
+            <RadioGroup orientation="horizontal">
+              <RadioButton value="yes" label="Yes" />
+              <RadioButton value="no" label="No" />
+            </RadioGroup>
+          </Question>
+          <Question
+            label={
+              <>
+                <strong>...handle</strong>asbestos, silica or other materials
+                containing either of those?
+              </>
+            }
+          >
+            <RadioGroup orientation="horizontal">
+              <RadioButton value="yes" label="Yes" />
+              <RadioButton value="no" label="No" />
+            </RadioGroup>
+          </Question>
+        </QuestionGroup>
+      </Section>
+    );
+  },
+  args: {
+    label: "Does your organisation...",
+    help: (
+      <>
+        <p>
+          It&lsquo;s important to answer the following questions as accurately
+          as possible to make sure you get the right level of cover for your
+          organisation.
+        </p>
+        <p>
+          <u>For the purposes of the following questions:</u>
+        </p>
+        <ul>
+          <li>
+            &lsquo;your organisation&lsquo; includes any subsidiary companies
+            included under this insurance
+          </li>
+          <li>
+            a &lsquo;senior manager&lsquo; is any person with responsibility for
+            arranging insurance or who plays a significant role in making
+            decisions about how activities are managed or organised
+            <p />
+          </li>
+        </ul>
+        <p>
+          You should answer these questions based on the knowledge of a senior
+          manager. Please either agree or disagree with the following
+          statements:
+        </p>
+      </>
+    ),
+  },
+};

package/src/components/Chopin/Section/{Section.story.mdx → Section.mdx}

@@ -1,13 +1,10 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
 import { Text } from "../../Text";
 import { Section, SectionProps } from "./Section";
 import { excludeControls } from "../../../utils/excludeControls";
+import * as SectionStories from "./Section.stories";
 
-<Meta
-  title="Chopin/Section"
-  component={Section}
-  argTypes={excludeControls("className", "elementType")}
-/>
+<Meta of={SectionStories} />
 
 # Section
 
@@ -27,24 +24,9 @@ import { Chopin } from "@simplybusiness/mobius";
 
 ## Normal
 
-<Story name="Normal" args={{ title: "Section title" }}>
-  {args => (
-    <Section {...args}>
-      <Text>
-        Vestibulum luctus diam a accumsan consequat. Fusce odio orci, iaculis
-        sed nibh id, pellentesque consequat mauris. Quisque eget erat eu quam
-        varius ullamcorper. Class aptent taciti sociosqu ad litora torquent per
-        conubia nostra, per inceptos himenaeos. Nam dignissim sapien massa,
-        vitae fringilla ligula volutpat at. Nulla facilisi. Quisque ultricies
-        iaculis est, in tempor ligula fermentum sed. Nullam dapibus et ligula
-        eget hendrerit. Integer porttitor vestibulum augue id ornare. Cras
-        pretium sapien interdum ornare aliquet.
-      </Text>
-    </Section>
-  )}
-</Story>
-
-<!-- prettier-ignore -->
+<Story of={SectionStories.Normal} />
+
+{/* prettier-ignore */}
 ```jsx
 import { Chopin, Text } from "@simplybusiness/mobius";
 

package/src/components/Chopin/Section/Section.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta } from "@storybook/react";
+import { Text } from "../../Text";
+import { Section, SectionProps } from "./Section";
+import { excludeControls } from "../../../utils/excludeControls";
+
+export default {
+  title: "Chopin/Section",
+  component: Section,
+  argTypes: excludeControls("className", "elementType"),
+};
+
+export const Normal: Meta<typeof Section> = {
+  render: (args: SectionProps) => (
+    <Section {...args}>
+      <Text>
+        Vestibulum luctus diam a accumsan consequat. Fusce odio orci, iaculis
+        sed nibh id, pellentesque consequat mauris. Quisque eget erat eu quam
+        varius ullamcorper. Class aptent taciti sociosqu ad litora torquent per
+        conubia nostra, per inceptos himenaeos. Nam dignissim sapien massa,
+        vitae fringilla ligula volutpat at. Nulla facilisi. Quisque ultricies
+        iaculis est, in tempor ligula fermentum sed. Nullam dapibus et ligula
+        eget hendrerit. Integer porttitor vestibulum augue id ornare. Cras
+        pretium sapien interdum ornare aliquet.
+      </Text>
+    </Section>
+  ),
+  args: {
+    title: "Section title",
+  },
+};

package/src/components/Chopin/Steps/{Steps.story.mdx → Steps.mdx}

@@ -1,12 +1,9 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
 import { Steps, StepItem } from ".";
 import { excludeControls } from "../../../utils/excludeControls";
+import * as StepsStories from "./Steps.stories";
 
-<Meta
-  title="Chopin/Steps"
-  component={Steps}
-  argTypes={excludeControls("className", "elementType")}
-/>
+<Meta of={StepsStories} />
 
 # Steps
 
@@ -26,20 +23,9 @@ import { Chopin } from "@simplybusiness/mobius";
 
 ## Normal
 
-<Story name="Normal">
-  {args => (
-    <Steps {...args}>
-      <StepItem name="Your business" url="#link-placeholder-1" completed />
-      <StepItem name="Your employees" url="#link-placeholder-2" completed />
-      <StepItem name="Cover options" url="#link-placeholder-3" active />
-      <StepItem name="Business questions" url="#link-placeholder-4" />
-      <StepItem name="Agreements" url="#link-placeholder-5" />
-      <StepItem name="Your quotes" url="#link-placeholder-6" />
-    </Steps>
-  )}
-</Story>
-
-<!-- prettier-ignore -->
+<Story of={StepsStories.Normal} />
+
+{/* prettier-ignore */}
 ```jsx
 import { Chopin } from "@simplybusiness/mobius";
 

package/src/components/Chopin/Steps/Steps.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta } from "@storybook/react";
+import { Steps, StepItem, StepsProps } from ".";
+import { excludeControls } from "../../../utils/excludeControls";
+
+export default {
+  title: "Chopin/Steps",
+  component: Steps,
+  argTypes: excludeControls("className", "elementType"),
+};
+
+export const Normal: Meta<typeof Steps> = {
+  render: (args: StepsProps) => (
+    <Steps {...args}>
+      <StepItem name="Your business" url="#link-placeholder-1" completed />
+      <StepItem name="Your employees" url="#link-placeholder-2" completed />
+      <StepItem name="Cover options" url="#link-placeholder-3" active />
+      <StepItem name="Business questions" url="#link-placeholder-4" />
+      <StepItem name="Agreements" url="#link-placeholder-5" />
+      <StepItem name="Your quotes" url="#link-placeholder-6" />
+    </Steps>
+  ),
+};

package/src/components/Chopin/Testimonial/{Testimonial.story.mdx → Testimonial.mdx}

@@ -1,7 +1,8 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
 import { Testimonial, TestimonialProps } from "./Testimonial";
+import * as TestimonialStories from "./Testimonial.stories";
 
-<Meta title="Chopin/Testimonial" component={Testimonial} />
+<Meta of={TestimonialStories} />
 
 # Testimonial
 
@@ -22,18 +23,7 @@ import { Testimonial } from "@simplybusiness/mobius";
 ## Normal
 
 <Canvas>
-  <Story
-    name="Normal"
-    args={{
-      author: "Jules Winnfield",
-    }}
-  >
-    {args => (
-      <Testimonial {...args}>
-        "What" ain't no country I've ever heard of. They speak English in What?
-      </Testimonial>
-    )}
-  </Story>
+  <Story of={TestimonialStories.Normal} />
 </Canvas>
 
 ## Props

package/src/components/Chopin/Testimonial/Testimonial.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta } from "@storybook/react";
+import { Testimonial, TestimonialProps } from "./Testimonial";
+import { excludeControls } from "../../../utils/excludeControls";
+
+export default {
+  title: "Chopin/Testimonial",
+  component: Testimonial,
+  argTypes: {
+    ...excludeControls("className"),
+  },
+};
+
+export const Normal: Meta<typeof Testimonial> = {
+  render: (args: TestimonialProps) => (
+    <Testimonial {...args}>
+      &ldquo;What&ldquo; ain&lsquo;t no country I&lsquo;ve ever heard of. They
+      speak English in What?
+    </Testimonial>
+  ),
+  args: {
+    author: "Jules Winnfield",
+  },
+};

package/src/components/Chopin/TradeSelector/{TradeSelector.story.mdx → TradeSelector.mdx}

@@ -1,15 +1,9 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
 import { TradeSelector, TradeSelectorProps } from ".";
 import { excludeControls } from "../../../utils/excludeControls";
+import * as TradeSelectorStories from "./TradeSelector.stories";
 
-<Meta
-  title="Chopin/TradeSelector"
-  component={TradeSelector}
-  argTypes={{
-    onTradeSelected: { action: "onTradeSelected" },
-    ...excludeControls("className", "labels", "urls", "onTradeSelected"),
-  }}
-/>
+<Meta of={TradeSelectorStories} />
 
 # TradeSelector
 
@@ -29,17 +23,9 @@ import { Chopin } from "@simplybusiness/mobius";
 
 ## Normal
 
-<Story
-  name="Normal"
-  args={{
-    minInput: 3,
-    apiRequestDebounceInMs: 250,
-  }}
->
-  {args => <TradeSelector {...args} />}
-</Story>
-
-<!-- prettier-ignore -->
+<Story of={TradeSelectorStories.Normal} />
+
+{/* prettier-ignore */}
 ```jsx
 import { Chopin } from "@simplybusiness/mobius";
 
@@ -48,14 +34,9 @@ import { Chopin } from "@simplybusiness/mobius";
 
 ## Without label
 
-<Story
-  name="Without label"
-  args={{ minInput: 3, apiRequestDebounceInMs: 250, hideLabel: true }}
->
-  {args => <TradeSelector {...args} />}
-</Story>
+<Story of={TradeSelectorStories.WithoutLabel} />
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```jsx
 import { Chopin } from "@simplybusiness/mobius";
 
@@ -64,18 +45,9 @@ import { Chopin } from "@simplybusiness/mobius";
 
 ## With Trade
 
-<Story
-  name="With Trade"
-  args={{
-    minInput: 3,
-    apiRequestDebounceInMs: 250,
-    initialTrade: "Landlord",
-  }}
->
-  {args => <TradeSelector {...args} />}
-</Story>
-
-<!-- prettier-ignore -->
+<Story of={TradeSelectorStories.WithTrade} />
+
+{/* prettier-ignore */}
 ```jsx
 import { Chopin } from "@simplybusiness/mobius";
 
@@ -84,19 +56,9 @@ import { Chopin } from "@simplybusiness/mobius";
 
 ## With Search Scope
 
-<Story
-  name="With Search Scope"
-  args={{
-    minInput: 3,
-    apiRequestDebounceInMs: 250,
-    vertical: "business",
-    searchScope: "current_vertical",
-  }}
->
-  {args => <TradeSelector {...args} />}
-</Story>
-
-<!-- prettier-ignore -->
+<Story of={TradeSelectorStories.WithSearchScope} />
+
+{/* prettier-ignore */}
 ```jsx
 import { Chopin } from "@simplybusiness/mobius";
 

package/src/components/Chopin/TradeSelector/TradeSelector.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta } from "@storybook/react";
+import { TradeSelector, TradeSelectorProps } from ".";
+import { excludeControls } from "../../../utils/excludeControls";
+
+export default {
+  title: "Chopin/TradeSelector",
+  component: TradeSelector,
+  argTypes: {
+    onTradeSelected: {
+      action: "onTradeSelected",
+    },
+    ...excludeControls(
+      "className",
+      "labels",
+      "urls",
+      "onTradeSelected",
+      "elementType",
+      "aria-describedby",
+      "data-cy",
+    ),
+  },
+};
+
+export const Normal: Meta<typeof TradeSelector> = {
+  render: (args: TradeSelectorProps) => <TradeSelector {...args} />,
+  args: {
+    minInput: 3,
+    apiRequestDebounceInMs: 250,
+    initialTrade: "",
+    hideLabel: false,
+    vertical: "",
+  },
+};
+
+export const WithoutLabel: Meta<typeof TradeSelector> = {
+  render: (args: TradeSelectorProps) => <TradeSelector {...args} />,
+  args: {
+    minInput: 3,
+    apiRequestDebounceInMs: 250,
+    initialTrade: "",
+    hideLabel: true,
+    vertical: "",
+  },
+};
+
+export const WithTrade: Meta<typeof TradeSelector> = {
+  render: (args: TradeSelectorProps) => <TradeSelector {...args} />,
+  args: {
+    minInput: 3,
+    apiRequestDebounceInMs: 250,
+    initialTrade: "Landlord",
+    hideLabel: false,
+    vertical: "",
+  },
+};
+
+export const WithSearchScope: Meta<typeof TradeSelector> = {
+  render: (args: TradeSelectorProps) => <TradeSelector {...args} />,
+  args: {
+    minInput: 3,
+    apiRequestDebounceInMs: 250,
+    initialTrade: "",
+    hideLabel: false,
+    vertical: "business",
+    searchScope: "current_vertical",
+  },
+};

package/src/components/Chopin/TradeSelector/TradeSelector.test.tsx

@@ -117,13 +117,16 @@ describe("TradeSelector", () => {
   });
 
   describe("given the API is unavailable", () => {
+    // eslint-disable-next-line no-console
     const consoleError = console.error;
 
     beforeAll(() => {
+      // eslint-disable-next-line no-console
       console.error = jest.fn();
     });
 
     afterAll(() => {
+      // eslint-disable-next-line no-console
       console.error = consoleError;
       jest.resetAllMocks();
     });

package/src/components/Container/{Container.story.mdx → Container.mdx}

@@ -1,12 +1,9 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
 import { Container } from "./Container";
 import { excludeControls } from "../../utils/excludeControls";
+import * as ContainerStories from "./Container.stories";
 
-<Meta
-  title="Layout/Container"
-  component={Container}
-  argTypes={excludeControls("className", "elementType", "id")}
-/>
+<Meta of={ContainerStories} />
 
 # Container
 
@@ -31,16 +28,7 @@ import { Container } from "@simplybusiness/mobius";
 ### Normal
 
 <Canvas>
-  <Story name="Normal" args={{}}>
-    {args => (
-      <Container {...args}>
-        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi
-        repellendus deleniti architecto, expedita ex maxime eum. Reiciendis,
-        natus? Voluptatibus error beatae praesentium molestias saepe dolorem
-        molestiae rem. Rem, eveniet beatae.
-      </Container>
-    )}
-  </Story>
+  <Story of={ContainerStories.Normal} />
 </Canvas>
 
 ## Props

package/src/components/Container/Container.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta } from "@storybook/react";
+import { Container, ContainerProps } from "./Container";
+import { excludeControls } from "../../utils/excludeControls";
+
+export default {
+  title: "Layout/Container",
+  component: Container,
+  argTypes: excludeControls("className", "elementType", "id"),
+};
+
+export const Normal: Meta<typeof Container> = {
+  render: (args: ContainerProps) => (
+    <Container {...args}>
+      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi
+      repellendus deleniti architecto, expedita ex maxime eum. Reiciendis,
+      natus? Voluptatibus error beatae praesentium molestias saepe dolorem
+      molestiae rem. Rem, eveniet beatae.
+    </Container>
+  ),
+};