@simplybusiness/mobius 3.7.1 → 3.9.0

package/src/components/Chopin/Footer/Footer.story.mdx

@@ -1,368 +0,0 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
-import { Footer } from ".";
-import { ThemeContext } from "../../../contexts";
-import { excludeControls } from "../../../utils/excludeControls";
-
-<Meta
-  title="Chopin/Footer"
-  component={Footer}
-  argTypes={excludeControls(
-    "className",
-    "address",
-    "footerLinks",
-    "legalLinks",
-  )}
-/>
-
-# Footer
-
-The `Footer` is component which can be reused in White-label sites.
-
-## Install
-
-```bash
-yarn add @simplybusiness/mobius
-```
-
-## Usage
-
-```js
-import { Chopin } from "@simplybusiness/mobius";
-```
-
-## With single Address
-
-<Story
-  name="Normal"
-  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: [
-            { size: "xs", value: 320 },
-            { size: "sm", value: 540 },
-            { size: "md", value: 720 },
-            { size: "lg", value: 960 },
-            { size: "xl", value: 1140 },
-            { size: "xxl", value: 1320 },
-          ],
-        }}
-      >
-        <Story />
-      </ThemeContext.Provider>
-    ),
-  ]}
->
-  {args => (
-    <div>
-      <Footer {...args} />
-    </div>
-  )}
-</Story>
-
-```jsx
-import { Chopin } from "@simplybusiness/mobius";
-
- <Chopin.Footer
-  address={[["6th Floor", "99 Gresham Street", "London", "EC2V 7NG"]]}
-  legalLinks={[
-    {
-      href: "https://www.simplybusiness.co.uk/terms-conditions/",
-      text: "Terms & conditions",
-    },
-    ...
-  ]}
-  text="© Copyright 2022 Simply Business. ..."
-/>
-```
-
-## With several Addresses
-
-<Story
-  name="Containing two Addresses"
-  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: [
-            { size: "xs", value: 320 },
-            { size: "sm", value: 540 },
-            { size: "md", value: 720 },
-            { size: "lg", value: 960 },
-            { size: "xl", value: 1140 },
-            { size: "xxl", value: 1320 },
-          ],
-        }}
-      >
-        <Story />
-      </ThemeContext.Provider>
-    ),
-  ]}
->
-  {args => (
-    <div>
-      <Footer {...args} />
-    </div>
-  )}
-</Story>
-
-```jsx
-import { Chopin } from "@simplybusiness/mobius";
-
-<Chopin.Footer
-  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",
-    },
-    ...
-  ]}
-  text="© Copyright 2022 Simply Business. ..."
-/>
-```
-
-## With Footer Logo
-
-<Story
-  name="With Footer Logo"
-  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: [
-            { size: "xs", value: 320 },
-            { size: "sm", value: 540 },
-            { size: "md", value: 720 },
-            { size: "lg", value: 960 },
-            { size: "xl", value: 1140 },
-            { size: "xxl", value: 1320 },
-          ],
-        }}
-      >
-        <Story />
-      </ThemeContext.Provider>
-    ),
-  ]}
->
-  {args => (
-    <div>
-      <Footer {...args} />
-    </div>
-  )}
-</Story>
-
-```jsx
-import { Chopin } from "@simplybusiness/mobius";
-
-<Chopin.Footer
-  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",
-    },
-    ...
-  ]}
-  text="© Copyright 2022 Simply Business. ..."
-  withLogo
-/>
-```
-
-## With only Footer text
-
-<Story
-  name="With just Footer Text"
-  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: [
-            { size: "xs", value: 320 },
-            { size: "sm", value: 540 },
-            { size: "md", value: 720 },
-            { size: "lg", value: 960 },
-            { size: "xl", value: 1140 },
-            { size: "xxl", value: 1320 },
-          ],
-        }}
-      >
-        <Story />
-      </ThemeContext.Provider>
-    ),
-  ]}
->
-  {args => (
-    <div>
-      <Footer {...args} />
-    </div>
-  )}
-</Story>
-
-<!-- prettier-ignore -->
-```jsx
-import { Chopin } from "@simplybusiness/mobius";
-
-<Chopin.Footer
-  text="<p>... 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>"
-/>
-```
-
-## Props
-
-<ArgsTable of={Footer} />
-
-## Component HTML Structure and Class names
-
-The following HTML is rendered for a `Footer`:
-
-```html
-<footer class="chopin chopin/Footer">
-  <div class="mobius mobius/Container chopin/FooterContent --many-regions">
-    <div>
-      <div>
-        <div class="mobius mobius/Container chopin/FooterAddressContainer">
-          <h3 class="mobius mobius/Text h5 chopin/FooterHeader">Address</h3>
-          <div>
-            <div class="mobius mobius/Flex">
-              <span class="mobius mobius/Text span chopin/FooterAddressItem"
-                >6th Floor</span
-              >
-              ...
-            </div>
-            <div class="mobius mobius/Flex">
-              <span class="mobius mobius/Text span chopin/FooterAddressItem"
-                >Sol House</span
-              >
-              ...
-            </div>
-          </div>
-        </div>
-      </div>
-      <div>
-        <div class="mobius mobius/Container chopin/FooterLegalContainer">
-          <h3 class="mobius mobius/Text h5 chopin/FooterHeader">Legal</h3>
-          <div class="mobius mobius/Flex">
-            <a
-              href="https://www.simplybusiness.co.uk/terms-conditions/"
-              target="_blank"
-              class="mobius mobius/Link chopin/FooterLegalLink"
-              >Terms &amp; conditions</a
-            >
-            ...
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="mobius mobius/Flex chopin/FooterTextContainer">
-      <svg class="mobius mobius/Icon chopin/FooterLogo">...</svg>
-      <p>© Copyright 2022 Simply Business. ...</p>
-    </div>
-  </div>
-</footer>
-```
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Chopin/Footer) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Chopin/QuestionGroup/QuestionGroup.story.mdx

