@mycause/ui 0.0.0-cb5efc7a → 0.0.0-cb8edf5f

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 (439) hide show
  1. package/README.md +26 -0
  2. package/dist/components/anchor/anchor.d.ts +1 -1
  3. package/dist/components/anchor/anchor.stories.d.ts +2 -2
  4. package/dist/components/anchor/bold-anchor.d.ts +1 -1
  5. package/dist/components/anchor/bold-anchor.stories.d.ts +2 -2
  6. package/dist/components/avatar/avatar.d.ts +3 -3
  7. package/dist/components/avatar/avatar.stories.d.ts +3 -3
  8. package/dist/components/avatar/image-avatar.d.ts +1 -1
  9. package/dist/components/avatar/text-avatar.d.ts +1 -1
  10. package/dist/components/button/button.d.ts +2 -2
  11. package/dist/components/button/button.stories.d.ts +10 -10
  12. package/dist/components/button-select/button-select-exhanced.d.ts +23 -0
  13. package/dist/components/button-select/button-select.d.ts +12 -0
  14. package/dist/components/button-select/button-select.stories.d.ts +19 -0
  15. package/dist/components/button-select/index.d.ts +2 -0
  16. package/dist/components/campaign-card/campaign-card.d.ts +9 -0
  17. package/dist/components/campaign-card/campaign-card.stories.d.ts +14 -0
  18. package/dist/components/campaign-card/index.d.ts +1 -0
  19. package/dist/components/campaign-of-month/campaign-of-month.d.ts +15 -0
  20. package/dist/components/campaign-of-month/campaign-of-month.stories.d.ts +14 -0
  21. package/dist/components/campaign-of-month/index.d.ts +1 -0
  22. package/dist/components/charity-card/charity-card.d.ts +7 -0
  23. package/dist/components/charity-card/charity-card.stories.d.ts +14 -0
  24. package/dist/components/charity-card/index.d.ts +1 -0
  25. package/dist/components/charity-tags-filter-button/FilterIcon.d.ts +6 -0
  26. package/dist/components/charity-tags-filter-button/charity-tags-filter-button.d.ts +36 -0
  27. package/dist/components/charity-tags-filter-button/charity-tags-filter-button.stories.d.ts +12 -0
  28. package/dist/components/charity-tags-filter-button/index.d.ts +1 -0
  29. package/dist/components/checkbox/checkbox.d.ts +1 -1
  30. package/dist/components/checkbox/checkbox.stories.d.ts +4 -4
  31. package/dist/components/chips/chip.d.ts +2 -2
  32. package/dist/components/chips/chips.d.ts +2 -2
  33. package/dist/components/chips/chips.stories.d.ts +4 -4
  34. package/dist/components/chips/input-chips.d.ts +1 -1
  35. package/dist/components/chips/input-chips.stories.d.ts +2 -2
  36. package/dist/components/collapse/collapse.d.ts +21 -0
  37. package/dist/components/collapse/collapse.stories.d.ts +19 -0
  38. package/dist/components/collapse/icons.d.ts +4 -0
  39. package/dist/components/collapse/index.d.ts +1 -0
  40. package/dist/components/combo-field/combo-field-expander.d.ts +1 -1
  41. package/dist/components/combo-field/combo-field.d.ts +4 -1
  42. package/dist/components/combo-field/combo-field.stories.d.ts +3 -3
  43. package/dist/components/comment-section/comment-section-v2/comment-section-v2.d.ts +31 -0
  44. package/dist/components/comment-section/comment-section-v2/sub-comments-v2.d.ts +11 -0
  45. package/dist/components/comment-section/comment-section.d.ts +15 -0
  46. package/dist/components/comment-section/comment-section.stories.d.ts +19 -0
  47. package/dist/components/comment-section/comment-type.d.ts +10 -0
  48. package/dist/components/comment-section/index.d.ts +2 -0
  49. package/dist/components/comment-section/sub-comments.d.ts +6 -0
  50. package/dist/components/cropper/cropper.d.ts +4 -4
  51. package/dist/components/cropper/cropper.stories.d.ts +3 -4
  52. package/dist/components/date-picker/date-picker.d.ts +1 -1
  53. package/dist/components/date-picker/date-picker.stories.d.ts +11 -5
  54. package/dist/components/date-picker/index.d.ts +1 -0
  55. package/dist/components/date-picker/single-date-picker-custom-header.d.ts +32 -0
  56. package/dist/components/date-picker/single-date-picker.d.ts +5 -3
  57. package/dist/components/donate-card/donate-card.d.ts +8 -0
  58. package/dist/components/donate-card/donate-card.stories.d.ts +14 -0
  59. package/dist/components/donate-card/index.d.ts +1 -0
  60. package/dist/components/donation-form/donation-details.d.ts +12 -0
  61. package/dist/components/donation-form/donation-form-v2/donation-form-v2.d.ts +13 -0
  62. package/dist/components/donation-form/donation-form.d.ts +64 -0
  63. package/dist/components/donation-form/donation-form.stories.d.ts +18 -0
  64. package/dist/components/donation-form/donation-payment.d.ts +13 -0
  65. package/dist/components/donation-form/donation-select.d.ts +13 -0
  66. package/dist/components/donation-form/index.d.ts +2 -0
  67. package/dist/components/{index.js → donation.d.ts} +3 -12
  68. package/dist/components/elevation/elevation.d.ts +2 -1
  69. package/dist/components/elevation/elevation.stories.d.ts +2 -2
  70. package/dist/components/favorite-charity-item/favorite-charity-item.d.ts +15 -0
  71. package/dist/components/favorite-charity-item/favorite-charity-item.stories.d.ts +15 -0
  72. package/dist/components/favorite-charity-item/index.d.ts +1 -0
  73. package/dist/components/featured-campaign-card/featured-campaign-card.d.ts +17 -0
  74. package/dist/components/featured-campaign-card/featured-campaign-card.stories.d.ts +14 -0
  75. package/dist/components/featured-campaign-card/index.d.ts +1 -0
  76. package/dist/components/field-helpers/field-helper-text.d.ts +2 -2
  77. package/dist/components/field-helpers/field-label.d.ts +2 -1
  78. package/dist/components/footerV2/footerV2.d.ts +35 -0
  79. package/dist/components/{phone-number-input/phone-number-field.stories.d.ts → footerV2/footerV2.stories.d.ts} +5 -3
  80. package/dist/components/footerV2/index.d.ts +1 -0
  81. package/dist/components/fundraising-section/fundraising-section.d.ts +9 -0
  82. package/dist/components/fundraising-section/fundraising-section.stories.d.ts +14 -0
  83. package/dist/components/fundraising-section/index.d.ts +1 -0
  84. package/dist/components/hero-banner/hero-banner.d.ts +9 -0
  85. package/dist/components/hero-banner/hero-banner.stories.d.ts +14 -0
  86. package/dist/components/hero-banner/index.d.ts +1 -0
  87. package/dist/components/horizontalbar/horizontalbar.d.ts +11 -0
  88. package/dist/components/horizontalbar/horizontalbar.stories.d.ts +26 -0
  89. package/dist/components/horizontalbar/index.d.ts +1 -0
  90. package/dist/components/icon/btn_google_light_normal_ios.svg.d.ts +1 -1
  91. package/dist/components/icon/facebook_6.svg.d.ts +1 -1
  92. package/dist/components/icon/heart-toggle.d.ts +11 -0
  93. package/dist/components/icon/{toggle-button.stories.d.ts → heart-toggle.stories.d.ts} +3 -3
  94. package/dist/components/icon/icon-button-group.d.ts +1 -1
  95. package/dist/components/icon/icon-button-group.stories.d.ts +2 -2
  96. package/dist/components/icon/icon-button.d.ts +1 -1
  97. package/dist/components/icon/icon-button.stories.d.ts +3 -3
  98. package/dist/components/icon/icon.d.ts +1 -1
  99. package/dist/components/icon/icon.stories.d.ts +4 -4
  100. package/dist/components/icon/index.d.ts +1 -1
  101. package/dist/components/icon/material-icon.d.ts +2 -2
  102. package/dist/components/index.d.ts +37 -0
  103. package/dist/components/info-represent-campaign/index.d.ts +1 -0
  104. package/dist/components/info-represent-campaign/info-represent-campaign.d.ts +11 -0
  105. package/dist/components/info-represent-campaign/info-represent-campaign.stories.d.ts +12 -0
  106. package/dist/components/input/InputDefault.d.ts +13 -0
  107. package/dist/components/input/index.d.ts +1 -0
  108. package/dist/components/input/input.stories.d.ts +24 -0
  109. package/dist/components/input-social/Icons.d.ts +8 -0
  110. package/dist/components/input-social/InputSocial.d.ts +12 -0
  111. package/dist/components/input-social/index.d.ts +1 -0
  112. package/dist/components/{phone-number-field/phone-number-field.stories.d.ts → input-social/input-social.stories.d.ts} +3 -3
  113. package/dist/components/layout/box.d.ts +232 -224
  114. package/dist/components/layout/flex.d.ts +4 -4
  115. package/dist/components/layout/flex.stories.d.ts +2 -2
  116. package/dist/components/layout/grid.d.ts +2 -2
  117. package/dist/components/layout/grid.stories.d.ts +2 -2
  118. package/dist/components/layout/stack.d.ts +2 -2
  119. package/dist/components/layout/stack.stories.d.ts +4 -4
  120. package/dist/components/list/list.d.ts +30 -15
  121. package/dist/components/list/list.stories.d.ts +14 -8
  122. package/dist/components/login/index.d.ts +1 -0
  123. package/dist/components/login/login.d.ts +18 -0
  124. package/dist/components/login/login.stories.d.ts +19 -0
  125. package/dist/components/logo/logo-type.d.ts +4 -3
  126. package/dist/components/menu/menu-list-item.d.ts +2 -2
  127. package/dist/components/menu/menu-list.d.ts +2 -2
  128. package/dist/components/menu/menu.stories.d.ts +2 -2
  129. package/dist/components/modal/index.d.ts +1 -0
  130. package/dist/components/modal/modal-image.d.ts +8 -0
  131. package/dist/components/modal/modal.d.ts +7 -3
  132. package/dist/components/modal/modal.stories.d.ts +22 -4
  133. package/dist/components/my-account-choose-charity-card/index.d.ts +1 -0
  134. package/dist/components/my-account-choose-charity-card/my-account-choose-charity-card.d.ts +11 -0
  135. package/dist/components/my-account-choose-charity-card/my-account-choose-charity-card.stories.d.ts +14 -0
  136. package/dist/components/my-account-frp-closed/Icon.d.ts +5 -0
  137. package/dist/components/my-account-frp-closed/frp-closed-img.d.ts +8 -0
  138. package/dist/components/my-account-frp-closed/frp-information.d.ts +16 -0
  139. package/dist/components/my-account-frp-closed/index.d.ts +1 -0
  140. package/dist/components/my-account-frp-closed/my-account-frp-closed.d.ts +20 -0
  141. package/dist/components/my-account-frp-closed/my-account-frp-closed.stories.d.ts +24 -0
  142. package/dist/components/my-account-frp-preview/Icon.d.ts +5 -0
  143. package/dist/components/my-account-frp-preview/frp-information.d.ts +13 -0
  144. package/dist/components/my-account-frp-preview/frp-preview-img.d.ts +9 -0
  145. package/dist/components/my-account-frp-preview/index.d.ts +1 -0
  146. package/dist/components/my-account-frp-preview/my-account-frp-preview.d.ts +17 -0
  147. package/dist/components/my-account-frp-preview/my-account-frp-preview.stories.d.ts +24 -0
  148. package/dist/components/my-account-sidebar/Icon.d.ts +15 -0
  149. package/dist/components/my-account-sidebar/index.d.ts +1 -0
  150. package/dist/components/my-account-sidebar/my-account-sidebar.d.ts +19 -0
  151. package/dist/components/my-account-sidebar/my-account-sidebar.stories.d.ts +12 -0
  152. package/dist/components/my-account-start-fundraise-card/index.d.ts +1 -0
  153. package/dist/components/my-account-start-fundraise-card/my-account-start-fundraise-card.d.ts +13 -0
  154. package/dist/components/my-account-start-fundraise-card/my-account-start-fundraise-card.stories.d.ts +20 -0
  155. package/dist/components/my-account-stats-donated/index.d.ts +1 -0
  156. package/dist/components/my-account-stats-donated/my-account-stats-donated.d.ts +8 -0
  157. package/dist/components/my-account-stats-donated/my-account-stats-donated.stories.d.ts +12 -0
  158. package/dist/components/my-account-stats-raised/index.d.ts +1 -0
  159. package/dist/components/my-account-stats-raised/my-account-stats-raised.d.ts +7 -0
  160. package/dist/components/my-account-stats-raised/my-account-stats-raised.stories.d.ts +12 -0
  161. package/dist/components/nav/charity.d.ts +3 -0
  162. package/dist/components/nav/icons/IconBigger.d.ts +5 -0
  163. package/dist/components/nav/icons/IconSmaller.d.ts +5 -0
  164. package/dist/components/nav/index.d.ts +2 -0
  165. package/dist/components/nav/nav-actions.d.ts +5 -0
  166. package/dist/components/nav/nav-bar.d.ts +7 -0
  167. package/dist/components/nav/nav-call-to-action.d.ts +5 -0
  168. package/dist/components/nav/nav-charity.d.ts +7 -0
  169. package/dist/components/nav/nav-expanded-charity-new.d.ts +12 -0
  170. package/dist/components/nav/nav-expanded-charity.d.ts +14 -0
  171. package/dist/components/nav/nav-expanded.d.ts +14 -0
  172. package/dist/components/nav/nav-list.d.ts +29 -0
  173. package/dist/components/nav/nav-menu-control.d.ts +8 -0
  174. package/dist/components/nav/nav-menu.d.ts +12 -0
  175. package/dist/components/nav/nav-myaccount.d.ts +23 -0
  176. package/dist/components/nav/nav-search-control.d.ts +8 -0
  177. package/dist/components/nav/nav-search.d.ts +10 -0
  178. package/dist/components/nav/nav-sign-in-control.d.ts +12 -0
  179. package/dist/components/nav/nav-user-menu-items.d.ts +20 -0
  180. package/dist/components/nav/nav-user-menu.d.ts +18 -0
  181. package/dist/components/nav/nav.d.ts +62 -0
  182. package/dist/components/nav/nav.stories.d.ts +17 -0
  183. package/dist/components/navigation/navigation-actions.d.ts +1 -1
  184. package/dist/components/navigation/navigation-bar.d.ts +2 -2
  185. package/dist/components/navigation/navigation-call-to-action.d.ts +3 -3
  186. package/dist/components/navigation/navigation-expanded.d.ts +2 -2
  187. package/dist/components/navigation/navigation-list.d.ts +9 -7
  188. package/dist/components/navigation/navigation-menu-control.d.ts +1 -1
  189. package/dist/components/navigation/navigation-menu.d.ts +4 -3
  190. package/dist/components/navigation/navigation-search-control.d.ts +2 -2
  191. package/dist/components/navigation/navigation-search.d.ts +2 -2
  192. package/dist/components/navigation/navigation-sign-in-control.d.ts +6 -3
  193. package/dist/components/navigation/navigation-user-menu-items.d.ts +6 -6
  194. package/dist/components/navigation/navigation-user-menu.d.ts +4 -4
  195. package/dist/components/navigation/navigation.d.ts +17 -6
  196. package/dist/components/navigation/navigation.stories.d.ts +7 -25
  197. package/dist/components/partner-chart-stats/index.d.ts +1 -0
  198. package/dist/components/partner-chart-stats/partner-chart-stats.d.ts +11 -0
  199. package/dist/components/partner-chart-stats/partner-chart-stats.stories.d.ts +18 -0
  200. package/dist/components/partner-monthly-donations/index.d.ts +1 -0
  201. package/dist/components/partner-monthly-donations/partner-monthly-donations.d.ts +8 -0
  202. package/dist/components/partner-monthly-donations/partner-monthly-donations.stories.d.ts +12 -0
  203. package/dist/components/partner-monthly-stats/index.d.ts +1 -0
  204. package/dist/components/partner-monthly-stats/partner-monthly-stats.d.ts +7 -0
  205. package/dist/components/partner-monthly-stats/partner-monthly-stats.stories.d.ts +12 -0
  206. package/dist/components/partner-toggle-button/index.d.ts +2 -0
  207. package/dist/components/partner-toggle-button/partner-toggle-button-block.d.ts +11 -0
  208. package/dist/components/partner-toggle-button/partner-toggle-button-block.stories.d.ts +12 -0
  209. package/dist/components/partner-toggle-button/partner-toggle-button.d.ts +8 -0
  210. package/dist/components/phone-number-input/index.d.ts +2 -1
  211. package/dist/components/{phone-number-field/phone-number-field.d.ts → phone-number-input/phone-number-input-v1.d.ts} +8 -4
  212. package/dist/components/phone-number-input/phone-number-input-v2.d.ts +19 -0
  213. package/dist/components/phone-number-input/phone-number-input.d.ts +22 -11
  214. package/dist/components/phone-number-input/phone-number-input.stories.d.ts +43 -0
  215. package/dist/components/popup/index.d.ts +1 -0
  216. package/dist/components/popup/popup.d.ts +8 -0
  217. package/dist/components/popup/popup.stories.d.ts +14 -0
  218. package/dist/components/progressbar/index.d.ts +1 -0
  219. package/dist/components/progressbar/progress-bar-circle.d.ts +10 -0
  220. package/dist/components/progressbar/progressbar.d.ts +8 -0
  221. package/dist/components/progressbar/progressbar.stories.d.ts +20 -0
  222. package/dist/components/radio/radio-group.d.ts +1 -1
  223. package/dist/components/radio/radio-group.stories.d.ts +2 -2
  224. package/dist/components/radio/radio.d.ts +1 -1
  225. package/dist/components/radio/radio.stories.d.ts +4 -4
  226. package/dist/components/select/index.d.ts +2 -0
  227. package/dist/components/select/select-enhanced.d.ts +24 -0
  228. package/dist/components/select/select-helper-text.d.ts +1 -1
  229. package/dist/components/select/select-v2.d.ts +27 -0
  230. package/dist/components/select/select.d.ts +6 -3
  231. package/dist/components/select/select.stories.d.ts +14 -2
  232. package/dist/components/spinner/index.d.ts +1 -0
  233. package/dist/components/spinner/spinner.d.ts +9 -0
  234. package/dist/components/spinner/spinner.stories.d.ts +19 -0
  235. package/dist/components/statistics/statistics.d.ts +2 -1
  236. package/dist/components/statistics/statistics.stories.d.ts +2 -2
  237. package/dist/components/switch/index.d.ts +1 -0
  238. package/dist/components/switch/switch-v2.d.ts +8 -0
  239. package/dist/components/switch/switch.d.ts +1 -1
  240. package/dist/components/switch/switch.stories.d.ts +10 -4
  241. package/dist/components/table/index.d.ts +1 -0
  242. package/dist/components/table/partner-monthly-table.d.ts +19 -0
  243. package/dist/components/table/partner-monthly-table.stories.d.ts +18 -0
  244. package/dist/components/tabs/nav-tabs.d.ts +18 -0
  245. package/dist/components/tabs/tab-text-label.d.ts +1 -1
  246. package/dist/components/tabs/tabs.d.ts +4 -2
  247. package/dist/components/tabs/tabs.stories.d.ts +2 -2
  248. package/dist/components/text/text.d.ts +4 -5
  249. package/dist/components/text/text.stories.d.ts +7 -7
  250. package/dist/components/text-field/index.d.ts +1 -0
  251. package/dist/components/text-field/text-field-helper-text.d.ts +1 -1
  252. package/dist/components/text-field/text-field-search.d.ts +10 -0
  253. package/dist/components/text-field/text-field.d.ts +2 -0
  254. package/dist/components/text-field/text-field.stories.d.ts +8 -2
  255. package/dist/components/this-month-card/index.d.ts +1 -0
  256. package/dist/components/this-month-card/this-month-card.d.ts +15 -0
  257. package/dist/components/this-month-card/this-month-card.stories.d.ts +12 -0
  258. package/dist/components/toast/Icons.d.ts +7 -0
  259. package/dist/components/toast/index.d.ts +1 -0
  260. package/dist/components/toast/toast.d.ts +8 -0
  261. package/dist/components/toast/toast.stories.d.ts +12 -0
  262. package/dist/components/transaction-card/Dot.d.ts +6 -0
  263. package/dist/components/transaction-card/index.d.ts +1 -0
  264. package/dist/components/transaction-card/transaction-card.d.ts +16 -0
  265. package/dist/components/transaction-card/transaction-card.stories.d.ts +20 -0
  266. package/dist/components/uploader/uploader.d.ts +1 -1
  267. package/dist/donation.css +2 -0
  268. package/dist/donation.css.map +1 -0
  269. package/dist/donation.d.ts +3 -0
  270. package/dist/donation.esm.css +2 -0
  271. package/dist/donation.esm.css.map +1 -0
  272. package/dist/donation.esm.js +25306 -0
  273. package/dist/donation.js +25361 -0
  274. package/dist/index.css +2 -0
  275. package/dist/index.css.map +1 -0
  276. package/dist/index.esm.css +2 -0
  277. package/dist/index.esm.css.map +1 -0
  278. package/dist/index.esm.js +28997 -7215
  279. package/dist/index.js +29030 -7199
  280. package/dist/theme/theme.d.ts +9 -5
  281. package/dist/utils/center-decorator.d.ts +1 -1
  282. package/dist/utils/component-matrix.d.ts +1 -1
  283. package/dist/utils/grid-decorator.d.ts +1 -1
  284. package/dist/utils/parse-numbers.d.ts +2 -0
  285. package/package.json +34 -20
  286. package/styles/index.css +5 -6883
  287. package/styles/index.css.map +1 -0
  288. package/styles/reset.css +2 -315
  289. package/styles/reset.css.map +1 -0
  290. package/CHANGELOG.md +0 -340
  291. package/dist/components/anchor/anchor.jsx +0 -35
  292. package/dist/components/anchor/anchor.stories.jsx +0 -12
  293. package/dist/components/anchor/bold-anchor.jsx +0 -33
  294. package/dist/components/anchor/bold-anchor.stories.jsx +0 -11
  295. package/dist/components/anchor/index.js +0 -2
  296. package/dist/components/avatar/avatar.jsx +0 -14
  297. package/dist/components/avatar/avatar.stories.jsx +0 -17
  298. package/dist/components/avatar/image-avatar.jsx +0 -29
  299. package/dist/components/avatar/index.js +0 -1
  300. package/dist/components/avatar/text-avatar.jsx +0 -47
  301. package/dist/components/button/button.jsx +0 -85
  302. package/dist/components/button/button.stories.jsx +0 -118
  303. package/dist/components/button/index.js +0 -1
  304. package/dist/components/checkbox/checkbox.jsx +0 -39
  305. package/dist/components/checkbox/checkbox.stories.jsx +0 -42
  306. package/dist/components/checkbox/index.js +0 -1
  307. package/dist/components/chips/chip.jsx +0 -30
  308. package/dist/components/chips/chips.jsx +0 -16
  309. package/dist/components/chips/chips.stories.jsx +0 -35
  310. package/dist/components/chips/index.js +0 -3
  311. package/dist/components/chips/input-chips.jsx +0 -16
  312. package/dist/components/chips/input-chips.stories.jsx +0 -39
  313. package/dist/components/combo-field/combo-field-expander.jsx +0 -23
  314. package/dist/components/combo-field/combo-field.jsx +0 -93
  315. package/dist/components/combo-field/combo-field.stories.jsx +0 -62
  316. package/dist/components/combo-field/index.js +0 -2
  317. package/dist/components/cropper/cropper.jsx +0 -15
  318. package/dist/components/cropper/cropper.stories.jsx +0 -18
  319. package/dist/components/cropper/index.js +0 -1
  320. package/dist/components/date-picker/date-picker.jsx +0 -74
  321. package/dist/components/date-picker/date-picker.stories.jsx +0 -46
  322. package/dist/components/date-picker/index.js +0 -2
  323. package/dist/components/date-picker/single-date-picker.jsx +0 -81
  324. package/dist/components/elevation/elevation.jsx +0 -19
  325. package/dist/components/elevation/elevation.stories.jsx +0 -31
  326. package/dist/components/elevation/index.js +0 -1
  327. package/dist/components/field-helpers/field-helper-text.jsx +0 -42
  328. package/dist/components/field-helpers/field-label.jsx +0 -29
  329. package/dist/components/field-helpers/index.js +0 -2
  330. package/dist/components/icon/btn_google_light_normal_ios.svg.jsx +0 -21
  331. package/dist/components/icon/facebook_6.svg.jsx +0 -13
  332. package/dist/components/icon/icon-button-group.jsx +0 -51
  333. package/dist/components/icon/icon-button-group.stories.jsx +0 -26
  334. package/dist/components/icon/icon-button.jsx +0 -48
  335. package/dist/components/icon/icon-button.stories.jsx +0 -33
  336. package/dist/components/icon/icon.jsx +0 -49
  337. package/dist/components/icon/icon.stories.jsx +0 -78
  338. package/dist/components/icon/index.js +0 -4
  339. package/dist/components/icon/material-icon.jsx +0 -18
  340. package/dist/components/icon/toggle-button.d.ts +0 -11
  341. package/dist/components/icon/toggle-button.jsx +0 -29
  342. package/dist/components/icon/toggle-button.stories.jsx +0 -16
  343. package/dist/components/layout/box.jsx +0 -58
  344. package/dist/components/layout/flex.jsx +0 -55
  345. package/dist/components/layout/flex.stories.jsx +0 -44
  346. package/dist/components/layout/grid.jsx +0 -19
  347. package/dist/components/layout/grid.stories.jsx +0 -29
  348. package/dist/components/layout/index.js +0 -4
  349. package/dist/components/layout/stack.jsx +0 -33
  350. package/dist/components/layout/stack.stories.jsx +0 -40
  351. package/dist/components/list/index.js +0 -1
  352. package/dist/components/list/list.jsx +0 -52
  353. package/dist/components/list/list.stories.jsx +0 -135
  354. package/dist/components/logo/index.js +0 -1
  355. package/dist/components/logo/logo-type.jsx +0 -65
  356. package/dist/components/menu/index.js +0 -8
  357. package/dist/components/menu/menu-list-divider.jsx +0 -2
  358. package/dist/components/menu/menu-list-item-graphic.jsx +0 -2
  359. package/dist/components/menu/menu-list-item-meta.jsx +0 -2
  360. package/dist/components/menu/menu-list-item-text.jsx +0 -2
  361. package/dist/components/menu/menu-list-item.jsx +0 -11
  362. package/dist/components/menu/menu-list.jsx +0 -18
  363. package/dist/components/menu/menu-surface.jsx +0 -4
  364. package/dist/components/menu/menu.jsx +0 -2
  365. package/dist/components/menu/menu.stories.jsx +0 -42
  366. package/dist/components/modal/index.js +0 -1
  367. package/dist/components/modal/modal.jsx +0 -49
  368. package/dist/components/modal/modal.stories.jsx +0 -47
  369. package/dist/components/navigation/index.js +0 -1
  370. package/dist/components/navigation/navigation-actions.jsx +0 -8
  371. package/dist/components/navigation/navigation-bar.jsx +0 -42
  372. package/dist/components/navigation/navigation-call-to-action.jsx +0 -6
  373. package/dist/components/navigation/navigation-expanded.jsx +0 -165
  374. package/dist/components/navigation/navigation-list.jsx +0 -126
  375. package/dist/components/navigation/navigation-menu-control.jsx +0 -25
  376. package/dist/components/navigation/navigation-menu.jsx +0 -103
  377. package/dist/components/navigation/navigation-search-control.jsx +0 -8
  378. package/dist/components/navigation/navigation-search.jsx +0 -63
  379. package/dist/components/navigation/navigation-sign-in-control.jsx +0 -14
  380. package/dist/components/navigation/navigation-user-menu-items.jsx +0 -36
  381. package/dist/components/navigation/navigation-user-menu.jsx +0 -121
  382. package/dist/components/navigation/navigation.jsx +0 -137
  383. package/dist/components/navigation/navigation.stories.jsx +0 -260
  384. package/dist/components/phone-number-field/index.d.ts +0 -2
  385. package/dist/components/phone-number-field/index.js +0 -2
  386. package/dist/components/phone-number-field/phone-number-field.jsx +0 -50
  387. package/dist/components/phone-number-field/phone-number-field.stories.jsx +0 -23
  388. package/dist/components/phone-number-field/util.d.ts +0 -2
  389. package/dist/components/phone-number-field/util.js +0 -19
  390. package/dist/components/phone-number-input/index.js +0 -3
  391. package/dist/components/phone-number-input/phone-number-field.d.ts +0 -23
  392. package/dist/components/phone-number-input/phone-number-field.jsx +0 -50
  393. package/dist/components/phone-number-input/phone-number-field.stories.jsx +0 -16
  394. package/dist/components/phone-number-input/phone-number-input.jsx +0 -48
  395. package/dist/components/phone-number-input/util.js +0 -19
  396. package/dist/components/radio/index.js +0 -2
  397. package/dist/components/radio/radio-group.jsx +0 -9
  398. package/dist/components/radio/radio-group.stories.jsx +0 -21
  399. package/dist/components/radio/radio.jsx +0 -31
  400. package/dist/components/radio/radio.stories.jsx +0 -44
  401. package/dist/components/select/index.js +0 -2
  402. package/dist/components/select/select-helper-text.jsx +0 -6
  403. package/dist/components/select/select.jsx +0 -152
  404. package/dist/components/select/select.stories.jsx +0 -40
  405. package/dist/components/statistics/index.js +0 -1
  406. package/dist/components/statistics/statistics.jsx +0 -61
  407. package/dist/components/statistics/statistics.stories.jsx +0 -34
  408. package/dist/components/switch/index.js +0 -1
  409. package/dist/components/switch/switch.jsx +0 -32
  410. package/dist/components/switch/switch.stories.jsx +0 -41
  411. package/dist/components/tabs/index.js +0 -1
  412. package/dist/components/tabs/tab-bar.jsx +0 -35
  413. package/dist/components/tabs/tab-text-label.jsx +0 -5
  414. package/dist/components/tabs/tab.jsx +0 -50
  415. package/dist/components/tabs/tabs.jsx +0 -65
  416. package/dist/components/tabs/tabs.stories.jsx +0 -27
  417. package/dist/components/text/index.js +0 -1
  418. package/dist/components/text/text.jsx +0 -138
  419. package/dist/components/text/text.stories.jsx +0 -262
  420. package/dist/components/text-field/index.js +0 -2
  421. package/dist/components/text-field/text-field-helper-text.jsx +0 -8
  422. package/dist/components/text-field/text-field.jsx +0 -124
  423. package/dist/components/text-field/text-field.stories.jsx +0 -32
  424. package/dist/components/uploader/index.js +0 -1
  425. package/dist/components/uploader/uploader.jsx +0 -96
  426. package/dist/input.d.ts +0 -1
  427. package/dist/input.js +0 -4
  428. package/dist/input.jsx +0 -4
  429. package/dist/theme/colors.js +0 -9
  430. package/dist/theme/index.js +0 -2
  431. package/dist/theme/mycause-theme.js +0 -33
  432. package/dist/theme/theme.jsx +0 -36
  433. package/dist/utils/browser.js +0 -19
  434. package/dist/utils/center-decorator.jsx +0 -15
  435. package/dist/utils/component-matrix.jsx +0 -39
  436. package/dist/utils/flags.js +0 -18
  437. package/dist/utils/grid-decorator.jsx +0 -27
  438. package/dist/utils/tap-event.js +0 -11
  439. package/dist/utils/wrap.js +0 -8
