@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.
Files changed (11) hide show
  1. package/lib/components/atoms/Button/Button.d.ts +2 -2
  2. package/lib/components/atoms/Icon/Icon.d.ts +4 -2
  3. package/lib/components/atoms/Icon/Icon.stories.d.ts +9 -9
  4. package/lib/index.esm.js +36 -6
  5. package/lib/index.esm.js.map +1 -1
  6. package/lib/index.js +36 -6
  7. package/lib/index.js.map +1 -1
  8. package/package.json +1 -1
  9. package/src/components/atoms/Button/Button.tsx +29 -19
  10. package/src/components/atoms/Icon/Icon.stories.tsx +11 -11
  11. package/src/components/atoms/Icon/Icon.tsx +17 -14
package/lib/components/atoms/Button/Button.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- import React from 'react';
1
+ import React from "react";
2
2
  export interface ButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
3
3
  primary?: boolean;
4
4
  ghost?: boolean;
5
- size?: 'small' | 'medium' | 'large';
5
+ size?: "small" | "medium" | "large";
6
6
  }
7
7
  export declare const Button: import("styled-components").StyledComponent<"button", any, Omit<ButtonProps, "label">, never>;
package/lib/components/atoms/Icon/Icon.d.ts CHANGED
@@ -1,8 +1,10 @@
1
1
  import React from "react";
2
- declare type IconType = "bars" | "plus" | "minus";
2
+ import { FontAwesomeIconProps } from "@fortawesome/react-fontawesome";
3
+ declare const ICONS: string[];
3
4
  declare const SOCIAL_ICONS: string[];
5
+ declare type IconType = typeof ICONS[number];
4
6
  declare type IconSocialType = typeof SOCIAL_ICONS[number];
