@dktunited-techoff/techoff-suite-ui 0.9.7 → 0.9.9

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 (41) hide show
  1. package/esm/components/Icon/icons/check-circle-timer.svg +7 -0
  2. package/esm/components/Icon/icons/history.svg +1 -0
  3. package/esm/components/Icon/icons/index.js +3 -0
  4. package/esm/components/Icon/icons/index.js.map +1 -1
  5. package/esm/components/Icon/icons/index.ts +3 -0
  6. package/esm/components/Icon/icons/seedling-circle.svg +12 -0
  7. package/esm/layouts/Header/Header.js +1 -2
  8. package/esm/layouts/Header/Header.js.map +1 -1
  9. package/esm/layouts/Header/Header.types.d.ts +1 -1
  10. package/esm/layouts/Header/__stories__/Header.stories.mdx +6 -4
  11. package/esm/layouts/Navigation/Navigation.d.ts +1 -0
  12. package/esm/layouts/Navigation/Navigation.js +8 -6
  13. package/esm/layouts/Navigation/Navigation.js.map +1 -1
  14. package/esm/layouts/Navigation/Navigation.types.d.ts +2 -2
  15. package/esm/layouts/Navigation/__stories__/Navigation.stories.mdx +19 -13
  16. package/lib/components/Icon/icons/check-circle-timer.svg +7 -0
  17. package/lib/components/Icon/icons/history.svg +1 -0
  18. package/lib/components/Icon/icons/index.js +3 -0
  19. package/lib/components/Icon/icons/index.js.map +1 -1
  20. package/lib/components/Icon/icons/index.ts +3 -0
  21. package/lib/components/Icon/icons/seedling-circle.svg +12 -0
  22. package/lib/layouts/Header/Header.js +1 -2
  23. package/lib/layouts/Header/Header.js.map +1 -1
  24. package/lib/layouts/Header/Header.types.d.ts +1 -1
  25. package/lib/layouts/Header/__stories__/Header.stories.mdx +6 -4
  26. package/lib/layouts/Navigation/Navigation.d.ts +1 -0
  27. package/lib/layouts/Navigation/Navigation.js +10 -7
  28. package/lib/layouts/Navigation/Navigation.js.map +1 -1
  29. package/lib/layouts/Navigation/Navigation.types.d.ts +2 -2
  30. package/lib/layouts/Navigation/__stories__/Navigation.stories.mdx +19 -13
  31. package/package.json +1 -1
  32. package/src/components/Icon/icons/check-circle-timer.svg +7 -0
  33. package/src/components/Icon/icons/history.svg +1 -0
  34. package/src/components/Icon/icons/index.ts +3 -0
  35. package/src/components/Icon/icons/seedling-circle.svg +12 -0
  36. package/src/layouts/Header/Header.tsx +1 -4
  37. package/src/layouts/Header/Header.types.ts +1 -1
  38. package/src/layouts/Header/__stories__/Header.stories.mdx +6 -4
  39. package/src/layouts/Navigation/Navigation.tsx +13 -17
  40. package/src/layouts/Navigation/Navigation.types.ts +1 -1
  41. package/src/layouts/Navigation/__stories__/Navigation.stories.mdx +19 -13
