@thecb/components 8.4.8-beta.0 → 8.4.8-beta.2

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 +549 -1436
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +549 -1436
  4. package/dist/index.esm.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/components/atoms/solid-divider/SolidDivider.js +4 -4
  7. package/src/components/molecules/radio-section/RadioSection.js +113 -121
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thecb/components",
3
- "version": "8.4.8-beta.0",
3
+ "version": "8.4.8-beta.2",
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/atoms/solid-divider/SolidDivider.js CHANGED
@@ -3,14 +3,14 @@ import { fallbackValues } from "./SolidDivider.theme";
3
3
  import { themeComponent } from "../../../util/themeUtils";
4
4
  import { Box } from "../layouts";
5
5
 
6
- const SolidDivider = ({ themeValues }) => (
6
+ const SolidDivider = ({ borderColor, borderSize, themeValues }) => (
7
7
  <Box
8
8
  padding="0"
9
9
  minWidth="100%"
10
10
  minHeight="1px"
11
- borderColor={themeValues.borderColor}
12
- borderSize={themeValues.borderSize}
13
- borderWidthOverride={`0px 0px ${themeValues.borderSize} 0px`}
11
+ borderColor={borderColor || themeValues.borderColor}
12
+ borderSize={borderSize || themeValues.borderSize}
13
+ borderWidthOverride={`0px 0px ${borderSize || themeValues.borderSize} 0px`}
14
14
  />
15
15
  );
16
16
 
package/src/components/molecules/radio-section/RadioSection.js CHANGED
@@ -20,8 +20,6 @@ import { createIdFromString } from "../../../util/general";
20
20
  dataQa: string,
21
21
  content: <React Component(s)> e.g.: <Box><Stack>cool content stuff</Stack></Box> (any collection of components will work),
22
22
  rightTitleContent: <React Component(s)> (rendered on the very right of the title section, use to supplement "rightIcons" with text, as in expired CC status, or render other custom content)
23
- contentOverride: <React Component(s)> (Replace the radio section and the containers with different content,
24
- intended for inserting a divider bar or other non-interactive css)
25
23
  }
26
24
 
27
25
  Also takes an "openSection" which should equal the id of the section that should be open
