From b4d1408e8ca9432091aae8107b57c21a95098536 Mon Sep 17 00:00:00 2001
From: Lena Rashkovan <lena.rashkovan@free-now.com>
Date: Mon, 2 Dec 2024 17:58:58 +0100
Subject: [PATCH 1/2] fix(icons): fix experimental icon colors

---
 assets/icons/experimental/account-outline.svg   | 2 +-
 assets/icons/experimental/car-group-outline.svg | 2 +-
 assets/icons/experimental/car-outline.svg       | 2 +-
 assets/icons/experimental/location.svg          | 2 +-
 src/icons/experimental/AccountOutlineIcon.tsx   | 2 +-
 src/icons/experimental/CarGroupOutlineIcon.tsx  | 2 +-
 src/icons/experimental/CarOutlineIcon.tsx       | 2 +-
 src/icons/experimental/LocationIcon.tsx         | 2 +-
 8 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/assets/icons/experimental/account-outline.svg b/assets/icons/experimental/account-outline.svg
index d8dc56a8..0b0bef2f 100644
--- a/assets/icons/experimental/account-outline.svg
+++ b/assets/icons/experimental/account-outline.svg
@@ -1,3 +1,3 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.0002 3.33325C10.8842 3.33325 11.7321 3.68444 12.3572 4.30956C12.9823 4.93468 13.3335 5.78253 13.3335 6.66659C13.3335 7.55064 12.9823 8.39849 12.3572 9.02361C11.7321 9.64873 10.8842 9.99992 10.0002 9.99992C9.11611 9.99992 8.26826 9.64873 7.64314 9.02361C7.01802 8.39849 6.66683 7.55064 6.66683 6.66659C6.66683 5.78253 7.01802 4.93468 7.64314 4.30956C8.26826 3.68444 9.11611 3.33325 10.0002 3.33325ZM10.0002 4.99992C9.55814 4.99992 9.13421 5.17551 8.82165 5.48807C8.50909 5.80063 8.3335 6.22456 8.3335 6.66659C8.3335 7.10861 8.50909 7.53254 8.82165 7.8451C9.13421 8.15766 9.55814 8.33325 10.0002 8.33325C10.4422 8.33325 10.8661 8.15766 11.1787 7.8451C11.4912 7.53254 11.6668 7.10861 11.6668 6.66659C11.6668 6.22456 11.4912 5.80063 11.1787 5.48807C10.8661 5.17551 10.4422 4.99992 10.0002 4.99992ZM10.0002 10.8333C12.2252 10.8333 16.6668 11.9416 16.6668 14.1666V16.6666H3.3335V14.1666C3.3335 11.9416 7.77516 10.8333 10.0002 10.8333ZM10.0002 12.4166C7.52516 12.4166 4.91683 13.6333 4.91683 14.1666V15.0833H15.0835V14.1666C15.0835 13.6333 12.4752 12.4166 10.0002 12.4166Z" fill="white"/>
+<path d="M10.0002 3.33325C10.8842 3.33325 11.7321 3.68444 12.3572 4.30956C12.9823 4.93468 13.3335 5.78253 13.3335 6.66659C13.3335 7.55064 12.9823 8.39849 12.3572 9.02361C11.7321 9.64873 10.8842 9.99992 10.0002 9.99992C9.11611 9.99992 8.26826 9.64873 7.64314 9.02361C7.01802 8.39849 6.66683 7.55064 6.66683 6.66659C6.66683 5.78253 7.01802 4.93468 7.64314 4.30956C8.26826 3.68444 9.11611 3.33325 10.0002 3.33325ZM10.0002 4.99992C9.55814 4.99992 9.13421 5.17551 8.82165 5.48807C8.50909 5.80063 8.3335 6.22456 8.3335 6.66659C8.3335 7.10861 8.50909 7.53254 8.82165 7.8451C9.13421 8.15766 9.55814 8.33325 10.0002 8.33325C10.4422 8.33325 10.8661 8.15766 11.1787 7.8451C11.4912 7.53254 11.6668 7.10861 11.6668 6.66659C11.6668 6.22456 11.4912 5.80063 11.1787 5.48807C10.8661 5.17551 10.4422 4.99992 10.0002 4.99992ZM10.0002 10.8333C12.2252 10.8333 16.6668 11.9416 16.6668 14.1666V16.6666H3.3335V14.1666C3.3335 11.9416 7.77516 10.8333 10.0002 10.8333ZM10.0002 12.4166C7.52516 12.4166 4.91683 13.6333 4.91683 14.1666V15.0833H15.0835V14.1666C15.0835 13.6333 12.4752 12.4166 10.0002 12.4166Z" fill="#001E3E"/>
 </svg>
