@simplybusiness/mobius 3.10.0 → 3.11.0

package/src/components/Chopin/Question/Question.mdx

@@ -1,254 +0,0 @@
-import { useState } from "react";
-import { Meta, ArgTypes, 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 of={QuestionStories} />
-
-# Question
-
-Question displays a questionnaire question.
-
-## Install
-
-```bash
-yarn add @simplybusiness/mobius
-```
-
-## Usage
-
-```js
-import { Chopin } from "@simplybusiness/mobius";
-```
-
-## Examples
-
-### Normal
-
-<Story of={QuestionStories.Normal} />
-
-{/* prettier-ignore */}
-```jsx
-import { Chopin } from "@simplybusiness/mobius";
-
-<Chopin.Question label="Question label">
-  <TextField />
-</Chopin.Question>
-```
-
-<Story of={QuestionStories.WithDescription} />
-
-<Story of={QuestionStories.WithRichDescription} />
-
-{/* prettier-ignore */}
-```jsx
-import { Chopin } from "@simplybusiness/mobius";
-
-<Chopin.Question
-  description="lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"
-  label="Question label"
-
->
-  <TextField />
-</Chopin.Question>
-```
-
-<Story of={QuestionStories.WithNoInput} />
-
-{/* prettier-ignore */}
-```jsx
-import { Chopin } from "@simplybusiness/mobius";
-
-<Chopin.Question
-  description="lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"
-  label="Question label"
-/>
-```
-
-<Story of={QuestionStories.WithHelpText} />
-
-{/* prettier-ignore */}
-```jsx
-import { Chopin } from "@simplybusiness/mobius";
-
-<Chopin.Question
-  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>
-    </>
-  }
-  label="Question label"
-  // Remove the prop if clicking outside the help text container should not close it
-  closeHelpOnOutsideClick
->
-  <TextField />
-</Chopin.Question>
-```
-
-```css
-/* Ensure `<Question />` width leaves enough space for help text to appear */
-:root,
-:host {
-  --question-desktop-width: calc(
-    100% - var(--chopin__help-content-width) - var(--chopin__help-content-margin)
-  );
-}
-
-/* Position help text to the right of `<Question />` when on desktop */
-.chopin\/QuestionHelp.--is-desktop .chopin\/QuestionHelpContent {
-  position: absolute;
-  top: 0;
-  right: calc(
-    0px - var(--chopin__help-content-width) - var(--chopin__help-content-margin)
-  );
-  width: var(--chopin__help-content-width);
-  margin: 0;
-
-  &::before {
-    box-sizing: border-box;
-    position: absolute;
-    top: 22px;
-    content: "";
-    display: block;
-    width: var(--chopin__help_content-arrow-size);
-    height: var(--chopin__help_content-arrow-size);
-    background-color: var(--color-background-highlight);
-    border: var(--size-border-width) solid var(--question-help-border-color);
-    transform: rotate(45deg);
-    left: calc(0px - (var(--chopin__help_content-arrow-size) / 2));
-    clip-path: polygon(0 0, 0% 100%, 100% 100%);
-  }
-}
-```
-
-<Story of={QuestionStories.WithHelpTextOutside} />
-
-{/* prettier-ignore */}
-```jsx
-import { Chopin } from "@simplybusiness/mobius";
-
-<Chopin.Question
-  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>
-    </>
-  }
-  label="Question label"
->
-  <TextField />
-</Chopin.Question>
-```
-
-<Story of={QuestionStories.WithError} />
-
-<Story of={QuestionStories.WithRichError} />
-
-{/* prettier-ignore */}
-```jsx
-import { Chopin } from "@simplybusiness/mobius";
-
-<Chopin.Question
-  errorMessage="This field is required"
-  label="Question label"
-  validationState="invalid"
->
-  <TextField />
-</Chopin.Question>
-```
-
-<Story of={QuestionStories.CompleteExample} />
-
-{/* prettier-ignore */}
-```jsx
-import { Chopin } from "@simplybusiness/mobius";
-
-<Chopin.Question
-  description="lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"
-  errorMessage="This field is required"
-  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>
-    </>
-  }
-  label="Question label"
-
-  validationState="invalid"
->
-  <TextField />
-</Chopin.Question>
-```
-
-## Props
-
-<ArgTypes of={Question} />
-
-## Component HTML Structure and Class names
-
-```html
-<div class="chopin/Question">
-  <label class="mobius mobius/Label chopin/QuestionLabel">Question label</label>
-  <div class="chopin/QuestionHelp --is-closed">
-    <button class="chopin/QuestionHelpTrigger">
-      <span>Open Help</span>
-    </button>
-    <div class="chopin/QuestionHelpContent" role="tooltip">
-      <p>
-        This is sample help text to demonstrate what help blocks look like in
-        questions.
-      </p>
-    </div>
-  </div>
-  <p class="mobius mobius/Text p chopin/QuestionDescription">
-    This is a description for the question.
-  </p>
-  <div class="mobius mobius/Flex mobius/TextField --is-invalid">
-    <input class="mobius mobius/TextInput --is-invalid mobius/TextFieldInput" />
-    <div class="mobius mobius/ErrorMessage">
-      <span class="mobius/ErrorIcon"></span>
-      <span class="mobius mobius/Text mobius/ErrorText"
-        >This field is required</span
-      >
-    </div>
-  </div>
-</div>
-```
-
-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
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Chopin/Question) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

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

@@ -1,211 +0,0 @@
-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/Question/Question.story.styles.css

@@ -1,35 +0,0 @@
-.question-example-with-help-text-outside {
-  --question-desktop-width: calc(
-    100% - var(--chopin__help-content-width) -
-      var(--chopin__help-content-margin)
-  );
-}
-
-.question-example-with-help-text-outside
-  .chopin\/QuestionHelp.--is-desktop
-  .chopin\/QuestionHelpContent {
-  position: absolute;
-  top: 0;
-  right: calc(
-    0px - var(--chopin__help-content-width) - var(--chopin__help-content-margin)
-  );
-  width: var(--chopin__help-content-width);
-  margin: 0;
-}
-
-.question-example-with-help-text-outside
-  .chopin\/QuestionHelp.--is-desktop
-  .chopin\/QuestionHelpContent::before {
-  box-sizing: border-box;
-  position: absolute;
-  top: 22px;
-  content: "";
-  display: block;
-  width: var(--chopin__help_content-arrow-size);
-  height: var(--chopin__help_content-arrow-size);
-  background-color: var(--color-background-highlight);
-  border: var(--size-border-width) solid var(--question-help-border-color);
-  transform: rotate(45deg);
-  left: calc(0px - (var(--chopin__help_content-arrow-size) / 2));
-  clip-path: polygon(0 0, 0% 100%, 100% 100%);
-}