@@ -106,131 +104,125 @@ const RadioSection = ({
106
104
  <Stack childGap="0">
107
105
  {sections
108
106
  .filter(section => !section.hidden)
109
- .map(section =>
110
- contentOverride ? (
111
- contentOverride
112
- ) : (
113
- <Motion
114
- tabIndex={
115
- section.hideRadioButton || section.disabled ? "-1" : "0"
116
- }
117
- onKeyDown={e =>
118
- !section.disabled && handleKeyDown(section.id, e)
119
- }
120
- onFocus={() => !section.disabled && setFocused(section.id)}
121
- onBlur={() => !section.disabled && setFocused(null)}
122
- hoverStyles={themeValues.focusStyles}
123
- animate={openSection === section.id ? "open" : "closed"}
124
- initial={initiallyOpen ? "open" : "closed"}
125
- key={`item-${section.id}`}
126
- extraStyles={borderStyles}
127
- >
128
- <Stack childGap="0">
129
- <Box
130
- padding={
131
- section.hideRadioButton ? "1.5rem" : "1.25rem 1.5rem"
132
- }
133
- background={
134
- section.disabled
135
- ? themeValues.headingDisabledColor
136
- : themeValues.headingBackgroundColor
137
- }
138
- onClick={
139
- (isMobile && supportsTouch) || section.disabled
140
- ? noop
141
- : () => toggleOpenSection(section.id)
142
- }
143
- onTouchEnd={
144
- isMobile && supportsTouch && !section.disabled
145
- ? () => toggleOpenSection(section.id)
146
- : noop
147
- }
148
- key={`header-${section.id}`}
149
- borderSize="0px"
150
- borderColor={themeValues.borderColor}
151
- borderWidthOverride={
152
- openSection === section.id && !!section.content
153
- ? `0px 0px 1px 0px`
154
- : ``
155
- }
156
- extraStyles={!section.disabled ? "cursor: pointer;" : ""}
157
- dataQa={section.dataQa ? section.dataQa : section.id}
107
+ .map(section => (
108
+ <Motion
109
+ tabIndex={
110
+ section.hideRadioButton || section.disabled ? "-1" : "0"
111
+ }
112
+ onKeyDown={e => !section.disabled && handleKeyDown(section.id, e)}
113
+ onFocus={() => !section.disabled && setFocused(section.id)}
114
+ onBlur={() => !section.disabled && setFocused(null)}
115
+ hoverStyles={themeValues.focusStyles}
116
+ animate={openSection === section.id ? "open" : "closed"}
117
+ initial={initiallyOpen ? "open" : "closed"}
118
+ key={`item-${section.id}`}
119
+ extraStyles={borderStyles}
120
+ >
121
+ <Stack childGap="0">
122
+ <Box
123
+ padding={
124
+ section.hideRadioButton ? "1.5rem" : "1.25rem 1.5rem"
125
+ }
126
+ background={
127
+ section.disabled
128
+ ? themeValues.headingDisabledColor
129
+ : themeValues.headingBackgroundColor
130
+ }
131
+ onClick={
132
+ (isMobile && supportsTouch) || section.disabled
133
+ ? noop
134
+ : () => toggleOpenSection(section.id)
135
+ }
136
+ onTouchEnd={
137
+ isMobile && supportsTouch && !section.disabled
138
+ ? () => toggleOpenSection(section.id)
139
+ : noop
140
+ }
141
+ key={`header-${section.id}`}
142
+ borderSize="0px"
143
+ borderColor={themeValues.borderColor}
144
+ borderWidthOverride={
145
+ openSection === section.id && !!section.content
146
+ ? `0px 0px 1px 0px`
147
+ : ``
148
+ }
149
+ extraStyles={!section.disabled ? "cursor: pointer;" : ""}
150
+ dataQa={section.dataQa ? section.dataQa : section.id}
151
+ >
152
+ <Cluster
153
+ justify="space-between"
154
+ align="center"
155
+ childGap="1px"
156
+ nowrap
158
157
  >
159
- <Cluster
160
- justify="space-between"
161
- align="center"
162
- childGap="1px"
163
- nowrap
164
- >
165
- <Cluster justify="flex-start" align="center" nowrap>
166
- {!section.hideRadioButton && (
167
- <Box padding="0">
168
- <RadioButton
169
- name={
170
- typeof section.title === "string"
171
- ? createIdFromString(section.title)
172
- : section.id
173
- }
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
- />
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 variant="p" color={CHARADE_GREY}>
191
- {section.title}
192
- </Text>
158
+ <Cluster justify="flex-start" align="center" nowrap>
159
+ {!section.hideRadioButton && (
160
+ <Box padding="0">
161
+ <RadioButton
162
+ name={
163
+ typeof section.title === "string"
164
+ ? createIdFromString(section.title)
165
+ : section.id
166
+ }
167
+ ariaDescribedBy={ariaDescribedBy}
168
+ radioOn={openSection === section.id}
169
+ radioFocused={focused === section.id}
170
+ toggleRadio={
171
+ section.disabled
172
+ ? noop
173
+ : () => toggleOpenSection(section.id)
174
+ }
175
+ tabIndex="-1"
176
+ />
193
177
  </Box>
194
- </Cluster>
195
- {section.rightIcons && (
196
- <Cluster childGap="0.5rem">
197
- {section.rightIcons.map(icon => (
198
- <RightIcon
199
- src={icon.img}
200
- key={icon.img}
201
- fade={!icon.enabled}
202
- isMobile={isMobile}
203
- alt={icon.altText}
204
- />
205
- ))}
206
- </Cluster>
207
178
  )}
208
- {section.rightTitleContent && (
209
- <Fragment>{section.rightTitleContent}</Fragment>
179
+ {section.titleIcon && (
180
+ <Cluster align="center">{section.titleIcon}</Cluster>
210
181
  )}
182
+ <Box padding={section.titleIcon ? "0 0 0 8px" : "0"}>
183
+ <Text variant="p" color={CHARADE_GREY}>
184
+ {section.title}
185
+ </Text>
186
+ </Box>
211
187
  </Cluster>
212
- </Box>
213
- <AnimatePresence initial={false}>
214
- {openSection === section.id && (
215
- <Motion
216
- key={`content-${section.id}`}
217
- padding="0"
218
- background={themeValues.bodyBackgroundColor}
219
- layoutTransition
220
- initial="closed"
221
- animate="open"
222
- exit="closed"
223
- variants={wrapper}
224
- extraStyles={`transform-origin: 100% 0;`}
225
- >
226
- {section.content}
227
- </Motion>
188
+ {section.rightIcons && (
189
+ <Cluster childGap="0.5rem">
190
+ {section.rightIcons.map(icon => (
191
+ <RightIcon
192
+ src={icon.img}
193
+ key={icon.img}
194
+ fade={!icon.enabled}
195
+ isMobile={isMobile}
196
+ alt={icon.altText}
197
+ />
198
+ ))}
199
+ </Cluster>
228
200
  )}
229
- </AnimatePresence>
230
- </Stack>
231
- </Motion>
232
- )
233
- )}
201
+ {section.rightTitleContent && (
202
+ <Fragment>{section.rightTitleContent}</Fragment>
203
+ )}
204
+ </Cluster>
205
+ </Box>
206
+ <AnimatePresence initial={false}>
207
+ {openSection === section.id && (
208
+ <Motion
209
+ key={`content-${section.id}`}
210
+ padding="0"
211
+ background={themeValues.bodyBackgroundColor}
212
+ layoutTransition
213
+ initial="closed"
214
+ animate="open"
215
+ exit="closed"
216
+ variants={wrapper}
217
+ extraStyles={`transform-origin: 100% 0;`}
218
+ >
219
+ {section.content}
220
+ </Motion>
221
+ )}
222
+ </AnimatePresence>
223
+ </Stack>
224
+ </Motion>
225
+ ))}
234
226
  </Stack>
235
227
  </Box>
236
228
  );