@simplybusiness/mobius 3.0.0

package/src/components/Flex/Flex.story.mdx

@@ -0,0 +1,387 @@
+import { Meta, ArgsTable, Story } from "@storybook/addon-docs";
+import { Flex } from "./Flex";
+import { Box } from "../Box";
+import { excludeControls } from "../../utils/excludeControls";
+
+export const sizeOptions = [
+  "",
+  "var(--size-0)",
+  "var(--size-10)",
+  "var(--size-20)",
+  "var(--size-30)",
+  "var(--size-40)",
+  "var(--size-50)",
+  "var(--size-60)",
+  "var(--size-70)",
+  "var(--size-80)",
+  "var(--size-90)",
+  "var(--size-100)",
+];
+
+<Meta
+  title="Layout/Flex"
+  component={Flex}
+  argTypes={{
+    flexDirection: {
+      control: "select",
+      options: ["", "row", "row-reverse", "column", "column-reverse"],
+    },
+    flexWrap: {
+      control: "select",
+      options: ["", "nowrap", "wrap", "wrap-reverse"],
+    },
+    flexGrow: {
+      control: "text",
+      if: {
+        arg: "flex",
+        truthy: false,
+      },
+    },
+    flex: {
+      control: "text",
+    },
+    justifyContent: {
+      control: "select",
+      options: [
+        "",
+        "space-around",
+        "space-between",
+        "space-evenly",
+        "stretch",
+        "center",
+        "end",
+        "flex-end",
+        "flex-start",
+        "start",
+        "left",
+        "normal",
+        "right",
+      ],
+    },
+    alignItems: {
+      control: "select",
+      options: [
+        "",
+        "center",
+        "end",
+        "flex-end",
+        "flex-start",
+        "self-end",
+        "self-start",
+        "start",
+        "baseline",
+        "normal",
+        "stretch",
+      ],
+    },
+    alignContent: {
+      control: "select",
+      options: [
+        "",
+        "space-around",
+        "space-between",
+        "space-evenly",
+        "stretch",
+        "center",
+        "end",
+        "flex-end",
+        "flex-start",
+        "start",
+        "baseline",
+        "normal",
+      ],
+    },
+    gap: {
+      control: "select",
+      options: [...sizeOptions],
+    },
+    rowGap: {
+      control: "select",
+      options: [...sizeOptions],
+      if: {
+        arg: "gap",
+        truthy: false,
+      },
+    },
+    columnGap: {
+      control: "select",
+      options: [...sizeOptions],
+      if: {
+        arg: "gap",
+        truthy: false,
+      },
+    },
+    ...excludeControls("className", "elementType", "style"),
+  }}
+/>
+
+# 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-10)">
+  <Flex
+    alignItems="center"
+    style={{
+      backgroundColor: "var(--color-background-subtle)",
+      height: "var(--size-50)",
+    }}
+  >
+    Header
+  </Flex>
+  <Flex flexDirection="row" gap={4} style={{ height: "var(--size-80)" }}>
+    <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-50)",
+    }}
+  >
+    Footer
+  </Flex>
+</Flex>
+
+```jsx
+<Flex flexDirection="column" gap="var(--size-10)">
+  <Flex
+    alignItems="center"
+    style={{
+      backgroundColor: "var(--color-background-subtle)",
+      height: "var(--size-50)",
+    }}
+  >
+    Header
+  </Flex>
+  <Flex flexDirection="row" gap={4} style={{ height: "var(--size-80)" }}>
+    <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-50)",
+    }}
+  >
+    Footer
+  </Flex>
+</Flex>
+```
+
+### Wrapping
+
+You can use the `flexWrap` prop to wrap the elements inside the `Flex` container.
+
+<Flex flexWrap="wrap" gap="var(--size-20)">
+  {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-20)">
+  {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
+  name="Row Layout"
+  args={{
+    flexDirection: "row",
+    flexWrap: "nowrap",
+    flexGrow: "0",
+    flex: "1 1 0px",
+    justifyContent: "normal",
+    alignItems: "stretch",
+    alignContent: "flex-start",
+    gap: "var(--size-20)",
+    rowGap: "",
+    columnGap: "",
+  }}
+>
+  {args => (
+    <Flex {...args}>
+      <Card>Item</Card>
+      <Card>Item</Card>
+      <Card>Item</Card>
+    </Flex>
+  )}
+</Story>
+
+<!-- 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-20)">
+  <Card>Item</Card>
+  <Card>Item</Card>
+  <Card>Item</Card>
+</Flex>
+```
+
+### Column Layout
+
+<Story
+  name="Column Layout"
+  args={{
+    flexDirection: "column",
+    flexWrap: "nowrap",
+    flexGrow: "0",
+    flex: "1 1 0px",
+    justifyContent: "normal",
+    alignItems: "stretch",
+    alignContent: "normal",
+    gap: "var(--size-20)",
+    rowGap: "",
+    columnGap: "",
+  }}
+>
+  {args => (
+    <Flex {...args}>
+      <Card>Item</Card>
+      <Card>Item</Card>
+      <Card>Item</Card>
+    </Flex>
+  )}
+</Story>
+
+<!-- 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-20)">
+  <Card>Item</Card>
+  <Card>Item</Card>
+  <Card>Item</Card>
+</Flex>
+```
+
+## Props
+
+<ArgsTable of={Flex} />
+
+## Component HTML Structure and Class names
+
+The following HTML is rendered for a Flex:
+
+```html
+<div class="mobius/Flex">{children}</div>
+```
+
+---
+
+[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Flex) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Flex/Flex.test.tsx

