Docs update

package.json

@@ -12,9 +12,9 @@
     "prettier": "npx prettier . --write"
   },
   "dependencies": {
-    "@abgov/react-components": "6.2.1",
-    "@abgov/ui-components-common": "1.2.1",
-    "@abgov/web-components": "1.32.1",
+    "@abgov/react-components": "6.3.0-alpha.6",
+    "@abgov/ui-components-common": "1.3.0-alpha.2",
+    "@abgov/web-components": "1.33.0-alpha.17",
     "@faker-js/faker": "^8.3.1",
     "highlight.js": "^11.8.0",
     "js-cookie": "^3.0.5",

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,30 +1,112 @@
 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";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { ANGULAR_VERSIONS, REACT_VERSIONS } from "@components/version-language-switcher/version-language-constants.ts";
 
 export interface Props {
   name: string;
   description: string;
-  groups: string[];
+  groups: Group[]; // Use the Group type here
   tags?: string[];
+  status: ComponentStatus;
+  githubLink?: string;
+  openIssues?: number;
+  isNew?: boolean; // if true, show a badge on the component card to let users know the component is available in the latest version
 }
 
 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);
+
+  const {language} = useContext(LanguageVersionContext);
   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>
+        )}
+        {props.isNew && <GoabBadge type="important" mt="l" content={"Available in " + (language === "angular" ? ANGULAR_VERSIONS.NEW.label.substring(0,2).toUpperCase() : REACT_VERSIONS.NEW.label.substring(0,2).toUpperCase())}/>}
       </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) {