tide-design-system 2.0.44 → 2.0.45

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 (200) hide show
  1. package/.storybook/main.ts +1 -1
  2. package/dist/style.css +1 -1
  3. package/dist/tide-design-system.cjs +2 -2
  4. package/dist/tide-design-system.esm.d.ts +164 -78
  5. package/dist/tide-design-system.esm.js +945 -913
  6. package/package.json +1 -1
  7. package/src/assets/svg/icons/IconBed.svg +3 -0
  8. package/src/assets/svg/icons/IconEngine.svg +3 -0
  9. package/src/assets/svg/icons/IconGas.svg +3 -0
  10. package/src/assets/svg/icons/IconLevellingJack.svg +3 -0
  11. package/src/assets/svg/icons/IconOdometer.svg +3 -0
  12. package/src/assets/svg/icons/IconPowerOff.svg +3 -0
  13. package/src/assets/svg/icons/IconSleeps.svg +3 -0
  14. package/src/assets/svg/icons/IconSnowflake.svg +3 -0
  15. package/src/assets/svg/icons/IconUmbrella.svg +3 -0
  16. package/src/assets/svg/icons/IconWater.svg +3 -0
  17. package/src/assets/svg/icons/realm/rv/IconRvClassA.svg +3 -0
  18. package/src/assets/svg/icons/realm/rv/IconRvClassB.svg +3 -0
  19. package/src/assets/svg/icons/realm/rv/IconRvClassC.svg +3 -0
  20. package/src/assets/svg/icons/realm/rv/IconRvFifthWheel.svg +3 -0
  21. package/src/assets/svg/icons/realm/rv/IconRvFishHouse.svg +3 -0
  22. package/src/assets/svg/icons/realm/rv/IconRvParkModel.svg +3 -0
  23. package/src/assets/svg/icons/realm/rv/IconRvPopUpCamper.svg +3 -0
  24. package/src/assets/svg/icons/realm/rv/IconRvTravelTrailer.svg +3 -0
  25. package/src/assets/svg/icons/realm/rv/IconRvTruckCamper.svg +3 -0
  26. package/src/components/TideCard.vue +62 -8
  27. package/src/components/TideIcon.vue +16 -6
  28. package/src/components/TideInputCheckbox.vue +10 -47
  29. package/src/stories/TideCard.stories.ts +73 -10
  30. package/src/stories/TideInputCheckbox.stories.ts +18 -3
  31. package/src/types/Card.ts +14 -0
  32. package/src/types/Icon.ts +34 -2
  33. package/src/types/Realm.ts +2 -1
  34. package/dist/IconAccountBalance-0a430d19.cjs +0 -2
  35. package/dist/IconAccountBalance-ad4f4a95.js +0 -16
  36. package/dist/IconAdd-917e055b.js +0 -16
  37. package/dist/IconAdd-91de604b.cjs +0 -2
  38. package/dist/IconAiDescription-674cca6d.cjs +0 -2
  39. package/dist/IconAiDescription-e6f8ed46.js +0 -20
  40. package/dist/IconAlignSpace-5d64a8e4.js +0 -16
  41. package/dist/IconAlignSpace-7ee811f8.cjs +0 -2
  42. package/dist/IconApplePay-7742e162.js +0 -16
  43. package/dist/IconApplePay-92395240.cjs +0 -2
  44. package/dist/IconArrowBack-1810092d.js +0 -16
  45. package/dist/IconArrowBack-3d47d166.cjs +0 -2
  46. package/dist/IconArrowForward-613e128c.cjs +0 -2
  47. package/dist/IconArrowForward-ddabefc9.js +0 -16
  48. package/dist/IconArrowRight-9f39cdbb.cjs +0 -2
  49. package/dist/IconArrowRight-d93347c3.js +0 -16
  50. package/dist/IconAssignment-1983e555.js +0 -16
  51. package/dist/IconAssignment-915702cc.cjs +0 -2
  52. package/dist/IconAwardStar-447cf4fc.cjs +0 -2
  53. package/dist/IconAwardStar-8128aca1.js +0 -16
  54. package/dist/IconBookmark-3f6454d9.cjs +0 -2
  55. package/dist/IconBookmark-7d88d664.js +0 -16
  56. package/dist/IconCalendarMonth-2fd1e713.js +0 -16
  57. package/dist/IconCalendarMonth-bb5bbb9b.cjs +0 -2
  58. package/dist/IconCall-08f3119f.cjs +0 -2
  59. package/dist/IconCall-8aa582d9.js +0 -16
  60. package/dist/IconCheck-910929df.cjs +0 -2
  61. package/dist/IconCheck-cf7470ee.js +0 -16
  62. package/dist/IconChevronLeft-558206bb.js +0 -16
  63. package/dist/IconChevronLeft-6626777e.cjs +0 -2
  64. package/dist/IconChevronRight-28930a0b.js +0 -16
  65. package/dist/IconChevronRight-91bc7ad1.cjs +0 -2
  66. package/dist/IconClear-489c5a46.cjs +0 -2
  67. package/dist/IconClear-9419bf17.js +0 -16
  68. package/dist/IconClose-538a540f.cjs +0 -2
  69. package/dist/IconClose-abfb6177.js +0 -16
  70. package/dist/IconCycle-2affec71.js +0 -16
  71. package/dist/IconCycle-7b7c7325.cjs +0 -2
  72. package/dist/IconDelete-5cc224a1.cjs +0 -2
  73. package/dist/IconDelete-67b69553.js +0 -16
  74. package/dist/IconDiamond-4e736f5f.cjs +0 -2
  75. package/dist/IconDiamond-93af488a.js +0 -16
  76. package/dist/IconDraft-26850369.cjs +0 -2
  77. package/dist/IconDraft-6e70e48f.js +0 -16
  78. package/dist/IconEdit-16d34325.js +0 -16
  79. package/dist/IconEdit-b4d5f175.cjs +0 -2
  80. package/dist/IconError-4ad48be1.cjs +0 -2
  81. package/dist/IconError-a2922b95.js +0 -16
  82. package/dist/IconExpandContent-03a28bfb.cjs +0 -2
  83. package/dist/IconExpandContent-7e144d1c.js +0 -16
  84. package/dist/IconExpandLess-3a8a0552.js +0 -16
  85. package/dist/IconExpandLess-59a80211.cjs +0 -2
  86. package/dist/IconExpandMore-c600148e.js +0 -16
  87. package/dist/IconExpandMore-edf55cdd.cjs +0 -2
  88. package/dist/IconFacebook-4658b533.js +0 -16
  89. package/dist/IconFacebook-9c43095a.cjs +0 -2
  90. package/dist/IconFavorite-43091cef.cjs +0 -2
  91. package/dist/IconFavorite-d23faefe.js +0 -16
  92. package/dist/IconFavoriteFilled-71277849.cjs +0 -2
  93. package/dist/IconFavoriteFilled-aa0d6d5e.js +0 -16
  94. package/dist/IconFormatBold-4faa5f99.cjs +0 -2
  95. package/dist/IconFormatBold-70a5cacf.js +0 -16
  96. package/dist/IconFormatItalic-c06504d7.js +0 -16
  97. package/dist/IconFormatItalic-fee490fc.cjs +0 -2
  98. package/dist/IconFormatListBulleted-9493858a.js +0 -16
  99. package/dist/IconFormatListBulleted-d0a77d0e.cjs +0 -2
  100. package/dist/IconForum-22217aa0.cjs +0 -2
  101. package/dist/IconForum-ae4ad63f.js +0 -16
  102. package/dist/IconGavel-44c29036.js +0 -16
  103. package/dist/IconGavel-aacae653.cjs +0 -2
  104. package/dist/IconGoogle-77ec192e.cjs +0 -2
  105. package/dist/IconGoogle-febad0d8.js +0 -31
  106. package/dist/IconGooglePay-049e93ec.cjs +0 -2
  107. package/dist/IconGooglePay-8cf0286e.js +0 -16
  108. package/dist/IconGrid-1693599f.cjs +0 -2
  109. package/dist/IconGrid-25f665e0.js +0 -16
  110. package/dist/IconHeight-4fae7545.js +0 -16
  111. package/dist/IconHeight-d8ee424f.cjs +0 -2
  112. package/dist/IconHelp-340ee4fb.js +0 -16
  113. package/dist/IconHelp-43137a66.cjs +0 -2
  114. package/dist/IconInfo-2d14575c.cjs +0 -2
  115. package/dist/IconInfo-efead10b.js +0 -16
  116. package/dist/IconInsertText-00236a65.js +0 -16
  117. package/dist/IconInsertText-14c80b9a.cjs +0 -2
  118. package/dist/IconInstagram-43bb02ea.cjs +0 -2
  119. package/dist/IconInstagram-57188d29.js +0 -16
  120. package/dist/IconIosShare-167aa8c4.js +0 -16
  121. package/dist/IconIosShare-526a016a.cjs +0 -2
  122. package/dist/IconLayout-2865e0eb.js +0 -16
  123. package/dist/IconLayout-e663120e.cjs +0 -2
  124. package/dist/IconLinkedIn-088a3792.cjs +0 -2
  125. package/dist/IconLinkedIn-f29c217d.js +0 -16
  126. package/dist/IconLocalShipping-901a3e4c.js +0 -16
  127. package/dist/IconLocalShipping-9bca5a95.cjs +0 -2
  128. package/dist/IconLock-1c996287.cjs +0 -2
  129. package/dist/IconLock-47669e20.js +0 -16
  130. package/dist/IconMail-9b85058a.js +0 -16
  131. package/dist/IconMail-f2b8fee4.cjs +0 -2
  132. package/dist/IconMenu-4bed57f3.js +0 -16
  133. package/dist/IconMenu-c7c2b143.cjs +0 -2
  134. package/dist/IconMoreHoriz-2aabe29f.js +0 -16
  135. package/dist/IconMoreHoriz-2c82da62.cjs +0 -2
  136. package/dist/IconNotifications-01f7658b.cjs +0 -2
  137. package/dist/IconNotifications-bcbf1d8c.js +0 -16
  138. package/dist/IconOpenInNew-78fffcfe.js +0 -16
  139. package/dist/IconOpenInNew-9032f1db.cjs +0 -2
  140. package/dist/IconPalette-22865300.js +0 -16
  141. package/dist/IconPalette-269c7286.cjs +0 -2
  142. package/dist/IconPaypal-427e8667.cjs +0 -2
  143. package/dist/IconPaypal-c28e6dbe.js +0 -16
  144. package/dist/IconPerson-7ada8b07.js +0 -16
  145. package/dist/IconPerson-ee87961e.cjs +0 -2
  146. package/dist/IconPhotoCamera-31a58b85.js +0 -16
  147. package/dist/IconPhotoCamera-56cb060d.cjs +0 -2
  148. package/dist/IconPinterest-87034fbf.cjs +0 -2
  149. package/dist/IconPinterest-fe5cc414.js +0 -16
  150. package/dist/IconPlayArrow-1ed5d884.js +0 -16
  151. package/dist/IconPlayArrow-80f601bf.cjs +0 -2
  152. package/dist/IconRemove-73b05132.cjs +0 -2
  153. package/dist/IconRemove-bab221ba.js +0 -16
  154. package/dist/IconRoundedCorners-53cb2cfc.cjs +0 -2
  155. package/dist/IconRoundedCorners-e21c4321.js +0 -16
  156. package/dist/IconRuler-0ceea80a.js +0 -16
  157. package/dist/IconRuler-5feb5a83.cjs +0 -2
  158. package/dist/IconSearch-45b2c0e5.cjs +0 -2
  159. package/dist/IconSearch-f8faefb4.js +0 -16
  160. package/dist/IconSeating-2ca8921d.js +0 -16
  161. package/dist/IconSeating-bc19b98f.cjs +0 -2
  162. package/dist/IconSell-b011ac2d.js +0 -16
  163. package/dist/IconSell-bcede586.cjs +0 -2
  164. package/dist/IconShare-57f28ce3.js +0 -16
  165. package/dist/IconShare-ff50a973.cjs +0 -2
  166. package/dist/IconShoppingCart-b532dab0.js +0 -16
  167. package/dist/IconShoppingCart-eee95744.cjs +0 -2
  168. package/dist/IconSms-0575f458.cjs +0 -2
  169. package/dist/IconSms-378f373a.js +0 -16
  170. package/dist/IconStar-1b8ad0f9.js +0 -16
  171. package/dist/IconStar-e2a88836.cjs +0 -2
  172. package/dist/IconSwapVert-29258e96.cjs +0 -2
  173. package/dist/IconSwapVert-8085e942.js +0 -16
  174. package/dist/IconThreeDRotation-33f086a7.js +0 -29
  175. package/dist/IconThreeDRotation-7be89ff8.cjs +0 -2
  176. package/dist/IconTrophy-4d05eb75.cjs +0 -2
  177. package/dist/IconTrophy-f4be8b54.js +0 -16
  178. package/dist/IconTune-0913ba01.js +0 -16
  179. package/dist/IconTune-1276696d.cjs +0 -2
  180. package/dist/IconTwitter-55b8ba63.cjs +0 -2
  181. package/dist/IconTwitter-9acefb07.js +0 -16
  182. package/dist/IconVideocam-33650e6f.js +0 -16
  183. package/dist/IconVideocam-f5b07935.cjs +0 -2
  184. package/dist/IconViewInAr-a583aff8.cjs +0 -2
  185. package/dist/IconViewInAr-d1534ef2.js +0 -16
  186. package/dist/IconVisibility-4984bcac.cjs +0 -2
  187. package/dist/IconVisibility-a1c21dd0.js +0 -16
  188. package/dist/IconVolumeOff-35d350ee.cjs +0 -2
  189. package/dist/IconVolumeOff-8e121ef3.js +0 -16
  190. package/dist/IconVolumeOn-386ad18b.cjs +0 -2
  191. package/dist/IconVolumeOn-992e16dd.js +0 -16
  192. package/dist/IconWarning-54f3a9ac.cjs +0 -2
  193. package/dist/IconWarning-6f490acf.js +0 -16
  194. package/dist/IconWeight-c6ddd367.cjs +0 -2
  195. package/dist/IconWeight-e3b3daa6.js +0 -16
  196. package/dist/IconWidth-a556befc.cjs +0 -2
  197. package/dist/IconWidth-c81dbc7a.js +0 -16
  198. package/dist/IconYoutube-a6224033.js +0 -16
  199. package/dist/IconYoutube-ed951c21.cjs +0 -2
  200. /package/src/assets/svg/icons/{IconCycle.svg → IconArrowCycle.svg} +0 -0
