@simplybusiness/mobius 3.9.2 → 3.9.4

package/src/components/Radio/Radio.mdx

@@ -1,5 +1,5 @@
 import { Fragment, useState } from "react";
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
+import { Meta, ArgTypes, Canvas, Story } from "@storybook/blocks";
 import { Radio } from "./Radio";
 import { RadioGroup } from "./RadioGroup";
 import { Flex } from "../Flex";
@@ -39,9 +39,7 @@ For example, `<RadioGroup defaultValue="blue">`
 
 This will allow user to change the value. Alternatively, see _Controlled Value_ example.
 
-<Canvas>
-  <Story of={RadioStories.Normal} />
-</Canvas>
+<Canvas of={RadioStories.Normal} />
 
 ### Controlled Value
 
@@ -49,33 +47,23 @@ You may want a radio to appear selected based on some conditional logic in anoth
 
 You can use `value` prop which expects a string. To make `Blue` appear selected use `<RadioGroup value="blue">`
 
-<Canvas>
-  <Story of={RadioStories.ControlledValue} />
-</Canvas>
+<Canvas of={RadioStories.ControlledValue} />
 
 ### Disabled
 
-<Canvas>
-  <Story of={RadioStories.Disabled} />
-</Canvas>
+<Canvas of={RadioStories.Disabled} />
 
 ### Disabled Individual Radios
 
-<Canvas>
-  <Story of={RadioStories.DisabledIndividualRadios} />
-</Canvas>
+<Canvas of={RadioStories.DisabledIndividualRadios} />
 
 ### Valid
 
-<Canvas>
-  <Story of={RadioStories.Valid} />
-</Canvas>
+<Canvas of={RadioStories.Valid} />
 
 ### Invalid
 
-<Canvas>
-  <Story of={RadioStories.Invalid} />
-</Canvas>
+<Canvas of={RadioStories.Invalid} />
 
 ### Complex label
 
@@ -138,9 +126,7 @@ You can use `value` prop which expects a string. To make `Blue` appear selected
 
 ### Horizontal Layout
 
-<Canvas>
-  <Story of={RadioStories.HorizontalLayout} />
-</Canvas>
+<Canvas of={RadioStories.HorizontalLayout} />
 
 ## Accessibility
 
@@ -152,7 +138,7 @@ The `onChange` prop can be used to listen to changes of the selected radio butto
 
 ## Radio Props
 
-<ArgsTable components={{ RadioGroup: RadioGroup, Radio: Radio }} />
+<ArgTypes of={{ ...Radio, ...RadioGroup }} />
 
 ## Component HTML Structure and Class names
 

package/src/components/Radio/RadioButton.mdx

@@ -1,5 +1,5 @@
 import { Fragment, useState } from "react";
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
+import { Meta, ArgTypes, Canvas } from "@storybook/blocks";
 import { RadioButton } from "./RadioButton";
 import { RadioGroup } from "./RadioGroup";
 import { Flex } from "../Flex";
@@ -38,9 +38,7 @@ For example, `<RadioGroup defaultValue="blue">`
 
 This will allow user to change the value. Alternatively, see _Controlled Value_ example.
 
-<Canvas>
-  <Story of={RadioButtonStories.Normal} />
-</Canvas>
+<Canvas of={RadioButtonStories.Normal} />
 
 ### Controlled Value
 
@@ -48,39 +46,27 @@ You may want a radio button to appear selected based on some conditional logic i
 
 You can use `value` prop which expects a string. To make `Blue` appear selected use `<RadioGroup value="blue">`
 
-<Canvas>
-  <Story of={RadioButtonStories.ControlledValue} />
-</Canvas>
+<Canvas of={RadioButtonStories.ControlledValue} />
 
 ### Label Prop
 
-<Canvas>
-  <Story of={RadioButtonStories.LabelProp} />
-</Canvas>
+<Canvas of={RadioButtonStories.LabelProp} />
 
 ### Selected
 
