@integrigo/integrigo-ui 1.2.1 → 1.2.2

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/integrigo"
   },
-  "version": "1.2.1",
+  "version": "1.2.2",
   "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

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