Skip to content

Commit

Permalink
Grid Cell actions with ArgTypes
Browse files Browse the repository at this point in the history
  • Loading branch information
dlnr committed Nov 28, 2023
1 parent 0041d27 commit 9dc0950
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 4 deletions.
19 changes: 19 additions & 0 deletions storybook/storybook-react/src/Grid/Grid.Cell.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,25 @@ import { Meta, StoryObj } from '@storybook/react'
const meta = {
title: 'Layout/Grid Cell',
component: Grid.Cell,
argTypes: {
span: {
control: {
type: 'radio',
},
options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
},
start: {
control: {
type: 'radio',
},
options: [1, 2, 3, 4, 5, 6, 7, 8, 9],
},
fullWidth: {
control: {
type: 'boolean',
},
},
},
} satisfies Meta<typeof Grid.Cell>

export default meta
Expand Down
9 changes: 5 additions & 4 deletions storybook/storybook-react/src/Grid/Grid.docs.mdx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Canvas, Markdown, Meta, Primary } from "@storybook/blocks";
import * as GridCellStories from "./Grid.Cell.stories.tsx";
import * as GridStories from "./Grid.stories.tsx";
import README from "../../../../packages/css/src/grid/README.md?raw";

Expand Down Expand Up @@ -63,7 +64,7 @@ Elke cel biedt ruimte voor een afbeelding.
Een cel beslaat standaard 1 kolom in het grid.
Om een cel meer kolommen te laten beslaan, gebruik je de `span` prop.

<Canvas of={GridStories.Cell} />
<Canvas of={GridCellStories.Default} />

### Verschillende breedtes

Expand All @@ -72,7 +73,7 @@ Gebruik hiervoor de `span` prop met 3 waarden voor respectievelijk smalle, midde

Via `span={{ narrow: 4, medium: 6, wide: 8 }}` is deze cel 4 van de 4 kolommen breed op smalle vensters, 6 van de 8 op middelbrede en 8 van de 12 op brede vensters:

<Canvas of={GridStories.MultipleSizes} />
<Canvas of={GridCellStories.MultipleSizes} />

Het kan ook voorkomen dat ook de startpositie van een cel afhangt van de vensterbreedte.
Gebruik hiervoor de `start` prop met 3 waarden.
Expand All @@ -81,7 +82,7 @@ Gebruik hiervoor de `start` prop met 3 waarden.

Om de cel de volledige breedte te geven – of het grid nu 4, 8, of 12 kolommen heeft – gebruik je de `fullWidth` prop.

<Canvas of={GridStories.FullWidth} />
<Canvas of={GridCellStories.FullWidth} />

### Startpositie

Expand All @@ -94,7 +95,7 @@ Ook komt dit voor als een kolom als extra witruimte wilt gebruiken.

Een voorbeeld met `start={2}`:

<Canvas of={GridStories.StartPosition} />
<Canvas of={GridCellStories.StartPosition} />

## Richtlijnen

Expand Down

0 comments on commit 9dc0950

Please sign in to comment.