feat: updates to stepper component (breaking change + new tag attribute)

packages/angular/src/lib/stencil-generated/components.ts

@@ -23,7 +23,7 @@ export class GcdsAlert {
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['gcdsDismiss']);
+    proxyOutputs(this, ['gcdsDismiss']);
   }
 }
 
@@ -96,7 +96,7 @@ export class GcdsButton {
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['gcdsClick', 'gcdsFocus', 'gcdsBlur']);
+    proxyOutputs(this, ['gcdsClick', 'gcdsFocus', 'gcdsBlur']);
   }
 }
 
@@ -156,7 +156,7 @@ export class GcdsCheckbox {
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['gcdsClick', 'gcdsFocus', 'gcdsBlur', 'gcdsChange', 'gcdsError', 'gcdsValid']);
+    proxyOutputs(this, ['gcdsClick', 'gcdsFocus', 'gcdsBlur', 'gcdsChange', 'gcdsError', 'gcdsValid']);
   }
 }
 
@@ -250,7 +250,7 @@ export class GcdsDetails {
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['gcdsFocus', 'gcdsBlur', 'gcdsClick']);
+    proxyOutputs(this, ['gcdsFocus', 'gcdsBlur', 'gcdsClick']);
   }
 }
 
@@ -332,7 +332,7 @@ export class GcdsFieldset {
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['gcdsGroupError', 'gcdsGroupErrorClear', 'gcdsError', 'gcdsValid']);
+    proxyOutputs(this, ['gcdsGroupError', 'gcdsGroupErrorClear', 'gcdsError', 'gcdsValid']);
   }
 }
 
@@ -374,7 +374,7 @@ export class GcdsFileUploader {
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['gcdsFocus', 'gcdsBlur', 'gcdsChange', 'gcdsInput', 'gcdsRemoveFile', 'gcdsError', 'gcdsValid']);
+    proxyOutputs(this, ['gcdsFocus', 'gcdsBlur', 'gcdsChange', 'gcdsInput', 'gcdsRemoveFile', 'gcdsError', 'gcdsValid']);
   }
 }
 
@@ -582,7 +582,7 @@ export class GcdsInput {
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['gcdsFocus', 'gcdsBlur', 'gcdsInput', 'gcdsChange', 'gcdsError', 'gcdsValid']);
+    proxyOutputs(this, ['gcdsFocus', 'gcdsBlur', 'gcdsInput', 'gcdsChange', 'gcdsError', 'gcdsValid']);
   }
 }
 
@@ -675,7 +675,7 @@ export class GcdsLink {
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['gcdsFocus', 'gcdsBlur', 'gcdsClick']);
+    proxyOutputs(this, ['gcdsFocus', 'gcdsBlur', 'gcdsClick']);
   }
 }
 
@@ -713,7 +713,7 @@ export class GcdsNavGroup {
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['gcdsClick', 'gcdsFocus', 'gcdsBlur']);
+    proxyOutputs(this, ['gcdsClick', 'gcdsFocus', 'gcdsBlur']);
   }
 }
 
@@ -751,7 +751,7 @@ export class GcdsNavLink {
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['gcdsClick', 'gcdsFocus', 'gcdsBlur']);
+    proxyOutputs(this, ['gcdsClick', 'gcdsFocus', 'gcdsBlur']);
   }
 }
 
@@ -788,7 +788,7 @@ export class GcdsPagination {
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['gcdsFocus', 'gcdsBlur', 'gcdsClick']);
+    proxyOutputs(this, ['gcdsFocus', 'gcdsBlur', 'gcdsClick']);
   }
 }
 
@@ -847,7 +847,7 @@ export class GcdsRadioGroup {
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['gcdsChange', 'gcdsFocus', 'gcdsBlur']);
+    proxyOutputs(this, ['gcdsChange', 'gcdsFocus', 'gcdsBlur']);
   }
 }
 
@@ -884,7 +884,7 @@ export class GcdsSearch {
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['gcdsInput', 'gcdsChange', 'gcdsFocus', 'gcdsBlur', 'gcdsSubmit']);
+    proxyOutputs(this, ['gcdsInput', 'gcdsChange', 'gcdsFocus', 'gcdsBlur', 'gcdsSubmit']);
   }
 }
 
