@thecb/components 5.9.1 → 5.10.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 (42) hide show
  1. package/dist/index.cjs.js +350 -157
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +350 -157
  4. package/dist/index.esm.js.map +1 -1
  5. package/package.json +11 -11
  6. package/src/components/atoms/amount-callout/AmountCallout.theme.js +1 -1
  7. package/src/components/atoms/button-with-action/ButtonWithAction.js +2 -0
  8. package/src/components/atoms/button-with-link/ButtonWithLink.js +10 -1
  9. package/src/components/atoms/icons/AutopayOnIcon.js +4 -10
  10. package/src/components/atoms/layouts/Box.styled.js +3 -5
  11. package/src/components/atoms/layouts/Cluster.js +1 -1
  12. package/src/components/atoms/layouts/Cluster.styled.js +1 -1
  13. package/src/components/atoms/layouts/examples/cluster-example/ClusterExample.stories.js +5 -12
  14. package/src/components/atoms/layouts/examples/cover-example/CoverExample.stories.js +2 -6
  15. package/src/components/atoms/layouts/examples/grid-example/GridExample.stories.js +3 -6
  16. package/src/components/atoms/layouts/examples/sidebar-example/SidebarExample.stories.js +3 -6
  17. package/src/components/atoms/layouts/examples/stack-example/StackExample.stories.js +5 -12
  18. package/src/components/atoms/layouts/examples/switcher-example/SwitcherExample.stories.js +4 -9
  19. package/src/components/atoms/link/ExternalLink.js +2 -0
  20. package/src/components/atoms/link/InternalLink.js +2 -0
  21. package/src/components/atoms/placeholder/Placeholder.js +1 -1
  22. package/src/components/atoms/text/Text.js +2 -0
  23. package/src/components/atoms/text/Text.styled.js +1 -0
  24. package/src/components/molecules/obligation/Obligation.js +46 -16
  25. package/src/components/molecules/obligation/modules/AmountModule.js +1 -0
  26. package/src/components/molecules/obligation/modules/AutopayModalModule.js +80 -47
  27. package/src/components/molecules/obligation/modules/InactiveControlsModule.js +20 -10
  28. package/src/components/molecules/obligation/modules/InactiveTitleModule.js +2 -2
  29. package/src/components/molecules/obligation/modules/PaymentDetailsActions.js +8 -9
  30. package/src/components/molecules/obligation/modules/RemoveAccountModalModule.js +62 -0
  31. package/src/components/molecules/obligation/modules/index.js +3 -1
  32. package/src/components/molecules/payment-details/PaymentDetails.js +80 -7
  33. package/src/components/molecules/payment-details/PaymentDetails.stories.js +93 -3
  34. package/src/components/molecules/tab-sidebar/TabSidebar.js +3 -2
  35. package/src/components/molecules/workflow-tile/WorkflowTile.js +1 -0
  36. package/src/components/templates/center-single/CenterSingle.js +2 -1
  37. package/src/components/templates/center-stack/CenterStack.js +2 -1
  38. package/src/components/templates/default-page-template/DefaultPageTemplate.js +2 -1
  39. package/src/components/templates/sidebar-single-content/SidebarSingleContent.js +2 -1
  40. package/src/components/templates/sidebar-stack-content/SidebarStackContent.js +2 -1
  41. package/src/components/templates/templates.theme.js +1 -1
  42. package/src/constants/colors.js +10 -8
package/src/components/templates/default-page-template/DefaultPageTemplate.js CHANGED
@@ -4,6 +4,7 @@ import { fallbackValues } from "../templates.theme";
4
4
  import { themeComponent } from "../../../util/themeUtils";
5
5
  import withWindowResize from "../../withWindowSize";
6
6
  import { Box, Center, Cover } from "../../atoms/layouts";
7
+ import { COOL_GREY_05 } from "../../../constants/colors";
7
8
 
