chore: separate grid column component into its own directory

cds-snc · Jan 16, 2025 · 7c79c5b · 7c79c5b
1 parent 97dd42e
commit 7c79c5b
Show file tree

Hide file tree

Showing 10 changed files with 342 additions and 11 deletions.
diff --git a/packages/web/.storybook/preview-head.html b/packages/web/.storybook/preview-head.html
@@ -364,6 +364,19 @@
     margin: var(--gcds-spacing-0);
   }
 
+  /* gcds-grid-col */
+  .sbdocs-preview .docs-story #story--components-grid-column--default,
+  .sbdocs-preview .docs-story #story--components-grid-column--tablet,
+  .sbdocs-preview .docs-story #story--components-grid-column--desktop,
+  .sbdocs-preview .docs-story #story--components-grid-column--tag,
+  .sbdocs-preview .docs-story #story--components-grid-column--props,
+  .sb-show-main #storybook-root {
+    gcds-grid-col {
+      padding: var(--gcds-spacing-50);
+      border: var(--gcds-border-width-sm) solid var(--gcds-border-default);
+    }
+  }
+
   /* gcds-icon */
   .sbdocs-preview .docs-story #story--components-icon--name gcds-icon,
   .sbdocs-preview .docs-story #story--components-icon--sizes gcds-icon {

