@thecb/components 3.5.15 → 3.5.18

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 (32) hide show
  1. package/.storybook/main.js +1 -1
  2. package/.storybook/page.js +2 -0
  3. package/dist/index.cjs.js +307 -321
  4. package/package.json +2 -2
  5. package/src/components/atoms/breadcrumb/Breadcrumb.js +4 -1
  6. package/src/components/atoms/button-with-action/ButtonWithAction.js +1 -1
  7. package/src/components/atoms/checkbox/Checkbox.js +1 -0
  8. package/src/components/atoms/checkbox-list/CheckboxList.js +3 -1
  9. package/src/components/atoms/dropdown/Dropdown.js +4 -4
  10. package/src/components/atoms/dropdown/Dropdown.stories.js +10 -33
  11. package/src/components/atoms/form-layouts/FormInput.js +7 -4
  12. package/src/components/atoms/form-layouts/FormLayouts.stories.js +5 -5
  13. package/src/components/atoms/hamburger-button/HamburgerButton.js +4 -3
  14. package/src/components/atoms/icons/AccountsIconSmall.js +6 -13
  15. package/src/components/atoms/icons/icons.stories.js +1 -1
  16. package/src/components/atoms/layouts/Box.styled.js +1 -0
  17. package/src/components/atoms/layouts/Cluster.styled.js +5 -1
  18. package/src/components/atoms/layouts/Sidebar.styled.js +7 -1
  19. package/src/components/atoms/radio-button/RadioButton.js +1 -0
  20. package/src/components/atoms/radio-button/RadioButton.stories.js +26 -61
  21. package/src/components/atoms/toggle-switch/ToggleSwitch.js +1 -0
  22. package/src/components/atoms/toggle-switch/ToggleSwitch.stories.js +10 -51
  23. package/src/components/molecules/editable-list/EditableList.js +11 -8
  24. package/src/components/molecules/nav-menu/NavMenuDesktop.js +2 -1
  25. package/src/components/molecules/nav-menu/NavMenuMobile.js +7 -1
  26. package/src/components/molecules/obligation/Obligation.js +9 -7
  27. package/src/components/molecules/obligation/modules/PaymentDetailsActions.js +23 -23
  28. package/src/deprecated/components/radio-button/radio-button.js +5 -1
  29. package/src/deprecated/icons/IconInvalid.js +7 -31
  30. package/src/deprecated/icons/IconNeutral.js +5 -4
  31. package/src/deprecated/icons/IconValid.js +8 -33
  32. package/src/util/general.js +10 -1
package/src/components/molecules/nav-menu/NavMenuMobile.js CHANGED
@@ -42,9 +42,15 @@ const ImposterMenu = styled(menu)`
42
42
  top: 72px;
43
43
  `;
44
44
 
