@westpac/ui 0.7.1 → 0.9.0

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 (412) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/assets/icons/filled/exit-filled.svg +3 -3
  3. package/assets/icons/outlined/exit-outlined.svg +3 -3
  4. package/dist/component-type.json +1 -1
  5. package/dist/components/accordion/components/accordion-item/accordion-item.styles.d.ts +2 -0
  6. package/dist/components/accordion/components/accordion-item/accordion-item.styles.js +2 -1
  7. package/dist/components/alert/alert.styles.js +4 -4
  8. package/dist/components/badge/badge.styles.js +1 -1
  9. package/dist/components/breadcrumb/components/breadcrumb-item/breadcrumb-item.component.js +1 -1
  10. package/dist/components/button/button.styles.js +3 -3
  11. package/dist/components/button-dropdown/components/panel/panel.styles.js +1 -1
  12. package/dist/components/compacta/compacta.styles.js +4 -4
  13. package/dist/components/error-message/error-message.styles.js +2 -2
  14. package/dist/components/form/components/form-group/form-group.styles.d.ts +1 -1
  15. package/dist/components/form/components/form-group/form-group.styles.js +1 -1
  16. package/dist/components/form/form.component.d.ts +1 -1
  17. package/dist/components/form/form.component.js +1 -2
  18. package/dist/components/form/form.stories.d.ts +2 -2
  19. package/dist/components/form/form.types.d.ts +0 -4
  20. package/dist/components/form-hint/form-hint.styles.d.ts +1 -1
  21. package/dist/components/form-hint/form-hint.styles.js +1 -1
  22. package/dist/components/form-label/form-label.styles.d.ts +1 -1
  23. package/dist/components/form-label/form-label.styles.js +1 -1
  24. package/dist/components/icon/components/exit-icon.js +2 -2
  25. package/dist/components/input-field/components/add-ons/components/icon-add-on/icon-add-on.styles.js +6 -6
  26. package/dist/components/input-field/components/add-ons/components/text-add-on/text-add-on.styles.js +5 -5
  27. package/dist/components/list/components/item/item.styles.js +4 -4
  28. package/dist/components/modal/components/dialog/dialog.styles.js +1 -1
  29. package/dist/components/pagination/components/pagination-item/pagination-item.styles.d.ts +1 -1
  30. package/dist/components/pagination/components/pagination-item/pagination-item.styles.js +1 -1
  31. package/dist/components/panel/panel.styles.js +1 -1
  32. package/dist/components/pictogram/components/decorative/wbc-bank-card-pictogram.js +1 -0
  33. package/dist/components/pictogram/components/informative/accessibility-pictogram.js +1 -0
  34. package/dist/components/pictogram/components/informative/accounts-pictogram.js +1 -0
  35. package/dist/components/pictogram/components/informative/aeroplane-pictogram.js +1 -0
  36. package/dist/components/pictogram/components/informative/arrow-down-pictogram.js +1 -0
  37. package/dist/components/pictogram/components/informative/arrow-left-pictogram.js +1 -0
  38. package/dist/components/pictogram/components/informative/arrow-right-pictogram.js +1 -0
  39. package/dist/components/pictogram/components/informative/arrow-up-pictogram.js +1 -0
  40. package/dist/components/pictogram/components/informative/arrows-passing-pictogram.js +1 -0
  41. package/dist/components/pictogram/components/informative/atm-pictogram.js +1 -0
  42. package/dist/components/pictogram/components/informative/australia-pictogram.js +1 -0
  43. package/dist/components/pictogram/components/informative/bank-card-locked-pictogram.js +1 -0
  44. package/dist/components/pictogram/components/informative/bank-card-pictogram.js +1 -0
  45. package/dist/components/pictogram/components/informative/bank-pictogram.js +1 -0
  46. package/dist/components/pictogram/components/informative/birth-certificate-pictogram.js +1 -0
  47. package/dist/components/pictogram/components/informative/building-pictogram.js +1 -0
  48. package/dist/components/pictogram/components/informative/buoy-pictogram.js +1 -0
  49. package/dist/components/pictogram/components/informative/bus-pictogram.js +1 -0
  50. package/dist/components/pictogram/components/informative/business-person-pictogram.js +1 -0
  51. package/dist/components/pictogram/components/informative/calculator-pictogram.js +1 -0
  52. package/dist/components/pictogram/components/informative/calendar-pictogram.js +1 -0
  53. package/dist/components/pictogram/components/informative/car-pictogram.js +1 -0
  54. package/dist/components/pictogram/components/informative/cash-pictogram.js +1 -0
  55. package/dist/components/pictogram/components/informative/celebration-pictogram.js +1 -0
  56. package/dist/components/pictogram/components/informative/chat-pictogram.js +1 -0
  57. package/dist/components/pictogram/components/informative/clock-pictogram.js +1 -0
  58. package/dist/components/pictogram/components/informative/coffee-pictogram.js +1 -0
  59. package/dist/components/pictogram/components/informative/coins-pictogram.js +1 -0
  60. package/dist/components/pictogram/components/informative/compass-pictogram.js +1 -0
  61. package/dist/components/pictogram/components/informative/customer-profile-pictogram.js +1 -0
  62. package/dist/components/pictogram/components/informative/desktop-computer-pictogram.js +1 -0
  63. package/dist/components/pictogram/components/informative/document-and-pen-pictogram.js +1 -0
  64. package/dist/components/pictogram/components/informative/dollar-sign-pictogram.js +1 -0
  65. package/dist/components/pictogram/components/informative/drivers-licence-pictogram.js +1 -0
  66. package/dist/components/pictogram/components/informative/education-pictogram.js +1 -0
  67. package/dist/components/pictogram/components/informative/eftpos-pictogram.js +1 -0
  68. package/dist/components/pictogram/components/informative/envelope-email-pictogram.js +1 -0
  69. package/dist/components/pictogram/components/informative/envelope-printed-pictogram.js +1 -0
  70. package/dist/components/pictogram/components/informative/face-happy-pictogram.js +1 -0
  71. package/dist/components/pictogram/components/informative/face-unhappy-pictogram.js +1 -0
  72. package/dist/components/pictogram/components/informative/face-unsure-pictogram.js +1 -0
  73. package/dist/components/pictogram/components/informative/finger-motion-pictogram.js +1 -0
  74. package/dist/components/pictogram/components/informative/fingerprint-pictogram.js +1 -0
  75. package/dist/components/pictogram/components/informative/football-pictogram.js +1 -0
  76. package/dist/components/pictogram/components/informative/fork-knife-pictogram.js +1 -0
  77. package/dist/components/pictogram/components/informative/generic-document-pictogram.js +1 -0
  78. package/dist/components/pictogram/components/informative/gift-pictogram.js +1 -0
  79. package/dist/components/pictogram/components/informative/globe-australia-pictogram.js +1 -0
  80. package/dist/components/pictogram/components/informative/globe-pictogram.js +1 -0
  81. package/dist/components/pictogram/components/informative/graph-decreasing-pictogram.js +1 -0
  82. package/dist/components/pictogram/components/informative/graph-increasing-pictogram.js +1 -0
  83. package/dist/components/pictogram/components/informative/gym-pictogram.js +1 -0
  84. package/dist/components/pictogram/components/informative/headset-pictogram.js +1 -0
  85. package/dist/components/pictogram/components/informative/heart-pictogram.js +1 -0
  86. package/dist/components/pictogram/components/informative/house-pictogram.js +1 -0
  87. package/dist/components/pictogram/components/informative/light-bulb-pictogram.js +1 -0
  88. package/dist/components/pictogram/components/informative/loop-pictogram.js +1 -0
  89. package/dist/components/pictogram/components/informative/medicare-card-pictogram.js +1 -0
  90. package/dist/components/pictogram/components/informative/mobile-device-pictogram.js +1 -0
  91. package/dist/components/pictogram/components/informative/money-in-pictogram.js +1 -0
  92. package/dist/components/pictogram/components/informative/money-out-pictogram.js +1 -0
  93. package/dist/components/pictogram/components/informative/movie-tickets-pictogram.js +1 -0
  94. package/dist/components/pictogram/components/informative/nest-egg-pictogram.js +1 -0
  95. package/dist/components/pictogram/components/informative/noodles-pictogram.js +1 -0
  96. package/dist/components/pictogram/components/informative/number-1-pictogram.js +1 -0
  97. package/dist/components/pictogram/components/informative/number-2-pictogram.js +1 -0
  98. package/dist/components/pictogram/components/informative/number-3-pictogram.js +1 -0
  99. package/dist/components/pictogram/components/informative/number-4-pictogram.js +1 -0
  100. package/dist/components/pictogram/components/informative/number-5-pictogram.js +1 -0
  101. package/dist/components/pictogram/components/informative/padlock-locked-pictogram.js +1 -0
  102. package/dist/components/pictogram/components/informative/padlock-unlocked-pictogram.js +1 -0
  103. package/dist/components/pictogram/components/informative/passport-pictogram.js +1 -0
  104. package/dist/components/pictogram/components/informative/percent-sign-pictogram.js +1 -0
  105. package/dist/components/pictogram/components/informative/person-pictogram.js +1 -0
  106. package/dist/components/pictogram/components/informative/piggy-bank-pictogram.js +1 -0
  107. package/dist/components/pictogram/components/informative/pizza-pictogram.js +1 -0
  108. package/dist/components/pictogram/components/informative/plant-pictogram.js +1 -0
  109. package/dist/components/pictogram/components/informative/search-pictogram.js +1 -0
  110. package/dist/components/pictogram/components/informative/secure-pictogram.js +1 -0
  111. package/dist/components/pictogram/components/informative/shop-pictogram.js +1 -0
  112. package/dist/components/pictogram/components/informative/shopping-pictogram.js +1 -0
  113. package/dist/components/pictogram/components/informative/star-pictogram.js +1 -0
  114. package/dist/components/pictogram/components/informative/stopwatch-pictogram.js +1 -0
  115. package/dist/components/pictogram/components/informative/tax-document-pictogram.js +1 -0
  116. package/dist/components/pictogram/components/informative/telephone-call-pictogram.js +1 -0
  117. package/dist/components/pictogram/components/informative/thumbs-up-pictogram.js +1 -0
  118. package/dist/components/pictogram/components/informative/tick-pictogram.js +1 -0
  119. package/dist/components/pictogram/components/informative/tools-pictogram.js +1 -0
  120. package/dist/components/pictogram/components/informative/tractor-pictogram.js +1 -0
  121. package/dist/components/pictogram/components/informative/truck-pictogram.js +1 -0
  122. package/dist/components/pictogram/components/informative/umbrella-pictogram.js +1 -0
  123. package/dist/components/pictogram/components/informative/unsecure-pictogram.js +1 -0
  124. package/dist/components/pictogram/components/informative/wallet-pictogram.js +1 -0
  125. package/dist/components/pictogram/components/informative/wearables-pictogram.js +1 -0
  126. package/dist/components/pictogram/pictogram.component.js +1 -0
  127. package/dist/components/popover/components/panel/panel.component.d.ts +1 -1
  128. package/dist/components/popover/components/panel/panel.component.js +39 -5
  129. package/dist/components/popover/components/panel/panel.styles.js +5 -5
  130. package/dist/components/popover/components/panel/panel.types.d.ts +12 -2
  131. package/dist/components/popover/popover.component.d.ts +4 -0
  132. package/dist/components/popover/popover.component.js +12 -6
  133. package/dist/components/popover/popover.hooks.d.ts +3 -0
  134. package/dist/components/popover/popover.hooks.js +37 -0
  135. package/dist/components/popover/popover.stories.d.ts +9 -5
  136. package/dist/components/popover/popover.types.d.ts +1 -1
  137. package/dist/components/progress-bar/progress-bar.styles.js +2 -2
  138. package/dist/components/repeater/repeater.styles.d.ts +6 -0
  139. package/dist/components/repeater/repeater.styles.js +10 -7
  140. package/dist/components/switch/switch.styles.js +1 -1
  141. package/dist/components/table/components/row/row.styles.js +1 -1
  142. package/dist/components/tabs/components/tab/tab.styles.d.ts +1 -1
  143. package/dist/components/tabs/components/tab/tab.styles.js +4 -4
  144. package/dist/css/westpac-ui.css +551 -373
  145. package/dist/css/westpac-ui.min.css +551 -373
  146. package/dist/stories/foundation/spacing.stories.d.ts +15 -0
  147. package/dist/stories/foundation/typography.stories.d.ts +8 -0
  148. package/dist/tailwind/__mocks__/utils.constants.d.ts +73 -36
  149. package/dist/tailwind/__mocks__/utils.constants.js +73 -36
  150. package/dist/tailwind/constants/spacing.d.ts +2 -36
  151. package/dist/tailwind/constants/spacing.js +2 -1
  152. package/dist/tailwind/constants/typography.d.ts +4 -0
  153. package/dist/tailwind/constants/typography.js +4 -0
  154. package/dist/tailwind/tailwind-plugin.js +9 -1
  155. package/dist/tailwind/types/index.d.ts +0 -1
  156. package/dist/tailwind/types/index.js +0 -1
  157. package/dist/tailwind/utils/create-spacing.d.ts +2 -3
  158. package/dist/tailwind/utils/create-spacing.js +7 -7
  159. package/package.json +4 -2
  160. package/src/components/accordion/components/accordion-item/accordion-item.styles.ts +1 -0
  161. package/src/components/alert/alert.styles.ts +4 -4
  162. package/src/components/badge/badge.styles.ts +1 -1
  163. package/src/components/breadcrumb/components/breadcrumb-item/breadcrumb-item.component.tsx +1 -1
  164. package/src/components/button/button.styles.ts +3 -3
  165. package/src/components/button-dropdown/components/panel/panel.styles.ts +1 -2
  166. package/src/components/compacta/compacta.styles.ts +4 -4
  167. package/src/components/error-message/error-message.component.tsx +1 -7
  168. package/src/components/error-message/error-message.styles.ts +3 -2
  169. package/src/components/form/components/form-group/form-group.styles.ts +1 -1
  170. package/src/components/form/form.component.tsx +2 -2
  171. package/src/components/form/form.types.ts +0 -4
  172. package/src/components/form-hint/form-hint.styles.ts +1 -1
  173. package/src/components/form-label/form-label.styles.ts +1 -1
  174. package/src/components/icon/components/exit-icon.tsx +2 -2
  175. package/src/components/icon/index.ts +1 -0
  176. package/src/components/input-field/components/add-ons/components/icon-add-on/icon-add-on.styles.ts +16 -16
  177. package/src/components/input-field/components/add-ons/components/text-add-on/text-add-on.styles.ts +5 -5
  178. package/src/components/list/components/item/item.styles.ts +4 -4
  179. package/src/components/modal/components/dialog/dialog.styles.ts +1 -1
  180. package/src/components/pagination/components/pagination-item/pagination-item.styles.ts +1 -1
  181. package/src/components/panel/panel.styles.ts +1 -1
  182. package/src/components/pictogram/components/decorative/wbc-bank-card-pictogram.tsx +2 -0
  183. package/src/components/pictogram/components/informative/accessibility-pictogram.tsx +2 -0
  184. package/src/components/pictogram/components/informative/accounts-pictogram.tsx +2 -0
  185. package/src/components/pictogram/components/informative/aeroplane-pictogram.tsx +2 -0
  186. package/src/components/pictogram/components/informative/arrow-down-pictogram.tsx +2 -0
  187. package/src/components/pictogram/components/informative/arrow-left-pictogram.tsx +2 -0
  188. package/src/components/pictogram/components/informative/arrow-right-pictogram.tsx +2 -0
  189. package/src/components/pictogram/components/informative/arrow-up-pictogram.tsx +2 -0
  190. package/src/components/pictogram/components/informative/arrows-passing-pictogram.tsx +2 -0
  191. package/src/components/pictogram/components/informative/atm-pictogram.tsx +2 -0
  192. package/src/components/pictogram/components/informative/australia-pictogram.tsx +2 -0
  193. package/src/components/pictogram/components/informative/bank-card-locked-pictogram.tsx +2 -0
  194. package/src/components/pictogram/components/informative/bank-card-pictogram.tsx +2 -0
  195. package/src/components/pictogram/components/informative/bank-pictogram.tsx +2 -0
  196. package/src/components/pictogram/components/informative/birth-certificate-pictogram.tsx +2 -0
  197. package/src/components/pictogram/components/informative/building-pictogram.tsx +2 -0
  198. package/src/components/pictogram/components/informative/buoy-pictogram.tsx +2 -0
  199. package/src/components/pictogram/components/informative/bus-pictogram.tsx +2 -0
  200. package/src/components/pictogram/components/informative/business-person-pictogram.tsx +2 -0
  201. package/src/components/pictogram/components/informative/calculator-pictogram.tsx +2 -0
  202. package/src/components/pictogram/components/informative/calendar-pictogram.tsx +2 -0
  203. package/src/components/pictogram/components/informative/car-pictogram.tsx +2 -0
  204. package/src/components/pictogram/components/informative/cash-pictogram.tsx +2 -0
  205. package/src/components/pictogram/components/informative/celebration-pictogram.tsx +2 -0
  206. package/src/components/pictogram/components/informative/chat-pictogram.tsx +2 -0
  207. package/src/components/pictogram/components/informative/clock-pictogram.tsx +2 -0
  208. package/src/components/pictogram/components/informative/coffee-pictogram.tsx +2 -0
  209. package/src/components/pictogram/components/informative/coins-pictogram.tsx +2 -0
  210. package/src/components/pictogram/components/informative/compass-pictogram.tsx +2 -0
  211. package/src/components/pictogram/components/informative/customer-profile-pictogram.tsx +2 -0
  212. package/src/components/pictogram/components/informative/desktop-computer-pictogram.tsx +2 -0
  213. package/src/components/pictogram/components/informative/document-and-pen-pictogram.tsx +2 -0
  214. package/src/components/pictogram/components/informative/dollar-sign-pictogram.tsx +2 -0
  215. package/src/components/pictogram/components/informative/drivers-licence-pictogram.tsx +2 -0
  216. package/src/components/pictogram/components/informative/education-pictogram.tsx +2 -0
  217. package/src/components/pictogram/components/informative/eftpos-pictogram.tsx +2 -0
  218. package/src/components/pictogram/components/informative/envelope-email-pictogram.tsx +2 -0
  219. package/src/components/pictogram/components/informative/envelope-printed-pictogram.tsx +2 -0
  220. package/src/components/pictogram/components/informative/face-happy-pictogram.tsx +2 -0
  221. package/src/components/pictogram/components/informative/face-unhappy-pictogram.tsx +2 -0
  222. package/src/components/pictogram/components/informative/face-unsure-pictogram.tsx +2 -0
  223. package/src/components/pictogram/components/informative/finger-motion-pictogram.tsx +2 -0
  224. package/src/components/pictogram/components/informative/fingerprint-pictogram.tsx +2 -0
  225. package/src/components/pictogram/components/informative/football-pictogram.tsx +2 -0
  226. package/src/components/pictogram/components/informative/fork-knife-pictogram.tsx +2 -0
  227. package/src/components/pictogram/components/informative/generic-document-pictogram.tsx +2 -0
  228. package/src/components/pictogram/components/informative/gift-pictogram.tsx +2 -0
  229. package/src/components/pictogram/components/informative/globe-australia-pictogram.tsx +2 -0
  230. package/src/components/pictogram/components/informative/globe-pictogram.tsx +2 -0
  231. package/src/components/pictogram/components/informative/graph-decreasing-pictogram.tsx +2 -0
  232. package/src/components/pictogram/components/informative/graph-increasing-pictogram.tsx +2 -0
  233. package/src/components/pictogram/components/informative/gym-pictogram.tsx +2 -0
  234. package/src/components/pictogram/components/informative/headset-pictogram.tsx +2 -0
  235. package/src/components/pictogram/components/informative/heart-pictogram.tsx +2 -0
  236. package/src/components/pictogram/components/informative/house-pictogram.tsx +2 -0
  237. package/src/components/pictogram/components/informative/light-bulb-pictogram.tsx +2 -0
  238. package/src/components/pictogram/components/informative/loop-pictogram.tsx +2 -0
  239. package/src/components/pictogram/components/informative/medicare-card-pictogram.tsx +2 -0
  240. package/src/components/pictogram/components/informative/mobile-device-pictogram.tsx +2 -0
  241. package/src/components/pictogram/components/informative/money-in-pictogram.tsx +2 -0
  242. package/src/components/pictogram/components/informative/money-out-pictogram.tsx +2 -0
  243. package/src/components/pictogram/components/informative/movie-tickets-pictogram.tsx +2 -0
  244. package/src/components/pictogram/components/informative/nest-egg-pictogram.tsx +2 -0
  245. package/src/components/pictogram/components/informative/noodles-pictogram.tsx +2 -0
  246. package/src/components/pictogram/components/informative/number-1-pictogram.tsx +2 -0
  247. package/src/components/pictogram/components/informative/number-2-pictogram.tsx +2 -0
  248. package/src/components/pictogram/components/informative/number-3-pictogram.tsx +2 -0
  249. package/src/components/pictogram/components/informative/number-4-pictogram.tsx +2 -0
  250. package/src/components/pictogram/components/informative/number-5-pictogram.tsx +2 -0
  251. package/src/components/pictogram/components/informative/padlock-locked-pictogram.tsx +2 -0
  252. package/src/components/pictogram/components/informative/padlock-unlocked-pictogram.tsx +2 -0
  253. package/src/components/pictogram/components/informative/passport-pictogram.tsx +2 -0
  254. package/src/components/pictogram/components/informative/percent-sign-pictogram.tsx +2 -0
  255. package/src/components/pictogram/components/informative/person-pictogram.tsx +2 -0
  256. package/src/components/pictogram/components/informative/piggy-bank-pictogram.tsx +2 -0
  257. package/src/components/pictogram/components/informative/pizza-pictogram.tsx +2 -0
  258. package/src/components/pictogram/components/informative/plant-pictogram.tsx +2 -0
  259. package/src/components/pictogram/components/informative/search-pictogram.tsx +2 -0
  260. package/src/components/pictogram/components/informative/secure-pictogram.tsx +2 -0
  261. package/src/components/pictogram/components/informative/shop-pictogram.tsx +2 -0
  262. package/src/components/pictogram/components/informative/shopping-pictogram.tsx +2 -0
  263. package/src/components/pictogram/components/informative/star-pictogram.tsx +2 -0
  264. package/src/components/pictogram/components/informative/stopwatch-pictogram.tsx +2 -0
  265. package/src/components/pictogram/components/informative/tax-document-pictogram.tsx +2 -0
  266. package/src/components/pictogram/components/informative/telephone-call-pictogram.tsx +2 -0
  267. package/src/components/pictogram/components/informative/thumbs-up-pictogram.tsx +2 -0
  268. package/src/components/pictogram/components/informative/tick-pictogram.tsx +2 -0
  269. package/src/components/pictogram/components/informative/tools-pictogram.tsx +2 -0
  270. package/src/components/pictogram/components/informative/tractor-pictogram.tsx +2 -0
  271. package/src/components/pictogram/components/informative/truck-pictogram.tsx +2 -0
  272. package/src/components/pictogram/components/informative/umbrella-pictogram.tsx +2 -0
  273. package/src/components/pictogram/components/informative/unsecure-pictogram.tsx +2 -0
  274. package/src/components/pictogram/components/informative/wallet-pictogram.tsx +2 -0
  275. package/src/components/pictogram/components/informative/wearables-pictogram.tsx +2 -0
  276. package/src/components/pictogram/pictogram.component.tsx +2 -0
  277. package/src/components/popover/components/panel/panel.component.tsx +36 -6
  278. package/src/components/popover/components/panel/panel.styles.ts +5 -5
  279. package/src/components/popover/components/panel/panel.types.ts +13 -2
  280. package/src/components/popover/popover.component.tsx +13 -2
  281. package/src/components/popover/popover.hooks.tsx +56 -0
  282. package/src/components/popover/popover.types.ts +1 -1
  283. package/src/components/progress-bar/progress-bar.styles.ts +2 -2
  284. package/src/components/repeater/repeater.styles.ts +10 -7
  285. package/src/components/switch/switch.styles.ts +1 -1
  286. package/src/components/table/components/row/row.styles.ts +1 -1
  287. package/src/components/tabs/components/tab/tab.styles.ts +4 -4
  288. package/src/css/global.css +4 -2
  289. package/src/tailwind/__mocks__/utils.constants.ts +73 -36
  290. package/src/tailwind/constants/spacing.ts +2 -1
  291. package/src/tailwind/constants/typography.ts +4 -0
  292. package/src/tailwind/tailwind-plugin.ts +9 -0
  293. package/src/tailwind/types/index.ts +0 -1
  294. package/src/tailwind/utils/create-spacing.ts +9 -13
  295. package/.storybook/global.css +0 -108
  296. package/.storybook/main.ts +0 -33
  297. package/.storybook/manager.ts +0 -6
  298. package/.storybook/preview.tsx +0 -91
  299. package/.storybook/theme.ts +0 -9
  300. package/dist/components/accordion/accordion.stories.js +0 -139
  301. package/dist/components/alert/alert.stories.js +0 -144
  302. package/dist/components/autocomplete/autocomplete.stories.js +0 -219
  303. package/dist/components/badge/badge.stories.js +0 -118
  304. package/dist/components/breadcrumb/breadcrumb.stories.js +0 -30
  305. package/dist/components/breadcrumb/components/breadcrumb-item/breadcrumb-item.stories.js +0 -24
  306. package/dist/components/button/button.stories.js +0 -221
  307. package/dist/components/button-dropdown/button-dropdown.stories.js +0 -134
  308. package/dist/components/button-group/button-group.stories.js +0 -153
  309. package/dist/components/checkbox-group/checkbox-group.stories.js +0 -225
  310. package/dist/components/checkbox-group/components/checkbox/checkbox.stories.js +0 -42
  311. package/dist/components/circle/circle.stories.js +0 -17
  312. package/dist/components/collapsible/collapsible.stories.js +0 -43
  313. package/dist/components/compacta/compacta.stories.js +0 -52
  314. package/dist/components/date-picker/date-picker.stories.js +0 -112
  315. package/dist/components/field/field.stories.js +0 -37
  316. package/dist/components/flexi-cell/flexi-cell.stories.js +0 -759
  317. package/dist/components/form/form.stories.js +0 -103
  318. package/dist/components/grid/grid.stories.js +0 -82
  319. package/dist/components/icon/icon.stories.js +0 -147
  320. package/dist/components/input/input.stories.js +0 -56
  321. package/dist/components/input-field/input-field.scenarios.stories.js +0 -149
  322. package/dist/components/input-field/input-field.sizes.stories.js +0 -91
  323. package/dist/components/input-field/input-field.state.stories.js +0 -127
  324. package/dist/components/input-field/input-field.stories.js +0 -71
  325. package/dist/components/input-field/input-field.type.stories.js +0 -186
  326. package/dist/components/link/link.stories.js +0 -93
  327. package/dist/components/list/list.stories.js +0 -86
  328. package/dist/components/modal/modal.stories.js +0 -129
  329. package/dist/components/pagination/pagination.stories.js +0 -199
  330. package/dist/components/panel/panel.stories.js +0 -53
  331. package/dist/components/pictogram/pictogram.stories.js +0 -60
  332. package/dist/components/popover/popover.stories.js +0 -57
  333. package/dist/components/progress-bar/progress-bar.stories.js +0 -70
  334. package/dist/components/progress-rope/progress-rope.stories.js +0 -126
  335. package/dist/components/radio-group/components/radio/radio.stories.js +0 -40
  336. package/dist/components/radio-group/radio-group.stories.js +0 -215
  337. package/dist/components/repeater/repeater.stories.js +0 -29
  338. package/dist/components/select/select.stories.js +0 -74
  339. package/dist/components/selector/selector.stories.js +0 -512
  340. package/dist/components/skip-link/skip-link.stories.js +0 -29
  341. package/dist/components/switch/switch.stories.js +0 -67
  342. package/dist/components/symbol/symbol.stories.js +0 -113
  343. package/dist/components/table/table.stories.js +0 -66
  344. package/dist/components/tabs/tabs.stories.js +0 -95
  345. package/dist/components/textarea/textarea.stories.js +0 -44
  346. package/dist/components/visually-hidden/visually-hidden.stories.js +0 -17
  347. package/dist/components/well/well.stories.js +0 -44
  348. package/dist/stories/foundation/breakpoints.stories.js +0 -12
  349. package/dist/stories/foundation/colours.stories.js +0 -386
  350. package/dist/stories/foundation/theme.stories.js +0 -16
  351. package/dist/stories/foundation/typography.stories.js +0 -109
  352. package/dist/tailwind/types/theme.types.d.ts +0 -1
  353. package/dist/tailwind/types/theme.types.js +0 -1
  354. package/scaffold/component/scaffold.component.hbs +0 -12
  355. package/scaffold/component/scaffold.index.hbs +0 -2
  356. package/scaffold/component/scaffold.spec.hbs +0 -16
  357. package/scaffold/component/scaffold.stories.hbs +0 -23
  358. package/scaffold/component/scaffold.styles.hbs +0 -9
  359. package/scaffold/component/scaffold.types.hbs +0 -12
  360. package/src/components/accordion/accordion.stories.tsx +0 -144
  361. package/src/components/alert/alert.stories.tsx +0 -142
  362. package/src/components/autocomplete/autocomplete.stories.tsx +0 -184
  363. package/src/components/badge/badge.stories.tsx +0 -134
  364. package/src/components/breadcrumb/breadcrumb.stories.tsx +0 -32
  365. package/src/components/breadcrumb/components/breadcrumb-item/breadcrumb-item.stories.tsx +0 -33
  366. package/src/components/button/button.stories.tsx +0 -269
  367. package/src/components/button-dropdown/button-dropdown.stories.tsx +0 -220
  368. package/src/components/button-group/button-group.stories.tsx +0 -141
  369. package/src/components/checkbox-group/checkbox-group.stories.tsx +0 -212
  370. package/src/components/checkbox-group/components/checkbox/checkbox.stories.tsx +0 -46
  371. package/src/components/circle/circle.stories.tsx +0 -22
  372. package/src/components/collapsible/collapsible.stories.tsx +0 -94
  373. package/src/components/compacta/compacta.stories.tsx +0 -71
  374. package/src/components/date-picker/date-picker.stories.tsx +0 -139
  375. package/src/components/field/field.stories.tsx +0 -57
  376. package/src/components/flexi-cell/flexi-cell.stories.tsx +0 -792
  377. package/src/components/form/form.stories.tsx +0 -158
  378. package/src/components/grid/grid.stories.tsx +0 -106
  379. package/src/components/icon/icon.stories.tsx +0 -142
  380. package/src/components/input/input.stories.tsx +0 -70
  381. package/src/components/input-field/input-field.scenarios.stories.tsx +0 -174
  382. package/src/components/input-field/input-field.sizes.stories.tsx +0 -102
  383. package/src/components/input-field/input-field.state.stories.tsx +0 -148
  384. package/src/components/input-field/input-field.stories.tsx +0 -104
  385. package/src/components/input-field/input-field.type.stories.tsx +0 -236
  386. package/src/components/link/link.stories.tsx +0 -113
  387. package/src/components/list/list.stories.tsx +0 -121
  388. package/src/components/modal/modal.stories.tsx +0 -140
  389. package/src/components/pagination/pagination.stories.tsx +0 -174
  390. package/src/components/panel/panel.stories.tsx +0 -147
  391. package/src/components/pictogram/pictogram.stories.tsx +0 -50
  392. package/src/components/popover/popover.stories.tsx +0 -81
  393. package/src/components/progress-bar/progress-bar.stories.tsx +0 -85
  394. package/src/components/progress-rope/progress-rope.stories.tsx +0 -109
  395. package/src/components/radio-group/components/radio/radio.stories.tsx +0 -40
  396. package/src/components/radio-group/radio-group.stories.tsx +0 -199
  397. package/src/components/repeater/repeater.stories.tsx +0 -40
  398. package/src/components/select/select.stories.tsx +0 -88
  399. package/src/components/selector/selector.stories.tsx +0 -618
  400. package/src/components/skip-link/skip-link.stories.tsx +0 -55
  401. package/src/components/switch/switch.stories.tsx +0 -90
  402. package/src/components/symbol/symbol.stories.tsx +0 -131
  403. package/src/components/table/table.stories.tsx +0 -244
  404. package/src/components/tabs/tabs.stories.tsx +0 -111
  405. package/src/components/textarea/textarea.stories.tsx +0 -70
  406. package/src/components/visually-hidden/visually-hidden.stories.tsx +0 -25
  407. package/src/components/well/well.stories.tsx +0 -71
  408. package/src/stories/foundation/breakpoints.stories.tsx +0 -55
  409. package/src/stories/foundation/colours.stories.tsx +0 -380
  410. package/src/stories/foundation/theme.stories.tsx +0 -29
  411. package/src/stories/foundation/typography.stories.tsx +0 -93
  412. package/src/tailwind/types/theme.types.ts +0 -37
