@eturnity/eturnity_reusable_components 9.25.0 → 9.25.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "9.25.0",
+  "version": "9.25.2",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/add_thin_icon.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 1C8.27614 1 8.5 1.22386 8.5 1.5V7.5H14.5C14.7761 7.5 15 7.72386 15 8C15 8.27614 14.7761 8.5 14.5 8.5H8.5V14.5C8.5 14.7761 8.27614 15 8 15C7.72386 15 7.5 14.7761 7.5 14.5V8.5H1.5C1.22386 8.5 1 8.27614 1 8C1 7.72386 1.22386 7.5 1.5 7.5H7.5V1.5C7.5 1.22386 7.72386 1 8 1Z" fill="#263238"/>
+</svg>

package/src/assets/svgIcons/delete.svg

@@ -1,4 +1,3 @@
-<svg fill="none" height="16" viewbox="13 12 14 16" width="14" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.7713 25.7127C15.8072 26.4355 16.3994 27 17.1244 27H22.6175C23.3425 27 23.9348 26.4355 23.9706 25.7127L24.7618 16.6129H14.9801L15.7713 25.7127ZM21.2258 18.871H22.129V23.8387H21.2258V18.871ZM19.4194 18.871H20.3226V23.8387H19.4194V18.871ZM17.6129 18.871H18.5161V23.8387H17.6129V18.871Z" fill="#DEE2EB"></path>
-<path d="M22.129 13.9032V13H17.6129V13.9032H14V15.7097H25.7419V13.9032H22.129Z" fill="#DEE2EB"></path>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 3C14.2761 3 14.5 3.22386 14.5 3.5C14.5 3.77614 14.2761 4 14 4H12.957L12.0811 13.6357C12.0108 14.4083 11.3627 14.9999 10.5869 15H5.41309C4.6858 14.9999 4.0713 14.4799 3.93945 13.7783L3.91895 13.6357L3.04297 4H2C1.72386 4 1.5 3.77614 1.5 3.5C1.5 3.22386 1.72386 3 2 3H14ZM4.91504 13.5449C4.93845 13.8024 5.15454 13.9999 5.41309 14H10.5869C10.8455 13.9999 11.0616 13.8024 11.085 13.5449L11.9521 4H4.04785L4.91504 13.5449ZM6.5 6.5C6.77614 6.5 7 6.72386 7 7V11C7 11.2761 6.77614 11.5 6.5 11.5C6.22386 11.5 6 11.2761 6 11V7C6 6.72386 6.22386 6.5 6.5 6.5ZM9.5 6.5C9.77614 6.5 10 6.72386 10 7V11C10 11.2761 9.77614 11.5 9.5 11.5C9.22386 11.5 9 11.2761 9 11V7C9 6.72386 9.22386 6.5 9.5 6.5ZM10 1C10.2761 1 10.5 1.22386 10.5 1.5C10.5 1.77614 10.2761 2 10 2H6C5.72386 2 5.5 1.77614 5.5 1.5C5.5 1.22386 5.72386 1 6 1H10Z" fill="#CC4545"/>
 </svg>

package/src/assets/svgIcons/location_outline.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00293 0.999023C11.0599 0.999297 13.5059 3.57137 13.5059 6.70117C13.5058 7.45313 13.3649 8.17298 13.1084 8.83203L13.0195 9.04004C12.7922 9.53547 12.4218 10.1025 12.0068 10.666C11.526 11.319 10.9591 12.0025 10.4209 12.6201C9.88204 13.2385 9.36719 13.7965 8.9873 14.1992C8.7973 14.4007 8.64051 14.5639 8.53125 14.6768C8.47669 14.7331 8.43357 14.7767 8.4043 14.8066C8.3898 14.8215 8.37876 14.833 8.37109 14.8408L8.35938 14.8525V14.8535L8.28223 14.917C8.2005 14.9719 8.10288 15.0019 8.00293 15.002C7.86962 15.0019 7.74129 14.9482 7.64746 14.8535L7.64648 14.8525C7.64603 14.8521 7.64523 14.8505 7.64453 14.8496L7.60156 14.8066C7.57234 14.7768 7.52889 14.7328 7.47461 14.6768C7.36539 14.5639 7.20843 14.4005 7.01855 14.1992C6.63872 13.7965 6.12374 13.2384 5.58496 12.6201C5.04685 12.0026 4.47982 11.3189 3.99902 10.666C3.52499 10.0223 3.10926 9.37316 2.89844 8.83203L2.80762 8.58203C2.60878 7.99254 2.50009 7.35915 2.5 6.70117C2.5 3.57129 4.94589 0.999168 8.00293 0.999023ZM8.00293 2C5.53441 2.00015 3.50098 4.08662 3.50098 6.70117C3.50107 7.24934 3.59037 7.77502 3.75488 8.2627L3.83008 8.46973C3.9905 8.88137 4.33977 9.44187 4.80469 10.0732C5.26308 10.6957 5.81036 11.3564 6.33887 11.9629C6.8666 12.5685 7.37235 13.1165 7.74609 13.5127C7.8404 13.6127 7.92733 13.7032 8.00293 13.7822C8.07869 13.703 8.16521 13.6129 8.25977 13.5127C8.63358 13.1164 9.13911 12.5687 9.66699 11.9629C10.1957 11.3562 10.7437 10.6959 11.2021 10.0732C11.6091 9.52063 11.9268 9.02242 12.1074 8.63086L12.1768 8.46973C12.3889 7.9249 12.5058 7.32773 12.5059 6.70117C12.5059 4.08671 10.4713 2.00028 8.00293 2ZM8 4.5C9.10457 4.5 10 5.39543 10 6.5C10 7.60457 9.10457 8.5 8 8.5C6.89543 8.5 6 7.60457 6 6.5C6 5.39543 6.89543 4.5 8 4.5ZM8 5.5C7.44772 5.5 7 5.94772 7 6.5C7 7.05228 7.44772 7.5 8 7.5C8.55228 7.5 9 7.05228 9 6.5C9 5.94772 8.55228 5.5 8 5.5Z" fill="#263238"/>
+</svg>

