Add border prop to container component

lerna.json

@@ -1,7 +1,7 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
   "useNx": true,
-  "version": "0.10.4",
+  "version": "0.11.0",
   "packages": [
     "packages/web",
     "packages/react",

packages/angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdssnc/gcds-components-angular",
-  "version": "0.10.4",
+  "version": "0.11.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": "^15.2.0",
     "@angular/core": "^15.2.0",
-    "@cdssnc/gcds-components": "^0.10.4"
+    "@cdssnc/gcds-components": "^0.11.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

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

@@ -180,14 +180,14 @@ export declare interface GcdsCheckbox extends Components.GcdsCheckbox {
 
 
 @ProxyCmp({
-  inputs: ['centered', 'margin', 'padding', 'size', 'tag']
+  inputs: ['border', 'centered', 'margin', 'padding', 'size', 'tag']
 })
 @Component({
   selector: 'gcds-container',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['centered', 'margin', 'padding', 'size', 'tag'],
+  inputs: ['border', 'centered', 'margin', 'padding', 'size', 'tag'],
 })
 export class GcdsContainer {
   protected el: HTMLElement;

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdssnc/gcds-components-react",
-  "version": "0.10.4",
+  "version": "0.11.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.10.4"
+    "@cdssnc/gcds-components": "^0.11.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",

packages/react/src/components/stencil-generated/react-component-lib/utils/attachProps.ts

@@ -62,6 +62,17 @@ export const getClassName = (classList: DOMTokenList, newProps: any, oldProps: a
   return finalClassNames.join(' ');
 };
 
+/**
+ * Transforms a React event name to a browser event name.
+ */
+export const transformReactEventName = (eventNameSuffix: string) => {
+  switch (eventNameSuffix) {
+    case 'doubleclick':
+      return 'dblclick';
+  }
+  return eventNameSuffix;
+};
+
 /**
  * Checks if an event is supported in the current execution environment.
  * @license Modernizr 3.0.0pre (Custom Build) | MIT
@@ -70,7 +81,7 @@ export const isCoveredByReact = (eventNameSuffix: string) => {
   if (typeof document === 'undefined') {
     return true;
   } else {
-    const eventName = 'on' + eventNameSuffix;
+    const eventName = 'on' + transformReactEventName(eventNameSuffix);
     let isSupported = eventName in document;
 
     if (!isSupported) {

packages/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdssnc/gcds-components",
-  "version": "0.10.4",
+  "version": "0.11.0",
   "author": "Government of Canada / Gouvernement du Canada",
   "description": "Web components for the GCDS",
   "homepage": "https://design-system.alpha.canada.ca/",
@@ -40,7 +40,7 @@
   "devDependencies": {
     "@axe-core/puppeteer": "^4.3.2",
     "@babel/core": "^7.20.12",
-    "@cdssnc/gcds-tokens": "^1.4.0",
+    "@cdssnc/gcds-tokens": "^1.4.1",
     "@fortawesome/fontawesome-free": "^6.3.0",
     "@node-minify/core": "^6.2.0",
     "@node-minify/uglify-es": "^6.2.0",

packages/web/src/components.d.ts

@@ -6,7 +6,6 @@
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { Validator, ValidatorEntry } from "./validators";
-export { Validator, ValidatorEntry } from "./validators";
 export namespace Components {
     interface GcdsAlert {
         /**
@@ -209,6 +208,10 @@ export namespace Components {
         "value": string;
     }
     interface GcdsContainer {
+        /**
+          * Defines if container has a border or not.
+         */
+        "border"?: boolean;
         /**
           * Defines if container is centered or not.
          */
@@ -1359,6 +1362,10 @@ declare namespace LocalJSX {
         "value"?: string;
     }
     interface GcdsContainer {
+        /**
+          * Defines if container has a border or not.
+         */
+        "border"?: boolean;
         /**
           * Defines if container is centered or not.
          */

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

@@ -4,6 +4,11 @@
   padding: 0;
   box-sizing: border-box;
 
+  /* Container border */
+  &.container-border {
+    border: var(--gcds-container-border);
+  }
+
   /* Container centered */
   &.container-centered {
     margin-inline: auto !important;

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

@@ -13,6 +13,11 @@ export class GcdsContainer {
    * Props
    */
 
+  /**
+   * Defines if container has a border or not.
+   */
+  @Prop() border?: boolean = false;
+
   /**
    * Defines if container is centered or not.
    */
@@ -39,7 +44,7 @@ export class GcdsContainer {
   @Prop() tag?: string = 'div';
 
   render() {
-    const { centered, margin, padding, size, tag } = this;
+    const { border, centered, margin, padding, size, tag } = this;
 
     const Tag = tag;
 
@@ -48,6 +53,7 @@ export class GcdsContainer {
         <Tag
           class={`
             gcds-container
+            ${border ? `container-border` : ''}
             ${centered ? `container-centered` : ''}
             ${margin ? `m-${margin}` : ''}
             ${padding ? `p-${padding}` : ''}

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

@@ -9,6 +9,7 @@
 
 | Property   | Attribute  | Description                                                                                                       | Type                                                                                                                                         | Default     |
 | ---------- | ---------- | ----------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `border`   | `border`   | Defines if container has a border or not.                                                                         | `boolean`                                                                                                                                    | `false`     |
 | `centered` | `centered` | Defines if container is centered or not.                                                                          | `boolean`                                                                                                                                    | `false`     |
 | `margin`   | `margin`   | Defines the container's margin. Note that left and right margin will not be applied if the container is centered. | `"0" \| "100" \| "1000" \| "150" \| "200" \| "250" \| "300" \| "400" \| "450" \| "50" \| "500" \| "550" \| "600" \| "700" \| "800" \| "900"` | `undefined` |
 | `padding`  | `padding`  | Defines the container's padding.                                                                                  | `"0" \| "100" \| "1000" \| "150" \| "200" \| "250" \| "300" \| "400" \| "450" \| "50" \| "500" \| "550" \| "600" \| "700" \| "800" \| "900"` | `undefined` |

packages/web/src/components/gcds-container/test/gcds-container.spec.ts

@@ -127,4 +127,64 @@ describe('gcds-grid', () => {
       </gcds-container>
     `);
   });
+
+  /**
+   * Spacing tests
+   */
+  it('renders container with margin', async () => {
+    const { root } = await newSpecPage({
+      components: [GcdsContainer],
+      html: `
+        <gcds-container margin="400" />
+      `,
+    });
+    expect(root).toEqualHtml(`
+      <gcds-container margin="400">
+        <mock:shadow-root>
+          <div class="gcds-container size-full m-400">
+            <slot></slot>
+          </div>
+        </mock:shadow-root>
+      </gcds-container>
+    `);
+  });
+
+  it('renders container with padding', async () => {
+    const { root } = await newSpecPage({
+      components: [GcdsContainer],
+      html: `
+        <gcds-container padding="400" />
+      `,
+    });
+    expect(root).toEqualHtml(`
+      <gcds-container padding="400">
+        <mock:shadow-root>
+          <div class="gcds-container size-full p-400">
+            <slot></slot>
+          </div>
+        </mock:shadow-root>
+      </gcds-container>
+    `);
+  });
+
+  /**
+   * Border test
+   */
+  it('renders container with border', async () => {
+    const { root } = await newSpecPage({
+      components: [GcdsContainer],
+      html: `
+        <gcds-container border />
+      `,
+    });
+    expect(root).toEqualHtml(`
+      <gcds-container border>
+        <mock:shadow-root>
+          <div class="gcds-container size-full container-border">
+            <slot></slot>
+          </div>
+        </mock:shadow-root>
+      </gcds-container>
+    `);
+  });
 });

packages/web/src/index.html

@@ -211,16 +211,16 @@ <h3 class="mt-700 mb-400 bb-sm">Cards</h3>
       <!-- ------------- Containers ------------- -->
 
       <h3 class="mt-700 mb-400 bb-sm">Containers</h3>
-      <gcds-container container="full">
-        <div class="p-200 b-sm">I'm a responsive container. My size is only limited by the size of my parent container.</div>
+      <gcds-container size="full" border padding="400">
+        <p>I'm a responsive container. My size is only limited by the size of my parent container.</p>
       </gcds-container>
       <br/>
-      <gcds-container container="lg" centered>
-        <div class="p-200 b-sm">I'm a large, centred container. My max size is 64rem (1024px).</div>
+      <gcds-container size="lg" centered border padding="400">
+        <p>I'm a large, centred container. My max size is 64rem (1024px).</p>
       </gcds-container>
       <br/>
-      <gcds-container container="xs">
-        <div class="p-200 b-sm">I'm an extra-small container. My max size is 20rem (320px).</div>
+      <gcds-container size="xs" border padding="400">
+        <p>I'm an extra-small container. My max size is 20rem (320px).</p>
       </gcds-container>
 
       <!-- ------------- Details ------------- -->