Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add Column component and Gap and Margin utilities for vertical spacing #1083

Merged
merged 45 commits into from
Feb 21, 2024
Merged
Changes from 1 commit
Commits
Show all changes
45 commits
Select commit Hold shift + click to select a range
7e0043c
Scaffold new column component
VincentSmedinga Feb 14, 2024
7369d43
Use type when generating new component
VincentSmedinga Feb 14, 2024
69c0f20
Add spacing tokens and gap component
VincentSmedinga Feb 14, 2024
1c3effc
Implement column component
VincentSmedinga Feb 14, 2024
e6c8398
Allow rendering a custom HTML element
VincentSmedinga Feb 14, 2024
7c2002e
Add margin-bottom component
VincentSmedinga Feb 14, 2024
f97beb5
Preselect default value of gap prop
VincentSmedinga Feb 15, 2024
dffa340
WIP docs
VincentSmedinga Feb 15, 2024
fed31d3
Add spacing documentation
VincentSmedinga Feb 16, 2024
9b940bb
Hide children in args table
VincentSmedinga Feb 16, 2024
7cfd7fb
Make docs more compact
VincentSmedinga Feb 16, 2024
5ad0082
Move spacing tokens to brand layer
VincentSmedinga Feb 16, 2024
edbc677
Remove empty files
VincentSmedinga Feb 16, 2024
0bd6840
Extract type for tag
VincentSmedinga Feb 16, 2024
74f4892
Extend documentation
VincentSmedinga Feb 16, 2024
d0bd027
Update CSS component docs
VincentSmedinga Feb 16, 2024
59f3ece
Add test for custom element
VincentSmedinga Feb 16, 2024
30e4b39
Revert adding common compact spacing tokens
VincentSmedinga Feb 16, 2024
0cb3edd
Fix custom tag test
VincentSmedinga Feb 16, 2024
8b81080
Update storybook/storybook-docs/src/spacing.stories.mdx
VincentSmedinga Feb 16, 2024
c06bb8d
Remove unnecessary rows from table
VincentSmedinga Feb 16, 2024
ee5f09b
Make tokens, classes and prop values consistent with other components
VincentSmedinga Feb 16, 2024
6b88c76
Assign high specificity to utility classes
VincentSmedinga Feb 16, 2024
5d7155a
Refer to other tokens correctly
VincentSmedinga Feb 16, 2024
7a14622
Update storybook/storybook-react/src/Column/Column.docs.mdx
VincentSmedinga Feb 16, 2024
81d649f
Update storybook/storybook-react/src/Column/Column.docs.mdx
VincentSmedinga Feb 16, 2024
190032a
Update docs
VincentSmedinga Feb 16, 2024
87bfc18
Describe relation between column, gap, and margin spacing
VincentSmedinga Feb 16, 2024
4901304
Fix token syntax
VincentSmedinga Feb 16, 2024
874fa72
Merge branch 'develop' into feature/DES-612-vertical-spacing
VincentSmedinga Feb 16, 2024
18fc09f
Spell whitespace with a space
VincentSmedinga Feb 16, 2024
55273bd
Remove repetition in size defintions
VincentSmedinga Feb 16, 2024
0e8215e
Simplify white space naming to ‘space’ and ‘margin’
VincentSmedinga Feb 18, 2024
91fccf2
Fix docs title
VincentSmedinga Feb 19, 2024
f0a9480
Remove common space tokens layer agein
VincentSmedinga Feb 19, 2024
1f66b72
Remove fluid vs fixed dinstinction until we need it
VincentSmedinga Feb 19, 2024
ba11fc1
Document usage of pixels and rems
VincentSmedinga Feb 19, 2024
d15b36e
Merge branch 'develop' into feature/DES-612-vertical-spacing
VincentSmedinga Feb 19, 2024
f0e2ba7
Remove excessive parens
VincentSmedinga Feb 20, 2024
c826d16
Add missing quote
VincentSmedinga Feb 20, 2024
d406ab8
Merge branch 'develop' into feature/DES-612-vertical-spacing
VincentSmedinga Feb 20, 2024
ec8e751
Fix interpolation syntax
VincentSmedinga Feb 21, 2024
ade8bb3
Add test for section element
VincentSmedinga Feb 21, 2024
ef9dc52
Simplify keys
VincentSmedinga Feb 21, 2024
caddb31
Merge branch 'develop' into feature/DES-612-vertical-spacing
alimpens Feb 21, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Extend documentation
  • Loading branch information
VincentSmedinga committed Feb 16, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
commit 74f4892bc34b0189816ec6729683097c1d9220f6
6 changes: 0 additions & 6 deletions packages/css/src/components/column/README.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,3 @@
# Column

Stacks its children vertically and adds a vertical gap between them.

## Design

