From a58c7ca5c5899df5181d0b7382af1af1c33dedc5 Mon Sep 17 00:00:00 2001
From: vicky-comeau <vicky.comeau@gsoft.com>
Date: Wed, 28 Aug 2024 15:01:48 -0400
Subject: [PATCH 1/3] Feat: [DS-288] Added support for action link & closable
 horizontal appearance

---
 .changeset/clever-rockets-speak.md            |  5 +++
 packages/Alert/src/Alert.stories.tsx          | 32 ++++++++++++++
 packages/Alert/src/Alert.tsx                  | 42 ++++++++++++++++---
 packages/Alert/src/alert.scss                 | 32 +++++++-------
 .../src/__snapshots__/Avatar.test.tsx.snap    |  1 +
 .../src/__snapshots__/Dropdown.test.tsx.snap  |  8 +++-
 6 files changed, 97 insertions(+), 23 deletions(-)
 create mode 100644 .changeset/clever-rockets-speak.md

diff --git a/.changeset/clever-rockets-speak.md b/.changeset/clever-rockets-speak.md
new file mode 100644
index 00000000..10798ef7
--- /dev/null
+++ b/.changeset/clever-rockets-speak.md
@@ -0,0 +1,5 @@
+---
+"@igloo-ui/alert": minor
+---
+
+Added the option to have an action link instead of a button in an Alert. Allowed the horizontal appearance to have a dismiss button. It is hidden by default for backwards compatibility.
diff --git a/packages/Alert/src/Alert.stories.tsx b/packages/Alert/src/Alert.stories.tsx
index 0f933cc3..b514d5cb 100644
--- a/packages/Alert/src/Alert.stories.tsx
+++ b/packages/Alert/src/Alert.stories.tsx
@@ -111,6 +111,38 @@ export const WithButton = () => (
   </Section>
 );
 
