@thecb/components 9.2.4-beta.3 → 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 (7) hide show
  1. package/dist/index.cjs.js +4 -2
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +4 -2
  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 -124
  7. package/src/components/molecules/radio-section/RadioSection.stories.js +6 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thecb/components",
3
- "version": "9.2.4-beta.3",
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,139 +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-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"
112
+ .map(
113
+ section =>
114
+ console.log("section", section) || (
115
+ <Motion
116
+ tabIndex={
117
+ section.hideRadioButton || section.disabled ? "-1" : "0"
134
118
  }
135
- background={
136
- section.disabled
137
- ? themeValues.headingDisabledColor
138
- : themeValues.headingBackgroundColor
119
+ onKeyDown={e =>
120
+ !section.disabled && handleKeyDown(section.id, e)
139
121
  }
140
- onClick={
141
- (isMobile && supportsTouch) || section.disabled
142
- ? noop
143
- : () => 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)
144
133
  }
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}
134
+ aria-checked={openSection === section.id}
135
+ aria-disabled={section.disabled}
136
+ required={section?.required}
160
137
  >
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
- required={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 && (
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
+ >
200
169
  <Cluster
201
- childGap="0.5rem"
202
- aria-label={section?.rightIconsLabel || null}
203
- role={section?.rightIconsRole || null}
170
+ justify="space-between"
171
+ align="center"
172
+ childGap="1px"
173
+ nowrap
204
174
  >
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
- ))}
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
+ )}
215
230
  </Cluster>
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
- ))}
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
+ )}
242
253
  </Stack>
243
254
  </Box>
244
255
  );
package/src/components/molecules/radio-section/RadioSection.stories.js CHANGED
@@ -52,7 +52,12 @@ const sections = [
52
52
  rightIcons: cardIcons,
53
53
  required: true
54
54
  },
55
- { id: "bar", title: "Bar", content: <div>Content 1</div>, required: true },
55
+ {
56
+ id: "new-bank-account-section",
57
+ title: "New Bank Account",
58
+ content: <div>Content 1</div>,
59
+ required: true
60
+ },
56
61
  { id: "baz", title: "Baz", content: <div>Content 2</div> }
57
62
  ];
58
63