Typography docs + preview (#166)

* Heading docs + preview

* Caption docs + preview

* Paragraph docs + preview

* Title docs + preview

@stellar/design-system-website/docs/foundations/typography/_category_.json

@@ -0,0 +1,7 @@
+{
+  "label": "Typography",
+  "link": {
+    "type": "generated-index",
+    "description": "Typography (including headings, paragraph, and other text types) examples and documentation. These components don’t have any special props, and inherit their native HTML attributes."
+  }
+}

@stellar/design-system-website/docs/foundations/typography/caption.mdx

@@ -0,0 +1,19 @@
+---
+slug: /caption
+---
+
+# Caption
+
+<ComponentDescription componentName="Caption" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="Caption">
+  <Caption size="xs">Caption</Caption>
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="Caption" />

@stellar/design-system-website/docs/foundations/typography/heading.mdx

@@ -0,0 +1,21 @@
+---
+slug: /heading
+---
+
+# Heading
+
+<ComponentDescription componentName="Heading" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="Heading">
+  <Heading as="h1" size="xs">
+    Heading
+  </Heading>
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="Heading" />

@stellar/design-system-website/docs/foundations/typography/paragraph.mdx

@@ -0,0 +1,19 @@
+---
+slug: /paragraph
+---
+
+# Paragraph
+
+<ComponentDescription componentName="Paragraph" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="Paragraph">
+  <Paragraph size="xs">Paragraph</Paragraph>
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="Paragraph" />

@stellar/design-system-website/docs/foundations/typography/title.mdx

@@ -0,0 +1,19 @@
+---
+slug: /title
+---
+
+# Title
+
+<ComponentDescription componentName="Title" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="Title">
+  <Title size="xs">Title</Title>
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="Title" />

@stellar/design-system-website/src/componentPreview/captionPreview.tsx

@@ -0,0 +1,28 @@
+import { ComponentPreview } from "@site/src/components/PreviewBlock";
+
+export const captionPreview: ComponentPreview = {
+  options: [
+    {
+      type: "select",
+      prop: "size",
+      options: [
+        {
+          value: "xs",
+          label: "XS",
+        },
+        {
+          value: "sm",
+          label: "SM",
+        },
+        {
+          value: "md",
+          label: "MD",
+        },
+        {
+          value: "lg",
+          label: "LG",
+        },
+      ],
+    },
+  ],
+};

@stellar/design-system-website/src/componentPreview/headingPreview.tsx

@@ -0,0 +1,66 @@
+import { ComponentPreview } from "@site/src/components/PreviewBlock";
+
+export const headingPreview: ComponentPreview = {
+  options: [
+    {
+      type: "select",
+      prop: "as",
+      options: [
+        {
+          value: "h1",
+          label: "h1",
+        },
+        {
+          value: "h2",
+          label: "h2",
+        },
+        {
+          value: "h3",
+          label: "h3",
+        },
+        {
+          value: "h4",
+          label: "h4",
+        },
+        {
+          value: "h5",
+          label: "h5",
+        },
+        {
+          value: "h6",
+          label: "h6",
+        },
+      ],
+    },
+    {
+      type: "select",
+      prop: "size",
+      options: [
+        {
+          value: "xs",
+          label: "XS",
+        },
+        {
+          value: "sm",
+          label: "SM",
+        },
+        {
+          value: "md",
+          label: "MD",
+        },
+        {
+          value: "lg",
+          label: "LG",
+        },
+        {
+          value: "xl",
+          label: "XL",
+        },
+        {
+          value: "xxl",
+          label: "XXL",
+        },
+      ],
+    },
+  ],
+};

@stellar/design-system-website/src/componentPreview/paragraphPreview.tsx

@@ -0,0 +1,33 @@
+import { ComponentPreview } from "@site/src/components/PreviewBlock";
+
+export const paragraphPreview: ComponentPreview = {
+  options: [
+    {
+      type: "select",
+      prop: "size",
+      options: [
+        {
+          value: "xs",
+          label: "XS",
+        },
+        {
+          value: "sm",
+          label: "SM",
+        },
+        {
+          value: "md",
+          label: "MD",
+        },
+        {
+          value: "lg",
+          label: "LG",
+        },
+      ],
+    },
+    {
+      type: "checkbox",
+      prop: "asDiv",
+      label: "As div",
+    },
+  ],
+};

@stellar/design-system-website/src/componentPreview/titlePreview.tsx

@@ -0,0 +1,28 @@
+import { ComponentPreview } from "@site/src/components/PreviewBlock";
+
+export const titlePreview: ComponentPreview = {
+  options: [
+    {
+      type: "select",
+      prop: "size",
+      options: [
+        {
+          value: "xs",
+          label: "XS",
+        },
+        {
+          value: "sm",
+          label: "SM",
+        },
+        {
+          value: "md",
+          label: "MD",
+        },
+        {
+          value: "lg",
+          label: "LG",
+        },
+      ],
+    },
+  ],
+};

@stellar/design-system-website/src/components/PreviewBlock/index.tsx

@@ -3,10 +3,29 @@ import reactElementToJSXString from "react-element-to-jsx-string";
 import { PlaygroundEditor } from "@site/src/theme/Playground";
 import "./styles.css";
 
-// Previews
+// =============================================================================
+// Preview imports
+// =============================================================================
 import { buttonPreview } from "@site/src/componentPreview/buttonPreview";
 import { linkPreview } from "@site/src/componentPreview/linkPreview";
 import { projectLogoPreview } from "@site/src/componentPreview/projectLogoPreview";
+import { headingPreview } from "@site/src/componentPreview/headingPreview";
+import { captionPreview } from "@site/src/componentPreview/captionPreview";
+import { paragraphPreview } from "@site/src/componentPreview/paragraphPreview";
+import { titlePreview } from "@site/src/componentPreview/titlePreview";
+
+// =============================================================================
+// Component previews
+// =============================================================================
+const previews: { [key: string]: ComponentPreview } = {
+  Button: buttonPreview,
+  Link: linkPreview,
+  ProjectLogo: projectLogoPreview,
+  Heading: headingPreview,
+  Caption: captionPreview,
+  Paragraph: paragraphPreview,
+  Title: titlePreview,
+};
 
 type Theme = "sds-theme-light" | "sds-theme-dark";
 
@@ -62,13 +81,6 @@ export const PreviewBlock = ({
 
   const [theme, setTheme] = useState<Theme>("sds-theme-light");
 
-  // All component previews
-  const previews: { [key: string]: ComponentPreview } = {
-    Button: buttonPreview,
-    Link: linkPreview,
-    ProjectLogo: projectLogoPreview,
-  };
-
   const compPreview = previews[componentName];
 
   if (!compPreview) {

@stellar/design-system-website/src/components/PreviewBlock/styles.css

@@ -67,7 +67,20 @@
   }
 }
 
-/* Overrides */
+/* ========================================================================== */
+/* SDS overrides
+/* ========================================================================== */
 .PreviewBlock .Link--underline {
   text-decoration: underline !important;
 }
+
+.PreviewBlock .Heading,
+.PreviewBlock .Caption,
+.PreviewBlock .Paragraph,
+.PreviewBlock .Title {
+  color: var(--color-gray-90);
+}
+
+.PreviewBlock .Heading {
+  margin: 0 !important;
+}