Feat: [DS-288] Added support for action link & closable horizontal ap…

.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.

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

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 => {
@@ -105,7 +110,7 @@ const renderDismissButton = (
             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,18 +143,37 @@ 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,
     metadata,
     type,
     appearance = "card",
     className,
-    closable = true,
+    closable = appearance !== "horizontal",
     icon,
     onClose,
     button,
     dataTest,
+    link,
     ...rest
 }: AlertProps) => {
     const stringFormatter = useLocalizedStringFormatter(intlMessages);
@@ -163,8 +187,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,18 +202,22 @@ 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">
                         <p className="ids-alert__title">{title}</p>
                         <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>
         );
     }

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;
             }
         }

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"