@thecb/components 10.4.4-beta.2 → 10.4.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 +78 -15
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +78 -16
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/atoms/.DS_Store +0 -0
- package/src/components/atoms/icons/DisabledAccountsAddIcon.js +14 -14
- package/src/components/atoms/icons/DisabledPaymentMethodAddIcon.js +76 -0
- package/src/components/atoms/icons/DisabledPaymentMethodAddIcon.stories.js +14 -0
- package/src/components/atoms/icons/PropertiesAddIcon.js +1 -0
- package/src/components/atoms/icons/index.js +3 -1
- package/src/components/atoms/placeholder/Placeholder.js +3 -2
package/package.json
CHANGED
|
Binary file
|
|
@@ -25,7 +25,7 @@ const DisabledAccountsAddIcon = () => {
|
|
|
25
25
|
/>
|
|
26
26
|
<path
|
|
27
27
|
d="M77.0408 78.1002V32.5154C77.0408 31.9007 76.5506 31.4039 75.9474 31.4039H32.3148C31.7106 31.4039 31.2213 31.9007 31.2213 32.5154V81.3853"
|
|
28
|
-
stroke="#
|
|
28
|
+
stroke="#878E9B"
|
|
29
29
|
strokeWidth="2.0653"
|
|
30
30
|
strokeLinecap="round"
|
|
31
31
|
strokeLinejoin="round"
|
|
@@ -38,21 +38,21 @@ const DisabledAccountsAddIcon = () => {
|
|
|
38
38
|
/>
|
|
39
39
|
<path
|
|
40
40
|
d="M69.156 84.1973V11.6448C69.156 11.0302 68.6658 10.5324 68.0625 10.5324H24.43C23.8258 10.5324 23.3365 11.0302 23.3365 11.6448V78.1002"
|
|
41
|
-
stroke="#
|
|
41
|
+
stroke="#878E9B"
|
|
42
42
|
strokeWidth="2.0653"
|
|
43
43
|
strokeLinecap="round"
|
|
44
44
|
strokeLinejoin="round"
|
|
45
45
|
/>
|
|
46
46
|
<path
|
|
47
47
|
d="M23.3362 19.3115H69.1556"
|
|
48
|
-
stroke="#
|
|
48
|
+
stroke="#878E9B"
|
|
49
49
|
strokeWidth="1.9285"
|
|
50
50
|
strokeLinecap="round"
|
|
51
51
|
strokeLinejoin="round"
|
|
52
52
|
/>
|
|
53
53
|
<path
|
|
54
54
|
d="M69.156 40.1818H77.041"
|
|
55
|
-
stroke="#
|
|
55
|
+
stroke="#878E9B"
|
|
56
56
|
strokeWidth="1.9285"
|
|
57
57
|
strokeLinecap="round"
|
|
58
58
|
strokeLinejoin="round"
|
|
@@ -67,7 +67,7 @@ const DisabledAccountsAddIcon = () => {
|
|
|
67
67
|
fillRule="evenodd"
|
|
68
68
|
clipRule="evenodd"
|
|
69
69
|
d="M29.82 36.5974H62.672V31.4038H29.82V36.5974Z"
|
|
70
|
-
stroke="#
|
|
70
|
+
stroke="#878E9B"
|
|
71
71
|
strokeWidth="2.0653"
|
|
72
72
|
strokeLinecap="round"
|
|
73
73
|
strokeLinejoin="round"
|
|
@@ -82,14 +82,14 @@ const DisabledAccountsAddIcon = () => {
|
|
|
82
82
|
fillRule="evenodd"
|
|
83
83
|
clipRule="evenodd"
|
|
84
84
|
d="M29.82 45.9207H62.672V40.7271H29.82V45.9207Z"
|
|
85
|
-
stroke="#
|
|
85
|
+
stroke="#878E9B"
|
|
86
86
|
strokeWidth="2.0653"
|
|
87
87
|
strokeLinecap="round"
|
|
88
88
|
strokeLinejoin="round"
|
|
89
89
|
/>
|
|
90
90
|
<path
|
|
91
91
|
d="M29.8201 26.2602H46.2466"
|
|
92
|
-
stroke="#
|
|
92
|
+
stroke="#878E9B"
|
|
93
93
|
strokeWidth="2.0653"
|
|
94
94
|
strokeLinecap="round"
|
|
95
95
|
strokeLinejoin="round"
|
|
@@ -104,7 +104,7 @@ const DisabledAccountsAddIcon = () => {
|
|
|
104
104
|
fillRule="evenodd"
|
|
105
105
|
clipRule="evenodd"
|
|
106
106
|
d="M29.82 63.0901H62.672V57.8964H29.82V63.0901Z"
|
|
107
|
-
stroke="#
|
|
107
|
+
stroke="#878E9B"
|
|
108
108
|
strokeWidth="2.0653"
|
|
109
109
|
strokeLinecap="round"
|
|
110
110
|
strokeLinejoin="round"
|
|
@@ -119,7 +119,7 @@ const DisabledAccountsAddIcon = () => {
|
|
|
119
119
|
fillRule="evenodd"
|
|
120
120
|
clipRule="evenodd"
|
|
121
121
|
d="M29.82 72.4143H62.672V67.2207H29.82V72.4143Z"
|
|
122
|
-
stroke="#
|
|
122
|
+
stroke="#878E9B"
|
|
123
123
|
strokeWidth="2.0653"
|
|
124
124
|
strokeLinecap="round"
|
|
125
125
|
strokeLinejoin="round"
|
|
@@ -128,20 +128,20 @@ const DisabledAccountsAddIcon = () => {
|
|
|
128
128
|
fillRule="evenodd"
|
|
129
129
|
clipRule="evenodd"
|
|
130
130
|
d="M48.3403 83.2719H62.672V79.298H48.3403V83.2719Z"
|
|
131
|
-
fill="#
|
|
131
|
+
fill="#878E9B"
|
|
132
132
|
/>
|
|
133
133
|
<path
|
|
134
134
|
fillRule="evenodd"
|
|
135
135
|
clipRule="evenodd"
|
|
136
136
|
d="M48.3403 83.2719H62.672V79.298H48.3403V83.2719Z"
|
|
137
|
-
stroke="#
|
|
137
|
+
stroke="#878E9B"
|
|
138
138
|
strokeWidth="2.0653"
|
|
139
139
|
strokeLinecap="round"
|
|
140
140
|
strokeLinejoin="round"
|
|
141
141
|
/>
|
|
142
142
|
<path
|
|
143
143
|
d="M29.8201 52.7535H46.2466"
|
|
144
|
-
stroke="#
|
|
144
|
+
stroke="#878E9B"
|
|
145
145
|
strokeWidth="2.0653"
|
|
146
146
|
strokeLinecap="round"
|
|
147
147
|
strokeLinejoin="round"
|
|
@@ -156,13 +156,13 @@ const DisabledAccountsAddIcon = () => {
|
|
|
156
156
|
fillRule="evenodd"
|
|
157
157
|
clipRule="evenodd"
|
|
158
158
|
d="M69.1557 40.1818H77.0407V31.4038H69.1557V40.1818Z"
|
|
159
|
-
fill="#
|
|
159
|
+
fill="#878E9B"
|
|
160
160
|
/>
|
|
161
161
|
<path
|
|
162
162
|
fillRule="evenodd"
|
|
163
163
|
clipRule="evenodd"
|
|
164
164
|
d="M23.3363 19.3112H69.1557V10.5323H23.3363V19.3112Z"
|
|
165
|
-
fill="#
|
|
165
|
+
fill="#878E9B"
|
|
166
166
|
/>
|
|
167
167
|
<path
|
|
168
168
|
d="M72.0041 90.1C79.3495 90.1 85.3041 84.1454 85.3041 76.8C85.3041 69.4546 79.3495 63.5 72.0041 63.5C64.6587 63.5 58.7041 69.4546 58.7041 76.8C58.7041 84.1454 64.6587 90.1 72.0041 90.1Z"
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { fallbackValues } from "./Icons.theme";
|
|
3
|
+
import { themeComponent } from "../../../util/themeUtils";
|
|
4
|
+
|
|
5
|
+
const DisabledPaymentMethodAddIcon = () => {
|
|
6
|
+
return (
|
|
7
|
+
<svg
|
|
8
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
9
|
+
xmlnsXlink="http://www.w3.org/1999/xlink"
|
|
10
|
+
width="100"
|
|
11
|
+
height="100"
|
|
12
|
+
viewBox="0 0 100 100"
|
|
13
|
+
>
|
|
14
|
+
<defs>
|
|
15
|
+
<path id="path-1-payment-method-add" d="M0 0H103V100H0z"></path>
|
|
16
|
+
<path
|
|
17
|
+
id="path-3-payment-method-add"
|
|
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
|
+
></path>
|
|
20
|
+
</defs>
|
|
21
|
+
<g
|
|
22
|
+
fill="none"
|
|
23
|
+
fillRule="evenodd"
|
|
24
|
+
stroke="none"
|
|
25
|
+
strokeWidth="1"
|
|
26
|
+
transform="translate(-1)"
|
|
27
|
+
>
|
|
28
|
+
<g>
|
|
29
|
+
<mask id="mask-2-payment-method-add" fill="#878E9B">
|
|
30
|
+
<use xlinkHref="#path-1-payment-method-add"></use>
|
|
31
|
+
</mask>
|
|
32
|
+
<g mask="url(#mask-2-payment-method-add)">
|
|
33
|
+
<g transform="translate(11.33 11)">
|
|
34
|
+
<path
|
|
35
|
+
fill="#878E9B"
|
|
36
|
+
fillRule="evenodd"
|
|
37
|
+
d="M85.49 9v38H40.17v16.251c0 .918-.726 1.67-1.65 1.743l-.147.006h-27.41c-1.966-2.87-3.557-5.537-4.842-8H31.93v-4H5.15v2.055C-1.194 41.772 1.678 35 1.678 35H15.45V9h70.04z"
|
|
38
|
+
></path>
|
|
39
|
+
<path
|
|
40
|
+
fill="#878E9B"
|
|
41
|
+
fillRule="nonzero"
|
|
42
|
+
d="M39.963 0c8.67 0 16.925 2.695 23.741 7.603l.461.336H85.49c.547 0 .997.414 1.055.945l.006.116v38c0 .547-.414.997-.945 1.055l-.116.006h-6.75l-.01.04c-4.35 17.186-20.282 29.496-38.767 29.496C17.92 77.597.038 60.235.038 38.799c0-11.976 5.58-22.68 14.35-29.795V9c0-.547.415-.997.946-1.055l.116-.006h.31c6.716-4.981 15.105-7.94 24.203-7.94zM76.095 48.06H40.201v15.19c0 1.5-1.185 2.717-2.672 2.805l-.172.005H15.346c6.573 5.588 15.185 8.976 24.617 8.976 17.105 0 31.859-11.237 36.132-26.976zM13.053 63.94l24.304-.001c.37 0 .668-.263.715-.595l.007-.093L38.078 48H3.813c1.642 6.084 4.874 11.545 9.24 15.94zM84.428 10.06H17.197c-.231.172-.46.347-.687.524l.001 23.354h20.846c1.508 0 2.75 1.163 2.84 2.64l.004.17v9.19l44.227-.001V10.061zm-25.629 25.59l.226.14.334.217.869.584 2.017 1.396c.608.413 1.147.76 1.657 1.066 1.562.934 2.772 1.404 3.545 1.353.706-.047 1.215-.139 1.724-.306l.257-.092 2.175-.952.957-.407.352-.143.32-.126c1.831-.702 3.446.022 4.737 1.553.534.632.903 1.26 1.106 1.7a.875.875 0 01-1.538.828l-.15-.29-.113-.198a6.64 6.64 0 00-.642-.912c-.863-1.023-1.773-1.432-2.774-1.048l-.456.182-.798.335-2.562 1.116-.046.018c-.749.277-1.463.424-2.434.487-1.234.082-2.708-.49-4.558-1.597-.433-.259-.882-.545-1.369-.869l-2.409-1.66-.857-.577-.377-.243a2.382 2.382 0 00-.057-.034c-2.004-1.14-4.756 1.386-6.683 5.22a.875.875 0 11-1.564-.785c.088-.173.176-.344.266-.513l.275-.5c.464-.821.962-1.582 1.488-2.258l.318-.396c2.035-2.442 4.432-3.615 6.764-2.288zm-56.09.34l-.032.426A35.67 35.67 0 002.666 41L38.078 41v-4.25a.701.701 0 00-.623-.682l-.098-.007H3.09c-.134 0-.263-.025-.381-.07zm.22-2.04l.045-.006.116-.006h11.298V12.377C8.276 17.947 4.097 25.487 2.93 33.952zM77.352 14v1.697c1.402.247 2.599.742 3.634 1.48l-1.963 2.457c-1.295-.826-2.71-1.238-3.965-1.238-.95 0-1.417.34-1.417.807v.036c0 .574.487.824 2.47 1.22 3.236.627 5.259 1.56 5.259 3.91v.035c0 2.11-1.551 3.515-4.018 3.947V30h-3.737v-1.671c-1.735-.278-3.33-.916-4.605-1.916l2.184-2.314c1.416.986 2.954 1.507 4.592 1.507 1.072 0 1.639-.324 1.639-.862v-.035c0-.538-.465-.808-2.407-1.22-3.015-.61-5.341-1.363-5.341-3.928v-.035c0-1.953 1.466-3.45 3.938-3.885V14h3.737zM49.44 26.625a.875.875 0 01.11 1.743l-.11.007H19.57a.875.875 0 01-.11-1.743l.11-.007h29.87zm-12.36-6a.875.875 0 01.11 1.743l-.11.007H19.57a.875.875 0 01-.11-1.743l.11-.007h17.51zm11.33-6a.875.875 0 01.11 1.743l-.11.007H35.02a.875.875 0 01-.11-1.743l.11-.007h13.39zm-17.51 0a.875.875 0 01.11 1.743l-.11.007H19.57a.875.875 0 01-.11-1.743l.11-.007H30.9zM39.963 2.56c-7.19 0-13.902 1.969-19.599 5.38h39.197c-5.824-3.489-12.562-5.38-19.598-5.38z"
|
|
43
|
+
></path>
|
|
44
|
+
</g>
|
|
45
|
+
</g>
|
|
46
|
+
</g>
|
|
47
|
+
<g transform="translate(59 61)">
|
|
48
|
+
<circle
|
|
49
|
+
cx="13.3"
|
|
50
|
+
cy="13.3"
|
|
51
|
+
r="13.3"
|
|
52
|
+
fill="#878E9B"
|
|
53
|
+
></circle>
|
|
54
|
+
<g transform="translate(2.8 2.8)">
|
|
55
|
+
<mask id="mask-4-payment-method-add" fill="#fff">
|
|
56
|
+
<use xlinkHref="#path-3-payment-method-add"></use>
|
|
57
|
+
</mask>
|
|
58
|
+
<use fill="#000" xlinkHref="#path-3-payment-method-add"></use>
|
|
59
|
+
<g fill="#878E9B" mask="url(#mask-4-payment-method-add)">
|
|
60
|
+
<g>
|
|
61
|
+
<path d="M0 0H21V21H0z"></path>
|
|
62
|
+
</g>
|
|
63
|
+
</g>
|
|
64
|
+
</g>
|
|
65
|
+
</g>
|
|
66
|
+
</g>
|
|
67
|
+
</svg>
|
|
68
|
+
);
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
export default themeComponent(
|
|
72
|
+
DisabledPaymentMethodAddIcon,
|
|
73
|
+
"Icons",
|
|
74
|
+
fallbackValues,
|
|
75
|
+
"info"
|
|
76
|
+
);
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import page from "../../../../.storybook/page";
|
|
3
|
+
import { DisabledPaymentMethodAddIcon } from "./DisabledPaymentMethodAddIcon";
|
|
4
|
+
|
|
5
|
+
const disabledPaymentMethodAddIcon = () => {
|
|
6
|
+
return <DisabledPaymentMethodAddIcon />;
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
const story = page({
|
|
10
|
+
title: "Atoms/DisabledPaymentMethodAddIcon",
|
|
11
|
+
Component: DisabledPaymentMethodAddIcon
|
|
12
|
+
});
|
|
13
|
+
|
|
14
|
+
export default story;
|
|
@@ -91,6 +91,7 @@ import MultiCartIcon from "./MultiCartIcon";
|
|
|
91
91
|
import CloseIcon from "./CloseIcon";
|
|
92
92
|
import TrashIconV2 from "./TrashIconV2";
|
|
93
93
|
import DisabledAccountsAddIcon from "./DisabledAccountsAddIcon";
|
|
94
|
+
import DisabledPaymentMethodAddIcon from "./DisabledPaymentMethodAddIcon";
|
|
94
95
|
|
|
95
96
|
export {
|
|
96
97
|
AccountsIcon,
|
|
@@ -185,5 +186,6 @@ export {
|
|
|
185
186
|
MultiCartIcon,
|
|
186
187
|
CloseIcon,
|
|
187
188
|
TrashIconV2,
|
|
188
|
-
DisabledAccountsAddIcon
|
|
189
|
+
DisabledAccountsAddIcon,
|
|
190
|
+
DisabledPaymentMethodAddIcon
|
|
189
191
|
};
|
|
@@ -16,7 +16,8 @@ import {
|
|
|
16
16
|
PropertiesAddIcon,
|
|
17
17
|
IconAdd,
|
|
18
18
|
PaymentMethodAddIcon,
|
|
19
|
-
DisabledAccountsAddIcon
|
|
19
|
+
DisabledAccountsAddIcon,
|
|
20
|
+
DisabledPaymentMethodAddIcon
|
|
20
21
|
} from "../icons";
|
|
21
22
|
import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
|
|
22
23
|
import { MANATEE_GREY } from "../../../constants/colors";
|
|
@@ -30,7 +31,7 @@ const getLargeIcon = (iconName, isDisabled) => {
|
|
|
30
31
|
return isDisabled ? <DisabledAccountsAddIcon /> : <PropertiesAddIcon />;
|
|
31
32
|
case "payments":
|
|
32
33
|
return isDisabled ? (
|
|
33
|
-
<
|
|
34
|
+
<DisabledPaymentMethodAddIcon />
|
|
34
35
|
) : (
|
|
35
36
|
<PaymentMethodAddIcon />
|
|
36
37
|
);
|