[TUI-67] add regular weight icons (#373)

* [TUI-67] Added icons weight regular
TykTechnologies · Jun 27, 2024 · 676e822 · 676e822
1 parent 9e8a8df
commit 676e822
Show file tree

Hide file tree

Showing 35 changed files with 83 additions and 56 deletions.
diff --git a/lib/fonts/fontawesome/fa-regular-400.ttf b/lib/fonts/fontawesome/fa-regular-400.ttf
diff --git a/lib/fonts/fontawesome/fa-regular-400.woff2 b/lib/fonts/fontawesome/fa-regular-400.woff2
diff --git a/lib/index.css b/lib/index.css
diff --git a/lib/index.css.map b/lib/index.css.map
diff --git a/lib/index.js b/lib/index.js
diff --git a/lib/index.js.map b/lib/index.js.map
diff --git a/lib/tyk-ui.css b/lib/tyk-ui.css
diff --git a/lib/tyk-ui.css.map b/lib/tyk-ui.css.map
diff --git a/lib/tyk-ui.js b/lib/tyk-ui.js
diff --git a/lib/tyk-ui.js.map b/lib/tyk-ui.js.map
diff --git a/package.json b/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": {

diff --git a/src/common/css/fontawesome/regular.css b/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; }
diff --git a/src/common/fonts/fontawesome/fa-regular-400.ttf b/src/common/fonts/fontawesome/fa-regular-400.ttf
diff --git a/src/common/fonts/fontawesome/fa-regular-400.woff2 b/src/common/fonts/fontawesome/fa-regular-400.woff2
diff --git a/src/components/Button/Button.test.js b/src/components/Button/Button.test.js
@@ -36,7 +36,6 @@ describe('Button', () => {
         <Button
           theme="default"
           iconType="copy"
-          iconFamily="tykon"
           iconPosition="right"
         >
           {buttonText}
@@ -46,8 +45,7 @@ describe('Button', () => {
       .should('have.class', 'icon-right')
 
       .get('.tyk-icon')
-      .should('have.class', 'tykon')
-      .and('have.class', 'tykon-copy');
+      .and('have.class', 'fa-copy');
   });
 
   it('renders a custom "button"', () => {

diff --git a/src/components/Card/Readme.md b/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>

diff --git a/src/components/Icon/Icon.test.js b/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')

diff --git a/src/components/Icon/index.js b/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
 };
 

diff --git a/src/components/Message/Message.test.js b/src/components/Message/Message.test.js
@@ -15,7 +15,7 @@ describe('Message', () => {
   const noMarginClass = 'no-margin';
   const selectors = {
     message: '.tyk-message',
-    closeIcon: '.tyk-icon.tykon-x',
+    closeIcon: '.tyk-icon.fa-xmark',
   };
 
   it('renders the component with the info theme by default', () => {

diff --git a/src/components/Message/index.js b/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>
   );

diff --git a/src/components/Modal/index.js b/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 }

diff --git a/src/components/Pill/Readme.md b/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

diff --git a/src/components/Table/Table.test.js b/src/components/Table/Table.test.js
@@ -6,8 +6,8 @@ describe('Table Component Rendering', () => {
   const selectors = {
     table: '.tyk-table',
     headerCell: '.tyk-table thead th',
-    sortIcon: '.tyk-table thead th .tykon-arrowsort',
-    sortIconClassName: '.tykon-arrowsort',
+    sortIcon: '.tyk-table thead th .fa-sort',
+    sortIconClassName: '.fa-sort',
     selectAllCheckbox: '.tyk-table thead input[type="checkbox"]',
     allRowCheckboxes: '.tyk-table tbody input[type="checkbox"]',
     row: '.tyk-table tbody tr',

diff --git a/src/components/Table/js/header-cell.js b/src/components/Table/js/header-cell.js
@@ -20,7 +20,7 @@ export function HeaderCell({ column }) {
       {column.name}
       {column.sortable && (
         <span className="header-sort">
-          <Icon family="tykon" type="arrowsort" />
+          <Icon type="sort" />
         </span>
       )}
     </th>

diff --git a/src/components/Toast/Toast.test.js b/src/components/Toast/Toast.test.js
@@ -31,8 +31,8 @@ describe('Toast', () => {
     },
     icons: {
       icon: 'tyk-icon',
-      success: 'tykon-check',
-      warning: 'tykon-warning',
+      success: 'fa-check',
+      warning: 'fa-exclamation',
     },
   };
 
@@ -55,7 +55,7 @@ describe('Toast', () => {
   };
 
   it('should render toast components and remove it after the given delay', () => {
-    cy.mount(<Component onClick={() => toast.notify('demo', { delay: 150 })} />)
+    cy.mount(<Component onClick={() => toast.notify('demo', { delay: 350 })} />)
       .get('button')
       .click();
 

diff --git a/src/components/Tooltip/Tooltip.test.js b/src/components/Tooltip/Tooltip.test.js
@@ -8,8 +8,8 @@ describe('Tooltip', () => {
     tooltipWrapper: 'tyk-tooltip__wrapper',
     tooltip: 'tyk-tooltip',
     content: 'tooltip-content',
-    iconHelp: 'tykon-help',
-    iconClose: 'tykon-x',
+    iconHelp: 'fa-question',
+    iconClose: 'fa-xmark',
   };
   function Component(props) {
     return (
@@ -85,13 +85,13 @@ 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');
 
     cy.get(`.${classes.tooltip} .${classes.iconHelp}`)
       .should('not.exist')
-      .get(`.${classes.tooltip} .tykon-check`)
+      .get(`.${classes.tooltip} .fa-check`)
       .should('exist');
   });
 

diff --git a/src/components/Tooltip/index.js b/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);

diff --git a/src/form/components/Combobox/index.js b/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>
             )
         }

diff --git a/src/form/components/Combobox2/index.js b/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],
   );

diff --git a/src/form/components/Dropdown2/Dropdown.test.js b/src/form/components/Dropdown2/Dropdown.test.js
@@ -6,7 +6,7 @@ describe('Dropdown2', () => {
     buttonGroup: '.tyk-button-group',
     dropdownTrigger: '.dropdown__trigger',
     btn: '.tyk-button',
-    arrowIcon: '.tykon-arrowdown',
+    arrowIcon: '.fa-chevron-down',
     dropdownListWrapper: '.tyk-list',
   };
   it('renders by default a button with an arrow', () => {

diff --git a/src/form/components/Dropdown2/DropdownTrigger.js b/src/form/components/Dropdown2/DropdownTrigger.js
@@ -16,8 +16,7 @@ function DropdownTrigger({
     !splitTrigger ? (
       <Button
         className="dropdown__trigger"
-        iconType="arrowdown"
-        iconFamily="tykon"
+        iconType="chevron-down"
         iconPosition="right"
         theme={theme}
         ref={ref}
@@ -35,8 +34,7 @@ function DropdownTrigger({
         </Button>
         <Button
           className="dropdown__trigger"
-          iconType="arrowdown"
-          iconFamily="tykon"
+          iconType="chevron-down"
           iconPosition="right"
           theme={theme}
           onClick={toggle}

diff --git a/src/form/components/EditableList2/FieldsList.js b/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}