@integrigo/integrigo-ui 1.1.10 → 1.2.0

package/lib/components/atoms/Icon/Icon.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare type IconType = "bars" | "plus" | "minus";
+declare type IconProps = {
+    icon: IconType;
+};
+export declare const Icon: React.FC<IconProps>;
+export {};

package/lib/components/atoms/Icon/Icon.stories.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<React.FC<{
+    icon: "bars" | "plus" | "minus";
+}>>;
+export default _default;
+export declare const Bars: ComponentStory<React.FC<{
+    icon: "bars" | "plus" | "minus";
+}>>;
+export declare const Plus: ComponentStory<React.FC<{
+    icon: "bars" | "plus" | "minus";
+}>>;
+export declare const Minus: ComponentStory<React.FC<{
+    icon: "bars" | "plus" | "minus";
+}>>;

package/lib/components/atoms/Icon/index.d.ts

@@ -0,0 +1 @@
+export { Icon } from './Icon';

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/integrigo"
   },
-  "version": "1.1.10",
+  "version": "1.2.0",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",
@@ -25,14 +25,18 @@
     "postcss": "^8.4.7",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "styled-components": "^5.3.3",
     "rollup": "^2.69.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.31.2",
+    "styled-components": "^5.3.3",
     "typescript": "^4.5.5"
   },
-  "dependencies": {},
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@fortawesome/react-fontawesome": "^0.1.18"
+  },
   "peerDependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Icon } from './Icon';
+
+export default {
+    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' };
+
+export const Plus = Template.bind({});
+Plus.args = { icon: 'plus' };
+
+export const Minus = Template.bind({});
+Minus.args = { icon: 'minus' };

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

@@ -0,0 +1,18 @@
+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'
+
+type IconType = "bars" | "plus" | "minus"
+
+type IconProps = {
+  icon: IconType
+}
+
+export const Icon: React.FC<IconProps> = ({ icon }) => {
+  const iconName = `fa${icon.charAt(0).toUpperCase() + icon.slice(1)}` as keyof typeof SolidIcons
+
+  return (
+    <FontAwesomeIcon icon={SolidIcons[iconName] as IconProp} />
+  )
+}

package/src/components/atoms/Icon/index.ts

@@ -0,0 +1 @@
+export { Icon } from './Icon'