@@ -1,309 +0,0 @@
-import { useContext, useEffect } from "react";
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
-import { ThemeProvider, ThemeContext } 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";
-
-export 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 },
-];
-
-<Meta
-  title="Chopin/QuestionGroup"
-  component={QuestionGroup}
-  argTypes={excludeControls("className", "elementType", "help")}
-  decorators={[
-    Story => {
-      return (
-        <ThemeProvider>
-          <Story />
-        </ThemeProvider>
-      );
-    },
-  ]}
-/>
-
-# QuestionGroup
-
-The `QuestionGroup` component is used for grouping a set of related `Question` components together
-
-## Install
-
-```bash
-yarn add @simplybusiness/mobius
-```
-
-## Usage
-
-```js
-import { Chopin } from "@simplybusiness/mobius";
-```
-
-## Normal
-
-<Story
-  name="Normal"
-  args={{
-    label: "Does your organisation...",
-    help: (
-      <>
-        <p>
-          It'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>
-            'your organisation' includes any subsidiary companies included under
-            this insurance
-          </li>
-          <li>
-            a 'senior manager' 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></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>
-      </>
-    ),
-  }}
->
-  {args => {
-    const { setBreakpoints } = useContext(ThemeContext);
-    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'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>
-    );
-  }}
-</Story>
-
-<!-- prettier-ignore -->
-```jsx
-import { Chopin, RadioGroup, RadioButton } from "@simplybusiness/mobius";
-
-<Chopin.QuestionGroup>
-  <Chopin.Question
-    label={
-      <>
-        <strong>Question label text in</strong> HTML
-      </>
-    }
-  >
-    <RadioGroup orientation="horizontal">
-      <RadioButton value="yes" label="Yes" />
-      <RadioButton value="no" label="No" />
-    </RadioGroup>
-  </Chopin.Question>
-  <Chopin.Question>...</Chopin.Question>
-</Chopin.QuestionGroup>
-```
-
-## Props
-
-<ArgsTable of={QuestionGroup} />
-
-## Component HTML Structure and Class names
-
-The following HTML is rendered for a QuestionGroup:
-
-```html
-<div class="chopin/QuestionGroup --is-desktop">
-  <header class="chopin/QuestionGroupHeader">
-    <label
-      for="question-group"
-      id="react-aria123"
-      class="mobius mobius/Label chopin/QuestionGroupLabel"
-      >Group label text</label
-    >
-    <div class="chopin/QuestionHelp --is-closed --is-desktop">
-      <button type="button" class="chopin/QuestionHelpTrigger">
-        <span>Open Help</span>
-      </button>
-      <div
-        class="chopin/QuestionHelpContent"
-        aria-atomic="true"
-        aria-live="polite"
-        role="tooltip"
-        aria-hidden="true"
-      >
-        <p>Group help text</p>
-      </div>
-    </div>
-  </header>
-  <ul class="chopin/QuestionGroupList">
-    <li class="chopin/QuestionGroupItem">
-      <div class="chopin/Question --is-desktop chopin/QuestionGroupQuestion">
-        <label
-          for="question"
-          id="react-aria456"
-          class="mobius mobius/Label chopin/QuestionLabel"
-          ><strong>Question label text in</strong> HTML</label
-        >
-        <div
-          aria-labelledby="react-aria456"
-          role="radiogroup"
-          aria-orientation="horizontal"
-          id="react-aria789"
-          class="mobius mobius/Flex mobius mobius/RadioGroup --is-horizontal"
-        >
-          <div class="mobius mobius/Flex mobius/RadioWrapper">
-            <label class="mobius mobius/RadioButtonLabel"
-              ><input
-                orientation="horizontal"
-                aria-label="Yes"
-                tabindex="0"
-                type="radio"
-                name="react-aria101112"
-                class="mobius/RadioInput"
-                value="yes"
-              />
-              <div class="mobius/RadioButtonContent">Yes</div></label
-            ><label class="mobius mobius/RadioButtonLabel"
-              ><input
-                orientation="horizontal"
-                aria-label="No"
-                tabindex="0"
-                type="radio"
-                name="react-aria101112"
-                class="mobius/RadioInput"
-                value="no"
-              />
-              <div class="mobius/RadioButtonContent">No</div></label
-            >
-          </div>
-        </div>
-      </div>
-    </li>
-  </ul>
-</div>
-```
-
-Class names are augmented with the following flags if true:
-
-- --is-desktop
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Chopin/QuestionGroup) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)