-<Canvas>
-  <Story of={RadioButtonStories.Selected} />
-</Canvas>
+<Canvas of={RadioButtonStories.Selected} />
 
 ### Disabled
 
-<Canvas>
-  <Story of={RadioButtonStories.Disabled} />
-</Canvas>
+<Canvas of={RadioButtonStories.Disabled} />
 
 ### Vertical Orientation
 
-<Canvas>
-  <Story of={RadioButtonStories.VerticalOrientation} />
-</Canvas>
+<Canvas of={RadioButtonStories.VerticalOrientation} />
 
 ### Icon Buttons
 
-<Canvas>
-  <Story of={RadioButtonStories.IconButtons} />
-</Canvas>
+<Canvas of={RadioButtonStories.IconButtons} />
 
 ### Circular Buttons
 
@@ -88,9 +74,7 @@ Circular buttons currently only display label text below the button; allowing it
 
 The `circular` prop is applied to the RadioGroup and inheritted by each button to avoid mixed styles.
 
-<Canvas>
-  <Story of={RadioButtonStories.CircularButtons} />
-</Canvas>
+<Canvas of={RadioButtonStories.CircularButtons} />
 
 ## Accessibility
 
@@ -102,7 +86,7 @@ The `onChange` prop can be used to listen to changes of the selected radio butto
 
 ## Radio Props
 
-<ArgsTable components={{ RadioGroup: RadioGroup, RadioButton: RadioButton }} />
+<ArgTypes of={{ ...RadioGroup, ...RadioButton }} />
 
 ## Component HTML Structure and Class names
 

package/src/components/SVG/SVG.mdx

@@ -1,4 +1,4 @@
-import { Meta, ArgsTable, Story } from "@storybook/blocks";
+import { Meta, ArgTypes, Story } from "@storybook/blocks";
 import { SVG } from "./SVG";
 import { excludeControls } from "../../utils/excludeControls";
 import * as SvgStories from "./SVG.stories";