@@ -1,127 +0,0 @@
1
- import { SearchIcon } from '../icon/index.js';
2
- import { Button, Input, Select } from '../index.js';
3
- import { InputField } from './input-field.component.js';
4
- const meta = {
5
- title: 'Components/InputField/State',
6
- component: InputField,
7
- tags: [
8
- 'autodocs'
9
- ],
10
- decorators: [
11
- (Story)=>React.createElement(Story, null)
12
- ]
13
- };
14
- export default meta;
15
- export const InvalidWithErrorMessages = {
16
- args: {},
17
- render: ()=>{
18
- return React.createElement(React.Fragment, null, React.createElement(InputField, {
19
- label: "Text after",
20
- hint: "I am a hint",
21
- supportingText: "I am supporting text",
22
- errorMessage: "If there is an error it can go here",
23
- after: React.createElement(Button, null, "Check")
24
- }, React.createElement(Input, {
25
- invalid: true
26
- })), React.createElement(InputField, {
27
- label: "Text after",
28
- hint: "I am a hint",
29
- supportingText: "I am supporting text",
30
- errorMessage: [
31
- 'If there is an error it can go here',
32
- 'If there is another error it can go here'
33
- ],
34
- after: React.createElement(Button, null, "Check"),
35
- before: React.createElement(Button, null, "Check")
36
- }, React.createElement(Input, {
37
- invalid: true
38
- })), React.createElement(InputField, {
39
- label: "Text after",
40
- hint: "I am a hint",
41
- supportingText: "I am supporting text",
42
- errorMessage: "If there is an error it can go here",
43
- after: {
44
- icon: SearchIcon
45
- },
46
- before: {
47
- icon: SearchIcon
48
- }
49
- }, React.createElement(Input, {
50
- invalid: true
51
- })), React.createElement(InputField, {
52
- label: "Text after",
53
- hint: "I am a hint",
54
- supportingText: "I am supporting text",
55
- errorMessage: "If there is an error it can go here",
56
- after: "Text",
57
- before: "Text"
58
- }, React.createElement(Input, {
59
- invalid: true
60
- })), React.createElement(InputField, {
61
- label: "Text after",
62
- hint: "I am a hint",
63
- supportingText: "I am supporting text",
64
- errorMessage: "If there is an error it can go here",
65
- after: React.createElement(Select, {
66
- invalid: true
67
- }, React.createElement("option", null, "Select")),
68
- before: React.createElement(Select, {
69
- invalid: true
70
- }, React.createElement("option", null, "Select"))
71
- }, React.createElement(Input, {
72
- invalid: true
73
- })));
74
- }
75
- };
76
- export const InputFieldWithDisabledState = {
77
- args: {},
78
- render: ()=>{
79
- return React.createElement(React.Fragment, null, React.createElement(InputField, {
80
- label: "Text after",
81
- hint: "I am a hint",
82
- supportingText: "I am supporting text",
83
- after: {
84
- icon: SearchIcon
85
- },
86
- before: {
87
- icon: SearchIcon
88
- }
89
- }, React.createElement(Input, {
90
- disabled: true
91
- })), React.createElement(InputField, {
92
- label: "Text after",
93
- hint: "I am a hint",
94
- supportingText: "I am supporting text",
95
- before: "$AUD",
96
- after: "Text"
97
- }, React.createElement(Input, {
98
- disabled: true
99
- })));
100
- }
101
- };
102
- export const InputFieldWithReadOnlyState = {
103
- args: {},
104
- render: ()=>{
105
- return React.createElement(React.Fragment, null, React.createElement(InputField, {
106
- label: "Text after",
107
- hint: "I am a hint",
108
- supportingText: "I am supporting text",
109
- after: {
110
- icon: SearchIcon
111
- },
112
- before: {
113
- icon: SearchIcon
114
- }
115
- }, React.createElement(Input, {
116
- readOnly: true
117
- })), React.createElement(InputField, {
118
- label: "Text after",
119
- hint: "I am a hint",
120
- supportingText: "I am supporting text",
121
- before: "$AUD",
122
- after: "Text"
123
- }, React.createElement(Input, {
124
- readOnly: true
125
- })));
126
- }
127
- };
@@ -1,71 +0,0 @@
1
- import { Button, Input } from '../index.js';
2
- import { InputField } from './input-field.component.js';
3
- const meta = {
4
- title: 'Components/InputField',
5
- component: InputField,
6
- tags: [
7
- 'autodocs'
8
- ],
9
- decorators: [
10
- (Story)=>React.createElement(Story, null)
11
- ]
12
- };
13
- export default meta;
14
- export const Default = {
15
- args: {},
16
- render: ()=>{
17
- return React.createElement(InputField, {
18
- label: "Label",
19
- hint: "I am a hint",
20
- supportingText: "I am supporting text",
21
- after: React.createElement(Button, null, "Check")
22
- }, React.createElement(Input, null));
23
- }
24
- };
25
- export const AnotherDefault = {
26
- args: {},
27
- render: ()=>{
28
- return React.createElement(InputField, {
29
- label: "Label",
30
- hint: "I am a hint",
31
- supportingText: "I am supporting text"
32
- }, React.createElement(Input, null));
33
- }
34
- };
35
- export const SrOnlyLabel = {
36
- args: {},
37
- render: ()=>{
38
- return React.createElement(InputField, {
39
- label: "Label",
40
- hideLabel: true,
41
- hint: "I am a hint",
42
- supportingText: "I am supporting text",
43
- after: React.createElement(Button, null, "Check")
44
- }, React.createElement(Input, null));
45
- }
46
- };
47
- export const Combination = {
48
- args: {},
49
- render: ()=>{
50
- return React.createElement(InputField, {
51
- label: "Label",
52
- hint: "I am a hint",
53
- supportingText: "I am supporting text",
54
- after: React.createElement(Button, null, "Check"),
55
- before: "$AUD"
56
- }, React.createElement(Input, null));
57
- }
58
- };
59
- export const WithFieldset = {
60
- args: {},
61
- render: ()=>{
62
- return React.createElement(InputField, {
63
- tag: "fieldset",
64
- label: "Label",
65
- hint: "I am a hint",
66
- supportingText: "I am supporting text",
67
- after: React.createElement(Button, null, "Check"),
68
- before: "$AUD"
69
- }, React.createElement(Input, null));
70
- }
71
- };
@@ -1,186 +0,0 @@
1
- import { SearchIcon, VisibilityIcon } from '../icon/index.js';
2
- import { Button, Input, Select, Textarea } from '../index.js';
3
- import { InputField } from './input-field.component.js';
4
- const meta = {
5
- title: 'Components/InputField/Types',
6
- component: InputField,
7
- tags: [
8
- 'autodocs'
9
- ],
10
- decorators: [
11
- (Story)=>React.createElement(Story, null)
12
- ]
13
- };
14
- export default meta;
15
- export const TextBeforeStory = {
16
- args: {},
17
- render: ()=>{
18
- return React.createElement(InputField, {
19
- label: "Text before",
20
- hint: "I am a hint",
21
- supportingText: "I am supporting text",
22
- before: "$AUD"
23
- }, React.createElement(Input, null));
24
- }
25
- };
26
- export const TextAfter = {
27
- args: {},
28
- render: ()=>{
29
- return React.createElement(InputField, {
30
- label: "Text after",
31
- hint: "I am a hint",
32
- supportingText: "I am supporting text",
33
- after: "Text"
34
- }, React.createElement(Input, null));
35
- }
36
- };
37
- export const TextAfterAndBefore = {
38
- args: {},
39
- render: ()=>{
40
- return React.createElement(InputField, {
41
- label: "Text after",
42
- hint: "I am a hint",
43
- supportingText: "I am supporting text",
44
- before: "$AUD",
45
- after: "Text"
46
- }, React.createElement(Input, null));
47
- }
48
- };
49
- export const IconAddOn = {
50
- args: {},
51
- render: ()=>{
52
- return React.createElement(React.Fragment, null, React.createElement(InputField, {
53
- label: "Icon before",
54
- hint: "I am a hint",
55
- supportingText: "I am supporting text",
56
- before: {
57
- icon: SearchIcon
58
- }
59
- }, React.createElement(Input, null)), React.createElement(InputField, {
60
- label: "Icon after",
61
- hint: "I am a hint",
62
- supportingText: "I am supporting text",
63
- after: {
64
- icon: SearchIcon
65
- }
66
- }, React.createElement(Input, null)), React.createElement(InputField, {
67
- label: "Icon after",
68
- hint: "I am a hint",
69
- supportingText: "I am supporting text",
70
- after: {
71
- icon: SearchIcon
72
- },
73
- before: {
74
- icon: SearchIcon
75
- }
76
- }, React.createElement(Input, null)));
77
- }
78
- };
79
- export const IconInButtonsOn = {
80
- args: {},
81
- render: ()=>{
82
- return React.createElement(React.Fragment, null, React.createElement(InputField, {
83
- label: "Icon button before",
84
- hint: "I am a hint",
85
- supportingText: "I am supporting text",
86
- before: {
87
- inset: true,
88
- element: React.createElement(Button, {
89
- look: "link",
90
- iconAfter: VisibilityIcon,
91
- iconColor: "muted"
92
- })
93
- }
94
- }, React.createElement(Input, null)), React.createElement(InputField, {
95
- label: "Icon button after",
96
- hint: "I am a hint",
97
- supportingText: "I am supporting text",
98
- after: {
99
- inset: true,
100
- element: React.createElement(Button, {
101
- look: "link",
102
- iconAfter: VisibilityIcon,
103
- iconColor: "muted"
104
- })
105
- }
106
- }, React.createElement(Input, null)), React.createElement(InputField, {
107
- label: "Icon button before and after",
108
- hint: "I am a hint",
109
- supportingText: "I am supporting text",
110
- after: {
111
- inset: true,
112
- element: React.createElement(Button, {
113
- look: "link",
114
- iconAfter: VisibilityIcon,
115
- iconColor: "muted"
116
- })
117
- },
118
- before: {
119
- inset: true,
120
- element: React.createElement(Button, {
121
- look: "link",
122
- iconAfter: VisibilityIcon,
123
- iconColor: "muted"
124
- })
125
- }
126
- }, React.createElement(Input, null)));
127
- }
128
- };
129
- export const ButtonAddOn = {
130
- args: {},
131
- render: ()=>{
132
- return React.createElement(React.Fragment, null, React.createElement(InputField, {
133
- label: "Button before",
134
- hint: "I am a hint",
135
- supportingText: "I am supporting text",
136
- before: React.createElement(Button, null, "Check")
137
- }, React.createElement(Input, null)), React.createElement(InputField, {
138
- label: "Button after",
139
- hint: "I am a hint",
140
- supportingText: "I am supporting text",
141
- after: React.createElement(Button, null, "Check")
142
- }, React.createElement(Input, null)), React.createElement(InputField, {
143
- label: "Button before and after",
144
- hint: "I am a hint",
145
- supportingText: "I am supporting text",
146
- after: React.createElement(Button, null, "Check"),
147
- before: React.createElement(Button, null, "Check")
148
- }, React.createElement(Input, null)), React.createElement(InputField, {
149
- label: "Primary button after",
150
- hint: "I am a hint",
151
- supportingText: "I am supporting text",
152
- after: React.createElement(Button, {
153
- look: "primary"
154
- }, "Check")
155
- }, React.createElement(Input, null)), React.createElement(InputField, {
156
- label: "Faint button after",
157
- hint: "I am a hint",
158
- supportingText: "I am supporting text",
159
- after: React.createElement(Button, {
160
- look: "faint"
161
- }, "Check")
162
- }, React.createElement(Input, null)));
163
- }
164
- };
165
- export const SelectAddOn = {
166
- args: {},
167
- render: ()=>{
168
- return React.createElement(InputField, {
169
- label: "Select",
170
- hint: "I am a hint",
171
- supportingText: "I am supporting text",
172
- before: React.createElement(Select, null, React.createElement("option", null, "Select")),
173
- after: React.createElement(Select, null, React.createElement("option", null, "Select"))
174
- }, React.createElement(Input, null));
175
- }
176
- };
177
- export const TextArea = {
178
- args: {},
179
- render: ()=>{
180
- return React.createElement(InputField, {
181
- label: "Text after",
182
- hint: "I am a hint",
183
- supportingText: "I am supporting text"
184
- }, React.createElement(Textarea, null));
185
- }
186
- };
@@ -1,93 +0,0 @@
1
- import { ArrowRightIcon, PdfFileIcon } from '../icon/index.js';
2
- import { Link } from './link.component.js';
3
- const meta = {
4
- title: 'Components/Link',
5
- component: Link,
6
- tags: [
7
- 'autodocs'
8
- ],
9
- decorators: [
10
- (Story)=>React.createElement(Story, null)
11
- ]
12
- };
13
- export default meta;
14
- export const Default = {
15
- args: {
16
- children: "Look, I'm a default link",
17
- href: '#'
18
- }
19
- };
20
- const SIZES = [
21
- 'xsmall',
22
- 'small',
23
- 'medium',
24
- 'large',
25
- 'xlarge'
26
- ];
27
- export const Standalone = ()=>React.createElement("div", {
28
- className: "space-y-1"
29
- }, React.createElement("h1", {
30
- className: "font-bold"
31
- }, "Default"), React.createElement(Link, {
32
- href: "#"
33
- }, "Look I'm a standalone link"), React.createElement("h1", {
34
- className: "font-bold"
35
- }, "Icon Before override"), React.createElement(Link, {
36
- href: "#",
37
- iconBefore: PdfFileIcon
38
- }, "Look I'm a standalone link"), React.createElement("h1", {
39
- className: "font-bold"
40
- }, "Icon Before override"), React.createElement(Link, {
41
- href: "#",
42
- iconAfter: ArrowRightIcon
43
- }, "Look I'm a standalone link"));
44
- export const Inline = ()=>React.createElement("div", {
45
- className: "space-y-1"
46
- }, React.createElement("p", {
47
- className: "typography-body-10"
48
- }, "Lorem ipsum dolor", ' ', React.createElement(Link, {
49
- href: "#",
50
- type: "inline"
51
- }, "look, I'm an inline link"), ' ', "sit amet consectetur, adipisicing elit. Libero facilis odit voluptate reprehenderit laborum numquam ex optio doloribus magni repudiandae vero fugiat iusto tempora debitis sunt laboriosam nobis, ut voluptatum?"), React.createElement("p", {
52
- className: "typography-body-10"
53
- }, "Lorem ipsum dolor", ' ', React.createElement(Link, {
54
- href: "#",
55
- type: "inline",
56
- underline: false
57
- }, "look, I'm an inline link with no underline"), ' ', "sit amet consectetur, adipisicing elit. Libero facilis odit voluptate reprehenderit laborum numquam ex optio doloribus magni repudiandae vero fugiat iusto tempora debitis sunt laboriosam nobis, ut voluptatum?"), React.createElement("p", {
58
- className: "typography-body-10"
59
- }, "Lorem ipsum dolor", ' ', React.createElement(Link, {
60
- href: "#",
61
- type: "inline",
62
- iconBefore: PdfFileIcon
63
- }, "look, I'm an inline link"), ' ', "sit amet consectetur, adipisicing elit. Libero facilis odit voluptate reprehenderit laborum numquam ex optio doloribus magni repudiandae vero fugiat iusto tempora debitis sunt laboriosam nobis, ut voluptatum?"), React.createElement("p", {
64
- className: "typography-body-10"
65
- }, "Lorem ipsum dolor", ' ', React.createElement(Link, {
66
- href: "#",
67
- type: "inline",
68
- iconAfter: PdfFileIcon
69
- }, "look, I'm an inline link"), ' ', "sit amet consectetur, adipisicing elit. Libero facilis odit voluptate reprehenderit laborum numquam ex optio doloribus magni repudiandae vero fugiat iusto tempora debitis sunt laboriosam nobis, ut voluptatum?"), React.createElement(Link, {
70
- href: "#",
71
- type: "inline",
72
- iconBefore: PdfFileIcon
73
- }, "look, I'm an inline link"));
74
- export const IconSizes = ()=>React.createElement("div", {
75
- className: "space-y-1"
76
- }, SIZES.map((size)=>React.createElement("div", {
77
- key: size
78
- }, React.createElement("h1", {
79
- className: "font-bold"
80
- }, size), React.createElement(Link, {
81
- href: "#",
82
- iconSize: size,
83
- iconBefore: PdfFileIcon,
84
- iconAfter: PdfFileIcon
85
- }, "Look I'm a standalone link"), React.createElement("p", {
86
- className: "typography-body-10"
87
- }, "Lorem ipsum dolor", ' ', React.createElement(Link, {
88
- href: "#",
89
- type: "inline",
90
- iconSize: size,
91
- iconBefore: PdfFileIcon,
92
- iconAfter: PdfFileIcon
93
- }, "look, I'm an inline link"), ' ', "sit amet consectetur, adipisicing elit. Libero facilis odit voluptate reprehenderit laborum numquam ex optio doloribus magni repudiandae vero fugiat iusto tempora debitis sunt laboriosam nobis, ut voluptatum?"))));
@@ -1,86 +0,0 @@
1
- import { AndroidIcon } from '../icon/index.js';
2
- import { List } from './list.component.js';
3
- const meta = {
4
- title: 'Components/List',
5
- component: List,
6
- tags: [
7
- 'autodocs'
8
- ],
9
- decorators: [
10
- (Story)=>React.createElement(Story, null)
11
- ]
12
- };
13
- export default meta;
14
- const LOOKS = [
15
- 'primary',
16
- 'hero',
17
- 'neutral',
18
- 'success',
19
- 'danger',
20
- 'link'
21
- ];
22
- const TYPES = [
23
- 'bullet',
24
- 'link',
25
- 'tick',
26
- 'cross',
27
- 'unstyled',
28
- 'icon',
29
- 'ordered'
30
- ];
31
- export const Default = {
32
- args: {
33
- children: [
34
- React.createElement(List.Item, null, "Styled list"),
35
- React.createElement(List.Item, null, "Styled list"),
36
- React.createElement(List.Item, null, "Styled list")
37
- ]
38
- }
39
- };
40
- export const Types = ()=>TYPES.map((type)=>React.createElement("div", {
41
- className: "mb-2",
42
- key: type
43
- }, React.createElement("h1", {
44
- className: "typography-body-8"
45
- }, type), React.createElement(List, {
46
- type: type,
47
- icon: type === 'icon' ? AndroidIcon : undefined
48
- }, React.createElement(List.Item, {
49
- href: type === 'link' ? '#' : undefined
50
- }, "Styled ", type, " list"), React.createElement(List.Item, {
51
- href: type === 'link' ? '#' : undefined
52
- }, "Styled ", type, " list"), React.createElement(List.Item, {
53
- href: type === 'link' ? '#' : undefined
54
- }, "Styled ", type, " list"), React.createElement(List, {
55
- icon: type === 'link' ? AndroidIcon : undefined
56
- }, React.createElement(List.Item, null, "Styled ", type, " list"), React.createElement(List.Item, null, "Styled ", type, " list"), React.createElement(List.Item, null, "Styled ", type, " list")), React.createElement(List.Item, null, "Styled ", type, " list"))));
57
- export const Looks = ()=>LOOKS.map((look)=>React.createElement("div", {
58
- className: "mb-2",
59
- key: look
60
- }, React.createElement("h1", {
61
- className: "typography-body-8"
62
- }, look), React.createElement(List, {
63
- look: look,
64
- type: "bullet"
65
- }, React.createElement(List.Item, null, "Styled ", look, " list"), React.createElement(List.Item, null, "Styled ", look, " list"), React.createElement(List.Item, null, "Styled ", look, " list"), React.createElement(List, {
66
- icon: look === 'link' ? AndroidIcon : undefined
67
- }, React.createElement(List.Item, null, "Styled ", look, " list"), React.createElement(List.Item, null, "Styled ", look, " list"), React.createElement(List.Item, null, "Styled ", look, " list")), React.createElement(List.Item, null, "Styled ", look, " list"))));
68
- export const Nested = ()=>React.createElement("div", null, React.createElement(List, {
69
- type: "bullet",
70
- assistiveText: "test"
71
- }, React.createElement(List.Item, null, "Styled list"), React.createElement(List.Item, null, "Styled list"), React.createElement(List.Item, null, "Styled list"), React.createElement(List, null, React.createElement(List.Item, null, "Styled list"), React.createElement(List.Item, null, "Styled list"), React.createElement(List.Item, null, "Styled list"), React.createElement(List, {
72
- nested: 0
73
- }, React.createElement(List.Item, null, "Styled list"), React.createElement(List.Item, null, "Styled list"), React.createElement(List.Item, null, "Styled list"), React.createElement(List, null, React.createElement(List.Item, null, "Styled list"), React.createElement(List.Item, null, "Styled list"), React.createElement(List.Item, null, "Styled list"))))));
74
- export const Spacing = ()=>React.createElement("div", null, React.createElement("h1", {
75
- className: "typography-body-10 mb-2"
76
- }, "Medium"), React.createElement(List, {
77
- type: "bullet",
78
- className: "mb-4",
79
- spacing: "medium"
80
- }, React.createElement(List.Item, null, "Styled bullet list"), React.createElement(List.Item, null, "Styled bullet list"), React.createElement(List.Item, null, "Styled bullet list")), React.createElement("h1", {
81
- className: "typography-body-10 mb-2"
82
- }, "Large"), React.createElement(List, {
83
- type: "bullet",
84
- className: "mb-4",
85
- spacing: "large"
86
- }, React.createElement(List.Item, null, "Styled bullet list"), React.createElement(List.Item, null, "Styled bullet list"), React.createElement(List.Item, null, "Styled bullet list")));