package/esm/components/Icon/icons/check-circle-timer.svg ADDED
@@ -0,0 +1,7 @@
1
+ <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
2
+ viewBox="0 0 21.5 21.6" style="enable-background:new 0 0 21.5 21.6;" xml:space="preserve">
3
+ <path d="M8.8,21.6c-4.9,0-8.8-3.9-8.8-8.8S3.9,4,8.8,4s8.8,3.9,8.8,8.8S13.6,21.6,8.8,21.6z M8.8,19.8c3.9,0,7-3.1,7-7s-3.1-7-7-7
4
+ s-7,3.1-7,7S4.9,19.8,8.8,19.8z M7.9,16.3l-3.7-3.7l1.3-1.3l2.4,2.4l5-4.9l1.3,1.3L7.9,16.3z"/>
5
+ <path d="M15.8,11.4c-3.1,0-5.7-2.6-5.7-5.7S12.7,0,15.8,0s5.7,2.6,5.7,5.7S18.9,11.4,15.8,11.4z M16.4,5.7V2.8h-1.1v4h3.4V5.7H16.4z
6
+ "/>
7
+ </svg>
package/esm/components/Icon/icons/history.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12H4C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C9.25022 4 6.82447 5.38734 5.38451 7.50024L8 7.5V9.5H2V3.5H4L3.99989 5.99918C5.82434 3.57075 8.72873 2 12 2ZM13 7L12.9998 11.585L16.2426 14.8284L14.8284 16.2426L10.9998 12.413L11 7H13Z"></path></svg>
package/esm/components/Icon/icons/index.js CHANGED
@@ -15,6 +15,7 @@ export const icons = {
15
15
  'arrow-up-down': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11.9498 7.94975L10.5356 9.36396L8.00079 6.828L8.00004 20H6.00004L6.00079 6.828L3.46451 9.36396L2.05029 7.94975L7.00004 3L11.9498 7.94975ZM21.9498 16.0503L17 21L12.0503 16.0503L13.4645 14.636L16.0008 17.172L16 4H18L18.0008 17.172L20.5356 14.636L21.9498 16.0503Z"></path></svg>',
16
16
  'arrow-up': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.0001 7.82843V20H11.0001V7.82843L5.63614 13.1924L4.22192 11.7782L12.0001 4L19.7783 11.7782L18.3641 13.1924L13.0001 7.82843Z"></path></svg>',
17
17
  'check-circle-filled': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM11.0026 16L18.0737 8.92893L16.6595 7.51472L11.0026 13.1716L8.17421 10.3431L6.75999 11.7574L11.0026 16Z"></path></svg>',
18
+ 'check-circle-timer': '<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 21.5 21.6" style="enable-background:new 0 0 21.5 21.6;" xml:space="preserve"><path d="M8.8,21.6c-4.9,0-8.8-3.9-8.8-8.8S3.9,4,8.8,4s8.8,3.9,8.8,8.8S13.6,21.6,8.8,21.6z M8.8,19.8c3.9,0,7-3.1,7-7s-3.1-7-7-7 s-7,3.1-7,7S4.9,19.8,8.8,19.8z M7.9,16.3l-3.7-3.7l1.3-1.3l2.4,2.4l5-4.9l1.3,1.3L7.9,16.3z"/><path d="M15.8,11.4c-3.1,0-5.7-2.6-5.7-5.7S12.7,0,15.8,0s5.7,2.6,5.7,5.7S18.9,11.4,15.8,11.4z M16.4,5.7V2.8h-1.1v4h3.4V5.7H16.4z "/></svg>',
18
19
  'check-circle': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11.0026 16L6.75999 11.7574L8.17421 10.3431L11.0026 13.1716L16.6595 7.51472L18.0737 8.92893L11.0026 16Z"></path></svg>',
19
20
  'check-square-filled': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM11.0026 16L18.0737 8.92893L16.6595 7.51472L11.0026 13.1716L8.17421 10.3431L6.75999 11.7574L11.0026 16Z"></path></svg>',
20
21
  'check-square': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM5 5V19H19V5H5ZM11.0026 16L6.75999 11.7574L8.17421 10.3431L11.0026 13.1716L16.6595 7.51472L18.0737 8.92893L11.0026 16Z"></path></svg>',
@@ -40,12 +41,14 @@ export const icons = {
40
41
  'header-repairability': '<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 27.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 357.7 16.8" style="enable-background:new 0 0 357.7 16.8;" xml:space="preserve"><style type="text/css"> .st0{fill:#152C47 !important;} .st1{font-family:\'Montserrat-Medium\' !important;} .st2{font-size:24px !important;} .st3{font-family:\'Roboto-Light\' !important;} .st4{font-size:11px !important;} .st5{fill:#020203 !important;} .st6{fill:#0D84C5 !important;} .st7{fill:#FFFFFF !important;}</style><text transform="matrix(1 0 0 1 -2.52 16.7998)" class="st0 st1 st2">REPAIRABILITY INDEX</text><text transform="matrix(1 0 0 1 283.9413 16.7998)" class="st3 st4">BY</text><path class="st5" d="M321,10.1c-0.5-0.6-1.3-0.9-2.2-0.9c-1.6,0-2.8,1.2-2.8,2.8s1.2,2.8,2.8,2.8c0.9,0,1.7-0.4,2.2-1.1l1.4,1.3 c-0.9,1.1-2.1,1.7-3.6,1.7c-2.8,0-4.8-2-4.8-4.8c0-2.8,2-4.8,4.8-4.8c1.4,0,2.7,0.5,3.6,1.5L321,10.1z"/><polygon class="st5" points="307,7.5 312.9,7.5 312.9,9.3 309,9.3 309,11.2 312.4,11.2 312.4,13 309,13 309,15 312.9,15 312.9,16.8 307,16.8 "/><polygon class="st5" points="345.5,7.3 351,7.3 351,9.2 347.4,9.2 347.4,11.5 350.5,11.5 350.5,13.3 347.4,13.3 347.4,16.7 345.5,16.7 "/><polygon class="st5" points="352.1,7.3 357.7,7.3 357.7,9.2 354.1,9.2 354.1,11.5 357.2,11.5 357.2,13.3 354.1,13.3 354.1,16.7 352.1,16.7 "/><polygon class="st5" points="329.5,12.8 325.5,12.8 325.5,16.7 323.6,16.7 323.6,7.3 325.5,7.3 325.5,10.9 329.5,10.9 329.5,7.3 331.5,7.3 331.5,16.7 329.5,16.7 "/><polygon class="st5" points="298.8,7.5 305.9,7.5 305.9,9.4 303.4,9.4 303.4,16.8 301.4,16.8 301.4,9.4 298.8,9.4 "/><polyline class="st5" points="331.9,8.6 333.7,5.8 335.7,5.8 333.9,8.6 331.9,8.6 "/><path class="st5" d="M339.5,7.2c-2.8,0-4.8,2-4.8,4.8s2,4.8,4.8,4.8c2.8,0,4.8-2,4.8-4.8S342.3,7.2,339.5,7.2z"/><polygon class="st6" points="335.4,12.2 341.5,8.6 341.5,15.7 "/><polygon class="st7" points="339.4,16.8 339.3,13.4 336.5,15.2 "/></svg>',
41
42
  'heart-filled': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M16.5 3C19.5376 3 22 5.5 22 9C22 16 14.5 20 12 21.5C9.5 20 2 16 2 9C2 5.5 4.5 3 7.5 3C9.35997 3 11 4 12 5C13 4 14.64 3 16.5 3Z"></path></svg>',
42
43
  'heart': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M16.5 3C19.5376 3 22 5.5 22 9C22 16 14.5 20 12 21.5C9.5 20 2 16 2 9C2 5.5 4.5 3 7.5 3C9.35997 3 11 4 12 5C13 4 14.64 3 16.5 3ZM12.9339 18.6038C13.8155 18.0485 14.61 17.4955 15.3549 16.9029C18.3337 14.533 20 11.9435 20 9C20 6.64076 18.463 5 16.5 5C15.4241 5 14.2593 5.56911 13.4142 6.41421L12 7.82843L10.5858 6.41421C9.74068 5.56911 8.5759 5 7.5 5C5.55906 5 4 6.6565 4 9C4 11.9435 5.66627 14.533 8.64514 16.9029C9.39 17.4955 10.1845 18.0485 11.0661 18.6038C11.3646 18.7919 11.6611 18.9729 12 19.1752C12.3389 18.9729 12.6354 18.7919 12.9339 18.6038Z"></path></svg>',
44
+ 'history': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12H4C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C9.25022 4 6.82447 5.38734 5.38451 7.50024L8 7.5V9.5H2V3.5H4L3.99989 5.99918C5.82434 3.57075 8.72873 2 12 2ZM13 7L12.9998 11.585L16.2426 14.8284L14.8284 16.2426L10.9998 12.413L11 7H13Z"></path></svg>',
43
45
  'home': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19 21H5C4.44772 21 4 20.5523 4 20V11L1 11L11.3273 1.6115C11.7087 1.26475 12.2913 1.26475 12.6727 1.6115L23 11L20 11V20C20 20.5523 19.5523 21 19 21ZM6 19H18V9.15745L12 3.7029L6 9.15745V19Z"></path></svg>',
44
46
  'link': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.3638 15.5355L16.9496 14.1213L18.3638 12.7071C20.3164 10.7545 20.3164 7.58866 18.3638 5.63604C16.4112 3.68341 13.2453 3.68341 11.2927 5.63604L9.87849 7.05025L8.46428 5.63604L9.87849 4.22182C12.6122 1.48815 17.0443 1.48815 19.778 4.22182C22.5117 6.95549 22.5117 11.3876 19.778 14.1213L18.3638 15.5355ZM15.5353 18.364L14.1211 19.7782C11.3875 22.5118 6.95531 22.5118 4.22164 19.7782C1.48797 17.0445 1.48797 12.6123 4.22164 9.87868L5.63585 8.46446L7.05007 9.87868L5.63585 11.2929C3.68323 13.2455 3.68323 16.4113 5.63585 18.364C7.58847 20.3166 10.7543 20.3166 12.7069 18.364L14.1211 16.9497L15.5353 18.364ZM14.8282 7.75736L16.2425 9.17157L9.17139 16.2426L7.75717 14.8284L14.8282 7.75736Z"></path></svg>',
45
47
  'list-settings': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2 18H9V20H2V18ZM2 11H11V13H2V11ZM2 4H22V6H2V4ZM20.674 13.0251L21.8301 12.634L22.8301 14.366L21.914 15.1711C21.9704 15.4386 22 15.7158 22 16C22 16.2842 21.9704 16.5614 21.914 16.8289L22.8301 17.634L21.8301 19.366L20.674 18.9749C20.2635 19.3441 19.7763 19.6295 19.2391 19.8044L19 21H17L16.7609 19.8044C16.2237 19.6295 15.7365 19.3441 15.326 18.9749L14.1699 19.366L13.1699 17.634L14.086 16.8289C14.0296 16.5614 14 16.2842 14 16C14 15.7158 14.0296 15.4386 14.086 15.1711L13.1699 14.366L14.1699 12.634L15.326 13.0251C15.7365 12.6559 16.2237 12.3705 16.7609 12.1956L17 11H19L19.2391 12.1956C19.7763 12.3705 20.2635 12.6559 20.674 13.0251ZM18 18C19.1046 18 20 17.1046 20 16C20 14.8954 19.1046 14 18 14C16.8954 14 16 14.8954 16 16C16 17.1046 16.8954 18 18 18Z"></path></svg>',
46
48
  'lock': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C15.866 2 19 5.13401 19 9V10ZM5 12V20H19V12H5ZM11 14H13V18H11V14ZM17 10V9C17 6.23858 14.7614 4 12 4C9.23858 4 7 6.23858 7 9V10H17Z"></path></svg>',
47
49
  'save': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M7 19V13H17V19H19V7.82843L16.1716 5H5V19H7ZM4 3H17L21 7V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM9 15V19H15V15H9Z"></path></svg>',
48
50
  'search': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z"></path></svg>',
51
+ 'seedling-circle': '<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 18 18" style="enable-background:new 0 0 18 18;" xml:space="preserve"><path d="M9,18c-5,0-9-4-9-9s4-9,9-9s9,4,9,9S14,18,9,18z M9,16.2c4,0,7.2-3.2,7.2-7.2S13,1.8,9,1.8S1.8,5,1.8,9S5,16.2,9,16.2z"/><g> <g> <path d="M8.5,11.1C8,9.1,6.9,8.4,4.7,8.7c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0,0,0.1c0,0,0,0,0,0.1C4.6,9.5,5.2,11.5,8.5,11.1z"/> <path d="M9.2,9.6c2-2.7,1.8-4.5-0.9-6.8c0,0-0.1,0-0.2,0C8,2.8,8,2.8,7.9,2.9C7.2,3.6,5.3,6.2,9.2,9.6"/> <path d="M13.3,9.5C13.3,9.5,13.4,9.5,13.3,9.5c0.1,0,0.1,0.1,0.2,0.1v0.1v0.1c-0.1,0.8-0.6,3-4.1,3.1c-0.2,0.5-0.2,1.1,0,1.6 l-0.9,0.3c-0.2-0.9-0.2-1.8,0-2.7C8.7,11.5,9,11,9.4,10.6s0.9-0.7,1.5-0.9C11.7,9.5,12.5,9.4,13.3,9.5"/> </g></g></svg>',
49
52
  'square': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM5 5V19H19V5H5Z"></path></svg>',
50
53
  'tools': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5.32943 3.27152C6.56252 2.83314 7.9923 3.10743 8.97927 4.0944C10.1002 5.21531 10.3019 6.90735 9.5843 8.23378L20.293 18.9436L18.8788 20.3579L8.16982 9.64869C6.84325 10.3668 5.15069 10.1653 4.02952 9.04415C3.04227 8.0569 2.7681 6.62659 3.20701 5.39326L5.44373 7.62994C6.02952 8.21572 6.97927 8.21572 7.56505 7.62994C8.15084 7.04415 8.15084 6.0944 7.56505 5.50862L5.32943 3.27152ZM15.6968 5.15506L18.8788 3.38729L20.293 4.80151L18.5252 7.98349L16.7574 8.33704L14.6361 10.4584L13.2219 9.04415L15.3432 6.92283L15.6968 5.15506ZM8.97927 13.2868L10.3935 14.701L5.09018 20.0043C4.69966 20.3948 4.06649 20.3948 3.67597 20.0043C3.31334 19.6417 3.28744 19.0698 3.59826 18.6773L3.67597 18.5901L8.97927 13.2868Z"></path></svg>',
51
54
  'user': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 22C4 17.5817 7.58172 14 12 14C16.4183 14 20 17.5817 20 22H18C18 18.6863 15.3137 16 12 16C8.68629 16 6 18.6863 6 22H4ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11Z"></path></svg>',
package/esm/components/Icon/icons/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Icon/icons/index.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAA4B;IAC5C,YAAY,EAAE,qXAAqX;IACnY,KAAK,EAAE,mJAAmJ;IAC1J,qBAAqB,EAAE,+PAA+P;IACtR,cAAc,EAAE,gXAAgX;IAChY,uBAAuB,EAAE,giBAAgiB;IACzjB,gBAAgB,EAAE,ylBAAylB;IAC3mB,yBAAyB,EAAE,oSAAoS;IAC/T,uBAAuB,EAAE,2PAA2P;IACpR,YAAY,EAAE,wOAAwO;IACtP,eAAe,EAAE,oYAAoY;IACrZ,kBAAkB,EAAE,yXAAyX;IAC7Y,YAAY,EAAE,uOAAuO;IACrP,aAAa,EAAE,uOAAuO;IACtP,eAAe,EAAE,+WAA+W;IAChY,UAAU,EAAE,wOAAwO;IACpP,qBAAqB,EAAE,kUAAkU;IACzV,cAAc,EAAE,mbAAmb;IACnc,qBAAqB,EAAE,wUAAwU;IAC/V,cAAc,EAAE,uVAAuV;IACvW,OAAO,EAAE,wNAAwN;IACjO,cAAc,EAAE,0NAA0N;IAC1O,cAAc,EAAE,mNAAmN;IACnO,eAAe,EAAE,2NAA2N;IAC5O,YAAY,EAAE,kNAAkN;IAChO,QAAQ,EAAE,4UAA4U;IACtV,cAAc,EAAE,ogBAAogB;IACphB,OAAO,EAAE,2TAA2T;IACpU,eAAe,EAAE,oWAAoW;IACrX,UAAU,EAAE,mOAAmO;IAC/O,MAAM,EAAE,iXAAiX;IACzX,eAAe,EAAE,oSAAoS;IACrT,YAAY,EAAE,icAAic;IAC/c,QAAQ,EAAE,sMAAsM;IAChN,gBAAgB,EAAE,yZAAyZ;IAC3a,YAAY,EAAE,0UAA0U;IACxV,mBAAmB,EAAE,i8DAAi8D;IACt9D,mBAAmB,EAAE,i7DAAi7D;IACt8D,iBAAiB,EAAE,g7DAAg7D;IACn8D,sBAAsB,EAAE,wiEAAwiE;IAChkE,cAAc,EAAE,wOAAwO;IACxP,OAAO,EAAE,6oBAA6oB;IACtpB,MAAM,EAAE,sSAAsS;IAC9S,MAAM,EAAE,uxBAAuxB;IAC/xB,eAAe,EAAE,01BAA01B;IAC32B,MAAM,EAAE,sYAAsY;IAC9Y,MAAM,EAAE,wQAAwQ;IAChR,QAAQ,EAAE,2eAA2e;IACrf,QAAQ,EAAE,gPAAgP;IAC1P,OAAO,EAAE,oyBAAoyB;IAC7yB,MAAM,EAAE,8ZAA8Z;CACva,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Icon/icons/index.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAA4B;IAC5C,YAAY,EAAE,qXAAqX;IACnY,KAAK,EAAE,mJAAmJ;IAC1J,qBAAqB,EAAE,+PAA+P;IACtR,cAAc,EAAE,gXAAgX;IAChY,uBAAuB,EAAE,giBAAgiB;IACzjB,gBAAgB,EAAE,ylBAAylB;IAC3mB,yBAAyB,EAAE,oSAAoS;IAC/T,uBAAuB,EAAE,2PAA2P;IACpR,YAAY,EAAE,wOAAwO;IACtP,eAAe,EAAE,oYAAoY;IACrZ,kBAAkB,EAAE,yXAAyX;IAC7Y,YAAY,EAAE,uOAAuO;IACrP,aAAa,EAAE,uOAAuO;IACtP,eAAe,EAAE,+WAA+W;IAChY,UAAU,EAAE,wOAAwO;IACpP,qBAAqB,EAAE,kUAAkU;IACzV,oBAAoB,EAAE,ikBAAikB;IACvlB,cAAc,EAAE,mbAAmb;IACnc,qBAAqB,EAAE,wUAAwU;IAC/V,cAAc,EAAE,uVAAuV;IACvW,OAAO,EAAE,wNAAwN;IACjO,cAAc,EAAE,0NAA0N;IAC1O,cAAc,EAAE,mNAAmN;IACnO,eAAe,EAAE,2NAA2N;IAC5O,YAAY,EAAE,kNAAkN;IAChO,QAAQ,EAAE,4UAA4U;IACtV,cAAc,EAAE,ogBAAogB;IACphB,OAAO,EAAE,2TAA2T;IACpU,eAAe,EAAE,oWAAoW;IACrX,UAAU,EAAE,mOAAmO;IAC/O,MAAM,EAAE,iXAAiX;IACzX,eAAe,EAAE,oSAAoS;IACrT,YAAY,EAAE,icAAic;IAC/c,QAAQ,EAAE,sMAAsM;IAChN,gBAAgB,EAAE,yZAAyZ;IAC3a,YAAY,EAAE,0UAA0U;IACxV,mBAAmB,EAAE,i8DAAi8D;IACt9D,mBAAmB,EAAE,i7DAAi7D;IACt8D,iBAAiB,EAAE,g7DAAg7D;IACn8D,sBAAsB,EAAE,wiEAAwiE;IAChkE,cAAc,EAAE,wOAAwO;IACxP,OAAO,EAAE,6oBAA6oB;IACtpB,SAAS,EAAE,2cAA2c;IACtd,MAAM,EAAE,sSAAsS;IAC9S,MAAM,EAAE,uxBAAuxB;IAC/xB,eAAe,EAAE,01BAA01B;IAC32B,MAAM,EAAE,sYAAsY;IAC9Y,MAAM,EAAE,wQAAwQ;IAChR,QAAQ,EAAE,2eAA2e;IACrf,iBAAiB,EAAE,mzBAAmzB;IACt0B,QAAQ,EAAE,gPAAgP;IAC1P,OAAO,EAAE,oyBAAoyB;IAC7yB,MAAM,EAAE,8ZAA8Z;CACva,CAAC"}
package/esm/components/Icon/icons/index.ts CHANGED
@@ -15,6 +15,7 @@ export const icons: { [k: string]: string } = {
15
15
  'arrow-up-down': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11.9498 7.94975L10.5356 9.36396L8.00079 6.828L8.00004 20H6.00004L6.00079 6.828L3.46451 9.36396L2.05029 7.94975L7.00004 3L11.9498 7.94975ZM21.9498 16.0503L17 21L12.0503 16.0503L13.4645 14.636L16.0008 17.172L16 4H18L18.0008 17.172L20.5356 14.636L21.9498 16.0503Z"></path></svg>',
16
16
  'arrow-up': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.0001 7.82843V20H11.0001V7.82843L5.63614 13.1924L4.22192 11.7782L12.0001 4L19.7783 11.7782L18.3641 13.1924L13.0001 7.82843Z"></path></svg>',
17
17
  'check-circle-filled': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM11.0026 16L18.0737 8.92893L16.6595 7.51472L11.0026 13.1716L8.17421 10.3431L6.75999 11.7574L11.0026 16Z"></path></svg>',
18
+ 'check-circle-timer': '<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 21.5 21.6" style="enable-background:new 0 0 21.5 21.6;" xml:space="preserve"><path d="M8.8,21.6c-4.9,0-8.8-3.9-8.8-8.8S3.9,4,8.8,4s8.8,3.9,8.8,8.8S13.6,21.6,8.8,21.6z M8.8,19.8c3.9,0,7-3.1,7-7s-3.1-7-7-7 s-7,3.1-7,7S4.9,19.8,8.8,19.8z M7.9,16.3l-3.7-3.7l1.3-1.3l2.4,2.4l5-4.9l1.3,1.3L7.9,16.3z"/><path d="M15.8,11.4c-3.1,0-5.7-2.6-5.7-5.7S12.7,0,15.8,0s5.7,2.6,5.7,5.7S18.9,11.4,15.8,11.4z M16.4,5.7V2.8h-1.1v4h3.4V5.7H16.4z "/></svg>',
18
19
  'check-circle': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11.0026 16L6.75999 11.7574L8.17421 10.3431L11.0026 13.1716L16.6595 7.51472L18.0737 8.92893L11.0026 16Z"></path></svg>',
19
20
  'check-square-filled': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM11.0026 16L18.0737 8.92893L16.6595 7.51472L11.0026 13.1716L8.17421 10.3431L6.75999 11.7574L11.0026 16Z"></path></svg>',
20
21
  'check-square': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM5 5V19H19V5H5ZM11.0026 16L6.75999 11.7574L8.17421 10.3431L11.0026 13.1716L16.6595 7.51472L18.0737 8.92893L11.0026 16Z"></path></svg>',
@@ -40,12 +41,14 @@ export const icons: { [k: string]: string } = {
40
41
  'header-repairability': '<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 27.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 357.7 16.8" style="enable-background:new 0 0 357.7 16.8;" xml:space="preserve"><style type="text/css"> .st0{fill:#152C47 !important;} .st1{font-family:\'Montserrat-Medium\' !important;} .st2{font-size:24px !important;} .st3{font-family:\'Roboto-Light\' !important;} .st4{font-size:11px !important;} .st5{fill:#020203 !important;} .st6{fill:#0D84C5 !important;} .st7{fill:#FFFFFF !important;}</style><text transform="matrix(1 0 0 1 -2.52 16.7998)" class="st0 st1 st2">REPAIRABILITY INDEX</text><text transform="matrix(1 0 0 1 283.9413 16.7998)" class="st3 st4">BY</text><path class="st5" d="M321,10.1c-0.5-0.6-1.3-0.9-2.2-0.9c-1.6,0-2.8,1.2-2.8,2.8s1.2,2.8,2.8,2.8c0.9,0,1.7-0.4,2.2-1.1l1.4,1.3 c-0.9,1.1-2.1,1.7-3.6,1.7c-2.8,0-4.8-2-4.8-4.8c0-2.8,2-4.8,4.8-4.8c1.4,0,2.7,0.5,3.6,1.5L321,10.1z"/><polygon class="st5" points="307,7.5 312.9,7.5 312.9,9.3 309,9.3 309,11.2 312.4,11.2 312.4,13 309,13 309,15 312.9,15 312.9,16.8 307,16.8 "/><polygon class="st5" points="345.5,7.3 351,7.3 351,9.2 347.4,9.2 347.4,11.5 350.5,11.5 350.5,13.3 347.4,13.3 347.4,16.7 345.5,16.7 "/><polygon class="st5" points="352.1,7.3 357.7,7.3 357.7,9.2 354.1,9.2 354.1,11.5 357.2,11.5 357.2,13.3 354.1,13.3 354.1,16.7 352.1,16.7 "/><polygon class="st5" points="329.5,12.8 325.5,12.8 325.5,16.7 323.6,16.7 323.6,7.3 325.5,7.3 325.5,10.9 329.5,10.9 329.5,7.3 331.5,7.3 331.5,16.7 329.5,16.7 "/><polygon class="st5" points="298.8,7.5 305.9,7.5 305.9,9.4 303.4,9.4 303.4,16.8 301.4,16.8 301.4,9.4 298.8,9.4 "/><polyline class="st5" points="331.9,8.6 333.7,5.8 335.7,5.8 333.9,8.6 331.9,8.6 "/><path class="st5" d="M339.5,7.2c-2.8,0-4.8,2-4.8,4.8s2,4.8,4.8,4.8c2.8,0,4.8-2,4.8-4.8S342.3,7.2,339.5,7.2z"/><polygon class="st6" points="335.4,12.2 341.5,8.6 341.5,15.7 "/><polygon class="st7" points="339.4,16.8 339.3,13.4 336.5,15.2 "/></svg>',
41
42
  'heart-filled': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M16.5 3C19.5376 3 22 5.5 22 9C22 16 14.5 20 12 21.5C9.5 20 2 16 2 9C2 5.5 4.5 3 7.5 3C9.35997 3 11 4 12 5C13 4 14.64 3 16.5 3Z"></path></svg>',
42
43
  'heart': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M16.5 3C19.5376 3 22 5.5 22 9C22 16 14.5 20 12 21.5C9.5 20 2 16 2 9C2 5.5 4.5 3 7.5 3C9.35997 3 11 4 12 5C13 4 14.64 3 16.5 3ZM12.9339 18.6038C13.8155 18.0485 14.61 17.4955 15.3549 16.9029C18.3337 14.533 20 11.9435 20 9C20 6.64076 18.463 5 16.5 5C15.4241 5 14.2593 5.56911 13.4142 6.41421L12 7.82843L10.5858 6.41421C9.74068 5.56911 8.5759 5 7.5 5C5.55906 5 4 6.6565 4 9C4 11.9435 5.66627 14.533 8.64514 16.9029C9.39 17.4955 10.1845 18.0485 11.0661 18.6038C11.3646 18.7919 11.6611 18.9729 12 19.1752C12.3389 18.9729 12.6354 18.7919 12.9339 18.6038Z"></path></svg>',
44
+ 'history': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12H4C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C9.25022 4 6.82447 5.38734 5.38451 7.50024L8 7.5V9.5H2V3.5H4L3.99989 5.99918C5.82434 3.57075 8.72873 2 12 2ZM13 7L12.9998 11.585L16.2426 14.8284L14.8284 16.2426L10.9998 12.413L11 7H13Z"></path></svg>',
43
45
  'home': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19 21H5C4.44772 21 4 20.5523 4 20V11L1 11L11.3273 1.6115C11.7087 1.26475 12.2913 1.26475 12.6727 1.6115L23 11L20 11V20C20 20.5523 19.5523 21 19 21ZM6 19H18V9.15745L12 3.7029L6 9.15745V19Z"></path></svg>',
44
46
  'link': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.3638 15.5355L16.9496 14.1213L18.3638 12.7071C20.3164 10.7545 20.3164 7.58866 18.3638 5.63604C16.4112 3.68341 13.2453 3.68341 11.2927 5.63604L9.87849 7.05025L8.46428 5.63604L9.87849 4.22182C12.6122 1.48815 17.0443 1.48815 19.778 4.22182C22.5117 6.95549 22.5117 11.3876 19.778 14.1213L18.3638 15.5355ZM15.5353 18.364L14.1211 19.7782C11.3875 22.5118 6.95531 22.5118 4.22164 19.7782C1.48797 17.0445 1.48797 12.6123 4.22164 9.87868L5.63585 8.46446L7.05007 9.87868L5.63585 11.2929C3.68323 13.2455 3.68323 16.4113 5.63585 18.364C7.58847 20.3166 10.7543 20.3166 12.7069 18.364L14.1211 16.9497L15.5353 18.364ZM14.8282 7.75736L16.2425 9.17157L9.17139 16.2426L7.75717 14.8284L14.8282 7.75736Z"></path></svg>',
45
47
  'list-settings': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2 18H9V20H2V18ZM2 11H11V13H2V11ZM2 4H22V6H2V4ZM20.674 13.0251L21.8301 12.634L22.8301 14.366L21.914 15.1711C21.9704 15.4386 22 15.7158 22 16C22 16.2842 21.9704 16.5614 21.914 16.8289L22.8301 17.634L21.8301 19.366L20.674 18.9749C20.2635 19.3441 19.7763 19.6295 19.2391 19.8044L19 21H17L16.7609 19.8044C16.2237 19.6295 15.7365 19.3441 15.326 18.9749L14.1699 19.366L13.1699 17.634L14.086 16.8289C14.0296 16.5614 14 16.2842 14 16C14 15.7158 14.0296 15.4386 14.086 15.1711L13.1699 14.366L14.1699 12.634L15.326 13.0251C15.7365 12.6559 16.2237 12.3705 16.7609 12.1956L17 11H19L19.2391 12.1956C19.7763 12.3705 20.2635 12.6559 20.674 13.0251ZM18 18C19.1046 18 20 17.1046 20 16C20 14.8954 19.1046 14 18 14C16.8954 14 16 14.8954 16 16C16 17.1046 16.8954 18 18 18Z"></path></svg>',
46
48
  'lock': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C15.866 2 19 5.13401 19 9V10ZM5 12V20H19V12H5ZM11 14H13V18H11V14ZM17 10V9C17 6.23858 14.7614 4 12 4C9.23858 4 7 6.23858 7 9V10H17Z"></path></svg>',
47
49
  'save': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M7 19V13H17V19H19V7.82843L16.1716 5H5V19H7ZM4 3H17L21 7V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM9 15V19H15V15H9Z"></path></svg>',
48
50
  'search': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z"></path></svg>',
51
+ 'seedling-circle': '<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 18 18" style="enable-background:new 0 0 18 18;" xml:space="preserve"><path d="M9,18c-5,0-9-4-9-9s4-9,9-9s9,4,9,9S14,18,9,18z M9,16.2c4,0,7.2-3.2,7.2-7.2S13,1.8,9,1.8S1.8,5,1.8,9S5,16.2,9,16.2z"/><g> <g> <path d="M8.5,11.1C8,9.1,6.9,8.4,4.7,8.7c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0,0,0.1c0,0,0,0,0,0.1C4.6,9.5,5.2,11.5,8.5,11.1z"/> <path d="M9.2,9.6c2-2.7,1.8-4.5-0.9-6.8c0,0-0.1,0-0.2,0C8,2.8,8,2.8,7.9,2.9C7.2,3.6,5.3,6.2,9.2,9.6"/> <path d="M13.3,9.5C13.3,9.5,13.4,9.5,13.3,9.5c0.1,0,0.1,0.1,0.2,0.1v0.1v0.1c-0.1,0.8-0.6,3-4.1,3.1c-0.2,0.5-0.2,1.1,0,1.6 l-0.9,0.3c-0.2-0.9-0.2-1.8,0-2.7C8.7,11.5,9,11,9.4,10.6s0.9-0.7,1.5-0.9C11.7,9.5,12.5,9.4,13.3,9.5"/> </g></g></svg>',
49
52
  'square': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM5 5V19H19V5H5Z"></path></svg>',
50
53
  'tools': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5.32943 3.27152C6.56252 2.83314 7.9923 3.10743 8.97927 4.0944C10.1002 5.21531 10.3019 6.90735 9.5843 8.23378L20.293 18.9436L18.8788 20.3579L8.16982 9.64869C6.84325 10.3668 5.15069 10.1653 4.02952 9.04415C3.04227 8.0569 2.7681 6.62659 3.20701 5.39326L5.44373 7.62994C6.02952 8.21572 6.97927 8.21572 7.56505 7.62994C8.15084 7.04415 8.15084 6.0944 7.56505 5.50862L5.32943 3.27152ZM15.6968 5.15506L18.8788 3.38729L20.293 4.80151L18.5252 7.98349L16.7574 8.33704L14.6361 10.4584L13.2219 9.04415L15.3432 6.92283L15.6968 5.15506ZM8.97927 13.2868L10.3935 14.701L5.09018 20.0043C4.69966 20.3948 4.06649 20.3948 3.67597 20.0043C3.31334 19.6417 3.28744 19.0698 3.59826 18.6773L3.67597 18.5901L8.97927 13.2868Z"></path></svg>',
51
54
  'user': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 22C4 17.5817 7.58172 14 12 14C16.4183 14 20 17.5817 20 22H18C18 18.6863 15.3137 16 12 16C8.68629 16 6 18.6863 6 22H4ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11Z"></path></svg>',
package/esm/components/Icon/icons/seedling-circle.svg ADDED
@@ -0,0 +1,12 @@
1
+ <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
2
+ viewBox="0 0 18 18" style="enable-background:new 0 0 18 18;" xml:space="preserve">
3
+ <path d="M9,18c-5,0-9-4-9-9s4-9,9-9s9,4,9,9S14,18,9,18z M9,16.2c4,0,7.2-3.2,7.2-7.2S13,1.8,9,1.8S1.8,5,1.8,9S5,16.2,9,16.2z"/>
4
+ <g>
5
+ <g>
6
+ <path d="M8.5,11.1C8,9.1,6.9,8.4,4.7,8.7c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0,0,0.1c0,0,0,0,0,0.1C4.6,9.5,5.2,11.5,8.5,11.1z"/>
7
+ <path d="M9.2,9.6c2-2.7,1.8-4.5-0.9-6.8c0,0-0.1,0-0.2,0C8,2.8,8,2.8,7.9,2.9C7.2,3.6,5.3,6.2,9.2,9.6"/>
8
+ <path d="M13.3,9.5C13.3,9.5,13.4,9.5,13.3,9.5c0.1,0,0.1,0.1,0.2,0.1v0.1v0.1c-0.1,0.8-0.6,3-4.1,3.1c-0.2,0.5-0.2,1.1,0,1.6
9
+ l-0.9,0.3c-0.2-0.9-0.2-1.8,0-2.7C8.7,11.5,9,11,9.4,10.6s0.9-0.7,1.5-0.9C11.7,9.5,12.5,9.4,13.3,9.5"/>
10
+ </g>
11
+ </g>
12
+ </svg>
package/esm/layouts/Header/Header.js CHANGED
@@ -1,5 +1,4 @@
1
1
  import * as React from 'react';
2
- import { cloneElement } from 'react';
3
2
  import { icons } from '../../components/Icon/icons';
4
3
  import './Header.css';
5
4
  export const Header = ({ actions, appName }) => {
@@ -9,6 +8,6 @@ export const Header = ({ actions, appName }) => {
9
8
  React.createElement("div", { className: "header-left-side" },
10
9
  React.createElement("div", { className: "header-techoff", dangerouslySetInnerHTML: { __html: icons[`header-${appName}`] } })),
11
10
  React.createElement("div", null,
12
- React.createElement("div", { className: "header-actions" }, actions.map((action, index) => cloneElement(action, { key: index, ...action.props }))))));
11
+ React.createElement("div", { className: "header-actions" }, actions))));
13
12
  };
