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

feat!: Remove gap from Card #1785

Open
wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

feat!: Remove gap from Card #1785

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ed394de
feat(card): remove gap token and CSS prop
RubenSibon Dec 11, 2024
fd57e53
feat(card): add margin bottoms to Card stories
RubenSibon Dec 11, 2024
9360496
Merge branch 'develop' into feat/DES-1069-remove-gap-from-card
RubenSibon Dec 16, 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
1 change: 0 additions & 1 deletion packages/css/src/components/card/card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@

.ams-card {
display: grid;
gap: var(--ams-card-gap);
outline-offset: var(--ams-card-outline-offset);
position: relative;
touch-action: manipulation;
Expand Down
1 change: 0 additions & 1 deletion proprietary/tokens/src/components/ams/card.tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
{
"ams": {
"card": {
"gap": { "value": "{ams.space.sm}" },
"heading-group": {
"gap": { "value": "{ams.space.sm}" }
},
Expand Down
10 changes: 5 additions & 5 deletions storybook/src/components/Card/Card.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ type Story = StoryObj<typeof meta>
export const Default: Story = {
args: {
children: [
<Heading size="level-4" key={1}>
<Heading key={1} className="ams-mb--sm" size="level-4">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should be xs, I think. The CSS utils use the grid space, which is bigger than the regular space. The spacing system is still a little confusing, I think

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was going to reply, “No, they don’t; margin utils use component space, duh”, but then… they appeared to use grid space 😳. That has never been my intention; I have no idea how that got merged.

Bas, Inge and I discussed the approach for designing white space between text components this morning. Bas may have some early conclusions at the end of this week or early January. This PR is pretty isolated, so most of its work will survive; let’s revisit it by then.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good that we find this out now before the 1.0.

The spacing system seems to be a little confusing indeed.

<Card.Link href="/">{topTask.heading}</Card.Link>
</Heading>,
<Paragraph key={2}>{topTask.description}</Paragraph>,
Expand All @@ -47,7 +47,7 @@ export const Default: Story = {
export const WithTagline: Story = {
args: {
children: [
<Card.HeadingGroup key={1} tagline="Dossier">
<Card.HeadingGroup key={1} className="ams-mb--sm" tagline="Dossier">
<Heading size="level-4">
<Card.Link href="/">Monitor Attracties MRA</Card.Link>
</Heading>
Expand All @@ -62,13 +62,13 @@ export const WithTagline: Story = {
export const WithImage: Story = {
args: {
children: [
<Image key={1} alt="" aspectRatio="wide" src="https://picsum.photos/480/360" />,
<Card.HeadingGroup key={2} tagline="Nieuws">
<Image key={1} alt="" aspectRatio="wide" className="ams-mb--sm" src="https://picsum.photos/480/360" />,
<Card.HeadingGroup key={2} className="ams-mb--sm" tagline="Nieuws">
<Heading size="level-4">
<Card.Link href="/">Nederlands eerste houten woonwijk komt in Zuidoost</Card.Link>
</Heading>
</Card.HeadingGroup>,
<Paragraph key={3}>
<Paragraph key={3} className="ams-mb--sm">
We bouwen een levendige, groene en duurzame woonbuurt tussen de Gooiseweg en het Nelson Mandelapark.
</Paragraph>,
<Paragraph key={4} size="small">
Expand Down
4 changes: 2 additions & 2 deletions storybook/src/components/Column/Column.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ export const ImproveSemantics: Story = {
children: [
<Heading level={3}>Zoekresultaten</Heading>,
<Card key={1}>
<Heading level={4}>
<Heading className="ams-mb--sm" level={4}>
<Card.Link href="#">Nieuwe manieren om afval op te halen</Card.Link>
</Heading>
<Paragraph>
Expand All @@ -82,7 +82,7 @@ export const ImproveSemantics: Story = {
</Paragraph>
</Card>,
<Card key={2}>
<Heading level={4}>
<Heading className="ams-mb--sm" level={4}>
<Card.Link href="#">Verlenging proef ophalen afval per boot</Card.Link>
</Heading>
<Paragraph>
Expand Down
6 changes: 3 additions & 3 deletions storybook/src/pages/amsterdam/HomePage/HomeNews.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export const HomeNews = () => (
</Grid.Cell>
<Grid.Cell span={4}>
<Card>
<Image alt="" src="https://picsum.photos/640/360?random=1" />
<Image alt="" className="ams-mb--sm" src="https://picsum.photos/640/360?random=1" />
<Card.HeadingGroup tagline="Nieuws">
<Heading level={2} size="level-4">
<Card.Link href="#">Nederlands eerste houten woonwijk komt in Zuidoost</Card.Link>
Expand All @@ -17,7 +17,7 @@ export const HomeNews = () => (
</Grid.Cell>
<Grid.Cell span={4}>
<Card>
<Image alt="" src="https://picsum.photos/640/360?random=2" />
<Image alt="" className="ams-mb--sm" src="https://picsum.photos/640/360?random=2" />
<Card.HeadingGroup tagline="Nieuws">
<Heading level={2} size="level-4">
<Card.Link href="#">Gratis openbaar vervoer voor kinderen</Card.Link>
Expand All @@ -27,7 +27,7 @@ export const HomeNews = () => (
</Grid.Cell>
<Grid.Cell span={4}>
<Card>
<Image alt="" src="https://picsum.photos/640/360?random=3" />
<Image alt="" className="ams-mb--sm" src="https://picsum.photos/640/360?random=3" />
<Card.HeadingGroup tagline="Nieuws">
<Heading level={2} size="level-4">
<Card.Link href="#">Zonnepanelen op uw dak? Zo houdt u uw huis veilig</Card.Link>
Expand Down
16 changes: 8 additions & 8 deletions storybook/src/pages/amsterdam/HomePage/HomeTopTasks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export const HomeTopTasks = () => (
</Grid.Cell>
<Grid.Cell span={{ narrow: 4, medium: 4, wide: 3 }}>
<Card>
<Heading level={2} size="level-4">
<Heading className="ams-mb--sm" level={2} size="level-4">
<Card.Link href="#">Gemeentebelastingen</Card.Link>
</Heading>
<Paragraph size="small">
Expand All @@ -17,7 +17,7 @@ export const HomeTopTasks = () => (
</Grid.Cell>
<Grid.Cell span={{ narrow: 4, medium: 4, wide: 3 }}>
<Card>
<Heading level={3} size="level-4">
<Heading className="ams-mb--sm" level={3} size="level-4">
<Card.Link href="#">Parkeren + Reizen (P+R)</Card.Link>
</Heading>
<Paragraph size="small">
Expand All @@ -27,15 +27,15 @@ export const HomeTopTasks = () => (
</Grid.Cell>
<Grid.Cell span={{ narrow: 4, medium: 4, wide: 3 }}>
<Card>
<Heading level={3} size="level-4">
<Heading className="ams-mb--sm" level={3} size="level-4">
<Card.Link href="#">Paspoort, ID-kaart en rijbewijs</Card.Link>
</Heading>
<Paragraph size="small">Vraag deze bewijzen aan of verleng ze. Geef een vermissing aan.</Paragraph>
</Card>
</Grid.Cell>
<Grid.Cell span={{ narrow: 4, medium: 4, wide: 3 }}>
<Card>
<Heading level={3} size="level-4">
<Heading className="ams-mb--sm" level={3} size="level-4">
<Card.Link href="#">Onderwijs</Card.Link>
</Heading>
<Paragraph size="small">
Expand All @@ -45,7 +45,7 @@ export const HomeTopTasks = () => (
</Grid.Cell>
<Grid.Cell span={{ narrow: 4, medium: 4, wide: 3 }}>
<Card>
<Heading level={3} size="level-4">
<Heading className="ams-mb--sm" level={3} size="level-4">
<Card.Link href="#">Meldingen openbare ruimte en overlast</Card.Link>
</Heading>
<Paragraph size="small">
Expand All @@ -56,23 +56,23 @@ export const HomeTopTasks = () => (
</Grid.Cell>
<Grid.Cell span={{ narrow: 4, medium: 4, wide: 3 }}>
<Card>
<Heading level={3} size="level-4">
<Heading className="ams-mb--sm" level={3} size="level-4">
<Card.Link href="#">Verhuizing doorgeven</Card.Link>
</Heading>
<Paragraph size="small">Geef uw nieuwe adres door als u binnen Amsterdam of naar Amsterdam verhuist.</Paragraph>
</Card>
</Grid.Cell>
<Grid.Cell span={{ narrow: 4, medium: 4, wide: 3 }}>
<Card>
<Heading level={3} size="level-4">
<Heading className="ams-mb--sm" level={3} size="level-4">
<Card.Link href="#">Grof afval</Card.Link>
</Heading>
<Paragraph size="small">Grof afval zijn spullen die niet in een vuilniszak passen.</Paragraph>
</Card>
</Grid.Cell>
<Grid.Cell span={{ narrow: 4, medium: 4, wide: 3 }}>
<Card>
<Heading level={3} size="level-4">
<Heading className="ams-mb--sm" level={3} size="level-4">
<Card.Link href="#">Kennisgevingen en bekendmakingen</Card.Link>
</Heading>
<Paragraph size="small">
Expand Down
Loading