@integrigo/integrigo-ui 1.2.2 → 1.2.5
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/lib/components/atoms/Button/Button.d.ts +2 -2
- package/lib/components/atoms/Icon/Icon.d.ts +4 -2
- package/lib/components/atoms/Icon/Icon.stories.d.ts +9 -9
- package/lib/index.esm.js +36 -6
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +36 -6
- package/lib/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/atoms/Button/Button.tsx +29 -19
- package/src/components/atoms/Icon/Icon.stories.tsx +11 -11
- package/src/components/atoms/Icon/Icon.tsx +17 -14
package/lib/index.js
CHANGED
|
@@ -25,13 +25,42 @@ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
|
25
25
|
PERFORMANCE OF THIS SOFTWARE.
|
|
26
26
|
***************************************************************************** */
|
|
27
27
|
|
|
28
|
+
var __assign = function() {
|
|
29
|
+
__assign = Object.assign || function __assign(t) {
|
|
30
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
31
|
+
s = arguments[i];
|
|
32
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
33
|
+
}
|
|
34
|
+
return t;
|
|
35
|
+
};
|
|
36
|
+
return __assign.apply(this, arguments);
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
function __rest(s, e) {
|
|
40
|
+
var t = {};
|
|
41
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
42
|
+
t[p] = s[p];
|
|
43
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
44
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
45
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
46
|
+
t[p[i]] = s[p[i]];
|
|
47
|
+
}
|
|
48
|
+
return t;
|
|
49
|
+
}
|
|
50
|
+
|
|
28
51
|
function __makeTemplateObject(cooked, raw) {
|
|
29
52
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
30
53
|
return cooked;
|
|
31
54
|
}
|
|
32
55
|
|
|
33
|
-
var Button = styled__default["default"].button(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n background-color: transparent;\n border: none;\n border-radius: var(--padding-
|
|
34
|
-
|
|
56
|
+
var Button = styled__default["default"].button(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n background-color: transparent;\n border: none;\n border-radius: var(--padding-xl);\n padding: var(--padding-m) var(--padding-xl);\n font-weight: var(--font-bold);\n font-size: var(--font-size-l);\n cursor: pointer;\n overflow: hidden;\n position: relative;\n\n &:before {\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n width: calc(100% - 4px);\n height: calc(100% - 4px);\n background-color: ", ";\n border: ", ";\n border-radius: var(--padding-l);\n z-index: -1;\n transition: opacity var(--transition-speed);\n }\n\n &:focus,\n &:active {\n color: ", ";\n outline: none;\n }\n\n &:focus:before,\n &:active:before {\n background-color: ", ";\n border: ", ";\n }\n\n &:hover:before {\n opacity: 0.5;\n }\n\n &:hover:focus:before,\n &:hover:active:before {\n opacity: 1;\n }\n"], ["\n background-color: transparent;\n border: none;\n border-radius: var(--padding-xl);\n padding: var(--padding-m) var(--padding-xl);\n font-weight: var(--font-bold);\n font-size: var(--font-size-l);\n cursor: pointer;\n overflow: hidden;\n position: relative;\n\n &:before {\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n width: calc(100% - 4px);\n height: calc(100% - 4px);\n background-color: ", ";\n border: ", ";\n border-radius: var(--padding-l);\n z-index: -1;\n transition: opacity var(--transition-speed);\n }\n\n &:focus,\n &:active {\n color: ", ";\n outline: none;\n }\n\n &:focus:before,\n &:active:before {\n background-color: ", ";\n border: ", ";\n }\n\n &:hover:before {\n opacity: 0.5;\n }\n\n &:hover:focus:before,\n &:hover:active:before {\n opacity: 1;\n }\n"])), function (p) {
|
|
57
|
+
return p.primary && !p.ghost ? "var(--color-orange)" : "transparent";
|
|
58
|
+
}, function (p) { return (p.ghost ? "none" : "2px solid var(--color-orange)"); }, function (p) {
|
|
59
|
+
return p.primary && !p.ghost ? "var(--color-white)" : "var(--color-navy)";
|
|
60
|
+
}, function (p) {
|
|
61
|
+
return p.primary && !p.ghost ? "var(--color-green)" : "transparent";
|
|
62
|
+
}, function (p) { return (p.ghost ? "none" : "2px solid var(--color-green)"); });
|
|
63
|
+
Button.displayName = "Button";
|
|
35
64
|
var templateObject_1$9;
|
|
36
65
|
|
|
37
66
|
var Card = styled__default["default"].div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n background-color: ", ";\n box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);\n color: ", ";\n padding: var(--padding-xl);\n border-radius: 24px;\n"], ["\n background-color: ", ";\n box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);\n color: ", ";\n padding: var(--padding-xl);\n border-radius: 24px;\n"])), function (p) { return p.inverse ? 'var(--color-navy)' : 'var(--color-white)'; }, function (p) { return p.inverse ? 'var(--color-white)' : 'var(--color-navy)'; });
|
|
@@ -19103,21 +19132,22 @@ var BrandIcons = /*#__PURE__*/Object.freeze({
|
|
|
19103
19132
|
});
|
|
19104
19133
|
|
|
19105
19134
|
var SOCIAL_ICONS = ["facebook", "instagram", "linkedin"];
|
|
19135
|
+
var toFaIcon = function (icon) { return "fa".concat(icon.charAt(0).toUpperCase() + icon.slice(1)); };
|
|
19106
19136
|
var getIcon = function (icon) {
|
|
19107
19137
|
if (SOCIAL_ICONS.includes(icon)) {
|
|
19108
19138
|
if (icon === "facebook") {
|
|
19109
19139
|
return faFacebookSquare;
|
|
19110
19140
|
}
|
|
19111
|
-
var iconName_1 =
|
|
19141
|
+
var iconName_1 = toFaIcon(icon);
|
|
19112
19142
|
return BrandIcons[iconName_1];
|
|
19113
19143
|
}
|
|
19114
|
-
var iconName =
|
|
19144
|
+
var iconName = toFaIcon(icon);
|
|
19115
19145
|
return SolidIcons[iconName];
|
|
19116
19146
|
};
|
|
19117
19147
|
var Icon = function (_a) {
|
|
19118
|
-
var icon = _a.icon;
|
|
19148
|
+
var icon = _a.icon, props = __rest(_a, ["icon"]);
|
|
19119
19149
|
var iconType = getIcon(icon);
|
|
19120
|
-
return React__default["default"].createElement(FontAwesomeIcon, { icon: iconType });
|
|
19150
|
+
return React__default["default"].createElement(FontAwesomeIcon, __assign({ icon: iconType }, props));
|
|
19121
19151
|
};
|
|
19122
19152
|
|
|
19123
19153
|
var Input = styled__default["default"].input(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n background-color: var(--color-orange-transparent);\n border: 2px solid transparent;\n border-radius: var(--padding-xl);\n padding: var(--padding-l);\n position: relative;\n overflow: hidden;\n color: var(--color-navy);\n font-weight: var(--font-bold);\n\n &:focus, &:active {\n outline: none;\n border: 2px solid var(--color-green);\n }\n"], ["\n background-color: var(--color-orange-transparent);\n border: 2px solid transparent;\n border-radius: var(--padding-xl);\n padding: var(--padding-l);\n position: relative;\n overflow: hidden;\n color: var(--color-navy);\n font-weight: var(--font-bold);\n\n &:focus, &:active {\n outline: none;\n border: 2px solid var(--color-green);\n }\n"])));
|