14
13
  //# sourceMappingURL=Header.js.map
package/esm/layouts/Header/Header.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/layouts/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAEpD,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAAe,EAAE,EAAE;IAC1D,YAAY;IACZ,YAAY;IACZ,OAAO,CACL;QACE,6BAAK,SAAS,EAAC,kBAAkB;YAC/B,6BAAK,SAAS,EAAC,gBAAgB,EAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,UAAU,OAAO,EAAE,CAAC,EAAE,GAAI,CAC/F;QACN;YACE,6BAAK,SAAS,EAAC,gBAAgB,IAC5B,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAClF,CACF,CACC,CACV,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/layouts/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAEpD,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAAe,EAAE,EAAE;IAC1D,YAAY;IACZ,YAAY;IACZ,OAAO,CACL;QACE,6BAAK,SAAS,EAAC,kBAAkB;YAC/B,6BAAK,SAAS,EAAC,gBAAgB,EAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,UAAU,OAAO,EAAE,CAAC,EAAE,GAAI,CAC/F;QACN;YACE,6BAAK,SAAS,EAAC,gBAAgB,IAAE,OAAO,CAAO,CAC3C,CACC,CACV,CAAC;AACJ,CAAC,CAAC"}
package/esm/layouts/Header/Header.types.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ReactElement } from 'react';
2
2
  export type HeaderProps = {
3
- actions: ReactElement[];
3
+ actions: ReactElement;
4
4
  appName: 'bikestudio' | 'nsc-helmet' | 'opticost' | 'repairability';
5
5
  };
6
6
  export type HeaderProfileProps = {
package/esm/layouts/Header/__stories__/Header.stories.mdx CHANGED
@@ -24,10 +24,12 @@ The header will allow users to quickly find the information they need at a glanc
24
24
  <Story
25
25
  name="Overview"
26
26
  args={{
27
- actions: [
28
- <Button icon="add" size="lg" variant="shadow" rounded />,
29
- <HeaderProfile firstname="John" lastname="Doe" />,
30
- ],
27
+ actions: (
28
+ <>
29
+ <Button icon="add" size="lg" variant="shadow" rounded />
30
+ <HeaderProfile firstname="John" lastname="Doe" />
31
+ </>
32
+ ),
31
33
  appName: 'repairability',
32
34
  }}
33
35
  argTypes={headerArgTypes}
package/esm/layouts/Navigation/Navigation.d.ts CHANGED
@@ -2,5 +2,6 @@ import * as React from 'react';
2
2
  import { PropsWithChildren } from 'react';
3
3
  import { NavigationBreadcrumbItemProps, NavigationProps } from './Navigation.types';
4
4
  import './Navigation.css';
5
+ export declare const NavigationBreadcrumbDivider: () => React.JSX.Element;
5
6
  export declare const NavigationBreadcrumbItem: ({ children, icon, highlight, onClick, }: PropsWithChildren<NavigationBreadcrumbItemProps>) => React.JSX.Element;
6
7
  export declare const Navigation: ({ actions, breadcrumbs }: NavigationProps) => React.JSX.Element;
package/esm/layouts/Navigation/Navigation.js CHANGED
@@ -1,7 +1,12 @@
1
1
  import * as React from 'react';
2
- import { cloneElement } from 'react';
3
2
  import { Icon } from '../../components/Icon/Icon';
4
3
  import './Navigation.css';
4
+ export const NavigationBreadcrumbDivider = () => {
5
+ // #########
6
+ // Rendering
7
+ return (React.createElement("div", { className: "breadcrumb-chevron" },
8
+ React.createElement(Icon, { name: "chevron-right" })));
9
+ };
5
10
  export const NavigationBreadcrumbItem = ({ children, icon, highlight, onClick, }) => {
6
11
  // #########
7
12
  // Rendering
@@ -17,11 +22,8 @@ export const Navigation = ({ actions, breadcrumbs }) => {
17
22
  // #########
18
23
  // Rendering
19
24
  return (React.createElement("div", { className: "navigation" },
20
- React.createElement("div", { className: "breadcrumb" }, breadcrumbs.map((breadcrumb, index) => (React.createElement("div", { key: index, className: "breadcrumb-container" },
21
- breadcrumb,
22
- index !== breadcrumbs.length - 1 && (React.createElement("div", { className: "breadcrumb-chevron" },
23
- React.createElement(Icon, { name: "chevron-right" }))))))),
25
+ React.createElement("div", { className: "breadcrumb" }, breadcrumbs),
24
26
  React.createElement("div", { className: "navigation-divider" }),
25
- React.createElement("div", { className: "navigation-actions" }, actions?.map((action, index) => cloneElement(action, { key: index, ...action.props })))));
27
+ React.createElement("div", { className: "navigation-actions" }, actions)));
26
28
  };
27
29
  //# sourceMappingURL=Navigation.js.map
