@simplybusiness/mobius 3.9.2 → 3.9.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "3.9.2",
+  "version": "3.9.3",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",
@@ -19,6 +19,7 @@
   ],
   "exports": {
     ".": {
+      "types": "./dist/mobius.d.ts",
       "require": "./dist/cjs/index.js",
       "import": "./dist/esm/index.js"
     }

package/src/components/Accordion/Accordion.mdx

@@ -1,6 +1,5 @@
-import { Meta, ArgsTable, Story } from "@storybook/blocks";
-import { Accordion, Divider, Segment, SegmentGroup } from "..";
-import { excludeControls } from "../../utils/excludeControls";
+import { Meta, ArgTypes, Story } from "@storybook/blocks";
+import { Accordion, Segment, SegmentGroup } from "..";
 import * as AccordionStories from "./Accordion.stories";
 
 <Meta of={AccordionStories} />
@@ -104,7 +103,7 @@ import { Accordion, SegmentGroup, Segment } from "@simplybusiness/mobius";
 
 ## Props
 
-<ArgsTable of={Accordion} />
+<ArgTypes of={Accordion} />
 
 ## Component HTML Structure and Class names
 

package/src/components/Alert/Alert.mdx

@@ -1,4 +1,4 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
+import { Meta, ArgTypes, Canvas } from "@storybook/blocks";
 import { Alert, AlertProps } from "./Alert";
 import { excludeControls } from "../../utils/excludeControls";
 import * as AlertStories from "./Alert.stories";
@@ -25,19 +25,15 @@ import { Alert } from "@simplybusiness/mobius";
 
 ## Normal
 
-<Canvas>
-  <Story of={AlertStories.Normal} />
-</Canvas>
+<Canvas of={AlertStories.Normal} />
 
 ## With Header
 
-<Canvas>
-  <Story of={AlertStories.WithHeader} />
-</Canvas>
+<Canvas of={AlertStories.WithHeader} />
 
 ## Props
 
-<ArgsTable of={Alert} />
+<ArgTypes of={Alert} />
 
 ## Component HTML Structure and Class names
 

package/src/components/Box/Box.mdx

@@ -1,4 +1,4 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
+import { Meta, ArgTypes, Canvas } from "@storybook/blocks";
 import { Box, BoxProps } from "./Box";
 import { Button } from "../Button";
 import { excludeControls } from "../../utils/excludeControls";
@@ -26,19 +26,15 @@ import { Box } from "@simplybusiness/mobius";
 
 ## Normal
 
-<Canvas>
-  <Story of={BoxStories.Normal} />
-</Canvas>
+<Canvas of={BoxStories.Normal} />
 
 ## Custom element
 
-<Canvas>
-  <Story of={BoxStories.CustomElement} />
-</Canvas>
+<Canvas of={BoxStories.CustomElement} />
 
 ## Props
 
-<ArgsTable of={Box} />
+<ArgTypes of={Box} />
 
 ## Component HTML Structure and Class names
 

package/src/components/Breadcrumbs/Breadcrumbs.mdx

@@ -1,4 +1,4 @@
-import { Meta, ArgsTable, Story } from "@storybook/blocks";
+import { Meta, ArgTypes, Story } from "@storybook/blocks";
 import { Breadcrumbs } from "./Breadcrumbs";
 import { BreadcrumbItem } from "./BreadcrumbItem";
 import { Link } from "../Link";
@@ -79,7 +79,7 @@ import { Breadcrumbs, BreadcrumbItem, Link } from "@simplybusiness/mobius";
 
 ## Props
 
-<ArgsTable of={Breadcrumbs} />
+<ArgTypes of={Breadcrumbs} />
 
 ## Component HTML Structure and Class names
 

package/src/components/Button/Button.mdx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Meta, ArgsTable, Canvas, Source, Story } from "@storybook/blocks";
+import { Meta, ArgTypes, Canvas, Story } from "@storybook/blocks";
 import { Button } from "./Button";
 import { excludeControls } from "../../utils/excludeControls";
 import * as ButtonStories from "./Button.stories";
@@ -26,63 +26,43 @@ import { Button } from "@simplybusiness/mobius";
 
 ## Normal
 
