feat(card): add margin bottoms to Card stories

Amsterdam · Dec 11, 2024 · fd57e53 · fd57e53
1 parent ed394de
commit fd57e53
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 18 deletions.
diff --git a/storybook/src/components/Card/Card.stories.tsx b/storybook/src/components/Card/Card.stories.tsx
@@ -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">
         <Card.Link href="/">{topTask.heading}</Card.Link>
       </Heading>,
       <Paragraph key={2}>{topTask.description}</Paragraph>,
@@ -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>
@@ -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">

diff --git a/storybook/src/components/Column/Column.stories.tsx b/storybook/src/components/Column/Column.stories.tsx
@@ -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>
@@ -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>

diff --git a/storybook/src/pages/amsterdam/HomePage/HomeNews.tsx b/storybook/src/pages/amsterdam/HomePage/HomeNews.tsx
@@ -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>
@@ -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>
@@ -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>

diff --git a/storybook/src/pages/amsterdam/HomePage/HomeTopTasks.tsx b/storybook/src/pages/amsterdam/HomePage/HomeTopTasks.tsx
@@ -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">
@@ -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">
@@ -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">
@@ -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">
@@ -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">