@simplybusiness/mobius 3.0.0

package/src/components/Segment/Segment.story.mdx

@@ -0,0 +1,586 @@
+import { Meta, ArgsTable, Story } from "@storybook/addon-docs";
+import { Segment } from "./Segment";
+import { SegmentGroup } from "./SegmentGroup";
+import {
+  Text,
+  Flex,
+  Divider,
+  TextField,
+  TextArea,
+  RadioGroup,
+  Radio,
+  Select,
+  Option,
+} from "..";
+import { excludeControls } from "../../utils/excludeControls";
+
+export const sizeOptions = [
+  "",
+  "size-10",
+  "size-20",
+  "size-30",
+  "size-40",
+  "size-50",
+  "size-60",
+  "size-70",
+  "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"),
+  }}
+/>
+
+# Segment
+
+A Segment can be used as a stanalone card container, or joined together with other segments in combinations of vertical and horizontal stacks.
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius
+```
+
+## Usage
+
+```js
+import { Segment } from "@simplybusiness/mobius";
+```
+
+## Examples
+
+### 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 -->
+```jsx
+import { Segment, Flex, Text } from "@simplybusiness/mobius";
+
+<Segment heading="Today's Payment">
+  <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>
+```
+
+### 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>
+
+<!-- prettier-ignore -->
+```jsx
+import { Segment } 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="secondary">
+    Secondary
+  </Segment>
+</div>
+```
+
+### 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 -->
+```jsx
+import { Segment, SegmentGroup } from "@simplybusiness/mobius";
+
+<SegmentGroup>
+  <Segment>Item</Segment>
+  <Segment>Item</Segment>
+  <Segment>Item</Segment>
+</SegmentGroup>
+```
+
+### 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 -->
+```jsx
+import { Segment, SegmentGroup } from "@simplybusiness/mobius";
+
+<SegmentGroup horizontal={true}>
+  <Segment>Item</Segment>
+  <Segment>Item</Segment>
+  <Segment>Item</Segment>
+</SegmentGroup>
+```
+
+<SegmentGroup horizontal={true}>
+  <Segment>Item</Segment>
+  <Segment>Item</Segment>
+</SegmentGroup>
+
+<!-- prettier-ignore -->
+```jsx
+import { Segment, SegmentGroup } from "@simplybusiness/mobius";
+
+<SegmentGroup horizontal={true}>
+  <Segment>Item</Segment>
+  <Segment>Item</Segment>
+</SegmentGroup>
+```
+
+<SegmentGroup horizontal={true}>
+  <Segment>Item</Segment>
+</SegmentGroup>
+
+<!-- prettier-ignore -->
+```jsx
+import { Segment, SegmentGroup } from "@simplybusiness/mobius";
+
+<SegmentGroup horizontal={true}>
+  <Segment>Item</Segment>
+</SegmentGroup>
+```
+
+### 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 -->
+```jsx
+import { Segment, SegmentGroup } from "@simplybusiness/mobius";
+
+<Segment heading="Today's Payment">
+  <SegmentGroup>
+    <Segment>Item</Segment>
+    <Segment>Item</Segment>
+    <Segment>Item</Segment>
+  </SegmentGroup>
+</Segment>
+```
+
+<Segment>
+  <SegmentGroup>
+    <Segment>Item</Segment>
+    <Segment>Item</Segment>
+  </SegmentGroup>
+</Segment>
+
+<!-- prettier-ignore -->
+```jsx
+import { Segment, SegmentGroup } from "@simplybusiness/mobius";
+
+<Segment>
+  <SegmentGroup>
+    <Segment>Item</Segment>
+    <Segment>Item</Segment>
+  </SegmentGroup>
+</Segment>
+```
+
+<Segment heading="Today's Payment">
+  <Segment>Item</Segment>
+</Segment>
+
+<!-- prettier-ignore -->
+```jsx
+import { Segment, SegmentGroup } from "@simplybusiness/mobius";
+
+<Segment heading="Today's Payment">
+  <SegmentGroup>
+    <Segment>Item</Segment>
+  </SegmentGroup>
+</Segment>
+```
+
+### Bottom margin is removed from the last child in a Segment
+
+<SegmentGroup horizontal={true}>
+  <Segment>
+    <TextField label="First name"></TextField>
+    <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 -->
+```jsx
+import { Segment, SegmentGroup, TextField, TextArea, RadioGroup, Radio, Select, Option } from "@simplybusiness/mobius";
+
+<SegmentGroup horizontal={true}>
+  <Segment>
+    <TextField label="First name"></TextField>
+    <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>
+```
+
+### 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>
+
+<!-- prettier-ignore -->
+```jsx
+import { Segment, SegmentGroup } from "@simplybusiness/mobius";
+
+<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>
+```
+
+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>
+
+<!-- prettier-ignore -->
+```jsx
+import { Segment, SegmentGroup } from "@simplybusiness/mobius";
+
+<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>
+```
+
+### 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>
+
+<!-- prettier-ignore -->
+```jsx
+import { Segment, SegmentGroup, Text, Flex } from "@simplybusiness/mobius";
+
+<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>
+```
+
+## Props
+
+<ArgsTable components={{ SegmentGroup, Segment }} />
+
+## Component HTML Structure and Class names
+
+The following HTML is rendered for a Segment Group:
+
+```html
+<div class="mobius/SegmentGroup">
+  <div class="mobius/Segment">Top</div>
+  <div class="mobius/Segment">Middle</div>
+  <div class="mobius/Segment">Middle</div>
+</div>
+```
+
+---
+
+[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Label) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Segment/Segment.tsx

@@ -0,0 +1,35 @@
+import { ReactNode } from "react";
+import { DOMProps } from "@react-types/shared";
+import clsx from "clsx";
+
+export interface SegmentProps extends DOMProps {
+  className?: string;
+  heading?: string;
+  /** Background colour for Segment */
+  colour?: "subtle" | "primary" | "secondary";
+  /** When inverted, text is white.  Use on darker backgrounds. */
+  inverted?: boolean;
+  children?: ReactNode;
+}
+
+const Segment = (props: SegmentProps) => {
+  const { heading, children, colour, inverted, className, ...rest } = props;
+
+  const classes = clsx(
+    "mobius",
+    "mobius/Segment",
+    colour,
+    { inverted },
+    className,
+  );
+
+  return (
+    <div className={classes} {...rest}>
+      {heading && <div className="mobius/SegmentHeading">{heading}</div>}
+      {children}
+    </div>
+  );
+};
+
+Segment.displayName = "Segment";
+export { Segment };

package/src/components/Segment/SegmentGroup.tsx

@@ -0,0 +1,40 @@
+import { ReactNode } from "react";
+import { DOMProps } from "@react-types/shared";
+import clsx from "clsx";
+
+export interface SegmentGroupProps extends DOMProps {
+  className?: string;
+  horizontal?: boolean;
+  margin?:
+    | "size-10"
+    | "size-20"
+    | "size-30"
+    | "size-40"
+    | "size-50"
+    | "size-60"
+    | "size-70"
+    | "size-80";
+  children?: ReactNode;
+}
+
+const SegmentGroup = (props: SegmentGroupProps) => {
+  const { children, horizontal, margin, className, ...rest } = props;
+
+  const marginClass = margin ? `margin-${margin}` : "";
+  const classes = clsx(
+    "mobius",
+    "mobius/SegmentGroup",
+    className,
+    { horizontal },
+    marginClass,
+  );
+
+  return (
+    <div className={classes} {...rest}>
+      {children}
+    </div>
+  );
+};
+
+SegmentGroup.displayName = "SegmentGroup";
+export { SegmentGroup };

package/src/components/Segment/index.tsx

@@ -0,0 +1,2 @@
+export * from "./SegmentGroup";
+export * from "./Segment";