package/esm/layouts/Navigation/Navigation.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Navigation.js","sourceRoot":"","sources":["../../../src/layouts/Navigation/Navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAElD,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,EACvC,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,OAAO,GAC0C,EAAE,EAAE;IACrD,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BACE,SAAS,EAAE;;UAEP,SAAS,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE,IAAI,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE;OAC1F,EACD,OAAO,EAAE,OAAO;QAEf,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,uBAAuB;YACpC,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC1B,CACP;QAEA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,EAAE,WAAW,EAAmB,EAAE,EAAE;IACtE,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,YAAY;QACzB,6BAAK,SAAS,EAAC,YAAY,IACxB,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,CAAC,CACtC,6BAAK,GAAG,EAAE,KAAK,EAAE,SAAS,EAAC,sBAAsB;YAC9C,UAAU;YAEV,KAAK,KAAK,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,CACnC,6BAAK,SAAS,EAAC,oBAAoB;gBACjC,oBAAC,IAAI,IAAC,IAAI,EAAC,eAAe,GAAG,CACzB,CACP,CACG,CACP,CAAC,CACE;QACN,6BAAK,SAAS,EAAC,oBAAoB,GAAG;QACtC,6BAAK,SAAS,EAAC,oBAAoB,IAChC,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CACnF,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"Navigation.js","sourceRoot":"","sources":["../../../src/layouts/Navigation/Navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAElD,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAG,EAAE;IAC9C,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,oBAAoB;QACjC,oBAAC,IAAI,IAAC,IAAI,EAAC,eAAe,GAAG,CACzB,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,EACvC,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,OAAO,GAC0C,EAAE,EAAE;IACrD,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BACE,SAAS,EAAE;;UAEP,SAAS,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE,IAAI,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE;OAC1F,EACD,OAAO,EAAE,OAAO;QAEf,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,uBAAuB;YACpC,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC1B,CACP;QAEA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,EAAE,WAAW,EAAmB,EAAE,EAAE;IACtE,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,YAAY;QACzB,6BAAK,SAAS,EAAC,YAAY,IAAE,WAAW,CAAO;QAC/C,6BAAK,SAAS,EAAC,oBAAoB,GAAG;QACtC,6BAAK,SAAS,EAAC,oBAAoB,IAAE,OAAO,CAAO,CAC/C,CACP,CAAC;AACJ,CAAC,CAAC"}
package/esm/layouts/Navigation/Navigation.types.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { ReactElement } from 'react';
2
2
  export type NavigationProps = {
3
- actions?: ReactElement[];
4
- breadcrumbs: ReactElement[];
3
+ actions?: ReactElement;
4
+ breadcrumbs: ReactElement;
5
5
  };