8
9
  const CenterSingle = ({
9
10
  header,
@@ -22,7 +23,7 @@ const CenterSingle = ({
22
23
  <Box
23
24
  padding="0"
24
25
  minWidth="100%"
25
- background={themeValues.pageBackground}
26
+ background={COOL_GREY_05}
26
27
  extraStyles="flex-grow: 1;"
27
28
  >
28
29
  <Cover childGap="0" fillCenter>
package/src/components/templates/sidebar-single-content/SidebarSingleContent.js CHANGED
@@ -4,6 +4,7 @@ import { fallbackValues } from "../templates.theme";
4
4
  import { themeComponent } from "../../../util/themeUtils";
5
5
  import withWindowResize from "../../withWindowSize";
6
6
  import { Box, Center, Cover, Sidebar } from "../../atoms/layouts";
7
+ import { COOL_GREY_05 } from "../../../constants/colors";
7
8
 
8
9
  const SidebarSingleContent = ({
9
10
  header,
@@ -28,7 +29,7 @@ const SidebarSingleContent = ({
28
29
  <Box
29
30
  padding="0"
30
31
  minWidth="100%"
31
- background={themeValues.pageBackground}
32
+ background={COOL_GREY_05}
32
33
  extraStyles="flex-grow: 1;"
33
34
  >
34
35
  <Cover centerOverride={!sidebarVerticalCenter}>
package/src/components/templates/sidebar-stack-content/SidebarStackContent.js CHANGED
@@ -4,6 +4,7 @@ import { fallbackValues } from "../templates.theme";
4
4
  import { themeComponent } from "../../../util/themeUtils";
5
5
  import withWindowResize from "../../withWindowSize";
6
6
  import { Box, Center, Cover, Sidebar, Stack } from "../../atoms/layouts";
7
+ import { COOL_GREY_05 } from "../../../constants/colors";
7
8
 
8
9
  const SidebarStackContent = ({
9
10
  header,
@@ -29,7 +30,7 @@ const SidebarStackContent = ({
29
30
  <Box
30
31
  padding="0"
31
32
  minWidth="100%"
32
- background={themeValues.pageBackground}
33
+ background={COOL_GREY_05}
33
34
  key="page-bg"
34
35
  extraStyles="flex-grow: 1;"
35
36
  >
package/src/components/templates/templates.theme.js CHANGED
@@ -1,4 +1,4 @@
1
- const pageBackground = "#F6F6F9";
1
+ const pageBackground = "#FBFCFD";
2
2
 
3
3
  export const fallbackValues = {
4
4
  pageBackground
package/src/constants/colors.js CHANGED
@@ -15,25 +15,26 @@ const AQUA_HAZE_WHITE = "#F7F9FA";
15
15
  const BLEACH_WHITE = "#FEF4d7";
16
16
  const CATSKILL_WHITE = "#EAF2F6";
17
17
  // GREY
18
- const ATHENS_GREY = "#F6F6F9";
18
+ const ATHENS_GREY = "#F6F6F9"; // CBS-100
19
19
  const ALTO_GREY = "#d1d1d1";
20
20
  const SILVER_GREY = "#cdcdcd";
21
21
  const PEWTER_GREY = "#DFE1E4";
22
22
  const ASH_GREY = "#979797";
23
23
  const IRON_GREY = "#d5d8dc";
24
- const GHOST_GREY = "#CACED8";
24
+ const GHOST_GREY = "#CACED8"; // CBS-300
25
25
  const DUSTY_GREY = "#9B9B9B";
26
26
  const REGENT_GREY = "#959EA7";
27
- const STORM_GREY = "#6D717E";
27
+ const STORM_GREY = "#6D717E"; // CBS-700
28
28
  const TROUT_GREY = "#515660";
29
29
  const MINESHAFT_GREY = "#333333";
30
30
  const SOOT_GREY = "#999999";
31
31
  const FIREFLY_GREY = "#091325";
32
- const BRIGHT_GREY = "#3B414D";
33
- const CHARADE_GREY = "#292A33";
34
- const GRECIAN_GREY = "#E5E7EC";
32
+ const BRIGHT_GREY = "#3B414D"; // CBS-800
33
+ const CHARADE_GREY = "#292A33"; // CBS-900
34
+ const GRECIAN_GREY = "#E5E7EC"; // CBS-200
35
35
  const BLACK_SQUEEZE = "#EAF2F7";
36
- const GREY_CHATEAU = "#959CA8";
36
+ const GREY_CHATEAU = "#959CA8"; // CBS-500
37
+ const COOL_GREY_05 = "#fbfcfd"; // CBS-050
37
38
  // BLUE
38
39
  const CLOUDBURST_BLUE = "#26395c";
39
40
  const ZODIAC_BLUE = "#14284b";
@@ -67,7 +68,7 @@ const MUSTARD_YELLOW = "#FFD459";
67
68
  const FIRE_YELLOW = "#B34A00";
68
69
  // ORANGE
69
70
  const CARROT_ORANGE = "#ED9620";
70
- const ZEST_ORANGE = "#F47820";
71
+ const ZEST_ORANGE = "#B84A00";
71
72
  const APRICOT_ORANGE = "#FFE8D8";
72
73
  // RED
73
74
  const RED = "#FF0000";
@@ -138,6 +139,7 @@ export {
138
139
  BRIGHT_GREY,
139
140
  CHARADE_GREY,
140
141
  GRECIAN_GREY,
142
+ COOL_GREY_05,
141
143
  BLACK_SQUEEZE,
142
144
  GREY_CHATEAU,
143
145
  CLOUDBURST_BLUE,