diff --git a/assets/icons/experimental/car-group-outline.svg b/assets/icons/experimental/car-group-outline.svg
index f207fffd..42922ae7 100644
--- a/assets/icons/experimental/car-group-outline.svg
+++ b/assets/icons/experimental/car-group-outline.svg
@@ -1,5 +1,5 @@
 <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id="icon/car-group-outline">
-<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M20.025 4C19.825 3.4 19.225 3 18.625 3H7.625C6.925 3 6.425 3.4 6.225 4L5.875 5H7.925H18.125H18.225L19.325 8L20.125 10V15V17V19H21.125C21.625 19 22.125 18.5 22.125 18V10L20.025 4ZM15.625 6C16.225 6 16.825 6.4 17.025 7L19.125 13V21C19.125 21.5 18.625 22 18.125 22H17.125C16.625 22 16.125 21.5 16.125 21V20H4.125V21C4.125 21.5 3.725 22 3.125 22H2.125C1.625 22 1.125 21.5 1.125 21V13L3.225 7C3.425 6.4 3.925 6 4.625 6H15.625ZM15.225 8H4.925L3.925 11H16.325L15.225 8ZM3.125 18H17.125V13H3.125V18ZM7.125 15.5C7.125 14.7 6.425 14 5.625 14C4.825 14 4.125 14.7 4.125 15.5C4.125 16.3 4.825 17 5.625 17C6.425 17 7.125 16.3 7.125 15.5ZM16.125 15.5C16.125 14.7 15.425 14 14.625 14C13.825 14 13.125 14.7 13.125 15.5C13.125 16.3 13.825 17 14.625 17C15.425 17 16.125 16.3 16.125 15.5Z" fill="black"/>
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M20.025 4C19.825 3.4 19.225 3 18.625 3H7.625C6.925 3 6.425 3.4 6.225 4L5.875 5H7.925H18.125H18.225L19.325 8L20.125 10V15V17V19H21.125C21.625 19 22.125 18.5 22.125 18V10L20.025 4ZM15.625 6C16.225 6 16.825 6.4 17.025 7L19.125 13V21C19.125 21.5 18.625 22 18.125 22H17.125C16.625 22 16.125 21.5 16.125 21V20H4.125V21C4.125 21.5 3.725 22 3.125 22H2.125C1.625 22 1.125 21.5 1.125 21V13L3.225 7C3.425 6.4 3.925 6 4.625 6H15.625ZM15.225 8H4.925L3.925 11H16.325L15.225 8ZM3.125 18H17.125V13H3.125V18ZM7.125 15.5C7.125 14.7 6.425 14 5.625 14C4.825 14 4.125 14.7 4.125 15.5C4.125 16.3 4.825 17 5.625 17C6.425 17 7.125 16.3 7.125 15.5ZM16.125 15.5C16.125 14.7 15.425 14 14.625 14C13.825 14 13.125 14.7 13.125 15.5C13.125 16.3 13.825 17 14.625 17C15.425 17 16.125 16.3 16.125 15.5Z" fill="#001E3E"/>
 </g>
 </svg>