6
6
  export type NavigationBreadcrumbItemProps = {
7
7
  icon?: string;
package/esm/layouts/Navigation/__stories__/Navigation.stories.mdx CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
3
- import { Navigation, NavigationBreadcrumbItem } from '../Navigation';
3
+ import { Navigation, NavigationBreadcrumbItem, NavigationBreadcrumbDivider } from '../Navigation';
4
4
  import { Button } from '../../../components/Button/Button';
5
5
  import { icons } from '../../../components/Icon/icons';
6
6
 
@@ -16,21 +16,27 @@ Breadcrumbs are an important navigation component that shows content hierarchy.
16
16
  <Story
17
17
  name="Overview"
18
18
  args={{
19
- actions: [
20
- <Button icon="check" onClick={() => {}}>
21
- Action 1
22
- </Button>,
23
- <Button icon="add" onClick={() => {}}>
24
- Action 2
25
- </Button>,
26
- ],
27
- breadcrumbs: [
19
+ actions: (
20
+ <>
21
+ <Button icon="check" onClick={() => {}}>
22
+ Action 1
23
+ </Button>
24
+ <Button icon="add" onClick={() => {}}>
25
+ Action 2
26
+ </Button>
27
+ </>
28
+ ),
29
+ breadcrumbs: (
30
+ <>
28
31
  <NavigationBreadcrumbItem icon="home" onClick={() => {}}>
29
32
  Home
30
- </NavigationBreadcrumbItem>,
31
- <NavigationBreadcrumbItem onClick={() => {}}>Menu Item 1</NavigationBreadcrumbItem>,
33
+ </NavigationBreadcrumbItem>
34
+ <NavigationBreadcrumbDivider />
35
+ <NavigationBreadcrumbItem onClick={() => {}}>Menu Item 1</NavigationBreadcrumbItem>
36
+ <NavigationBreadcrumbDivider />
32
37
  <NavigationBreadcrumbItem highlight>Menu Item 2</NavigationBreadcrumbItem>
33
- ]
38
+ </>
39
+ )
34
40
  }}
35
41
 
36
42
  >
package/lib/components/Icon/icons/check-circle-timer.svg ADDED
@@ -0,0 +1,7 @@
1
+ <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
2
+ viewBox="0 0 21.5 21.6" style="enable-background:new 0 0 21.5 21.6;" xml:space="preserve">
3
+ <path d="M8.8,21.6c-4.9,0-8.8-3.9-8.8-8.8S3.9,4,8.8,4s8.8,3.9,8.8,8.8S13.6,21.6,8.8,21.6z M8.8,19.8c3.9,0,7-3.1,7-7s-3.1-7-7-7
4
+ s-7,3.1-7,7S4.9,19.8,8.8,19.8z M7.9,16.3l-3.7-3.7l1.3-1.3l2.4,2.4l5-4.9l1.3,1.3L7.9,16.3z"/>
5
+ <path d="M15.8,11.4c-3.1,0-5.7-2.6-5.7-5.7S12.7,0,15.8,0s5.7,2.6,5.7,5.7S18.9,11.4,15.8,11.4z M16.4,5.7V2.8h-1.1v4h3.4V5.7H16.4z
6
+ "/>
7
+ </svg>
package/lib/components/Icon/icons/history.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12H4C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C9.25022 4 6.82447 5.38734 5.38451 7.50024L8 7.5V9.5H2V3.5H4L3.99989 5.99918C5.82434 3.57075 8.72873 2 12 2ZM13 7L12.9998 11.585L16.2426 14.8284L14.8284 16.2426L10.9998 12.413L11 7H13Z"></path></svg>
package/lib/components/Icon/icons/index.js CHANGED
@@ -18,6 +18,7 @@ exports.icons = {
18
18
  'arrow-up-down': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11.9498 7.94975L10.5356 9.36396L8.00079 6.828L8.00004 20H6.00004L6.00079 6.828L3.46451 9.36396L2.05029 7.94975L7.00004 3L11.9498 7.94975ZM21.9498 16.0503L17 21L12.0503 16.0503L13.4645 14.636L16.0008 17.172L16 4H18L18.0008 17.172L20.5356 14.636L21.9498 16.0503Z"></path></svg>',
19
19
  'arrow-up': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.0001 7.82843V20H11.0001V7.82843L5.63614 13.1924L4.22192 11.7782L12.0001 4L19.7783 11.7782L18.3641 13.1924L13.0001 7.82843Z"></path></svg>',
20
20
  'check-circle-filled': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM11.0026 16L18.0737 8.92893L16.6595 7.51472L11.0026 13.1716L8.17421 10.3431L6.75999 11.7574L11.0026 16Z"></path></svg>',
21
+ 'check-circle-timer': '<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 21.5 21.6" style="enable-background:new 0 0 21.5 21.6;" xml:space="preserve"><path d="M8.8,21.6c-4.9,0-8.8-3.9-8.8-8.8S3.9,4,8.8,4s8.8,3.9,8.8,8.8S13.6,21.6,8.8,21.6z M8.8,19.8c3.9,0,7-3.1,7-7s-3.1-7-7-7 s-7,3.1-7,7S4.9,19.8,8.8,19.8z M7.9,16.3l-3.7-3.7l1.3-1.3l2.4,2.4l5-4.9l1.3,1.3L7.9,16.3z"/><path d="M15.8,11.4c-3.1,0-5.7-2.6-5.7-5.7S12.7,0,15.8,0s5.7,2.6,5.7,5.7S18.9,11.4,15.8,11.4z M16.4,5.7V2.8h-1.1v4h3.4V5.7H16.4z "/></svg>',
21
22
  'check-circle': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11.0026 16L6.75999 11.7574L8.17421 10.3431L11.0026 13.1716L16.6595 7.51472L18.0737 8.92893L11.0026 16Z"></path></svg>',
22
23
  'check-square-filled': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM11.0026 16L18.0737 8.92893L16.6595 7.51472L11.0026 13.1716L8.17421 10.3431L6.75999 11.7574L11.0026 16Z"></path></svg>',
23
24
  'check-square': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM5 5V19H19V5H5ZM11.0026 16L6.75999 11.7574L8.17421 10.3431L11.0026 13.1716L16.6595 7.51472L18.0737 8.92893L11.0026 16Z"></path></svg>',
@@ -43,12 +44,14 @@ exports.icons = {
43
44
  'header-repairability': '<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 27.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 357.7 16.8" style="enable-background:new 0 0 357.7 16.8;" xml:space="preserve"><style type="text/css"> .st0{fill:#152C47 !important;} .st1{font-family:\'Montserrat-Medium\' !important;} .st2{font-size:24px !important;} .st3{font-family:\'Roboto-Light\' !important;} .st4{font-size:11px !important;} .st5{fill:#020203 !important;} .st6{fill:#0D84C5 !important;} .st7{fill:#FFFFFF !important;}</style><text transform="matrix(1 0 0 1 -2.52 16.7998)" class="st0 st1 st2">REPAIRABILITY INDEX</text><text transform="matrix(1 0 0 1 283.9413 16.7998)" class="st3 st4">BY</text><path class="st5" d="M321,10.1c-0.5-0.6-1.3-0.9-2.2-0.9c-1.6,0-2.8,1.2-2.8,2.8s1.2,2.8,2.8,2.8c0.9,0,1.7-0.4,2.2-1.1l1.4,1.3 c-0.9,1.1-2.1,1.7-3.6,1.7c-2.8,0-4.8-2-4.8-4.8c0-2.8,2-4.8,4.8-4.8c1.4,0,2.7,0.5,3.6,1.5L321,10.1z"/><polygon class="st5" points="307,7.5 312.9,7.5 312.9,9.3 309,9.3 309,11.2 312.4,11.2 312.4,13 309,13 309,15 312.9,15 312.9,16.8 307,16.8 "/><polygon class="st5" points="345.5,7.3 351,7.3 351,9.2 347.4,9.2 347.4,11.5 350.5,11.5 350.5,13.3 347.4,13.3 347.4,16.7 345.5,16.7 "/><polygon class="st5" points="352.1,7.3 357.7,7.3 357.7,9.2 354.1,9.2 354.1,11.5 357.2,11.5 357.2,13.3 354.1,13.3 354.1,16.7 352.1,16.7 "/><polygon class="st5" points="329.5,12.8 325.5,12.8 325.5,16.7 323.6,16.7 323.6,7.3 325.5,7.3 325.5,10.9 329.5,10.9 329.5,7.3 331.5,7.3 331.5,16.7 329.5,16.7 "/><polygon class="st5" points="298.8,7.5 305.9,7.5 305.9,9.4 303.4,9.4 303.4,16.8 301.4,16.8 301.4,9.4 298.8,9.4 "/><polyline class="st5" points="331.9,8.6 333.7,5.8 335.7,5.8 333.9,8.6 331.9,8.6 "/><path class="st5" d="M339.5,7.2c-2.8,0-4.8,2-4.8,4.8s2,4.8,4.8,4.8c2.8,0,4.8-2,4.8-4.8S342.3,7.2,339.5,7.2z"/><polygon class="st6" points="335.4,12.2 341.5,8.6 341.5,15.7 "/><polygon class="st7" points="339.4,16.8 339.3,13.4 336.5,15.2 "/></svg>',
44
45
  'heart-filled': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M16.5 3C19.5376 3 22 5.5 22 9C22 16 14.5 20 12 21.5C9.5 20 2 16 2 9C2 5.5 4.5 3 7.5 3C9.35997 3 11 4 12 5C13 4 14.64 3 16.5 3Z"></path></svg>',
45
46
  'heart': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M16.5 3C19.5376 3 22 5.5 22 9C22 16 14.5 20 12 21.5C9.5 20 2 16 2 9C2 5.5 4.5 3 7.5 3C9.35997 3 11 4 12 5C13 4 14.64 3 16.5 3ZM12.9339 18.6038C13.8155 18.0485 14.61 17.4955 15.3549 16.9029C18.3337 14.533 20 11.9435 20 9C20 6.64076 18.463 5 16.5 5C15.4241 5 14.2593 5.56911 13.4142 6.41421L12 7.82843L10.5858 6.41421C9.74068 5.56911 8.5759 5 7.5 5C5.55906 5 4 6.6565 4 9C4 11.9435 5.66627 14.533 8.64514 16.9029C9.39 17.4955 10.1845 18.0485 11.0661 18.6038C11.3646 18.7919 11.6611 18.9729 12 19.1752C12.3389 18.9729 12.6354 18.7919 12.9339 18.6038Z"></path></svg>',
47
+ 'history': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12H4C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C9.25022 4 6.82447 5.38734 5.38451 7.50024L8 7.5V9.5H2V3.5H4L3.99989 5.99918C5.82434 3.57075 8.72873 2 12 2ZM13 7L12.9998 11.585L16.2426 14.8284L14.8284 16.2426L10.9998 12.413L11 7H13Z"></path></svg>',
46
48
  'home': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19 21H5C4.44772 21 4 20.5523 4 20V11L1 11L11.3273 1.6115C11.7087 1.26475 12.2913 1.26475 12.6727 1.6115L23 11L20 11V20C20 20.5523 19.5523 21 19 21ZM6 19H18V9.15745L12 3.7029L6 9.15745V19Z"></path></svg>',
47
49
  'link': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.3638 15.5355L16.9496 14.1213L18.3638 12.7071C20.3164 10.7545 20.3164 7.58866 18.3638 5.63604C16.4112 3.68341 13.2453 3.68341 11.2927 5.63604L9.87849 7.05025L8.46428 5.63604L9.87849 4.22182C12.6122 1.48815 17.0443 1.48815 19.778 4.22182C22.5117 6.95549 22.5117 11.3876 19.778 14.1213L18.3638 15.5355ZM15.5353 18.364L14.1211 19.7782C11.3875 22.5118 6.95531 22.5118 4.22164 19.7782C1.48797 17.0445 1.48797 12.6123 4.22164 9.87868L5.63585 8.46446L7.05007 9.87868L5.63585 11.2929C3.68323 13.2455 3.68323 16.4113 5.63585 18.364C7.58847 20.3166 10.7543 20.3166 12.7069 18.364L14.1211 16.9497L15.5353 18.364ZM14.8282 7.75736L16.2425 9.17157L9.17139 16.2426L7.75717 14.8284L14.8282 7.75736Z"></path></svg>',
48
50
  'list-settings': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2 18H9V20H2V18ZM2 11H11V13H2V11ZM2 4H22V6H2V4ZM20.674 13.0251L21.8301 12.634L22.8301 14.366L21.914 15.1711C21.9704 15.4386 22 15.7158 22 16C22 16.2842 21.9704 16.5614 21.914 16.8289L22.8301 17.634L21.8301 19.366L20.674 18.9749C20.2635 19.3441 19.7763 19.6295 19.2391 19.8044L19 21H17L16.7609 19.8044C16.2237 19.6295 15.7365 19.3441 15.326 18.9749L14.1699 19.366L13.1699 17.634L14.086 16.8289C14.0296 16.5614 14 16.2842 14 16C14 15.7158 14.0296 15.4386 14.086 15.1711L13.1699 14.366L14.1699 12.634L15.326 13.0251C15.7365 12.6559 16.2237 12.3705 16.7609 12.1956L17 11H19L19.2391 12.1956C19.7763 12.3705 20.2635 12.6559 20.674 13.0251ZM18 18C19.1046 18 20 17.1046 20 16C20 14.8954 19.1046 14 18 14C16.8954 14 16 14.8954 16 16C16 17.1046 16.8954 18 18 18Z"></path></svg>',
49
51
  'lock': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C15.866 2 19 5.13401 19 9V10ZM5 12V20H19V12H5ZM11 14H13V18H11V14ZM17 10V9C17 6.23858 14.7614 4 12 4C9.23858 4 7 6.23858 7 9V10H17Z"></path></svg>',
50
52
  'save': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M7 19V13H17V19H19V7.82843L16.1716 5H5V19H7ZM4 3H17L21 7V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM9 15V19H15V15H9Z"></path></svg>',
51
53
  'search': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z"></path></svg>',
54
+ 'seedling-circle': '<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 18 18" style="enable-background:new 0 0 18 18;" xml:space="preserve"><path d="M9,18c-5,0-9-4-9-9s4-9,9-9s9,4,9,9S14,18,9,18z M9,16.2c4,0,7.2-3.2,7.2-7.2S13,1.8,9,1.8S1.8,5,1.8,9S5,16.2,9,16.2z"/><g> <g> <path d="M8.5,11.1C8,9.1,6.9,8.4,4.7,8.7c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0,0,0.1c0,0,0,0,0,0.1C4.6,9.5,5.2,11.5,8.5,11.1z"/> <path d="M9.2,9.6c2-2.7,1.8-4.5-0.9-6.8c0,0-0.1,0-0.2,0C8,2.8,8,2.8,7.9,2.9C7.2,3.6,5.3,6.2,9.2,9.6"/> <path d="M13.3,9.5C13.3,9.5,13.4,9.5,13.3,9.5c0.1,0,0.1,0.1,0.2,0.1v0.1v0.1c-0.1,0.8-0.6,3-4.1,3.1c-0.2,0.5-0.2,1.1,0,1.6 l-0.9,0.3c-0.2-0.9-0.2-1.8,0-2.7C8.7,11.5,9,11,9.4,10.6s0.9-0.7,1.5-0.9C11.7,9.5,12.5,9.4,13.3,9.5"/> </g></g></svg>',
52
55
  'square': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM5 5V19H19V5H5Z"></path></svg>',
53
56
  'tools': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5.32943 3.27152C6.56252 2.83314 7.9923 3.10743 8.97927 4.0944C10.1002 5.21531 10.3019 6.90735 9.5843 8.23378L20.293 18.9436L18.8788 20.3579L8.16982 9.64869C6.84325 10.3668 5.15069 10.1653 4.02952 9.04415C3.04227 8.0569 2.7681 6.62659 3.20701 5.39326L5.44373 7.62994C6.02952 8.21572 6.97927 8.21572 7.56505 7.62994C8.15084 7.04415 8.15084 6.0944 7.56505 5.50862L5.32943 3.27152ZM15.6968 5.15506L18.8788 3.38729L20.293 4.80151L18.5252 7.98349L16.7574 8.33704L14.6361 10.4584L13.2219 9.04415L15.3432 6.92283L15.6968 5.15506ZM8.97927 13.2868L10.3935 14.701L5.09018 20.0043C4.69966 20.3948 4.06649 20.3948 3.67597 20.0043C3.31334 19.6417 3.28744 19.0698 3.59826 18.6773L3.67597 18.5901L8.97927 13.2868Z"></path></svg>',
54
57
  'user': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 22C4 17.5817 7.58172 14 12 14C16.4183 14 20 17.5817 20 22H18C18 18.6863 15.3137 16 12 16C8.68629 16 6 18.6863 6 22H4ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11Z"></path></svg>',
package/lib/components/Icon/icons/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Icon/icons/index.ts"],"names":[],"mappings":";;;AAAa,QAAA,KAAK,GAA4B;IAC5C,YAAY,EAAE,qXAAqX;IACnY,KAAK,EAAE,mJAAmJ;IAC1J,qBAAqB,EAAE,+PAA+P;IACtR,cAAc,EAAE,gXAAgX;IAChY,uBAAuB,EAAE,giBAAgiB;IACzjB,gBAAgB,EAAE,ylBAAylB;IAC3mB,yBAAyB,EAAE,oSAAoS;IAC/T,uBAAuB,EAAE,2PAA2P;IACpR,YAAY,EAAE,wOAAwO;IACtP,eAAe,EAAE,oYAAoY;IACrZ,kBAAkB,EAAE,yXAAyX;IAC7Y,YAAY,EAAE,uOAAuO;IACrP,aAAa,EAAE,uOAAuO;IACtP,eAAe,EAAE,+WAA+W;IAChY,UAAU,EAAE,wOAAwO;IACpP,qBAAqB,EAAE,kUAAkU;IACzV,cAAc,EAAE,mbAAmb;IACnc,qBAAqB,EAAE,wUAAwU;IAC/V,cAAc,EAAE,uVAAuV;IACvW,OAAO,EAAE,wNAAwN;IACjO,cAAc,EAAE,0NAA0N;IAC1O,cAAc,EAAE,mNAAmN;IACnO,eAAe,EAAE,2NAA2N;IAC5O,YAAY,EAAE,kNAAkN;IAChO,QAAQ,EAAE,4UAA4U;IACtV,cAAc,EAAE,ogBAAogB;IACphB,OAAO,EAAE,2TAA2T;IACpU,eAAe,EAAE,oWAAoW;IACrX,UAAU,EAAE,mOAAmO;IAC/O,MAAM,EAAE,iXAAiX;IACzX,eAAe,EAAE,oSAAoS;IACrT,YAAY,EAAE,icAAic;IAC/c,QAAQ,EAAE,sMAAsM;IAChN,gBAAgB,EAAE,yZAAyZ;IAC3a,YAAY,EAAE,0UAA0U;IACxV,mBAAmB,EAAE,i8DAAi8D;IACt9D,mBAAmB,EAAE,i7DAAi7D;IACt8D,iBAAiB,EAAE,g7DAAg7D;IACn8D,sBAAsB,EAAE,wiEAAwiE;IAChkE,cAAc,EAAE,wOAAwO;IACxP,OAAO,EAAE,6oBAA6oB;IACtpB,MAAM,EAAE,sSAAsS;IAC9S,MAAM,EAAE,uxBAAuxB;IAC/xB,eAAe,EAAE,01BAA01B;IAC32B,MAAM,EAAE,sYAAsY;IAC9Y,MAAM,EAAE,wQAAwQ;IAChR,QAAQ,EAAE,2eAA2e;IACrf,QAAQ,EAAE,gPAAgP;IAC1P,OAAO,EAAE,oyBAAoyB;IAC7yB,MAAM,EAAE,8ZAA8Z;CACva,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Icon/icons/index.ts"],"names":[],"mappings":";;;AAAa,QAAA,KAAK,GAA4B;IAC5C,YAAY,EAAE,qXAAqX;IACnY,KAAK,EAAE,mJAAmJ;IAC1J,qBAAqB,EAAE,+PAA+P;IACtR,cAAc,EAAE,gXAAgX;IAChY,uBAAuB,EAAE,giBAAgiB;IACzjB,gBAAgB,EAAE,ylBAAylB;IAC3mB,yBAAyB,EAAE,oSAAoS;IAC/T,uBAAuB,EAAE,2PAA2P;IACpR,YAAY,EAAE,wOAAwO;IACtP,eAAe,EAAE,oYAAoY;IACrZ,kBAAkB,EAAE,yXAAyX;IAC7Y,YAAY,EAAE,uOAAuO;IACrP,aAAa,EAAE,uOAAuO;IACtP,eAAe,EAAE,+WAA+W;IAChY,UAAU,EAAE,wOAAwO;IACpP,qBAAqB,EAAE,kUAAkU;IACzV,oBAAoB,EAAE,ikBAAikB;IACvlB,cAAc,EAAE,mbAAmb;IACnc,qBAAqB,EAAE,wUAAwU;IAC/V,cAAc,EAAE,uVAAuV;IACvW,OAAO,EAAE,wNAAwN;IACjO,cAAc,EAAE,0NAA0N;IAC1O,cAAc,EAAE,mNAAmN;IACnO,eAAe,EAAE,2NAA2N;IAC5O,YAAY,EAAE,kNAAkN;IAChO,QAAQ,EAAE,4UAA4U;IACtV,cAAc,EAAE,ogBAAogB;IACphB,OAAO,EAAE,2TAA2T;IACpU,eAAe,EAAE,oWAAoW;IACrX,UAAU,EAAE,mOAAmO;IAC/O,MAAM,EAAE,iXAAiX;IACzX,eAAe,EAAE,oSAAoS;IACrT,YAAY,EAAE,icAAic;IAC/c,QAAQ,EAAE,sMAAsM;IAChN,gBAAgB,EAAE,yZAAyZ;IAC3a,YAAY,EAAE,0UAA0U;IACxV,mBAAmB,EAAE,i8DAAi8D;IACt9D,mBAAmB,EAAE,i7DAAi7D;IACt8D,iBAAiB,EAAE,g7DAAg7D;IACn8D,sBAAsB,EAAE,wiEAAwiE;IAChkE,cAAc,EAAE,wOAAwO;IACxP,OAAO,EAAE,6oBAA6oB;IACtpB,SAAS,EAAE,2cAA2c;IACtd,MAAM,EAAE,sSAAsS;IAC9S,MAAM,EAAE,uxBAAuxB;IAC/xB,eAAe,EAAE,01BAA01B;IAC32B,MAAM,EAAE,sYAAsY;IAC9Y,MAAM,EAAE,wQAAwQ;IAChR,QAAQ,EAAE,2eAA2e;IACrf,iBAAiB,EAAE,mzBAAmzB;IACt0B,QAAQ,EAAE,gPAAgP;IAC1P,OAAO,EAAE,oyBAAoyB;IAC7yB,MAAM,EAAE,8ZAA8Z;CACva,CAAC"}
package/lib/components/Icon/icons/index.ts CHANGED
@@ -15,6 +15,7 @@ export const icons: { [k: string]: string } = {
15
15
  'arrow-up-down': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11.9498 7.94975L10.5356 9.36396L8.00079 6.828L8.00004 20H6.00004L6.00079 6.828L3.46451 9.36396L2.05029 7.94975L7.00004 3L11.9498 7.94975ZM21.9498 16.0503L17 21L12.0503 16.0503L13.4645 14.636L16.0008 17.172L16 4H18L18.0008 17.172L20.5356 14.636L21.9498 16.0503Z"></path></svg>',
16
16
  'arrow-up': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.0001 7.82843V20H11.0001V7.82843L5.63614 13.1924L4.22192 11.7782L12.0001 4L19.7783 11.7782L18.3641 13.1924L13.0001 7.82843Z"></path></svg>',
17
17
  'check-circle-filled': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM11.0026 16L18.0737 8.92893L16.6595 7.51472L11.0026 13.1716L8.17421 10.3431L6.75999 11.7574L11.0026 16Z"></path></svg>',
18
+ 'check-circle-timer': '<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 21.5 21.6" style="enable-background:new 0 0 21.5 21.6;" xml:space="preserve"><path d="M8.8,21.6c-4.9,0-8.8-3.9-8.8-8.8S3.9,4,8.8,4s8.8,3.9,8.8,8.8S13.6,21.6,8.8,21.6z M8.8,19.8c3.9,0,7-3.1,7-7s-3.1-7-7-7 s-7,3.1-7,7S4.9,19.8,8.8,19.8z M7.9,16.3l-3.7-3.7l1.3-1.3l2.4,2.4l5-4.9l1.3,1.3L7.9,16.3z"/><path d="M15.8,11.4c-3.1,0-5.7-2.6-5.7-5.7S12.7,0,15.8,0s5.7,2.6,5.7,5.7S18.9,11.4,15.8,11.4z M16.4,5.7V2.8h-1.1v4h3.4V5.7H16.4z "/></svg>',
18
19
  'check-circle': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11.0026 16L6.75999 11.7574L8.17421 10.3431L11.0026 13.1716L16.6595 7.51472L18.0737 8.92893L11.0026 16Z"></path></svg>',
19
20
  'check-square-filled': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM11.0026 16L18.0737 8.92893L16.6595 7.51472L11.0026 13.1716L8.17421 10.3431L6.75999 11.7574L11.0026 16Z"></path></svg>',
20
21
  'check-square': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM5 5V19H19V5H5ZM11.0026 16L6.75999 11.7574L8.17421 10.3431L11.0026 13.1716L16.6595 7.51472L18.0737 8.92893L11.0026 16Z"></path></svg>',
@@ -40,12 +41,14 @@ export const icons: { [k: string]: string } = {
40
41
  'header-repairability': '<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 27.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 357.7 16.8" style="enable-background:new 0 0 357.7 16.8;" xml:space="preserve"><style type="text/css"> .st0{fill:#152C47 !important;} .st1{font-family:\'Montserrat-Medium\' !important;} .st2{font-size:24px !important;} .st3{font-family:\'Roboto-Light\' !important;} .st4{font-size:11px !important;} .st5{fill:#020203 !important;} .st6{fill:#0D84C5 !important;} .st7{fill:#FFFFFF !important;}</style><text transform="matrix(1 0 0 1 -2.52 16.7998)" class="st0 st1 st2">REPAIRABILITY INDEX</text><text transform="matrix(1 0 0 1 283.9413 16.7998)" class="st3 st4">BY</text><path class="st5" d="M321,10.1c-0.5-0.6-1.3-0.9-2.2-0.9c-1.6,0-2.8,1.2-2.8,2.8s1.2,2.8,2.8,2.8c0.9,0,1.7-0.4,2.2-1.1l1.4,1.3 c-0.9,1.1-2.1,1.7-3.6,1.7c-2.8,0-4.8-2-4.8-4.8c0-2.8,2-4.8,4.8-4.8c1.4,0,2.7,0.5,3.6,1.5L321,10.1z"/><polygon class="st5" points="307,7.5 312.9,7.5 312.9,9.3 309,9.3 309,11.2 312.4,11.2 312.4,13 309,13 309,15 312.9,15 312.9,16.8 307,16.8 "/><polygon class="st5" points="345.5,7.3 351,7.3 351,9.2 347.4,9.2 347.4,11.5 350.5,11.5 350.5,13.3 347.4,13.3 347.4,16.7 345.5,16.7 "/><polygon class="st5" points="352.1,7.3 357.7,7.3 357.7,9.2 354.1,9.2 354.1,11.5 357.2,11.5 357.2,13.3 354.1,13.3 354.1,16.7 352.1,16.7 "/><polygon class="st5" points="329.5,12.8 325.5,12.8 325.5,16.7 323.6,16.7 323.6,7.3 325.5,7.3 325.5,10.9 329.5,10.9 329.5,7.3 331.5,7.3 331.5,16.7 329.5,16.7 "/><polygon class="st5" points="298.8,7.5 305.9,7.5 305.9,9.4 303.4,9.4 303.4,16.8 301.4,16.8 301.4,9.4 298.8,9.4 "/><polyline class="st5" points="331.9,8.6 333.7,5.8 335.7,5.8 333.9,8.6 331.9,8.6 "/><path class="st5" d="M339.5,7.2c-2.8,0-4.8,2-4.8,4.8s2,4.8,4.8,4.8c2.8,0,4.8-2,4.8-4.8S342.3,7.2,339.5,7.2z"/><polygon class="st6" points="335.4,12.2 341.5,8.6 341.5,15.7 "/><polygon class="st7" points="339.4,16.8 339.3,13.4 336.5,15.2 "/></svg>',
41
42
  'heart-filled': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M16.5 3C19.5376 3 22 5.5 22 9C22 16 14.5 20 12 21.5C9.5 20 2 16 2 9C2 5.5 4.5 3 7.5 3C9.35997 3 11 4 12 5C13 4 14.64 3 16.5 3Z"></path></svg>',
42
43
  'heart': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M16.5 3C19.5376 3 22 5.5 22 9C22 16 14.5 20 12 21.5C9.5 20 2 16 2 9C2 5.5 4.5 3 7.5 3C9.35997 3 11 4 12 5C13 4 14.64 3 16.5 3ZM12.9339 18.6038C13.8155 18.0485 14.61 17.4955 15.3549 16.9029C18.3337 14.533 20 11.9435 20 9C20 6.64076 18.463 5 16.5 5C15.4241 5 14.2593 5.56911 13.4142 6.41421L12 7.82843L10.5858 6.41421C9.74068 5.56911 8.5759 5 7.5 5C5.55906 5 4 6.6565 4 9C4 11.9435 5.66627 14.533 8.64514 16.9029C9.39 17.4955 10.1845 18.0485 11.0661 18.6038C11.3646 18.7919 11.6611 18.9729 12 19.1752C12.3389 18.9729 12.6354 18.7919 12.9339 18.6038Z"></path></svg>',
44
+ 'history': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12H4C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C9.25022 4 6.82447 5.38734 5.38451 7.50024L8 7.5V9.5H2V3.5H4L3.99989 5.99918C5.82434 3.57075 8.72873 2 12 2ZM13 7L12.9998 11.585L16.2426 14.8284L14.8284 16.2426L10.9998 12.413L11 7H13Z"></path></svg>',
43
45
  'home': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19 21H5C4.44772 21 4 20.5523 4 20V11L1 11L11.3273 1.6115C11.7087 1.26475 12.2913 1.26475 12.6727 1.6115L23 11L20 11V20C20 20.5523 19.5523 21 19 21ZM6 19H18V9.15745L12 3.7029L6 9.15745V19Z"></path></svg>',
44
46
  'link': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.3638 15.5355L16.9496 14.1213L18.3638 12.7071C20.3164 10.7545 20.3164 7.58866 18.3638 5.63604C16.4112 3.68341 13.2453 3.68341 11.2927 5.63604L9.87849 7.05025L8.46428 5.63604L9.87849 4.22182C12.6122 1.48815 17.0443 1.48815 19.778 4.22182C22.5117 6.95549 22.5117 11.3876 19.778 14.1213L18.3638 15.5355ZM15.5353 18.364L14.1211 19.7782C11.3875 22.5118 6.95531 22.5118 4.22164 19.7782C1.48797 17.0445 1.48797 12.6123 4.22164 9.87868L5.63585 8.46446L7.05007 9.87868L5.63585 11.2929C3.68323 13.2455 3.68323 16.4113 5.63585 18.364C7.58847 20.3166 10.7543 20.3166 12.7069 18.364L14.1211 16.9497L15.5353 18.364ZM14.8282 7.75736L16.2425 9.17157L9.17139 16.2426L7.75717 14.8284L14.8282 7.75736Z"></path></svg>',
45
47
  'list-settings': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2 18H9V20H2V18ZM2 11H11V13H2V11ZM2 4H22V6H2V4ZM20.674 13.0251L21.8301 12.634L22.8301 14.366L21.914 15.1711C21.9704 15.4386 22 15.7158 22 16C22 16.2842 21.9704 16.5614 21.914 16.8289L22.8301 17.634L21.8301 19.366L20.674 18.9749C20.2635 19.3441 19.7763 19.6295 19.2391 19.8044L19 21H17L16.7609 19.8044C16.2237 19.6295 15.7365 19.3441 15.326 18.9749L14.1699 19.366L13.1699 17.634L14.086 16.8289C14.0296 16.5614 14 16.2842 14 16C14 15.7158 14.0296 15.4386 14.086 15.1711L13.1699 14.366L14.1699 12.634L15.326 13.0251C15.7365 12.6559 16.2237 12.3705 16.7609 12.1956L17 11H19L19.2391 12.1956C19.7763 12.3705 20.2635 12.6559 20.674 13.0251ZM18 18C19.1046 18 20 17.1046 20 16C20 14.8954 19.1046 14 18 14C16.8954 14 16 14.8954 16 16C16 17.1046 16.8954 18 18 18Z"></path></svg>',
46
48
  'lock': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C15.866 2 19 5.13401 19 9V10ZM5 12V20H19V12H5ZM11 14H13V18H11V14ZM17 10V9C17 6.23858 14.7614 4 12 4C9.23858 4 7 6.23858 7 9V10H17Z"></path></svg>',
47
49
  'save': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M7 19V13H17V19H19V7.82843L16.1716 5H5V19H7ZM4 3H17L21 7V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM9 15V19H15V15H9Z"></path></svg>',
48
50
  'search': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z"></path></svg>',
51
+ 'seedling-circle': '<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 18 18" style="enable-background:new 0 0 18 18;" xml:space="preserve"><path d="M9,18c-5,0-9-4-9-9s4-9,9-9s9,4,9,9S14,18,9,18z M9,16.2c4,0,7.2-3.2,7.2-7.2S13,1.8,9,1.8S1.8,5,1.8,9S5,16.2,9,16.2z"/><g> <g> <path d="M8.5,11.1C8,9.1,6.9,8.4,4.7,8.7c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0,0,0.1c0,0,0,0,0,0.1C4.6,9.5,5.2,11.5,8.5,11.1z"/> <path d="M9.2,9.6c2-2.7,1.8-4.5-0.9-6.8c0,0-0.1,0-0.2,0C8,2.8,8,2.8,7.9,2.9C7.2,3.6,5.3,6.2,9.2,9.6"/> <path d="M13.3,9.5C13.3,9.5,13.4,9.5,13.3,9.5c0.1,0,0.1,0.1,0.2,0.1v0.1v0.1c-0.1,0.8-0.6,3-4.1,3.1c-0.2,0.5-0.2,1.1,0,1.6 l-0.9,0.3c-0.2-0.9-0.2-1.8,0-2.7C8.7,11.5,9,11,9.4,10.6s0.9-0.7,1.5-0.9C11.7,9.5,12.5,9.4,13.3,9.5"/> </g></g></svg>',
49
52
  'square': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM5 5V19H19V5H5Z"></path></svg>',
50
53
  'tools': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5.32943 3.27152C6.56252 2.83314 7.9923 3.10743 8.97927 4.0944C10.1002 5.21531 10.3019 6.90735 9.5843 8.23378L20.293 18.9436L18.8788 20.3579L8.16982 9.64869C6.84325 10.3668 5.15069 10.1653 4.02952 9.04415C3.04227 8.0569 2.7681 6.62659 3.20701 5.39326L5.44373 7.62994C6.02952 8.21572 6.97927 8.21572 7.56505 7.62994C8.15084 7.04415 8.15084 6.0944 7.56505 5.50862L5.32943 3.27152ZM15.6968 5.15506L18.8788 3.38729L20.293 4.80151L18.5252 7.98349L16.7574 8.33704L14.6361 10.4584L13.2219 9.04415L15.3432 6.92283L15.6968 5.15506ZM8.97927 13.2868L10.3935 14.701L5.09018 20.0043C4.69966 20.3948 4.06649 20.3948 3.67597 20.0043C3.31334 19.6417 3.28744 19.0698 3.59826 18.6773L3.67597 18.5901L8.97927 13.2868Z"></path></svg>',
51
54
  'user': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 22C4 17.5817 7.58172 14 12 14C16.4183 14 20 17.5817 20 22H18C18 18.6863 15.3137 16 12 16C8.68629 16 6 18.6863 6 22H4ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11Z"></path></svg>',
package/lib/components/Icon/icons/seedling-circle.svg ADDED
@@ -0,0 +1,12 @@
1
+ <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
2
+ viewBox="0 0 18 18" style="enable-background:new 0 0 18 18;" xml:space="preserve">
3
+ <path d="M9,18c-5,0-9-4-9-9s4-9,9-9s9,4,9,9S14,18,9,18z M9,16.2c4,0,7.2-3.2,7.2-7.2S13,1.8,9,1.8S1.8,5,1.8,9S5,16.2,9,16.2z"/>
4
+ <g>
5
+ <g>
6
+ <path d="M8.5,11.1C8,9.1,6.9,8.4,4.7,8.7c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0,0,0.1c0,0,0,0,0,0.1C4.6,9.5,5.2,11.5,8.5,11.1z"/>
7
+ <path d="M9.2,9.6c2-2.7,1.8-4.5-0.9-6.8c0,0-0.1,0-0.2,0C8,2.8,8,2.8,7.9,2.9C7.2,3.6,5.3,6.2,9.2,9.6"/>
8
+ <path d="M13.3,9.5C13.3,9.5,13.4,9.5,13.3,9.5c0.1,0,0.1,0.1,0.2,0.1v0.1v0.1c-0.1,0.8-0.6,3-4.1,3.1c-0.2,0.5-0.2,1.1,0,1.6
9
+ l-0.9,0.3c-0.2-0.9-0.2-1.8,0-2.7C8.7,11.5,9,11,9.4,10.6s0.9-0.7,1.5-0.9C11.7,9.5,12.5,9.4,13.3,9.5"/>
10
+ </g>
11
+ </g>
12
+ </svg>
package/lib/layouts/Header/Header.js CHANGED
@@ -2,7 +2,6 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.Header = void 0;
4
4
  const React = require("react");
5
- const react_1 = require("react");
6
5
  const icons_1 = require("../../components/Icon/icons");
7
6
  require("./Header.css");
8
7
  const Header = ({ actions, appName }) => {
@@ -12,7 +11,7 @@ const Header = ({ actions, appName }) => {
12
11
  React.createElement("div", { className: "header-left-side" },
13
12
  React.createElement("div", { className: "header-techoff", dangerouslySetInnerHTML: { __html: icons_1.icons[`header-${appName}`] } })),
14
13
  React.createElement("div", null,
15
- React.createElement("div", { className: "header-actions" }, actions.map((action, index) => (0, react_1.cloneElement)(action, { key: index, ...action.props }))))));
14
+ React.createElement("div", { className: "header-actions" }, actions))));
16
15
  };
17
16
  exports.Header = Header;
18
17
  //# sourceMappingURL=Header.js.map
package/lib/layouts/Header/Header.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/layouts/Header/Header.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAAqC;AACrC,uDAAoD;AAEpD,wBAAsB;AAEf,MAAM,MAAM,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAAe,EAAE,EAAE;IAC1D,YAAY;IACZ,YAAY;IACZ,OAAO,CACL;QACE,6BAAK,SAAS,EAAC,kBAAkB;YAC/B,6BAAK,SAAS,EAAC,gBAAgB,EAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,aAAK,CAAC,UAAU,OAAO,EAAE,CAAC,EAAE,GAAI,CAC/F;QACN;YACE,6BAAK,SAAS,EAAC,gBAAgB,IAC5B,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,IAAA,oBAAY,EAAC,MAAM,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAClF,CACF,CACC,CACV,CAAC;AACJ,CAAC,CAAC;AAfW,QAAA,MAAM,UAejB"}
1
+ {"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/layouts/Header/Header.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,uDAAoD;AAEpD,wBAAsB;AAEf,MAAM,MAAM,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAAe,EAAE,EAAE;IAC1D,YAAY;IACZ,YAAY;IACZ,OAAO,CACL;QACE,6BAAK,SAAS,EAAC,kBAAkB;YAC/B,6BAAK,SAAS,EAAC,gBAAgB,EAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,aAAK,CAAC,UAAU,OAAO,EAAE,CAAC,EAAE,GAAI,CAC/F;QACN;YACE,6BAAK,SAAS,EAAC,gBAAgB,IAAE,OAAO,CAAO,CAC3C,CACC,CACV,CAAC;AACJ,CAAC,CAAC;AAbW,QAAA,MAAM,UAajB"}
package/lib/layouts/Header/Header.types.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ReactElement } from 'react';
2
2
  export type HeaderProps = {
3
- actions: ReactElement[];
3
+ actions: ReactElement;
4
4
  appName: 'bikestudio' | 'nsc-helmet' | 'opticost' | 'repairability';
5
5
  };
