From d31c1834dcc9873caa2a7028c4632052b1418c1d Mon Sep 17 00:00:00 2001 From: Aram <37216945+alimpens@users.noreply.github.com> Date: Wed, 8 May 2024 12:05:05 +0200 Subject: [PATCH 1/4] chore: Add test for `small` prop to UnorderedList (#1222) --- packages/react/src/UnorderedList/UnorderedList.test.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/react/src/UnorderedList/UnorderedList.test.tsx b/packages/react/src/UnorderedList/UnorderedList.test.tsx index f0d847c11c..48082c57c5 100644 --- a/packages/react/src/UnorderedList/UnorderedList.test.tsx +++ b/packages/react/src/UnorderedList/UnorderedList.test.tsx @@ -61,6 +61,14 @@ describe('Unordered list', () => { expect(items.length).toBe(3) }) + it('renders the small size class', () => { + render() + + const component = screen.getByRole('list') + + expect(component).toHaveClass('ams-unordered-list--small') + }) + it('supports ForwardRef in React', () => { const ref = createRef() From 6eeaeb41fae90a2d455b4e41da3ff3a4561dcbe4 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Wed, 8 May 2024 12:37:38 +0200 Subject: [PATCH 2/4] fix!: Flatten token names for default text size and line height (#1221) --- packages/css/src/components/link-list/link-list.scss | 4 ++-- packages/css/src/components/paragraph/paragraph.scss | 4 ++-- proprietary/tokens/src/components/ams/link-list.tokens.json | 6 ++---- proprietary/tokens/src/components/ams/paragraph.tokens.json | 6 ++---- 4 files changed, 8 insertions(+), 12 deletions(-) diff --git a/packages/css/src/components/link-list/link-list.scss b/packages/css/src/components/link-list/link-list.scss index e602c3cf3a..8df908b4fe 100644 --- a/packages/css/src/components/link-list/link-list.scss +++ b/packages/css/src/components/link-list/link-list.scss @@ -26,10 +26,10 @@ color: var(--ams-link-list-link-color); display: inline-flex; font-family: var(--ams-link-list-link-font-family); - font-size: var(--ams-link-list-link-medium-font-size); + font-size: var(--ams-link-list-link-font-size); font-weight: var(--ams-link-list-link-font-weight); gap: var(--ams-link-list-link-gap); - line-height: var(--ams-link-list-link-medium-line-height); + line-height: var(--ams-link-list-link-line-height); outline-offset: var(--ams-link-list-link-outline-offset); text-decoration-line: var(--ams-link-list-link-text-decoration-line); text-decoration-thickness: var(--ams-link-list-link-text-decoration-thickness); diff --git a/packages/css/src/components/paragraph/paragraph.scss b/packages/css/src/components/paragraph/paragraph.scss index d2cfa2a229..6648b32e66 100644 --- a/packages/css/src/components/paragraph/paragraph.scss +++ b/packages/css/src/components/paragraph/paragraph.scss @@ -13,9 +13,9 @@ .ams-paragraph { color: var(--ams-paragraph-color); font-family: var(--ams-paragraph-font-family); - font-size: var(--ams-paragraph-medium-font-size); + font-size: var(--ams-paragraph-font-size); font-weight: var(--ams-paragraph-font-weight); - line-height: var(--ams-paragraph-medium-line-height); + line-height: var(--ams-paragraph-line-height); @include text-rendering; @include reset; diff --git a/proprietary/tokens/src/components/ams/link-list.tokens.json b/proprietary/tokens/src/components/ams/link-list.tokens.json index c82861a815..4ee797a87c 100644 --- a/proprietary/tokens/src/components/ams/link-list.tokens.json +++ b/proprietary/tokens/src/components/ams/link-list.tokens.json @@ -5,8 +5,10 @@ "link": { "color": { "value": "{ams.link-appearance.color}" }, "font-family": { "value": "{ams.text.font-family}" }, + "font-size": { "value": "{ams.text.level.5.font-size}" }, "font-weight": { "value": "{ams.text.font-weight.normal}" }, "gap": { "value": "0.5em" }, + "line-height": { "value": "{ams.text.level.5.line-height}" }, "outline-offset": { "value": "{ams.focus.outline-offset}" }, "text-decoration-line": { "value": "{ams.link-appearance.subtle.text-decoration-line}" }, "text-decoration-thickness": { "value": "{ams.link-appearance.text-decoration-thickness}" }, @@ -15,10 +17,6 @@ "font-size": { "value": "{ams.text.level.6.font-size}" }, "line-height": { "value": "{ams.text.level.6.line-height}" } }, - "medium": { - "font-size": { "value": "{ams.text.level.5.font-size}" }, - "line-height": { "value": "{ams.text.level.5.line-height}" } - }, "large": { "font-size": { "value": "{ams.text.level.4.font-size}" }, "line-height": { "value": "{ams.text.level.4.line-height}" } diff --git a/proprietary/tokens/src/components/ams/paragraph.tokens.json b/proprietary/tokens/src/components/ams/paragraph.tokens.json index 258ed9391a..9e3ba0c585 100644 --- a/proprietary/tokens/src/components/ams/paragraph.tokens.json +++ b/proprietary/tokens/src/components/ams/paragraph.tokens.json @@ -3,16 +3,14 @@ "paragraph": { "color": { "value": "{ams.color.primary-black}" }, "font-family": { "value": "{ams.text.font-family}" }, + "font-size": { "value": "{ams.text.level.5.font-size}" }, "font-weight": { "value": "{ams.text.font-weight.normal}" }, + "line-height": { "value": "{ams.text.level.5.line-height}" }, "inverse-color": { "value": "{ams.color.primary-white}" }, "small": { "font-size": { "value": "{ams.text.level.6.font-size}" }, "line-height": { "value": "{ams.text.level.6.line-height}" } }, - "medium": { - "font-size": { "value": "{ams.text.level.5.font-size}" }, - "line-height": { "value": "{ams.text.level.5.line-height}" } - }, "large": { "font-size": { "value": "{ams.text.level.4.font-size}" }, "line-height": { "value": "{ams.text.level.4.line-height}" } From 55139617966514207402f791a5b4e9778d059946 Mon Sep 17 00:00:00 2001 From: Ruben Sibon Date: Wed, 8 May 2024 18:16:16 +0200 Subject: [PATCH 3/4] feat: favicon, app icons and optional Web Manifest (#1205) Co-authored-by: Vincent Smedinga Co-authored-by: Niels Roozemond --- proprietary/assets/README.md | 4 + proprietary/assets/app-icons/icon-192.png | Bin 0 -> 1053 bytes proprietary/assets/app-icons/icon-512.png | Bin 0 -> 2712 bytes proprietary/assets/favicon.ico | Bin 9662 -> 0 bytes .../assets/favicon/apple-touch-icon.png | Bin 0 -> 1298 bytes proprietary/assets/favicon/favicon.ico | Bin 0 -> 13094 bytes proprietary/assets/favicon/icon.svg | 1 + proprietary/assets/manifest/app.webmanifest | 16 +++ storybook/config/main.ts | 1 + storybook/config/preview-body.html | 23 ++++ storybook/config/storybook-overrides.css | 7 +- storybook/src/docs/components/AppIcons.tsx | 53 ++++++++ storybook/src/docs/favicon.docs.mdx | 100 +++++++++++++++ storybook/src/docs/web-app.docs.mdx | 114 ++++++++++++++++++ 14 files changed, 318 insertions(+), 1 deletion(-) create mode 100644 proprietary/assets/app-icons/icon-192.png create mode 100644 proprietary/assets/app-icons/icon-512.png delete mode 100644 proprietary/assets/favicon.ico create mode 100644 proprietary/assets/favicon/apple-touch-icon.png create mode 100644 proprietary/assets/favicon/favicon.ico create mode 100644 proprietary/assets/favicon/icon.svg create mode 100644 proprietary/assets/manifest/app.webmanifest create mode 100644 storybook/src/docs/components/AppIcons.tsx create mode 100644 storybook/src/docs/favicon.docs.mdx create mode 100644 storybook/src/docs/web-app.docs.mdx diff --git a/proprietary/assets/README.md b/proprietary/assets/README.md index 47ef70cb36..a2ebf9ad27 100644 --- a/proprietary/assets/README.md +++ b/proprietary/assets/README.md @@ -3,3 +3,7 @@ # Assets Assets for the City of Amsterdam + +## Web app manifest, app icons and favicon + +See the Design System documentation for an [overview and examples of the manifest and these icons](https://amsterdam.github.io/design-system/?path=/docs/docs-assets-favicon-app-icons--docs). diff --git a/proprietary/assets/app-icons/icon-192.png b/proprietary/assets/app-icons/icon-192.png new file mode 100644 index 0000000000000000000000000000000000000000..d2f996b477f7a20fa522d5f94cc1dd8dc8c57259 GIT binary patch literal 1053 zcmeAS@N?(olHy`uVBq!ia0vp^2SAvE8Azrw%`pX16#+gWuK)l4f5X7=mX-DY-@k8# zg#La0{FayZ=Y|cRlahX4xbXYTna|PD|K7jBU4aq&M_ul_!E?B|LVKNcy}!0^f3K$YWAWm5Qc{0z z-1t6q>gTYqKR0hW_~(=|Ffb>0x;TbZ+;+DVDSIaH* zJ-E)w_b+ZkSN3gJaA@4zZs+5iUsdp9_5QEUyJu$o&%J$K`S-5<3mtw%SD%Sv*ss@M zj~Wy}^M8F7N07W+&welCdhvYU^FNKtxaR!Xb>O5v_q(}&{y07B3#*fB&OTjlwY~1c zx5Wo;pJzJrh<%0znBC8mZ_l;oui@XjMTPHkJbwS5do@$x-`)45MNho` zzSF<)OS^yLH)&BGcVN&bAKo!v^ZyHe)!43 zp$z*EKbCwD4vZa}1ST+7*$BdY!VKmnd$qal4*GCS&+K$%dY)-8Yt7%6@vi6I9y<<6 z533%ee)+k-=Zv(d$@1&}V;%q_WV<};y*iPK-+?gBzmCa2n?Du&GqA&*6!!h!5NRR0 z;`RNxfsLQq0~@~p!$G+AKO?K$|3i;57oDFU_@IC#0+>o={^%^24^IqSTR;gzB*UId z=8r~0{QrLk4&LY9_ThBX+GhJCx$9|P^NyfojsKPPjF*KC-XAFbstL^R44$rjF6*2U FngEOQES&%V literal 0 HcmV?d00001 diff --git a/proprietary/assets/app-icons/icon-512.png b/proprietary/assets/app-icons/icon-512.png new file mode 100644 index 0000000000000000000000000000000000000000..b711622f056dee556d96c9a348acc7ff4f74c2e3 GIT binary patch literal 2712 zcmc&$4OA0X7M=+mPzEHPEeR`?z(QTifuQad7hOpzAW}ho1k0~MTo*YYVZq&?pfii0 zu75zgE>&~`mhvN7piodTObVr_9GYO{NB$C}NT7s(kc3Q_nH}0aJ@)kMQqP{AeP`Z% z@7?d-`|jL(?mh2sA-nypE!S8A0AL-k(>DwN81$9_tT3aOwsM#I^l~C3Fx-!#s3`!T z2x2}dNwZ?bw4L1)gP~owZravXpOT)T$1wk|3Za}g0QcJ0zwSxwv9lRDkvz`!h@zi|2T zTtWgdKCb0*by-<&!eJ)>U}aB$?>pg{15;m=t^^#JfHau((L2nO?ZkVpZ)SS06g^$? z{XY)Xu-b4l?xaUoM0DBOzf3s3nd4}gbEv5Dx7;I6>vPQNubRYZXPmRs6;ZyiPun}T z2v6JU5y3gLFlr3E^i&4cVHV-1kZgc-2>B&B3oc~w4=!|AsI)Z5;h@WclnVVTPjXb+ z-p2C=5SvOXY5`c>R2IkTE_0>iU?4l5I$RFdQl1K^A1Qvyn8Lm~1nLE90ZP=hK>eJXb-b7ZNaL4e$_3)d z8dLq-`o!cZS#Q7i*7AVCD}8PB*cL&(tbldY)Qp~%Y>m9&YMHYkTlj{r#m043PL;*` zKUA4`r4`%nKg(FiDGXSr6#26x@0b)-Qn2NZgWK{#ugt7Qkcr-dFfJ+cpcd4cZlJhRHRQf)KTKq1Y zW=aOhC3-V1tC8w9dD`bwsG2<7-CNJjS~$~+`| zyz7LuCYM5bv+V~gh&aArUIZTRRzmZB2wTp6MFwTiB~`A%o6#1MHglNJXc<@VJ|)yJ zFQBc-+nyP<)uM}&E$&KcW~^F^UT`yT+Mtv_NT@W>K1$1rmG0;@*|2L1b>uSatw&FI zxo4Il*&X-4X_F7fgUK=kUzJICAMuam4~U_D%#~F@*Q&neEL28Bp+t28n1rz6sT==> zZ*<1c<+-fbGFE;FE0OSa#v{^AN=DQHa-KjMY$|H|o`F}uwMazKW_)~UW#b*G`XZNr z_h0_X@@I{n%)59@TByt;KiJtbpTjM2S+(jQm_#WaK;ga!tH2-vZM%5_fKH9yyo}99 z*deQlIY_RgVJaJ>K}L zJ%^x=ue~tUSPQ$bPU>D-vc|v(9|A3s3|OQz04Jh;5@~5vQdcoA+>f0)YJ9YfQfyTz zn&8dPpz}EW_sK`WkI3@tRP;V+C03=z{=wcbDRjka#{Ms`igc#$)@A>RaxR`0XA&XMX4{DRDsZRmIXdz;CzjC)?w5{sm(Q BfZYH9 literal 0 HcmV?d00001 diff --git a/proprietary/assets/favicon.ico b/proprietary/assets/favicon.ico deleted file mode 100644 index 15e8552a173c32abfb1f748cf36a2f2e61912e8a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 9662 zcmeHN!D<3A5S^ZT@KESg4=wbje`No}Px0En@kg{4N}*6_nx{Mn*-Q>vyDv5)>%g1D zeQ#zq*?s}*vgddJKiGrW-R0%oCG&wxk<_WSR!T79@| z5W^Tn1F!k~EtqY?a``@>2n;cdQPYre2gh6kxihAyA?HX99zH0L08rw}oYP~Bveh)G zb7x+s)7Qf_z?{PaYr$I1e~mk9q1rh#z zQ3KCvF>lUa;_LNim`rwIv-ujF78qg}qiEp8H9prs?u@HxKwp3}`N2~|&Ydx}Uh;T) zx)gh;q@h$3MegL}X<$EboT_h`zsH?Dq+Ej%ckpfD`n`trv*rDZYY8-XJ;@rRWn>7uH zwP5}I?KoAc^$xEC)gCHw2j=19WVn3RbnhzVIoF{04m8yOzPV9@B6o6a`TmC*y8mAp L;QxTSA14DpxyG^I diff --git a/proprietary/assets/favicon/apple-touch-icon.png b/proprietary/assets/favicon/apple-touch-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..14707dd9fa7f483b7f577663b81c08cb4583789c GIT binary patch literal 1298 zcmV+t1?~EYP)VkxX8r5y{psoQcX$8%{QTYB{Mgv>VPW-_ zmh1@$>;eM*?(Xt*bnik!^ook~g@yBee*gIR@o8!ANJ#7r4gT%z^`4&cZ*TBeSny6x z?HU^G6&3#T^YoCA{`BDadhk+G?>#;J~= zN=o|B(D}l`?kg+!x3~7DrvL4j%K!ib97#k$RCwC$+v#%JFcbw~UD=q;ECz=i!cGg6 z03}V@_kXb32qf9+zs_`yJNJ8n6U~V^N{nEPF~%5Uj4{R-V~jDz82i7~MP9Qc1-A3P zEwW@~--1pptG8~gC9|3PH1&W}%gTj_YAw4Pl_?QTfzSHmlTx*|^j%lOEznubWAqpZcBvG#-*MY27og$T$f=G8mDT_F85#zm)`}u-B!h z&!nUmBFGFG33$Sj0vh^zA=aLJ&d8&ZHin_g4i8o3)vI4V>(bgzrm4J9a( zWmkyI&B{9&>E^?yc3t+f5uM(3S`44s>^eI&<}6h*yRI<3wsu`%dM)j4tOt>``CuEO z?yzRpg$?|M=x3e&><&io4H?@9J1^xo->f4L1(UAXb@|PA9gPJfZ=$>5Y`(!40V;@` zU8j0I8v@U!uy!@~L37)k?P1SZHDuj+ac;Xq=*&s#pD#{negbzx`7ZKgQ!vKB2J{yg10+IBWF+C+u zJ}rVsjM-J?A^s5LXZKf6TfeWqK+^Hy)`ElsD^PXHNL#LUqG=@+m#w z-$5(&iYyEGZm5lvDaZiwukP=R=w4Q&-oO7c~Gt?KDQbCPU zr>&KFNQv11wjuiJGA~(~l^y8IHNj#=%4NQN^tnL~-63Q{GS{tN>A}kS2>oTkX7xSu z3Z&|WR`vy=?^XMy-nZ@R$jN4bO$X4p( zA2Q>1d9AxXI)kpk)^X01yCPS#;E|Qb!Kf2J4+S4>ui@f_F1c4 z=Qx3m>1;QO)R4@s>t9G)<2Iz;uy$R!o!NYI%!bI^=1(^t{F84yAR}r!o9~wZB&!#D z*X1|g5%jx#=bP?^v-wu2^HiQMI&*IG9emKtX~fOF8_wqIw_!6UCH}Z|%Wavz?e zVf$=I&v%Z$hkVW{8Mw#)0-l*M#u#IaF~%5Uj4{R-W9+Z}24w(2$m;5b6#xJL07*qo IM6N<$g2+^^#sB~S literal 0 HcmV?d00001 diff --git a/proprietary/assets/favicon/favicon.ico b/proprietary/assets/favicon/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..4efa59aa6ef02b919a71341298730a21740eafa6 GIT binary patch literal 13094 zcmeHNXK+(j7XBp5mgH_+Ft)MfhHVU%Xd!?B#{|=xA$hy7yRb{k0;Vo3y95k)7ZTcn zEv3vPWF}=oCdniry^$YeCV$cf%uE{!3vDPWvZ1(`M@0pX;lp`UR`RH-;>kXb+FCp6>g=em zx5H?(W6~rCrc805wbg;CQ=OPL%}M)kqP^XTS+ks&J==-7b6uD>&xQH(U0ATdg@p@U zShUE6#fx27y3~aY8$8&w$%C#g4>oW1V9OQ{wr=%c+cpn&?(|~UE-!ZP_F~T-FZS;B z;=lnP4j%O3&>}c7^7kH>psGZmMr8^H#N%m{t)q_FP9Gy=L4gNUZjpF97f<6@+2%X*5|0hbLcucG z@?2+rB5`dRCE^^{d1b=rjH~2ZzZ4|qCY+d~%$cG3S%P4Pu1JZ3p@5*EgKB353WWQM zel|B#%N`^J_m|;JPCr=?uTioA15+SSg%WX&GyFJljvFQ@C{t#g<5=X05^0pJB_Xa< zK|FDS3zSCL6t`Xx52AuCT+X)6@=o_?s3ys_&rJa0c{e~cQNB3GT{b)+Rjo)|iOH1A zFCGE*n5F3dHv)~cb#~WTMPo3W7_bRgv080KTACFa4I4aR$2MrS3_G?WE6aKTH!dl$ zqNK!zvN9XW%dLbV+XzEugW<@w1eR9xW|A;m9_O8N*}TI3DB2^O!J!$K=U& z!j*Z#m3hLIdBT%<%$&)F9UUD!4Ljk>4#Jmt%$Z{+JlT%UPCJ$_cVfi~CswX>VD)MT z)~s=1-8u)>uXkYMMknFSF2b2zgfly6uy;4%%}&CborE{LuzkA=J9an;cXnalJ~z6% z-Pph1jh-GC;ms}_IpW6Aqi({QJ?QQA((n=9?19oT4L=@!n2i7)dBjf`bpTI15g?p8h^L+k z&#x3w;_I*DIQF;SM)BQuQCO`}*lbbod=z#& z8!Q8=A3xLh%~-7$DPF?hW(_-f*Omjm$rdZ ze<92S=#=7(pz$EPyp;Y;ns$oJWlTNlS(GGD&jdYmlL)}0C`lmm92S`)tEgUUm6U+J z(^V81iqc4FUjXy9e`1k2wRV@pFPJ6HCzab`xlY)oBAUVE-wCWsCCva?ui z+->gZ&}2zEuh@Br@tbB+#^y>iVQ`m<{D``{`+i! z@9K3Dy!p+uP_R?s?}fOAQTnG&kF+ z-gIE>SO?XdtcHyDC~=&NYDYI#t#VWC=*HT$9;zEXLVptLOFDfzfZJ{hP%Rh0op%PP zmJ8s_nIP`H_xm2BvuA^N^wA(5do12tbpCw!LJtw^9b)}LtXGKDR;+$v^--#4h!UKl zR0I@8!1PPfkV=!Oa)_wKa->yNrJ-DuVHh1#7$&-GG8NEohZk8k(2YSoT$G`fl#_{C zF^19ELrtb(S);_(2mQQ-aR@Iz$l9D)Y%-PVNB-a;+B#HC|`Xs&_`?IfcpgGS!($>)JGJ(mb~)H)$?D`LO~1FL-wC+5i9m literal 0 HcmV?d00001 diff --git a/proprietary/assets/favicon/icon.svg b/proprietary/assets/favicon/icon.svg new file mode 100644 index 0000000000..62e1a0bf69 --- /dev/null +++ b/proprietary/assets/favicon/icon.svg @@ -0,0 +1 @@ + diff --git a/proprietary/assets/manifest/app.webmanifest b/proprietary/assets/manifest/app.webmanifest new file mode 100644 index 0000000000..e83a59826e --- /dev/null +++ b/proprietary/assets/manifest/app.webmanifest @@ -0,0 +1,16 @@ +{ + "name": "APP_NAME_FULL", + "short_name": "APP_NAME", + "icons": [ + { + "src": "app-icons/icon-192.png", + "type": "image/png", + "sizes": "192x192" + }, + { + "src": "app-icons/icon-512.png", + "type": "image/png", + "sizes": "512x512" + } + ] +} diff --git a/storybook/config/main.ts b/storybook/config/main.ts index f729adbb0e..95ae86b853 100644 --- a/storybook/config/main.ts +++ b/storybook/config/main.ts @@ -30,6 +30,7 @@ const config: StorybookConfig = { docs: { autodocs: true, }, + staticDirs: ['../../proprietary/assets'], typescript: { reactDocgen: 'react-docgen-typescript', }, diff --git a/storybook/config/preview-body.html b/storybook/config/preview-body.html index d655261501..5a5f4d4cb8 100644 --- a/storybook/config/preview-body.html +++ b/storybook/config/preview-body.html @@ -1,5 +1,7 @@