feat(#2850): add temporary notification

package.json

@@ -12,9 +12,9 @@
     "prettier": "npx prettier . --write"
   },
   "dependencies": {
-    "@abgov/react-components": "6.5.0",
-    "@abgov/ui-components-common": "1.5.0",
-    "@abgov/web-components": "1.35.1",
+    "@abgov/react-components": "6.6.0-alpha.4",
+    "@abgov/ui-components-common": "1.6.0-alpha.4",
+    "@abgov/web-components": "1.36.0-alpha.6",
     "@faker-js/faker": "^8.3.1",
     "highlight.js": "^11.8.0",
     "js-cookie": "^3.0.5",

src/components/component-properties/ComponentProperties.tsx

@@ -70,7 +70,7 @@ interface ComponentPropertyProps {
   props: ComponentProperty;
 }
 
-function ComponentProperty({ props }: ComponentPropertyProps) {
+export function ComponentProperty({ props }: ComponentPropertyProps) {
   return (
     <div className={css["component-props"]}>
       <div className={css.details}>

src/components/function-properties/FunctionProperties.tsx

@@ -0,0 +1,74 @@
+import { GoabText, GoabContainer } from "@abgov/react-components";
+import { ReactNode, useContext, useEffect, useState } from "react";
+
+import { ComponentProperty as ComponentPropertyType, ComponentProperty } from "@components/component-properties/ComponentProperties.tsx";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+
+interface Props {
+  properties: ComponentPropertyType[];
+  oldProperties?: ComponentPropertyType[];
+  heading?: string;
+  subHeading?: ReactNode;
+  codeSnippets?: {
+    angular?: ReactNode;
+    react?: ReactNode;
+  };
+}
+
+export const FunctionProperties = (props: Props) => {
+  const { language, version } = useContext(LanguageVersionContext);
+  const [filteredProperties, setFilteredProperties] = useState<ComponentPropertyType[]>([]);
+
+  const filterBy = (properties: ComponentPropertyType[]) => {
+    const result = properties.filter((child: ComponentPropertyType) => {
+      return !child.lang || child.lang === language;
+    });
+    return result;
+  };
+
+  useEffect(() => {
+    if (version === "old") {
+      setFilteredProperties([...filterBy(props.oldProperties || props.properties)]);
+      return;
+    }
+    setFilteredProperties([...filterBy(props.properties)]);
+  }, [language, version, props.properties, props.oldProperties]);
+
+  function dasherize(str: string): string {
+    return str.replace(" ", "-").toLowerCase();
+  }
+
+  return (
+    <>
+      <h2
+        id={props.heading ? `components-${dasherize(props.heading)}` : "function-properties"}
+        className="hidden"
+        aria-hidden="true">
+        {props.heading || "Function Properties"}
+      </h2>
+      <GoabText size="heading-m" mt="2xl">
+        {props.heading || "Function Properties"}
+      </GoabText>
+      {props.subHeading && (
+        <GoabText size="body-s" mb="l">
+          {props.subHeading}
+        </GoabText>
+      )}
+
+      {props.codeSnippets && (
+        <div style={{ marginBottom: "1rem" }}>
+          {props.codeSnippets.angular}
+          {props.codeSnippets.react}
+        </div>
+      )}
+
+      <GoabContainer type="interactive">
+        <div>
+          {filteredProperties.map((property, index) => (
+            <ComponentProperty key={index} props={property} />
+          ))}
+        </div>
+      </GoabContainer>
+    </>
+  );
+};

src/examples/show-a-notification-with-an-action.tsx

@@ -0,0 +1,93 @@
+import { GoabButton } from "@abgov/react-components";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { Sandbox } from "@components/sandbox";
+import { TemporaryNotification } from "@abgov/ui-components-common";
+
+export const ShowANotificationWithAnAction = () => {
+  const comment = () => {
+    const uuid = TemporaryNotification.show(
+      "Edna Mode commented on your assigned case.",
+      {
+        actionText: "View",
+        action: () => {
+          TemporaryNotification.dismiss(uuid);
+        },
+      }
+    );
+  };
+
+  return (
+    <Sandbox skipRender>
+      <GoabButton onClick={comment}>Comment</GoabButton>
+
+      <CodeSnippet
+        lang="typescript"
+        tags="angular"
+        allowCopy={true}
+        code={`
+          import { TemporaryNotification } from "@abgov/ui-components-common";
+
+          export class ExampleComponent {
+            comment() {
+              const uuid = TemporaryNotification.show(
+                "Edna Mode commented on your assigned case.",
+                {
+                  actionText: "View",
+                  action: () => {
+                    TemporaryNotification.dismiss(uuid);
+                  },
+                }
+              );
+            }
+          }
+        `}
+      />
+
+      <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+          import { TemporaryNotification } from "@abgov/ui-components-common";
+
+          const comment = () => {
+            const uuid = TemporaryNotification.show(
+              "Edna Mode commented on your assigned case.",
+              {
+                actionText: "View",
+                action: () => {
+                  TemporaryNotification.dismiss(uuid);
+                },
+              }
+            );
+          };
+        `}
+      />
+
+      <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+          <>
+            <GoabTemporaryNotificationCtrl />
+            <GoabButton onClick={comment}>Comment</GoabButton>
+          </>
+        `}
+      />
+
+      <CodeSnippet
+        lang="html"
+        tags="angular"
+        allowCopy={true}
+        code={`
+          <goab-temporary-notification-ctrl/>
+
+          <goab-button (onClick)="comment()">Comment</goab-button>
+        `}
+      />
+    </Sandbox>
+  );
+};
+
+export default ShowANotificationWithAnAction;