6
6
  export type HeaderProfileProps = {
package/lib/layouts/Header/__stories__/Header.stories.mdx CHANGED
@@ -24,10 +24,12 @@ The header will allow users to quickly find the information they need at a glanc
24
24
  <Story
25
25
  name="Overview"
26
26
  args={{
27
- actions: [
28
- <Button icon="add" size="lg" variant="shadow" rounded />,
29
- <HeaderProfile firstname="John" lastname="Doe" />,
30
- ],
27
+ actions: (
28
+ <>
29
+ <Button icon="add" size="lg" variant="shadow" rounded />
30
+ <HeaderProfile firstname="John" lastname="Doe" />
31
+ </>
32
+ ),
31
33
  appName: 'repairability',
32
34
  }}
33
35
  argTypes={headerArgTypes}
package/lib/layouts/Navigation/Navigation.d.ts CHANGED
@@ -2,5 +2,6 @@ import * as React from 'react';
2
2
  import { PropsWithChildren } from 'react';
3
3
  import { NavigationBreadcrumbItemProps, NavigationProps } from './Navigation.types';
4
4
  import './Navigation.css';
5
+ export declare const NavigationBreadcrumbDivider: () => React.JSX.Element;
5
6
  export declare const NavigationBreadcrumbItem: ({ children, icon, highlight, onClick, }: PropsWithChildren<NavigationBreadcrumbItemProps>) => React.JSX.Element;
6
7
  export declare const Navigation: ({ actions, breadcrumbs }: NavigationProps) => React.JSX.Element;
package/lib/layouts/Navigation/Navigation.js CHANGED
@@ -1,10 +1,16 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Navigation = exports.NavigationBreadcrumbItem = void 0;
3
+ exports.Navigation = exports.NavigationBreadcrumbItem = exports.NavigationBreadcrumbDivider = void 0;
4
4
  const React = require("react");
5
- const react_1 = require("react");
6
5
  const Icon_1 = require("../../components/Icon/Icon");
7
6
  require("./Navigation.css");
7
+ const NavigationBreadcrumbDivider = () => {
8
+ // #########
9
+ // Rendering
10
+ return (React.createElement("div", { className: "breadcrumb-chevron" },
11
+ React.createElement(Icon_1.Icon, { name: "chevron-right" })));
12
+ };
13
+ exports.NavigationBreadcrumbDivider = NavigationBreadcrumbDivider;
8
14
  const NavigationBreadcrumbItem = ({ children, icon, highlight, onClick, }) => {
9
15
  // #########
10
16
  // Rendering
@@ -21,12 +27,9 @@ const Navigation = ({ actions, breadcrumbs }) => {
21
27
  // #########
22
28
  // Rendering
23
29
  return (React.createElement("div", { className: "navigation" },
24
- React.createElement("div", { className: "breadcrumb" }, breadcrumbs.map((breadcrumb, index) => (React.createElement("div", { key: index, className: "breadcrumb-container" },
25
- breadcrumb,
26
- index !== breadcrumbs.length - 1 && (React.createElement("div", { className: "breadcrumb-chevron" },
27
- React.createElement(Icon_1.Icon, { name: "chevron-right" }))))))),
30
+ React.createElement("div", { className: "breadcrumb" }, breadcrumbs),
28
31
  React.createElement("div", { className: "navigation-divider" }),
29
- React.createElement("div", { className: "navigation-actions" }, actions?.map((action, index) => (0, react_1.cloneElement)(action, { key: index, ...action.props })))));
32
+ React.createElement("div", { className: "navigation-actions" }, actions)));
30
33
  };
