@simplybusiness/mobius 3.8.0 → 3.9.0

package/src/components/Checkbox/{CheckboxGroup.story.mdx → CheckboxGroup.mdx}

@@ -1,29 +1,11 @@
 import { useState } from "react";
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
 import { CheckboxGroup, Checkbox } from ".";
 import { Box } from "../Box";
 import { excludeControls } from "../../utils/excludeControls";
+import * as CheckboxGroupStories from "./CheckboxGroup.stories";
 
-<Meta
-  title="Forms/CheckboxGroup"
-  component={CheckboxGroup}
-  argTypes={{
-    validationState: {
-      control: {
-        type: "radio",
-        options: {
-          valid: "valid",
-          invalid: "invalid",
-          neither: "",
-        },
-        defaultValue: {
-          neither: "",
-        },
-      },
-    },
-    ...excludeControls("className"),
-  }}
-/>
+<Meta of={CheckboxGroupStories} />
 
 # Checkbox
 
@@ -52,24 +34,7 @@ For example, `<CheckboxGroup defaultValue={['option1', 'option3']}>`
 This will allow user to change the value. Alternatively, see _Controlled Value_ example.
 
 <Canvas>
-  <Story
-    name="Normal"
-    args={{
-      label: "Value",
-      errorMessage: "",
-      isDisabled: false,
-      orientation: "vertical",
-      defaultValue: ["option1", "option3"],
-    }}
-  >
-    {args => (
-      <CheckboxGroup {...args}>
-        <Checkbox label="Option 1" value="option1" />
-        <Checkbox label="Option 2" value="option2" />
-        <Checkbox label="Option 3" value="option3" />
-      </CheckboxGroup>
-    )}
-  </Story>
+  <Story of={CheckboxGroupStories.Normal} />
 </Canvas>
 
 ### Controlled Value