diff --git a/assets/icons/experimental/car-outline.svg b/assets/icons/experimental/car-outline.svg
index 46f6eea4..767cebba 100644
--- a/assets/icons/experimental/car-outline.svg
+++ b/assets/icons/experimental/car-outline.svg
@@ -1,5 +1,5 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id="icon/car-outline">
-<path id="Vector" d="M15.75 5.00002C15.5833 4.50002 15.0833 4.16669 14.5833 4.16669H5.41667C4.83333 4.16669 4.41667 4.50002 4.25 5.00002L2.5 10V16.6667C2.5 17.0834 2.91667 17.5 3.33333 17.5H4.16667C4.66667 17.5 5 17.0834 5 16.6667V15.8334H15V16.6667C15 17.0834 15.4167 17.5 15.8333 17.5H16.6667C17.0833 17.5 17.5 17.0834 17.5 16.6667V10L15.75 5.00002ZM5.66667 5.83335H14.25L15.1667 8.33335H4.83333L5.66667 5.83335ZM15.8333 14.1667H4.16667V10H15.8333V14.1667ZM6.25 10.8334C6.91667 10.8334 7.5 11.4167 7.5 12.0834C7.5 12.75 6.91667 13.3334 6.25 13.3334C5.58333 13.3334 5 12.75 5 12.0834C5 11.4167 5.58333 10.8334 6.25 10.8334ZM13.75 10.8334C14.4167 10.8334 15 11.4167 15 12.0834C15 12.75 14.4167 13.3334 13.75 13.3334C13.0833 13.3334 12.5 12.75 12.5 12.0834C12.5 11.4167 13.0833 10.8334 13.75 10.8334Z" fill="#FCFCFC"/>
+<path id="Vector" d="M15.75 5.00002C15.5833 4.50002 15.0833 4.16669 14.5833 4.16669H5.41667C4.83333 4.16669 4.41667 4.50002 4.25 5.00002L2.5 10V16.6667C2.5 17.0834 2.91667 17.5 3.33333 17.5H4.16667C4.66667 17.5 5 17.0834 5 16.6667V15.8334H15V16.6667C15 17.0834 15.4167 17.5 15.8333 17.5H16.6667C17.0833 17.5 17.5 17.0834 17.5 16.6667V10L15.75 5.00002ZM5.66667 5.83335H14.25L15.1667 8.33335H4.83333L5.66667 5.83335ZM15.8333 14.1667H4.16667V10H15.8333V14.1667ZM6.25 10.8334C6.91667 10.8334 7.5 11.4167 7.5 12.0834C7.5 12.75 6.91667 13.3334 6.25 13.3334C5.58333 13.3334 5 12.75 5 12.0834C5 11.4167 5.58333 10.8334 6.25 10.8334ZM13.75 10.8334C14.4167 10.8334 15 11.4167 15 12.0834C15 12.75 14.4167 13.3334 13.75 13.3334C13.0833 13.3334 12.5 12.75 12.5 12.0834C12.5 11.4167 13.0833 10.8334 13.75 10.8334Z" fill="#001E3E"/>
 </g>
 </svg>
diff --git a/assets/icons/experimental/location.svg b/assets/icons/experimental/location.svg
index cd8e4376..b4f4300b 100644
--- a/assets/icons/experimental/location.svg
+++ b/assets/icons/experimental/location.svg
@@ -1,5 +1,5 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id="location">
-<path id="Vector" d="M9.99992 10C10.4583 10 10.8506 9.83683 11.177 9.51044C11.5034 9.18405 11.6666 8.79169 11.6666 8.33335C11.6666 7.87502 11.5034 7.48266 11.177 7.15627C10.8506 6.82988 10.4583 6.66669 9.99992 6.66669C9.54158 6.66669 9.14922 6.82988 8.82283 7.15627C8.49645 7.48266 8.33325 7.87502 8.33325 8.33335C8.33325 8.79169 8.49645 9.18405 8.82283 9.51044C9.14922 9.83683 9.54158 10 9.99992 10ZM9.99992 16.125C11.6944 14.5695 12.9513 13.1563 13.7708 11.8854C14.5902 10.6146 14.9999 9.48613 14.9999 8.50002C14.9999 6.98613 14.5173 5.74655 13.552 4.78127C12.5867 3.81599 11.4027 3.33335 9.99992 3.33335C8.59714 3.33335 7.41311 3.81599 6.44784 4.78127C5.48256 5.74655 4.99992 6.98613 4.99992 8.50002C4.99992 9.48613 5.40964 10.6146 6.22909 11.8854C7.04853 13.1563 8.30547 14.5695 9.99992 16.125ZM9.99992 18.3334C7.76381 16.4306 6.09367 14.6632 4.9895 13.0313C3.88534 11.3993 3.33325 9.88891 3.33325 8.50002C3.33325 6.41669 4.00339 4.75697 5.34367 3.52085C6.68395 2.28474 8.23603 1.66669 9.99992 1.66669C11.7638 1.66669 13.3159 2.28474 14.6562 3.52085C15.9964 4.75697 16.6666 6.41669 16.6666 8.50002C16.6666 9.88891 16.1145 11.3993 15.0103 13.0313C13.9062 14.6632 12.236 16.4306 9.99992 18.3334Z" fill="#FCFCFC"/>
+<path id="Vector" d="M9.99992 10C10.4583 10 10.8506 9.83683 11.177 9.51044C11.5034 9.18405 11.6666 8.79169 11.6666 8.33335C11.6666 7.87502 11.5034 7.48266 11.177 7.15627C10.8506 6.82988 10.4583 6.66669 9.99992 6.66669C9.54158 6.66669 9.14922 6.82988 8.82283 7.15627C8.49645 7.48266 8.33325 7.87502 8.33325 8.33335C8.33325 8.79169 8.49645 9.18405 8.82283 9.51044C9.14922 9.83683 9.54158 10 9.99992 10ZM9.99992 16.125C11.6944 14.5695 12.9513 13.1563 13.7708 11.8854C14.5902 10.6146 14.9999 9.48613 14.9999 8.50002C14.9999 6.98613 14.5173 5.74655 13.552 4.78127C12.5867 3.81599 11.4027 3.33335 9.99992 3.33335C8.59714 3.33335 7.41311 3.81599 6.44784 4.78127C5.48256 5.74655 4.99992 6.98613 4.99992 8.50002C4.99992 9.48613 5.40964 10.6146 6.22909 11.8854C7.04853 13.1563 8.30547 14.5695 9.99992 16.125ZM9.99992 18.3334C7.76381 16.4306 6.09367 14.6632 4.9895 13.0313C3.88534 11.3993 3.33325 9.88891 3.33325 8.50002C3.33325 6.41669 4.00339 4.75697 5.34367 3.52085C6.68395 2.28474 8.23603 1.66669 9.99992 1.66669C11.7638 1.66669 13.3159 2.28474 14.6562 3.52085C15.9964 4.75697 16.6666 6.41669 16.6666 8.50002C16.6666 9.88891 16.1145 11.3993 15.0103 13.0313C13.9062 14.6632 12.236 16.4306 9.99992 18.3334Z" fill="#001E3E"/>
 </g>
 </svg>
