@thecb/components 7.1.2-beta.1 → 7.1.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.
package/package.json
CHANGED
|
@@ -12,9 +12,9 @@ const PaymentMethodAddIcon = ({ themeValues }) => {
|
|
|
12
12
|
viewBox="0 0 100 100"
|
|
13
13
|
>
|
|
14
14
|
<defs>
|
|
15
|
-
<path id="path-1" d="M0 0H103V100H0z"></path>
|
|
15
|
+
<path id="path-1-payment-method-add" d="M0 0H103V100H0z"></path>
|
|
16
16
|
<path
|
|
17
|
-
id="path-3"
|
|
17
|
+
id="path-3-payment-method-add"
|
|
18
18
|
d="M16.624999 11.3749994L11.3749994 11.3749994 11.3749994 16.624999 9.62499952 16.624999 9.62499952 11.3749994 4.37499993 11.3749994 4.37499993 9.62499952 9.62499952 9.62499952 9.62499952 4.37499993 11.3749994 4.37499993 11.3749994 9.62499952 16.624999 9.62499952z"
|
|
19
19
|
></path>
|
|
20
20
|
</defs>
|
|
@@ -26,10 +26,10 @@ const PaymentMethodAddIcon = ({ themeValues }) => {
|
|
|
26
26
|
transform="translate(-1)"
|
|
27
27
|
>
|
|
28
28
|
<g>
|
|
29
|
-
<mask id="mask-2" fill={themeValues.primaryColor}>
|
|
30
|
-
<use xlinkHref="#path-1"></use>
|
|
29
|
+
<mask id="mask-2-payment-method-add" fill={themeValues.primaryColor}>
|
|
30
|
+
<use xlinkHref="#path-1-payment-method-add"></use>
|
|
31
31
|
</mask>
|
|
32
|
-
<g mask="url(#mask-2)">
|
|
32
|
+
<g mask="url(#mask-2-payment-method-add)">
|
|
33
33
|
<g transform="translate(11.33 11)">
|
|
34
34
|
<path
|
|
35
35
|
fill={themeValues.primaryColor}
|
|
@@ -52,11 +52,14 @@ const PaymentMethodAddIcon = ({ themeValues }) => {
|
|
|
52
52
|
fill={themeValues.subIconColor}
|
|
53
53
|
></circle>
|
|
54
54
|
<g transform="translate(2.8 2.8)">
|
|
55
|
-
<mask id="mask-4" fill="#fff">
|
|
56
|
-
<use xlinkHref="#path-3"></use>
|
|
55
|
+
<mask id="mask-4-payment-method-add" fill="#fff">
|
|
56
|
+
<use xlinkHref="#path-3-payment-method-add"></use>
|
|
57
57
|
</mask>
|
|
58
|
-
<use fill="#000" xlinkHref="#path-3"></use>
|
|
59
|
-
<g
|
|
58
|
+
<use fill="#000" xlinkHref="#path-3-payment-method-add"></use>
|
|
59
|
+
<g
|
|
60
|
+
fill={themeValues.primaryColor}
|
|
61
|
+
mask="url(#mask-4-payment-method-add)"
|
|
62
|
+
>
|
|
60
63
|
<g>
|
|
61
64
|
<path d="M0 0H21V21H0z"></path>
|
|
62
65
|
</g>
|
|
@@ -10,9 +10,27 @@ import {
|
|
|
10
10
|
GRECIAN_GREY,
|
|
11
11
|
CHARADE_GREY
|
|
12
12
|
} from "../../../constants/colors";
|
|
13
|
-
import {
|
|
13
|
+
import {
|
|
14
|
+
AccountsAddIcon,
|
|
15
|
+
PropertiesAddIcon,
|
|
16
|
+
IconAdd,
|
|
17
|
+
PaymentMethodAddIcon
|
|
18
|
+
} from "../icons";
|
|
14
19
|
import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
|
|
15
20
|
|
|
21
|
+
const getLargeIcon = iconName => {
|
|
22
|
+
switch (iconName) {
|
|
23
|
+
case "accounts":
|
|
24
|
+
return <AccountsAddIcon />;
|
|
25
|
+
case "properties":
|
|
26
|
+
return <PropertiesAddIcon />;
|
|
27
|
+
case "payments":
|
|
28
|
+
return <PaymentMethodAddIcon />;
|
|
29
|
+
default:
|
|
30
|
+
return <AccountsAddIcon />;
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
|
|
16
34
|
const PlaceholderContentWrapper = ({
|
|
17
35
|
isLink,
|
|
18
36
|
action,
|
|
@@ -109,11 +127,7 @@ const Placeholder = ({
|
|
|
109
127
|
>
|
|
110
128
|
{variant === "large" ? (
|
|
111
129
|
<Center intrinsic>
|
|
112
|
-
{largeIcon
|
|
113
|
-
<AccountsAddIcon />
|
|
114
|
-
) : (
|
|
115
|
-
<PropertiesAddIcon />
|
|
116
|
-
)}
|
|
130
|
+
{getLargeIcon(largeIcon)}
|
|
117
131
|
<Text
|
|
118
132
|
variant="pS"
|
|
119
133
|
color={themeValues.color}
|