@simplybusiness/mobius 3.8.0 → 3.9.0

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

@@ -0,0 +1,217 @@
+import type { Meta } from "@storybook/react";
+import { Footer, FooterProps } from ".";
+import { Breakpoint, ThemeContext } from "../../../contexts";
+import { excludeControls } from "../../../utils/excludeControls";
+
+export default {
+  title: "Chopin/Footer",
+  component: Footer,
+  argTypes: excludeControls(
+    "className",
+    "address",
+    "footerLinks",
+    "legalLinks",
+  ),
+};
+
+const breakpoints: Breakpoint[] = [
+  {
+    size: "xs",
+    value: 320,
+  },
+  {
+    size: "sm",
+    value: 540,
+  },
+  {
+    size: "md",
+    value: 720,
+  },
+  {
+    size: "lg",
+    value: 960,
+  },
+  {
+    size: "xl",
+    value: 1140,
+  },
+  {
+    size: "xxl",
+    value: 1320,
+  },
+];
+
+const setBreakpoints = () => {};
+
+export const Normal: Meta<typeof Footer> = {
+  render: (args: FooterProps) => (
+    <div>
+      <Footer {...args} />
+    </div>
+  ),
+  args: {
+    address: [["6th Floor", "99 Gresham Street", "London", "EC2V 7NG"]],
+    legalLinks: [
+      {
+        href: "https://www.simplybusiness.co.uk/terms-conditions/",
+        text: "Terms & conditions",
+      },
+      {
+        href: "https://www.simplybusiness.co.uk/privacy-policy/",
+        text: "Privacy policy",
+      },
+      {
+        href: "https://www.simplybusiness.co.uk/legal/cookies/",
+        text: "Cookie policy",
+      },
+      {
+        href: "https://www.simplybusiness.co.uk/support/accessibility/",
+        text: "Accessibility",
+      },
+    ],
+    text: "© Copyright 2022 Simply Business. All Rights Reserved. Simply Business is a trading name of Xbridge Limited which is authorised and regulated by the Financial Conduct Authority (Financial Services Registration No: 313348). Xbridge Limited (No: 3967717) has its registered office at 6th Floor, 99 Gresham Street, London EC2V 7NG.",
+    withLogo: true,
+  },
+  decorators: [
+    Story => (
+      <ThemeContext.Provider
+        value={{
+          breakpoints,
+          setBreakpoints,
+        }}
+      >
+        <Story />
+      </ThemeContext.Provider>
+    ),
+  ],
+};
+
+export const ContainingTwoAddresses: Meta<typeof Footer> = {
+  render: (args: FooterProps) => (
+    <div>
+      <Footer {...args} />
+    </div>
+  ),
+  args: {
+    address: [
+      ["6th Floor", "99 Gresham Street", "London", "EC2V 7NG"],
+      ["Sol House", "29 St Katherine's Street", "Northampton", "NN1 2QZ"],
+    ],
+    legalLinks: [
+      {
+        href: "https://www.simplybusiness.co.uk/terms-conditions/",
+        text: "Terms & conditions",
+      },
+      {
+        href: "https://www.simplybusiness.co.uk/privacy-policy/",
+        text: "Privacy policy",
+      },
+      {
+        href: "https://www.simplybusiness.co.uk/legal/cookies/",
+        text: "Cookie policy",
+      },
+      {
+        href: "https://www.simplybusiness.co.uk/support/accessibility/",
+        text: "Accessibility",
+      },
+    ],
+    text: "© Copyright 2022 Simply Business. All Rights Reserved. Simply Business is a trading name of Xbridge Limited which is authorised and regulated by the Financial Conduct Authority (Financial Services Registration No: 313348). Xbridge Limited (No: 3967717) has its registered office at 6th Floor, 99 Gresham Street, London EC2V 7NG.",
+    withLogo: true,
+  },
+  decorators: [
+    Story => (
+      <ThemeContext.Provider
+        value={{
+          breakpoints,
+          setBreakpoints,
+        }}
+      >
+        <Story />
+      </ThemeContext.Provider>
+    ),
+  ],
+};
+
+export const WithFooterLogo: Meta<typeof Footer> = {
+  render: (args: FooterProps) => (
+    <div>
+      <Footer {...args} />
+    </div>
+  ),
+  args: {
+    address: [
+      ["6th Floor", "99 Gresham Street", "London", "EC2V 7NG"],
+      ["Sol House", "29 St Katherine's Street", "Northampton", "NN1 2QZ"],
+    ],
+    legalLinks: [
+      {
+        href: "https://www.simplybusiness.co.uk/terms-conditions/",
+        text: "Terms & conditions",
+      },
+      {
+        href: "https://www.simplybusiness.co.uk/privacy-policy/",
+        text: "Privacy policy",
+      },
+      {
+        href: "https://www.simplybusiness.co.uk/legal/cookies/",
+        text: "Cookie policy",
+      },
+      {
+        href: "https://www.simplybusiness.co.uk/support/accessibility/",
+        text: "Accessibility",
+      },
+    ],
+    text: "© Copyright 2022 Simply Business. All Rights Reserved. Simply Business is a trading name of Xbridge Limited which is authorised and regulated by the Financial Conduct Authority (Financial Services Registration No: 313348). Xbridge Limited (No: 3967717) has its registered office at 6th Floor, 99 Gresham Street, London EC2V 7NG.",
+    withLogo: true,
+  },
+  decorators: [
+    Story => (
+      <ThemeContext.Provider
+        value={{
+          breakpoints,
+          setBreakpoints,
+        }}
+      >
+        <Story />
+      </ThemeContext.Provider>
+    ),
+  ],
+};
+
+export const WithJustFooterText: Meta<typeof Footer> = {
+  render: (args: FooterProps) => (
+    <div>
+      <Footer {...args} />
+    </div>
+  ),
+  args: {
+    text: `
+      <p>© Copyright 2022 Simply Business. All Rights Reserved.
+      Simply Business, LLC is a licensed insurance producer in all U.S.
+      States and the District of Columbia.
+      Please be advised that insurance coverage cannot be added, deleted or otherwise changed until it is confirmed in writing by Simply Business or your insurance carrier.
+      Simply Business has its registered office at Simply Business, 1 Beacon Street, 15th Floor, Boston, MA 02108, (844) 654-7272.
+      In the state of California, we operate under the name Simply Business Insurance Agency, Inc., License #0M20593.
+      In the state of New York we operate under the name Simply Business Insurance Agency.
+      In the state of Texas we operate under the name, U.S. Simply Business, Inc.
+      For more information, please refer to our
+      <a href="https://www.simplybusiness.com/privacy-policy/" target="_blank">Privacy Policy</a>
+      and
+      <a href="https://www.simplybusiness.com/terms-conditions/" target="_blank">Terms &amp; Conditions.</a>
+      </p>
+    `,
+    withLogo: true,
+  },
+  decorators: [
+    Story => (
+      <ThemeContext.Provider
+        value={{
+          breakpoints,
+          setBreakpoints,
+        }}
+      >
+        <Story />
+      </ThemeContext.Provider>
+    ),
+  ],
+};

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

