feat(#2915): callout v2 layout and emphasis levels

Author: bdfranck

libs/web-components/src/components/callout/Callout.svelte

@@ -19,16 +19,23 @@
     "medium",
     "large",
   ]);
+  const [CalloutEmphasis, validateCalloutEmphasis] = typeValidator(
+    "Callout emphasis",
+    ["high", "medium", "low"],
+  );
   const [AriaLive, validateAriaLive] = typeValidator("Aria live", [
     "off",
     "assertive",
     "polite",
   ]);
+  const [Version, validateVersion] = typeValidator("Version", ["1", "2"]);
 
   // Types
   type CalloutType = (typeof Types)[number];
   type CalloutSize = (typeof CalloutSizes)[number];
+  type CalloutEmphasisType = (typeof CalloutEmphasis)[number];
   type AriaLiveType = (typeof AriaLive)[number];
+  type VersionType = (typeof Version)[number];
 
   // margin
   export let mt: Spacing = null;
@@ -38,11 +45,13 @@
 
   export let size: CalloutSize = "large";
   export let type: CalloutType;
+  export let emphasis: CalloutEmphasisType = "medium";
   export let heading: string = "";
   export let maxwidth: string = "none";
   export let testid: string = "";
   export let arialive: AriaLiveType = "off";
   export let icontheme: IconTheme = "outline";
+  export let version: VersionType = "1";
 
   // Private
 
