diff options
| author | Armand Philippot <git@armandphilippot.com> | 2023-09-28 18:03:43 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2023-10-24 12:25:00 +0200 |
| commit | 837e0e904c40f7b87561c34ca3f49edd5d8d1c52 (patch) | |
| tree | 37835dd2c84ed770b5719152aab0b74d93c0878c | |
| parent | d17d894f398650209c0ddd29502308de8c07bd93 (diff) | |
feat(components): replace icons with a generic Icon component
Sizes are also predefined and can be set using the `size` prop,
so the consumers should no longer adjust the size in CSS.
128 files changed, 1683 insertions, 2095 deletions
diff --git a/.cspell/project-words.txt b/.cspell/project-words.txt index c2e8973..c9d6014 100644 --- a/.cspell/project-words.txt +++ b/.cspell/project-words.txt @@ -4,6 +4,7 @@ autodocs changefreq coldark commitlint +Eckles formatjs Gitlab Jamstack diff --git a/src/assets/images/cc-by-sa.svg b/src/assets/images/cc-by-sa.svg index b1fc892..949002c 100644 --- a/src/assets/images/cc-by-sa.svg +++ b/src/assets/images/cc-by-sa.svg @@ -1,11 +1,11 @@ <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg - width="211.99811" - height="63.999996" - viewBox="0 0 211.99811 63.999996" + width="100" + height="40" + viewBox="0 0 100 40" version="1.1" id="svg8" - inkscape:version="1.1 (c4e8f9ed74, 2021-05-24)" + inkscape:version="1.3 (0e150ed6c4, 2023-07-21)" sodipodi:docname="cc-by-sa.svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" @@ -23,9 +23,9 @@ borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" - inkscape:zoom="1.4" - inkscape:cx="62.142857" - inkscape:cy="78.571429" + inkscape:zoom="2.4082226" + inkscape:cx="36.956717" + inkscape:cy="27.198482" inkscape:document-units="px" inkscape:current-layer="svg8" inkscape:document-rotation="0" @@ -35,12 +35,14 @@ fit-margin-right="0" fit-margin-bottom="0" inkscape:window-width="1920" - inkscape:window-height="1019" + inkscape:window-height="1015" inkscape:window-x="0" - inkscape:window-y="33" + inkscape:window-y="37" inkscape:window-maximized="1" inkscape:pagecheckerboard="0" - units="px" /> + units="px" + inkscape:showpageshadow="2" + inkscape:deskcolor="#d1d1d1" /> <metadata id="metadata5"> <rdf:RDF> @@ -53,27 +55,35 @@ </rdf:RDF> </metadata> <path - d="m 175.53911,15.829498 c 0,-3.008 1.485,-4.514 4.458,-4.514 2.973,0 4.457,1.504 4.457,4.514 0,2.971 -1.486,4.457 -4.457,4.457 -2.971,0 -4.458,-1.486 -4.458,-4.457 z" - id="path839" /> + d="m 82.802205,12.372338 c 0,-1.418881 0.700478,-2.129264 2.102849,-2.129264 1.402371,0 2.102377,0.70944 2.102377,2.129264 0,1.401427 -0.700949,2.102377 -2.102377,2.102377 -1.401427,0 -2.102849,-0.70095 -2.102849,-2.102377 z" + id="path839" + style="stroke-width:0.471702" /> <path - d="m 188.62611,24.057498 v 13.085 h -3.656 v 15.542 h -9.944 v -15.541 h -3.656 v -13.086 c 0,-0.572 0.2,-1.057 0.599,-1.457 0.401,-0.399 0.887,-0.6 1.457,-0.6 h 13.144 c 0.533,0 1.01,0.2 1.428,0.6 0.417,0.4 0.628,0.886 0.628,1.457 z" - id="path837" /> + d="m 88.975373,16.253505 v 6.172224 H 87.25083 v 7.331198 h -4.690608 v -7.330726 h -1.724544 v -6.172696 c 0,-0.269814 0.09434,-0.49859 0.28255,-0.687271 0.189153,-0.188209 0.4184,-0.283021 0.68727,-0.283021 h 6.200055 c 0.251418,0 0.47642,0.09434 0.673591,0.283021 0.1967,0.188681 0.296229,0.417929 0.296229,0.687271 z" + id="path837" + style="stroke-width:0.471702" /> <path id="path4-3" - d="m 179.94147,-1.9073486e-6 c -8.839,0 -16.34167,3.0848125073486 -22.51367,9.2578125073486 -6.285,6.4000004 -9.42969,13.9811874 -9.42969,22.7421874 0,8.762 3.14469,16.284312 9.42969,22.570312 6.361,6.286 13.86467,9.429688 22.51367,9.429688 8.799,0 16.43611,-3.181922 22.91211,-9.544922 6.096,-5.98 9.14453,-13.464078 9.14453,-22.455078 0,-8.952 -3.10646,-16.532188 -9.31446,-22.7421874 -6.172,-6.172 -13.75418,-9.2578125073486 -22.74218,-9.2578125073486 z M 180.05475,5.7714825 c 7.238,0 13.40967,2.55225 18.51367,7.6562495 5.103,5.106 7.65625,11.294313 7.65625,18.570313 0,7.391 -2.51397,13.50575 -7.54297,18.34375 -5.295,5.221 -11.50591,7.828125 -18.6289,7.828125 -7.162,0 -13.33268,-2.589484 -18.51368,-7.771484 -5.18,-5.178001 -7.76953,-11.310485 -7.76953,-18.396485 0,-7.047 2.60813,-13.238266 7.82813,-18.572265 5.029,-5.1040004 11.18103,-7.6582035 18.45703,-7.6582035 z" /> + d="m 84.878809,4.905526 c -4.169377,0 -7.708404,1.455113 -10.619751,4.366932 C 71.294409,12.291353 69.811052,15.867416 69.811052,20 c 0,4.133056 1.483357,7.681348 4.448006,10.646469 3.000499,2.965121 6.539997,4.448005 10.619751,4.448005 4.150508,0 7.752951,-1.50092 10.807695,-4.502361 C 98.562001,27.771333 100,24.241076 100,20 100,15.777321 98.534676,12.201729 95.606348,9.272458 92.695001,6.361111 89.118469,4.905526 84.878809,4.905526 Z m 0.05343,2.722423 c 3.414181,0 6.325372,1.203902 8.732941,3.61147 2.407097,2.408512 3.611471,5.327554 3.611471,8.75966 0,3.486352 -1.185846,6.370694 -3.558036,8.652789 -2.497664,2.462758 -5.427365,3.692545 -8.787296,3.692545 -3.378332,0 -6.289056,-1.221465 -8.732946,-3.665827 -2.443418,-2.442475 -3.664905,-5.335182 -3.664905,-8.677665 0,-3.324086 1.230261,-6.24452 3.692547,-8.76058 2.372191,-2.407569 5.274118,-3.612392 8.706224,-3.612392 z" + style="stroke-width:0.471702" /> <path - d="m 91.998554,27.114498 c 0.609,-3.924 2.189,-6.962 4.742,-9.114 2.552,-2.152 5.655996,-3.228 9.313996,-3.228 5.027,0 9.029,1.62 12,4.856 2.971,3.238 4.457,7.391 4.457,12.457 0,4.915 -1.543,9 -4.627,12.256 -3.088,3.256 -7.086,4.886 -12.002,4.886 -3.619,0 -6.742996,-1.085 -9.370996,-3.257 -2.629,-2.172 -4.209,-5.257 -4.743,-9.257 h 8.059 c 0.189996,3.886 2.532996,5.829 7.028996,5.829 2.246,0 4.057,-0.972 5.428,-2.914 1.373,-1.942 2.059,-4.534 2.059,-7.771 0,-3.391 -0.629,-5.971 -1.885,-7.743 -1.258,-1.771 -3.066,-2.657 -5.43,-2.657 -4.268,0 -6.667,1.885 -7.199996,5.656 h 2.342996 l -6.341996,6.343 -6.343,-6.343 z" - id="path837-7" /> + d="m 43.395931,17.695499 c 0.287267,-1.85096 1.032557,-3.283992 2.236813,-4.299095 1.203784,-1.015104 2.667946,-1.522656 4.393433,-1.522656 2.371248,0 4.259,0.764158 5.660428,2.290587 1.401428,1.527372 2.102377,3.486352 2.102377,5.875996 0,2.318417 -0.727837,4.245321 -2.182566,5.781183 -1.456617,1.535863 -3.342483,2.304738 -5.661372,2.304738 -1.70709,0 -3.180687,-0.511797 -4.42032,-1.536335 -1.240106,-1.024537 -1.985395,-2.479739 -2.237284,-4.366548 h 3.801449 c 0.08962,1.833035 1.19482,2.749553 3.315593,2.749553 1.059444,0 1.913697,-0.458495 2.560401,-1.374541 0.647647,-0.916046 0.971235,-2.138698 0.971235,-3.665598 0,-1.599543 -0.296701,-2.816535 -0.889159,-3.652391 -0.593402,-0.835385 -1.44624,-1.253313 -2.561344,-1.253313 -2.013225,0 -3.144839,0.889158 -3.396255,2.667948 h 1.105197 l -2.991534,2.992008 -2.992008,-2.992008 z" + id="path837-7" + style="stroke-width:0.471702" /> <path id="path4-5" - d="m 105.94241,-1.8610229e-6 c -8.799996,0 -16.304676,3.1054062610229 -22.513666,9.3164061610229 -6.285,6.3999997 -9.42969,13.9625467 -9.42969,22.6855467 0,8.763 3.14469,16.28336 9.42969,22.568359 6.361,6.286001 13.86467,9.429688 22.513666,9.429688 8.836,0 16.47511,-3.162328 22.91211,-9.486328 6.096,-6.057 9.14453,-13.559672 9.14453,-22.513672 0,-8.952 -3.10646,-16.513547 -9.31446,-22.6855468 -6.211,-6.21 -13.79118,-9.3144530610229 -22.74218,-9.3144530610229 z M 106.05569,5.7714825 c 7.275,0 13.44667,2.5698437 18.51367,7.7148435 5.103,5.028 7.65625,11.200672 7.65625,18.513672 0,7.353 -2.51397,13.46775 -7.54297,18.34375 -5.295,5.219 -11.50591,7.828125 -18.6289,7.828125 -7.161996,0 -13.332676,-2.589484 -18.513676,-7.771484 -5.18,-5.143 -7.76953,-11.275391 -7.76953,-18.400391 0,-7.046 2.60813,-13.217672 7.82813,-18.513672 5.029,-5.1429998 11.18103,-7.7148435 18.457026,-7.7148435 z" /> + d="m 49.97328,4.905526 c -4.150978,0 -7.690953,1.464827 -10.619748,4.39457 -2.964649,3.018895 -4.448007,6.586166 -4.448007,10.700825 0,4.133528 1.483358,7.680899 4.448007,10.645548 3.000498,2.965121 6.539997,4.448005 10.619748,4.448005 4.167962,0 7.771348,-1.491677 10.807696,-4.474722 C 63.656473,27.762651 65.094472,24.223623 65.094472,20 c 0,-4.222679 -1.465325,-7.789478 -4.393653,-10.700825 C 57.771076,6.369904 54.195488,4.905526 49.97328,4.905526 Z m 0.05344,2.722423 c 3.431634,0 6.342825,1.212201 8.732941,3.639109 2.407097,2.371719 3.611471,5.283383 3.611471,8.732942 0,3.468427 -1.185846,6.352769 -3.558037,8.65279 -2.497663,2.461814 -5.427364,3.692544 -8.787295,3.692544 -3.37833,0 -6.289054,-1.221465 -8.732944,-3.665827 C 38.849433,26.253542 37.627946,23.360879 37.627946,20 c 0,-3.323614 1.230261,-6.234806 3.692547,-8.732942 2.372191,-2.425965 5.274118,-3.639109 8.706222,-3.639109 z" + style="stroke-width:0.471702" /> <path id="path4" - d="M 31.942383,5.9265138e-7 C 23.066111,5.9265138e-7 15.579851,3.1065496 9.484666,9.3147376 6.399571,12.400832 4.046856,15.896269 2.427808,19.801386 0.80876,23.706506 0,27.771846 0,32.000976 c 0,4.26713 0.800415,8.32413 2.400463,12.17225 1.600051,3.84811 3.933123,7.30532 7.000216,10.37141 3.067093,3.06609 6.534587,5.40951 10.400708,7.02756 3.867116,1.62105 7.914819,2.4278 12.142946,2.4278 4.22813,0 8.32441,-0.8171 12.28553,-2.45515 3.96313,-1.63805 7.50614,-4.00301 10.62923,-7.0881 3.0081,-2.93309 5.28529,-6.31477 6.82834,-10.14289 1.54104,-3.82712 2.31257,-7.93174 2.31257,-12.31288 0,-4.34313 -0.78277,-8.44771 -2.34382,-12.31483 C 60.094133,15.82003 57.808593,12.380471 54.800503,9.3713796 48.515313,3.1241896 40.893653,5.9265136e-7 31.942383,5.9265138e-7 Z M 32.057623,5.7716626 c 7.23822,0 13.42863,2.571923 18.57478,7.7150794 2.47408,2.478074 4.35948,5.297144 5.65252,8.459244 1.29504,3.16209 1.94342,6.51384 1.94342,10.05694 0,7.35423 -2.49445,13.46816 -7.4846,18.34432 -2.59208,2.51407 -5.49406,4.43661 -8.71316,5.77166 -3.2231,1.33404 -6.54486,1.9981 -9.97296,1.9981 -3.467107,0 -6.782568,-0.65672 -9.943661,-1.97076 -3.164098,-1.31604 -5.999858,-3.21894 -8.513933,-5.71502 -2.515077,-2.49507 -4.447918,-5.33279 -5.800959,-8.51588 -1.354042,-3.1791 -2.029358,-6.48331 -2.029358,-9.91242 0,-3.4671 0.675316,-6.79186 2.029358,-9.97295 1.352043,-3.1811 3.285882,-6.046798 5.800959,-8.599875 4.991151,-5.1041594 11.14337,-7.6584384 18.457594,-7.6584384 z" /> + d="m 15.067296,4.905527 c -4.186958,0 -7.7182442,1.465367 -10.5933571,4.393783 C 3.0186925,10.755028 1.9089114,12.403834 1.1452027,14.245887 0.38149397,16.087941 0,18.005571 0,20.000462 c 0,2.012815 0.37755761,3.926511 1.132304,5.741678 0.7547477,1.815163 1.8552632,3.445936 3.3020181,4.892218 1.4467549,1.446282 3.0823798,2.551679 4.9060381,3.314917 1.8241278,0.764653 3.7334388,1.145198 5.7278558,1.145198 1.994419,0 3.926643,-0.385427 5.795113,-1.158099 1.869418,-0.772672 3.540664,-1.88823 5.013832,-3.343474 1.418928,-1.383545 2.493084,-2.978691 3.220944,-4.784424 0.726912,-1.805262 1.090845,-3.741421 1.090845,-5.808014 0,-2.048665 -0.369235,-3.984805 -1.105586,-5.808934 -0.736822,-1.823656 -1.814917,-3.446104 -3.23384,-4.8655 C 22.884786,6.379214 19.289631,4.905527 15.067296,4.905527 Z m 0.05436,2.722507 c 3.414285,0 6.334316,1.213182 8.761767,3.63922 1.167029,1.168914 2.056377,2.498676 2.666307,3.990245 0.610873,1.491566 0.916715,3.072594 0.916715,4.743882 0,3.469008 -1.176637,6.352963 -3.530503,8.653059 -1.22269,1.185892 -2.591561,2.092759 -4.110018,2.722505 -1.520343,0.62927 -3.087225,0.942508 -4.704268,0.942508 -1.635442,0 -3.199353,-0.309776 -4.690448,-0.929612 C 8.9386948,30.769062 7.6010602,29.87146 6.4151652,28.694053 5.2287976,27.517123 4.317072,26.178564 3.6788394,24.677093 3.0401347,23.177504 2.7215865,21.618901 2.7215865,20.001381 c 0,-1.635439 0.3185482,-3.203736 0.9572529,-4.704263 C 4.3166012,13.796585 5.2287976,12.444829 6.4151652,11.240537 8.7695027,8.832893 11.671519,7.628034 15.121655,7.628034 Z" + style="stroke-width:0.471702" /> <path - d="m 50.114533,26.687816 -4.22913,2.22907 c -0.45702,-0.95103 -1.02003,-1.61905 -1.68605,-2.00006 -0.66802,-0.38001 -1.30704,-0.57102 -1.91406,-0.57102 -2.85709,0 -4.28713,1.88506 -4.28713,5.65717 0,1.71406 0.363,3.0841 1.08603,4.11313 0.72302,1.02903 1.78906,1.54405 3.2011,1.54405 1.86506,0 3.1801,-0.91503 3.94112,-2.74309 l 4.00012,2.00007 c -0.87502,1.56304 -2.05706,2.79108 -3.54111,3.68611 -1.48604,0.89602 -3.10509,1.34304 -4.85715,1.34304 -2.89608,0 -5.20915,-0.87503 -6.94121,-2.62908 -1.73605,-1.75205 -2.60207,-4.19013 -2.60207,-7.31323 0,-3.04809 0.88502,-5.46616 2.65808,-7.25722 1.77005,-1.79005 4.00812,-2.68608 6.7132,-2.68608 3.96212,-0.002 6.78321,1.54105 8.45826,4.62714 z" - id="path846" /> + d="m 23.639141,17.494232 -1.99489,1.051457 C 21.428674,18.097086 21.1631,17.78198 20.848937,17.602256 c -0.315106,-0.179251 -0.616534,-0.269351 -0.902866,-0.269351 -1.347696,0 -2.022249,0.889187 -2.022249,2.6685 0,0.808526 0.171228,1.454777 0.512282,1.940173 0.341051,0.485396 0.843904,0.728332 1.509967,0.728332 0.879753,0 1.50006,-0.431622 1.859035,-1.293922 l 1.886866,0.943438 c -0.412749,0.737289 -0.97032,1.316559 -1.67035,1.738746 -0.700968,0.422655 -1.464678,0.633515 -2.291129,0.633515 -1.366087,0 -2.457168,-0.412753 -3.274184,-1.240143 -0.818899,-0.826446 -1.227403,-1.976494 -1.227403,-3.449667 0,-1.437791 0.417466,-2.578401 1.253823,-3.423248 0.834936,-0.844371 1.890639,-1.26703 3.166632,-1.26703 1.868941,-9.43e-4 3.199655,0.726917 3.98978,2.182633 z" + id="path846" + style="stroke-width:0.471702" /> <path - d="m 31.656963,26.687816 -4.287128,2.22907 c -0.458013,-0.95103 -1.019029,-1.61905 -1.685048,-2.00006 -0.667024,-0.38001 -1.286042,-0.57102 -1.858057,-0.57102 -2.856087,0 -4.28613,1.88506 -4.28613,5.65717 0,1.71406 0.362014,3.0841 1.085029,4.11313 0.724025,1.02903 1.791056,1.54405 3.201101,1.54405 1.867057,0 3.181095,-0.91503 3.944118,-2.74309 l 3.942125,2.00007 c -0.83803,1.56304 -2.000065,2.79108 -3.486111,3.68611 -1.484043,0.89602 -3.123093,1.34304 -4.914149,1.34304 -2.857088,0 -5.163158,-0.87503 -6.915212,-2.62908 -1.752053,-1.75205 -2.62808,-4.19013 -2.62808,-7.31323 0,-3.04809 0.886028,-5.46616 2.657081,-7.25722 1.771054,-1.79005 4.009125,-2.68608 6.715205,-2.68608 3.963122,-0.002 6.800209,1.54105 8.515256,4.62714 z" - id="path844" /> + d="m 14.932663,17.494232 -2.022248,1.051457 c -0.216046,-0.448603 -0.480679,-0.763709 -0.794841,-0.943433 -0.314637,-0.179251 -0.606629,-0.269351 -0.87645,-0.269351 -1.3472231,0 -2.0217777,0.889187 -2.0217777,2.6685 0,0.808526 0.1707629,1.454777 0.5118107,1.940173 0.341524,0.485396 0.844845,0.728332 1.509967,0.728332 0.880695,0 1.50053,-0.431622 1.860449,-1.293922 l 1.85951,0.943438 c -0.395301,0.737289 -0.943435,1.316559 -1.644407,1.738746 -0.700026,0.422655 -1.47317,0.633515 -2.318015,0.633515 -1.3476953,0 -2.4354738,-0.412753 -3.2619218,-1.240143 -0.8264474,-0.826446 -1.2396714,-1.976494 -1.2396714,-3.449667 0,-1.437791 0.4179415,-2.578401 1.2533513,-3.423248 0.8354103,-0.844371 1.8911135,-1.26703 3.1675779,-1.26703 1.869414,-9.43e-4 3.207674,0.726917 4.016666,2.182633 z" + id="path844" + style="stroke-width:0.471702" /> </svg> diff --git a/src/assets/images/icon-arrow-right.svg b/src/assets/images/icon-arrow-right.svg index 5ddb0b4..268203f 100644 --- a/src/assets/images/icon-arrow-right.svg +++ b/src/assets/images/icon-arrow-right.svg @@ -1,12 +1,12 @@ <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg - width="64.644997" - height="23.476" - viewBox="0 0 64.644997 23.476001" + width="100" + height="100" + viewBox="0 0 100 100" version="1.1" id="svg4" sodipodi:docname="icon-arrow-right.svg" - inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20, custom)" + inkscape:version="1.3 (0e150ed6c4, 2023-07-21)" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" @@ -22,25 +22,28 @@ inkscape:pageopacity="0.0" inkscape:pagecheckerboard="0" showgrid="false" - inkscape:zoom="7.3600763" - inkscape:cx="11.141189" - inkscape:cy="23.912796" + inkscape:zoom="5.0717203" + inkscape:cx="40.025867" + inkscape:cy="35.589502" inkscape:window-width="1920" - inkscape:window-height="1019" + inkscape:window-height="1015" inkscape:window-x="0" - inkscape:window-y="33" + inkscape:window-y="37" inkscape:window-maximized="1" inkscape:current-layer="svg4" fit-margin-top="0" fit-margin-left="0" fit-margin-right="0" - fit-margin-bottom="0" /> + fit-margin-bottom="0" + inkscape:showpageshadow="2" + inkscape:deskcolor="#d1d1d1" /> <path - d="M -1.6784668e-6,15.441 40.007998,15.423 V 8.0349999 l -40.0079996784668,0.142 z" - id="path2-6" - sodipodi:nodetypes="ccccc" /> + id="rect1" + style="stroke-width:1.02839" + d="m 0,44.25 h 61.764896 v 11.5 H 0 Z" /> <path - d="M 40.007998,23.476 64.644998,11.715 39.844998,-8.3923343e-8 Z" - id="path2-3" + id="rect1-6" + style="stroke-width:1.50903" + d="m 61.764896,30 38.2351,20 -38.2351,20 z" sodipodi:nodetypes="cccc" /> </svg> diff --git a/src/assets/images/icon-feed.svg b/src/assets/images/icon-feed.svg index fcdac1f..6bf17fb 100644 --- a/src/assets/images/icon-feed.svg +++ b/src/assets/images/icon-feed.svg @@ -1,18 +1,76 @@ <?xml version="1.0" encoding="UTF-8"?> -<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> -<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="128px" height="128px" id="RSSicon" viewBox="0 0 256 256"> -<defs> -<linearGradient x1="0.085" y1="0.085" x2="0.915" y2="0.915" id="RSSg"> -<stop offset="0.0" stop-color="#E3702D"/><stop offset="0.1071" stop-color="#EA7D31"/> -<stop offset="0.3503" stop-color="#F69537"/><stop offset="0.5" stop-color="#FB9E3A"/> -<stop offset="0.7016" stop-color="#EA7C31"/><stop offset="0.8866" stop-color="#DE642B"/> -<stop offset="1.0" stop-color="#D95B29"/> -</linearGradient> -</defs> -<rect width="256" height="256" rx="55" ry="55" x="0" y="0" fill="#CC5D15"/> -<rect width="246" height="246" rx="50" ry="50" x="5" y="5" fill="#F49C52"/> -<rect width="236" height="236" rx="47" ry="47" x="10" y="10" fill="url(#RSSg)"/> -<circle cx="68" cy="189" r="24" fill="#FFF"/> -<path d="M160 213h-34a82 82 0 0 0 -82 -82v-34a116 116 0 0 1 116 116z" fill="#FFF"/> -<path d="M184 213A140 140 0 0 0 44 73 V 38a175 175 0 0 1 175 175z" fill="#FFF"/> -<script xmlns=""/></svg> +<svg + version="1.1" + width="100" + height="100" + id="RSSicon" + viewBox="0 0 100 100" + xmlns:svg="http://www.w3.org/2000/svg"> + <defs + id="defs7"> + <linearGradient + x1="30.059999" + y1="30.059999" + x2="225.94" + y2="225.94" + id="RSSg" + gradientUnits="userSpaceOnUse" + gradientTransform="scale(0.390625)"> + <stop + offset="0.0" + stop-color="#E3702D" + id="stop1" /> + <stop + offset="0.1071" + stop-color="#EA7D31" + id="stop2" /> + <stop + offset="0.3503" + stop-color="#F69537" + id="stop3" /> + <stop + offset="0.5" + stop-color="#FB9E3A" + id="stop4" /> + <stop + offset="0.7016" + stop-color="#EA7C31" + id="stop5" /> + <stop + offset="0.8866" + stop-color="#DE642B" + id="stop6" /> + <stop + offset="1.0" + stop-color="#D95B29" + id="stop7" /> + </linearGradient> + </defs> + <path + id="rect7" + style="fill:#cc5d15;stroke-width:0.390625" + d="m 21.484375,0 h 57.03125 C 90.41797,0 100,9.582031 100,21.484375 v 57.03125 C 100,90.41797 90.41797,100 78.515625,100 H 21.484375 C 9.582031,100 0,90.41797 0,78.515625 V 21.484375 C 0,9.582031 9.582031,0 21.484375,0 Z" /> + <path + id="rect8" + style="fill:#f49c52;stroke-width:0.390625" + d="m 21.484375,1.953125 h 57.03125 c 10.82031,0 19.53125,8.710938 19.53125,19.53125 v 57.03125 c 0,10.82031 -8.71094,19.53125 -19.53125,19.53125 h -57.03125 c -10.820312,0 -19.53125,-8.71094 -19.53125,-19.53125 v -57.03125 c 0,-10.820312 8.710938,-19.53125 19.53125,-19.53125 z" /> + <path + id="rect9" + style="fill:url(#RSSg);stroke-width:0.390625" + d="m 22.265625,3.90625 h 55.46875 c 10.171095,0 18.359375,8.188281 18.359375,18.359375 v 55.46875 c 0,10.171095 -8.18828,18.359375 -18.359375,18.359375 H 22.265625 C 12.094531,96.09375 3.90625,87.90547 3.90625,77.734375 v -55.46875 c 0,-10.171094 8.188281,-18.359375 18.359375,-18.359375 z" /> + <path + id="circle9" + style="fill:#ffffff;stroke-width:0.390625" + d="m 35.9375,73.828125 a 9.375,9.375 0 0 1 -9.375,9.375 9.375,9.375 0 0 1 -9.375,-9.375 9.375,9.375 0 0 1 9.375,-9.375 9.375,9.375 0 0 1 9.375,9.375 z" /> + <path + d="M 62.5,83.203125 H 49.21875 A 32.03125,32.03125 0 0 0 17.1875,51.171875 V 37.890625 A 45.3125,45.3125 0 0 1 62.5,83.203125 Z" + fill="#ffffff" + id="path9" + style="stroke-width:0.390625" /> + <path + d="M 71.875,83.203125 A 54.6875,54.6875 0 0 0 17.1875,28.515625 V 14.84375 a 68.359375,68.359375 0 0 1 68.359375,68.359375 z" + fill="#ffffff" + id="path10" + style="stroke-width:0.390625" /> + <script /> +</svg> diff --git a/src/components/atoms/icons/arrow.module.scss b/src/components/atoms/icons/arrow.module.scss deleted file mode 100644 index 6ee3364..0000000 --- a/src/components/atoms/icons/arrow.module.scss +++ /dev/null @@ -1,16 +0,0 @@ -@use "../../../styles/abstracts/functions" as fun; - -.icon { - fill: var(--color-primary); - transition: all 0.25s ease-in-out 0s; - - &--left, - &--right { - width: var(--icon-size, #{fun.convert-px(30)}); - } - - &--bottom, - &--top { - height: var(--icon-size, #{fun.convert-px(30)}); - } -} diff --git a/src/components/atoms/icons/arrow.stories.tsx b/src/components/atoms/icons/arrow.stories.tsx deleted file mode 100644 index a49be55..0000000 --- a/src/components/atoms/icons/arrow.stories.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Arrow as ArrowIcon } from './arrow'; - -/** - * Arrow icon - Storybook Meta - */ -export default { - title: 'Atoms/Illustrations/Icons', - component: ArrowIcon, - argTypes: { - 'aria-hidden': { - control: { - type: null, - }, - description: 'Should the svg be hidden from assistive technologies?', - table: { - category: 'Accessibility', - }, - type: { - name: 'string', - required: false, - }, - }, - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - direction: { - control: { - type: 'select', - }, - description: 'An arrow icon.', - options: ['bottom', 'left', 'right', 'top'], - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta<typeof ArrowIcon>; - -const Template: ComponentStory<typeof ArrowIcon> = (args) => ( - <ArrowIcon {...args} /> -); - -/** - * Icons Stories - Arrow - */ -export const Arrow = Template.bind({}); -Arrow.args = { - direction: 'right', -}; diff --git a/src/components/atoms/icons/arrow.test.tsx b/src/components/atoms/icons/arrow.test.tsx deleted file mode 100644 index 3fedf9b..0000000 --- a/src/components/atoms/icons/arrow.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render } from '../../../../tests/utils'; -import { Arrow } from './arrow'; - -describe('Arrow', () => { - it('renders an arrow icon oriented to the right', () => { - const { container } = render(<Arrow direction="right" />); - expect(container).toBeDefined(); - }); -}); diff --git a/src/components/atoms/icons/arrow.tsx b/src/components/atoms/icons/arrow.tsx deleted file mode 100644 index 2ef0185..0000000 --- a/src/components/atoms/icons/arrow.tsx +++ /dev/null @@ -1,103 +0,0 @@ -import { FC, SVGAttributes } from 'react'; -import styles from './arrow.module.scss'; - -export type ArrowDirection = 'top' | 'right' | 'bottom' | 'left'; - -export type ArrowProps = SVGAttributes<SVGElement> & { - /** - * The arrow direction. Default: right. - */ - direction: ArrowDirection; -}; - -/** - * Arrow component - * - * Render a svg arrow icon. - */ -export const Arrow: FC<ArrowProps> = ({ - className = '', - direction, - ...props -}) => { - const directionClass = styles[`icon--${direction}`]; - const classes = `${styles.icon} ${directionClass} ${className}`; - - if (direction === 'top') { - return ( - <svg - {...props} - className={classes} - viewBox="0 0 23.476 64.644995" - xmlns="http://www.w3.org/2000/svg" - > - <path - className="arrow-head" - d="M 23.476001,24.637 11.715001,0 0,24.800001 Z" - /> - <path - className="arrow-bar" - d="m 15.441001,64.644997 -0.018,-40.007999 H 8.035 l 0.142,40.007999 z" - /> - </svg> - ); - } - - if (direction === 'bottom') { - return ( - <svg - {...props} - className={classes} - viewBox="0 0 23.476 64.644995" - xmlns="http://www.w3.org/2000/svg" - > - <path - className="arrow-head" - d="m 23.476001,40.007997 -11.761,24.637 L 0,39.844996 Z" - /> - <path - className="arrow-bar" - d="m 15.441001,0 -0.018,40.007999 H 8.035 L 8.177,0 Z" - /> - </svg> - ); - } - - if (direction === 'left') { - return ( - <svg - {...props} - className={classes} - viewBox="0 0 64.644997 23.476001" - xmlns="http://www.w3.org/2000/svg" - > - <path - className="arrow-head" - d="M 24.637,23.476 0,11.715 24.8,-8.3923343e-8 Z" - /> - <path - className="arrow-bar" - d="m 64.644997,15.441 -40.008,-0.018 V 8.0349999 l 40.008,0.142 z" - /> - </svg> - ); - } - - return ( - <svg - {...props} - className={classes} - viewBox="0 0 64.644997 23.476001" - xmlns="http://www.w3.org/2000/svg" - > - <path - className="arrow-head" - d="M 40.007997,23.476 64.644997,11.715 39.844997,-8.3923343e-8 Z" - /> - <path - className="arrow-bar" - d="M 0,15.441 40.008,15.423 V 8.0349999 L 0,8.1769999 Z" - /> - </svg> - ); -}; diff --git a/src/components/atoms/icons/career.module.scss b/src/components/atoms/icons/career.module.scss deleted file mode 100644 index 0731526..0000000 --- a/src/components/atoms/icons/career.module.scss +++ /dev/null @@ -1,53 +0,0 @@ -@use "../../../styles/abstracts/functions" as fun; - -.icon { - display: block; - width: var(--icon-size, #{fun.convert-px(40)}); -} - -.lock { - fill: var(--color-bg); - stroke: var(--color-primary-darker); - stroke-width: 3; -} - -.lines { - fill: var(--color-fg); - stroke-width: 4; -} - -.seal-top { - fill: var(--color-primary-lighter); - stroke: var(--color-primary-darker); - stroke-width: 2; -} - -.seal-bottom { - fill: var(--color-primary-lighter); - stroke: var(--color-primary-darker); - stroke-width: 2; -} - -.diploma { - fill: var(--color-bg); - stroke: var(--color-primary-darker); - stroke-width: 4; -} - -.top { - fill: var(--color-primary-lighter); - stroke: var(--color-primary-darker); - stroke-width: 4; -} - -.handle { - fill: var(--color-primary-lighter); - stroke: var(--color-primary-darker); - stroke-width: 3; -} - -.bottom { - fill: var(--color-primary); - stroke: var(--color-primary-darker); - stroke-width: 4; -} diff --git a/src/components/atoms/icons/career.stories.tsx b/src/components/atoms/icons/career.stories.tsx deleted file mode 100644 index 5c3ae12..0000000 --- a/src/components/atoms/icons/career.stories.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Career as CareerIcon } from './career'; - -/** - * Career icon - Storybook Meta - */ -export default { - title: 'Atoms/Illustrations/Icons', - component: CareerIcon, - argTypes: { - 'aria-hidden': { - control: { - type: null, - }, - description: 'Should the svg be hidden from assistive technologies?', - table: { - category: 'Accessibility', - }, - type: { - name: 'string', - required: false, - }, - }, - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta<typeof CareerIcon>; - -const Template: ComponentStory<typeof CareerIcon> = (args) => ( - <CareerIcon {...args} /> -); - -/** - * Icons Stories - Career - */ -export const Career = Template.bind({}); diff --git a/src/components/atoms/icons/career.test.tsx b/src/components/atoms/icons/career.test.tsx deleted file mode 100644 index 27754a8..0000000 --- a/src/components/atoms/icons/career.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render } from '../../../../tests/utils'; -import { Career } from './career'; - -describe('Career', () => { - it('renders a Career icon', () => { - const { container } = render(<Career />); - expect(container).toBeDefined(); - }); -}); diff --git a/src/components/atoms/icons/career.tsx b/src/components/atoms/icons/career.tsx deleted file mode 100644 index 6456d40..0000000 --- a/src/components/atoms/icons/career.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import { FC, SVGAttributes } from 'react'; -import styles from './career.module.scss'; - -export type CareerProps = SVGAttributes<SVGElement>; - -/** - * Career Component - * - * Render a career svg icon. - */ -export const Career: FC<CareerProps> = ({ className = '', ...props }) => { - return ( - <svg - {...props} - className={`${styles.icon} ${className}`} - viewBox="0 0 100 100" - xmlns="http://www.w3.org/2000/svg" - > - <path - className={styles.bottom} - d="M 0.72670447,19.813041 H 77.467597 v 54.36591 H 0.72670447 Z" - /> - <path - className={styles.handle} - d="m 22.263958,10.17849 c 12.6493,-1.81512 21.613185,-1.732794 33.666442,0 l 1.683339,10.99517 h -5.891624 v -5.474639 c -7.949741,-2.722434 -16.311959,-2.706359 -25.249837,0 v 5.474639 h -5.891625 z" - /> - <path - className={styles.top} - d="M 0.72670447,19.813041 H 77.467597 V 51.17622 H 0.72670447 Z" - /> - <path - className={styles.diploma} - d="M 44.217117,47.159906 H 98.921356 V 82.664122 H 44.217117 Z" - /> - <path - className={styles['seal-bottom']} - d="m 84.933665,80.775336 h 6.957554 V 90.992144 L 88.412426,87.2244 84.933665,90.992144 Z" - /> - <path - className={styles['seal-top']} - d="m 93.326919,76.83334 a 4.914472,4.9188584 0 0 1 -4.914493,4.918858 4.914472,4.9188584 0 0 1 -4.914461,-4.918858 4.914472,4.9188584 0 0 1 4.914461,-4.918858 4.914472,4.9188584 0 0 1 4.914493,4.918858 z" - /> - <path - className={styles.lines} - d="m 54.53557,60.491974 h 34.067282 v 1.515453 H 54.53557 Z" - /> - <path - className={styles.lines} - d="m 54.53557,67.437763 h 34.067282 v 1.515453 H 54.53557 Z" - /> - <path - className={styles.lines} - d="m 54.53557,74.383628 h 17.563315 v 1.515454 H 54.53557 Z" - /> - <path - className={styles.lines} - d="m 63.495911,53.546123 h 16.146628 v 1.515452 H 63.495911 Z" - /> - <path - className={styles.lock} - d="M 34.048314,42.893007 H 44.145988 V 57.849688 H 34.048314 Z" - /> - </svg> - ); -}; diff --git a/src/components/atoms/icons/cc-by-sa.module.scss b/src/components/atoms/icons/cc-by-sa.module.scss deleted file mode 100644 index 14935b6..0000000 --- a/src/components/atoms/icons/cc-by-sa.module.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use "../../../styles/abstracts/functions" as fun; - -.icon { - display: block; - width: var(--icon-size, #{fun.convert-px(60)}); - fill: var(--color-fg); -} diff --git a/src/components/atoms/icons/cc-by-sa.stories.tsx b/src/components/atoms/icons/cc-by-sa.stories.tsx deleted file mode 100644 index 2a29ee3..0000000 --- a/src/components/atoms/icons/cc-by-sa.stories.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { CCBySA as CCBySAIcon } from './cc-by-sa'; - -/** - * CC BY SA icon - Storybook Meta - */ -export default { - title: 'Atoms/Illustrations/Icons', - component: CCBySAIcon, - argTypes: { - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta<typeof CCBySAIcon>; - -const Template: ComponentStory<typeof CCBySAIcon> = (args) => ( - <CCBySAIcon {...args} /> -); - -/** - * Icons Stories - CC BY SA - */ -export const CCBySA = Template.bind({}); diff --git a/src/components/atoms/icons/cc-by-sa.test.tsx b/src/components/atoms/icons/cc-by-sa.test.tsx deleted file mode 100644 index 7e81835..0000000 --- a/src/components/atoms/icons/cc-by-sa.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../tests/utils'; -import { CCBySA } from './cc-by-sa'; - -describe('CCBySA', () => { - it('renders a CC BY SA icon', () => { - render(<CCBySA />); - expect(screen.getByTitle('CC BY SA')).toBeInTheDocument(); - }); -}); diff --git a/src/components/atoms/icons/cc-by-sa.tsx b/src/components/atoms/icons/cc-by-sa.tsx deleted file mode 100644 index ba6d278..0000000 --- a/src/components/atoms/icons/cc-by-sa.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { FC, SVGAttributes } from 'react'; -import { useIntl } from 'react-intl'; -import styles from './cc-by-sa.module.scss'; - -export type CCBySAProps = SVGAttributes<SVGElement>; - -/** - * CCBySA component - * - * Render a CC BY SA svg icon. - */ -export const CCBySA: FC<CCBySAProps> = ({ className = '', ...props }) => { - const intl = useIntl(); - - return ( - <svg - {...props} - className={`${styles.icon} ${className}`} - viewBox="0 0 211.99811 63.999996" - xmlns="http://www.w3.org/2000/svg" - > - <title> - {intl.formatMessage({ - defaultMessage: 'CC BY SA', - description: 'CCBySA: icon title', - id: 'cl7YNU', - })} - </title> - <path d="m 175.53911,15.829498 c 0,-3.008 1.485,-4.514 4.458,-4.514 2.973,0 4.457,1.504 4.457,4.514 0,2.971 -1.486,4.457 -4.457,4.457 -2.971,0 -4.458,-1.486 -4.458,-4.457 z" /> - <path d="m 188.62611,24.057498 v 13.085 h -3.656 v 15.542 h -9.944 v -15.541 h -3.656 v -13.086 c 0,-0.572 0.2,-1.057 0.599,-1.457 0.401,-0.399 0.887,-0.6 1.457,-0.6 h 13.144 c 0.533,0 1.01,0.2 1.428,0.6 0.417,0.4 0.628,0.886 0.628,1.457 z" /> - <path d="m 179.94147,-1.9073486e-6 c -8.839,0 -16.34167,3.0848125073486 -22.51367,9.2578125073486 -6.285,6.4000004 -9.42969,13.9811874 -9.42969,22.7421874 0,8.762 3.14469,16.284312 9.42969,22.570312 6.361,6.286 13.86467,9.429688 22.51367,9.429688 8.799,0 16.43611,-3.181922 22.91211,-9.544922 6.096,-5.98 9.14453,-13.464078 9.14453,-22.455078 0,-8.952 -3.10646,-16.532188 -9.31446,-22.7421874 -6.172,-6.172 -13.75418,-9.2578125073486 -22.74218,-9.2578125073486 z M 180.05475,5.7714825 c 7.238,0 13.40967,2.55225 18.51367,7.6562495 5.103,5.106 7.65625,11.294313 7.65625,18.570313 0,7.391 -2.51397,13.50575 -7.54297,18.34375 -5.295,5.221 -11.50591,7.828125 -18.6289,7.828125 -7.162,0 -13.33268,-2.589484 -18.51368,-7.771484 -5.18,-5.178001 -7.76953,-11.310485 -7.76953,-18.396485 0,-7.047 2.60813,-13.238266 7.82813,-18.572265 5.029,-5.1040004 11.18103,-7.6582035 18.45703,-7.6582035 z" /> - <path d="m 91.998554,27.114498 c 0.609,-3.924 2.189,-6.962 4.742,-9.114 2.552,-2.152 5.655996,-3.228 9.313996,-3.228 5.027,0 9.029,1.62 12,4.856 2.971,3.238 4.457,7.391 4.457,12.457 0,4.915 -1.543,9 -4.627,12.256 -3.088,3.256 -7.086,4.886 -12.002,4.886 -3.619,0 -6.742996,-1.085 -9.370996,-3.257 -2.629,-2.172 -4.209,-5.257 -4.743,-9.257 h 8.059 c 0.189996,3.886 2.532996,5.829 7.028996,5.829 2.246,0 4.057,-0.972 5.428,-2.914 1.373,-1.942 2.059,-4.534 2.059,-7.771 0,-3.391 -0.629,-5.971 -1.885,-7.743 -1.258,-1.771 -3.066,-2.657 -5.43,-2.657 -4.268,0 -6.667,1.885 -7.199996,5.656 h 2.342996 l -6.341996,6.343 -6.343,-6.343 z" /> - <path d="m 105.94241,-1.8610229e-6 c -8.799996,0 -16.304676,3.1054062610229 -22.513666,9.3164061610229 -6.285,6.3999997 -9.42969,13.9625467 -9.42969,22.6855467 0,8.763 3.14469,16.28336 9.42969,22.568359 6.361,6.286001 13.86467,9.429688 22.513666,9.429688 8.836,0 16.47511,-3.162328 22.91211,-9.486328 6.096,-6.057 9.14453,-13.559672 9.14453,-22.513672 0,-8.952 -3.10646,-16.513547 -9.31446,-22.6855468 -6.211,-6.21 -13.79118,-9.3144530610229 -22.74218,-9.3144530610229 z M 106.05569,5.7714825 c 7.275,0 13.44667,2.5698437 18.51367,7.7148435 5.103,5.028 7.65625,11.200672 7.65625,18.513672 0,7.353 -2.51397,13.46775 -7.54297,18.34375 -5.295,5.219 -11.50591,7.828125 -18.6289,7.828125 -7.161996,0 -13.332676,-2.589484 -18.513676,-7.771484 -5.18,-5.143 -7.76953,-11.275391 -7.76953,-18.400391 0,-7.046 2.60813,-13.217672 7.82813,-18.513672 5.029,-5.1429998 11.18103,-7.7148435 18.457026,-7.7148435 z" /> - <path d="M 31.942383,5.9265138e-7 C 23.066111,5.9265138e-7 15.579851,3.1065496 9.484666,9.3147376 6.399571,12.400832 4.046856,15.896269 2.427808,19.801386 0.80876,23.706506 0,27.771846 0,32.000976 c 0,4.26713 0.800415,8.32413 2.400463,12.17225 1.600051,3.84811 3.933123,7.30532 7.000216,10.37141 3.067093,3.06609 6.534587,5.40951 10.400708,7.02756 3.867116,1.62105 7.914819,2.4278 12.142946,2.4278 4.22813,0 8.32441,-0.8171 12.28553,-2.45515 3.96313,-1.63805 7.50614,-4.00301 10.62923,-7.0881 3.0081,-2.93309 5.28529,-6.31477 6.82834,-10.14289 1.54104,-3.82712 2.31257,-7.93174 2.31257,-12.31288 0,-4.34313 -0.78277,-8.44771 -2.34382,-12.31483 C 60.094133,15.82003 57.808593,12.380471 54.800503,9.3713796 48.515313,3.1241896 40.893653,5.9265136e-7 31.942383,5.9265138e-7 Z M 32.057623,5.7716626 c 7.23822,0 13.42863,2.571923 18.57478,7.7150794 2.47408,2.478074 4.35948,5.297144 5.65252,8.459244 1.29504,3.16209 1.94342,6.51384 1.94342,10.05694 0,7.35423 -2.49445,13.46816 -7.4846,18.34432 -2.59208,2.51407 -5.49406,4.43661 -8.71316,5.77166 -3.2231,1.33404 -6.54486,1.9981 -9.97296,1.9981 -3.467107,0 -6.782568,-0.65672 -9.943661,-1.97076 -3.164098,-1.31604 -5.999858,-3.21894 -8.513933,-5.71502 -2.515077,-2.49507 -4.447918,-5.33279 -5.800959,-8.51588 -1.354042,-3.1791 -2.029358,-6.48331 -2.029358,-9.91242 0,-3.4671 0.675316,-6.79186 2.029358,-9.97295 1.352043,-3.1811 3.285882,-6.046798 5.800959,-8.599875 4.991151,-5.1041594 11.14337,-7.6584384 18.457594,-7.6584384 z" /> - <path d="m 50.114533,26.687816 -4.22913,2.22907 c -0.45702,-0.95103 -1.02003,-1.61905 -1.68605,-2.00006 -0.66802,-0.38001 -1.30704,-0.57102 -1.91406,-0.57102 -2.85709,0 -4.28713,1.88506 -4.28713,5.65717 0,1.71406 0.363,3.0841 1.08603,4.11313 0.72302,1.02903 1.78906,1.54405 3.2011,1.54405 1.86506,0 3.1801,-0.91503 3.94112,-2.74309 l 4.00012,2.00007 c -0.87502,1.56304 -2.05706,2.79108 -3.54111,3.68611 -1.48604,0.89602 -3.10509,1.34304 -4.85715,1.34304 -2.89608,0 -5.20915,-0.87503 -6.94121,-2.62908 -1.73605,-1.75205 -2.60207,-4.19013 -2.60207,-7.31323 0,-3.04809 0.88502,-5.46616 2.65808,-7.25722 1.77005,-1.79005 4.00812,-2.68608 6.7132,-2.68608 3.96212,-0.002 6.78321,1.54105 8.45826,4.62714 z" /> - <path d="m 31.656963,26.687816 -4.287128,2.22907 c -0.458013,-0.95103 -1.019029,-1.61905 -1.685048,-2.00006 -0.667024,-0.38001 -1.286042,-0.57102 -1.858057,-0.57102 -2.856087,0 -4.28613,1.88506 -4.28613,5.65717 0,1.71406 0.362014,3.0841 1.085029,4.11313 0.724025,1.02903 1.791056,1.54405 3.201101,1.54405 1.867057,0 3.181095,-0.91503 3.944118,-2.74309 l 3.942125,2.00007 c -0.83803,1.56304 -2.000065,2.79108 -3.486111,3.68611 -1.484043,0.89602 -3.123093,1.34304 -4.914149,1.34304 -2.857088,0 -5.163158,-0.87503 -6.915212,-2.62908 -1.752053,-1.75205 -2.62808,-4.19013 -2.62808,-7.31323 0,-3.04809 0.886028,-5.46616 2.657081,-7.25722 1.771054,-1.79005 4.009125,-2.68608 6.715205,-2.68608 3.963122,-0.002 6.800209,1.54105 8.515256,4.62714 z" /> - </svg> - ); -}; diff --git a/src/components/atoms/icons/close.module.scss b/src/components/atoms/icons/close.module.scss deleted file mode 100644 index a90391a..0000000 --- a/src/components/atoms/icons/close.module.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use "../../../styles/abstracts/functions" as fun; - -.icon { - display: block; - width: var(--icon-size, #{fun.convert-px(40)}); -} - -.line { - fill: var(--color-primary-lighter); - stroke: var(--color-primary-darker); - stroke-width: 3; -} diff --git a/src/components/atoms/icons/close.stories.tsx b/src/components/atoms/icons/close.stories.tsx deleted file mode 100644 index d075141..0000000 --- a/src/components/atoms/icons/close.stories.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Close as CloseIcon } from './close'; - -/** - * Close icon - Storybook Meta - */ -export default { - title: 'Atoms/Illustrations/Icons', - component: CloseIcon, - argTypes: { - 'aria-hidden': { - control: { - type: null, - }, - description: 'Should the svg be hidden from assistive technologies?', - table: { - category: 'Accessibility', - }, - type: { - name: 'string', - required: false, - }, - }, - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta<typeof CloseIcon>; - -const Template: ComponentStory<typeof CloseIcon> = (args) => ( - <CloseIcon {...args} /> -); - -/** - * Icons Stories - Close - */ -export const Close = Template.bind({}); diff --git a/src/components/atoms/icons/close.test.tsx b/src/components/atoms/icons/close.test.tsx deleted file mode 100644 index b2f325c..0000000 --- a/src/components/atoms/icons/close.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render } from '../../../../tests/utils'; -import { Close } from './close'; - -describe('Close', () => { - it('renders a Close icon', () => { - const { container } = render(<Close />); - expect(container).toBeDefined(); - }); -}); diff --git a/src/components/atoms/icons/close.tsx b/src/components/atoms/icons/close.tsx deleted file mode 100644 index 5db8620..0000000 --- a/src/components/atoms/icons/close.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { FC, SVGAttributes } from 'react'; -import styles from './close.module.scss'; - -export type CloseProps = SVGAttributes<SVGElement>; - -/** - * Close component - * - * Render a close svg icon. - */ -export const Close: FC<CloseProps> = ({ className = '', ...props }) => { - return ( - <svg - {...props} - className={`${styles.icon} ${className}`} - viewBox="0 0 100 100" - xmlns="http://www.w3.org/2000/svg" - > - <path - className={styles.line} - d="m 3.6465461,3.6465455 c 2.8785908,-2.87859092 7.5134339,-2.87859092 10.3920249,0 L 96.353457,85.96143 c 2.878587,2.878591 2.878587,7.513434 0,10.392025 -2.878597,2.878591 -7.513432,2.878591 -10.392029,0 L 3.6465451,14.038571 C 0.76795421,11.15998 0.76795421,6.5251364 3.6465461,3.6465455 Z" - /> - <path - className={styles.line} - d="m 96.353453,3.646546 c 2.878592,2.8785909 2.878592,7.513435 0,10.392026 L 14.03857,96.353457 c -2.878589,2.878587 -7.5134337,2.878587 -10.3920246,0 -2.87859084,-2.878597 -2.87858985,-7.513442 -1e-6,-10.392029 L 85.961428,3.646546 c 2.878591,-2.87859097 7.513434,-2.87859097 10.392025,0 z" - /> - </svg> - ); -}; diff --git a/src/components/atoms/icons/cog.module.scss b/src/components/atoms/icons/cog.module.scss deleted file mode 100644 index feda6ce..0000000 --- a/src/components/atoms/icons/cog.module.scss +++ /dev/null @@ -1,8 +0,0 @@ -@use "../../../styles/abstracts/functions" as fun; - -.icon { - width: var(--icon-size, #{fun.convert-px(40)}); - fill: var(--color-primary-lighter); - stroke: var(--color-primary-darker); - stroke-width: 4; -} diff --git a/src/components/atoms/icons/cog.stories.tsx b/src/components/atoms/icons/cog.stories.tsx deleted file mode 100644 index 1b6d440..0000000 --- a/src/components/atoms/icons/cog.stories.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Cog as CogIcon } from './cog'; - -/** - * Cogs icon - Storybook Meta - */ -export default { - title: 'Atoms/Illustrations/Icons', - component: CogIcon, - argTypes: { - 'aria-hidden': { - control: { - type: null, - }, - description: 'Should the svg be hidden from assistive technologies?', - table: { - category: 'Accessibility', - }, - type: { - name: 'string', - required: false, - }, - }, - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta<typeof CogIcon>; - -const Template: ComponentStory<typeof CogIcon> = (args) => ( - <CogIcon {...args} /> -); - -/** - * Icons Stories - Cogs - */ -export const Cog = Template.bind({}); diff --git a/src/components/atoms/icons/cog.test.tsx b/src/components/atoms/icons/cog.test.tsx deleted file mode 100644 index f4ea71b..0000000 --- a/src/components/atoms/icons/cog.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render } from '../../../../tests/utils'; -import { Cog } from './cog'; - -describe('Cog', () => { - it('renders a Cog icon', () => { - const { container } = render(<Cog />); - expect(container).toBeDefined(); - }); -}); diff --git a/src/components/atoms/icons/cog.tsx b/src/components/atoms/icons/cog.tsx deleted file mode 100644 index 6e44708..0000000 --- a/src/components/atoms/icons/cog.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { FC, SVGAttributes } from 'react'; -import styles from './cog.module.scss'; - -export type CogProps = SVGAttributes<SVGElement>; - -/** - * Cog component - * - * Render a cog svg icon. - */ -export const Cog: FC<CogProps> = ({ className = '', ...props }) => { - return ( - <svg - {...props} - className={`${styles.icon} ${className}`} - viewBox="0 0 100 100" - xmlns="http://www.w3.org/2000/svg" - > - <path d="m 71.782287,3.1230469 c -1.164356,0 -2.3107,0.076326 -3.435131,0.2227895 L 66.33766,9.1021499 C 64.651951,9.5517047 63.049493,10.204637 61.558109,11.033725 L 56.112383,8.2889128 c -1.970928,1.4609237 -3.730521,3.1910632 -5.22513,5.1351362 l 2.648234,5.494014 c -0.855644,1.477262 -1.537042,3.067161 -2.016082,4.743334 l -5.791433,1.911821 c -0.188001,1.269731 -0.286444,2.568579 -0.286444,3.890587 0,1.164355 0.07633,2.310701 0.222789,3.435131 l 5.756315,2.009497 c 0.449555,1.685708 1.102486,3.288168 1.931575,4.779551 l -2.744813,5.445725 c 1.460924,1.970927 3.191063,3.730521 5.135137,5.22513 l 5.494014,-2.648233 c 1.477261,0.85564 3.067161,1.537039 4.743334,2.016081 L 67.8917,55.51812 c 1.26973,0.188002 2.568578,0.286444 3.890587,0.286444 1.16565,0 2.313889,-0.07601 3.43952,-0.222789 l 2.008399,-5.756314 c 1.684332,-0.449523 3.285984,-1.103103 4.776259,-1.931575 l 5.445725,2.744812 c 1.970928,-1.460924 3.730521,-3.191061 5.22513,-5.135136 l -2.648233,-5.494015 c 0.85564,-1.477262 1.537039,-3.067161 2.016082,-4.743334 l 5.79253,-1.91182 c 0.187995,-1.269731 0.285346,-2.56858 0.285346,-3.890588 0,-1.16565 -0.07601,-2.313889 -0.222789,-3.439521 L 92.143942,24.015886 C 91.694419,22.331554 91.04084,20.729903 90.212367,19.239628 l 2.744812,-5.445726 C 91.496255,11.822973 89.766118,10.063381 87.822043,8.5687715 L 82.328028,11.217006 C 80.850766,10.361361 79.260867,9.6799641 77.584694,9.2009234 L 75.672874,3.4094907 C 74.403143,3.2214898 73.104295,3.1230469 71.782287,3.1230469 Z m 0,15.0520191 a 11.288679,11.288679 0 0 1 11.288739,11.288739 11.288679,11.288679 0 0 1 -11.288739,11.28874 11.288679,11.288679 0 0 1 -11.28874,-11.28874 11.288679,11.288679 0 0 1 11.28874,-11.288739 z" /> - <path d="m 38.326115,25.84777 c -1.583642,0 -3.142788,0.103807 -4.672127,0.303016 l -2.73312,7.829173 c -2.292736,0.611441 -4.472242,1.499494 -6.500676,2.627139 L 17.01345,32.873874 c -2.680664,1.987004 -5.073889,4.340169 -7.1067095,6.984309 l 3.6018685,7.472418 c -1.163764,2.009226 -2.090533,4.171652 -2.742078,6.451418 l -7.8769382,2.60027 C 2.6338924,58.109252 2.5,59.875819 2.5,61.673885 c 0,1.583642 0.1038125,3.142788 0.3030165,4.672128 l 7.8291725,2.73312 c 0.611441,2.292734 1.499494,4.472243 2.627139,6.500673 L 9.5261037,82.98655 c 1.9870063,2.680661 4.3401703,5.07389 6.9843093,7.106709 l 7.472419,-3.601867 c 2.009226,1.16376 4.171651,2.090533 6.451418,2.742079 l 2.60027,7.876932 C 34.761483,97.366114 36.528049,97.5 38.326115,97.5 c 1.585404,0 3.147126,-0.103373 4.678099,-0.303015 l 2.731628,-7.829178 c 2.290862,-0.611397 4.469272,-1.500329 6.496197,-2.627132 l 7.406741,3.733224 c 2.680664,-1.987007 5.07389,-4.340171 7.10671,-6.984313 l -3.601866,-7.472415 c 1.163756,-2.00923 2.090529,-4.171655 2.742076,-6.45142 l 7.878431,-2.60027 c 0.255691,-1.726964 0.3881,-3.49353 0.3881,-5.291596 0,-1.585404 -0.103373,-3.147127 -0.303016,-4.678099 L 66.020041,54.264159 C 65.408645,51.973296 64.51971,49.794888 63.392903,47.767962 l 3.733224,-7.406742 c -1.987006,-2.680664 -4.340168,-5.073889 -6.984309,-7.10671 l -7.472419,3.601867 c -2.009228,-1.163762 -4.171651,-2.090533 -6.451418,-2.742076 l -2.60027,-7.876939 C 41.890748,25.981661 40.124181,25.84777 38.326115,25.84777 Z m 0,20.472278 A 15.353754,15.353754 0 0 1 53.679952,61.673885 15.353754,15.353754 0 0 1 38.326115,77.027724 15.353754,15.353754 0 0 1 22.972279,61.673885 15.353754,15.353754 0 0 1 38.326115,46.320048 Z" /> - </svg> - ); -}; diff --git a/src/components/atoms/icons/computer-screen.stories.tsx b/src/components/atoms/icons/computer-screen.stories.tsx deleted file mode 100644 index d4b257b..0000000 --- a/src/components/atoms/icons/computer-screen.stories.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { ComputerScreen as ComputerScreenIcon } from './computer-screen'; - -/** - * Computer Screen icon - Storybook Meta - */ -export default { - title: 'Atoms/Illustrations/Icons', - component: ComputerScreenIcon, - argTypes: { - 'aria-hidden': { - control: { - type: null, - }, - description: 'Should the svg be hidden from assistive technologies?', - table: { - category: 'Accessibility', - }, - type: { - name: 'string', - required: false, - }, - }, - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta<typeof ComputerScreenIcon>; - -const Template: ComponentStory<typeof ComputerScreenIcon> = (args) => ( - <ComputerScreenIcon {...args} /> -); - -/** - * Icons Stories - Computer Screen - */ -export const ComputerScreen = Template.bind({}); diff --git a/src/components/atoms/icons/computer-screen.test.tsx b/src/components/atoms/icons/computer-screen.test.tsx deleted file mode 100644 index 5a61c9b..0000000 --- a/src/components/atoms/icons/computer-screen.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render } from '../../../../tests/utils'; -import { ComputerScreen } from './computer-screen'; - -describe('ComputerScreen', () => { - it('renders a computer screen icon', () => { - const { container } = render(<ComputerScreen />); - expect(container).toBeDefined(); - }); -}); diff --git a/src/components/atoms/icons/computer-screen.tsx b/src/components/atoms/icons/computer-screen.tsx deleted file mode 100644 index 32f41a0..0000000 --- a/src/components/atoms/icons/computer-screen.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import { FC, SVGAttributes } from 'react'; -import styles from './computer-screen.module.scss'; - -export type ComputerScreenProps = SVGAttributes<SVGElement>; - -/** - * ComputerScreen component - * - * Render a computer screen svg icon. - */ -export const ComputerScreen: FC<ComputerScreenProps> = ({ - className = '', - ...props -}) => { - return ( - <svg - {...props} - className={`${styles.icon} ${className}`} - viewBox="0 0 100 100" - xmlns="http://www.w3.org/2000/svg" - > - <path - d="M 1.0206528,11.991149 H 98.979347 V 78.466748 H 1.0206528 Z" - className={styles.contour} - /> - <path - d="M 6.2503581,18.032451 H 93.563283 V 71.12731 H 6.2503581 Z" - className={styles.screen} - /> - <path - d="m 40.038268,78.939276 c 4.614714,2.7794 4.333151,10.099225 0,17.60572 H 50 59.961731 c -4.333151,-7.506495 -4.614715,-14.82632 0,-17.60572 H 50 Z" - className={`${styles.stand} ${styles['stand--top']}`} - /> - <path - d="m 31.084262,96.254656 h 37.831475 c 1.394769,0 2.517635,0.404907 2.517635,0.907864 v 1.179616 c 0,0.502956 -1.122866,0.907864 -2.517635,0.907864 H 31.084262 c -1.394769,0 -2.517635,-0.404908 -2.517635,-0.907864 V 97.16252 c 0,-0.502957 1.122866,-0.907864 2.517635,-0.907864 z" - className={`${styles.stand} ${styles['stand--bottom']}`} - /> - <path - d="m 13.259277,26.737199 h 29.132596 v 2.567314 H 13.259277 Z" - className={styles.line} - /> - <path - d="M 13.259277,36.439141 H 36.46805 v 2.567315 H 13.259277 Z" - className={styles.line} - /> - <path - d="m 13.259277,46.141084 h 26.586812 v 2.567314 H 13.259277 Z" - className={styles.line} - /> - <path - d="m 18.443194,65.930804 h 4.417548 v 1 h -4.417548 z" - className={styles.cursor} - /> - <path - d="m 77.586096,42.217577 v -1.680914 l 6.160884,-2.39919 -6.160884,-2.406595 v -1.68832 l 7.604842,2.89532 v 2.38438 z" - className={styles.text} - /> - <path - d="m 68.396606,43.291289 6.07943,-11.136982 h 1.688318 l -6.049809,11.136982 z" - className={styles.text} - /> - <path - d="m 59.384832,39.322258 v -2.38438 l 7.604841,-2.89532 v 1.68832 l -6.168289,2.406595 6.168289,2.399191 v 1.680915 z" - className={styles.text} - /> - <path - d="M 7.1079167,57.876372 H 92.892083 v 0.813634 H 7.1079167 Z" - className={styles.separator} - /> - <path - d="m 17.042456,64.960616 q 0,0.632276 -0.426175,0.9816 -0.422681,0.345831 -1.254074,0.37727 v 0.611318 h -0.380763 v -0.600838 q -0.751047,-0.02795 -1.170236,-0.352818 -0.419189,-0.328364 -0.551931,-1.002559 l 0.89427,-0.164183 q 0.06637,0.394736 0.261992,0.579878 0.199115,0.181648 0.565905,0.216581 v -1.365857 q -0.01048,-0.007 -0.0524,-0.01398 -0.04192,-0.01048 -0.05589,-0.01048 -0.562412,-0.129244 -0.848857,-0.303907 -0.286445,-0.178155 -0.443642,-0.447135 -0.153701,-0.272472 -0.153701,-0.663715 0,-0.579878 0.394736,-0.894269 0.394736,-0.317886 1.159755,-0.349325 v -0.468093 h 0.380763 v 0.468095 q 0.681183,0.02445 1.047973,0.303911 0.36679,0.275967 0.527479,0.918723 l -0.92222,0.136236 q -0.104797,-0.600837 -0.653236,-0.674195 v 1.22962 l 0.03843,0.007 q 0.101305,0 0.614811,0.167676 0.517,0.167676 0.772007,0.496041 0.255006,0.324871 0.255006,0.817418 z m -2.061012,-2.731715 q -0.639264,0.04891 -0.639264,0.558918 0,0.157196 0.0524,0.2585 0.0524,0.09781 0.157197,0.167676 0.104797,0.06986 0.429668,0.174662 z m 1.152769,2.745688 q 0,-0.174662 -0.06288,-0.282954 -0.06288,-0.111783 -0.185141,-0.181648 -0.118771,-0.06986 -0.523987,-0.185142 v 1.28202 q 0.772006,-0.0524 0.772006,-0.632276 z" - className={styles.root} - /> - </svg> - ); -}; diff --git a/src/components/atoms/icons/envelop.module.scss b/src/components/atoms/icons/envelop.module.scss deleted file mode 100644 index 584fe97..0000000 --- a/src/components/atoms/icons/envelop.module.scss +++ /dev/null @@ -1,28 +0,0 @@ -@use "../../../styles/abstracts/functions" as fun; - -.icon { - display: block; - width: var(--icon-size, #{fun.convert-px(40)}); -} - -.envelop { - fill: var(--color-primary-lighter); - stroke: var(--color-primary-darker); - stroke-width: 4; -} - -.lines { - fill: var(--color-fg); -} - -.background { - fill: var(--color-shadow-dark); - stroke: var(--color-primary-darker); - stroke-width: 4; -} - -.paper { - fill: var(--color-bg); - stroke: var(--color-primary-darker); - stroke-width: 4; -} diff --git a/src/components/atoms/icons/envelop.stories.tsx b/src/components/atoms/icons/envelop.stories.tsx deleted file mode 100644 index 666cd86..0000000 --- a/src/components/atoms/icons/envelop.stories.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Envelop as EnvelopIcon } from './envelop'; - -/** - * Envelop icon - Storybook Meta - */ -export default { - title: 'Atoms/Illustrations/Icons', - component: EnvelopIcon, - argTypes: { - 'aria-hidden': { - control: { - type: null, - }, - description: 'Should the svg be hidden from assistive technologies?', - table: { - category: 'Accessibility', - }, - type: { - name: 'string', - required: false, - }, - }, - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta<typeof EnvelopIcon>; - -const Template: ComponentStory<typeof EnvelopIcon> = (args) => ( - <EnvelopIcon {...args} /> -); - -/** - * Icons Stories - Envelop - */ -export const Envelop = Template.bind({}); diff --git a/src/components/atoms/icons/envelop.test.tsx b/src/components/atoms/icons/envelop.test.tsx deleted file mode 100644 index 82ed575..0000000 --- a/src/components/atoms/icons/envelop.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render } from '../../../../tests/utils'; -import { Envelop } from './envelop'; - -describe('Envelop', () => { - it('renders an envelop icon', () => { - const { container } = render(<Envelop />); - expect(container).toBeDefined(); - }); -}); diff --git a/src/components/atoms/icons/envelop.tsx b/src/components/atoms/icons/envelop.tsx deleted file mode 100644 index 968c51f..0000000 --- a/src/components/atoms/icons/envelop.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import { FC, SVGAttributes } from 'react'; -import styles from './envelop.module.scss'; - -export type EnvelopProps = SVGAttributes<SVGElement>; - -/** - * Envelop Component - * - * Render an envelop svg icon. - */ -export const Envelop: FC<EnvelopProps> = ({ className = '', ...props }) => { - return ( - <svg - {...props} - className={`${styles.icon} ${className}`} - viewBox="0 0 100 100" - xmlns="http://www.w3.org/2000/svg" - > - <path - className={styles.background} - d="M 1.5262527,42.535416 H 98.473747 V 98.371662 H 1.5262527 Z" - /> - <path - className={styles.envelop} - d="m 49.999985,1.6283075 c 2.855148,0 48.473753,40.8563885 48.473753,40.8563885 H 1.5262359 c 0,0 45.6186001,-40.8563885 48.4737491,-40.8563885 z" - /> - <path - className={styles.paper} - d="M 8.3434839,28.463842 H 91.656465 V 97.348661 H 8.3434839 Z" - /> - <path - className={styles.envelop} - d="M 49.999985,63.571925 98.473738,98.371692 H 1.5262359 Z" - /> - <path - className={styles.lines} - d="m 24.562439,37.640923 h 50.875053 v 1.5 H 24.562439 Z" - /> - <path - className={styles.lines} - d="m 24.562439,45.140923 h 50.875053 v 1.5 H 24.562439 Z" - /> - <path - className={styles.lines} - d="m 24.562443,52.640923 h 50.875053 v 1.5 H 24.562443 Z" - /> - <path - className={styles.lines} - d="M 24.562447,60.140923 H 75.4375 v 1.5 H 24.562447 Z" - /> - <path - className={styles.envelop} - d="M 39.93749,70.965004 1.5262559,43.55838 v 54.813242 z" - /> - <path - className={styles.envelop} - d="M 60.0625,70.965004 98.473738,43.55838 v 54.813242 z" - /> - </svg> - ); -}; diff --git a/src/components/atoms/icons/feed.module.scss b/src/components/atoms/icons/feed.module.scss deleted file mode 100644 index bf15c23..0000000 --- a/src/components/atoms/icons/feed.module.scss +++ /dev/null @@ -1,6 +0,0 @@ -@use "../../../styles/abstracts/functions" as fun; - -.icon { - display: block; - width: var(--icon-size, #{fun.convert-px(40)}); -} diff --git a/src/components/atoms/icons/feed.stories.tsx b/src/components/atoms/icons/feed.stories.tsx deleted file mode 100644 index 1a297e9..0000000 --- a/src/components/atoms/icons/feed.stories.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Feed as FeedIcon } from './feed'; - -/** - * Feed icon - Storybook Meta - */ -export default { - title: 'Atoms/Illustrations/Icons', - component: FeedIcon, - argTypes: { - 'aria-hidden': { - control: { - type: null, - }, - description: 'Should the svg be hidden from assistive technologies?', - table: { - category: 'Accessibility', - }, - type: { - name: 'string', - required: false, - }, - }, - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta<typeof FeedIcon>; - -const Template: ComponentStory<typeof FeedIcon> = (args) => ( - <FeedIcon {...args} /> -); - -/** - * Icons Stories - Feed - */ -export const Feed = Template.bind({}); diff --git a/src/components/atoms/icons/feed.test.tsx b/src/components/atoms/icons/feed.test.tsx deleted file mode 100644 index 5a91483..0000000 --- a/src/components/atoms/icons/feed.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render } from '../../../../tests/utils'; -import { Feed } from './feed'; - -describe('Feed', () => { - it('renders a feed icon', () => { - const { container } = render(<Feed />); - expect(container).toBeDefined(); - }); -}); diff --git a/src/components/atoms/icons/feed.tsx b/src/components/atoms/icons/feed.tsx deleted file mode 100644 index 40b3156..0000000 --- a/src/components/atoms/icons/feed.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { FC, SVGAttributes } from 'react'; -import styles from './feed.module.scss'; - -export type FeedProps = SVGAttributes<SVGElement>; - -/** - * Feed Component - * - * Render a feed svg icon. - */ -export const Feed: FC<FeedProps> = ({ className = '', ...props }) => { - return ( - <svg - {...props} - className={`${styles.icon} ${className}`} - viewBox="0 0 256 256" - xmlns="http://www.w3.org/2000/svg" - > - <defs> - <linearGradient x1="0.085" y1="0.085" x2="0.915" y2="0.915" id="RSSg"> - <stop offset="0.0" stopColor="#E3702D" /> - <stop offset="0.1071" stopColor="#EA7D31" /> - <stop offset="0.3503" stopColor="#F69537" /> - <stop offset="0.5" stopColor="#FB9E3A" /> - <stop offset="0.7016" stopColor="#EA7C31" /> - <stop offset="0.8866" stopColor="#DE642B" /> - <stop offset="1.0" stopColor="#D95B29" /> - </linearGradient> - </defs> - <rect - width="256" - height="256" - rx="55" - ry="55" - x="0" - y="0" - fill="#CC5D15" - /> - <rect - width="246" - height="246" - rx="50" - ry="50" - x="5" - y="5" - fill="#F49C52" - /> - <rect - width="236" - height="236" - rx="47" - ry="47" - x="10" - y="10" - fill="url(#RSSg)" - /> - <circle cx="68" cy="189" r="24" fill="#FFF" /> - <path - d="M160 213h-34a82 82 0 0 0 -82 -82v-34a116 116 0 0 1 116 116z" - fill="#FFF" - /> - <path - d="M184 213A140 140 0 0 0 44 73 V 38a175 175 0 0 1 175 175z" - fill="#FFF" - /> - </svg> - ); -}; diff --git a/src/components/atoms/icons/hamburger.stories.tsx b/src/components/atoms/icons/hamburger.stories.tsx deleted file mode 100644 index b2416c6..0000000 --- a/src/components/atoms/icons/hamburger.stories.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Hamburger as HamburgerIcon } from './hamburger'; - -/** - * Hamburger icon - Storybook Meta - */ -export default { - title: 'Atoms/Illustrations/Icons', - component: HamburgerIcon, - argTypes: { - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames to the icon wrapper.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - iconClassName: { - control: { - type: 'text', - }, - description: 'Set additional classnames to the icon.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta<typeof HamburgerIcon>; - -const Template: ComponentStory<typeof HamburgerIcon> = (args) => ( - <HamburgerIcon {...args} /> -); - -/** - * Icons Stories - Hamburger - */ -export const Hamburger = Template.bind({}); diff --git a/src/components/atoms/icons/hamburger.test.tsx b/src/components/atoms/icons/hamburger.test.tsx deleted file mode 100644 index d7a17b6..0000000 --- a/src/components/atoms/icons/hamburger.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render } from '../../../../tests/utils'; -import { Hamburger } from './hamburger'; - -describe('Hamburger', () => { - it('renders a Hamburger icon', () => { - const { container } = render(<Hamburger />); - expect(container).toBeDefined(); - }); -}); diff --git a/src/components/atoms/icons/hamburger.tsx b/src/components/atoms/icons/hamburger.tsx deleted file mode 100644 index cc4e7b9..0000000 --- a/src/components/atoms/icons/hamburger.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { FC } from 'react'; -import styles from './hamburger.module.scss'; - -export type HamburgerProps = { - /** - * Set additional classnames to the icon wrapper. - */ - className?: string; - /** - * Set additional classnames to the icon. - */ - iconClassName?: string; -}; - -/** - * Hamburger component - * - * Render a Hamburger icon. - */ -export const Hamburger: FC<HamburgerProps> = ({ - className = '', - iconClassName = '', -}) => { - return ( - <span className={`${styles.wrapper} ${className}`}> - <span className={`${styles.icon} ${iconClassName}`}></span> - </span> - ); -}; diff --git a/src/components/atoms/icons/home.module.scss b/src/components/atoms/icons/home.module.scss deleted file mode 100644 index 8ed05a0..0000000 --- a/src/components/atoms/icons/home.module.scss +++ /dev/null @@ -1,41 +0,0 @@ -@use "../../../styles/abstracts/functions" as fun; - -.icon { - display: block; - width: var(--icon-size, #{fun.convert-px(40)}); -} - -.wall { - fill: var(--color-bg); - stroke: var(--color-primary-darker); - stroke-width: 4; -} - -.indoor { - fill: var(--color-shadow-dark); - stroke: var(--color-primary-darker); - stroke-width: 4; -} - -.door { - fill: var(--color-primary-lighter); - stroke: var(--color-primary-darker); - stroke-width: 4; -} - -.roof { - fill: var(--color-primary-lighter); - stroke: var(--color-primary-darker); - stroke-width: 4; -} - -.chimney { - fill: var(--color-bg); - stroke: var(--color-primary-darker); - stroke-width: 4; -} - -.lines { - fill: var(--color-primary-darker); - stroke-width: 4; -} diff --git a/src/components/atoms/icons/home.stories.tsx b/src/components/atoms/icons/home.stories.tsx deleted file mode 100644 index 7492af7..0000000 --- a/src/components/atoms/icons/home.stories.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Home as HomeIcon } from './home'; - -/** - * Home icon - Storybook Meta - */ -export default { - title: 'Atoms/Illustrations/Icons', - component: HomeIcon, - argTypes: { - 'aria-hidden': { - control: { - type: null, - }, - description: 'Should the svg be hidden from assistive technologies?', - table: { - category: 'Accessibility', - }, - type: { - name: 'string', - required: false, - }, - }, - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta<typeof HomeIcon>; - -const Template: ComponentStory<typeof HomeIcon> = (args) => ( - <HomeIcon {...args} /> -); - -/** - * Icons Stories - Home - */ -export const Home = Template.bind({}); diff --git a/src/components/atoms/icons/home.test.tsx b/src/components/atoms/icons/home.test.tsx deleted file mode 100644 index e7d03d9..0000000 --- a/src/components/atoms/icons/home.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render } from '../../../../tests/utils'; -import { Home } from './home'; - -describe('Home', () => { - it('renders a home icon', () => { - const { container } = render(<Home />); - expect(container).toBeDefined(); - }); -}); diff --git a/src/components/atoms/icons/home.tsx b/src/components/atoms/icons/home.tsx deleted file mode 100644 index 0081f37..0000000 --- a/src/components/atoms/icons/home.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { FC, SVGAttributes } from 'react'; -import styles from './home.module.scss'; - -export type HomeProps = SVGAttributes<SVGElement>; - -/** - * Home component. - * - * Render a home svg icon. - */ -export const Home: FC<HomeProps> = ({ className = '', ...props }) => { - return ( - <svg - {...props} - className={`${styles.icon} ${className}`} - viewBox="0 0 100 100" - xmlns="http://www.w3.org/2000/svg" - > - <path - className={styles.wall} - d="M 9.2669392,15.413749 H 90.709833 V 97.751815 H 9.2669392 Z" - /> - <path - className={styles.indoor} - d="m 39.190941,65.836418 h 21.594871 v 31.91539 H 39.190941 Z" - /> - <path - className={styles.door} - d="m 39.190941,65.836418 h 21.594871 v 31.91539 H 39.190941 Z" - /> - <path - className={styles.roof} - d="M 4.8219096,11.719266 H 94.720716 l 3.47304,33.365604 H 1.7830046 Z" - /> - <path - className={styles.chimney} - d="M 70.41848,2.2481852 H 82.957212 V 22.636212 H 70.41848 Z" - /> - <path - className={styles.lines} - d="M 3.9536645,19.342648 H 61.003053 v 3.293563 H 3.9536645 Z" - /> - <path - className={styles.lines} - d="m 38.973709,32.057171 h 57.049389 v 3.293563 H 38.973709 Z" - /> - </svg> - ); -}; diff --git a/src/components/atoms/icons/index.ts b/src/components/atoms/icons/index.ts deleted file mode 100644 index 1b413ba..0000000 --- a/src/components/atoms/icons/index.ts +++ /dev/null @@ -1,15 +0,0 @@ -export * from './arrow'; -export * from './career'; -export * from './cc-by-sa'; -export * from './close'; -export * from './cog'; -export * from './computer-screen'; -export * from './envelop'; -export * from './feed'; -export * from './hamburger'; -export * from './home'; -export * from './magnifying-glass'; -export * from './moon'; -export * from './plus-minus'; -export * from './posts-stack'; -export * from './sun'; diff --git a/src/components/atoms/icons/magnifying-glass.module.scss b/src/components/atoms/icons/magnifying-glass.module.scss deleted file mode 100644 index 33a82d6..0000000 --- a/src/components/atoms/icons/magnifying-glass.module.scss +++ /dev/null @@ -1,29 +0,0 @@ -@use "../../../styles/abstracts/functions" as fun; - -.icon { - width: var(--icon-size, #{fun.convert-px(40)}); -} - -.big-handle { - fill: var(--color-primary-lighter); - stroke: var(--color-primary-darker); - stroke-width: 3; -} - -.glass { - fill: var(--color-bg-opacity); - stroke: var(--color-primary-darker); - stroke-width: 2; -} - -.upright { - fill: var(--color-primary-lighter); - stroke: var(--color-primary-darker); - stroke-width: 3; -} - -.small-handle { - fill: var(--color-primary); - stroke: var(--color-primary-darker); - stroke-width: 2; -} diff --git a/src/components/atoms/icons/magnifying-glass.stories.tsx b/src/components/atoms/icons/magnifying-glass.stories.tsx deleted file mode 100644 index 7dec505..0000000 --- a/src/components/atoms/icons/magnifying-glass.stories.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { MagnifyingGlass as MagnifyingGlassIcon } from './magnifying-glass'; - -/** - * Magnifying Glass icon - Storybook Meta - */ -export default { - title: 'Atoms/Illustrations/Icons', - component: MagnifyingGlassIcon, - argTypes: { - 'aria-hidden': { - control: { - type: null, - }, - description: 'Should the svg be hidden from assistive technologies?', - table: { - category: 'Accessibility', - }, - type: { - name: 'string', - required: false, - }, - }, - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta<typeof MagnifyingGlassIcon>; - -const Template: ComponentStory<typeof MagnifyingGlassIcon> = (args) => ( - <MagnifyingGlassIcon {...args} /> -); - -/** - * Icons Stories - Magnifying Glass - */ -export const MagnifyingGlass = Template.bind({}); diff --git a/src/components/atoms/icons/magnifying-glass.test.tsx b/src/components/atoms/icons/magnifying-glass.test.tsx deleted file mode 100644 index 5cff75b..0000000 --- a/src/components/atoms/icons/magnifying-glass.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render } from '../../../../tests/utils'; -import { MagnifyingGlass } from './magnifying-glass'; - -describe('MagnifyingGlass', () => { - it('renders a magnifying glass icon', () => { - const { container } = render(<MagnifyingGlass />); - expect(container).toBeDefined(); - }); -}); diff --git a/src/components/atoms/icons/magnifying-glass.tsx b/src/components/atoms/icons/magnifying-glass.tsx deleted file mode 100644 index 619adef..0000000 --- a/src/components/atoms/icons/magnifying-glass.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { FC, SVGAttributes } from 'react'; -import styles from './magnifying-glass.module.scss'; - -export type MagnifyingGlassProps = SVGAttributes<SVGElement>; - -/** - * MagnifyingGlass component - * - * Render a magnifying glass svg icon. - */ -export const MagnifyingGlass: FC<MagnifyingGlassProps> = ({ - className = '', - ...props -}) => { - return ( - <svg - {...props} - className={`${styles.icon} ${className}`} - viewBox="0 0 100 100" - xmlns="http://www.w3.org/2000/svg" - > - <path - className={styles['small-handle']} - d="m 45.39268,48.064692 5.611922,4.307881 -10.292886,13.414321 -5.611923,-4.307882 z" - /> - <path - className={styles.upright} - d="M 90.904041,28.730105 A 27.725691,27.730085 0 0 1 63.17835,56.46019 27.725691,27.730085 0 0 1 35.45266,28.730105 27.725691,27.730085 0 0 1 63.17835,1.00002 27.725691,27.730085 0 0 1 90.904041,28.730105 Z" - /> - <path - className={styles.glass} - d="M 82.438984,28.730105 A 19.260633,19.263685 0 0 1 63.17835,47.99379 19.260633,19.263685 0 0 1 43.917716,28.730105 19.260633,19.263685 0 0 1 63.17835,9.4664203 19.260633,19.263685 0 0 1 82.438984,28.730105 Z" - /> - <path - className={styles['big-handle']} - d="m 35.826055,60.434903 5.75193,4.415356 c 0.998045,0.766128 1.184879,2.186554 0.418913,3.184809 L 18.914717,98.117182 c -0.765969,0.998256 -2.186094,1.185131 -3.18414,0.418997 L 9.9786472,94.120827 C 8.9806032,93.354698 8.7937692,91.934273 9.5597392,90.936014 L 32.641919,60.853903 c 0.765967,-0.998254 2.186091,-1.185129 3.184136,-0.419 z" - /> - </svg> - ); -}; diff --git a/src/components/atoms/icons/moon.module.scss b/src/components/atoms/icons/moon.module.scss deleted file mode 100644 index f2564a9..0000000 --- a/src/components/atoms/icons/moon.module.scss +++ /dev/null @@ -1,8 +0,0 @@ -@use "../../../styles/abstracts/functions" as fun; - -.icon { - fill: var(--color-primary-lighter); - stroke: var(--color-primary-darker); - stroke-width: 4; - width: var(--icon-size, #{fun.convert-px(25)}); -} diff --git a/src/components/atoms/icons/moon.stories.tsx b/src/components/atoms/icons/moon.stories.tsx deleted file mode 100644 index a8faf03..0000000 --- a/src/components/atoms/icons/moon.stories.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Moon as MoonIcon } from './moon'; - -/** - * Moon icon - Storybook Meta - */ -export default { - title: 'Atoms/Illustrations/Icons', - component: MoonIcon, - argTypes: { - 'aria-hidden': { - control: { - type: null, - }, - description: 'Should the svg be hidden from assistive technologies?', - table: { - category: 'Accessibility', - }, - type: { - name: 'string', - required: false, - }, - }, - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - title: { - control: { - type: 'text', - }, - description: 'The SVG title.', - table: { - category: 'Accessibility', - }, - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta<typeof MoonIcon>; - -const Template: ComponentStory<typeof MoonIcon> = (args) => ( - <MoonIcon {...args} /> -); - -/** - * Icons Stories - Moon - */ -export const Moon = Template.bind({}); diff --git a/src/components/atoms/icons/moon.test.tsx b/src/components/atoms/icons/moon.test.tsx deleted file mode 100644 index b164ecd..0000000 --- a/src/components/atoms/icons/moon.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render } from '../../../../tests/utils'; -import { Moon } from './moon'; - -describe('Moon', () => { - it('renders a moon icon', () => { - const { container } = render(<Moon />); - expect(container).toBeDefined(); - }); -}); diff --git a/src/components/atoms/icons/moon.tsx b/src/components/atoms/icons/moon.tsx deleted file mode 100644 index 2139ce1..0000000 --- a/src/components/atoms/icons/moon.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { FC, SVGAttributes } from 'react'; -import styles from './moon.module.scss'; - -export type MoonProps = SVGAttributes<SVGElement> & { - /** - * The SVG title. - */ - title?: string; -}; - -export const Moon: FC<MoonProps> = ({ className = '', title, ...props }) => { - return ( - <svg - {...props} - className={`${styles.icon} ${className}`} - viewBox="0 0 100 100" - xmlns="http://www.w3.org/2000/svg" - > - {title ? <title>{title}</title> : null} - <path d="M 51.077315,1.9893942 A 43.319985,43.319985 0 0 1 72.840039,39.563145 43.319985,43.319985 0 0 1 29.520053,82.88313 43.319985,43.319985 0 0 1 5.4309911,75.569042 48.132997,48.132997 0 0 0 46.126047,98 48.132997,48.132997 0 0 0 94.260004,49.867002 48.132997,48.132997 0 0 0 51.077315,1.9893942 Z" /> - </svg> - ); -}; diff --git a/src/components/atoms/icons/plus-minus.stories.tsx b/src/components/atoms/icons/plus-minus.stories.tsx deleted file mode 100644 index c556076..0000000 --- a/src/components/atoms/icons/plus-minus.stories.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { PlusMinus as PlusMinusIcon } from './plus-minus'; - -/** - * Plus/Minus icon - Storybook Meta - */ -export default { - title: 'Atoms/Illustrations/Icons', - component: PlusMinusIcon, - argTypes: { - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - state: { - control: { - type: 'radio', - }, - description: 'Which state should be displayed.', - options: ['plus', 'minus'], - type: { - name: 'enum', - required: true, - value: ['plus', 'minus'], - }, - }, - }, -} as ComponentMeta<typeof PlusMinusIcon>; - -const Template: ComponentStory<typeof PlusMinusIcon> = (args) => ( - <PlusMinusIcon {...args} /> -); - -/** - * Icons Stories - Plus/Minus - */ -export const PlusMinus = Template.bind({}); -PlusMinus.args = { - state: 'plus', -}; diff --git a/src/components/atoms/icons/plus-minus.test.tsx b/src/components/atoms/icons/plus-minus.test.tsx deleted file mode 100644 index 6307401..0000000 --- a/src/components/atoms/icons/plus-minus.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render } from '../../../../tests/utils'; -import { PlusMinus } from './plus-minus'; - -describe('PlusMinus', () => { - it('renders a plus/minus icon', () => { - const { container } = render(<PlusMinus state="plus" />); - expect(container).toBeDefined(); - }); -}); diff --git a/src/components/atoms/icons/plus-minus.tsx b/src/components/atoms/icons/plus-minus.tsx deleted file mode 100644 index e2eb55e..0000000 --- a/src/components/atoms/icons/plus-minus.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { FC } from 'react'; -import styles from './plus-minus.module.scss'; - -export type PlusMinusProps = { - /** - * Set additional classnames to the icon. - */ - className?: string; - /** - * Which state should be displayed. - */ - state: 'plus' | 'minus'; -}; - -/** - * PlusMinus component - * - * Render a plus or a minus icon. - */ -export const PlusMinus: FC<PlusMinusProps> = ({ className = '', state }) => { - const stateClass = `icon--${state}`; - - return ( - <div - aria-hidden={true} - className={`${styles.icon} ${styles[stateClass]} ${className}`} - /> - ); -}; diff --git a/src/components/atoms/icons/posts-stack.module.scss b/src/components/atoms/icons/posts-stack.module.scss deleted file mode 100644 index aa1f4f0..0000000 --- a/src/components/atoms/icons/posts-stack.module.scss +++ /dev/null @@ -1,22 +0,0 @@ -@use "../../../styles/abstracts/functions" as fun; - -.icon { - display: block; - width: var(--icon-size, #{fun.convert-px(40)}); -} - -.lines { - fill: var(--color-fg); - stroke-width: 4; -} - -.picture { - fill: var(--color-primary-lighter); - stroke: var(--color-primary-darker); -} - -.background { - fill: var(--color-bg); - stroke: var(--color-primary-darker); - stroke-width: 4; -} diff --git a/src/components/atoms/icons/posts-stack.stories.tsx b/src/components/atoms/icons/posts-stack.stories.tsx deleted file mode 100644 index 7daeecf..0000000 --- a/src/components/atoms/icons/posts-stack.stories.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { PostsStack as PostsStackIcon } from './posts-stack'; - -/** - * Posts Stack icon - Storybook Meta - */ -export default { - title: 'Atoms/Illustrations/Icons', - component: PostsStackIcon, - argTypes: { - 'aria-hidden': { - control: { - type: null, - }, - description: 'Should the svg be hidden from assistive technologies?', - table: { - category: 'Accessibility', - }, - type: { - name: 'string', - required: false, - }, - }, - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta<typeof PostsStackIcon>; - -const Template: ComponentStory<typeof PostsStackIcon> = (args) => ( - <PostsStackIcon {...args} /> -); - -/** - * Icons Stories - Posts Stack - */ -export const PostsStack = Template.bind({}); diff --git a/src/components/atoms/icons/posts-stack.test.tsx b/src/components/atoms/icons/posts-stack.test.tsx deleted file mode 100644 index 068fbea..0000000 --- a/src/components/atoms/icons/posts-stack.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render } from '../../../../tests/utils'; -import { PostsStack } from './posts-stack'; - -describe('PostsStack', () => { - it('renders a posts stack icon', () => { - const { container } = render(<PostsStack />); - expect(container).toBeDefined(); - }); -}); diff --git a/src/components/atoms/icons/posts-stack.tsx b/src/components/atoms/icons/posts-stack.tsx deleted file mode 100644 index c783892..0000000 --- a/src/components/atoms/icons/posts-stack.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import { FC, SVGAttributes } from 'react'; -import styles from './posts-stack.module.scss'; - -export type PostsStackProps = SVGAttributes<SVGElement>; - -/** - * Posts stack component. - * - * Render a posts stack svg icon. - */ -export const PostsStack: FC<PostsStackProps> = ({ - className = '', - ...props -}) => { - return ( - <svg - {...props} - className={`${styles.icon} ${className}`} - viewBox="0 0 100 100" - xmlns="http://www.w3.org/2000/svg" - > - <path - className={styles.background} - d="M 28.992096,1.4822128 H 90.770752 V 82.312253 H 28.992096 Z" - /> - <path - className={styles.background} - d="m 19.110672,8.992094 h 61.778656 v 80.83004 H 19.110672 Z" - /> - <path - className={styles.background} - d="m 9.229248,17.687748 h 61.778656 v 80.83004 H 9.229248 Z" - /> - <path - className={styles.picture} - d="M 18.149242,74.65544 H 33.375246 V 90.194215 H 18.149242 Z" - /> - <path - className={styles.picture} - d="M 18.142653,24.858688 H 62.094499 V 35.908926 H 18.142653 Z" - /> - <path - className={styles.lines} - d="m 17.618576,41.908926 h 45 v 2 h -45 z" - /> - <path - className={styles.lines} - d="m 17.618576,49.908926 h 45 v 2 h -45 z" - /> - <path - className={styles.lines} - d="m 17.618576,57.908926 h 45 v 2 h -45 z" - /> - <path - className={styles.lines} - d="m 17.618576,65.908926 h 45 v 2 h -45 z" - /> - <path - className={styles.lines} - d="m 41.833105,73.424828 h 20.785471 v 2 H 41.833105 Z" - /> - <path - className={styles.lines} - d="m 41.833105,81.424828 h 20.785471 v 2 H 41.833105 Z" - /> - <path - className={styles.lines} - d="m 41.833105,89.424828 h 20.785471 v 2 H 41.833105 Z" - /> - </svg> - ); -}; diff --git a/src/components/atoms/icons/sun.module.scss b/src/components/atoms/icons/sun.module.scss deleted file mode 100644 index 8d9683f..0000000 --- a/src/components/atoms/icons/sun.module.scss +++ /dev/null @@ -1,8 +0,0 @@ -@use "../../../styles/abstracts/functions" as fun; - -.sun { - fill: var(--color-primary-lighter); - stroke: var(--color-primary-darker); - stroke-width: 4; - width: var(--icon-size, #{fun.convert-px(25)}); -} diff --git a/src/components/atoms/icons/sun.stories.tsx b/src/components/atoms/icons/sun.stories.tsx deleted file mode 100644 index a332bcd..0000000 --- a/src/components/atoms/icons/sun.stories.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Sun as SunIcon } from './sun'; - -/** - * Sun icon - Storybook Meta - */ -export default { - title: 'Atoms/Illustrations/Icons', - component: SunIcon, - argTypes: { - 'aria-hidden': { - control: { - type: null, - }, - description: 'Should the svg be hidden from assistive technologies?', - table: { - category: 'Accessibility', - }, - type: { - name: 'string', - required: false, - }, - }, - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - title: { - control: { - type: 'text', - }, - description: 'The SVG title.', - table: { - category: 'Accessibility', - }, - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta<typeof SunIcon>; - -const Template: ComponentStory<typeof SunIcon> = (args) => ( - <SunIcon {...args} /> -); - -/** - * Icons Stories - Sun - */ -export const Sun = Template.bind({}); diff --git a/src/components/atoms/icons/sun.test.tsx b/src/components/atoms/icons/sun.test.tsx deleted file mode 100644 index 2aa916b..0000000 --- a/src/components/atoms/icons/sun.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render } from '../../../../tests/utils'; -import { Sun } from './sun'; - -describe('Sun', () => { - it('renders a sun icon', () => { - const { container } = render(<Sun />); - expect(container).toBeDefined(); - }); -}); diff --git a/src/components/atoms/icons/sun.tsx b/src/components/atoms/icons/sun.tsx deleted file mode 100644 index 69a3044..0000000 --- a/src/components/atoms/icons/sun.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { FC, SVGAttributes } from 'react'; -import styles from './sun.module.scss'; - -export type SunProps = SVGAttributes<SVGElement> & { - /** - * The SVG title. - */ - title?: string; -}; - -/** - * Sun component. - * - * Render a svg sun icon. - */ -export const Sun: FC<SunProps> = ({ className = '', title, ...props }) => { - return ( - <svg - {...props} - className={`${styles.sun} ${className}`} - viewBox="0 0 100 100" - xmlns="http://www.w3.org/2000/svg" - > - {title !== 'undefined' && <title>{title}</title>} - <path d="M 69.398043,50.000437 A 19.399259,19.399204 0 0 1 49.998784,69.399641 19.399259,19.399204 0 0 1 30.599525,50.000437 19.399259,19.399204 0 0 1 49.998784,30.601234 19.399259,19.399204 0 0 1 69.398043,50.000437 Z m 27.699233,1.125154 c 2.657696,0.0679 1.156196,12.061455 -1.435545,11.463959 L 80.113224,59.000697 c -2.589801,-0.597494 -1.625657,-8.345536 1.032041,-8.278609 z m -18.06653,37.251321 c 1.644087,2.091234 -9.030355,8.610337 -10.126414,6.188346 L 62.331863,80.024585 c -1.096058,-2.423931 5.197062,-6.285342 6.839209,-4.194107 z M 38.611418,97.594444 C 38.02653,100.18909 26.24148,95.916413 27.436475,93.54001 l 7.168026,-14.256474 c 1.194024,-2.376403 8.102101,0.151313 7.517214,2.744986 z M 6.1661563,71.834242 C 3.7916868,73.028262 -0.25499873,61.16274 2.3386824,60.577853 L 17.905618,57.067567 c 2.593681,-0.584886 4.894434,6.403678 2.518995,7.598668 z M 6.146757,30.055146 c -2.3764094,-1.194991 4.46571,-11.714209 6.479353,-9.97798 l 12.090589,10.414462 c 2.014613,1.736229 -1.937017,7.926514 -4.314396,6.731524 z M 38.56777,4.2639045 C 37.982883,1.6682911 50.480855,0.41801247 50.415868,3.0766733 L 50.020123,19.028638 c -0.06596,2.657691 -7.357169,3.394862 -7.943027,0.800218 z m 40.403808,9.1622435 c 1.635357,-2.098023 10.437771,6.872168 8.339742,8.506552 l -12.58818,9.805327 c -2.099,1.634383 -7.192276,-3.626682 -5.557888,-5.724706 z M 97.096306,50.69105 c 2.657696,-0.06596 1.164926,12.462047 -1.425846,11.863582 L 80.122924,58.96578 c -2.590771,-0.597496 -1.636327,-7.814 1.021371,-7.879957 z" /> - </svg> - ); -}; diff --git a/src/components/atoms/icons/hamburger.module.scss b/src/components/atoms/images/icons/hamburger-icon/hamburger-icon.module.scss index c92b3ab..8b8ad7e 100644 --- a/src/components/atoms/icons/hamburger.module.scss +++ b/src/components/atoms/images/icons/hamburger-icon/hamburger-icon.module.scss @@ -1,21 +1,20 @@ -@use "../../../styles/abstracts/functions" as fun; +@use "../../../../../styles/abstracts/functions" as fun; .wrapper { display: flex; align-items: center; - width: var(--icon-size, #{fun.convert-px(50)}); - height: var(--icon-size, #{fun.convert-px(50)}); + aspect-ratio: 1/1; position: relative; } .icon { + width: 100%; + &, &::before, &::after { display: block; - height: fun.convert-px(7); - width: 100%; - position: absolute; + height: 20%; background: var(--color-primary-lighter); background-image: linear-gradient( to right, @@ -23,20 +22,24 @@ var(--color-primary-lighter) 100% ); border: fun.convert-px(1) solid var(--color-primary-darker); - border-radius: fun.convert-px(3); - transition: all 0.25s ease-in-out 0s, transform 0.4s ease-in 0s; + border-radius: fun.convert-px(4); + transition: + all 0.25s ease-in-out 0s, + transform 0.4s ease-in 0s; } &::before, &::after { content: ""; + position: absolute; + inset-inline: 0; } &::before { - top: fun.convert-px(-15); + top: 3%; } &::after { - bottom: fun.convert-px(-15); + bottom: 3%; } } diff --git a/src/components/atoms/images/icons/hamburger-icon/hamburger-icon.tsx b/src/components/atoms/images/icons/hamburger-icon/hamburger-icon.tsx new file mode 100644 index 0000000..edd25ba --- /dev/null +++ b/src/components/atoms/images/icons/hamburger-icon/hamburger-icon.tsx @@ -0,0 +1,25 @@ +import type { FC, HTMLAttributes } from 'react'; +import styles from './hamburger-icon.module.scss'; + +export type HamburgerIconProps = Omit< + HTMLAttributes<HTMLSpanElement>, + 'children' +>; + +/** + * HamburgerIcon component + * + * Render a Hamburger icon. + */ +export const HamburgerIcon: FC<HamburgerIconProps> = ({ + className = '', + ...props +}) => { + const wrapperClass = `${styles.wrapper} ${className}`; + + return ( + <span {...props} className={wrapperClass}> + <span className={styles.icon} /> + </span> + ); +}; diff --git a/src/components/atoms/images/icons/hamburger-icon/index.ts b/src/components/atoms/images/icons/hamburger-icon/index.ts new file mode 100644 index 0000000..a601d0c --- /dev/null +++ b/src/components/atoms/images/icons/hamburger-icon/index.ts @@ -0,0 +1 @@ +export * from './hamburger-icon'; diff --git a/src/components/atoms/images/icons/icon.module.scss b/src/components/atoms/images/icons/icon.module.scss new file mode 100644 index 0000000..72eb611 --- /dev/null +++ b/src/components/atoms/images/icons/icon.module.scss @@ -0,0 +1,53 @@ +@use "../../../../styles/abstracts/functions" as fun; + +.icon { + width: var(--icon-size); + transition: all 0.25s ease-in-out 0s; + + &--arrow { + fill: var(--color-primary); + } + + &--cc-by-sa { + width: calc(var(--icon-size) * 2); + fill: var(--color-fg); + } + + &--cog, + &--home, + &--moon, + &--sun { + stroke-width: 4; + } + + &--cog, + &--moon, + &--sun { + fill: var(--color-primary-lighter); + stroke: var(--color-primary-darker); + } + + &--stroke { + stroke: var(--color-primary); + } + + &--xs { + --icon-size: var(--icon-size-xs); + } + + &--sm { + --icon-size: var(--icon-size-sm); + } + + &--md { + --icon-size: var(--icon-size-md); + } + + &--lg { + --icon-size: var(--icon-size-lg); + } + + &--xl { + --icon-size: var(--icon-size-xl); + } +} diff --git a/src/components/atoms/images/icons/icon.stories.tsx b/src/components/atoms/images/icons/icon.stories.tsx new file mode 100644 index 0000000..fa8d2b5 --- /dev/null +++ b/src/components/atoms/images/icons/icon.stories.tsx @@ -0,0 +1,201 @@ +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Icon, type IconProps, type IconShape } from './icon'; + +/** + * Home icon - Storybook Meta + */ +export default { + title: 'Atoms/Images/Icons', + component: Icon, + argTypes: { + shape: { + control: { + type: 'select', + }, + options: [ + 'arrow', + 'career', + 'cc-by-sa', + 'cog', + 'computer', + 'cross', + 'envelop', + 'feed', + 'hamburger', + 'home', + 'magnifying-glass', + 'minus', + 'moon', + 'posts-stack', + 'plus', + 'sun', + ], + description: 'Define the icon shape.', + type: { + name: 'string', + required: false, + }, + }, + }, +} as ComponentMeta<typeof Icon>; + +const Template: ComponentStory<typeof Icon> = ({ + shape, + ...args +}: IconProps<IconShape>) => <Icon {...args} shape={shape} />; + +/** + * Icon Stories - ArrowRight + */ +export const ArrowRight = Template.bind({}); +ArrowRight.args = { + orientation: 'right', + shape: 'arrow', +}; + +/** + * Icon Stories - ArrowLeft + */ +export const ArrowLeft = Template.bind({}); +ArrowLeft.args = { + orientation: 'left', + shape: 'arrow', +}; + +/** + * Icon Stories - ArrowBottom + */ +export const ArrowBottom = Template.bind({}); +ArrowBottom.args = { + orientation: 'bottom', + shape: 'arrow', +}; + +/** + * Icon Stories - ArrowTop + */ +export const ArrowTop = Template.bind({}); +ArrowTop.args = { + orientation: 'top', + shape: 'arrow', +}; + +/** + * Icon Stories - Career + */ +export const Career = Template.bind({}); +Career.args = { + shape: 'career', +}; + +/** + * Icon Stories - CCBySA + */ +export const CCBySA = Template.bind({}); +CCBySA.args = { + shape: 'cc-by-sa', +}; + +/** + * Icon Stories - Cog + */ +export const Cog = Template.bind({}); +Cog.args = { + shape: 'cog', +}; + +/** + * Icon Stories - Computer + */ +export const Computer = Template.bind({}); +Computer.args = { + shape: 'computer', +}; + +/** + * Icon Stories - Cross + */ +export const Cross = Template.bind({}); +Cross.args = { + shape: 'cross', +}; + +/** + * Icon Stories - Envelop + */ +export const Envelop = Template.bind({}); +Envelop.args = { + shape: 'envelop', +}; + +/** + * Icon Stories - Feed + */ +export const Feed = Template.bind({}); +Feed.args = { + shape: 'feed', +}; + +/** + * Icon Stories - Hamburger + */ +export const Hamburger = Template.bind({}); +Hamburger.args = { + shape: 'hamburger', +}; + +/** + * Icon Stories - Home + */ +export const Home = Template.bind({}); +Home.args = { + shape: 'home', +}; + +/** + * Icon Stories - MagnifyingGlass + */ +export const MagnifyingGlass = Template.bind({}); +MagnifyingGlass.args = { + shape: 'magnifying-glass', +}; + +/** + * Icon Stories - Minus + */ +export const Minus = Template.bind({}); +Minus.args = { + shape: 'minus', +}; + +/** + * Icon Stories - Moon + */ +export const Moon = Template.bind({}); +Moon.args = { + shape: 'moon', +}; + +/** + * Icon Stories - Plus + */ +export const Plus = Template.bind({}); +Plus.args = { + shape: 'plus', +}; + +/** + * Icon Stories - PostsStack + */ +export const PostsStack = Template.bind({}); +PostsStack.args = { + shape: 'posts-stack', +}; + +/** + * Icon Stories - Sun + */ +export const Sun = Template.bind({}); +Sun.args = { + shape: 'sun', +}; diff --git a/src/components/atoms/images/icons/icon.test.tsx b/src/components/atoms/images/icons/icon.test.tsx new file mode 100644 index 0000000..d80edd7 --- /dev/null +++ b/src/components/atoms/images/icons/icon.test.tsx @@ -0,0 +1,182 @@ +/* eslint-disable max-statements */ +import { describe, expect, it } from '@jest/globals'; +import { render, screen as rtlScreen } from '@testing-library/react'; +import { Icon } from './icon'; + +/* eslint-disable jsx-a11y/prefer-tag-over-role -- Valid on SVG */ +describe('Icon', () => { + it('can render an icon with a heading', () => { + const heading = 'architecto'; + + render(<Icon heading={heading} shape="arrow" role="img" />); + + expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument(); + }); + + it('can render an icon with a description', () => { + const description = 'fuga voluptates eligendi'; + + render(<Icon description={description} shape="arrow" role="img" />); + + expect(rtlScreen.getByRole('img')).toHaveTextContent(description); + }); + + it('render an icon with bottom arrow shape', () => { + const heading = 'quae'; + + render( + <Icon heading={heading} orientation="bottom" shape="arrow" role="img" /> + ); + + expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument(); + }); + + it('render an icon with left arrow shape', () => { + const heading = 'nemo'; + + render( + <Icon heading={heading} orientation="left" shape="arrow" role="img" /> + ); + + expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument(); + }); + + it('render an icon with right arrow shape', () => { + const heading = 'odit'; + + render( + <Icon heading={heading} orientation="right" shape="arrow" role="img" /> + ); + + expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument(); + }); + + it('render an icon with top arrow shape', () => { + const heading = 'ut'; + + render( + <Icon heading={heading} orientation="top" shape="arrow" role="img" /> + ); + + expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument(); + }); + + it('render an icon with career shape', () => { + const heading = 'autem'; + + render(<Icon heading={heading} shape="career" role="img" />); + + expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument(); + }); + + it('render an icon with cc-by-sa shape', () => { + const heading = 'blanditiis'; + + render(<Icon heading={heading} shape="cc-by-sa" role="img" />); + + expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument(); + }); + + it('render an icon with cog shape', () => { + const heading = 'consequatur'; + + render(<Icon heading={heading} shape="cog" role="img" />); + + expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument(); + }); + + it('render an icon with computer shape', () => { + const heading = 'amet'; + + render(<Icon heading={heading} shape="computer" role="img" />); + + expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument(); + }); + + it('render an icon with cross shape', () => { + const heading = 'molestias'; + + render(<Icon heading={heading} shape="cross" role="img" />); + + expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument(); + }); + + it('render an icon with envelop shape', () => { + const heading = 'laudantium'; + + render(<Icon heading={heading} shape="envelop" role="img" />); + + expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument(); + }); + it('render an icon with feed shape', () => { + const heading = 'beatae'; + + render(<Icon heading={heading} shape="feed" role="img" />); + + expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument(); + }); + + it('render an icon with home shape', () => { + const heading = 'aut'; + + render(<Icon heading={heading} shape="home" role="img" />); + + expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument(); + }); + + it('render an icon with magnifying glass shape', () => { + const heading = 'rerum'; + + render(<Icon heading={heading} shape="magnifying-glass" role="img" />); + + expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument(); + }); + + it('render an icon with moon shape', () => { + const heading = 'saepe'; + + render(<Icon heading={heading} shape="moon" role="img" />); + + expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument(); + }); + + it('render an icon with posts stack shape', () => { + const heading = 'sunt'; + + render(<Icon heading={heading} shape="posts-stack" role="img" />); + + expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument(); + }); + + it('render an icon with sun shape', () => { + const heading = 'aut'; + + render(<Icon heading={heading} shape="sun" role="img" />); + + expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument(); + }); + + it('render an icon with hamburger shape', () => { + const heading = 'sed'; + + render(<Icon aria-label={heading} shape="hamburger" role="img" />); + + expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument(); + }); + + it('render an icon with minus shape', () => { + const heading = 'sunt'; + + render(<Icon aria-label={heading} shape="minus" role="img" />); + + expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument(); + }); + + it('render an icon with plus shape', () => { + const heading = 'maxime'; + + render(<Icon aria-label={heading} shape="plus" role="img" />); + + expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument(); + }); +}); diff --git a/src/components/atoms/images/icons/icon.tsx b/src/components/atoms/images/icons/icon.tsx new file mode 100644 index 0000000..23170d9 --- /dev/null +++ b/src/components/atoms/images/icons/icon.tsx @@ -0,0 +1,126 @@ +import type { SVGAttributes } from 'react'; +import { HamburgerIcon, type HamburgerIconProps } from './hamburger-icon'; +import styles from './icon.module.scss'; +import { + PlusMinusIcon, + type PlusMinusIconProps, + type PlusMinusIconShape, +} from './plus-minus-icon'; +import { type SVGIconShape, SVGPaths, type SVGPathsProps } from './svg-paths'; + +export type IconShape = SVGIconShape | PlusMinusIconShape | 'hamburger'; + +export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; + +type SVGIconProps = Omit< + SVGAttributes<SVGElement>, + 'children' | 'viewBox' | 'xmlns' +> & { + /** + * Describe the icon. + */ + description?: string; + /** + * Define an accessible title for the icon. + */ + heading?: string; +}; + +type IconBaseProps<T extends IconShape> = T extends 'hamburger' + ? HamburgerIconProps + : T extends 'minus' | 'plus' + ? PlusMinusIconProps + : SVGIconProps; + +type AdditionalProps<T extends IconShape> = Pick< + SVGPathsProps, + 'orientation' +> & { + /** + * The icon shape. + */ + shape: T; + /** + * The icon size. + * + * @default 'md' + */ + size?: IconSize; +}; + +export type IconProps<T extends IconShape> = IconBaseProps<T> & + Pick<SVGPathsProps, 'orientation'> & + AdditionalProps<T>; + +type BuildClassNameConfig<T extends IconShape> = Pick< + IconProps<T>, + 'className' +> & + Pick<AdditionalProps<T>, 'shape' | 'size'>; + +const buildClassName = <T extends IconShape>({ + className, + shape, + size, +}: BuildClassNameConfig<T>) => { + const classNames = ['icon', `icon--${shape}`, `icon--${size}`].map( + (key) => styles[key] + ); + + if (className) classNames.push(className); + + return classNames.join(' '); +}; + +type ExtractedProps = 'className' | 'orientation' | 'shape' | 'size'; + +export const Icon = <T extends IconShape>({ + className = '', + orientation, + shape, + size = 'md', + ...props +}: IconProps<T>) => { + const iconClass = buildClassName({ className, shape, size }); + + if (shape === 'hamburger') + return ( + <HamburgerIcon + // Without casting Typescript complains because of props generic type + {...(props as Omit<IconProps<'hamburger'>, ExtractedProps>)} + className={iconClass} + /> + ); + + if (shape === 'minus' || shape === 'plus') + return ( + <PlusMinusIcon + // Without casting Typescript complains because of props generic type + {...(props as Omit<IconProps<'minus' | 'plus'>, ExtractedProps>)} + className={iconClass} + shape={shape} + /> + ); + + const viewBox = shape === 'cc-by-sa' ? '0 0 100 40' : '0 0 100 100'; + + // Without casting Typescript complains because of props generic type + const { heading, description, ...remainingProps } = props as Omit< + IconProps<SVGIconShape>, + ExtractedProps + >; + + return ( + <svg + {...remainingProps} + className={iconClass} + viewBox={viewBox} + // eslint-disable-next-line react/jsx-no-literals + xmlns="http://www.w3.org/2000/svg" + > + {heading ? <title>{heading}</title> : null} + {description ? <desc>{description}</desc> : null} + <SVGPaths orientation={orientation} shape={shape} /> + </svg> + ); +}; diff --git a/src/components/atoms/images/icons/index.ts b/src/components/atoms/images/icons/index.ts new file mode 100644 index 0000000..af77d84 --- /dev/null +++ b/src/components/atoms/images/icons/index.ts @@ -0,0 +1 @@ +export * from './icon'; diff --git a/src/components/atoms/images/icons/plus-minus-icon/index.ts b/src/components/atoms/images/icons/plus-minus-icon/index.ts new file mode 100644 index 0000000..acca727 --- /dev/null +++ b/src/components/atoms/images/icons/plus-minus-icon/index.ts @@ -0,0 +1 @@ +export * from './plus-minus-icon'; diff --git a/src/components/atoms/icons/plus-minus.module.scss b/src/components/atoms/images/icons/plus-minus-icon/plus-minus-icon.module.scss index b46b5ba..07550c9 100644 --- a/src/components/atoms/icons/plus-minus.module.scss +++ b/src/components/atoms/images/icons/plus-minus-icon/plus-minus-icon.module.scss @@ -1,11 +1,10 @@ -@use "../../../styles/abstracts/functions" as fun; +@use "../../../../../styles/abstracts/functions" as fun; .icon { display: flex; place-content: center; place-items: center; - width: var(--icon-size, #{fun.convert-px(30)}); - height: var(--icon-size, #{fun.convert-px(30)}); + aspect-ratio: 1/1; position: relative; background: var(--color-bg); border: fun.convert-px(1) solid var(--color-primary); @@ -26,7 +25,7 @@ } &::before { - height: 60%; + height: 55%; width: fun.convert-px(3); transform: scaleY(1); } diff --git a/src/components/atoms/images/icons/plus-minus-icon/plus-minus-icon.tsx b/src/components/atoms/images/icons/plus-minus-icon/plus-minus-icon.tsx new file mode 100644 index 0000000..ed6bcf2 --- /dev/null +++ b/src/components/atoms/images/icons/plus-minus-icon/plus-minus-icon.tsx @@ -0,0 +1,30 @@ +import type { FC, HTMLAttributes } from 'react'; +import styles from './plus-minus-icon.module.scss'; + +export type PlusMinusIconShape = 'minus' | 'plus'; + +export type PlusMinusIconProps = Omit< + HTMLAttributes<HTMLDivElement>, + 'children' +> & { + /** + * Which shape should be displayed. + */ + shape: PlusMinusIconShape; +}; + +/** + * PlusMinusIcon component + * + * Render a plus or a minus icon. + */ +export const PlusMinusIcon: FC<PlusMinusIconProps> = ({ + className = '', + shape, + ...props +}) => { + const shapeClass = styles[`icon--${shape}`]; + const iconClass = `${styles.icon} ${shapeClass} ${className}`; + + return <div {...props} className={iconClass} />; +}; diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/arrow-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/arrow-icon-paths.tsx new file mode 100644 index 0000000..ee29d5d --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/arrow-icon-paths.tsx @@ -0,0 +1,51 @@ +/* eslint-disable react/jsx-no-literals */ +import type { FC } from 'react'; + +export type ArrowOrientation = 'top' | 'right' | 'bottom' | 'left'; + +const getArrowBarPathFrom = (orientation: ArrowOrientation) => { + switch (orientation) { + case 'bottom': + return 'm 55.749998,2e-6 v 61.764896 h -11.5 V 2e-6 Z'; + case 'left': + return 'M 99.999996,44.25 H 38.2351 v 11.5 h 61.764896 z'; + case 'right': + return 'm 0,44.25 h 61.764896 v 11.5 H 0 Z'; + case 'top': + default: + return 'M 55.749998,99.999998 V 38.235102 h -11.5 v 61.764896 z'; + } +}; + +const getArrowHeadPathFrom = (orientation: ArrowOrientation) => { + switch (orientation) { + case 'bottom': + return 'm 69.999998,61.764898 -20,38.2351 -20,-38.2351 z'; + case 'left': + return 'M 38.2351,30 0,50 38.2351,70 Z'; + case 'right': + return 'm 61.764896,30 38.2351,20 -38.2351,20 z'; + case 'top': + default: + return 'm 69.999998,38.235102 -20,-38.2351 -20,38.2351 z'; + } +}; + +export type ArrowProps = { + /** + * The arrow orientation. + */ + orientation: ArrowOrientation; +}; + +/** + * ArrowIconPaths + * + * Render the svg paths to make an arrow icon. + */ +export const ArrowIconPaths: FC<ArrowProps> = ({ orientation }) => ( + <> + <path className="arrow-head" d={getArrowHeadPathFrom(orientation)} /> + <path className="arrow-bar" d={getArrowBarPathFrom(orientation)} /> + </> +); diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/career-icon-paths.module.scss b/src/components/atoms/images/icons/svg-paths/icons-paths/career-icon-paths.module.scss new file mode 100644 index 0000000..f93e73a --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/career-icon-paths.module.scss @@ -0,0 +1,43 @@ +.bottom, +.diploma, +.lines, +.top { + stroke-width: 4; +} + +.bottom, +.diploma, +.handle, +.lock, +.seal, +.top { + stroke: var(--color-primary-darker); +} + +.bottom { + fill: var(--color-primary); +} + +.diploma, +.lock { + fill: var(--color-bg); +} + +.handle, +.seal, +.top { + fill: var(--color-primary-lighter); +} + +.handle, +.lock { + stroke-width: 3; +} + +.lines { + fill: var(--color-fg); +} + +.seal { + stroke-width: 2; +} diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/career-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/career-icon-paths.tsx new file mode 100644 index 0000000..8fbaa12 --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/career-icon-paths.tsx @@ -0,0 +1,57 @@ +/* eslint-disable react/jsx-no-literals */ +import type { FC } from 'react'; +import styles from './career-icon-paths.module.scss'; + +/** + * CareerIconPaths + * + * Render the svg paths to make a career icon. + */ +export const CareerIconPaths: FC = () => ( + <> + <path + className={styles.bottom} + d="M 0.72670447,19.813041 H 77.467597 v 54.36591 H 0.72670447 Z" + /> + <path + className={styles.handle} + d="m 22.263958,10.17849 c 12.6493,-1.81512 21.613185,-1.732794 33.666442,0 l 1.683339,10.99517 h -5.891624 v -5.474639 c -7.949741,-2.722434 -16.311959,-2.706359 -25.249837,0 v 5.474639 h -5.891625 z" + /> + <path + className={styles.top} + d="M 0.72670447,19.813041 H 77.467597 V 51.17622 H 0.72670447 Z" + /> + <path + className={styles.diploma} + d="M 44.217117,47.159906 H 98.921356 V 82.664122 H 44.217117 Z" + /> + <path + className={styles.seal} + d="m 84.933665,80.775336 h 6.957554 V 90.992144 L 88.412426,87.2244 84.933665,90.992144 Z" + /> + <path + className={styles.seal} + d="m 93.326919,76.83334 a 4.914472,4.9188584 0 0 1 -4.914493,4.918858 4.914472,4.9188584 0 0 1 -4.914461,-4.918858 4.914472,4.9188584 0 0 1 4.914461,-4.918858 4.914472,4.9188584 0 0 1 4.914493,4.918858 z" + /> + <path + className={styles.lines} + d="m 54.53557,60.491974 h 34.067282 v 1.515453 H 54.53557 Z" + /> + <path + className={styles.lines} + d="m 54.53557,67.437763 h 34.067282 v 1.515453 H 54.53557 Z" + /> + <path + className={styles.lines} + d="m 54.53557,74.383628 h 17.563315 v 1.515454 H 54.53557 Z" + /> + <path + className={styles.lines} + d="m 63.495911,53.546123 h 16.146628 v 1.515452 H 63.495911 Z" + /> + <path + className={styles.lock} + d="M 34.048314,42.893007 H 44.145988 V 57.849688 H 34.048314 Z" + /> + </> +); diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/cc-by-sa-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/cc-by-sa-icon-paths.tsx new file mode 100644 index 0000000..5961d92 --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/cc-by-sa-icon-paths.tsx @@ -0,0 +1,20 @@ +/* eslint-disable react/jsx-no-literals */ +import type { FC } from 'react'; + +/** + * CCBySAIconPaths + * + * Render the svg paths to make a CC-BY-SA icon. + */ +export const CCBySAIconPaths: FC = () => ( + <> + <path d="m 82.802205,12.372338 c 0,-1.418881 0.700478,-2.129264 2.102849,-2.129264 1.402371,0 2.102377,0.70944 2.102377,2.129264 0,1.401427 -0.700949,2.102377 -2.102377,2.102377 -1.401427,0 -2.102849,-0.70095 -2.102849,-2.102377 z" /> + <path d="m 88.975373,16.253505 v 6.172224 H 87.25083 v 7.331198 h -4.690608 v -7.330726 h -1.724544 v -6.172696 c 0,-0.269814 0.09434,-0.49859 0.28255,-0.687271 0.189153,-0.188209 0.4184,-0.283021 0.68727,-0.283021 h 6.200055 c 0.251418,0 0.47642,0.09434 0.673591,0.283021 0.1967,0.188681 0.296229,0.417929 0.296229,0.687271 z" /> + <path d="m 84.878809,4.905526 c -4.169377,0 -7.708404,1.455113 -10.619751,4.366932 C 71.294409,12.291353 69.811052,15.867416 69.811052,20 c 0,4.133056 1.483357,7.681348 4.448006,10.646469 3.000499,2.965121 6.539997,4.448005 10.619751,4.448005 4.150508,0 7.752951,-1.50092 10.807695,-4.502361 C 98.562001,27.771333 100,24.241076 100,20 100,15.777321 98.534676,12.201729 95.606348,9.272458 92.695001,6.361111 89.118469,4.905526 84.878809,4.905526 Z m 0.05343,2.722423 c 3.414181,0 6.325372,1.203902 8.732941,3.61147 2.407097,2.408512 3.611471,5.327554 3.611471,8.75966 0,3.486352 -1.185846,6.370694 -3.558036,8.652789 -2.497664,2.462758 -5.427365,3.692545 -8.787296,3.692545 -3.378332,0 -6.289056,-1.221465 -8.732946,-3.665827 -2.443418,-2.442475 -3.664905,-5.335182 -3.664905,-8.677665 0,-3.324086 1.230261,-6.24452 3.692547,-8.76058 2.372191,-2.407569 5.274118,-3.612392 8.706224,-3.612392 z" /> + <path d="m 43.395931,17.695499 c 0.287267,-1.85096 1.032557,-3.283992 2.236813,-4.299095 1.203784,-1.015104 2.667946,-1.522656 4.393433,-1.522656 2.371248,0 4.259,0.764158 5.660428,2.290587 1.401428,1.527372 2.102377,3.486352 2.102377,5.875996 0,2.318417 -0.727837,4.245321 -2.182566,5.781183 -1.456617,1.535863 -3.342483,2.304738 -5.661372,2.304738 -1.70709,0 -3.180687,-0.511797 -4.42032,-1.536335 -1.240106,-1.024537 -1.985395,-2.479739 -2.237284,-4.366548 h 3.801449 c 0.08962,1.833035 1.19482,2.749553 3.315593,2.749553 1.059444,0 1.913697,-0.458495 2.560401,-1.374541 0.647647,-0.916046 0.971235,-2.138698 0.971235,-3.665598 0,-1.599543 -0.296701,-2.816535 -0.889159,-3.652391 -0.593402,-0.835385 -1.44624,-1.253313 -2.561344,-1.253313 -2.013225,0 -3.144839,0.889158 -3.396255,2.667948 h 1.105197 l -2.991534,2.992008 -2.992008,-2.992008 z" /> + <path d="m 49.97328,4.905526 c -4.150978,0 -7.690953,1.464827 -10.619748,4.39457 -2.964649,3.018895 -4.448007,6.586166 -4.448007,10.700825 0,4.133528 1.483358,7.680899 4.448007,10.645548 3.000498,2.965121 6.539997,4.448005 10.619748,4.448005 4.167962,0 7.771348,-1.491677 10.807696,-4.474722 C 63.656473,27.762651 65.094472,24.223623 65.094472,20 c 0,-4.222679 -1.465325,-7.789478 -4.393653,-10.700825 C 57.771076,6.369904 54.195488,4.905526 49.97328,4.905526 Z m 0.05344,2.722423 c 3.431634,0 6.342825,1.212201 8.732941,3.639109 2.407097,2.371719 3.611471,5.283383 3.611471,8.732942 0,3.468427 -1.185846,6.352769 -3.558037,8.65279 -2.497663,2.461814 -5.427364,3.692544 -8.787295,3.692544 -3.37833,0 -6.289054,-1.221465 -8.732944,-3.665827 C 38.849433,26.253542 37.627946,23.360879 37.627946,20 c 0,-3.323614 1.230261,-6.234806 3.692547,-8.732942 2.372191,-2.425965 5.274118,-3.639109 8.706222,-3.639109 z" /> + <path d="m 15.067296,4.905527 c -4.186958,0 -7.7182442,1.465367 -10.5933571,4.393783 C 3.0186925,10.755028 1.9089114,12.403834 1.1452027,14.245887 0.38149397,16.087941 0,18.005571 0,20.000462 c 0,2.012815 0.37755761,3.926511 1.132304,5.741678 0.7547477,1.815163 1.8552632,3.445936 3.3020181,4.892218 1.4467549,1.446282 3.0823798,2.551679 4.9060381,3.314917 1.8241278,0.764653 3.7334388,1.145198 5.7278558,1.145198 1.994419,0 3.926643,-0.385427 5.795113,-1.158099 1.869418,-0.772672 3.540664,-1.88823 5.013832,-3.343474 1.418928,-1.383545 2.493084,-2.978691 3.220944,-4.784424 0.726912,-1.805262 1.090845,-3.741421 1.090845,-5.808014 0,-2.048665 -0.369235,-3.984805 -1.105586,-5.808934 -0.736822,-1.823656 -1.814917,-3.446104 -3.23384,-4.8655 C 22.884786,6.379214 19.289631,4.905527 15.067296,4.905527 Z m 0.05436,2.722507 c 3.414285,0 6.334316,1.213182 8.761767,3.63922 1.167029,1.168914 2.056377,2.498676 2.666307,3.990245 0.610873,1.491566 0.916715,3.072594 0.916715,4.743882 0,3.469008 -1.176637,6.352963 -3.530503,8.653059 -1.22269,1.185892 -2.591561,2.092759 -4.110018,2.722505 -1.520343,0.62927 -3.087225,0.942508 -4.704268,0.942508 -1.635442,0 -3.199353,-0.309776 -4.690448,-0.929612 C 8.9386948,30.769062 7.6010602,29.87146 6.4151652,28.694053 5.2287976,27.517123 4.317072,26.178564 3.6788394,24.677093 3.0401347,23.177504 2.7215865,21.618901 2.7215865,20.001381 c 0,-1.635439 0.3185482,-3.203736 0.9572529,-4.704263 C 4.3166012,13.796585 5.2287976,12.444829 6.4151652,11.240537 8.7695027,8.832893 11.671519,7.628034 15.121655,7.628034 Z" /> + <path d="m 23.639141,17.494232 -1.99489,1.051457 C 21.428674,18.097086 21.1631,17.78198 20.848937,17.602256 c -0.315106,-0.179251 -0.616534,-0.269351 -0.902866,-0.269351 -1.347696,0 -2.022249,0.889187 -2.022249,2.6685 0,0.808526 0.171228,1.454777 0.512282,1.940173 0.341051,0.485396 0.843904,0.728332 1.509967,0.728332 0.879753,0 1.50006,-0.431622 1.859035,-1.293922 l 1.886866,0.943438 c -0.412749,0.737289 -0.97032,1.316559 -1.67035,1.738746 -0.700968,0.422655 -1.464678,0.633515 -2.291129,0.633515 -1.366087,0 -2.457168,-0.412753 -3.274184,-1.240143 -0.818899,-0.826446 -1.227403,-1.976494 -1.227403,-3.449667 0,-1.437791 0.417466,-2.578401 1.253823,-3.423248 0.834936,-0.844371 1.890639,-1.26703 3.166632,-1.26703 1.868941,-9.43e-4 3.199655,0.726917 3.98978,2.182633 z" /> + <path d="m 14.932663,17.494232 -2.022248,1.051457 c -0.216046,-0.448603 -0.480679,-0.763709 -0.794841,-0.943433 -0.314637,-0.179251 -0.606629,-0.269351 -0.87645,-0.269351 -1.3472231,0 -2.0217777,0.889187 -2.0217777,2.6685 0,0.808526 0.1707629,1.454777 0.5118107,1.940173 0.341524,0.485396 0.844845,0.728332 1.509967,0.728332 0.880695,0 1.50053,-0.431622 1.860449,-1.293922 l 1.85951,0.943438 c -0.395301,0.737289 -0.943435,1.316559 -1.644407,1.738746 -0.700026,0.422655 -1.47317,0.633515 -2.318015,0.633515 -1.3476953,0 -2.4354738,-0.412753 -3.2619218,-1.240143 -0.8264474,-0.826446 -1.2396714,-1.976494 -1.2396714,-3.449667 0,-1.437791 0.4179415,-2.578401 1.2533513,-3.423248 0.8354103,-0.844371 1.8911135,-1.26703 3.1675779,-1.26703 1.869414,-9.43e-4 3.207674,0.726917 4.016666,2.182633 z" /> + </> +); diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/cog-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/cog-icon-paths.tsx new file mode 100644 index 0000000..1ff9e3c --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/cog-icon-paths.tsx @@ -0,0 +1,14 @@ +/* eslint-disable react/jsx-no-literals */ +import type { FC } from 'react'; + +/** + * CogIconPaths component + * + * Render the svg paths to make a cog icon. + */ +export const CogIconPaths: FC = () => ( + <> + <path d="m 71.782287,3.1230469 c -1.164356,0 -2.3107,0.076326 -3.435131,0.2227895 L 66.33766,9.1021499 C 64.651951,9.5517047 63.049493,10.204637 61.558109,11.033725 L 56.112383,8.2889128 c -1.970928,1.4609237 -3.730521,3.1910632 -5.22513,5.1351362 l 2.648234,5.494014 c -0.855644,1.477262 -1.537042,3.067161 -2.016082,4.743334 l -5.791433,1.911821 c -0.188001,1.269731 -0.286444,2.568579 -0.286444,3.890587 0,1.164355 0.07633,2.310701 0.222789,3.435131 l 5.756315,2.009497 c 0.449555,1.685708 1.102486,3.288168 1.931575,4.779551 l -2.744813,5.445725 c 1.460924,1.970927 3.191063,3.730521 5.135137,5.22513 l 5.494014,-2.648233 c 1.477261,0.85564 3.067161,1.537039 4.743334,2.016081 L 67.8917,55.51812 c 1.26973,0.188002 2.568578,0.286444 3.890587,0.286444 1.16565,0 2.313889,-0.07601 3.43952,-0.222789 l 2.008399,-5.756314 c 1.684332,-0.449523 3.285984,-1.103103 4.776259,-1.931575 l 5.445725,2.744812 c 1.970928,-1.460924 3.730521,-3.191061 5.22513,-5.135136 l -2.648233,-5.494015 c 0.85564,-1.477262 1.537039,-3.067161 2.016082,-4.743334 l 5.79253,-1.91182 c 0.187995,-1.269731 0.285346,-2.56858 0.285346,-3.890588 0,-1.16565 -0.07601,-2.313889 -0.222789,-3.439521 L 92.143942,24.015886 C 91.694419,22.331554 91.04084,20.729903 90.212367,19.239628 l 2.744812,-5.445726 C 91.496255,11.822973 89.766118,10.063381 87.822043,8.5687715 L 82.328028,11.217006 C 80.850766,10.361361 79.260867,9.6799641 77.584694,9.2009234 L 75.672874,3.4094907 C 74.403143,3.2214898 73.104295,3.1230469 71.782287,3.1230469 Z m 0,15.0520191 a 11.288679,11.288679 0 0 1 11.288739,11.288739 11.288679,11.288679 0 0 1 -11.288739,11.28874 11.288679,11.288679 0 0 1 -11.28874,-11.28874 11.288679,11.288679 0 0 1 11.28874,-11.288739 z" /> + <path d="m 38.326115,25.84777 c -1.583642,0 -3.142788,0.103807 -4.672127,0.303016 l -2.73312,7.829173 c -2.292736,0.611441 -4.472242,1.499494 -6.500676,2.627139 L 17.01345,32.873874 c -2.680664,1.987004 -5.073889,4.340169 -7.1067095,6.984309 l 3.6018685,7.472418 c -1.163764,2.009226 -2.090533,4.171652 -2.742078,6.451418 l -7.8769382,2.60027 C 2.6338924,58.109252 2.5,59.875819 2.5,61.673885 c 0,1.583642 0.1038125,3.142788 0.3030165,4.672128 l 7.8291725,2.73312 c 0.611441,2.292734 1.499494,4.472243 2.627139,6.500673 L 9.5261037,82.98655 c 1.9870063,2.680661 4.3401703,5.07389 6.9843093,7.106709 l 7.472419,-3.601867 c 2.009226,1.16376 4.171651,2.090533 6.451418,2.742079 l 2.60027,7.876932 C 34.761483,97.366114 36.528049,97.5 38.326115,97.5 c 1.585404,0 3.147126,-0.103373 4.678099,-0.303015 l 2.731628,-7.829178 c 2.290862,-0.611397 4.469272,-1.500329 6.496197,-2.627132 l 7.406741,3.733224 c 2.680664,-1.987007 5.07389,-4.340171 7.10671,-6.984313 l -3.601866,-7.472415 c 1.163756,-2.00923 2.090529,-4.171655 2.742076,-6.45142 l 7.878431,-2.60027 c 0.255691,-1.726964 0.3881,-3.49353 0.3881,-5.291596 0,-1.585404 -0.103373,-3.147127 -0.303016,-4.678099 L 66.020041,54.264159 C 65.408645,51.973296 64.51971,49.794888 63.392903,47.767962 l 3.733224,-7.406742 c -1.987006,-2.680664 -4.340168,-5.073889 -6.984309,-7.10671 l -7.472419,3.601867 c -2.009228,-1.163762 -4.171651,-2.090533 -6.451418,-2.742076 l -2.60027,-7.876939 C 41.890748,25.981661 40.124181,25.84777 38.326115,25.84777 Z m 0,20.472278 A 15.353754,15.353754 0 0 1 53.679952,61.673885 15.353754,15.353754 0 0 1 38.326115,77.027724 15.353754,15.353754 0 0 1 22.972279,61.673885 15.353754,15.353754 0 0 1 38.326115,46.320048 Z" /> + </> +); diff --git a/src/components/atoms/icons/computer-screen.module.scss b/src/components/atoms/images/icons/svg-paths/icons-paths/computer-icon-paths.module.scss index fcc4002..479b8b7 100644 --- a/src/components/atoms/icons/computer-screen.module.scss +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/computer-icon-paths.module.scss @@ -1,22 +1,32 @@ -@use "../../../styles/abstracts/functions" as fun; - -.icon { - display: block; - width: var(--icon-size, #{fun.convert-px(40)}); -} - +.cursor, +.lines, .root, .separator, -.cursor, -.line, .text { fill: var(--color-fg); } +.contour, +.stand, +.screen { + stroke: var(--color-primary-dark); +} + +.contour, +.screen { + stroke-width: 3; +} + +.contour, .stand { fill: var(--color-primary-lighter); - stroke: var(--color-primary-dark); +} +.screen { + fill: var(--color-bg); +} + +.stand { &--top { stroke-width: 3; } @@ -25,15 +35,3 @@ stroke-width: 2; } } - -.screen { - fill: var(--color-bg); - stroke: var(--color-primary-dark); - stroke-width: 3; -} - -.contour { - fill: var(--color-primary-lighter); - stroke: var(--color-primary-dark); - stroke-width: 3; -} diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/computer-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/computer-icon-paths.tsx new file mode 100644 index 0000000..f581332 --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/computer-icon-paths.tsx @@ -0,0 +1,65 @@ +/* eslint-disable react/jsx-no-literals */ +import type { FC } from 'react'; +import styles from './computer-icon-paths.module.scss'; + +/** + * ComputerIconPaths + * + * Render the svg paths to make a computer icon. + */ +export const ComputerIconPaths: FC = () => ( + <> + <path + className={styles.contour} + d="M 1.0206528,11.991149 H 98.979347 V 78.466748 H 1.0206528 Z" + /> + <path + className={styles.screen} + d="M 6.2503581,18.032451 H 93.563283 V 71.12731 H 6.2503581 Z" + /> + <path + className={`${styles.stand} ${styles['stand--top']}`} + d="m 40.038268,78.939276 c 4.614714,2.7794 4.333151,10.099225 0,17.60572 H 50 59.961731 c -4.333151,-7.506495 -4.614715,-14.82632 0,-17.60572 H 50 Z" + /> + <path + className={`${styles.stand} ${styles['stand--bottom']}`} + d="m 31.084262,96.254656 h 37.831475 c 1.394769,0 2.517635,0.404907 2.517635,0.907864 v 1.179616 c 0,0.502956 -1.122866,0.907864 -2.517635,0.907864 H 31.084262 c -1.394769,0 -2.517635,-0.404908 -2.517635,-0.907864 V 97.16252 c 0,-0.502957 1.122866,-0.907864 2.517635,-0.907864 z" + /> + <path + className={styles.lines} + d="m 13.259277,26.737199 h 29.132596 v 2.567314 H 13.259277 Z" + /> + <path + className={styles.lines} + d="M 13.259277,36.439141 H 36.46805 v 2.567315 H 13.259277 Z" + /> + <path + className={styles.lines} + d="m 13.259277,46.141084 h 26.586812 v 2.567314 H 13.259277 Z" + /> + <path + className={styles.cursor} + d="m 18.443194,65.930804 h 4.417548 v 1 h -4.417548 z" + /> + <path + className={styles.text} + d="m 77.586096,42.217577 v -1.680914 l 6.160884,-2.39919 -6.160884,-2.406595 v -1.68832 l 7.604842,2.89532 v 2.38438 z" + /> + <path + className={styles.text} + d="m 68.396606,43.291289 6.07943,-11.136982 h 1.688318 l -6.049809,11.136982 z" + /> + <path + className={styles.text} + d="m 59.384832,39.322258 v -2.38438 l 7.604841,-2.89532 v 1.68832 l -6.168289,2.406595 6.168289,2.399191 v 1.680915 z" + /> + <path + className={styles.separator} + d="M 7.1079167,57.876372 H 92.892083 v 0.813634 H 7.1079167 Z" + /> + <path + className={styles.root} + d="m 17.042456,64.960616 q 0,0.632276 -0.426175,0.9816 -0.422681,0.345831 -1.254074,0.37727 v 0.611318 h -0.380763 v -0.600838 q -0.751047,-0.02795 -1.170236,-0.352818 -0.419189,-0.328364 -0.551931,-1.002559 l 0.89427,-0.164183 q 0.06637,0.394736 0.261992,0.579878 0.199115,0.181648 0.565905,0.216581 v -1.365857 q -0.01048,-0.007 -0.0524,-0.01398 -0.04192,-0.01048 -0.05589,-0.01048 -0.562412,-0.129244 -0.848857,-0.303907 -0.286445,-0.178155 -0.443642,-0.447135 -0.153701,-0.272472 -0.153701,-0.663715 0,-0.579878 0.394736,-0.894269 0.394736,-0.317886 1.159755,-0.349325 v -0.468093 h 0.380763 v 0.468095 q 0.681183,0.02445 1.047973,0.303911 0.36679,0.275967 0.527479,0.918723 l -0.92222,0.136236 q -0.104797,-0.600837 -0.653236,-0.674195 v 1.22962 l 0.03843,0.007 q 0.101305,0 0.614811,0.167676 0.517,0.167676 0.772007,0.496041 0.255006,0.324871 0.255006,0.817418 z m -2.061012,-2.731715 q -0.639264,0.04891 -0.639264,0.558918 0,0.157196 0.0524,0.2585 0.0524,0.09781 0.157197,0.167676 0.104797,0.06986 0.429668,0.174662 z m 1.152769,2.745688 q 0,-0.174662 -0.06288,-0.282954 -0.06288,-0.111783 -0.185141,-0.181648 -0.118771,-0.06986 -0.523987,-0.185142 v 1.28202 q 0.772006,-0.0524 0.772006,-0.632276 z" + /> + </> +); diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/cross-icon-paths.module.scss b/src/components/atoms/images/icons/svg-paths/icons-paths/cross-icon-paths.module.scss new file mode 100644 index 0000000..b30fea9 --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/cross-icon-paths.module.scss @@ -0,0 +1,5 @@ +.lines { + fill: var(--color-primary-lighter); + stroke: var(--color-primary-darker); + stroke-width: 3; +} diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/cross-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/cross-icon-paths.tsx new file mode 100644 index 0000000..12740af --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/cross-icon-paths.tsx @@ -0,0 +1,21 @@ +/* eslint-disable react/jsx-no-literals */ +import type { FC } from 'react'; +import styles from './cross-icon-paths.module.scss'; + +/** + * CrossIconPaths + * + * Render the svg paths to make a cross icon. + */ +export const CrossIconPaths: FC = () => ( + <> + <path + className={styles.lines} + d="m 3.6465461,3.6465455 c 2.8785908,-2.87859092 7.5134339,-2.87859092 10.3920249,0 L 96.353457,85.96143 c 2.878587,2.878591 2.878587,7.513434 0,10.392025 -2.878597,2.878591 -7.513432,2.878591 -10.392029,0 L 3.6465451,14.038571 C 0.76795421,11.15998 0.76795421,6.5251364 3.6465461,3.6465455 Z" + /> + <path + className={styles.lines} + d="m 96.353453,3.646546 c 2.878592,2.8785909 2.878592,7.513435 0,10.392026 L 14.03857,96.353457 c -2.878589,2.878587 -7.5134337,2.878587 -10.3920246,0 -2.87859084,-2.878597 -2.87858985,-7.513442 -1e-6,-10.392029 L 85.961428,3.646546 c 2.878591,-2.87859097 7.513434,-2.87859097 10.392025,0 z" + /> + </> +); diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/envelop-icon-paths.module.scss b/src/components/atoms/images/icons/svg-paths/icons-paths/envelop-icon-paths.module.scss new file mode 100644 index 0000000..0819bba --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/envelop-icon-paths.module.scss @@ -0,0 +1,22 @@ +.bg, +.envelop, +.paper { + stroke: var(--color-primary-darker); + stroke-width: 4; +} + +.bg { + fill: var(--color-shadow-dark); +} + +.envelop { + fill: var(--color-primary-lighter); +} + +.lines { + fill: var(--color-fg); +} + +.paper { + fill: var(--color-bg); +} diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/envelop-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/envelop-icon-paths.tsx new file mode 100644 index 0000000..9e23991 --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/envelop-icon-paths.tsx @@ -0,0 +1,53 @@ +/* eslint-disable react/jsx-no-literals */ +import type { FC } from 'react'; +import styles from './envelop-icon-paths.module.scss'; + +/** + * EnvelopIconPaths + * + * Render the svg paths to make an envelop icon. + */ +export const EnvelopIconPaths: FC = () => ( + <> + <path + className={styles.bg} + d="M 1.5262527,42.535416 H 98.473747 V 98.371662 H 1.5262527 Z" + /> + <path + className={styles.envelop} + d="m 49.999985,1.6283075 c 2.855148,0 48.473753,40.8563885 48.473753,40.8563885 H 1.5262359 c 0,0 45.6186001,-40.8563885 48.4737491,-40.8563885 z" + /> + <path + className={styles.paper} + d="M 8.3434839,28.463842 H 91.656465 V 97.348661 H 8.3434839 Z" + /> + <path + className={styles.envelop} + d="M 49.999985,63.571925 98.473738,98.371692 H 1.5262359 Z" + /> + <path + className={styles.lines} + d="m 24.562439,37.640923 h 50.875053 v 1.5 H 24.562439 Z" + /> + <path + className={styles.lines} + d="m 24.562439,45.140923 h 50.875053 v 1.5 H 24.562439 Z" + /> + <path + className={styles.lines} + d="m 24.562443,52.640923 h 50.875053 v 1.5 H 24.562443 Z" + /> + <path + className={styles.lines} + d="M 24.562447,60.140923 H 75.4375 v 1.5 H 24.562447 Z" + /> + <path + className={styles.envelop} + d="M 39.93749,70.965004 1.5262559,43.55838 v 54.813242 z" + /> + <path + className={styles.envelop} + d="M 60.0625,70.965004 98.473738,43.55838 v 54.813242 z" + /> + </> +); diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/feed-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/feed-icon-paths.tsx new file mode 100644 index 0000000..922bf8a --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/feed-icon-paths.tsx @@ -0,0 +1,59 @@ +/* eslint-disable react/jsx-no-literals */ +import type { FC } from 'react'; + +/** + * FeedIconPaths + * + * Render the svg paths to make a feed icon. + */ +export const FeedIconPaths: FC = () => ( + <> + <defs> + <linearGradient + x1="30.059999" + y1="30.059999" + x2="225.94" + y2="225.94" + id="RSSg" + > + <stop offset="0.0" stopColor="#E3702D" /> + <stop offset="0.1071" stopColor="#EA7D31" /> + <stop offset="0.3503" stopColor="#F69537" /> + <stop offset="0.5" stopColor="#FB9E3A" /> + <stop offset="0.7016" stopColor="#EA7C31" /> + <stop offset="0.8866" stopColor="#DE642B" /> + <stop offset="1.0" stopColor="#D95B29" /> + </linearGradient> + </defs> + <path + d="m 21.484375,0 h 57.03125 C 90.41797,0 100,9.582031 100,21.484375 v 57.03125 C 100,90.41797 90.41797,100 78.515625,100 H 21.484375 C 9.582031,100 0,90.41797 0,78.515625 V 21.484375 C 0,9.582031 9.582031,0 21.484375,0 Z" + fill="#cc5d15" + strokeWidth={0.390625} + /> + <path + d="m 21.484375,1.953125 h 57.03125 c 10.82031,0 19.53125,8.710938 19.53125,19.53125 v 57.03125 c 0,10.82031 -8.71094,19.53125 -19.53125,19.53125 h -57.03125 c -10.820312,0 -19.53125,-8.71094 -19.53125,-19.53125 v -57.03125 c 0,-10.820312 8.710938,-19.53125 19.53125,-19.53125 z" + fill="#f49c52" + strokeWidth={0.390625} + /> + <path + d="m 22.265625,3.90625 h 55.46875 c 10.171095,0 18.359375,8.188281 18.359375,18.359375 v 55.46875 c 0,10.171095 -8.18828,18.359375 -18.359375,18.359375 H 22.265625 C 12.094531,96.09375 3.90625,87.90547 3.90625,77.734375 v -55.46875 c 0,-10.171094 8.188281,-18.359375 18.359375,-18.359375 z" + fill="url(#RSSg)" + strokeWidth={0.390625} + /> + <path + d="m 35.9375,73.828125 a 9.375,9.375 0 0 1 -9.375,9.375 9.375,9.375 0 0 1 -9.375,-9.375 9.375,9.375 0 0 1 9.375,-9.375 9.375,9.375 0 0 1 9.375,9.375 z" + fill="#ffffff" + strokeWidth={0.390625} + /> + <path + d="M 62.5,83.203125 H 49.21875 A 32.03125,32.03125 0 0 0 17.1875,51.171875 V 37.890625 A 45.3125,45.3125 0 0 1 62.5,83.203125 Z" + fill="#ffffff" + strokeWidth={0.390625} + /> + <path + d="M 71.875,83.203125 A 54.6875,54.6875 0 0 0 17.1875,28.515625 V 14.84375 a 68.359375,68.359375 0 0 1 68.359375,68.359375 z" + fill="#ffffff" + strokeWidth={0.390625} + /> + </> +); diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/home-icon-paths.module.scss b/src/components/atoms/images/icons/svg-paths/icons-paths/home-icon-paths.module.scss new file mode 100644 index 0000000..a8d775c --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/home-icon-paths.module.scss @@ -0,0 +1,25 @@ +.chimney, +.door, +.indoor, +.roof, +.wall { + stroke: var(--color-primary-darker); +} + +.door, +.roof { + fill: var(--color-primary-lighter); +} + +.indoor { + fill: var(--color-shadow-dark); +} + +.chimney, +.wall { + fill: var(--color-bg); +} + +.lines { + fill: var(--color-primary-darker); +} diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/home-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/home-icon-paths.tsx new file mode 100644 index 0000000..d472445 --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/home-icon-paths.tsx @@ -0,0 +1,41 @@ +/* eslint-disable react/jsx-no-literals */ +import type { FC } from 'react'; +import styles from './home-icon-paths.module.scss'; + +/** + * HomeIconPaths + * + * Render the svg paths to make a home icon. + */ +export const HomeIconPaths: FC = () => ( + <> + <path + className={styles.wall} + d="M 9.2669392,15.413749 H 90.709833 V 97.751815 H 9.2669392 Z" + /> + <path + className={styles.indoor} + d="m 39.190941,65.836418 h 21.594871 v 31.91539 H 39.190941 Z" + /> + <path + className={styles.door} + d="m 39.190941,65.836418 h 21.594871 v 31.91539 H 39.190941 Z" + /> + <path + className={styles.roof} + d="M 4.8219096,11.719266 H 94.720716 l 3.47304,33.365604 H 1.7830046 Z" + /> + <path + className={styles.chimney} + d="M 70.41848,2.2481852 H 82.957212 V 22.636212 H 70.41848 Z" + /> + <path + className={styles.lines} + d="M 3.9536645,19.342648 H 61.003053 v 3.293563 H 3.9536645 Z" + /> + <path + className={styles.lines} + d="m 38.973709,32.057171 h 57.049389 v 3.293563 H 38.973709 Z" + /> + </> +); diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/index.ts b/src/components/atoms/images/icons/svg-paths/icons-paths/index.ts new file mode 100644 index 0000000..43927ae --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/index.ts @@ -0,0 +1,13 @@ +export * from './arrow-icon-paths'; +export * from './career-icon-paths'; +export * from './cc-by-sa-icon-paths'; +export * from './cog-icon-paths'; +export * from './computer-icon-paths'; +export * from './cross-icon-paths'; +export * from './envelop-icon-paths'; +export * from './feed-icon-paths'; +export * from './home-icon-paths'; +export * from './magnifying-glass-icon-paths'; +export * from './moon-icon-paths'; +export * from './posts-stack-icon-paths'; +export * from './sun-icon-paths'; diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/magnifying-glass-icon-paths.module.scss b/src/components/atoms/images/icons/svg-paths/icons-paths/magnifying-glass-icon-paths.module.scss new file mode 100644 index 0000000..4b7db05 --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/magnifying-glass-icon-paths.module.scss @@ -0,0 +1,20 @@ +.big-handle, +.upright { + fill: var(--color-primary-lighter); + stroke: var(--color-primary-darker); + stroke-width: 3; +} + +.glass, +.small-handle { + stroke: var(--color-primary-darker); + stroke-width: 2; +} + +.glass { + fill: var(--color-bg-opacity); +} + +.small-handle { + fill: var(--color-primary); +} diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/magnifying-glass-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/magnifying-glass-icon-paths.tsx new file mode 100644 index 0000000..b800305 --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/magnifying-glass-icon-paths.tsx @@ -0,0 +1,29 @@ +/* eslint-disable react/jsx-no-literals */ +import type { FC } from 'react'; +import styles from './magnifying-glass-icon-paths.module.scss'; + +/** + * MagnifyingGlassIconPaths + * + * Render the svg paths to make a magnifying glass icon. + */ +export const MagnifyingGlassIconPaths: FC = () => ( + <> + <path + className={styles['small-handle']} + d="m 45.39268,48.064692 5.611922,4.307881 -10.292886,13.414321 -5.611923,-4.307882 z" + /> + <path + className={styles.upright} + d="M 90.904041,28.730105 A 27.725691,27.730085 0 0 1 63.17835,56.46019 27.725691,27.730085 0 0 1 35.45266,28.730105 27.725691,27.730085 0 0 1 63.17835,1.00002 27.725691,27.730085 0 0 1 90.904041,28.730105 Z" + /> + <path + className={styles.glass} + d="M 82.438984,28.730105 A 19.260633,19.263685 0 0 1 63.17835,47.99379 19.260633,19.263685 0 0 1 43.917716,28.730105 19.260633,19.263685 0 0 1 63.17835,9.4664203 19.260633,19.263685 0 0 1 82.438984,28.730105 Z" + /> + <path + className={styles['big-handle']} + d="m 35.826055,60.434903 5.75193,4.415356 c 0.998045,0.766128 1.184879,2.186554 0.418913,3.184809 L 18.914717,98.117182 c -0.765969,0.998256 -2.186094,1.185131 -3.18414,0.418997 L 9.9786472,94.120827 C 8.9806032,93.354698 8.7937692,91.934273 9.5597392,90.936014 L 32.641919,60.853903 c 0.765967,-0.998254 2.186091,-1.185129 3.184136,-0.419 z" + /> + </> +); diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/moon-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/moon-icon-paths.tsx new file mode 100644 index 0000000..35025ef --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/moon-icon-paths.tsx @@ -0,0 +1,11 @@ +/* eslint-disable react/jsx-no-literals */ +import type { FC } from 'react'; + +/** + * MoonIconPaths + * + * Render the svg paths to make a moon icon. + */ +export const MoonIconPaths: FC = () => ( + <path d="M 51.077315,1.9893942 A 43.319985,43.319985 0 0 1 72.840039,39.563145 43.319985,43.319985 0 0 1 29.520053,82.88313 43.319985,43.319985 0 0 1 5.4309911,75.569042 48.132997,48.132997 0 0 0 46.126047,98 48.132997,48.132997 0 0 0 94.260004,49.867002 48.132997,48.132997 0 0 0 51.077315,1.9893942 Z" /> +); diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/posts-stack-icon-paths.module.scss b/src/components/atoms/images/icons/svg-paths/icons-paths/posts-stack-icon-paths.module.scss new file mode 100644 index 0000000..f368493 --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/posts-stack-icon-paths.module.scss @@ -0,0 +1,21 @@ +.bg, +.lines { + stroke-width: 4; +} + +.bg, +.picture { + stroke: var(--color-primary-darker); +} + +.bg { + fill: var(--color-bg); +} + +.lines { + fill: var(--color-fg); +} + +.picture { + fill: var(--color-primary-lighter); +} diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/posts-stack-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/posts-stack-icon-paths.tsx new file mode 100644 index 0000000..daf14d4 --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/posts-stack-icon-paths.tsx @@ -0,0 +1,49 @@ +/* eslint-disable react/jsx-no-literals */ +import type { FC } from 'react'; +import styles from './posts-stack-icon-paths.module.scss'; + +/** + * PostsStackIconPaths + * + * Render the svg paths to make a posts stack icon. + */ +export const PostsStackIconPaths: FC = () => ( + <> + <path + className={styles.bg} + d="M 28.992096,1.4822128 H 90.770752 V 82.312253 H 28.992096 Z" + /> + <path + className={styles.bg} + d="m 19.110672,8.992094 h 61.778656 v 80.83004 H 19.110672 Z" + /> + <path + className={styles.bg} + d="m 9.229248,17.687748 h 61.778656 v 80.83004 H 9.229248 Z" + /> + <path + className={styles.picture} + d="M 18.149242,74.65544 H 33.375246 V 90.194215 H 18.149242 Z" + /> + <path + className={styles.picture} + d="M 18.142653,24.858688 H 62.094499 V 35.908926 H 18.142653 Z" + /> + <path className={styles.lines} d="m 17.618576,41.908926 h 45 v 2 h -45 z" /> + <path className={styles.lines} d="m 17.618576,49.908926 h 45 v 2 h -45 z" /> + <path className={styles.lines} d="m 17.618576,57.908926 h 45 v 2 h -45 z" /> + <path className={styles.lines} d="m 17.618576,65.908926 h 45 v 2 h -45 z" /> + <path + className={styles.lines} + d="m 41.833105,73.424828 h 20.785471 v 2 H 41.833105 Z" + /> + <path + className={styles.lines} + d="m 41.833105,81.424828 h 20.785471 v 2 H 41.833105 Z" + /> + <path + className={styles.lines} + d="m 41.833105,89.424828 h 20.785471 v 2 H 41.833105 Z" + /> + </> +); diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/sun-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/sun-icon-paths.tsx new file mode 100644 index 0000000..0cdffb3 --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/sun-icon-paths.tsx @@ -0,0 +1,11 @@ +/* eslint-disable react/jsx-no-literals */ +import type { FC } from 'react'; + +/** + * SunIconPaths + * + * Render the svg paths to make a sun icon. + */ +export const SunIconPaths: FC = () => ( + <path d="M 69.398043,50.000437 A 19.399259,19.399204 0 0 1 49.998784,69.399641 19.399259,19.399204 0 0 1 30.599525,50.000437 19.399259,19.399204 0 0 1 49.998784,30.601234 19.399259,19.399204 0 0 1 69.398043,50.000437 Z m 27.699233,1.125154 c 2.657696,0.0679 1.156196,12.061455 -1.435545,11.463959 L 80.113224,59.000697 c -2.589801,-0.597494 -1.625657,-8.345536 1.032041,-8.278609 z m -18.06653,37.251321 c 1.644087,2.091234 -9.030355,8.610337 -10.126414,6.188346 L 62.331863,80.024585 c -1.096058,-2.423931 5.197062,-6.285342 6.839209,-4.194107 z M 38.611418,97.594444 C 38.02653,100.18909 26.24148,95.916413 27.436475,93.54001 l 7.168026,-14.256474 c 1.194024,-2.376403 8.102101,0.151313 7.517214,2.744986 z M 6.1661563,71.834242 C 3.7916868,73.028262 -0.25499873,61.16274 2.3386824,60.577853 L 17.905618,57.067567 c 2.593681,-0.584886 4.894434,6.403678 2.518995,7.598668 z M 6.146757,30.055146 c -2.3764094,-1.194991 4.46571,-11.714209 6.479353,-9.97798 l 12.090589,10.414462 c 2.014613,1.736229 -1.937017,7.926514 -4.314396,6.731524 z M 38.56777,4.2639045 C 37.982883,1.6682911 50.480855,0.41801247 50.415868,3.0766733 L 50.020123,19.028638 c -0.06596,2.657691 -7.357169,3.394862 -7.943027,0.800218 z m 40.403808,9.1622435 c 1.635357,-2.098023 10.437771,6.872168 8.339742,8.506552 l -12.58818,9.805327 c -2.099,1.634383 -7.192276,-3.626682 -5.557888,-5.724706 z M 97.096306,50.69105 c 2.657696,-0.06596 1.164926,12.462047 -1.425846,11.863582 L 80.122924,58.96578 c -2.590771,-0.597496 -1.636327,-7.814 1.021371,-7.879957 z" /> +); diff --git a/src/components/atoms/images/icons/svg-paths/index.ts b/src/components/atoms/images/icons/svg-paths/index.ts new file mode 100644 index 0000000..01623ef --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/index.ts @@ -0,0 +1 @@ +export * from './svg-paths'; diff --git a/src/components/atoms/images/icons/svg-paths/svg-paths.tsx b/src/components/atoms/images/icons/svg-paths/svg-paths.tsx new file mode 100644 index 0000000..0f5be6e --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/svg-paths.tsx @@ -0,0 +1,82 @@ +import type { FC } from 'react'; +import { + ArrowIconPaths, + type ArrowOrientation, + CCBySAIconPaths, + CareerIconPaths, + CogIconPaths, + ComputerIconPaths, + EnvelopIconPaths, + FeedIconPaths, + HomeIconPaths, + MagnifyingGlassIconPaths, + MoonIconPaths, + PostsStackIconPaths, + SunIconPaths, + CrossIconPaths, +} from './icons-paths'; + +export type SVGIconOrientation = ArrowOrientation; + +export type SVGIconShape = + | 'arrow' + | 'career' + | 'cc-by-sa' + | 'cog' + | 'computer' + | 'cross' + | 'envelop' + | 'feed' + | 'home' + | 'magnifying-glass' + | 'moon' + | 'posts-stack' + | 'sun'; + +export type SVGPathsProps = { + /** + * The icon orientation. Only used with arrow icon. + * + * @default 'right' + */ + orientation?: SVGIconOrientation; + /** + * The icon shape. + */ + shape: SVGIconShape; +}; + +export const SVGPaths: FC<SVGPathsProps> = ({ + orientation = 'right', + shape, +}) => { + switch (shape) { + case 'arrow': + return <ArrowIconPaths orientation={orientation} />; + case 'career': + return <CareerIconPaths />; + case 'cc-by-sa': + return <CCBySAIconPaths />; + case 'cog': + return <CogIconPaths />; + case 'computer': + return <ComputerIconPaths />; + case 'cross': + return <CrossIconPaths />; + case 'envelop': + return <EnvelopIconPaths />; + case 'feed': + return <FeedIconPaths />; + case 'home': + return <HomeIconPaths />; + case 'magnifying-glass': + return <MagnifyingGlassIconPaths />; + case 'moon': + return <MoonIconPaths />; + case 'posts-stack': + return <PostsStackIconPaths />; + case 'sun': + default: + return <SunIconPaths />; + } +}; diff --git a/src/components/atoms/images/index.ts b/src/components/atoms/images/index.ts index cb6151d..197d909 100644 --- a/src/components/atoms/images/index.ts +++ b/src/components/atoms/images/index.ts @@ -1 +1,2 @@ +export * from './icons'; export * from './logo'; diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts index e0041cc..abcc198 100644 --- a/src/components/atoms/index.ts +++ b/src/components/atoms/index.ts @@ -1,7 +1,6 @@ export * from './buttons'; export * from './forms'; export * from './heading'; -export * from './icons'; export * from './images'; export * from './layout'; export * from './links'; diff --git a/src/components/atoms/layout/copyright.module.scss b/src/components/atoms/layout/copyright.module.scss index 5d5435c..ffde516 100644 --- a/src/components/atoms/layout/copyright.module.scss +++ b/src/components/atoms/layout/copyright.module.scss @@ -2,8 +2,6 @@ @use "../../../styles/abstracts/mixins" as mix; .wrapper { - --icon-size: #{fun.convert-px(70)}; - display: flex; flex-flow: row wrap; align-items: center; diff --git a/src/components/atoms/layout/copyright.stories.tsx b/src/components/atoms/layout/copyright.stories.tsx index fa79d32..a21fdfb 100644 --- a/src/components/atoms/layout/copyright.stories.tsx +++ b/src/components/atoms/layout/copyright.stories.tsx @@ -1,5 +1,5 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { CCBySA } from '../icons'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Icon } from '../images'; import { Copyright as CopyrightComponent } from './copyright'; /** @@ -53,6 +53,6 @@ Copyright.args = { start: '2012', end: '2022', }, - icon: <CCBySA />, + icon: <Icon shape="cc-by-sa" />, owner: 'Your name', }; diff --git a/src/components/atoms/layout/copyright.test.tsx b/src/components/atoms/layout/copyright.test.tsx index 1e2230c..3aa04d0 100644 --- a/src/components/atoms/layout/copyright.test.tsx +++ b/src/components/atoms/layout/copyright.test.tsx @@ -1,33 +1,34 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../tests/utils'; -import { CCBySA } from '../icons'; +import { render, screen as rtlScreen } from '../../../../tests/utils'; +import { Icon } from '../images'; import { Copyright } from './copyright'; const dates = { start: '2012', end: '2022', }; -const icon = <CCBySA />; +const iconHeading = 'CC BY SA'; +const icon = <Icon heading={iconHeading} shape="cc-by-sa" />; const owner = 'Your name'; describe('Copyright', () => { it('renders the copyright owner', () => { render(<Copyright dates={dates} icon={icon} owner={owner} />); - expect(screen.getByText(owner)).toBeInTheDocument(); + expect(rtlScreen.getByText(owner)).toBeInTheDocument(); }); it('renders the copyright start date', () => { render(<Copyright dates={dates} icon={icon} owner={owner} />); - expect(screen.getByText(dates.start)).toBeInTheDocument(); + expect(rtlScreen.getByText(dates.start)).toBeInTheDocument(); }); it('renders the copyright end date', () => { render(<Copyright dates={dates} icon={icon} owner={owner} />); - expect(screen.getByText(dates.end)).toBeInTheDocument(); + expect(rtlScreen.getByText(dates.end)).toBeInTheDocument(); }); it('renders the copyright icon', () => { render(<Copyright dates={dates} icon={icon} owner={owner} />); - expect(screen.getByTitle('CC BY SA')).toBeInTheDocument(); + expect(rtlScreen.getByTitle(iconHeading)).toBeInTheDocument(); }); }); diff --git a/src/components/atoms/links/nav-link.module.scss b/src/components/atoms/links/nav-link.module.scss index acabcab..e72885a 100644 --- a/src/components/atoms/links/nav-link.module.scss +++ b/src/components/atoms/links/nav-link.module.scss @@ -6,7 +6,6 @@ --draw-border-thickness: #{fun.convert-px(4)}; --draw-border-color1: var(--color-primary-light); --draw-border-color2: var(--color-primary-lighter); - --icon-size: #{fun.convert-px(30)}; display: inline-flex; flex-flow: column nowrap; diff --git a/src/components/molecules/buttons/back-to-top.module.scss b/src/components/molecules/buttons/back-to-top.module.scss index 7eae03b..ba746df 100644 --- a/src/components/molecules/buttons/back-to-top.module.scss +++ b/src/components/molecules/buttons/back-to-top.module.scss @@ -6,13 +6,9 @@ height: clamp(#{fun.convert-px(48)}, 8vw, #{fun.convert-px(55)}); padding: 0; - svg { - width: 100%; - } - :global { .arrow-head { - transform: translateY(30%) scale(1.2); + transform: translateX(-9%) translateY(30%) scale(1.2); transition: all 0.45s ease-in-out 0s; } diff --git a/src/components/molecules/buttons/back-to-top.tsx b/src/components/molecules/buttons/back-to-top.tsx index 6ca6f10..f2e2073 100644 --- a/src/components/molecules/buttons/back-to-top.tsx +++ b/src/components/molecules/buttons/back-to-top.tsx @@ -1,6 +1,6 @@ import type { FC, HTMLAttributes } from 'react'; import { useIntl } from 'react-intl'; -import { Arrow, ButtonLink } from '../../atoms'; +import { ButtonLink, Icon } from '../../atoms'; import styles from './back-to-top.module.scss'; export type BackToTopProps = HTMLAttributes<HTMLDivElement> & { @@ -38,8 +38,8 @@ export const BackToTop: FC<BackToTopProps> = ({ shape="square" to={anchor} > - {/* eslint-disable-next-line react/jsx-no-literals -- Direction allowed */} - <Arrow aria-hidden direction="top" /> + {/* eslint-disable-next-line react/jsx-no-literals -- Config allowed */} + <Icon aria-hidden={true} orientation="top" shape="arrow" /> </ButtonLink> </div> ); diff --git a/src/components/molecules/buttons/heading-button.tsx b/src/components/molecules/buttons/heading-button.tsx index 97e2c84..3c3eef5 100644 --- a/src/components/molecules/buttons/heading-button.tsx +++ b/src/components/molecules/buttons/heading-button.tsx @@ -1,6 +1,6 @@ import { useCallback, type FC, type SetStateAction } from 'react'; import { useIntl } from 'react-intl'; -import { Heading, type HeadingProps, PlusMinus } from '../../atoms'; +import { Heading, type HeadingProps, Icon } from '../../atoms'; import styles from './heading-button.module.scss'; export type HeadingButtonProps = Pick<HeadingProps, 'level'> & { @@ -61,7 +61,7 @@ export const HeadingButton: FC<HeadingButtonProps> = ({ <span className="screen-reader-text">{titlePrefix} </span> {title} </Heading> - <PlusMinus state={iconState} className={styles.icon} /> + <Icon className={styles.icon} shape={iconState} /> </button> ); }; diff --git a/src/components/molecules/forms/flipping-label/flipping-label.module.scss b/src/components/molecules/forms/flipping-label/flipping-label.module.scss index 88ef3ec..4e7947f 100644 --- a/src/components/molecules/forms/flipping-label/flipping-label.module.scss +++ b/src/components/molecules/forms/flipping-label/flipping-label.module.scss @@ -28,8 +28,6 @@ } .wrapper { - --icon-size: 60%; - display: flex; place-content: center; place-items: center; diff --git a/src/components/molecules/forms/flipping-label/flipping-label.stories.tsx b/src/components/molecules/forms/flipping-label/flipping-label.stories.tsx index 3ad3529..bf5724e 100644 --- a/src/components/molecules/forms/flipping-label/flipping-label.stories.tsx +++ b/src/components/molecules/forms/flipping-label/flipping-label.stories.tsx @@ -1,6 +1,6 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { useState } from 'react'; -import { MagnifyingGlass } from '../../../atoms'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { useCallback, useState } from 'react'; +import { Icon } from '../../../atoms'; import { FlippingLabel } from './flipping-label'; export default { @@ -75,22 +75,23 @@ const Template: ComponentStory<typeof FlippingLabel> = ({ ...args }) => { const [active, setActive] = useState<boolean>(isActive); + const updateState = useCallback(() => setActive((prev) => !prev), []); return ( - <div onClick={() => setActive(!active)}> - <FlippingLabel isActive={active} {...args} /> - </div> + <button onClick={updateState} type="button"> + <FlippingLabel {...args} isActive={active} /> + </button> ); }; export const Active = Template.bind({}); Active.args = { - children: <MagnifyingGlass />, + children: <Icon shape="magnifying-glass" />, isActive: true, }; export const Inactive = Template.bind({}); Inactive.args = { - children: <MagnifyingGlass />, + children: <Icon shape="magnifying-glass" />, isActive: false, }; diff --git a/src/components/molecules/forms/flipping-label/flipping-label.tsx b/src/components/molecules/forms/flipping-label/flipping-label.tsx index 3e23915..e9d6a10 100644 --- a/src/components/molecules/forms/flipping-label/flipping-label.tsx +++ b/src/components/molecules/forms/flipping-label/flipping-label.tsx @@ -1,5 +1,5 @@ -import { FC } from 'react'; -import { Close, Label, type LabelProps } from '../../../atoms'; +import type { FC } from 'react'; +import { Icon, Label, type LabelProps } from '../../../atoms'; import styles from './flipping-label.module.scss'; export type FlippingLabelProps = Pick< @@ -29,7 +29,7 @@ export const FlippingLabel: FC<FlippingLabelProps> = ({ <span className={`${styles.wrapper} ${styles[wrapperModifier]}`}> <span className={styles.front}>{children}</span> <span className={styles.back}> - <Close aria-hidden={true} /> + <Icon aria-hidden={true} shape="cross" /> </span> </span> </Label> diff --git a/src/components/molecules/nav/nav-list.stories.tsx b/src/components/molecules/nav/nav-list.stories.tsx index 110a6ca..baaa8df 100644 --- a/src/components/molecules/nav/nav-list.stories.tsx +++ b/src/components/molecules/nav/nav-list.stories.tsx @@ -1,5 +1,5 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Envelop, Home } from '../../atoms'; +import { Icon } from '../../atoms'; import { NavList, type NavItem } from './nav-list'; /** @@ -78,8 +78,13 @@ const Template: ComponentStory<typeof NavList> = (args) => ( ); const MainNavItems: NavItem[] = [ - { id: 'homeLink', href: '/', label: 'Home', logo: <Home /> }, - { id: 'contactLink', href: '/contact', label: 'Contact', logo: <Envelop /> }, + { id: 'homeLink', href: '/', label: 'Home', logo: <Icon shape="home" /> }, + { + id: 'contactLink', + href: '/contact', + label: 'Contact', + logo: <Icon shape="envelop" />, + }, ]; const FooterNavItems: NavItem[] = [ diff --git a/src/components/molecules/nav/nav-list.test.tsx b/src/components/molecules/nav/nav-list.test.tsx index 58437cb..8524e22 100644 --- a/src/components/molecules/nav/nav-list.test.tsx +++ b/src/components/molecules/nav/nav-list.test.tsx @@ -1,11 +1,16 @@ import { describe, expect, it } from '@jest/globals'; import { render, screen as rtlScreen } from '../../../../tests/utils'; -import { Envelop, Home } from '../../atoms'; +import { Icon } from '../../atoms'; import { NavList, type NavItem } from './nav-list'; const navItems: NavItem[] = [ - { id: 'homeLink', href: '/', label: 'Home', logo: <Home /> }, - { id: 'contactLink', href: '/contact', label: 'Contact', logo: <Envelop /> }, + { id: 'homeLink', href: '/', label: 'Home', logo: <Icon shape="home" /> }, + { + id: 'contactLink', + href: '/contact', + label: 'Contact', + logo: <Icon shape="envelop" />, + }, ]; describe('Nav', () => { diff --git a/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.tsx b/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.tsx index 0e1649b..2b0a179 100644 --- a/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.tsx +++ b/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.tsx @@ -1,8 +1,12 @@ -import { ChangeEvent, FC } from 'react'; +import { useCallback, type ChangeEvent, type FC } from 'react'; import { useIntl } from 'react-intl'; import { type PrismTheme, usePrismTheme } from '../../../../utils/providers'; -import { Legend, Moon, Sun } from '../../../atoms'; -import { Switch, SwitchOption, SwitchProps } from '../../../molecules'; +import { Icon, Legend } from '../../../atoms'; +import { + Switch, + type SwitchOption, + type SwitchProps, +} from '../../../molecules'; export type PrismThemeToggleProps = Omit< SwitchProps, @@ -28,9 +32,12 @@ export const PrismThemeToggle: FC<PrismThemeToggleProps> = (props) => { return prismTheme === 'dark'; }; - const updateTheme = (e: ChangeEvent<HTMLInputElement>) => { - setTheme(e.target.value === 'light' ? 'light' : 'dark'); - }; + const updateTheme = useCallback( + (e: ChangeEvent<HTMLInputElement>) => { + setTheme(e.target.value === 'light' ? 'light' : 'dark'); + }, + [setTheme] + ); const themeLabel = intl.formatMessage({ defaultMessage: 'Code blocks:', @@ -54,7 +61,7 @@ export const PrismThemeToggle: FC<PrismThemeToggleProps> = (props) => { label: ( <> <span className="screen-reader-text">{lightThemeLabel}</span> - <Sun /> + <Icon shape="sun" /> </> ), value: 'light', @@ -64,7 +71,7 @@ export const PrismThemeToggle: FC<PrismThemeToggleProps> = (props) => { label: ( <> <span className="screen-reader-text">{darkThemeLabel}</span> - <Moon /> + <Icon shape="moon" /> </> ), value: 'dark', diff --git a/src/components/organisms/forms/search-form/search-form.tsx b/src/components/organisms/forms/search-form/search-form.tsx index 826e6c8..1dcbb8c 100644 --- a/src/components/organisms/forms/search-form/search-form.tsx +++ b/src/components/organisms/forms/search-form/search-form.tsx @@ -1,14 +1,15 @@ import { useRouter } from 'next/router'; import { - ChangeEvent, - FormEvent, + type ChangeEvent, + type FormEvent, forwardRef, - ForwardRefRenderFunction, + type ForwardRefRenderFunction, useId, useState, + useCallback, } from 'react'; import { useIntl } from 'react-intl'; -import { Button, Form, Input, Label, MagnifyingGlass } from '../../../atoms'; +import { Button, Form, Icon, Input, Label } from '../../../atoms'; import { LabelledField } from '../../../molecules'; import styles from './search-form.module.scss'; @@ -44,15 +45,18 @@ const SearchFormWithRef: ForwardRefRenderFunction< const router = useRouter(); const [value, setValue] = useState<string>(''); - const submitHandler = (e: FormEvent) => { - e.preventDefault(); - router.push({ pathname: searchPage, query: { s: value } }); - setValue(''); - }; + const submitHandler = useCallback( + (e: FormEvent) => { + e.preventDefault(); + router.push({ pathname: searchPage, query: { s: value } }); + setValue(''); + }, + [router, searchPage, value] + ); - const updateForm = (e: ChangeEvent<HTMLInputElement>) => { + const updateForm = useCallback((e: ChangeEvent<HTMLInputElement>) => { setValue(e.target.value); - }; + }, []); const id = useId(); @@ -84,7 +88,7 @@ const SearchFormWithRef: ForwardRefRenderFunction< shape="initial" type="submit" > - <MagnifyingGlass className={styles.btn__icon} /> + <Icon className={styles.btn__icon} shape="magnifying-glass" /> </Button> </Form> ); diff --git a/src/components/organisms/forms/theme-toggle/theme-toggle.tsx b/src/components/organisms/forms/theme-toggle/theme-toggle.tsx index da303d3..6026e1c 100644 --- a/src/components/organisms/forms/theme-toggle/theme-toggle.tsx +++ b/src/components/organisms/forms/theme-toggle/theme-toggle.tsx @@ -1,8 +1,12 @@ import { useTheme } from 'next-themes'; -import { ChangeEvent, FC } from 'react'; +import { useCallback, type ChangeEvent, type FC } from 'react'; import { useIntl } from 'react-intl'; -import { Legend, Moon, Sun } from '../../../atoms'; -import { Switch, SwitchOption, SwitchProps } from '../../../molecules'; +import { Icon, Legend } from '../../../atoms'; +import { + Switch, + type SwitchOption, + type SwitchProps, +} from '../../../molecules'; export type ThemeToggleProps = Omit< SwitchProps, @@ -19,9 +23,12 @@ export const ThemeToggle: FC<ThemeToggleProps> = (props) => { const { resolvedTheme, setTheme } = useTheme(); const isDarkTheme = resolvedTheme === 'dark'; - const updateTheme = (e: ChangeEvent<HTMLInputElement>) => { - setTheme(e.target.value === 'light' ? 'light' : 'dark'); - }; + const updateTheme = useCallback( + (e: ChangeEvent<HTMLInputElement>) => { + setTheme(e.target.value === 'light' ? 'light' : 'dark'); + }, + [setTheme] + ); const themeLabel = intl.formatMessage({ defaultMessage: 'Theme:', @@ -45,7 +52,7 @@ export const ThemeToggle: FC<ThemeToggleProps> = (props) => { label: ( <> <span className="screen-reader-text">{lightThemeLabel}</span> - <Sun /> + <Icon shape="sun" /> </> ), value: 'light', @@ -55,7 +62,7 @@ export const ThemeToggle: FC<ThemeToggleProps> = (props) => { label: ( <> <span className="screen-reader-text">{darkThemeLabel}</span> - <Moon /> + <Icon shape="moon" /> </> ), value: 'dark', diff --git a/src/components/organisms/layout/summary.module.scss b/src/components/organisms/layout/summary.module.scss index 9530312..5052f73 100644 --- a/src/components/organisms/layout/summary.module.scss +++ b/src/components/organisms/layout/summary.module.scss @@ -13,7 +13,8 @@ padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-md); border: fun.convert-px(1) solid var(--color-primary-dark); border-radius: fun.convert-px(3); - box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) 0 + box-shadow: + fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) 0 var(--color-shadow), fun.convert-px(3) fun.convert-px(3) fun.convert-px(3) fun.convert-px(-1) var(--color-shadow-light), @@ -29,8 +30,6 @@ &:hover { .icon { - --icon-size: #{fun.convert-px(35)}; - :global { animation: pulse 1.5s ease-in-out 0.2s infinite; } diff --git a/src/components/organisms/layout/summary.tsx b/src/components/organisms/layout/summary.tsx index e7a5d48..99f6c85 100644 --- a/src/components/organisms/layout/summary.tsx +++ b/src/components/organisms/layout/summary.tsx @@ -3,10 +3,10 @@ import { useIntl } from 'react-intl'; import type { Article, Meta as MetaType } from '../../../types'; import { useReadingTime } from '../../../utils/hooks'; import { - Arrow, ButtonLink, Heading, type HeadingLevel, + Icon, Link, } from '../../atoms'; import { @@ -123,11 +123,13 @@ export const Summary: FC<SummaryProps> = ({ <ButtonLink className={styles['read-more']} to={url}> <> {readMore} - <Arrow + <Icon aria-hidden={true} className={styles.icon} // eslint-disable-next-line react/jsx-no-literals -- Direction allowed - direction="right" + orientation="right" + // eslint-disable-next-line react/jsx-no-literals -- Shape allowed + shape="arrow" /> </> </ButtonLink> diff --git a/src/components/organisms/modals/settings-modal.module.scss b/src/components/organisms/modals/settings-modal.module.scss index 95626ab..6576cf5 100644 --- a/src/components/organisms/modals/settings-modal.module.scss +++ b/src/components/organisms/modals/settings-modal.module.scss @@ -30,7 +30,5 @@ } .icon { - --icon-size: #{fun.convert-px(30)}; - margin-right: var(--spacing-2xs); } diff --git a/src/components/organisms/modals/settings-modal.tsx b/src/components/organisms/modals/settings-modal.tsx index bb3d886..5a53bbd 100644 --- a/src/components/organisms/modals/settings-modal.tsx +++ b/src/components/organisms/modals/settings-modal.tsx @@ -1,6 +1,6 @@ -import { FC } from 'react'; +import { useCallback, type FC, type FormEvent } from 'react'; import { useIntl } from 'react-intl'; -import { Cog, Form, Heading, Modal, type ModalProps } from '../../atoms'; +import { Form, Heading, Icon, Modal, type ModalProps } from '../../atoms'; import { AckeeToggle, type AckeeToggleProps, @@ -8,7 +8,7 @@ import { type MotionToggleProps, PrismThemeToggle, ThemeToggle, -} from '../../organisms'; +} from '../forms'; import styles from './settings-modal.module.scss'; export type SettingsModalProps = Pick<ModalProps, 'className'> & { @@ -44,12 +44,16 @@ export const SettingsModal: FC<SettingsModalProps> = ({ description: 'SettingsModal: an accessible form name', }); + const submitHandler = useCallback((e: FormEvent) => { + e.preventDefault(); + }, []); + return ( <Modal className={`${styles.wrapper} ${className}`} heading={ <Heading isFake level={3}> - <Cog className={styles.icon} /> + <Icon className={styles.icon} shape="cog" /> {title} </Heading> } @@ -57,7 +61,7 @@ export const SettingsModal: FC<SettingsModalProps> = ({ <Form aria-label={ariaLabel} className={styles.form} - onSubmit={() => null} + onSubmit={submitHandler} > <ThemeToggle className={styles.item} /> <PrismThemeToggle className={styles.item} /> diff --git a/src/components/organisms/toolbar/main-nav.tsx b/src/components/organisms/toolbar/main-nav.tsx index 6933c44..7f03577 100644 --- a/src/components/organisms/toolbar/main-nav.tsx +++ b/src/components/organisms/toolbar/main-nav.tsx @@ -1,11 +1,6 @@ import { forwardRef, type ForwardRefRenderFunction } from 'react'; import { useIntl } from 'react-intl'; -import { - BooleanField, - type BooleanFieldProps, - Hamburger, - Label, -} from '../../atoms'; +import { BooleanField, type BooleanFieldProps, Icon, Label } from '../../atoms'; import { NavList, type NavListProps, type NavItem } from '../../molecules'; import mainNavStyles from './main-nav.module.scss'; import sharedStyles from './toolbar-items.module.scss'; @@ -62,7 +57,7 @@ const MainNavWithRef: ForwardRefRenderFunction<HTMLDivElement, MainNavProps> = ( className={`${sharedStyles.label} ${mainNavStyles.label}`} htmlFor="main-nav-button" > - <Hamburger iconClassName={mainNavStyles.icon} /> + <Icon shape="hamburger" /> </Label> <NavList className={`${sharedStyles.modal} ${mainNavStyles.modal} ${className}`} diff --git a/src/components/organisms/toolbar/search.tsx b/src/components/organisms/toolbar/search.tsx index b20f0d5..a09bdae 100644 --- a/src/components/organisms/toolbar/search.tsx +++ b/src/components/organisms/toolbar/search.tsx @@ -1,11 +1,7 @@ -import { forwardRef, ForwardRefRenderFunction, useRef } from 'react'; +import { forwardRef, type ForwardRefRenderFunction, useRef } from 'react'; import { useIntl } from 'react-intl'; import { useInputAutofocus } from '../../../utils/hooks'; -import { - BooleanField, - type BooleanFieldProps, - MagnifyingGlass, -} from '../../atoms'; +import { BooleanField, type BooleanFieldProps, Icon } from '../../atoms'; import { FlippingLabel } from '../../molecules'; import { SearchModal, type SearchModalProps } from '../modals'; import searchStyles from './search.module.scss'; @@ -71,7 +67,7 @@ const SearchWithRef: ForwardRefRenderFunction<HTMLDivElement, SearchProps> = ( htmlFor="search-button" isActive={isActive} > - <MagnifyingGlass aria-hidden={true} /> + <Icon aria-hidden={true} shape="magnifying-glass" size="lg" /> </FlippingLabel> <SearchModal className={`${sharedStyles.modal} ${searchStyles.modal} ${className}`} diff --git a/src/components/organisms/toolbar/settings.tsx b/src/components/organisms/toolbar/settings.tsx index 3f328a5..53634d8 100644 --- a/src/components/organisms/toolbar/settings.tsx +++ b/src/components/organisms/toolbar/settings.tsx @@ -1,6 +1,6 @@ -import { forwardRef, ForwardRefRenderFunction } from 'react'; +import { forwardRef, type ForwardRefRenderFunction } from 'react'; import { useIntl } from 'react-intl'; -import { BooleanField, type BooleanFieldProps, Cog } from '../../atoms'; +import { BooleanField, type BooleanFieldProps, Icon } from '../../atoms'; import { FlippingLabel } from '../../molecules'; import { SettingsModal, type SettingsModalProps } from '../modals'; import styles from './toolbar-items.module.scss'; @@ -59,7 +59,7 @@ const SettingsWithRef: ForwardRefRenderFunction< htmlFor="settings-button" isActive={isActive} > - <Cog aria-hidden={true} /> + <Icon aria-hidden={true} shape="cog" size="lg" /> </FlippingLabel> <SettingsModal ackeeStorageKey={ackeeStorageKey} diff --git a/src/components/templates/layout/layout.tsx b/src/components/templates/layout/layout.tsx index 810a019..c994469 100644 --- a/src/components/templates/layout/layout.tsx +++ b/src/components/templates/layout/layout.tsx @@ -16,17 +16,7 @@ import { useScrollPosition, useSettings, } from '../../../utils/hooks'; -import { - ButtonLink, - Career, - CCBySA, - ComputerScreen, - Envelop, - Home, - Main, - NoScript, - PostsStack, -} from '../../atoms'; +import { ButtonLink, Icon, Main, NoScript } from '../../atoms'; import { SiteFooter, type SiteFooterProps, @@ -82,6 +72,11 @@ export const Layout: FC<LayoutProps> = ({ description: 'Layout: noscript message', id: '7jVUT6', }); + const copyrightTitle = intl.formatMessage({ + defaultMessage: 'CC BY SA', + description: 'Layout: copyright title', + id: 'yB1SPF', + }); const copyrightData = { dates: { @@ -89,7 +84,7 @@ export const Layout: FC<LayoutProps> = ({ end: copyright.end, }, owner: name, - icon: <CCBySA />, + icon: <Icon heading={copyrightTitle} shape="cc-by-sa" size="lg" />, }; const homeLabel = intl.formatMessage({ @@ -123,31 +118,31 @@ export const Layout: FC<LayoutProps> = ({ id: 'home', label: homeLabel, href: '/', - logo: <Home aria-hidden={true} />, + logo: <Icon aria-hidden={true} shape="home" />, }, { id: 'blog', label: blogLabel, href: ROUTES.BLOG, - logo: <PostsStack aria-hidden={true} />, + logo: <Icon aria-hidden={true} shape="posts-stack" />, }, { id: 'projects', label: projectsLabel, href: ROUTES.PROJECTS, - logo: <ComputerScreen aria-hidden={true} />, + logo: <Icon aria-hidden={true} shape="computer" />, }, { id: 'cv', label: cvLabel, href: ROUTES.CV, - logo: <Career aria-hidden={true} />, + logo: <Icon aria-hidden={true} shape="career" />, }, { id: 'contact', label: contactLabel, href: ROUTES.CONTACT, - logo: <Envelop aria-hidden={true} />, + logo: <Icon aria-hidden={true} shape="envelop" />, }, ]; diff --git a/src/i18n/en.json b/src/i18n/en.json index fd46201..d8a982d 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -411,10 +411,6 @@ "defaultMessage": "Sidebar", "description": "PageLayout: accessible name for the sidebar" }, - "cl7YNU": { - "defaultMessage": "CC BY SA", - "description": "CCBySA: icon title" - }, "dDK5oc": { "defaultMessage": "{website} picture", "description": "Branding: photo alternative text" @@ -627,6 +623,10 @@ "defaultMessage": "Sending mail...", "description": "ContactForm: spinner message on submit" }, + "yB1SPF": { + "defaultMessage": "CC BY SA", + "description": "Layout: copyright title" + }, "yE/Jdz": { "defaultMessage": "You are here:", "description": "Pagination: current page indication" diff --git a/src/i18n/fr.json b/src/i18n/fr.json index f951413..d64c930 100644 --- a/src/i18n/fr.json +++ b/src/i18n/fr.json @@ -411,10 +411,6 @@ "defaultMessage": "Barre latérale", "description": "PageLayout: accessible name for the sidebar" }, - "cl7YNU": { - "defaultMessage": "CC BY SA", - "description": "CCBySA: icon title" - }, "dDK5oc": { "defaultMessage": "Photo d’{website}", "description": "Branding: photo alternative text" @@ -627,6 +623,10 @@ "defaultMessage": "Mail en cours d’envoi…", "description": "ContactForm: spinner message on submit" }, + "yB1SPF": { + "defaultMessage": "CC BY SA", + "description": "Layout: copyright title" + }, "yE/Jdz": { "defaultMessage": "Vous êtes ici :", "description": "Pagination: current page indication" diff --git a/src/pages/index.tsx b/src/pages/index.tsx index d99462f..662ae81 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -4,7 +4,6 @@ import Head from 'next/head'; import Script from 'next/script'; import type { FC, HTMLAttributes } from 'react'; import { useIntl } from 'react-intl'; -import FeedIcon from '../assets/images/icon-feed.svg'; import { ButtonLink, CardsList, @@ -12,8 +11,8 @@ import { Column, Columns, type ColumnsProps, - Envelop, getLayout, + Icon, List, type ListItem, ResponsiveImage, @@ -236,13 +235,12 @@ const ShaarliLink: FC = () => { */ const MoreLinks: FC = () => { const intl = useIntl(); - const feedIconClass = `${styles.icon} ${styles['icon--feed']}`; const links: ListItem[] = [ { id: 'contact-me', value: ( <ButtonLink to={ROUTES.CONTACT}> - <Envelop aria-hidden={true} className={styles.icon} /> + <Icon aria-hidden={true} shape="envelop" /> {intl.formatMessage({ defaultMessage: 'Contact me', description: 'HomePage: contact button text', @@ -255,7 +253,7 @@ const MoreLinks: FC = () => { id: 'rss-feed', value: ( <ButtonLink to={ROUTES.RSS}> - <FeedIcon aria-hidden={true} className={feedIconClass} /> + <Icon aria-hidden={true} shape="feed" /> {intl.formatMessage({ defaultMessage: 'Subscribe', description: 'HomePage: RSS feed subscription text', diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss index d56ba18..49e8e26 100644 --- a/src/styles/abstracts/_variables.scss +++ b/src/styles/abstracts/_variables.scss @@ -121,6 +121,43 @@ $font-sizes: (); } //============================================================================ +// Icons +//============================================================================ + +$icon_ratio: get-ratio("perfect-fourth"); +$icon-size_base: fun.convert-px(32); + +$icon-size_levels: "xs", "sm", "md", "lg", "xl"; + +// We start with xs icon, so it needs to be less than the base. +$icon-size_current: math.div($icon-size_base, $icon_ratio * 2); + +/// Icons map ('sm', 'md', 'lg'...) +/// @prop {String} keys - Size as key is mapped to a given icon +/// @prop {Map} value - Value is actual icon +$icon-sizes: (); + +/// We fill our icon-sizes map. +@each $level in $icon-size_levels { + $icon-size_current: $icon-size_current * $icon_ratio; + $icon-sizes: map.merge( + $icon-sizes, + ( + $level: $icon-size_current, + ) + ); +} + +// We cannot declare this function with others functions due to module loop. + +/// Get icon-size. +/// @param {String} $name - Icon size ('sm', 'md', 'lg'...). +/// @return {Integer} The icon value. +@function icon-size($key) { + @return map.get($icon-sizes, $key); +} + +//============================================================================ // Spacings //============================================================================ diff --git a/src/styles/base/_icons.scss b/src/styles/base/_icons.scss new file mode 100644 index 0000000..16fdd4a --- /dev/null +++ b/src/styles/base/_icons.scss @@ -0,0 +1,10 @@ +@use "sass:math"; +@use "../abstracts/variables" as var; + +:root { + --icon-size-xs: #{var.icon-size("xs")}; + --icon-size-sm: #{var.icon-size("sm")}; + --icon-size-md: #{var.icon-size("md")}; + --icon-size-lg: #{var.icon-size("lg")}; + --icon-size-xl: #{var.icon-size("xl")}; +} diff --git a/src/styles/globals.scss b/src/styles/globals.scss index 8ece909..8cf7296 100644 --- a/src/styles/globals.scss +++ b/src/styles/globals.scss @@ -17,6 +17,7 @@ @use "base/colors"; @use "base/fonts"; @use "base/helpers"; +@use "base/icons"; @use "base/spacings"; @use "base/typography"; diff --git a/src/styles/pages/home.module.scss b/src/styles/pages/home.module.scss index 59c8c6f..a926ec3 100644 --- a/src/styles/pages/home.module.scss +++ b/src/styles/pages/home.module.scss @@ -26,8 +26,6 @@ } .icon { - --icon-size: #{fun.convert-px(20)}; - margin-right: var(--spacing-2xs); &--feed { |
