@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.
- package/README.md +26 -0
- package/dist/components/anchor/anchor.d.ts +1 -1
- package/dist/components/anchor/anchor.stories.d.ts +2 -2
- package/dist/components/anchor/bold-anchor.d.ts +1 -1
- package/dist/components/anchor/bold-anchor.stories.d.ts +2 -2
- package/dist/components/avatar/avatar.d.ts +3 -3
- package/dist/components/avatar/avatar.stories.d.ts +3 -3
- package/dist/components/avatar/image-avatar.d.ts +1 -1
- package/dist/components/avatar/text-avatar.d.ts +1 -1
- package/dist/components/button/button.d.ts +2 -2
- package/dist/components/button/button.stories.d.ts +10 -10
- package/dist/components/button-select/button-select-exhanced.d.ts +23 -0
- package/dist/components/button-select/button-select.d.ts +12 -0
- package/dist/components/button-select/button-select.stories.d.ts +19 -0
- package/dist/components/button-select/index.d.ts +2 -0
- package/dist/components/campaign-card/campaign-card.d.ts +9 -0
- package/dist/components/campaign-card/campaign-card.stories.d.ts +14 -0
- package/dist/components/campaign-card/index.d.ts +1 -0
- package/dist/components/campaign-of-month/campaign-of-month.d.ts +15 -0
- package/dist/components/campaign-of-month/campaign-of-month.stories.d.ts +14 -0
- package/dist/components/campaign-of-month/index.d.ts +1 -0
- package/dist/components/charity-card/charity-card.d.ts +7 -0
- package/dist/components/charity-card/charity-card.stories.d.ts +14 -0
- package/dist/components/charity-card/index.d.ts +1 -0
- package/dist/components/charity-tags-filter-button/FilterIcon.d.ts +6 -0
- package/dist/components/charity-tags-filter-button/charity-tags-filter-button.d.ts +36 -0
- package/dist/components/charity-tags-filter-button/charity-tags-filter-button.stories.d.ts +12 -0
- package/dist/components/charity-tags-filter-button/index.d.ts +1 -0
- package/dist/components/checkbox/checkbox.d.ts +1 -1
- package/dist/components/checkbox/checkbox.stories.d.ts +4 -4
- package/dist/components/chips/chip.d.ts +2 -2
- package/dist/components/chips/chips.d.ts +2 -2
- package/dist/components/chips/chips.stories.d.ts +4 -4
- package/dist/components/chips/input-chips.d.ts +1 -1
- package/dist/components/chips/input-chips.stories.d.ts +2 -2
- package/dist/components/collapse/collapse.d.ts +21 -0
- package/dist/components/collapse/collapse.stories.d.ts +19 -0
- package/dist/components/collapse/icons.d.ts +4 -0
- package/dist/components/collapse/index.d.ts +1 -0
- package/dist/components/combo-field/combo-field-expander.d.ts +1 -1
- package/dist/components/combo-field/combo-field.d.ts +4 -1
- package/dist/components/combo-field/combo-field.stories.d.ts +3 -3
- package/dist/components/comment-section/comment-section-v2/comment-section-v2.d.ts +31 -0
- package/dist/components/comment-section/comment-section-v2/sub-comments-v2.d.ts +11 -0
- package/dist/components/comment-section/comment-section.d.ts +15 -0
- package/dist/components/comment-section/comment-section.stories.d.ts +19 -0
- package/dist/components/comment-section/comment-type.d.ts +10 -0
- package/dist/components/comment-section/index.d.ts +2 -0
- package/dist/components/comment-section/sub-comments.d.ts +6 -0
- package/dist/components/cropper/cropper.d.ts +4 -4
- package/dist/components/cropper/cropper.stories.d.ts +3 -4
- package/dist/components/date-picker/date-picker.d.ts +1 -1
- package/dist/components/date-picker/date-picker.stories.d.ts +11 -5
- package/dist/components/date-picker/index.d.ts +1 -0
- package/dist/components/date-picker/single-date-picker-custom-header.d.ts +32 -0
- package/dist/components/date-picker/single-date-picker.d.ts +5 -3
- package/dist/components/donate-card/donate-card.d.ts +8 -0
- package/dist/components/donate-card/donate-card.stories.d.ts +14 -0
- package/dist/components/donate-card/index.d.ts +1 -0
- package/dist/components/donation-form/donation-details.d.ts +12 -0
- package/dist/components/donation-form/donation-form-v2/donation-form-v2.d.ts +13 -0
- package/dist/components/donation-form/donation-form.d.ts +64 -0
- package/dist/components/donation-form/donation-form.stories.d.ts +18 -0
- package/dist/components/donation-form/donation-payment.d.ts +13 -0
- package/dist/components/donation-form/donation-select.d.ts +13 -0
- package/dist/components/donation-form/index.d.ts +2 -0
- package/dist/components/{index.js → donation.d.ts} +3 -12
- package/dist/components/elevation/elevation.d.ts +2 -1
- package/dist/components/elevation/elevation.stories.d.ts +2 -2
- package/dist/components/favorite-charity-item/favorite-charity-item.d.ts +15 -0
- package/dist/components/favorite-charity-item/favorite-charity-item.stories.d.ts +15 -0
- package/dist/components/favorite-charity-item/index.d.ts +1 -0
- package/dist/components/featured-campaign-card/featured-campaign-card.d.ts +17 -0
- package/dist/components/featured-campaign-card/featured-campaign-card.stories.d.ts +14 -0
- package/dist/components/featured-campaign-card/index.d.ts +1 -0
- package/dist/components/field-helpers/field-helper-text.d.ts +2 -2
- package/dist/components/field-helpers/field-label.d.ts +2 -1
- package/dist/components/footerV2/footerV2.d.ts +35 -0
- package/dist/components/{phone-number-input/phone-number-field.stories.d.ts → footerV2/footerV2.stories.d.ts} +5 -3
- package/dist/components/footerV2/index.d.ts +1 -0
- package/dist/components/fundraising-section/fundraising-section.d.ts +9 -0
- package/dist/components/fundraising-section/fundraising-section.stories.d.ts +14 -0
- package/dist/components/fundraising-section/index.d.ts +1 -0
- package/dist/components/hero-banner/hero-banner.d.ts +9 -0
- package/dist/components/hero-banner/hero-banner.stories.d.ts +14 -0
- package/dist/components/hero-banner/index.d.ts +1 -0
- package/dist/components/horizontalbar/horizontalbar.d.ts +11 -0
- package/dist/components/horizontalbar/horizontalbar.stories.d.ts +26 -0
- package/dist/components/horizontalbar/index.d.ts +1 -0
- package/dist/components/icon/btn_google_light_normal_ios.svg.d.ts +1 -1
- package/dist/components/icon/facebook_6.svg.d.ts +1 -1
- package/dist/components/icon/heart-toggle.d.ts +11 -0
- package/dist/components/icon/{toggle-button.stories.d.ts → heart-toggle.stories.d.ts} +3 -3
- package/dist/components/icon/icon-button-group.d.ts +1 -1
- package/dist/components/icon/icon-button-group.stories.d.ts +2 -2
- package/dist/components/icon/icon-button.d.ts +1 -1
- package/dist/components/icon/icon-button.stories.d.ts +3 -3
- package/dist/components/icon/icon.d.ts +1 -1
- package/dist/components/icon/icon.stories.d.ts +4 -4
- package/dist/components/icon/index.d.ts +1 -1
- package/dist/components/icon/material-icon.d.ts +2 -2
- package/dist/components/index.d.ts +37 -0
- package/dist/components/info-represent-campaign/index.d.ts +1 -0
- package/dist/components/info-represent-campaign/info-represent-campaign.d.ts +11 -0
- package/dist/components/info-represent-campaign/info-represent-campaign.stories.d.ts +12 -0
- package/dist/components/input/InputDefault.d.ts +13 -0
- package/dist/components/input/index.d.ts +1 -0
- package/dist/components/input/input.stories.d.ts +24 -0
- package/dist/components/input-social/Icons.d.ts +8 -0
- package/dist/components/input-social/InputSocial.d.ts +12 -0
- package/dist/components/input-social/index.d.ts +1 -0
- package/dist/components/{phone-number-field/phone-number-field.stories.d.ts → input-social/input-social.stories.d.ts} +3 -3
- package/dist/components/layout/box.d.ts +232 -224
- package/dist/components/layout/flex.d.ts +4 -4
- package/dist/components/layout/flex.stories.d.ts +2 -2
- package/dist/components/layout/grid.d.ts +2 -2
- package/dist/components/layout/grid.stories.d.ts +2 -2
- package/dist/components/layout/stack.d.ts +2 -2
- package/dist/components/layout/stack.stories.d.ts +4 -4
- package/dist/components/list/list.d.ts +30 -15
- package/dist/components/list/list.stories.d.ts +14 -8
- package/dist/components/login/index.d.ts +1 -0
- package/dist/components/login/login.d.ts +18 -0
- package/dist/components/login/login.stories.d.ts +19 -0
- package/dist/components/logo/logo-type.d.ts +4 -3
- package/dist/components/menu/menu-list-item.d.ts +2 -2
- package/dist/components/menu/menu-list.d.ts +2 -2
- package/dist/components/menu/menu.stories.d.ts +2 -2
- package/dist/components/modal/index.d.ts +1 -0
- package/dist/components/modal/modal-image.d.ts +8 -0
- package/dist/components/modal/modal.d.ts +7 -3
- package/dist/components/modal/modal.stories.d.ts +22 -4
- package/dist/components/my-account-choose-charity-card/index.d.ts +1 -0
- package/dist/components/my-account-choose-charity-card/my-account-choose-charity-card.d.ts +11 -0
- package/dist/components/my-account-choose-charity-card/my-account-choose-charity-card.stories.d.ts +14 -0
- package/dist/components/my-account-frp-closed/Icon.d.ts +5 -0
- package/dist/components/my-account-frp-closed/frp-closed-img.d.ts +8 -0
- package/dist/components/my-account-frp-closed/frp-information.d.ts +16 -0
- package/dist/components/my-account-frp-closed/index.d.ts +1 -0
- package/dist/components/my-account-frp-closed/my-account-frp-closed.d.ts +20 -0
- package/dist/components/my-account-frp-closed/my-account-frp-closed.stories.d.ts +24 -0
- package/dist/components/my-account-frp-preview/Icon.d.ts +5 -0
- package/dist/components/my-account-frp-preview/frp-information.d.ts +13 -0
- package/dist/components/my-account-frp-preview/frp-preview-img.d.ts +9 -0
- package/dist/components/my-account-frp-preview/index.d.ts +1 -0
- package/dist/components/my-account-frp-preview/my-account-frp-preview.d.ts +17 -0
- package/dist/components/my-account-frp-preview/my-account-frp-preview.stories.d.ts +24 -0
- package/dist/components/my-account-sidebar/Icon.d.ts +15 -0
- package/dist/components/my-account-sidebar/index.d.ts +1 -0
- package/dist/components/my-account-sidebar/my-account-sidebar.d.ts +19 -0
- package/dist/components/my-account-sidebar/my-account-sidebar.stories.d.ts +12 -0
- package/dist/components/my-account-start-fundraise-card/index.d.ts +1 -0
- package/dist/components/my-account-start-fundraise-card/my-account-start-fundraise-card.d.ts +13 -0
- package/dist/components/my-account-start-fundraise-card/my-account-start-fundraise-card.stories.d.ts +20 -0
- package/dist/components/my-account-stats-donated/index.d.ts +1 -0
- package/dist/components/my-account-stats-donated/my-account-stats-donated.d.ts +8 -0
- package/dist/components/my-account-stats-donated/my-account-stats-donated.stories.d.ts +12 -0
- package/dist/components/my-account-stats-raised/index.d.ts +1 -0
- package/dist/components/my-account-stats-raised/my-account-stats-raised.d.ts +7 -0
- package/dist/components/my-account-stats-raised/my-account-stats-raised.stories.d.ts +12 -0
- package/dist/components/nav/charity.d.ts +3 -0
- package/dist/components/nav/icons/IconBigger.d.ts +5 -0
- package/dist/components/nav/icons/IconSmaller.d.ts +5 -0
- package/dist/components/nav/index.d.ts +2 -0
- package/dist/components/nav/nav-actions.d.ts +5 -0
- package/dist/components/nav/nav-bar.d.ts +7 -0
- package/dist/components/nav/nav-call-to-action.d.ts +5 -0
- package/dist/components/nav/nav-charity.d.ts +7 -0
- package/dist/components/nav/nav-expanded-charity-new.d.ts +12 -0
- package/dist/components/nav/nav-expanded-charity.d.ts +14 -0
- package/dist/components/nav/nav-expanded.d.ts +14 -0
- package/dist/components/nav/nav-list.d.ts +29 -0
- package/dist/components/nav/nav-menu-control.d.ts +8 -0
- package/dist/components/nav/nav-menu.d.ts +12 -0
- package/dist/components/nav/nav-myaccount.d.ts +23 -0
- package/dist/components/nav/nav-search-control.d.ts +8 -0
- package/dist/components/nav/nav-search.d.ts +10 -0
- package/dist/components/nav/nav-sign-in-control.d.ts +12 -0
- package/dist/components/nav/nav-user-menu-items.d.ts +20 -0
- package/dist/components/nav/nav-user-menu.d.ts +18 -0
- package/dist/components/nav/nav.d.ts +62 -0
- package/dist/components/nav/nav.stories.d.ts +17 -0
- package/dist/components/navigation/navigation-actions.d.ts +1 -1
- package/dist/components/navigation/navigation-bar.d.ts +2 -2
- package/dist/components/navigation/navigation-call-to-action.d.ts +3 -3
- package/dist/components/navigation/navigation-expanded.d.ts +2 -2
- package/dist/components/navigation/navigation-list.d.ts +9 -7
- package/dist/components/navigation/navigation-menu-control.d.ts +1 -1
- package/dist/components/navigation/navigation-menu.d.ts +4 -3
- package/dist/components/navigation/navigation-search-control.d.ts +2 -2
- package/dist/components/navigation/navigation-search.d.ts +2 -2
- package/dist/components/navigation/navigation-sign-in-control.d.ts +6 -3
- package/dist/components/navigation/navigation-user-menu-items.d.ts +6 -6
- package/dist/components/navigation/navigation-user-menu.d.ts +4 -4
- package/dist/components/navigation/navigation.d.ts +17 -6
- package/dist/components/navigation/navigation.stories.d.ts +7 -25
- package/dist/components/partner-chart-stats/index.d.ts +1 -0
- package/dist/components/partner-chart-stats/partner-chart-stats.d.ts +11 -0
- package/dist/components/partner-chart-stats/partner-chart-stats.stories.d.ts +18 -0
- package/dist/components/partner-monthly-donations/index.d.ts +1 -0
- package/dist/components/partner-monthly-donations/partner-monthly-donations.d.ts +8 -0
- package/dist/components/partner-monthly-donations/partner-monthly-donations.stories.d.ts +12 -0
- package/dist/components/partner-monthly-stats/index.d.ts +1 -0
- package/dist/components/partner-monthly-stats/partner-monthly-stats.d.ts +7 -0
- package/dist/components/partner-monthly-stats/partner-monthly-stats.stories.d.ts +12 -0
- package/dist/components/partner-toggle-button/index.d.ts +2 -0
- package/dist/components/partner-toggle-button/partner-toggle-button-block.d.ts +11 -0
- package/dist/components/partner-toggle-button/partner-toggle-button-block.stories.d.ts +12 -0
- package/dist/components/partner-toggle-button/partner-toggle-button.d.ts +8 -0
- package/dist/components/phone-number-input/index.d.ts +2 -1
- package/dist/components/{phone-number-field/phone-number-field.d.ts → phone-number-input/phone-number-input-v1.d.ts} +8 -4
- package/dist/components/phone-number-input/phone-number-input-v2.d.ts +19 -0
- package/dist/components/phone-number-input/phone-number-input.d.ts +22 -11
- package/dist/components/phone-number-input/phone-number-input.stories.d.ts +43 -0
- package/dist/components/popup/index.d.ts +1 -0
- package/dist/components/popup/popup.d.ts +8 -0
- package/dist/components/popup/popup.stories.d.ts +14 -0
- package/dist/components/progressbar/index.d.ts +1 -0
- package/dist/components/progressbar/progress-bar-circle.d.ts +10 -0
- package/dist/components/progressbar/progressbar.d.ts +8 -0
- package/dist/components/progressbar/progressbar.stories.d.ts +20 -0
- package/dist/components/radio/radio-group.d.ts +1 -1
- package/dist/components/radio/radio-group.stories.d.ts +2 -2
- package/dist/components/radio/radio.d.ts +1 -1
- package/dist/components/radio/radio.stories.d.ts +4 -4
- package/dist/components/select/index.d.ts +2 -0
- package/dist/components/select/select-enhanced.d.ts +24 -0
- package/dist/components/select/select-helper-text.d.ts +1 -1
- package/dist/components/select/select-v2.d.ts +27 -0
- package/dist/components/select/select.d.ts +6 -3
- package/dist/components/select/select.stories.d.ts +14 -2
- package/dist/components/spinner/index.d.ts +1 -0
- package/dist/components/spinner/spinner.d.ts +9 -0
- package/dist/components/spinner/spinner.stories.d.ts +19 -0
- package/dist/components/statistics/statistics.d.ts +2 -1
- package/dist/components/statistics/statistics.stories.d.ts +2 -2
- package/dist/components/switch/index.d.ts +1 -0
- package/dist/components/switch/switch-v2.d.ts +8 -0
- package/dist/components/switch/switch.d.ts +1 -1
- package/dist/components/switch/switch.stories.d.ts +10 -4
- package/dist/components/table/index.d.ts +1 -0
- package/dist/components/table/partner-monthly-table.d.ts +19 -0
- package/dist/components/table/partner-monthly-table.stories.d.ts +18 -0
- package/dist/components/tabs/nav-tabs.d.ts +18 -0
- package/dist/components/tabs/tab-text-label.d.ts +1 -1
- package/dist/components/tabs/tabs.d.ts +4 -2
- package/dist/components/tabs/tabs.stories.d.ts +2 -2
- package/dist/components/text/text.d.ts +4 -5
- package/dist/components/text/text.stories.d.ts +7 -7
- package/dist/components/text-field/index.d.ts +1 -0
- package/dist/components/text-field/text-field-helper-text.d.ts +1 -1
- package/dist/components/text-field/text-field-search.d.ts +10 -0
- package/dist/components/text-field/text-field.d.ts +2 -0
- package/dist/components/text-field/text-field.stories.d.ts +8 -2
- package/dist/components/this-month-card/index.d.ts +1 -0
- package/dist/components/this-month-card/this-month-card.d.ts +15 -0
- package/dist/components/this-month-card/this-month-card.stories.d.ts +12 -0
- package/dist/components/toast/Icons.d.ts +7 -0
- package/dist/components/toast/index.d.ts +1 -0
- package/dist/components/toast/toast.d.ts +8 -0
- package/dist/components/toast/toast.stories.d.ts +12 -0
- package/dist/components/transaction-card/Dot.d.ts +6 -0
- package/dist/components/transaction-card/index.d.ts +1 -0
- package/dist/components/transaction-card/transaction-card.d.ts +16 -0
- package/dist/components/transaction-card/transaction-card.stories.d.ts +20 -0
- package/dist/components/uploader/uploader.d.ts +1 -1
- package/dist/donation.css +2 -0
- package/dist/donation.css.map +1 -0
- package/dist/donation.d.ts +3 -0
- package/dist/donation.esm.css +2 -0
- package/dist/donation.esm.css.map +1 -0
- package/dist/donation.esm.js +25306 -0
- package/dist/donation.js +25361 -0
- package/dist/index.css +2 -0
- package/dist/index.css.map +1 -0
- package/dist/index.esm.css +2 -0
- package/dist/index.esm.css.map +1 -0
- package/dist/index.esm.js +28997 -7215
- package/dist/index.js +29030 -7199
- package/dist/theme/theme.d.ts +9 -5
- package/dist/utils/center-decorator.d.ts +1 -1
- package/dist/utils/component-matrix.d.ts +1 -1
- package/dist/utils/grid-decorator.d.ts +1 -1
- package/dist/utils/parse-numbers.d.ts +2 -0
- package/package.json +34 -20
- package/styles/index.css +5 -6883
- package/styles/index.css.map +1 -0
- package/styles/reset.css +2 -315
- package/styles/reset.css.map +1 -0
- package/CHANGELOG.md +0 -340
- package/dist/components/anchor/anchor.jsx +0 -35
- package/dist/components/anchor/anchor.stories.jsx +0 -12
- package/dist/components/anchor/bold-anchor.jsx +0 -33
- package/dist/components/anchor/bold-anchor.stories.jsx +0 -11
- package/dist/components/anchor/index.js +0 -2
- package/dist/components/avatar/avatar.jsx +0 -14
- package/dist/components/avatar/avatar.stories.jsx +0 -17
- package/dist/components/avatar/image-avatar.jsx +0 -29
- package/dist/components/avatar/index.js +0 -1
- package/dist/components/avatar/text-avatar.jsx +0 -47
- package/dist/components/button/button.jsx +0 -85
- package/dist/components/button/button.stories.jsx +0 -118
- package/dist/components/button/index.js +0 -1
- package/dist/components/checkbox/checkbox.jsx +0 -39
- package/dist/components/checkbox/checkbox.stories.jsx +0 -42
- package/dist/components/checkbox/index.js +0 -1
- package/dist/components/chips/chip.jsx +0 -30
- package/dist/components/chips/chips.jsx +0 -16
- package/dist/components/chips/chips.stories.jsx +0 -35
- package/dist/components/chips/index.js +0 -3
- package/dist/components/chips/input-chips.jsx +0 -16
- package/dist/components/chips/input-chips.stories.jsx +0 -39
- package/dist/components/combo-field/combo-field-expander.jsx +0 -23
- package/dist/components/combo-field/combo-field.jsx +0 -93
- package/dist/components/combo-field/combo-field.stories.jsx +0 -62
- package/dist/components/combo-field/index.js +0 -2
- package/dist/components/cropper/cropper.jsx +0 -15
- package/dist/components/cropper/cropper.stories.jsx +0 -18
- package/dist/components/cropper/index.js +0 -1
- package/dist/components/date-picker/date-picker.jsx +0 -74
- package/dist/components/date-picker/date-picker.stories.jsx +0 -46
- package/dist/components/date-picker/index.js +0 -2
- package/dist/components/date-picker/single-date-picker.jsx +0 -81
- package/dist/components/elevation/elevation.jsx +0 -19
- package/dist/components/elevation/elevation.stories.jsx +0 -31
- package/dist/components/elevation/index.js +0 -1
- package/dist/components/field-helpers/field-helper-text.jsx +0 -42
- package/dist/components/field-helpers/field-label.jsx +0 -29
- package/dist/components/field-helpers/index.js +0 -2
- package/dist/components/icon/btn_google_light_normal_ios.svg.jsx +0 -21
- package/dist/components/icon/facebook_6.svg.jsx +0 -13
- package/dist/components/icon/icon-button-group.jsx +0 -51
- package/dist/components/icon/icon-button-group.stories.jsx +0 -26
- package/dist/components/icon/icon-button.jsx +0 -48
- package/dist/components/icon/icon-button.stories.jsx +0 -33
- package/dist/components/icon/icon.jsx +0 -49
- package/dist/components/icon/icon.stories.jsx +0 -78
- package/dist/components/icon/index.js +0 -4
- package/dist/components/icon/material-icon.jsx +0 -18
- package/dist/components/icon/toggle-button.d.ts +0 -11
- package/dist/components/icon/toggle-button.jsx +0 -29
- package/dist/components/icon/toggle-button.stories.jsx +0 -16
- package/dist/components/layout/box.jsx +0 -58
- package/dist/components/layout/flex.jsx +0 -55
- package/dist/components/layout/flex.stories.jsx +0 -44
- package/dist/components/layout/grid.jsx +0 -19
- package/dist/components/layout/grid.stories.jsx +0 -29
- package/dist/components/layout/index.js +0 -4
- package/dist/components/layout/stack.jsx +0 -33
- package/dist/components/layout/stack.stories.jsx +0 -40
- package/dist/components/list/index.js +0 -1
- package/dist/components/list/list.jsx +0 -52
- package/dist/components/list/list.stories.jsx +0 -135
- package/dist/components/logo/index.js +0 -1
- package/dist/components/logo/logo-type.jsx +0 -65
- package/dist/components/menu/index.js +0 -8
- package/dist/components/menu/menu-list-divider.jsx +0 -2
- package/dist/components/menu/menu-list-item-graphic.jsx +0 -2
- package/dist/components/menu/menu-list-item-meta.jsx +0 -2
- package/dist/components/menu/menu-list-item-text.jsx +0 -2
- package/dist/components/menu/menu-list-item.jsx +0 -11
- package/dist/components/menu/menu-list.jsx +0 -18
- package/dist/components/menu/menu-surface.jsx +0 -4
- package/dist/components/menu/menu.jsx +0 -2
- package/dist/components/menu/menu.stories.jsx +0 -42
- package/dist/components/modal/index.js +0 -1
- package/dist/components/modal/modal.jsx +0 -49
- package/dist/components/modal/modal.stories.jsx +0 -47
- package/dist/components/navigation/index.js +0 -1
- package/dist/components/navigation/navigation-actions.jsx +0 -8
- package/dist/components/navigation/navigation-bar.jsx +0 -42
- package/dist/components/navigation/navigation-call-to-action.jsx +0 -6
- package/dist/components/navigation/navigation-expanded.jsx +0 -165
- package/dist/components/navigation/navigation-list.jsx +0 -126
- package/dist/components/navigation/navigation-menu-control.jsx +0 -25
- package/dist/components/navigation/navigation-menu.jsx +0 -103
- package/dist/components/navigation/navigation-search-control.jsx +0 -8
- package/dist/components/navigation/navigation-search.jsx +0 -63
- package/dist/components/navigation/navigation-sign-in-control.jsx +0 -14
- package/dist/components/navigation/navigation-user-menu-items.jsx +0 -36
- package/dist/components/navigation/navigation-user-menu.jsx +0 -121
- package/dist/components/navigation/navigation.jsx +0 -137
- package/dist/components/navigation/navigation.stories.jsx +0 -260
- package/dist/components/phone-number-field/index.d.ts +0 -2
- package/dist/components/phone-number-field/index.js +0 -2
- package/dist/components/phone-number-field/phone-number-field.jsx +0 -50
- package/dist/components/phone-number-field/phone-number-field.stories.jsx +0 -23
- package/dist/components/phone-number-field/util.d.ts +0 -2
- package/dist/components/phone-number-field/util.js +0 -19
- package/dist/components/phone-number-input/index.js +0 -3
- package/dist/components/phone-number-input/phone-number-field.d.ts +0 -23
- package/dist/components/phone-number-input/phone-number-field.jsx +0 -50
- package/dist/components/phone-number-input/phone-number-field.stories.jsx +0 -16
- package/dist/components/phone-number-input/phone-number-input.jsx +0 -48
- package/dist/components/phone-number-input/util.js +0 -19
- package/dist/components/radio/index.js +0 -2
- package/dist/components/radio/radio-group.jsx +0 -9
- package/dist/components/radio/radio-group.stories.jsx +0 -21
- package/dist/components/radio/radio.jsx +0 -31
- package/dist/components/radio/radio.stories.jsx +0 -44
- package/dist/components/select/index.js +0 -2
- package/dist/components/select/select-helper-text.jsx +0 -6
- package/dist/components/select/select.jsx +0 -152
- package/dist/components/select/select.stories.jsx +0 -40
- package/dist/components/statistics/index.js +0 -1
- package/dist/components/statistics/statistics.jsx +0 -61
- package/dist/components/statistics/statistics.stories.jsx +0 -34
- package/dist/components/switch/index.js +0 -1
- package/dist/components/switch/switch.jsx +0 -32
- package/dist/components/switch/switch.stories.jsx +0 -41
- package/dist/components/tabs/index.js +0 -1
- package/dist/components/tabs/tab-bar.jsx +0 -35
- package/dist/components/tabs/tab-text-label.jsx +0 -5
- package/dist/components/tabs/tab.jsx +0 -50
- package/dist/components/tabs/tabs.jsx +0 -65
- package/dist/components/tabs/tabs.stories.jsx +0 -27
- package/dist/components/text/index.js +0 -1
- package/dist/components/text/text.jsx +0 -138
- package/dist/components/text/text.stories.jsx +0 -262
- package/dist/components/text-field/index.js +0 -2
- package/dist/components/text-field/text-field-helper-text.jsx +0 -8
- package/dist/components/text-field/text-field.jsx +0 -124
- package/dist/components/text-field/text-field.stories.jsx +0 -32
- package/dist/components/uploader/index.js +0 -1
- package/dist/components/uploader/uploader.jsx +0 -96
- package/dist/input.d.ts +0 -1
- package/dist/input.js +0 -4
- package/dist/input.jsx +0 -4
- package/dist/theme/colors.js +0 -9
- package/dist/theme/index.js +0 -2
- package/dist/theme/mycause-theme.js +0 -33
- package/dist/theme/theme.jsx +0 -36
- package/dist/utils/browser.js +0 -19
- package/dist/utils/center-decorator.jsx +0 -15
- package/dist/utils/component-matrix.jsx +0 -39
- package/dist/utils/flags.js +0 -18
- package/dist/utils/grid-decorator.jsx +0 -27
- package/dist/utils/tap-event.js +0 -11
- 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,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,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,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,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
|
-
};
|