@@ -1,260 +0,0 @@
1
- import React, { useState } from "react";
2
- import { action } from "@storybook/addon-actions";
3
- import useMedia from "use-media";
4
- import { LogoType } from "../logo";
5
- import Navigation from "./navigation";
6
- import NavigationList from "./navigation-list";
7
- import NavigationMenu from "./navigation-menu";
8
- import NavigationExpanded from "./navigation-expanded";
9
- import NavigationSearch from "./navigation-search";
10
- import avatar from "../avatar/ipet-photo-CfDAo3C3bvQ-unsplash.jpg";
11
- import circle from "../statistics/circle.svg";
12
- function Logo() {
13
- return (<LogoType size={useMedia("screen and (min-width: 720px") ? "large" : undefined}/>);
14
- }
15
- function BackgroundContainer({ children }) {
16
- return (<div className="container">
17
- <div className="content">{children}</div>
18
- <style jsx>{`
19
- .container {
20
- min-height: 100vh;
21
- display: flex;
22
- align-items: center;
23
- justify-content: center;
24
- }
25
-
26
- .content {
27
- width: 100%;
28
- max-width: 1024px;
29
- padding: 2rem 1rem;
30
- background-color: rgba(0, 0, 0, 0.01);
31
- }
32
-
33
- @media (min-width: 720px) {
34
- .content {
35
- padding: 4rem;
36
- }
37
- }
38
- `}</style>
39
- </div>);
40
- }
41
- export default {
42
- title: "Navigation",
43
- };
44
- function NavigationSearchDemo() {
45
- const [value, setValue] = useState("");
46
- return (<NavigationSearch value={value} onChange={setValue} onSubmit={action("search")} onCancel={action("cancel")}/>);
47
- }
48
- function NavigationDemo() {
49
- const [isSignedIn, setSignedIn] = useState(false);
50
- return (<Navigation logo={<Logo />} isSticky={true} menus={[
51
- {
52
- label: "Fundraise",
53
- id: "fundraise",
54
- analyticsId: "fundraise",
55
- items: [
56
- { label: "For a person", id: "person", analyticsId: "person" },
57
- { label: "For a charity", id: "charity" },
58
- { label: "Find a charity", id: "find_charity" },
59
- {
60
- label: "Fundraising ideas",
61
- id: "fundraising_ideas",
62
- submenu: [
63
- { label: "Schools", id: "schools" },
64
- { label: "Cancer", id: "cancer" },
65
- { label: "Pets & animals", id: "pets_animals" },
66
- { label: "Help a friend", id: "help_friend" },
67
- { label: "Marathon runs", id: "marathon" },
68
- { label: "See all fundraising ideas", id: "see all" },
69
- ],
70
- },
71
- { label: "Team fundraising", id: "team_fundraising" },
72
- { label: "How it works", id: "how_it_works" },
73
- ],
74
- },
75
- {
76
- label: "Donate",
77
- id: "donate",
78
- analyticsId: "donate",
79
- items: [
80
- { label: "Donate to a charity", id: "donate" },
81
- { label: "Send a gift card/voucher", id: "gift_card" },
82
- { label: "Pledge your birthday", id: "birthday" },
83
- { label: "Start a giving portfolio", id: "giving_portfolio" },
84
- ],
85
- },
86
- {
87
- label: "Organisation",
88
- id: "organisation",
89
- analyticsId: "organisation",
90
- items: [
91
- {
92
- label: "For your organisation",
93
- id: "organisation",
94
- submenu: [
95
- { label: "Schools", id: "schools" },
96
- { label: "Clubs", id: "clubs" },
97
- { label: "Charity", id: "charity" },
98
- { label: "Event manager", id: "event_manager" },
99
- { label: "Corporate", id: "corporate" },
100
- ],
101
- },
102
- { label: "Fundraising events", id: "events" },
103
- { label: "Donating services", id: "donating_services" },
104
- { label: "Giving days", id: "giving_days" },
105
- { label: "Crowdfunding & appeals", id: "crowdfunding" },
106
- { label: "Peer 2 peer fundraising", id: "peer_fundraising" },
107
- ],
108
- action: {
109
- label: "Become a partner (free)",
110
- id: "become_a_partner",
111
- analyticsId: "becomeAPartner",
112
- },
113
- },
114
- ]} links={[
115
- { label: "About", id: "about" },
116
- { label: "Help", id: "help" },
117
- { label: "Blog & Press", id: "blog-press" },
118
- ]} stats={[
119
- {
120
- label: "Members",
121
- id: "nav-expand-members",
122
- value: "302, 657",
123
- logo: circle,
124
- },
125
- {
126
- label: "Causes",
127
- id: "nav-expand-causes",
128
- value: "68, 553",
129
- logo: circle,
130
- },
131
- {
132
- label: "Raised",
133
- id: "nav-expand-raised",
134
- value: "$100 Million +",
135
- logo: circle,
136
- },
137
- ]} cta={{
138
- color: "primary",
139
- onClick: action("onClick"),
140
- children: "Start fundraising",
141
- analyticsId: "startFundraising",
142
- }} user={isSignedIn
143
- ? {
144
- name: "Adorable Puppy",
145
- avatar: {
146
- src: avatar,
147
- },
148
- }
149
- : null} search={{ onSearch: action("search") }} login={{ onLogin: () => setSignedIn(true) }} userMenu={[
150
- {
151
- icon: { icon: "perm_identity" },
152
- label: "My dashboard",
153
- onClick: action("dashboard"),
154
- },
155
- {
156
- icon: { icon: "favorite_border" },
157
- label: "Activity",
158
- onClick: action("activity"),
159
- submenu: [
160
- {
161
- label: "Fundraising pages",
162
- },
163
- {
164
- label: "Favourite charities",
165
- },
166
- ],
167
- },
168
- {
169
- icon: { icon: "favorite_border" },
170
- label: "My campaigns",
171
- onClick: action("my campaigns"),
172
- },
173
- {
174
- icon: { icon: "settings", iconSet: "material-icons-outlined" },
175
- label: "Account settings",
176
- onClick: action("settings"),
177
- submenu: [
178
- {
179
- label: "Profile",
180
- },
181
- {
182
- label: "Manage Connections",
183
- },
184
- ],
185
- },
186
- {
187
- icon: { icon: "exit_to_app" },
188
- label: "Sign out",
189
- onClick: () => setSignedIn(false),
190
- },
191
- ]}/>);
192
- }
193
- export const full = () => <NavigationDemo />;
194
- full.story = {
195
- name: "full navigation",
196
- };
197
- export const list = () => (<BackgroundContainer>
198
- <NavigationList items={[
199
- { label: "Schools", id: "schools" },
200
- { label: "Cancer", id: "cancer" },
201
- { label: "Pets & animals", id: "pets_animals" },
202
- { label: "Help a friend", id: "help_friend" },
203
- { label: "Marathon runs", id: "marathon" },
204
- { label: "See all fundraising ideas", id: "see all" },
205
- ].map(item => ({ ...item, onClick: () => action("click")(item.id) }))}/>
206
- </BackgroundContainer>);
207
- list.story = {
208
- name: "navigation list",
209
- };
210
- export const listLarge = () => (<BackgroundContainer>
211
- <NavigationList size="large" items={[
212
- { label: "Schools", id: "schools" },
213
- { label: "Cancer", id: "cancer" },
214
- { label: "Pets & animals", id: "pets_animals" },
215
- { label: "Help a friend", id: "help_friend" },
216
- { label: "Marathon runs", id: "marathon" },
217
- { label: "See all fundraising ideas", id: "see all" },
218
- ].map(item => ({ ...item, onClick: () => action("click")(item.id) }))}/>
219
- </BackgroundContainer>);
220
- listLarge.story = {
221
- name: "navigation list (large)",
222
- };
223
- export const menu = () => (<BackgroundContainer>
224
- <NavigationMenu links={[
225
- { label: "For a person", id: "person" },
226
- { label: "For a charity", id: "charity" },
227
- { label: "Find a charity", id: "find_charity" },
228
- { label: "Fundraising ideas", id: "fundraising_ideas", more: true },
229
- { label: "Team fundraising", id: "team_fundraising" },
230
- { label: "How it works", id: "how_it_works" },
231
- ].map(link => ({ ...link, onClick: () => action("click")(link.id) }))} sublinks={[
232
- { label: "Schools", id: "schools" },
233
- { label: "Cancer", id: "cancer" },
234
- { label: "Pets & animals", id: "pets_animals" },
235
- { label: "Help a friend", id: "help_friend" },
236
- { label: "Marathon runs", id: "marathon" },
237
- { label: "See all fundraising ideas", id: "see all" },
238
- ].map(link => ({ ...link, onClick: () => action("click")(link.id) }))} action={{
239
- label: "Start fundraising",
240
- id: "start_fundraising",
241
- onClick: () => action("click")("start_fundraising"),
242
- }} active="fundraising_ideas" onClickItem={action("click")}/>
243
- </BackgroundContainer>);
244
- menu.story = {
245
- name: "navigation menu",
246
- };
247
- export const expanded = () => (<NavigationExpanded links={[
248
- { label: "About", id: "about" },
249
- { label: "Help", id: "help" },
250
- { label: "Blog & Press", id: "blog-press" },
251
- ].map(link => ({ ...link, onClick: () => action("click")(link.id) }))} onRequestClose={() => { }}/>);
252
- expanded.story = {
253
- name: "navigation expanded",
254
- };
255
- export const search = () => (<BackgroundContainer>
256
- <NavigationSearchDemo />
257
- </BackgroundContainer>);
258
- search.story = {
259
- name: "navigation search",
260
- };
@@ -1,2 +0,0 @@
1
- export { default as PhoneNumberField } from "./phone-number-field";
2
- export * from "./util";
@@ -1,2 +0,0 @@
1
- export { default as PhoneNumberField } from "./phone-number-field";
2
- export * from "./util";
@@ -1,50 +0,0 @@
1
- import React from "react";
2
- import countries from "i18n-iso-countries";
3
- import en from "i18n-iso-countries/langs/en.json";
4
- import { AsYouType } from "libphonenumber-js";
5
- import { FieldLabel, FieldHelperText } from "../field-helpers";
6
- import { ComboField, ComboFieldExpander } from "../combo-field";
7
- import { Box } from "../layout";
8
- import { Select } from "../select";
9
- import { TextField } from "../text-field";
10
- countries.registerLocale(en);
11
- const COUNTRY_CODES = Object.keys(countries.getAlpha2Codes()).sort();
12
- function PhoneNumberField({ onChange, values, names = {
13
- number: "number",
14
- countryCallingCode: "countryCallingCode",
15
- country: "country",
16
- }, error, onBlur, helperText, label, required, defaultCountry = "AU", }) {
17
- const format = (text, c) => {
18
- const typer = new AsYouType(c || defaultCountry);
19
- const formatted = typer.input(text);
20
- let result = typer.getNumber();
21
- if (result && result.isValid()) {
22
- // When the user has typed in a full valid number,
23
- // emit the country calling code and set the country explicitly
24
- onChange(result.country, names.country);
25
- onChange(result.format("NATIONAL"), names.number);
26
- onChange(result.countryCallingCode, names.countryCallingCode);
27
- }
28
- else {
29
- onChange(formatted, names.number);
30
- }
31
- };
32
- const handleCountryChange = (e) => {
33
- onChange(e.target.value || "", names.country);
34
- format(values.number, e.target.value);
35
- };
36
- const handleTextChange = (e) => {
37
- format(e.target.value, values.country);
38
- };
39
- return (<Box>
40
- {label ? <FieldLabel required={required}>{label}</FieldLabel> : null}
41
- <ComboField>
42
- <Select options={COUNTRY_CODES} value={values.country} onChange={handleCountryChange} noArrow onBlur={onBlur} required={required}/>
43
- <ComboFieldExpander>
44
- <TextField type="tel" value={values.number} onChange={handleTextChange} name={names.number} onBlur={onBlur} error={!!error} required={required}/>
45
- </ComboFieldExpander>
46
- </ComboField>
47
- {helperText ? (<FieldHelperText error={error}>{helperText}</FieldHelperText>) : null}
48
- </Box>);
49
- }
50
- export default PhoneNumberField;
@@ -1,23 +0,0 @@
1
- import React, { useState } from "react";
2
- import { withKnobs, boolean, text } from "@storybook/addon-knobs";
3
- import CenterDecorator from "../../utils/center-decorator";
4
- import PhoneNumberField from "./phone-number-field";
5
- export default {
6
- title: "PhoneNumberField",
7
- decorators: [CenterDecorator, withKnobs],
8
- };
9
- export const PhoneNumberFieldStory = () => {
10
- const [values, setValues] = useState({
11
- number: "",
12
- countryCallingCode: "",
13
- country: "",
14
- });
15
- const label = text("Label", "Phone number");
16
- const required = boolean("Required", false);
17
- const helperText = text("Helper Text", "Enter an Australian or international phone number.");
18
- const error = text("Error text", "");
19
- return (<PhoneNumberField values={values} onChange={(value, name) => setValues(values => ({ ...values, [name]: value }))} label={label} helperText={helperText} required={required} error={error || null}/>);
20
- };
21
- PhoneNumberFieldStory.story = {
22
- name: "default",
23
- };
@@ -1,2 +0,0 @@
1
- import { PhoneNumber, CountryCode } from "libphonenumber-js";
2
- export declare function parseNationalPhoneNumber(phoneNumber: string, countryCallingCode: string, defaultCountry?: CountryCode): PhoneNumber | null;
@@ -1,19 +0,0 @@
1
- import { parsePhoneNumberFromString, } from "libphonenumber-js";
2
- export function parseNationalPhoneNumber(phoneNumber, countryCallingCode, defaultCountry) {
3
- let number;
4
- // Try with the country code
5
- if (countryCallingCode) {
6
- number = parsePhoneNumberFromString("+" + countryCallingCode + phoneNumber, defaultCountry);
7
- if (number && number.isValid())
8
- return number;
9
- }
10
- // Try clipping the intital "0" from the number, if there is one
11
- if ((countryCallingCode && phoneNumber.startsWith("0"), defaultCountry)) {
12
- number = parsePhoneNumberFromString("+" + countryCallingCode + phoneNumber.substr(1));
13
- if (number && number.isValid())
14
- return number;
15
- }
16
- // Finally just try the number by itself
17
- number = parsePhoneNumberFromString(phoneNumber, defaultCountry);
18
- return number || null;
19
- }
@@ -1,3 +0,0 @@
1
- export { default as PhoneNumberInput } from "./phone-number-input";
2
- export { default as PhoneNumberField } from "./phone-number-field";
3
- export * from "./util";
@@ -1,23 +0,0 @@
1
- import React from "react";
2
- import { CountryCode } from "libphonenumber-js";
3
- declare type PhoneNumberFieldProps = {
4
- values: {
5
- number: string;
6
- countryCallingCode: string;
7
- country: string;
8
- };
9
- names?: {
10
- number: string;
11
- countryCallingCode: string;
12
- country: string;
13
- };
14
- onChange: (value: string, name: string) => void;
15
- label?: React.ReactNode;
16
- error?: string | null;
17
- onBlur?: (e: React.FocusEvent) => void;
18
- helperText?: React.ReactNode;
19
- required?: boolean;
20
- defaultCountry?: CountryCode;
21
- };
22
- declare function PhoneNumberField({ onChange, values, names, error, onBlur, helperText, label, required, defaultCountry, }: PhoneNumberFieldProps): JSX.Element;
23
- export default PhoneNumberField;
@@ -1,50 +0,0 @@
1
- import React from "react";
2
- import countries from "i18n-iso-countries";
3
- import en from "i18n-iso-countries/langs/en.json";
4
- import { AsYouType } from "libphonenumber-js";
5
- import { FieldLabel, FieldHelperText } from "../field-helpers";
6
- import { ComboField, ComboFieldExpander } from "../combo-field";
7
- import { Box } from "../layout";
8
- import { Select } from "../select";
9
- import { TextField } from "../text-field";
10
- countries.registerLocale(en);
11
- const COUNTRY_CODES = Object.keys(countries.getAlpha2Codes()).sort();
12
- function PhoneNumberField({ onChange, values, names = {
13
- number: "number",
14
- countryCallingCode: "countryCallingCode",
15
- country: "country",
16
- }, error, onBlur, helperText, label, required, defaultCountry = "AU", }) {
17
- const format = (text, c) => {
18
- const typer = new AsYouType(c || defaultCountry);
19
- const formatted = typer.input(text);
20
- let result = typer.getNumber();
21
- if (result && result.isValid()) {
22
- // When the user has typed in a full valid number,
23
- // emit the country calling code and set the country explicitly
24
- onChange(result.country, names.country);
25
- onChange(result.format("NATIONAL"), names.number);
26
- onChange(result.countryCallingCode, names.countryCallingCode);
27
- }
28
- else {
29
- onChange(formatted, names.number);
30
- }
31
- };
32
- const handleCountryChange = (e) => {
33
- onChange(e.target.value || "", names.country);
34
- format(values.number, e.target.value);
35
- };
36
- const handleTextChange = (e) => {
37
- format(e.target.value, values.country);
38
- };
39
- return (<Box>
40
- {label ? <FieldLabel required={required}>{label}</FieldLabel> : null}
41
- <ComboField>
42
- <Select options={COUNTRY_CODES} value={values.country} onChange={handleCountryChange} noArrow onBlur={onBlur} required={required}/>
43
- <ComboFieldExpander>
44
- <TextField type="tel" value={values.number} onChange={handleTextChange} name={names.number} onBlur={onBlur} error={!!error} required={required}/>
45
- </ComboFieldExpander>
46
- </ComboField>
47
- {helperText ? (<FieldHelperText error={error}>{helperText}</FieldHelperText>) : null}
48
- </Box>);
49
- }
50
- export default PhoneNumberField;
@@ -1,16 +0,0 @@
1
- import React, { useState } from "react";
2
- import CenterDecorator from "../../utils/center-decorator";
3
- import PhoneNumberInput from "./phone-number-input";
4
- export default {
5
- title: "PhoneNumberInput",
6
- decorators: [CenterDecorator],
7
- };
8
- export const PhoneNumberInputStory = () => {
9
- const [values, setValues] = useState("");
10
- return (<div style={{ width: "313px" }}>
11
- <PhoneNumberInput value={values} onChange={setValues} preferredCountries={["au"]} label="Phone number" placeholder="Enter phone number" helperText="Enter an Australian or international phone number."/>
12
- </div>);
13
- };
14
- PhoneNumberInputStory.story = {
15
- name: "default",
16
- };
@@ -1,48 +0,0 @@
1
- import React, { Fragment } from "react";
2
- import classnames from "classnames";
3
- import { FieldLabel, FieldHelperText } from "../field-helpers";
4
- import { useTheme, getColorToken } from "../../theme/theme";
5
- import PhoneInput from "react-phone-input-2";
6
- const PhoneNumberInput = ({ value, onChange, buttonClass, inputClass, preferredCountries, label, placeholder, required, helperText, error, }) => {
7
- const theme = useTheme();
8
- const setColor = getColorToken(theme, "foreground", "primary");
9
- return (<Fragment>
10
- {label ? <FieldLabel required={required}>{label}</FieldLabel> : null}
11
- <PhoneInput inputClass={classnames("number-custom-input", inputClass)} buttonClass={classnames("number-custom-button", buttonClass)} placeholder={placeholder} value={value} onChange={(res) => onChange(res)} preferredCountries={preferredCountries}/>
12
- {helperText ? (<FieldHelperText error={error}>{helperText}</FieldHelperText>) : (<FieldHelperText error={error}/>)}
13
- <style jsx>{`
14
- :global(.number-custom-input) {
15
- height: 48px !important;
16
- padding-left: 66px !important;
17
- font-family: ${theme.typography.fontFamily.brand};
18
- border: ${error && "1px solid #b00020 !important"};
19
- }
20
- :global(.number-custom-input:hover) {
21
- border: 1px solid black !important;
22
- }
23
- :global(.number-custom-input:focus) {
24
- border: 2px solid ${setColor} !important;
25
- }
26
-
27
- :global(.number-custom-button) {
28
- background: none !important;
29
- padding-right: 14px !important;
30
- border: ${error && "1px solid #b00020 !important"};
31
- }
32
- :global(.number-custom-button:hover) {
33
- border: 1px solid black !important;
34
- }
35
- :global(.number-custom-button:focus) {
36
- border: 2px solid ${setColor} !important;
37
- }
38
- :global(.selected-flag) {
39
- padding: 0px 0px 0 16px !important;
40
- background: none !important;
41
- }
42
- :global(.dial-code, .divider) {
43
- display: none;
44
- }
45
- `}</style>
46
- </Fragment>);
47
- };
48
- export default PhoneNumberInput;
@@ -1,19 +0,0 @@
1
- import { parsePhoneNumberFromString, } from "libphonenumber-js";
2
- export function parseNationalPhoneNumber(phoneNumber, countryCallingCode, defaultCountry) {
3
- let number;
4
- // Try with the country code
5
- if (countryCallingCode) {
6
- number = parsePhoneNumberFromString("+" + countryCallingCode + phoneNumber, defaultCountry);
7
- if (number && number.isValid())
8
- return number;
9
- }
10
- // Try clipping the intital "0" from the number, if there is one
11
- if ((countryCallingCode && phoneNumber.startsWith("0"), defaultCountry)) {
12
- number = parsePhoneNumberFromString("+" + countryCallingCode + phoneNumber.substr(1));
13
- if (number && number.isValid())
14
- return number;
15
- }
16
- // Finally just try the number by itself
17
- number = parsePhoneNumberFromString(phoneNumber, defaultCountry);
18
- return number || null;
19
- }
@@ -1,2 +0,0 @@
1
- export { default as Radio } from "./radio";
2
- export { default as RadioGroup } from "./radio-group";
@@ -1,9 +0,0 @@
1
- import React from "react";
2
- import Radio from "./radio";
3
- import { Flex } from "../layout";
4
- function RadioGroup({ name, value, onChange, options, onBlur, onFocus, disabled, ...rest }) {
5
- return (<Flex direction="column" {...rest}>
6
- {options.map(option => (<Radio key={option.value} checked={option.value === value} label={option.label} name={name} value={option.value} onBlur={onBlur} onFocus={onFocus} onChange={onChange} disabled={disabled || option.disabled}/>))}
7
- </Flex>);
8
- }
9
- export default RadioGroup;
@@ -1,21 +0,0 @@
1
- import React, { useState } from "react";
2
- import RadioGroup from "./radio-group";
3
- import CenterDecorator from "../../utils/center-decorator";
4
- export default {
5
- title: "RadioGroup",
6
- decorators: [CenterDecorator],
7
- };
8
- export const RadioGroupStory = () => {
9
- const [value, setValue] = useState("");
10
- return (<RadioGroup value={value} onChange={e => {
11
- console.log(e.target.value);
12
- setValue(e.target.value);
13
- }} options={[
14
- { value: "1", label: "This is option one" },
15
- { value: "2", label: "This is the second option" },
16
- { value: "3", label: "This is the last option" },
17
- ]}/>);
18
- };
19
- RadioGroupStory.story = {
20
- name: "default",
21
- };
@@ -1,31 +0,0 @@
1
- import React, { Fragment, useState, useEffect } from "react";
2
- import MDCRadio, { NativeRadioControl as MDCNativeRadioControl, } from "@material/react-radio";
3
- import nanoid from "nanoid";
4
- import classnames from "classnames";
5
- import css from "styled-jsx/css";
6
- import { useTheme, getColorToken } from "../../theme/theme";
7
- const Radio = ({ id = "", color = "primary", label = "", value, name, className, wrapperClasses, ...rest }) => {
8
- const [mainId, setMainId] = useState("");
9
- const theme = useTheme();
10
- const setColor = getColorToken(theme, "foreground", color);
11
- useEffect(() => {
12
- setMainId(id || (name && value ? `name__${value}` : nanoid()));
13
- }, [id, setMainId, name, value]);
14
- const scope = css.resolve `
15
- .mdc-radio {
16
- --mdc-theme-secondary: ${setColor};
17
- }
18
- .mdc-form-field :global(label) {
19
- font-family: ${theme.typography.fontFamily.brand};
20
- font-weight: 500;
21
- cursor: pointer;
22
- }
23
- `;
24
- return (<Fragment>
25
- <MDCRadio wrapperClasses={classnames(wrapperClasses, scope.className)} className={classnames(className, scope.className)} value={value} label={label} key={mainId}>
26
- <MDCNativeRadioControl className={classnames(className)} value={value} name={name} id={mainId} {...rest}/>
27
- </MDCRadio>
28
- {scope.styles}
29
- </Fragment>);
30
- };
31
- export default Radio;
@@ -1,44 +0,0 @@
1
- import React, { useState, Fragment } from "react";
2
- import CenterDecorator from "../../utils/center-decorator";
3
- import Radio from "./radio";
4
- export default {
5
- title: "Radio",
6
- decorators: [CenterDecorator],
7
- };
8
- export const RadioExample = () => {
9
- const [checked, setChecked] = useState(false);
10
- const handleClick = (event) => {
11
- let targetValue = event.target.value ? true : false;
12
- setChecked(targetValue);
13
- };
14
- return (<Fragment>
15
- <Radio checked={checked} value="primary" onChange={handleClick}/>
16
- <Radio color="secondary" checked={checked} value="secondary" onChange={handleClick}/>
17
- <Radio color="muted" checked={checked} value="muted" onChange={handleClick}/>
18
- </Fragment>);
19
- };
20
- RadioExample.story = {
21
- name: "default",
22
- };
23
- export const RadioLabelExample = () => {
24
- const [checked, setChecked] = useState(false);
25
- const handleClick = (event) => {
26
- let targetValue = event.target.value ? true : false;
27
- setChecked(targetValue);
28
- };
29
- return (<Fragment>
30
- <Radio label="Radio with Label" checked={checked} value="withLabel" onChange={handleClick}/>
31
- </Fragment>);
32
- };
33
- RadioLabelExample.story = {
34
- name: "with label",
35
- };
36
- export const RadioDisabledExample = () => {
37
- return (<Fragment>
38
- <Radio disabled={true} checked={true}/>
39
- <Radio disabled={true} checked={false}/>
40
- </Fragment>);
41
- };
42
- RadioDisabledExample.story = {
43
- name: "disabled",
44
- };
@@ -1,2 +0,0 @@
1
- export { default as Select } from "./select";
2
- export { default as SelectHelperText } from "./select-helper-text";
@@ -1,6 +0,0 @@
1
- import React from "react";
2
- import { SelectHelperText as MaterialSelectHelperText, } from "@material/react-select";
3
- function SelectHelperText(props) {
4
- return <MaterialSelectHelperText {...props}/>;
5
- }
6
- export default SelectHelperText;