diff --git a/src/icons/experimental/AccountOutlineIcon.tsx b/src/icons/experimental/AccountOutlineIcon.tsx
index eaa3c049..af7b4f41 100644
--- a/src/icons/experimental/AccountOutlineIcon.tsx
+++ b/src/icons/experimental/AccountOutlineIcon.tsx
@@ -19,7 +19,7 @@ const AccountOutlineIcon: React.FC<Props> = ({ size = 'medium', color = 'inherit
         >
             <path
                 d="M10 3.333A3.333 3.333 0 1110 10a3.333 3.333 0 010-6.667zM10 5a1.667 1.667 0 100 3.333A1.667 1.667 0 0010 5zm0 5.833c2.225 0 6.667 1.109 6.667 3.334v2.5H3.333v-2.5c0-2.225 4.442-3.334 6.667-3.334zm0 1.584c-2.475 0-5.083 1.216-5.083 1.75v.916h10.166v-.916c0-.534-2.608-1.75-5.083-1.75z"
-                fill="#fff"
+                fill="currentColor"
             />
         </svg>
     );
diff --git a/src/icons/experimental/CarGroupOutlineIcon.tsx b/src/icons/experimental/CarGroupOutlineIcon.tsx
index 5ea8bf0b..a6b34320 100644
--- a/src/icons/experimental/CarGroupOutlineIcon.tsx
+++ b/src/icons/experimental/CarGroupOutlineIcon.tsx
@@ -21,7 +21,7 @@ const CarGroupOutlineIcon: React.FC<Props> = ({ size = 'medium', color = 'inheri
                 fillRule="evenodd"
                 clipRule="evenodd"
                 d="M20.025 4c-.2-.6-.8-1-1.4-1h-11c-.7 0-1.2.4-1.4 1l-.35 1h12.35l1.1 3 .8 2v9h1c.5 0 1-.5 1-1v-8l-2.1-6zm-4.4 2c.6 0 1.2.4 1.4 1l2.1 6v8c0 .5-.5 1-1 1h-1c-.5 0-1-.5-1-1v-1h-12v1c0 .5-.4 1-1 1h-1c-.5 0-1-.5-1-1v-8l2.1-6c.2-.6.7-1 1.4-1h11zm-.4 2h-10.3l-1 3h12.4l-1.1-3zm-12.1 10h14v-5h-14v5zm4-2.5c0-.8-.7-1.5-1.5-1.5s-1.5.7-1.5 1.5.7 1.5 1.5 1.5 1.5-.7 1.5-1.5zm9 0c0-.8-.7-1.5-1.5-1.5s-1.5.7-1.5 1.5.7 1.5 1.5 1.5 1.5-.7 1.5-1.5z"
-                fill="#000"
+                fill="currentColor"
             />
         </svg>
     );
diff --git a/src/icons/experimental/CarOutlineIcon.tsx b/src/icons/experimental/CarOutlineIcon.tsx
index d942af38..1434a9e9 100644
--- a/src/icons/experimental/CarOutlineIcon.tsx
+++ b/src/icons/experimental/CarOutlineIcon.tsx
@@ -19,7 +19,7 @@ const CarOutlineIcon: React.FC<Props> = ({ size = 'medium', color = 'inherit', .
         >
             <path
                 d="M15.75 5a1.253 1.253 0 00-1.167-.833H5.417c-.584 0-1 .333-1.167.833L2.5 10v6.667c0 .416.417.833.833.833h.834c.5 0 .833-.417.833-.833v-.834h10v.834c0 .416.417.833.833.833h.834c.416 0 .833-.417.833-.833V10l-1.75-5zm-10.083.833h8.583l.917 2.5H4.833l.834-2.5zm10.166 8.334H4.167V10h11.666v4.167zM6.25 10.833c.667 0 1.25.584 1.25 1.25 0 .667-.583 1.25-1.25 1.25S5 12.75 5 12.083c0-.666.583-1.25 1.25-1.25zm7.5 0c.667 0 1.25.584 1.25 1.25 0 .667-.583 1.25-1.25 1.25s-1.25-.583-1.25-1.25c0-.666.583-1.25 1.25-1.25z"
-                fill="#FCFCFC"
+                fill="currentColor"
             />
         </svg>
     );
diff --git a/src/icons/experimental/LocationIcon.tsx b/src/icons/experimental/LocationIcon.tsx
index fc638c49..df4d8d01 100644
--- a/src/icons/experimental/LocationIcon.tsx
+++ b/src/icons/experimental/LocationIcon.tsx
@@ -19,7 +19,7 @@ const LocationIcon: React.FC<Props> = ({ size = 'medium', color = 'inherit', ...
         >
             <path
                 d="M10 10c.458 0 .85-.163 1.177-.49.326-.326.49-.718.49-1.177 0-.458-.164-.85-.49-1.177A1.605 1.605 0 0010 6.666c-.458 0-.85.164-1.177.49-.327.327-.49.719-.49 1.177 0 .459.163.851.49 1.177.326.327.719.49 1.177.49zm0 6.125c1.694-1.556 2.951-2.969 3.77-4.24C14.59 10.615 15 9.486 15 8.5c0-1.514-.483-2.753-1.448-3.719-.965-.965-2.15-1.448-3.552-1.448-1.403 0-2.587.483-3.552 1.448C5.483 5.747 5 6.986 5 8.5c0 .986.41 2.115 1.23 3.385.819 1.271 2.075 2.684 3.77 4.24zm0 2.208c-2.236-1.902-3.906-3.67-5.01-5.302C3.884 11.4 3.332 9.89 3.332 8.5c0-2.083.67-3.743 2.01-4.98C6.685 2.286 8.237 1.668 10 1.668c1.764 0 3.316.618 4.656 1.854 1.34 1.236 2.01 2.896 2.01 4.979 0 1.389-.552 2.9-1.656 4.531-1.104 1.632-2.774 3.4-5.01 5.302z"
-                fill="#FCFCFC"
+                fill="currentColor"
             />
         </svg>
     );

From c791d28ac6a36037d5b98ba2692ce61b13e7989a Mon Sep 17 00:00:00 2001
From: Lena Rashkovan <lena.rashkovan@free-now.com>
Date: Mon, 2 Dec 2024 17:59:41 +0100
Subject: [PATCH 2/2] docs(icons): add a story for experimental icons

---
 src/icons/docs/Experimental.stories.tsx | 38 +++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 src/icons/docs/Experimental.stories.tsx

diff --git a/src/icons/docs/Experimental.stories.tsx b/src/icons/docs/Experimental.stories.tsx
new file mode 100644
index 00000000..a7176161
--- /dev/null
+++ b/src/icons/docs/Experimental.stories.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import * as Icons from '../experimental';
+import { getSemanticValue } from '../../essentials/experimental';
+
+const meta: Meta = {
+    title: 'Experimental/Icons',
+    component: ({ name, ...props }) => {
+        const Component = Icons[name];
+
+        return Component ? <Component {...props} /> : null;
+    }
+};
+
+export default meta;
+
+export const Default: StoryObj = {
+    name: 'Icons',
+    args: {
+        name: Object.keys(Icons)[0],
+        color: getSemanticValue('accent'),
+        size: 40
+    },
+    argTypes: {
+        name: {
+            description: 'Name of the icon\n\n**Example Only!**',
+            control: 'select',
+            options: Object.keys(Icons)
+        },
+        color: {
+            control: 'color'
+        },
+        size: {
+            control: 'select',
+            options: ['small', 'medium', 'large', 40]
+        }
+    }
+};