From e9624f071888db71abbf60b5869dc19d6e49b4b9 Mon Sep 17 00:00:00 2001 From: Melanie Boeckmann Date: Thu, 30 Nov 2023 15:33:55 -0800 Subject: [PATCH 01/10] fix: update font awesome instructions in readme (#353) fix font awesome instructions in readme --- packages/web/README.md | 105 ++++++++++++++++++++++++++++++----------- 1 file changed, 77 insertions(+), 28 deletions(-) diff --git a/packages/web/README.md b/packages/web/README.md index 376f7d364..6eb16aafa 100644 --- a/packages/web/README.md +++ b/packages/web/README.md @@ -12,7 +12,7 @@ You can find the full documentation for GC Design System Components on [https:// ### Install from npm -``` js +```js npm install @cdssnc/gcds-components ``` @@ -21,14 +21,27 @@ npm install @cdssnc/gcds-components Place the following code in the `` element of your site. All gcds-components should now be ready to use in your site. -``` html - - +```html + + - - - + + + ``` Note: ` +```html + + - - - + + + ``` All gcds-components should now be ready to use in your site. @@ -65,8 +91,11 @@ Please reference [GC Design System Components – Angular](../angular/README.md) Place the following code in the `main.js` file of your app. -``` js -import { applyPolyfills, defineCustomElements } from '@cdssnc/gcds-components/loader'; +```js +import { + applyPolyfills, + defineCustomElements, +} from '@cdssnc/gcds-components/loader'; import '@cdssnc/gcds-components/dist/gcds/gcds.css'; applyPolyfills().then(() => { @@ -84,7 +113,7 @@ If you are interested in contributing to GC Design System Components, please rea Code released under the [MIT License](https://github.com/cds-snc/gcds-components/blob/main/LICENSE). --------- +--- # Composants de Système de design GC @@ -98,7 +127,7 @@ Toute la documentation sur les composants de Système de design GC est accessibl ## Installer le paquet avec npm -``` js +```js npm install @cdssnc/gcds-components ``` @@ -108,14 +137,27 @@ Insérez le code qui suit à l'intérieur de la balise `` de votre site. Vous devriez maintenant pouvoir utiliser tous les composants de gcds-components sur votre site. -``` html - - +```html + + - - - + + + ``` Remarque : Il faut un serveur pour que ` +```html + + - + ``` @@ -152,7 +201,7 @@ Veuillez faire référence [Composants de Système de design GC – Angular](../ Insérez le code qui suit dans le fichier `main.js` de votre application. -``` js +```js import { applyPolyfills, defineCustomElements } from 'gcds-components/loader'; import 'gcds-components/dist/gcds/gcds.css'; From 317f11d0e7e62610e04ff4c2cee387193ae4e4cd Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 12 Dec 2023 08:39:31 -0800 Subject: [PATCH 02/10] chore(deps): update js-devtools/npm-publish digest to 3a3ce87 (#355) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- .github/workflows/compile-and-publish.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/compile-and-publish.yml b/.github/workflows/compile-and-publish.yml index e904fd3f6..baf2913e7 100644 --- a/.github/workflows/compile-and-publish.yml +++ b/.github/workflows/compile-and-publish.yml @@ -45,7 +45,7 @@ jobs: working-directory: ${{ matrix.package }} - name: Publish ${{ matrix.name }} - uses: JS-DevTools/npm-publish@8d0621f78dc8b291082e6b83c56f5a170305410b + uses: JS-DevTools/npm-publish@3a3ce8768f68335c199746eadc16bcc7ddda963b id: publish with: token: ${{ secrets.NPM_TOKEN }} @@ -137,7 +137,7 @@ jobs: working-directory: ${{ matrix.package }} - name: Publish ${{ matrix.name }} - uses: JS-DevTools/npm-publish@8d0621f78dc8b291082e6b83c56f5a170305410b + uses: JS-DevTools/npm-publish@3a3ce8768f68335c199746eadc16bcc7ddda963b id: publish with: token: ${{ secrets.NPM_TOKEN }} From 3a1a9c694245ae2fad37cf7878618aa7a0584841 Mon Sep 17 00:00:00 2001 From: Melanie Boeckmann Date: Wed, 13 Dec 2023 16:39:05 -0800 Subject: [PATCH 03/10] feat: add new grid functionality (#356) --- .../src/lib/stencil-generated/components.ts | 26 ++- .../src/lib/stencil-generated/index.ts | 1 + .../src/components/stencil-generated/index.ts | 1 + packages/web/package-lock.json | 8 +- packages/web/package.json | 2 +- packages/web/src/components.d.ts | 149 +++++++++--------- .../components/gcds-grid/gcds-grid-col.css | 31 ++++ .../components/gcds-grid/gcds-grid-col.tsx | 98 ++++++++++++ .../src/components/gcds-grid/gcds-grid.css | 104 +++++------- .../src/components/gcds-grid/gcds-grid.tsx | 80 ++++------ .../web/src/components/gcds-grid/readme.md | 41 +---- .../gcds-grid/stories/gcds-grid.stories.tsx | 112 +++++++------ .../components/gcds-grid/stories/overview.mdx | 42 +++-- .../gcds-grid/test/gcds-grid.spec.ts | 18 +-- packages/web/src/index.html | 131 ++++++++++++--- 15 files changed, 511 insertions(+), 333 deletions(-) create mode 100644 packages/web/src/components/gcds-grid/gcds-grid-col.css create mode 100644 packages/web/src/components/gcds-grid/gcds-grid-col.tsx diff --git a/packages/angular/src/lib/stencil-generated/components.ts b/packages/angular/src/lib/stencil-generated/components.ts index 5464ac5a0..e8a15d2ad 100644 --- a/packages/angular/src/lib/stencil-generated/components.ts +++ b/packages/angular/src/lib/stencil-generated/components.ts @@ -402,14 +402,14 @@ export declare interface GcdsFooter extends Components.GcdsFooter {} @ProxyCmp({ - inputs: ['alignContent', 'alignItems', 'centered', 'columns', 'columnsDesktop', 'columnsTablet', 'container', 'display', 'gap', 'justifyContent', 'justifyItems', 'placeContent', 'placeItems', 'tag'] + inputs: ['alignContent', 'alignItems', 'centered', 'columns', 'columnsDesktop', 'columnsTablet', 'container', 'display', 'equalRowHeight', 'justifyContent', 'justifyItems', 'placeContent', 'placeItems', 'tag'] }) @Component({ selector: 'gcds-grid', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['alignContent', 'alignItems', 'centered', 'columns', 'columnsDesktop', 'columnsTablet', 'container', 'display', 'gap', 'justifyContent', 'justifyItems', 'placeContent', 'placeItems', 'tag'], + inputs: ['alignContent', 'alignItems', 'centered', 'columns', 'columnsDesktop', 'columnsTablet', 'container', 'display', 'equalRowHeight', 'justifyContent', 'justifyItems', 'placeContent', 'placeItems', 'tag'], }) export class GcdsGrid { protected el: HTMLElement; @@ -423,6 +423,28 @@ export class GcdsGrid { export declare interface GcdsGrid extends Components.GcdsGrid {} +@ProxyCmp({ + inputs: ['desktop', 'tablet', 'tag'] +}) +@Component({ + selector: 'gcds-grid-col', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property + inputs: ['desktop', 'tablet', 'tag'], +}) +export class GcdsGridCol { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + + +export declare interface GcdsGridCol extends Components.GcdsGridCol {} + + @ProxyCmp({ inputs: ['langHref', 'signatureHasLink', 'signatureVariant', 'skipToHref'] }) diff --git a/packages/angular/src/lib/stencil-generated/index.ts b/packages/angular/src/lib/stencil-generated/index.ts index 44c1e9669..cef2972bc 100644 --- a/packages/angular/src/lib/stencil-generated/index.ts +++ b/packages/angular/src/lib/stencil-generated/index.ts @@ -17,6 +17,7 @@ export const DIRECTIVES = [ d.GcdsFileUploader, d.GcdsFooter, d.GcdsGrid, + d.GcdsGridCol, d.GcdsHeader, d.GcdsHeading, d.GcdsHint, diff --git a/packages/react/src/components/stencil-generated/index.ts b/packages/react/src/components/stencil-generated/index.ts index 538a7270d..5010cefbd 100644 --- a/packages/react/src/components/stencil-generated/index.ts +++ b/packages/react/src/components/stencil-generated/index.ts @@ -23,6 +23,7 @@ export const GcdsFieldset = /*@__PURE__*/createReactComponent('gcds-file-uploader'); export const GcdsFooter = /*@__PURE__*/createReactComponent('gcds-footer'); export const GcdsGrid = /*@__PURE__*/createReactComponent('gcds-grid'); +export const GcdsGridCol = /*@__PURE__*/createReactComponent('gcds-grid-col'); export const GcdsHeader = /*@__PURE__*/createReactComponent('gcds-header'); export const GcdsHeading = /*@__PURE__*/createReactComponent('gcds-heading'); export const GcdsHint = /*@__PURE__*/createReactComponent('gcds-hint'); diff --git a/packages/web/package-lock.json b/packages/web/package-lock.json index 86f4668c6..dda315179 100644 --- a/packages/web/package-lock.json +++ b/packages/web/package-lock.json @@ -20,7 +20,7 @@ "@babel/core": "^7.20.12", "@babel/preset-env": "^7.20.2", "@babel/preset-typescript": "^7.21.0", - "@cdssnc/gcds-tokens": "^1.10.1", + "@cdssnc/gcds-tokens": "^1.11.0", "@fortawesome/fontawesome-free": "^6.3.0", "@stencil/angular-output-target": "^0.8.1", "@stencil/postcss": "^2.1.0", @@ -2055,9 +2055,9 @@ "dev": true }, "node_modules/@cdssnc/gcds-tokens": { - "version": "1.10.1", - "resolved": "https://registry.npmjs.org/@cdssnc/gcds-tokens/-/gcds-tokens-1.10.1.tgz", - "integrity": "sha512-JVi0/tmgOdgCYmSRPzDodjNZe9JK5fnZAem1Br5KDjgIYiG5fyGOBecWVC9Z5WpD5NocUf9b0xH493pNU/f1Pg==", + "version": "1.11.0", + "resolved": "https://registry.npmjs.org/@cdssnc/gcds-tokens/-/gcds-tokens-1.11.0.tgz", + "integrity": "sha512-350t1RybSPLRAJIkUQqjqmiV7TNshJ+60YP5zahi6uE21UlKLMJqeB9/jIlNftC36TRjjqGDMYp4sUyjLEpUGg==", "dev": true }, "node_modules/@colors/colors": { diff --git a/packages/web/package.json b/packages/web/package.json index c762ea27c..b96a601e9 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -43,7 +43,7 @@ "@babel/core": "^7.20.12", "@babel/preset-env": "^7.20.2", "@babel/preset-typescript": "^7.21.0", - "@cdssnc/gcds-tokens": "^1.10.1", + "@cdssnc/gcds-tokens": "^1.11.0", "@fortawesome/fontawesome-free": "^6.3.0", "@stencil/angular-output-target": "^0.8.1", "@stencil/postcss": "^2.1.0", diff --git a/packages/web/src/components.d.ts b/packages/web/src/components.d.ts index 320445b3c..af96b5d1c 100644 --- a/packages/web/src/components.d.ts +++ b/packages/web/src/components.d.ts @@ -439,13 +439,7 @@ export namespace Components { /** * If total grid size is less than the size of its grid container, this property aligns the grid along the block (column) axis */ - "alignContent"?: | 'center' - | 'end' - | 'space-around' - | 'space-between' - | 'space-evenly' - | 'start' - | 'stretch'; + "alignContent"?: ContentValues; /** * Aligns grid items along the block (column) axis */ @@ -457,7 +451,7 @@ export namespace Components { /** * Defines the columns of the grid Option to set different layouts for desktop | tablet | default (includes mobile) */ - "columns": string; + "columns"?: string; "columnsDesktop"?: string; "columnsTablet"?: string; /** @@ -469,34 +463,13 @@ export namespace Components { */ "display"?: 'grid' | 'inline-grid'; /** - * Shorthand for column-gap + row-gap Specifies the width of the gutters between columns and rows + * Sets all grid items to have an equal height, based on the tallest item. */ - "gap"?: | '0' - | '50' - | '100' - | '150' - | '200' - | '250' - | '300' - | '400' - | '450' - | '500' - | '550' - | '600' - | '700' - | '800' - | '900' - | '1000'; + "equalRowHeight"?: boolean; /** * If total grid size is less than the size of its grid container, this property aligns the grid along the inline (row) axis */ - "justifyContent"?: | 'center' - | 'end' - | 'space-around' - | 'space-between' - | 'space-evenly' - | 'start' - | 'stretch'; + "justifyContent"?: ContentValues; /** * Aligns grid items along the inline (row) axis */ @@ -504,13 +477,7 @@ export namespace Components { /** * Sets both the align-content + justify-content properties */ - "placeContent"?: | 'center' - | 'end' - | 'space-around' - | 'space-between' - | 'space-evenly' - | 'start' - | 'stretch'; + "placeContent"?: ContentValues; /** * Sets both the align-items + justify-items properties */ @@ -520,6 +487,31 @@ export namespace Components { */ "tag"?: string; } + interface GcdsGridCol { + /** + * Optimize grid column size for desktop (1024px and above). Desktop grid column sizes are based on a 12 column grid. + */ + "desktop"?: | 1 + | 2 + | 3 + | 4 + | 5 + | 6 + | 7 + | 8 + | 9 + | 10 + | 11 + | 12; + /** + * Optimize grid column size for tablet (768px - 1023px). Tablet grid column sizes are based on a 6 column grid. The tablet size will also be used for desktop, if desktop is undefined. + */ + "tablet"?: 1 | 2 | 3 | 4 | 5 | 6; + /** + * Set tag for grid column + */ + "tag"?: string; + } interface GcdsHeader { /** * GcdsLangToggle - The href attribute specifies the URL of the opposite language page @@ -1450,6 +1442,12 @@ declare global { prototype: HTMLGcdsGridElement; new (): HTMLGcdsGridElement; }; + interface HTMLGcdsGridColElement extends Components.GcdsGridCol, HTMLStencilElement { + } + var HTMLGcdsGridColElement: { + prototype: HTMLGcdsGridColElement; + new (): HTMLGcdsGridColElement; + }; interface HTMLGcdsHeaderElement extends Components.GcdsHeader, HTMLStencilElement { } var HTMLGcdsHeaderElement: { @@ -1730,6 +1728,7 @@ declare global { "gcds-file-uploader": HTMLGcdsFileUploaderElement; "gcds-footer": HTMLGcdsFooterElement; "gcds-grid": HTMLGcdsGridElement; + "gcds-grid-col": HTMLGcdsGridColElement; "gcds-header": HTMLGcdsHeaderElement; "gcds-heading": HTMLGcdsHeadingElement; "gcds-hint": HTMLGcdsHintElement; @@ -2244,13 +2243,7 @@ declare namespace LocalJSX { /** * If total grid size is less than the size of its grid container, this property aligns the grid along the block (column) axis */ - "alignContent"?: | 'center' - | 'end' - | 'space-around' - | 'space-between' - | 'space-evenly' - | 'start' - | 'stretch'; + "alignContent"?: ContentValues; /** * Aligns grid items along the block (column) axis */ @@ -2262,7 +2255,7 @@ declare namespace LocalJSX { /** * Defines the columns of the grid Option to set different layouts for desktop | tablet | default (includes mobile) */ - "columns": string; + "columns"?: string; "columnsDesktop"?: string; "columnsTablet"?: string; /** @@ -2274,34 +2267,13 @@ declare namespace LocalJSX { */ "display"?: 'grid' | 'inline-grid'; /** - * Shorthand for column-gap + row-gap Specifies the width of the gutters between columns and rows + * Sets all grid items to have an equal height, based on the tallest item. */ - "gap"?: | '0' - | '50' - | '100' - | '150' - | '200' - | '250' - | '300' - | '400' - | '450' - | '500' - | '550' - | '600' - | '700' - | '800' - | '900' - | '1000'; + "equalRowHeight"?: boolean; /** * If total grid size is less than the size of its grid container, this property aligns the grid along the inline (row) axis */ - "justifyContent"?: | 'center' - | 'end' - | 'space-around' - | 'space-between' - | 'space-evenly' - | 'start' - | 'stretch'; + "justifyContent"?: ContentValues; /** * Aligns grid items along the inline (row) axis */ @@ -2309,13 +2281,7 @@ declare namespace LocalJSX { /** * Sets both the align-content + justify-content properties */ - "placeContent"?: | 'center' - | 'end' - | 'space-around' - | 'space-between' - | 'space-evenly' - | 'start' - | 'stretch'; + "placeContent"?: ContentValues; /** * Sets both the align-items + justify-items properties */ @@ -2325,6 +2291,31 @@ declare namespace LocalJSX { */ "tag"?: string; } + interface GcdsGridCol { + /** + * Optimize grid column size for desktop (1024px and above). Desktop grid column sizes are based on a 12 column grid. + */ + "desktop"?: | 1 + | 2 + | 3 + | 4 + | 5 + | 6 + | 7 + | 8 + | 9 + | 10 + | 11 + | 12; + /** + * Optimize grid column size for tablet (768px - 1023px). Tablet grid column sizes are based on a 6 column grid. The tablet size will also be used for desktop, if desktop is undefined. + */ + "tablet"?: 1 | 2 | 3 | 4 | 5 | 6; + /** + * Set tag for grid column + */ + "tag"?: string; + } interface GcdsHeader { /** * GcdsLangToggle - The href attribute specifies the URL of the opposite language page @@ -3131,6 +3122,7 @@ declare namespace LocalJSX { "gcds-file-uploader": GcdsFileUploader; "gcds-footer": GcdsFooter; "gcds-grid": GcdsGrid; + "gcds-grid-col": GcdsGridCol; "gcds-header": GcdsHeader; "gcds-heading": GcdsHeading; "gcds-hint": GcdsHint; @@ -3176,6 +3168,7 @@ declare module "@stencil/core" { "gcds-file-uploader": LocalJSX.GcdsFileUploader & JSXBase.HTMLAttributes; "gcds-footer": LocalJSX.GcdsFooter & JSXBase.HTMLAttributes; "gcds-grid": LocalJSX.GcdsGrid & JSXBase.HTMLAttributes; + "gcds-grid-col": LocalJSX.GcdsGridCol & JSXBase.HTMLAttributes; "gcds-header": LocalJSX.GcdsHeader & JSXBase.HTMLAttributes; "gcds-heading": LocalJSX.GcdsHeading & JSXBase.HTMLAttributes; "gcds-hint": LocalJSX.GcdsHint & JSXBase.HTMLAttributes; diff --git a/packages/web/src/components/gcds-grid/gcds-grid-col.css b/packages/web/src/components/gcds-grid/gcds-grid-col.css new file mode 100644 index 000000000..bb4044dc0 --- /dev/null +++ b/packages/web/src/components/gcds-grid/gcds-grid-col.css @@ -0,0 +1,31 @@ +:host { + display: block; + grid-column: span var(--gcds-grid-columns-default-base) / span + var(--gcds-grid-columns-default-base); +} + +:host .gcds-grid-col { + display: block; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + box-sizing: border-box; +} + +@media screen and (min-width: 48em) { + :host { + grid-column: span + var(--gcds-grid-col-tablet, var(--gcds-grid-columns-default-tablet)) / + span var(---gcds-grid-col-tablet, var(--gcds-grid-columns-default-tablet)); + } +} + +@media screen and (min-width: 64em) { + :host { + grid-column: span + var(--gcds-grid-col-desktop, var(--gcds-grid-columns-default-desktop)) / + span + var(--gcds-grid-col-desktop, var(--gcds-grid-columns-default-desktop)); + } +} diff --git a/packages/web/src/components/gcds-grid/gcds-grid-col.tsx b/packages/web/src/components/gcds-grid/gcds-grid-col.tsx new file mode 100644 index 000000000..cf71d3f7b --- /dev/null +++ b/packages/web/src/components/gcds-grid/gcds-grid-col.tsx @@ -0,0 +1,98 @@ +import { Component, Element, Host, Watch, Prop, h } from '@stencil/core'; + +@Component({ + tag: 'gcds-grid-col', + styleUrl: 'gcds-grid-col.css', + shadow: true, +}) +export class GcdsGridCol { + @Element() el: HTMLElement; + + /** + * Props + */ + + /** + * Set tag for grid column + */ + @Prop() tag?: string = 'div'; + + /** + * Optimize grid column size for tablet (768px - 1023px). + * Tablet grid column sizes are based on a 6 column grid. + * The tablet size will also be used for desktop, if desktop is undefined. + */ + @Prop({ mutable: true }) tablet?: 1 | 2 | 3 | 4 | 5 | 6 = 6; + + @Watch('tablet') + validateTablet(newValue: number) { + const values = [1, 2, 3, 4, 5, 6]; + + if (!values.includes(newValue)) { + this.tablet = 6; + } + } + + /** + * Optimize grid column size for desktop (1024px and above). + * Desktop grid column sizes are based on a 12 column grid. + */ + @Prop({ mutable: true }) desktop?: + | 1 + | 2 + | 3 + | 4 + | 5 + | 6 + | 7 + | 8 + | 9 + | 10 + | 11 + | 12; + + @Watch('desktop') + validateDesktop(newValue: number) { + const values = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; + + if (this.desktop && !values.includes(newValue)) { + this.desktop = 12; + } + } + + componentWillLoad() { + // Validate attributes and set defaults + this.validateTablet(this.tablet); + this.validateDesktop(this.desktop); + } + + render() { + const { desktop, tablet, tag } = this; + + const Tag = tag; + + function handleColSize() { + const colSize = {}; + + if (tablet) { + colSize['--gcds-grid-col-tablet'] = tablet; + } + + if (desktop) { + colSize['--gcds-grid-col-desktop'] = desktop; + } else if (tablet) { + colSize['--gcds-grid-col-desktop'] = tablet * 2; + } + + return colSize; + } + + return ( + + + + + + ); + } +} diff --git a/packages/web/src/components/gcds-grid/gcds-grid.css b/packages/web/src/components/gcds-grid/gcds-grid.css index 1b65b0078..f2e720e54 100644 --- a/packages/web/src/components/gcds-grid/gcds-grid.css +++ b/packages/web/src/components/gcds-grid/gcds-grid.css @@ -2,8 +2,15 @@ margin: 0; padding: 0; grid-template-columns: var(--gcds-grid-columns, 1fr); + gap: var(--gcds-grid-gap); + box-sizing: border-box; /* Display */ + &.display-grid-with-cols { + display: grid; + grid-template-columns: 1fr; + } + &.display-grid { display: grid; } @@ -12,70 +19,6 @@ display: inline-grid; } - &.gap-0 { - gap: var(--gcds-grid-gap-0); - } - - &.gap-50 { - gap: var(--gcds-grid-gap-50); - } - - &.gap-100 { - gap: var(--gcds-grid-gap-100); - } - - &.gap-150 { - gap: var(--gcds-grid-gap-150); - } - - &.gap-200 { - gap: var(--gcds-grid-gap-200); - } - - &.gap-250 { - gap: var(--gcds-grid-gap-250); - } - - &.gap-300 { - gap: var(--gcds-grid-gap-300); - } - - &.gap-400 { - gap: var(--gcds-grid-gap-400); - } - - &.gap-450 { - gap: var(--gcds-grid-gap-450); - } - - &.gap-500 { - gap: var(--gcds-grid-gap-500); - } - - &.gap-550 { - gap: var(--gcds-grid-gap-550); - } - - &.gap-600 { - gap: var(--gcds-grid-gap-600); - } - - &.gap-700 { - gap: var(--gcds-grid-gap-700); - } - - &.gap-800 { - gap: var(--gcds-grid-gap-800); - } - - &.gap-900 { - gap: var(--gcds-grid-gap-900); - } - - &.gap-1000 { - gap: var(--gcds-grid-gap-1000); - } - /* Align content */ &.align-content-center { align-content: center; @@ -217,15 +160,44 @@ &.place-items-stretch { place-items: stretch; } + + /* Equal row height */ + &.equal-row-height { + grid-auto-rows: 1fr; + align-items: stretch; + } } @media screen and (min-width: 48em) { :host .gcds-grid { - grid-template-columns: var(--gcds-grid-columns-tablet, var(--gcds-grid-columns, 1fr)); + grid-template-columns: var( + --gcds-grid-columns-tablet, + var(--gcds-grid-columns, 1fr) + ); + + /* Grid with cols */ + &.display-grid-with-cols { + grid-template-columns: repeat( + var(--gcds-grid-columns-default-tablet), + minmax(0, 1fr) + ); + } } } + @media screen and (min-width: 64em) { :host .gcds-grid { - grid-template-columns: var(--gcds-grid-columns-desktop, var(--gcds-grid-columns-tablet, var(--gcds-grid-columns, 1fr))); + grid-template-columns: var( + --gcds-grid-columns-desktop, + var(--gcds-grid-columns-tablet, var(--gcds-grid-columns, 1fr)) + ); + + /* Grid with cols */ + &.display-grid-with-cols { + grid-template-columns: repeat( + var(--gcds-grid-columns-default-desktop), + minmax(0, 1fr) + ); + } } } diff --git a/packages/web/src/components/gcds-grid/gcds-grid.tsx b/packages/web/src/components/gcds-grid/gcds-grid.tsx index b95ea2dbe..e24a7e0af 100644 --- a/packages/web/src/components/gcds-grid/gcds-grid.tsx +++ b/packages/web/src/components/gcds-grid/gcds-grid.tsx @@ -1,5 +1,14 @@ import { Component, Element, Host, Prop, h } from '@stencil/core'; +type ContentValues = + | 'center' + | 'end' + | 'space-around' + | 'space-between' + | 'space-evenly' + | 'start' + | 'stretch'; + @Component({ tag: 'gcds-grid', styleUrl: 'gcds-grid.css', @@ -16,7 +25,7 @@ export class GcdsGrid { * Defines the columns of the grid * Option to set different layouts for desktop | tablet | default (includes mobile) */ - @Prop() columns!: string; + @Prop() columns?: string; @Prop() columnsTablet?: string; @Prop() columnsDesktop?: string; @@ -36,26 +45,10 @@ export class GcdsGrid { @Prop() display?: 'grid' | 'inline-grid' = 'grid'; /** - * Shorthand for column-gap + row-gap - * Specifies the width of the gutters between columns and rows + * Sets all grid items to have an equal height, + * based on the tallest item. */ - @Prop() gap?: - | '0' - | '50' - | '100' - | '150' - | '200' - | '250' - | '300' - | '400' - | '450' - | '500' - | '550' - | '600' - | '700' - | '800' - | '900' - | '1000'; + @Prop() equalRowHeight?: boolean = false; /** * Set tag for grid container @@ -66,39 +59,18 @@ export class GcdsGrid { * If total grid size is less than the size of its grid container, * this property aligns the grid along the block (column) axis */ - @Prop() alignContent?: - | 'center' - | 'end' - | 'space-around' - | 'space-between' - | 'space-evenly' - | 'start' - | 'stretch'; + @Prop() alignContent?: ContentValues; /** * If total grid size is less than the size of its grid container, * this property aligns the grid along the inline (row) axis */ - @Prop() justifyContent?: - | 'center' - | 'end' - | 'space-around' - | 'space-between' - | 'space-evenly' - | 'start' - | 'stretch'; + @Prop() justifyContent?: ContentValues; /** * Sets both the align-content + justify-content properties */ - @Prop() placeContent?: - | 'center' - | 'end' - | 'space-around' - | 'space-between' - | 'space-evenly' - | 'start' - | 'stretch'; + @Prop() placeContent?: ContentValues; /** * Aligns grid items along the block (column) axis @@ -125,7 +97,7 @@ export class GcdsGrid { container, centered, display, - gap, + equalRowHeight, justifyContent, justifyItems, placeContent, @@ -138,8 +110,12 @@ export class GcdsGrid { gcds-grid ${alignContent ? `align-content-${alignContent}` : ''} ${alignItems ? `align-items-${alignItems}` : ''} - ${gap ? `gap-${gap}` : ''} - ${display ? `display-${display}` : ''} + ${ + (columns || columnsTablet || columnsDesktop) === undefined + ? `display-grid-with-cols` + : `display-${display}` + } + ${equalRowHeight ? 'equal-row-height' : ''} ${justifyContent ? `justify-content-${justifyContent}` : ''} ${justifyItems ? `justify-items-${justifyItems}` : ''} ${placeContent ? `place-content-${placeContent}` : ''} @@ -150,14 +126,16 @@ export class GcdsGrid { function handleColumns() { const responsiveColumns = {}; - if (columnsDesktop) { - responsiveColumns['--gcds-grid-columns-desktop'] = columnsDesktop; + if (columns) { + responsiveColumns['--gcds-grid-columns'] = columns; } + if (columnsTablet) { responsiveColumns['--gcds-grid-columns-tablet'] = columnsTablet; } - if (columns) { - responsiveColumns['--gcds-grid-columns'] = columns; + + if (columnsDesktop) { + responsiveColumns['--gcds-grid-columns-desktop'] = columnsDesktop; } return responsiveColumns; diff --git a/packages/web/src/components/gcds-grid/readme.md b/packages/web/src/components/gcds-grid/readme.md index ce4cf87b3..96b6205d3 100644 --- a/packages/web/src/components/gcds-grid/readme.md +++ b/packages/web/src/components/gcds-grid/readme.md @@ -7,41 +7,12 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ---------------------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `alignContent` | `align-content` | If total grid size is less than the size of its grid container, this property aligns the grid along the block (column) axis | `"center" \| "end" \| "space-around" \| "space-between" \| "space-evenly" \| "start" \| "stretch"` | `undefined` | -| `alignItems` | `align-items` | Aligns grid items along the block (column) axis | `"baseline" \| "center" \| "end" \| "start" \| "stretch"` | `undefined` | -| `centered` | `centered` | Defines if grid container is centered or not | `boolean` | `false` | -| `columns` _(required)_ | `columns` | Defines the columns of the grid Option to set different layouts for desktop \| tablet \| default (includes mobile) | `string` | `undefined` | -| `columnsDesktop` | `columns-desktop` | | `string` | `undefined` | -| `columnsTablet` | `columns-tablet` | | `string` | `undefined` | -| `container` | `container` | Defines grid container size | `"full" \| "lg" \| "md" \| "sm" \| "xl" \| "xs"` | `undefined` | -| `display` | `display` | Defines element as grid or inline-grid container | `"grid" \| "inline-grid"` | `'grid'` | -| `gap` | `gap` | Shorthand for column-gap + row-gap Specifies the width of the gutters between columns and rows | `"0" \| "100" \| "1000" \| "150" \| "200" \| "250" \| "300" \| "400" \| "450" \| "50" \| "500" \| "550" \| "600" \| "700" \| "800" \| "900"` | `undefined` | -| `justifyContent` | `justify-content` | If total grid size is less than the size of its grid container, this property aligns the grid along the inline (row) axis | `"center" \| "end" \| "space-around" \| "space-between" \| "space-evenly" \| "start" \| "stretch"` | `undefined` | -| `justifyItems` | `justify-items` | Aligns grid items along the inline (row) axis | `"center" \| "end" \| "start" \| "stretch"` | `undefined` | -| `placeContent` | `place-content` | Sets both the align-content + justify-content properties | `"center" \| "end" \| "space-around" \| "space-between" \| "space-evenly" \| "start" \| "stretch"` | `undefined` | -| `placeItems` | `place-items` | Sets both the align-items + justify-items properties | `"center" \| "end" \| "start" \| "stretch"` | `undefined` | -| `tag` | `tag` | Set tag for grid container | `string` | `'div'` | - - -## Dependencies - -### Used by - - - [gcds-verify-banner](../gcds-verify-banner) - -### Depends on - -- [gcds-container](../gcds-container) - -### Graph -```mermaid -graph TD; - gcds-grid --> gcds-container - gcds-verify-banner --> gcds-grid - style gcds-grid fill:#f9f,stroke:#333,stroke-width:4px -``` +| Property | Attribute | Description | Type | Default | +| --------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- | ----------- | +| `desktop` | `desktop` | Optimize grid column size for desktop (1024px and above). Desktop grid column sizes are based on a 12 column grid. | `1 \| 10 \| 11 \| 12 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9` | `undefined` | +| `tablet` | `tablet` | Optimize grid column size for tablet (768px - 1023px). Tablet grid column sizes are based on a 6 column grid. The tablet size will also be used for desktop, if desktop is undefined. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `6` | +| `tag` | `tag` | Set tag for grid column | `string` | `'div'` | + ---------------------------------------------- diff --git a/packages/web/src/components/gcds-grid/stories/gcds-grid.stories.tsx b/packages/web/src/components/gcds-grid/stories/gcds-grid.stories.tsx index 808c2175a..e3d61c3d5 100644 --- a/packages/web/src/components/gcds-grid/stories/gcds-grid.stories.tsx +++ b/packages/web/src/components/gcds-grid/stories/gcds-grid.stories.tsx @@ -9,9 +9,6 @@ export default { type: { summary: 'string' }, defaultValue: { summary: '-' }, }, - type: { - required: true, - }, }, columnsTablet: { name: 'columns-tablet', @@ -45,29 +42,13 @@ export default { defaultValue: { summary: 'grid' }, }, }, - gap: { + equalRowHeight: { + name: 'equal-row-height', control: { type: 'select' }, - options: [ - '0', - '50', - '100', - '150', - '200', - '250', - '300', - '400', - '450', - '500', - '550', - '600', - '700', - '800', - '900', - '1000', - ], + options: [false, true], table: { - type: { summary: 'string' }, - defaultValue: { summary: '-' }, + type: { summary: 'boolean' }, + defaultValue: { summary: false }, }, }, tag: { @@ -177,15 +158,13 @@ const Template = args => args.columnsDesktop ? `columns-desktop="${args.columnsDesktop}"` : null } ${args.columnsTablet ? `columns-tablet="${args.columnsTablet}"` : null} ${ args.columns ? `columns="${args.columns}"` : null - } ${args.gap ? `gap="${args.gap}"` : null} ${ - args.alignContent ? `align-content="${args.alignContent}"` : null - } ${ + } ${args.alignContent ? `align-content="${args.alignContent}"` : null} ${ args.justifyContent ? `justify-content="${args.justifyContent}"` : null } ${args.placeContent ? `place-content="${args.placeContent}"` : null} ${ args.alignItems ? `align-items="${args.alignItems}"` : null } ${args.justifyItems ? `justify-items="${args.justifyItems}"` : null} ${ args.placeItems ? `place-items="${args.placeItems}"` : null - }> + } ${args.equalRowHeight ? `equal-row-height` : null}> ${args.default ? args.default : null} @@ -195,18 +174,41 @@ const Template = args => } ${args.columnsDesktop ? `columnsDesktop="${args.columnsDesktop}"` : null} ${ args.columnsTablet ? `columnsTablet="${args.columnsTablet}"` : null } ${args.columns ? `columns="${args.columns}"` : null} ${ - args.gap ? `gap="${args.gap}"` : null - } ${args.alignContent ? `alignContent="${args.alignContent}"` : null} ${ - args.justifyContent ? `justifyContent="${args.justifyContent}"` : null - } ${args.placeContent ? `placeContent="${args.placeContent}"` : null} ${ - args.alignItems ? `alignItems="${args.alignItems}"` : null - } ${args.justifyItems ? `justifyItems="${args.justifyItems}"` : null} ${ - args.placeItems ? `placeItems="${args.placeItems}"` : null + args.alignContent ? `alignContent="${args.alignContent}"` : null + } ${args.justifyContent ? `justifyContent="${args.justifyContent}"` : null} ${ + args.placeContent ? `placeContent="${args.placeContent}"` : null + } ${args.alignItems ? `alignItems="${args.alignItems}"` : null} ${ + args.justifyItems ? `justifyItems="${args.justifyItems}"` : null + } ${args.placeItems ? `placeItems="${args.placeItems}"` : null} ${ + args.equalRowHeight ? `equalRowHeight` : null }> ${args.default ? args.default : null} `.replace(/ null/g, ''); +const TemplateIndividual = args => + ` + + + ${ + args.default ? args.default : null + } + ${ + args.default ? args.default : null + } + + + + + ${ + args.default ? args.default : null + } + ${ + args.default ? args.default : null + } + +`.replace(/ null/g, ''); + const TemplatePlayground = args => ` ` ${args.columnsDesktop ? `columns-desktop="${args.columnsDesktop}"` : null} ${args.columnsTablet ? `columns-tablet="${args.columnsTablet}"` : null} ${args.columns ? `columns="${args.columns}"` : null} - ${args.gap ? `gap="${args.gap}"` : null} ${args.alignContent ? `align-content="${args.alignContent}"` : null} ${args.justifyContent ? `justify-content="${args.justifyContent}"` : null} ${args.placeContent ? `place-content="${args.placeContent}"` : null} ${args.alignItems ? `align-items="${args.alignItems}"` : null} ${args.justifyItems ? `justify-items="${args.justifyItems}"` : null} ${args.placeItems ? `place-items="${args.placeItems}"` : null} + ${args.equalRowHeight ? `equal-row-height` : null} > ${args.default ? args.default : null} @@ -234,7 +236,6 @@ Default.args = { columnsTablet: '1fr 1fr', columns: '1fr', container: 'full', - gap: '400', tag: 'div', default: `

This is some example content to display the grid component.

This is some example content to display the grid component.

@@ -248,7 +249,6 @@ export const Columns = Template.bind({}); Columns.args = { columns: '1fr', container: 'full', - gap: '200', tag: 'div', default: `

This is some example content to display the grid component.

This is some example content to display the grid component.

@@ -261,7 +261,6 @@ ColumnsTablet.args = { columns: '1fr', columnsTablet: '1fr 1fr', container: 'full', - gap: '200', tag: 'div', default: `

This is some example content to display the grid component.

This is some example content to display the grid component.

@@ -275,7 +274,6 @@ ColumnsDesktop.args = { columnsTablet: '1fr 1fr', columns: '1fr', container: 'full', - gap: '200', tag: 'div', default: `

This is some example content to display the grid component.

This is some example content to display the grid component.

@@ -283,32 +281,48 @@ ColumnsDesktop.args = {

This is some example content to display the grid component.

`, }; -// ------ Grid equal width column ------ +// ------ Grid types ------ -export const EqualFlexbile = Template.bind({}); -EqualFlexbile.args = { - columnsDesktop: '1fr 1fr 1fr', +export const Fluid = Template.bind({}); +Fluid.args = { + columnsDesktop: '1fr 1fr 1fr 1fr', columnsTablet: '1fr 1fr', columns: '1fr', container: 'full', - gap: '400', tag: 'div', default: `

This is some example content to display the grid component.

This is some example content to display the grid component.

+

This is some example content to display the grid component.

This is some example content to display the grid component.

`, }; -export const EqualWidth = Template.bind({}); -EqualWidth.args = { +export const Fixed = Template.bind({}); +Fixed.args = { columns: 'repeat(auto-fit, minmax(100px, 250px))', container: 'full', - gap: '400', tag: 'div', default: `

This is some example content to display the grid component.

This is some example content to display the grid component.

This is some example content to display the grid component.

`, }; +export const Hybrid = Template.bind({}); +Hybrid.args = { + columns: 'repeat(auto-fit, minmax(400px, 1fr))', + container: 'full', + tag: 'div', + default: `

This is some example content to display the grid component.

+

This is some example content to display the grid component.

+

This is some example content to display the grid component.

`, +}; + +export const Individual = TemplateIndividual.bind({}); +Individual.args = { + container: 'full', + tag: 'div', + default: 'This is some example content to display the grid component.', +}; + // ------ Grid events & props ------ export const Props = Template.bind({}); @@ -317,7 +331,6 @@ Props.args = { columnsDesktop: '', columnsTablet: '', container: 'full', - gap: '400', tag: 'div', default: `

This is some example content to display the grid component.

This is some example content to display the grid component.

@@ -331,7 +344,6 @@ export const Playground = TemplatePlayground.bind({}); Playground.args = { container: 'full', columns: 'repeat(auto-fit, minmax(250px, 1fr))', - gap: '400', tag: 'div', default: `

This is some example content to display the grid component.

This is some example content to display the grid component.

diff --git a/packages/web/src/components/gcds-grid/stories/overview.mdx b/packages/web/src/components/gcds-grid/stories/overview.mdx index a07974852..58847cd36 100644 --- a/packages/web/src/components/gcds-grid/stories/overview.mdx +++ b/packages/web/src/components/gcds-grid/stories/overview.mdx @@ -15,6 +15,32 @@ A grid is a responsive, flexible column layout to position elements on a page.
+### Simple grids + +#### Fluid grid + +Each grid column takes up a fractional amount of space within the grid and has no fixed width restrictions. The grid and its columns scale to the size of the viewport. This example has 4 columns for large viewports, 2 columns for medium viewports, and 1 column for smaller viewports. + + + +#### Fixed width grid + +In fixed width grids each grid column has a fixed minimum and a maximum width to limit how wide they will span on any screen size. The columns scale until they either reach their minimum or their maximum width. Once a grid column reaches its minimum width, it gets moved to the next row if the space on the current row becomes smaller than its minimum width. In this example each grid column has a minimum width of 100px and a maximum width of 300px. + + + +### Hybrid grid + +Hybrid grid columns include either a minimum or a maximum width and one fractional width. In this example each grid column is responsive with a minimum width of 400px and no maximum width which means it takes up the available space. + + + +### Individually sized grid + +When using individually sized grid columns, the grid columns define their own size. Each grid column can define a base, tablet (optional) and desktop (optional) size. + + + ### Grid columns #### Columns @@ -35,24 +61,10 @@ Use the `columns-desktop` property to define your layout for larger screens **(6 -### Equal width column - -#### Without width restrictions - -Opt out of setting the minimum and maximum width when you want to design equal-width columns without width restrictions. This will allow the grid and its columns to scale to the size of the viewport. - - - -#### Setting a minimum und maximum width - -Set the minimum and maximum width to design equal-width columns with restrictions to limit how wide they will span on any screen size. - - - ## Resources {/* prettier-ignore */} -
    +
    • Guidance
      • diff --git a/packages/web/src/components/gcds-grid/test/gcds-grid.spec.ts b/packages/web/src/components/gcds-grid/test/gcds-grid.spec.ts index 54580f1de..3ef3f047b 100644 --- a/packages/web/src/components/gcds-grid/test/gcds-grid.spec.ts +++ b/packages/web/src/components/gcds-grid/test/gcds-grid.spec.ts @@ -6,13 +6,13 @@ describe('gcds-grid', () => { const { root } = await newSpecPage({ components: [GcdsGrid], html: ` - + `, }); expect(root).toEqualHtml(` - + -
        +
        @@ -24,13 +24,13 @@ describe('gcds-grid', () => { const { root } = await newSpecPage({ components: [GcdsGrid], html: ` - + `, }); expect(root).toEqualHtml(` - + -
          +
          @@ -42,13 +42,13 @@ describe('gcds-grid', () => { const { root } = await newSpecPage({ components: [GcdsGrid], html: ` - + `, }); expect(root).toEqualHtml(` - + -
            +
            diff --git a/packages/web/src/index.html b/packages/web/src/index.html index 0ab536b48..003522d8e 100644 --- a/packages/web/src/index.html +++ b/packages/web/src/index.html @@ -154,7 +154,6 @@ columns-desktop="1fr 1fr 1fr" columns-tablet="1fr 1fr" columns="1fr" - gap="250" > - Grid + Grids + + Simple grids + + Fluid grid + + Each grid column takes up a fractional amount of space within the grid + and has no fixed width restrictions. The grid and its columns scale to + the size of the viewport. This example has 4 columns for large + viewports, 2 columns for medium viewports, and 1 column for smaller + viewports. + -

            - Lorem Ipsum has been the industry's standard dummy text ever since the - 1500s, when an unknown printer took a galley of type and scrambled it - to make a type specimen book. +

            + This is some example content to display the grid component.

            -

            - Lorem Ipsum has been the industry's standard dummy text ever since the - 1500s, when an unknown printer took a galley of type and scrambled it - to make a type specimen book. +

            + This is some example content to display the grid component.

            -

            - Lorem Ipsum has been the industry's standard dummy text ever since the - 1500s, when an unknown printer took a galley of type and scrambled it - to make a type specimen book. +

            + This is some example content to display the grid component.

            -

            - Lorem Ipsum has been the industry's standard dummy text ever since the - 1500s, when an unknown printer took a galley of type and scrambled it - to make a type specimen book. + + + Fixed grid + + In fixed width grids each grid column has a fixed minimum and a maximum + width to limit how wide they will span on any screen size. The columns + scale until they either reach their minimum or their maximum width. Once + a grid column reaches its minimum width, it gets moved to the next row + if the space on the current row becomes smaller than its minimum width. + In this example each grid column has a minimum width of 100px and a + maximum width of 300px. + + +

            + This is some example content to display the grid component.

            +

            + This is some example content to display the grid component. +

            +

            + This is some example content to display the grid component. +

            +             + + Hybrid grid + + Hybrid grid columns include either a minimum or a maximum width and one + fractional width. In this example each grid column is responsive with a + minimum width of 400px and no maximum width which means it takes up the + available space. + + +

            + This is some example content to display the grid component. +

            +

            + This is some example content to display the grid component. +

            +             + + Individually sized grid + + When using individually sized grid columns, the grid columns define + their own size. Each grid column can define a base, tablet (optional) + and desktop (optional) size. + + + +

            + Base: 1/1, tablet: 3/6, desktop: 6/12 +

            +             + +

            + Base: 1/1, tablet: 3/6, desktop: 6/12 +

            +             + + +

            + Base: 1/1, tablet: 6/6, desktop: 4/12 +

            +             + +

            + Base: 1/1, tablet: 6/6, desktop: 4/12 +

            +             + +

            + Base: 1/1, tablet: 6/6, desktop: 4/12 +

            +             + + +

            B: 1, t: 2, d: 3

            +             + +

            + Base: 1/1, tablet: 2/6, desktop: 6/12 +

            +             + +

            B: 1, t: 2, d: 3

            +             + + +

            + Base + tablet + desktop full width +

            +
            From 5a0bd5c56ea8d59f4798ee21c385302598b2d501 Mon Sep 17 00:00:00 2001 From: Melanie Boeckmann Date: Wed, 13 Dec 2023 16:44:07 -0800 Subject: [PATCH 04/10] fix storybook resources link (#357) fix storyboo resources link --- packages/web/.storybook/preview-head.html | 4 ++-- .../web/src/components/gcds-breadcrumbs/stories/overview.mdx | 2 +- packages/web/src/components/gcds-button/stories/overview.mdx | 2 +- packages/web/src/components/gcds-card/stories/overview.mdx | 2 +- .../web/src/components/gcds-checkbox/stories/overview.mdx | 2 +- .../web/src/components/gcds-container/stories/overview.mdx | 2 +- .../src/components/gcds-date-modified/stories/overview.mdx | 2 +- packages/web/src/components/gcds-details/stories/overview.mdx | 2 +- .../src/components/gcds-error-message/stories/overview.mdx | 2 +- .../src/components/gcds-error-summary/stories/overview.mdx | 2 +- .../web/src/components/gcds-fieldset/stories/overview.mdx | 2 +- .../src/components/gcds-file-uploader/stories/overview.mdx | 2 +- packages/web/src/components/gcds-footer/stories/overview.mdx | 2 +- packages/web/src/components/gcds-header/stories/overview.mdx | 2 +- packages/web/src/components/gcds-heading/stories/overview.mdx | 2 +- packages/web/src/components/gcds-icon/stories/overview.mdx | 2 +- packages/web/src/components/gcds-input/stories/overview.mdx | 2 +- .../web/src/components/gcds-lang-toggle/stories/overview.mdx | 2 +- packages/web/src/components/gcds-link/stories/overview.mdx | 2 +- .../web/src/components/gcds-nav-group/stories/overview.mdx | 2 +- .../web/src/components/gcds-nav-link/stories/overview.mdx | 2 +- .../web/src/components/gcds-pagination/stories/overview.mdx | 2 +- packages/web/src/components/gcds-radio/stories/overview.mdx | 2 +- packages/web/src/components/gcds-search/stories/overview.mdx | 2 +- packages/web/src/components/gcds-select/stories/overview.mdx | 2 +- .../web/src/components/gcds-side-nav/stories/overview.mdx | 2 +- .../web/src/components/gcds-signature/stories/overview.mdx | 2 +- packages/web/src/components/gcds-sr-only/stories/overview.mdx | 2 +- packages/web/src/components/gcds-stepper/stories/overview.mdx | 2 +- packages/web/src/components/gcds-text/stories/overview.mdx | 2 +- .../web/src/components/gcds-textarea/stories/overview.mdx | 2 +- packages/web/src/components/gcds-top-nav/stories/overview.mdx | 2 +- .../web/src/components/gcds-topic-menu/stories/overview.mdx | 2 +- .../src/components/gcds-verify-banner/stories/overview.mdx | 2 +- 34 files changed, 35 insertions(+), 35 deletions(-) diff --git a/packages/web/.storybook/preview-head.html b/packages/web/.storybook/preview-head.html index 3cf27a5aa..7d7e285fc 100644 --- a/packages/web/.storybook/preview-head.html +++ b/packages/web/.storybook/preview-head.html @@ -308,11 +308,11 @@ } .resources-list { - margin: var(--gcds-spacing-400) 0; + margin: var(--gcds-spacing-400) 0 !important; } .resources-list li { - margin: 0 0 var(--gcds-spacing-300); + margin: 0 0 var(--gcds-spacing-300) !important; } /* ----- COMPONENT SPECIFIC ----- */ diff --git a/packages/web/src/components/gcds-breadcrumbs/stories/overview.mdx b/packages/web/src/components/gcds-breadcrumbs/stories/overview.mdx index 456359ff6..7f5685437 100644 --- a/packages/web/src/components/gcds-breadcrumbs/stories/overview.mdx +++ b/packages/web/src/components/gcds-breadcrumbs/stories/overview.mdx @@ -28,7 +28,7 @@ A path to the current page from each preceding level of the site’s hierarchy. ## Resources {/* prettier-ignore */} -
              +
              • Guidance
                • diff --git a/packages/web/src/components/gcds-button/stories/overview.mdx b/packages/web/src/components/gcds-button/stories/overview.mdx index 8f50cb268..ffadfde61 100644 --- a/packages/web/src/components/gcds-button/stories/overview.mdx +++ b/packages/web/src/components/gcds-button/stories/overview.mdx @@ -85,7 +85,7 @@ A button is an interactive object that highlights an important or common action. ## Resources {/* prettier-ignore */} -
                  +
                  • Guidance
                    • diff --git a/packages/web/src/components/gcds-card/stories/overview.mdx b/packages/web/src/components/gcds-card/stories/overview.mdx index ad1fa0761..952b69d3d 100644 --- a/packages/web/src/components/gcds-card/stories/overview.mdx +++ b/packages/web/src/components/gcds-card/stories/overview.mdx @@ -32,7 +32,7 @@ A card is a box containing structured, actionable content on a single topic. ## Resources {/* prettier-ignore */} -
                      +
                      • Guidance
                        • diff --git a/packages/web/src/components/gcds-checkbox/stories/overview.mdx b/packages/web/src/components/gcds-checkbox/stories/overview.mdx index 7aee64816..dafe9d5b1 100644 --- a/packages/web/src/components/gcds-checkbox/stories/overview.mdx +++ b/packages/web/src/components/gcds-checkbox/stories/overview.mdx @@ -40,7 +40,7 @@ A checkbox is a set of options for one or multiple selections. ## Resources {/* prettier-ignore */} -
                          +
                          • Guidance
                            • diff --git a/packages/web/src/components/gcds-container/stories/overview.mdx b/packages/web/src/components/gcds-container/stories/overview.mdx index ac1aa8220..aa7e68f5b 100644 --- a/packages/web/src/components/gcds-container/stories/overview.mdx +++ b/packages/web/src/components/gcds-container/stories/overview.mdx @@ -56,7 +56,7 @@ A box to group content by limiting the width. ## Resources {/* prettier-ignore */} -
                              +
                              • Guidance
                                • diff --git a/packages/web/src/components/gcds-date-modified/stories/overview.mdx b/packages/web/src/components/gcds-date-modified/stories/overview.mdx index a81467d62..5a7a6cf66 100644 --- a/packages/web/src/components/gcds-date-modified/stories/overview.mdx +++ b/packages/web/src/components/gcds-date-modified/stories/overview.mdx @@ -38,7 +38,7 @@ A timestamp of the last page update. ## Resources {/* prettier-ignore */} -
                                  +
                                  • Guidance
                                    • diff --git a/packages/web/src/components/gcds-details/stories/overview.mdx b/packages/web/src/components/gcds-details/stories/overview.mdx index cbd9e0775..8c8f31e7a 100644 --- a/packages/web/src/components/gcds-details/stories/overview.mdx +++ b/packages/web/src/components/gcds-details/stories/overview.mdx @@ -28,7 +28,7 @@ Details is an interactive switch for a person to expand or collapse content. ## Resources {/* prettier-ignore */} -
                                      +
                                      • Guidance
                                        • diff --git a/packages/web/src/components/gcds-error-message/stories/overview.mdx b/packages/web/src/components/gcds-error-message/stories/overview.mdx index 2271e15d5..4a7a61eaf 100644 --- a/packages/web/src/components/gcds-error-message/stories/overview.mdx +++ b/packages/web/src/components/gcds-error-message/stories/overview.mdx @@ -22,7 +22,7 @@ An error message is a description of a problem blocking a user goal. ## Resources {/* prettier-ignore */} -
                                          +
                                          • Guidance
                                            • diff --git a/packages/web/src/components/gcds-error-summary/stories/overview.mdx b/packages/web/src/components/gcds-error-summary/stories/overview.mdx index 9b919ab38..2ca3e4eb9 100644 --- a/packages/web/src/components/gcds-error-summary/stories/overview.mdx +++ b/packages/web/src/components/gcds-error-summary/stories/overview.mdx @@ -22,7 +22,7 @@ An error summary is a list of user errors in a form. ## Resources {/* prettier-ignore */} -
                                              +
                                              • Guidance
                                                • diff --git a/packages/web/src/components/gcds-fieldset/stories/overview.mdx b/packages/web/src/components/gcds-fieldset/stories/overview.mdx index 4d041f956..8c45561cd 100644 --- a/packages/web/src/components/gcds-fieldset/stories/overview.mdx +++ b/packages/web/src/components/gcds-fieldset/stories/overview.mdx @@ -36,7 +36,7 @@ A fieldset is a group of multiple form components or elements. ## Resources {/* prettier-ignore */} -
                                                  +
                                                  • Guidance
                                                    • diff --git a/packages/web/src/components/gcds-file-uploader/stories/overview.mdx b/packages/web/src/components/gcds-file-uploader/stories/overview.mdx index b643282f9..39bd81cce 100644 --- a/packages/web/src/components/gcds-file-uploader/stories/overview.mdx +++ b/packages/web/src/components/gcds-file-uploader/stories/overview.mdx @@ -86,7 +86,7 @@ By default all file formats are allowed. ## Resources {/* prettier-ignore */} -
                                                      +
                                                      • Guidance
                                                        • diff --git a/packages/web/src/components/gcds-footer/stories/overview.mdx b/packages/web/src/components/gcds-footer/stories/overview.mdx index 88c4d6cc9..b35dee49e 100644 --- a/packages/web/src/components/gcds-footer/stories/overview.mdx +++ b/packages/web/src/components/gcds-footer/stories/overview.mdx @@ -32,7 +32,7 @@ The footer is the responsive Government of Canada branded footer landmark. ## Resources {/* prettier-ignore */} -
                                                          +
                                                          • Guidance
                                                            • diff --git a/packages/web/src/components/gcds-header/stories/overview.mdx b/packages/web/src/components/gcds-header/stories/overview.mdx index ea3ded1d8..ca3e4e6ae 100644 --- a/packages/web/src/components/gcds-header/stories/overview.mdx +++ b/packages/web/src/components/gcds-header/stories/overview.mdx @@ -48,7 +48,7 @@ The header is the responsive Government of Canada branded header landmark. ## Resources {/* prettier-ignore */} -
                                                              +
                                                              • Guidance
                                                                • diff --git a/packages/web/src/components/gcds-heading/stories/overview.mdx b/packages/web/src/components/gcds-heading/stories/overview.mdx index b608e9a67..d4a5b61b0 100644 --- a/packages/web/src/components/gcds-heading/stories/overview.mdx +++ b/packages/web/src/components/gcds-heading/stories/overview.mdx @@ -44,7 +44,7 @@ A title that structures content by creating levels of hierarchy that organize pa ## Resources {/* prettier-ignore */} -
                                                                  +
                                                                  • Guidance
                                                                    • diff --git a/packages/web/src/components/gcds-icon/stories/overview.mdx b/packages/web/src/components/gcds-icon/stories/overview.mdx index 3c14e4e45..45ca6129c 100644 --- a/packages/web/src/components/gcds-icon/stories/overview.mdx +++ b/packages/web/src/components/gcds-icon/stories/overview.mdx @@ -48,7 +48,7 @@ If you are using an icon by itself, use the `label` to ensure that it has the pr ## Resources {/* prettier-ignore */} -
                                                                      +
                                                                      • Guidance
                                                                        • diff --git a/packages/web/src/components/gcds-input/stories/overview.mdx b/packages/web/src/components/gcds-input/stories/overview.mdx index 9fc6ebb06..7797992db 100644 --- a/packages/web/src/components/gcds-input/stories/overview.mdx +++ b/packages/web/src/components/gcds-input/stories/overview.mdx @@ -62,7 +62,7 @@ An input is a space to enter short-form information in response to a question or ## Resources {/* prettier-ignore */} -
                                                                          +
                                                                          • Guidance
                                                                            • diff --git a/packages/web/src/components/gcds-lang-toggle/stories/overview.mdx b/packages/web/src/components/gcds-lang-toggle/stories/overview.mdx index 36e888e3e..bafde0208 100644 --- a/packages/web/src/components/gcds-lang-toggle/stories/overview.mdx +++ b/packages/web/src/components/gcds-lang-toggle/stories/overview.mdx @@ -28,7 +28,7 @@ The language toggle is a link to the same content in the other Official Language ## Resources {/* prettier-ignore */} -
                                                                              +
                                                                              • Guidance
                                                                                • diff --git a/packages/web/src/components/gcds-link/stories/overview.mdx b/packages/web/src/components/gcds-link/stories/overview.mdx index 0fd05b4d5..36f9b3ab2 100644 --- a/packages/web/src/components/gcds-link/stories/overview.mdx +++ b/packages/web/src/components/gcds-link/stories/overview.mdx @@ -48,7 +48,7 @@ A navigational element that allows users to navigate to a new page, website or s ## Resources {/* prettier-ignore */} -
                                                                                  +
                                                                                  • Guidance
                                                                                    • diff --git a/packages/web/src/components/gcds-nav-group/stories/overview.mdx b/packages/web/src/components/gcds-nav-group/stories/overview.mdx index d24778cb2..eaaaee436 100644 --- a/packages/web/src/components/gcds-nav-group/stories/overview.mdx +++ b/packages/web/src/components/gcds-nav-group/stories/overview.mdx @@ -38,7 +38,7 @@ import * as NavGroup from './gcds-nav-group.stories'; ## Resources {/* prettier-ignore */} -
                                                                                      +
                                                                                      • Guidance
                                                                                        • diff --git a/packages/web/src/components/gcds-nav-link/stories/overview.mdx b/packages/web/src/components/gcds-nav-link/stories/overview.mdx index ebbe852f5..e8e697dd4 100644 --- a/packages/web/src/components/gcds-nav-link/stories/overview.mdx +++ b/packages/web/src/components/gcds-nav-link/stories/overview.mdx @@ -34,7 +34,7 @@ import * as NavLink from './gcds-nav-link.stories'; ## Resources {/* prettier-ignore */} -
                                                                                          +
                                                                                          • Guidance
                                                                                            • diff --git a/packages/web/src/components/gcds-pagination/stories/overview.mdx b/packages/web/src/components/gcds-pagination/stories/overview.mdx index f351cdbb7..c517601ea 100644 --- a/packages/web/src/components/gcds-pagination/stories/overview.mdx +++ b/packages/web/src/components/gcds-pagination/stories/overview.mdx @@ -50,7 +50,7 @@ Pagination is a division of content into multiple linked pages. ## Resources {/* prettier-ignore */} -
                                                                                              +
                                                                                              • Guidance
                                                                                                • diff --git a/packages/web/src/components/gcds-radio/stories/overview.mdx b/packages/web/src/components/gcds-radio/stories/overview.mdx index 9f50ac3d1..7f75436ea 100644 --- a/packages/web/src/components/gcds-radio/stories/overview.mdx +++ b/packages/web/src/components/gcds-radio/stories/overview.mdx @@ -36,7 +36,7 @@ A radio is a set of options for a single selection. ## Resources {/* prettier-ignore */} -
                                                                                                  +
                                                                                                  • Guidance
                                                                                                    • diff --git a/packages/web/src/components/gcds-search/stories/overview.mdx b/packages/web/src/components/gcds-search/stories/overview.mdx index 9d7bc625d..b87a52420 100644 --- a/packages/web/src/components/gcds-search/stories/overview.mdx +++ b/packages/web/src/components/gcds-search/stories/overview.mdx @@ -32,7 +32,7 @@ Search is a way to enter keywords to find relevant information. ## Resources {/* prettier-ignore */} -
                                                                                                      +
                                                                                                      • Guidance
                                                                                                        • diff --git a/packages/web/src/components/gcds-select/stories/overview.mdx b/packages/web/src/components/gcds-select/stories/overview.mdx index 3f503b919..cbec992b5 100644 --- a/packages/web/src/components/gcds-select/stories/overview.mdx +++ b/packages/web/src/components/gcds-select/stories/overview.mdx @@ -46,7 +46,7 @@ A list of options with a single-option choice. ## Resources {/* prettier-ignore */} -
                                                                                                          +
                                                                                                          • Guidance
                                                                                                            • diff --git a/packages/web/src/components/gcds-side-nav/stories/overview.mdx b/packages/web/src/components/gcds-side-nav/stories/overview.mdx index df77d1fad..54072677c 100644 --- a/packages/web/src/components/gcds-side-nav/stories/overview.mdx +++ b/packages/web/src/components/gcds-side-nav/stories/overview.mdx @@ -22,7 +22,7 @@ A side navigation is a vertical list of page links on the left side of the scree ## Resources {/* prettier-ignore */} -
                                                                                                              +
                                                                                                              • Guidance
                                                                                                                • diff --git a/packages/web/src/components/gcds-signature/stories/overview.mdx b/packages/web/src/components/gcds-signature/stories/overview.mdx index 4881bbef6..9879b9791 100644 --- a/packages/web/src/components/gcds-signature/stories/overview.mdx +++ b/packages/web/src/components/gcds-signature/stories/overview.mdx @@ -73,7 +73,7 @@ The signature is the Government of Canada landmark identifier found in the heade ## Resources {/* prettier-ignore */} -
                                                                                                                  +
                                                                                                                  • Guidance
                                                                                                                    • diff --git a/packages/web/src/components/gcds-sr-only/stories/overview.mdx b/packages/web/src/components/gcds-sr-only/stories/overview.mdx index 530bad4a6..5d8968c96 100644 --- a/packages/web/src/components/gcds-sr-only/stories/overview.mdx +++ b/packages/web/src/components/gcds-sr-only/stories/overview.mdx @@ -12,7 +12,7 @@ _Also called: visually hidden, assistive text._ ## Resources {/* prettier-ignore */} -
                                                                                                                      +
                                                                                                                      • Guidance
                                                                                                                        • diff --git a/packages/web/src/components/gcds-stepper/stories/overview.mdx b/packages/web/src/components/gcds-stepper/stories/overview.mdx index d06ca5856..2f977ff89 100644 --- a/packages/web/src/components/gcds-stepper/stories/overview.mdx +++ b/packages/web/src/components/gcds-stepper/stories/overview.mdx @@ -28,7 +28,7 @@ A stepper is a progress tracker for a multi-step process. ## Resources {/* prettier-ignore */} -
                                                                                                                          +
                                                                                                                          • Guidance
                                                                                                                            • diff --git a/packages/web/src/components/gcds-text/stories/overview.mdx b/packages/web/src/components/gcds-text/stories/overview.mdx index 424d276e8..094b398a0 100644 --- a/packages/web/src/components/gcds-text/stories/overview.mdx +++ b/packages/web/src/components/gcds-text/stories/overview.mdx @@ -52,7 +52,7 @@ Text is a paragraph displaying non-heading content with matching GC Design Syste ## Resources {/* prettier-ignore */} -
                                                                                                                              +
                                                                                                                              • Guidance
                                                                                                                                • diff --git a/packages/web/src/components/gcds-textarea/stories/overview.mdx b/packages/web/src/components/gcds-textarea/stories/overview.mdx index 24f1d8962..1df4e511e 100644 --- a/packages/web/src/components/gcds-textarea/stories/overview.mdx +++ b/packages/web/src/components/gcds-textarea/stories/overview.mdx @@ -44,7 +44,7 @@ A text area is a space to enter long-form information in response to a question ## Resources {/* prettier-ignore */} -
                                                                                                                                  +
                                                                                                                                  • Guidance
                                                                                                                                    • diff --git a/packages/web/src/components/gcds-top-nav/stories/overview.mdx b/packages/web/src/components/gcds-top-nav/stories/overview.mdx index 15cf7af52..15c8c8adc 100644 --- a/packages/web/src/components/gcds-top-nav/stories/overview.mdx +++ b/packages/web/src/components/gcds-top-nav/stories/overview.mdx @@ -38,7 +38,7 @@ A top navigation is a horizontal list of page links. ## Resources {/* prettier-ignore */} -
                                                                                                                                      +
                                                                                                                                      • Guidance
                                                                                                                                        • diff --git a/packages/web/src/components/gcds-topic-menu/stories/overview.mdx b/packages/web/src/components/gcds-topic-menu/stories/overview.mdx index 084d5b93a..f03fd7fbb 100644 --- a/packages/web/src/components/gcds-topic-menu/stories/overview.mdx +++ b/packages/web/src/components/gcds-topic-menu/stories/overview.mdx @@ -30,7 +30,7 @@ Navigate to the top tasks from all Government of Canada websites. ## Resources {/* prettier-ignore */} -
                                                                                                                                          +
                                                                                                                                          • Guidance
                                                                                                                                            • diff --git a/packages/web/src/components/gcds-verify-banner/stories/overview.mdx b/packages/web/src/components/gcds-verify-banner/stories/overview.mdx index 5f08579c2..e9e956b71 100644 --- a/packages/web/src/components/gcds-verify-banner/stories/overview.mdx +++ b/packages/web/src/components/gcds-verify-banner/stories/overview.mdx @@ -50,7 +50,7 @@ import * as VerifyBanner from './gcds-verify-banner.stories'; ## Resources {/* prettier-ignore */} -
                                                                                                                                              +
                                                                                                                                              • Guidance
                                                                                                                                                • From dfd1cee24bb628328ca724b7bde383c25886f031 Mon Sep 17 00:00:00 2001 From: "sre-read-write[bot]" <92993749+sre-read-write[bot]@users.noreply.github.com> Date: Mon, 18 Dec 2023 09:14:54 -0800 Subject: [PATCH 05/10] chore: synced file(s) with cds-snc/site-reliability-engineering (#360) * chore: synced local '.github/workflows/s3-backup.yml' with remote 'tools/sre_file_sync/s3-backup.yml' * chore: synced local '.github/workflows/export_github_data.yml' with remote 'tools/sre_file_sync/export_github_data.yml' * chore: synced local '.github/workflows/ossf-scorecard.yml' with remote 'tools/sre_file_sync/ossf-scorecard.yml' --------- Co-authored-by: sre-read-write[bot] <92993749+sre-read-write[bot]@users.noreply.github.com> --- .github/workflows/export_github_data.yml | 2 +- .github/workflows/ossf-scorecard.yml | 4 ++-- .github/workflows/s3-backup.yml | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/.github/workflows/export_github_data.yml b/.github/workflows/export_github_data.yml index 941e3ba2f..d12fdc136 100644 --- a/.github/workflows/export_github_data.yml +++ b/.github/workflows/export_github_data.yml @@ -14,7 +14,7 @@ jobs: DNS_PROXY_FORWARDTOSENTINEL: "true" DNS_PROXY_LOGANALYTICSWORKSPACEID: ${{ secrets.LOG_ANALYTICS_WORKSPACE_ID }} DNS_PROXY_LOGANALYTICSSHAREDKEY: ${{ secrets.LOG_ANALYTICS_WORKSPACE_KEY }} - - uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 # v4.1.0 + - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1 - name: Export Data uses: cds-snc/github-repository-metadata-exporter@main with: diff --git a/.github/workflows/ossf-scorecard.yml b/.github/workflows/ossf-scorecard.yml index c85904fca..d499643c6 100644 --- a/.github/workflows/ossf-scorecard.yml +++ b/.github/workflows/ossf-scorecard.yml @@ -20,12 +20,12 @@ jobs: steps: - name: "Checkout code" - uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 # v4.1.0 + uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1 with: persist-credentials: false - name: "Run analysis" - uses: ossf/scorecard-action@2fa1e2fa153141e2950c7e1299ed05e2081ead0c + uses: ossf/scorecard-action@75cb7af1033cfb77c9fc7d8abc30420008f558f4 with: results_file: ossf-results.json results_format: json diff --git a/.github/workflows/s3-backup.yml b/.github/workflows/s3-backup.yml index 61e9aab06..eb41d4c82 100644 --- a/.github/workflows/s3-backup.yml +++ b/.github/workflows/s3-backup.yml @@ -10,7 +10,7 @@ jobs: steps: - name: Checkout - uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 # v4.1.0 + uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1 with: fetch-depth: 0 # retrieve all history From 34b392d39f2ca0158fd608e46dcfc0509bbc69c0 Mon Sep 17 00:00:00 2001 From: Melanie Boeckmann Date: Mon, 18 Dec 2023 13:44:48 -0800 Subject: [PATCH 06/10] feat: add light link-variant to link component (#358) * feat: add light link-role to link component * pr feedback * rename link-role prop to link-variant --- .../src/lib/stencil-generated/components.ts | 4 +- packages/web/.storybook/preview-head.html | 6 ++ packages/web/src/components.d.ts | 8 +++ .../src/components/gcds-link/gcds-link.css | 7 ++- .../src/components/gcds-link/gcds-link.tsx | 22 ++++++- .../web/src/components/gcds-link/readme.md | 21 +++---- .../gcds-link/stories/gcds-link.stories.js | 59 +++++++++++++++++++ .../components/gcds-link/stories/overview.mdx | 10 ++++ .../gcds-link/test/gcds-link.spec.ts | 17 ++++++ packages/web/src/index.html | 31 ++++++---- 10 files changed, 159 insertions(+), 26 deletions(-) diff --git a/packages/angular/src/lib/stencil-generated/components.ts b/packages/angular/src/lib/stencil-generated/components.ts index e8a15d2ad..0e2df79ce 100644 --- a/packages/angular/src/lib/stencil-generated/components.ts +++ b/packages/angular/src/lib/stencil-generated/components.ts @@ -623,14 +623,14 @@ export declare interface GcdsLangToggle extends Components.GcdsLangToggle {} @ProxyCmp({ - inputs: ['display', 'download', 'external', 'href', 'rel', 'size', 'target', 'type'] + inputs: ['display', 'download', 'external', 'href', 'linkVariant', 'rel', 'size', 'target', 'type'] }) @Component({ selector: 'gcds-link', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['display', 'download', 'external', 'href', 'rel', 'size', 'target', 'type'], + inputs: ['display', 'download', 'external', 'href', 'linkVariant', 'rel', 'size', 'target', 'type'], }) export class GcdsLink { protected el: HTMLElement; diff --git a/packages/web/.storybook/preview-head.html b/packages/web/.storybook/preview-head.html index 7d7e285fc..b19999dfa 100644 --- a/packages/web/.storybook/preview-head.html +++ b/packages/web/.storybook/preview-head.html @@ -351,6 +351,12 @@ border: var(--gcds-border-width-sm) solid var(--gcds-border-default); } + /* gcds-link */ + .sbdocs-preview .docs-story #story--components-link--variant-light { + background: var(--gcds-color-grayscale-900); + padding: var(--gcds-spacing-450); + } + /* gcds-signature */ .sbdocs-preview .docs-story #story--components-signature--signature-white, .sbdocs-preview .docs-story #story--components-signature--wordmark-white { diff --git a/packages/web/src/components.d.ts b/packages/web/src/components.d.ts index af96b5d1c..ea20864da 100644 --- a/packages/web/src/components.d.ts +++ b/packages/web/src/components.d.ts @@ -770,6 +770,10 @@ export namespace Components { * The href attribute specifies the URL of the page the link goes to */ "href": string; + /** + * Sets the main style of the link. + */ + "linkVariant"?: 'default' | 'light'; /** * The rel attribute specifies the relationship between the current document and the linked document */ @@ -2590,6 +2594,10 @@ declare namespace LocalJSX { * The href attribute specifies the URL of the page the link goes to */ "href": string; + /** + * Sets the main style of the link. + */ + "linkVariant"?: 'default' | 'light'; /** * Emitted when the link loses focus. */ diff --git a/packages/web/src/components/gcds-link/gcds-link.css b/packages/web/src/components/gcds-link/gcds-link.css index 53928d3a1..e83cbc65e 100644 --- a/packages/web/src/components/gcds-link/gcds-link.css +++ b/packages/web/src/components/gcds-link/gcds-link.css @@ -16,7 +16,8 @@ background-color: var(--gcds-link-focus-background); color: var(--gcds-link-focus-text); box-shadow: var(--gcds-link-focus-box-shadow); - outline: var(--gcds-link-focus-outline-width) solid var(--gcds-link-focus-background); + outline: var(--gcds-link-focus-outline-width) solid + var(--gcds-link-focus-background); outline-offset: var(--gcds-link-focus-outline-offset); border-color: var(--gcds-link-focus-background); text-decoration: none; @@ -34,6 +35,10 @@ font: inherit; } + &.variant-light { + color: var(--gcds-link-light); + } + &.d-block { display: block; } diff --git a/packages/web/src/components/gcds-link/gcds-link.tsx b/packages/web/src/components/gcds-link/gcds-link.tsx index c8ee59b76..1fb6add38 100644 --- a/packages/web/src/components/gcds-link/gcds-link.tsx +++ b/packages/web/src/components/gcds-link/gcds-link.tsx @@ -27,6 +27,20 @@ export class GcdsLink { * Props */ + /** + * Sets the main style of the link. + */ + @Prop({ mutable: true }) linkVariant?: 'default' | 'light' = 'default'; + + @Watch('linkVariant') + validateLinkVariant(newValue: string) { + const values = ['default', 'light']; + + if (!values.includes(newValue)) { + this.linkVariant = 'default'; + } + } + /** * Set the link size */ @@ -43,7 +57,7 @@ export class GcdsLink { /** * Sets the display behavior of the link */ - @Prop() display?: 'block' | 'inline' = 'inline'; + @Prop({ mutable: true }) display?: 'block' | 'inline' = 'inline'; @Watch('display') validateDisplay(newValue: string) { const values = ['block', 'inline']; @@ -125,6 +139,7 @@ export class GcdsLink { componentWillLoad() { // Validate attributes and set defaults + this.validateLinkVariant(this.linkVariant); this.validateSize(this.size); this.validateDisplay(this.display); @@ -144,6 +159,7 @@ export class GcdsLink { lang, display, href, + linkVariant, rel, target, external, @@ -169,7 +185,9 @@ export class GcdsLink { role="link" tabIndex={0} {...attrs} - class={`link--${size} ${display != 'inline' ? `d-${display}` : ''}`} + class={`link--${size} ${display != 'inline' ? `d-${display}` : ''} ${ + linkVariant != 'default' ? `variant-${linkVariant}` : '' + }`} ref={element => (this.shadowElement = element as HTMLElement)} target={isExternal ? '_blank' : target} rel={isExternal ? 'noopener noreferrer' : rel} diff --git a/packages/web/src/components/gcds-link/readme.md b/packages/web/src/components/gcds-link/readme.md index 8df7212fe..f4a790a5e 100644 --- a/packages/web/src/components/gcds-link/readme.md +++ b/packages/web/src/components/gcds-link/readme.md @@ -7,16 +7,17 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | ----------- | -| `display` | `display` | Sets the display behavior of the link | `"block" \| "inline"` | `'inline'` | -| `download` | `download` | The download attribute specifies that the target (the file specified in the href attribute) will be downloaded when a user clicks on the hyperlink | `string` | `undefined` | -| `external` | `external` | Whether the link is external or not | `boolean` | `false` | -| `href` _(required)_ | `href` | The href attribute specifies the URL of the page the link goes to | `string` | `undefined` | -| `rel` | `rel` | The rel attribute specifies the relationship between the current document and the linked document | `string` | `undefined` | -| `size` | `size` | Set the link size | `"inherit" \| "regular" \| "small"` | `'inherit'` | -| `target` | `target` | The target attribute specifies where to open the linked document | `string` | `'_self'` | -| `type` | `type` | The type specifies the media type of the linked document | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | ----------- | +| `display` | `display` | Sets the display behavior of the link | `"block" \| "inline"` | `'inline'` | +| `download` | `download` | The download attribute specifies that the target (the file specified in the href attribute) will be downloaded when a user clicks on the hyperlink | `string` | `undefined` | +| `external` | `external` | Whether the link is external or not | `boolean` | `false` | +| `href` _(required)_ | `href` | The href attribute specifies the URL of the page the link goes to | `string` | `undefined` | +| `linkVariant` | `link-variant` | Sets the main style of the link. | `"default" \| "light"` | `'default'` | +| `rel` | `rel` | The rel attribute specifies the relationship between the current document and the linked document | `string` | `undefined` | +| `size` | `size` | Set the link size | `"inherit" \| "regular" \| "small"` | `'inherit'` | +| `target` | `target` | The target attribute specifies where to open the linked document | `string` | `'_self'` | +| `type` | `type` | The type specifies the media type of the linked document | `string` | `undefined` | ## Events diff --git a/packages/web/src/components/gcds-link/stories/gcds-link.stories.js b/packages/web/src/components/gcds-link/stories/gcds-link.stories.js index bbfd0f2fe..683fee571 100644 --- a/packages/web/src/components/gcds-link/stories/gcds-link.stories.js +++ b/packages/web/src/components/gcds-link/stories/gcds-link.stories.js @@ -33,6 +33,15 @@ export default { defaultValue: { summary: '-' }, }, }, + linkVariant: { + name: 'link-variant', + control: { type: 'select' }, + options: ['default', 'light'], + table: { + type: { summary: 'string' }, + defaultValue: { summary: 'default' }, + }, + }, rel: { control: 'text', table: { @@ -88,6 +97,8 @@ This is an example of ` This is an example of ${args.default} link + This is an example of ${args.default} link `; +const TemplateVariant = args => + ` + +${args.default} + + +${args.default} +`.replace(/ null/g, ''); + const TemplatePlayground = args => ` ` `; // ------ Link Default ------ + export const Default = Template.bind({}); Default.args = { display: 'inline', href: '#', + linkVariant: 'default', rel: '', target: '_self', size: 'inherit', @@ -145,10 +176,12 @@ Default.args = { }; // ------ Link events & props ------ + export const Props = Template.bind({}); Props.args = { display: 'inline', href: '#', + linkVariant: 'default', rel: '', target: '_self', size: 'inherit', @@ -158,10 +191,13 @@ Props.args = { default: 'a GCDS Link component', }; +// ------ Link with icon ------ + export const External = Template.bind({}); External.args = { display: 'inline', href: 'http://design-system.alpha.canada.ca', + linkVariant: 'default', rel: '', target: '_blank', size: 'inherit', @@ -175,6 +211,7 @@ export const Download = Template.bind({}); Download.args = { href: 'long-filename.pdf', display: 'inline', + linkVariant: 'default', target: '_self', size: 'inherit', download: 'file.pdf', @@ -185,6 +222,7 @@ Download.args = { export const Email = Template.bind({}); Email.args = { display: 'inline', + linkVariant: 'default', target: '_self', size: 'inherit', href: 'mailto:test@test.com?subject=Test%20Email', @@ -194,16 +232,20 @@ Email.args = { export const Phone = Template.bind({}); Phone.args = { display: 'inline', + linkVariant: 'default', target: '_self', size: 'inherit', href: 'tel:1234567890', default: 'a phone number', }; +// ------ Link sizes ------ + export const SizesSmall = Template.bind({}); SizesSmall.args = { display: 'inline', href: '#', + linkVariant: 'default', rel: '', target: '_self', size: 'small', @@ -217,6 +259,7 @@ export const SizesRegular = Template.bind({}); SizesRegular.args = { display: 'inline', href: '#', + linkVariant: 'default', rel: '', target: '_self', size: 'regular', @@ -230,6 +273,7 @@ export const SizesInherit = TemplateSizeInherit.bind({}); SizesInherit.args = { display: 'inline', href: '#', + linkVariant: 'default', rel: '', target: '_self', size: 'inherit', @@ -239,12 +283,27 @@ SizesInherit.args = { default: 'a size inherit', }; +// ------ Link roles ------ + +export const VariantDefault = TemplateVariant.bind({}); +VariantDefault.args = { + default: 'This is a link using the default link variant.', + linkVariant: 'default', +}; + +export const VariantLight = TemplateVariant.bind({}); +VariantLight.args = { + default: 'This is a link using the light link variant.', + linkVariant: 'light', +}; + // ------ Link playground ------ export const Playground = TemplatePlayground.bind({}); Playground.args = { display: 'inline', href: '#', + linkVariant: 'default', rel: '', target: '_self', size: 'inherit', diff --git a/packages/web/src/components/gcds-link/stories/overview.mdx b/packages/web/src/components/gcds-link/stories/overview.mdx index 36f9b3ab2..a3f36b615 100644 --- a/packages/web/src/components/gcds-link/stories/overview.mdx +++ b/packages/web/src/components/gcds-link/stories/overview.mdx @@ -45,6 +45,16 @@ A navigational element that allows users to navigate to a new page, website or s +### Variants + +#### Default + + + +#### Light + + + ## Resources {/* prettier-ignore */} diff --git a/packages/web/src/components/gcds-link/test/gcds-link.spec.ts b/packages/web/src/components/gcds-link/test/gcds-link.spec.ts index cb5ea864e..1c07d727d 100644 --- a/packages/web/src/components/gcds-link/test/gcds-link.spec.ts +++ b/packages/web/src/components/gcds-link/test/gcds-link.spec.ts @@ -254,4 +254,21 @@ describe('gcds-link', () => { `); }); + + it('renders a light link variant', async () => { + const { root } = await newSpecPage({ + components: [GcdsLink], + html: 'Link text', + }); + expect(root).toEqualHtml(` + + + + + + + Link text + + `); + }); }); diff --git a/packages/web/src/index.html b/packages/web/src/index.html index 003522d8e..911ac2044 100644 --- a/packages/web/src/index.html +++ b/packages/web/src/index.html @@ -596,9 +596,13 @@ compare it to regular text.

                                                                                                                                                - This is an external link. + This is an external link. +

                                                                                                                                                This is a @@ -612,9 +616,9 @@

                                                                                                                                                Contact us - via email + + via email + or by phone.

                                                                                                                                                @@ -627,15 +631,20 @@ after this link.

                                                                                                                                                - This is a sample link with a referrerpolicy. + + This is a sample link with a referrerpolicy. +

                                                                                                                                                - Click me! + + Click me! +

                                                                                                                                                +
                                                                                                                                                + + This is a link using the light link role. + +
                                                                                                                                                From ac2ea8c0644fd98c53789cddcdb060c4b744cdcf Mon Sep 17 00:00:00 2001 From: Melanie Boeckmann Date: Wed, 20 Dec 2023 09:34:13 -0800 Subject: [PATCH 07/10] fix: header slots in story (#362) --- .../components/gcds-header/stories/gcds-header.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/web/src/components/gcds-header/stories/gcds-header.stories.tsx b/packages/web/src/components/gcds-header/stories/gcds-header.stories.tsx index 4a5ee9aa8..b21bfecb1 100644 --- a/packages/web/src/components/gcds-header/stories/gcds-header.stories.tsx +++ b/packages/web/src/components/gcds-header/stories/gcds-header.stories.tsx @@ -143,8 +143,8 @@ const Template = args => ${args.lang != 'en' ? `lang="${args.lang}"` : null} > ${args.menu ? `
                                                                                                                                                ${args.menu}
                                                                                                                                                ` : null} - ${args.breadcrumb ? `
                                                                                                                                                ${args.breadcrumb}
                                                                                                                                                ` : null} - ${args.search ? `
                                                                                                                                                ${args.search}
                                                                                                                                                ` : null} + ${args.breadcrumb ? `
                                                                                                                                                ${args.breadcrumb}
                                                                                                                                                ` : null} + ${args.search ? `
                                                                                                                                                ${args.search}
                                                                                                                                                ` : null} ${args.skipTo ? `
                                                                                                                                                ${args.skipTo}
                                                                                                                                                ` : null} ${args.toggle ? `
                                                                                                                                                ${args.toggle}
                                                                                                                                                ` : null} ${args.banner ? `
                                                                                                                                                ${args.banner}
                                                                                                                                                ` : null} From ab0e4042d4db0c580fd61a049bd8a2696d9b3141 Mon Sep 17 00:00:00 2001 From: Melanie Boeckmann Date: Thu, 21 Dec 2023 11:01:03 -0800 Subject: [PATCH 08/10] fix: link variant prop name (#363) --- .../src/lib/stencil-generated/components.ts | 4 +- packages/web/src/components.d.ts | 16 ++-- .../src/components/gcds-link/gcds-link.tsx | 14 ++-- .../web/src/components/gcds-link/readme.md | 22 +++--- .../gcds-link/stories/gcds-link.stories.js | 79 +++++++++---------- .../gcds-link/test/gcds-link.spec.ts | 4 +- packages/web/src/index.html | 2 +- 7 files changed, 67 insertions(+), 74 deletions(-) diff --git a/packages/angular/src/lib/stencil-generated/components.ts b/packages/angular/src/lib/stencil-generated/components.ts index 0e2df79ce..3e40b72ee 100644 --- a/packages/angular/src/lib/stencil-generated/components.ts +++ b/packages/angular/src/lib/stencil-generated/components.ts @@ -623,14 +623,14 @@ export declare interface GcdsLangToggle extends Components.GcdsLangToggle {} @ProxyCmp({ - inputs: ['display', 'download', 'external', 'href', 'linkVariant', 'rel', 'size', 'target', 'type'] + inputs: ['display', 'download', 'external', 'href', 'rel', 'size', 'target', 'type', 'variant'] }) @Component({ selector: 'gcds-link', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['display', 'download', 'external', 'href', 'linkVariant', 'rel', 'size', 'target', 'type'], + inputs: ['display', 'download', 'external', 'href', 'rel', 'size', 'target', 'type', 'variant'], }) export class GcdsLink { protected el: HTMLElement; diff --git a/packages/web/src/components.d.ts b/packages/web/src/components.d.ts index ea20864da..7dae404fe 100644 --- a/packages/web/src/components.d.ts +++ b/packages/web/src/components.d.ts @@ -770,10 +770,6 @@ export namespace Components { * The href attribute specifies the URL of the page the link goes to */ "href": string; - /** - * Sets the main style of the link. - */ - "linkVariant"?: 'default' | 'light'; /** * The rel attribute specifies the relationship between the current document and the linked document */ @@ -790,6 +786,10 @@ export namespace Components { * The type specifies the media type of the linked document */ "type"?: string | undefined; + /** + * Sets the main style of the link. + */ + "variant"?: 'default' | 'light'; } interface GcdsNavGroup { /** @@ -2594,10 +2594,6 @@ declare namespace LocalJSX { * The href attribute specifies the URL of the page the link goes to */ "href": string; - /** - * Sets the main style of the link. - */ - "linkVariant"?: 'default' | 'light'; /** * Emitted when the link loses focus. */ @@ -2626,6 +2622,10 @@ declare namespace LocalJSX { * The type specifies the media type of the linked document */ "type"?: string | undefined; + /** + * Sets the main style of the link. + */ + "variant"?: 'default' | 'light'; } interface GcdsNavGroup { /** diff --git a/packages/web/src/components/gcds-link/gcds-link.tsx b/packages/web/src/components/gcds-link/gcds-link.tsx index 1fb6add38..964ad4468 100644 --- a/packages/web/src/components/gcds-link/gcds-link.tsx +++ b/packages/web/src/components/gcds-link/gcds-link.tsx @@ -30,14 +30,14 @@ export class GcdsLink { /** * Sets the main style of the link. */ - @Prop({ mutable: true }) linkVariant?: 'default' | 'light' = 'default'; + @Prop({ mutable: true }) variant?: 'default' | 'light' = 'default'; - @Watch('linkVariant') - validateLinkVariant(newValue: string) { + @Watch('variant') + validateVariant(newValue: string) { const values = ['default', 'light']; if (!values.includes(newValue)) { - this.linkVariant = 'default'; + this.variant = 'default'; } } @@ -139,7 +139,7 @@ export class GcdsLink { componentWillLoad() { // Validate attributes and set defaults - this.validateLinkVariant(this.linkVariant); + this.validateVariant(this.variant); this.validateSize(this.size); this.validateDisplay(this.display); @@ -159,13 +159,13 @@ export class GcdsLink { lang, display, href, - linkVariant, rel, target, external, download, type, inheritedAttributes, + variant, } = this; const attrs = { @@ -186,7 +186,7 @@ export class GcdsLink { tabIndex={0} {...attrs} class={`link--${size} ${display != 'inline' ? `d-${display}` : ''} ${ - linkVariant != 'default' ? `variant-${linkVariant}` : '' + variant != 'default' ? `variant-${variant}` : '' }`} ref={element => (this.shadowElement = element as HTMLElement)} target={isExternal ? '_blank' : target} diff --git a/packages/web/src/components/gcds-link/readme.md b/packages/web/src/components/gcds-link/readme.md index f4a790a5e..d65f035cf 100644 --- a/packages/web/src/components/gcds-link/readme.md +++ b/packages/web/src/components/gcds-link/readme.md @@ -7,17 +7,17 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | ----------- | -| `display` | `display` | Sets the display behavior of the link | `"block" \| "inline"` | `'inline'` | -| `download` | `download` | The download attribute specifies that the target (the file specified in the href attribute) will be downloaded when a user clicks on the hyperlink | `string` | `undefined` | -| `external` | `external` | Whether the link is external or not | `boolean` | `false` | -| `href` _(required)_ | `href` | The href attribute specifies the URL of the page the link goes to | `string` | `undefined` | -| `linkVariant` | `link-variant` | Sets the main style of the link. | `"default" \| "light"` | `'default'` | -| `rel` | `rel` | The rel attribute specifies the relationship between the current document and the linked document | `string` | `undefined` | -| `size` | `size` | Set the link size | `"inherit" \| "regular" \| "small"` | `'inherit'` | -| `target` | `target` | The target attribute specifies where to open the linked document | `string` | `'_self'` | -| `type` | `type` | The type specifies the media type of the linked document | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | ----------- | +| `display` | `display` | Sets the display behavior of the link | `"block" \| "inline"` | `'inline'` | +| `download` | `download` | The download attribute specifies that the target (the file specified in the href attribute) will be downloaded when a user clicks on the hyperlink | `string` | `undefined` | +| `external` | `external` | Whether the link is external or not | `boolean` | `false` | +| `href` _(required)_ | `href` | The href attribute specifies the URL of the page the link goes to | `string` | `undefined` | +| `rel` | `rel` | The rel attribute specifies the relationship between the current document and the linked document | `string` | `undefined` | +| `size` | `size` | Set the link size | `"inherit" \| "regular" \| "small"` | `'inherit'` | +| `target` | `target` | The target attribute specifies where to open the linked document | `string` | `'_self'` | +| `type` | `type` | The type specifies the media type of the linked document | `string` | `undefined` | +| `variant` | `variant` | Sets the main style of the link. | `"default" \| "light"` | `'default'` | ## Events diff --git a/packages/web/src/components/gcds-link/stories/gcds-link.stories.js b/packages/web/src/components/gcds-link/stories/gcds-link.stories.js index 683fee571..f1f53baf0 100644 --- a/packages/web/src/components/gcds-link/stories/gcds-link.stories.js +++ b/packages/web/src/components/gcds-link/stories/gcds-link.stories.js @@ -33,8 +33,7 @@ export default { defaultValue: { summary: '-' }, }, }, - linkVariant: { - name: 'link-variant', + variant: { control: { type: 'select' }, options: ['default', 'light'], table: { @@ -97,28 +96,24 @@ This is an example of ${args.default} + } ${args.variant != 'default' ? `variant="${args.variant}"` : null} ${ + args.rel ? `rel="${args.rel}"` : null + } ${args.target != '_self' ? `target="${args.target}"` : null} ${ + args.size != 'inherit' && args.size ? `size="${args.size}"` : null + } ${args.external ? `external` : null} ${ + args.download ? `download="${args.download}"` : null + } ${args.type ? `type="${args.type}"` : null}>${args.default}                                                                                                                                                 ${args.default} + } ${args.variant != 'default' ? `variant="${args.variant}"` : null} ${ + args.rel ? `rel="${args.rel}"` : null + } ${args.target != '_self' ? `target="${args.target}"` : null} ${ + args.size != 'inherit' && args.size ? `size="${args.size}"` : null + } ${args.external ? `external` : null} ${ + args.download ? `download="${args.download}"` : null + } ${args.type ? `type="${args.type}"` : null}>${args.default} link. `.replace(/ null/g, ''); @@ -135,27 +130,25 @@ const TemplateVariant = args => ` ${args.default} ${args.default} `.replace(/ null/g, ''); const TemplatePlayground = args => ` ${args.default} +} ${args.variant != 'default' ? `variant="${args.variant}"` : null} ${ + args.rel ? `rel="${args.rel}"` : null +} ${args.target && args.target != '_self' ? `target="${args.target}"` : null} ${ + args.size != 'inherit' && args.size ? `size="${args.size}"` : null +} ${args.external ? `external` : null} ${ + args.download ? `download="${args.download}"` : null +} ${args.type ? `type="${args.type}"` : null}> ${args.default} `; @@ -165,7 +158,7 @@ export const Default = Template.bind({}); Default.args = { display: 'inline', href: '#', - linkVariant: 'default', + variant: 'default', rel: '', target: '_self', size: 'inherit', @@ -181,7 +174,7 @@ export const Props = Template.bind({}); Props.args = { display: 'inline', href: '#', - linkVariant: 'default', + variant: 'default', rel: '', target: '_self', size: 'inherit', @@ -197,7 +190,7 @@ export const External = Template.bind({}); External.args = { display: 'inline', href: 'http://design-system.alpha.canada.ca', - linkVariant: 'default', + variant: 'default', rel: '', target: '_blank', size: 'inherit', @@ -211,7 +204,7 @@ export const Download = Template.bind({}); Download.args = { href: 'long-filename.pdf', display: 'inline', - linkVariant: 'default', + variant: 'default', target: '_self', size: 'inherit', download: 'file.pdf', @@ -222,7 +215,7 @@ Download.args = { export const Email = Template.bind({}); Email.args = { display: 'inline', - linkVariant: 'default', + variant: 'default', target: '_self', size: 'inherit', href: 'mailto:test@test.com?subject=Test%20Email', @@ -232,7 +225,7 @@ Email.args = { export const Phone = Template.bind({}); Phone.args = { display: 'inline', - linkVariant: 'default', + variant: 'default', target: '_self', size: 'inherit', href: 'tel:1234567890', @@ -245,7 +238,7 @@ export const SizesSmall = Template.bind({}); SizesSmall.args = { display: 'inline', href: '#', - linkVariant: 'default', + variant: 'default', rel: '', target: '_self', size: 'small', @@ -259,7 +252,7 @@ export const SizesRegular = Template.bind({}); SizesRegular.args = { display: 'inline', href: '#', - linkVariant: 'default', + variant: 'default', rel: '', target: '_self', size: 'regular', @@ -273,7 +266,7 @@ export const SizesInherit = TemplateSizeInherit.bind({}); SizesInherit.args = { display: 'inline', href: '#', - linkVariant: 'default', + variant: 'default', rel: '', target: '_self', size: 'inherit', @@ -288,13 +281,13 @@ SizesInherit.args = { export const VariantDefault = TemplateVariant.bind({}); VariantDefault.args = { default: 'This is a link using the default link variant.', - linkVariant: 'default', + variant: 'default', }; export const VariantLight = TemplateVariant.bind({}); VariantLight.args = { default: 'This is a link using the light link variant.', - linkVariant: 'light', + variant: 'light', }; // ------ Link playground ------ @@ -303,7 +296,7 @@ export const Playground = TemplatePlayground.bind({}); Playground.args = { display: 'inline', href: '#', - linkVariant: 'default', + variant: 'default', rel: '', target: '_self', size: 'inherit', diff --git a/packages/web/src/components/gcds-link/test/gcds-link.spec.ts b/packages/web/src/components/gcds-link/test/gcds-link.spec.ts index 1c07d727d..792ac5a7c 100644 --- a/packages/web/src/components/gcds-link/test/gcds-link.spec.ts +++ b/packages/web/src/components/gcds-link/test/gcds-link.spec.ts @@ -258,10 +258,10 @@ describe('gcds-link', () => { it('renders a light link variant', async () => { const { root } = await newSpecPage({ components: [GcdsLink], - html: 'Link text', + html: 'Link text', }); expect(root).toEqualHtml(` - + diff --git a/packages/web/src/index.html b/packages/web/src/index.html index 911ac2044..2fedb050c 100644 --- a/packages/web/src/index.html +++ b/packages/web/src/index.html @@ -641,7 +641,7 @@

                                                                                                                                                - + This is a link using the light link role.
                                                                                                                                                From ee16326a0daa8edb126c273f85c85c2a3cf0ef58 Mon Sep 17 00:00:00 2001 From: Ethan Wallace Date: Fri, 22 Dec 2023 08:11:26 -0500 Subject: [PATCH 09/10] fix: File-uploader not validating properly (#364) Fix file-uploader not submitting properly --- .../src/components/gcds-file-uploader/gcds-file-uploader.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/web/src/components/gcds-file-uploader/gcds-file-uploader.tsx b/packages/web/src/components/gcds-file-uploader/gcds-file-uploader.tsx index 130048d5a..9adb6ba99 100644 --- a/packages/web/src/components/gcds-file-uploader/gcds-file-uploader.tsx +++ b/packages/web/src/components/gcds-file-uploader/gcds-file-uploader.tsx @@ -213,7 +213,9 @@ export class GcdsFileUploader { // Validate since the input loses focus when dialog opens if (this.validateOn == 'blur') { - this.validate(); + setTimeout(() => { + this.validate(); + }, 100); } } From 885d57a69d2bfd77391deed869f96d2e6002cda6 Mon Sep 17 00:00:00 2001 From: Daine Trinidad Date: Tue, 9 Jan 2024 14:04:44 -0800 Subject: [PATCH 10/10] chore: release v0.18.0 --- CHANGELOG.md | 20 ++++++++++++++++++++ lerna.json | 2 +- packages/angular/package-lock.json | 4 ++-- packages/angular/package.json | 4 ++-- packages/react/package-lock.json | 6 +++--- packages/react/package.json | 4 ++-- packages/web/package-lock.json | 4 ++-- packages/web/package.json | 2 +- 8 files changed, 33 insertions(+), 13 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7d9c0cf36..57a6c42a0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,26 @@ All notable changes to this project will be documented in this file. +## v0.18.0 + +### New features + +- Grid functionality + - Ability to add individually sized grid columns to grids as well as allowing to set equal height rows. + + +### Minor + +- https://github.com/cds-snc/gcds-components/pull/358 - [34b392d](https://github.com/cds-snc/gcds-components/commit/34b392d39f2ca0158fd608e46dcfc0509bbc69c0) - Add light variant to link component + +### Patch + +- https://github.com/cds-snc/gcds-components/pull/363 - [ab0e404](https://github.com/cds-snc/gcds-components/commit/ab0e4042d4db0c580fd61a049bd8a2696d9b3141) - Link variant property name fix +- https://github.com/cds-snc/gcds-components/pull/364 - [ee16326](https://github.com/cds-snc/gcds-components/commit/ee16326a0daa8edb126c273f85c85c2a3cf0ef58) - File uploader validation fix +- https://github.com/cds-snc/gcds-components/pull/362 - [ac2ea8c](https://github.com/cds-snc/gcds-components/commit/ac2ea8c0644fd98c53789cddcdb060c4b744cdcf) - Updated Header slots in storybook +- https://github.com/cds-snc/gcds-components/pull/357 - [5a0bd5c](https://github.com/cds-snc/gcds-components/commit/5a0bd5c56ea8d59f4798ee21c385302598b2d501) - Fixed storybook resources link +- https://github.com/cds-snc/gcds-components/pull/353 - [e9624f0](https://github.com/cds-snc/gcds-components/commit/e9624f071888db71abbf60b5869dc19d6e49b4b9) - Updated instructions for font awesome in README + ## v0.17.1 ### Patch diff --git a/lerna.json b/lerna.json index 5a6553e08..21eb024f3 100644 --- a/lerna.json +++ b/lerna.json @@ -1,7 +1,7 @@ { "$schema": "node_modules/lerna/schemas/lerna-schema.json", "useNx": true, - "version": "0.17.1", + "version": "0.18.0", "packages": [ "packages/web", "packages/react", diff --git a/packages/angular/package-lock.json b/packages/angular/package-lock.json index 612dc8be8..3c3db2956 100644 --- a/packages/angular/package-lock.json +++ b/packages/angular/package-lock.json @@ -1,12 +1,12 @@ { "name": "@cdssnc/gcds-components-angular", - "version": "0.17.1", + "version": "0.18.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@cdssnc/gcds-components-angular", - "version": "0.17.1", + "version": "0.18.0", "dependencies": { "tslib": "^2.3.0" }, diff --git a/packages/angular/package.json b/packages/angular/package.json index 63548b32f..4ed0c01eb 100644 --- a/packages/angular/package.json +++ b/packages/angular/package.json @@ -1,6 +1,6 @@ { "name": "@cdssnc/gcds-components-angular", - "version": "0.17.1", + "version": "0.18.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.17.1" + "@cdssnc/gcds-components": "^0.18.0" }, "dependencies": { "tslib": "^2.3.0" diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json index 5640eb363..1c4bbbac4 100644 --- a/packages/react/package-lock.json +++ b/packages/react/package-lock.json @@ -1,15 +1,15 @@ { "name": "@cdssnc/gcds-components-react", - "version": "0.17.1", + "version": "0.18.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@cdssnc/gcds-components-react", - "version": "0.17.1", + "version": "0.18.0", "license": "MIT", "dependencies": { - "@cdssnc/gcds-components": "^0.17.1" + "@cdssnc/gcds-components": "^0.18.0" }, "devDependencies": { "@types/react": "^18.0.28", diff --git a/packages/react/package.json b/packages/react/package.json index 02041e0ad..887a93aea 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@cdssnc/gcds-components-react", - "version": "0.17.1", + "version": "0.18.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.17.1" + "@cdssnc/gcds-components": "^0.18.0" }, "devDependencies": { "@types/react": "^18.0.28", diff --git a/packages/web/package-lock.json b/packages/web/package-lock.json index dda315179..3e565df27 100644 --- a/packages/web/package-lock.json +++ b/packages/web/package-lock.json @@ -1,12 +1,12 @@ { "name": "@cdssnc/gcds-components", - "version": "0.17.1", + "version": "0.18.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@cdssnc/gcds-components", - "version": "0.17.1", + "version": "0.18.0", "license": "MIT", "dependencies": { "@stencil/core": "^4.7.2", diff --git a/packages/web/package.json b/packages/web/package.json index b96a601e9..0be66be3b 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -1,6 +1,6 @@ { "name": "@cdssnc/gcds-components", - "version": "0.17.1", + "version": "0.18.0", "author": "Government of Canada / Gouvernement du Canada", "description": "Web components for the GCDS", "homepage": "https://design-system.alpha.canada.ca/",