@simplybusiness/mobius 3.1.1 → 3.1.3

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

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import styled from "@emotion/styled";
 import { ThemeContext } from "../../../contexts";
 import { Question } from "./Question";
 import { Box } from "../../Box";
@@ -80,6 +81,7 @@ import { Chopin } from "@simplybusiness/mobius";
   name="Normal"
   args={{
     label: "Question label",
+    closeHelpOnOutsideClick: false,
     children: <TextField />,
   }}
 >
@@ -101,6 +103,7 @@ import { Chopin } from "@simplybusiness/mobius";
     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 />,
   }}
 >
@@ -117,6 +120,7 @@ import { Chopin } from "@simplybusiness/mobius";
         <li>Item Two</li>
       </ul>
     ),
+    closeHelpOnOutsideClick: false,
     children: <TextField />,
   }}
 >
@@ -147,6 +151,7 @@ import { Chopin } from "@simplybusiness/mobius";
     ),
     description:
       "You're required by law to have this cover if you have people working for you.",
+    closeHelpOnOutsideClick: false,
   }}
 >
   {args => <Question {...args} />}
@@ -163,7 +168,7 @@ import { Chopin } from "@simplybusiness/mobius";
 ```
 
 <Story
-  name="With Help text"
+  name="With Help Text"
   args={{
     label: "Question label",
     help: (
@@ -178,6 +183,7 @@ import { Chopin } from "@simplybusiness/mobius";
         </p>
       </>
     ),
+    closeHelpOnOutsideClick: false,
     children: <TextField />,
   }}
 >
@@ -188,6 +194,123 @@ import { Chopin } from "@simplybusiness/mobius";
 ```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%);
+  }
+}
+```
+
+export const QuestionContainer = styled("div")`
+  --question-desktop-width: calc(
+    100% - var(--chopin__help-content-width) - var(--chopin__help-content-margin)
+  );
+  .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
+  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 />,
+  }}
+>
+  {args => (
+    <QuestionContainer>
+      <Question {...args} />
+    </QuestionContainer>
+  )}
+</Story>
+
+<!-- prettier-ignore -->
+```jsx
+import { Chopin } from "@simplybusiness/mobius";
+
 <Chopin.Question
   help={
     <>
@@ -214,11 +337,13 @@ import { Chopin } from "@simplybusiness/mobius";
     children: <TextField />,
     errorMessage: "This field is required",
     validationState: "invalid",
+    closeHelpOnOutsideClick: false,
   }}
 >
   {args => <Question {...args} />}
 </Story>
 
+<!-- prettier-ignore -->
 ```jsx
 import { Chopin } from "@simplybusiness/mobius";
 
@@ -228,7 +353,7 @@ import { Chopin } from "@simplybusiness/mobius";
   validationState="invalid"
 >
   <TextField />
