@thecb/components 10.2.4-beta.2 → 10.2.4-beta.4
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/dist/index.cjs.js +21 -13
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +21 -13
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/atoms/layouts/Box.js +1 -0
- package/src/components/atoms/placeholder/Placeholder.js +80 -76
- package/src/components/molecules/link-card/LinkCard.js +25 -7
- package/src/components/molecules/link-card/LinkCard.stories.js +7 -5
package/package.json
CHANGED
|
@@ -41,8 +41,12 @@ const PlaceholderContentWrapper = ({
|
|
|
41
41
|
disabled = false
|
|
42
42
|
}) =>
|
|
43
43
|
isLink ? (
|
|
44
|
-
<Link to={destination} data-qa={dataQa} disabled={disabled}>
|
|
45
|
-
<Box
|
|
44
|
+
<Link to={destination} data-qa={dataQa} aria-disabled={disabled}>
|
|
45
|
+
<Box
|
|
46
|
+
padding="0"
|
|
47
|
+
minHeight="100%"
|
|
48
|
+
extraStyles={disabled ? `cursor: default;` : `cursor: pointer;`}
|
|
49
|
+
>
|
|
46
50
|
{children}
|
|
47
51
|
</Box>
|
|
48
52
|
</Link>
|
|
@@ -53,11 +57,7 @@ const PlaceholderContentWrapper = ({
|
|
|
53
57
|
minHeight="100%"
|
|
54
58
|
dataQa={dataQa}
|
|
55
59
|
aria-disabled={disabled}
|
|
56
|
-
extraStyles={
|
|
57
|
-
disabled
|
|
58
|
-
? "cursor: default; opacity: 0.7;"
|
|
59
|
-
: "cursor: pointer; opacity: 1;"
|
|
60
|
-
}
|
|
60
|
+
extraStyles={disabled ? "cursor: default;" : "cursor: pointer;"}
|
|
61
61
|
>
|
|
62
62
|
{children}
|
|
63
63
|
</Box>
|
|
@@ -74,21 +74,24 @@ const Placeholder = ({
|
|
|
74
74
|
themeValues,
|
|
75
75
|
dataQa,
|
|
76
76
|
disabled = false
|
|
77
|
-
}) =>
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
77
|
+
}) => {
|
|
78
|
+
const tintedColor = `${tint(0.9, themeValues.color)}`;
|
|
79
|
+
|
|
80
|
+
return (
|
|
81
|
+
<PlaceholderContentWrapper
|
|
82
|
+
isLink={isLink}
|
|
83
|
+
action={action}
|
|
84
|
+
destination={destination}
|
|
85
|
+
dataQa={dataQa}
|
|
86
|
+
disabled={disabled}
|
|
87
|
+
>
|
|
88
|
+
<Box
|
|
89
|
+
padding="0"
|
|
90
|
+
borderRadius="4px"
|
|
91
|
+
border="none"
|
|
92
|
+
minHeight={themeValues.height}
|
|
93
|
+
hiddenStyles={!visible}
|
|
94
|
+
extraStyles={`
|
|
92
95
|
background: linear-gradient(
|
|
93
96
|
to right,
|
|
94
97
|
${variant === "large" ? STORM_GREY : themeValues.color} 40%,
|
|
@@ -109,22 +112,22 @@ const Placeholder = ({
|
|
|
109
112
|
display: flex;
|
|
110
113
|
justify-content: center;
|
|
111
114
|
align-items:center;`}
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
115
|
+
hoverStyles={`background-color: ${
|
|
116
|
+
variant === "large" ? GRECIAN_GREY : tintedColor
|
|
117
|
+
};`}
|
|
118
|
+
>
|
|
119
|
+
<Center maxWidth="300px">
|
|
120
|
+
<Box
|
|
121
|
+
padding="0"
|
|
122
|
+
tabIndex="0"
|
|
123
|
+
onKeyPress={e => e.key === "Enter" && !disabled && action()}
|
|
124
|
+
>
|
|
125
|
+
<Cluster justify="center" align="center" minHeight="100%">
|
|
126
|
+
<Switcher maxChildren={2} childGap="0">
|
|
127
|
+
{variant === "large" && <div></div>}
|
|
128
|
+
<Box
|
|
129
|
+
padding="0"
|
|
130
|
+
extraStyles={`.fill {
|
|
128
131
|
fill: ${
|
|
129
132
|
variant === "large" ? CHARADE_GREY : themeValues.color
|
|
130
133
|
};
|
|
@@ -133,44 +136,45 @@ const Placeholder = ({
|
|
|
133
136
|
variant === "large" ? CHARADE_GREY : themeValues.color
|
|
134
137
|
};
|
|
135
138
|
}`}
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
);
|
|
139
|
+
>
|
|
140
|
+
{variant === "large" ? (
|
|
141
|
+
<Center intrinsic>
|
|
142
|
+
{getLargeIcon(largeIcon)}
|
|
143
|
+
<Text
|
|
144
|
+
variant="pS"
|
|
145
|
+
color={themeValues.color}
|
|
146
|
+
weight={FONT_WEIGHT_REGULAR}
|
|
147
|
+
extraStyles={`text-align: center;`}
|
|
148
|
+
>
|
|
149
|
+
{text}
|
|
150
|
+
</Text>
|
|
151
|
+
</Center>
|
|
152
|
+
) : (
|
|
153
|
+
<Cover singleChild minHeight="100%">
|
|
154
|
+
<Cluster justify="center" align="center">
|
|
155
|
+
<IconAdd />
|
|
156
|
+
<Center intrinsic>
|
|
157
|
+
<Text
|
|
158
|
+
variant="pS"
|
|
159
|
+
color={themeValues.color}
|
|
160
|
+
weight={FONT_WEIGHT_REGULAR}
|
|
161
|
+
extraStyles={`padding: 0 0 0 8px; text-align: center;`}
|
|
162
|
+
>
|
|
163
|
+
{text}
|
|
164
|
+
</Text>
|
|
165
|
+
</Center>
|
|
166
|
+
</Cluster>
|
|
167
|
+
</Cover>
|
|
168
|
+
)}
|
|
169
|
+
</Box>
|
|
170
|
+
</Switcher>
|
|
171
|
+
</Cluster>
|
|
172
|
+
</Box>
|
|
173
|
+
</Center>
|
|
174
|
+
</Box>
|
|
175
|
+
</PlaceholderContentWrapper>
|
|
176
|
+
);
|
|
177
|
+
};
|
|
174
178
|
|
|
175
179
|
export default themeComponent(
|
|
176
180
|
Placeholder,
|
|
@@ -4,6 +4,8 @@ import { themeComponent } from "../../../util/themeUtils";
|
|
|
4
4
|
import { fallbackValues } from "./LinkCard.theme";
|
|
5
5
|
import { ThemeContext } from "styled-components";
|
|
6
6
|
import * as Styled from "./LinkCard.styled";
|
|
7
|
+
import { noop } from "../../../util/general";
|
|
8
|
+
import { ATHENS_GREY } from "../../../constants/colors";
|
|
7
9
|
|
|
8
10
|
const LinkCard = ({
|
|
9
11
|
title = "Test Workflow",
|
|
@@ -17,7 +19,8 @@ const LinkCard = ({
|
|
|
17
19
|
extraHoverStyles = "",
|
|
18
20
|
extraActiveStyles = "",
|
|
19
21
|
themeValues,
|
|
20
|
-
titleVariant = "h3"
|
|
22
|
+
titleVariant = "h3",
|
|
23
|
+
disabled = false
|
|
21
24
|
}) => {
|
|
22
25
|
const { isMobile } = useContext(ThemeContext);
|
|
23
26
|
const regex = /\W/g;
|
|
@@ -33,10 +36,16 @@ const LinkCard = ({
|
|
|
33
36
|
minHeight="141px"
|
|
34
37
|
padding="24px"
|
|
35
38
|
theme={themeValues}
|
|
36
|
-
extraStyles={
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
39
|
+
extraStyles={
|
|
40
|
+
disabled
|
|
41
|
+
? extraStyles +
|
|
42
|
+
`background-color: ${ATHENS_GREY} !important; cursor: default;`
|
|
43
|
+
: extraStyles
|
|
44
|
+
}
|
|
45
|
+
hoverStyles={disabled ? "" : extraHoverStyles}
|
|
46
|
+
activeStyles={disabled ? "" : extraActiveStyles}
|
|
47
|
+
onClick={disabled ? noop : onClick}
|
|
48
|
+
aria-disabled={disabled}
|
|
40
49
|
>
|
|
41
50
|
<Stack
|
|
42
51
|
childGap={0}
|
|
@@ -45,12 +54,20 @@ const LinkCard = ({
|
|
|
45
54
|
style={{ width: "100%" }}
|
|
46
55
|
fullHeight
|
|
47
56
|
>
|
|
48
|
-
<Box
|
|
57
|
+
<Box
|
|
58
|
+
padding={0}
|
|
59
|
+
width="100%"
|
|
60
|
+
extraStyles={disabled ? "opacity: 0.5;" : ""}
|
|
61
|
+
>
|
|
49
62
|
<Styled.Title variant={titleVariant} theme={themeValues} margin={0}>
|
|
50
63
|
{title}
|
|
51
64
|
</Styled.Title>
|
|
52
65
|
</Box>
|
|
53
|
-
<Box
|
|
66
|
+
<Box
|
|
67
|
+
padding={"0 0 40px"}
|
|
68
|
+
width="100%"
|
|
69
|
+
extraStyles={disabled ? "opacity: 0.5;" : ""}
|
|
70
|
+
>
|
|
54
71
|
<Styled.Subtitle variant="pS" theme={themeValues}>
|
|
55
72
|
{subtitle}
|
|
56
73
|
</Styled.Subtitle>
|
|
@@ -60,6 +77,7 @@ const LinkCard = ({
|
|
|
60
77
|
borderWidthOverride="0 0 0 0"
|
|
61
78
|
padding="0"
|
|
62
79
|
width="100%"
|
|
80
|
+
extraStyles={disabled ? "opacity: 0.5;" : ""}
|
|
63
81
|
>
|
|
64
82
|
<Styled.Footer direction="row" childGap="6px" justify="space-between">
|
|
65
83
|
{/* To keep rightContent aligned right, use an empty Box as leftContent if none is provided */}
|
|
@@ -4,7 +4,7 @@ import Box from "../../atoms/layouts/Box";
|
|
|
4
4
|
import Stack from "../../atoms/layouts/Stack";
|
|
5
5
|
import Text from "../../atoms/text/Text";
|
|
6
6
|
import page from "../../../../.storybook/page";
|
|
7
|
-
import { text } from "@storybook/addon-knobs";
|
|
7
|
+
import { boolean, text } from "@storybook/addon-knobs";
|
|
8
8
|
import Badge from "../../atoms/badge/Badge";
|
|
9
9
|
import PlusCircleIcon from "../../atoms/icons/PlusCircleIcon";
|
|
10
10
|
import AutopayIcon from "../../atoms/icons/AutopayIcon";
|
|
@@ -13,16 +13,18 @@ const groupId = "props";
|
|
|
13
13
|
|
|
14
14
|
export const linkCard = () => (
|
|
15
15
|
<LinkCard
|
|
16
|
-
|
|
16
|
+
disabled={boolean("disabled", false, groupId)}
|
|
17
|
+
title={text("title", "Link Card Title", groupId)}
|
|
17
18
|
subtitle={text("subtitle", "Link card description", groupId)}
|
|
18
|
-
path={text("path", "/service/animal-care-and-control",
|
|
19
|
-
showLeft={true}
|
|
19
|
+
path={text("path", "/service/animal-care-and-control", groupId)}
|
|
20
|
+
showLeft={boolean("showLeft", true, groupId)}
|
|
21
|
+
onClick={() => window.alert("Click event!")}
|
|
20
22
|
leftContent={
|
|
21
23
|
<Box background="transparent" borderWidthOverride="0 0 0 0" padding="0">
|
|
22
24
|
<Badge label="Autopay Available" Icon={AutopayIcon} />
|
|
23
25
|
</Box>
|
|
24
26
|
}
|
|
25
|
-
showRight={true}
|
|
27
|
+
showRight={boolean("showRight", true, groupId)}
|
|
26
28
|
rightContent={
|
|
27
29
|
<Stack direction="row" childGap="6px">
|
|
28
30
|
<Text
|