@@ -55,7 +55,7 @@ export const Star = (
 
 ## Props
 
-<ArgsTable of={SVG} />
+<ArgTypes of={SVG} />
 
 ## Component HTML Structure and Class names
 

package/src/components/Segment/Segment.mdx

@@ -1,4 +1,4 @@
-import { Meta, ArgsTable, Story } from "@storybook/blocks";
+import { Meta, ArgTypes, Story, Canvas } from "@storybook/blocks";
 import { Segment } from "./Segment";
 import { SegmentGroup } from "./SegmentGroup";
 import {
@@ -73,20 +73,7 @@ import { Segment, Flex, Text } from "@simplybusiness/mobius";
 
 ### Coloured Background
 
-<div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
-  <Segment colour="subtle">Subtle</Segment>
-  <Segment colour="grey">Grey</Segment>
-
-{" "}
-
-<Segment inverted colour="primary">
-  Primary
-</Segment>
-
-  <Segment inverted colour="secondary">
-    Secondary
-  </Segment>
-</div>
+<SegmentStories.ColouredBackground />
 
 {/* prettier-ignore */}
 ```jsx
@@ -127,44 +114,39 @@ import { Segment, SegmentGroup } from "@simplybusiness/mobius";
 ```jsx
 import { Segment, SegmentGroup } from "@simplybusiness/mobius";
 
-<SegmentGroup horizontal={true}>
+<SegmentGroup horizontal>
   <Segment>Item</Segment>
   <Segment>Item</Segment>
   <Segment>Item</Segment>
 </SegmentGroup>
 ```
 
-<SegmentGroup horizontal={true}>
-  <Segment>Item</Segment>
-  <Segment>Item</Segment>
-</SegmentGroup>
+<SegmentStories.HorizontalStack2 />
 
 {/* prettier-ignore */}
 ```jsx
 import { Segment, SegmentGroup } from "@simplybusiness/mobius";
 
-<SegmentGroup horizontal={true}>
+<SegmentGroup horizontal>
   <Segment>Item</Segment>
   <Segment>Item</Segment>
 </SegmentGroup>
 ```
 
-<SegmentGroup horizontal={true}>
-  <Segment>Item</Segment>
-</SegmentGroup>
+<SegmentStories.HorizontalStack3 />
 
 {/* prettier-ignore */}
 ```jsx
 import { Segment, SegmentGroup } from "@simplybusiness/mobius";
 
-<SegmentGroup horizontal={true}>
+<SegmentGroup horizontal>
   <Segment>Item</Segment>
 </SegmentGroup>
 ```
 
 ### Nested
 
-<Story of={SegmentStories.Nested} />
+<Canvas of={SegmentStories.Nested} />
 
 {/* prettier-ignore */}
 ```jsx
@@ -179,12 +161,7 @@ import { Segment, SegmentGroup } from "@simplybusiness/mobius";
 </Segment>
 ```
 
-<Segment>
-  <SegmentGroup>
-    <Segment>Item</Segment>
-    <Segment>Item</Segment>
-  </SegmentGroup>
-</Segment>
+<SegmentStories.Nested2 />
 
 {/* prettier-ignore */}
 ```jsx
@@ -198,9 +175,7 @@ import { Segment, SegmentGroup } from "@simplybusiness/mobius";
 </Segment>
 ```
 
-<Segment heading="Today's Payment">
-  <Segment>Item</Segment>
-</Segment>
+<SegmentStories.Nested3 />
 
 {/* prettier-ignore */}
 ```jsx
@@ -215,45 +190,13 @@ import { Segment, SegmentGroup } from "@simplybusiness/mobius";
 
 ### Bottom margin is removed from the last child in a Segment
 
-<SegmentGroup horizontal={true}>
-  <Segment>
-    <TextField label="First name" />
-
-    <TextArea label="Address" />
-
-  </Segment>
-
-  <Segment colour="subtle">
-    <RadioGroup label="Colour">
-      <Radio value="red" label="Red" />
-
-      <Radio value="blue" label="Blue" />
-    </RadioGroup>
-
-    <Select label="Selection">
-      <Option>Please select a color</Option>
-
-      <Option key="red" value="red">
-        Red
-      </Option>
-
-      <Option key="blue" value="blue">
-        Blue
-      </Option>
-
-      <Option key="green" value="green">
-        Green
-      </Option>
-    </Select>
-
-  </Segment>
-</SegmentGroup>
+<SegmentStories.BottomMarginRemoved />
 
 {/* prettier-ignore */}
 ```jsx
 import { Segment, SegmentGroup, TextField, TextArea, RadioGroup, Radio, Select, Option } from "@simplybusiness/mobius";
 
-<SegmentGroup horizontal={true}>
+<SegmentGroup horizontal>
   <Segment>
     <TextField label="First name"></TextField>
     <TextArea label="Address" />
@@ -265,15 +208,9 @@ import { Segment, SegmentGroup, TextField, TextArea, RadioGroup, Radio, Select,
     </RadioGroup>
     <Select label="Selection">
       <Option>Please select a color</Option>
-      <Option key="red" value="red">
-        Red
-      </Option>
-      <Option key="blue" value="blue">
-        Blue
-      </Option>
-      <Option key="green" value="green">
-        Green
-      </Option>
+      <Option key="red" value="red">Red</Option>
+      <Option key="blue" value="blue">Blue</Option>
+      <Option key="green" value="green">Green</Option>
     </Select>
   </Segment>
 </SegmentGroup>
@@ -281,23 +218,13 @@ import { Segment, SegmentGroup, TextField, TextArea, RadioGroup, Radio, Select,
 
 ### Compound Layout
 
-<SegmentGroup horizontal={true}>
-  <SegmentGroup>
-    <Segment>General liability</Segment>
-    <Segment>Business property and equipment</Segment>
-    <Segment>Total</Segment>
-  </SegmentGroup>
-
-  <SegmentGroup>
-    <Segment>Payment Options</Segment>
-  </SegmentGroup>
-</SegmentGroup>
+<SegmentStories.CompoundLayout />
 
 {/* prettier-ignore */}
 ```jsx
 import { Segment, SegmentGroup } from "@simplybusiness/mobius";
 
-<SegmentGroup horizontal={true}>
+<SegmentGroup horizontal>
   <SegmentGroup>
     <Segment>General liability</Segment>
     <Segment>Business property and equipment</Segment>
@@ -311,27 +238,7 @@ import { Segment, SegmentGroup } from "@simplybusiness/mobius";
 
 Add margin around a SegmentGroup with a `margin="size-{10|20|30|40}"` prop:
 
-<SegmentGroup>
-  <Segment>Top</Segment>
-
-{" "}
-
-<SegmentGroup margin="size-30">
-  <Segment>Nested Top</Segment>
-  <Segment>Nested Middle</Segment>
-  <Segment>Nested Bottom</Segment>
-</SegmentGroup>
-
-{" "}
-
-<SegmentGroup horizontal={true}>
-  <Segment>Top</Segment>
-  <Segment>Middle</Segment>
-  <Segment>Bottom</Segment>
-</SegmentGroup>
-
-  <Segment>Bottom</Segment>
-</SegmentGroup>
+<SegmentStories.MarginAround />
 
 {/* prettier-ignore */}
 ```jsx
@@ -344,7 +251,7 @@ import { Segment, SegmentGroup } from "@simplybusiness/mobius";
     <Segment>Nested Middle</Segment>
     <Segment>Nested Bottom</Segment>
   </SegmentGroup>
-  <SegmentGroup horizontal={true}>
+  <SegmentGroup horizontal>
     <Segment>Top</Segment>
     <Segment>Middle</Segment>
     <Segment>Bottom</Segment>
@@ -355,103 +262,7 @@ import { Segment, SegmentGroup } from "@simplybusiness/mobius";
 
 ### Payment Details
 
-<SegmentGroup style={{ width: "340px" }}>
-  <Segment heading="Today's Payment">
-    <div
-      style={{
-        display: "grid",
-        gridTemplateColumns: "2fr 1fr",
-        alignItems: "flex-end",
-        rowGap: "8px",
-      }}
-    >
-      <Text variant="caption">General liability\*</Text>
-
-      <Text variant="caption" style={{ justifySelf: "flex-end" }}>
-        $300.00
-      </Text>
-
-      <Text variant="caption">Contractor's equipment and small tools</Text>
-
-      <Text variant="caption" style={{ justifySelf: "flex-end" }}>
-        $80.00
-      </Text>
-
-      <Text variant="caption">Cyber insurance</Text>
-
-      <Text variant="caption" style={{ justifySelf: "flex-end" }}>
-        $250.00
-      </Text>
-    </div>
-
-    <Divider />
-
-    <div
-      style={{
-        display: "grid",
-        gridTemplateColumns: "2fr 1fr",
-        alignItems: "flex-end",
-        rowGap: "8px",
-        width: "100%",
-      }}
-    >
-      <Text variant="caption">
-        <strong>To pay today</strong>
-      </Text>
-
-      <Text variant="caption" style={{ justifySelf: "flex-end" }}>
-        <strong>$630.00</strong>
-      </Text>
-    </div>
-
-  </Segment>
-
-  <Segment heading="Monthly Payments">
-    <div
-      style={{
-        display: "grid",
-        gridTemplateColumns: "2fr 1fr",
-        alignItems: "flex-end",
-        rowGap: "8px",
-        width: "100%",
-      }}
-    >
-      <Text variant="caption">
-        <strong>First monthly payment taken</strong>
-      </Text>
-
-      <Text variant="caption" style={{ justifySelf: "flex-end" }}>
-        01/01/2022
-      </Text>
-
-      <Text variant="caption">8 monthly payments of</Text>
-
-      <Text variant="caption" style={{ justifySelf: "flex-end" }}>
-        $120.00
-      </Text>
-
-      <Text variant="caption">Then 2 monthly payments of</Text>
-
-      <Text variant="caption" style={{ justifySelf: "flex-end" }}>
-        $90.00
-      </Text>
-    </div>
-
-  </Segment>
-
-  <Segment colour="subtle">
-    <Flex style={{ width: "100%" }} justifyContent="space-between">
-      <Text>
-        <strong>Total</strong> (inc. tax + fees)
-      </Text>
-
-      <Text>
-        <strong>$1,770.00</strong>
-      </Text>
-    </Flex>
-
-  </Segment>
-</SegmentGroup>
+<SegmentStories.PaymentDetails />
 
 {/* prettier-ignore */}
 ```jsx
@@ -468,17 +279,11 @@ import { Segment, SegmentGroup, Text, Flex } from "@simplybusiness/mobius";
       }}
     >
       <Text variant="caption">General liability*</Text>
