Merge pull request #10 from sebastian-meckovski/fontawesome-library-r…

…eplaced-with-plain-svgs

fontawesome replaced

.github/workflows/run-test.yml

@@ -15,3 +15,21 @@ jobs:
         run: npm i [email protected]
       - name: Run tests
         run: npm test
+  chromatic:
+    name: Run Chromatic
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: Install dependencies
+        run: npm ci
+      - name: Run Chromatic
+        uses: chromaui/action@latest
+        with:
+          # ⚠️ Make sure to configure a `CHROMATIC_PROJECT_TOKEN` repository secret
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

package.json

@@ -67,8 +67,6 @@
     "url-loader": "^4.1.1"
   },
   "dependencies": {
-    "@fortawesome/free-solid-svg-icons": "^6.5.2",
-    "@fortawesome/react-fontawesome": "^0.2.2",
     "sass": "^1.71.1",
     "storybook-addon-sass-postcss": "^0.3.0",
     "webpack": "^5.94.0",

src/SVG/Icons/FontAwesomeIcons.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+interface SvgProps extends React.SVGProps<SVGSVGElement> {}
+
+export const FaAngleDown: React.FC<SvgProps> = (props) => {
+  return (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+      <path d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" />
+    </svg>
+  );
+};
+export const FaAngleUp: React.FC<SvgProps> = (props) => {
+  return (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+      <path d="M201.4 137.4c12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 205.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160z" />
+    </svg>
+  );
+};
+export const FaSpinner: React.FC<SvgProps> = (props) => {
+  return (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+      <path d="M304 48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zm0 416a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM48 304a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm464-48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM142.9 437A48 48 0 1 0 75 369.1 48 48 0 1 0 142.9 437zm0-294.2A48 48 0 1 0 75 75a48 48 0 1 0 67.9 67.9zM369.1 437A48 48 0 1 0 437 369.1 48 48 0 1 0 369.1 437z" />
+    </svg>
+  );
+};

src/components/ComboBox/ComboBox.scss

@@ -25,11 +25,17 @@
         background-color: transparent;
         margin-left: auto;
         cursor: pointer;
+        &__icon {
+          width: 70%;
+          height: 70%;
+        }
         &__spinner {
           animation-name: spin;
           animation-duration: 1500ms;
           animation-iteration-count: infinite;
           animation-timing-function: linear;
+          width: 70%;
+          height: 70%;
         }
       }
     }

src/components/ComboBox/ComboBox.tsx

@@ -1,8 +1,6 @@
-import { useRef, useState, useLayoutEffect, useEffect, ReactNode } from 'react';
+import React, { useRef, useState, useLayoutEffect, useEffect, ReactNode } from 'react';
 import './ComboBox.scss';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faAngleDown, faAngleUp, faSpinner } from '@fortawesome/free-solid-svg-icons';
-import React from 'react';
+import {FaAngleDown, FaAngleUp, FaSpinner} from '../../SVG/Icons/FontAwesomeIcons'
 
 interface ComboBoxProps {
     /**An array of any type that represents the data source for the dropdown list.*/
@@ -174,7 +172,13 @@ export function ComboBox({
                         setIsOpen((prev) => !prev);
                     }}
                 >
-                    {!isLoading ? <FontAwesomeIcon icon={isOpen ? faAngleUp : faAngleDown} /> : <FontAwesomeIcon className="comboBoxWrapper__comboBox__comboButton__spinner" icon={faSpinner} />}
+                    {!isLoading ?
+                     isOpen ? (
+                        <FaAngleUp className="comboBoxWrapper__comboBox__comboButton__icon" />
+                      ) : (
+                        <FaAngleDown className="comboBoxWrapper__comboBox__comboButton__icon" />
+                      )
+                    : <FaSpinner className="comboBoxWrapper__comboBox__comboButton__spinner"/>}
                 </button>
             </div>
             {isOpen && (

src/components/ComboBox/ComboBoxAutoComplete.tsx

@@ -1,8 +1,7 @@
 import { useRef, useState, useLayoutEffect, useEffect, ReactNode } from 'react';
 import './ComboBox.scss';
 import React from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faSpinner } from '@fortawesome/free-solid-svg-icons';
+import {FaSpinner} from '../../SVG/Icons/FontAwesomeIcons'
 
 interface ComboBoxAutoCompleteProps extends React.HTMLAttributes<HTMLDivElement> {
     /**An array of any type that represents the data source for the dropdown list.*/
@@ -166,7 +165,7 @@ export function ComboBoxAutoComplete({
                 <div
                     className="comboBoxWrapper__comboBox__comboButton"
                 >
-                    {isLoading && <FontAwesomeIcon className="comboBoxWrapper__comboBox__comboButton__spinner" icon={faSpinner} />}
+                    {isLoading && <FaSpinner className="comboBoxWrapper__comboBox__comboButton__spinner"/>}
                 </div>
             </div>
             {dataSource?.length > 0 && isOpen && (