@integrigo/integrigo-ui 1.2.1 → 1.2.4

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/integrigo"
   },
-  "version": "1.2.1",
+  "version": "1.2.4",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",
@@ -34,6 +34,7 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-brands-svg-icons": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/react-fontawesome": "^0.1.18"
   },

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

@@ -1,20 +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" };
+
+export const Instagram = Template.bind({});
+Instagram.args = { icon: "instagram" };
+
+export const Linkedin = Template.bind({});
+Linkedin.args = { icon: "linkedin" };

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

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