@thecb/components 10.12.6-beta.0 → 11.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (180) hide show
  1. package/README.md +14 -6
  2. package/dist/index.cjs.js +1311 -1482
  3. package/dist/index.cjs.js.map +1 -1
  4. package/dist/index.esm.js +1311 -1483
  5. package/dist/index.esm.js.map +1 -1
  6. package/package.json +25 -13
  7. package/src/.DS_Store +0 -0
  8. package/src/components/.DS_Store +0 -0
  9. package/src/components/atoms/.DS_Store +0 -0
  10. package/src/components/atoms/alert/Alert.mdx +19 -0
  11. package/src/components/atoms/alert/Alert.stories.js +148 -26
  12. package/src/components/atoms/badge/Badge.js +2 -2
  13. package/src/components/atoms/badge/Badge.mdx +27 -0
  14. package/src/components/atoms/badge/Badge.stories.js +143 -29
  15. package/src/components/atoms/breadcrumb/Breadcrumb.mdx +21 -0
  16. package/src/components/atoms/breadcrumb/Breadcrumb.stories.js +38 -29
  17. package/src/components/atoms/button-with-action/ButtonWithAction.stories.js +108 -55
  18. package/src/components/atoms/button-with-link/ButtonWithLink.mdx +21 -0
  19. package/src/components/atoms/button-with-link/ButtonWithLink.stories.js +160 -31
  20. package/src/components/atoms/card/Card.mdx +41 -0
  21. package/src/components/atoms/card/Card.stories.js +351 -0
  22. package/src/components/atoms/card/CardText.js +6 -1
  23. package/src/components/atoms/checkbox/Checkbox.mdx +15 -0
  24. package/src/components/atoms/checkbox/Checkbox.oldstories.js +34 -0
  25. package/src/components/atoms/checkbox/Checkbox.stories.js +140 -25
  26. package/src/components/atoms/country-dropdown/CountryDropdown.mdx +36 -0
  27. package/src/components/atoms/country-dropdown/CountryDropdown.stories.js +61 -27
  28. package/src/components/atoms/detail/Detail.js +0 -26
  29. package/src/components/atoms/detail/Detail.mdx +32 -0
  30. package/src/components/atoms/detail/Detail.stories.js +156 -0
  31. package/src/components/atoms/display-box/DisplayBox.mdx +11 -0
  32. package/src/components/atoms/display-box/DisplayBox.stories.js +65 -21
  33. package/src/components/atoms/display-card/DisplayCard.mdx +13 -0
  34. package/src/components/atoms/display-card/DisplayCard.stories.js +163 -22
  35. package/src/components/atoms/dropdown/Dropdown.mdx +65 -0
  36. package/src/components/atoms/dropdown/Dropdown.stories.js +91 -10
  37. package/src/components/atoms/form-layouts/FormInput.mdx +38 -0
  38. package/src/components/atoms/form-layouts/FormInput.stories.js +212 -26
  39. package/src/components/atoms/form-select/FormSelect.mdx +42 -0
  40. package/src/components/atoms/form-select/FormSelect.stories.js +55 -29
  41. package/src/components/atoms/formatted-address/FormattedAddress.mdx +13 -0
  42. package/src/components/atoms/formatted-address/FormattedAddress.stories.js +133 -27
  43. package/src/components/atoms/formatted-bank-account/FormattedBankAccount.mdx +17 -0
  44. package/src/components/atoms/formatted-bank-account/FormattedBankAccount.stories.js +57 -0
  45. package/src/components/atoms/formatted-credit-card/FormattedCreditCard.mdx +40 -0
  46. package/src/components/atoms/formatted-credit-card/FormattedCreditCard.stories.js +74 -0
  47. package/src/components/atoms/icons/Icons.mdx +40 -0
  48. package/src/components/atoms/icons/Icons.stories.js +325 -0
  49. package/src/components/atoms/labeled-amount/LabeledAmount.mdx +23 -0
  50. package/src/components/atoms/labeled-amount/LabeledAmount.stories.js +110 -34
  51. package/src/components/atoms/line-item/LineItem.mdx +28 -0
  52. package/src/components/atoms/line-item/LineItem.stories.js +89 -22
  53. package/src/components/atoms/link/Link.mdx +19 -0
  54. package/src/components/atoms/link/Link.stories.js +155 -49
  55. package/src/components/atoms/loading/Loading.mdx +13 -0
  56. package/src/components/atoms/loading/Loading.stories.js +22 -0
  57. package/src/components/atoms/loading-line/LoadingLine.js +14 -10
  58. package/src/components/atoms/loading-line/LoadingLine.mdx +15 -0
  59. package/src/components/atoms/loading-line/LoadingLine.stories.js +132 -28
  60. package/src/components/atoms/nav-footer/.DS_Store +0 -0
  61. package/src/components/atoms/nav-footer/NavFooter.mdx +15 -0
  62. package/src/components/atoms/nav-footer/NavFooter.stories.js +235 -22
  63. package/src/components/atoms/nav-header/NavHeader.mdx +13 -0
  64. package/src/components/atoms/nav-header/NavHeader.stories.js +122 -21
  65. package/src/components/atoms/nav-tabs/NavTabs.mdx +30 -0
  66. package/src/components/atoms/nav-tabs/NavTabs.stories.js +49 -0
  67. package/src/components/atoms/password-requirements/PasswordRequirements.mdx +39 -0
  68. package/src/components/atoms/password-requirements/PasswordRequirements.stories.js +108 -44
  69. package/src/components/atoms/placeholder/Placeholder.mdx +19 -0
  70. package/src/components/atoms/placeholder/Placeholder.stories.js +164 -36
  71. package/src/components/atoms/searchable-select/SearchableSelect.mdx +44 -0
  72. package/src/components/atoms/searchable-select/SearchableSelect.stories.js +103 -28
  73. package/src/components/atoms/state-province-dropdown/StateProvinceDropdown.mdx +36 -0
  74. package/src/components/atoms/state-province-dropdown/StateProvinceDropdown.stories.js +65 -40
  75. package/src/components/atoms/table/Table.mdx +71 -0
  76. package/src/components/atoms/table/Table.oldstories.js +84 -0
  77. package/src/components/atoms/table/Table.stories.js +59 -75
  78. package/src/components/atoms/table/TableRow.js +1 -0
  79. package/src/components/atoms/title/Title.js +0 -23
  80. package/src/components/atoms/title/Title.mdx +26 -0
  81. package/src/components/atoms/title/Title.stories.js +144 -0
  82. package/src/components/atoms/toggle-switch/ToggleSwitch.mdx +17 -0
  83. package/src/components/atoms/toggle-switch/ToggleSwitch.stories.js +103 -20
  84. package/src/components/atoms/toggle-switch/ToggleSwitch.theme.js +8 -5
  85. package/src/components/atoms/typeahead-input/TypeaheadInput.mdx +13 -0
  86. package/src/components/atoms/typeahead-input/TypeaheadInput.stories.js +63 -0
  87. package/src/components/molecules/.DS_Store +0 -0
  88. package/src/components/molecules/address-form/AddressForm.mdx +18 -0
  89. package/src/components/molecules/address-form/AddressForm.stories.js +223 -20
  90. package/src/components/molecules/banner/Banner.mdx +23 -0
  91. package/src/components/molecules/banner/Banner.stories.js +122 -26
  92. package/src/components/molecules/change-password-form/ChangePasswordForm.mdx +15 -0
  93. package/src/components/molecules/change-password-form/ChangePasswordForm.stories.js +203 -19
  94. package/src/components/molecules/collapsible-section/CollapsibleSection.mdx +15 -0
  95. package/src/components/molecules/collapsible-section/CollapsibleSection.stories.js +210 -61
  96. package/src/components/molecules/edit-name-form/EditNameForm.mdx +13 -0
  97. package/src/components/molecules/edit-name-form/EditNameForm.stories.js +117 -0
  98. package/src/components/molecules/idle-modal/IdleModal.js +101 -0
  99. package/src/components/molecules/idle-modal/IdleModal.mdx +17 -0
  100. package/src/components/molecules/idle-modal/IdleModal.stories.js +180 -0
  101. package/src/components/molecules/idle-modal/index.d.ts +16 -0
  102. package/src/components/molecules/idle-modal/index.js +3 -0
  103. package/src/components/molecules/index.js +1 -0
  104. package/src/components/molecules/link-card/LinkCard.mdx +17 -0
  105. package/src/components/molecules/link-card/LinkCard.stories.js +287 -72
  106. package/src/components/molecules/login-form/LoginForm.mdx +16 -0
  107. package/src/components/molecules/login-form/LoginForm.stories.js +117 -21
  108. package/src/components/molecules/modal/Modal.mdx +17 -0
  109. package/src/components/molecules/modal/Modal.stories.js +342 -128
  110. package/src/components/molecules/module/Module.mdx +17 -0
  111. package/src/components/molecules/module/Module.stories.js +267 -25
  112. package/src/components/molecules/obligation/.DS_Store +0 -0
  113. package/src/components/molecules/obligation/Obligation.mdx +23 -0
  114. package/src/components/molecules/obligation/Obligation.stories.js +460 -0
  115. package/src/components/molecules/obligation/icons/PropertyPersonalIcon.js +1 -1
  116. package/src/components/molecules/pagination/Pagination.mdx +15 -0
  117. package/src/components/molecules/pagination/Pagination.stories.js +177 -28
  118. package/src/components/molecules/popover/Popover.mdx +15 -0
  119. package/src/components/molecules/popover/Popover.stories.js +220 -0
  120. package/src/components/molecules/tabs/Tabs.mdx +17 -0
  121. package/src/components/molecules/tabs/Tabs.stories.js +135 -227
  122. package/src/components/molecules/toast-notification/Toast.mdx +15 -0
  123. package/src/components/molecules/toast-notification/Toast.stories.js +183 -0
  124. package/src/util/idleTimerUtils.js +36 -0
  125. package/src/util/index.js +3 -1
  126. package/src/components/molecules/edit-name-form/EdidNameForm.stories.js +0 -24
  127. package/src/components/molecules/toast-notification/ToastNotification.stories.js +0 -105
  128. /package/src/components/atoms/add-obligation/{AddObligation.stories.js → AddObligation.oldstories.js} +0 -0
  129. /package/src/components/atoms/amount-callout/{AmountCallout.stories.js → AmountCallout.oldstories.js} +0 -0
  130. /package/src/components/atoms/checkbox-list/{CheckboxList.stories.js → CheckboxList.oldstories.js} +0 -0
  131. /package/src/components/atoms/form-layouts/{FormLayouts.stories.js → FormLayouts.oldstories.js} +0 -0
  132. /package/src/components/atoms/hamburger-button/{HamburgerButton.stories.js → HamburgerButton.oldstories.js} +0 -0
  133. /package/src/components/atoms/heading/{Heading.stories.js → Heading.oldstories.js} +0 -0
  134. /package/src/components/atoms/icons/{icons.stories.js → icons.oldstories.js} +0 -0
  135. /package/src/components/atoms/layouts/examples/box-example/{BoxExample.stories.js → BoxExample.oldstories.js} +0 -0
  136. /package/src/components/atoms/layouts/examples/center-example/{CenterExample.stories.js → CenterExample.oldstories.js} +0 -0
  137. /package/src/components/atoms/layouts/examples/cluster-example/{ClusterExample.stories.js → ClusterExample.oldstories.js} +0 -0
  138. /package/src/components/atoms/layouts/examples/cover-example/{CoverExample.stories.js → CoverExample.oldstories.js} +0 -0
  139. /package/src/components/atoms/layouts/examples/frame-example/{FrameExample.stories.js → FrameExample.oldstories.js} +0 -0
  140. /package/src/components/atoms/layouts/examples/grid-example/{GridExample.stories.js → GridExample.oldstories.js} +0 -0
  141. /package/src/components/atoms/layouts/examples/imposter-example/{ImposterExample.stories.js → ImposterExample.oldstories.js} +0 -0
  142. /package/src/components/atoms/layouts/examples/motion-example/{MotionExample.stories.js → MotionExample.oldstories.js} +0 -0
  143. /package/src/components/atoms/layouts/examples/reel-example/{ReelExample.stories.js → ReelExample.oldstories.js} +0 -0
  144. /package/src/components/atoms/layouts/examples/sidebar-example/{SidebarExample.stories.js → SidebarExample.oldstories.js} +0 -0
  145. /package/src/components/atoms/layouts/examples/stack-example/{StackExample.stories.js → StackExample.oldstories.js} +0 -0
  146. /package/src/components/atoms/layouts/examples/switcher-example/{SwitcherExample.stories.js → SwitcherExample.oldstories.js} +0 -0
  147. /package/src/components/atoms/paragraph/{Paragraph.stories.js → Paragraph.oldstories.js} +0 -0
  148. /package/src/components/atoms/processing-fee/{ProcessingFee.stories.js → ProcessingFee.oldstories.js} +0 -0
  149. /package/src/components/atoms/search/{Search.stories.js → Search.oldstories.js} +0 -0
  150. /package/src/components/atoms/solid-divider/{SolidDivider.stories.js → SolidDivider.oldstories.js} +0 -0
  151. /package/src/components/atoms/sortable-table-heading/{SortableTableHeading.stories.js → SortableTableHeading.oldstories.js} +0 -0
  152. /package/src/components/atoms/spinner/{Spinner.stories.js → Spinner.oldstories.js} +0 -0
  153. /package/src/components/atoms/tab/{Tab.stories.js → Tab.oldstories.js} +0 -0
  154. /package/src/components/atoms/text/{Text.stories.js → Text.oldstories.js} +0 -0
  155. /package/src/components/atoms/typeahead-input/{TypeaheadIinput.stories.js → TypeaheadIinput.oldstories.js} +0 -0
  156. /package/src/components/atoms/wallet-name/{WalletName.stories.js → WalletName.oldstories.js} +0 -0
  157. /package/src/components/molecules/account-and-routing-modal/{AccountAndRoutingModal.stories.js → AccountAndRoutingModal.oldstories.js} +0 -0
  158. /package/src/components/molecules/editable-list/{EditableList.stories.js → EditableList.oldstories.js} +0 -0
  159. /package/src/components/molecules/email-form/{EmailForm.stories.js → EmailForm.oldstories.js} +0 -0
  160. /package/src/components/molecules/forgot-password-form/{ForgotPasswordForm.stories.js → ForgotPasswordForm.oldstories.js} +0 -0
  161. /package/src/components/molecules/highlight-tab-row/{HighlightTabRow.stories.js → HighlightTabRow.oldstories.js} +0 -0
  162. /package/src/components/molecules/multiple-select-filter/{MultipleSelectFilter.stories.js → MultipleSelectFilter.oldstories.js} +0 -0
  163. /package/src/components/molecules/obligation/modules/{AmountModule.stories.js → AmountModule.oldstories.js} +0 -0
  164. /package/src/components/molecules/payment-button-bar/{PaymentButtonBar.stories.js → PaymentButtonBar.oldstories.js} +0 -0
  165. /package/src/components/molecules/payment-details/{PaymentDetails.stories.js → PaymentDetails.oldstories.js} +0 -0
  166. /package/src/components/molecules/payment-form-ach/{PaymentFormACH.stories.js → PaymentFormACH.oldstories.js} +0 -0
  167. /package/src/components/molecules/payment-form-card/{PaymentFormCard.stories.js → PaymentFormCard.oldstories.js} +0 -0
  168. /package/src/components/molecules/periscope-dashboard-iframe/{PeriscopeDashBoardIframe.stories.js → PeriscopeDashBoardIframe.oldstories.js} +0 -0
  169. /package/src/components/molecules/phone-form/{PhoneForm.stories.js → PhoneForm.oldstories.js} +0 -0
  170. /package/src/components/molecules/popup-menu/{PopupMenu.stories.js → PopupMenu.oldstories.js} +0 -0
  171. /package/src/components/molecules/radio-group/{RadioGroup.stories.js → RadioGroup.oldstories.js} +0 -0
  172. /package/src/components/molecules/radio-section/{RadioSection.stories.js → RadioSection.oldstories.js} +0 -0
  173. /package/src/components/molecules/registration-form/{RegistrationForm.stories.js → RegistrationForm.oldstories.js} +0 -0
  174. /package/src/components/molecules/reset-confirmation-form/{ResetConfirmationForm.stories.js → ResetConfirmationForm.oldstories.js} +0 -0
  175. /package/src/components/molecules/reset-password-form/{ResetPasswordForm.stories.js → ResetPasswordForm.oldstories.js} +0 -0
  176. /package/src/components/molecules/reset-password-success/{ResetPasswordSuccess.stories.js → ResetPasswordSuccess.oldstories.js} +0 -0
  177. /package/src/components/molecules/tab-sidebar/{TabSidebar.stories.js → TabSidebar.oldstories.js} +0 -0
  178. /package/src/components/molecules/terms-and-conditions/{TermsAndConditions.stories.js → TermsAndConditions.oldstories.js} +0 -0
  179. /package/src/components/molecules/terms-and-conditions-modal/{TermsAndConditionsModal.stories.js → TermsAndConditionsModal.oldstories.js} +0 -0
  180. /package/src/components/molecules/workflow-tile/{WorkflowTile.stories.js → WorkflowTile.oldstories.js} +0 -0
