@simplybusiness/mobius 3.7.1 → 3.9.0

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

@@ -1,63 +1,13 @@
 import { useState } from "react";
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
 import { ThemeContext } from "../../../contexts";
 import { Question } from "./Question";
 import { Box } from "../../Box";
 import { TextField } from "../../TextField";
 import { excludeControls } from "../../../utils/excludeControls";
+import * as QuestionStories from "./Question.stories";
 
-<Meta
-  title="Chopin/Question"
-  component={Question}
-  argTypes={{
-    validationState: {
-      control: {
-        type: "radio",
-        options: {
-          valid: "valid",
-          invalid: "invalid",
-          neither: "",
-        },
-        defaultValue: {
-          neither: "",
-        },
-      },
-    },
-    label: {
-      control: "text",
-    },
-    help: {
-      control: "text",
-    },
-    ...excludeControls("children", "className"),
-  }}
-  decorators={[
-    Story => {
-      require("./Question.story.styles.css");
-      return (
-        <ThemeContext.Provider
-          value={{
-            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 },
-            ],
-          }}
-        >
-          <Story />
-        </ThemeContext.Provider>
-      );
-    },
-  ]}
-  args={{
-    description: "",
-    errorMessage: "",
-    help: "",
-  }}
-/>
+<Meta of={QuestionStories} />
 
 # Question
 
@@ -79,18 +29,9 @@ import { Chopin } from "@simplybusiness/mobius";
 
 ### Normal
 
-<Story
-  name="Normal"
-  args={{
-    label: "Question label",
-    closeHelpOnOutsideClick: false,
-    children: <TextField />,
-  }}
->
-  {args => <Question {...args} />}
-</Story>
+<Story of={QuestionStories.Normal} />
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```jsx
 import { Chopin } from "@simplybusiness/mobius";
 
@@ -99,37 +40,11 @@ import { Chopin } from "@simplybusiness/mobius";
 </Chopin.Question>
 ```
 
-<Story
-  name="With Description"
-  args={{
-    label: "Question label",
-    description:
-      "lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
-    closeHelpOnOutsideClick: false,
-    children: <TextField />,
-  }}
->
-  {args => <Question {...args} />}
-</Story>
-
-<Story
-  name="With Rich Description"
-  args={{
-    label: "Question label",
-    description: (
-      <ul>
-        <li>Item One</li>
-        <li>Item Two</li>
-      </ul>
-    ),
-    closeHelpOnOutsideClick: false,
-    children: <TextField />,
-  }}
->
-  {args => <Question {...args} />}
-</Story>
+<Story of={QuestionStories.WithDescription} />
 
-<!-- prettier-ignore -->
+<Story of={QuestionStories.WithRichDescription} />
+
+{/* prettier-ignore */}
 ```jsx
 import { Chopin } from "@simplybusiness/mobius";
 
@@ -142,24 +57,9 @@ import { Chopin } from "@simplybusiness/mobius";
 </Chopin.Question>
 ```
 
-<Story
-  name="With No Input"
-  args={{
-    label: (
-      <>
-        <p>Based on what you've told us:</p>
-        <p>We've added employers' liability cover to your quote</p>
-      </>
-    ),
-    description:
-      "You're required by law to have this cover if you have people working for you.",
-    closeHelpOnOutsideClick: false,
-  }}
->
-  {args => <Question {...args} />}
-</Story>
+<Story of={QuestionStories.WithNoInput} />
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```jsx
 import { Chopin } from "@simplybusiness/mobius";
 
@@ -169,30 +69,9 @@ import { Chopin } from "@simplybusiness/mobius";
 />
 ```
 
-<Story
-  name="With Help Text"
-  args={{
-    label: "Question label",
-    help: (
-      <>
-        <p>
-          This is a sample help text to demonstrate what help blocks look like
-          in questions.
-        </p>
-        <p>
-          This is a second paragraph to show that help texts aren't limited to
-          simple strings.
-        </p>
-      </>
-    ),
-    closeHelpOnOutsideClick: false,
-    children: <TextField />,
-  }}
->
-  {args => <Question {...args} />}
-</Story>
+<Story of={QuestionStories.WithHelpText} />
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```jsx
 import { Chopin } from "@simplybusiness/mobius";
 
@@ -253,35 +132,9 @@ import { Chopin } from "@simplybusiness/mobius";
 }
 ```
 
