@thecb/components 3.5.9 → 3.5.12-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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thecb/components",
3
- "version": "3.5.9",
3
+ "version": "3.5.12-beta.0",
4
4
  "description": "Common lib for CityBase react components",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.esm.js",
@@ -8,19 +8,21 @@ import { themeComponent } from "../../../util/themeUtils";
8
8
  const Alert = ({
9
9
  heading,
10
10
  text,
11
+ textOverride,
11
12
  variant,
12
13
  children,
13
14
  height,
14
15
  onLinkClick,
16
+ padding = "0.5rem",
15
17
  showQuitLink = true,
16
18
  themeValues
17
19
  }) => {
18
20
  const Icon = AlertIcons[variant];
19
21
  return (
20
22
  <Box
21
- padding="0.5rem"
23
+ padding={padding}
22
24
  width="100%"
23
- minHeight="100px"
25
+ minHeight={height && parseInt(height) < 100 ? height : "100px"}
24
26
  height={height ? height : "auto"}
25
27
  background={themeValues.background}
26
28
  borderRadius="4px"
@@ -37,17 +39,21 @@ const Alert = ({
37
39
  </Box>
38
40
  <Box padding="0">
39
41
  <Sidebar onRight width="24px" childGap="0rem">
40
- <Box padding="1rem">
42
+ <Box padding={`${padding} 1rem`}>
41
43
  <Cluster justify="flex-start" align="center">
42
- <Stack fullHeight childGap="0.25rem">
43
- <Text variant="p" color={themeValues.text} weight="600">
44
- {heading}
45
- </Text>
46
- <Text variant="pS" color={themeValues.text}>
47
- {text}
48
- </Text>
49
- {children}
50
- </Stack>
44
+ {textOverride ? (
45
+ textOverride
46
+ ) : (
47
+ <Stack fullHeight childGap="0.25rem">
48
+ <Text variant="p" color={themeValues.text} weight="600">
49
+ {heading}
50
+ </Text>
51
+ <Text variant="pS" color={themeValues.text}>
52
+ {text}
53
+ </Text>
54
+ {children}
55
+ </Stack>
56
+ )}
51
57
  </Cluster>
52
58
  </Box>
53
59
  <Cluster justify="flex-end" align="flex-start">
@@ -160,9 +160,14 @@ const RadioSection = ({
160
160
  />
161
161
  </Box>
162
162
  )}
163
- <Text variant="p" color={CHARADE_GREY} aria-level="3">
164
- {section.title}
165
- </Text>
163
+ {section.titleIcon && (
164
+ <Cluster align="center">{section.titleIcon}</Cluster>
165
+ )}
166
+ <Box padding={section.titleIcon ? "0 0 0 8px" : "0"}>
167
+ <Text variant="p" color={CHARADE_GREY} aria-level="3">
168
+ {section.title}
169
+ </Text>
170
+ </Box>
166
171
  </Cluster>
167
172
  {section.rightIcons && (
168
173
  <Cluster childGap="0.5rem">
@@ -11,7 +11,7 @@ export const AlertSuccessIcon = () => (
11
11
  <defs>
12
12
  <path
13
13
  d="M12,24 C18.627417,24 24,18.627417 24,12 C24,5.372583 18.627417,0 12,0 C5.372583,0 0,5.372583 0,12 C0,18.627417 5.372583,24 12,24 Z M16.9497475,7.46446609 L18.363961,8.87867966 L9.87867966,17.363961 L5.63603897,13.1213203 L7.05025253,11.7071068 L9.87803897,14.5354661 L16.9497475,7.46446609 Z"
14
- id="path-1"
14
+ id="alertSuccess"
15
15
  ></path>
16
16
  </defs>
17
17
  <g
@@ -27,13 +27,13 @@ export const AlertSuccessIcon = () => (
27
27
  transform="translate(24.000000, 34.000000)"
28
28
  >
29
29
  <mask id="mask-2" fill="white">
30
- <use xlinkHref="#path-1"></use>
30
+ <use xlinkHref="#alertSuccess"></use>
31
31
  </mask>
32
32
  <use
33
33
  id="background-2"
34
34
  fill="#47B872"
35
35
  fillRule="nonzero"
36
- xlinkHref="#path-1"
36
+ xlinkHref="#alertSuccess"
37
37
  ></use>
38
38
  </g>
39
39
  </g>
package/.tool-versions DELETED
@@ -1 +0,0 @@
1
- nodejs 10.15.3