feat (#71): component status view and documentation updates

src/components/code-snippet/CodeSnippet.css

@@ -3,19 +3,22 @@
   border-radius: 4px;
   margin-top: var(--goa-space-m);
   overflow: hidden;
-  max-height: 25rem;
+  max-height: 20rem;
   position: relative;
+  font: var(--goa-typography-number-s);
 }
 
 .goa-code-snippet pre {
   margin: 0;
   white-space: pre-wrap;
   word-wrap: break-word;
+  padding-right: var(--goa-space-2xl); /** to not overlap with copy button **/
+  background-color: var(--goa-color-greyscale-100);
 }
 
 .goa-code-snippet.overflow pre {
   padding-bottom: var(--goa-space-xl); /** to not overlap with show more/less button **/
-  padding-right: var(--goa-space-2xl); /** to not overlap with copy button **/
+  padding-right: var(--goa-space-3xl); /** to not overlap with copy button **/
   background-color: var(--goa-color-greyscale-100);
 }
 

src/components/code-snippet/CodeSnippet.tsx

@@ -132,7 +132,7 @@ export const CodeSnippet: FC<Props> = ({ lang, allowCopy, code, children, tags }
 
         {allowCopy && (
           <div className="goa-code-snippet-actions--copy">
-            <GoabTooltip content={isCopied ? `Copied` : `Copy?`} position="left">
+            <GoabTooltip content={isCopied ? "Copied" : "Copy"} key={isCopied ? "copied" : "copy"} position="left">
               <GoabIconButton icon="copy" onClick={copyCode} />
             </GoabTooltip>
           </div>

src/components/component-card/ComponentCard.css

@@ -7,7 +7,7 @@
 .card-image {
   width: 100%;
   height: 200px;
-  background-size: contain;
+  background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   border-bottom: 1px solid var(--goa-color-greyscale-200);
@@ -20,6 +20,22 @@
 
 .card-content a {
   font-size: var(--goa-font-size-7);
-  display: block;
-  margin-bottom: 1rem;
+  display: flex;
 }
+
+.card-content a.github-link {
+  font: var(--goa-typography-body-s);
+  margin-top: 1rem;
+  margin-bottom: 0;
+}
+
+.card-content a:focus {
+  outline: none;
+  box-shadow: none;
+  background: none;
+}
+
+.card:focus-within {
+  outline: 3px solid var(--goa-color-interactive-focus);
+  border-radius: 4px;
+}

src/components/component-card/ComponentCard.tsx

@@ -1,31 +1,107 @@
 import { Link } from "react-router-dom";
 import "./ComponentCard.css";
-import { toKebabCase } from '../../utils/index';
+import { toKebabCase } from "../../utils";
+import { GoabBadge, GoabText } from "@abgov/react-components";
+import { useState, useEffect } from "react";
+
+export type ComponentStatus = "Published" | "Not Published" | "In Progress";
+
+// Define allowed group options as a union type
+type Group =
+  | "Content layout"
+  | "Feedback and alerts"
+  | "Inputs and actions"
+  | "Structure and navigation"
+  | "Utilities";
 
 export interface Props {
   name: string;
   description: string;
-  groups: string[];
+  groups: Group[]; // Use the Group type here
   tags?: string[];
+  status: ComponentStatus;
+  githubLink?: string;
+  openIssues?: number;
 }
 
 function dasherize(value: string): string {
   return value.split(" ").join("-");
 }
 
 export function ComponentCard(props: Props) {
+  const [imageUrl, setImageUrl] = useState(`/images/${dasherize(props.name)}.png`);
+
+  useEffect(() => {
+    const testImage = new Image();
+    testImage.src = imageUrl;
+    testImage.onerror = () => setImageUrl("/images/not-yet-available.png");
+  }, [imageUrl]);
+
+  const getBadgeType = (status: ComponentStatus) => {
+    switch (status) {
+      case "Published":
+        return null; // No badge for "Published"
+      case "Not Published":
+        return "information";
+      case "In Progress":
+        return "important";
+      default:
+        return "information"; // Fallback for unknown status
+    }
+  };
+
+  const badgeType = getBadgeType(props.status);
+
   return (
     <div className="card">
-      <div
-        className="card-image"
-        style={{ backgroundImage: `url(/images/${dasherize(props.name)}.png)` }}
-      />
-      <div className="card-content">
-        <Link to={toKebabCase(props.name)}>
-          {`${props.name.substring(0, 1).toUpperCase()}${props.name.substring(1)}`}
+      {props.status === "Published" ? (
+        <Link to={toKebabCase(props.name)} tabIndex={-1}>
+          <div
+            className="card-image"
+            style={{ backgroundImage: `url(${imageUrl})` }}
+          />
         </Link>
-        {props.description}
+      ) : (
+        <div
+          className="card-image"
+          tabIndex={-1}
+          style={{ backgroundImage: `url(${imageUrl})` }}
+        />
+      )}
+      <div className="card-content">
+        <div className="card-title-with-badge">
+          {badgeType && <GoabBadge mt="none" mb="m" type={badgeType} content={props.status} />}
+
+          {props.status === "Published" ? (
+
+            <Link to={toKebabCase(props.name)}>
+              {`${props.name.substring(0, 1).toUpperCase()}${props.name.substring(1)}`}
+            </Link>
+
+          ) : (
+
+            <GoabText size="body-l" mt="none" mb="none">
+              {`${props.name.substring(0, 1).toUpperCase()}${props.name.substring(1)}`}
+            </GoabText>
+
+          )}
+        </div>
+        <GoabText size="body-m" mt="m" mb="none">
+          {props.description}
+        </GoabText>
+        {props.status !== "Published" && props.githubLink && (
+          <GoabText size="body-s">
+            <a
+              href={props.githubLink}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="github-link"
+            >
+             View issues{typeof props.openIssues === 'number' && ` (${props.openIssues})`}
+            </a>
+          </GoabText>
+        )}
       </div>
     </div>
   );
-}
+}

src/components/component-content/ComponentContent.tsx

@@ -1,5 +1,6 @@
 import TOC from "@components/table-of-contents/TOC";
 import "./component-content.css";
+import { GoabDivider } from "@abgov/react-components";
 
 type Props = {
   children: React.ReactNode;
@@ -11,8 +12,10 @@ export function ComponentContent({tocCssQuery, contentClassName, children}: Prop
 
   return <>
     <div className="component-content--container">
-      <div style={{ maxWidth: tocCssQuery ? "auto" : "54rem" }} className={`component-content--content ${contentClassName ? contentClassName: ""}`}>
+      <div style={{ maxWidth: tocCssQuery ? "auto" : "54rem" }}
+           className={`component-content--content ${contentClassName ? contentClassName : ""}`}>
         {children}
+        <GoabDivider mt="3xl"></GoabDivider>
       </div>
       {tocCssQuery && <TOC cssQuery={tocCssQuery} />}
     </div>

src/components/component-header/ComponentHeader.css

@@ -1,11 +1,34 @@
 .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);
+  margin-bottom: var(--goa-space-xs);
+}
+
+.component-header span.x-small,
+.component-header a.x-small {
+  font: var(--goa-typography-body-xs);
+}
+
+.related-links {
+  color: var(--goa-color-text-secondary);
+}
+
+.grey {
+  color: var(--goa-color-text-secondary);
 }
 
 @media screen and (max-width: 623px) {

src/components/component-header/ComponentHeader.tsx

@@ -1,42 +1,122 @@
-import { GoabBadge } from "@abgov/react-components";
+import { GoabBadge, GoabBlock, GoabText } from "@abgov/react-components";
 import "./ComponentHeader.css";
 import { Link } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { toSentenceCase, fetchIssueCount } from "../../utils";
 
+export enum Category {
+  CONTENT_AND_LAYOUT = "Content and layout",
+  FEEDBACK_AND_ALERTS = "Feedback and alerts",
+  STRUCTURE_AND_NAVIGATION = "Structure and navigation",
+  INPUTS_AND_ACTIONS = "Inputs and actions",
+  UTILITIES = "Utilities",
+}
 
 interface Props {
   category?: Category;
   name: string;
   description?: string;
   relatedComponents?: { link: string; name: string }[];
+  githubLink?: string;
+  figmaLink?: string;
 }
 
-export enum Category {
-  CONTENT_AND_LAYOUT = "Content and layout",
-  FEEDBACK_AND_ALERTS = "Feedback and alerts",
-  STRUCTURE_AND_NAVIGATION = "Structure and navigation",
-  INPUTS_AND_ACTIONS = "Inputs and actions",
-  UTILITIES = "Utilities",
-}
+export const ComponentHeader: React.FC<Props> = (props) => {
+  const [issueCount, setIssueCount] = useState<number | null>(null);
+
+  useEffect(() => {
+    if (!props.githubLink) return;
+
+    const getCount = async () => {
+      const label = toSentenceCase(props.githubLink!);
+      const count = await fetchIssueCount(label);
+      setIssueCount(count);
+    };
+
+    getCount();
+  }, [props.githubLink]);
 
-export const ComponentHeader: React.FC<Props> = (props: Props) => {
   return (
-    <div className="component-header">
+
+    <div className="component-header" >
       <GoabBadge 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>
+
+      <GoabBlock gap="2xl" alignment="center">
+        <GoabText size="heading-l" mt="xs" mb="xs">
+          <b>{props.name}</b>
+        </GoabText>
+        {(props.githubLink || props.figmaLink) && (
+          <GoabBlock gap="l" direction="row" mt="l">
+            {/* GitHub Issues link, if we have a "githubLink" */}
+            <GoabBlock gap="2xs" direction="row">
+              {props.githubLink && (
+                <>
+                  <goa-icon type="logo-github" size="2xsmall" mb="xs" fillcolor="#666666" />
+                  <a className="small no-external-icon grey"
+                     href={`https://github.com/GovAlta/ui-components/issues?q=is%3Aissue+is%3Aopen+label%3A%22${encodeURIComponent(
+                       toSentenceCase(props.githubLink)
+                     )}%22`}
+                     target="_blank"
+                     rel="noopener noreferrer"
+                  >
+                    GitHub issues{issueCount !== null ? ` (${issueCount})` : ""}
+                  </a>
+                </>
+              )}
+            </GoabBlock>
+            {/* Figma link, if we have a "figmaLink" */}
+            <GoabBlock gap="3xs" direction="row" alignment="start">
+              {props.figmaLink && (
+                <>
+                  <div className="figma-link-wrapper">
+                    <svg width="16" height="17" viewBox="0 0 16 17" fill="none"
+                         xmlns="http://www.w3.org/2000/svg">
+                      <path
+                        d="M3.20313 4.20312C3.20313 4.79779 3.43935 5.3681 3.85985 5.78859C4.28034 6.20908 4.85065 6.44531 5.44531 6.44531H7.6875V1.96094H5.44531C4.85065 1.96094 4.28034 2.19717 3.85985 2.61766C3.43935 3.03815 3.20313 3.60846 3.20313 4.20312Z"
+                        stroke="#666666" strokeWidth="0.826069" />
+                      <path
+                        d="M7.6875 1.96094V6.44531H9.92969C10.5244 6.44531 11.0947 6.20908 11.5152 5.78859C11.9356 5.3681 12.1719 4.79779 12.1719 4.20312C12.1719 3.60846 11.9356 3.03815 11.5152 2.61766C11.0947 2.19717 10.5244 1.96094 9.92969 1.96094L7.6875 1.96094Z"
+                        stroke="#666666" strokeWidth="0.826069" />
+                      <path
+                        d="M3.20313 8.6875C3.20313 9.28217 3.43935 9.85247 3.85985 10.273C4.28034 10.6935 4.85065 10.9297 5.44531 10.9297H7.6875V6.44531H5.44531C4.85065 6.44531 4.28034 6.68154 3.85985 7.10203C3.43935 7.52253 3.20313 8.09283 3.20313 8.6875Z"
+                        stroke="#666666" strokeWidth="0.826069" />
+                      <path
+                        d="M7.6875 8.6875C7.6875 8.09283 7.92373 7.52253 8.34422 7.10203C8.76471 6.68154 9.33502 6.44531 9.92969 6.44531C10.5244 6.44531 11.0947 6.68154 11.5152 7.10203C11.9356 7.52253 12.1719 8.09283 12.1719 8.6875C12.1719 9.28217 11.9356 9.85247 11.5152 10.273C11.0947 10.6935 10.5244 10.9297 9.92969 10.9297C9.33502 10.9297 8.76471 10.6935 8.34422 10.273C7.92373 9.85247 7.6875 9.28217 7.6875 8.6875V8.6875Z"
+                        stroke="#666666" strokeWidth="0.826069" />
+                      <path
+                        d="M3.20312 13.1719C3.20312 12.5772 3.43935 12.0069 3.85985 11.5864C4.28034 11.1659 4.85065 10.9297 5.44531 10.9297H7.6875V13.1719C7.6875 13.7665 7.45127 14.3368 7.03078 14.7573C6.61029 15.1778 6.03998 15.4141 5.44531 15.4141C4.85065 15.4141 4.28034 15.1778 3.85985 14.7573C3.43935 14.3368 3.20313 13.7665 3.20312 13.1719Z"
+                        stroke="#666666" strokeWidth="0.826069" />
+                    </svg>
+                  </div>
+
+                  <a className="small no-external-icon grey"
+                     href={props.figmaLink} target="_blank" rel="noopener noreferrer">
+                    Figma
+                  </a>
+                </>
+              )}
+            </GoabBlock>
+          </GoabBlock>
+        )}
+      </GoabBlock>
+
+      <GoabText size="body-l" mt="none">
+        {props.description}
+      </GoabText>
 
       {props.relatedComponents?.length && (
-        <>
-          <span>Related components: </span>
-          {props.relatedComponents.map((relatedComponent, index, array) => (
-            <span key={index}>
-              <Link to={relatedComponent.link}>{relatedComponent.name}</Link>
+        <GoabBlock mt="m" mb="xl" gap="xs">
+          <span className="small related-links">Related:</span>
+          {props.relatedComponents.map((rc, index, array) => (
+            <span className="small related-links" key={index}>
+              <Link to={rc.link}>{rc.name}</Link>
               {index < array.length - 1 && ", "}
             </span>
           ))}
-        </>
+        </GoabBlock>
       )}
+
+
     </div>
   );
 };