@simplybusiness/mobius 3.9.2 → 3.9.4

package/src/components/DataTable/DataTable.mdx

@@ -1,4 +1,4 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
+import { Meta, ArgTypes, Canvas, Story } from "@storybook/blocks";
 import * as baseIcons from "@simplybusiness/icons";
 import { DataTable } from ".";
 import { data, columns } from "./mockTableData";
@@ -118,26 +118,20 @@ Each row is an object with `accessor` (see `columns` prop above) as key and uniq
 
 ## Table Layout
 
-<Canvas>
-  <Story of={DataTableStories.TableLayout} />
-</Canvas>
+<Canvas of={DataTableStories.TableLayout} />
 
 ## Flex based layout
 
 Traditional `table` based layouts are great for displaying basic tabular data. The Flex-based layout renders tables as `inline-block` `div`s.
 It becomes useful when implementing resizable tables that must also be able to stretch to fill all available space.
 
-<Canvas>
-  <Story of={DataTableStories.DivLayout} />
-</Canvas>
+<Canvas of={DataTableStories.DivLayout} />
 
 ## Sorting
 
 Sort tabular data by clicking on header cells.
 
-<Canvas>
-  <Story of={DataTableStories.Sorting} />
-</Canvas>
+<Canvas of={DataTableStories.Sorting} />
 
 ## Collapsing
 
@@ -199,15 +193,11 @@ To span two adjacent table cells together use `spanData` prop as follows:
 - `substValue` - the value which the original cell value can be replaced with (optional);
 - `spanClass` - the class name value, which can be added to the cell (optional);
 
-<Canvas>
-  <Story of={DataTableStories.ColumnSpanning} />
-</Canvas>
+<Canvas of={DataTableStories.ColumnSpanning} />
 
 ## Row Spanning (for Table layout)
 
-<Canvas>
-  <Story of={DataTableStories.RowSpanning} />
-</Canvas>
+<Canvas of={DataTableStories.RowSpanning} />
 
 ## Render Cells with custom Elements
 
@@ -247,7 +237,7 @@ To span two adjacent table cells together use `spanData` prop as follows:
 
 ## Props
 
-<ArgsTable of={DataTable} />
+<ArgTypes of={DataTable} />
 
 ## Component HTML Structure and Class names
 

package/src/components/DatePicker/DatePicker.mdx

@@ -1,4 +1,4 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
+import { Meta, ArgTypes, Canvas, Story } from "@storybook/blocks";
 import { DatePicker } from "./DatePicker";
 import { Button } from "../Button";
 import { parseDate } from "@internationalized/date";
@@ -42,7 +42,7 @@ import { parseDate } from "@internationalized/date";
 
 ## Props
 
-<ArgsTable of={DatePicker} />
+<ArgTypes of={DatePicker} />
 
 ## Component HTML Structure and Class names
 

package/src/components/Divider/Divider.mdx

@@ -1,4 +1,4 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
+import { Meta, ArgTypes, Canvas } from "@storybook/blocks";
 import { Divider } from "./Divider";
 import { Text, Flex } from "..";
 import { excludeControls } from "../../utils/excludeControls";
@@ -26,13 +26,11 @@ import { Divider } from "@simplybusiness/mobius";
 
 ### Normal
 
-<Canvas>
-  <Story of={DividerStories.Normal} />
-</Canvas>
+<Canvas of={DividerStories.Normal} />
 
 ## Props
 
-<ArgsTable of={Divider} />
+<ArgTypes of={Divider} />
 
 ## Component HTML Structure and Class names
 

package/src/components/DropdownMenu/DropdownMenu.mdx

@@ -1,5 +1,5 @@
 import { forwardRef } from "react";
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
+import { Meta, ArgTypes, Canvas } from "@storybook/blocks";
 import { DropdownMenu } from ".";
 import { Icon } from "../Icon";
 import { excludeControls } from "../../utils/excludeControls";
@@ -34,9 +34,7 @@ behaviours are handled correctly.
 
 ## Normal
 
