@thecb/components 9.2.4-beta.5 → 9.2.4-beta.6

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 (24) hide show
  1. package/dist/index.cjs.js +50 -112
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +50 -112
  4. package/dist/index.esm.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/components/atoms/checkbox/Checkbox.js +1 -3
  7. package/src/components/atoms/checkbox/Checkbox.stories.js +2 -3
  8. package/src/components/atoms/country-dropdown/CountryDropdown.js +1 -3
  9. package/src/components/atoms/country-dropdown/CountryDropdown.stories.js +0 -1
  10. package/src/components/atoms/dropdown/Dropdown.js +3 -7
  11. package/src/components/atoms/form-layouts/FormInput.js +0 -3
  12. package/src/components/atoms/form-select/FormSelect.js +9 -22
  13. package/src/components/atoms/form-select/FormSelect.stories.js +2 -2
  14. package/src/components/atoms/radio-button-with-label/RadioButtonWithLabel.js +7 -12
  15. package/src/components/atoms/state-province-dropdown/StateProvinceDropdown.js +1 -4
  16. package/src/components/atoms/state-province-dropdown/StateProvinceDropdown.stories.js +0 -1
  17. package/src/components/molecules/address-form/AddressForm.js +0 -6
  18. package/src/components/molecules/payment-form-ach/PaymentFormACH.js +0 -6
  19. package/src/components/molecules/payment-form-card/PaymentFormCard.js +0 -6
  20. package/src/components/molecules/radio-group/RadioGroup.js +2 -5
  21. package/src/components/molecules/radio-group/RadioGroup.stories.js +0 -1
  22. package/src/components/molecules/radio-section/RadioSection.js +125 -136
  23. package/src/components/molecules/radio-section/RadioSection.stories.js +2 -7
  24. package/src/components/molecules/radio-section/radio-button/RadioButton.js +2 -3