@@ -68,7 +77,9 @@
 
   onMount(() => {
     validateCalloutSize(size);
+    validateCalloutEmphasis(emphasis);
     validateAriaLive(arialive);
+    validateVersion(version);
 
     setTimeout(() => {
       validateType(type);
@@ -85,24 +96,35 @@
     ${calculateMargin(mt, mr, mb, ml)};
     max-width: ${maxwidth};
   `}
-  class="notification {type}"
+  class="notification {type} emphasis-{emphasis}"
   class:medium={isMediumCallout}
+  class:v2={version === "2"}
   data-testid={testid}
   aria-live={arialive}
 >
-  <span class="icon {type}">
-    <goa-icon
-      type={iconType}
-      size={iconSize}
-      theme={icontheme}
-    />
-  </span>
-  <span class="content {type}">
-    {#if heading}
-      <h3 class:medium={isMediumCallout}>{heading}</h3>
-    {/if}
-    <slot />
-  </span>
+  {#if version === "2"}
+    <div class="heading">
+      <goa-icon
+        type={iconType}
+        size={iconSize}
+        theme={emphasis === "high" ? "outline" : "filled"}
+      />
+      <h3 class="heading-label">{heading}</h3>
+    </div>
+    <div class="body">
+      <slot />
+    </div>
+  {:else}
+    <span class="icon {type}">
+      <goa-icon type={iconType} size={iconSize} theme={icontheme} />
+    </span>
+    <span class="content {type}">
+      {#if heading}
+        <h3 class:medium={isMediumCallout}>{heading}</h3>
+      {/if}
+      <slot />
+    </span>
+  {/if}
 </div>
 
 <!-- Style -->
@@ -221,4 +243,159 @@
   .notification.medium .icon {
     padding: var(--goa-callout-m-statusbar-padding);
   }
+
+  /* Version two: Layout */
+
+  .v2.notification {
+    flex-direction: column;
+    border: var(--goa-callout-border);
+  }
+
+  .v2.notification .heading {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: var(--goa-callout-heading-padding);
+    gap: var(--goa-callout-heading-gap);
+    color: var(--goa-callout-heading-color);
+  }
+
+  .v2.notification .heading-label {
+    margin-bottom: 0;
+    font: var(--goa-callout-heading-typography);
+  }
+
+  .v2.notification .body {
+    padding: var(--goa-callout-body-padding);
+    color: var(--goa-callout-body-color);
+    font: var(--goa-callout-body-typography);
+  }
+
+  /* Version two: Low emphasis layout */
+
+  .v2.emphasis-low .body {
+    padding: var(--goa-callout-l-with-heading-body-padding);
+  }
+
+  .v2.emphasis-low:has(.heading-label:empty) {
+    flex-direction: row;
+    align-items: start;
+  }
+
+  .v2.emphasis-low .heading-label:empty {
+    display: none;
+  }
+
+  .v2.emphasis-low:has(.heading-label:empty) .body {
+    padding: var(--goa-callout-l-without-heading-body-padding);
+  }
+
+  .v2.information {
+    background-color: var(--goa-callout-info-content-bg-color);
+  }
+
+  /* Version two: Types */
+
+  .v2.information .heading {
+    background-color: var(--goa-callout-info-heading-bg-color);
+    --fill-color: var(--goa-callout-info-icon-color);
+  }
+
+  .v2.information.emphasis-low {
+    border-color: var(--goa-callout-l-info-border-color);
+    background-color: var(--goa-callout-l-info-content-bg-color);
+  }
+
+  .v2.information.emphasis-high {
+    border-color: var(--goa-callout-h-info-border-color);
+    background-color: var(--goa-callout-h-info-content-bg-color);
+  }
+
+  .v2.information.emphasis-high .heading {
+    background-color: var(--goa-callout-h-info-heading-bg-color);
+    color: var(--goa-callout-h-info-heading-color);
+    --fill-color: var(--goa-callout-h-info-icon-color);
+  }
+
+  .v2.emergency {
+    background-color: var(--goa-callout-emergency-content-bg-color);
+  }
+
+  .v2.emergency .heading {
+    background-color: var(--goa-callout-emergency-heading-bg-color);
+    --fill-color: var(--goa-callout-emergency-icon-color);
+  }
+
+  .v2.emergency.emphasis-low {
+    border-color: var(--goa-callout-l-emergency-border-color);
+    background-color: var(--goa-callout-l-emergency-content-bg-color);
+  }
+
+  .v2.emergency.emphasis-high {
+    border-color: var(--goa-callout-h-emergency-border-color);
+    background-color: var(--goa-callout-h-emergency-content-bg-color);
+  }
+
+  .v2.emergency.emphasis-high .heading {
+    background-color: var(--goa-callout-h-emergency-heading-bg-color);
+    color: var(--goa-callout-h-emergency-heading-color);
+    --fill-color: var(--goa-callout-h-emergency-icon-color);
+  }
+
+  .v2.important {
+    background-color: var(--goa-callout-important-content-bg-color);
+  }
+
+  .v2.important .heading {
+    background-color: var(--goa-callout-important-heading-bg-color);
+    --fill-color: var(--goa-callout-important-icon-color);
+  }
+
+  .v2.important.emphasis-low {
+    border-color: var(--goa-callout-l-important-border-color);
+    background-color: var(--goa-callout-l-important-content-bg-color);
+  }
+
+  .v2.important.emphasis-high {
+    border-color: var(--goa-callout-h-important-border-color);
+    background-color: var(--goa-callout-h-important-content-bg-color);
+  }
+
+  .v2.important.emphasis-high .heading {
+    background-color: var(--goa-callout-h-important-heading-bg-color);
+    color: var(--goa-callout-h-important-heading-color);
+    --fill-color: var(--goa-callout-h-important-icon-color);
+  }
+
+  .v2.success {
+    background-color: var(--goa-callout-success-content-bg-color);
+  }
+
+  .v2.success .heading {
+    background-color: var(--goa-callout-success-heading-bg-color);
+    --fill-color: var(--goa-callout-success-icon-color);
+  }
+
+  .v2.success.emphasis-low {
+    border-color: var(--goa-callout-l-success-border-color);
+    background-color: var(--goa-callout-l-success-content-bg-color);
+  }
+
+  .v2.success.emphasis-high {
+    border-color: var(--goa-callout-h-success-border-color);
+    background-color: var(--goa-callout-h-success-content-bg-color);
+  }
+
+  .v2.success.emphasis-high .heading {
+    background-color: var(--goa-callout-h-success-heading-bg-color);
+    color: var(--goa-callout-h-success-heading-color);
+    --fill-color: var(--goa-callout-h-success-icon-color);
+  }
+
+  .v2.information.emphasis-low .heading,
+  .v2.important.emphasis-low .heading,
+  .v2.emergency.emphasis-low .heading,
+  .v2.success.v2.emphasis-low .heading {
+    background-color: transparent;
+  }
 </style>