@@ -1,23 +1,9 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
 import { Header } from ".";
 import { excludeControls } from "../../../utils/excludeControls";
+import * as HeaderStories from "./Header.stories";
 
-<Meta
-  title="Chopin/Header"
-  component={Header}
-  argTypes={excludeControls("className", "openingHours")}
-  args={{
-    openingHours: {
-      Mon: "8am-8pm",
-      Tue: "8am-8pm",
-      Wed: "8am-8pm",
-      Thu: "8am-8pm",
-      Fri: "8am-8pm",
-      "<strong>Sat</strong>": "<strong>Closed</strong>",
-      "<strong>Sun</strong>": "<strong>Closed</strong>",
-    },
-  }}
-/>
+<Meta of={HeaderStories} />
 
 # Header
 
@@ -37,22 +23,9 @@ import { Chopin } from "@simplybusiness/mobius";
 
 ## Normal
 
-<Story
-  name="Normal"
-  args={{
-    phone: "0333 014 6683",
-    whiteLabel: false,
-    url: "https://www.example.com/",
-  }}
->
-  {args => (
-    <div>
-      <Header {...args} />
-    </div>
-  )}
-</Story>
+<Story of={HeaderStories.Normal} />
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```jsx
 import { Chopin } from "@simplybusiness/mobius";
 
@@ -61,22 +34,9 @@ import { Chopin } from "@simplybusiness/mobius";
 
 ## WhiteLabel
 
-<Story
-  name="WhiteLabel"
-  args={{
-    phone: "(855) 737-0087",
-    whiteLabel: true,
-    url: "https://www.example.com/",
-  }}
->
-  {args => (
-    <div style={{ height: 300 }}>
-      <Header {...args} />
-    </div>
-  )}
-</Story>
+<Story of={HeaderStories.WhiteLabel} />
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```jsx
 import { Chopin } from "@simplybusiness/mobius";
 

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