diff --git a/packages/web/src/components.d.ts b/packages/web/src/components.d.ts
@@ -458,15 +458,15 @@ export namespace Components {
          */
         "equalRowHeight"?: boolean;
         /**
-          * Defines the horizontal and vertical spacing between items in a grid container for all viewports if gapTablet and gapDesktop are not defined. Option to set different spacing for desktop with gapDesktop and for tablet with gapTablet.
+          * Defines the horizontal and vertical spacing between items in a grid container for all viewports if gap-tablet and gap-desktop are not defined. Option to set different spacing for desktop with gap-desktop and for tablet with gap-tablet.
          */
         "gap"?: SpacingValues1;
         /**
           * Provides option to set horizontal and vertical spacing between items in a grid container for desktop screens.
          */
         "gapDesktop"?: SpacingValues1;
         /**
-          * Provides option to set horizontal and vertical spacing between items in a grid container for tablet screens. If gapDesktop is not defined, gapTablet will be used to define the spacing for desktop screens as well.
+          * Provides option to set horizontal and vertical spacing between items in a grid container for tablet screens. If gap-desktop is not defined, gap-tablet will be used to define the spacing for desktop screens as well.
          */
         "gapTablet"?: SpacingValues1;
         /**
@@ -2281,15 +2281,15 @@ declare namespace LocalJSX {
          */
         "equalRowHeight"?: boolean;
         /**
-          * Defines the horizontal and vertical spacing between items in a grid container for all viewports if gapTablet and gapDesktop are not defined. Option to set different spacing for desktop with gapDesktop and for tablet with gapTablet.
+          * Defines the horizontal and vertical spacing between items in a grid container for all viewports if gap-tablet and gap-desktop are not defined. Option to set different spacing for desktop with gap-desktop and for tablet with gap-tablet.
          */
         "gap"?: SpacingValues1;
         /**
           * Provides option to set horizontal and vertical spacing between items in a grid container for desktop screens.
          */
         "gapDesktop"?: SpacingValues1;
         /**
-          * Provides option to set horizontal and vertical spacing between items in a grid container for tablet screens. If gapDesktop is not defined, gapTablet will be used to define the spacing for desktop screens as well.
+          * Provides option to set horizontal and vertical spacing between items in a grid container for tablet screens. If gap-desktop is not defined, gap-tablet will be used to define the spacing for desktop screens as well.
          */
         "gapTablet"?: SpacingValues1;
         /**

diff --git a/...rc/components/gcds-grid/gcds-grid-col.css → ...omponents/gcds-grid-col/gcds-grid-col.css b/...rc/components/gcds-grid/gcds-grid-col.css → ...omponents/gcds-grid-col/gcds-grid-col.css
diff --git a/...rc/components/gcds-grid/gcds-grid-col.tsx → ...omponents/gcds-grid-col/gcds-grid-col.tsx b/...rc/components/gcds-grid/gcds-grid-col.tsx → ...omponents/gcds-grid-col/gcds-grid-col.tsx
diff --git a/packages/web/src/components/gcds-grid-col/readme.md b/packages/web/src/components/gcds-grid-col/readme.md
@@ -0,0 +1,19 @@
+# gcds-grid-col
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| 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'`     |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/web/src/components/gcds-grid-col/stories/gcds-grid-col.stories.tsx b/packages/web/src/components/gcds-grid-col/stories/gcds-grid-col.stories.tsx
@@ -0,0 +1,142 @@
+export default {
+  title: 'Components/Grid column',
+
+  argTypes: {
+    // Props
+    desktop: {
+      control: { type: 'select' },
+      options: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '12' },
+      },
+    },
+    tablet: {
+      control: { type: 'select' },
+      options: ['1', '2', '3', '4', '5', '6'],
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '6' },
+      },
+    },
+    tag: {
+      control: { type: 'text' },
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'div' },
+      },
+    },
+
+    // Slots
+    default: {
+      control: {
+        type: 'text',
+      },
+      description:
+        'Customize the content or include additional elements. | Personnalisez le contenu ou ajoutez des éléments supplémentaires.',
+      table: {
+        category: 'Slots | Fentes',
+      },
+    },
+  },
+};
+
+const Template = args =>
+  `
+<!-- Web component code (HTML, Angular, Vue) -->
+<gcds-grid>
+  <gcds-grid-col ${args.tag != 'div' ? `tag="${args.tag}"` : null} ${
+      args.tablet ? `tablet="${args.tablet}"` : null
+    } ${args.desktop ? `desktop="${args.desktop}"` : null}>${args.default ? args.default : null}</gcds-grid-col>
+  <gcds-grid-col ${args.tag != 'div' ? `tag="${args.tag}"` : null} ${
+      args.tablet ? `tablet="${args.tablet}"` : null
+    } ${args.desktop ? `desktop="${args.desktop}"` : null}>${args.default ? args.default : null}</gcds-grid-col>
+</gcds-grid>
+
+<!-- React code -->
+<GcdsGrid>
+  <GcdsGridCol ${args.tag != 'div' ? `tag="${args.tag}"` : null} ${
+    args.tablet ? `tablet="${args.tablet}"` : null
+    } ${args.desktop ? `desktop="${args.desktop}"` : null}>${args.default ? args.default : null}</GcdsGridCol>
+  <GcdsGridCol ${args.tag != 'div' ? `tag="${args.tag}"` : null} ${
+    args.tablet ? `tablet="${args.tablet}"` : null
+    } ${args.desktop ? `desktop="${args.desktop}"` : null}>${args.default ? args.default : null}</GcdsGridCol>
+</GcdsGrid>
+`.replace(/ null/g, '');
+
+const TemplatePlayground = args => `
+<gcds-grid>
+  <gcds-grid-col
+    ${args.tag != 'div' ? `tag="${args.tag}"` : null}
+    ${args.tablet ? `Tablet="${args.tablet}"` : null}
+    ${args.desktop ? `Desktop="${args.desktop}"` : null}
+  >
+    ${args.default ? args.default : null}
+  </gcds-grid-col>
+  <gcds-grid-col
+    ${args.tag != 'div' ? `tag="${args.tag}"` : null}
+    ${args.tablet ? `Tablet="${args.tablet}"` : null}
+    ${args.desktop ? `Desktop="${args.desktop}"` : null}
+  >
+    ${args.default ? args.default : null}
+  </gcds-grid-col>
+</gcds-grid>
+`;
+
+// ------ Grid column default ------
+
+export const Default = Template.bind({});
+Default.args = {
+  desktop: '6',
+  tablet: '3',
+  tag: 'div',
+  default: `This is some example content to display the grid column component.`,
+};
+
+// ------ Grid column viewport sizes ------
+
+export const Tablet = Template.bind({});
+Tablet.args = {
+  desktop: '',
+  tablet: '3',
+  tag: 'div',
+  default: `This is some example content to display the grid column component.`,
+};
+
+export const Desktop = Template.bind({});
+Desktop.args = {
+  desktop: '6',
+  tablet: '3',
+  tag: 'div',
+  default: `This is some example content to display the grid column component.`,
+};
+
+// ------ Grid column tag ------
+
+export const Tag = Template.bind({});
+Tag.args = {
+  desktop: '6',
+  tablet: '3',
+  tag: 'p',
+  default: `This is some example content to display the grid column component.`,
+};
+
+// ------ Grid column events & props ------
+
+export const Props = Template.bind({});
+Props.args = {
+  desktop: '6',
+  tablet: '3',
+  tag: 'div',
+  default: `This is some example content to display the grid column component.`,
+};
+
+// ------ Grid column playground ------
+
+export const Playground = TemplatePlayground.bind({});
+Playground.args = {
+  desktop: '6',
+  tablet: '3',
+  tag: 'div',
+  default: `This is some example content to display the grid column component.`,
+};
diff --git a/packages/web/src/components/gcds-grid-col/stories/overview.mdx b/packages/web/src/components/gcds-grid-col/stories/overview.mdx
@@ -0,0 +1,46 @@
+import { Meta, Canvas, Story } from '@storybook/blocks';
+import * as GridCol from './gcds-grid-col.stories';
+
+<Meta of={GridCol} name="Overview" />
+
+# Grid column<br/>`<gcds-grid-col>`
+
+Grid columns define their own size. Each grid column can define a base, tablet (optional) and desktop (optional) size.
+
+<Canvas of={GridCol.Default} story={{ inline: true }} />
+
+## Examples
+
+<br />
+
+### Size
+
+#### Tablet
+
+The `tablet` property sets the 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.
+
+<Canvas of={GridCol.Tablet} story={{ inline: true }} />
+
+#### Desktop
+
+The `columns-desktop` property provides an option to set horizontal and vertical spacing between items in a grid container for desktop screens.
+
+<Canvas of={GridCol.Desktop} story={{ inline: true }} />
+
+### Tag
+
+Always use the tag in a standard way to maintain accessibility.
+
+<Canvas of={GridCol.Tag} story={{ inline: true }} />
+
+## Resources
+
+{/* prettier-ignore */}
+<ul className="resources-list">
+  <li>
+    <gcds-link size="regular" href="https://design-system.alpha.canada.ca/en/components/grid/" target="_blank">Guidance</gcds-link>
+  </li>
+  <li>
+    <gcds-link size="regular" href="https://github.com/cds-snc/gcds-components/tree/develop/packages/web/src/components/gcds-grid-col" target="_blank">Github</gcds-link>
+  </li>
+</ul>
diff --git a/packages/web/src/components/gcds-grid-col/stories/properties.mdx b/packages/web/src/components/gcds-grid-col/stories/properties.mdx
@@ -0,0 +1,15 @@
+import { Meta, Canvas, Controls } from '@storybook/blocks';
+import * as GridCol from './gcds-grid-col.stories';
+
+<Meta of={GridCol} name="Events & properties" />
+
+{!(new URLSearchParams(window.location.search)).get('demo') && <h1>Events & properties</h1>}
+
+<Canvas
+  of={GridCol.Props}
+  story={{ inline: true }}
+  sourceState="shown"
+  type="dynamic"
+/>
+
+<Controls of={GridCol.Props} sort="requiredFirst" />
diff --git a/packages/web/src/components/gcds-grid-col/test/gcds-grid-col.spec.ts b/packages/web/src/components/gcds-grid-col/test/gcds-grid-col.spec.ts
@@ -0,0 +1,64 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { GcdsGridCol } from '../gcds-grid-col';
+
+describe('gcds-grid-col', () => {
+  it('renders - desktop, tablet and mobile', async () => {
+    const { root } = await newSpecPage({
+      components: [GcdsGridCol],
+      html: `
+        <gcds-grid-col tablet="3" desktop="6" tag="p">Example content.</gcds-grid-col>
+      `,
+    });
+    expect(root).toEqualHtml(`
+      <gcds-grid-col tablet="3" desktop="6" tag="p" style="--gcds-grid-col-tablet: 3; --gcds-grid-col-desktop: 6;">
+        <mock:shadow-root>
+
+          <p class="gcds-grid-col">
+            <slot></slot>
+          </p>
+        </mock:shadow-root>
+        Example content.
+      </gcds-grid-col>
+    `);
+  });
+
+  it('renders - tablet and mobile', async () => {
+    const { root } = await newSpecPage({
+      components: [GcdsGridCol],
+      html: `
+        <gcds-grid-col tablet="3" tag="p">Example content.</gcds-grid-col>
+      `,
+    });
+    expect(root).toEqualHtml(`
+      <gcds-grid-col tablet="3" tag="p" style="--gcds-grid-col-tablet: 3; --gcds-grid-col-desktop: 6;">
+        <mock:shadow-root>
+
+          <p class="gcds-grid-col">
+            <slot></slot>
+          </p>
+        </mock:shadow-root>
+        Example content.
+      </gcds-grid-col>
+    `);
+  });
+
+  it('renders - mobile', async () => {
+    const { root } = await newSpecPage({
+      components: [GcdsGridCol],
+      html: `
+        <gcds-grid-col tag="p">Example content.</gcds-grid-col>
+      `,
+    });
+    expect(root).toEqualHtml(`
+      <gcds-grid-col tag="p" style="--gcds-grid-col-tablet: 6; --gcds-grid-col-desktop: 12;">
+        <mock:shadow-root>
+
+          <p class="gcds-grid-col">
+            <slot></slot>
+          </p>
+        </mock:shadow-root>
+        Example content.
+      </gcds-grid-col>
+    `);
+  });
+});