import { Meta, ArgTypes, Story } from "@storybook/addon-docs/blocks";
import { Flex } from "./Flex";
import { Box } from "../Box";
import * as FlexStories from "./Flex.stories";

<Meta of={FlexStories} />

# Flex

Flex is a a general purpose wrapper to create layouts using flexbox.

## Install

```bash
yarn add @simplybusiness/mobius
```

## Usage

```js
import { Flex } from "@simplybusiness/mobius";
```

**Caution** The `gap` property currently only works in Chrome and Firefox, so it should not be used
in situations where Internet Explorer or Safari compatibility are required.

## Examples

export const Card = ({ children, style, ...props }) => (
  <Box
    style={{
      borderRadius: "4px",
      padding: "8px",
      backgroundColor: "#dddddd",
      width: "100%",
      ...style,
    }}
    {...props}
  >
    {children}
  </Box>
);

### Flex Layout

<Flex flexDirection="column" gap="var(--size-xs)">
  <Flex
    alignItems="center"
    style={{
      backgroundColor: "var(--color-background-subtle)",
      height: "var(--size-lg)",
    }}
  >
    Header
  </Flex>

  <Flex flexDirection="row" gap={4} style={{ height: "128px" }}>
    <Flex style={{ backgroundColor: "var(--color-background)" }} flex={2}>
      Main
    </Flex>

    <Flex style={{ backgroundColor: "var(--color-background-muted)" }} flex={1} />

  </Flex>

  <Flex
    alignItems="center"
    style={{
      backgroundColor: "var(--color-background-subtle)",
      height: "var(--size-lg)",
    }}
  >
    Footer
  </Flex>
</Flex>

```jsx
<Flex flexDirection="column" gap="var(--size-xs)">
  <Flex
    alignItems="center"
    style={{
      backgroundColor: "var(--color-background-subtle)",
      height: "var(--size-lg)",
    }}
  >
    Header
  </Flex>
  <Flex flexDirection="row" gap={4} style={{ height: "128px" }}>
    <Flex flex={2}>Main</Flex>
    <Flex
      style={{ backgroundColor: "var(--color-background-muted)" }}
      flex={1}
    />
  </Flex>
  <Flex
    alignItems="center"
    style={{
      backgroundColor: "var(--color-background-subtle)",
      height: "var(--size-lg)",
    }}
  >
    Footer
  </Flex>
</Flex>
```

### Wrapping

You can use the `flexWrap` prop to wrap the elements inside the `Flex` container.

<Flex flexWrap="wrap" gap="var(--size-xs)">
  {Array.from({ length: 60 }).map((_, i) => (
    <Card
      key={i}
      style={{
        width: "64px",
      }}
    >
      Item
    </Card>
  ))}
</Flex>

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

// Card component is here only for demonstration purposes
const Card = ({ children, ...props }) => (
  <Box
    style={{
      borderRadius: "4px",
      padding: "8px",
      backgroundColor: "#dddddd",
      width: "100%",
      height: "64px",
      width: "64px",
    }}
    {...props}
  >
    {children}
  </Box>
);

<Flex flexWrap="wrap" gap="var(--size-xs)">
  {Array.from({ length: 60 }).map((_, i) => (
    <Card key={i} />
  ))}
</Flex>
```

## Examples

### Row layout

_Note:_ `row` layout is the default value, so `flexDirection: "row"` may be omitted

<Story of={FlexStories.RowLayout} />

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

// Card component is here only for demonstration purposes
const Card = ({ children, ...props }) => (
  <Box
    style={{
      borderRadius: "4px",
      padding: "8px",
      backgroundColor: "#dddddd",
      width: "100%",
      height: "64px",
      width: "64px",
    }}
    {...props}
  >
    {children}
  </Box>
);

<Flex flexDirection="row" gap="var(--size-xs)">
  <Card>Item</Card>
  <Card>Item</Card>
  <Card>Item</Card>
</Flex>
```

### Column Layout

<Story of={FlexStories.ColumnLayout} />

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

// Card component is here only for demonstration purposes
const Card = ({ children, ...props }) => (
  <Box
    style={{
      borderRadius: "4px",
      padding: "8px",
      backgroundColor: "#dddddd",
      width: "100%",
      height: "64px",
      width: "64px",
    }}
    {...props}
  >
    {children}
  </Box>
);

<Flex flexDirection="column" gap="var(--size-xs)">
  <Card>Item</Card>
  <Card>Item</Card>
  <Card>Item</Card>
</Flex>
```

## Props

<ArgTypes of={Flex} />

## Component HTML Structure and Class names

The following HTML is rendered for a Flex:

```html
<div class="mobius-flex">{children}</div>
```