package/README.md CHANGED
@@ -8,6 +8,7 @@ This library contains CityBase React components for use across all current and f
8
8
  - [Component styles](#component-styles)
9
9
  - [Storybook](#storybook)
10
10
  - [Storybook addons](#storybook-addons)
11
+ - [Storybook deployment](#storybook-deployment)
11
12
  - [Adding new components](#adding-new-components)
12
13
  - [Version bumping and publishing](#version-bumping-and-publishing)
13
14
  - [Version bumping](#version-bumping)
@@ -43,18 +44,21 @@ The following statement will inheritly be called with `yarn`, but you can run it
43
44
 
44
45
  ## Storybook
45
46
 
46
- This repo uses [React Storybook](https://storybook.js.org/basics/guide-react/) for interactive component display.
47
-
48
- ### Storybook addons
49
-
50
- - [Actions](https://github.com/storybooks/storybook/tree/master/addons/actions)
51
- - [Knobs](https://github.com/storybooks/storybook/tree/master/addons/knobs)
47
+ This repo uses [React Storybook](https://storybook.js.org/basics/guide-react/) v8 for interactive component display.
52
48
 
53
49
  Please include new component stories as this library will also be a sandbox.
54
50
 
55
51
  - `yarn storybook`
56
52
  - open browser to localhost:9001
57
53
 
54
+ ### Storybook addons
55
+
56
+ The repo uses all of the standard addons that come with Storybook v8, including the box model visualizer, measuring tool, and themes. The themes are currently static themes derived from FCS output. For the time being, when changes are made to themes in FCS, those changes need to be replicated inside of the `.storybook/themes/` directory in order for component stories to pick up on them. Ideally in the future a script will dynamically pull FCS themes from UAT.
57
+
58
+ ### Storybook deployment
59
+
60
+ Storybook is deployed to GitHub Pages via a workflow action. This action will run on pushes to the master branch. When new PRs are merged to master the action should run on the merge commit and update the deployed version of Storybook. The deployed version lives here: [GH Pages Storybook](https://citybaseinc.github.io/cb-components/). The code for this action lives in `.github/workflows/deploy-github-pages.yml`.
61
+
58
62
  ## Adding new components
59
63
 
60
64
  - New components may be added to this library via pull request. Only components that are currently used in, or expected to be used in, more than one CB frontend should be present in this library. Very niche application specific components should be kept in the `components/atoms` and `components/molecules` directory of their parent application.
@@ -176,3 +180,7 @@ To import multiple components
176
180
  ```
177
181
 
178
182
  ```
183
+
184
+ ### Publishing Storybook to GitHub Pages
185
+
186
+ This is a test to see if the GH Actions publishing workflow is functional.