Merge pull request #857 from WestpacGEL/feature/update-to-alert-compo…

…nent-icon-sizes Feature/update to alert component icon sizes
WestpacGEL · Sep 6, 2024 · f3d8611 · f3d8611
2 parents b900bbc + 58b4b7d
commit f3d8611
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 9 deletions.
diff --git a/packages/ui/src/components/alert/alert.component.tsx b/packages/ui/src/components/alert/alert.component.tsx
@@ -19,6 +19,7 @@ export function Alert({
   open: isOpen = true,
   onClose,
   icon,
+  iconSize,
   tag: Tag = 'div',
   className,
   children,
@@ -37,7 +38,7 @@ export function Alert({
   // A11y: Only info look allows a custom icon
   const Icon = look === 'info' && icon ? icon : iconMap[look as Look];
 
-  const styles = alertStyles({ look, mode, dismissible });
+  const styles = alertStyles({ look, mode, dismissible, iconSize });
 
   useEffect(() => {
     setOpen(isOpen);
@@ -60,8 +61,8 @@ export function Alert({
             transition={{ duration: 0.4 }}
           >
             <Tag className={styles.base({ className })} {...props}>
-              <span className={styles.icon()}>
-                <Icon size={{ initial: 'small', xsl: 'medium' }} look="outlined" />
+              <span className={styles.icon({ hasSize: iconSize ? true : false })}>
+                <Icon size={iconSize ? iconSize : { initial: 'small', xsl: 'medium' }} look="outlined" />
               </span>
               <div className={styles.body()}>
                 {!!heading && <HeadingTag className={styles.heading()}>{heading}</HeadingTag>}

diff --git a/packages/ui/src/components/alert/alert.stories.tsx b/packages/ui/src/components/alert/alert.stories.tsx
@@ -62,27 +62,41 @@ export const Looks: Story = {
 export const TextMode: Story = {
   render: () => (
     <>
-      <h3 className="typography-body-8 mb-2 font-bold">Info</h3>
+      <h2 className="typography-body-8 mb-2 font-bold">Default</h2>
+      <h3 className="font-bold pb-2">Info</h3>
       <Alert look="info" mode="text">
         <strong>Heads up!</strong> This alert needs your attention, but it’s not super important. <a href="#">Link</a>
       </Alert>
-      <h3 className="typography-body-8 mb-2 font-bold">Success</h3>
+      <h3 className="font-bold pb-2">Success</h3>
       <Alert look="success" mode="text">
         <strong>Well done!</strong> You successfully read this important alert message. <a href="#">Link</a>
       </Alert>
-      <h3 className="typography-body-8 mb-2 font-bold">Warning</h3>
+      <h3 className="font-bold pb-2">Warning</h3>
       <Alert look="warning" mode="text">
         <strong>Warning!</strong> Better check yourself, you’re not looking too good. <a href="#">Link</a>
       </Alert>
-      <h3 className="typography-body-8 mb-2 font-bold">Danger</h3>
+      <h3 className="font-bold pb-2">Danger</h3>
       <Alert look="danger" mode="text">
         <strong>Oh snap!</strong> Change a few things up and try submitting again. <a href="#">Link</a>
       </Alert>
-      <h3 className="typography-body-8 mb-2 font-bold">System</h3>
+      <h3 className="font-bold pb-2">System</h3>
       <Alert look="system" mode="text">
         <strong>System Error 8942:</strong> The server is no responding. Please try again later. Sorry for the
         inconvenience. <a href="#">Link</a>
       </Alert>
+      <h2 className="typography-body-8 mb-2 font-bold pt-4">Custom Icon Sizes</h2>
+      <h3 className="font-bold pb-2">Medium</h3>
+      <Alert look="info" iconSize="medium" mode="text">
+        <strong>Medium</strong> This alert has a medium icon. <a href="#">Link</a>
+      </Alert>
+      <h3 className="font-bold pb-2">Small</h3>
+      <Alert look="info" iconSize="small" mode="text">
+        <strong>Small</strong> This alert has a small icon. <a href="#">Link</a>
+      </Alert>
+      <h3 className="font-bold pb-2">Extra Small</h3>
+      <Alert look="info" iconSize="xsmall" mode="text">
+        <strong>Extra Small</strong> This alert has an extra small icon. <a href="#">Link</a>
+      </Alert>
     </>
   ),
   args: {},

diff --git a/packages/ui/src/components/alert/alert.styles.ts b/packages/ui/src/components/alert/alert.styles.ts
@@ -4,7 +4,7 @@ export const styles = tv(
   {
     slots: {
       base: 'typography-body-10 relative mb-4 xsl:flex',
-      icon: 'float-left mr-1 flex-none xsl:mr-2',
+      icon: 'float-left flex-none',
       body: 'relative flex-1 overflow-hidden xsl:top-[0.125rem] [&_a]:underline',
       heading: 'typography-body-9 mb-2 font-bold',
       close: 'absolute right-0.5 top-0.5 p-1 hover:opacity-80',
@@ -38,6 +38,29 @@ export const styles = tv(
       dismissible: {
         true: '',
       },
+      hasSize: {
+        true: {},
+        false: {
+          icon: 'mr-1 xsl:mr-2',
+        },
+      },
+      iconSize: {
+        xsmall: {
+          icon: 'mr-1',
+        },
+        small: {
+          icon: 'mr-1',
+        },
+        medium: {
+          icon: 'mr-2',
+        },
+        large: {
+          icon: 'mr-2',
+        },
+        xlarge: {
+          icon: 'mr-2',
+        },
+      },
     },
     compoundSlots: [
       {

diff --git a/packages/ui/src/components/alert/alert.types.ts b/packages/ui/src/components/alert/alert.types.ts
@@ -27,6 +27,11 @@ export type AlertProps = {
    * The alert icon is automatically rendered based on look. The icon can be overriden via this prop, for info look alerts only.
    */
   icon?: React.ElementType;
+  /**
+   * The size of the alert icon.
+   * @default undefined
+   */
+  iconSize?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
   /**
    * Alert look style
    * @default info