feat(#2278): add modal drawer doc

package.json

@@ -12,9 +12,9 @@
     "prettier": "npx prettier . --write"
   },
   "dependencies": {
-    "@abgov/react-components": "6.3.0-alpha.1",
-    "@abgov/ui-components-common": "1.3.0-alpha.1",
-    "@abgov/web-components": "1.33.0-alpha.10",
+    "@abgov/react-components": "6.3.0-alpha.5",
+    "@abgov/ui-components-common": "1.3.0-alpha.2",
+    "@abgov/web-components": "1.33.0-alpha.15",
     "@faker-js/faker": "^8.3.1",
     "highlight.js": "^11.8.0",
     "js-cookie": "^3.0.5",

src/components/component-card/ComponentCard.tsx

@@ -13,6 +13,9 @@ type Group =
   | "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;
@@ -22,6 +25,7 @@ export interface Props {
   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 {
@@ -52,6 +56,7 @@ export function ComponentCard(props: Props) {
 
   const badgeType = getBadgeType(props.status);
 
+  const {language} = useContext(LanguageVersionContext);
   return (
     <div className="card">
       {props.status === "Published" ? (
@@ -101,7 +106,8 @@ export function ComponentCard(props: Props) {
             </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/old-component-banner/OldComponentBanner.tsx

@@ -0,0 +1,21 @@
+import { GoabCallout } from "@abgov/react-components";
+import { ANGULAR_VERSIONS, REACT_VERSIONS } from "@components/version-language-switcher/version-language-constants.ts";
+import { Link } from "react-router-dom";
+
+interface OldComponentBannerProps {
+  componentName: string;
+  language: string;
+}
+
+export const OldComponentBanner = ({ componentName, language }: OldComponentBannerProps) => {
+  return (
+    <GoabCallout type="important" size={"medium"} heading={
+      `${componentName} component not available in this version`
+    }>
+      This component is only available in {language == "angular" ? ANGULAR_VERSIONS.NEW.label.substring(0,2).toUpperCase()
+      : REACT_VERSIONS.NEW.label.substring(0,2).toUpperCase()} of the design system components.
+      <br/>
+      <Link to="/get-started/developers/update">View upgrade guide</Link>{" "}
+    </GoabCallout>
+  )
+}

src/components/sandbox/Sandbox.tsx

@@ -29,6 +29,7 @@ interface SandboxProps {
   flags?: Flag[];
   skipRender?: boolean; // prevent rendering the snippet, to allow custom code to be shown
   skipRenderOnly?: string; // prevent rendering the snippet for a specific language. Ex: react/angular
+  skipRenderDom?: boolean; // rendering code snippets, but display none for the DOM because it isn't working as expected if inside sandbox
   allow?: string[]; // Be default the Sandbox is selective to what it renders out. This adds
   // additional elements to what is allowed to be rendered out
   variableNames?: string[]; // If we want to assign a variable such as step={step} render in code snippet, provides variableNames=["step"]
@@ -114,7 +115,7 @@ export const Sandbox = (props: SandboxProps) => {
 
   return (
     <>
-      <SandboxView fullWidth={props.fullWidth} sandboxProps={props} background={props.background} />
+    {props.skipRenderDom ? null : <SandboxView fullWidth={props.fullWidth} sandboxProps={props} background={props.background} />}
 
       {/* Only render the GoAAccordion if props.properties is provided */}
       {props.properties && props.properties.length > 0 && (