package/package.json CHANGED
@@ -54,5 +54,5 @@
54
54
  "main": "dist/tide-design-system.cjs",
55
55
  "module": "dist/tide-design-system.esm.js",
56
56
  "types": "dist/tide-design-system.esm.d.ts",
57
- "version": "2.0.44"
57
+ "version": "2.0.45"
58
58
  }
@@ -0,0 +1,3 @@
1
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M2 19v-6c0-.45.1-.86.27-1.22.19-.37.43-.7.73-.98V8c0-.83.3-1.54.88-2.13A2.9 2.9 0 0 1 6 5h4c.38 0 .74.07 1.07.21.34.14.65.34.93.59.28-.25.6-.45.93-.59.33-.14.69-.21 1.07-.21h4c.83 0 1.54.3 2.13.88.58.58.87 1.29.87 2.12v2.8c.3.28.54.6.73.97.18.37.27.78.27 1.23v6h-2v-2H4v2H2Zm11-9h6V8c0-.28-.1-.52-.29-.71A.97.97 0 0 0 18 7h-4c-.28 0-.52.1-.71.29-.2.19-.29.43-.29.71v2Zm-8 0h6V8c0-.28-.1-.52-.29-.71A.97.97 0 0 0 10 7H6c-.28 0-.52.1-.71.29-.2.19-.29.43-.29.71v2Zm-1 5h16v-2c0-.28-.1-.52-.29-.71A.97.97 0 0 0 19 12H5c-.28 0-.52.1-.71.29-.2.19-.29.43-.29.71v2Z" />
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" d="M8 4.52h-.76v1.5h3.5v1.46H8.5c-.82 0-1.5.67-1.5 1.5v.5h-.5c-.82 0-1.5.67-1.5 1.5v1.75H3.51v-3H2v7.5h1.5v-3h1.48v1.75c0 .83.68 1.5 1.5 1.5h.89l.58 1.17c.26.51.78.83 1.34.83h4.39a1.5 1.5 0 0 0 1.34-.83l.58-1.17H17v.5c0 .83.68 1.5 1.5 1.5h2c.83 0 1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5h-2c-.82 0-1.5.67-1.5 1.5v.5h-1v-2.5c0-.83-.67-1.5-1.5-1.5h-2.25V6.02h3.5v-1.5H8Zm1 5.46v-.5h5v2.5c0 .83.67 1.5 1.5 1.5h2c.82 0 1.5-.67 1.5-1.5v-.5h1v6h-1v-.5c0-.83-.68-1.5-1.5-1.5h-2.2a1.5 1.5 0 0 0-1.34.83l-.58 1.17H9.6l-.58-1.17a1.5 1.5 0 0 0-1.34-.83h-.7v-4h.5c.83 0 1.5-.67 1.5-1.5Z" clip-rule="evenodd"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M3.75 21V5c0-.55.2-1.02.59-1.41.39-.4.86-.59 1.41-.59h6c.55 0 1.02.2 1.41.59.4.39.59.86.59 1.41v7h1c.55 0 1.02.2 1.41.59.4.39.59.86.59 1.41v4.5c0 .28.1.52.29.71.19.2.43.29.71.29.28 0 .52-.1.71-.29.2-.19.29-.43.29-.71v-7.2c-.15.08-.3.14-.48.16-.16.03-.34.04-.52.04-.7 0-1.3-.24-1.78-.72A2.41 2.41 0 0 1 15.25 9a2.48 2.48 0 0 1 1.6-2.35l-2.1-2.1L15.8 3.5l3.7 3.6c.25.25.44.54.56.88.13.33.19.67.19 1.02v9.5c0 .7-.24 1.3-.73 1.77-.48.49-1.07.73-1.77.73s-1.3-.24-1.78-.73a2.41 2.41 0 0 1-.72-1.77v-5h-1.5V21h-10Zm2-11h6V5h-6v5Zm12 0c.28 0 .52-.1.71-.29.2-.19.29-.43.29-.71 0-.28-.1-.52-.29-.71a.97.97 0 0 0-.71-.29c-.28 0-.52.1-.71.29-.2.19-.29.43-.29.71 0 .28.1.52.29.71.19.2.43.29.71.29Zm-12 9h6v-7h-6v7Z" />
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" d="M9 2h6v2h-2v1.8h5v-.98h2V9h-2V7.8h-5V10h.23c.5 0 .98.26 1.26.68l5.85 9A1.5 1.5 0 0 1 19.08 22H4.92a1.5 1.5 0 0 1-1.26-2.32l5.85-9a1.5 1.5 0 0 1 1.26-.68H11V7.8H6V9H4V4.82h2v.97h5V4H9V2Zm2 10.07L5.84 20h12.32L13 12.07v6.43h-2v-6.43Z" clip-rule="evenodd" />
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M10.45 15.5c.4.4.92.6 1.55.59.63-.01 1.1-.24 1.4-.69L19 7l-8.4 5.6c-.45.3-.69.76-.71 1.38-.03.61.16 1.12.56 1.52ZM12 4a9.21 9.21 0 0 1 5.4 1.65l-1.9 1.2A7.58 7.58 0 0 0 12 6c-2.22 0-4.1.78-5.66 2.34A7.71 7.71 0 0 0 4 14a8.2 8.2 0 0 0 1.1 4h13.8c.38-.63.66-1.3.84-1.98.17-.68.26-1.39.26-2.12a7.19 7.19 0 0 0-.85-3.4l1.2-1.9c.5.78.9 1.62 1.19 2.5a9.77 9.77 0 0 1-.89 7.95c-.18.3-.43.53-.75.7-.32.17-.65.25-1 .25H5.1c-.35 0-.68-.08-1-.25a1.9 1.9 0 0 1-.75-.7A10.2 10.2 0 0 1 2 14c0-1.38.26-2.68.79-3.89A10.18 10.18 0 0 1 8.12 4.8 9.68 9.68 0 0 1 12 4Z" />
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M10.2 20.3v-3l-3.5-3.5V8.3c0-.4.1-.78.27-1.13.19-.34.45-.61.8-.8L9.7 8.3h-1v4.65l3.5 3.5v1.85h1v-1.85l.93-.92L2.1 3.5l1.4-1.4 18.4 18.4-1.4 1.4-4.95-4.95-.35.35v3h-5Zm7.65-6.7-1.15-1.15V8.3h-4.15L8.7 4.45V2.3h2v4h4v-4h2v5l-1-1h1c.55 0 1.02.2 1.41.59.4.39.59.86.59 1.41v4.45l-.85.85Z" />
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M1 17V7h2v8h8V7h8c1.1 0 2.04.4 2.82 1.18A3.85 3.85 0 0 1 23 11v6H1Zm12-2h8v-4c0-.55-.2-1.02-.59-1.41-.39-.4-.86-.59-1.41-.59h-6v6Zm-6-1c.83 0 1.54-.3 2.13-.88.58-.58.87-1.29.87-2.12 0-.83-.3-1.54-.88-2.13A2.9 2.9 0 0 0 7 8c-.83 0-1.54.3-2.13.88A2.9 2.9 0 0 0 4 11c0 .83.3 1.54.88 2.13.58.58 1.29.87 2.12.87Zm0-2a.97.97 0 0 1-.71-.29A.97.97 0 0 1 6 11c0-.28.1-.52.29-.71.19-.2.43-.29.71-.29.28 0 .52.1.71.29.2.19.29.43.29.71 0 .28-.1.52-.29.71-.19.2-.43.29-.71.29Z" />
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M11 22v-4.15l-3.25 3.2-1.4-1.4L11 15v-2H9l-4.65 4.65-1.4-1.4L6.15 13H2v-2h4.15l-3.2-3.25 1.4-1.4L9 11h2V9L6.35 4.35l1.4-1.4L11 6.15V2h2v4.15l3.25-3.2 1.4 1.4L13 9v2h2l4.65-4.65 1.4 1.4-3.2 3.25H22v2h-4.15l3.2 3.25-1.4 1.4L15 13h-2v2l4.65 4.65-1.4 1.4-3.25-3.2V22h-2Z"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="m19.6 21.01-6.35-6.35 1.4-1.4L21 19.61l-1.4 1.4Zm-13.65-.7c-1-1-1.74-2.12-2.23-3.37a10.52 10.52 0 0 1 0-7.63 9.74 9.74 0 0 1 2.23-3.35c1-1 2.12-1.74 3.36-2.23a10.27 10.27 0 0 1 7.63 0 9.86 9.86 0 0 1 3.36 2.23L5.95 20.31Zm.2-3.05 1.35-1.35a19.27 19.27 0 0 1-1.42-2.17 10.98 10.98 0 0 1-.93-2.18c-.18.99-.2 1.97-.04 2.95.16.99.5 1.9 1.04 2.75Zm2.8-2.75 5.55-5.6c-.72-.55-1.44-1-2.16-1.33a8.84 8.84 0 0 0-2.04-.7 4.83 4.83 0 0 0-1.71-.07c-.51.09-.9.27-1.19.55-.28.3-.47.7-.55 1.21a4.9 4.9 0 0 0 .06 1.73c.13.64.36 1.32.7 2.04.34.71.79 1.44 1.34 2.17Zm6.95-7 1.4-1.35a7.95 7.95 0 0 0-5.75-1 14.58 14.58 0 0 1 2.2.92A11.34 11.34 0 0 1 15.9 7.5Z" />
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M12 21.5c-2.22 0-4.1-.77-5.66-2.3A7.56 7.56 0 0 1 4 13.6a7.6 7.6 0 0 1 2.35-5.55L12 2.5l5.65 5.55a7.78 7.78 0 0 1 .01 11.15A7.78 7.78 0 0 1 12 21.5Zm0-2c1.67 0 3.08-.57 4.25-1.71A5.63 5.63 0 0 0 18 13.6a5.68 5.68 0 0 0-1.75-4.1L12 5.3 7.75 9.5A5.45 5.45 0 0 0 6 13.6c0 1.65.58 3.05 1.75 4.19A5.85 5.85 0 0 0 12 19.5Z" />
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" d="M3.75 5a1 1 0 0 1 1-1h1.67a1 1 0 0 1 .6.2l1.33 1c.12.09.2.19.27.3h3.13V5a1 1 0 0 1 1-1h1.67a1 1 0 0 1 .6.2l1.33 1c.12.09.2.19.27.3h3.56c.83 0 1.55.59 1.72 1.4l.82 4.1c.02.12.03.23.03.35v4.9c0 .97-.78 1.75-1.75 1.75h-.88a2.25 2.25 0 0 1-4.24 0H8.12a2.25 2.25 0 0 1-4.24 0H2c-.97 0-1.75-.78-1.75-1.75v-9c0-.97.78-1.75 1.75-1.75h1.75V5Zm12 2H2a.25.25 0 0 0-.25.25v9c0 .14.11.25.25.25h1.88a2.25 2.25 0 0 1 4.24 0h4.13v-6.25c0-.97.78-1.75 1.75-1.75h1c.97 0 1.75.78 1.75 1.75v5.13a2.24 2.24 0 0 1 3.37 1.12H21c.14 0 .25-.11.25-.25V13H19c-.97 0-1.75-.78-1.75-1.75v-2c0-.97.78-1.75 1.75-1.75h1.49l-.06-.3a.25.25 0 0 0-.25-.2h-4.43Zm-2 9.5h1.5v-6.25A.25.25 0 0 0 15 10h-1a.25.25 0 0 0-.25.25v6.25ZM19 9h1.79l.46 2.3v.2H19a.25.25 0 0 1-.25-.25v-2c0-.14.11-.25.25-.25ZM6 16.5A.75.75 0 1 0 6 18a.75.75 0 0 0 0-1.5Zm12 0a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM7.75 10.25c0-.14.11-.25.25-.25h2c.14 0 .25.11.25.25v1c0 .14-.11.25-.25.25H8a.25.25 0 0 1-.25-.25v-1ZM8 8.5c-.97 0-1.75.78-1.75 1.75v1c0 .97.78 1.75 1.75 1.75h2c.97 0 1.75-.78 1.75-1.75v-1c0-.97-.78-1.75-1.75-1.75H8Z" clip-rule="evenodd" />
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" d="M2.75 14V6.5H14c.07 0 .2.03.42.14.21.1.46.27.73.5.3.24.61.54.93.86h-.83a1 1 0 0 0-1 1v2.5a1 1 0 0 0 1 1h6.54c.16.14.29.37.37.66a2.67 2.67 0 0 1 .09.59V14H2.75Zm-1.5 1.5V6a1 1 0 0 1 1-1H14c.4 0 .77.13 1.1.3.34.18.68.41 1 .68.65.53 1.31 1.22 1.92 1.92l.08.1h.15v.18A40.44 40.44 0 0 1 20.4 11h1.54c.15 0 .32.03.48.12.73.4 1.04 1.14 1.18 1.64a4.17 4.17 0 0 1 .15.96v.02l-.75.01h.75v1.9a1 1 0 0 1-.3.7l-.85.86a1 1 0 0 1-.7.29h-1.03a2.25 2.25 0 0 1-4.24 0H9.87a2.25 2.25 0 0 1-4.24 0H2.25a1 1 0 0 1-1-1v-1Zm20.94 0h-1.57c.1.15.19.32.25.5h.82l.5-.5Zm-5.31 0H9.62c.1.15.19.32.25.5h6.76c.06-.18.15-.35.25-.5Zm-11 0c-.1.15-.19.32-.25.5H2.75v-.5h3.13Zm9.87-6h1.65c.43.54.83 1.06 1.15 1.5h-2.8V9.5Zm-8 6.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm11 0a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 9a1 1 0 0 1 1-1h6.5a1 1 0 0 1 1 1v2.5a1 1 0 0 1-1 1h-6.5a1 1 0 0 1-1-1V9Zm1.5.5V11h5.5V9.5h-5.5Z" clip-rule="evenodd" />
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" d="M1.75 5.5V16h1.88a2.25 2.25 0 0 1 3.62-.93V8a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1v8h.5v-6a1 1 0 0 1 1-1h7V7.26l-4.4-1.76H1.76Zm6.12 12h7.76a2.25 2.25 0 0 0 4.24 0h1.88a1 1 0 0 0 1-1V13a1 1 0 0 0-1-1h-.35l-1-1.5h1.35a1 1 0 0 0 1-1V6.92a1 1 0 0 0-.63-.93l-4.8-1.92a1 1 0 0 0-.37-.07H1.25a1 1 0 0 0-1 1v11.5a1 1 0 0 0 1 1h2.38a2.25 2.25 0 0 0 4.24 0Zm9.88-3c-.98 0-1.81.63-2.12 1.5h-.88v-5.5h.5v2a1 1 0 0 0 1 1h5V16h-1.38a2.25 2.25 0 0 0-2.12-1.5Zm.89-3.95L19.6 12h-2.85v-1.5h1.85l.04.05ZM11.25 16h-2.5V8.5h2.5V16ZM5 16.75a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0ZM17.75 16a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm-14-9.5a1 1 0 0 0-1 1V10a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V7.5a1 1 0 0 0-1-1h-2Zm.5 3V8h1v1.5h-1Z" clip-rule="evenodd" />
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" d="M1.75 5.5V16h.88a2.25 2.25 0 0 1 4.12-.28 2.25 2.25 0 0 1 3.5-.65V8a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1v8h.5v-3a1 1 0 0 1 1-1h4.15c.08-.4.18-.98.22-1.6.06-.9-.01-1.75-.3-2.31a5.13 5.13 0 0 0-1.86-1.74c-.69-.43-1.34-.73-1.61-.85H1.75ZM14.25 16V8.5h-2.5V16h2.5Zm-13 1.5h1.38a2.25 2.25 0 0 0 4.12.28 2.25 2.25 0 0 0 4.12-.28h5.88a1 1 0 0 0 1-1v-3h1.5V15h1.5v-1.5h1.06a1 1 0 0 0 .97-.76c.08-.38.27-1.25.33-2.24.07-.95.03-2.15-.44-3.09a6.53 6.53 0 0 0-2.41-2.34c-.9-.55-1.72-.9-1.93-1a.98.98 0 0 0-.38-.07H1.25a1 1 0 0 0-1 1v11.5a1 1 0 0 0 1 1ZM4 16.75a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Zm4 0a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0ZM4.75 8.5V11h2.5V8.5h-2.5ZM3.25 8a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1v3.5a1 1 0 0 1-1 1h-3.5a1 1 0 0 1-1-1V8Zm15.43.25a.5.5 0 0 0-.18-.18.5.5 0 0 0-.18.18c.04.08.1.14.18.18a.5.5 0 0 0 .18-.18ZM17.25 8a1 1 0 0 1 1-1h.5a1 1 0 0 1 1 1v.5a1 1 0 0 1-1 1h-.5a1 1 0 0 1-1-1V8Z" clip-rule="evenodd" />
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" d="M2.5 18V6.5H16V18h-.5V9a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v9H7.93a2.25 2.25 0 1 0-3.35 0H2.5ZM20 8.21l-2.5-1.25v10.58l2.5-1.25V8.2Zm-2.91 11.21 3.84-1.92H23.5V15H22v1h-.5V7.9a1 1 0 0 0-.55-.89l-3.86-1.93-.16-.08H2a1 1 0 0 0-1 1v12.5a1 1 0 0 0 1 1h14.93l.16-.08ZM14 9.5V18h-2.5V9.5H14ZM5 10v-.5h1.5v.5H5Zm-.5-2a1 1 0 0 0-1 1v1.5a1 1 0 0 0 1 1H7a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1H4.5Zm9 3.25v-.75H12v3h1.5v-2.25Zm-8 5.25a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Z" clip-rule="evenodd"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" d="M2.25 5a1 1 0 0 0-1 1v9.5a1 1 0 0 0 1 1V19h1.5v-2.5h9.76l-.01.25a2.25 2.25 0 0 0 4.25 1.03 2.25 2.25 0 0 0 4.24-1.28h.76a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H2.25Zm18.91 10h1.09V9h-5.68a1 1 0 0 1-.53-.15l-3.51-2.2-2.78 1.99V15h4.59a2.24 2.24 0 0 1 3.41.72 2.25 2.25 0 0 1 3.41-.72ZM5.75 15H5v-2.25h.75V15ZM3.5 15v-2.25h-.75V15h.75Zm.75-3.75h-1.5V9h5.5v2.25h-4ZM8.76 7.5H2.75v-1h7.41l-1.4 1Zm13.49-1h-7.13l1.6 1h5.53v-1Zm-15 6.25h1V15h-1v-2.25Zm4.5-4.25a1 1 0 0 0-1 1V13a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V9.5a1 1 0 0 0-1-1h-2Zm1.5 4h-1V10h1v2.5Zm5-3a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-2Zm.5 2.5v-1h1v1h-1Zm-3 4a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm4 0a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z" clip-rule="evenodd" />
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" d="M7.66 6v-.5h9.5V6h-9.5Zm11-1v1h3.96a1 1 0 0 1 .98 1.16l-.62 3.71-.3 1.8a1 1 0 0 1-.98.83h-3.04V15h2.5v-1h1.5v2.5h-4a1 1 0 0 1-1 1h-3.88a2.25 2.25 0 0 1-4.24 0H7.16a1 1 0 0 1-1-1v-3H3.12a1 1 0 0 1-.98-.84l-.3-1.79-.62-3.7A1 1 0 0 1 2.2 6h3.95V5a1 1 0 0 1 1-1h10.5a1 1 0 0 1 1 1ZM9.54 16a2.25 2.25 0 0 1 4.24 0h3.38v-2.5h-1a1 1 0 0 1-1-1v-5h-5.5v5a1 1 0 0 1-1 1h-1V16h1.88Zm7.12-6V7.5h5.36l-.41 2.5h-4.95Zm0 1.5h4.7l-.09.5H16.66v-.5Zm-9.75-4h1.25V10H3.21L2.8 7.5H6.9Zm-3.45 4h4.7v.5H3.55l-.09-.5Zm9.2.5h-.5V9.5h.5V12Zm-1-4a1 1 0 0 0-1 1v3.5a1 1 0 0 0 1 1h1.5a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1h-1.5Zm-.75 8.75a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Z" clip-rule="evenodd"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M5.1 4a4 4 0 0 0-2.83 1.17l-.1.1A4 4 0 0 0 1 8.1v4.62a1 1 0 0 0 .03.26l.95 3.5a1 1 0 0 0 .96.74h3.81v.03a2.5 2.5 0 1 0 5-.03h11.47V14.75h-1.5v.97H20.3l.91-2.69a1 1 0 0 0 .06-.32V8.1a4 4 0 0 0-1.18-2.83l-.1-.1A4 4 0 0 0 17.18 4H5.1Zm6.12 11.72h.54V8a1 1 0 0 1 1-1H17a1 1 0 0 1 1 1v7.72h.71l1.06-3.1V8.1c0-.67-.27-1.3-.74-1.77l-.1-.1a2.5 2.5 0 0 0-1.76-.73H5.1c-.67 0-1.3.26-1.77.73l-.1.1A2.5 2.5 0 0 0 2.5 8.1v4.55l.82 3.07h3.96a2.5 2.5 0 0 1 3.94 0ZM16.5 8.5v7.22h-3.24V8.5h3.24Zm-11 1v-1h2v1h-2ZM5 7a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1H5Zm9.13 2.75v2h1.5v-2h-1.5Zm-3.88 7.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z" />
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" d="M8.1 5a1 1 0 0 0-.7.3L4.9 7.8a1 1 0 0 0 .7 1.7h6.65v.5H9.1a1 1 0 0 0-.7.3L5.69 13H2.25a1 1 0 0 0-1 1v2.5a1 1 0 0 0 1 1H4.5a2.25 2.25 0 0 0 4.5 0h6.5a2.25 2.25 0 0 0 4.5 0h2.75a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H8.1Zm11.33 11h2.82v-1.5h-8.5V16h2.32a2.24 2.24 0 0 1 3.36 0Zm-11 0h3.82v-4.5h-.5v2a1 1 0 0 1-1 1h-8V16h2.32a2.24 2.24 0 0 1 3.36 0Zm1.82-3H7.81l1.5-1.5h.94V13Zm12 0h-8.5V9a1 1 0 0 0-1-1H6.81l1.5-1.5h13.94V13Zm-3-3.5h-2.5v-1h2.5v1Zm-3-2.5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h3.5a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1h-3.5Zm-9.5 9.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm11 0a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z" clip-rule="evenodd" />
3
+ </svg>
@@ -1,19 +1,73 @@
1
1
  <script lang="ts" setup>
