fix: toptask icon size (#1041)

* fix: toptask icon size change icon-size: value to 2,375rem (38px) * fix: new icons and size showcase on toptasks buttons set size to 2.375rem * fix: error in icon stories * fix: toptask icon-size: value to 2,25rem (36px)
nl-design-system · Jul 5, 2022 · 9249332 · 9249332
1 parent acd6835
commit 9249332
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 4 deletions.
diff --git a/components/toptask-nav/css/template.js b/components/toptask-nav/css/template.js
@@ -20,7 +20,7 @@ export const exampleLinks = [
   },
   {
     href: '#',
-    icon: 'utrecht-icon-melding',
+    icon: 'utrecht-icon-melding-klacht',
     textContent: 'Melding/klacht openbare ruimte doorgeven',
   },
   {
@@ -30,15 +30,17 @@ export const exampleLinks = [
   },
   {
     href: '#',
+    icon: 'utrecht-icon-werken',
     textContent: 'Werken bij de gemeente',
   },
   {
     href: '#',
+    icon: 'utrecht-icon-nummerbord',
     textContent: 'Parkeren: kentekenwijziging doorgeven',
   },
   {
     href: '#',
-    icon: 'utrecht-icon-afval',
+    icon: 'utrecht-icon-afval-scheiden',
     textContent: 'Afval',
   },
 ];

diff --git a/packages/storybook/stories/icon/icon-gallery.stories.mdx b/packages/storybook/stories/icon/icon-gallery.stories.mdx
@@ -52,11 +52,48 @@ import iconSet from "@utrecht/icon/tmp/components/icon-set.json";
 <CustomIconGallery>
   <CustomIconGalleryItem name="utrecht-icon-rijbewijs" icon={<utrecht-icon-rijbewijs />} />
   <CustomIconGalleryItem name="utrecht-icon-paspoort" icon={<utrecht-icon-paspoort />} />
-  <CustomIconGalleryItem name="utrecht-icon-melding" icon={<utrecht-icon-melding />} />
+  <CustomIconGalleryItem name="utrecht-icon-melding" icon={<utrecht-icon-melding-klacht />} />
   <CustomIconGalleryItem name="utrecht-icon-verhuizen" icon={<utrecht-icon-verhuizen />} />
   <CustomIconGalleryItem name="utrecht-icon-afval" icon={<utrecht-icon-afval />} />
   <CustomIconGalleryItem name="utrecht-icon-toeslag" icon={<utrecht-icon-toeslag />} />
   <CustomIconGalleryItem name="utrecht-icon-trouwen" icon={<utrecht-icon-trouwen />} />
+  <CustomIconGalleryItem name="utrecht-icon-afspraak-maken" icon={<utrecht-icon-afspraak-maken />} />
+  <CustomIconGalleryItem name="utrecht-icon-vervoersvoorziening" icon={<utrecht-icon-vervoersvoorziening />} />
+  <CustomIconGalleryItem name="utrecht-icon-afval-container" icon={<utrecht-icon-afval-container />} />
+  <CustomIconGalleryItem name="utrecht-icon-afval-containerpas" icon={<utrecht-icon-afval-containerpas />} />
+  <CustomIconGalleryItem name="utrecht-icon-afval-kalender" icon={<utrecht-afval-kalender />} />
+  <CustomIconGalleryItem name="utrecht-icon-afval-scheiden" icon={<utrecht-icon-afval-scheiden />} />
+  <CustomIconGalleryItem name="utrecht-icon-afval" icon={<utrecht-icon-afval />} />
+  <CustomIconGalleryItem name="utrecht-icon-bewijsstukken" icon={<utrecht-icon-bewijsstukken />} />
+  <CustomIconGalleryItem name="utrecht-icon-bijstand" icon={<utrecht-icon-bijstand />} />
+  <CustomIconGalleryItem name="utrecht-icon-bouwproject" icon={<utrecht-icon-bouwproject />} />
+  <CustomIconGalleryItem name="utrecht-icon-college-b-w" icon={<utrecht-icon-college-b-w />} />
+  <CustomIconGalleryItem name="utrecht-icon-container-bio" icon={<utrecht-icon-container-bio />} />
+  <CustomIconGalleryItem name="utrecht-icon-dakloos" icon={<utrecht-icon-dakloos />} />
+  <CustomIconGalleryItem name="utrecht-icon-parken" icon={<utrecht-icon-parken />} />
+  <CustomIconGalleryItem name="utrecht-icon-parkeren-bedrijven" icon={<utrecht-icon-parkeren-bedrijven />} />
+  <CustomIconGalleryItem name="utrecht-icon-parkeren-betalen" icon={<utrecht-icon-parkeren-betalen />} />
+  <CustomIconGalleryItem name="utrecht-icon-kroon" icon={<utrecht-icon-kroon />} />
+  <CustomIconGalleryItem name="utrecht-icon-markt" icon={<utrecht-icon-markt />} />
+  <CustomIconGalleryItem name="utrecht-icon-parkeervergunning" icon={<utrecht-icon-parkeervergunning />} />
+  <CustomIconGalleryItem name="utrecht-icon-park" icon={<utrecht-icon-park />} />
+  <CustomIconGalleryItem name="utrecht-icon-grofvuil" icon={<utrecht-icon-grofvuil />} />
+  <CustomIconGalleryItem name="utrecht-icon-horeca" icon={<utrecht-icon-horeca />} />
+  <CustomIconGalleryItem name="utrecht-icon-kerstbomen" icon={<utrecht-icon-kerstbomen />} />
+  <CustomIconGalleryItem name="utrecht-icon-klachten" icon={<utrecht-icon-klachten />} />
+  <CustomIconGalleryItem name="utrecht-icon-laadpaal" icon={<utrecht-icon-laadpaal />} />
+  <CustomIconGalleryItem name="utrecht-icon-fiets" icon={<utrecht-icon-fiets />} />
+  <CustomIconGalleryItem name="utrecht-icon-gemeenteraad" icon={<utrecht-icon-gemeenteraad />} />
+  <CustomIconGalleryItem name="utrecht-icon-energie-vergoeding" icon={<utrecht-icon-energie-vergoeding />} />
+  <CustomIconGalleryItem name="utrecht-icon-virus" icon={<utrecht-icon-virus />} />
+  <CustomIconGalleryItem name="utrecht-icon-werken" icon={<utrecht-icon-werken />} />
+  <CustomIconGalleryItem name="utrecht-icon-woning-zoeken" icon={<utrecht-icon-woning-zoeken />} />
+  <CustomIconGalleryItem name="utrecht-icon-verhuizen" icon={<utrecht-icon-verhuizen />} />
+  <CustomIconGalleryItem name="utrecht-icon-verkiezingen" icon={<utrecht-icon-verkiezingen />} />
+  <CustomIconGalleryItem name="utrecht-icon-vluchtelingen" icon={<utrecht-icon-vluchtelingen />} />
+  <CustomIconGalleryItem name="utrecht-icon-omgevingsvisie" icon={<utrecht-icon-omgevingsvisie />} />
+  <CustomIconGalleryItem name="utrecht-icon-omgevingswet" icon={<utrecht-icon-omgevingswet />} />
+  <CustomIconGalleryItem name="utrecht-icon-openingstijden" icon={<utrecht-icon-openingstijden />} />
 </CustomIconGallery>
 
 ## Map Contol

diff --git a/proprietary/design-tokens/src/component/utrecht/toptask-link.tokens.json b/proprietary/design-tokens/src/component/utrecht/toptask-link.tokens.json
@@ -21,7 +21,7 @@
         "color": {}
       },
       "icon": {
-        "size": { "value": "1.7rem" }
+        "size": { "value": "2.25rem" }
       }
     }
   }