@@ -81,92 +46,25 @@ You can use `value` prop which expects an array. To make `Option 2` and `Option
 appear selected use `<CheckboxGroup value={['option2', 'option3']}>`
 
 <Canvas>
-  <Story
-    name="Controlled Value"
-    args={{
-      label: "Value",
-      errorMessage: "",
-      isDisabled: false,
-      orientation: "vertical",
-      value: ["option2", "option3"],
-    }}
-  >
-    {args => (
-      <CheckboxGroup {...args}>
-        <Checkbox label="Option 1" value="option1" />
-        <Checkbox label="Option 2" value="option2" />
-        <Checkbox label="Option 3" value="option3" />
-      </CheckboxGroup>
-    )}
-  </Story>
+  <Story of={CheckboxGroupStories.ControlledValue} />
 </Canvas>
 
 ### Disabled
 
 <Canvas>
-  <Story
-    name="Disabled"
-    args={{
-      label: "Value",
-      errorMessage: "",
-      isDisabled: true,
-      orientation: "vertical",
-    }}
-  >
-    {args => (
-      <CheckboxGroup {...args}>
-        <Checkbox label="Option 1" value="option1" />
-        <Checkbox label="Option 2" value="option2" />
-        <Checkbox label="Option 3" value="option3" />
-      </CheckboxGroup>
-    )}
-  </Story>
+  <Story of={CheckboxGroupStories.Disabled} />
 </Canvas>
 
 ### Valid
 
 <Canvas>
-  <Story
-    name="Valid"
-    args={{
-      label: "Value",
-      errorMessage: "",
-      isDisabled: false,
-      validationState: "valid",
-      orientation: "vertical",
-    }}
-  >
-    {args => (
-      <CheckboxGroup {...args}>
-        <Checkbox label="Option 1" value="option1" />
-        <Checkbox label="Option 2" value="option2" />
-        <Checkbox label="Option 3" value="option3" />
-      </CheckboxGroup>
-    )}
-  </Story>
+  <Story of={CheckboxGroupStories.Valid} />
 </Canvas>
 
 ### Invalid
 
 <Canvas>
-  <Story
-    name="Invalid"
-    args={{
-      label: "Value",
-      errorMessage: "This field is required",
-      isDisabled: false,
-      validationState: "invalid",
-      orientation: "vertical",
-    }}
-  >
-    {args => (
-      <CheckboxGroup {...args}>
-        <Checkbox label="Option 1" value="option1" />
-        <Checkbox label="Option 2" value="option2" />
-        <Checkbox label="Option 3" value="option3" />
-      </CheckboxGroup>
-    )}
-  </Story>
+  <Story of={CheckboxGroupStories.Invalid} />
 </Canvas>
 
 ## Accessibility
@@ -228,10 +126,10 @@ The following example HTML is rendered for a CheckboxGroup:
 
 Class names are augmented with the following flags if true:
 
-- --is-horizontal
-- --is-vertical
-- --is-required
-- --is-optional
+- \--is-horizontal
+- \--is-vertical
+- \--is-required
+- \--is-optional
 
 ---
 

package/src/components/Checkbox/CheckboxGroup.stories.tsx

@@ -0,0 +1,109 @@
+import type { Meta } from "@storybook/react";
+import { CheckboxGroup, CheckboxGroupProps, Checkbox } from ".";
+import { excludeControls } from "../../utils/excludeControls";
+
+export default {
+  title: "Forms/CheckboxGroup",
+  component: CheckboxGroup,
+  argTypes: {
+    validationState: {
+      options: ["valid", "invalid", "neither"],
+      control: { type: "radio" },
+      mapping: {
+        valid: "valid",
+        invalid: "invalid",
+        neither: "",
+      },
+    },
+    ...excludeControls("className"),
+  },
+};
+
+export const Normal: Meta<typeof CheckboxGroup> = {
+  render: (args: CheckboxGroupProps) => (
+    <CheckboxGroup {...args}>
+      <Checkbox label="Option 1" value="option1" />
+      <Checkbox label="Option 2" value="option2" />
+      <Checkbox label="Option 3" value="option3" />
+    </CheckboxGroup>
+  ),
+  args: {
+    label: "Value",
+    errorMessage: "",
+    isDisabled: false,
+    orientation: "vertical",
+    defaultValue: ["option1", "option3"],
+    isRequired: false,
+  },
+};
+
+export const ControlledValue: Meta<typeof CheckboxGroup> = {
+  render: (args: CheckboxGroupProps) => (
+    <CheckboxGroup {...args}>
+      <Checkbox label="Option 1" value="option1" />
+      <Checkbox label="Option 2" value="option2" />
+      <Checkbox label="Option 3" value="option3" />
+    </CheckboxGroup>
+  ),
+  args: {
+    label: "Value",
+    errorMessage: "",
+    isDisabled: false,
+    orientation: "vertical",
+    value: ["option2", "option3"],
+    isRequired: false,
+  },
+};
+
+export const Disabled: Meta<typeof CheckboxGroup> = {
+  render: (args: CheckboxGroupProps) => (
+    <CheckboxGroup {...args}>
+      <Checkbox label="Option 1" value="option1" />
+      <Checkbox label="Option 2" value="option2" />
+      <Checkbox label="Option 3" value="option3" />
+    </CheckboxGroup>
+  ),
+  args: {
+    label: "Value",
+    errorMessage: "",
+    isDisabled: true,
+    orientation: "vertical",
+    isRequired: false,
+  },
+};
+
+export const Valid: Meta<typeof CheckboxGroup> = {
+  render: (args: CheckboxGroupProps) => (
+    <CheckboxGroup {...args}>
+      <Checkbox label="Option 1" value="option1" />
+      <Checkbox label="Option 2" value="option2" />
+      <Checkbox label="Option 3" value="option3" />
+    </CheckboxGroup>
+  ),
+  args: {
+    label: "Value",
+    errorMessage: "",
+    isDisabled: false,
+    validationState: "valid",
+    orientation: "vertical",
+    isRequired: false,
+  },
+};
+
+export const Invalid: Meta<typeof CheckboxGroup> = {
+  render: (args: CheckboxGroupProps) => (
+    <CheckboxGroup {...args}>
+      <Checkbox label="Option 1" value="option1" />
+      <Checkbox label="Option 2" value="option2" />
+      <Checkbox label="Option 3" value="option3" />
+    </CheckboxGroup>
+  ),
+  args: {
+    label: "Value",
+    errorMessage: "This field is required",
+    isDisabled: false,
+    validationState: "invalid",
+    orientation: "vertical",
+    isRequired: false,
+  },
+};

package/src/components/Checkbox/types.ts

@@ -13,7 +13,7 @@ export interface CheckboxProps
   extends DOMProps,
     AriaCheckboxProps,
     RefAttributes<CheckboxElementType> {
-  label?: string;
+  label?: string | JSX.Element;
   className?: string;
   errorMessage?: string;
 }

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

@@ -1,13 +1,10 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
 import { Actions } from ".";
 import { ThemeContext } from "../../../contexts";
 import { excludeControls } from "../../../utils/excludeControls";
+import * as ActionsStories from "./Actions.stories";
 
-<Meta
-  title="Chopin/Actions"
-  component={Actions}
-  argTypes={excludeControls("className", "backElementType", "nextElementType")}
-/>
+<Meta of={ActionsStories} />
 
 # Actions
 
@@ -27,21 +24,9 @@ import { Chopin } from "@simplybusiness/mobius";
 
 ## Normal
 
-<Story
-  name="Normal"
-  args={{
-    backLabel: "Back",
-    nextLabel: "Next Step",
-  }}
->
-  {args => (
-    <div>
-      <Actions {...args} />
-    </div>
-  )}
-</Story>
-
-<!-- prettier-ignore -->
+<Story of={ActionsStories.Normal} />
+
+{/* prettier-ignore */}
 ```jsx
 import { Chopin } from "@simplybusiness/mobius";
 
@@ -53,23 +38,9 @@ import { Chopin } from "@simplybusiness/mobius";
 
 ## With Links
 
