Release v 0.16.0 (#328)

* chore: synced file(s) with cds-snc/site-reliability-engineering (#323) chore: synced local '.github/workflows/backstage-catalog-helper.yml' with remote 'tools/sre_file_sync/backstage-catalog-helper.yml' Co-authored-by: sre-read-write[bot] <92993749+sre-read-write[bot]@users.noreply.github.com> * Add heading component (#306) * wip: add heading component * add heading component * add prettier formatting for storybook overview files + add missing resources links for signature * add figma link to heading resources * add default margins to heading component * add default value in events & properties table for heading story * fix: Change slot CSS in gcds-breadcrumbs to display text underline (#325) Change slot CSS in gcds-breadcrumbs to display text underline * Prep for v 0.16.0 (#326) * update EN changelog * create version v 0.16.0 * update EN changelog * update tokens --------- Co-authored-by: sre-read-write[bot] <92993749+sre-read-write[bot]@users.noreply.github.com> Co-authored-by: Ethan Wallace <ethan.wallace.91@gmail.com>
cds-snc · Nov 1, 2023 · 160c44d · 160c44d
1 parent 4b62631
commit 160c44d
Show file tree

Hide file tree

Showing 53 changed files with 1,462 additions and 799 deletions.
diff --git a/.github/workflows/backstage-catalog-helper.yml b/.github/workflows/backstage-catalog-helper.yml
@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Update catalog-info.yaml
-        uses: cds-snc/backstage-catalog-info-helper-action@v0.2.0
+        uses: cds-snc/backstage-catalog-info-helper-action@v0.3.0
         with:
           github-app-id: ${{ secrets.SRE_BOT_RW_APP_ID }}
           github-app-private-key: ${{ secrets.SRE_BOT_RW_APP_PRIVATE_KEY }}

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,21 @@
 
 All notable changes to this project will be documented in this file.
 
+## v0.16.0
+
+### New features
+
+- Heading component (`gcds-heading`)
+  - New `gcds-heading` to render headings in GCDS styles
+
+### Minor
+
+- https://github.com/cds-snc/gcds-components/pull/306 - [c972bef](https://github.com/cds-snc/gcds-components/commit/c972befacb6961fed73c983df1fb4fda6cbc9ca5) - Add `gcds-heading` to component library
+
+### Patch
+
+- https://github.com/cds-snc/gcds-components/pull/325 - [3ec8925](https://github.com/cds-snc/gcds-components/commit/3ec89251bf56b346df50ed67ad0a8992631240ff) - Fix slot CSS in gcds-breadcrumbs-item to display text underline
+
 ## v0.15.0
 
 ### New features

diff --git a/lerna.json b/lerna.json
@@ -1,7 +1,7 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
   "useNx": true,
-  "version": "0.15.0",
+  "version": "0.16.0",
   "packages": [
     "packages/web",
     "packages/react",

diff --git a/packages/angular/package-lock.json b/packages/angular/package-lock.json
diff --git a/packages/angular/package.json b/packages/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cdssnc/gcds-components-angular",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "author": "Government of Canada / Gouvernement du Canada",
   "description": "Angular wrapper for gcds-components",
   "homepage": "https://design-system.alpha.canada.ca/",
@@ -20,7 +20,7 @@
   "peerDependencies": {
     "@angular/common": "^16.0.0",
     "@angular/core": "^16.0.0",
-    "@cdssnc/gcds-components": "^0.15.0"
+    "@cdssnc/gcds-components": "^0.16.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

diff --git a/packages/angular/src/lib/stencil-generated/components.ts b/packages/angular/src/lib/stencil-generated/components.ts
@@ -445,6 +445,28 @@ export class GcdsHeader {
 export declare interface GcdsHeader extends Components.GcdsHeader {}
 
 
+@ProxyCmp({
+  inputs: ['characterLimit', 'marginBottom', 'marginTop', 'tag']
+})
+@Component({
+  selector: 'gcds-heading',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['characterLimit', 'marginBottom', 'marginTop', 'tag'],
+})
+export class GcdsHeading {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface GcdsHeading extends Components.GcdsHeading {}
+
+
 @ProxyCmp({
   inputs: ['hint', 'hintId']
 })

diff --git a/packages/angular/src/lib/stencil-generated/index.ts b/packages/angular/src/lib/stencil-generated/index.ts
@@ -18,6 +18,7 @@ export const DIRECTIVES = [
   d.GcdsFooter,
   d.GcdsGrid,
   d.GcdsHeader,
+  d.GcdsHeading,
   d.GcdsHint,
   d.GcdsIcon,
   d.GcdsInput,

diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cdssnc/gcds-components-react",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "author": "Government of Canada / Gouvernement du Canada",
   "description": "React wrapper for gcds-components",
   "homepage": "https://design-system.alpha.canada.ca/",
@@ -29,7 +29,7 @@
     "gcds.css"
   ],
   "dependencies": {
-    "@cdssnc/gcds-components": "^0.15.0"
+    "@cdssnc/gcds-components": "^0.16.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",

diff --git a/packages/react/src/components/stencil-generated/index.ts b/packages/react/src/components/stencil-generated/index.ts
@@ -24,6 +24,7 @@ export const GcdsFileUploader = /*@__PURE__*/createReactComponent<JSX.GcdsFileUp
 export const GcdsFooter = /*@__PURE__*/createReactComponent<JSX.GcdsFooter, HTMLGcdsFooterElement>('gcds-footer');
 export const GcdsGrid = /*@__PURE__*/createReactComponent<JSX.GcdsGrid, HTMLGcdsGridElement>('gcds-grid');
 export const GcdsHeader = /*@__PURE__*/createReactComponent<JSX.GcdsHeader, HTMLGcdsHeaderElement>('gcds-header');
+export const GcdsHeading = /*@__PURE__*/createReactComponent<JSX.GcdsHeading, HTMLGcdsHeadingElement>('gcds-heading');
 export const GcdsHint = /*@__PURE__*/createReactComponent<JSX.GcdsHint, HTMLGcdsHintElement>('gcds-hint');
 export const GcdsIcon = /*@__PURE__*/createReactComponent<JSX.GcdsIcon, HTMLGcdsIconElement>('gcds-icon');
 export const GcdsInput = /*@__PURE__*/createReactComponent<JSX.GcdsInput, HTMLGcdsInputElement>('gcds-input');

diff --git a/packages/web/package-lock.json b/packages/web/package-lock.json
diff --git a/packages/web/package.json b/packages/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cdssnc/gcds-components",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "author": "Government of Canada / Gouvernement du Canada",
   "description": "Web components for the GCDS",
   "homepage": "https://design-system.alpha.canada.ca/",

diff --git a/packages/web/src/components.d.ts b/packages/web/src/components.d.ts
@@ -539,6 +539,54 @@ export namespace Components {
          */
         "skipToHref": string;
     }
+    interface GcdsHeading {
+        /**
+          * Sets the line length to a maximum amount of characters per line for each heading level, ensuring a comfortable, accessible reading length.
+         */
+        "characterLimit"?: boolean;
+        /**
+          * Adds margin below the heading. The default margin-botttom is 400.
+         */
+        "marginBottom"?: | '0'
+    | '50'
+    | '100'
+    | '150'
+    | '200'
+    | '250'
+    | '300'
+    | '400'
+    | '450'
+    | '500'
+    | '550'
+    | '600'
+    | '700'
+    | '800'
+    | '900'
+    | '1000';
+        /**
+          * Adds margin above the heading. The default margin-top for h1 is set to 0, while for h2 to h6 headings, it's 500.
+         */
+        "marginTop"?: | '0'
+    | '50'
+    | '100'
+    | '150'
+    | '200'
+    | '250'
+    | '300'
+    | '400'
+    | '450'
+    | '500'
+    | '550'
+    | '600'
+    | '700'
+    | '800'
+    | '900'
+    | '1000';
+        /**
+          * Sets the appropriate HTML tag for the selected level.
+         */
+        "tag": 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    }
     interface GcdsHint {
         /**
           * Hint displayed below the label and above the input field.
@@ -1302,6 +1350,12 @@ declare global {
         prototype: HTMLGcdsHeaderElement;
         new (): HTMLGcdsHeaderElement;
     };
+    interface HTMLGcdsHeadingElement extends Components.GcdsHeading, HTMLStencilElement {
+    }
+    var HTMLGcdsHeadingElement: {
+        prototype: HTMLGcdsHeadingElement;
+        new (): HTMLGcdsHeadingElement;
+    };
     interface HTMLGcdsHintElement extends Components.GcdsHint, HTMLStencilElement {
     }
     var HTMLGcdsHintElement: {
@@ -1445,6 +1499,7 @@ declare global {
         "gcds-footer": HTMLGcdsFooterElement;
         "gcds-grid": HTMLGcdsGridElement;
         "gcds-header": HTMLGcdsHeaderElement;
+        "gcds-heading": HTMLGcdsHeadingElement;
         "gcds-hint": HTMLGcdsHintElement;
         "gcds-icon": HTMLGcdsIconElement;
         "gcds-input": HTMLGcdsInputElement;
@@ -2056,6 +2111,54 @@ declare namespace LocalJSX {
          */
         "skipToHref": string;
     }
+    interface GcdsHeading {
+        /**
+          * Sets the line length to a maximum amount of characters per line for each heading level, ensuring a comfortable, accessible reading length.
+         */
+        "characterLimit"?: boolean;
+        /**
+          * Adds margin below the heading. The default margin-botttom is 400.
+         */
+        "marginBottom"?: | '0'
+    | '50'
+    | '100'
+    | '150'
+    | '200'
+    | '250'
+    | '300'
+    | '400'
+    | '450'
+    | '500'
+    | '550'
+    | '600'
+    | '700'
+    | '800'
+    | '900'
+    | '1000';
+        /**
+          * Adds margin above the heading. The default margin-top for h1 is set to 0, while for h2 to h6 headings, it's 500.
+         */
+        "marginTop"?: | '0'
+    | '50'
+    | '100'
+    | '150'
+    | '200'
+    | '250'
+    | '300'
+    | '400'
+    | '450'
+    | '500'
+    | '550'
+    | '600'
+    | '700'
+    | '800'
+    | '900'
+    | '1000';
+        /**
+          * Sets the appropriate HTML tag for the selected level.
+         */
+        "tag": 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    }
     interface GcdsHint {
         /**
           * Hint displayed below the label and above the input field.
@@ -2750,6 +2853,7 @@ declare namespace LocalJSX {
         "gcds-footer": GcdsFooter;
         "gcds-grid": GcdsGrid;
         "gcds-header": GcdsHeader;
+        "gcds-heading": GcdsHeading;
         "gcds-hint": GcdsHint;
         "gcds-icon": GcdsIcon;
         "gcds-input": GcdsInput;
@@ -2793,6 +2897,7 @@ declare module "@stencil/core" {
             "gcds-footer": LocalJSX.GcdsFooter & JSXBase.HTMLAttributes<HTMLGcdsFooterElement>;
             "gcds-grid": LocalJSX.GcdsGrid & JSXBase.HTMLAttributes<HTMLGcdsGridElement>;
             "gcds-header": LocalJSX.GcdsHeader & JSXBase.HTMLAttributes<HTMLGcdsHeaderElement>;
+            "gcds-heading": LocalJSX.GcdsHeading & JSXBase.HTMLAttributes<HTMLGcdsHeadingElement>;
             "gcds-hint": LocalJSX.GcdsHint & JSXBase.HTMLAttributes<HTMLGcdsHintElement>;
             "gcds-icon": LocalJSX.GcdsIcon & JSXBase.HTMLAttributes<HTMLGcdsIconElement>;
             "gcds-input": LocalJSX.GcdsInput & JSXBase.HTMLAttributes<HTMLGcdsInputElement>;

diff --git a/packages/web/src/components/gcds-breadcrumbs/gcds-breadcrumbs-item.css b/packages/web/src/components/gcds-breadcrumbs/gcds-breadcrumbs-item.css
@@ -24,7 +24,7 @@
       white-space: normal;
 
       slot {
-        display: inherit;
+        display: block;
       }
     }
   }

diff --git a/packages/web/src/components/gcds-breadcrumbs/stories/overview.mdx b/packages/web/src/components/gcds-breadcrumbs/stories/overview.mdx
@@ -9,32 +9,25 @@ _Also called: breadcrumb trail._
 
 A path to the current page from each preceding level of the site’s hierarchy.
 
-<Canvas
-  of={Breadcrumbs.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={Breadcrumbs.Default} story={{ inline: true }} />
 
 ## Examples
-<br/>
+
+<br />
 
 ### Canada.ca link
 
 #### Default
 
-<Canvas
-  of={Breadcrumbs.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={Breadcrumbs.Default} story={{ inline: true }} />
 
 #### Without Canda.ca link
 
-<Canvas
-  of={Breadcrumbs.WithoutCanadaLink}
-  story={{ inline: true }}
-/>
+<Canvas of={Breadcrumbs.WithoutCanadaLink} story={{ inline: true }} />
 
 ## Resources
 
+{/* prettier-ignore */}
 <ul>
   <li>
     <gcds-button type="link" button-style="text-only" href="https://design-system.alpha.canada.ca/en/components/breadcrumbs/" target="_blank">Guidance</gcds-button>