DO-NOT-TEST design usage documentation

package.json

@@ -15,6 +15,7 @@
     "@abgov/react-components": "4.17.0-alpha.25",
     "@abgov/web-components": "1.17.0-alpha.51",
     "@faker-js/faker": "^8.3.1",
+    "date-fns": "^3.6.0",
     "highlight.js": "^11.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/components/component-header/ComponentHeader.css

@@ -1,11 +1,24 @@
 .component-header {
-  margin-bottom: 3rem;
-  margin-top: 2rem;
+  margin-bottom: var(--goa-space-l);
+  margin-top: var(--goa-space-xl);
 }
 
 .component-header h1 {
-  margin-bottom: 1rem;
-  margin-top: 1.5rem;
+  margin-bottom: var(--goa-space-m);
+  margin-top: var(--goa-space-l);
+}
+
+.component-header h3 {
+  margin-bottom: var(--goa-space-xs);
+}
+
+.component-header span.small,
+.component-header a.small {
+  font: var(--goa-typography-body-s);
+}
+.component-header span.x-small,
+.component-header a.x-small {
+  font: var(--goa-typography-body-xs);
 }
 
 @media screen and (max-width: 623px) {

src/components/component-header/ComponentHeader.tsx

@@ -1,13 +1,15 @@
-import { GoABadge } from "@abgov/react-components";
+import { GoABadge, GoABlock } from "@abgov/react-components";
 import "./ComponentHeader.css";
 import { Link } from "react-router-dom";
-
+import { format } from 'date-fns';
+import { useEffect, useState } from "react";
 
 interface Props {
   category?: Category;
   name: string;
   description?: string;
   relatedComponents?: { link: string; name: string }[];
+  githubLink?: string;
 }
 
 export enum Category {
@@ -19,23 +21,64 @@ export enum Category {
 }
 
 export const ComponentHeader: React.FC<Props> = (props: Props) => {
+  const GITHUB_BASE = "https://github.com/GovAlta/ui-components-docs/blob/main/src/";
+  const [lastUpdateTime, setLastUpdateTime] = useState<Date | null>(null);
+  useEffect(() => {
+    if (props.githubLink) {
+      const fetchLastUpdateTime = async () => {
+        try {
+          const url = `https://api.github.com/repos/GovAlta/ui-components-docs/commits?path=src/${props.githubLink}`;
+          const response = await fetch(url);
+          if (!response.ok) {
+            return;
+          }
+          const commits = await response.json();
+          if (commits.length === 0) {
+            return;
+          }
+          const lastCommit = commits[0];
+          const lastUpdateTime = new Date(lastCommit.commit.committer.date);
+          setLastUpdateTime(lastUpdateTime);
+        } catch (error) {
+          console.error((error as Error).message);
+        }
+      };
+
+      fetchLastUpdateTime();
+    }
+  }, [props.githubLink]);
+
   return (
     <div className="component-header">
       <GoABadge type="information" content={props.category} />
       <h1>{props.name}</h1>
-      <h2 id="component" className="hidden" aria-hidden="true">Component</h2>
-      <h3 dangerouslySetInnerHTML={{__html: props.description || ''}}></h3>
+      <h2 id="component" className="hidden" aria-hidden="true">
+        Component
+      </h2>
+      <h3 dangerouslySetInnerHTML={{ __html: props.description || "" }}></h3>
 
       {props.relatedComponents?.length && (
-        <>
-          <span>Related components: </span>
+        <GoABlock mb={"l"} gap={"xs"}>
+          <span className="small">Related: </span>
           {props.relatedComponents.map((relatedComponent, index, array) => (
-            <span key={index}>
+            <span className="small" key={index}>
               <Link to={relatedComponent.link}>{relatedComponent.name}</Link>
               {index < array.length - 1 && ", "}
             </span>
           ))}
-        </>
+        </GoABlock>
+      )}
+      {props.githubLink && (
+        <GoABlock gap="xs">
+          {lastUpdateTime && (
+            <span className={"x-small greyscale"}>
+              Last updated on {format(lastUpdateTime, "MMM dd, yyyy")}
+            </span>
+          )}
+          <a className={"x-small"} href={`${GITHUB_BASE}${props.githubLink}`} target="_blank">
+            Edit this page
+          </a>
+        </GoABlock>
       )}
     </div>
   );

src/components/do-dont/DoDont.css

@@ -1,11 +1,15 @@
 .do-container {
   font-size: var(--goa-font-size-5);
   border: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
-  padding: 3rem;
+  padding: var(--goa-space-2xl);
 }
 
+.do-container:has(> iframe),
+.do-container:has(> img) {
+  padding: 0;
+}
 .description {
-  font: var(--goa-typography-body-s);
+  font: var(--goa-typography-body-m);
 }
 .description.type-generic{
   margin-top: var(--goa-space-m);

src/components/do-dont/DoDont.tsx

@@ -5,14 +5,29 @@ import { ReactNode } from "react";
 type DoDont = "do" | "dont" | "generic";
 interface Props {
   type: DoDont;
-  children: ReactNode;
+  children?: ReactNode;
   description?: string;
+  figmaLink?: string;
 }
 
-export function DoDont({ type, children, description }: Props) {
+export function DoDont({ type, children, description, figmaLink }: Props) {
   return (
     <div>
-      <div className="do-container">{children}</div>
+      <div className="do-container">
+        {figmaLink ? (
+          <a href={figmaLink} target="_blank" rel="noopener noreferrer">
+            <div className="figma-preview">
+              <img
+                src={`https://www.figma.com/embed?embed_host=share&url=${figmaLink}`}
+                alt="Figma Preview"
+                style={{ width: '100%', height: 'auto' }}
+              />
+            </div>
+          </a>
+        ) : (
+          children
+        )}
+      </div>
       {(type === "do" || type === "dont") && (
         <div className="do-content" data-positive={type}>
           {type === "do" ? <GoAIcon type="checkmark-circle" /> : <GoAIcon type="close-circle" />}

src/examples/task-list-page/TaskListPageExamples.tsx

@@ -96,7 +96,7 @@ export function TaskListPageExamples() {
         </GoATable>
 
         <h3>3. Schedule service</h3>
-        <p className="small">
+        <p className="small text-secondary">
           You need to complete the previous section before you can start this task.
         </p>
         <GoATable width="100%" mt="l" mb="3xl">