[TUI-67] add regular weight icons

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tyk-technologies/tyk-ui",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "Tyk UI - ui reusable components",
   "main": "src/index.js",
   "scripts": {

src/common/css/fontawesome/regular.css

@@ -0,0 +1,19 @@
+/*!
+ * Font Awesome Pro 6.5.2 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Commercial License)
+ * Copyright 2024 Fonticons, Inc.
+ */
+:root, :host {
+  --fa-style-family-classic: 'Font Awesome 6 Pro';
+  --fa-font-regular: normal 400 1em/1 'Font Awesome 6 Pro'; }
+
+@font-face {
+  font-family: 'Font Awesome 6 Pro';
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url("../../fonts/fontawesome/fa-regular-400.woff2") format("woff2"), url("../../fonts/fontawesome/fa-regular-400.ttf") format("truetype"); }
+
+.far,
+.fa-regular {
+  font-weight: 400; }

src/components/Card/Readme.md

@@ -19,7 +19,7 @@ import Row from '../../layout/Row';
         )}
       >
         <>
-        <Icon type="circle" className="text--success" />
+        <Icon type="circle-check" weight="solid" className="text--success" />
         <span className="left-buffer-small">Is Active</span>
         </>
       </Card.Header>
@@ -46,7 +46,7 @@ import Row from '../../layout/Row';
         )}
       >
         <>
-        <Icon type="circle" className="text--success" />
+        <Icon type="circle-check" weight="solid" className="text--success" />
         <span className="left-buffer-small">Is Active</span>
         </>
       </Card.Header>
@@ -76,7 +76,7 @@ import Row from '../../layout/Row';
         )}
       >
         <>
-        <Icon type="circle" className="text--success" />
+        <Icon type="circle-check" weight="solid" className="text--success" />
         <span className="left-buffer-small">Is Active</span>
         </>
       </Card.Header>
@@ -103,7 +103,7 @@ import Row from '../../layout/Row';
         )}
       >
         <>
-        <Icon type="circle" className="text--success" />
+        <Icon type="circle-check" weight="solid" className="text--success" />
         <span className="left-buffer-small">Is Active</span>
         </>
       </Card.Header>
@@ -173,7 +173,7 @@ import Row from '../../layout/Row';
         )}
       >
         <>
-        <Icon type="circle" className="text--success" />
+        <Icon type="circle-check" weight="solid" className="text--success" />
         <span className="left-buffer-small">Is Active</span>
         </>
       </Card.Header>

src/components/Icon/Icon.test.js

