add gcds-container component + integrate it into other components (#124)

* add gcds-container component + integrate it into other components * add gcds-container component + integrate it into other components
cds-snc · Mar 23, 2023 · 9817b73 · 9817b73
1 parent 2f92ec5
commit 9817b73
Show file tree

Hide file tree

Showing 20 changed files with 824 additions and 501 deletions.
diff --git a/packages/angular/src/lib/stencil-generated/components.ts b/packages/angular/src/lib/stencil-generated/components.ts
@@ -152,6 +152,27 @@ export class GcdsCheckbox {
 }
 
 
+export declare interface GcdsContainer extends Components.GcdsContainer {}
+
+@ProxyCmp({
+  defineCustomElementFn: undefined,
+  inputs: ['centered', 'container', 'tag']
+})
+@Component({
+  selector: 'gcds-container',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  inputs: ['centered', 'container', 'tag']
+})
+export class GcdsContainer {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
 export declare interface GcdsDateModified extends Components.GcdsDateModified {}
 
 @ProxyCmp({
@@ -320,13 +341,13 @@ export declare interface GcdsGrid extends Components.GcdsGrid {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['alignContent', 'alignItems', 'columns', 'columnsDesktop', 'columnsTablet', 'container', 'display', 'gap', 'justifyContent', 'justifyItems', 'placeContent', 'placeItems', 'tag']
+  inputs: ['alignContent', 'alignItems', 'centered', 'columns', 'columnsDesktop', 'columnsTablet', 'container', 'display', 'gap', 'justifyContent', 'justifyItems', 'placeContent', 'placeItems', 'tag']
 })
 @Component({
   selector: 'gcds-grid',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['alignContent', 'alignItems', 'columns', 'columnsDesktop', 'columnsTablet', 'container', 'display', 'gap', 'justifyContent', 'justifyItems', 'placeContent', 'placeItems', 'tag']
+  inputs: ['alignContent', 'alignItems', 'centered', 'columns', 'columnsDesktop', 'columnsTablet', 'container', 'display', 'gap', 'justifyContent', 'justifyItems', 'placeContent', 'placeItems', 'tag']
 })
 export class GcdsGrid {
   protected el: HTMLElement;

diff --git a/packages/angular/src/lib/stencil-generated/index.ts b/packages/angular/src/lib/stencil-generated/index.ts
@@ -7,6 +7,7 @@ export const DIRECTIVES = [
   d.GcdsBreadcrumbsItem,
   d.GcdsButton,
   d.GcdsCheckbox,
+  d.GcdsContainer,
   d.GcdsDateModified,
   d.GcdsDetails,
   d.GcdsErrorMessage,

diff --git a/packages/react/src/components/stencil-generated/index.ts b/packages/react/src/components/stencil-generated/index.ts
@@ -13,6 +13,7 @@ export const GcdsBreadcrumbs = /*@__PURE__*/createReactComponent<JSX.GcdsBreadcr
 export const GcdsBreadcrumbsItem = /*@__PURE__*/createReactComponent<JSX.GcdsBreadcrumbsItem, HTMLGcdsBreadcrumbsItemElement>('gcds-breadcrumbs-item');
 export const GcdsButton = /*@__PURE__*/createReactComponent<JSX.GcdsButton, HTMLGcdsButtonElement>('gcds-button');
 export const GcdsCheckbox = /*@__PURE__*/createReactComponent<JSX.GcdsCheckbox, HTMLGcdsCheckboxElement>('gcds-checkbox');
+export const GcdsContainer = /*@__PURE__*/createReactComponent<JSX.GcdsContainer, HTMLGcdsContainerElement>('gcds-container');
 export const GcdsDateModified = /*@__PURE__*/createReactComponent<JSX.GcdsDateModified, HTMLGcdsDateModifiedElement>('gcds-date-modified');
 export const GcdsDetails = /*@__PURE__*/createReactComponent<JSX.GcdsDetails, HTMLGcdsDetailsElement>('gcds-details');
 export const GcdsErrorMessage = /*@__PURE__*/createReactComponent<JSX.GcdsErrorMessage, HTMLGcdsErrorMessageElement>('gcds-error-message');

diff --git a/packages/web/src/components.d.ts b/packages/web/src/components.d.ts
@@ -173,6 +173,20 @@ export namespace Components {
          */
         "value": string;
     }
+    interface GcdsContainer {
+        /**
+          * Defines if container is centered or not
+         */
+        "centered"?: boolean;
+        /**
+          * Defines container size
+         */
+        "container"?: 'full' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+        /**
+          * Set tag for container
+         */
+        "tag"?: string;
+    }
     interface GcdsDateModified {
     }
     interface GcdsDetails {
@@ -326,6 +340,10 @@ export namespace Components {
           * Aligns grid items along the block (column) axis
          */
         "alignItems"?: 'baseline' | 'center' | 'end' | 'start' | 'stretch';
+        /**
+          * Defines if grid container is centered or not
+         */
+        "centered"?: boolean;
         /**
           * Defines the columns of the grid Option to set different layouts for desktop | tablet | default (includes mobile)
          */
@@ -871,6 +889,12 @@ declare global {
         prototype: HTMLGcdsCheckboxElement;
         new (): HTMLGcdsCheckboxElement;
     };
+    interface HTMLGcdsContainerElement extends Components.GcdsContainer, HTMLStencilElement {
+    }
+    var HTMLGcdsContainerElement: {
+        prototype: HTMLGcdsContainerElement;
+        new (): HTMLGcdsContainerElement;
+    };
     interface HTMLGcdsDateModifiedElement extends Components.GcdsDateModified, HTMLStencilElement {
     }
     var HTMLGcdsDateModifiedElement: {
@@ -1009,6 +1033,7 @@ declare global {
         "gcds-breadcrumbs-item": HTMLGcdsBreadcrumbsItemElement;
         "gcds-button": HTMLGcdsButtonElement;
         "gcds-checkbox": HTMLGcdsCheckboxElement;
+        "gcds-container": HTMLGcdsContainerElement;
         "gcds-date-modified": HTMLGcdsDateModifiedElement;
         "gcds-details": HTMLGcdsDetailsElement;
         "gcds-error-message": HTMLGcdsErrorMessageElement;
@@ -1220,6 +1245,20 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface GcdsContainer {
+        /**
+          * Defines if container is centered or not
+         */
+        "centered"?: boolean;
+        /**
+          * Defines container size
+         */
+        "container"?: 'full' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+        /**
+          * Set tag for container
+         */
+        "tag"?: string;
+    }
     interface GcdsDateModified {
     }
     interface GcdsDetails {
@@ -1397,6 +1436,10 @@ declare namespace LocalJSX {
           * Aligns grid items along the block (column) axis
          */
         "alignItems"?: 'baseline' | 'center' | 'end' | 'start' | 'stretch';
+        /**
+          * Defines if grid container is centered or not
+         */
+        "centered"?: boolean;
         /**
           * Defines the columns of the grid Option to set different layouts for desktop | tablet | default (includes mobile)
          */
@@ -1928,6 +1971,7 @@ declare namespace LocalJSX {
         "gcds-breadcrumbs-item": GcdsBreadcrumbsItem;
         "gcds-button": GcdsButton;
         "gcds-checkbox": GcdsCheckbox;
+        "gcds-container": GcdsContainer;
         "gcds-date-modified": GcdsDateModified;
         "gcds-details": GcdsDetails;
         "gcds-error-message": GcdsErrorMessage;
@@ -1961,6 +2005,7 @@ declare module "@stencil/core" {
             "gcds-breadcrumbs-item": LocalJSX.GcdsBreadcrumbsItem & JSXBase.HTMLAttributes<HTMLGcdsBreadcrumbsItemElement>;
             "gcds-button": LocalJSX.GcdsButton & JSXBase.HTMLAttributes<HTMLGcdsButtonElement>;
             "gcds-checkbox": LocalJSX.GcdsCheckbox & JSXBase.HTMLAttributes<HTMLGcdsCheckboxElement>;
+            "gcds-container": LocalJSX.GcdsContainer & JSXBase.HTMLAttributes<HTMLGcdsContainerElement>;
             "gcds-date-modified": LocalJSX.GcdsDateModified & JSXBase.HTMLAttributes<HTMLGcdsDateModifiedElement>;
             "gcds-details": LocalJSX.GcdsDetails & JSXBase.HTMLAttributes<HTMLGcdsDetailsElement>;
             "gcds-error-message": LocalJSX.GcdsErrorMessage & JSXBase.HTMLAttributes<HTMLGcdsErrorMessageElement>;

diff --git a/packages/web/src/components/gcds-alert/gcds-alert.css b/packages/web/src/components/gcds-alert/gcds-alert.css
@@ -15,40 +15,6 @@
     border: 0;
   }
 
-  /* Container width */
-  .container-xl,
-  .container-lg,
-  .container-md,
-  .container-sm,
-  .container-xs {
-    width: var(--gcds-alert-container-full);
-    margin: 0 auto;
-  }
-
-  .container-full {
-    max-width: var(--gcds-alert-container-full);
-  }
-
-  .container-xl {
-    max-width: var(--gcds-alert-container-xl);
-  }
-
-  .container-lg {
-    max-width: var(--gcds-alert-container-lg);
-  }
-
-  .container-md {
-    max-width: var(--gcds-alert-container-md);
-  }
-
-  .container-sm {
-    max-width: var(--gcds-alert-container-sm);
-  }
-
-  .container-xs {
-    max-width: var(--gcds-alert-container-xs);
-  }
-
   /* Role */
   &.alert--role-danger {
     background-color: var(--gcds-alert-danger-background);

diff --git a/packages/web/src/components/gcds-alert/gcds-alert.tsx b/packages/web/src/components/gcds-alert/gcds-alert.tsx
@@ -124,32 +124,34 @@ export class GcdsAlert {
                   : null }.`
             }
           >
-            <div class={`alert__container ${isFixed && container ? `container-${container}` : ''}`}>
-              {( !hideRoleIcon &&
-                <gcds-icon aria-hidden="true" class="alert__icon" size="h5" name={
-                  alertRole === 'danger' ? 'exclamation-circle'
-                  : alertRole === 'info' ? 'info-circle'
-                  : alertRole === 'success' ? 'check-circle'
-                  : alertRole === 'warning' ? 'exclamation-triangle'
-                  : null }
-                />
-              )}
-
-              <div class="alert__content">
-                <h5 class="alert__heading">{heading}</h5>
-                <slot></slot>
+            <gcds-container container={isFixed ? container : 'full'} centered>
+              <div class="alert__container">
+                {( !hideRoleIcon &&
+                  <gcds-icon aria-hidden="true" class="alert__icon" size="h5" name={
+                    alertRole === 'danger' ? 'exclamation-circle'
+                    : alertRole === 'info' ? 'info-circle'
+                    : alertRole === 'success' ? 'check-circle'
+                    : alertRole === 'warning' ? 'exclamation-triangle'
+                    : null }
+                    />
+                )}
+
+                <div class="alert__content">
+                  <h5 class="alert__heading">{heading}</h5>
+                  <slot></slot>
+                </div>
+
+                {( !hideCloseBtn &&
+                  <button
+                    class="alert__close-btn"
+                    onClick={(e) => this.onDismiss(e)}
+                    aria-label={ lang == 'en' ? 'Close alert.' : 'Fermer l\'alerte.'}
+                  >
+                    <gcds-icon aria-hidden="true" name="times" size="text" />
+                  </button>
+                )}
               </div>
-
-              {( !hideCloseBtn &&
-                <button
-                  class="alert__close-btn"
-                  onClick={(e) => this.onDismiss(e)}
-                  aria-label={ lang == 'en' ? 'Close alert.' : 'Fermer l\'alerte.'}
-                >
-                  <gcds-icon aria-hidden="true" name="times" size="text" />
-                </button>
-              )}
-            </div>
+            </gcds-container>
           </div>
         : null }
       </Host>

diff --git a/packages/web/src/components/gcds-alert/readme.md b/packages/web/src/components/gcds-alert/readme.md
@@ -29,11 +29,13 @@
 
 ### Depends on
 
+- [gcds-container](../gcds-container)
 - [gcds-icon](../gcds-icon)
 
 ### Graph
 ```mermaid
 graph TD;
+  gcds-alert --> gcds-container
   gcds-alert --> gcds-icon
   style gcds-alert fill:#f9f,stroke:#333,stroke-width:4px
 ```