2
+ import { POSITION_CARD_ICON, TYPE_CARD, type CardIconPosition, type CardType } from '@/types/Card';
3
+ import type { Icon } from '@/types/Icon';
2
4
  import { CSS } from '@/types/Styles';
5
+ import { SIZE } from '@/types/Size';
6
+ import TideIcon from '@/components/TideIcon.vue';
7
+
8
+ type Props = {
9
+ description?: string;
10
+ heading: string;
11
+ icon?: Icon;
12
+ iconPosition: CardIconPosition;
13
+ selected?: boolean;
14
+ type: CardType;
15
+ };
16
+
17
+ withDefaults(defineProps<Props>(), {
18
+ description: undefined,
19
+ icon: undefined,
20
+ iconPosition: POSITION_CARD_ICON.LEFT,
21
+ selected: undefined,
22
+ type: TYPE_CARD.INFORMATIONAL,
23
+ });
3
24
  </script>
4
25
 
5
26
  <template>
6
- <div
27
+ <component
7
28
  :class="[
8
29
  'tide-card',
9
- CSS.HEIGHT.FULL,
30
+ CSS.BORDER.COLOR.LOW,
31
+ CSS.BORDER.FULL.ONE,
10
32
  CSS.BORDER.RADIUS.HALF,
11
- CSS.BG.SURFACE.DEFAULT,
12
- CSS.SHADOW.BOTTOM,
13
- CSS.FONT.COLOR.SURFACE.DEFAULT,
14
- CSS.SNAP_ALIGN.START,
33
+ CSS.DISPLAY.FLEX,
34
+ CSS.GAP.HALF,
35
+ CSS.PADDING.FULL.ONE,
36
+ CSS.WIDTH.FULL,
37
+ CSS.ALIGN.X.LEFT,
38
+ iconPosition === POSITION_CARD_ICON.LEFT
39
+ ? CSS.FLEX.DIRECTION.ROW
40
+ : iconPosition === POSITION_CARD_ICON.TOP && CSS.FLEX.DIRECTION.COLUMN,
41
+ type !== TYPE_CARD.INFORMATIONAL && 'hoverable',
42
+ type === TYPE_CARD.SELECTABLE && selected && 'selected',
15
43
  ]"