package/src/assets/svgIcons/redo.svg

@@ -1,6 +1,3 @@
-<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.51904 2H10.519V4H4.51904V2Z" fill="#555D61"/>
-<path d="M4.51904 8H8.51904V10H4.51904V8Z" fill="#555D61"/>
-<path d="M10.519 5.92321L13.4807 2.96161L10.519 0L10.519 5.92321Z" fill="#555D61"/>
-<path d="M7.98391 8C7.29229 9.1956 5.99961 10 4.51904 10C2.3099 10 0.519043 8.20914 0.519043 6C0.519043 3.79086 2.3099 2 4.51904 2C5.99961 2 7.2923 2.8044 7.98391 4H4.51904C3.41447 4 2.51904 4.89543 2.51904 6C2.51904 7.10457 3.41447 8 4.51904 8H7.98391Z" fill="#555D61"/>
+<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.14648 0.146423C9.34173 -0.048822 9.65825 -0.0487888 9.85352 0.146423L12.8535 3.14642C13.0488 3.34169 13.0488 3.65819 12.8535 3.85345L9.85352 6.85345C9.65824 7.04858 9.3417 7.04867 9.14648 6.85345C8.95132 6.65823 8.95137 6.34168 9.14648 6.14642L11.293 3.99994H5C2.79095 4.00004 1 5.79086 1 7.99994C1.00005 10.209 2.79097 11.9998 5 11.9999H12.5C12.7761 11.9999 13 12.2238 13 12.4999C13 12.776 12.7761 12.9999 12.5 12.9999H5C2.23869 12.9998 4.52248e-05 10.7613 0 7.99994C0 5.23858 2.23866 3.00004 5 2.99994H11.293L9.14648 0.853455C8.95132 0.658233 8.95137 0.34168 9.14648 0.146423Z" fill="#263238"/>
 </svg>

package/src/assets/svgIcons/save.svg

