feat(GovAlta#2162): add iconsize & replace design tokens for callout

vanessatran-ddi · Oct 3, 2024 · 1ca3c3b · 1ca3c3b
1 parent 3712bee
commit 1ca3c3b
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 26 deletions.
diff --git a/libs/react-components/src/lib/callout/callout.tsx b/libs/react-components/src/lib/callout/callout.tsx
@@ -9,13 +9,15 @@ export type GoACalloutType =
 
 export type GoACalloutSize = "medium" | "large";
 export type GoACalloutAriaLive = "off" | "polite" | "assertive";
+export type GoACalloutIconSize = "small" | "medium" | "large" | "xlarge";
 
 interface WCProps extends Margins {
   heading?: string;
   type?: GoACalloutType;
   size?: GoACalloutSize;
   maxwidth?: string;
   arialive?: GoACalloutAriaLive;
+  iconsize?: GoACalloutIconSize;
   testid?: string;
 }
 
@@ -32,6 +34,7 @@ export interface GoACalloutProps extends Margins {
   heading?: string;
   type?: GoACalloutType;
   size?: GoACalloutSize;
+  iconSize?: GoACalloutIconSize;
   maxWidth?: string;
   testId?: string;
   ariaLive?: GoACalloutAriaLive;
@@ -47,6 +50,7 @@ export const GoACallout = ({
   maxWidth,
   testId,
   ariaLive = "off",
+  iconSize,
   children,
   mt,
   mr,
@@ -60,6 +64,7 @@ export const GoACallout = ({
       size={size}
       maxwidth={maxWidth}
       arialive={ariaLive}
+      iconsize={iconSize}
       mt={mt}
       mr={mr}
       mb={mb}

diff --git a/libs/web-components/src/components/callout/Callout.svelte b/libs/web-components/src/components/callout/Callout.svelte
@@ -24,10 +24,19 @@
     "polite",
   ]);
 
+  const [IconSize, validateIconSize] = typeValidator("Icon size", [
+    "",
+    "small",
+    "medium",
+    "large",
+    "xlarge"
+  ]);
+
   // Types
   type CalloutType = (typeof Types)[number];
   type CalloutSize = (typeof CalloutSizes)[number];
   type AriaLiveType = (typeof AriaLive)[number];
+  type IconSize = (typeof IconSize)[number];
 
   // margin
   export let mt: Spacing = null;
@@ -42,6 +51,7 @@
   export let testid: string = "";
   export let arialive: AriaLiveType = "off";
 
+  export let iconsize: IconSize | "" = "";
   // Private
 
   let screenSize = 0;
@@ -67,10 +77,10 @@
   onMount(() => {
     validateCalloutSize(size);
     validateAriaLive(arialive);
-
+    validateIconSize(iconsize);
     setTimeout(() => {
       validateType(type);
-      iconSize = isMediumCallout ? "small" : "medium";
+      iconSize = iconsize === "" ? (isMediumCallout ? "small" : "medium") : iconsize;
     });
   });
 </script>
@@ -83,7 +93,7 @@
     ${calculateMargin(mt, mr, mb, ml)};
     max-width: ${maxwidth};
   `}
-  class="notification"
+  class="notification {type}"
   class:medium={isMediumCallout}
   data-testid={testid}
   aria-live={arialive}
@@ -92,10 +102,9 @@
     <goa-icon
       type={iconType}
       size={iconSize}
-      inverted={type === "important" ? "false" : "true"}
     />
   </span>
-  <span class="content">
+  <span class="content {type}">
     {#if heading}
       <h3 class:medium={isMediumCallout}>{heading}</h3>
     {/if}
@@ -113,57 +122,110 @@
     display: flex;
     align-items: stretch;
     overflow: hidden;
-    font: var(--goa-typography-body-m);
+    font: var(--goa-callout-l-text-size);
+    border: var(--goa-callout-l-border-width) solid;
+    border-radius: var(--goa-callout-border-radius);
   }
 
   h3 {
-    font: var(--goa-typography-heading-m);
+    font: var(--goa-callout-l-heading-size);
     margin-top: var(--goa-space-none);
-    margin-bottom: var(--goa-space-m);
+    margin-bottom: var(--goa-callout-l-content-gap);
+  }
+
+  .icon.information {
+    background-color: var(--goa-callout-info-color-bg-statusbar);
+  }
+
+  .icon.information > * {
+    fill: var(--fill-color, var(--goa-callout-info-icon-color));
+    color: var(--fill-color, var(--goa-callout-info-icon-color));
+  }
+  .icon.important > * {
+    fill: var(--fill-color, var(--goa-callout-warning-icon-color));
+    color: var(--fill-color, var(--goa-callout-warning-icon-color));
+  }
+  .icon.success > * {
+    fill: var(--fill-color, var(--goa-callout-success-icon-color));
+    color: var(--fill-color, var(--goa-callout-success-icon-color));
+  }
+  .icon.emergency > * {
+    fill: var(--fill-color, var(--goa-callout-emergency-icon-color));
+    color: var(--fill-color, var(--goa-callout-emergency-icon-color));
+  }
+  .icon.event > * {
+    fill: var(--fill-color, var(--goa-callout-event-icon-color));
+    color: var(--fill-color, var(--goa-callout-event-icon-color));
   }
 
-  .emergency {
+  .icon.emergency {
     background-color: var(--goa-color-emergency-default);
   }
-  .important {
-    background-color: var(--goa-color-warning-default);
+  .icon.important {
+    background-color: var(--goa-callout-warning-color-bg-statusbar);
   }
-  .information {
+  .icon.information {
     background-color: var(--goa-color-info-default);
   }
-  .event {
+  .icon.event {
     background-color: var(--goa-color-info-default);
   }
-  .success {
-    background-color: var(--goa-color-success-default);
+  .icon.success {
+    background-color: var(--goa-callout-success-color-bg-statusbar);
+  }
+  .icon.emergency {
+    background-color: var(--goa-callout-emergency-color-bg-statusbar);
   }
 
   .icon {
     text-align: center;
-    padding-top: var(--goa-space-l);
-    padding-left: var(--goa-space-s);
-    padding-right: var(--goa-space-s);
+    padding: var(--goa-callout-l-statusbar-padding);
+  }
+
+  .content.information {
+    background-color: var(--goa-callout-info-color-bg-content);
+  }
+  .content.important {
+    background-color: var(--goa-callout-warning-color-bg-content);
+  }
+  .content.success {
+    background-color: var(--goa-callout-success-color-bg-content);
+  }
+  .content.emergency {
+    background-color: var(--goa-callout-emergency-color-bg-content);
   }
   .content {
     flex: 1 1 auto;
     background-color: var(--goa-color-greyscale-100);
-    padding: var(--goa-space-l);
+    padding: var(--goa-callout-l-content-padding);
+  }
+
+  .notification.information {
+    border-color: var(--goa-callout-info-border-color);
+  }
+  .notification.important {
+    border-color: var(--goa-callout-warning-border-color);
+  }
+  .notification.success {
+    border-color: var(--goa-callout-success-border-color);
+  }
+  .notification.emergency {
+    border-color: var(--goa-callout-emergency-border-color);
   }
   /*Medium callout style*/
   .notification.medium {
-    font: var(--goa-typography-body-s);
+    font: var(--goa-callout-m-text-size);
+    border-width: var(--goa-callout-m-border-width);
   }
   h3.medium {
-    font: var(--goa-typography-heading-xs);
-    margin-bottom: var(--goa-space-2xs);
+    font: var(--goa-callout-m-heading-size);
+    margin-bottom: var(--goa-callout-m-content-gap);
   }
   .notification.medium .content {
-    padding: var(--goa-space-s);
+    padding: var(--goa-callout-m-content-padding);
     margin-top: calc(-1 * var(--goa-space-3xs));
   }
   .notification.medium .icon {
-    padding-top: var(--goa-space-s);
-    padding-left: var(--goa-space-2xs);
-    padding-right: var(--goa-space-2xs);
+    padding: var(--goa-callout-m-statusbar-padding);
   }
 </style>