forstok-ui-lib 6.7.18 → 6.10.0

package/src/components/icon/styles.ts

@@ -1,5 +1,38 @@
 import type { MouseEvent } from 'react';
 import styled, { css } from 'styled-components';
+
+import IconSearch from '../../assets/images/icons/search.svg'
+import IconCheck from '../../assets/images/icons/checkmark-tick.svg'
+import IconCheckGrey from '../../assets/images/icons/checkmark-tick-grey.svg'
+import IconArrowLeftBlue from '../../assets/images/icons/arrow-left-blue.svg'
+import IconWarning from '../../assets/images/icons/warning.svg'
+import IconAlert from '../../assets/images/icons/alert.svg'
+import IconArrowUpload from '../../assets/images/icons/arrow-upload.svg'
+import IconTrash from '../../assets/images/icons/trash.svg'
+import IconArrowLeft from '../../assets/images/icons/arrow-left.svg'
+import IconArrowLeftDouble from '../../assets/images/icons/arrow-left-double.svg'
+import IconArrowRight from '../../assets/images/icons/arrow-right.svg'
+import IconArrowRightDouble from '../../assets/images/icons/arrow-right-double.svg'
+import IconCalendar from '../../assets/images/icons/calendar.svg'
+import IconQuestion from '../../assets/images/icons/question.svg'
+import IconSortby from '../../assets/images/icons/sortby.svg'
+import IconNotificationDownload from '../../assets/images/icons/notif-download-white.svg'
+import IconNotificationUpload from '../../assets/images/icons/notif-upload-white.svg'
+import IconBar from '../../assets/images/icons/humberbars.svg'
+import IconClose from '../../assets/images/icons/close.svg'
+import IconArrow from '../../assets/images/icons/arrow.svg'
+import IconDiscount from '../../assets/images/icons/discount.svg'
+import IconCash from '../../assets/images/icons/cash.svg'
+import IconCredit from '../../assets/images/icons/credit.svg'
+import IconDebit from '../../assets/images/icons/debit.svg'
+import IconBank from '../../assets/images/icons/bank.svg'
+import IconQRIS from '../../assets/images/icons/qris.svg'
+import IconWallet from '../../assets/images/icons/wallet.svg'
+import IconDelivery from '../../assets/images/icons/delivery.svg'
+import IconSuccess from '../../assets/images/icons/success.svg'
+import IconEmail from '../../assets/images/icons/email.svg'
+import IconPrint from '../../assets/images/icons/print.svg'
+import IconBarcode from '../../assets/images/icons/barcode.svg'
 import IconPerson from '../../assets/images/icons/person.svg';
 import IconPersonRed from '../../assets/images/icons/person-red.svg';
 import IconCart from '../../assets/images/icons/cart.svg';
