@thecb/components 8.4.7-beta.5 → 8.4.8-beta.0

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 (13) hide show
  1. package/dist/index.cjs.js +1472 -560
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.d.ts +2 -28
  4. package/dist/index.esm.js +1472 -560
  5. package/dist/index.esm.js.map +1 -1
  6. package/package.json +1 -1
  7. package/src/components/atoms/index.d.ts +0 -1
  8. package/src/components/molecules/radio-group/index.d.ts +1 -1
  9. package/src/components/molecules/radio-section/RadioSection.js +123 -113
  10. package/src/constants/colors.js +2 -0
  11. package/src/types/common/index.ts +0 -1
  12. package/src/components/atoms/searchable-select/index.d.ts +0 -28
  13. package/src/types/common/SearchableSelectOption.ts +0 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thecb/components",
3
- "version": "8.4.7-beta.5",
3
+ "version": "8.4.8-beta.0",
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/index.d.ts CHANGED
@@ -12,7 +12,6 @@ export * from "./nav-footer";
12
12
  export * from "./nav-header";
13
13
  export * from "./nav-tabs";
14
14
  export * from "./paragraph";
15
- export * from "./searchable-select";
16
15
  export * from "./spinner";
17
16
  export * from "./table";
18
17
  export * from "./text";
package/src/components/molecules/radio-group/index.d.ts CHANGED
@@ -5,7 +5,7 @@ import { Field, FieldActions } from "../../../types/common";
5
5
  interface RadioOption {
6
6
  id: string;
7
7
  labelText: string;
8
- value: string | boolean;
8
+ value: string;
9
9
  }
10
10
 
11
11
  export interface RadioGroupProps {
package/src/components/molecules/radio-section/RadioSection.js CHANGED
@@ -20,6 +20,8 @@ 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)
23
25
  }
24
26
 
25
27
  Also takes an "openSection" which should equal the id of the section that should be open