@@ -1,3 +1,3 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.8889 0H1.55556C0.692222 0 0 0.7 0 1.55556V12.4444C0 13.3 0.692222 14 1.55556 14H12.4444C13.3 14 14 13.3 14 12.4444V3.11111L10.8889 0ZM7 12.4444C5.70889 12.4444 4.66667 11.4022 4.66667 10.1111C4.66667 8.82 5.70889 7.77778 7 7.77778C8.29111 7.77778 9.33333 8.82 9.33333 10.1111C9.33333 11.4022 8.29111 12.4444 7 12.4444ZM9.33333 4.66667H1.55556V1.55556H9.33333V4.66667Z" fill="#263238"/>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.7832 1.5C10.0853 1.5 10.3178 1.49701 10.542 1.55078C10.7291 1.59569 10.9082 1.66999 11.0723 1.77051C11.269 1.89107 11.4318 2.05777 11.6455 2.27148L13.7285 4.35449C13.9422 4.56821 14.1089 4.73105 14.2295 4.92773C14.33 5.09176 14.4043 5.27095 14.4492 5.45801C14.503 5.68223 14.5 5.91473 14.5 6.2168V10.7998C14.5 11.3516 14.5 11.7957 14.4707 12.1543C14.4409 12.5186 14.3784 12.8387 14.2275 13.1348C13.9879 13.6052 13.6052 13.9879 13.1348 14.2275C12.8387 14.3784 12.5186 14.4409 12.1543 14.4707C11.9269 14.4893 11.6651 14.4937 11.3633 14.4961C11.3533 14.4967 11.3431 14.5 11.333 14.5C11.3238 14.5 11.3148 14.4976 11.3057 14.4971C11.148 14.498 10.9796 14.5 10.7998 14.5H5.2002C5.02008 14.5 4.85127 14.498 4.69336 14.4971C4.68459 14.4975 4.67588 14.5 4.66699 14.5C4.65655 14.5 4.64603 14.4967 4.63574 14.4961C4.33432 14.4937 4.07289 14.4893 3.8457 14.4707C3.48136 14.4409 3.16133 14.3784 2.86523 14.2275C2.39483 13.9879 2.01214 13.6052 1.77246 13.1348C1.62164 12.8387 1.55907 12.5186 1.5293 12.1543C1.5 11.7957 1.5 11.3516 1.5 10.7998V5.2002C1.5 4.64841 1.5 4.20428 1.5293 3.8457C1.55907 3.48137 1.62164 3.16132 1.77246 2.86523C2.01215 2.39484 2.39484 2.01214 2.86523 1.77246C3.16132 1.62164 3.48136 1.55907 3.8457 1.5293C4.07288 1.51074 4.33433 1.50628 4.63574 1.50391C4.64603 1.50327 4.65655 1.5 4.66699 1.5C4.67588 1.50001 4.68459 1.50247 4.69336 1.50293C4.85127 1.50197 5.02008 1.5 5.2002 1.5H9.7832ZM5.33594 9.17383C5.2559 9.18038 5.24689 9.19013 5.25781 9.18457C5.22646 9.20055 5.20055 9.22646 5.18457 9.25781C5.19011 9.24693 5.18038 9.25598 5.17383 9.33594C5.1668 9.42202 5.16699 9.53848 5.16699 9.7334V13.499C5.17793 13.499 5.18913 13.5 5.2002 13.5H10.7998C10.8109 13.5 10.8221 13.499 10.833 13.499V9.7334C10.833 9.53848 10.8332 9.42202 10.8262 9.33594C10.8196 9.25598 10.8099 9.24693 10.8154 9.25781C10.7995 9.22646 10.7735 9.20055 10.7422 9.18457C10.7531 9.19013 10.7441 9.18038 10.6641 9.17383C10.578 9.16679 10.4615 9.16699 10.2666 9.16699H5.7334C5.53847 9.16699 5.42202 9.16679 5.33594 9.17383ZM3.92676 2.52539C3.62472 2.55009 3.45091 2.59614 3.31934 2.66309C3.0371 2.80689 2.8069 3.0371 2.66309 3.31934C2.59614 3.45091 2.55009 3.62473 2.52539 3.92676C2.50019 4.23517 2.5 4.63191 2.5 5.2002V10.7998C2.5 11.3681 2.50019 11.7648 2.52539 12.0732C2.55009 12.3753 2.59614 12.5491 2.66309 12.6807C2.80689 12.9629 3.0371 13.1931 3.31934 13.3369C3.45091 13.4039 3.62471 13.4499 3.92676 13.4746C4.0012 13.4807 4.08114 13.4847 4.16699 13.4883V9.7334C4.16699 9.55502 4.16661 9.39111 4.17773 9.25488C4.18934 9.1128 4.21572 8.95724 4.29395 8.80371C4.4058 8.58422 4.58421 8.40579 4.80371 8.29395C4.95724 8.21572 5.1128 8.18934 5.25488 8.17773C5.39111 8.16661 5.55501 8.16699 5.7334 8.16699H10.2666C10.445 8.16699 10.6089 8.16661 10.7451 8.17773C10.8872 8.18934 11.0428 8.21572 11.1963 8.29395C11.4158 8.40579 11.5942 8.58422 11.7061 8.80371C11.7843 8.95724 11.8107 9.1128 11.8223 9.25488C11.8334 9.39111 11.833 9.55502 11.833 9.7334V13.4883C11.9189 13.4847 11.9988 13.4807 12.0732 13.4746C12.3753 13.4499 12.5491 13.4039 12.6807 13.3369C12.9629 13.1931 13.1931 12.9629 13.3369 12.6807C13.4039 12.5491 13.4499 12.3753 13.4746 12.0732C13.4998 11.7648 13.5 11.3681 13.5 10.7998V6.2168C13.5 5.86736 13.4963 5.77386 13.4766 5.69141C13.4561 5.60639 13.4226 5.52475 13.377 5.4502C13.3326 5.3779 13.2686 5.30964 13.0215 5.0625L11.833 3.87402V4.2666C11.833 4.44498 11.8334 4.60889 11.8223 4.74512C11.8107 4.8872 11.7843 5.04276 11.7061 5.19629C11.5942 5.41579 11.4158 5.59421 11.1963 5.70605C11.0428 5.78429 10.8872 5.81066 10.7451 5.82227C10.6089 5.83339 10.445 5.83301 10.2666 5.83301H5.7334C5.55501 5.83301 5.39111 5.83339 5.25488 5.82227C5.11279 5.81066 4.95725 5.78429 4.80371 5.70605C4.58421 5.5942 4.40579 5.41579 4.29395 5.19629C4.21572 5.04276 4.18934 4.8872 4.17773 4.74512C4.16661 4.60889 4.16699 4.44498 4.16699 4.2666V2.51074C4.08112 2.51428 4.00121 2.51931 3.92676 2.52539ZM5.16699 4.2666C5.16699 4.46151 5.1668 4.57798 5.17383 4.66406C5.18038 4.7441 5.19013 4.75311 5.18457 4.74219C5.20055 4.77354 5.22646 4.79945 5.25781 4.81543C5.24691 4.80988 5.25593 4.81962 5.33594 4.82617C5.42202 4.83321 5.53846 4.83301 5.7334 4.83301H10.2666C10.4615 4.83301 10.578 4.83321 10.6641 4.82617C10.7441 4.81962 10.7531 4.80988 10.7422 4.81543C10.7735 4.79945 10.7995 4.77354 10.8154 4.74219C10.8099 4.75311 10.8196 4.7441 10.8262 4.66406C10.8332 4.57798 10.833 4.46151 10.833 4.2666V2.87598C10.668 2.71261 10.6108 2.66043 10.5498 2.62305C10.4752 2.57736 10.3936 2.54385 10.3086 2.52344C10.2261 2.50368 10.1327 2.5 9.7832 2.5H5.16699V4.2666Z" fill="#263238"/>
 </svg>