45
- const NavMenuMobile = ({ menuContent = [], visible = false, themeValues }) => {
45
+ const NavMenuMobile = ({
46
+ id,
47
+ menuContent = [],
48
+ visible = false,
49
+ themeValues
50
+ }) => {
46
51
  return (
47
52
  <ImposterMenu
53
+ id={id}
48
54
  initialPose="invisible"
49
55
  pose={visible ? "visible" : "invisible"}
50
56
  >
package/src/components/molecules/obligation/Obligation.js CHANGED
@@ -39,13 +39,15 @@ const Obligation = ({
39
39
  >
40
40
  <Box padding="0">
41
41
  <Cluster justify="flex-start" align="center">
42
- <IconModule
43
- icon={config.icon}
44
- iconDefault={config.iconDefault}
45
- configIconMap={config.iconMap}
46
- iconValue={config.iconValue}
47
- customAttributes={customAttributes}
48
- />
42
+ {!isMobile && (
43
+ <IconModule
44
+ icon={config.icon}
45
+ iconDefault={config.iconDefault}
46
+ configIconMap={config.iconMap}
47
+ iconValue={config.iconValue}
48
+ customAttributes={customAttributes}
49
+ />
50
+ )}
49
51
  <TitleModule
50
52
  title={obligation.description}
51
53
  subtitle={obligation.subDescription}
package/src/components/molecules/obligation/modules/PaymentDetailsActions.js CHANGED
@@ -54,29 +54,17 @@ const PaymentDetailsActions = ({
54
54
  borderWidthOverride="0 0 1px 0"
55
55
  >
56
56
  <Cluster justify="space-between" align="center" nowrap>
57
- <Box padding="0" width="100%">
58
- <AmountModule
59
- totalAmountDue={obligations.reduce(
60
- (acc, curr) => acc + curr.amountDue,
61
- 0
62
- )}
63
- autoPayEnabled={autoPayEnabled}
64
- isMobile={isMobile}
65
- deactivatePaymentSchedule={deactivatePaymentSchedule}
66
- navigateToSettings={navigateToSettings}
67
- autoPaySchedule={autoPaySchedule}
68
- />
69
- </Box>
70
- <Box padding="0" width="100%">
71
- <ButtonWithAction
72
- isLoading={isLoading}
73
- action={() => handleClick(obligations)}
74
- text="Pay Now"
75
- variant={isMobile ? "smallSecondary" : "secondary"}
76
- dataQa="Pay Now"
77
- extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
78
- />
79
- </Box>
57
+ <AmountModule
58
+ totalAmountDue={obligations.reduce(
59
+ (acc, curr) => acc + curr.amountDue,
60
+ 0
61
+ )}
62
+ autoPayEnabled={autoPayEnabled}
63
+ isMobile={isMobile}
64
+ deactivatePaymentSchedule={deactivatePaymentSchedule}
65
+ navigateToSettings={navigateToSettings}
66
+ autoPaySchedule={autoPaySchedule}
67
+ />
80
68
  </Cluster>
81
69
  </Box>
82
70
  )}
@@ -146,6 +134,18 @@ const PaymentDetailsActions = ({
146
134
  </Box>
147
135
  )}
148
136
  </Cluster>
137
+ {isMobile && (
138
+ <Box padding="8px 0 0" width="100%">
139
+ <ButtonWithAction
140
+ isLoading={isLoading}
141
+ action={() => handleClick(obligations)}
142
+ text="Pay Now"
143
+ variant={isMobile ? "smallSecondary" : "secondary"}
144
+ dataQa="Pay Now"
145
+ extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
146
+ />
147
+ </Box>
148
+ )}
149
149
  </Box>
150
150
  </Box>
151
151
  );
package/src/deprecated/components/radio-button/radio-button.js CHANGED
@@ -36,7 +36,11 @@ const RadioButtonCenter = styled.div`
36
36
  RadioButtonCenter.defaultProps = defaultTheme;
37
37
 
38
38
  const RadioButton = ({ isSelected, name }) => (
39
- <RadioButtonBorder isSelected={isSelected} name={name}>
39
+ <RadioButtonBorder
40
+ isSelected={isSelected}
41
+ name={name}
42
+ aria-checked={isSelected}
43
+ >
40
44
  {isSelected && <RadioButtonCenter />}
41
45
  </RadioButtonBorder>
42
46
  );
package/src/deprecated/icons/IconInvalid.js CHANGED
@@ -16,47 +16,23 @@ export const IconInvalid = ({
16
16
  xmlns="http://www.w3.org/2000/svg"
17
17
  xmlnsXlink="http://www.w3.org/1999/xlink"
18
18
  style={{ margin }}
19
+ aria-label="Invalid"
19
20
  >
20
- <g
21
- id="icon-invalid-Authentication"
22
- stroke="none"
23
- strokeWidth="1"
24
- fill="none"
25
- fillRule="evenodd"
26
- >
27
- <g
28
- id="icon-invalid-00.1.0.1---HSS---Register---Already-Exists-Error"
29
- transform="translate(-538.000000, -1064.000000)"
30
- fillRule="nonzero"
31
- >
32
- <g
33
- id="icon-invalid-Password-Requirements"
34
- transform="translate(457.000000, 938.000000)"
35
- >
36
- <g
37
- id="icon-invalid-Group-2"
38
- transform="translate(81.000000, 20.000000)"
39
- >
40
- <g
41
- id="icon-invalid-PasswordVerification-Error"
42
- transform="translate(0.000000, 106.000000)"
43
- >
21
+ <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
22
+ <g transform="translate(-538.000000, -1064.000000)" fillRule="nonzero">
23
+ <g transform="translate(457.000000, 938.000000)">
24
+ <g transform="translate(81.000000, 20.000000)">
25
+ <g transform="translate(0.000000, 106.000000)">
44
26
  <circle
45
- id="icon-invalid-Oval"
46
27
  stroke={bgFill}
47
28
  fill={bgFill}
48
29
  cx="9"
49
30
  cy="9"
50
31
  r="8.5"
51
32
  ></circle>
52
- <g
53
- id="icon-invalid-Icon/Close"
54
- transform="translate(2.000000, 2.000000)"
55
- fill={iconFill}
56
- >
33
+ <g transform="translate(2.000000, 2.000000)" fill={iconFill}>
57
34
  <path
58
35
  d="M7.58333333,7.58333333 L7.58333333,11.6666667 L6.41666667,11.6666667 L6.41666667,7.58333333 L2.33333333,7.58333333 L2.33333333,6.41666667 L6.41666667,6.41666667 L6.41666667,2.33333333 L7.58333333,2.33333333 L7.58333333,6.41666667 L11.6666667,6.41666667 L11.6666667,7.58333333 L7.58333333,7.58333333 Z"
59
- id="icon-invalid-x"
60
36
  transform="translate(7.000000, 7.000000) rotate(45.000000) translate(-7.000000, -7.000000) "
61
37
  ></path>
62
38
  </g>
package/src/deprecated/icons/IconNeutral.js CHANGED
@@ -15,11 +15,12 @@ export const IconNeutral = ({
15
15
  xmlns="http://www.w3.org/2000/svg"
16
16
  xmlnsXlink="http://www.w3.org/1999/xlink"
17
17
  style={{ margin }}
18
+ aria-label="Neutral"
18
19
  >
19
- <g id="icon-neutral-group" fill={fill} fillRule="nonzero" stroke={fill}>
20
- <g id="icon-neutral-Group-2">
21
- <g id="icon-neutral-PasswordVerification-Empty">
22
- <circle id="icon-neutral-Oval" cx="9" cy="9" r="8.5"></circle>
20
+ <g fill={fill} fillRule="nonzero" stroke={fill}>
21
+ <g>
22
+ <g>
23
+ <circle cx="9" cy="9" r="8.5"></circle>
23
24
  </g>
24
25
  </g>
25
26
  </g>
package/src/deprecated/icons/IconValid.js CHANGED
@@ -16,32 +16,14 @@ export const IconValid = ({
16
16
  xmlns="http://www.w3.org/2000/svg"
17
17
  xmlnsXlink="http://www.w3.org/1999/xlink"
18
18
  style={{ margin }}
19
+ aria-label="Valid"
19
20
  >
20
- <g
21
- id="icon-valid-Authentication"
22
- stroke="none"
23
- strokeWidth="1"
24
- fill="none"
25
- fillRule="evenodd"
26
- >
27
- <g
28
- id="icon-valid-00.1.0.1---HSS---Register---Already-Exists-Error"
29
- transform="translate(-538.000000, -996.000000)"
30
- >
31
- <g
32
- id="icon-valid-Password-Requirements"
33
- transform="translate(457.000000, 938.000000)"
34
- >
35
- <g
36
- id="icon-valid-Group-2"
37
- transform="translate(81.000000, 20.000000)"
38
- >
39
- <g
40
- id="icon-valid-PasswordVerification-Sucess"
41
- transform="translate(0.000000, 38.000000)"
42
- >
21
+ <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
22
+ <g transform="translate(-538.000000, -996.000000)">
23
+ <g transform="translate(457.000000, 938.000000)">
24
+ <g transform="translate(81.000000, 20.000000)">
25
+ <g transform="translate(0.000000, 38.000000)">
43
26
  <circle
44
- id="icon-valid-Oval"
45
27
  stroke={bgFill}
46
28
  fill={bgFill}
47
29
  fillRule="nonzero"
@@ -49,16 +31,9 @@ export const IconValid = ({
49
31
  cy="9"
50
32
  r="8.5"
51
33
  ></circle>
52
- <g
53
- id="icon-valid-baseline-check-24px"
54
- transform="translate(2.000000, 2.000000)"
55
- >
34
+ <g transform="translate(2.000000, 2.000000)">
35
+ <polygon points="0 0 14 0 14 14 0 14"></polygon>
56
36
  <polygon
57
- id="icon-valid-Path"
58
- points="0 0 14 0 14 14 0 14"
59
- ></polygon>
60
- <polygon
61
- id="icon-valid-Path-2"
62
37
  fill={iconFill}
63
38
  points="5.25 9.4325 2.8175 7 1.98916667 7.8225 5.25 11.0833333 12.25 4.08333333 11.4275 3.26083333"
64
39
  ></polygon>
package/src/util/general.js CHANGED
@@ -1,3 +1,4 @@
1
+ import React, { Fragment } from "react";
1
2
  import numeral from "numeral";
2
3
 
3
4
  export const noop = () => {};
@@ -9,9 +10,17 @@ export const displayCurrency = cents =>
9
10
 
10
11
  export const convertCentsToMoneyInt = n => (n / 100).toFixed(0);
11
12
 
13
+ const createUniqueId = () =>
14
+ "_" +
15
+ Math.random()
16
+ .toString(36)
17
+ .substr(2, 9);
18
+
12
19
  export const safeChildren = (children, replacement = []) => {
13
20
  if (children && children instanceof Array) {
14
- return children.map(child => (!child ? replacement : child));
21
+ return children.map(child =>
22
+ !child ? <Fragment key={createUniqueId()}>{replacement}</Fragment> : child
23
+ );
15
24
  }
16
25
  return !children ? replacement : children;
17
26
  };