The default vertical column gap has the same length as the default horizontal grid gap.
Consequently, the vertical whitespace is fluid as well, depending on the width of the window.
Five widths are available, ranging from a quarter of the default to double the width.
23 changes: 22 additions & 1 deletion storybook/storybook-react/src/Column/Column.docs.mdx
Original file line number Diff line number Diff line change
@@ -1,11 +1,32 @@
import { Controls, Markdown, Meta, Primary } from "@storybook/blocks";
import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks";
import * as ColumnStories from "./Column.stories.tsx";
import README from "../../../../packages/css/src/components/column/README.md?raw";

<Meta of={ColumnStories} />

<Markdown>{README}</Markdown>

## Design

The five [spacing](?path=/docs/docs-design-guidelines-spacing--docs) lengths are available for the length of the gap.

VincentSmedinga marked this conversation as resolved.
Show resolved Hide resolved
## How to Use

Wrap a Column around a set of components that need the same amount of whitespace between them.

To add whitespace below a single element, using the utility classes for bottom margins is an alternative, e.g. `class="amsterdam-mb-md`.

VincentSmedinga marked this conversation as resolved.
Show resolved Hide resolved
## Examples

### Default

<Primary />

<Controls />

### Use Another HTML Element

By default, a Column renders a `<div>`.
Use the `as` prop to make your markup more semantic.

<Canvas of={ColumnStories.CustomTagName} />
39 changes: 37 additions & 2 deletions storybook/storybook-react/src/Column/Column.stories.tsx
Original file line number Diff line number Diff line change
@@ -3,7 +3,7 @@
* Copyright (c) 2024 Gemeente Amsterdam
*/

import { Column, Paragraph } from '@amsterdam/design-system-react'
import { Card, Column, Heading, Paragraph } from '@amsterdam/design-system-react'
import { Meta, StoryObj } from '@storybook/react'

const ThreeBoxes = Array.from(Array(3).keys()).map((i) => (
@@ -17,9 +17,12 @@ const meta = {
component: Column,
args: {
children: ThreeBoxes,
gap: 'md',
},
argTypes: {
as: {
control: { type: 'radio' },
options: ['article', 'div', 'section'],
},
children: {
table: { disable: true },
},
@@ -35,3 +38,35 @@ export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {}

export const CustomTagName: Story = {
args: {
as: 'section',
children: [
<Card key="2023-07-01">
alimpens marked this conversation as resolved.
Show resolved Hide resolved
<Card.HeadingGroup tagline="Nieuws">
<Heading level={2} size="level-3">
<Card.Link href="#">Nieuwe manieren om afval op te halen</Card.Link>
</Heading>
</Card.HeadingGroup>
<Paragraph>
Afvalboten, bakfietsen en ondergrondse containers. We experimenteren met nieuwe manieren om afval op te halen
in het centrum.
</Paragraph>
<Paragraph size="small">Gepubliceerd: 1 juli 2023</Paragraph>
</Card>,
<Card key="2023-06-15">
<Card.HeadingGroup tagline="Nieuws">
<Heading level={2} size="level-3">
<Card.Link href="#">Verlenging proef ophalen afval per boot</Card.Link>
</Heading>
</Card.HeadingGroup>
<Paragraph>
Een proef met het anders ophalen van afval. We halen vuilniszakken hier op met kleine wagentjes, kleine
vuilniswagens en een afvalboot.
</Paragraph>
<Paragraph size="small">Gepubliceerd: 15 juni 2023</Paragraph>
</Card>,
],
},
}
5 changes: 2 additions & 3 deletions storybook/storybook-react/src/Grid/Grid.docs.mdx
Original file line number Diff line number Diff line change
@@ -77,9 +77,8 @@ An example with `start={2}`:

### Use Another HTML Element

A cell is a `<div>` in your HTML by default.
You can use the `as` prop if you need a different element.
This way, you can make your markup more semantic.
By default, a Grid Cell renders a `<div>`.
Use the `as` prop to make your markup more semantic.

<Canvas of={GridStories.CustomTagName} />

2 changes: 1 addition & 1 deletion storybook/storybook-react/src/Grid/Grid.stories.tsx
Original file line number Diff line number Diff line change
@@ -37,7 +37,7 @@ const cellMeta = {
table: { disable: true },
},
as: {
control: { type: 'inline-radio' },
control: { type: 'radio' },
options: ['article', 'div', 'section'],
},
span: {
4 changes: 2 additions & 2 deletions storybook/storybook-react/src/Spotlight/Spotlight.docs.mdx
Original file line number Diff line number Diff line change
@@ -44,7 +44,7 @@ import README from "../../../../packages/css/src/components/spotlight/README.md?

### Custom HTML Element

By default, a spotlight is included in your HTML as a `<div>`.
Use the `as` prop to render a different element and make your markup more semantic.
By default, a Spotlight renders a `<div>`.
Use the `as` prop to make your markup more semantic.

<Canvas of={SpotlightStories.CustomTagName} />
Loading