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

TeamForm's Design System, aka: ORCS

import React from "react";
import { H1, H2, H3, H4, H5, H6, P, Text, Quote, Small, Code } from ".";
import Box from "../Box";
import Spacer from "../Spacer";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default {
  title: "System/Typography"
};
export const HeadingsH1ToH6 = {
  render: () => /*#__PURE__*/_jsxs(Spacer, {
    my: 4,
    children: [/*#__PURE__*/_jsxs(Box, {
      children: [/*#__PURE__*/_jsx(H1, {
        children: "Standard H1"
      }), /*#__PURE__*/_jsx(H1, {
        weight: "light",
        children: "Light version"
      }), /*#__PURE__*/_jsx(H1, {
        weight: "bold",
        children: "Bold version"
      })]
    }), /*#__PURE__*/_jsxs(Box, {
      children: [/*#__PURE__*/_jsx(H2, {
        children: "Standard H2"
      }), /*#__PURE__*/_jsx(H2, {
        weight: "light",
        children: "Light version"
      }), /*#__PURE__*/_jsx(H2, {
        weight: "bold",
        children: "Bold version"
      })]
    }), /*#__PURE__*/_jsxs(Box, {
      children: [/*#__PURE__*/_jsx(H3, {
        children: "Standard H3"
      }), /*#__PURE__*/_jsx(H3, {
        weight: "light",
        children: "Light version"
      }), /*#__PURE__*/_jsx(H3, {
        weight: "bold",
        children: "Bold version"
      })]
    }), /*#__PURE__*/_jsxs(Box, {
      children: [/*#__PURE__*/_jsx(H4, {
        children: "Standard H4"
      }), /*#__PURE__*/_jsx(H4, {
        weight: "light",
        children: "Light version"
      }), /*#__PURE__*/_jsx(H4, {
        weight: "bold",
        children: "Bold version"
      })]
    }), /*#__PURE__*/_jsxs(Box, {
      children: [/*#__PURE__*/_jsx(H5, {
        children: "Standard H5"
      }), /*#__PURE__*/_jsx(H5, {
        weight: "light",
        children: "Light version"
      }), /*#__PURE__*/_jsx(H5, {
        weight: "bold",
        children: "Bold version"
      })]
    }), /*#__PURE__*/_jsxs(Box, {
      children: [/*#__PURE__*/_jsx(H6, {
        children: "Standard H6"
      }), /*#__PURE__*/_jsx(H6, {
        weight: "light",
        children: "Light version"
      }), /*#__PURE__*/_jsx(H6, {
        weight: "bold",
        children: "Bold version"
      })]
    })]
  }),
  name: "Headings/H1 to H6"
};
export const BodyTextParagraph = {
  render: () => /*#__PURE__*/_jsxs(Spacer, {
    my: 3,
    children: [/*#__PURE__*/_jsx(P, {
      children: "Regular paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet at elit sit amet iaculis. Cras eget sapien et ligula mollis placerat non venenatis dolor. Fusce id mi risus. Ut sit amet diam in dui maximus sagittis a at dolor. Cras volutpat est nec arcu interdum pulvinar in vitae erat."
    }), /*#__PURE__*/_jsx(P, {
      textAlign: "center",
      children: "Centered paragraph text."
    }), /*#__PURE__*/_jsx(P, {
      textAlign: "right",
      children: "Right-aligned paragraph text."
    }), /*#__PURE__*/_jsx(P, {
      weight: "light",
      children: "Light paragraph text"
    }), /*#__PURE__*/_jsx(P, {
      sizing: "small",
      children: "Small paragraph text"
    })]
  }),
  name: "Body text/Paragraph"
};
export const BodyTextText = {
  render: () => /*#__PURE__*/_jsx(Text, {
    children: "Hello world"
  }),
  name: "Body text/Text"
};
export const StylingSizing = {
  render: () => /*#__PURE__*/_jsxs(Spacer, {
    my: 3,
    children: [/*#__PURE__*/_jsx(H5, {
      sizing: "small",
      children: "Small variant of H5"
    }), /*#__PURE__*/_jsx(H5, {
      sizing: "large",
      children: "Large variant of H5"
    }), /*#__PURE__*/_jsx(H5, {
      fontSize: 2,
      children: "Even smaller H5, scaled down two steps in the fontSize array"
    }), /*#__PURE__*/_jsx(P, {
      fontSize: "10px",
      children: "Very small text using a specific fontSize value"
    }), /*#__PURE__*/_jsx(Small, {
      children: "Small text using the Small component"
    })]
  }),
  name: "Styling/Sizing"
};
export const StylingEmphasis = {
  render: () => /*#__PURE__*/_jsxs(Spacer, {
    my: 3,
    children: [/*#__PURE__*/_jsx(P, {
      weight: "bold",
      children: "Bold paragraph text lorem ipsum dolor sit amet"
    }), /*#__PURE__*/_jsxs(P, {
      children: ["Only ", /*#__PURE__*/_jsx("strong", {
        children: "partially bolded"
      }), " paragraph"]
    })]
  }),
  name: "Styling/Emphasis"
};
export const StylingColours = {
  render: () => /*#__PURE__*/_jsxs(Spacer, {
    my: 2,
    children: [/*#__PURE__*/_jsx(P, {
      color: "greyDark",
      children: "Grey-coloured text"
    }), /*#__PURE__*/_jsx(P, {
      color: "success",
      children: "Success-coloured text"
    }), /*#__PURE__*/_jsx(P, {
      color: "danger",
      children: "Danger-coloured text"
    }), /*#__PURE__*/_jsx(Box, {
      bg: "greyDarker",
      p: "r",
      children: /*#__PURE__*/_jsx(P, {
        color: "white",
        children: "White text for dark backgrounds"
      })
    })]
  }),
  name: "Styling/Colours"
};
export const MiscellaneousBlockquote = {
  render: () => /*#__PURE__*/_jsxs(Quote, {
    children: ["\"Used to display block quotes lorem ipsum dolor sit amet\"", /*#__PURE__*/_jsx("em", {
      children: " - Adam, 2018"
    })]
  }),
  name: "Miscellaneous/Blockquote"
};
export const MiscellaneousCode = {
  render: () => /*#__PURE__*/_jsx(Code, {
    children: "<html> <head> <body> Hello I am a code block </body> </head> </html>"
  }),
  name: "Miscellaneous/Code"
};