import { Meta, ArgTypes, Story, Canvas } from "@storybook/addon-docs/blocks";
import { Segment } from "./Segment";
import { SegmentGroup } from "./SegmentGroup";
import * as SegmentStories from "./Segment.stories";

export const sizeOptions = [
  "",
  "size-xs",
  "size-s",
  "size-m",
  "size-l",
  "size-xl",
  "size-xxl",
];

<Meta of={SegmentStories} />

# 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 of={SegmentStories.Single} />

{/* 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

<SegmentStories.ColouredBackground />

{/* 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 of={SegmentStories.VerticalStack} />

{/* 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 of={SegmentStories.HorizontalStack} />

{/* prettier-ignore */}
```jsx
import { Segment, SegmentGroup } from "@simplybusiness/mobius";

<SegmentGroup horizontal>
  <Segment>Item</Segment>
  <Segment>Item</Segment>
  <Segment>Item</Segment>
</SegmentGroup>
```

<SegmentStories.HorizontalStack2 />

{/* prettier-ignore */}
```jsx
import { Segment, SegmentGroup } from "@simplybusiness/mobius";

<SegmentGroup horizontal>
  <Segment>Item</Segment>
  <Segment>Item</Segment>
</SegmentGroup>
```

<SegmentStories.HorizontalStack3 />

{/* prettier-ignore */}
```jsx
import { Segment, SegmentGroup } from "@simplybusiness/mobius";

<SegmentGroup horizontal>
  <Segment>Item</Segment>
</SegmentGroup>
```

### Nested

<Canvas of={SegmentStories.Nested} />

{/* 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>
```

<SegmentStories.Nested2 />

{/* prettier-ignore */}
```jsx
import { Segment, SegmentGroup } from "@simplybusiness/mobius";

<Segment>
  <SegmentGroup>
    <Segment>Item</Segment>
    <Segment>Item</Segment>
  </SegmentGroup>
</Segment>
```

<SegmentStories.Nested3 />

{/* prettier-ignore */}
```jsx
import { Segment, SegmentGroup } from "@simplybusiness/mobius";

<Segment heading="Today's Payment">
  <SegmentGroup>
    <Segment>Item</Segment>
  </SegmentGroup>
</Segment>
```

### Bottom gap is removed from the last child in a Segment

<SegmentStories.BottomGapRemoved />

{/* prettier-ignore */}
```jsx
import { Segment, SegmentGroup, TextField, TextArea, RadioGroup, Radio, Select, Option } from "@simplybusiness/mobius";

<SegmentGroup horizontal>
  <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

<SegmentStories.CompoundLayout />

{/* prettier-ignore */}
```jsx
import { Segment, SegmentGroup } from "@simplybusiness/mobius";

<SegmentGroup horizontal>
  <SegmentGroup>
    <Segment>General liability</Segment>
    <Segment>Business property and equipment</Segment>
    <Segment>Total</Segment>
  </SegmentGroup>
  <SegmentGroup>
    <Segment>Payment Options</Segment>
  </SegmentGroup>
</SegmentGroup>
```

Add gap around a SegmentGroup with a `gap="size-{xs|s|m|l|xl|xxl}"` prop:

<SegmentStories.GapAround />

{/* prettier-ignore */}
```jsx
import { Segment, SegmentGroup } from "@simplybusiness/mobius";

<SegmentGroup>
  <Segment>Top</Segment>
  <SegmentGroup gap="size-s">
    <Segment>Nested Top</Segment>
    <Segment>Nested Middle</Segment>
    <Segment>Nested Bottom</Segment>
  </SegmentGroup>
  <SegmentGroup horizontal>
    <Segment>Top</Segment>
    <Segment>Middle</Segment>
    <Segment>Bottom</Segment>
  </SegmentGroup>
  <Segment>Bottom</Segment>
</SegmentGroup>
```

### Payment Details

<SegmentStories.PaymentDetails />

{/* 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="small">General liability*</Text>
      <Text variant="small" style={{ justifySelf: "flex-end" }}>$300.00</Text>
      <Text variant="small">Contractor's equipment and small tools</Text>
      <Text variant="small" style={{ justifySelf: "flex-end" }}>$80.00</Text>
      <Text variant="small">Cyber insurance</Text>
      <Text variant="small" 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="small"><strong>To pay today</strong></Text>
      <Text variant="small" 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="small">
        <strong>First monthly payment taken</strong>
      </Text>
      <Text variant="small" style={{ justifySelf: "flex-end" }}>01/01/2022</Text>
      <Text variant="small">8 monthly payments of</Text>
      <Text variant="small" style={{ justifySelf: "flex-end" }}>$120.00</Text>
      <Text variant="small">Then 2 monthly payments of</Text>
      <Text variant="small" 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

<ArgTypes components={{ SegmentGroup, Segment }} />

## Component HTML Structure and Class names

The following HTML is rendered for a Segment Group:

```html
<div class="mobius-segment-group">
  <div class="mobius-segment">Top</div>
  <div class="mobius-segment">Middle</div>
  <div class="mobius-segment">Middle</div>
</div>
```