44
+ :is="type === TYPE_CARD.INFORMATIONAL ? 'div' : 'button'"
16
45
  >
17
- <slot />
18
- </div>
46
+ <TideIcon
47
+ :icon="icon"
48
+ :size="SIZE.SMALL"
49
+ v-if="icon"
50
+ />
51
+
52
+ <div :class="[CSS.AXIS2.START, CSS.DISPLAY.FLEX, CSS.FLEX.DIRECTION.COLUMN, CSS.GAP.HALF]">
53
+ <div :class="[CSS.FONT.ROLE.LABEL_1_SEMIBOLD, CSS.FONT.COLOR.SURFACE.DEFAULT]">{{ heading }}</div>
54
+
55
+ <div
56
+ :class="[CSS.FONT.ROLE.LABEL_2, CSS.FONT.COLOR.SURFACE.VARIANT]"
57
+ v-if="description"
58
+ >
59
+ {{ description }}
60
+ </div>
61
+ </div>
62
+ </component>
19
63
  </template>
64
+
65
+ <style scoped>
66
+ .tide-card.hoverable:not(.selected):hover {
67
+ border-color: var(--tide-border-rest);
68
+ }
69
+ .tide-card.selected {
70
+ outline: 2px solid var(--tide-border-high);
71
+ outline-offset: -2px;
72
+ }
73
+ </style>
@@ -8,6 +8,7 @@
8
8
  import { CSS } from '@/types/Styles';