-      <Text variant="caption" style={{ justifySelf: "flex-end" }}>
-        $300.00
-      </Text>
+      <Text variant="caption" style={{ justifySelf: "flex-end" }}>$300.00</Text>
       <Text variant="caption">Contractor's equipment and small tools</Text>
-      <Text variant="caption" style={{ justifySelf: "flex-end" }}>
-        $80.00
-      </Text>
+      <Text variant="caption" style={{ justifySelf: "flex-end" }}>$80.00</Text>
       <Text variant="caption">Cyber insurance</Text>
-      <Text variant="caption" style={{ justifySelf: "flex-end" }}>
-        $250.00
-      </Text>
+      <Text variant="caption" style={{ justifySelf: "flex-end" }}>$250.00</Text>
     </div>
     <Divider />
     <div
@@ -490,12 +295,8 @@ import { Segment, SegmentGroup, Text, Flex } from "@simplybusiness/mobius";
         width: "100%",
       }}
     >
-      <Text variant="caption">
-        <strong>To pay today</strong>
-      </Text>
-      <Text variant="caption" style={{ justifySelf: "flex-end" }}>
-        <strong>$630.00</strong>
-      </Text>
+      <Text variant="caption"><strong>To pay today</strong></Text>
+      <Text variant="caption" style={{ justifySelf: "flex-end" }}><strong>$630.00</strong></Text>
     </div>
   </Segment>
   <Segment heading="Monthly Payments">