-</Chopin.Question>;
+</Chopin.Question>
 ```
 
 <Story
@@ -252,6 +377,7 @@ import { Chopin } from "@simplybusiness/mobius";
     ),
     errorMessage: "This field is required",
     validationState: "invalid",
+    closeHelpOnOutsideClick: false,
   }}
 >
   {args => <Question {...args} />}

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

@@ -5,6 +5,8 @@ import { Question } from ".";
 import { TextField } from "../../TextField";
 
 const WRAPPER_CLASS_NAME = "chopin/Question";
+const OPEN_CLASS_NAME = "--is-open";
+const CLOSED_CLASS_NAME = "--is-closed";
 
 expect.extend(matchers);
 
@@ -170,5 +172,49 @@ describe("Question", () => {
       await userEvent.keyboard("{escape}");
       expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
     });
+
+    describe("given closeHelpOnOutsideClick is set to true", () => {
+      it("should close on outside click", async () => {
+        const { container } = render(
+          <Question
+            label="Question"
+            help="This is a help message"
+            closeHelpOnOutsideClick
+          >
+            <TextField />
+          </Question>,
+        );
+
+        const toggle = screen.getByRole("button");
+
+        await userEvent.click(toggle);
+
+        expect(toggle.parentElement).toHaveClass(OPEN_CLASS_NAME);
+
+        await userEvent.click(container);
+
+        expect(toggle.parentElement).toHaveClass(CLOSED_CLASS_NAME);
+      });
+    });
+
+    describe("given closeHelpOnOutsideClick is not set", () => {
+      it("should close on outside click", async () => {
+        const { container } = render(
+          <Question label="Question" help="This is a help message">
+            <TextField />
+          </Question>,
+        );
+
+        const toggle = screen.getByRole("button");
+
+        await userEvent.click(toggle);
+
+        expect(toggle.parentElement).toHaveClass(OPEN_CLASS_NAME);
+
+        await userEvent.click(container);
+
+        expect(toggle.parentElement).toHaveClass(OPEN_CLASS_NAME);
+      });
+    });
   });
 });

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

@@ -21,6 +21,7 @@ export interface QuestionProps {
   validationState?: "valid" | "invalid" | "";
   help?: ReactNode;
   className?: string;
+  closeHelpOnOutsideClick?: boolean;
 }
 
 export function Question({
@@ -31,6 +32,7 @@ export function Question({
   validationState,
   help,
   className,
+  closeHelpOnOutsideClick,
 }: QuestionProps) {
   const [isOpen, setIsOpen] = useState(false);
   const labelId = useId();
@@ -72,7 +74,11 @@ export function Question({
         {label}
       </Label>
       {help && (
-        <QuestionHelp onChange={handleChange} isDesktop={isDesktop}>
+        <QuestionHelp
+          onChange={handleChange}
+          isDesktop={isDesktop}
+          closeHelpOnOutsideClick={closeHelpOnOutsideClick}
+        >
           {help}
         </QuestionHelp>
       )}

package/src/components/Chopin/QuestionHelp/QuestionHelp.tsx

@@ -9,6 +9,7 @@ export interface QuestionHelpProps {
   children: ReactNode;
   onChange?: (state: boolean) => void;
   isDesktop?: boolean;
+  closeHelpOnOutsideClick?: boolean;
 }
 
 export function QuestionHelp({
@@ -17,6 +18,7 @@ export function QuestionHelp({
   children,
   onChange = () => {},
   isDesktop,
+  closeHelpOnOutsideClick = false,
 }: QuestionHelpProps) {
   const [isOpen, setIsOpen] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
@@ -32,12 +34,13 @@ export function QuestionHelp({
     (event: MouseEvent) => {
       if (
         ref.current &&
-        !ref.current.contains(event.target as HTMLDivElement)
+        !ref.current.contains(event.target as HTMLDivElement) &&
+        closeHelpOnOutsideClick
       ) {
         setIsOpen(false);
       }
     },
-    [setIsOpen],
+    [setIsOpen, closeHelpOnOutsideClick],
   );
 
   useEffect(() => {

package/src/components/DatePicker/DatePicker.tsx

@@ -18,7 +18,7 @@ import { Label } from "../Label";
 
 export interface DatePickerProps
   extends AriaDatePickerProps<DateValue>,
-    DatePickerStateOptions {
+    DatePickerStateOptions<DateValue> {
   label: string;
 }
 

package/src/components/Radio/Radio.story.mdx

@@ -55,6 +55,12 @@ import { Radio, RadioGroup } from "@simplybusiness/mobius";
 
 ### Normal
 
+For a radio to appear selected use `value` prop which expects a string.
+
+For example, `<RadioGroup defaultValue="blue">`
+
+This will allow user to change the value. Alternatively, see _Controlled Value_ example.
+
 <Canvas>
   <Story
     name="Normal"
@@ -64,6 +70,34 @@ import { Radio, RadioGroup } from "@simplybusiness/mobius";
       errorMessage: "",
       validationState: "",
       orientation: "vertical",
+      defaultValue: "blue",
+    }}
+  >
+    {args => (
+      <RadioGroup {...args}>
+        <Radio value="red" label="Red" />
+        <Radio value="blue" label="Blue" />
+      </RadioGroup>
+    )}
+  </Story>
+</Canvas>
+
+### Controlled Value
+
+You may want a radio to appear selected based on some conditional logic in another component.
+
+You can use `value` prop which expects a string. To make `Blue` appear selected use `<RadioGroup value="blue">`
+
+<Canvas>
+  <Story
+    name="Controlled Value"
+    args={{
+      label: "Color",
+      isDisabled: false,
+      errorMessage: "",
+      validationState: "",
+      orientation: "vertical",
+      value: "blue",
     }}
   >
     {args => (

package/src/components/Radio/RadioButton.story.mdx

@@ -41,6 +41,12 @@ import { RadioButton, RadioGroup } from "@simplybusiness/mobius";
 
 ### Normal
 
+For a radio button to appear selected use `value` prop which expects a string.
+
+For example, `<RadioGroup defaultValue="blue">`
+
+This will allow user to change the value. Alternatively, see _Controlled Value_ example.
+
 <Canvas>
   <Story
     name="Normal"
@@ -48,6 +54,32 @@ import { RadioButton, RadioGroup } from "@simplybusiness/mobius";
       label: "Color",
       orientation: "horizontal",
       isDisabled: false,
+      defaultValue: "blue",
+    }}
+  >
+    {args => (
+      <RadioGroup {...args}>
+        <RadioButton value="red">Red</RadioButton>
+        <RadioButton value="blue">Blue</RadioButton>
+      </RadioGroup>
+    )}
+  </Story>
+</Canvas>
+
+### Controlled Value
+
+You may want a radio button to appear selected based on some conditional logic in another component.
+
+You can use `value` prop which expects a string. To make `Blue` appear selected use `<RadioGroup value="blue">`
+
+<Canvas>
+  <Story
+    name="Controlled Value"
+    args={{
+      label: "Color",
+      orientation: "horizontal",
+      isDisabled: false,
+      value: "blue",
     }}
   >
     {args => (