5
- declare type IconProps = {
7
+ declare type IconProps = Omit<FontAwesomeIconProps, "icon"> & {
6
8
  icon: IconType | IconSocialType;
7
9
  };
8
10
  export declare const Icon: React.FC<IconProps>;
package/lib/components/atoms/Icon/Icon.stories.d.ts CHANGED
@@ -1,24 +1,24 @@
1
- import React from 'react';
2
- import { ComponentStory, ComponentMeta } from '@storybook/react';
3
- declare const _default: ComponentMeta<React.FC<{
1
+ import React from "react";
2
+ import { ComponentStory, ComponentMeta } from "@storybook/react";
3
+ declare const _default: ComponentMeta<React.FC<Omit<import("@fortawesome/react-fontawesome").FontAwesomeIconProps, "icon"> & {
4
4
  icon: string;
5
5
  }>>;
6
6
  export default _default;
7
- export declare const Bars: ComponentStory<React.FC<{
7
+ export declare const Bars: ComponentStory<React.FC<Omit<import("@fortawesome/react-fontawesome").FontAwesomeIconProps, "icon"> & {
8
8
  icon: string;
9
9
  }>>;
10
- export declare const Plus: ComponentStory<React.FC<{
10
+ export declare const Plus: ComponentStory<React.FC<Omit<import("@fortawesome/react-fontawesome").FontAwesomeIconProps, "icon"> & {
11
11
  icon: string;
12
12
  }>>;
13
- export declare const Minus: ComponentStory<React.FC<{
13
+ export declare const Minus: ComponentStory<React.FC<Omit<import("@fortawesome/react-fontawesome").FontAwesomeIconProps, "icon"> & {
14
14
  icon: string;
15
15
  }>>;
16
- export declare const Facebook: ComponentStory<React.FC<{
16
+ export declare const Facebook: ComponentStory<React.FC<Omit<import("@fortawesome/react-fontawesome").FontAwesomeIconProps, "icon"> & {
17
17
  icon: string;
18
18
  }>>;
19
- export declare const Instagram: ComponentStory<React.FC<{
19
+ export declare const Instagram: ComponentStory<React.FC<Omit<import("@fortawesome/react-fontawesome").FontAwesomeIconProps, "icon"> & {
20
20
  icon: string;
21
21
  }>>;
22
- export declare const Linkedin: ComponentStory<React.FC<{
22
+ export declare const Linkedin: ComponentStory<React.FC<Omit<import("@fortawesome/react-fontawesome").FontAwesomeIconProps, "icon"> & {
23
23
  icon: string;
24
24
  }>>;
package/lib/index.esm.js CHANGED
@@ -16,13 +16,42 @@ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
16
16
  PERFORMANCE OF THIS SOFTWARE.
17
17
  ***************************************************************************** */
18
18
 
19
+ var __assign = function() {
20
+ __assign = Object.assign || function __assign(t) {
21
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
22
+ s = arguments[i];
23
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
24
+ }
25
+ return t;
26
+ };
27
+ return __assign.apply(this, arguments);
28
+ };
29
+
30
+ function __rest(s, e) {
31
+ var t = {};
32
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
33
+ t[p] = s[p];
34
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
35
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
36
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
37
+ t[p[i]] = s[p[i]];
38
+ }
39
+ return t;
40
+ }
41
+
19
42
  function __makeTemplateObject(cooked, raw) {
20
43
  if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
21
44
  return cooked;
22
45
  }
23
46
 
24
- var Button = styled.button(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n background-color: transparent;\n border: none;\n border-radius: var(--padding-l);\n padding: var(--padding-s) var(--padding-l);\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, &:active {\n color: ", ";\n outline: none;\n }\n\n &:focus:before, &:active:before {\n background-color: ", ";\n border: ", ";\n }\n\n &:hover:before {\n opacity: 0.5;\n }\n\n &:hover:focus:before, &:hover:active:before {\n opacity: 1\n }\n"], ["\n background-color: transparent;\n border: none;\n border-radius: var(--padding-l);\n padding: var(--padding-s) var(--padding-l);\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, &:active {\n color: ", ";\n outline: none;\n }\n\n &:focus:before, &:active:before {\n background-color: ", ";\n border: ", ";\n }\n\n &:hover:before {\n opacity: 0.5;\n }\n\n &:hover:focus:before, &:hover:active:before {\n opacity: 1\n }\n"])), function (p) { return p.primary && !p.ghost ? 'var(--color-orange)' : 'transparent'; }, function (p) { return p.ghost ? 'none' : '2px solid var(--color-orange)'; }, function (p) { return p.primary && !p.ghost ? 'var(--color-white)' : 'var(--color-navy)'; }, function (p) { return p.primary && !p.ghost ? 'var(--color-green)' : 'transparent'; }, function (p) { return p.ghost ? 'none' : '2px solid var(--color-green)'; });
25
- Button.displayName = 'Button';
47
+ var Button = styled.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) {
48
+ return p.primary && !p.ghost ? "var(--color-orange)" : "transparent";
49
+ }, function (p) { return (p.ghost ? "none" : "2px solid var(--color-orange)"); }, function (p) {
50
+ return p.primary && !p.ghost ? "var(--color-white)" : "var(--color-navy)";
51
+ }, function (p) {
52
+ return p.primary && !p.ghost ? "var(--color-green)" : "transparent";
53
+ }, function (p) { return (p.ghost ? "none" : "2px solid var(--color-green)"); });
54
+ Button.displayName = "Button";
26
55
  var templateObject_1$9;
27
56
 
28
57
  var Card = styled.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)'; });
@@ -19094,21 +19123,22 @@ var BrandIcons = /*#__PURE__*/Object.freeze({
19094
19123
  });
19095
19124
 
19096
19125
  var SOCIAL_ICONS = ["facebook", "instagram", "linkedin"];
19126
+ var toFaIcon = function (icon) { return "fa".concat(icon.charAt(0).toUpperCase() + icon.slice(1)); };
19097
19127
  var getIcon = function (icon) {
19098
19128
  if (SOCIAL_ICONS.includes(icon)) {
19099
19129
  if (icon === "facebook") {
19100
19130
  return faFacebookSquare;
19101
19131
  }
19102
- var iconName_1 = "fa".concat(icon.charAt(0).toUpperCase() + icon.slice(1));
19132
+ var iconName_1 = toFaIcon(icon);
19103
19133
  return BrandIcons[iconName_1];
19104
19134
  }
19105
- var iconName = "fa".concat(icon.charAt(0).toUpperCase() + icon.slice(1));
19135
+ var iconName = toFaIcon(icon);
19106
19136
  return SolidIcons[iconName];
19107
19137
  };
19108
19138
  var Icon = function (_a) {
19109
- var icon = _a.icon;
19139
+ var icon = _a.icon, props = __rest(_a, ["icon"]);
19110
19140
  var iconType = getIcon(icon);
19111
- return React.createElement(FontAwesomeIcon, { icon: iconType });
19141
+ return React.createElement(FontAwesomeIcon, __assign({ icon: iconType }, props));
19112
19142
  };
19113
19143
 
19114
19144
  var Input = styled.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"])));