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

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 +6 -5
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +6 -5
  4. package/dist/index.esm.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/components/molecules/radio-section/RadioSection.js +135 -125
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thecb/components",
3
- "version": "9.2.4-beta.4",
3
+ "version": "9.2.4-beta.5",
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
@@ -106,140 +106,150 @@ const RadioSection = ({
106
106
  borderRadius="4px"
107
107
  extraStyles={containerStyles}
108
108
  >
109
- <Stack childGap="0" role="radiogroup" required={isRequired}>
109
+ <Stack childGap="0" role="radiogroup" required={isRequired} id="cristin">
110
110
  {sections
111
111
  .filter(section => !section.hidden)
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-label={section.title}
127
- aria-checked={openSection === section.id}
128
- aria-disabled={section.disabled}
129
- required={section?.required || isRequired}
130
- >
131
- <Stack childGap="0">
132
- <Box
133
- padding={
134
- section.hideRadioButton ? "1.5rem" : "1.25rem 1.5rem"
112
+ .map(
113
+ section =>
114
+ console.log("section", section) || (
115
+ <Motion
116
+ tabIndex={
117
+ section.hideRadioButton || section.disabled ? "-1" : "0"
135
118
  }
136
- background={
137
- section.disabled
138
- ? themeValues.headingDisabledColor
139
- : themeValues.headingBackgroundColor
119
+ onKeyDown={e =>
120
+ !section.disabled && handleKeyDown(section.id, e)
140
121
  }
141
- onClick={
142
- (isMobile && supportsTouch) || section.disabled
143
- ? noop
144
- : () => toggleOpenSection(section.id)
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)
145
133
  }
146
- onTouchEnd={
147
- isMobile && supportsTouch && !section.disabled
148
- ? () => toggleOpenSection(section.id)
149
- : noop
150
- }
151
- key={`header-${section.id}`}
152
- borderSize="0px"
153
- borderColor={themeValues.borderColor}
154
- borderWidthOverride={
155
- openSection === section.id && !!section.content
156
- ? `0px 0px 1px 0px`
157
- : ``
158
- }
159
- extraStyles={!section.disabled ? "cursor: pointer;" : ""}
160
- dataQa={section.dataQa ? section.dataQa : section.id}
134
+ aria-checked={openSection === section.id}
135
+ aria-disabled={section.disabled}
136
+ required={section?.required}
161
137
  >
162
- <Cluster
163
- justify="space-between"
164
- align="center"
165
- childGap="1px"
166
- nowrap
167
- >
168
- <Cluster justify="flex-start" align="center" nowrap>
169
- {!section.hideRadioButton && (
170
- <Box padding="0">
171
- <RadioButton
172
- id={`radio-input-${idString(section)}`}
173
- name={idString(section)}
174
- ariaDescribedBy={ariaDescribedBy}
175
- radioOn={openSection === section.id}
176
- radioFocused={focused === section.id}
177
- toggleRadio={
178
- section.disabled
179
- ? noop
180
- : () => toggleOpenSection(section.id)
181
- }
182
- tabIndex="-1"
183
- required={section?.required || isRequired}
184
- />
185
- </Box>
186
- )}
187
- {section.titleIcon && (
188
- <Cluster align="center">{section.titleIcon}</Cluster>
189
- )}
190
- <Box padding={section.titleIcon ? "0 0 0 8px" : "0"}>
191
- <Text
192
- as="label"
193
- htmlFor={`radio-input-${idString(section)}`}
194
- color={CHARADE_GREY}
195
- >
196
- {section.title}
197
- </Text>
198
- </Box>
199
- </Cluster>
200
- {section.rightIcons && (
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
+ >
201
169
  <Cluster
202
- childGap="0.5rem"
203
- aria-label={section?.rightIconsLabel || null}
204
- role={section?.rightIconsRole || null}
170
+ justify="space-between"
171
+ align="center"
172
+ childGap="1px"
173
+ nowrap
205
174
  >
206
- {section.rightIcons.map(icon => (
207
- <RightIcon
208
- src={icon.img}
209
- key={icon.img}
210
- fade={!icon.enabled}
211
- isMobile={isMobile}
212
- alt={icon.altText}
213
- aria-disabled={!icon.enabled}
214
- />
215
- ))}
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
+ )}
216
230
  </Cluster>
217
- )}
218
- {section.rightTitleContent && (
219
- <Fragment>{section.rightTitleContent}</Fragment>
220
- )}
221
- </Cluster>
222
- </Box>
223
- <AnimatePresence initial={false}>
224
- {openSection === section.id && (
225
- <Motion
226
- key={`content-${section.id}`}
227
- padding="0"
228
- background={themeValues.bodyBackgroundColor}
229
- layoutTransition
230
- initial="closed"
231
- animate="open"
232
- exit="closed"
233
- variants={wrapper}
234
- extraStyles={`transform-origin: 100% 0;`}
235
- >
236
- {section.content}
237
- </Motion>
238
- )}
239
- </AnimatePresence>
240
- </Stack>
241
- </Motion>
242
- ))}
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
+ )}
243
253
  </Stack>
244
254
  </Box>
245
255
  );