+export const WithLink = () => (
+  <Section column>
+    <Alert
+      link={{ 
+        children: <a href="#">Tell me more</a>
+       }}
+      type="info"
+      appearance="card"
+      title={mockContent.title}
+      message={mockContent.message}
+    />
+    <Alert
+      link={{ 
+        children: <a href="#">Tell me more</a>
+       }}
+      type="info"
+      appearance="inline"
+      title={mockContent.title}
+      message={mockContent.message}
+    />
+    <Alert
+      link={{ 
+        children: <a href="#">Tell me more</a>
+       }}
+      type="info"
+      appearance="horizontal"
+      title={mockContent.title}
+      closable
+    />
+  </Section>
+);
+
 export const Closable = () => (
   <Section column>
     <Alert
diff --git a/packages/Alert/src/Alert.tsx b/packages/Alert/src/Alert.tsx
index 38d7bf43..42c27cca 100644
--- a/packages/Alert/src/Alert.tsx
+++ b/packages/Alert/src/Alert.tsx
@@ -2,7 +2,8 @@ import * as React from "react";
 import classNames from "classnames";
 
 import Button, { type Appearance as ButtonAppearance } from "@igloo-ui/button";
-import IconButton from "@igloo-ui/icon-button";
+import type { HyperlinkProps } from "@igloo-ui/hyperlink";
+import IconButton, { type Size as IconButtonSize } from "@igloo-ui/icon-button";
 import { DismissIcon } from "@hopper-ui/icons-react16";
 import {
     InfoIcon,
@@ -21,6 +22,7 @@ import { useLocalizedStringFormatter } from "@igloo-ui/provider";
 import intlMessages from "./intl";
 
 import "./alert.scss";
+import Hyperlink from "@igloo-ui/hyperlink";
 
 export type Type = "announcement" | "info" | "premium" | "success" | "warning";
 
@@ -54,6 +56,8 @@ export interface AlertProps extends Omit<React.ComponentProps<"div">, "title"> {
     button?: AlertButton;
     /** Add a data-test tag for automated tests */
     dataTest?: string;
+    /** Alert Link. Used in place of the button */
+    link?: HyperlinkProps;
 }
 
 const getBrand = (): string => {
@@ -89,6 +93,7 @@ const renderIcon = (
 
 const renderDismissButton = (
     setShow: (show: boolean) => void,
+    size: IconButtonSize = "xsmall",
     onDismissClick?: () => void,
     ariaLabel?: string
 ): JSX.Element => {
@@ -99,13 +104,14 @@ const renderDismissButton = (
 
         setShow(false);
     };
+    console.log(size);
 
     return (
         <IconButton
             appearance={{ type: "ghost", variant: "secondary" }}
             className="ids-alert__dismiss-btn"
             type="button"
-            size="xsmall"
+            size={size}
             icon={<DismissIcon size="sm" />}
             onClick={action}
             aria-label={ariaLabel}
@@ -138,6 +144,24 @@ const renderAlertActionButton = (
     );
 };
 
+const renderAlertActionLink = (
+    link?: HyperlinkProps
+): JSX.Element => {
+    if (link == null || link.children == null) {
+        return <></>;
+    }
+
+    return (
+        <Hyperlink
+            appearance={link.appearance ?? "secondary"}
+            size={link.size ?? "small"}
+            className={classNames(link.className, "ids-alert__action-btn")}
+        >
+            {link.children}
+        </Hyperlink>
+    );
+};
+
 const Alert: React.FunctionComponent<AlertProps> = ({
     title,
     message,
@@ -145,11 +169,12 @@ const Alert: React.FunctionComponent<AlertProps> = ({
     type,
     appearance = "card",
     className,
-    closable = true,
+    closable = appearance !== "horizontal",
     icon,
     onClose,
     button,
     dataTest,
+    link,
     ...rest
 }: AlertProps) => {
     const stringFormatter = useLocalizedStringFormatter(intlMessages);
@@ -163,8 +188,9 @@ const Alert: React.FunctionComponent<AlertProps> = ({
     const parentElement = React.useRef<HTMLDivElement>(null);
     const [show, setShow] = React.useState(true);
     const hasButton = button !== undefined;
+    const hasLink = link !== undefined;
     const isHorizontal = appearance === "horizontal";
-    const canBeClosed = closable && !isHorizontal;
+    const canBeClosed = closable;
     const isWorkleap = getBrand() === "workleap";
 
     if (show) {
@@ -177,7 +203,7 @@ const Alert: React.FunctionComponent<AlertProps> = ({
             >
                 {icon !== null &&
           !isHorizontal &&
-          renderIcon(appearance, hasButton, type, icon, isWorkleap)}
+          renderIcon(appearance, hasButton || hasLink, type, icon, isWorkleap)}
 
                 <div className="ids-alert__body">
                     <div className="ids-alert__header">
@@ -185,10 +211,14 @@ const Alert: React.FunctionComponent<AlertProps> = ({
                         <p className="ids-alert__metadata">{metadata}</p>
                     </div>
                     {!isHorizontal && <div className="ids-alert__content">{message}</div>}
+                    {hasLink && renderAlertActionLink(link)}
                     {hasButton && renderAlertActionButton(appearance, button, isWorkleap)}
                 </div>
 
-                {canBeClosed && renderDismissButton(setShow, onClose, stringFormatter.format("close"))}
+                {canBeClosed && renderDismissButton(setShow, 
+                                                    isHorizontal ? "medium" : "xsmall", 
+                                                    onClose, 
+                                                    stringFormatter.format("close"))}
             </div>
         );
     }
diff --git a/packages/Alert/src/alert.scss b/packages/Alert/src/alert.scss
index bfbda01e..d4af5918 100644
--- a/packages/Alert/src/alert.scss
+++ b/packages/Alert/src/alert.scss
@@ -15,7 +15,7 @@
         --ids-alert-title-font-weight: #{tokens.$font-weight-semi-bold};
         --ids-alert-padding: #{tokens.$space-3};
         --ids-alert-padding-compact: #{tokens.$space-3};
-        --ids-alert-flex-gap-component: #{tokens.$space-3};
+        --ids-alert-gap: #{tokens.$space-3};
         --ids-alert-border-radius: #{tokens.$border-radius-sm};
         --ids-alert-box-shadow: #{tokens.$shadow-6};
         --ids-alert-background-color-light: #{tokens.$samoyed};
@@ -29,6 +29,7 @@
         --ids-alert-icon-size-medium: 4rem;
         --ids-alert-btn-margin-top: #{tokens.$space-3};
         --ids-alert-metadata-color: #{tokens.$grey-600};
+        --ids-alert-body-gap-horizontal: #{tokens.$space-3};
 
         /* Announcement */
         --ids-alert-border-color-announcement: #{tokens.$seaweed-500};
@@ -55,7 +56,7 @@
         --ids-alert-horizontal-title-font-weight: var(--hop-body-sm-font-weight);
         --ids-alert-padding: var(--hop-space-inset-md);
         --ids-alert-padding-compact: var(--hop-space-inset-sm) var(--hop-space-inset-md);
-        --ids-alert-flex-gap-component: var(--hop-space-inline-md);
+        --ids-alert-gap: var(--hop-space-inline-md);
         --ids-alert-border-radius: var(--hop-shape-rounded-md);
         --ids-alert-box-shadow: none;
         --ids-alert-border-default-width: 0.1rem;
@@ -65,6 +66,7 @@
         --ids-alert-icon-size-medium: 2.5rem;
         --ids-alert-btn-margin-top: var(--hop-space-stack-md);
         --ids-alert-metadata-color: var(--hop-neutral-text-weak);
+        --ids-alert-body-gap-horizontal: var(--hop-shape-rounded-md);
 
         /* Announcement */
         --ids-alert-color-announcement: var(--hop-information-text);
@@ -105,14 +107,10 @@
         border-width: var(--ids-alert-border-default-width);
         font-size: var(--ids-alert-font-size);
         font-family: var(--ids-alert-font-family);
+        gap: var(--ids-alert-gap);
         line-height: var(--ids-alert-line-height);
         padding: var(--ids-alert-padding);
 
-        /* External component override */
-        .ids-btn {
-            width: auto;
-        }
-
         /* Styles */
         &--card {
             background-color: var(--ids-alert-background-color-light);
@@ -131,6 +129,10 @@
             .ids-alert__title {
                 font-weight: var(--ids-alert-horizontal-title-font-weight, var(--ids-alert-title-font-weight))
             }
+
+            & .ids-alert__dismiss-btn {
+                align-self: center;
+            }
         }
 
         /* Types */
@@ -228,10 +230,13 @@
             align-self: center;
             flex-direction: column;
             align-items: flex-start;
+        }
 
-            .ids-btn {
-                margin-top: var(--ids-alert-btn-margin-top);
-            }
+        &__action-btn {
+            flex: 0 0 auto;
+            margin-top: var(--ids-alert-btn-margin-top);
+            max-width: 100%;
+            width: auto;
         }
 
         &__content {
@@ -298,20 +303,17 @@
 
         /* stylelint-disable-next-line media-query-no-invalid */
         @media (width >= #{tokens.$breakpoints-sm}) {
-            &__icon + .ids-alert__body {
-                margin-left: var(--ids-alert-flex-gap-component);
-            }
-
             &--horizontal &__body {
                 flex-direction: row;
                 align-items: center;
+                gap: var(--ids-alert-body-gap-horizontal);
             }
 
             &--horizontal &__body > .ids-alert__header {
                 flex: 1 1 auto;
             }
 
-            &--horizontal &__body > .ids-btn {
+            &--horizontal &__body > &__action-btn {
                 margin: 0;
             }
         }
diff --git a/packages/Avatar/src/__snapshots__/Avatar.test.tsx.snap b/packages/Avatar/src/__snapshots__/Avatar.test.tsx.snap
index 570b07ba..b86799cd 100644
--- a/packages/Avatar/src/__snapshots__/Avatar.test.tsx.snap
+++ b/packages/Avatar/src/__snapshots__/Avatar.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Avatar It should render a snapshot 1`] = `
 <DocumentFragment>
   <div
     class="ids-avatar ids-avatar--medium"
+    data-private="true"
   >
     <img
       alt="Avatar"
diff --git a/packages/Dropdown/src/__snapshots__/Dropdown.test.tsx.snap b/packages/Dropdown/src/__snapshots__/Dropdown.test.tsx.snap
index 93ceef33..52bac619 100644
--- a/packages/Dropdown/src/__snapshots__/Dropdown.test.tsx.snap
+++ b/packages/Dropdown/src/__snapshots__/Dropdown.test.tsx.snap
@@ -2,7 +2,9 @@
 
 exports[`Dropdown It should render without error and a snapshot 1`] = `
 <body>
-  <div>
+  <div
+    data-floating-ui-inert=""
+  >
     <div
       aria-controls=":r0:"
       aria-expanded="true"
@@ -39,6 +41,7 @@ exports[`Dropdown It should render without error and a snapshot 1`] = `
   >
     <span
       data-floating-ui-focus-guard=""
+      data-floating-ui-inert=""
       data-type="inside"
       role="button"
       style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
@@ -51,7 +54,7 @@ exports[`Dropdown It should render without error and a snapshot 1`] = `
       id=":r0:"
       role="listbox"
       style="position: fixed; top: 0px; left: 0px; opacity: 0; transform: translateY(1rem);"
-      tabindex="0"
+      tabindex="-1"
     >
       <div
         class="ids-dropdown__scroll-content"
@@ -61,6 +64,7 @@ exports[`Dropdown It should render without error and a snapshot 1`] = `
     </div>
     <span
       data-floating-ui-focus-guard=""
+      data-floating-ui-inert=""
       data-type="inside"
       role="button"
       style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"

From a39a9548f1ebc51650f4284e2ab1ef8271243078 Mon Sep 17 00:00:00 2001
From: vicky-comeau <vicky.comeau@gsoft.com>
Date: Wed, 28 Aug 2024 15:59:52 -0400
Subject: [PATCH 2/3] removed console log

---
 packages/Alert/src/Alert.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/Alert/src/Alert.tsx b/packages/Alert/src/Alert.tsx
index 42c27cca..3f238b98 100644
--- a/packages/Alert/src/Alert.tsx
+++ b/packages/Alert/src/Alert.tsx
@@ -104,7 +104,6 @@ const renderDismissButton = (
 
         setShow(false);
     };
-    console.log(size);
 
     return (
         <IconButton

From ddb44310fb25b530e2e58b354438c616fdd7673a Mon Sep 17 00:00:00 2001
From: vicky-comeau <vicky.comeau@gsoft.com>
Date: Wed, 28 Aug 2024 16:17:41 -0400
Subject: [PATCH 3/3] put back old dropdown snapshot because github is weird

---
 .../Dropdown/src/__snapshots__/Dropdown.test.tsx.snap     | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/Dropdown/src/__snapshots__/Dropdown.test.tsx.snap b/packages/Dropdown/src/__snapshots__/Dropdown.test.tsx.snap
index 52bac619..93ceef33 100644
--- a/packages/Dropdown/src/__snapshots__/Dropdown.test.tsx.snap
+++ b/packages/Dropdown/src/__snapshots__/Dropdown.test.tsx.snap
@@ -2,9 +2,7 @@
 
 exports[`Dropdown It should render without error and a snapshot 1`] = `
 <body>
-  <div
-    data-floating-ui-inert=""
-  >
+  <div>
     <div
       aria-controls=":r0:"
       aria-expanded="true"
@@ -41,7 +39,6 @@ exports[`Dropdown It should render without error and a snapshot 1`] = `
   >
     <span
       data-floating-ui-focus-guard=""
-      data-floating-ui-inert=""
       data-type="inside"
       role="button"
       style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
@@ -54,7 +51,7 @@ exports[`Dropdown It should render without error and a snapshot 1`] = `
       id=":r0:"
       role="listbox"
       style="position: fixed; top: 0px; left: 0px; opacity: 0; transform: translateY(1rem);"
-      tabindex="-1"
+      tabindex="0"
     >
       <div
         class="ids-dropdown__scroll-content"
@@ -64,7 +61,6 @@ exports[`Dropdown It should render without error and a snapshot 1`] = `
     </div>
     <span
       data-floating-ui-focus-guard=""
-      data-floating-ui-inert=""
       data-type="inside"
       role="button"
       style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"