feat(banner): refactor to use design tokens and updated patterns (#464)

src/dev/pages/banner/banner.html

@@ -7,20 +7,23 @@
       {
         type: 'select',
         label: 'Theme',
-        id: 'theme-select',
+        defaultValue: 'info',
+        id: 'opt-theme',
         options: [
-          { label: 'Default (none)', value: '' },
-          { label: 'Danger', value: 'danger' },
-          { label: 'Warning', value: 'warning' },
+          { label: 'Primary', value: 'primary' },
+          { label: 'Secondary', value: 'secondary' },
+          { label: 'Tertiary', value: 'tertiary' },
           { label: 'Success', value: 'success' },
-          { label: 'Info (Primary)', value: 'info-primary' },
-          { label: 'Info (Secondary)', value: 'info-secondary' },
+          { label: 'Error', value: 'error' },
+          { label: 'Warning', value: 'warning' },
+          { label: 'Info (default)', value: 'info' },
+          { label: 'Info Secondary', value: 'info-secondary' },
         ]
       },
-      { type: 'switch', label: 'Dismissed', id: 'dismissed-toggle' },
-      { type: 'switch', label: 'Show leading icon', id: 'show-leading-icon-toggle', defaultValue: true },
-      { type: 'switch', label: 'Show dismiss', id: 'show-dismiss-toggle', defaultValue: true },
-      { type: 'switch', label: 'Use more text', id: 'use-more-text-toggle' },
+      { type: 'switch', label: 'Dismissed', id: 'opt-dismissed' },
+      { type: 'switch', label: 'Persistent', id: 'opt-persistent' },
+      { type: 'switch', label: 'Show icon', id: 'opt-show-icon', defaultValue: true },
+      { type: 'switch', label: 'Use more text', id: 'opt-more-text' },
     ]
   }
 })

src/dev/pages/banner/banner.ts

@@ -3,7 +3,7 @@ import { IconRegistry } from '@tylertech/forge/icon';
 import '@tylertech/forge/banner';
 import '@tylertech/forge/button';
 import { tylIconAddAlert } from '@tylertech/tyler-icons/standard';
-import type { IBannerComponent, ISelectComponent, ISwitchComponent } from '@tylertech/forge';
+import { BANNER_CONSTANTS, IBannerComponent, ISelectComponent, ISwitchComponent } from '@tylertech/forge';
 
 IconRegistry.define([
   tylIconAddAlert
@@ -13,31 +13,30 @@ const banner = document.querySelector('#banner') as IBannerComponent;
 const leadingIcon = document.querySelector('#leading-icon') as HTMLElement;
 const textEl = document.querySelector('#text') as HTMLElement;
 
-const themeSelect = document.querySelector('#theme-select') as ISelectComponent;
-themeSelect.addEventListener('change', ({ detail: theme }) => {
-  if (theme) {
-    banner.setAttribute('theme', theme);
-  } else {
-    banner.removeAttribute('theme');
-  }
+banner.addEventListener(BANNER_CONSTANTS.events.DISMISSED, evt => {
+  console.log(evt);
+  dismissedToggle.on = true;
 });
 
-const dismissToggle = document.querySelector('#dismissed-toggle') as ISwitchComponent;
-dismissToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
-  banner.dismissed = selected;
-});
+const themeSelect = document.querySelector('#opt-theme') as ISelectComponent;
+themeSelect.addEventListener('change', ({ detail: theme }) => banner.theme = theme);
 
-const showLeadingIconToggle = document.querySelector('#show-leading-icon-toggle') as ISwitchComponent;
-showLeadingIconToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
-  leadingIcon.style.display = selected ? 'block' : 'none';
-});
+const dismissedToggle = document.querySelector('#opt-dismissed') as ISwitchComponent;
+dismissedToggle.addEventListener('forge-switch-change', ({ detail: selected }) => banner.dismissed = selected);
 
-const showDismissToggle = document.querySelector('#show-dismiss-toggle') as ISwitchComponent;
-showDismissToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
-  banner.canDismiss = selected;
+const showIconToggle = document.querySelector('#opt-show-icon') as ISwitchComponent;
+showIconToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
+  if (selected) {
+    banner.appendChild(leadingIcon);
+  } else {
+    leadingIcon.remove();
+  }
 });
 
-const useMoreTextToggle = document.querySelector('#use-more-text-toggle') as ISwitchComponent;
+const persistentToggle = document.querySelector('#opt-persistent') as ISwitchComponent;
+persistentToggle.addEventListener('forge-switch-change', ({ detail: selected }) => banner.persistent = selected);
+
+const useMoreTextToggle = document.querySelector('#opt-more-text') as ISwitchComponent;
 useMoreTextToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   textEl.textContent = selected ?
     'Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit explicabo labore soluta ex culpa, consectetur possimus quidem ullam voluptas est facilis quasi enim error doloribus omnis recusandae! Dolore, eaque ipsa!' :

src/lib/badge/badge.test.ts

@@ -5,7 +5,7 @@ import { BadgeTheme, BADGE_CONSTANTS } from './badge-constants';
 
 import './badge';
 
-describe('Inline Message', () => {
+describe('Badge', () => {
   it('should contain shadow root', async () => {
     const el = await fixture(html`<forge-badge>Test</forge-badge>`);
     expect(el.shadowRoot).not.to.be.null;

src/lib/banner/_core.scss

@@ -0,0 +1,48 @@
+@use './token-utils' as *;
+
+@forward './token-utils';
+
+@mixin host {
+  display: block;
+  container-type: inline-size;
+}
+
+@mixin base {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  overflow: hidden;
+  box-sizing: border-box;
+
+  transition-property: opacity, grid-template-rows, min-height;
+  transition-duration: #{token(transition-duration)};
+  transition-timing-function: #{token(transition-easing)};
+
+  background: #{token(background)};
+  color: #{token(color)};
+
+  opacity: 1;
+}
+
+@mixin inner {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  place-items: center;
+  gap: #{token(gap)};
+  overflow: hidden;
+  padding-inline: #{token(padding-inline)};
+}
+
+@mixin container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: #{token(gap)};
+  flex: 1 1 auto;
+  padding-block: #{token(padding-block)};
+}
+
+@mixin dismissed {
+  grid-template-rows: 0fr;
+  opacity: 0;
+}