@eturnity/eturnity_reusable_components 9.10.2 → 9.10.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/dist/index.es3.js +35 -51
  2. package/package.json +1 -1
  3. package/src/assets/svgIcons/add_roof.svg +3 -0
  4. package/src/assets/svgIcons/arrow_tool.svg +3 -0
  5. package/src/assets/svgIcons/circle.svg +9 -0
  6. package/src/assets/svgIcons/collapse_all_corners.svg +12 -0
  7. package/src/assets/svgIcons/compass_with_north.svg +12 -0
  8. package/src/assets/svgIcons/cursor_tool.svg +3 -0
  9. package/src/assets/svgIcons/hide.svg +3 -0
  10. package/src/assets/svgIcons/layer_back.svg +6 -0
  11. package/src/assets/svgIcons/layer_backward.svg +4 -0
  12. package/src/assets/svgIcons/layer_forward.svg +4 -0
  13. package/src/assets/svgIcons/layer_front.svg +5 -0
  14. package/src/assets/svgIcons/polygon.svg +3 -0
  15. package/src/assets/svgIcons/technical_plan.svg +3 -0
  16. package/src/assets/svgIcons/upload_image_2.svg +3 -0
  17. package/src/assets/theme.js +35 -51
  18. package/src/components/buttons/buttonIcon/index.vue +28 -10
  19. package/src/components/buttons/collection/ButtonIconCollection.stories.js +31 -0
  20. package/src/components/buttons/collection/index.vue +355 -0
  21. package/src/components/inputs/select/index.vue +1 -1
  22. package/src/components/inputs/textAreaInput/index.vue +12 -1
  23. package/src/components/modals/modal/index.vue +6 -2
  24. package/src/components/threeDots/index.vue +77 -23