-<Canvas>
-  <Story of={ButtonStories.Normal} />
-</Canvas>
+<Story of={ButtonStories.Normal} />
 
 ## Secondary
 
-<Canvas>
-  <Story of={ButtonStories.Secondary} />
-</Canvas>
+<Story of={ButtonStories.Secondary} />
 
 ## Ghost
 
-<Canvas>
-  <Story of={ButtonStories.Ghost} />
-</Canvas>
+<Story of={ButtonStories.Ghost} />
 
 ## Basic
 
-<Canvas>
-  <Story of={ButtonStories.Basic} />
-</Canvas>
+<Story of={ButtonStories.Basic} />
 
 ## Large
 
-<Canvas>
-  <Story of={ButtonStories.Large} />
-</Canvas>
+<Story of={ButtonStories.Large} />
 
 ## Link
 
-<Canvas>
-  <Story of={ButtonStories.Link} />
-</Canvas>
+<Story of={ButtonStories.Link} />
 
 ## Loading
 
-<Canvas>
-  <Story of={ButtonStories.Loading} />
-</Canvas>
+<Story of={ButtonStories.Loading} />
 
 ## Success
 
-<Canvas>
-  <Story of={ButtonStories.Success} />
-</Canvas>
+<Story of={ButtonStories.Success} />
 
 ## Disabled
 
-<Canvas>
-  <Story of={ButtonStories.Disabled} />
-</Canvas>
+<Story of={ButtonStories.Disabled} />
 
 ## With Icon
 
-<Canvas>
-  <Story of={ButtonStories.WithIcon} />
-</Canvas>
+<Story of={ButtonStories.WithIcon} />
 
 ## Themed
 
@@ -108,66 +88,26 @@ When the button contains no text content (eg. when it only shows an icon), a val
 
 Button can be interacted with via keyboard, mouse and touch gestures. All these interactions are handled by the `onPress` prop.
 
-export const Counter = () => {
-  let [count, setCount] = useState(0);
-  return (
-    <Button onPress={() => setCount(c => c + 1)}>Pressed {count} times</Button>
-  );
-};
-
 ```tsx
 const Counter = () => {
-  let [count, setCount] = useState(0);
+  const [count, setCount] = useState(0);
   return (
     <Button onPress={() => setCount(c => c + 1)}>Pressed {count} times</Button>
   );
 };
 ```
 
-<Canvas withSource="none">
-  <Counter />
-</Canvas>
-
-export const PressButton = () => {
-  let [pressLogs, setPressLogs] = useState([]);
-  const log = e => {
-    setPressLogs(pressLogs => [...pressLogs.slice(-5), e]);
-  };
-  return (
-    <div>
-      <Button
-        onPressUp={() => log("onPressUp")}
-        onPressEnd={() => log("onPressEnd")}
-        onPress={() => log("onPress")}
-        onPressStart={() => log("onPressStart")}
-      >
-        Press me
-      </Button>
-      <ul>
-        {pressLogs.map((pressLog, i) => (
-          <li key={i}>{pressLog}</li>
-        ))}
-      </ul>
-    </div>
-  );
-};
+<ButtonStories.Counter />
 
 ```tsx
 const PressButton = () => {
-  let [pressLogs, setPressLogs] = useState([]);
+  const [pressLogs, setPressLogs] = useState([]);
   const log = e => {
     setPressLogs(pressLogs => [...pressLogs.slice(-5), e]);
   };
   return (
     <div>
-      <Button
-        onPressUp={() => log("onPressUp")}
-        onPressEnd={() => log("onPressEnd")}
-        onPress={() => log("onPress")}
-        onPressStart={() => log("onPressStart")}
-      >
-        Press me
-      </Button>
+      <Button onPress={() => log("onPress")}>Press me</Button>
       <ul>
         {pressLogs.map((pressLog, i) => (
           <li key={i}>{pressLog}</li>
@@ -178,13 +118,11 @@ const PressButton = () => {
 };
 ```
 
-<Canvas withSource="none">
-  <PressButton />
-</Canvas>
+<ButtonStories.PressButton />
 
 ## Props
 
-<ArgsTable of={Button} />
+<ArgTypes of={Button} />
 
 ## Component HTML Structure and Class names
 

package/src/components/Button/Button.stories.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import type { Meta } from "@storybook/react";
 import { Button, ButtonProps } from "./Button";
 import { excludeControls } from "../../utils/excludeControls";
