@integrigo/integrigo-ui 1.2.2 → 1.2.5

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/integrigo"
   },
-  "version": "1.2.2",
+  "version": "1.2.5",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

package/src/components/atoms/Button/Button.tsx

@@ -1,17 +1,21 @@
-import React from 'react';
-import styled from 'styled-components';
+import React from "react";
+import styled from "styled-components";
 
-export interface ButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+export interface ButtonProps
+  extends React.DetailedHTMLProps<
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+  > {
   primary?: boolean;
   ghost?: boolean;
-  size?: 'small' | 'medium' | 'large';
+  size?: "small" | "medium" | "large";
 }
 
-export const Button = styled.button<Omit<ButtonProps, 'label'>>`
+export const Button = styled.button<Omit<ButtonProps, "label">>`
   background-color: transparent;
   border: none;
-  border-radius: var(--padding-l);
-  padding: var(--padding-s) var(--padding-l);
+  border-radius: var(--padding-xl);
+  padding: var(--padding-m) var(--padding-xl);
   font-weight: var(--font-bold);
   font-size: var(--font-size-l);
   cursor: pointer;
@@ -19,36 +23,42 @@ export const Button = styled.button<Omit<ButtonProps, 'label'>>`
   position: relative;
 
   &:before {
-    content: '';
+    content: "";
     position: absolute;
     left: 0;
     top: 0;
     width: calc(100% - 4px);
     height: calc(100% - 4px);
-    background-color: ${p => p.primary && !p.ghost ? 'var(--color-orange)' : 'transparent'};
-    border: ${p => p.ghost ? 'none' : '2px solid var(--color-orange)'};
+    background-color: ${(p) =>
+      p.primary && !p.ghost ? "var(--color-orange)" : "transparent"};
+    border: ${(p) => (p.ghost ? "none" : "2px solid var(--color-orange)")};
     border-radius: var(--padding-l);
     z-index: -1;
     transition: opacity var(--transition-speed);
   }
 
-  &:focus, &:active {
-    color: ${p => p.primary && !p.ghost ? 'var(--color-white)' : 'var(--color-navy)'};
+  &:focus,
+  &:active {
+    color: ${(p) =>
+      p.primary && !p.ghost ? "var(--color-white)" : "var(--color-navy)"};
     outline: none;
   }
 
-  &:focus:before, &:active:before {
-    background-color: ${p => p.primary && !p.ghost ? 'var(--color-green)' : 'transparent'};
-    border: ${p => p.ghost ? 'none' : '2px solid var(--color-green)'};
+  &:focus:before,
+  &:active:before {
+    background-color: ${(p) =>
+      p.primary && !p.ghost ? "var(--color-green)" : "transparent"};
+    border: ${(p) => (p.ghost ? "none" : "2px solid var(--color-green)")};
   }
 
   &:hover:before {
     opacity: 0.5;
   }
 
-  &:hover:focus:before, &:hover:active:before {
-    opacity: 1
+  &:hover:focus:before,
+  &:hover:active:before {
+    opacity: 1;
   }
-`
+`;
 
-Button.displayName = 'Button'
+Button.displayName = "Button";

package/src/components/atoms/Icon/Icon.stories.tsx

@@ -1,29 +1,29 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
 
-import { Icon } from './Icon';
+import { Icon } from "./Icon";
 
 export default {
-    title: 'Atoms/Icon',
-    component: Icon,
+  title: "Atoms/Icon",
+  component: Icon,
 } as ComponentMeta<typeof Icon>;
 
 const Template: ComponentStory<typeof Icon> = (args) => <Icon {...args} />;
 
 export const Bars = Template.bind({});
-Bars.args = { icon: 'bars' };
+Bars.args = { icon: "bars" };
 
 export const Plus = Template.bind({});
-Plus.args = { icon: 'plus' };
+Plus.args = { icon: "plus" };
 
 export const Minus = Template.bind({});
-Minus.args = { icon: 'minus' };
+Minus.args = { icon: "minus" };
 
 export const Facebook = Template.bind({});
-Facebook.args = { icon: 'facebook' };
+Facebook.args = { icon: "facebook" };
 
 export const Instagram = Template.bind({});
-Instagram.args = { icon: 'instagram' };
+Instagram.args = { icon: "instagram" };
 
 export const Linkedin = Template.bind({});
-Linkedin.args = { icon: 'linkedin' };
+Linkedin.args = { icon: "linkedin" };

package/src/components/atoms/Icon/Icon.tsx

@@ -1,40 +1,43 @@
 import React from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import * as SolidIcons from "@fortawesome/free-solid-svg-icons";
-import * as BrandIcons from "@fortawesome/free-brands-svg-icons";
+import {
+  FontAwesomeIcon,
+  FontAwesomeIconProps,
+} from "@fortawesome/react-fontawesome";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 
-type IconType = "bars" | "plus" | "minus";
+import * as SolidIcons from "@fortawesome/free-solid-svg-icons";
+import * as BrandIcons from "@fortawesome/free-brands-svg-icons";
 
+const ICONS = ["bars", "plus", "minus", "phone", "envelope"];
 const SOCIAL_ICONS = ["facebook", "instagram", "linkedin"];
 
+type IconType = typeof ICONS[number];
 type IconSocialType = typeof SOCIAL_ICONS[number];
 
-type IconProps = {
+type IconProps = Omit<FontAwesomeIconProps, "icon"> & {
   icon: IconType | IconSocialType;
 };
 
+const toFaIcon = <T extends typeof BrandIcons | typeof SolidIcons>(
+  icon: IconType | IconSocialType
+): keyof T => `fa${icon.charAt(0).toUpperCase() + icon.slice(1)}` as keyof T;
+
 const getIcon = (icon: IconType | IconSocialType): IconProp => {
   if (SOCIAL_ICONS.includes(icon)) {
     if (icon === "facebook") {
       return BrandIcons.faFacebookSquare;
     }
 
-    const iconName = `fa${
-      icon.charAt(0).toUpperCase() + icon.slice(1)
-    }` as keyof typeof BrandIcons;
-
+    const iconName = toFaIcon(icon);
     return BrandIcons[iconName] as IconProp;
   }
 
-  const iconName = `fa${
-    icon.charAt(0).toUpperCase() + icon.slice(1)
-  }` as keyof typeof SolidIcons;
+  const iconName = toFaIcon(icon) as keyof typeof SolidIcons;
   return SolidIcons[iconName] as IconProp;
 };
 
-export const Icon: React.FC<IconProps> = ({ icon }) => {
+export const Icon: React.FC<IconProps> = ({ icon, ...props }) => {
   const iconType = getIcon(icon);
 
-  return <FontAwesomeIcon icon={iconType} />;
+  return <FontAwesomeIcon icon={iconType} {...props} />;
 };