@@ -66,28 +99,28 @@ const getIconContainerStyled = ({ $mode, $name, $width, onClick }:{ $mode?: stri
     case 'search': 
       style += `
         &:before { 
-          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/search.svg'); 
+          content: url(${IconSearch}); 
         }
       `
       break;
     case 'check': 
       style += `
         &:before { 
-          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/checkmark-tick.svg'); 
+          content: url(${IconCheck}); 
         }
       `
       break;
     case 'check-grey': 
       style += `
         &:before { 
-          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/checkmark-tick-grey.svg'); 
+          content: url(${IconCheckGrey}); 
         }
       `
       break;   
     case 'arrow-left-blue': 
       style += `
         &:before { 
-          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/arrow-left-blue.svg'); 
+          content: url(${IconArrowLeftBlue}); 
         }
       `
       break;
@@ -101,161 +134,161 @@ const getIconContainerStyled = ({ $mode, $name, $width, onClick }:{ $mode?: stri
     case 'arrow': 
       style += `
         &:before { 
-          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/arrow.svg'); 
+          content: url(${IconArrow}); 
         }
       `
       break;
     case 'discount': 
       style += `
         &:before { 
-          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/discount.svg'); 
+          content: url(${IconDiscount}); 
         }
       `
       break;  
     case 'cash': 
       style += `
         &:before { 
-          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/cash.svg'); 
+          content: url(${IconCash}); 
         }
       `
       break; 
     case 'credit': 
       style += `
         &:before { 
-          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/credit.svg'); 
+          content: url(${IconCredit}); 
         }
       `
       break; 
     case 'debit': 
       style += `
         &:before { 
-          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/debit.svg'); 
+          content: url(${IconDebit}); 
         }
       `
       break; 
     case 'bank': 
       style += `
         &:before { 
-          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/bank.svg'); 
+          content: url(${IconBank}); 
         }
       `
       break; 
     case 'qris': 
       style += `
         &:before { 
-          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/qris.svg'); 
+          content: url(${IconQRIS}); 
         }
       `
       break; 
     case 'wallet': 
       style += `
         &:before { 
-          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/wallet.svg'); 
+          content: url(${IconWallet}); 
         }
       `
       break; 
     case 'delivery': 
       style += `
         &:before { 
-          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/delivery.svg'); 
+          content: url(${IconDelivery}); 
         }
       `
       break;  
     case 'success': 
       style += `
         &:before { 
-          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/success.svg'); 
+          content: url(${IconSuccess}); 
         }
       `
       break;  
     case 'email': 
       style += `
         &:before { 
-          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/email.svg'); 
+          content: url(${IconEmail}); 
         }
       `
       break;  
     case 'print': 
       style += `
         &:before { 
-          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/print.svg'); 
+          content: url(${IconPrint}); 
         }
       `
       break;  
     case 'warning': 
       style += `
         &:before { 
-          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/warning.svg'); 
+          content: url(${IconWarning}); 
         }
       `
       break; 
     case 'alert': 
       style += `
         &:before { 
-          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/alert.svg'); 
+          content: url(${IconAlert}); 
         }
       `
       break;
     case 'barcode': 
       style += `
         &:before { 
-          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/barcode.svg'); 
+          content: url(${IconBarcode}); 
         }
       `
       break; 
     case 'arrow-upload': 
       style += `
         &:before { 
-          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/arrow-upload.svg'); 
+          content: url(${IconArrowUpload}); 
         }
       `
       break;
     case 'trash': 
       style += `
         &:before { 
-          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/trash.svg'); 
+          content: url(${IconTrash}); 
         }
       `
       break;
     case 'arrow-left': 
       style += `
         &:before { 
-          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/arrow-left.svg'); 
+          content: url(${IconArrowLeft}); 
         }
       `
       break;
     case 'arrow-left-double': 
       style += `
         &:before { 
-          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/arrow-left-double.svg'); 
+          content: url(${IconArrowLeftDouble}); 
         }
       `
       break;
     case 'arrow-right': 
       style += `
         &:before { 
-          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/arrow-right.svg'); 
+          content: url(${IconArrowRight}); 
         }
       `
       break;
     case 'arrow-right-double': 
       style += `
         &:before { 
-          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/arrow-right-double.svg'); 
+          content: url(${IconArrowRightDouble}); 
         }
       `
       break;
     case 'calendar': 
       style += `
         &:before { 
-          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/calendar.svg'); 
+          content: url(${IconCalendar}); 
         }
       `
       break;
     case 'question': 
       style += `
         &:before { 
-          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/question.svg'); 
+          content: url(${IconQuestion}); 
           filter: grayscale(100%);
         }
       `
@@ -263,7 +296,7 @@ const getIconContainerStyled = ({ $mode, $name, $width, onClick }:{ $mode?: stri
     case 'sortby': 
       style += `
         &:before { 
-          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/sortby.svg'); 
+          content: url(${IconSortby}); 
         }
       `
       break;
@@ -271,26 +304,26 @@ const getIconContainerStyled = ({ $mode, $name, $width, onClick }:{ $mode?: stri
       style += `
         ${NotificationStyled}
         &:before { 
-          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/notif-download-white.svg'); 
+          content: url(${IconNotificationDownload}); 
         }`
       break;
     case 'NotificationUpload' :
       style += `
         ${NotificationStyled}
         &:before { 
-          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/notif-upload-white.svg'); 
+          content: url(${IconNotificationUpload}); 
         }`
       break;
     case 'bar': 
       style += `
         &:before { 
-          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/humberbars.svg'); 
+          content: url(${IconBar}); 
         }`
       break;
     case 'close': 
       style += `
         &:before { 
-          content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/close.svg'); 
+          content: url(${IconClose}); 
         }`
       break;
     case 'person':