9
9
  import { SIZE } from '@/types/Size';
10
10
  import { formatPascalCase } from '@/utilities/format';
11
+ import { REALM } from '@/types/Realm';
11
12
 
12
13
  type Props = {
13
14
  icon: Icon;
@@ -22,11 +23,17 @@
22
23
 
23
24
  watch(
24
25
  () => props.icon,
25
- () => {
26
+ async () => {
26
27
  const id = props.icon as unknown as string;
27
- const name = formatPascalCase(id);
28
- const component = defineAsyncComponent(() => import(`../assets/svg/icons/Icon${name}.svg`));
28
+ const [prefix, ...rest] = id.split('-');
29
+ const name = formatPascalCase(rest.length > 0 ? rest.join('-') : prefix);
30
+ const realmFolder = REALM[prefix?.toUpperCase() as keyof typeof REALM];
29
31
 
32
+ const componentPath: string = realmFolder
33
+ ? `../assets/svg/icons/realm/${realmFolder}/Icon${formatPascalCase(prefix)}${name}.svg`
34
+ : `../assets/svg/icons/Icon${name}.svg`;
35
+
36
+ const component = defineAsyncComponent(() => import(componentPath));
30
37
  innerSVG.value = markRaw(component);
31
38
  },
32
39
  { immediate: true }
@@ -46,13 +53,16 @@
46
53
  </template>
47
54
 
48
55
  <style>
49
- .tide-icon svg {
56
+ .tide-icon {
50
57
  width: 1.5rem;
51
58
  height: 1.5rem;
52
59
  }
53
-
54
- .tide-icon.small svg {
60
+ .tide-icon.small {
55
61
  width: 1.25rem;
56
62
  height: 1.25rem;
57
63
  }
64
+ .tide-icon svg {
65
+ width: 100%;
66
+ height: 100%;
67
+ }
58
68
  </style>
@@ -1,5 +1,5 @@
1
1
  <script lang="ts" setup>
2
- import { ref, watch } from 'vue';
2
+ import { computed } from 'vue';
3
3
 
4
4
  import TideIcon from '@/components/TideIcon.vue';
5
5
  import { CSS } from '@/types/Styles';
@@ -7,8 +7,6 @@
7
7
  import { SIZE } from '@/types/Size';
8
8
  import { formatNumber } from '@/utilities/format';
9
9
 
10
- const input = ref<HTMLInputElement>();
11
-
12
10
  type Props = {
13
11
  checked?: boolean;
14
12
  dataTrack?: string;
@@ -31,41 +29,7 @@
31
29
  number: undefined,
32
30
  });
33
31
 
34
- const checked = ref(props.checked || props.indeterminate);
35
- const indeterminate = ref(props.indeterminate);
36
-
37
- const handleClick = () => {
38
- checked.value = !checked.value;
39
- };
40
-
41
- watch(
42
- () => props.indeterminate,
43
- (newValue, oldValue) => {
44
- if (newValue !== oldValue || newValue !== indeterminate.value) {
45
- if (input.value) {
46
- indeterminate.value = newValue;
47
- input.value.indeterminate = indeterminate.value;
48
-
49
- if (indeterminate.value === true) {
50
- checked.value = true;
51
- }
52
-
53
- input.value.checked = checked.value;
54
- }
55
- }
56
- }
57
- );
58
-
59
- watch(
60
- () => props.checked,
61
- (newValue, oldValue) => {
62
- if (newValue !== oldValue || newValue !== checked.value) {
63
- checked.value = newValue;
64
- }
65
- }
66
- );
67
-
68
- defineExpose({ checked, indeterminate });
32
+ const isChecked = computed(() => props.checked || props.indeterminate);
69
33
  </script>
70
34
 
71
35
  <template>
@@ -76,16 +40,16 @@
76
40
  CSS.AXIS2.CENTER,
77
41
  CSS.GAP.HALF,
78
42
  CSS.FONT.SIZE.FOURTEEN,
79
- disabled && 'disabled',
80
- disabled ? CSS.CURSOR.NOT_ALLOWED : CSS.CURSOR.POINTER,
43
+ disabled ? ['disabled', CSS.POINTER_EVENTS.OFF] : CSS.CURSOR.POINTER,
81
44
  ]"
82
45
  >
83
46
  <input
84
- :checked="checked"
47
+ :checked="isChecked"
85
48
  :class="[CSS.DISPLAY.NONE]"
86
49
  :disabled="props.disabled"
87
50
  :name="props.name"
88
51
  ref="input"
52
+ @click.prevent
89
53
  :id="props.inputId"
90
54
  type="checkbox"
91
55
  />
@@ -99,25 +63,24 @@
99
63
  CSS.AXIS2.CENTER,
100
64
  CSS.FLEX.SHRINK.OFF,
101
65
  CSS.BORDER.FULL.ONE,
102
- checked ? [CSS.BORDER.COLOR.HIGH, CSS.BG.SECONDARY] : [CSS.BORDER.COLOR.DEFAULT, CSS.BG.SURFACE.DEFAULT],
66
+ isChecked ? [CSS.BORDER.COLOR.HIGH, CSS.BG.SECONDARY] : [CSS.BORDER.COLOR.DEFAULT, CSS.BG.SURFACE.DEFAULT],
103
67
  CSS.BORDER.RADIUS.QUARTER,
104
- checked && 'checked',
68
+ isChecked && 'checked',
105
69
  disabled ? CSS.CURSOR.NOT_ALLOWED : CSS.CURSOR.POINTER,
106
70
  ]"
107
- @click="handleClick"
108
71
  >
109
72
  <TideIcon
110
73
  :class="[CSS.FONT.COLOR.SECONDARY]"
111
- :icon="indeterminate ? ICON.REMOVE : ICON.CHECK"
74
+ :icon="props.indeterminate ? ICON.REMOVE : ICON.CHECK"
112
75
  :size="SIZE.SMALL"
113
- v-if="checked || indeterminate"
76
+ v-if="isChecked"
114
77
  />
115
78
  </div>
116
79
 
117
80
  <label
118
81
  :class="[CSS.DISPLAY.FLEX, CSS.GAP.HALF, disabled ? CSS.CURSOR.NOT_ALLOWED : CSS.CURSOR.POINTER]"
119
82
  :for="props.inputId"
120
- @click.prevent="checked = !checked"
83
+ @click.prevent
121
84
  v-if="label"
122
85
  >
123
86
  <span>{{ label }}</span>
@@ -1,32 +1,95 @@
1
+ import { action } from '@storybook/addon-actions';
2
+
1
3
  import TideCard from '@/components/TideCard.vue';
2
- import { dataTrack, parameters } from '@/utilities/storybook';
4
+ import { ICON } from '@/types/Icon';
5
+ import { POSITION_CARD_ICON as STANDARD_POSITION_CARD_ICON, TYPE_CARD as STANDARD_TYPE_CARD } from '@/types/Card';
6
+ import { argTypeBooleanUnrequired, click, doSomething } from '@/utilities/storybook';
7
+ import { parameters, prependNoneAsUndefined, formatArgType } from '@/utilities/storybook';
8
+
9
+ const TYPE_CARD = prependNoneAsUndefined(STANDARD_TYPE_CARD);
10
+ const POSITION_CARD_ICON = prependNoneAsUndefined(STANDARD_POSITION_CARD_ICON);
11
+ const CARD_ICON = prependNoneAsUndefined(ICON);
3
12
 
4
13
  const render = (args: any) => ({
5
14
  components: { TideCard },
15
+ methods: {
16
+ doSomething,
17
+ handleClick: (event: Event) => {
18
+ action('TideCard clicked')(event);
19
+
20
+ try {
21
+ const buttonClick = eval(args.click);
22
+
23
+ if (buttonClick) {
24
+ buttonClick();
25
+ }
26
+ } catch {
27
+ alert('Please specify a valid handler in the "click" control.');
28
+ }
29
+ },
30
+ },
6
31
  setup: () => ({ args }),
7
- template: `<TideCard class="tide-display-inline-block tide-padding-1">{{ args.default }}</TideCard>`,
32
+ template: `<TideCard @click="handleClick" v-bind="args" />`,
8
33
  });
9
34
 
10
35
  export default {
11
36
  argTypes: {
12
- class: {
37
+ click: {
38
+ ...click,
39
+ },
40
+ description: {
41
+ control: 'text',
42
+ description: 'Optional description text displayed below the heading.',
13
43
  table: {
14
- disable: true,
44
+ defaultValue: { summary: 'None' },
45
+ type: { summary: 'string' },
15
46
  },
16
47
  },
17
- dataTrack,
18
- default: {
48
+ heading: {
19
49
  control: 'text',
20
- description: 'Card content',
50
+ description: 'The main heading of the card.',
51
+ table: {
52
+ defaultValue: { summary: 'None' },
53
+ type: { summary: 'string' },
54
+ },
55
+ },
56
+ icon: {
57
+ ...formatArgType({ CARD_ICON }),
58
+ description: 'Optional icon displayed on the card.',
21
59
  table: {
22
60
  defaultValue: { summary: 'None' },
23
- type: { summary: 'HTML' },
61
+ type: { summary: 'Icon' },
62
+ },
63
+ },
64
+ iconPosition: {
65
+ ...formatArgType({ POSITION_CARD_ICON }),
66
+ description: 'Position of the icon relative to the content.',
67
+ table: {
68
+ defaultValue: { summary: 'LEFT' },
69
+ type: { summary: 'CardIconPosition' },
70
+ },
71
+ },
72
+ selected: {
73
+ ...argTypeBooleanUnrequired,
74
+ description: 'Determines whether the Card is selected (for selectable cards).',
75
+ },
76
+ type: {
77
+ ...formatArgType({ TYPE_CARD }),
78
+ description: 'Type of the card.',
79
+ table: {
80
+ defaultValue: { summary: 'INFORMATIONAL' },
81
+ type: { summary: 'CardType' },
24
82
  },
25
83
  },
26
84
  },
27
85
  args: {
28
- dataTrack: '',
29
- default: 'Demo',
86
+ click: 'doSomething',
87
+ description: '',
88
+ heading: 'Demo',
89
+ icon: CARD_ICON.None,
90
+ iconPosition: POSITION_CARD_ICON.None,
91
+ selected: undefined,
92
+ type: TYPE_CARD.None,
30
93
  },
31
94
  component: TideCard,
32
95
  parameters,
@@ -1,16 +1,27 @@
1
1
  import { action } from '@storybook/addon-actions';
2
2
 
3
3
  import TideInputCheckbox from '@/components/TideInputCheckbox.vue';
4
- import { argTypeBooleanUnrequired, dataTrack, parameters } from '@/utilities/storybook';
4
+ import { argTypeBooleanUnrequired, click, dataTrack, doSomething, parameters } from '@/utilities/storybook';
5
5
 
6
6
  const render = (args: any, context: any) => ({
7
7
  components: { TideInputCheckbox },
8
8
  methods: {
9
+ doSomething,
9
10
  handleClick: (event: Event) => {
10
11
  const input = context.canvasElement.querySelector('input');
11
12
 
12
- action('TideInputCheckbox toggled')(event);
13
- context.updateArgs({ ...args, checked: input.checked === true, indeterminate: undefined });
13
+ action('TideInputCheckbox clicked')(event);
14
+ context.updateArgs({ ...args, checked: !input.checked === true, indeterminate: undefined });
15
+
16
+ try {
17
+ const buttonClick = eval(args.click);
18
+
19
+ if (buttonClick) {
20
+ buttonClick();
21
+ }
22
+ } catch {
23
+ alert('Please specify a valid handler in the "click" control.');
24
+ }
14
25
  },
15
26
  },
16
27
  setup: () => ({ args }),
@@ -23,6 +34,9 @@ export default {
23
34
  ...argTypeBooleanUnrequired,
24
35
  description: 'Determines whether Checkbox is checked or unchecked',
25
36
  },
37
+ click: {
38
+ ...click,
39
+ },
26
40
  dataTrack,
27
41
  disabled: {
28
42
  ...argTypeBooleanUnrequired,
@@ -68,6 +82,7 @@ export default {
68
82
  },
69
83
  args: {
70
84
  checked: undefined,
85
+ click: 'doSomething',
71
86
  dataTrack: '',
72
87
  disabled: undefined,
73
88
  indeterminate: undefined,
@@ -0,0 +1,14 @@
1
+ export const TYPE_CARD = {
2
+ ACTIONABLE: 'action',
3
+ INFORMATIONAL: 'informational',
4
+ SELECTABLE: 'select',
5
+ } as const;
6
+
7
+ export type CardType = (typeof TYPE_CARD)[keyof typeof TYPE_CARD];
8
+
9
+ export const POSITION_CARD_ICON = {
10
+ LEFT: 'left',
11
+ TOP: 'top',
12
+ } as const;
13
+
14
+ export type CardIconPosition = (typeof POSITION_CARD_ICON)[keyof typeof POSITION_CARD_ICON];
package/src/types/Icon.ts CHANGED
@@ -1,3 +1,5 @@
1
+ import type { RealmKey } from '@/types/Realm';
2
+
1
3
  export const ICON = {
2
4
  ACCOUNT_BALANCE: 'account-balance',
3
5
  ADD: 'add',
@@ -5,10 +7,12 @@ export const ICON = {
5
7
  ALIGN_SPACE: 'align-space',
6
8
  APPLE_PAY: 'apple-pay',
7
9
  ARROW_BACK: 'arrow-back',
10
+ ARROW_CYCLE: 'arrow-cycle',
8
11
  ARROW_FORWARD: 'arrow-forward',
9
12
  ARROW_RIGHT: 'arrow-right',
10
13
  ASSIGNMENT: 'assignment',
11
14
  AWARD_STAR: 'award-star',
15
+ BED: 'bed',
12
16
  BOOKMARK: 'bookmark',
13
17
  CALENDAR_MONTH: 'calendar-month',
14
18
  CALL: 'call',
@@ -17,11 +21,11 @@ export const ICON = {
17
21
  CHEVRON_RIGHT: 'chevron-right',
18
22
  CLEAR: 'clear',
19
23
  CLOSE: 'close',
20
- CYCLE: 'cycle',
21
24
  DELETE: 'delete',
22
25
  DIAMOND: 'diamond',
23
26
  DRAFT: 'draft',
24
27
  EDIT: 'edit',
28
+ ENGINE: 'engine',
25
29
  ERROR: 'error',
26
30
  EXPAND_CONTENT: 'expand-content',
27
31
  EXPAND_LESS: 'expand-less',
@@ -33,6 +37,7 @@ export const ICON = {
33
37
  FORMAT_ITALIC: 'format-italic',
34
38
  FORMAT_LIST_BULLETED: 'format-list-bulleted',
35
39
  FORUM: 'forum',
40
+ GAS: 'gas',
36
41
  GAVEL: 'gavel',
37
42
  GOOGLE: 'google',
38
43
  GOOGLE_PAY: 'google-pay',
@@ -44,6 +49,7 @@ export const ICON = {
44
49
  INSTAGRAM: 'instagram',
45
50
  IOS_SHARE: 'ios-share',
46
51
  LAYOUT: 'layout',
52
+ LEVELLING_JACK: 'levelling-jack',
47
53
  LINKED_IN: 'linked in',
48
54
  LOCAL_SHIPPING: 'local-shipping',
49
55
  LOCK: 'lock',
@@ -51,6 +57,7 @@ export const ICON = {
51
57
  MENU: 'menu',
52
58
  MORE_HORIZ: 'more-horiz',
53
59
  NOTIFICATIONS: 'notifications',
60
+ ODOMETER: 'odometer',
54
61
  OPEN_IN_NEW: 'open-in-new',
55
62
  PALETTE: 'palette',
56
63
  PAYPAL: 'paypal',
@@ -58,6 +65,7 @@ export const ICON = {
58
65
  PHOTO_CAMERA: 'photo-camera',
59
66
  PINTEREST: 'pinterest',
60
67
  PLAY_ARROW: 'play-arrow',
68
+ POWER_OFF: 'power-off',
61
69
  REMOVE: 'remove',
62
70
  ROUNDED_CORNERS: 'rounded-corners',
63
71
  RULER: 'ruler',
@@ -66,22 +74,46 @@ export const ICON = {
66
74
  SELL: 'sell',
67
75
  SHARE: 'share',
68
76
  SHOPPING_CART: 'shopping-cart',
77
+ SLEEPS: 'sleeps',
69
78
  SMS: 'sms',
79
+ SNOWFLAKE: 'snowflake',
70
80
  STAR: 'star',
71
81
  SWAP_VERT: 'swap-vert',
72
82
  THREE_D_ROTATION: 'three-d-rotation',
73
83
  TROPHY: 'trophy',
74
84
  TUNE: 'tune',
75
85
  TWITTER: 'twitter',
86
+ UMBRELLA: 'umbrella',
76
87
  VIDEOCAM: 'videocam',
77
88
  VIEW_IN_AR: 'view-in-ar',
78
89
  VISIBILITY: 'visibility',
79
90
  VOLUME_OFF: 'volume-off',
80
91
  VOLUME_ON: 'volume-on',
81
92
  WARNING: 'warning',
93
+ WATER: 'water',
82
94
  WEIGHT: 'weight',
83
95
  WIDTH: 'width',
84
96
  YOUTUBE: 'youtube',
85
97
  } as const;
86
98
 
87
- export type Icon = (typeof ICON)[keyof typeof ICON];
99
+ export const ICON_REALM = {
100
+ RV: {
101
+ CLASS_A: 'rv-class-a',
102
+ CLASS_B: 'rv-class-b',
103
+ CLASS_C: 'rv-class-c',
104
+ FIFTH_WHEEL: 'rv-fifth-wheel',
105
+ FISH_HOUSE: 'rv-fish-house',
106
+ PARK_MODEL: 'rv-park-model',
107
+ POP_UP_CAMPER: 'rv-pop-up-camper',
108
+ TRAVEL_TRAILER: 'rv-travel-trailer',
109
+ TRUCK_CAMPER: 'rv-truck-camper',
110
+ },
111
+ } as const;
112
+
113
+ type RealmKeysWithIcons = Extract<RealmKey, keyof typeof ICON_REALM>;
114
+ type RealmIcon = {
115
+ [RealmKey in RealmKeysWithIcons]: (typeof ICON_REALM)[RealmKey][keyof (typeof ICON_REALM)[RealmKey]];
116
+ }[RealmKeysWithIcons];
117
+
118
+ export type GlobalIcon = (typeof ICON)[keyof typeof ICON];
119
+ export type Icon = GlobalIcon | RealmIcon;
@@ -10,4 +10,5 @@ export const REALM = {
10
10
  TRUCK: 'truck',
11
11
  } as const;
12
12
 
13
- export type Realm = (typeof REALM)[keyof typeof REALM];
13
+ export type RealmKey = keyof typeof REALM;
14
+ export type Realm = (typeof REALM)[RealmKey];
@@ -1,2 +0,0 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),n={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},o=e.createElementVNode("path",{d:"M5.5 17v-7h2v7h-2Zm6 0v-7h2v7h-2Zm-9 4v-2h20v2h-20Zm15-4v-7h2v7h-2Zm-15-9V6l10-5 10 5v2h-20Zm4.45-2h11.1L12.5 3.25 6.95 6Z"},null,-1),c=[o];function t(h,v){return e.openBlock(),e.createElementBlock("svg",n,c)}const r={render:t};exports.default=r;exports.render=t;
2
- //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSWNvbkFjY291bnRCYWxhbmNlLTBhNDMwZDE5LmNqcyIsInNvdXJjZXMiOlsiLi4vc3JjL2Fzc2V0cy9zdmcvaWNvbnMvSWNvbkFjY291bnRCYWxhbmNlLnN2ZyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjcmVhdGVFbGVtZW50Vk5vZGUgYXMgX2NyZWF0ZUVsZW1lbnRWTm9kZSwgb3BlbkJsb2NrIGFzIF9vcGVuQmxvY2ssIGNyZWF0ZUVsZW1lbnRCbG9jayBhcyBfY3JlYXRlRWxlbWVudEJsb2NrIH0gZnJvbSBcInZ1ZVwiXG5cbmNvbnN0IF9ob2lzdGVkXzEgPSB7XG4gIHhtbG5zOiBcImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCIsXG4gIHZpZXdCb3g6IFwiMCAwIDI0IDI0XCJcbn1cbmNvbnN0IF9ob2lzdGVkXzIgPSAvKiNfX1BVUkVfXyovX2NyZWF0ZUVsZW1lbnRWTm9kZShcInBhdGhcIiwgeyBkOiBcIk01LjUgMTd2LTdoMnY3aC0yWm02IDB2LTdoMnY3aC0yWm0tOSA0di0yaDIwdjJoLTIwWm0xNS00di03aDJ2N2gtMlptLTE1LTlWNmwxMC01IDEwIDV2MmgtMjBabTQuNDUtMmgxMS4xTDEyLjUgMy4yNSA2Ljk1IDZaXCIgfSwgbnVsbCwgLTEpXG5jb25zdCBfaG9pc3RlZF8zID0gW1xuICBfaG9pc3RlZF8yXG5dXG5cbmV4cG9ydCBmdW5jdGlvbiByZW5kZXIoX2N0eCwgX2NhY2hlKSB7XG4gIHJldHVybiAoX29wZW5CbG9jaygpLCBfY3JlYXRlRWxlbWVudEJsb2NrKFwic3ZnXCIsIF9ob2lzdGVkXzEsIF9ob2lzdGVkXzMpKVxufVxuZXhwb3J0IGRlZmF1bHQgeyByZW5kZXI6IHJlbmRlciB9Il0sIm5hbWVzIjpbIl9ob2lzdGVkXzEiLCJfaG9pc3RlZF8yIiwiX2NyZWF0ZUVsZW1lbnRWTm9kZSIsIl9ob2lzdGVkXzMiLCJyZW5kZXIiLCJfY3R4IiwiX2NhY2hlIiwiX29wZW5CbG9jayIsIl9jcmVhdGVFbGVtZW50QmxvY2siLCJJY29uQWNjb3VudEJhbGFuY2UiXSwibWFwcGluZ3MiOiJ1R0FFTUEsRUFBYSxDQUNqQixNQUFPLDZCQUNQLFFBQVMsV0FDWCxFQUNNQyxFQUEwQkMsRUFBQUEsbUJBQW9CLE9BQVEsQ0FBRSxFQUFHLDhIQUFnSSxLQUFNLEVBQUUsRUFDbk1DLEVBQWEsQ0FDakJGLENBQ0YsRUFFTyxTQUFTRyxFQUFPQyxFQUFNQyxFQUFRLENBQ25DLE9BQVFDLEVBQUFBLFVBQVksRUFBRUMsRUFBbUIsbUJBQUMsTUFBT1IsRUFBWUcsQ0FBVSxDQUN6RSxDQUNBLE1BQWVNLEVBQUEsQ0FBRSxPQUFRTCxDQUFNIn0=