@@ -930,7 +930,7 @@ export class GcdsSelect {
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['gcdsChange', 'gcdsInput', 'gcdsFocus', 'gcdsBlur', 'gcdsError', 'gcdsValid']);
+    proxyOutputs(this, ['gcdsChange', 'gcdsInput', 'gcdsFocus', 'gcdsBlur', 'gcdsError', 'gcdsValid']);
   }
 }
 
@@ -1031,14 +1031,14 @@ export declare interface GcdsSrOnly extends Components.GcdsSrOnly {}
 
 
 @ProxyCmp({
-  inputs: ['currentStep', 'totalSteps']
+  inputs: ['currentStep', 'tag', 'totalSteps']
 })
 @Component({
   selector: 'gcds-stepper',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['currentStep', 'totalSteps'],
+  inputs: ['currentStep', 'tag', 'totalSteps'],
 })
 export class GcdsStepper {
   protected el: HTMLElement;
@@ -1091,7 +1091,7 @@ export class GcdsTextarea {
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['gcdsFocus', 'gcdsBlur', 'gcdsChange', 'gcdsInput', 'gcdsError', 'gcdsValid']);
+    proxyOutputs(this, ['gcdsFocus', 'gcdsBlur', 'gcdsChange', 'gcdsInput', 'gcdsError', 'gcdsValid']);
   }
 }
 

packages/vue/lib/components.ts

