-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: separate grid column component into its own directory (#733)
* feat: add grid gap property for more flexibility * chore: update grid readme to include grid + grid-col props * chore: update tokens package * chore: add stories for new grid gap props * chore: separate grid column component into its own directory * chore: update grid readme to include grid + grid-col props * chore: add stories for new grid gap props * chore: separate grid column component into its own directory * chore: improve grid column comments * chore: improve grid column comments
- Loading branch information
1 parent
bb56bf7
commit dadbda3
Showing
11 changed files
with
350 additions
and
19 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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/)* |
142 changes: 142 additions & 0 deletions
142
packages/web/src/components/gcds-grid-col/stories/gcds-grid-col.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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.`, | ||
| }; |
46 changes: 46 additions & 0 deletions
46
packages/web/src/components/gcds-grid-col/stories/overview.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
15 changes: 15 additions & 0 deletions
15
packages/web/src/components/gcds-grid-col/stories/properties.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" /> |
64 changes: 64 additions & 0 deletions
64
packages/web/src/components/gcds-grid-col/test/gcds-grid-col.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| `); | ||
| }); | ||
| }); |
Oops, something went wrong.