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

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

@@ -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;

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,4 +1,4 @@
-import { Component, Element, Host, Prop, State, h } from '@stencil/core';
+import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';
 import { assignLanguage, observerConfig } from '../../utils/utils';
 import i18n from './i18n/i18n';
 
@@ -17,12 +17,33 @@ export class GcdsStepper {
   /**
    * Defines the current step.
    */
-  @Prop() currentStep!: number;
+  @Prop({ mutable: true }) currentStep!: number;
+  @Watch('currentStep')
+  validateCurrentStep() {
+    if (this.currentStep == undefined) {
+      this.currentStep = 1;
+    } else if (this.currentStep > this.totalSteps) {
+      this.currentStep = this.totalSteps;
+    }
+  }
 
   /**
    * Defines the total amount of steps.
    */
-  @Prop() totalSteps!: number;
+  @Prop({ mutable: true }) totalSteps!: number;
+  @Watch('totalSteps')
+  validateTotalSteps() {
+    if (this.totalSteps == undefined) {
+      this.totalSteps = 3;
+    } else if (this.totalSteps < this.currentStep) {
+      this.totalSteps = this.currentStep;
+    }
+  }
+
+  /**
+   * Defines the heading tag to render
+   */
+  @Prop() tag: 'h1' | 'h2' | 'h3' = 'h2';
 
   /**
    * Language of rendered component
@@ -46,20 +67,37 @@ export class GcdsStepper {
     this.lang = assignLanguage(this.el);
 
     this.updateLang();
+
+    // Validate step attributes
+    this.validateTotalSteps();
+    this.validateCurrentStep();
+  }
+
+  async componentDidLoad() {
+    // Throw error in console if no children passed for heading
+    if (this.el.innerHTML.trim() == "") {
+      console.error('The gcds-stepper requires child elements to be passed to render properly.');
+    }
   }
 
   render() {
-    const { currentStep, lang, totalSteps } = this;
+    const { currentStep, lang, totalSteps, tag } = this;
 
     return (
       <Host>
         <gcds-heading
-          tag="h6"
+          tag={tag}
           class="gcds-stepper"
           margin-top="0"
           margin-bottom="300"
         >
-          {`${i18n[lang].step} ${currentStep} ${i18n[lang].of} ${totalSteps}`}
+          <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>
     );

packages/web/src/components/gcds-stepper/readme.md

@@ -7,22 +7,25 @@
 
 ## Properties
 
-| Property                   | Attribute      | Description                        | Type     | Default     |
-| -------------------------- | -------------- | ---------------------------------- | -------- | ----------- |
-| `currentStep` _(required)_ | `current-step` | Defines the current step.          | `number` | `undefined` |
-| `totalSteps` _(required)_  | `total-steps`  | Defines the total amount of steps. | `number` | `undefined` |
+| Property                   | Attribute      | Description                        | Type                   | Default     |
+| -------------------------- | -------------- | ---------------------------------- | ---------------------- | ----------- |
+| `currentStep` _(required)_ | `current-step` | Defines the current step.          | `number`               | `undefined` |
+| `tag`                      | `tag`          | Defines the heading tag to render  | `"h1" \| "h2" \| "h3"` | `'h2'`      |
+| `totalSteps` _(required)_  | `total-steps`  | Defines the total amount of steps. | `number`               | `undefined` |
 
 
 ## Dependencies
 
 ### Depends on
 
 - [gcds-heading](../gcds-heading)
+- [gcds-sr-only](../gcds-sr-only)
 
 ### Graph
 ```mermaid
 graph TD;
   gcds-stepper --> gcds-heading
+  gcds-stepper --> gcds-sr-only
   style gcds-stepper fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

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

@@ -27,6 +27,26 @@ export default {
         required: true,
       },
     },
+    tag: {
+      control: 'select',
+      options: ['h1', 'h2', 'h3'],
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'h2' },
+      },
+    },
+
+    // Slots
+    default: {
+      control: {
+        type: 'text',
+      },
+      description:
+        'Customize the content or include additional elements. | Personnalisez le contenu ou ajoutez des éléments supplémentaires.',
+      table: {
+        category: 'Slots | Fentes',
+      },
+    },
     ...langProp,
   },
 };
@@ -36,22 +56,25 @@ const Template = args =>
 <!-- Web component code (HTML, Angular, Vue) -->
 <gcds-stepper current-step="${args.currentStep}" total-steps="${
     args.totalSteps
-  }" ${args.lang != 'en' ? `lang="${args.lang}"` : null}>
+  }" tag="${args.tag}" ${args.lang != 'en' ? `lang="${args.lang}"` : null}>
+  ${args.default}
 </gcds-stepper>
 
 <!-- React code -->
 <GcdsStepper currentStep="${args.currentStep}" totalSteps="${
     args.totalSteps
-  }" ${args.lang != 'en' ? `lang="${args.lang}"` : null}>
+  }" tag="${args.tag}" ${args.lang != 'en' ? `lang="${args.lang}"` : null}>
+  ${args.default}
 </GcdsStepper>
 `.replace(/ null/g, '');
 
 const TemplatePlayground = args => `
 <gcds-stepper
   current-step="${args.currentStep}"
   total-steps="${args.totalSteps}"
-  ${args.lang != 'en' ? `lang="${args.lang}"` : null}
->
+   tag="${args.tag}"
+  ${args.lang != 'en' ? `lang="${args.lang}"` : null}>
+  ${args.default}
 </gcds-stepper>
 `;
 
@@ -62,6 +85,41 @@ Default.args = {
   lang: 'en',
   currentStep: 1,
   totalSteps: 4,
+  tag: 'h2',
+  default: 'Section title',
+};
+
+// ------ Stepper tag: H1 ------
+
+export const tagH1 = Template.bind({});
+tagH1.args = {
+  lang: 'en',
+  currentStep: 1,
+  totalSteps: 4,
+  tag: 'h1',
+  default: 'Section title',
+};
+
+// ------ Stepper tag: H2 ------
+
+export const tagH2 = Template.bind({});
+tagH2.args = {
+  lang: 'en',
+  currentStep: 1,
+  totalSteps: 4,
+  tag: 'h2',
+  default: 'Section title',
+};
+
+// ------ Stepper tag: H3 ------
+
+export const tagH3 = Template.bind({});
+tagH3.args = {
+  lang: 'en',
+  currentStep: 1,
+  totalSteps: 4,
+  tag: 'h3',
+  default: 'Section title',
 };
 
 // ------ Stepper french ------
@@ -71,6 +129,8 @@ French.args = {
   lang: 'fr',
   currentStep: 1,
   totalSteps: 4,
+  tag: 'h2',
+  default: 'Section title',
 };
 
 // ------ Stepper events & props ------
@@ -80,6 +140,8 @@ Props.args = {
   lang: 'en',
   currentStep: 1,
   totalSteps: 4,
+  tag: 'h2',
+  default: 'Section title',
 };
 
 // ------ Stepper playground ------
@@ -89,4 +151,6 @@ Playground.args = {
   lang: 'en',
   currentStep: 1,
   totalSteps: 4,
+  tag: 'h2',
+  default: 'Section title',
 };

packages/web/src/components/gcds-stepper/stories/overview.mdx

@@ -15,6 +15,20 @@ A stepper is a progress tracker for a multi-step process.
 
 <br />
 
+### Tag
+
+#### Heading 1
+
+<Canvas of={Stepper.tagH1} story={{ inline: true }} />
+
+#### Heading 2
+
+<Canvas of={Stepper.tagH2} story={{ inline: true }} />
+
+#### Heading 3
+
+<Canvas of={Stepper.tagH3} story={{ inline: true }} />
+
 ### Language
 
 #### English