@@ -5,6 +6,7 @@ import { excludeControls } from "../../utils/excludeControls";
 export default {
   title: "Components/Button",
   component: Button,
+  excludeStories: ["Counter", "PressButton"],
   argTypes: {
     icon: {
       options: ["", "menu", "rightArrow", "leftArrow", "dropdown", "home"],
@@ -223,3 +225,28 @@ export const Themed: Meta<typeof Button> = {
     type: "button",
   },
 };
+
+export const Counter = () => {
+  const [count, setCount] = useState(0);
+  return (
+    <Button onPress={() => setCount(c => c + 1)}>Pressed {count} times</Button>
+  );
+};
+
+export const PressButton = () => {
+  const [pressLogs, setPressLogs] = useState<[] | string[]>([]);
+  const log = (e: string) => {
+    setPressLogs(logs => [...logs.slice(-5), e]);
+  };
+  return (
+    <div>
+      <Button onPress={() => log("onPress")}>Press me</Button>
+      <ul>
+        {pressLogs.map((pressLog, i) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <li key={i}>{pressLog}</li>
+        ))}
+      </ul>
+    </div>
+  );
+};

package/src/components/Checkbox/Checkbox.mdx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
+import { Meta, ArgTypes, Canvas } from "@storybook/blocks";
 import { Checkbox } from "./Checkbox";
 import { Box } from "../Box";
 import { excludeControls } from "../../utils/excludeControls";
@@ -31,9 +31,7 @@ For this component appear selected use `defaultSelected` boolean prop.
 
 This will allow user to change the value. Alternatively, see _Controlled Value_ example.
 
-<Canvas>
-  <Story of={CheckboxStories.Normal} />
-</Canvas>
+<Canvas of={CheckboxStories.Normal} />
 
 ### Controlled Value
 
@@ -41,39 +39,27 @@ You may want to make this component appear selected based on some conditional
 
 logic in another component. In this instance you can pass `isSelected` boolean prop.
 
-<Canvas>
-  <Story of={CheckboxStories.ControlledValue} />
-</Canvas>
+<Canvas of={CheckboxStories.ControlledValue} />
 
 ### Disabled
 
-<Canvas>
-  <Story of={CheckboxStories.Disabled} />
-</Canvas>
+<Canvas of={CheckboxStories.Disabled} />
 
 ### Indeterminate
 
-<Canvas>
-  <Story of={CheckboxStories.Indeterminate} />
-</Canvas>
+<Canvas of={CheckboxStories.Indeterminate} />
 
 ### Valid
 
-<Canvas>
-  <Story of={CheckboxStories.Valid} />
-</Canvas>
+<Canvas of={CheckboxStories.Valid} />
 
 ### Invalid
 
-<Canvas>
-  <Story of={CheckboxStories.Invalid} />
-</Canvas>
+<Canvas of={CheckboxStories.Invalid} />
 
 ### Long label
 
-<Canvas>
-  <Story of={CheckboxStories.LongLabel} />
-</Canvas>
+<Canvas of={CheckboxStories.LongLabel} />
 
 ## Accessibility
 
@@ -85,7 +71,7 @@ The `onChange` prop can be used to listen to changes of the selected state of th
 
 ## Props
 
-<ArgsTable of={Checkbox} />
+<ArgTypes of={Checkbox} />
 
 ## Component HTML Structure and Class names
 

package/src/components/Checkbox/CheckboxGroup.mdx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
+import { Meta, ArgTypes, Canvas } from "@storybook/blocks";
 import { CheckboxGroup, Checkbox } from ".";
 import { Box } from "../Box";
 import { excludeControls } from "../../utils/excludeControls";
@@ -33,9 +33,7 @@ For example, `<CheckboxGroup defaultValue={['option1', 'option3']}>`
 
 This will allow user to change the value. Alternatively, see _Controlled Value_ example.
 
-<Canvas>
-  <Story of={CheckboxGroupStories.Normal} />
-</Canvas>
+<Canvas of={CheckboxGroupStories.Normal} />
 
 ### Controlled Value
 
@@ -45,27 +43,19 @@ logic in another component.
 You can use `value` prop which expects an array. To make `Option 2` and `Option 3`
 appear selected use `<CheckboxGroup value={['option2', 'option3']}>`
 
-<Canvas>
-  <Story of={CheckboxGroupStories.ControlledValue} />
-</Canvas>
+<Canvas of={CheckboxGroupStories.ControlledValue} />
 
 ### Disabled
 
-<Canvas>
-  <Story of={CheckboxGroupStories.Disabled} />
-</Canvas>
+<Canvas of={CheckboxGroupStories.Disabled} />
 
 ### Valid
 
-<Canvas>
-  <Story of={CheckboxGroupStories.Valid} />
-</Canvas>
+<Canvas of={CheckboxGroupStories.Valid} />
 
 ### Invalid
 
-<Canvas>
-  <Story of={CheckboxGroupStories.Invalid} />
-</Canvas>
+<Canvas of={CheckboxGroupStories.Invalid} />
 
 ## Accessibility
 
@@ -85,7 +75,7 @@ The `onChange` prop can be used to listen to changes of the selected state of th
 
 ## Props
 
-<ArgsTable of={CheckboxGroup} />
+<ArgTypes of={CheckboxGroup} />
 
 ## Component HTML Structure and Class names
 

package/src/components/Chopin/Actions/Actions.mdx

@@ -1,4 +1,4 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
+import { Meta, ArgTypes, Canvas, Story } from "@storybook/blocks";
 import { Actions } from ".";
 import { ThemeContext } from "../../../contexts";
 import { excludeControls } from "../../../utils/excludeControls";
@@ -81,9 +81,7 @@ import { Chopin } from "@simplybusiness/mobius";
 
 ## Disabled Actions
 
-<Canvas>
-  <Story of={ActionsStories.DisabledActions} />
-</Canvas>
+<Canvas of={ActionsStories.DisabledActions} />
 
 {/* prettier-ignore */}
 ```jsx
@@ -103,7 +101,7 @@ import { Chopin } from "@simplybusiness/mobius";
 
 ## Props
 
-<ArgsTable of={Actions} />
+<ArgTypes of={Actions} />
 
 ## Component HTML Structure and Class names
 

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

@@ -1,4 +1,4 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
+import { Meta, ArgTypes, Canvas, Story } from "@storybook/blocks";
 import { Footer } from ".";
 import { ThemeContext } from "../../../contexts";
 import { excludeControls } from "../../../utils/excludeControls";
@@ -106,7 +106,7 @@ import { Chopin } from "@simplybusiness/mobius";
 
 ## Props
 
-<ArgsTable of={Footer} />
+<ArgTypes of={Footer} />
 
 ## Component HTML Structure and Class names
 

package/src/components/Chopin/Header/Header.mdx

@@ -1,4 +1,4 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
+import { Meta, ArgTypes, Canvas, Story } from "@storybook/blocks";
 import { Header } from ".";
 import { excludeControls } from "../../../utils/excludeControls";
 import * as HeaderStories from "./Header.stories";
@@ -45,7 +45,7 @@ import { Chopin } from "@simplybusiness/mobius";
 
 ## Props
 
-<ArgsTable of={Header} />
+<ArgTypes of={Header} />
 
 ## Component HTML Structure and Class names
 

package/src/components/Chopin/PercentageTotalsQuestion/PercentageTotalsQuestion.mdx

@@ -1,5 +1,5 @@
 import { useContext, useEffect } from "react";
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
+import { Meta, ArgTypes, Canvas } from "@storybook/blocks";
 import { Text } from "../../Text";
 import { ThemeProvider, ThemeContext } from "../../../contexts";
 import {
@@ -42,13 +42,11 @@ import { Chopin } from "@simplybusiness/mobius";
 
 ## Normal
 
-<Canvas>
-  <Story of={PercentageTotalsQuestionStories.Normal} />
-</Canvas>
+<Canvas of={PercentageTotalsQuestionStories.Normal} />
 
 ## Props
 
-<ArgsTable of={PercentageTotalsQuestion} />
+<ArgTypes of={PercentageTotalsQuestion} />
 
 ## Component HTML Structure and Class names
 

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

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
+import { Meta, ArgTypes, Canvas, Story } from "@storybook/blocks";
 import { ThemeContext } from "../../../contexts";
 import { Question } from "./Question";
 import { Box } from "../../Box";
@@ -205,7 +205,7 @@ import { Chopin } from "@simplybusiness/mobius";
 
 ## Props
 
-<ArgsTable of={Question} />
+<ArgTypes of={Question} />
 
 ## Component HTML Structure and Class names
 

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

@@ -1,5 +1,5 @@
 import { useContext, useEffect } from "react";
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
+import { Meta, ArgTypes, Canvas, Story } from "@storybook/blocks";
 import { ThemeProvider, ThemeContext } from "../../../contexts";
 import { QuestionGroup, QuestionGroupProps } from "./QuestionGroup";
 import { Question } from "../Question";
@@ -62,7 +62,7 @@ import { Chopin, RadioGroup, RadioButton } from "@simplybusiness/mobius";
 
 ## Props
 
-<ArgsTable of={QuestionGroup} />
+<ArgTypes of={QuestionGroup} />
 
 ## Component HTML Structure and Class names
 

package/src/components/Chopin/Section/Section.mdx

@@ -1,4 +1,4 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
+import { Meta, ArgTypes, Canvas, Story } from "@storybook/blocks";
 import { Text } from "../../Text";
 import { Section, SectionProps } from "./Section";
 import { excludeControls } from "../../../utils/excludeControls";
@@ -39,7 +39,7 @@ import { Chopin, Text } from "@simplybusiness/mobius";
 
 ## Props
 
-<ArgsTable of={Section} />
+<ArgTypes of={Section} />
 
 ## Component HTML Structure and Class names
 

package/src/components/Chopin/Steps/Steps.mdx

@@ -1,4 +1,4 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
+import { Meta, ArgTypes, Canvas, Story } from "@storybook/blocks";
 import { Steps, StepItem } from ".";
 import { excludeControls } from "../../../utils/excludeControls";
 import * as StepsStories from "./Steps.stories";
@@ -41,7 +41,7 @@ import { Chopin } from "@simplybusiness/mobius";
 
 ## Props
 
-<ArgsTable of={Steps} />
+<ArgTypes of={Steps} />
 
 ## Component HTML Structure and Class names
 

package/src/components/Chopin/Testimonial/Testimonial.mdx

@@ -1,4 +1,4 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
+import { Meta, ArgTypes, Canvas } from "@storybook/blocks";
 import { Testimonial, TestimonialProps } from "./Testimonial";
 import * as TestimonialStories from "./Testimonial.stories";
 
@@ -22,13 +22,11 @@ import { Testimonial } from "@simplybusiness/mobius";
 
 ## Normal
 
-<Canvas>
-  <Story of={TestimonialStories.Normal} />
-</Canvas>
+<Canvas of={TestimonialStories.Normal} />
 
 ## Props
 
-<ArgsTable of={Testimonial} />
+<ArgTypes of={Testimonial} />
 
 ## Component HTML Structure and Class names
 

package/src/components/Chopin/TradeSelector/TradeSelector.mdx

@@ -1,4 +1,4 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
+import { Meta, ArgTypes, Canvas, Story } from "@storybook/blocks";
 import { TradeSelector, TradeSelectorProps } from ".";
 import { excludeControls } from "../../../utils/excludeControls";
 import * as TradeSelectorStories from "./TradeSelector.stories";
@@ -93,7 +93,7 @@ In order to hide `input` and `description` you can use `hideLabel` prop as follo
 
 ## Props
 
-<ArgsTable of={TradeSelector} />
+<ArgTypes of={TradeSelector} />
 
 ## Component HTML Structure and Class names
 

package/src/components/Container/Container.mdx

@@ -1,4 +1,4 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
+import { Meta, ArgTypes, Canvas } from "@storybook/blocks";
 import { Container } from "./Container";
 import { excludeControls } from "../../utils/excludeControls";
 import * as ContainerStories from "./Container.stories";
@@ -27,13 +27,11 @@ import { Container } from "@simplybusiness/mobius";
 
 ### Normal
 
-<Canvas>
-  <Story of={ContainerStories.Normal} />
-</Canvas>
+<Canvas of={ContainerStories.Normal} />
 
 ## Props
 
-<ArgsTable of={Container} />
+<ArgTypes of={Container} />
 
 ## Component HTML Structure and Class names