From 29bde92912df33aac95b3ebad93eccdc7459ecd8 Mon Sep 17 00:00:00 2001
From: miguel-soco_goa <youremail@gov.ab.ca>
Date: Tue, 17 Dec 2024 11:52:58 -0700
Subject: [PATCH 1/3] chore(#2125): tooltip - add in contextual example

---
 src/routes/components/Tooltip.tsx | 172 +++++++++++++++++++++++++++++-
 1 file changed, 170 insertions(+), 2 deletions(-)

diff --git a/src/routes/components/Tooltip.tsx b/src/routes/components/Tooltip.tsx
index 117a9ca3f..14d0adecd 100644
--- a/src/routes/components/Tooltip.tsx
+++ b/src/routes/components/Tooltip.tsx
@@ -1,6 +1,7 @@
 import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx";
-import { ComponentBinding, Sandbox } from "@components/sandbox";
-import { useState } from "react";
+import { ComponentBinding, Sandbox, DesignTokensLanguageContext } from "@components/sandbox";
+import { getCssVarValue } from "../../utils/styling";
+import { useState, useContext } from "react";
 import {
   ComponentProperties,
   ComponentProperty,
@@ -9,11 +10,16 @@ import {
 import {
   GoAIcon,
   GoABadge,
+  GoABlock,
+  GoAButtonGroup,
+  GoAContainer,
+  GoAIconButton,
   GoATab,
   GoATabs,
   GoATooltip,
   GoATooltipProps,
 } from "@abgov/react-components";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
 import { ComponentContent } from "@components/component-content/ComponentContent";
 
 // == Page props ==
@@ -90,6 +96,17 @@ export default function TEMPLATE_Page() {
     setComponentProps(props as CastingType);
   }
 
+  const [isCopied, setIsCopied] = useState(false);
+  const lang = useContext(DesignTokensLanguageContext);
+
+  function copyCode() {
+    let codeToCopy = lang === "css" ? `--$goa-color-interactive-default` : `$$goa-color-interactive-default`;
+    navigator.clipboard.writeText(codeToCopy).then(() => {
+      setIsCopied(true);
+      setTimeout(() => setIsCopied(false), 1000);
+    });
+  }
+
   return (
     <>
       <ComponentHeader
@@ -110,6 +127,157 @@ export default function TEMPLATE_Page() {
               </GoATooltip>
             </Sandbox>
             <ComponentProperties properties={componentProperties} />
+            
+            <h2 id="component-examples" className="hidden" aria-hidden="true">
+              Examples
+            </h2>
+        
+            <h3 id="component-example-date-when-shortened">Use a tooltip to show a full date when shortened</h3>
+            <Sandbox skipRender fullWidth>
+              <CodeSnippet
+                lang="typescript"
+                tags="angular"
+                allowCopy={true}
+                code={`
+                  <goa-container type="non-interactive" accent="thick">
+                    <div slot="title">
+                      Joan Smith
+                      <goa-tooltip content="Nov 23, 2023 at 10:35 am">
+                        <span style={{ color:"var(--goa-color-text-secondary)", font: "var(--goa-typography-body-xs)" }} >4 hours ago</span>
+                      </goa-tooltip>
+                    </div>
+                    <p>Hover on the time it was added to see the full date and time.</p>
+                  </goa-container>     
+                `}
+              />
+              <CodeSnippet
+                lang="typescript"
+                tags="react"
+                allowCopy={true}
+                code={`
+                  <GoAContainer
+                    type="non-interactive"
+                    accent="thick"
+                    heading={<span> Joan Smith <GoATooltip content="Nov 23, 2023 at 10:35 am"> <span style={{ color:"var(--goa-color-text-secondary)", font: "var(--goa-typography-body-xs)" }} >4 hours ago</span> </GoATooltip> </span>}>
+                    <p>Hover on the time it was added to see the full date and time.</p>
+                  </GoAContainer>
+                `}
+              />
+              <GoAContainer
+                type="non-interactive"
+                accent="thick"
+                heading={
+                <span>
+                  Joan Smith
+                  <GoATooltip content="Nov 23, 2023 at 10:35 am">
+                    <span style={{ color:"var(--goa-color-text-secondary)", font: "var(--goa-typography-body-xs)" }} >4 hours ago</span>
+                  </GoATooltip>
+                </span>}>
+                <p>Hover on the time it was added to see the full date and time.</p>
+              </GoAContainer>
+            </Sandbox>
+            
+            <h3 id="component-example-label-icon-only">Show a label on an icon only button</h3>
+            <Sandbox fullWidth>
+              <GoAButtonGroup alignment="center">
+                  <GoATooltip content="Edit">
+                    <GoAIconButton icon="pencil" ariaLabel="Pencil icon"/>
+                  </GoATooltip>
+                  <GoATooltip content="Alerts">
+                    <GoAIconButton icon="notifications" ariaLabel="Alert icon"/>
+                  </GoATooltip>
+                  <GoATooltip content="Settings">
+                    <GoAIconButton icon="settings" ariaLabel="Settings icon"/>
+                  </GoATooltip>
+              </GoAButtonGroup>
+            </Sandbox>
+
+            <h3 id="component-example-copy-clipboard">Click to copy something to your clipboard</h3>
+            <Sandbox allow={['div', 'pre', 'a']} skipRender>
+              <CodeSnippet
+                lang="css"
+                allowCopy={true}
+                code={`
+                  .token-block {
+                    background-color: var(--goa-color-interactive-default);
+                    height: 22px;
+                    width: 24px;
+                    border-radius: var(--goa-border-radius-m);
+                  }
+
+                  .goa-token-snippet > a > span {
+                    margin-top: 5px;
+                    margin-left: 10px;
+                  }
+                `}
+              />
+              <CodeSnippet
+                lang="typescript"
+                tags="react"
+                allowCopy={true}
+                code={`
+                  const [isCopied, setIsCopied] = useState(false);
+                  const lang = useContext(DesignTokensLanguageContext);
+
+                  function copyCode() {
+                    let codeToCopy = lang === "css" ? "--$goa-color-interactive-default" : "$$goa-color-interactive-default";
+                    navigator.clipboard.writeText(codeToCopy).then(() => {
+                      setIsCopied(true);
+                      setTimeout(() => setIsCopied(false), 1000);
+                    });
+                  }
+                `}
+              />
+              <CodeSnippet
+                lang="typescript"
+                tags="react"
+                allowCopy={true}
+                code={`
+                  <GoABlock alignment="center">
+                    <div className="token-block"/>
+                    <div className="goa-token-snippet">
+                      <a onClick={copyCode}>
+                        <u>$goa-color-interactive-default</u>
+                        <span>
+                          <GoAIcon type="copy" />
+                        </span>
+                      </a>
+                      <span
+                        className="goa-tooltip"
+                        style={isCopied ? { visibility: "visible" } : { visibility: "hidden" }}
+                      >
+                        Copied
+                      </span>
+                    </div>
+                  </GoABlock>
+                `}
+              />
+              <GoABlock alignment="center">
+                <div
+                  className="token-block"
+                  style={{
+                    backgroundColor: getCssVarValue(`--goa-color-interactive-default`),
+                    height: '22px',
+                    width: '24px',
+                    borderRadius: getCssVarValue('--goa-border-radius-m')
+                  }}
+                />
+                <div className="goa-token-snippet">
+                    <a onClick={copyCode}>
+                      <u>$goa-color-interactive-default</u>
+                      <span style={{ marginTop: "5px", marginLeft: "10px" }}>
+                        <GoAIcon type="copy" />
+                      </span>
+                    </a>
+                  <span
+                    className="copy-feedback"
+                    style={isCopied ? { visibility: "visible" } : { visibility: "hidden" }}
+                  >
+                    Copied
+                  </span>
+                </div>
+              </GoABlock>
+            </Sandbox>
           </GoATab>
 
           <GoATab

From 5cb07228f256b38af27e91f1b3f58089d31d2d80 Mon Sep 17 00:00:00 2001
From: miguel-soco_goa <youremail@gov.ab.ca>
Date: Wed, 18 Dec 2024 12:02:04 -0700
Subject: [PATCH 2/3] chore(#2125): tooltip -  adjust contextual example

---
 src/routes/components/Tooltip.tsx | 94 +++++++++++++++++++------------
 1 file changed, 57 insertions(+), 37 deletions(-)

diff --git a/src/routes/components/Tooltip.tsx b/src/routes/components/Tooltip.tsx
index 14d0adecd..bce3da5cb 100644
--- a/src/routes/components/Tooltip.tsx
+++ b/src/routes/components/Tooltip.tsx
@@ -97,10 +97,9 @@ export default function TEMPLATE_Page() {
   }
 
   const [isCopied, setIsCopied] = useState(false);
-  const lang = useContext(DesignTokensLanguageContext);
 
   function copyCode() {
-    let codeToCopy = lang === "css" ? `--$goa-color-interactive-default` : `$$goa-color-interactive-default`;
+    const codeToCopy = "$goa-color-interactive-default";
     navigator.clipboard.writeText(codeToCopy).then(() => {
       setIsCopied(true);
       setTimeout(() => setIsCopied(false), 1000);
@@ -143,7 +142,7 @@ export default function TEMPLATE_Page() {
                     <div slot="title">
                       Joan Smith
                       <goa-tooltip content="Nov 23, 2023 at 10:35 am">
-                        <span style={{ color:"var(--goa-color-text-secondary)", font: "var(--goa-typography-body-xs)" }} >4 hours ago</span>
+                        <span style="color:var(--goa-color-text-secondary); font: var(--goa-typography-body-xs);">4 hours ago</span>
                       </goa-tooltip>
                     </div>
                     <p>Hover on the time it was added to see the full date and time.</p>
@@ -158,7 +157,18 @@ export default function TEMPLATE_Page() {
                   <GoAContainer
                     type="non-interactive"
                     accent="thick"
-                    heading={<span> Joan Smith <GoATooltip content="Nov 23, 2023 at 10:35 am"> <span style={{ color:"var(--goa-color-text-secondary)", font: "var(--goa-typography-body-xs)" }} >4 hours ago</span> </GoATooltip> </span>}>
+                    heading={
+                      <span>
+                        Joan Smith 
+                        <GoATooltip content="Nov 23, 2023 at 10:35 am">
+                          <span style={{
+                            color:"var(--goa-color-text-secondary)",
+                            font: "var(--goa-typography-body-xs)" }}>
+                            4 hours ago
+                          </span>
+                        </GoATooltip>
+                      </span>
+                    }>
                     <p>Hover on the time it was added to see the full date and time.</p>
                   </GoAContainer>
                 `}
@@ -204,23 +214,49 @@ export default function TEMPLATE_Page() {
                     width: 24px;
                     border-radius: var(--goa-border-radius-m);
                   }
+                `}
+              />
+              <CodeSnippet
+                lang="typescript"
+                tags="angular"
+                allowCopy={true}
+                code={`
+                  isCopied = false;
 
-                  .goa-token-snippet > a > span {
-                    margin-top: 5px;
-                    margin-left: 10px;
+                  copyCode() {
+                    const codeToCopy = "$goa-color-interactive-default";
+                    navigator.clipboard.writeText(codeToCopy).then(() => {
+                      this.isCopied = true;
+                      setTimeout(() => this.isCopied = false, 1000);
+                    });
                   }
                 `}
               />
+              <CodeSnippet
+                lang="typescript"
+                tags="angular"
+                allowCopy={true}
+                code={`
+                  <goa-block alignment="center">
+                    <div class="token-block"></div>
+                    <a (_click)="copyCode()">
+                      <u>$goa-color-interactive-default</u>
+                    </a>
+                    <goa-tooltip [content]="isCopied ? 'Copied' : 'Copy?'" position="top">
+                      <goa-icon-button icon="copy" (_click)="copyCode()" mt="2xs" />
+                    </goa-tooltip>
+                  </goa-block>
+                `}
+              />
               <CodeSnippet
                 lang="typescript"
                 tags="react"
                 allowCopy={true}
                 code={`
                   const [isCopied, setIsCopied] = useState(false);
-                  const lang = useContext(DesignTokensLanguageContext);
 
                   function copyCode() {
-                    let codeToCopy = lang === "css" ? "--$goa-color-interactive-default" : "$$goa-color-interactive-default";
+                    const codeToCopy = "$goa-color-interactive-default";
                     navigator.clipboard.writeText(codeToCopy).then(() => {
                       setIsCopied(true);
                       setTimeout(() => setIsCopied(false), 1000);
@@ -235,20 +271,12 @@ export default function TEMPLATE_Page() {
                 code={`
                   <GoABlock alignment="center">
                     <div className="token-block"/>
-                    <div className="goa-token-snippet">
-                      <a onClick={copyCode}>
-                        <u>$goa-color-interactive-default</u>
-                        <span>
-                          <GoAIcon type="copy" />
-                        </span>
-                      </a>
-                      <span
-                        className="goa-tooltip"
-                        style={isCopied ? { visibility: "visible" } : { visibility: "hidden" }}
-                      >
-                        Copied
-                      </span>
-                    </div>
+                    <a onClick={copyCode}>
+                      <u>$goa-color-interactive-default</u>
+                    </a>
+                    <GoATooltip content={isCopied ? "Copied" : "Copy?"} position="top">
+                      <GoAIconButton icon="copy" onClick={copyCode} mt="2xs" />
+                    </GoATooltip>
                   </GoABlock>
                 `}
               />
@@ -262,20 +290,12 @@ export default function TEMPLATE_Page() {
                     borderRadius: getCssVarValue('--goa-border-radius-m')
                   }}
                 />
-                <div className="goa-token-snippet">
-                    <a onClick={copyCode}>
-                      <u>$goa-color-interactive-default</u>
-                      <span style={{ marginTop: "5px", marginLeft: "10px" }}>
-                        <GoAIcon type="copy" />
-                      </span>
-                    </a>
-                  <span
-                    className="copy-feedback"
-                    style={isCopied ? { visibility: "visible" } : { visibility: "hidden" }}
-                  >
-                    Copied
-                  </span>
-                </div>
+                <a onClick={copyCode}>
+                  <u>$goa-color-interactive-default</u>
+                </a>
+                <GoATooltip content={isCopied ? `Copied` : `Copy?`} position="top">
+                  <GoAIconButton icon="copy" onClick={copyCode} mt="2xs" />
+                </GoATooltip>
               </GoABlock>
             </Sandbox>
           </GoATab>

From 244b89dea459d6294230cc25726a6155bd1d51fd Mon Sep 17 00:00:00 2001
From: miguel-soco_goa <youremail@gov.ab.ca>
Date: Wed, 18 Dec 2024 14:56:19 -0700
Subject: [PATCH 3/3] chore(#2125): tooltip - fix errors

---
 src/routes/components/Tooltip.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/components/Tooltip.tsx b/src/routes/components/Tooltip.tsx
index bce3da5cb..81800cf94 100644
--- a/src/routes/components/Tooltip.tsx
+++ b/src/routes/components/Tooltip.tsx
@@ -1,7 +1,7 @@
 import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx";
-import { ComponentBinding, Sandbox, DesignTokensLanguageContext } from "@components/sandbox";
+import { ComponentBinding, Sandbox } from "@components/sandbox";
 import { getCssVarValue } from "../../utils/styling";
-import { useState, useContext } from "react";
+import { useState } from "react";
 import {
   ComponentProperties,
   ComponentProperty,