@@ -2,14 +2,14 @@ import React from 'react';
 import Icon from './index';
 
 describe('Icon', () => {
-  const faFamily = 'fa-light';
+  const faFamily = 'fa-regular';
   const faFamilySolid = 'fa-solid';
   const tykonFamily = 'tykon';
   const selectors = {
     icon: '.tyk-icon',
   };
 
-  it('renders an icon and the default family is "fa-light"', () => {
+  it('renders an icon and the default family is "fa-regular"', () => {
     cy.mount(<Icon type="edit" />)
       .get(selectors.icon)
       .should('exist')

src/components/Icon/index.js

@@ -10,7 +10,7 @@ function Icon({
 }) {
   function getCSSClasses() {
     const fontFamily = family || 'fa';
-    const fontWeight = fontFamily === 'fa' ? `fa-${weight || 'light'}` : '';
+    const fontWeight = fontFamily === 'fa' ? `fa-${weight || 'regular'}` : '';
 
     return [
       'tyk-icon',
@@ -31,7 +31,7 @@ Icon.propTypes = {
   family: PropTypes.string,
   // Icon type to use
   type: PropTypes.string.isRequired,
-  // Icon weight to use. Only applicable for Font Awesome icons. Default is 'light'. Also supports 'solid'
+  // Icon weight to use. Only applicable for Font Awesome icons. Default is 'regular'. Also supports 'light' and 'solid'
   weight: PropTypes.string
 };
 

src/components/Message/index.js

@@ -21,16 +21,16 @@ function Message({
     ].filter(Boolean).join(' ');
   }
 
-  const iconType = theme === 'success' ? 'check' : 'warning';
+  const iconType = theme === 'success' ? 'check' : 'exclamation';
 
   return (
     <div className={getCssClasses()}>
-      <Icon family="tykon" type={iconType} />
+      <Icon type={iconType} />
       <div className="tyk-message__content">
         { children }
       </div>
       {onClose && (
-        <Icon family="tykon" type="x" onClick={onClose} />
+        <Icon type="xmark" onClick={onClose} />
       )}
     </div>
   );

src/components/Modal/index.js

@@ -36,8 +36,8 @@ function Modal({
 
   const themeIcon = {
     success: 'check',
-    warning: 'warning',
-    danger: 'delete',
+    warning: 'exclamation',
+    danger: 'exclamation',
   }[theme];
 
   return (
@@ -54,7 +54,7 @@ function Modal({
                 <div className="tyk-modal__content">
                   {theme !== 'none' && (
                     <div className="tyk-modal__theme-header">
-                      <Icon family="tykon" type={themeIcon} />
+                      <Icon type={themeIcon} />
                     </div>
                   )}
                   { children }

src/components/Pill/Readme.md

@@ -11,7 +11,7 @@ import Button from '../Button';
     Pill Two
   </Pill>
   <Pill theme="danger">
-    <span>Pill Three</span><Button noStyle={true} iconOnly={true} iconType="times" size="fit" type="button" />
+    <span>Pill Three</span><Button noStyle={true} iconOnly={true} iconType="xmark" size="fit" type="button" />
   </Pill>
   <Pill theme="warning">
     Pill Four
@@ -34,7 +34,7 @@ import Button from '../Button';
     Pill Two
   </Pill>
   <Pill theme="danger-outline">
-    <span>Pill Three</span><Button noStyle={true} iconOnly={true} iconType="times" size="fit" type="button" />
+    <span>Pill Three</span><Button noStyle={true} iconOnly={true} iconType="xmark" size="fit" type="button" />
   </Pill>
   <Pill theme="warning-outline">
     Pill Four
@@ -58,7 +58,7 @@ import Button from '../Button';
       Pill Two
     </Pill>
     <Pill theme="danger square">
-      <span>Pill Three</span><Button noStyle={true} iconOnly={true} iconType="times" size="fit" type="button" />
+      <span>Pill Three</span><Button noStyle={true} iconOnly={true} iconType="xmark" size="fit" type="button" />
     </Pill>
     <Pill theme="warning square">
       Pill Four
@@ -78,7 +78,7 @@ import Button from '../Button';
       Pill Two
     </Pill>
     <Pill theme="danger-outline square">
-      <span>Pill Three</span><Button noStyle={true} iconOnly={true} iconType="times" size="fit" type="button" />
+      <span>Pill Three</span><Button noStyle={true} iconOnly={true} iconType="xmark" size="fit" type="button" />
     </Pill>
     <Pill theme="warning-outline square">
       Pill Four

src/components/Tooltip/Tooltip.test.js

@@ -85,7 +85,7 @@ describe('Tooltip', () => {
       .find(`.${classes.iconHelp}`)
       .should('exist');
 
-    cy.mount(<Component render="hello" icon={<Icon family="tykon" type="check" />} />);
+    cy.mount(<Component render="hello" icon={<Icon type="check" />} />);
     cy.get(`.${classes.content}`)
       .trigger('mouseover');
 

src/components/Tooltip/index.js

@@ -68,7 +68,7 @@ function Tooltip({
           <div className={classes} ref={tooltipRef}>
             {icon && (
               icon === true ? (
-                <Icon family="tykon" type="help" />
+                <Icon type="question" />
               ) : (
                 icon
               )
@@ -78,8 +78,7 @@ function Tooltip({
             </div>
             {closable && (
               <Icon
-                family="tykon"
-                type="x"
+                type="xmark"
                 onClick={(e) => {
                   e.stopPropagation();
                   setIsActive(false);

src/form/components/Combobox/index.js

@@ -589,7 +589,7 @@ class Combobox extends Component {
                         onClick={this.handlePillRemoveClick.bind(this, index)}
                         aria-label="remove"
                       >
-                        <Icon type="times" />
+                        <Icon type="xmark" />
                       </button>
                       <span>{ value.name }</span>
                     </li>
@@ -634,7 +634,7 @@ class Combobox extends Component {
                   {filteredValues.length > 0 && (
                     <Button
                       className="tyk-combobox--with-tags__button-down"
-                      iconType="arrow-down"
+                      iconType="chevron-down"
                       iconOnly
                       onClick={this.handleComboboxDropdownClick}
                     />
@@ -649,7 +649,7 @@ class Combobox extends Component {
                 onKeyDown={() => {}}
               >
                 { this.getComboboxDisplayData() }
-                <Icon family="tykon" type="arrowdown" />
+                <Icon type="chevron-down" />
               </li>
             )
         }

src/form/components/Combobox2/index.js

@@ -348,8 +348,8 @@ function Combobox2({
 
   const renderIcon = useCallback(
     () => (expandMode
-      ? <Icon type={valuesExpanded ? 'compress-arrows-alt' : 'expand-arrows-alt'} />
-      : <Icon family="tykon" type="arrowdown" />
+      ? <Icon type={valuesExpanded ? 'chevron-down' : 'chevron-up'} />
+      : <Icon type="chevron-down" />
     ),
     [expandMode, valuesExpanded],
   );

src/form/components/Dropdown2/DropdownTrigger.js

@@ -16,7 +16,7 @@ function DropdownTrigger({
     !splitTrigger ? (
       <Button
         className="dropdown__trigger"
-        iconType="arrowdown"
+        iconType="chevron-down"
         iconFamily="tykon"
         iconPosition="right"
         theme={theme}
@@ -35,7 +35,7 @@ function DropdownTrigger({
         </Button>
         <Button
           className="dropdown__trigger"
-          iconType="arrowdown"
+          iconType="chevron-down"
           iconFamily="tykon"
           iconPosition="right"
           theme={theme}

src/form/components/EditableList2/FieldsList.js

@@ -42,7 +42,7 @@ function FieldsList({
       <div className={`editable-list__item-cell editable-list__item-action ${readOnly && 'editable-list__item-action--read-only'}`}>
         <Button
           iconOnly
-          iconType="trash-alt"
+          iconType="trash"
           theme="primary-link"
           onClick={onDelete}
           disabled={readOnly || disabled}

src/form/components/FileInput/index.js

@@ -95,7 +95,7 @@ function FileInput({
                 type="button"
                 aria-label="clear value"
               >
-                <Icon type="times" />
+                <Icon type="xmark" />
               </button>
             )
             : null

src/form/components/Multiselect/js/MultiselectPanel.js

@@ -87,7 +87,7 @@ function MultiselectPanel({
     <div className="tyk-multiselect__panel">
       <Input
         inputgroupaddonleft={
-          <Icon type="search" />
+          <Icon type="magnifying-glass" />
         }
         name="search"
         onChange={searchOnChange}

src/index.css

@@ -3,6 +3,7 @@
 @import './common/css/grid.css';
 @import './common/css/fonts.css';
 @import './common/css/fontawesome/light.css';
+@import './common/css/fontawesome/regular.css';
 @import './common/css/fontawesome/solid.css';
 @import './common/css/fontawesome/fontawesome.css';
 @import './common/css/tykon.css';