feat: New gcds-notice component (#627)

* First commit: new gcds-notice component * gcds-notice stories * gcds-notice spec and e2e tests * fix CSS + format index.html * Storybook fixes + upodate notice to use section * Update to new tokens package version * PR feedback: Notice formatting + clean up * Remove unused line of CSS * Add missing lang attribute in storybook * PR feedback: fix typos * First version of icon notice * Update notice component to use icon instead of text label * Update spec unit tests * Update icon selection method * Update tokens package * PR feedback * Add new notice-title-tag property * Fix notice-title-tag comment * Add invalid tag value test * Modify internal heading margin-top to new spacing token value * fix: notice heading spacing * Update tokens package version
cds-snc · Dec 11, 2024 · bb98233 · bb98233
1 parent 9ea1447
commit bb98233
Show file tree

Hide file tree

Showing 16 changed files with 1,071 additions and 1 deletion.
diff --git a/packages/angular/src/lib/stencil-generated/components.ts b/packages/angular/src/lib/stencil-generated/components.ts
@@ -837,6 +837,28 @@ export declare interface GcdsNavLink extends Components.GcdsNavLink {
 }
 
 
+@ProxyCmp({
+  inputs: ['noticeTitle', 'noticeTitleTag', 'type']
+})
+@Component({
+  selector: 'gcds-notice',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['noticeTitle', 'noticeTitleTag', 'type'],
+})
+export class GcdsNotice {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface GcdsNotice extends Components.GcdsNotice {}
+
+
 @ProxyCmp({
   inputs: ['currentPage', 'display', 'label', 'nextHref', 'nextLabel', 'previousHref', 'previousLabel', 'totalPages', 'url'],
   outputs: ['gcdsFocus', 'gcdsBlur', 'gcdsClick']

diff --git a/packages/angular/src/lib/stencil-generated/index.ts b/packages/angular/src/lib/stencil-generated/index.ts
@@ -29,6 +29,7 @@ export const DIRECTIVES = [
   d.GcdsLink,
   d.GcdsNavGroup,
   d.GcdsNavLink,
+  d.GcdsNotice,
   d.GcdsPagination,
   d.GcdsPhaseBanner,
   d.GcdsRadioGroup,

diff --git a/packages/react/src/components/stencil-generated/index.ts b/packages/react/src/components/stencil-generated/index.ts
@@ -35,6 +35,7 @@ export const GcdsLangToggle = /*@__PURE__*/createReactComponent<JSX.GcdsLangTogg
 export const GcdsLink = /*@__PURE__*/createReactComponent<JSX.GcdsLink, HTMLGcdsLinkElement>('gcds-link');
 export const GcdsNavGroup = /*@__PURE__*/createReactComponent<JSX.GcdsNavGroup, HTMLGcdsNavGroupElement>('gcds-nav-group');
 export const GcdsNavLink = /*@__PURE__*/createReactComponent<JSX.GcdsNavLink, HTMLGcdsNavLinkElement>('gcds-nav-link');
+export const GcdsNotice = /*@__PURE__*/createReactComponent<JSX.GcdsNotice, HTMLGcdsNoticeElement>('gcds-notice');
 export const GcdsPagination = /*@__PURE__*/createReactComponent<JSX.GcdsPagination, HTMLGcdsPaginationElement>('gcds-pagination');
 export const GcdsPhaseBanner = /*@__PURE__*/createReactComponent<JSX.GcdsPhaseBanner, HTMLGcdsPhaseBannerElement>('gcds-phase-banner');
 export const GcdsRadioGroup = /*@__PURE__*/createReactComponent<JSX.GcdsRadioGroup, HTMLGcdsRadioGroupElement>('gcds-radio-group');

diff --git a/packages/vue/lib/components.ts b/packages/vue/lib/components.ts
@@ -318,6 +318,13 @@ export const GcdsNavLink = /*@__PURE__*/ defineContainer<JSX.GcdsNavLink>('gcds-
 ]);
 
 
+export const GcdsNotice = /*@__PURE__*/ defineContainer<JSX.GcdsNotice>('gcds-notice', undefined, [
+  'type',
+  'noticeTitle',
+  'noticeTitleTag'
+]);
+
+
 export const GcdsPagination = /*@__PURE__*/ defineContainer<JSX.GcdsPagination>('gcds-pagination', undefined, [
   'display',
   'label',

diff --git a/packages/web/src/components.d.ts b/packages/web/src/components.d.ts
@@ -752,6 +752,20 @@ export namespace Components {
          */
         "href": string;
     }
+    interface GcdsNotice {
+        /**
+          * Set the notice title.
+         */
+        "noticeTitle": string;
+        /**
+          * Set notice title heading tag.
+         */
+        "noticeTitleTag": 'h2' | 'h3' | 'h4' | 'h5';
+        /**
+          * Set notice type.
+         */
+        "type": 'danger' | 'info' | 'success' | 'warning';
+    }
     interface GcdsPagination {
         /**
           * List display - Current page number
@@ -1484,6 +1498,12 @@ declare global {
         prototype: HTMLGcdsNavLinkElement;
         new (): HTMLGcdsNavLinkElement;
     };
+    interface HTMLGcdsNoticeElement extends Components.GcdsNotice, HTMLStencilElement {
+    }
+    var HTMLGcdsNoticeElement: {
+        prototype: HTMLGcdsNoticeElement;
+        new (): HTMLGcdsNoticeElement;
+    };
     interface HTMLGcdsPaginationElementEventMap {
         "gcdsFocus": void;
         "gcdsBlur": void;
@@ -1669,6 +1689,7 @@ declare global {
         "gcds-link": HTMLGcdsLinkElement;
         "gcds-nav-group": HTMLGcdsNavGroupElement;
         "gcds-nav-link": HTMLGcdsNavLinkElement;
+        "gcds-notice": HTMLGcdsNoticeElement;
         "gcds-pagination": HTMLGcdsPaginationElement;
         "gcds-phase-banner": HTMLGcdsPhaseBannerElement;
         "gcds-radio-group": HTMLGcdsRadioGroupElement;
@@ -2580,6 +2601,20 @@ declare namespace LocalJSX {
          */
         "onGcdsFocus"?: (event: GcdsNavLinkCustomEvent<void>) => void;
     }
+    interface GcdsNotice {
+        /**
+          * Set the notice title.
+         */
+        "noticeTitle": string;
+        /**
+          * Set notice title heading tag.
+         */
+        "noticeTitleTag": 'h2' | 'h3' | 'h4' | 'h5';
+        /**
+          * Set notice type.
+         */
+        "type": 'danger' | 'info' | 'success' | 'warning';
+    }
     interface GcdsPagination {
         /**
           * List display - Current page number
@@ -3004,6 +3039,7 @@ declare namespace LocalJSX {
         "gcds-link": GcdsLink;
         "gcds-nav-group": GcdsNavGroup;
         "gcds-nav-link": GcdsNavLink;
+        "gcds-notice": GcdsNotice;
         "gcds-pagination": GcdsPagination;
         "gcds-phase-banner": GcdsPhaseBanner;
         "gcds-radio-group": GcdsRadioGroup;
@@ -3051,6 +3087,7 @@ declare module "@stencil/core" {
             "gcds-link": LocalJSX.GcdsLink & JSXBase.HTMLAttributes<HTMLGcdsLinkElement>;
             "gcds-nav-group": LocalJSX.GcdsNavGroup & JSXBase.HTMLAttributes<HTMLGcdsNavGroupElement>;
             "gcds-nav-link": LocalJSX.GcdsNavLink & JSXBase.HTMLAttributes<HTMLGcdsNavLinkElement>;
+            "gcds-notice": LocalJSX.GcdsNotice & JSXBase.HTMLAttributes<HTMLGcdsNoticeElement>;
             "gcds-pagination": LocalJSX.GcdsPagination & JSXBase.HTMLAttributes<HTMLGcdsPaginationElement>;
             "gcds-phase-banner": LocalJSX.GcdsPhaseBanner & JSXBase.HTMLAttributes<HTMLGcdsPhaseBannerElement>;
             "gcds-radio-group": LocalJSX.GcdsRadioGroup & JSXBase.HTMLAttributes<HTMLGcdsRadioGroupElement>;

diff --git a/packages/web/src/components/gcds-heading/readme.md b/packages/web/src/components/gcds-heading/readme.md
@@ -20,12 +20,14 @@
 ### Used by
 
  - [gcds-error-summary](../gcds-error-summary)
+ - [gcds-notice](../gcds-notice)
  - [gcds-stepper](../gcds-stepper)
 
 ### Graph
 ```mermaid
 graph TD;
   gcds-error-summary --> gcds-heading
+  gcds-notice --> gcds-heading
   gcds-stepper --> gcds-heading
   style gcds-heading fill:#f9f,stroke:#333,stroke-width:4px
 ```

diff --git a/packages/web/src/components/gcds-icon/readme.md b/packages/web/src/components/gcds-icon/readme.md
@@ -28,6 +28,7 @@
  - [gcds-file-uploader](../gcds-file-uploader)
  - [gcds-link](../gcds-link)
  - [gcds-nav-group](../gcds-nav-group)
+ - [gcds-notice](../gcds-notice)
  - [gcds-pagination](../gcds-pagination)
  - [gcds-search](../gcds-search)
  - [gcds-topic-menu](../gcds-topic-menu)
@@ -41,6 +42,7 @@ graph TD;
   gcds-file-uploader --> gcds-icon
   gcds-link --> gcds-icon
   gcds-nav-group --> gcds-icon
+  gcds-notice --> gcds-icon
   gcds-pagination --> gcds-icon
   gcds-search --> gcds-icon
   gcds-topic-menu --> gcds-icon

diff --git a/packages/web/src/components/gcds-notice/gcds-notice.css b/packages/web/src/components/gcds-notice/gcds-notice.css
@@ -0,0 +1,110 @@
+@layer reset, default, type;
+
+@layer reset {
+  :host {
+    display: block;
+
+    .gcds-notice {
+      text-align: left;
+      box-sizing: border-box;
+
+      slot {
+        display: initial;
+      }
+    }
+  }
+}
+
+@layer default {
+  :host .gcds-notice {
+    color: var(--gcds-notice-text);
+    display: grid;
+    grid-template-columns: var(--gcds-notice-icon-width) auto;
+    gap: var(--gcds-notice-icon-gap);
+
+    .notice__heading {
+      --gcds-heading-h2-desktop: var(
+        --gcds-notice-content-heading-font-desktop
+      );
+      --gcds-heading-h2-mobile: var(--gcds-notice-content-heading-font-mobile);
+      --gcds-heading-h4-desktop: var(
+        --gcds-notice-content-heading-font-desktop
+      );
+      --gcds-heading-h4-mobile: var(--gcds-notice-content-heading-font-mobile);
+      --gcds-heading-h5-desktop: var(
+        --gcds-notice-content-heading-font-desktop
+      );
+      --gcds-heading-h5-mobile: var(--gcds-notice-content-heading-font-mobile);
+      margin-block-start: var(--gcds-notice-content-heading-margin-block-start-desktop);
+
+      @media only screen and (width < 48em) {
+        margin-block-start: var(--gcds-notice-content-heading-margin-block-start-mobile);
+      }
+    }
+
+    .notice__icon {
+      margin: var(--gcds-notice-icon-margin);
+
+      &:before {
+        display: block;
+        width: var(--gcds-notice-border-width);
+        margin: 0 auto;
+        height: var(--gcds-notice-icon-before-height);
+        content: '';
+        background-color: currentColor;
+      }
+
+      &:after {
+        display: block;
+        width: var(--gcds-notice-border-width);
+        margin: 0 auto;
+        height: var(--gcds-notice-icon-after-height);
+        content: '';
+        background-color: currentColor;
+      }
+    }
+
+    ::slotted(*) {
+      margin-block-start: 0;
+      font: var(--gcds-notice-content-slotted-font-desktop);
+
+      @media only screen and (width < 48em) {
+        font: var(--gcds-notice-content-slotted-font-mobile);
+      }
+    }
+
+    ::slotted(*:last-child) {
+      margin-block-end: 0;
+    }
+
+    ::slotted(*:not(:last-child)) {
+      margin-block-end: var(--gcds-notice-content-slotted-margin);
+    }
+
+    ::slotted(ol),
+    ::slotted(ul) {
+      margin-inline-start: var(--gcds-notice-content-slotted-list-margin);
+      padding: 0;
+    }
+  }
+}
+
+@layer type {
+  :host .gcds-notice {
+    &.notice--type-danger .notice__icon {
+      color: var(--gcds-notice-danger-text);
+    }
+
+    &.notice--type-info .notice__icon {
+      color: var(--gcds-notice-info-text);
+    }
+
+    &.notice--type-success .notice__icon {
+      color: var(--gcds-notice-success-text);
+    }
+
+    &.notice--type-warning .notice__icon {
+      color: var(--gcds-notice-warning-text);
+    }
+  }
+}