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.

Sign up for GitHub

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

poc(spacing): Simplify managing whitespace between page sections #1899

Draft
wants to merge 4 commits into
base: develop
Choose a base branch
from
Draft

poc(spacing): Simplify managing whitespace between page sections #1899

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5479e50
Use component space in gap and margin utilities
VincentSmedinga Mar 1, 2025
80bc868
Add debug styles to highlight page sections
VincentSmedinga Mar 1, 2025
e8e7b21
Let Screen, Page Body, Breakout and Spotlight manage space
VincentSmedinga Mar 1, 2025
6fbf9f6
Update page layout example docs
VincentSmedinga Mar 1, 2025
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
2 changes: 2 additions & 0 deletions packages/css/src/components/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,8 @@
@use "radio/radio";
@use "row/row";
@use "screen/screen";
@use "screen/screen-poc-debug";
@use "screen/screen-poc-space";
@use "search-field/search-field";
@use "select/select";
@use "skip-link/skip-link";
Expand Down
49 changes: 49 additions & 0 deletions packages/css/src/components/screen/screen-poc-debug.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
/**
* @license EUPL-1.2+
* Copyright Gemeente Amsterdam
*/

body {
background-image: repeating-linear-gradient(
45deg,
rgb(0 0 0 / 6.25%),
rgb(0 0 0 / 6.25%) var(--ams-space-grid-xs),
rgb(0 0 0 / 12.5%) var(--ams-space-grid-xs),
rgb(0 0 0 / 12.5%) var(--ams-space-grid-sm)
);
}

.ams-screen {
background: transparent;
}

.ams-header,
.ams-page-body,
.ams-footer,
.ams-grid,
.ams-grid > *,
.ams-spotlight {
box-shadow: inset 0 0 0 0.5rem rgb(0 0 0 / 25%);
}

main {
.ams-grid {
background-color: var(--ams-color-highlight-yellow);

> * {
background-color: rgb(255 255 255 / 50%);
}
}

.ams-spotlight {
background-color: var(--ams-color-highlight-purple);

> .ams-grid {
background-color: transparent;

> * {
background-color: rgb(255 255 255 / 25%);
}
}
}
}
39 changes: 39 additions & 0 deletions packages/css/src/components/screen/screen-poc-space.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
/**
* @license EUPL-1.2+
* Copyright Gemeente Amsterdam
*/

// Add top and bottom padding to screen
// Remove padding from header
// Add more space below footer
.ams-screen {
padding-block: var(--ams-space-grid-sm);
}

.ams-header,
[class*="ams-grid--padding-"] {
padding-block: 0 !important;
}

// Add gap to Screen and Page Body
// To replace all manual block paddings on Grid
.ams-screen,
.ams-page-body {
display: grid;
gap: var(--ams-space-grid-md);
}

.ams-grid,
.ams-spotlight {
&[class*="ams-mb-"] {
margin-block-end: 0 !important;
}
}