@@ -511,27 +312,17 @@ import { Segment, SegmentGroup, Text, Flex } from "@simplybusiness/mobius";
       <Text variant="caption">
         <strong>First monthly payment taken</strong>
       </Text>
-      <Text variant="caption" style={{ justifySelf: "flex-end" }}>
-        01/01/2022
-      </Text>
+      <Text variant="caption" style={{ justifySelf: "flex-end" }}>01/01/2022</Text>
       <Text variant="caption">8 monthly payments of</Text>
-      <Text variant="caption" style={{ justifySelf: "flex-end" }}>
-        $120.00
-      </Text>
+      <Text variant="caption" style={{ justifySelf: "flex-end" }}>$120.00</Text>
       <Text variant="caption">Then 2 monthly payments of</Text>
-      <Text variant="caption" style={{ justifySelf: "flex-end" }}>
-        $90.00
-      </Text>
+      <Text variant="caption" style={{ justifySelf: "flex-end" }}>$90.00</Text>
     </div>
   </Segment>
   <Segment colour="subtle">
     <Flex style={{ width: "100%" }} justifyContent="space-between">
-      <Text>
-        <strong>Total</strong> (inc. tax + fees)
-      </Text>
-      <Text>
-        <strong>$1,770.00</strong>
-      </Text>
+      <Text><strong>Total</strong> (inc. tax + fees)</Text>
+      <Text><strong>$1,770.00</strong></Text>
     </Flex>
   </Segment>
 </SegmentGroup>
@@ -539,7 +330,7 @@ import { Segment, SegmentGroup, Text, Flex } from "@simplybusiness/mobius";
 
 ## Props
 
-<ArgsTable components={{ SegmentGroup, Segment }} />
+<ArgTypes components={{ SegmentGroup, Segment }} />
 
 ## Component HTML Structure and Class names