@@ -0,0 +1,60 @@
+import { render, screen } from "@testing-library/react";
+import { Flex } from ".";
+
+const CLASS_NAME = "mobius/Flex";
+
+describe("Test for Flex", () => {
+  it("should render without errors", () => {
+    render(
+      <Flex flexDirection="column" alignItems="start">
+        <div>block 1</div>
+        <div>block 2</div>
+      </Flex>,
+    );
+  });
+
+  describe("given elementType", () => {
+    it("is not applied as element attribute", () => {
+      const { container } = render(<Flex elementType="ul" />);
+      expect(container.firstChild).not.toHaveAttribute("elementtype", "ul");
+    });
+  });
+
+  describe("uses correct class names", () => {
+    it("uses Mobius class", () => {
+      render(
+        <Flex flexDirection="column" alignItems="start" data-testid="test">
+          <div>block 1</div>
+          <div>block 2</div>
+        </Flex>,
+      );
+      expect(screen.getByTestId("test")).toHaveClass("mobius");
+    });
+
+    it("uses base Mobius class", () => {
+      render(
+        <Flex flexDirection="column" alignItems="start" data-testid="test">
+          <div>block 1</div>
+          <div>block 2</div>
+        </Flex>,
+      );
+      expect(screen.getByTestId("test")).toHaveClass(CLASS_NAME);
+    });
+
+    it("includes custom class name", () => {
+      render(
+        <Flex
+          flexDirection="column"
+          alignItems="start"
+          data-testid="test"
+          className="my-class"
+        >
+          <div>block 1</div>
+          <div>block 2</div>
+        </Flex>,
+      );
+      expect(screen.getByTestId("test")).toHaveClass("my-class");
+      expect(screen.getByTestId("test")).toHaveClass(CLASS_NAME);
+    });
+  });
+});

package/src/components/Flex/Flex.tsx

@@ -0,0 +1,118 @@
+import { Ref, forwardRef, ReactNode, RefAttributes } from "react";
+import type { Property } from "csstype";
+import { DOMProps } from "@react-types/shared";
+import clsx from "clsx";
+import { ForwardedRefComponent } from "../../types/components";
+
+export type FlexElementType = HTMLDivElement;
+
+export interface FlexStyleProps {
+  elementType?: string | React.ElementType;
+  flexDirection?: Property.FlexDirection;
+  flexWrap?: Property.FlexWrap;
+  flexGrow?: Property.FlexGrow;
+  flex?: Property.Flex;
+  /** Aligns grid items along the block (column) axis  */
+  alignItems?: Property.AlignItems;
+  /** Aligns the grid along the inline (row) axis */
+  alignContent?: Property.AlignContent;
+  /** Aligns the grid along the inline (row) axis */
+  justifyContent?: Property.JustifyContent;
+  /** How big a gap between the columns and rows */
+  gap?: Property.Gap;
+  /** How big a gap between the rows */
+  rowGap?: Property.RowGap;
+  /** How big a gap between the columns */
+  columnGap?: Property.ColumnGap;
+  style?: React.CSSProperties;
+}
+
+export interface FlexNonStyleProps
+  extends DOMProps,
+    RefAttributes<FlexElementType> {
+  children?: ReactNode;
+  /** Custom class name for setting specific CSS */
+  className?: string;
+}
+
+export interface FlexProps extends FlexStyleProps, FlexNonStyleProps {}
+
+export type FlexRef = Ref<FlexElementType>;
+
+const buildFlexStyles = (props: FlexStyleProps) => {
+  const {
+    flexDirection,
+    flexWrap,
+    flexGrow,
+    flex,
+    justifyContent,
+    alignItems,
+    alignContent,
+    gap,
+    rowGap,
+    columnGap,
+  } = props;
+
+  return {
+    display: "flex",
+    flexDirection,
+    flexWrap,
+    flexGrow,
+    flex,
+    justifyContent,
+    alignItems,
+    alignContent,
+    gap,
+    rowGap,
+    columnGap,
+  };
+};
+
+const splitProps = (props: FlexProps): [FlexStyleProps, FlexNonStyleProps] => {
+  const {
+    flexDirection,
+    flexWrap,
+    flexGrow,
+    flex,
+    justifyContent,
+    alignItems,
+    alignContent,
+    gap,
+    rowGap,
+    columnGap,
+    ...otherProps
+  } = props;
+
+  return [
+    {
+      flexDirection,
+      flexWrap,
+      flexGrow,
+      flex,
+      justifyContent,
+      alignItems,
+      alignContent,
+      gap,
+      rowGap,
+      columnGap,
+    },
+    otherProps,
+  ];
+};
+
+const Flex: ForwardedRefComponent<FlexProps, FlexElementType> = forwardRef(
+  (props: FlexProps, ref: FlexRef) => {
+    const { elementType: Element = "div", ...otherProps } = props;
+    const classes = clsx("mobius", "mobius/Flex", props.className);
+
+    const [styleProps, restProps] = splitProps(otherProps);
+    const flexStyles = buildFlexStyles(styleProps);
+
+    return (
+      <Element ref={ref} css={flexStyles} {...restProps} className={classes} />
+    );
+  },
+);
+
+Flex.displayName = "Flex";
+export { Flex };

package/src/components/Flex/index.tsx

@@ -0,0 +1 @@
+export * from "./Flex";