-<Canvas>
-  <Story of={DropdownMenuStories.Normal} />
-</Canvas>
+<Canvas of={DropdownMenuStories.Normal} />
 
 ## With Customisations
 
@@ -93,13 +91,11 @@ export const CustomTrigger = forwardRef((props, ref) => {
   );
 });
 
-<Canvas>
-  <Story of={DropdownMenuStories.WithCustomTrigger} />
-</Canvas>
+<Canvas of={DropdownMenuStories.WithCustomTrigger} />
 
 ## Props
 
-<ArgsTable of={DropdownMenu} />
+<ArgTypes of={DropdownMenu} />
 
 ## Component HTML Structure and Class names
 

package/src/components/ErrorMessage/ErrorMessage.mdx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Meta, ArgsTable, Story, Canvas } from "@storybook/blocks";
+import { Meta, ArgTypes, Story, Canvas } from "@storybook/blocks";
 import { Box } from "../Box";
 import { Button } from "../Button";
 import { ErrorMessage } from ".";
@@ -28,12 +28,8 @@ import { ErrorMessage } from "@simplybusiness/mobius";
 
 ### Normal
 
-<Canvas>
-  <Story of={ErrorMessageStories.Normal} />
-</Canvas>
+<Canvas of={ErrorMessageStories.Normal} />
 
 ### Long message
 
-<Canvas>
-  <Story of={ErrorMessageStories.LongMessage} />
-</Canvas>
+<Canvas of={ErrorMessageStories.LongMessage} />

package/src/components/Fieldset/Fieldset.mdx

@@ -1,4 +1,4 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
+import { Meta, ArgTypes, Canvas } from "@storybook/blocks";
 import { Fieldset } from "./Fieldset";
 import { TextField } from "../TextField";
 import { excludeControls } from "../../utils/excludeControls";
@@ -26,15 +26,11 @@ import { Fieldset } from "@simplybusiness/mobius";
 
 ## Normal
 
-<Canvas>
-  <Story of={FieldsetStories.Normal} />
-</Canvas>
+<Canvas of={FieldsetStories.Normal} />
 
 ## With Legend
 
-<Canvas>
-  <Story of={FieldsetStories.WithLegend} />
-</Canvas>
+<Canvas of={FieldsetStories.WithLegend} />
 
 ## Accessibility
 
@@ -42,7 +38,7 @@ A `legend` can provided to help screen readers spell out the fieldset name when
 
 ## Props
 
-<ArgsTable of={Fieldset} />
+<ArgTypes of={Fieldset} />
 
 ## Component HTML Structure and Class names
 

package/src/components/Flex/Flex.mdx

@@ -1,4 +1,4 @@
-import { Meta, ArgsTable, Story } from "@storybook/blocks";
+import { Meta, ArgTypes, Story } from "@storybook/blocks";
 import { Flex } from "./Flex";
 import { Box } from "../Box";
 import { excludeControls } from "../../utils/excludeControls";
