@simplybusiness/mobius 3.8.0 → 3.9.0

package/src/components/Segment/{Segment.story.mdx → Segment.mdx}

@@ -1,4 +1,4 @@
-import { Meta, ArgsTable, Story } from "@storybook/addon-docs";
+import { Meta, ArgsTable, Story } from "@storybook/blocks";
 import { Segment } from "./Segment";
 import { SegmentGroup } from "./SegmentGroup";
 import {
@@ -13,6 +13,7 @@ import {
   Option,
 } from "..";
 import { excludeControls } from "../../utils/excludeControls";
+import * as SegmentStories from "./Segment.stories";
 
 export const sizeOptions = [
   "",
@@ -26,23 +27,7 @@ export const sizeOptions = [
   "size-80",
 ];
 
-<Meta
-  title="Layout/Segment"
-  component={Segment}
-  argTypes={{
-    colour: {
-      control: "select",
-      options: ["", "primary", "secondary", "grey", "subtle"],
-    },
-    inverted: {
-      control: "boolean",
-      if: {
-        arg: "colour",
-      },
-    },
-    ...excludeControls("className"),
-  }}
-/>
+<Meta of={SegmentStories} />
 
 # Segment
 
@@ -64,26 +49,9 @@ import { Segment } from "@simplybusiness/mobius";
 
 ### Single Segment
 
-<Story name="Single" args={{ heading: "Today's Payment", inverted: false }}>
-  {args => (
-    <Segment {...args}>
-      <Flex style={{ width: "100%" }} justifyContent="space-between">
-        <Text>General liability*</Text>
-        <Text>$300.00</Text>
-      </Flex>
-      <Flex style={{ width: "100%" }} justifyContent="space-between">
-        <Text>Contractor's equipment and small tools</Text>
-        <Text>$80.00</Text>
-      </Flex>
-      <Flex style={{ width: "100%" }} justifyContent="space-between">
-        <Text>Cyber insurance</Text>
-        <Text>$250.00</Text>
-      </Flex>
-    </Segment>
-  )}
-</Story>
-
-<!-- prettier-ignore -->
+<Story of={SegmentStories.Single} />
+
+{/* prettier-ignore */}
 ```jsx
 import { Segment, Flex, Text } from "@simplybusiness/mobius";
 
@@ -108,15 +76,19 @@ import { Segment, Flex, Text } from "@simplybusiness/mobius";
 <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="primary">
+  Primary
+</Segment>
+
   <Segment inverted colour="secondary">
     Secondary
   </Segment>
 </div>
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```jsx
 import { Segment } from "@simplybusiness/mobius";
 
@@ -134,17 +106,9 @@ import { Segment } from "@simplybusiness/mobius";
 
 ### Attached in vertical group
 
-<Story name="Vertical Stack" args={{ heading: "", inverted: true }}>
-  {args => (
-    <SegmentGroup>
-      <Segment {...args}>Item</Segment>
-      <Segment>Item</Segment>
-      <Segment>Item</Segment>
-    </SegmentGroup>
-  )}
-</Story>
-
-<!-- prettier-ignore -->
+<Story of={SegmentStories.VerticalStack} />
+
+{/* prettier-ignore */}
 ```jsx
 import { Segment, SegmentGroup } from "@simplybusiness/mobius";
 
@@ -157,27 +121,9 @@ import { Segment, SegmentGroup } from "@simplybusiness/mobius";
 
 ### Attached in horizontal group
 
-<Story
-  name="Horizontal Stack"
-  args={{ horizontal: true, margin: "size-20" }}
-  argTypes={{
-    margin: {
-      control: "select",
-      options: [...sizeOptions],
-    },
-  }}
-  parameters={{ controls: { exclude: ["heading", "colour"] } }}
->
-  {args => (
-    <SegmentGroup {...args}>
-      <Segment>Item</Segment>
-      <Segment>Item</Segment>
-      <Segment>Item</Segment>
-    </SegmentGroup>
-  )}
-</Story>
-
-<!-- prettier-ignore -->
+<Story of={SegmentStories.HorizontalStack} />
+
+{/* prettier-ignore */}
 ```jsx
 import { Segment, SegmentGroup } from "@simplybusiness/mobius";
 
@@ -193,7 +139,7 @@ import { Segment, SegmentGroup } from "@simplybusiness/mobius";
   <Segment>Item</Segment>
 </SegmentGroup>
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```jsx
 import { Segment, SegmentGroup } from "@simplybusiness/mobius";
 
@@ -207,7 +153,7 @@ import { Segment, SegmentGroup } from "@simplybusiness/mobius";
   <Segment>Item</Segment>
 </SegmentGroup>
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```jsx
 import { Segment, SegmentGroup } from "@simplybusiness/mobius";
 
@@ -218,19 +164,9 @@ import { Segment, SegmentGroup } from "@simplybusiness/mobius";
 
 ### Nested
 
-<Story name="Nested" args={{ heading: "Today's Payment", inverted: false }}>
-  {args => (
-    <Segment {...args}>
-      <SegmentGroup>
-        <Segment>Item</Segment>
-        <Segment>Item</Segment>
-        <Segment>Item</Segment>
-      </SegmentGroup>
-    </Segment>
-  )}
-</Story>
-
-<!-- prettier-ignore -->
+<Story of={SegmentStories.Nested} />
+
+{/* prettier-ignore */}
 ```jsx
 import { Segment, SegmentGroup } from "@simplybusiness/mobius";
 
@@ -250,7 +186,7 @@ import { Segment, SegmentGroup } from "@simplybusiness/mobius";
   </SegmentGroup>
 </Segment>
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```jsx
 import { Segment, SegmentGroup } from "@simplybusiness/mobius";
 
@@ -266,7 +202,7 @@ import { Segment, SegmentGroup } from "@simplybusiness/mobius";
   <Segment>Item</Segment>
 </Segment>
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```jsx
 import { Segment, SegmentGroup } from "@simplybusiness/mobius";
 
@@ -281,30 +217,39 @@ import { Segment, SegmentGroup } from "@simplybusiness/mobius";
 
 <SegmentGroup horizontal={true}>
   <Segment>
-    <TextField label="First name"></TextField>
+    <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>
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```jsx
 import { Segment, SegmentGroup, TextField, TextArea, RadioGroup, Radio, Select, Option } from "@simplybusiness/mobius";
 
@@ -342,12 +287,13 @@ import { Segment, SegmentGroup, TextField, TextArea, RadioGroup, Radio, Select,
     <Segment>Business property and equipment</Segment>
     <Segment>Total</Segment>
   </SegmentGroup>
+
   <SegmentGroup>
     <Segment>Payment Options</Segment>
   </SegmentGroup>
 </SegmentGroup>
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```jsx
 import { Segment, SegmentGroup } from "@simplybusiness/mobius";
 
@@ -367,20 +313,27 @@ 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>
+
+{" "}
+
+<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>
 
-<!-- prettier-ignore -->
+  <Segment>Bottom</Segment>
+</SegmentGroup>
+
+{/* prettier-ignore */}
 ```jsx
 import { Segment, SegmentGroup } from "@simplybusiness/mobius";
 
@@ -412,20 +365,27 @@ import { Segment, SegmentGroup } from "@simplybusiness/mobius";
         rowGap: "8px",
       }}
     >
-      <Text variant="caption">General liability*</Text>
+      <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",
@@ -438,11 +398,14 @@ import { Segment, SegmentGroup } from "@simplybusiness/mobius";
       <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={{
@@ -456,32 +419,41 @@ import { Segment, SegmentGroup } 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">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>
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```jsx
 import { Segment, SegmentGroup, Text, Flex } from "@simplybusiness/mobius";
 

package/src/components/Segment/Segment.stories.tsx

@@ -0,0 +1,129 @@
+import type { Meta } from "@storybook/react";
+import { Segment, SegmentProps } from "./Segment";
+import { SegmentGroup, SegmentGroupProps } from "./SegmentGroup";
+import { Text, Flex } from "..";
+import { excludeControls } from "../../utils/excludeControls";
+
+const sizeOptions = [
+  "",
+  "size-10",
+  "size-20",
+  "size-30",
+  "size-40",
+  "size-50",
+  "size-60",
+  "size-70",
+  "size-80",
+];
+
+export default {
+  title: "Layout/Segment",
+  component: Segment,
+
+  argTypes: {
+    colour: {
+      control: { type: "select" },
+      options: ["", "primary", "secondary", "grey", "subtle"],
+    },
+    inverted: {
+      control: { type: "boolean" },
+      if: {
+        arg: "colour",
+      },
+    },
+    ...excludeControls("className"),
+  },
+};
+
+export const Single: Meta<typeof Segment> = {
+  render: (args: SegmentProps) => (
+    <Segment {...args}>
+      <Flex
+        style={{
+          width: "100%",
+        }}
+        justifyContent="space-between"
+      >
+        <Text>General liability*</Text>
+        <Text>$300.00</Text>
+      </Flex>
+      <Flex
+        style={{
+          width: "100%",
+        }}
+        justifyContent="space-between"
+      >
+        <Text>Contractor&lsquo;s equipment and small tools</Text>
+        <Text>$80.00</Text>
+      </Flex>
+      <Flex
+        style={{
+          width: "100%",
+        }}
+        justifyContent="space-between"
+      >
+        <Text>Cyber insurance</Text>
+        <Text>$250.00</Text>
+      </Flex>
+    </Segment>
+  ),
+  args: {
+    heading: "Today's Payment",
+    inverted: false,
+  },
+};
+
+export const VerticalStack: Meta<typeof Segment> = {
+  render: (args: SegmentProps) => (
+    <SegmentGroup>
+      <Segment {...args}>Item</Segment>
+      <Segment>Item</Segment>
+      <Segment>Item</Segment>
+    </SegmentGroup>
+  ),
+  args: {
+    heading: "",
+    inverted: true,
+  },
+};
+
+export const HorizontalStack: Meta<typeof SegmentGroup> = {
+  render: (args: SegmentGroupProps) => (
+    <SegmentGroup {...args}>
+      <Segment>Item</Segment>
+      <Segment>Item</Segment>
+      <Segment>Item</Segment>
+    </SegmentGroup>
+  ),
+  args: {
+    horizontal: true,
+    margin: "size-20",
+  },
+  argTypes: {
+    margin: {
+      control: { type: "select" },
+      options: [...sizeOptions],
+    },
+  },
+  parameters: {
+    controls: {
+      exclude: ["heading", "colour"],
+    },
+  },
+};
+
+export const Nested: Meta<typeof Segment> = {
+  render: (args: SegmentProps) => (
+    <Segment {...args}>
+      <SegmentGroup>
+        <Segment>Item</Segment>
+        <Segment>Item</Segment>
+        <Segment>Item</Segment>
+      </SegmentGroup>
+    </Segment>
+  ),
+  args: {
+    heading: "Today's Payment",
+    inverted: false,
+  },
+};