-<Story
-  name="With Links"
-  args={{
-    backLabel: "Back",
-    backButton: { href: "https://www.example.com" },
-    nextLabel: "Next Step",
-    nextButton: { href: "https://www.google.com" },
-  }}
->
-  {args => (
-    <div>
-      <Actions {...args} />
-    </div>
-  )}
-</Story>
-
-<!-- prettier-ignore -->
+<Story of={ActionsStories.WithLinks} />
+
+{/* prettier-ignore */}
 ```jsx
 import { Chopin } from "@simplybusiness/mobius";
 
@@ -81,21 +52,9 @@ import { Chopin } from "@simplybusiness/mobius";
 
 ## With one Next Action
 
-<Story
-  name="One Action"
-  args={{
-    nextLabel: "Next Step",
-  }}
-  argTypes={excludeControls("backLabel", "backLink")}
->
-  {args => (
-    <div>
-      <Actions {...args} />
-    </div>
-  )}
-</Story>
-
-<!-- prettier-ignore -->
+<Story of={ActionsStories.OneAction} />
+
+{/* prettier-ignore */}
 ```jsx
 import { Chopin } from "@simplybusiness/mobius";
 
@@ -106,21 +65,9 @@ import { Chopin } from "@simplybusiness/mobius";
 
 ## With one Back Action
 
-<Story
-  name="One Back Action"
-  args={{
-    backLabel: "Back",
-  }}
-  argTypes={excludeControls("nextLabel", "nextLink")}
->
-  {args => (
-    <div>
-      <Actions {...args} />
-    </div>
-  )}
-</Story>
-
-<!-- prettier-ignore -->
+<Story of={ActionsStories.OneBackAction} />
+
+{/* prettier-ignore */}
 ```jsx
 import { Chopin } from "@simplybusiness/mobius";
 
@@ -135,28 +82,10 @@ import { Chopin } from "@simplybusiness/mobius";
 ## Disabled Actions
 
 <Canvas>
-  <Story
-    name="Disabled Actions"
-    args={{
-      backLabel: "Back",
-      backButton: {
-        isDisabled: true,
-      },
-      nextLabel: "Next Step",
-      nextButton: {
-        isDisabled: true,
-      },
-    }}
-  >
-    {args => (
-      <div>
-        <Actions {...args} />
-      </div>
-    )}
-  </Story>
+  <Story of={ActionsStories.DisabledActions} />
 </Canvas>
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```jsx
 import { Chopin } from "@simplybusiness/mobius";
 

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

@@ -0,0 +1,81 @@
+import type { Meta } from "@storybook/react";
+import { Actions, ActionsProps } from ".";
+import { excludeControls } from "../../../utils/excludeControls";
+
+export default {
+  title: "Chopin/Actions",
+  component: Actions,
+  argTypes: excludeControls("className", "backButton", "nextButton"),
+};
+
+export const Normal: Meta<typeof Actions> = {
+  render: (args: ActionsProps) => (
+    <div>
+      <Actions {...args} />
+    </div>
+  ),
+  args: {
+    backLabel: "Back",
+    nextLabel: "Next Step",
+  },
+};
+
+export const WithLinks: Meta<typeof Actions> = {
+  render: (args: ActionsProps) => (
+    <div>
+      <Actions {...args} />
+    </div>
+  ),
+  args: {
+    backLabel: "Back",
+    backButton: {
+      href: "https://www.example.com",
+    },
+    nextLabel: "Next Step",
+    nextButton: {
+      href: "https://www.google.com",
+    },
+  },
+};
+
+export const OneAction: Meta<typeof Actions> = {
+  render: (args: ActionsProps) => (
+    <div>
+      <Actions {...args} />
+    </div>
+  ),
+  args: {
+    nextLabel: "Next Step",
+  },
+  argTypes: excludeControls("backLabel", "backLink"),
+};
+
+export const OneBackAction: Meta<typeof Actions> = {
+  render: (args: ActionsProps) => (
+    <div>
+      <Actions {...args} />
+    </div>
+  ),
+  args: {
+    backLabel: "Back",
+  },
+  argTypes: excludeControls("nextLabel", "nextLink"),
+};
+
+export const DisabledActions: Meta<typeof Actions> = {
+  render: (args: ActionsProps) => (
+    <div>
+      <Actions {...args} />
+    </div>
+  ),
+  args: {
+    backLabel: "Back",
+    backButton: {
+      isDisabled: true,
+    },
+    nextLabel: "Next Step",
+    nextButton: {
+      isDisabled: true,
+    },
+  },
+};

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

@@ -0,0 +1,163 @@
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
+import { Footer } from ".";
+import { ThemeContext } from "../../../contexts";
+import { excludeControls } from "../../../utils/excludeControls";
+import * as FooterStories from "./Footer.stories";
+
+<Meta of={FooterStories} />
+
+# 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 of={FooterStories.Normal} />
+
+```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 of={FooterStories.ContainingTwoAddresses} />
+
+```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 of={FooterStories.WithFooterLogo} />
+
+```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 of={FooterStories.WithJustFooterText} />
+
+{/* 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)