@@ -235,7 +235,7 @@ const Card = ({ children, ...props }) => (
 
 ## Props
 
-<ArgsTable of={Flex} />
+<ArgTypes of={Flex} />
 
 ## Component HTML Structure and Class names
 

package/src/components/Grid/Grid.mdx

@@ -1,5 +1,5 @@
 import { useState, Fragment } from "react";
-import { Meta, ArgsTable, Story } from "@storybook/blocks";
+import { Meta, ArgTypes, Story } from "@storybook/blocks";
 import { Grid } from ".";
 import { Box } from "../Box";
 import { Flex } from "../Flex";
@@ -116,73 +116,39 @@ Different items can have different widths. This is especially useful when creati
   <Grid.Item span={12}>
     <Card>span=12</Card>
   </Grid.Item>
-
-{" "}
-
-<Grid.Item span={11}>
-  <Card>span=11</Card>
-</Grid.Item>
-
-{" "}
-
-<Grid.Item span={1}>
-  <Card>span=1</Card>
-</Grid.Item>
-
-{" "}
-
-<Grid.Item span={10}>
-  <Card>span=10</Card>
-</Grid.Item>
-
-{" "}
-
-<Grid.Item span={2}>
-  <Card>span=2</Card>
-</Grid.Item>
-
-{" "}
-
-<Grid.Item span={9}>
-  <Card>span=9</Card>
-</Grid.Item>
-
-{" "}
-
-<Grid.Item span={3}>
-  <Card>span=3</Card>
-</Grid.Item>
-
-{" "}
-
-<Grid.Item span={8}>
-  <Card>span=8</Card>
-</Grid.Item>
-
-{" "}
-
-<Grid.Item span={4}>
-  <Card>span=4</Card>
-</Grid.Item>
-
-{" "}
-
-<Grid.Item span={7}>
-  <Card>span=7</Card>
-</Grid.Item>
-
-{" "}
-
-<Grid.Item span={5}>
-  <Card>span=5</Card>
-</Grid.Item>
-
-{" "}
-
-<Grid.Item span={6}>
-  <Card>span=6</Card>
-</Grid.Item>
-
+  <Grid.Item span={11}>
+    <Card>span=11</Card>
+  </Grid.Item>
+  <Grid.Item span={1}>
+    <Card>span=1</Card>
+  </Grid.Item>
+  <Grid.Item span={10}>
+    <Card>span=10</Card>
+  </Grid.Item>
+  <Grid.Item span={2}>
+    <Card>span=2</Card>
+  </Grid.Item>
+  <Grid.Item span={9}>
+    <Card>span=9</Card>
+  </Grid.Item>
+  <Grid.Item span={3}>
+    <Card>span=3</Card>
+  </Grid.Item>
+  <Grid.Item span={8}>
+    <Card>span=8</Card>
+  </Grid.Item>
+  <Grid.Item span={4}>
+    <Card>span=4</Card>
+  </Grid.Item>
+  <Grid.Item span={7}>
+    <Card>span=7</Card>
+  </Grid.Item>
+  <Grid.Item span={5}>
+    <Card>span=5</Card>
+  </Grid.Item>
+  <Grid.Item span={6}>
+    <Card>span=6</Card>
+  </Grid.Item>
   <Grid.Item span={6}>
     <Card>span=6</Card>
   </Grid.Item>
@@ -508,7 +474,7 @@ const AlignSquare = ({ children, ...props }) => (
 
 ## Props
 
-<ArgsTable of={Grid} />
+<ArgTypes of={Grid} />
 
 ---
 

package/src/components/Icon/Icon.mdx

@@ -1,4 +1,4 @@
-import { Meta, ArgsTable, Story } from "@storybook/blocks";
+import { Meta, ArgTypes, Story } from "@storybook/blocks";
 import { Icon } from "./Icon";
 import * as IconStories from "./Icon.stories";
 
@@ -58,7 +58,7 @@ All icons are marked with aria-hidden and should not be used without some form o
 
 ## Props
 
-<ArgsTable of={Icon} />
+<ArgTypes of={Icon} />
 
 ## Component HTML Structure and Class names
 

package/src/components/Image/Image.mdx

@@ -1,4 +1,4 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
+import { Meta, ArgTypes, Canvas } from "@storybook/blocks";
 import { Image } from "./Image";
 import { excludeControls } from "../../utils/excludeControls";
 import * as ImageStories from "./Image.stories";
@@ -66,9 +66,7 @@ export const testImg =
 
 ### Normal
 
-<Canvas>
-  <Story of={ImageStories.Normal} />
-</Canvas>
+<Canvas of={ImageStories.Normal} />
 
 ## Accessibility
 
@@ -76,7 +74,7 @@ Image must have an `alt` prop specified. If the image is not adding any valuable
 
 ## Props
 
-<ArgsTable of={Image} />
+<ArgTypes of={Image} />
 
 ## Component HTML Structure and Class names
 

package/src/components/Label/Label.mdx

@@ -1,4 +1,4 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
+import { Meta, ArgTypes, Canvas } from "@storybook/blocks";
 import { Label } from "./Label";
 import { excludeControls } from "../../utils/excludeControls";
 import * as LabelStories from "./Label.stories";
@@ -23,9 +23,7 @@ import { Label } from "@simplybusiness/mobius";
 
 ## Examples
 
-<Canvas>
-  <Story of={LabelStories.Normal} />
-</Canvas>
+<Canvas of={LabelStories.Normal} />
 
 ## Accessibility
 
@@ -40,7 +38,7 @@ Label supports all React label props. Because `for` is a reserved JavaScript key
 
 ## Props
 
-<ArgsTable of={Label} />
+<ArgTypes of={Label} />
 
 ## Component HTML Structure and Class names
 

package/src/components/Link/Link.mdx

@@ -1,4 +1,4 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
+import { Meta, ArgTypes, Canvas } from "@storybook/blocks";
 import { Link } from "./Link";
 import { excludeControls } from "../../utils/excludeControls";
 import * as LinkStories from "./Link.stories";
@@ -76,19 +76,15 @@ import { Link } from "@simplybusiness/mobius";
 
 ### Normal
 
-<Canvas>
-  <Story of={LinkStories.Normal} />
-</Canvas>
+<Canvas of={LinkStories.Normal} />
 
 ### Disabled
 
-<Canvas>
-  <Story of={LinkStories.Disabled} />
-</Canvas>
+<Canvas of={LinkStories.Disabled} />
 
 ## Props
 
-<ArgsTable of={Link} />
+<ArgTypes of={Link} />
 
 ## Component HTML Structure and Class names
 

package/src/components/LinkButton/LinkButton.mdx

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

package/src/components/List/List.mdx

@@ -1,4 +1,4 @@
-import { Meta, ArgsTable, Story } from "@storybook/blocks";
+import { Meta, ArgTypes, Story } from "@storybook/blocks";
 import { Icon, Text } from "../index";
 import { List, ListItem } from ".";
 import { excludeControls } from "../../utils/excludeControls";
@@ -121,7 +121,7 @@ import { List, ListItem, Text, Icon } from "@simplybusiness/mobius";
 
 ### List
 
-<ArgsTable components={{ List: List, ListItem: ListItem }} />
+<ArgTypes components={{ List: List, ListItem: ListItem }} />
 
 ## Component HTML Structure and Class names
 

package/src/components/LoadingIndicator/LoadingIndicator.mdx

@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { Meta, ArgsTable, Story } from "@storybook/blocks";
+import { Meta, ArgTypes, Story } from "@storybook/blocks";
 import { LoadingIndicator } from "./LoadingIndicator";
 import { excludeControls } from "../../utils/excludeControls";
 import * as LoadingIndicatorStories from "./LoadingIndicator.stories";
@@ -42,7 +42,7 @@ import { LoadingIndicator } from "@simplybusiness/mobius";
 
 ## Props
 
-<ArgsTable of={LoadingIndicator} />
+<ArgTypes of={LoadingIndicator} />
 
 ## Component HTML Structure and Class names
 

package/src/components/MaskedField/MaskedField.mdx

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

package/src/components/Modal/Modal.mdx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Meta, ArgsTable, Story } from "@storybook/blocks";
+import { Meta, ArgTypes, Story } from "@storybook/blocks";
 import { Box } from "../Box";
 import { Button } from "../Button";
 import { Modal } from ".";
@@ -351,7 +351,7 @@ export const ExampleContent = ({ onClose }) => {
 
 ## Props
 
-<ArgsTable components={{ Modal: Modal }} />
+<ArgTypes of={Modal} />
 
 ## Component HTML Structure and Class names
 

package/src/components/NumberField/NumberField.mdx

@@ -1,4 +1,4 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
+import { Meta, ArgTypes, Canvas } from "@storybook/blocks";
 import { NumberField, NumberFieldProps } from "./NumberField";
 import { excludeControls } from "../../utils/excludeControls";
 import * as NumberFieldStories from "./NumberField.stories";
@@ -25,43 +25,48 @@ import { NumberField } from "@simplybusiness/mobius";
 
 ## Normal
 
-<Canvas>
-  <Story of={NumberFieldStories.Normal} />
-</Canvas>
+<Canvas of={NumberFieldStories.Normal} />
 
 ## Formatted
 
-<Canvas>
-  <Story of={NumberFieldStories.Formatted} />
-</Canvas>
+<Canvas of={NumberFieldStories.Formatted} />
+
+Formatted NumberField takes `formatOptions` prop, which has the same `options` as `Intl.NumberFormat() constructor`. See the exhaustive list of options on [MDN docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options).
+
+For example, to show USD currency as a prefix:
+
+```jsx
+<NumberField
+  label="Number field"
+  defaultValue={0}
+  formatOptions={{
+    style: "currency",
+    currency: "USD",
+  }}
+  step={1}
+  isRequired={false}
+/>
+```
 
 ## Limited range
 
-<Canvas>
-  <Story of={NumberFieldStories.LimitedRange} />
-</Canvas>
+<Canvas of={NumberFieldStories.LimitedRange} />
 
 ## Valid
 
-<Canvas>
-  <Story of={NumberFieldStories.Valid} />
-</Canvas>
+<Canvas of={NumberFieldStories.Valid} />
 
 ## Valid
 
-<Canvas>
-  <Story of={NumberFieldStories.Invalid} />
-</Canvas>
+<Canvas of={NumberFieldStories.Invalid} />
 
 ## Disabled
 
-<Canvas>
-  <Story of={NumberFieldStories.Disabled} />
-</Canvas>
+<Canvas of={NumberFieldStories.Disabled} />
 
 ## Props
 
-<ArgsTable of={NumberField} />
+<ArgTypes of={NumberField} />
 
 ## Component HTML Structure and Class names
 

package/src/components/PasswordField/PasswordField.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 { PasswordField } from "./PasswordField";
 import { Label, Segment, SegmentGroup } from "..";
 import { excludeControls } from "../../utils/excludeControls";
@@ -27,9 +27,7 @@ import { PasswordField } from "@simplybusiness/mobius";
 
 ### Normal
 
-<Canvas>
-  <Story of={PasswordFieldStories.Normal} />
-</Canvas>
+<Canvas of={PasswordFieldStories.Normal} />
 
 ## Accessibility
 
@@ -42,7 +40,7 @@ See the example of controlled component using the `onChange` prop.
 
 ## Props
 
-<ArgsTable of={PasswordField} />
+<ArgTypes of={PasswordField} />
 
 ## Component HTML Structure and Class names
 

package/src/components/Progress/Progress.mdx

@@ -1,4 +1,4 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
+import { Meta, ArgTypes, Canvas } from "@storybook/blocks";
 import { Progress, ProgressProps } from "./Progress";
 import { excludeControls } from "../../utils/excludeControls";
 import * as ProgressStories from "./Progress.stories";
@@ -24,34 +24,26 @@ import { Progress } from "@simplybusiness/mobius";
 
 ## Primary
 
-<Canvas>
-  <Story of={ProgressStories.Primary} />
-</Canvas>
+<Canvas of={ProgressStories.Primary} />
 
 ## Secondary
 
-<Canvas>
-  <Story of={ProgressStories.Secondary} />
-</Canvas>
+<Canvas of={ProgressStories.Secondary} />
 
 ## No Visible Label
 
-<Canvas>
-  <Story of={ProgressStories.NoVisibleLabel} />
-</Canvas>
+<Canvas of={ProgressStories.NoVisibleLabel} />
 
 ## Custom value format
 
 export const customValueFormatter = (value, minValue, maxValue) =>
   `Step ${value} of ${maxValue}`;
 
-<Canvas>
-  <Story of={ProgressStories.CustomValueFormat} />
-</Canvas>
+<Canvas of={ProgressStories.CustomValueFormat} />
 
 ## Props
 
-<ArgsTable of={Progress} />
+<ArgTypes of={Progress} />
 
 ## Component HTML Structure and Class names