oolib 2.0.0 → 2.1.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.
|
@@ -35,8 +35,9 @@ function TagClear(_a) {
|
|
|
35
35
|
var id = _a.id, display = _a.display, value = _a.value, M = _a.M, invert = _a.invert, _b = _a.onClick, onClick = _b === void 0 ? function () { } : _b, theme = _a.theme, variantSecondary = _a.variantSecondary, variantGhost = _a.variantGhost, grey = _a.grey;
|
|
36
36
|
var XIconCom = icons_1.phosphorIcons['X'];
|
|
37
37
|
var size = M ? 'M' : 'S';
|
|
38
|
-
|
|
39
|
-
|
|
38
|
+
return (react_1.default.createElement(index_styled_1.StyledTagClear, { invert: invert, theme: theme, size: size, grey: grey, variantGhost: variantGhost, variantSecondary: variantSecondary, onClick: function () {
|
|
39
|
+
return !variantSecondary && !variantGhost && onClick(id, { display: display, value: value });
|
|
40
|
+
} },
|
|
40
41
|
react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, display),
|
|
41
42
|
react_1.default.createElement(index_styled_1.StyledIconWrapper, { theme: theme, invert: invert, grey: grey, variantSecondary: variantSecondary, onClick: function () {
|
|
42
43
|
return (variantSecondary || variantGhost) && onClick(id, { display: display, value: value });
|
|
@@ -56,13 +56,13 @@ var StyledTagClear = styled_components_1.default.div(templateObject_9 || (templa
|
|
|
56
56
|
!variantGhost &&
|
|
57
57
|
(!grey
|
|
58
58
|
? (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t "], ["\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t "])), !invert
|
|
59
|
-
? colors.primaryColor100
|
|
60
|
-
: colors.primaryColor40, !invert ? white : greyColor100) : (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t "], ["\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t "])), !invert ? greyColor15 : greyColor80, !invert ? greyColor80 : greyColor40));
|
|
59
|
+
? colors === null || colors === void 0 ? void 0 : colors.primaryColor100
|
|
60
|
+
: colors === null || colors === void 0 ? void 0 : colors.primaryColor40, !invert ? white : greyColor100) : (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t "], ["\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t "])), !invert ? greyColor15 : greyColor80, !invert ? greyColor80 : greyColor40));
|
|
61
61
|
}, function (_a) {
|
|
62
62
|
var variantSecondary = _a.variantSecondary, invert = _a.invert, grey = _a.grey, colors = _a.theme.colors;
|
|
63
63
|
return variantSecondary &&
|
|
64
64
|
(!grey
|
|
65
|
-
? (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n\t\t\t\t\tbackground: none;\n\t\t\t\t\tborder: 2px solid\n\t\t\t\t\t\t", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t "], ["\n\t\t\t\t\tbackground: none;\n\t\t\t\t\tborder: 2px solid\n\t\t\t\t\t\t", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t "])), !invert ? colors.primaryColor100 : colors.primaryColor40, !invert ? colors.primaryColorText : colors.primaryColor40) : (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n\t\t\t\t\tbackground: none;\n\t\t\t\t\tborder: 2px solid ", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t "], ["\n\t\t\t\t\tbackground: none;\n\t\t\t\t\tborder: 2px solid ", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t "])), !invert ? greyColor15 : greyColor80, !invert ? greyColor80 : greyColor15));
|
|
65
|
+
? (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n\t\t\t\t\tbackground: none;\n\t\t\t\t\tborder: 2px solid\n\t\t\t\t\t\t", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t "], ["\n\t\t\t\t\tbackground: none;\n\t\t\t\t\tborder: 2px solid\n\t\t\t\t\t\t", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t "])), !invert ? colors === null || colors === void 0 ? void 0 : colors.primaryColor100 : colors === null || colors === void 0 ? void 0 : colors.primaryColor40, !invert ? colors === null || colors === void 0 ? void 0 : colors.primaryColorText : colors === null || colors === void 0 ? void 0 : colors.primaryColor40) : (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n\t\t\t\t\tbackground: none;\n\t\t\t\t\tborder: 2px solid ", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t "], ["\n\t\t\t\t\tbackground: none;\n\t\t\t\t\tborder: 2px solid ", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t "])), !invert ? greyColor15 : greyColor80, !invert ? greyColor80 : greyColor15));
|
|
66
66
|
}, function (_a) {
|
|
67
67
|
var variantGhost = _a.variantGhost;
|
|
68
68
|
return variantGhost && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n\t\t\tbackground: none;\n\t\t"], ["\n\t\t\tbackground: none;\n\t\t"])));
|
|
@@ -73,7 +73,7 @@ var StyledTagSelect = styled_components_1.default.div(templateObject_10 || (temp
|
|
|
73
73
|
return commonStyle({ size: size });
|
|
74
74
|
}, function (_a) {
|
|
75
75
|
var selected = _a.selected, colors = _a.theme.colors;
|
|
76
|
-
return "\n border: 2px solid ".concat(colors.primaryColor100, ";\n cursor: pointer;\n background-color: ").concat(selected ? colors.primaryColor100 : null, ";\n\t\tcolor: ").concat(!selected ? colors.primaryColorText : white, "\n ");
|
|
76
|
+
return "\n border: 2px solid ".concat(colors === null || colors === void 0 ? void 0 : colors.primaryColor100, ";\n cursor: pointer;\n background-color: ").concat(selected ? colors === null || colors === void 0 ? void 0 : colors.primaryColor100 : null, ";\n\t\tcolor: ").concat(!selected ? colors === null || colors === void 0 ? void 0 : colors.primaryColorText : white, "\n ");
|
|
77
77
|
});
|
|
78
78
|
exports.StyledTagSelect = StyledTagSelect;
|
|
79
79
|
var StyledTagLink = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n ", "\n\t", "\n\n\t", "\n\t\n"], ["\n ", "\n\t", "\n\n\t", "\n\t\n"])), function (_a) {
|
|
@@ -82,11 +82,11 @@ var StyledTagLink = styled_components_1.default.div(templateObject_13 || (templa
|
|
|
82
82
|
}, function (_a) {
|
|
83
83
|
var variantSecondary = _a.variantSecondary, invert = _a.invert, colors = _a.theme.colors;
|
|
84
84
|
return !variantSecondary && (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: ", ";\n\t\t"], ["\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: ", ";\n\t\t"])), !invert
|
|
85
|
-
? colors.primaryColor100
|
|
86
|
-
: colors.primaryColor40, !invert ? white : greyColor100);
|
|
85
|
+
? colors === null || colors === void 0 ? void 0 : colors.primaryColor100
|
|
86
|
+
: colors === null || colors === void 0 ? void 0 : colors.primaryColor40, !invert ? white : greyColor100);
|
|
87
87
|
}, function (_a) {
|
|
88
88
|
var variantSecondary = _a.variantSecondary, invert = _a.invert, colors = _a.theme.colors;
|
|
89
|
-
return variantSecondary && (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n\t\t\tbackground: none;\n\t\t\tborder: 2px solid\n\t\t\t\t", ";\n\t\t\tcolor: ", ";\n\t\t"], ["\n\t\t\tbackground: none;\n\t\t\tborder: 2px solid\n\t\t\t\t", ";\n\t\t\tcolor: ", ";\n\t\t"])), !invert ? colors.primaryColor100 : colors.primaryColor40, !invert ? colors.primaryColorText : colors.primaryColor40);
|
|
89
|
+
return variantSecondary && (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n\t\t\tbackground: none;\n\t\t\tborder: 2px solid\n\t\t\t\t", ";\n\t\t\tcolor: ", ";\n\t\t"], ["\n\t\t\tbackground: none;\n\t\t\tborder: 2px solid\n\t\t\t\t", ";\n\t\t\tcolor: ", ";\n\t\t"])), !invert ? colors === null || colors === void 0 ? void 0 : colors.primaryColor100 : colors === null || colors === void 0 ? void 0 : colors.primaryColor40, !invert ? colors === null || colors === void 0 ? void 0 : colors.primaryColorText : colors === null || colors === void 0 ? void 0 : colors.primaryColor40);
|
|
90
90
|
});
|
|
91
91
|
exports.StyledTagLink = StyledTagLink;
|
|
92
92
|
var StyledIconWrapper = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n display: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcursor: pointer;\n\n\t", "\n"], ["\n display: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcursor: pointer;\n\n\t", "\n"])), function (_a) {
|
|
@@ -97,69 +97,3 @@ exports.StyledIconWrapper = StyledIconWrapper;
|
|
|
97
97
|
var StyledLink = (0, styled_components_1.default)(react_router_dom_1.NavLink)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n text-decoration: none;\n"], ["\n text-decoration: none;\n"])));
|
|
98
98
|
exports.StyledLink = StyledLink;
|
|
99
99
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;
|
|
100
|
-
// const StyledTag = Styled.div`
|
|
101
|
-
// padding: 0 1rem;
|
|
102
|
-
// position: relative;
|
|
103
|
-
// display: inline-flex;
|
|
104
|
-
// column-gap: 1rem;
|
|
105
|
-
// align-items: center;
|
|
106
|
-
// border-radius:0.2rem;
|
|
107
|
-
// white-space: nowrap;
|
|
108
|
-
// height: ${({ size }) => SIZES[size]};
|
|
109
|
-
// ${({ tagSelect, selected, theme }) =>
|
|
110
|
-
// tagSelect && TagModifiers['tagSelect']({ selected, theme })}
|
|
111
|
-
// ${({ tagDisplay, invert, theme }) =>
|
|
112
|
-
// tagDisplay && TagModifiers['tagDisplay']({ invert, theme })}
|
|
113
|
-
// ${({ tagLink, invert, theme }) =>
|
|
114
|
-
// tagLink && TagModifiers['tagLink']({ invert, theme })}
|
|
115
|
-
// ${({ tagClear, primary, primaryOutline }) =>
|
|
116
|
-
// tagClear && TagModifiers['tagClear']({ primary, primaryOutline })}
|
|
117
|
-
// ${({ primary, invert, theme }) =>
|
|
118
|
-
// primary && TagModifiers['primary']({ invert, theme })}
|
|
119
|
-
// ${({ secondary, invert, theme }) =>
|
|
120
|
-
// secondary && TagModifiers['secondary']({ invert, theme })}
|
|
121
|
-
// ${({ primaryOutline, invert, theme }) =>
|
|
122
|
-
// primaryOutline && TagModifiers['primaryOutline']({ invert, theme })}
|
|
123
|
-
// ${({ secondaryOutline, invert, theme }) =>
|
|
124
|
-
// secondaryOutline && TagModifiers['secondaryOutline']({ invert, theme })}
|
|
125
|
-
// ${({ ghost }) => ghost && TagModifiers['ghost']()}
|
|
126
|
-
// `
|
|
127
|
-
// const TagModifiers = {
|
|
128
|
-
// tagSelect: ({ selected, theme: { colors } }) => `
|
|
129
|
-
// border: 2px solid ${colors.primaryColor100};
|
|
130
|
-
// cursor: pointer;
|
|
131
|
-
// background-color: ${selected ? colors.primaryColor100 : null};
|
|
132
|
-
// color: ${!selected ? colors.primaryColorText : white}
|
|
133
|
-
// `,
|
|
134
|
-
// tagDisplay: ({ invert, theme: { colors } }) => `
|
|
135
|
-
// border: 2px solid ${!invert ? greyColor10 : greyColor80};
|
|
136
|
-
// background-color: inherit;
|
|
137
|
-
// cursor: auto;
|
|
138
|
-
// `,
|
|
139
|
-
// tagLink: () => `
|
|
140
|
-
// cursor: pointer;
|
|
141
|
-
// `,
|
|
142
|
-
// tagClear: ({ primaryOutline, primary }) => `
|
|
143
|
-
// cursor: ${primary || primaryOutline ? 'pointer' : 'auto'};
|
|
144
|
-
// `,
|
|
145
|
-
// primary: ({ invert, theme: { colors } }) => `
|
|
146
|
-
// background-color: ${!invert ? colors.primaryColor100 : colors.primaryColor40};
|
|
147
|
-
// color: ${!invert ? white : greyColor100};
|
|
148
|
-
// `,
|
|
149
|
-
// secondary: ({ invert, theme: { colors } }) => `
|
|
150
|
-
// background-color: ${!invert ? greyColor15 : greyColor80};
|
|
151
|
-
// color: ${!invert ? greyColor80 : greyColor15};
|
|
152
|
-
// `,
|
|
153
|
-
// primaryOutline: ({ invert, theme: { colors } }) => `
|
|
154
|
-
// border: 2px solid ${!invert ? colors.primaryColor100 : colors.primaryColor40};
|
|
155
|
-
// color: ${!invert ? colors.primaryColorText : colors.primaryColor40};
|
|
156
|
-
// `,
|
|
157
|
-
// secondaryOutline: ({ invert, theme: { colors } }) => `
|
|
158
|
-
// border: 2px solid ${!invert ? greyColor15 : greyColor80};
|
|
159
|
-
// color: ${!invert ? greyColor80 : greyColor15};
|
|
160
|
-
// `,
|
|
161
|
-
// ghost: () => `
|
|
162
|
-
// background: none;
|
|
163
|
-
// border: none;
|
|
164
|
-
// `,
|
|
165
|
-
// }
|