orcs-design-system/es/components/Grid/Grid.stories.js

TeamForm's Design System, aka: ORCS

import React from "react";
import Grid, { GridItem } from "../Grid";
import Button from "../Button";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default {
  title: "Components/Grid",
  component: Grid
};
export const basicGrid = () => /*#__PURE__*/_jsxs(Grid, {
  children: [/*#__PURE__*/_jsx(GridItem, {
    children: "1"
  }), /*#__PURE__*/_jsx(GridItem, {
    children: "2"
  }), /*#__PURE__*/_jsx(GridItem, {
    children: "3"
  }), /*#__PURE__*/_jsx(GridItem, {
    children: "4"
  }), /*#__PURE__*/_jsx(GridItem, {
    children: "5"
  }), /*#__PURE__*/_jsx(GridItem, {
    children: "6"
  })]
});
basicGrid.storyName = "Default Grid";
export const backgroundColourGrid = () => /*#__PURE__*/_jsxs(Grid, {
  children: [/*#__PURE__*/_jsx(GridItem, {
    bg: "grey",
    children: "1"
  }), /*#__PURE__*/_jsx(GridItem, {
    bg: "primary",
    color: "white",
    children: "2"
  }), /*#__PURE__*/_jsx(GridItem, {
    bg: "greyLight",
    children: "3"
  }), /*#__PURE__*/_jsx(GridItem, {
    bg: "greyDark",
    children: "4"
  }), /*#__PURE__*/_jsx(GridItem, {
    bg: "success",
    children: "5"
  }), /*#__PURE__*/_jsx(GridItem, {
    bg: "warning",
    children: "6"
  })]
});
backgroundColourGrid.storyName = "With background colours";
export const templateColumnsAndRows = () => /*#__PURE__*/_jsxs(Grid, {
  gridTemplateColumns: "repeat(3, 1fr)",
  gridTemplateRows: "repeat(2, 1fr)",
  bg: "greyLightest",
  children: [/*#__PURE__*/_jsx(GridItem, {
    children: "This Grid uses repeat and fr to specify the grid structure."
  }), /*#__PURE__*/_jsx(GridItem, {
    children: "Fusce sit amet lorem lectus."
  }), /*#__PURE__*/_jsx(GridItem, {
    children: "Nullam lobortis porta iaculis. "
  }), /*#__PURE__*/_jsx(GridItem, {
    children: "Pellentesque fermentum elementum elit non blandit."
  }), /*#__PURE__*/_jsx(GridItem, {
    children: "Etiam rhoncus ultricies lorem nec imperdiet."
  }), /*#__PURE__*/_jsx(GridItem, {
    children: "Pellentesque. "
  })]
});
templateColumnsAndRows.storyName = "Template columns and rows";
export const widthColumnsAndRows = () => /*#__PURE__*/_jsxs(Grid, {
  gridTemplateColumns: "25% 200px auto",
  gridTemplateRows: "25% 100px auto",
  bg: "greyLighter",
  children: [/*#__PURE__*/_jsx(GridItem, {
    children: "This Grid uses widths and percentages to specify the grid structure."
  }), /*#__PURE__*/_jsx(GridItem, {
    children: "Fusce sit amet lorem lectus."
  }), /*#__PURE__*/_jsx(GridItem, {
    children: "Nullam lobortis porta iaculis. "
  }), /*#__PURE__*/_jsx(GridItem, {
    children: "Pellentesque fermentum elementum elit non blandit."
  }), /*#__PURE__*/_jsx(GridItem, {
    children: "Etiam rhoncus ultricies lorem nec imperdiet."
  }), /*#__PURE__*/_jsx(GridItem, {
    children: "Pellentesque. "
  }), /*#__PURE__*/_jsx(GridItem, {
    children: "Each GridItem goes down the columns first and then goes through the rows."
  }), /*#__PURE__*/_jsx(GridItem, {
    children: "To change this, change the value of the gridAutoFlow property. The default value is columns."
  })]
});
widthColumnsAndRows.storyName = "Width-based columns and rows";
export const withGridItem = () => /*#__PURE__*/_jsxs(Grid, {
  bg: "greyLightest",
  children: [/*#__PURE__*/_jsx(GridItem, {
    children: /*#__PURE__*/_jsx(Button, {
      children: "Default Button"
    })
  }), /*#__PURE__*/_jsx(GridItem, {
    children: /*#__PURE__*/_jsx(Button, {
      colour: "successDark",
      children: "Success"
    })
  }), /*#__PURE__*/_jsx(GridItem, {
    children: /*#__PURE__*/_jsx(Button, {
      fullWidth: true,
      children: "Full width button"
    })
  }), /*#__PURE__*/_jsx(GridItem, {
    children: /*#__PURE__*/_jsx("p", {
      children: "Text-only item"
    })
  })]
});
withGridItem.storyName = "With GridItem";
export const textWithGridItem = () => /*#__PURE__*/_jsxs(Grid, {
  bg: "greyLighter",
  children: [/*#__PURE__*/_jsx(GridItem, {
    children: "3"
  }), /*#__PURE__*/_jsx(GridItem, {
    children: "1"
  }), /*#__PURE__*/_jsx(GridItem, {
    children: "4"
  }), /*#__PURE__*/_jsx(GridItem, {
    children: "1"
  }), /*#__PURE__*/_jsx(GridItem, {
    children: "5"
  }), /*#__PURE__*/_jsx(GridItem, {
    children: "9"
  })]
});
textWithGridItem.storyName = "Text with GridItem";
export const withoutGridItem = () => /*#__PURE__*/_jsxs(Grid, {
  bg: "greyLightest",
  children: [/*#__PURE__*/_jsx(Button, {
    children: "Default Button"
  }), /*#__PURE__*/_jsx(Button, {
    colour: "successDark",
    children: "Success"
  }), /*#__PURE__*/_jsx(Button, {
    fullWidth: true,
    children: "Full width button"
  }), /*#__PURE__*/_jsx("p", {
    children: "Text-only item"
  })]
});
withoutGridItem.storyName = "Without GridItem";
basicGrid.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "basicGrid"
};
backgroundColourGrid.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "backgroundColourGrid"
};
templateColumnsAndRows.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "templateColumnsAndRows"
};
widthColumnsAndRows.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "widthColumnsAndRows"
};
withGridItem.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "withGridItem"
};
textWithGridItem.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "textWithGridItem"
};
withoutGridItem.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "withoutGridItem"
};