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
- console.log({ variantSecondary: variantSecondary, variantGhost: variantGhost });
39
- return (react_1.default.createElement(index_styled_1.StyledTagClear, { invert: invert, theme: theme, size: size, grey: grey, variantGhost: variantGhost, variantSecondary: variantSecondary, onClick: function () { return !variantSecondary && onClick(id, { display: display, value: value }); } },
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
- // }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oolib",
3
- "version": "2.0.0",
3
+ "version": "2.1.0",
4
4
  "description": " OKE Component Library",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",