package/src/assets/svgIcons/subtract_thin_icon.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 7.5C14.2761 7.5 14.5 7.72386 14.5 8C14.5 8.27614 14.2761 8.5 14 8.5H2C1.72386 8.5 1.5 8.27614 1.5 8C1.5 7.72386 1.72386 7.5 2 7.5H14Z" fill="#263238"/>
+</svg>

package/src/assets/svgIcons/undo.svg

@@ -1,6 +1,3 @@
-<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.48096 2H3.48096V4H9.48096V2Z" fill="white"/>
-<path d="M9.48096 8H5.48096V10H9.48096V8Z" fill="white"/>
-<path d="M3.48096 5.92321L0.519349 2.96161L3.48096 0L3.48096 5.92321Z" fill="white"/>
-<path d="M6.01609 8C6.70771 9.1956 8.00039 10 9.48096 10C11.6901 10 13.481 8.20914 13.481 6C13.481 3.79086 11.6901 2 9.48096 2C8.00039 2 6.7077 2.8044 6.01609 4H9.48096C10.5855 4 11.481 4.89543 11.481 6C11.481 7.10457 10.5855 8 9.48096 8H6.01609Z" fill="white"/>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.64648 1.64655C4.84173 1.4513 5.15825 1.45133 5.35352 1.64655C5.54878 1.84181 5.54878 2.15831 5.35352 2.35358L3.20703 4.50006H9.5C12.2614 4.50006 14.5 6.73864 14.5 9.50006C14.5 12.2614 12.2614 14.5001 9.5 14.5001H2C1.72397 14.5 1.50005 14.2761 1.5 14.0001C1.5 13.724 1.72394 13.5002 2 13.5001H9.5C11.7091 13.5001 13.5 11.7092 13.5 9.50006C13.5 7.29092 11.7091 5.50006 9.5 5.50006H3.20703L5.35352 7.64655C5.54878 7.84181 5.54878 8.15831 5.35352 8.35358C5.15824 8.54871 4.8417 8.54879 4.64648 8.35358L1.64648 5.35358C1.45132 5.15836 1.45137 4.8418 1.64648 4.64655L4.64648 1.64655Z" fill="#263238"/>
 </svg>

package/src/components/buttons/buttonIcon/index.vue

@@ -212,11 +212,7 @@
     }};
     border: ${(props) => {
       const variantStyles = getVariantStyles(props)
-      return resolveButtonBorder(
-        variantStyles,
-        props,
-        getButtonState(props)
-      )
+      return resolveButtonBorder(variantStyles, props, getButtonState(props))
     }};
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
     user-select: none;
@@ -410,7 +406,7 @@
         ? props.theme.colors.disabled
         : props.theme.semanticColors.red[500]};
     color: ${(props) => props.theme.colors.white};
-    font-weight: 700;
+    font-weight: 500;
     transform: rotate(20deg);
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
   `

package/src/components/buttons/mainButton/index.vue

@@ -222,7 +222,7 @@
         ? props.theme.colors.disabled
         : props.theme.semanticColors.red[500]};
     color: ${(props) => props.theme.colors.white};
-    font-weight: 700;
+    font-weight: 500;
     transform: rotate(20deg);
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
   `

package/src/components/inputs/colorSelector/ColorSelector.stories.js

@@ -0,0 +1,78 @@
+import { useArgs } from '@storybook/preview-api'
+import { action } from '@storybook/addon-actions'
+import defaultProps from './defaultProps'
+import ColorSelector from './index.vue'
+import {
+  PANEL_FILL_COLORS,
+  TRANSPARENT_COLOR,
+} from '@/constants/colorPalettes.js'
+
+export default {
+  title: 'Components/Inputs/ColorSelector',
+  component: ColorSelector,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['default', 'compact'],
+    },
+  },
+}
+
+// import ColorSelector from "@eturnity/eturnity_reusable_components/src/components/inputs/colorSelector"
+// <ColorSelector
+//   :colors="colors"
+//   :selected-color="selectedColor"
+//   data-id="my_color_selector"
+//   label="Color"
+//   size="default"
+//   @color-change="onColorChange"
+// />
+
+const Template = (args) => {
+  const [currentArgs, updateArgs] = useArgs()
+
+  const handleColorChange = (color) => {
+    action('color-change')(color)
+    updateArgs({ selectedColor: color })
+  }
+
+  return {
+    components: { ColorSelector },
+    setup() {
+      return { args: currentArgs, handleColorChange }
+    },
+    template: `
+      <div style="padding: 16px; background: #263238;">
+        <ColorSelector
+          v-bind="args"
+          @color-change="handleColorChange"
+        />
+      </div>
+    `,
+  }
+}
+
+export const Default = Template.bind({})
+Default.args = {
+  ...defaultProps,
+}
+
+export const WithTransparent = Template.bind({})
+WithTransparent.args = {
+  ...defaultProps,
+  colors: PANEL_FILL_COLORS,
+  selectedColor: TRANSPARENT_COLOR,
+}
+
+export const Compact = Template.bind({})
+Compact.args = {
+  ...defaultProps,
+  size: 'compact',
+}
+
+export const WithoutCustomPicker = Template.bind({})
+WithoutCustomPicker.args = {
+  ...defaultProps,
+  showCustomPicker: false,
+}

