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

vanessatran-ddi · Oct 22, 2024 · 28b1de2 · 28b1de2
1 parent 1fe5cf1
commit 28b1de2
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 24 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 GoACalloutIconTheme = "outline" | "filled";
 
 interface WCProps extends Margins {
   heading?: string;
   type?: GoACalloutType;
   size?: GoACalloutSize;
   maxwidth?: string;
   arialive?: GoACalloutAriaLive;
+  icontheme?: GoACalloutIconTheme;
   testid?: string;
 }
 
@@ -32,6 +34,7 @@ export interface GoACalloutProps extends Margins {
   heading?: string;
   type?: GoACalloutType;
   size?: GoACalloutSize;
+  iconTheme?: GoACalloutIconTheme;
   maxWidth?: string;
   testId?: string;
   ariaLive?: GoACalloutAriaLive;
@@ -43,6 +46,7 @@ export type CalloutProps = GoACalloutProps;
 export const GoACallout = ({
   heading,
   type = "information",
+  iconTheme = "outline",
   size = "large",
   maxWidth,
   testId,
@@ -60,6 +64,7 @@ export const GoACallout = ({
       size={size}
       maxwidth={maxWidth}
       arialive={ariaLive}
+      icontheme={iconTheme}
       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
@@ -6,6 +6,7 @@
   import { onMount } from "svelte";
   import { typeValidator } from "../../common/utils";
   import { MOBILE_BP } from "../../common/breakpoints";
+  import type { IconTheme } from "../icon/Icon.svelte";
 
   // Validators
 
@@ -41,6 +42,7 @@
   export let maxwidth: string = "none";
   export let testid: string = "";
   export let arialive: AriaLiveType = "off";
+  export let icontheme: IconTheme = "outline";
 
   // Private
 
@@ -83,7 +85,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 +94,10 @@
     <goa-icon
       type={iconType}
       size={iconSize}
-      inverted={type === "important" ? "false" : "true"}
+      theme={icontheme}
     />
   </span>
-  <span class="content">
+  <span class="content {type}">
     {#if heading}
       <h3 class:medium={isMediumCallout}>{heading}</h3>
     {/if}
@@ -113,57 +115,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);
   }
 
-  .emergency {
+  .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));
+  }
+
+  .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>