-<Story
-  name="With Help Text Outside"
-  args={{
-    label: "Question label",
-    help: (
-      <>
-        <p>
-          This is a sample help text to demonstrate what help blocks look like
-          in questions.
-        </p>
-        <p>
-          This is a second paragraph to show that help texts aren't limited to
-          simple strings.
-        </p>
-      </>
-    ),
-    closeHelpOnOutsideClick: true,
-    children: <TextField />,
-    className: "question-example-with-help-text-outside",
-  }}
->
-  {args => (
-    <>
-      <Question {...args} />
-    </>
-  )}
-</Story>
+<Story of={QuestionStories.WithHelpTextOutside} />
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```jsx
 import { Chopin } from "@simplybusiness/mobius";
 
@@ -304,37 +157,11 @@ import { Chopin } from "@simplybusiness/mobius";
 </Chopin.Question>
 ```
 
-<Story
-  name="With Error"
-  args={{
-    label: "Question label",
-    children: <TextField />,
-    errorMessage: "This field is required",
-    validationState: "invalid",
-    closeHelpOnOutsideClick: false,
-  }}
->
-  {args => <Question {...args} />}
-</Story>
-
-<Story
-  name="With Rich Error"
-  args={{
-    label: "Question label",
-    children: <TextField />,
-    errorMessage: (
-      <>
-        This <em>contains</em> <strong>HTML</strong> <u>formatting</u>
-      </>
-    ),
-    validationState: "invalid",
-    closeHelpOnOutsideClick: false,
-  }}
->
-  {args => <Question {...args} />}
-</Story>
+<Story of={QuestionStories.WithError} />
+
+<Story of={QuestionStories.WithRichError} />
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```jsx
 import { Chopin } from "@simplybusiness/mobius";
 
@@ -347,34 +174,9 @@ import { Chopin } from "@simplybusiness/mobius";
 </Chopin.Question>
 ```
 