package/src/components/inputs/colorSelector/colorSelector.spec.js

@@ -0,0 +1,73 @@
+import { mount } from '@vue/test-utils'
+import ColorSelector from './index.vue'
+import defaultProps from './defaultProps'
+import theme from '@/assets/theme'
+import { TRANSPARENT_COLOR } from '@/constants/colorPalettes.js'
+
+jest.mock('@/components/icon/iconCache.mjs', () => ({
+  fetchIcon: jest.fn(() => Promise.resolve('mocked-icon-url.svg')),
+}))
+
+jest.mock('@/components/icon', () => ({
+  name: 'Icon',
+  template: '<div class="mock-icon" />',
+  props: ['name', 'color', 'size', 'cursor'],
+}))
+
+describe('ColorSelector', () => {
+  const colors = ['#000000', '#ff0000', TRANSPARENT_COLOR]
+
+  const mountSelector = (props = {}) =>
+    mount(ColorSelector, {
+      props: {
+        colors,
+        selectedColor: colors[0],
+        dataId: 'test_color_selector',
+        ...props,
+      },
+      global: {
+        provide: { theme },
+      },
+    })
+
+  it('renders a swatch per color and the custom picker by default', () => {
+    const wrapper = mountSelector()
+    expect(wrapper.findAll('[data-test-id^="color_selector_swatch_"]')).toHaveLength(
+      colors.length
+    )
+    expect(wrapper.find('[data-test-id="color_selector_custom"]').exists()).toBe(
+      true
+    )
+  })
+
+  it('emits color-change when a preset swatch is clicked', async () => {
+    const wrapper = mountSelector()
+    await wrapper.find('[data-test-id="color_selector_swatch_1"]').trigger('click')
+    expect(wrapper.emitted('color-change')).toBeTruthy()
+    expect(wrapper.emitted('color-change')[0]).toEqual([colors[1]])
+  })
+
+  it('emits color-change when the native color input changes', async () => {
+    const wrapper = mountSelector({ selectedColor: '#123456' })
+    const input = wrapper.find('[data-test-id="color_selector_native_input"]')
+    await input.setValue('#abcdef')
+    expect(wrapper.emitted('color-change')).toBeTruthy()
+    expect(wrapper.emitted('color-change').at(-1)).toEqual(['#abcdef'])
+  })
+
+  it('hides the custom picker when showCustomPicker is false', () => {
+    const wrapper = mountSelector({ showCustomPicker: false })
+    expect(wrapper.find('[data-test-id="color_selector_custom"]').exists()).toBe(
+      false
+    )
+    expect(
+      wrapper.find('[data-test-id="color_selector_native_input"]').exists()
+    ).toBe(false)
+  })
+
+  it('sets data-id on swatches when dataId is provided', () => {
+    const wrapper = mountSelector()
+    const swatch = wrapper.find('[data-test-id="color_selector_swatch_0"]')
+    expect(swatch.attributes('data-id')).toBe('test_color_selector_color_0')
+  })
+})

package/src/components/inputs/colorSelector/defaultProps.js

@@ -0,0 +1,11 @@
+import { THEME_COLORS } from '@/constants/colorPalettes.js'
+
+export default {
+  colors: THEME_COLORS,
+  selectedColor: THEME_COLORS[0],
+  label: '',
+  dataId: '',
+  dataQaId: '',
+  size: 'default',
+  showCustomPicker: true,
+}

package/src/components/inputs/colorSelector/index.vue