@@ -42,6 +44,7 @@ const RadioSection = ({
42
44
  staggeredAnimation = false,
43
45
  initiallyOpen = true,
44
46
  openHeight = "auto",
47
+ containerStyles = "",
45
48
  ariaDescribedBy
46
49
  }) => {
47
50
  const handleKeyDown = (id, e) => {
@@ -98,129 +101,136 @@ const RadioSection = ({
98
101
  padding="1px"
99
102
  border={`1px solid ${themeValues.borderColor}`}
100
103
  borderRadius="4px"
104
+ extraStyles={containerStyles}
101
105
  >
102
106
  <Stack childGap="0">
103
107
  {sections
104
108
  .filter(section => !section.hidden)
105
- .map(section => (
106
- <Motion
107
- tabIndex={
108
- section.hideRadioButton || section.disabled ? "-1" : "0"
109
- }
110
- onKeyDown={e => !section.disabled && handleKeyDown(section.id, e)}
111
- onFocus={() => !section.disabled && setFocused(section.id)}
112
- onBlur={() => !section.disabled && setFocused(null)}
113
- hoverStyles={themeValues.focusStyles}
114
- animate={openSection === section.id ? "open" : "closed"}
115
- initial={initiallyOpen ? "open" : "closed"}
116
- key={`item-${section.id}`}
117
- extraStyles={borderStyles}
118
- >
119
- <Stack childGap="0">
120
- <Box
121
- padding={
122
- section.hideRadioButton ? "1.5rem" : "1.25rem 1.5rem"
123
- }
124
- background={
125
- section.disabled
126
- ? themeValues.headingDisabledColor
127
- : themeValues.headingBackgroundColor
128
- }
129
- onClick={
130
- (isMobile && supportsTouch) || section.disabled
131
- ? noop
132
- : () => toggleOpenSection(section.id)
133
- }
134
- onTouchEnd={
135
- isMobile && supportsTouch && !section.disabled
136
- ? () => toggleOpenSection(section.id)
137
- : noop
138
- }
139
- key={`header-${section.id}`}
140
- borderSize="0px"
141
- borderColor={themeValues.borderColor}
142
- borderWidthOverride={
143
- openSection === section.id && !!section.content
144
- ? `0px 0px 1px 0px`
145
- : ``
146
- }
147
- extraStyles={!section.disabled ? "cursor: pointer;" : ""}
148
- dataQa={section.dataQa ? section.dataQa : section.id}
149
- >
150
- <Cluster
151
- justify="space-between"
152
- align="center"
153
- childGap="1px"
154
- nowrap
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}
155
158
  >
156
- <Cluster justify="flex-start" align="center" nowrap>
157
- {!section.hideRadioButton && (
158
- <Box padding="0">
159
- <RadioButton
160
- name={
161
- typeof section.title === "string"
162
- ? createIdFromString(section.title)
163
- : section.id
164
- }
165
- ariaDescribedBy={ariaDescribedBy}
166
- radioOn={openSection === section.id}
167
- radioFocused={focused === section.id}
168
- toggleRadio={
169
- section.disabled
170
- ? noop
171
- : () => toggleOpenSection(section.id)
172
- }
173
- tabIndex="-1"
174
- />
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>
175
193
  </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>
176
207
  )}
177
- {section.titleIcon && (
178
- <Cluster align="center">{section.titleIcon}</Cluster>
208
+ {section.rightTitleContent && (
209
+ <Fragment>{section.rightTitleContent}</Fragment>
179
210
  )}
180
- <Box padding={section.titleIcon ? "0 0 0 8px" : "0"}>
181
- <Text variant="p" color={CHARADE_GREY}>
182
- {section.title}
183
- </Text>
184
- </Box>
185
211
  </Cluster>
186
- {section.rightIcons && (
187
- <Cluster childGap="0.5rem">
188
- {section.rightIcons.map(icon => (
189
- <RightIcon
190
- src={icon.img}
191
- key={icon.img}
192
- fade={!icon.enabled}
193
- isMobile={isMobile}
194
- alt={icon.altText}
195
- />
196
- ))}
197
- </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>
198
228
  )}
199
- {section.rightTitleContent && (
200
- <Fragment>{section.rightTitleContent}</Fragment>
201
- )}
202
- </Cluster>
203
- </Box>
204
- <AnimatePresence initial={false}>
205
- {openSection === section.id && (
206
- <Motion
207
- key={`content-${section.id}`}
208
- padding="0"
209
- background={themeValues.bodyBackgroundColor}
210
- layoutTransition
211
- initial="closed"
212
- animate="open"
213
- exit="closed"
214
- variants={wrapper}
215
- extraStyles={`transform-origin: 100% 0;`}
216
- >
217
- {section.content}
218
- </Motion>
219
- )}
220
- </AnimatePresence>
221
- </Stack>
222
- </Motion>
223
- ))}
229
+ </AnimatePresence>
230
+ </Stack>
231
+ </Motion>
232
+ )
233
+ )}
224
234
  </Stack>
225
235
  </Box>
226
236
  );
package/src/constants/colors.js CHANGED
@@ -36,6 +36,7 @@ const GRECIAN_GREY = "#E5E7EC"; // CBS-200
36
36
  const BLACK_SQUEEZE = "#EAF2F7";
37
37
  const GREY_CHATEAU = "#959CA8"; // CBS-500
38
38
  const COOL_GREY_05 = "#fbfcfd"; // CBS-050
39
+ const MANATEE_GREY = "#878E9B"; // CB-60 (cool)
39
40
  // BLUE
40
41
  const CLOUDBURST_BLUE = "#26395c";
41
42
  const ZODIAC_BLUE = "#14284b";
@@ -171,6 +172,7 @@ export {
171
172
  CHARADE_GREY,
172
173
  GRECIAN_GREY,
173
174
  COOL_GREY_05,
175
+ MANATEE_GREY,
174
176
  BLACK_SQUEEZE,
175
177
  GREY_CHATEAU,
176
178
  CLOUDBURST_BLUE,
package/src/types/common/index.ts CHANGED
@@ -2,6 +2,5 @@ export { default as Field } from "./Field";
2
2
  export { default as ReduxAction } from "./ReduxAction";
3
3
  export { default as FieldActions } from "./FieldActions";
4
4
  export { default as FormSelectOption } from "./FormSelectOption";
5
- export { default as SearchableSelectOption } from "./SearchableSelectOption";
6
5
  export { default as ErrorMessageDictionary } from "./ErrorMessageDictionary";
7
6
  export * from "./FieldActions";
package/src/components/atoms/searchable-select/index.d.ts DELETED
@@ -1,28 +0,0 @@
1
- import React from "react";
2
- import Expand from "../../../util/expand";
3
- import {
4
- Field,
5
- FieldActions,
6
- SearchableSelectOption
7
- } from "../../../types/common";
8
-
9
- export interface SearchableSelectProps {
10
- items: SearchableSelectOption[];
11
- selectedItems: SearchableSelectOption[];
12
- allSelected: boolean;
13
- toggleSelectAllItems: (isSelectAll: boolean) => void;
14
- selectItem: (item: SearchableSelectOption) => void;
15
- fields: {
16
- searchTerm: Field;
17
- };
18
- actions: {
19
- fields: {
20
- searchTerm: FieldActions;
21
- };
22
- };
23
- disabled?: boolean;
24
- placeholder: string;
25
- }
26
-
27
- export const SearchableSelect: React.FC<Expand<SearchableSelectProps> &
28
- React.HTMLAttributes<HTMLElement>>;
package/src/types/common/SearchableSelectOption.ts DELETED
@@ -1,4 +0,0 @@
1
- export default interface SearchableSelectOption {
2
- name?: string;
3
- value?: string;
4
- }