31
34
  exports.Navigation = Navigation;
32
35
  //# sourceMappingURL=Navigation.js.map
package/lib/layouts/Navigation/Navigation.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Navigation.js","sourceRoot":"","sources":["../../../src/layouts/Navigation/Navigation.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAAwD;AACxD,qDAAkD;AAElD,4BAA0B;AAEnB,MAAM,wBAAwB,GAAG,CAAC,EACvC,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,OAAO,GAC0C,EAAE,EAAE;IACrD,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BACE,SAAS,EAAE;;UAEP,SAAS,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE,IAAI,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE;OAC1F,EACD,OAAO,EAAE,OAAO;QAEf,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,uBAAuB;YACpC,oBAAC,WAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC1B,CACP;QAEA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAzBW,QAAA,wBAAwB,4BAyBnC;AAEK,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,EAAE,WAAW,EAAmB,EAAE,EAAE;IACtE,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,YAAY;QACzB,6BAAK,SAAS,EAAC,YAAY,IACxB,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,CAAC,CACtC,6BAAK,GAAG,EAAE,KAAK,EAAE,SAAS,EAAC,sBAAsB;YAC9C,UAAU;YAEV,KAAK,KAAK,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,CACnC,6BAAK,SAAS,EAAC,oBAAoB;gBACjC,oBAAC,WAAI,IAAC,IAAI,EAAC,eAAe,GAAG,CACzB,CACP,CACG,CACP,CAAC,CACE;QACN,6BAAK,SAAS,EAAC,oBAAoB,GAAG;QACtC,6BAAK,SAAS,EAAC,oBAAoB,IAChC,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,IAAA,oBAAY,EAAC,MAAM,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CACnF,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAxBW,QAAA,UAAU,cAwBrB"}
1
+ {"version":3,"file":"Navigation.js","sourceRoot":"","sources":["../../../src/layouts/Navigation/Navigation.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,qDAAkD;AAElD,4BAA0B;AAEnB,MAAM,2BAA2B,GAAG,GAAG,EAAE;IAC9C,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,oBAAoB;QACjC,oBAAC,WAAI,IAAC,IAAI,EAAC,eAAe,GAAG,CACzB,CACP,CAAC;AACJ,CAAC,CAAC;AARW,QAAA,2BAA2B,+BAQtC;AAEK,MAAM,wBAAwB,GAAG,CAAC,EACvC,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,OAAO,GAC0C,EAAE,EAAE;IACrD,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BACE,SAAS,EAAE;;UAEP,SAAS,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE,IAAI,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE;OAC1F,EACD,OAAO,EAAE,OAAO;QAEf,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,uBAAuB;YACpC,oBAAC,WAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC1B,CACP;QAEA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAzBW,QAAA,wBAAwB,4BAyBnC;AAEK,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,EAAE,WAAW,EAAmB,EAAE,EAAE;IACtE,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,YAAY;QACzB,6BAAK,SAAS,EAAC,YAAY,IAAE,WAAW,CAAO;QAC/C,6BAAK,SAAS,EAAC,oBAAoB,GAAG;QACtC,6BAAK,SAAS,EAAC,oBAAoB,IAAE,OAAO,CAAO,CAC/C,CACP,CAAC;AACJ,CAAC,CAAC;AAVW,QAAA,UAAU,cAUrB"}
package/lib/layouts/Navigation/Navigation.types.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { ReactElement } from 'react';
2
2
  export type NavigationProps = {
3
- actions?: ReactElement[];
4
- breadcrumbs: ReactElement[];
3
+ actions?: ReactElement;
4
+ breadcrumbs: ReactElement;
5
5
  };
6
6
  export type NavigationBreadcrumbItemProps = {
7
7
  icon?: string;
package/lib/layouts/Navigation/__stories__/Navigation.stories.mdx CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
3
- import { Navigation, NavigationBreadcrumbItem } from '../Navigation';
3
+ import { Navigation, NavigationBreadcrumbItem, NavigationBreadcrumbDivider } from '../Navigation';
4
4
  import { Button } from '../../../components/Button/Button';
5
5
  import { icons } from '../../../components/Icon/icons';
6
6
 
@@ -16,21 +16,27 @@ Breadcrumbs are an important navigation component that shows content hierarchy.
16
16
  <Story
17
17
  name="Overview"
18
18
  args={{
19
- actions: [
20
- <Button icon="check" onClick={() => {}}>
21
- Action 1
22
- </Button>,
23
- <Button icon="add" onClick={() => {}}>
24
- Action 2
25
- </Button>,
26
- ],
27
- breadcrumbs: [
19
+ actions: (
20
+ <>
21
+ <Button icon="check" onClick={() => {}}>
22
+ Action 1
23
+ </Button>
24
+ <Button icon="add" onClick={() => {}}>
25
+ Action 2
26
+ </Button>
27
+ </>
28
+ ),
29
+ breadcrumbs: (
30
+ <>
28
31
  <NavigationBreadcrumbItem icon="home" onClick={() => {}}>
29
32
  Home
30
- </NavigationBreadcrumbItem>,
31
- <NavigationBreadcrumbItem onClick={() => {}}>Menu Item 1</NavigationBreadcrumbItem>,
33
+ </NavigationBreadcrumbItem>
34
+ <NavigationBreadcrumbDivider />
35
+ <NavigationBreadcrumbItem onClick={() => {}}>Menu Item 1</NavigationBreadcrumbItem>
36
+ <NavigationBreadcrumbDivider />
32
37
  <NavigationBreadcrumbItem highlight>Menu Item 2</NavigationBreadcrumbItem>
33
- ]
38
+ </>
39
+ )
34
40
  }}
35
41
 
36
42
  >
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dktunited-techoff/techoff-suite-ui",
3
- "version": "0.9.7",
3
+ "version": "0.9.9",
4
4
  "main": "lib/index.js",
5
5
  "types": "./lib",
6
6
  "module": "esm/index.js",
package/src/components/Icon/icons/check-circle-timer.svg ADDED
@@ -0,0 +1,7 @@
1
+ <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
2
+ viewBox="0 0 21.5 21.6" style="enable-background:new 0 0 21.5 21.6;" xml:space="preserve">
3
+ <path d="M8.8,21.6c-4.9,0-8.8-3.9-8.8-8.8S3.9,4,8.8,4s8.8,3.9,8.8,8.8S13.6,21.6,8.8,21.6z M8.8,19.8c3.9,0,7-3.1,7-7s-3.1-7-7-7
4
+ s-7,3.1-7,7S4.9,19.8,8.8,19.8z M7.9,16.3l-3.7-3.7l1.3-1.3l2.4,2.4l5-4.9l1.3,1.3L7.9,16.3z"/>
5
+ <path d="M15.8,11.4c-3.1,0-5.7-2.6-5.7-5.7S12.7,0,15.8,0s5.7,2.6,5.7,5.7S18.9,11.4,15.8,11.4z M16.4,5.7V2.8h-1.1v4h3.4V5.7H16.4z
6
+ "/>
7
+ </svg>
package/src/components/Icon/icons/history.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12H4C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C9.25022 4 6.82447 5.38734 5.38451 7.50024L8 7.5V9.5H2V3.5H4L3.99989 5.99918C5.82434 3.57075 8.72873 2 12 2ZM13 7L12.9998 11.585L16.2426 14.8284L14.8284 16.2426L10.9998 12.413L11 7H13Z"></path></svg>
package/src/components/Icon/icons/index.ts CHANGED
@@ -15,6 +15,7 @@ export const icons: { [k: string]: string } = {
15
15
  'arrow-up-down': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11.9498 7.94975L10.5356 9.36396L8.00079 6.828L8.00004 20H6.00004L6.00079 6.828L3.46451 9.36396L2.05029 7.94975L7.00004 3L11.9498 7.94975ZM21.9498 16.0503L17 21L12.0503 16.0503L13.4645 14.636L16.0008 17.172L16 4H18L18.0008 17.172L20.5356 14.636L21.9498 16.0503Z"></path></svg>',
16
16
  'arrow-up': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.0001 7.82843V20H11.0001V7.82843L5.63614 13.1924L4.22192 11.7782L12.0001 4L19.7783 11.7782L18.3641 13.1924L13.0001 7.82843Z"></path></svg>',
17
17
  'check-circle-filled': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM11.0026 16L18.0737 8.92893L16.6595 7.51472L11.0026 13.1716L8.17421 10.3431L6.75999 11.7574L11.0026 16Z"></path></svg>',
18
+ 'check-circle-timer': '<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 21.5 21.6" style="enable-background:new 0 0 21.5 21.6;" xml:space="preserve"><path d="M8.8,21.6c-4.9,0-8.8-3.9-8.8-8.8S3.9,4,8.8,4s8.8,3.9,8.8,8.8S13.6,21.6,8.8,21.6z M8.8,19.8c3.9,0,7-3.1,7-7s-3.1-7-7-7 s-7,3.1-7,7S4.9,19.8,8.8,19.8z M7.9,16.3l-3.7-3.7l1.3-1.3l2.4,2.4l5-4.9l1.3,1.3L7.9,16.3z"/><path d="M15.8,11.4c-3.1,0-5.7-2.6-5.7-5.7S12.7,0,15.8,0s5.7,2.6,5.7,5.7S18.9,11.4,15.8,11.4z M16.4,5.7V2.8h-1.1v4h3.4V5.7H16.4z "/></svg>',
18
19
  'check-circle': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11.0026 16L6.75999 11.7574L8.17421 10.3431L11.0026 13.1716L16.6595 7.51472L18.0737 8.92893L11.0026 16Z"></path></svg>',
19
20
  'check-square-filled': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM11.0026 16L18.0737 8.92893L16.6595 7.51472L11.0026 13.1716L8.17421 10.3431L6.75999 11.7574L11.0026 16Z"></path></svg>',
20
21
  'check-square': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM5 5V19H19V5H5ZM11.0026 16L6.75999 11.7574L8.17421 10.3431L11.0026 13.1716L16.6595 7.51472L18.0737 8.92893L11.0026 16Z"></path></svg>',
@@ -40,12 +41,14 @@ export const icons: { [k: string]: string } = {
40
41
  'header-repairability': '<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 27.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 357.7 16.8" style="enable-background:new 0 0 357.7 16.8;" xml:space="preserve"><style type="text/css"> .st0{fill:#152C47 !important;} .st1{font-family:\'Montserrat-Medium\' !important;} .st2{font-size:24px !important;} .st3{font-family:\'Roboto-Light\' !important;} .st4{font-size:11px !important;} .st5{fill:#020203 !important;} .st6{fill:#0D84C5 !important;} .st7{fill:#FFFFFF !important;}</style><text transform="matrix(1 0 0 1 -2.52 16.7998)" class="st0 st1 st2">REPAIRABILITY INDEX</text><text transform="matrix(1 0 0 1 283.9413 16.7998)" class="st3 st4">BY</text><path class="st5" d="M321,10.1c-0.5-0.6-1.3-0.9-2.2-0.9c-1.6,0-2.8,1.2-2.8,2.8s1.2,2.8,2.8,2.8c0.9,0,1.7-0.4,2.2-1.1l1.4,1.3 c-0.9,1.1-2.1,1.7-3.6,1.7c-2.8,0-4.8-2-4.8-4.8c0-2.8,2-4.8,4.8-4.8c1.4,0,2.7,0.5,3.6,1.5L321,10.1z"/><polygon class="st5" points="307,7.5 312.9,7.5 312.9,9.3 309,9.3 309,11.2 312.4,11.2 312.4,13 309,13 309,15 312.9,15 312.9,16.8 307,16.8 "/><polygon class="st5" points="345.5,7.3 351,7.3 351,9.2 347.4,9.2 347.4,11.5 350.5,11.5 350.5,13.3 347.4,13.3 347.4,16.7 345.5,16.7 "/><polygon class="st5" points="352.1,7.3 357.7,7.3 357.7,9.2 354.1,9.2 354.1,11.5 357.2,11.5 357.2,13.3 354.1,13.3 354.1,16.7 352.1,16.7 "/><polygon class="st5" points="329.5,12.8 325.5,12.8 325.5,16.7 323.6,16.7 323.6,7.3 325.5,7.3 325.5,10.9 329.5,10.9 329.5,7.3 331.5,7.3 331.5,16.7 329.5,16.7 "/><polygon class="st5" points="298.8,7.5 305.9,7.5 305.9,9.4 303.4,9.4 303.4,16.8 301.4,16.8 301.4,9.4 298.8,9.4 "/><polyline class="st5" points="331.9,8.6 333.7,5.8 335.7,5.8 333.9,8.6 331.9,8.6 "/><path class="st5" d="M339.5,7.2c-2.8,0-4.8,2-4.8,4.8s2,4.8,4.8,4.8c2.8,0,4.8-2,4.8-4.8S342.3,7.2,339.5,7.2z"/><polygon class="st6" points="335.4,12.2 341.5,8.6 341.5,15.7 "/><polygon class="st7" points="339.4,16.8 339.3,13.4 336.5,15.2 "/></svg>',
41
42
  'heart-filled': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M16.5 3C19.5376 3 22 5.5 22 9C22 16 14.5 20 12 21.5C9.5 20 2 16 2 9C2 5.5 4.5 3 7.5 3C9.35997 3 11 4 12 5C13 4 14.64 3 16.5 3Z"></path></svg>',
42
43
  'heart': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M16.5 3C19.5376 3 22 5.5 22 9C22 16 14.5 20 12 21.5C9.5 20 2 16 2 9C2 5.5 4.5 3 7.5 3C9.35997 3 11 4 12 5C13 4 14.64 3 16.5 3ZM12.9339 18.6038C13.8155 18.0485 14.61 17.4955 15.3549 16.9029C18.3337 14.533 20 11.9435 20 9C20 6.64076 18.463 5 16.5 5C15.4241 5 14.2593 5.56911 13.4142 6.41421L12 7.82843L10.5858 6.41421C9.74068 5.56911 8.5759 5 7.5 5C5.55906 5 4 6.6565 4 9C4 11.9435 5.66627 14.533 8.64514 16.9029C9.39 17.4955 10.1845 18.0485 11.0661 18.6038C11.3646 18.7919 11.6611 18.9729 12 19.1752C12.3389 18.9729 12.6354 18.7919 12.9339 18.6038Z"></path></svg>',
44
+ 'history': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12H4C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C9.25022 4 6.82447 5.38734 5.38451 7.50024L8 7.5V9.5H2V3.5H4L3.99989 5.99918C5.82434 3.57075 8.72873 2 12 2ZM13 7L12.9998 11.585L16.2426 14.8284L14.8284 16.2426L10.9998 12.413L11 7H13Z"></path></svg>',
43
45
  'home': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19 21H5C4.44772 21 4 20.5523 4 20V11L1 11L11.3273 1.6115C11.7087 1.26475 12.2913 1.26475 12.6727 1.6115L23 11L20 11V20C20 20.5523 19.5523 21 19 21ZM6 19H18V9.15745L12 3.7029L6 9.15745V19Z"></path></svg>',
44
46
  'link': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.3638 15.5355L16.9496 14.1213L18.3638 12.7071C20.3164 10.7545 20.3164 7.58866 18.3638 5.63604C16.4112 3.68341 13.2453 3.68341 11.2927 5.63604L9.87849 7.05025L8.46428 5.63604L9.87849 4.22182C12.6122 1.48815 17.0443 1.48815 19.778 4.22182C22.5117 6.95549 22.5117 11.3876 19.778 14.1213L18.3638 15.5355ZM15.5353 18.364L14.1211 19.7782C11.3875 22.5118 6.95531 22.5118 4.22164 19.7782C1.48797 17.0445 1.48797 12.6123 4.22164 9.87868L5.63585 8.46446L7.05007 9.87868L5.63585 11.2929C3.68323 13.2455 3.68323 16.4113 5.63585 18.364C7.58847 20.3166 10.7543 20.3166 12.7069 18.364L14.1211 16.9497L15.5353 18.364ZM14.8282 7.75736L16.2425 9.17157L9.17139 16.2426L7.75717 14.8284L14.8282 7.75736Z"></path></svg>',
45
47
  'list-settings': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2 18H9V20H2V18ZM2 11H11V13H2V11ZM2 4H22V6H2V4ZM20.674 13.0251L21.8301 12.634L22.8301 14.366L21.914 15.1711C21.9704 15.4386 22 15.7158 22 16C22 16.2842 21.9704 16.5614 21.914 16.8289L22.8301 17.634L21.8301 19.366L20.674 18.9749C20.2635 19.3441 19.7763 19.6295 19.2391 19.8044L19 21H17L16.7609 19.8044C16.2237 19.6295 15.7365 19.3441 15.326 18.9749L14.1699 19.366L13.1699 17.634L14.086 16.8289C14.0296 16.5614 14 16.2842 14 16C14 15.7158 14.0296 15.4386 14.086 15.1711L13.1699 14.366L14.1699 12.634L15.326 13.0251C15.7365 12.6559 16.2237 12.3705 16.7609 12.1956L17 11H19L19.2391 12.1956C19.7763 12.3705 20.2635 12.6559 20.674 13.0251ZM18 18C19.1046 18 20 17.1046 20 16C20 14.8954 19.1046 14 18 14C16.8954 14 16 14.8954 16 16C16 17.1046 16.8954 18 18 18Z"></path></svg>',
46
48
  'lock': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C15.866 2 19 5.13401 19 9V10ZM5 12V20H19V12H5ZM11 14H13V18H11V14ZM17 10V9C17 6.23858 14.7614 4 12 4C9.23858 4 7 6.23858 7 9V10H17Z"></path></svg>',
47
49
  'save': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M7 19V13H17V19H19V7.82843L16.1716 5H5V19H7ZM4 3H17L21 7V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM9 15V19H15V15H9Z"></path></svg>',
48
50
  'search': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z"></path></svg>',
51
+ 'seedling-circle': '<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 18 18" style="enable-background:new 0 0 18 18;" xml:space="preserve"><path d="M9,18c-5,0-9-4-9-9s4-9,9-9s9,4,9,9S14,18,9,18z M9,16.2c4,0,7.2-3.2,7.2-7.2S13,1.8,9,1.8S1.8,5,1.8,9S5,16.2,9,16.2z"/><g> <g> <path d="M8.5,11.1C8,9.1,6.9,8.4,4.7,8.7c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0,0,0.1c0,0,0,0,0,0.1C4.6,9.5,5.2,11.5,8.5,11.1z"/> <path d="M9.2,9.6c2-2.7,1.8-4.5-0.9-6.8c0,0-0.1,0-0.2,0C8,2.8,8,2.8,7.9,2.9C7.2,3.6,5.3,6.2,9.2,9.6"/> <path d="M13.3,9.5C13.3,9.5,13.4,9.5,13.3,9.5c0.1,0,0.1,0.1,0.2,0.1v0.1v0.1c-0.1,0.8-0.6,3-4.1,3.1c-0.2,0.5-0.2,1.1,0,1.6 l-0.9,0.3c-0.2-0.9-0.2-1.8,0-2.7C8.7,11.5,9,11,9.4,10.6s0.9-0.7,1.5-0.9C11.7,9.5,12.5,9.4,13.3,9.5"/> </g></g></svg>',
49
52
  'square': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM5 5V19H19V5H5Z"></path></svg>',
50
53
  'tools': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5.32943 3.27152C6.56252 2.83314 7.9923 3.10743 8.97927 4.0944C10.1002 5.21531 10.3019 6.90735 9.5843 8.23378L20.293 18.9436L18.8788 20.3579L8.16982 9.64869C6.84325 10.3668 5.15069 10.1653 4.02952 9.04415C3.04227 8.0569 2.7681 6.62659 3.20701 5.39326L5.44373 7.62994C6.02952 8.21572 6.97927 8.21572 7.56505 7.62994C8.15084 7.04415 8.15084 6.0944 7.56505 5.50862L5.32943 3.27152ZM15.6968 5.15506L18.8788 3.38729L20.293 4.80151L18.5252 7.98349L16.7574 8.33704L14.6361 10.4584L13.2219 9.04415L15.3432 6.92283L15.6968 5.15506ZM8.97927 13.2868L10.3935 14.701L5.09018 20.0043C4.69966 20.3948 4.06649 20.3948 3.67597 20.0043C3.31334 19.6417 3.28744 19.0698 3.59826 18.6773L3.67597 18.5901L8.97927 13.2868Z"></path></svg>',
51
54
  'user': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 22C4 17.5817 7.58172 14 12 14C16.4183 14 20 17.5817 20 22H18C18 18.6863 15.3137 16 12 16C8.68629 16 6 18.6863 6 22H4ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11Z"></path></svg>',
package/src/components/Icon/icons/seedling-circle.svg ADDED
@@ -0,0 +1,12 @@
1
+ <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
2
+ viewBox="0 0 18 18" style="enable-background:new 0 0 18 18;" xml:space="preserve">
3
+ <path d="M9,18c-5,0-9-4-9-9s4-9,9-9s9,4,9,9S14,18,9,18z M9,16.2c4,0,7.2-3.2,7.2-7.2S13,1.8,9,1.8S1.8,5,1.8,9S5,16.2,9,16.2z"/>
4
+ <g>
5
+ <g>
6
+ <path d="M8.5,11.1C8,9.1,6.9,8.4,4.7,8.7c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0,0,0.1c0,0,0,0,0,0.1C4.6,9.5,5.2,11.5,8.5,11.1z"/>
7
+ <path d="M9.2,9.6c2-2.7,1.8-4.5-0.9-6.8c0,0-0.1,0-0.2,0C8,2.8,8,2.8,7.9,2.9C7.2,3.6,5.3,6.2,9.2,9.6"/>
8
+ <path d="M13.3,9.5C13.3,9.5,13.4,9.5,13.3,9.5c0.1,0,0.1,0.1,0.2,0.1v0.1v0.1c-0.1,0.8-0.6,3-4.1,3.1c-0.2,0.5-0.2,1.1,0,1.6
9
+ l-0.9,0.3c-0.2-0.9-0.2-1.8,0-2.7C8.7,11.5,9,11,9.4,10.6s0.9-0.7,1.5-0.9C11.7,9.5,12.5,9.4,13.3,9.5"/>
10
+ </g>
11
+ </g>
12
+ </svg>
package/src/layouts/Header/Header.tsx CHANGED
@@ -1,5 +1,4 @@
1
1
  import * as React from 'react';
2
- import { cloneElement } from 'react';
3
2
  import { icons } from '../../components/Icon/icons';
4
3
  import { HeaderProps } from './Header.types';
5
4
  import './Header.css';
@@ -13,9 +12,7 @@ export const Header = ({ actions, appName }: HeaderProps) => {
13
12
  <div className="header-techoff" dangerouslySetInnerHTML={{ __html: icons[`header-${appName}`] }} />
14
13
  </div>
15
14
  <div>
16
- <div className="header-actions">
17
- {actions.map((action, index) => cloneElement(action, { key: index, ...action.props }))}
18
- </div>
15
+ <div className="header-actions">{actions}</div>
19
16
  </div>
20
17
  </header>
21
18
  );
package/src/layouts/Header/Header.types.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { ReactElement } from 'react';
2
2
 
3
3
  export type HeaderProps = {
4
- actions: ReactElement[];
4
+ actions: ReactElement;
5
5
  appName: 'bikestudio' | 'nsc-helmet' | 'opticost' | 'repairability';
6
6
  };
7
7
  export type HeaderProfileProps = { firstname: string; lastname: string; supportLink?: string };
package/src/layouts/Header/__stories__/Header.stories.mdx CHANGED
@@ -24,10 +24,12 @@ The header will allow users to quickly find the information they need at a glanc
24
24
  <Story
25
25
  name="Overview"
26
26
  args={{
27
- actions: [
28
- <Button icon="add" size="lg" variant="shadow" rounded />,
29
- <HeaderProfile firstname="John" lastname="Doe" />,
30
- ],
27
+ actions: (
28
+ <>
29
+ <Button icon="add" size="lg" variant="shadow" rounded />
30
+ <HeaderProfile firstname="John" lastname="Doe" />
31
+ </>
32
+ ),
31
33
  appName: 'repairability',
32
34
  }}
33
35
  argTypes={headerArgTypes}
package/src/layouts/Navigation/Navigation.tsx CHANGED
@@ -1,9 +1,19 @@
1
1
  import * as React from 'react';
2
- import { cloneElement, PropsWithChildren } from 'react';
2
+ import { PropsWithChildren } from 'react';
3
3
  import { Icon } from '../../components/Icon/Icon';
4
4
  import { NavigationBreadcrumbItemProps, NavigationProps } from './Navigation.types';
5
5
  import './Navigation.css';
6
6
 
7
+ export const NavigationBreadcrumbDivider = () => {
8
+ // #########
9
+ // Rendering
10
+ return (
11
+ <div className="breadcrumb-chevron">
12
+ <Icon name="chevron-right" />
13
+ </div>
14
+ );
15
+ };
16
+
7
17
  export const NavigationBreadcrumbItem = ({
8
18
  children,
9
19
  icon,
@@ -36,23 +46,9 @@ export const Navigation = ({ actions, breadcrumbs }: NavigationProps) => {
36
46
  // Rendering
37
47
  return (
38
48
  <div className="navigation">
39
- <div className="breadcrumb">
40
- {breadcrumbs.map((breadcrumb, index) => (
41
- <div key={index} className="breadcrumb-container">
42
- {breadcrumb}
43
-
44
- {index !== breadcrumbs.length - 1 && (
45
- <div className="breadcrumb-chevron">
46
- <Icon name="chevron-right" />
47
- </div>
48
- )}
49
- </div>
50
- ))}
51
- </div>
49
+ <div className="breadcrumb">{breadcrumbs}</div>
52
50
  <div className="navigation-divider" />
53
- <div className="navigation-actions">
54
- {actions?.map((action, index) => cloneElement(action, { key: index, ...action.props }))}
55
- </div>
51
+ <div className="navigation-actions">{actions}</div>
56
52
  </div>
57
53
  );
58
54
  };
package/src/layouts/Navigation/Navigation.types.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import { ReactElement } from 'react';
2
2
 
3
- export type NavigationProps = { actions?: ReactElement[]; breadcrumbs: ReactElement[] };
3
+ export type NavigationProps = { actions?: ReactElement; breadcrumbs: ReactElement };
4
4
  export type NavigationBreadcrumbItemProps = { icon?: string; highlight?: boolean; onClick?: () => void };
package/src/layouts/Navigation/__stories__/Navigation.stories.mdx CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
3
- import { Navigation, NavigationBreadcrumbItem } from '../Navigation';
3
+ import { Navigation, NavigationBreadcrumbItem, NavigationBreadcrumbDivider } from '../Navigation';
4
4
  import { Button } from '../../../components/Button/Button';
5
5
  import { icons } from '../../../components/Icon/icons';
6
6
 
@@ -16,21 +16,27 @@ Breadcrumbs are an important navigation component that shows content hierarchy.
16
16
  <Story
17
17
  name="Overview"
18
18
  args={{
19
- actions: [
20
- <Button icon="check" onClick={() => {}}>
21
- Action 1
22
- </Button>,
23
- <Button icon="add" onClick={() => {}}>
24
- Action 2
25
- </Button>,
26
- ],
27
- breadcrumbs: [
19
+ actions: (
20
+ <>
21
+ <Button icon="check" onClick={() => {}}>
22
+ Action 1
23
+ </Button>
24
+ <Button icon="add" onClick={() => {}}>
25
+ Action 2
26
+ </Button>
27
+ </>
28
+ ),
29
+ breadcrumbs: (
30
+ <>
28
31
  <NavigationBreadcrumbItem icon="home" onClick={() => {}}>
29
32
  Home
30
- </NavigationBreadcrumbItem>,
31
- <NavigationBreadcrumbItem onClick={() => {}}>Menu Item 1</NavigationBreadcrumbItem>,
33
+ </NavigationBreadcrumbItem>
34
+ <NavigationBreadcrumbDivider />
35
+ <NavigationBreadcrumbItem onClick={() => {}}>Menu Item 1</NavigationBreadcrumbItem>
36
+ <NavigationBreadcrumbDivider />
32
37
  <NavigationBreadcrumbItem highlight>Menu Item 2</NavigationBreadcrumbItem>
33
- ]
38
+ </>
39
+ )
34
40
  }}
35
41
 
36
42
  >