@@ -0,0 +1,224 @@
+<template>
+  <ColorContainer>
+    <LabelContainer v-if="label">
+      <label>{{ label }}</label>
+    </LabelContainer>
+    <ColorsWrapper>
+      <ColorRadio
+        v-for="(color, index) in colors"
+        :key="index"
+        :color="color"
+        :data-id="swatchDataId(index)"
+        :data-qa-id="swatchDataQaId(index)"
+        :data-test-id="`color_selector_swatch_${index}`"
+        :is-selected="index === colorIndex"
+        :size="size"
+        @click="changeColorIndex(index)"
+      >
+        <CrossedIcon v-if="color === TRANSPARENT_COLOR" :size="size">
+          <Icon
+            :color="colorIndex === index ? 'white' : 'grey1'"
+            cursor="default"
+            name="cross"
+            size="14px"
+          />
+        </CrossedIcon>
+      </ColorRadio>
+      <ColorRadioCustom
+        v-if="showCustomPicker"
+        :color="colorIndex >= 0 ? 'transparent' : selectedColor"
+        :data-id="customDataId"
+        :data-qa-id="customDataQaId"
+        data-test-id="color_selector_custom"
+        :is-selected="colorIndex < 0"
+        :size="size"
+        @click="openColorPicker"
+      >
+        <Icon
+          :color="colorIndex < 0 ? 'white' : 'grey1'"
+          cursor="default"
+          name="add_icon"
+          size="14px"
+        />
+      </ColorRadioCustom>
+      <input
+        v-if="showCustomPicker"
+        ref="colorPicker"
+        data-test-id="color_selector_native_input"
+        :style="nativeInputStyle"
+        type="color"
+        :value="selectedColor"
+        @change="defineCustomColor"
+      />
+    </ColorsWrapper>
+  </ColorContainer>
+</template>
+
+<script>
+  import styled from 'vue3-styled-components'
+  import Icon from '../../../components/icon'
+  import { TRANSPARENT_COLOR } from '../../../constants/colorPalettes.js'
+
+  const swatchProps = { isSelected: Boolean, color: String, size: String }
+
+  const swatchSize = (size) => (size === 'compact' ? '24px' : '34px')
+
+  const CrossedIcon = styled('div', { size: String })`
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  `
+
+  const ColorRadio = styled('div', swatchProps)`
+    position: relative;
+    width: ${(props) => swatchSize(props.size)};
+    height: ${(props) => swatchSize(props.size)};
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px solid
+      ${(props) =>
+        props.isSelected
+          ? 'white'
+          : props.size === 'compact'
+            ? props.theme.colors.grey2
+            : 'transparent'};
+    border-radius: 4px;
+    background-color: ${(props) => props.color};
+    color: white;
+    cursor: pointer;
+
+    &:hover {
+      border-color: white;
+    }
+  `
+
+  const ColorRadioCustom = styled('div', swatchProps)`
+    border: 2px solid
+      ${(props) => (props.isSelected ? 'white' : props.theme.colors.grey1)};
+    border-radius: 4px;
+    background-color: ${(props) => props.color};
+    color: ${(props) =>
+      props.isSelected ? 'white' : props.theme.colors.grey1};
+    display: inline-flex;
+    width: ${(props) => swatchSize(props.size)};
+    height: ${(props) => swatchSize(props.size)};
+    justify-content: center;
+    vertical-align: top;
+    cursor: pointer;
+    align-items: center;
+  `
+
+  const ColorContainer = styled('div')`
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  `
+
+  const ColorsWrapper = styled('div')`
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    position: relative;
+  `
+
+  const LabelContainer = styled('div')`
+    font-size: 13px;
+    font-weight: 500;
+  `
+
+  const nativeInputStyle = {
+    width: 0,
+    height: 0,
+    opacity: 0,
+    position: 'absolute',
+  }
+
+  export default {
+    name: 'ColorSelector',
+
+    components: {
+      ColorRadio,
+      ColorRadioCustom,
+      ColorContainer,
+      ColorsWrapper,
+      CrossedIcon,
+      Icon,
+      LabelContainer,
+    },
+
+    props: {
+      colors: {
+        type: Array,
+        required: true,
+      },
+      selectedColor: {
+        type: String,
+        default: '',
+      },
+      label: {
+        type: String,
+        default: '',
+      },
+      dataId: {
+        type: String,
+        default: '',
+      },
+      dataQaId: {
+        type: String,
+        default: '',
+      },
+      size: {
+        type: String,
+        default: 'default',
+        validator: (value) => ['default', 'compact'].includes(value),
+      },
+      showCustomPicker: {
+        type: Boolean,
+        default: true,
+      },
+    },
+
+    emits: ['color-change'],
+
+    data() {
+      return {
+        TRANSPARENT_COLOR,
+        nativeInputStyle,
+      }
+    },
+
+    computed: {
+      colorIndex() {
+        return this.colors.findIndex((color) => color === this.selectedColor)
+      },
+      customDataId() {
+        return this.dataId ? `${this.dataId}_custom` : undefined
+      },
+      customDataQaId() {
+        const id = this.dataQaId || this.dataId
+        return id ? `${id}_custom` : undefined
+      },
+    },
+
+    methods: {
+      swatchDataId(index) {
+        return this.dataId ? `${this.dataId}_color_${index}` : undefined
+      },
+      swatchDataQaId(index) {
+        const id = this.dataQaId || this.dataId
+        return id ? `${id}_color_${index}` : undefined
+      },
+      changeColorIndex(index) {
+        this.$emit('color-change', this.colors[index])
+      },
+      defineCustomColor(event) {
+        this.$emit('color-change', event.target.value)
+      },
+      openColorPicker() {
+        this.$refs.colorPicker?.click()
+      },
+    },
+  }
+</script>

package/src/components/inputs/inputNumber/index.vue

@@ -299,14 +299,14 @@
       props.isInfoBorder
         ? '1px solid ' + props.theme.semanticColors.blue[500]
         : props.isError