@@ -381,7 +381,8 @@ export const GcdsSrOnly = /*@__PURE__*/ defineContainer<JSX.GcdsSrOnly>('gcds-sr
 
 export const GcdsStepper = /*@__PURE__*/ defineContainer<JSX.GcdsStepper>('gcds-stepper', undefined, [
   'currentStep',
-  'totalSteps'
+  'totalSteps',
+  'tag'
 ]);
 
 

packages/web/package.json

@@ -45,7 +45,7 @@
     "@babel/core": "^7.20.12",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.21.0",
-    "@cdssnc/gcds-tokens": "^1.13.2",
+    "@cdssnc/gcds-tokens": "^1.13.4",
     "@fortawesome/fontawesome-free": "^6.3.0",
     "@stencil/angular-output-target": "file:../../utils/angular-output-target",
     "@stencil/postcss": "^2.1.0",

packages/web/src/components.d.ts

@@ -969,6 +969,10 @@ export namespace Components {
           * Defines the current step.
          */
         "currentStep": number;
+        /**
+          * Defines the heading tag to render
+         */
+        "tag": 'h1' | 'h2' | 'h3';
         /**
           * Defines the total amount of steps.
          */
@@ -2842,6 +2846,10 @@ declare namespace LocalJSX {
           * Defines the current step.
          */
         "currentStep": number;
+        /**
+          * Defines the heading tag to render
+         */
+        "tag"?: 'h1' | 'h2' | 'h3';
         /**
           * Defines the total amount of steps.
          */

packages/web/src/components/gcds-sr-only/readme.md

@@ -21,6 +21,7 @@
  - [gcds-footer](../gcds-footer)
  - [gcds-lang-toggle](../gcds-lang-toggle)
  - [gcds-search](../gcds-search)
+ - [gcds-stepper](../gcds-stepper)
  - [gcds-topic-menu](../gcds-topic-menu)
 
 ### Graph
@@ -31,6 +32,7 @@ graph TD;
   gcds-footer --> gcds-sr-only
   gcds-lang-toggle --> gcds-sr-only
   gcds-search --> gcds-sr-only
+  gcds-stepper --> gcds-sr-only
   gcds-topic-menu --> gcds-sr-only
   style gcds-sr-only fill:#f9f,stroke:#333,stroke-width:4px
 ```

packages/web/src/components/gcds-stepper/gcds-stepper.css

@@ -7,7 +7,14 @@
 }
 
 @layer default {
-  :host .gcds-stepper {
-    color: var(--gcds-stepper-text);
+  :host .gcds-stepper .gcds-stepper__steps {
+    font: var(--gcds-stepper-font-desktop);
+    display: block;
+    margin: var(--gcds-stepper-margin-desktop);
+
+    @media only screen and (width < 48em) {
+      font: var(--gcds-stepper-font-mobile);
+      margin: var(--gcds-stepper-margin-mobile);
+    }
   }
 }

packages/web/src/components/gcds-stepper/gcds-stepper.tsx

@@ -1,5 +1,5 @@
-import { Component, Element, Host, Prop, State, h } from '@stencil/core';
-import { assignLanguage, observerConfig } from '../../utils/utils';
+import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';
+import { assignLanguage, observerConfig, logError } from '../../utils/utils';
 import i18n from './i18n/i18n';
 
 @Component({
@@ -17,12 +17,47 @@ export class GcdsStepper {
   /**
    * Defines the current step.
    */
-  @Prop() currentStep!: number;
+  @Prop({ mutable: true }) currentStep!: number;
+  @Watch('currentStep')
+  validateCurrentStep() {
+    if (
+      this.currentStep <= 0 ||
+      isNaN(this.currentStep) ||
+      this.currentStep > this.totalSteps
+    ) {
+      this.errors.push('currentStep');
+    } else if (this.errors.includes('currentStep')) {
+      this.errors.splice(this.errors.indexOf('currentStep'), 1);
+    }
+  }
 
   /**
    * Defines the total amount of steps.
    */
-  @Prop() totalSteps!: number;
+  @Prop({ mutable: true }) totalSteps!: number;
+  @Watch('totalSteps')
+  validateTotalSteps() {
+    if (
+      this.totalSteps <= 0 ||
+      isNaN(this.totalSteps) ||
+      this.totalSteps < this.currentStep
+    ) {
+      this.errors.push('totalSteps');
+    } else if (this.errors.includes('totalSteps')) {
+      this.errors.splice(this.errors.indexOf('totalSteps'), 1);
+    }
+  }
+
+  /**
+   * Defines the heading tag to render
+   */
+  @Prop() tag: 'h1' | 'h2' | 'h3' = 'h2';
+
+  /**
+   * State to track validation on properties
+   * Contains a list of properties that have an error associated with them
+   */
+  @State() errors: Array<string> = [];
 
   /**
    * Language of rendered component
@@ -41,26 +76,63 @@ export class GcdsStepper {
     observer.observe(this.el, observerConfig);
   }
 
+  private validateChildren() {
+    if (this.el.innerHTML.trim() == '') {
+      this.errors.push('children');
+    } else if (this.errors.includes('children')) {
+      this.errors.splice(this.errors.indexOf('children'), 1);
+    }
+  }
+
+  private validateRequiredProps() {
+    this.validateCurrentStep();
+    this.validateTotalSteps();
+    this.validateChildren();
+
+    if (
+      this.errors.includes('totalSteps') ||
+      this.errors.includes('currentStep') ||
+      this.errors.includes('children')
+    ) {
+      return false;
+    }
+    return true;
+  }
+
   async componentWillLoad() {
     // Define lang attribute
     this.lang = assignLanguage(this.el);
 
     this.updateLang();
+
+    let valid = this.validateRequiredProps();
+
+    if (!valid) {
+      logError('gcds-stepper', this.errors);
+    }
   }
 
   render() {
-    const { currentStep, lang, totalSteps } = this;
+    const { currentStep, lang, totalSteps, tag } = this;
 
     return (
       <Host>
-        <gcds-heading
-          tag="h6"
-          class="gcds-stepper"
-          margin-top="0"
-          margin-bottom="300"
-        >
-          {`${i18n[lang].step} ${currentStep} ${i18n[lang].of} ${totalSteps}`}
-        </gcds-heading>
+        {this.validateRequiredProps() && (
+          <gcds-heading
+            tag={tag}
+            class="gcds-stepper"
+            margin-top="0"
+            margin-bottom="300"
+          >
+            <span class="gcds-stepper__steps">
+              {`${i18n[lang].step} ${currentStep} ${i18n[lang].of} ${totalSteps}`}
+
+              {/* Hidden colon to provide pause between caption and heading text for AT */}
+              <gcds-sr-only> : </gcds-sr-only>
+            </span>
+            <slot></slot>
+          </gcds-heading>
+        )}
       </Host>
     );
   }