-<Story
-  name="Complete Example"
-  args={{
-    label: "Question label",
-    description:
-      "lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
-    children: <TextField />,
-    help: (
-      <>
-        <p>
-          This is a sample help text to demonstrate what help blocks look like
-          in questions.
-        </p>
-        <p>
-          This is a second paragraph to show that help texts aren't limited to
-          simple strings.
-        </p>
-      </>
-    ),
-    errorMessage: "This field is required",
-    validationState: "invalid",
-    closeHelpOnOutsideClick: false,
-  }}
->
-  {args => <Question {...args} />}
-</Story>
+<Story of={QuestionStories.CompleteExample} />
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```jsx
 import { Chopin } from "@simplybusiness/mobius";
 
@@ -438,14 +240,14 @@ import { Chopin } from "@simplybusiness/mobius";
 
 Class names are augmented with the following flags if true:
 
-- --is-focused
-- --is-disabled
-- --is-hovered
-- --is-selected
-- --is-valid
-- --is-invalid
-- --has-help-open
-- --is-desktop
+- \--is-focused
+- \--is-disabled
+- \--is-hovered
+- \--is-selected
+- \--is-valid
+- \--is-invalid
+- \--has-help-open
+- \--is-desktop
 
 ---
 

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

@@ -0,0 +1,211 @@
+import type { Meta } from "@storybook/react";
+import { BreakpointsType, ThemeContext } from "../../../contexts";
+import { Question, QuestionProps } from "./Question";
+import { TextField } from "../../TextField";
+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;
+
+const setBreakpoints = () => {};
+
+export default {
+  title: "Chopin/Question",
+  component: Question,
+  argTypes: {
+    validationState: {
+      options: ["valid", "invalid", "neither"],
+      control: { type: "radio" },
+      mapping: {
+        valid: "valid",
+        invalid: "invalid",
+        neither: "",
+      },
+    },
+    description: {
+      control: { type: "text" },
+    },
+    errorMessage: {
+      control: { type: "text" },
+    },
+    label: {
+      control: { type: "text" },
+    },
+    help: {
+      control: { type: "text" },
+    },
+    ...excludeControls("children", "className", "onChange"),
+  },
+  decorators: [
+    Story => {
+      // eslint-disable-next-line global-require
+      require("./Question.story.styles.css");
+
+      return (
+        <ThemeContext.Provider
+          value={{
+            breakpoints,
+            setBreakpoints,
+          }}
+        >
+          <Story />
+        </ThemeContext.Provider>
+      );
+    },
+  ],
+  args: {
+    description: "",
+    errorMessage: "",
+    help: "",
+  },
+} satisfies Meta<typeof Question>;
+
+export const Normal: Meta<typeof Question> = {
+  render: (args: QuestionProps) => <Question {...args} />,
+  args: {
+    label: "Question label",
+    closeHelpOnOutsideClick: false,
+    children: <TextField />,
+  },
+};
+
+export const WithDescription: Meta<typeof Question> = {
+  render: (args: QuestionProps) => <Question {...args} />,
+  args: {
+    label: "Question label",
+    description:
+      "lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
+    closeHelpOnOutsideClick: false,
+    children: <TextField />,
+  },
+};
+
+export const WithRichDescription: Meta<typeof Question> = {
+  render: (args: QuestionProps) => <Question {...args} />,
+  args: {
+    label: "Question label",
+    description: (
+      <ul>
+        <li>Item One</li>
+        <li>Item Two</li>
+      </ul>
+    ),
+    closeHelpOnOutsideClick: false,
+    children: <TextField />,
+  },
+};
+
+export const WithNoInput: Meta<typeof Question> = {
+  render: (args: QuestionProps) => <Question {...args} />,
+  args: {
+    label: (
+      <>
+        <p>Based on what you&lsquo;ve told us:</p>
+        <p>We&lsquo;ve added employers&lsquo; liability cover to your quote</p>
+      </>
+    ),
+    description:
+      "You&lsquo;re required by law to have this cover if you have people working for you.",
+    closeHelpOnOutsideClick: false,
+  },
+};
+
+export const WithHelpText: Meta<typeof Question> = {
+  render: (args: QuestionProps) => <Question {...args} />,
+  args: {
+    label: "Question label",
+    help: (
+      <>
+        <p>
+          This is a sample help text to demonstrate what help blocks look like
+          in questions.
+        </p>
+        <p>
+          This is a second paragraph to show that help texts aren&lsquo;t
+          limited to simple strings.
+        </p>
+      </>
+    ),
+    closeHelpOnOutsideClick: false,
+    children: <TextField />,
+  },
+};
+
+export const WithHelpTextOutside: Meta<typeof Question> = {
+  render: (args: QuestionProps) => <Question {...args} />,
+  args: {
+    label: "Question label",
+    help: (
+      <>
+        <p>
+          This is a sample help text to demonstrate what help blocks look like
+          in questions.
+        </p>
+        <p>
+          This is a second paragraph to show that help texts aren&lsquo;t
+          limited to simple strings.
+        </p>
+      </>
+    ),
+    closeHelpOnOutsideClick: true,
+    children: <TextField />,
+    className: "question-example-with-help-text-outside",
+  },
+};
+
+export const WithError: Meta<typeof Question> = {
+  render: (args: QuestionProps) => <Question {...args} />,
+  args: {
+    label: "Question label",
+    children: <TextField />,
+    errorMessage: "This field is required",
+    validationState: "invalid",
+    closeHelpOnOutsideClick: false,
+  },
+};
+
+export const WithRichError: Meta<typeof Question> = {
+  render: (args: QuestionProps) => <Question {...args} />,
+  args: {
+    label: "Question label",
+    children: <TextField />,
+    errorMessage: (
+      <>
+        This<em>contains</em> <strong>HTML</strong> <u>formatting</u>
+      </>
+    ),
+    validationState: "invalid",
+    closeHelpOnOutsideClick: false,
+  },
+};
+
+export const CompleteExample: Meta<typeof Question> = {
+  render: (args: QuestionProps) => <Question {...args} />,
+  args: {
+    label: "Question label",
+    description:
+      "lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
+    children: <TextField />,
+    help: (
+      <>
+        <p>
+          This is a sample help text to demonstrate what help blocks look like
+          in questions.
+        </p>
+        <p>
+          This is a second paragraph to show that help texts aren&lsquo;t
+          limited to simple strings.
+        </p>
+      </>
+    ),
+    errorMessage: "This field is required",
+    validationState: "invalid",
+    closeHelpOnOutsideClick: false,
+  },
+};

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

@@ -0,0 +1,149 @@
+import { useContext, useEffect } from "react";
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
+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";
+import * as QuestionGroupStories from "./QuestionGroup.stories";
+
+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 of={QuestionGroupStories} />
+
+# 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 of={QuestionGroupStories.Normal} />
+
+{/* 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)