-        ? '1px solid ' + props.theme.colors.red
-        : props.noBorder
-        ? 'none'
-        : props.borderColor
-        ? props.theme.colors[props.borderColor]
-          ? '1px solid ' + props.theme.colors[props.borderColor]
-          : '1px solid ' + props.borderColor
-        : '1px solid ' + props.theme.colors.grey4};
+          ? '1px solid ' + props.theme.colors.red
+          : props.noBorder
+            ? 'none'
+            : props.borderColor
+              ? props.theme.colors[props.borderColor]
+                ? '1px solid ' + props.theme.colors[props.borderColor]
+                : '1px solid ' + props.borderColor
+              : '1px solid ' + props.theme.colors.grey4};
     height: ${(props) => props.inputHeight};
     max-height: ${(props) => props.inputHeight};
     padding: ${({ colorMode }) =>
@@ -322,14 +322,14 @@
       showArrowControls
         ? '40px'
         : colorMode === 'transparent'
-        ? '0'
-        : slotSize
-        ? isError && !showLinearUnitName && !isBorderErrorOnly
-          ? 'calc(' + slotSize + ' + 24px)'
-          : 'calc(' + slotSize + ' + 10px)'
-        : isError && !showLinearUnitName && !isBorderErrorOnly
-        ? '24px'
-        : '5px'};
+          ? '0'
+          : slotSize
+            ? isError && !showLinearUnitName && !isBorderErrorOnly
+              ? 'calc(' + slotSize + ' + 24px)'
+              : 'calc(' + slotSize + ' + 10px)'
+            : isError && !showLinearUnitName && !isBorderErrorOnly
+              ? '24px'
+              : '5px'};
     border-radius: ${(props) =>
       props.isInteractive && props.alignItems != 'vertical'
         ? '0 4px 4px 0'
@@ -342,22 +342,22 @@
       props.isError
         ? props.theme.colors.grey6
         : props.isDisabled
-        ? props.colorMode === 'transparent'
-          ? props.theme.colors.white
-          : props.theme.colors.grey2
-        : props.fontColor
-        ? props.fontColor + ' !important'
-        : props.theme.colors.black};
+          ? props.colorMode === 'transparent'
+            ? props.theme.colors.white
+            : props.theme.colors.grey2
+          : props.fontColor
+            ? props.fontColor + ' !important'
+            : props.theme.colors.black};
     background-color: ${(props) =>
       props.readOnly
         ? props.theme.semanticColors.grey[300]
         : props.isDisabled
-        ? props.colorMode === 'transparent'
-          ? 'transparent'
-          : props.theme.colors.grey5
-        : props.backgroundColor
-        ? props.backgroundColor + ' !important'
-        : props.theme.colors.white};
+          ? props.colorMode === 'transparent'
+            ? 'transparent'
+            : props.theme.colors.grey5
+          : props.backgroundColor
+            ? props.backgroundColor + ' !important'
+            : props.theme.colors.white};
     width: ${(props) =>
       props.inputWidth && !props.hasLabelSlot ? props.inputWidth : '100%'};
     min-width: ${(props) => (props.minWidth ? props.minWidth : 'unset')};
@@ -435,8 +435,8 @@
         props.isError
           ? props.theme.colors.red
           : props.hasLength
-          ? props.theme.colors.black
-          : props.theme.colors.mediumGray};
+            ? props.theme.colors.black
+            : props.theme.colors.mediumGray};
     position: absolute;
     right: 10px;
     top: 10px;
@@ -446,8 +446,8 @@
       props.isError
         ? props.theme.colors.red
         : props.hasLength
-        ? props.theme.colors.black
-        : props.theme.colors.mediumGray};
+          ? props.theme.colors.black
+          : props.theme.colors.mediumGray};
   `
 
   const SlotContainer = styled('span', inputProps)`
@@ -457,8 +457,8 @@
         props.isError
           ? props.theme.colors.red
           : props.hasLength
-          ? props.theme.colors.black
-          : props.theme.colors.mediumGray};
+            ? props.theme.colors.black
+            : props.theme.colors.mediumGray};
     position: absolute;
     width: ${(props) =>
       props.slotSize ? 'calc(' + props.slotSize + ' - 10px)' : 'fit-content'};
@@ -469,8 +469,8 @@
       props.isError
         ? props.theme.colors.red
         : props.hasLength
-        ? props.theme.colors.black
-        : props.theme.colors.mediumGray};
+          ? props.theme.colors.black
+          : props.theme.colors.mediumGray};
   `
 
   const LabelWrapper = styled('div', inputProps)`
@@ -489,14 +489,14 @@
       props.alignItems == 'vertical'
         ? 'none'
         : props.isError