package/dist/index.es3.js CHANGED
@@ -71,7 +71,7 @@ const theme = (() => {
71
71
  disabled: "#dfe1e1",
72
72
  transparentWhite2: "#ffffff32",
73
73
  transparentWhite1: "#ffffff16",
74
- transparentBlack1: "#263238e6",
74
+ transparentBlack1: "#162228e6",
75
75
  transparentBlack2: "#263238e5",
76
76
  transparentBlue1: "#20a4cae6",
77
77
  blueElectric: "#66dffa",
@@ -177,6 +177,39 @@ const theme = (() => {
177
177
  700: "#993434",
178
178
  800: "#662222",
179
179
  900: "#331111"
180
+ },
181
+ transparentWhite: {
182
+ 100: "#ffffff24",
183
+ 200: "#ffffff48",
184
+ 300: "#ffffff64",
185
+ 400: "#ffffff80",
186
+ 500: "#ffffff96",
187
+ 600: "#ffffffb4",
188
+ 700: "#ffffffd4",
189
+ 800: "#ffffffe6",
190
+ 900: "#fffffffa"
191
+ },
192
+ transparentBlack: {
193
+ 100: "#00000024",
194
+ 200: "#00000048",
195
+ 300: "#00000064",
196
+ 400: "#00000080",
197
+ 500: "#00000096",
198
+ 600: "#000000b4",
199
+ 700: "#000000d4",
200
+ 800: "#000000e6",
201
+ 900: "#000000fa"
202
+ },
203
+ transparentTeal: {
204
+ 100: "#6E8E9E24",
205
+ 200: "#6E8E9E48",
206
+ 300: "#6E8E9E64",
207
+ 400: "#6E8E9E80",
208
+ 500: "#6E8E9E96",
209
+ 600: "#6E8E9Eb4",
210
+ 700: "#6E8E9Ed4",
211
+ 800: "#6E8E9Ee6",
212
+ 900: "#6E8E9Efa"
180
213
  }
181
214
  };
182
215
  const chartGradients = {
@@ -635,55 +668,6 @@ const theme = (() => {
635
668
  }
636
669
  }
637
670
  },
638
- tertiary: {
639
- // type
640
- main: {
641
- // variant: this is the default variant
642
- default: {
643
- backgroundColor: "transparent",
644
- textColor: semanticColors.purple[50],
645
- borderColor: semanticColors.teal[500]
646
- },
647
- hover: {
648
- backgroundColor: semanticColors.teal[600],
649
- textColor: semanticColors.purple[50],
650
- borderColor: semanticColors.teal[400]
651
- },
652
- active: {
653
- backgroundColor: semanticColors.teal[700],
654
- textColor: semanticColors.purple[50],
655
- borderColor: semanticColors.teal[300]
656
- },
657
- disabled: {
658
- textColor: semanticColors.grey[600],
659
- backgroundColor: semanticColors.grey[500],
660
- borderColor: semanticColors.grey[800]
661
- }
662
- },
663
- cancel: {
664
- // variant
665
- default: {
666
- backgroundColor: semanticColors.teal[200],
667
- textColor: semanticColors.red[400],
668
- borderColor: semanticColors.teal[500]
669
- },
670
- hover: {
671
- backgroundColor: semanticColors.red[700],
672
- textColor: semanticColors.red[700],
673
- borderColor: semanticColors.teal[400]
674
- },
675
- active: {
676
- backgroundColor: semanticColors.red[600],
677
- textColor: semanticColors.red[200],
678
- borderColor: semanticColors.teal[300]
679
- },
680
- disabled: {
681
- textColor: semanticColors.grey[600],
682
- backgroundColor: semanticColors.grey[500],
683
- borderColor: semanticColors.grey[800]
684
- }
685
- }
686
- },
687
671
  ghost: {
688
672
  // type
689
673
  main: {
@@ -776,7 +760,7 @@ const theme = (() => {
776
760
  },
777
761
  tiny: {
778
762
  padding: "2px 5px",
779
- fontSize: "10px",
763
+ fontSize: "8px",
780
764
  iconWidth: "18px"
781
765
  }
782
766
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eturnity/eturnity_reusable_components",
3
- "version": "9.10.2",
3
+ "version": "9.10.3",
4
4
  "files": [
5
5
  "dist",
6
6
  "src"
package/src/assets/svgIcons/add_roof.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M10.5 7C10.6211 7 10.738 7.04427 10.8291 7.12402L14.8291 10.624C14.9376 10.719 15 10.8558 15 11V15H14V11.5H10V15H9V11.2256L5.5 8.16309L2 11.2256V15H1V11C1 10.8558 1.06243 10.719 1.1709 10.624L5.1709 7.12402L5.24316 7.07031C5.32023 7.02425 5.40911 7 5.5 7H10.5ZM9.6875 10.5H13.1699L10.3125 8H6.83008L9.6875 10.5ZM12.5 1C12.7761 1 13 1.22386 13 1.5V3H14.5C14.7761 3 15 3.22386 15 3.5C15 3.77614 14.7761 4 14.5 4H13V5.5C13 5.77614 12.7761 6 12.5 6C12.2239 6 12 5.77614 12 5.5V4H10.5C10.2239 4 10 3.77614 10 3.5C10 3.22386 10.2239 3 10.5 3H12V1.5C12 1.22386 12.2239 1 12.5 1Z" fill="black"/>
3
+ </svg>
package/src/assets/svgIcons/arrow_tool.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M11.6465 5.64651C11.8417 5.45125 12.1583 5.45125 12.3535 5.64651L14.6363 7.92931C14.6754 7.96837 14.6754 8.03168 14.6363 8.07073L12.3535 10.3535C12.1583 10.5488 11.8417 10.5488 11.6465 10.3535C11.4512 10.1583 11.4512 9.84177 11.6465 9.64651L12.793 8.50002H2C1.72386 8.50002 1.5 8.27617 1.5 8.00002C1.5 7.72388 1.72386 7.50002 2 7.50002H12.793L11.6465 6.35354C11.4512 6.15828 11.4512 5.84177 11.6465 5.64651Z" fill="black"/>
3
+ </svg>
package/src/assets/svgIcons/circle.svg ADDED
@@ -0,0 +1,9 @@
1
+ <svg
2
+ width="16"
3
+ height="16"
4
+ viewBox="0 0 16 16"
5
+ fill="none"
6
+ xmlns="http://www.w3.org/2000/svg"
7
+ >
8
+ <circle class="isStroke" cx="8" cy="8" r="6" stroke="white" />
9
+ </svg>
package/src/assets/svgIcons/collapse_all_corners.svg ADDED
@@ -0,0 +1,12 @@
1
+ <svg
2
+ width="16"
3
+ height="16"
4
+ viewBox="0 0 16 16"
5
+ fill="none"
6
+ xmlns="http://www.w3.org/2000/svg"
7
+ >
8
+ <path
9
+ d="M13.6464 14.3535C13.8417 14.5488 14.1582 14.5488 14.3534 14.3535C14.5487 14.1583 14.5487 13.8417 14.3534 13.6465L11.8739 11.167H13.9999C14.2761 11.167 14.4999 10.9431 14.4999 10.667C14.4999 10.3909 14.2761 10.167 13.9999 10.167H10.6669C10.5343 10.167 10.4072 10.2197 10.3134 10.3135C10.2196 10.4072 10.1669 10.5344 10.1669 10.667V14C10.1669 14.2761 10.3908 14.5 10.6669 14.5C10.9084 14.5 11.1104 14.3292 11.1571 14.1016L11.1669 14V11.874L13.6464 14.3535ZM1.64657 1.64657C1.81734 1.4758 2.08045 1.45418 2.2745 1.58212L2.3536 1.64657L4.83309 4.12606V2.00009C4.83309 1.72394 5.05695 1.50009 5.33309 1.50009C5.60924 1.50009 5.83309 1.72394 5.83309 2.00009V5.33309C5.83309 5.60924 5.60924 5.83309 5.33309 5.83309H2.00009C1.72394 5.83309 1.50009 5.60924 1.50009 5.33309C1.50009 5.05695 1.72394 4.83309 2.00009 4.83309H4.12606L1.64657 2.3536L1.58212 2.2745C1.45418 2.08045 1.4758 1.81734 1.64657 1.64657ZM10.1669 2.00009V5.33309C10.1669 5.60924 10.3908 5.83309 10.6669 5.83309H13.9999L14.1015 5.82333C14.3291 5.77656 14.4999 5.57459 14.4999 5.33309C14.4999 5.0916 14.3291 4.88963 14.1015 4.84286L13.9999 4.83309H11.8739L14.3534 2.3536L14.4179 2.2745C14.5458 2.08045 14.5242 1.81734 14.3534 1.64657C14.1827 1.4758 13.9195 1.45418 13.7255 1.58212L13.6464 1.64657L11.1669 4.12606V2.00009C11.1669 1.72394 10.943 1.50009 10.6669 1.50009C10.3908 1.50009 10.1669 1.72394 10.1669 2.00009ZM5.83309 14C5.83309 14.2761 5.60924 14.5 5.33309 14.5C5.05695 14.5 4.83309 14.2761 4.83309 14V11.874L2.3536 14.3535C2.15834 14.5488 1.84183 14.5488 1.64657 14.3535C1.45131 14.1583 1.45131 13.8417 1.64657 13.6465L4.12606 11.167H2.00009C1.72394 11.167 1.50009 10.9431 1.50009 10.667C1.50009 10.3909 1.72394 10.167 2.00009 10.167H5.33309L5.43368 10.1768C5.66165 10.2233 5.83309 10.4253 5.83309 10.667V14Z"
10
+ fill="black"
11
+ />
12
+ </svg>
package/src/assets/svgIcons/compass_with_north.svg ADDED
@@ -0,0 +1,12 @@
1
+ <svg
2
+ width="56"
3
+ height="56"
4
+ viewBox="0 0 56 56"
5
+ fill="none"
6
+ xmlns="http://www.w3.org/2000/svg"
7
+ >
8
+ <path
9
+ d="M28 8C38.8785 8 47.7278 16.6854 47.9932 27.5H49C49.2761 27.5 49.5 27.7239 49.5 28C49.5 28.2761 49.2761 28.5 49 28.5H47.9932C47.7278 39.3146 38.8785 48 28 48C17.1215 48 8.27221 39.3146 8.00684 28.5H7C6.72386 28.5 6.5 28.2761 6.5 28C6.5 27.7239 6.72386 27.5 7 27.5H8.00684C8.27221 16.6854 17.1215 8 28 8ZM28 9C17.6738 9 9.27096 17.2377 9.00586 27.5H10C10.2761 27.5 10.5 27.7239 10.5 28C10.5 28.2761 10.2761 28.5 10 28.5H9.00586C9.27096 38.7623 17.6738 47 28 47C38.3262 47 46.729 38.7623 46.9941 28.5H46C45.7239 28.5 45.5 28.2761 45.5 28C45.5 27.7239 45.7239 27.5 46 27.5H46.9941C46.729 17.2377 38.3262 9 28 9ZM36 45L28 42L20 45L28 9.5L36 45ZM30.0879 5.62012V0H30.9375V7H30.0879L25.9082 1.34961V7H25.0576V0H25.918L30.0879 5.62012Z"
10
+ fill="black"
11
+ />
12
+ </svg>
package/src/assets/svgIcons/cursor_tool.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M2.12586 1.51758C2.30041 1.47862 2.46167 1.51289 2.56239 1.53907C2.68705 1.57149 2.83783 1.62682 2.99598 1.6836L13.454 5.4375L13.7313 5.53809C13.8172 5.57049 13.8956 5.60193 13.9628 5.63281C14.0625 5.67865 14.233 5.76344 14.3514 5.92578L14.3993 6L14.4423 6.0918C14.5166 6.2801 14.5193 6.48948 14.4501 6.67969L14.4091 6.77344C14.2993 6.98824 14.0947 7.09607 13.9823 7.15137C13.916 7.18398 13.8387 7.21734 13.7538 7.25196L13.4794 7.36035L9.08387 9.06934C9.08014 9.07079 9.07651 9.07193 9.07313 9.07324L9.06922 9.08399L7.36024 13.4795C7.28488 13.6733 7.21649 13.8498 7.15125 13.9824C7.10282 14.0809 7.01409 14.25 6.84852 14.3643L6.77332 14.4092C6.56007 14.5181 6.31143 14.5291 6.09168 14.4424L5.99989 14.3994C5.78795 14.2841 5.68507 14.0768 5.6327 13.9629C5.60181 13.8957 5.57037 13.8173 5.53797 13.7314L5.43739 13.4541L1.68348 2.9961C1.62671 2.83794 1.57137 2.68716 1.53895 2.5625C1.50906 2.4475 1.46875 2.25348 1.53895 2.05078L1.57508 1.96387C1.67016 1.76565 1.84052 1.61191 2.05067 1.53907L2.12586 1.51758ZM2.62489 2.65821L6.40223 13.1816C6.4103 13.1609 6.41982 13.1398 6.4286 13.1172L8.13758 8.72168L8.18446 8.60645C8.20547 8.55995 8.23213 8.50814 8.26649 8.45996L8.35535 8.35547C8.38769 8.32313 8.42249 8.29326 8.45985 8.2666L8.53407 8.22071C8.60785 8.18001 8.67963 8.15399 8.72157 8.1377L13.1171 6.42871L13.1815 6.40235L2.65809 2.625C2.64049 2.61868 2.62344 2.6132 2.60731 2.60742C2.61308 2.62356 2.61857 2.6406 2.62489 2.65821Z" fill="black"/>
3
+ </svg>
package/src/assets/svgIcons/hide.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6463 1.64687C13.8415 1.45161 14.158 1.45161 14.3533 1.64687C14.5485 1.84214 14.5486 2.15865 14.3533 2.35391L2.35329 14.3539C2.158 14.5488 1.84139 14.549 1.64626 14.3539C1.45112 14.1588 1.45138 13.8422 1.64626 13.6469L13.6463 1.64687ZM12.8836 5.11563C13.7995 5.91459 14.4411 6.76695 14.784 7.27579C14.8649 7.39593 14.9663 7.5369 15.0164 7.74161C15.0543 7.89723 15.0543 8.10163 15.0164 8.25724C14.9663 8.46184 14.8649 8.60295 14.784 8.72306C14.3933 9.30283 13.6154 10.3289 12.4851 11.2133C11.3529 12.0991 9.84172 12.8615 8.00075 12.8617C7.12047 12.8617 6.31571 12.6864 5.59157 12.4076L6.37771 11.6215C6.88287 11.7732 7.42456 11.8617 8.00075 11.8617C9.55246 11.8615 10.8526 11.2212 11.8689 10.4262C12.8869 9.62964 13.5972 8.69526 13.9549 8.16446C13.9779 8.13026 13.9952 8.10451 14.0095 8.08243C14.0233 8.06112 14.0317 8.04685 14.0369 8.03751C14.042 8.02825 14.0431 8.02419 14.0437 8.02188C14.0442 8.01636 14.0447 8.00803 14.0447 7.99942C14.0447 7.99022 14.0443 7.98164 14.0437 7.97599C14.043 7.97373 14.0412 7.96916 14.0369 7.96134C14.0317 7.95204 14.0232 7.93757 14.0095 7.91641C13.9952 7.89435 13.9779 7.86854 13.9549 7.83438C13.6342 7.35849 13.0289 6.56003 12.1736 5.82559L12.8836 5.11563ZM8.00075 3.13711C8.86271 3.13722 9.65178 3.30592 10.364 3.57461L9.57497 4.36367C9.08377 4.2206 8.5586 4.1372 8.00075 4.13711C6.44861 4.13715 5.1481 4.77844 4.13161 5.57364C3.11363 6.37021 2.40327 7.30363 2.04567 7.83438C2.02263 7.86859 2.0053 7.89433 1.99099 7.91641C1.97725 7.93763 1.96883 7.95202 1.96364 7.96134C1.95926 7.96928 1.95754 7.97371 1.95681 7.97599L1.95583 7.99942C1.95581 8.00799 1.95535 8.01637 1.95583 8.02188C1.9565 8.02418 1.95829 8.02785 1.96364 8.03751C1.96885 8.04687 1.97715 8.06106 1.99099 8.08243C2.0053 8.10451 2.02263 8.13026 2.04567 8.16446C2.3622 8.63423 2.95516 9.4194 3.79274 10.1459L3.08474 10.8539C2.18627 10.0634 1.55538 9.2259 1.21657 8.72306C1.13565 8.60296 1.0343 8.46182 0.984149 8.25724C0.946205 8.10159 0.946199 7.89724 0.984149 7.74161L1.03005 7.59903C1.08333 7.46765 1.15588 7.36586 1.21657 7.27579C1.60719 6.69602 2.38505 5.67 3.5154 4.78555C4.64782 3.89965 6.15949 3.13715 8.00075 3.13711ZM10.449 7.5502C10.478 7.69509 10.4949 7.84526 10.4949 7.99942C10.4946 9.33753 9.34692 10.3691 8.00075 10.3695C7.8838 10.3695 7.76839 10.3592 7.65505 10.3442L8.92751 9.07169C9.05182 8.98063 9.16094 8.87348 9.24783 8.75235L10.449 7.5502ZM8.00075 5.63028C8.09862 5.63031 8.19539 5.63721 8.29079 5.64786L5.54275 8.39591C5.52015 8.26741 5.50567 8.13497 5.50564 7.99942C5.50584 6.66097 6.65421 5.63035 8.00075 5.63028Z" fill="black"/>
3
+ </svg>
package/src/assets/svgIcons/layer_back.svg ADDED
@@ -0,0 +1,6 @@
1
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M8 7.49971C8.27604 7.49971 8.49984 7.7237 8.5 7.99971V12.9597L10.1875 11.6091C10.4031 11.4368 10.7181 11.4718 10.8906 11.6872C11.0631 11.9028 11.028 12.2178 10.8125 12.3903L8.3125 14.3903C8.15281 14.5181 7.93421 14.5339 7.75977 14.4382L7.6875 14.3903L5.1875 12.3903C4.972 12.2178 4.93691 11.9028 5.10938 11.6872C5.28187 11.4718 5.59693 11.4368 5.8125 11.6091L7.5 12.9597V7.99971C7.50016 7.7237 7.72396 7.49971 8 7.49971Z" fill="black"/>
3
+ <path d="M4.2998 6.21748L3.30078 6.63447L6.50098 7.96748C6.50075 7.9781 6.50002 7.98903 6.5 7.99971V9.05146L1.80762 7.09639C1.62141 7.0187 1.5 6.83624 1.5 6.63447C1.50024 6.43286 1.62148 6.25011 1.80762 6.17256L2.99902 5.67549L4.2998 6.21748Z" fill="black"/>
4
+ <path d="M14.1924 6.17256C14.3785 6.25011 14.4998 6.43286 14.5 6.63447C14.5 6.83624 14.3786 7.0187 14.1924 7.09639L9.5 9.05146V7.99971C9.49997 7.9887 9.49829 7.97745 9.49805 7.9665L12.6982 6.63447L11.6992 6.21748L13 5.67549L14.1924 6.17256Z" fill="black"/>
5
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M7.80762 1.03877C7.93065 0.987525 8.06935 0.987525 8.19238 1.03877L14.1924 3.53877C14.3786 3.61643 14.5 3.79888 14.5 4.00068C14.4999 4.2024 14.3786 4.38501 14.1924 4.4626L8.19238 6.9626C8.10012 7.00099 7.99892 7.01014 7.90234 6.99092L7.80762 6.9626L1.80762 4.4626C1.6214 4.38501 1.50014 4.2024 1.5 4.00068C1.5 3.79888 1.62136 3.61643 1.80762 3.53877L7.80762 1.03877ZM3.30078 4.00068L8 5.95869L12.6982 4.00068L8 2.04365L3.30078 4.00068Z" fill="black"/>
6
+ </svg>
package/src/assets/svgIcons/layer_backward.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M8 7.49971C8.27604 7.49971 8.49984 7.7237 8.5 7.99971V12.9597L10.1875 11.6091C10.4031 11.4368 10.7181 11.4718 10.8906 11.6872C11.0631 11.9028 11.028 12.2178 10.8125 12.3903L8.3125 14.3903C8.15281 14.5181 7.93421 14.5339 7.75977 14.4382L7.6875 14.3903L5.1875 12.3903C4.972 12.2178 4.93691 11.9028 5.10938 11.6872C5.28187 11.4718 5.59693 11.4368 5.8125 11.6091L7.5 12.9597V7.99971C7.50016 7.7237 7.72396 7.49971 8 7.49971Z" fill="black"/>
3
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M7.80762 1.03877C7.93065 0.987525 8.06935 0.987525 8.19238 1.03877L14.1924 3.53877C14.3786 3.61643 14.5 3.79888 14.5 4.00068C14.4999 4.2024 14.3786 4.38501 14.1924 4.4626L8.19238 6.9626C8.10012 7.00099 7.99892 7.01014 7.90234 6.99092L7.80762 6.9626L1.80762 4.4626C1.6214 4.38501 1.50014 4.2024 1.5 4.00068C1.5 3.79888 1.62136 3.61643 1.80762 3.53877L7.80762 1.03877ZM3.30078 4.00068L8 5.95869L12.6982 4.00068L8 2.04365L3.30078 4.00068Z" fill="black"/>
4
+ </svg>
package/src/assets/svgIcons/layer_forward.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M14.1924 10.5381C14.3787 10.6157 14.5 10.7981 14.5 11C14.5 11.2018 14.3787 11.3842 14.1924 11.4619L8.19238 13.9619C8.06935 14.0131 7.93065 14.0131 7.80762 13.9619L1.80762 11.4619C1.6213 11.3842 1.5 11.2018 1.5 11C1.50002 10.7981 1.62131 10.6157 1.80762 10.5381L6.5 8.582V9.66696L3.30078 11L8 12.957L12.6982 11L9.5 9.66696V8.582L14.1924 10.5381Z" fill="black"/>
3
+ <path d="M7.75977 1.56149C7.9342 1.46582 8.15282 1.48161 8.3125 1.60934L10.8125 3.60934C11.0281 3.78184 11.0631 4.09684 10.8906 4.31247C10.7181 4.5281 10.4031 4.5631 10.1875 4.39059L8.5 3.04001V11C8.5 11.2761 8.27614 11.5 8 11.5C7.72386 11.5 7.5 11.2761 7.5 11V3.04001L5.8125 4.39059C5.59687 4.5631 5.28188 4.5281 5.10938 4.31247C4.93689 4.09684 4.97188 3.78184 5.1875 3.60934L7.6875 1.60934L7.75977 1.56149Z" fill="black"/>
4
+ </svg>
package/src/assets/svgIcons/layer_front.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M14.1924 10.497C14.3787 10.5747 14.5 10.7571 14.5 10.959C14.5 11.1608 14.3787 11.3432 14.1924 11.4209L8.19238 13.9209C8.06935 13.9721 7.93065 13.9721 7.80762 13.9209L1.80762 11.4209C1.6213 11.3432 1.5 11.1608 1.5 10.959C1.50002 10.7571 1.62131 10.5747 1.80762 10.497L2.99902 9.99997L4.2998 10.542L3.30078 10.959L8 12.916L12.6982 10.959L11.6992 10.542L13 9.99997L14.1924 10.497Z" fill="black"/>
3
+ <path d="M14.1924 7.95602C14.3787 8.03365 14.5 8.2161 14.5 8.41794C14.5 8.61978 14.3787 8.80221 14.1924 8.87985L8.19238 11.3799C8.06935 11.4311 7.93065 11.4311 7.80762 11.3799L1.80762 8.87985C1.6213 8.80221 1.5 8.61978 1.5 8.41794C1.50002 8.2161 1.62131 8.03365 1.80762 7.95602L6.5 5.99997V7.08493L3.30078 8.41794L8 10.375L12.6982 8.41794L9.5 7.08493V5.99997L14.1924 7.95602Z" fill="black"/>
4
+ <path d="M7.75977 1.56149C7.9342 1.46582 8.15282 1.48161 8.3125 1.60934L10.8125 3.60934C11.0281 3.78184 11.0631 4.09684 10.8906 4.31247C10.7181 4.5281 10.4031 4.5631 10.1875 4.39059L8.5 3.04001V8.99997C8.5 9.27611 8.27614 9.49997 8 9.49997C7.72386 9.49997 7.5 9.27611 7.5 8.99997V3.04001L5.8125 4.39059C5.59687 4.5631 5.28188 4.5281 5.10938 4.31247C4.93689 4.09684 4.97188 3.78184 5.1875 3.60934L7.6875 1.60934L7.75977 1.56149Z" fill="black"/>
5
+ </svg>
package/src/assets/svgIcons/polygon.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M13 2C13.5523 2 14 2.44772 14 3C14 3.36979 13.7984 3.69123 13.5 3.86426V12.1348C13.7987 12.3077 14 12.63 14 13C14 13.5523 13.5523 14 13 14C12.5598 14 12.1863 13.7154 12.0527 13.3203L3.74902 11.6592C3.56577 11.8672 3.29906 12 3 12C2.44772 12 2 11.5523 2 11C2 10.63 2.20133 10.3077 2.5 10.1348V5.86426C2.20157 5.69123 2 5.36979 2 5C2 4.44772 2.44772 4 3 4C3.29879 4 3.56578 4.1321 3.74902 4.33984L12.0527 2.67871C12.1866 2.28404 12.5601 2 13 2ZM3.94629 5.31934C3.86817 5.55092 3.70817 5.74357 3.5 5.86426V10.1348C3.70785 10.2551 3.8679 10.4477 3.94629 10.6787L12.25 12.3389C12.3214 12.2579 12.406 12.1892 12.5 12.1348V3.86426C12.4056 3.8095 12.3206 3.74069 12.249 3.65918L3.94629 5.31934Z" fill="black"/>
3
+ </svg>
package/src/assets/svgIcons/technical_plan.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M14 2.94434C14 2.69389 13.9007 2.45346 13.7236 2.27637C13.5465 2.09928 13.3061 2.00003 13.0557 2H6.33301V6.55566C6.33295 6.83176 6.10911 7.05566 5.83301 7.05566C5.55705 7.05549 5.33307 6.83165 5.33301 6.55566V2H2.94434C2.69389 2.00003 2.45346 2.09928 2.27637 2.27637C2.09928 2.45346 2.00003 2.69389 2 2.94434V9.66699H8C8.27614 9.66699 8.5 9.89085 8.5 10.167C8.49982 10.443 8.27603 10.667 8 10.667H2V13.0557C2.00003 13.3061 2.09928 13.5465 2.27637 13.7236C2.45346 13.9007 2.69389 14 2.94434 14H13.0557C13.3061 14 13.5465 13.9007 13.7236 13.7236C13.9007 13.5465 14 13.3061 14 13.0557V7.05566H9.44434C9.16828 7.05561 8.94439 6.83172 8.94434 6.55566C8.94434 6.27956 9.16824 6.05572 9.44434 6.05566H14V2.94434ZM15 13.0557C15 13.5713 14.7953 14.066 14.4307 14.4307C14.066 14.7953 13.5713 15 13.0557 15H2.94434C2.42868 15 1.93396 14.7953 1.56934 14.4307C1.20471 14.066 1.00003 13.5713 1 13.0557V2.94434C1.00003 2.42868 1.20471 1.93396 1.56934 1.56934C1.93396 1.20471 2.42868 1.00003 2.94434 1H13.0557C13.5713 1.00003 14.066 1.20471 14.4307 1.56934C14.7953 1.93396 15 2.42868 15 2.94434V13.0557Z" fill="#263238"/>
3
+ </svg>
package/src/assets/svgIcons/upload_image_2.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M8.5 1C8.77614 1 9 1.22386 9 1.5C8.99982 1.77599 8.77603 2 8.5 2H2.5C2.22386 2 2 2.22386 2 2.5V13.5C2.00006 13.5915 2.02637 13.6763 2.06934 13.75C2.09841 13.6999 2.13528 13.6532 2.18262 13.6143L9.93262 7.23145C10.5586 6.71591 11.4816 6.79106 12.0156 7.40137L14 9.66895V7.5C14 7.22386 14.2239 7 14.5 7C14.7761 7 15 7.22386 15 7.5V13.5C14.9998 14.3283 14.3283 15 13.5 15H2.5C1.67168 15 1.00018 14.3283 1 13.5V2.5C1 1.67157 1.67157 1 2.5 1H8.5ZM11.2627 8.05957C11.0847 7.85623 10.777 7.83111 10.5684 8.00293L3.28613 14H13.5C13.776 14 13.9998 13.776 14 13.5V11.1865L11.2627 8.05957ZM5.5 3.5C6.60457 3.5 7.5 4.39543 7.5 5.5C7.5 6.60457 6.60457 7.5 5.5 7.5C4.39543 7.5 3.5 6.60457 3.5 5.5C3.5 4.39543 4.39543 3.5 5.5 3.5ZM5.5 4.5C4.94772 4.5 4.5 4.94772 4.5 5.5C4.5 6.05228 4.94772 6.5 5.5 6.5C6.05228 6.5 6.5 6.05228 6.5 5.5C6.5 4.94772 6.05228 4.5 5.5 4.5ZM12.5 1C12.7761 1 13 1.22386 13 1.5V4.29297L14.1465 3.14648C14.3417 2.95122 14.6583 2.95122 14.8535 3.14648C15.0488 3.34175 15.0488 3.65825 14.8535 3.85352L12.9238 5.7832C12.9122 5.79477 12.898 5.80306 12.8857 5.81348C12.7941 5.92604 12.6565 6 12.5 6C12.3433 6 12.205 5.92631 12.1133 5.81348C12.1012 5.8032 12.0876 5.79459 12.0762 5.7832L10.1465 3.85352C9.95122 3.65825 9.95122 3.34175 10.1465 3.14648C10.3417 2.95122 10.6583 2.95122 10.8535 3.14648L12 4.29297V1.5C12 1.22386 12.2239 1 12.5 1Z" fill="black"/>
3
+ </svg>
package/src/assets/theme.js CHANGED
@@ -70,7 +70,7 @@ const theme = (() => {
70
70
  disabled: '#dfe1e1',
71
71
  transparentWhite2: '#ffffff32',
72
72
  transparentWhite1: '#ffffff16',
73
- transparentBlack1: '#263238e6',
73
+ transparentBlack1: '#162228e6',
74
74
  transparentBlack2: '#263238e5',
75
75
  transparentBlue1: '#20a4cae6',
76
76
  blueElectric: '#66dffa',
@@ -178,6 +178,39 @@ const theme = (() => {
178
178
  800: '#662222',
179
179
  900: '#331111',
180
180
  },
181
+ transparentWhite: {
182
+ 100: '#ffffff24',
183
+ 200: '#ffffff48',
184
+ 300: '#ffffff64',
185
+ 400: '#ffffff80',
186
+ 500: '#ffffff96',
187
+ 600: '#ffffffb4',
188
+ 700: '#ffffffd4',
189
+ 800: '#ffffffe6',
190
+ 900: '#fffffffa',
191
+ },
192
+ transparentBlack: {
193
+ 100: '#00000024',
194
+ 200: '#00000048',
195
+ 300: '#00000064',
196
+ 400: '#00000080',
197
+ 500: '#00000096',
198
+ 600: '#000000b4',
199
+ 700: '#000000d4',
200
+ 800: '#000000e6',
201
+ 900: '#000000fa',
202
+ },
203
+ transparentTeal: {
204
+ 100: '#6E8E9E24',
205
+ 200: '#6E8E9E48',
206
+ 300: '#6E8E9E64',
207
+ 400: '#6E8E9E80',
208
+ 500: '#6E8E9E96',
209
+ 600: '#6E8E9Eb4',
210
+ 700: '#6E8E9Ed4',
211
+ 800: '#6E8E9Ee6',
212
+ 900: '#6E8E9Efa',
213
+ },
181
214
  }
182
215
 
183
216
  const chartGradients = {
@@ -626,55 +659,6 @@ const theme = (() => {
626
659
  },
627
660
  },
628
661
  },
629
- tertiary: {
630
- // type
631
- main: {
632
- // variant: this is the default variant
633
- default: {
634
- backgroundColor: 'transparent',
635
- textColor: semanticColors.purple[50],
636
- borderColor: semanticColors.teal[500],
637
- },
638
- hover: {
639
- backgroundColor: semanticColors.teal[600],
640
- textColor: semanticColors.purple[50],
641
- borderColor: semanticColors.teal[400],
642
- },
643
- active: {
644
- backgroundColor: semanticColors.teal[700],
645
- textColor: semanticColors.purple[50],
646
- borderColor: semanticColors.teal[300],
647
- },
648
- disabled: {
649
- textColor: semanticColors.grey[600],
650
- backgroundColor: semanticColors.grey[500],
651
- borderColor: semanticColors.grey[800],
652
- },
653
- },
654
- cancel: {
655
- // variant
656
- default: {
657
- backgroundColor: semanticColors.teal[200],
658
- textColor: semanticColors.red[400],
659
- borderColor: semanticColors.teal[500],
660
- },
661
- hover: {
662
- backgroundColor: semanticColors.red[700],
663
- textColor: semanticColors.red[700],
664
- borderColor: semanticColors.teal[400],
665
- },
666
- active: {
667
- backgroundColor: semanticColors.red[600],
668
- textColor: semanticColors.red[200],
669
- borderColor: semanticColors.teal[300],
670
- },
671
- disabled: {
672
- textColor: semanticColors.grey[600],
673
- backgroundColor: semanticColors.grey[500],
674
- borderColor: semanticColors.grey[800],
675
- },
676
- },
677
- },
678
662
  ghost: {
679
663
  // type
680
664
  main: {
@@ -767,7 +751,7 @@ const theme = (() => {
767
751
  },
768
752
  tiny: {
769
753
  padding: '2px 5px',
770
- fontSize: '10px',
754
+ fontSize: '8px',
771
755
  iconWidth: '18px',
772
756
  },
773
757
  },
package/src/components/buttons/buttonIcon/index.vue CHANGED
@@ -10,6 +10,7 @@
10
10
  :height="height"
11
11
  :is-active="isActive"
12
12
  :is-disabled="isDisabled"
13
+ :is-hovered="isHovered"
13
14
  :min-width="minWidth"
14
15
  :type="type"
15
16
  :variant="variant"
@@ -46,7 +47,7 @@
46
47
  data-test-id="button-icon-text"
47
48
  :height="height"
48
49
  >
49
- {{ text }}
50
+ {{ isFirstLetterCapitalized ? capitalizeFirstLetter(text) : text }}
50
51
  <Icon
51
52
  v-if="showCaret"
52
53
  :color="
@@ -115,11 +116,13 @@
115
116
  variant: String,
116
117
  appTheme: String,
117
118
  isActive: Boolean,
119
+ isHovered: Boolean,
118
120
  height: String,
119
121
  }
120
122
  const ButtonWrapper = styled('div', ButtonAttrs)`
121
123
  position: relative;
122
124
  display: grid;
125
+ align-content: center
123
126
  grid-template-columns: auto 1fr auto;
124
127
  height: ${({ height }) => height};
125
128
  font-size: ${(props) =>
@@ -140,6 +143,9 @@
140
143
  : props.isActive
141
144
  ? props.theme.mainButton[props.appTheme][props.type][props.variant]
142
145
  .active.backgroundColor
146
+ : props.isHovered
147
+ ? props.theme.mainButton[props.appTheme][props.type][props.variant]
148
+ .hover.backgroundColor
143
149
  : props.theme.mainButton[props.appTheme][props.type][props.variant]
144
150
  .default.backgroundColor};
145
151
  border: ${(props) => {
@@ -211,6 +217,7 @@
211
217
  width: ${(props) =>
212
218
  props.theme?.mainButton?.size?.[props.buttonSize]?.iconWidth};
213
219
  background: rgba(255, 255, 255, 0.1);
220
+ border-radius: 4px 0 0 4px;
214
221
  border-right: ${(props) => {
215
222
  const borderColor =
216
223
  props.theme.mainButton[props.appTheme][props.type][props.variant]
@@ -355,6 +362,11 @@
355
362
  default: false,
356
363
  type: Boolean,
357
364
  },
365
+ isHovered: {
366
+ required: false,
367
+ default: false,
368
+ type: Boolean,
369
+ },
358
370
  fillType: {
359
371
  required: false,
360
372
  default: 'fill',
@@ -394,15 +406,21 @@
394
406
  type: String,
395
407
  default: '',
396
408
  },
409
+ isFirstLetterCapitalized: {
410
+ required: false,
411
+ default: false,
412
+ type: Boolean,
413
+ },
414
+ },
415
+ data() {
416
+ return {
417
+ theme: Theme,
418
+ }
419
+ },
420
+ methods: {
421
+ capitalizeFirstLetter(word) {
422
+ return word.charAt(0).toUpperCase() + word.slice(1)
423
+ },
397
424
  },
398
- // computed: {
399
- // getIconColor() {
400
- // console.log(this.theme[this.themeType][this.type][this.variant])
401
- // return (
402
- // this.iconColor ||
403
- // this.theme[this.themeType][this.type][this.variant].textColor
404
- // )
405
- // },
406
- // },
407
425
  }
408
426
  </script>
package/src/components/buttons/collection/ButtonIconCollection.stories.js ADDED
@@ -0,0 +1,31 @@
1
+ import ButtonIconCollection from './index.vue'
2
+
3
+ export default {
4
+ title: 'Components/Buttons/ButtonIconCollection',
5
+ component: ButtonIconCollection,
6
+ tags: ['autodocs'],
7
+ parameters: {
8
+ layout: 'fullscreen',
9
+ docs: {
10
+ description: {
11
+ component:
12
+ 'A comprehensive display of all ButtonIcon variations across themes, types, variants, and states.',
13
+ },
14
+ },
15
+ },
16
+ }
17
+
18
+ export const AllButtonIcons = {
19
+ render: () => ({
20
+ components: { ButtonIconCollection },
21
+ template: '<ButtonIconCollection />',
22
+ }),
23
+ parameters: {
24
+ docs: {
25
+ description: {
26
+ story:
27
+ 'Displays all ButtonIcon possibilities in a grid with Light and Dark themes side by side.',
28
+ },
29
+ },
30
+ },
31
+ }
package/src/components/buttons/collection/index.vue ADDED
@@ -0,0 +1,355 @@
1
+ <template>
2
+ <PageWrapper>
3
+ <PageTitle>ButtonIcon Collection</PageTitle>
4
+
5
+ <GridContainer>
6
+ <!-- Light Theme Column -->
7
+ <ThemeSection :is-dark="false">
8
+ <ThemeTitle>Light Theme</ThemeTitle>
9
+
10
+ <!-- Header Row -->
11
+ <HeaderRow>
12
+ <HeaderCell
13
+ v-for="buttonType in types"
14
+ :key="'light-header-' + buttonType"
15
+ >
16
+ {{ buttonType }}
17
+ </HeaderCell>
18
+ </HeaderRow>
19
+
20
+ <!-- Main Variant Section -->
21
+ <VariantSection>
22
+ <VariantHeader :cols="types.length">main</VariantHeader>
23
+ </VariantSection>
24
+
25
+ <!-- States for Main variant -->
26
+ <StateSection v-for="state in states" :key="'light-main-' + state.name">
27
+ <StateHeader :cols="types.length">{{ state.name }}</StateHeader>
28
+ <ButtonRow>
29
+ <ButtonCell
30
+ v-for="buttonType in types"
31
+ :key="'light-main-' + buttonType + '-' + state.name"
32
+ >
33
+ <ButtonIcon
34
+ app-theme="light"
35
+ icon-name="plus_button"
36
+ :is-active="state.isActive"
37
+ :is-disabled="state.isDisabled"
38
+ :is-hovered="state.isHovered"
39
+ :text="buttonType"
40
+ :type="buttonType"
41
+ variant="main"
42
+ />
43
+ </ButtonCell>
44
+ </ButtonRow>
45
+ </StateSection>
46
+
47
+ <!-- Cancel Variant Section -->
48
+ <VariantSection>
49
+ <VariantHeader :cols="types.length">cancel</VariantHeader>
50
+ </VariantSection>
51
+
52
+ <!-- States for Cancel variant -->
53
+ <StateSection
54
+ v-for="state in states"
55
+ :key="'light-cancel-' + state.name"
56
+ >
57
+ <StateHeader :cols="types.length">{{ state.name }}</StateHeader>
58
+ <ButtonRow>
59
+ <ButtonCell
60
+ v-for="buttonType in types"
61
+ :key="'light-cancel-' + buttonType + '-' + state.name"
62
+ >
63
+ <ButtonIcon
64
+ app-theme="light"
65
+ icon-name="plus_button"
66
+ :is-active="state.isActive"
67
+ :is-disabled="state.isDisabled"
68
+ :is-hovered="state.isHovered"
69
+ :text="buttonType"
70
+ :type="buttonType"
71
+ variant="cancel"
72
+ />
73
+ </ButtonCell>
74
+ </ButtonRow>
75
+ </StateSection>
76
+ </ThemeSection>
77
+
78
+ <!-- Dark Theme Column -->
79
+ <ThemeSection :is-dark="true">
80
+ <ThemeTitle :is-dark="true">Dark Theme</ThemeTitle>
81
+
82
+ <!-- Header Row -->
83
+ <HeaderRow :is-dark="true">
84
+ <HeaderCell
85
+ v-for="buttonType in types"
86
+ :key="'dark-header-' + buttonType"
87
+ :is-dark="true"
88
+ >
89
+ {{ buttonType }}
90
+ </HeaderCell>
91
+ </HeaderRow>
92
+
93
+ <!-- Main Variant Section -->
94
+ <VariantSection>
95
+ <VariantHeader :cols="types.length" :is-dark="true">
96
+ main
97
+ </VariantHeader>
98
+ </VariantSection>
99
+
100
+ <!-- States for Main variant -->
101
+ <StateSection v-for="state in states" :key="'dark-main-' + state.name">
102
+ <StateHeader :cols="types.length" :is-dark="true">
103
+ {{ state.name }}
104
+ </StateHeader>
105
+ <ButtonRow>
106
+ <ButtonCell
107
+ v-for="buttonType in types"
108
+ :key="'dark-main-' + buttonType + '-' + state.name"
109
+ >
110
+ <ButtonIcon
111
+ app-theme="dark"
112
+ icon-name="plus_button"
113
+ :is-active="state.isActive"
114
+ :is-disabled="state.isDisabled"
115
+ :is-hovered="state.isHovered"
116
+ :text="buttonType"
117
+ :type="buttonType"
118
+ variant="main"
119
+ />
120
+ </ButtonCell>
121
+ </ButtonRow>
122
+ </StateSection>
123
+
124
+ <!-- Cancel Variant Section -->
125
+ <VariantSection>
126
+ <VariantHeader :cols="types.length" :is-dark="true">
127
+ cancel
128
+ </VariantHeader>
129
+ </VariantSection>
130
+
131
+ <!-- States for Cancel variant -->
132
+ <StateSection
133
+ v-for="state in states"
134
+ :key="'dark-cancel-' + state.name"
135
+ >
136
+ <StateHeader :cols="types.length" :is-dark="true">
137
+ {{ state.name }}
138
+ </StateHeader>
139
+ <ButtonRow>
140
+ <ButtonCell
141
+ v-for="buttonType in types"
142
+ :key="'dark-cancel-' + buttonType + '-' + state.name"
143
+ >
144
+ <ButtonIcon
145
+ app-theme="dark"
146
+ icon-name="plus_button"
147
+ :is-active="state.isActive"
148
+ :is-disabled="state.isDisabled"
149
+ :is-hovered="state.isHovered"
150
+ :text="buttonType"
151
+ :type="buttonType"
152
+ variant="cancel"
153
+ />
154
+ </ButtonCell>
155
+ </ButtonRow>
156
+ </StateSection>
157
+ </ThemeSection>
158
+ </GridContainer>
159
+ </PageWrapper>
160
+ </template>
161
+
162
+ <script>
163
+ import ButtonIcon from '../buttonIcon/index.vue'
164
+ import styled from 'vue3-styled-components'
165
+ import theme from '@/assets/theme'
166
+
167
+ const PageWrapper = styled.div`
168
+ padding: 40px;
169
+ font-family: ${(props) => props.theme.fonts.mainFont};
170
+ background: linear-gradient(135deg, #f8f9fb 0%, #ebeef3 100%);
171
+ min-height: 100vh;
172
+ `
173
+
174
+ const PageTitle = styled.h1`
175
+ text-align: center;
176
+ font-size: 32px;
177
+ font-weight: 700;
178
+ color: ${(props) => props.theme.semanticColors.teal[800]};
179
+ margin-bottom: 40px;
180
+ letter-spacing: -0.5px;
181
+ `
182
+
183
+ const GridContainer = styled.div`
184
+ display: grid;
185
+ grid-template-columns: 1fr 1fr;
186
+ gap: 32px;
187
+ max-width: 1600px;
188
+ margin: 0 auto;
189
+ `
190
+
191
+ const ThemeSectionAttrs = { isDark: Boolean }
192
+ const ThemeSection = styled('div', ThemeSectionAttrs)`
193
+ background-color: ${(props) =>
194
+ props.isDark
195
+ ? props.theme.semanticColors.teal[800]
196
+ : props.theme.colors.white};
197
+ border-radius: 16px;
198
+ padding: 24px;
199
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
200
+ border: 1px solid
201
+ ${(props) =>
202
+ props.isDark ? 'transparent' : props.theme.semanticColors.grey[300]};
203
+ `
204
+
205
+ const ThemeTitleAttrs = { isDark: Boolean }
206
+ const ThemeTitle = styled('h2', ThemeTitleAttrs)`
207
+ text-align: center;
208
+ font-size: 22px;
209
+ font-weight: 600;
210
+ margin-bottom: 20px;
211
+ padding-bottom: 12px;
212
+ border-bottom: 2px solid
213
+ ${(props) =>
214
+ props.isDark
215
+ ? props.theme.semanticColors.teal[600]
216
+ : props.theme.semanticColors.purple[200]};
217
+ color: ${(props) =>
218
+ props.isDark
219
+ ? props.theme.colors.white
220
+ : props.theme.semanticColors.teal[800]};
221
+ `
222
+
223
+ const HeaderRowAttrs = { isDark: Boolean }
224
+ const HeaderRow = styled('div', HeaderRowAttrs)`
225
+ display: grid;
226
+ grid-template-columns: repeat(4, 1fr);
227
+ gap: 12px;
228
+ margin-bottom: 8px;
229
+ `
230
+
231
+ const HeaderCellAttrs = { isDark: Boolean }
232
+ const HeaderCell = styled('div', HeaderCellAttrs)`
233
+ font-size: 11px;
234
+ font-weight: 700;
235
+ text-transform: uppercase;
236
+ letter-spacing: 1px;
237
+ text-align: center;
238
+ padding: 10px 4px;
239
+ border-radius: 6px;
240
+ background: ${(props) =>
241
+ props.isDark
242
+ ? props.theme.semanticColors.teal[700]
243
+ : props.theme.semanticColors.purple[50]};
244
+ color: ${(props) =>
245
+ props.isDark
246
+ ? props.theme.semanticColors.purple[200]
247
+ : props.theme.semanticColors.purple[600]};
248
+ `
249
+
250
+ const VariantSection = styled.div`
251
+ margin-top: 16px;
252
+ `
253
+
254
+ const VariantHeaderAttrs = { cols: Number, isDark: Boolean }
255
+ const VariantHeader = styled('div', VariantHeaderAttrs)`
256
+ font-size: 12px;
257
+ font-weight: 600;
258
+ text-transform: capitalize;
259
+ padding: 8px 12px;
260
+ border-radius: 6px;
261
+ text-align: center;
262
+ margin-bottom: 8px;
263
+ background: ${(props) =>
264
+ props.isDark
265
+ ? props.theme.semanticColors.teal[600]
266
+ : props.theme.semanticColors.grey[200]};
267
+ color: ${(props) =>
268
+ props.isDark
269
+ ? props.theme.semanticColors.yellow[300]
270
+ : props.theme.semanticColors.teal[700]};
271
+ `
272
+
273
+ const StateSection = styled.div`
274
+ margin-bottom: 4px;
275
+ `
276
+
277
+ const StateHeaderAttrs = { cols: Number, isDark: Boolean }
278
+ const StateHeader = styled('div', StateHeaderAttrs)`
279
+ font-size: 10px;
280
+ font-weight: 500;
281
+ text-transform: uppercase;
282
+ letter-spacing: 0.8px;
283
+ padding: 4px 0;
284
+ color: ${(props) =>
285
+ props.isDark
286
+ ? props.theme.semanticColors.grey[400]
287
+ : props.theme.semanticColors.grey[600]};
288
+ `
289
+
290
+ const ButtonRow = styled.div`
291
+ display: grid;
292
+ grid-template-columns: repeat(4, 1fr);
293
+ gap: 12px;
294
+ align-items: center;
295
+ `
296
+
297
+ const ButtonCell = styled.div`
298
+ display: flex;
299
+ justify-content: center;
300
+ align-items: center;
301
+ min-height: 36px;
302
+ `
303
+
304
+ export default {
305
+ name: 'ButtonIconCollection',
306
+ components: {
307
+ ButtonIcon,
308
+ PageWrapper,
309
+ PageTitle,
310
+ GridContainer,
311
+ ThemeSection,
312
+ ThemeTitle,
313
+ HeaderRow,
314
+ HeaderCell,
315
+ VariantSection,
316
+ VariantHeader,
317
+ StateSection,
318
+ StateHeader,
319
+ ButtonRow,
320
+ ButtonCell,
321
+ },
322
+ data() {
323
+ return {
324
+ theme,
325
+ types: ['primary', 'secondary', 'tertiary', 'ghost'],
326
+ states: [
327
+ {
328
+ name: 'default',
329
+ isActive: false,
330
+ isHovered: false,
331
+ isDisabled: false,
332
+ },
333
+ {
334
+ name: 'hover',
335
+ isActive: false,
336
+ isHovered: true,
337
+ isDisabled: false,
338
+ },
339
+ {
340
+ name: 'active',
341
+ isActive: true,
342
+ isHovered: false,
343
+ isDisabled: false,
344
+ },
345
+ {
346
+ name: 'disabled',
347
+ isActive: false,
348
+ isHovered: false,
349
+ isDisabled: true,
350
+ },
351
+ ],
352
+ }
353
+ },
354
+ }
355
+ </script>
package/src/components/inputs/select/index.vue CHANGED
@@ -724,7 +724,7 @@
724
724
  },
725
725
  },
726
726
  setup() {
727
- const modalRef = inject('modalRef')
727
+ const modalRef = inject('modalRef', null)
728
728
 
729
729
  return {
730
730
  modalRef,
package/src/components/inputs/textAreaInput/index.vue CHANGED
@@ -12,6 +12,7 @@
12
12
  <InfoText v-if="infoTextMessage" size="16px" :text="infoTextMessage" />
13
13
  </LabelWrapper>
14
14
  <InputContainer
15
+ :app-theme="appTheme"
15
16
  :disabled="isDisabled"
16
17
  :font-size="fontSize"
17
18
  :input-width="inputWidth"
@@ -78,6 +79,7 @@
78
79
  disabled: Boolean,
79
80
  fontSize: String,
80
81
  inputWidth: String,
82
+ appTheme: String,
81
83
  }
82
84
 
83
85
  const InputContainer = styled('div', inputProps)`
@@ -90,7 +92,12 @@
90
92
  props.hasUnit ? '11px 40px 11px 10px !important' : '15px !important'};
91
93
  border-radius: 4px !important;
92
94
  font-size: ${(props) => `${props.fontSize} !important`};
93
- color: ${(props) => `${props.theme.colors.grey1} !important`};
95
+ color: ${({ appTheme, theme }) =>
96
+ `${
97
+ appTheme == 'dark' ? theme.colors.white : theme.colors.grey1
98
+ } !important`};
99
+ background-color: ${({ appTheme }) =>
100
+ appTheme == 'dark' ? 'transparent' : 'white'};
94
101
  width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
95
102
  max-width: 100%;
96
103
  box-sizing: border-box; // to allow width of 100% with padding
@@ -207,6 +214,10 @@
207
214
  default: false,
208
215
  type: Boolean,
209
216
  },
217
+ appTheme: {
218
+ type: String,
219
+ default: 'light',
220
+ },
210
221
  },
211
222
  methods: {
212
223
  onChangeHandler($event) {
package/src/components/modals/modal/index.vue CHANGED
@@ -19,7 +19,7 @@
19
19
  :overflow="overflowRule"
20
20
  @click="onClickModalContainer"
21
21
  >
22
- <Spinner v-if="isLoading" :limited-to-modal="true" size="50px" />
22
+ <Spinner v-if="isLoading" :limited-to-modal="true" size="large" />
23
23
  <ContentContainer v-if="!isLoading">
24
24
  <slot></slot>
25
25
  </ContentContainer>
@@ -195,6 +195,10 @@
195
195
  type: Boolean,
196
196
  default: true,
197
197
  },
198
+ closeOnEscape: {
199
+ type: Boolean,
200
+ default: true,
201
+ },
198
202
  maxWidth: {
199
203
  type: String,
200
204
  default: '95%',
@@ -242,7 +246,7 @@
242
246
  this.$emit('on-close')
243
247
  },
244
248
  handleKeyDown({ key }) {
245
- if (key === 'Escape' && !this.hideClose) {
249
+ if (this.closeOnEscape && key === 'Escape') {
246
250
  this.onCloseModal()
247
251
  }
248
252
  },
package/src/components/threeDots/index.vue CHANGED
@@ -45,10 +45,15 @@
45
45
  {{ child.name }}
46
46
  </OptionChild>
47
47
  </ChildrenContainer>
48
- <OptionsContainer v-if="!isLoading" :text-wrap="textWrap">
48
+ <OptionsContainer
49
+ v-if="!isLoading"
50
+ :color-theme="colorTheme"
51
+ :text-wrap="textWrap"
52
+ >
49
53
  <OptionItem
50
54
  v-for="(item, index) in options"
51
55
  :key="item.value"
56
+ :color-theme="colorTheme"
52
57
  :data-id="item.dataId"
53
58
  :is-disabled="item.disabled"
54
59
  tabindex="0"
@@ -154,7 +159,9 @@
154
159
  }
155
160
  `
156
161
 
157
- const ButtonContainer = styled('div', { iconColor: String })`
162
+ const ButtonContainer = styled('div', {
163
+ iconColor: String,
164
+ })`
158
165
  display: flex;
159
166
  flex-direction: column;
160
167
  align-items: center;
@@ -196,14 +203,19 @@
196
203
  background: #fff;
197
204
  `
198
205
 
199
- const OptionsContainerAttrs = { textWrap: Boolean }
206
+ const OptionsContainerAttrs = { textWrap: Boolean, colorTheme: String }
200
207
  const OptionsContainer = styled('div', OptionsContainerAttrs)`
201
- border: 1px solid ${(props) => props.theme.colors.grey3};
208
+ border: 1px solid
209
+ ${(props) =>
210
+ props.colorTheme == 'dark'
211
+ ? props.theme.semanticColors.teal[500]
212
+ : props.theme.colors.grey3};
202
213
  display: grid;
203
214
  grid-template-columns: 1fr;
204
215
  ${(props) => (props.textWrap ? 'width: 220px' : 'width: max-content')};
205
216
  border-radius: 4px;
206
- background-color: #fff;
217
+ background-color: ${({ colorTheme }) =>
218
+ colorTheme == 'dark' ? theme.colors.black : '#fff'};
207
219
  max-height: 220px;
208
220
  overflow: auto;
209
221
  height: max-content;
@@ -211,7 +223,7 @@
211
223
  props.textWrap ? 'white-space: normal' : 'white-space: nowrap'};
212
224
  `
213
225
 
214
- const optionAttrs = { isDisabled: Boolean }
226
+ const optionAttrs = { isDisabled: Boolean, colorTheme: String }
215
227
  const OptionItem = styled('div', optionAttrs)`
216
228
  padding: 12px;
217
229
  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
@@ -219,13 +231,19 @@
219
231
  position: relative;
220
232
  ${(props) =>
221
233
  props.isDisabled
222
- ? `background-color: ${props.theme.colors.grey5}!important`
234
+ ? `background-color: ${(colorTheme) =>
235
+ colorTheme == 'dark'
236
+ ? theme.semanticColors.teal[700]
237
+ : props.theme.colors.grey5}!important`
223
238
  : ''};
224
239
  ${(props) =>
225
240
  props.isDisabled ? `color: ${props.theme.colors.grey2}` : ''};
226
241
 
227
242
  &:hover {
228
- background-color: #ebeef4;
243
+ background-color: ${(props) =>
244
+ props.colorTheme == 'dark'
245
+ ? theme.semanticColors.teal[700]
246
+ : '#ebeef4'};
229
247
  }
230
248
 
231
249
  &:focus-visible {
@@ -233,14 +251,17 @@
233
251
  background-color: #ebeef4;
234
252
  }
235
253
  `
236
- const OptionChild = styled.div`
254
+ const OptionChild = styled('div', { colorTheme: String })`
237
255
  padding: 12px;
238
256
  cursor: pointer;
239
257
  font-size: 13px;
240
258
  position: relative;
241
259
 
242
260
  &:hover {
243
- background-color: #ebeef4;
261
+ background-color: ${(props) =>
262
+ props.colorTheme == 'dark'
263
+ ? theme.semanticColors.teal[600]
264
+ : '#ebeef4'};
244
265
  }
245
266
 
246
267
  &:focus-visible {
@@ -300,14 +321,25 @@
300
321
  props: {
301
322
  options: {
302
323
  required: true,
324
+ type: Array,
303
325
  },
304
326
  isLoading: {
305
327
  required: false,
306
328
  default: false,
329
+ type: Boolean,
307
330
  },
308
331
  textWrap: {
309
332
  required: false,
310
333
  default: true,
334
+ type: Boolean,
335
+ },
336
+ colorTheme: {
337
+ type: String,
338
+ default: 'light',
339
+ },
340
+ dropdownPosition: {
341
+ type: String,
342
+ default: 'horizontal',
311
343
  },
312
344
  iconColor: {
313
345
  type: String,
@@ -359,20 +391,42 @@
359
391
 
360
392
  const positionArray = this.determineElementQuarter(button, rectButton)
361
393
  contextMenu.style.transform = ''
362
- if (positionArray.includes('left')) {
363
- contextMenu.style.left =
364
- rectButton.right - rectRelativeParent.left + 5 + 'px'
365
- } else {
366
- contextMenu.style.left =
367
- rectButton.left - rectRelativeParent.left - 5 + 'px'
368
- contextMenu.style.transform = 'translateX(-100%)'
369
- }
370
- if (positionArray.includes('top')) {
371
- contextMenu.style.top = rectButton.top - rectRelativeParent.top + 'px'
394
+ if (this.dropdownPosition == 'vertical') {
395
+ // Position horizontally (left/right/center)
396
+ if (positionArray.includes('left')) {
397
+ contextMenu.style.left =
398
+ rectButton.left - rectRelativeParent.left + 'px'
399
+ } else {
400
+ contextMenu.style.left =
401
+ rectButton.right - rectRelativeParent.left + 'px'
402
+ contextMenu.style.transform = 'translateX(-100%)'
403
+ }
404
+ // Position vertically (above/below)
405
+ if (positionArray.includes('top')) {
406
+ contextMenu.style.top =
407
+ rectButton.bottom - rectRelativeParent.top + 5 + 'px'
408
+ } else {
409
+ contextMenu.style.top =
410
+ rectButton.top - rectRelativeParent.top - 5 + 'px'
411
+ contextMenu.style.transform += ' translateY(-100%)'
412
+ }
372
413
  } else {
373
- contextMenu.style.top =
374
- rectButton.bottom - rectRelativeParent.top + 'px'
375
- contextMenu.style.transform += ' translateY(-100%)'
414
+ if (positionArray.includes('left')) {
415
+ contextMenu.style.left =
416
+ rectButton.right - rectRelativeParent.left + 5 + 'px'
417
+ } else {
418
+ contextMenu.style.left =
419
+ rectButton.left - rectRelativeParent.left - 5 + 'px'
420
+ contextMenu.style.transform = 'translateX(-100%)'
421
+ }
422
+ if (positionArray.includes('top')) {
423
+ contextMenu.style.top =
424
+ rectButton.top - rectRelativeParent.top + 'px'
425
+ } else {
426
+ contextMenu.style.top =
427
+ rectButton.bottom - rectRelativeParent.top + 'px'
428
+ contextMenu.style.transform += ' translateY(-100%)'
429
+ }
376
430
  }
377
431
  },
378
432
  findRelativeParent(element) {