@thecb/components 9.3.1-beta.2 → 9.3.1-beta.4

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 (6) hide show
  1. package/dist/index.cjs.js +25 -27
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +25 -27
  4. package/dist/index.esm.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/components/molecules/radio-section/RadioSection.js +294 -302
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thecb/components",
3
- "version": "9.3.1-beta.2",
3
+ "version": "9.3.1-beta.4",
4
4
  "description": "Common lib for CityBase react components",
5
5
  "main": "dist/index.cjs.js",
6
6
  "typings": "dist/index.d.ts",
package/src/components/molecules/radio-section/RadioSection.js CHANGED
@@ -101,331 +101,323 @@ const RadioSection = ({
101
101
  `;
102
102
 
103
103
  const [focused, setFocused] = useState(null);
104
-
104
+ const PrependedItem = ({ themeValues }) => (
105
+ <SolidDivider borderSize="2px" color={themeValues.borderColor} />
106
+ );
105
107
  return (
106
108
  <Box
107
- padding="1px"
109
+ padding="0"
108
110
  border={`1px solid ${themeValues.borderColor}`}
109
111
  borderRadius="4px"
110
112
  extraStyles={containerStyles}
111
113
  >
112
- <Stack childGap="0">
113
- <fieldset
114
- role="radiogroup"
115
- tabIndex="0"
116
- aria-required={isSectionRequired}
117
- style={{
118
- padding: 0,
119
- margin: 0,
120
- border: 0
121
- }}
122
- >
123
- <Box as="legend" srOnly={true} padding="0" margin="0">
124
- {legendText}
125
- </Box>
126
- {sectionGroups &&
127
- sectionGroups.map(sectionGroup => {
128
- let prependedItem = "";
129
- if (sectionGroups.indexOf(sectionGroup) !== 0) {
130
- prependedItem = <SolidDivider />;
131
- }
132
- return (
133
- <>
134
- {prependedItem}
135
- {sectionGroup
136
- .filter(unfilteredSection => !unfilteredSection.hidden)
137
- .map(section => (
138
- <Motion
139
- tabIndex={
140
- section.hideRadioButton || section.disabled
141
- ? "-1"
142
- : "0"
143
- }
144
- onKeyDown={e =>
145
- !section.disabled && handleKeyDown(section.id, e)
146
- }
147
- onFocus={() =>
148
- !section.disabled && setFocused(section.id)
149
- }
150
- onBlur={() => !section.disabled && setFocused(null)}
151
- hoverStyles={themeValues.focusStyles}
152
- animate={openSection === section.id ? "open" : "closed"}
153
- initial={initiallyOpen ? "open" : "closed"}
154
- key={`item-${section.id}`}
155
- extraStyles={borderStyles}
156
- role="radio"
157
- aria-checked={openSection === section.id}
158
- aria-disabled={section.disabled}
159
- aria-required={section?.required}
160
- >
161
- <Stack childGap="0">
162
- <Box
163
- padding={
164
- section.hideRadioButton
165
- ? "1.5rem"
166
- : "1.25rem 1.5rem"
167
- }
168
- background={
169
- section.disabled
170
- ? themeValues.headingDisabledColor
171
- : themeValues.headingBackgroundColor
172
- }
173
- onClick={
174
- (isMobile && supportsTouch) || section.disabled
175
- ? noop
176
- : () => toggleOpenSection(section.id)
177
- }
178
- onTouchEnd={
179
- isMobile && supportsTouch && !section.disabled
180
- ? () => toggleOpenSection(section.id)
181
- : noop
182
- }
183
- key={`header-${section.id}`}
184
- borderSize="0px"
185
- borderColor={themeValues.borderColor}
186
- borderWidthOverride={
187
- openSection === section.id && !!section.content
188
- ? `0px 0px 1px 0px`
189
- : ``
190
- }
191
- extraStyles={
192
- !section.disabled ? "cursor: pointer;" : ""
193
- }
194
- dataQa={
195
- section.dataQa ? section.dataQa : section.id
196
- }
197
- >
198
- <Cluster
199
- justify="space-between"
200
- align="center"
201
- childGap="1px"
202
- nowrap
203
- >
204
- <Cluster
205
- justify="flex-start"
206
- align="center"
207
- nowrap
208
- >
209
- {!section.hideRadioButton && (
210
- <Box padding="0">
211
- <RadioButton
212
- id={`radio-input-${idString(section)}`}
213
- name={idString(section)}
214
- ariaDescribedBy={ariaDescribedBy}
215
- radioOn={openSection === section.id}
216
- radioFocused={focused === section.id}
217
- toggleRadio={
218
- section.disabled
219
- ? noop
220
- : () => toggleOpenSection(section.id)
221
- }
222
- isRequired={section?.required}
223
- />
224
- </Box>
225
- )}
226
- {section.titleIcon && (
227
- <Cluster align="center">
228
- {section.titleIcon}
229
- </Cluster>
230
- )}
231
- <Box
232
- padding={
233
- section.titleIcon ? "0 0 0 8px" : "0"
234
- }
235
- >
236
- <Text
237
- as="label"
238
- htmlFor={`radio-input-${idString(section)}`}
239
- color={CHARADE_GREY}
240
- >
241
- {section.title}
242
- </Text>
243
- </Box>
244
- </Cluster>
245
- {section.rightIcons && (
246
- <Cluster
247
- childGap="0.5rem"
248
- aria-label={section?.rightIconsLabel || null}
249
- role={section?.rightIconsRole || null}
250
- >
251
- {section.rightIcons.map(icon => (
252
- <RightIcon
253
- src={icon.img}
254
- key={icon.img}
255
- fade={!icon.enabled}
256
- isMobile={isMobile}
257
- alt={icon.altText}
258
- aria-disabled={!icon.enabled}
259
- />
260
- ))}
261
- </Cluster>
262
- )}
263
- {section.rightTitleContent && (
264
- <Fragment>{section.rightTitleContent}</Fragment>
265
- )}
266
- </Cluster>
267
- </Box>
268
- <AnimatePresence initial={false}>
269
- {openSection === section.id && (
270
- <Motion
271
- key={`content-${section.id}`}
272
- padding="0"
273
- background={themeValues.bodyBackgroundColor}
274
- layoutTransition
275
- initial="closed"
276
- animate="open"
277
- exit="closed"
278
- variants={wrapper}
279
- extraStyles={`transform-origin: 100% 0;`}
280
- >
281
- {section.content}
282
- </Motion>
283
- )}
284
- </AnimatePresence>
285
- </Stack>
286
- </Motion>
287
- ))}
288
- </>
289
- );
290
- })}
291
- {sections &&
292
- sections
293
- .filter(section => !section.hidden)
294
- .map(section => (
295
- <Motion
296
- tabIndex={
297
- section.hideRadioButton || section.disabled ? "-1" : "0"
298
- }
299
- onKeyDown={e =>
300
- !section.disabled && handleKeyDown(section.id, e)
301
- }
302
- onFocus={() => !section.disabled && setFocused(section.id)}
303
- onBlur={() => !section.disabled && setFocused(null)}
304
- hoverStyles={themeValues.focusStyles}
305
- animate={openSection === section.id ? "open" : "closed"}
306
- initial={initiallyOpen ? "open" : "closed"}
307
- key={`item-${section.id}`}
308
- extraStyles={borderStyles}
309
- >
310
- <Stack childGap="0">
311
- <Box
312
- padding={
313
- section.hideRadioButton ? "1.5rem" : "1.25rem 1.5rem"
314
- }
315
- background={
114
+ <Stack
115
+ childGap="0"
116
+ tabIndex="0"
117
+ role="radiogroup"
118
+ aria-required={isSectionRequired}
119
+ >
120
+ {sectionGroups &&
121
+ sectionGroups.map(sectionGroup => {
122
+ return (
123
+ <Fragment
124
+ key={`sectiongroup-${sectionGroups.indexOf(sectionGroup)}`}
125
+ >
126
+ {sectionGroups.indexOf(sectionGroup) ===
127
+ sectionGroups.length - 1 ? (
128
+ <PrependedItem themeValues={themeValues} />
129
+ ) : (
130
+ ""
131
+ )}
132
+ {sectionGroup
133
+ .filter(unfilteredSection => !unfilteredSection.hidden)
134
+ .map(section => (
135
+ <Motion
136
+ tabIndex={
137
+ section.hidden ||
138
+ section.hideRadioButton ||
316
139
  section.disabled
317
- ? themeValues.headingDisabledColor
318
- : themeValues.headingBackgroundColor
319
- }
320
- onClick={
321
- (isMobile && supportsTouch) || section.disabled
322
- ? noop
323
- : () => toggleOpenSection(section.id)
140
+ ? "-1"
141
+ : "0"
324
142
  }
325
- onTouchEnd={
326
- isMobile && supportsTouch && !section.disabled
327
- ? () => toggleOpenSection(section.id)
328
- : noop
143
+ onKeyDown={e =>
144
+ !section.disabled && handleKeyDown(section.id, e)
329
145
  }
330
- key={`header-${section.id}`}
331
- borderSize="0px"
332
- borderColor={themeValues.borderColor}
333
- borderWidthOverride={
334
- openSection === section.id && !!section.content
335
- ? `0px 0px 1px 0px`
336
- : ``
146
+ onFocus={() =>
147
+ !section.disabled && setFocused(section.id)
337
148
  }
338
- extraStyles={!section.disabled ? "cursor: pointer;" : ""}
339
- dataQa={section.dataQa ? section.dataQa : section.id}
149
+ onBlur={() => !section.disabled && setFocused(null)}
150
+ hoverStyles={themeValues.focusStyles}
151
+ animate={openSection === section.id ? "open" : "closed"}
152
+ initial={initiallyOpen ? "open" : "closed"}
153
+ key={`item-${section.id}`}
154
+ extraStyles={borderStyles}
340
155
  role="radio"
341
156
  aria-checked={openSection === section.id}
342
157
  aria-disabled={section.disabled}
343
158
  aria-required={section?.required}
344
- tabIndex="0"
345
159
  >
346
- <Cluster
347
- justify="space-between"
348
- align="center"
349
- childGap="1px"
350
- nowrap
351
- >
352
- <Cluster justify="flex-start" align="center" nowrap>
353
- {!section.hideRadioButton && (
354
- <Box padding="0">
355
- <RadioButton
356
- id={`radio-input-${idString(section)}`}
357
- name={idString(section)}
358
- ariaDescribedBy={ariaDescribedBy}
359
- radioOn={openSection === section.id}
360
- radioFocused={focused === section.id}
361
- toggleRadio={
362
- section.disabled
363
- ? noop
364
- : () => toggleOpenSection(section.id)
365
- }
366
- isRequired={section?.required}
367
- />
368
- </Box>
369
- )}
370
- {section.titleIcon && (
371
- <Cluster align="center">
372
- {section.titleIcon}
373
- </Cluster>
374
- )}
375
- <Box padding={section.titleIcon ? "0 0 0 8px" : "0"}>
376
- <Text
377
- as="label"
378
- htmlFor={`radio-input-${idString(section)}`}
379
- color={CHARADE_GREY}
380
- >
381
- {section.title}
382
- </Text>
383
- </Box>
384
- </Cluster>
385
- {section.rightIcons && (
160
+ <Stack childGap="0">
161
+ <Box
162
+ padding={
163
+ section.hideRadioButton
164
+ ? "1.5rem"
165
+ : "1.25rem 1.5rem"
166
+ }
167
+ background={
168
+ section.disabled
169
+ ? themeValues.headingDisabledColor
170
+ : themeValues.headingBackgroundColor
171
+ }
172
+ onClick={
173
+ (isMobile && supportsTouch) || section.disabled
174
+ ? noop
175
+ : () => toggleOpenSection(section.id)
176
+ }
177
+ onTouchEnd={
178
+ isMobile && supportsTouch && !section.disabled
179
+ ? () => toggleOpenSection(section.id)
180
+ : noop
181
+ }
182
+ key={`header-${section.id}`}
183
+ borderSize="0px"
184
+ borderColor={themeValues.borderColor}
185
+ borderWidthOverride={
186
+ openSection === section.id && !!section.content
187
+ ? `0px 0px 1px 0px`
188
+ : ``
189
+ }
190
+ extraStyles={
191
+ !section.disabled ? "cursor: pointer;" : ""
192
+ }
193
+ dataQa={section.dataQa ? section.dataQa : section.id}
194
+ >
386
195
  <Cluster
387
- childGap="0.5rem"
388
- aria-label={section?.rightIconsLabel || null}
389
- role={section?.rightIconsRole || null}
196
+ justify="space-between"
197
+ align="center"
198
+ childGap="1px"
199
+ nowrap
390
200
  >
391
- {section.rightIcons.map(icon => (
392
- <RightIcon
393
- src={icon.img}
394
- key={icon.img}
395
- fade={!icon.enabled}
396
- isMobile={isMobile}
397
- alt={icon.altText}
398
- aria-disabled={!icon.enabled}
399
- />
400
- ))}
201
+ <Cluster justify="flex-start" align="center" nowrap>
202
+ {!section.hideRadioButton && (
203
+ <Box padding="0">
204
+ <RadioButton
205
+ id={`radio-input-${idString(section)}`}
206
+ name={idString(section)}
207
+ ariaDescribedBy={ariaDescribedBy}
208
+ radioOn={openSection === section.id}
209
+ radioFocused={focused === section.id}
210
+ toggleRadio={
211
+ section.disabled
212
+ ? noop
213
+ : () => toggleOpenSection(section.id)
214
+ }
215
+ isRequired={section?.required}
216
+ />
217
+ </Box>
218
+ )}
219
+ {section.titleIcon && (
220
+ <Cluster align="center">
221
+ {section.titleIcon}
222
+ </Cluster>
223
+ )}
224
+ <Box
225
+ padding={section.titleIcon ? "0 0 0 8px" : "0"}
226
+ >
227
+ <Text
228
+ as="label"
229
+ htmlFor={`radio-input-${idString(section)}`}
230
+ color={CHARADE_GREY}
231
+ >
232
+ {section.title}
233
+ </Text>
234
+ </Box>
235
+ </Cluster>
236
+ {section.rightIcons && (
237
+ <Cluster
238
+ childGap="0.5rem"
239
+ aria-label={section?.rightIconsLabel || null}
240
+ role={section?.rightIconsRole || null}
241
+ >
242
+ {section.rightIcons.map(icon => (
243
+ <RightIcon
244
+ src={icon.img}
245
+ key={icon.img}
246
+ fade={!icon.enabled}
247
+ isMobile={isMobile}
248
+ alt={icon.altText}
249
+ aria-disabled={!icon.enabled}
250
+ />
251
+ ))}
252
+ </Cluster>
253
+ )}
254
+ {section.rightTitleContent && (
255
+ <Fragment>{section.rightTitleContent}</Fragment>
256
+ )}
401
257
  </Cluster>
258
+ </Box>
259
+ <AnimatePresence initial={false}>
260
+ {openSection === section.id && (
261
+ <Motion
262
+ key={`content-${section.id}`}
263
+ padding="0"
264
+ background={themeValues.bodyBackgroundColor}
265
+ layoutTransition
266
+ initial="closed"
267
+ animate="open"
268
+ exit="closed"
269
+ variants={wrapper}
270
+ extraStyles={`transform-origin: 100% 0;`}
271
+ >
272
+ {section.content}
273
+ </Motion>
274
+ )}
275
+ </AnimatePresence>
276
+ </Stack>
277
+ </Motion>
278
+ ))}
279
+ </Fragment>
280
+ );
281
+ })}
282
+ {sections &&
283
+ sections
284
+ .filter(section => !section.hidden)
285
+ .map(section => (
286
+ <Motion
287
+ tabIndex={
288
+ section.hideRadioButton || section.disabled ? "-1" : "0"
289
+ }
290
+ onKeyDown={e =>
291
+ !section.disabled && handleKeyDown(section.id, e)
292
+ }
293
+ onFocus={() => !section.disabled && setFocused(section.id)}
294
+ onBlur={() => !section.disabled && setFocused(null)}
295
+ hoverStyles={themeValues.focusStyles}
296
+ animate={openSection === section.id ? "open" : "closed"}
297
+ initial={initiallyOpen ? "open" : "closed"}
298
+ key={`item-${section.id}`}
299
+ extraStyles={borderStyles}
300
+ role="radio"
301
+ aria-checked={openSection === section.id}
302
+ aria-disabled={section.disabled}
303
+ aria-required={section?.required}
304
+ >
305
+ <Stack childGap="0">
306
+ <Box
307
+ padding={
308
+ section.hideRadioButton ? "1.5rem" : "1.25rem 1.5rem"
309
+ }
310
+ background={
311
+ section.disabled
312
+ ? themeValues.headingDisabledColor
313
+ : themeValues.headingBackgroundColor
314
+ }
315
+ onClick={
316
+ (isMobile && supportsTouch) || section.disabled
317
+ ? noop
318
+ : () => toggleOpenSection(section.id)
319
+ }
320
+ onTouchEnd={
321
+ isMobile && supportsTouch && !section.disabled
322
+ ? () => toggleOpenSection(section.id)
323
+ : noop
324
+ }
325
+ key={`header-${section.id}`}
326
+ borderSize="0px"
327
+ borderColor={themeValues.borderColor}
328
+ borderWidthOverride={
329
+ openSection === section.id && !!section.content
330
+ ? `0px 0px 1px 0px`
331
+ : ``
332
+ }
333
+ extraStyles={!section.disabled ? "cursor: pointer;" : ""}
334
+ dataQa={section.dataQa ? section.dataQa : section.id}
335
+ role="radio"
336
+ aria-checked={openSection === section.id}
337
+ aria-disabled={section.disabled}
338
+ aria-required={section?.required}
339
+ tabIndex="0"
340
+ >
341
+ <Cluster
342
+ justify="space-between"
343
+ align="center"
344
+ childGap="1px"
345
+ nowrap
346
+ >
347
+ <Cluster justify="flex-start" align="center" nowrap>
348
+ {!section.hideRadioButton && (
349
+ <Box padding="0">
350
+ <RadioButton
351
+ id={`radio-input-${idString(section)}`}
352
+ name={idString(section)}
353
+ ariaDescribedBy={ariaDescribedBy}
354
+ radioOn={openSection === section.id}
355
+ radioFocused={focused === section.id}
356
+ toggleRadio={
357
+ section.disabled
358
+ ? noop
359
+ : () => toggleOpenSection(section.id)
360
+ }
361
+ isRequired={section?.required}
362
+ />
363
+ </Box>
402
364
  )}
403
- {section.rightTitleContent && (
404
- <Fragment>{section.rightTitleContent}</Fragment>
365
+ {section.titleIcon && (
366
+ <Cluster align="center">{section.titleIcon}</Cluster>
405
367
  )}
368
+ <Box padding={section.titleIcon ? "0 0 0 8px" : "0"}>
369
+ <Text
370
+ as="label"
371
+ htmlFor={`radio-input-${idString(section)}`}
372
+ color={CHARADE_GREY}
373
+ >
374
+ {section.title}
375
+ </Text>
376
+ </Box>
406
377
  </Cluster>
407
- </Box>
408
- <AnimatePresence initial={false}>
409
- {openSection === section.id && (
410
- <Motion
411
- key={`content-${section.id}`}
412
- padding="0"
413
- background={themeValues.bodyBackgroundColor}
414
- layoutTransition
415
- initial="closed"
416
- animate="open"
417
- exit="closed"
418
- variants={wrapper}
419
- extraStyles={`transform-origin: 100% 0;`}
378
+ {section.rightIcons && (
379
+ <Cluster
380
+ childGap="0.5rem"
381
+ aria-label={section?.rightIconsLabel || null}
382
+ role={section?.rightIconsRole || null}
420
383
  >
421
- {section.content}
422
- </Motion>
384
+ {section.rightIcons.map(icon => (
385
+ <RightIcon
386
+ src={icon.img}
387
+ key={icon.img}
388
+ fade={!icon.enabled}
389
+ isMobile={isMobile}
390
+ alt={icon.altText}
391
+ aria-disabled={!icon.enabled}
392
+ />
393
+ ))}
394
+ </Cluster>
395
+ )}
396
+ {section.rightTitleContent && (
397
+ <Fragment>{section.rightTitleContent}</Fragment>
423
398
  )}
424
- </AnimatePresence>
425
- </Stack>
426
- </Motion>
427
- ))}
428
- </fieldset>
399
+ </Cluster>
400
+ </Box>
401
+ <AnimatePresence initial={false}>
402
+ {openSection === section.id && (
403
+ <Motion
404
+ key={`content-${section.id}`}
405
+ padding="0"
406
+ background={themeValues.bodyBackgroundColor}
407
+ layoutTransition
408
+ initial="closed"
409
+ animate="open"
410
+ exit="closed"
411
+ variants={wrapper}
412
+ extraStyles={`transform-origin: 100% 0;`}
413
+ >
414
+ {section.content}
415
+ </Motion>
416
+ )}
417
+ </AnimatePresence>
418
+ </Stack>
419
+ </Motion>
420
+ ))}
429
421
  </Stack>
430
422
  </Box>
431
423
  );