-        ? '1px solid ' + props.theme.colors.red
-        : props.noBorder
-        ? 'none'
-        : props.borderColor
-        ? props.theme.colors[props.borderColor]
-          ? '1px solid ' + props.theme.colors[props.borderColor]
-          : '1px solid ' + props.borderColor
-        : '1px solid ' + props.theme.colors.grey4};
+          ? '1px solid ' + props.theme.colors.red
+          : props.noBorder
+            ? 'none'
+            : props.borderColor
+              ? props.theme.colors[props.borderColor]
+                ? '1px solid ' + props.theme.colors[props.borderColor]
+                : '1px solid ' + props.borderColor
+              : '1px solid ' + props.theme.colors.grey4};
     border-radius: 4px 0 0 4px;
     border-right: none;
   `
@@ -952,8 +952,8 @@
             this.defaultNumber || this.defaultNumber === 0
               ? this.defaultNumber
               : this.minNumber || this.minNumber === 0
-              ? this.minNumber
-              : value
+                ? this.minNumber
+                : value
         }
         if (!this.allowNegative) {
           value = Math.abs(value)
@@ -1093,10 +1093,10 @@
           value || value === 0
             ? value
             : this.defaultNumber
-            ? this.defaultNumber
-            : this.minNumber || this.minNumber === 0
-            ? this.minNumber
-            : ''
+              ? this.defaultNumber
+              : this.minNumber || this.minNumber === 0
+                ? this.minNumber
+                : ''
         if (adjustedMinValue || adjustedMinValue === 0) {
           let input = this.numberToStringEnabled
             ? numberToString({
@@ -1125,10 +1125,10 @@
           value || value === 0
             ? value
             : this.defaultNumber
-            ? this.defaultNumber
-            : this.minNumber || this.minNumber === 0
-            ? this.minNumber
-            : ''
+              ? this.defaultNumber
+              : this.minNumber || this.minNumber === 0
+                ? this.minNumber
+                : ''
         if (adjustedMinValue || adjustedMinValue === 0) {
           let input = this.numberToStringEnabled
             ? numberToString({

package/src/components/inputs/switchField/switchField.stories.js

@@ -18,6 +18,7 @@ export default {
   argTypes: {
     label: { control: 'text' },
     size: { control: 'select', options: ['small', 'medium'] },
+    height: { control: 'text' },
     disabled: { control: 'boolean' },
     colorMode: { control: 'select', options: ['light', 'dark'] },
     alignItems: { control: 'select', options: ['horizontal', 'vertical'] },

package/src/components/tag/conversionTag/index.vue

@@ -29,7 +29,7 @@
 
   const TextContainer = styled.div`
     font-size: 10px;
-    font-weight: 700;
+    font-weight: 500;
     color: ${(props) => props.theme.semanticColors.teal[800]};
   `
 

package/src/constants/colorPalettes.js

@@ -0,0 +1,71 @@
+import theme from '@/assets/theme.js'
+
+/** Fully transparent fill (used with cross icon in ColorSelector). */
+export const TRANSPARENT_COLOR = '#ffffff00'
+
+export const THEME_COLORS = [
+  theme.colors.black,
+  theme.colors.grey1,
+  theme.colors.blue,
+  theme.colors.red,
+  theme.colors.green,
+  theme.colors.yellow,
+]
+
+/** Shared palette for blueprint arrows and 3D roof plan items. */
+export const DRAWING_ITEM_COLORS = [
+  theme.semanticColors.red[400],
+  theme.semanticColors.red[600],
+  theme.semanticColors.blue[400],
+  theme.semanticColors.blue[600],
+  theme.semanticColors.green[400],
+  theme.semanticColors.green[600],
+  theme.semanticColors.purple[400],
+  theme.semanticColors.purple[600],
+  theme.semanticColors.yellow[400],
+  theme.semanticColors.yellow[600],
+  theme.semanticColors.teal[400],
+  theme.semanticColors.grey[400],
+  theme.colors.black,
+  theme.colors.white,
+]
+
+export const ARROW_COLORS = DRAWING_ITEM_COLORS
+
+export const ROOF_PLAN_ITEM_COLORS = DRAWING_ITEM_COLORS
+
+export const PANEL_FILL_COLORS = [
+  TRANSPARENT_COLOR,
+  theme.semanticColors.red[400],
+  theme.semanticColors.red[600],
+  theme.semanticColors.blue[400],
+  theme.semanticColors.blue[600],
+  theme.semanticColors.green[400],
+  theme.semanticColors.green[600],
+  theme.semanticColors.purple[400],
+  theme.semanticColors.purple[600],
+  theme.semanticColors.yellow[400],
+  theme.semanticColors.yellow[600],
+  theme.semanticColors.teal[400],
+  theme.semanticColors.grey[400],
+  theme.colors.black,
+  theme.colors.white,
+]
+
+export const PANEL_STROKE_COLORS = [
+  TRANSPARENT_COLOR,
+  theme.semanticColors.red[400],
+  theme.semanticColors.red[600],
+  theme.semanticColors.blue[400],
+  theme.semanticColors.blue[600],
+  theme.semanticColors.green[400],
+  theme.semanticColors.green[600],
+  theme.semanticColors.purple[400],
+  theme.semanticColors.purple[600],
+  theme.semanticColors.yellow[400],
+  theme.semanticColors.yellow[600],
+  theme.semanticColors.teal[400],
+  theme.semanticColors.grey[400],
+  theme.colors.black,
+  theme.colors.white,
+]