From 7c79c5b45f90493d93cda9335782b27a8f627ad7 Mon Sep 17 00:00:00 2001 From: Melanie Boeckmann Date: Thu, 16 Jan 2025 07:48:54 -0800 Subject: [PATCH] chore: separate grid column component into its own directory --- packages/web/.storybook/preview-head.html | 13 ++ packages/web/src/components.d.ts | 8 +- .../gcds-grid-col.css | 0 .../gcds-grid-col.tsx | 0 .../src/components/gcds-grid-col/readme.md | 19 +++ .../stories/gcds-grid-col.stories.tsx | 142 ++++++++++++++++++ .../gcds-grid-col/stories/overview.mdx | 46 ++++++ .../gcds-grid-col/stories/properties.mdx | 15 ++ .../gcds-grid-col/test/gcds-grid-col.spec.ts | 64 ++++++++ .../web/src/components/gcds-grid/readme.md | 46 +++++- 10 files changed, 342 insertions(+), 11 deletions(-) rename packages/web/src/components/{gcds-grid => gcds-grid-col}/gcds-grid-col.css (100%) rename packages/web/src/components/{gcds-grid => gcds-grid-col}/gcds-grid-col.tsx (100%) create mode 100644 packages/web/src/components/gcds-grid-col/readme.md create mode 100644 packages/web/src/components/gcds-grid-col/stories/gcds-grid-col.stories.tsx create mode 100644 packages/web/src/components/gcds-grid-col/stories/overview.mdx create mode 100644 packages/web/src/components/gcds-grid-col/stories/properties.mdx create mode 100644 packages/web/src/components/gcds-grid-col/test/gcds-grid-col.spec.ts diff --git a/packages/web/.storybook/preview-head.html b/packages/web/.storybook/preview-head.html index ab9de496e..dca11618e 100644 --- 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 index 4882b0e5b..4c883b25c 100644 --- a/packages/web/src/components.d.ts +++ b/packages/web/src/components.d.ts @@ -458,7 +458,7 @@ 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; /** @@ -466,7 +466,7 @@ export namespace Components { */ "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,7 +2281,7 @@ 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; /** @@ -2289,7 +2289,7 @@ declare namespace LocalJSX { */ "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/packages/web/src/components/gcds-grid/gcds-grid-col.css b/packages/web/src/components/gcds-grid-col/gcds-grid-col.css similarity index 100% rename from packages/web/src/components/gcds-grid/gcds-grid-col.css rename to packages/web/src/components/gcds-grid-col/gcds-grid-col.css diff --git a/packages/web/src/components/gcds-grid/gcds-grid-col.tsx b/packages/web/src/components/gcds-grid-col/gcds-grid-col.tsx similarity index 100% rename from packages/web/src/components/gcds-grid/gcds-grid-col.tsx rename to packages/web/src/components/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 new file mode 100644 index 000000000..42d6f641d --- /dev/null +++ b/packages/web/src/components/gcds-grid-col/readme.md @@ -0,0 +1,19 @@ +# gcds-grid-col + + + + + + +## 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 new file mode 100644 index 000000000..3b95fe888 --- /dev/null +++ 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 => + ` + + + ${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.default ? args.default : null} + + + ${args.default ? args.default : null} + + +`; + +// ------ 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 new file mode 100644 index 000000000..89e3512a3 --- /dev/null +++ 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'; + + + +# Grid column
`` + +Grid columns define their own size. Each grid column can define a base, tablet (optional) and desktop (optional) size. + + + +## Examples + +
+ +### 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. + + + +#### Desktop + +The `columns-desktop` property provides an option to set horizontal and vertical spacing between items in a grid container for desktop screens. + + + +### Tag + +Always use the tag in a standard way to maintain accessibility. + + + +## Resources + +{/* prettier-ignore */} +
    +
  • + Guidance +
    • +
  • + Github +
    • +
diff --git a/packages/web/src/components/gcds-grid-col/stories/properties.mdx b/packages/web/src/components/gcds-grid-col/stories/properties.mdx new file mode 100644 index 000000000..4df2ba95d --- /dev/null +++ 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'; + + + +{!(new URLSearchParams(window.location.search)).get('demo') &&

Events & properties

} + + + + 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 new file mode 100644 index 000000000..f48f94cc6 --- /dev/null +++ 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: ` + Example content. + `, + }); + expect(root).toEqualHtml(` + + + +

+ +

+ + Example content. + + `); + }); + + it('renders - tablet and mobile', async () => { + const { root } = await newSpecPage({ + components: [GcdsGridCol], + html: ` + Example content. + `, + }); + expect(root).toEqualHtml(` + + + +

+ +

+ + Example content. + + `); + }); + + it('renders - mobile', async () => { + const { root } = await newSpecPage({ + components: [GcdsGridCol], + html: ` + Example content. + `, + }); + expect(root).toEqualHtml(` + + + +

+ +

+ + Example content. + + `); + }); +}); diff --git a/packages/web/src/components/gcds-grid/readme.md b/packages/web/src/components/gcds-grid/readme.md index d92d7b6a3..597072693 100644 --- a/packages/web/src/components/gcds-grid/readme.md +++ b/packages/web/src/components/gcds-grid/readme.md @@ -7,13 +7,45 @@ ## 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'` | - +| 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` | `columns` | Defines the default number of grid columns for all viewports if columnsTablet and columnsDesktop are not defined. Option to set different layouts for desktop with columnsDesktop and for tablet with columnsTablet. | `string` | `undefined` | +| `columnsDesktop` | `columns-desktop` | Provides option to set a different number of grid columns for desktop screens. | `string` | `undefined` | +| `columnsTablet` | `columns-tablet` | Provides option to set a different number of grid columns for tablet screens. If columnsDesktop is not defined, columnsTablet will be used to define the number of columns for desktop as well. | `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'` | +| `equalRowHeight` | `equal-row-height` | Sets all grid items to have an equal height, based on the tallest item. | `boolean` | `false` | +| `gap` | `gap` | 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. | `"150" \| "175" \| "200" \| "225" \| "250" \| "300" \| "350" \| "400" \| "450" \| "500" \| "550" \| "600" \| "650" \| "700" \| "750" \| "800"` | `'300'` | +| `gapDesktop` | `gap-desktop` | Provides option to set horizontal and vertical spacing between items in a grid container for desktop screens. | `"150" \| "175" \| "200" \| "225" \| "250" \| "300" \| "350" \| "400" \| "450" \| "500" \| "550" \| "600" \| "650" \| "700" \| "750" \| "800"` | `undefined` | +| `gapTablet` | `gap-tablet` | 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. | `"150" \| "175" \| "200" \| "225" \| "250" \| "300" \| "350" \| "400" \| "450" \| "500" \| "550" \| "600" \| "650" \| "700" \| "750" \| "800"` | `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 | `"article" \| "aside" \| "div" \| "dl" \| "main" \| "nav" \| "ol" \| "section" \| "ul"` | `'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 +``` ---------------------------------------------- -*Built with [StencilJS](https://stenciljs.com/)* \ No newline at end of file +*Built with [StencilJS](https://stenciljs.com/)*