PLAY-171- Visual Guidelines Typography (#2035)

powerhome · Sep 2, 2022 · 7f2b40c · 7f2b40c
1 parent 9bb01aa
commit 7f2b40c
Show file tree

Hide file tree

Showing 3 changed files with 223 additions and 0 deletions.
diff --git a/playbook-website/app/javascript/components/VisualGuidelines/Examples/TYPOGRAPHY_DATA.ts b/playbook-website/app/javascript/components/VisualGuidelines/Examples/TYPOGRAPHY_DATA.ts
@@ -0,0 +1,107 @@
+//data for headings
+export const HEADINGSIZE = ["48px", "34px", "28px", "16px"];
+export const HEADINGS = {
+  $heading_1: "Heading 1",
+  $heading_2: "Heading 2",
+  $heading_3: "Heading 3",
+  $heading_4: "Heading 4",
+};
+
+//data for text sizes
+export const TEXTDATA = [
+  {
+    name: "Text Jumbo",
+    class: "text_jumbo",
+    text: "$text_jumbo",
+    size: "36px",
+  },
+  {
+    name: "Text Largest",
+    class: "text_largest",
+    text: "$text_largest",
+    size: "32px",
+  },
+  {
+    name: "Text Larger",
+    class: "text_larger",
+    text: "$text_larger",
+    size: "28px",
+  },
+  {
+    name: "Text Large",
+    class: "text_large",
+    text: "$text_large",
+    size: "20px",
+  },
+  { name: "Text Base", class: "text_base", text: "$text_base", size: "16px" },
+  {
+    name: "Text Small",
+    class: "text_small",
+    text: "$text_small",
+    size: "14px",
+  },
+  {
+    name: "Text Smaller",
+    class: "text_smaller",
+    text: "$text_smaller",
+    size: "12px",
+  },
+  {
+    name: "Text Smallest",
+    class: "text_smallest",
+    text: "$text_smallest",
+    size: "11px",
+  },
+];
+
+//Data for letter spacing
+export const SPACINGDATA = [
+  {
+    name: "Tightest",
+    class: "ls_tightest",
+    text: "$lspace_tightest",
+    value: "-0.1em",
+  },
+  {
+    name: "Tighter",
+    class: "ls_tighter",
+    text: "$lspace_tighter",
+    value: "-0.07em",
+  },
+  {
+    name: "Tight",
+    class: "ls_tight",
+    text: "$lspace_tight",
+    value: "-0.03em",
+  },
+  {
+    name: "Normal",
+    class: "ls_normal",
+    text: "$lspace_normal",
+    value: "0",
+  },
+  {
+    name: "Loose",
+    class: "ls_loos",
+    text: "$lspace_loose",
+    value: "0.03em",
+  },
+  {
+    name: "Looser",
+    class: "ls_looser",
+    text: "$lspace_looser",
+    value: "0.07em",
+  },
+  {
+    name: "Loosest",
+    class: "ls_loosest",
+    text: "$lspace_loosest",
+    value: "0.1em",
+  },
+  {
+    name: "Super Loosest",
+    class: "ls_super_loosest",
+    text: "$lspace_super_loosest",
+    value: "0.2em",
+  },
+];
diff --git a/playbook-website/app/javascript/components/VisualGuidelines/Examples/Typography.tsx b/playbook-website/app/javascript/components/VisualGuidelines/Examples/Typography.tsx
@@ -0,0 +1,114 @@
+import React from "react";
+import {
+  Flex,
+  Card,
+  Title,
+  Caption,
+  CircleIconButton,
+  SectionSeparator,
+} from "playbook-ui";
+import {
+  HEADINGS,
+  HEADINGSIZE,
+  TEXTDATA,
+  SPACINGDATA,
+} from "./TYPOGRAPHY_DATA";
+import Example from "../Templates/Example";
+
+const Typography = ({
+  example,
+  tokensExample,
+}: {
+  example: string;
+  tokensExample?: string;
+}) => (
+  <>
+    <Example
+      title="Typography"
+      description="Odds are, you might want to build or expand upon the text patterns we have provided. Below are the tokens that are available for you and your typography needs."
+      example={example}
+      customChildren={true}
+      tokens={HEADINGS}
+    >
+      <Caption margin="md" text="Headings" />
+      <Flex
+        alignItems="end"
+        paddingBottom="lg"
+        paddingLeft="md"
+        paddingTop="md"
+        columnGap="lg"
+        wrap
+      >
+        {Object.keys(HEADINGS).map((heading, i) => (
+          <Flex
+            orientation="column"
+            justifyContent="between"
+            key={`token-example-${heading}`}
+            alignItems="center"
+          >
+            <Title
+              Typography={HEADINGS[heading]}
+              text={HEADINGS[heading]}
+              size={HEADINGS[heading]}
+            />
+            <Caption size="xs" text={HEADINGSIZE[i]} />
+            <Caption size="xs" text={heading} />
+            <CircleIconButton icon="copy" paddingRight="sm" variant="link" />
+          </Flex>
+        ))}
+      </Flex>
+      <SectionSeparator />
+
+      <Caption marginTop="xl" marginLeft="md" text="Text Size" />
+      <Flex
+        alignItems="end"
+        paddingBottom="lg"
+        paddingLeft="md"
+        paddingTop="md"
+        columnGap="lg"
+        wrap
+      >
+        {TEXTDATA.map((data) => (
+          <Flex
+            orientation="column"
+            justifyContent="between"
+            key={`token-example-${data.name}`}
+            alignItems="center"
+          >
+            <div className={data.class}>{data.name}</div>
+            <Caption size="xs" text={data.size} />
+            <Caption size="xs" text={data.text} />
+            <CircleIconButton icon="copy" paddingRight="sm" variant="link" />
+          </Flex>
+        ))}
+      </Flex>
+      <SectionSeparator />
+
+      <Caption marginTop="xl" marginLeft="md" text="Letter Spacing" />
+      <Flex
+        alignItems="end"
+        paddingBottom="lg"
+        paddingLeft="md"
+        paddingTop="md"
+        columnGap="lg"
+        wrap
+      >
+        {SPACINGDATA.map((data) => (
+          <Flex
+            orientation="column"
+            justifyContent="between"
+            key={`token-example-${data.name}`}
+            alignItems="center"
+          >
+            <div className={data.class}>{data.name}</div>
+            <Caption size="xs" text={data.value} />
+            <Caption size="xs" text={data.text} />
+            <CircleIconButton icon="copy" paddingRight="sm" variant="link" />
+          </Flex>
+        ))}
+      </Flex>
+    </Example>
+  </>
+);
+
+export default Typography;
diff --git a/playbook-website/app/javascript/components/VisualGuidelines/index.tsx b/playbook-website/app/javascript/components/VisualGuidelines/index.tsx
@@ -11,6 +11,7 @@ import NumberSpacing from './Examples/NumberSpacing'
 import Shadows from './Examples/Shadows'
 import Spacing from './Examples/Spacing'
 import BorderRadius from './Examples/BorderRadius'
+import Typography from './Examples/Typography'
 import Display from './Examples/Display'
 import Cursor from './Examples/Cursor'
 import FlexBox from './Examples/FlexBox'
@@ -38,6 +39,7 @@ const VisualGuidelines = ({ examples }: {examples: {[key: string]: string}}): Re
           tokensExample={examples.spacing_tokens_jsx}
       />
       <BorderRadius tokensExample={examples.border_radius_tokens} />
+      <Typography example={examples.typography_tokens}/>
       <Display example={examples.display_in_use_jsx} />
       <Cursor example={examples.cursor_jsx} />
       <FlexBox example={examples.justify_self_jsx} />