// Add block padding to Spotlight and Breakout
// To replace manual block paddings on child Grids
.ams-breakout,
.ams-spotlight,
.ams-footer__spotlight {
padding-block: var(--ams-space-grid-md);
}
10 changes: 5 additions & 5 deletions proprietary/tokens/src/components/ams/gap.tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
{
"ams": {
"gap": {
"xs": { "value": "{ams.space.grid.xs}" },
"sm": { "value": "{ams.space.grid.sm}" },
"md": { "value": "{ams.space.grid.md}" },
"lg": { "value": "{ams.space.grid.lg}" },
"xl": { "value": "{ams.space.grid.xl}" }
"xs": { "value": "{ams.space.xs}" },
"sm": { "value": "{ams.space.sm}" },
"md": { "value": "{ams.space.md}" },
"lg": { "value": "{ams.space.lg}" },
"xl": { "value": "{ams.space.xl}" }
}
}
}
10 changes: 5 additions & 5 deletions proprietary/tokens/src/components/ams/margin.tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
{
"ams": {
"margin": {
"xs": { "value": "{ams.space.grid.xs}" },
"sm": { "value": "{ams.space.grid.sm}" },
"md": { "value": "{ams.space.grid.md}" },
"lg": { "value": "{ams.space.grid.lg}" },
"xl": { "value": "{ams.space.grid.xl}" }
"xs": { "value": "{ams.space.xs}" },
"sm": { "value": "{ams.space.sm}" },
"md": { "value": "{ams.space.md}" },
"lg": { "value": "{ams.space.lg}" },
"xl": { "value": "{ams.space.xl}" }
}
}
}
2 changes: 1 addition & 1 deletion storybook/src/pages/amsterdam/ArticlePage/ArticlePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export const ArticlePage = ({
}: ArticlePageProps) => (
<>
<ArticleBreadcrumb />
<main id="main">
<main className="ams-page-body" id="main">
<ArticleHeader heading={heading} imageSrc={imageSrc} />
<ArticleBody
lead={lead}
Expand Down
148 changes: 75 additions & 73 deletions storybook/src/pages/amsterdam/FormPage/FormPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,83 +22,85 @@ export const FormPage = () => {
const [textareaLength, setTextareaLength] = useState(0)

return (
<Grid paddingBottom="medium" paddingTop="small">
<Grid.Cell span={{ narrow: 4, medium: 6, wide: 8 }} start={{ narrow: 1, medium: 2, wide: 3 }}>
<Breadcrumb>
<Breadcrumb.Link>Home</Breadcrumb.Link>
</Breadcrumb>
<Heading className="ams-mb--md" level={1}>
Contact
</Heading>
<form className="ams-gap--md" id="main" onSubmit={(e) => e.preventDefault()}>
<Field>
<Label htmlFor="body">Wat wilt u aan de gemeente vragen?</Label>
<Paragraph id="bodyDescription" size="small">
Een duidelijke beschrijving van uw vraag helpt ons bij het behandelen.
</Paragraph>
<TextArea
aria-describedby="bodyDescription"
id="body"
onChange={(e) => setTextareaLength(e.target.value.length)}
rows={4}
/>
<CharacterCount length={textareaLength} maxLength={1000} />
</Field>
<FieldSet aria-describedby="contactDetailsDescription" legend="Wat zijn uw gegevens?">
<Column gap="small">
<Paragraph id="contactDetailsDescription">
Wij hebben uw gegevens nodig om contact met u te kunnen opnemen.
<main className="ams-page-body" id="main">
<Grid paddingBottom="medium" paddingTop="small">
<Grid.Cell span={{ narrow: 4, medium: 6, wide: 8 }} start={{ narrow: 1, medium: 2, wide: 3 }}>
<Breadcrumb>
<Breadcrumb.Link>Home</Breadcrumb.Link>
</Breadcrumb>
<Heading className="ams-mb--md" level={1}>
Contact
</Heading>
<form className="ams-gap--md" id="main" onSubmit={(e) => e.preventDefault()}>
<Field>
<Label htmlFor="body">Wat wilt u aan de gemeente vragen?</Label>
<Paragraph id="bodyDescription" size="small">
Een duidelijke beschrijving van uw vraag helpt ons bij het behandelen.
</Paragraph>
<Field>
<Label htmlFor="initials">Voorletters</Label>
<TextInput id="initials" name="initials" />
</Field>
<Field>
<Label htmlFor="familyName">Achternaam</Label>
<TextInput autoComplete="family-name" id="familyName" name="familyName" />
</Field>
<FieldSet legend="Woonplaats">
<Radio name="city" value="amsterdam">
Amsterdam
</Radio>
<Radio name="city" value="weesp">
Weesp
</Radio>
<Radio name="city" value="anders">
Anders
</Radio>
</FieldSet>
<Field>
<Label htmlFor="email">E-mail</Label>
<TextInput autoComplete="email" id="email" name="email" />
</Field>
<Row wrap>
<TextArea
aria-describedby="bodyDescription"
id="body"
onChange={(e) => setTextareaLength(e.target.value.length)}
rows={4}
/>
<CharacterCount length={textareaLength} maxLength={1000} />
</Field>
<FieldSet aria-describedby="contactDetailsDescription" legend="Wat zijn uw gegevens?">
<Column gap="small">
<Paragraph id="contactDetailsDescription">
Wij hebben uw gegevens nodig om contact met u te kunnen opnemen.
</Paragraph>
<Field>
<Label htmlFor="countryCode">Landnummer</Label>
<Select id="countryCode" name="countryCode">
<Select.Option value="+31">Nederland +31</Select.Option>
<Select.Option value="+32">België +32</Select.Option>
<Select.Option value="+33">Frankrijk +33</Select.Option>
</Select>
<Label htmlFor="initials">Voorletters</Label>
<TextInput id="initials" name="initials" />
</Field>
<Field>
<Label htmlFor="phone">Telefoonnummer</Label>
<TextInput autoComplete="tel" id="phone" name="phone" />
<Label htmlFor="familyName">Achternaam</Label>
<TextInput autoComplete="family-name" id="familyName" name="familyName" />
</Field>
</Row>
</Column>
</FieldSet>
<Alert heading="Waarom vragen we om deze gegevens?" headingLevel={2}>
<Paragraph>
We bewaren uw contactgegevens voor het afhandelen van uw vraag of klacht en het verbeteren van onze
dienstverlening.
</Paragraph>
</Alert>
<div>
<Button type="submit">Versturen</Button>
</div>
</form>
</Grid.Cell>
</Grid>
<FieldSet legend="Woonplaats">
<Radio name="city" value="amsterdam">
Amsterdam
</Radio>
<Radio name="city" value="weesp">
Weesp
</Radio>
<Radio name="city" value="anders">
Anders
</Radio>
</FieldSet>
<Field>
<Label htmlFor="email">E-mail</Label>
<TextInput autoComplete="email" id="email" name="email" />
</Field>
<Row wrap>
<Field>
<Label htmlFor="countryCode">Landnummer</Label>
<Select id="countryCode" name="countryCode">
<Select.Option value="+31">Nederland +31</Select.Option>
<Select.Option value="+32">België +32</Select.Option>
<Select.Option value="+33">Frankrijk +33</Select.Option>
</Select>
</Field>
<Field>
<Label htmlFor="phone">Telefoonnummer</Label>
<TextInput autoComplete="tel" id="phone" name="phone" />
</Field>
</Row>
</Column>
</FieldSet>
<Alert heading="Waarom vragen we om deze gegevens?" headingLevel={2}>
<Paragraph>
We bewaren uw contactgegevens voor het afhandelen van uw vraag of klacht en het verbeteren van onze
dienstverlening.
</Paragraph>
</Alert>
<div>
<Button type="submit">Versturen</Button>
</div>
</form>
</Grid.Cell>
</Grid>
</main>
)
}
24 changes: 12 additions & 12 deletions storybook/src/pages/amsterdam/HomePage/HomePage.docs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,25 +14,25 @@ The starting page of an application generally provides a broad overview of subje
A typical layout for a homepage:

```tsx
<Screen>
<Page>
<SkipLink href="#main">Direct naar inhoud</SkipLink>
<Grid>
<Header />
</Grid>
<main id="main">
<PageGrid>
<PageHeader />
</PageGrid>
<PageBody as="main" id="main">
<Overlap>
<Search />
</Overlap>
<Grid>
<PageGrid>
<AppComponent1 />
<AppComponent2 />
<AppComponent3 />
</Grid>
</main>
<Footer>
<Grid />
</Footer>
</Screen>
</PageGrid>
</PageBody>
<PageFooter>
<PageGrid />
</PageFooter>
</Page>
```

1. The Skip Link prevents users from having to pass all preceding navigation links.
Expand Down
2 changes: 1 addition & 1 deletion storybook/src/pages/amsterdam/HomePage/HomePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { HomeTopTasks } from './HomeTopTasks'
import { Default as OverlapStory } from '../../../components/Overlap/Overlap.stories'

export const HomePage = () => (
<main id="main">
<main className="ams-page-body" id="main">
<Overlap>{OverlapStory.args?.children}</Overlap>
<HomeTopTasks />
<HomeSpotlight />
Expand Down
Loading