feat(#76): Document text component

Author: bdfranck

public/images/text.png

@@ -56,6 +56,7 @@ import SpacerPage from "@routes/components/Spacer";
 import TablePage from "@routes/components/Table";
 import TabsPage from "@routes/components/Tabs.tsx";
 import TooltipPage from "@routes/components/Tooltip";
+import TextPage from "@routes/components/Text";
 import TextFieldPage from "@routes/components/TextField";
 import TextAreaPage from "@routes/components/TextArea";
 import MicrositeHeaderPage from "@routes/components/MicrositeHeader";
@@ -175,6 +176,7 @@ const router = createBrowserRouter(
         <Route path="spacer" element={<SpacerPage />} />
         <Route path="table" element={<TablePage />} />
         <Route path="tabs" element={<TabsPage />} />
+        <Route path="text" element={<TextPage />} />
         <Route path="text-area" element={<TextAreaPage />} />
         <Route path="tooltip" element={<TooltipPage />} />
         <Route path="text-field" element={<TextFieldPage />} />

src/App.tsx

@@ -314,6 +314,12 @@ export default function AllComponentsPage() {
       tags: ["gap", "margin", "padding", "space", "utilities"],
       description: "Negative area between the components and the interface.",
     },
+    {
+      name: "text",
+      groups: ["utilities"],
+      tags: ["heading", "font", "typography", "utilities"],
+      description: "Provides consistent sizing, spacing, and colour to written content."
+    }
   ];
 
   function getComponentsByGroup(group: string): ReactNode[] {

src/routes/components/AllComponents.tsx

@@ -67,6 +67,7 @@ export function Components() {
             <Link to="spacer">Spacer</Link>
             <Link to="table">Table</Link>
             <Link to="tabs">Tabs</Link>
+            <Link to="text">Text</Link>
             <Link to="text-area">Text area</Link>
             <Link to="tooltip">Tooltip</Link>
           </GoASideMenu>

src/routes/components/Components.tsx

@@ -0,0 +1,124 @@
+import { useState } from "react";
+import { ComponentBinding, Sandbox } from "@components/sandbox";
+import {
+  ComponentProperties,
+  ComponentProperty,
+} from "@components/component-properties/ComponentProperties.tsx";
+import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx";
+import { GoAText, GoATab, GoATabs, GoABadge } from "@abgov/react-components";
+
+export default function TextPage() {
+  const [textProps, setTextProps] = useState({});
+
+  const [textBindings, setTextBindings] = useState<ComponentBinding[]>([
+    {
+      label: "Size",
+      type: "list",
+      name: "size",
+      options: ["", "heading-xl", "heading-l", "heading-m", "heading-s", "heading-xs", "body-l", "body-m", "body-s", "body-xs"],
+      value: "",
+    },
+    {
+      label: "As",
+      type: "list",
+      name: "as",
+      options: ["", "h1", "h2", "h3", "h4", "h5", "span", "div", "p" ],
+      value: "",
+    },
+    {
+      label: "Max width",
+      type: "string",
+      name: "maxWidth",
+      value: ""
+    },    
+    {
+      label: "Color",
+      type: "list",
+      name: "color",
+      options: ["", "primary", "secondary"],
+      value: ""
+    },
+    {
+      label: "Top Margin",
+      type: "list",
+      name: "mt",
+      options: ["none", "3xs", "2xs", "xs", "s", "m", "l", "xl", "2xl", "3xl", "4xl"],
+      value: "none",
+    },
+    {
+      label: "Bottom Margin",
+      type: "list",
+      name: "mb",
+      options: ["none", "3xs", "2xs", "xs", "s", "m", "l", "xl", "2xl", "3xl", "4xl"],
+      value: "none",
+    },
+  ]);
+
+  const componentProperties: ComponentProperty[] = [
+    {
+      name: "as",
+      type: "h1 | h2 | h3 | h4 | h5 | span | div | p",
+      description: "Sets the tag and text size.",
+      defaultValue: "div"
+    },
+    {
+      name: "size",
+      type: "heading-xl | heading-l | heading-m | heading-s | heading-xs | body-l | body-m | body-s | body-xs",
+      description: "Overrides the text size from the 'as' property."
+    },
+    {
+     name: "maxWidth",
+     type: "string",
+     description: "Sets the max width.",
+     defaultValue: "65ch"
+    },
+     {
+      name: "color",
+      type: "primary | secondary",
+      description: "Sets the text colour.",
+      defaultValue: "primary"
+     },
+    {
+      name: "mt,mr,mb,ml",
+      type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl",
+      description: "Apply margin to the top, right, bottom, and/or left of the component.",
+    },
+  ];
+
+  function onSandboxChange(bindings: ComponentBinding[], props: Record<string, unknown>) {
+    setTextBindings(bindings);
+    setTextProps(props);
+  }
+
+  return (
+    <>
+      <ComponentHeader
+        name="Text"
+        category={Category.CONTENT_AND_LAYOUT}
+        description="Provides consistent sizing, spacing, and colour to written content."
+      />
+
+      <GoATabs>
+        <GoATab heading="Code examples">
+          <Sandbox properties={textBindings} onChange={onSandboxChange}>
+            
+            <GoAText {...textProps}>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+            </GoAText>
+
+          </Sandbox>
+          <ComponentProperties properties={componentProperties} />
+        </GoATab>
+        
+        <GoATab
+          heading={
+            <>
+              Design guidelines
+              <GoABadge type="information" content="In progress" />
+            </>
+          }
+        ></GoATab>
+      </GoATabs>
+    </>
+  );
+}