package/src/components/molecules/radio-section/RadioSection.js CHANGED
@@ -48,7 +48,7 @@ const RadioSection = ({
48
48
  openHeight = "auto",
49
49
  containerStyles = "",
50
50
  ariaDescribedBy,
51
- isRequired = false
51
+ isSectionRequired = false
52
52
  }) => {
53
53
  const handleKeyDown = (id, e) => {
54
54
  if (e?.keyCode === 13 || e?.keyCode === 32) {
@@ -106,150 +106,139 @@ const RadioSection = ({
106
106
  borderRadius="4px"
107
107
  extraStyles={containerStyles}
108
108
  >
109
- <Stack childGap="0" role="radiogroup" required={isRequired} id="cristin">
109
+ <Stack childGap="0" role="radiogroup" required={isSectionRequired}>
110
110
  {sections
111
111
  .filter(section => !section.hidden)
112
- .map(
113
- section =>
114
- console.log("section", section) || (
115
- <Motion
116
- tabIndex={
117
- section.hideRadioButton || section.disabled ? "-1" : "0"
112
+ .map(section => (
113
+ <Motion
114
+ tabIndex={
115
+ section.hideRadioButton || section.disabled ? "-1" : "0"
116
+ }
117
+ onKeyDown={e => !section.disabled && handleKeyDown(section.id, e)}
118
+ onFocus={() => !section.disabled && setFocused(section.id)}
119
+ onBlur={() => !section.disabled && setFocused(null)}
120
+ hoverStyles={themeValues.focusStyles}
121
+ animate={openSection === section.id ? "open" : "closed"}
122
+ initial={initiallyOpen ? "open" : "closed"}
123
+ key={`item-${section.id}`}
124
+ extraStyles={borderStyles}
125
+ role="radio"
126
+ aria-checked={openSection === section.id}
127
+ aria-disabled={section.disabled}
128
+ required={!!section?.required}
129
+ >
130
+ <Stack childGap="0">
131
+ <Box
132
+ padding={
133
+ section.hideRadioButton ? "1.5rem" : "1.25rem 1.5rem"
118
134
  }
119
- onKeyDown={e =>
120
- !section.disabled && handleKeyDown(section.id, e)
135
+ background={
136
+ section.disabled
137
+ ? themeValues.headingDisabledColor
138
+ : themeValues.headingBackgroundColor
121
139
  }
122
- onFocus={() => !section.disabled && setFocused(section.id)}
123
- onBlur={() => !section.disabled && setFocused(null)}
124
- hoverStyles={themeValues.focusStyles}
125
- animate={openSection === section.id ? "open" : "closed"}
126
- initial={initiallyOpen ? "open" : "closed"}
127
- key={`item-${section.id}`}
128
- extraStyles={borderStyles}
129
- role="radio"
130
- aria-label={
131
- section.title ||
132
- console.log("typeof section.title", typeof section.title)
140
+ onClick={
141
+ (isMobile && supportsTouch) || section.disabled
142
+ ? noop
143
+ : () => toggleOpenSection(section.id)
133
144
  }
134
- aria-checked={openSection === section.id}
135
- aria-disabled={section.disabled}
136
- required={section?.required}
145
+ onTouchEnd={
146
+ isMobile && supportsTouch && !section.disabled
147
+ ? () => toggleOpenSection(section.id)
148
+ : noop
149
+ }
150
+ key={`header-${section.id}`}
151
+ borderSize="0px"
152
+ borderColor={themeValues.borderColor}
153
+ borderWidthOverride={
154
+ openSection === section.id && !!section.content
155
+ ? `0px 0px 1px 0px`
156
+ : ``
157
+ }
158
+ extraStyles={!section.disabled ? "cursor: pointer;" : ""}
159
+ dataQa={section.dataQa ? section.dataQa : section.id}
137
160
  >
138
- <Stack childGap="0">
139
- <Box
140
- padding={
141
- section.hideRadioButton ? "1.5rem" : "1.25rem 1.5rem"
142
- }
143
- background={
144
- section.disabled
145
- ? themeValues.headingDisabledColor
146
- : themeValues.headingBackgroundColor
147
- }
148
- onClick={
149
- (isMobile && supportsTouch) || section.disabled
150
- ? noop
151
- : () => toggleOpenSection(section.id)
152
- }
153
- onTouchEnd={
154
- isMobile && supportsTouch && !section.disabled
155
- ? () => toggleOpenSection(section.id)
156
- : noop
157
- }
158
- key={`header-${section.id}`}
159
- borderSize="0px"
160
- borderColor={themeValues.borderColor}
161
- borderWidthOverride={
162
- openSection === section.id && !!section.content
163
- ? `0px 0px 1px 0px`
164
- : ``
165
- }
166
- extraStyles={!section.disabled ? "cursor: pointer;" : ""}
167
- dataQa={section.dataQa ? section.dataQa : section.id}
168
- >
161
+ <Cluster
162
+ justify="space-between"
163
+ align="center"
164
+ childGap="1px"
165
+ nowrap
166
+ >
167
+ <Cluster justify="flex-start" align="center" nowrap>
168
+ {!section.hideRadioButton && (
169
+ <Box padding="0">
170
+ <RadioButton
171
+ id={`radio-input-${idString(section)}`}
172
+ name={idString(section)}
173
+ ariaDescribedBy={ariaDescribedBy}
174
+ radioOn={openSection === section.id}
175
+ radioFocused={focused === section.id}
176
+ toggleRadio={
177
+ section.disabled
178
+ ? noop
179
+ : () => toggleOpenSection(section.id)
180
+ }
181
+ tabIndex="-1"
182
+ isRequired={!!section?.required}
183
+ />
184
+ </Box>
185
+ )}
186
+ {section.titleIcon && (
187
+ <Cluster align="center">{section.titleIcon}</Cluster>
188
+ )}
189
+ <Box padding={section.titleIcon ? "0 0 0 8px" : "0"}>
190
+ <Text
191
+ as="label"
192
+ htmlFor={`radio-input-${idString(section)}`}
193
+ color={CHARADE_GREY}
194
+ >
195
+ {section.title}
196
+ </Text>
197
+ </Box>
198
+ </Cluster>
199
+ {section.rightIcons && (
169
200
  <Cluster
170
- justify="space-between"
171
- align="center"
172
- childGap="1px"
173
- nowrap
201
+ childGap="0.5rem"
202
+ aria-label={section?.rightIconsLabel || null}
203
+ role={section?.rightIconsRole || null}
174
204
  >
175
- <Cluster justify="flex-start" align="center" nowrap>
176
- {!section.hideRadioButton && (
177
- <Box padding="0">
178
- <RadioButton
179
- id={`radio-input-${idString(section)}`}
180
- name={idString(section)}
181
- ariaDescribedBy={ariaDescribedBy}
182
- radioOn={openSection === section.id}
183
- radioFocused={focused === section.id}
184
- toggleRadio={
185
- section.disabled
186
- ? noop
187
- : () => toggleOpenSection(section.id)
188
- }
189
- tabIndex="-1"
190
- required={section?.required}
191
- />
192
- </Box>
193
- )}
194
- {section.titleIcon && (
195
- <Cluster align="center">
196
- {section.titleIcon}
197
- </Cluster>
198
- )}
199
- <Box padding={section.titleIcon ? "0 0 0 8px" : "0"}>
200
- <Text
201
- as="label"
202
- htmlFor={`radio-input-${idString(section)}`}
203
- color={CHARADE_GREY}
204
- >
205
- {section.title}
206
- </Text>
207
- </Box>
208
- </Cluster>
209
- {section.rightIcons && (
210
- <Cluster
211
- childGap="0.5rem"
212
- aria-label={section?.rightIconsLabel || null}
213
- role={section?.rightIconsRole || null}
214
- >
215
- {section.rightIcons.map(icon => (
216
- <RightIcon
217
- src={icon.img}
218
- key={icon.img}
219
- fade={!icon.enabled}
220
- isMobile={isMobile}
221
- alt={icon.altText}
222
- aria-disabled={!icon.enabled}
223
- />
224
- ))}
225
- </Cluster>
226
- )}
227
- {section.rightTitleContent && (
228
- <Fragment>{section.rightTitleContent}</Fragment>
229
- )}
205
+ {section.rightIcons.map(icon => (
206
+ <RightIcon
207
+ src={icon.img}
208
+ key={icon.img}
209
+ fade={!icon.enabled}
210
+ isMobile={isMobile}
211
+ alt={icon.altText}
212
+ aria-disabled={!icon.enabled}
213
+ />
214
+ ))}
230
215
  </Cluster>
231
- </Box>
232
- <AnimatePresence initial={false}>
233
- {openSection === section.id && (
234
- <Motion
235
- key={`content-${section.id}`}
236
- padding="0"
237
- background={themeValues.bodyBackgroundColor}
238
- layoutTransition
239
- initial="closed"
240
- animate="open"
241
- exit="closed"
242
- variants={wrapper}
243
- extraStyles={`transform-origin: 100% 0;`}
244
- >
245
- {section.content}
246
- </Motion>
247
- )}
248
- </AnimatePresence>
249
- </Stack>
250
- </Motion>
251
- )
252
- )}
216
+ )}
217
+ {section.rightTitleContent && (
218
+ <Fragment>{section.rightTitleContent}</Fragment>
219
+ )}
220
+ </Cluster>
221
+ </Box>
222
+ <AnimatePresence initial={false}>
223
+ {openSection === section.id && (
224
+ <Motion
225
+ key={`content-${section.id}`}
226
+ padding="0"
227
+ background={themeValues.bodyBackgroundColor}
228
+ layoutTransition
229
+ initial="closed"
230
+ animate="open"
231
+ exit="closed"
232
+ variants={wrapper}
233
+ extraStyles={`transform-origin: 100% 0;`}
234
+ >
235
+ {section.content}
236
+ </Motion>
237
+ )}
238
+ </AnimatePresence>
239
+ </Stack>
240
+ </Motion>
241
+ ))}
253
242
  </Stack>
254
243
  </Box>
255
244
  );
package/src/components/molecules/radio-section/RadioSection.stories.js CHANGED
@@ -52,12 +52,7 @@ const sections = [
52
52
  rightIcons: cardIcons,
53
53
  required: true
54
54
  },
55
- {
56
- id: "new-bank-account-section",
57
- title: "New Bank Account",
58
- content: <div>Content 1</div>,
59
- required: true
60
- },
55
+ { id: "bar", title: "Bar", content: <div>Content 1</div>, required: true },
61
56
  { id: "baz", title: "Baz", content: <div>Content 2</div> }
62
57
  ];
63
58
 
@@ -71,7 +66,7 @@ export const radioSection = () => {
71
66
  openSection={openSection}
72
67
  staggeredAnimation={boolean("staggeredAnimation", false, "props")}
73
68
  sections={sections}
74
- isRequired={true}
69
+ isSectionRequired={true}
75
70
  />
76
71
  );
77
72
  };
package/src/components/molecules/radio-section/radio-button/RadioButton.js CHANGED
@@ -20,7 +20,7 @@ const RadioButton = ({
20
20
  themeValues,
21
21
  ariaLabelledBy = "",
22
22
  ariaLabel = null,
23
- required = false
23
+ isRequired = false
24
24
  }) => {
25
25
  const buttonBorder = {
26
26
  onFocused: {
@@ -91,11 +91,10 @@ const RadioButton = ({
91
91
  type="radio"
92
92
  id={`radio-${name}`}
93
93
  disabled={disabled}
94
- required={required}
95
- aria-required={required}
96
94
  onClick={toggleRadio}
97
95
  aria-describedby={ariaDescribedBy}
98
96
  tabIndex="-1"
97
+ required={isRequired}
99
98
  {...extraProps}
100
99
  />
101
100
  <Motion