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

TeamForm's Design System, aka: ORCS

import React from "react";
import Box from "../Box";
import { P } from "../Typography";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default {
  title: "Components/Box",
  component: Box
};
export const basicBox = () => /*#__PURE__*/_jsx(Box, {
  children: /*#__PURE__*/_jsx(P, {
    children: "This is an example of the basic Box with no properties applied to it."
  })
});
basicBox.storyName = "Default Box";
export const borderBox = () => /*#__PURE__*/_jsx(Box, {
  boxBorder: "default",
  p: "r",
  children: /*#__PURE__*/_jsx(P, {
    children: "This is a variant of a Box with a border."
  })
});
borderBox.story = {
  name: "Border Box"
};
export const shadow = () => /*#__PURE__*/_jsx(Box, {
  shadow: "default",
  p: "r",
  children: /*#__PURE__*/_jsx(P, {
    children: "This is a variant of a Box with a slight drop shadow."
  })
});
shadow.story = {
  name: "Drop shadow"
};
export const backgroundColour = () => /*#__PURE__*/_jsx(Box, {
  bg: "greyLightest",
  p: "r",
  children: /*#__PURE__*/_jsxs(P, {
    children: ["This is a Box that has background colour set to ", /*#__PURE__*/_jsx("code", {
      children: "greyLightest"
    }), "."]
  })
});
backgroundColour.story = {
  name: "Background colour"
};
export const padding = () => /*#__PURE__*/_jsx(Box, {
  boxBorder: "default",
  p: 6,
  children: /*#__PURE__*/_jsx(P, {
    children: "This is a bordered Box variant with specified padding that overrides the default padding value."
  })
});
padding.story = {
  name: "Padding"
};
export const borderRadius = () => /*#__PURE__*/_jsx(Box, {
  borderRadius: 2,
  boxBorder: "default",
  shadow: "default",
  p: "r",
  children: /*#__PURE__*/_jsxs(P, {
    children: ["This is a bordered Box variant with rounded corners.", /*#__PURE__*/_jsx("code", {
      children: "borderRadius"
    }), " is taken from the ", /*#__PURE__*/_jsx("code", {
      children: "radii"
    }), " array in", /*#__PURE__*/_jsx("code", {
      children: "systemtheme.js"
    }), "."]
  })
});
borderRadius.story = {
  name: "Rounded corners"
};
basicBox.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "basicBox"
};
borderBox.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "borderBox"
};
shadow.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "shadow"
};
backgroundColour.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "backgroundColour"
};
padding.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "padding"
};
borderRadius.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "borderRadius"
};