@@ -0,0 +1,50 @@
+import type { Meta } from "@storybook/react";
+import { Header, HeaderProps } from ".";
+import { excludeControls } from "../../../utils/excludeControls";
+
+export default {
+  title: "Chopin/Header",
+  component: Header,
+  argTypes: excludeControls("className", "openingHours"),
+  args: {
+    openingHours: {
+      Mon: "8am-8pm",
+      Tue: "8am-8pm",
+      Wed: "8am-8pm",
+      Thu: "8am-8pm",
+      Fri: "8am-8pm",
+      "<strong>Sat</strong>": "<strong>Closed</strong>",
+      "<strong>Sun</strong>": "<strong>Closed</strong>",
+    },
+  },
+};
+
+export const Normal: Meta<typeof Header> = {
+  render: (args: HeaderProps) => (
+    <div>
+      <Header {...args} />
+    </div>
+  ),
+  args: {
+    phone: "0333 014 6683",
+    whiteLabel: false,
+    url: "https://www.example.com/",
+  },
+};
+
+export const WhiteLabel: Meta<typeof Header> = {
+  render: (args: HeaderProps) => (
+    <div
+      style={{
+        height: 300,
+      }}
+    >
+      <Header {...args} />
+    </div>
+  ),
+  args: {
+    phone: "(855) 737-0087",
+    whiteLabel: true,
+    url: "https://www.example.com/",
+  },
+};

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

@@ -1,5 +1,5 @@
 import { useContext, useEffect } from "react";
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
 import { Text } from "../../Text";
 import { ThemeProvider, ThemeContext } from "../../../contexts";
 import {
@@ -7,6 +7,7 @@ import {
   PercentageTotalsQuestionProps,
 } from "./PercentageTotalsQuestion";
 import { excludeControls } from "../../../utils/excludeControls";
+import * as PercentageTotalsQuestionStories from "./PercentageTotalsQuestion.stories";
 
 export const breakpoints = [
   { size: "xs", value: 320 },
@@ -17,20 +18,7 @@ export const breakpoints = [
   { size: "xxl", value: 1320 },
 ];
 
-<Meta
-  title="Chopin/PercentageTotalsQuestion"
-  component={PercentageTotalsQuestion}
-  argTypes={excludeControls("className", "help")}
-  decorators={[
-    Story => {
-      return (
-        <ThemeProvider>
-          <Story />
-        </ThemeProvider>
-      );
-    },
-  ]}
-/>
+<Meta of={PercentageTotalsQuestionStories} />
 
 # PercentageTotalsQuestion
 
@@ -55,27 +43,7 @@ import { Chopin } from "@simplybusiness/mobius";
 ## Normal
 
 <Canvas>
-  <Story
-    name="Normal"
-    args={{
-      label: "What percentage of your work is on?",
-      alertText: "The total percentage of your work must be 100%",
-      items: [
-        "UK contracts",
-        "EU contracts",
-        "USA and Canada contracts",
-        "Rest of the world contracts",
-      ],
-    }}
-  >
-    {args => {
-      const { setBreakpoints } = useContext(ThemeContext);
-      useEffect(() => {
-        setBreakpoints(breakpoints);
-      }, [setBreakpoints]);
-      return <PercentageTotalsQuestion {...args} />;
-    }}
-  </Story>
+  <Story of={PercentageTotalsQuestionStories.Normal} />
 </Canvas>
 
 ## Props

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

@@ -0,0 +1,63 @@
+import type { Meta } from "@storybook/react";
+import { useContext, useEffect } from "react";
+import {
+  ThemeProvider,
+  ThemeContext,
+  BreakpointsType,
+} from "../../../contexts";
+import {
+  PercentageTotalsQuestion,
+  PercentageTotalsQuestionProps,
+} from "./PercentageTotalsQuestion";
+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/PercentageTotalsQuestion",
+  component: PercentageTotalsQuestion,
+  argTypes: excludeControls(
+    "className",
+    "help",
+    "onChange",
+    "closeHelpOnOutsideClick",
+  ),
+  decorators: [
+    Story => (
+      <ThemeProvider>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+} satisfies Meta<typeof PercentageTotalsQuestion>;
+
+export const Normal: Meta<typeof PercentageTotalsQuestion> = {
+  render: (args: PercentageTotalsQuestionProps) => {
+    // eslint-disable-next-line
+    const { setBreakpoints } = useContext(ThemeContext);
+
+    // eslint-disable-next-line
+    useEffect(() => {
+      setBreakpoints(breakpoints);
+    }, [setBreakpoints]);
+
+    return <PercentageTotalsQuestion {...args} />;
+  },
+  args: {
+    label: "What percentage of your work is on?",
+    alertText: "The total percentage of your work must be 100%",
+    items: [
+      "UK contracts",
+      "EU contracts",
+      "USA and Canada contracts",
+      "Rest of the world contracts",
+    ],
+  },
+};