@licklist/design 0.66.7-dev.9 → 0.66.8-dev.1

package/src/sales/modals/refund-modal/RefundModal.tsx

@@ -5,7 +5,7 @@ import { useForm } from "react-hook-form";
 import ModalHeader from "react-bootstrap/ModalHeader";
 import ModalTitle from "react-bootstrap/ModalTitle";
 import { OrderPaymentType } from "@licklist/core/dist/DataMapper/Order/OrderPaymentDataMapper";
-import Icon from "../../../static/Icon";
+import { FaTimes } from "react-icons/fa";
 import { EXTENDED_PAYMENT_TYPE_TRANSLATION_KEYS } from "../../constants";
 import { CurrencyNumberInput } from "../../../static/CurrencyNumberInput";
 
@@ -69,7 +69,7 @@ export const RefundModal = ({
           </ModalTitle>
 
           <Button variant="danger" className="btn-sm rounded" onClick={onHide}>
-            <Icon type="times" height="1.2rem" />
+            <FaTimes size={20} />
           </Button>
         </ModalHeader>
 

package/src/sales/notes/NotesTable.tsx

@@ -2,9 +2,9 @@ import { useEffect, useState } from "react";
 import { Button, Table } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { Note } from "@licklist/core/dist/DataMapper/Order/NoteDataMapper";
+import { FaPlusCircle } from "react-icons/fa";
 import { TableRow, TableRowProps } from "./NotesTableRow";
 import { NoteForm } from "./note-form";
-import { Icon } from "../../static";
 
 export type NotesTableProps = Pick<TableRowProps, "onDeleteNote"> & {
   heading: string;
@@ -102,7 +102,7 @@ const AddNoteButton = ({ onClick }: { onClick: () => void }) => {
 
   return (
     <Button onClick={onClick} className="show-form-button">
-      {t("addNew")} <Icon className="ml-2" type="plus-circle" width="1rem" />
+      {t("addNew")} <FaPlusCircle size={16} className="ml-2" />
     </Button>
   );
 };

package/src/sales/notes/NotesTableRow.tsx

@@ -11,9 +11,9 @@ import {
   DATE_TIME_FULL_FORMAT,
 } from "@licklist/core/dist/Config";
 import { getClientTimeZone } from "@licklist/core/dist/Services";
+import { FaEllipsisH, FaEye, FaTrashAlt } from "react-icons/fa";
 import { ConfirmModal } from "../../modals";
 import { MenuButton } from "../../table";
-import { Icon } from "../../static";
 
 export type TableRowProps = {
   note: Note;
@@ -42,7 +42,7 @@ export const TableRow = ({ note, onClick, onDeleteNote }: TableRowProps) => {
       <td>
         <div className="controls">
           <span className="btn btn-sm eye">
-            <Icon type="eye" width="20" />
+            <FaEye size={20} />
           </span>
           <OverlayTrigger
             trigger="click"
@@ -70,7 +70,7 @@ export const TableRow = ({ note, onClick, onDeleteNote }: TableRowProps) => {
                             confirm(() => onDeleteNote(note.id));
                           }}
                           name={t("remove")}
-                          icon="trash-alt"
+                          icon={<FaTrashAlt size={12} />}
                           className="product-set-card-menu-item-text d-flex w-100 align-items-center"
                           rightIcon
                         />
@@ -89,7 +89,7 @@ export const TableRow = ({ note, onClick, onDeleteNote }: TableRowProps) => {
                 setIsOverlayVisible(true);
               }}
             >
-              <Icon type="ellipsis-h" />
+              <FaEllipsisH />
             </button>
           </OverlayTrigger>
         </div>

package/src/setting/admin/AdminSettingForm.tsx

@@ -11,7 +11,7 @@ import Col from "react-bootstrap/Col";
 import { Link } from "react-router-dom";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
 import { ProvidableType } from "@licklist/core/dist/DataMapper/Provider/ProvidableDataMapper";
-import Icon from "../../static/Icon";
+import { FaCommentAlt } from "react-icons/fa";
 import { PaymentFeeForm, PaymentFeeFormFieldValues } from "./PaymentFeeForm";
 import { Currency } from "../../types/currency";
 
@@ -74,12 +74,7 @@ export const AdminSettingForm = ({
           <InputGroup>
             <InputGroup.Prepend>
               <InputGroup.Text>
-                <Icon
-                  type="comment-alt"
-                  style={{
-                    width: "1rem",
-                  }}
-                />
+                <FaCommentAlt size={16} />
               </InputGroup.Text>
             </InputGroup.Prepend>
 

package/src/setting/admin/PaymentFeeForm.tsx

@@ -6,8 +6,8 @@ import InputGroup from "react-bootstrap/InputGroup";
 import Row from "react-bootstrap/Row";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-
-import { WarningMessage, Icon } from "../../static";
+import { FaPercentage, FaPoundSign } from "react-icons/fa";
+import { WarningMessage } from "../../static";
 
 export type PaymentFeeFormFieldValues = {
   feeInPercent: number;
@@ -64,12 +64,7 @@ export function PaymentFeeForm({ isLoading = false }: PaymentFeeFormProps) {
                 <InputGroup hasValidation>
                   <InputGroup.Prepend>
                     <InputGroup.Text>
-                      <Icon
-                        type="percentage"
-                        style={{
-                          width: ".7rem",
-                        }}
-                      />
+                      <FaPercentage size={10} />
                     </InputGroup.Text>
                   </InputGroup.Prepend>
 
@@ -117,12 +112,7 @@ export function PaymentFeeForm({ isLoading = false }: PaymentFeeFormProps) {
                 <InputGroup hasValidation>
                   <InputGroup.Prepend>
                     <InputGroup.Text>
-                      <Icon
-                        type="pound-sign"
-                        style={{
-                          width: ".7rem",
-                        }}
-                      />
+                      <FaPoundSign size={10} />
                     </InputGroup.Text>
                   </InputGroup.Prepend>
 
@@ -167,12 +157,7 @@ export function PaymentFeeForm({ isLoading = false }: PaymentFeeFormProps) {
                 <InputGroup hasValidation>
                   <InputGroup.Prepend>
                     <InputGroup.Text>
-                      <Icon
-                        type="pound-sign"
-                        style={{
-                          width: ".7rem",
-                        }}
-                      />
+                      <FaPoundSign size={10} />
                     </InputGroup.Text>
                   </InputGroup.Prepend>
 
@@ -229,12 +214,7 @@ export function PaymentFeeForm({ isLoading = false }: PaymentFeeFormProps) {
                 <InputGroup hasValidation>
                   <InputGroup.Prepend>
                     <InputGroup.Text>
-                      <Icon
-                        type="percentage"
-                        style={{
-                          width: ".7rem",
-                        }}
-                      />
+                      <FaPercentage size={10} />
                     </InputGroup.Text>
                   </InputGroup.Prepend>
 
@@ -279,12 +259,7 @@ export function PaymentFeeForm({ isLoading = false }: PaymentFeeFormProps) {
                 <InputGroup hasValidation>
                   <InputGroup.Prepend>
                     <InputGroup.Text>
-                      <Icon
-                        type="pound-sign"
-                        style={{
-                          width: ".7rem",
-                        }}
-                      />
+                      <FaPoundSign size={10} />
                     </InputGroup.Text>
                   </InputGroup.Prepend>
 

package/src/setting/dashboard/FinancialDataForm.tsx

@@ -5,7 +5,7 @@ import InputGroup from "react-bootstrap/InputGroup";
 import Row from "react-bootstrap/Row";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import Icon from "../../static/Icon";
+import { FaIdBadge, FaMoneyCheckAlt, FaUser } from "react-icons/fa";
 
 export type FinancialDataFormFieldValues = {
   accountName: string;
@@ -45,12 +45,7 @@ export function FinancialDataForm({
           <InputGroup>
             <InputGroup.Prepend>
               <InputGroup.Text>
-                <Icon
-                  type="user"
-                  style={{
-                    width: "1rem",
-                  }}
-                />
+                <FaUser size={16} />
               </InputGroup.Text>
             </InputGroup.Prepend>
 
@@ -64,12 +59,7 @@ export function FinancialDataForm({
           <InputGroup hasValidation>
             <InputGroup.Prepend>
               <InputGroup.Text>
-                <Icon
-                  type="id-badge"
-                  style={{
-                    width: "1rem",
-                  }}
-                />
+                <FaIdBadge size={16} />
               </InputGroup.Text>
             </InputGroup.Prepend>
 
@@ -115,12 +105,7 @@ export function FinancialDataForm({
           <InputGroup hasValidation>
             <InputGroup.Prepend>
               <InputGroup.Text>
-                <Icon
-                  type="money-check-alt"
-                  style={{
-                    width: "1.7rem",
-                  }}
-                />
+                <FaMoneyCheckAlt size={28} />
               </InputGroup.Text>
             </InputGroup.Prepend>
 

package/src/setting/dashboard/ProviderSettingForm.tsx

@@ -6,7 +6,7 @@ import InputGroup from "react-bootstrap/InputGroup";
 import Row from "react-bootstrap/Row";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import Icon from "../../static/Icon";
+import { FaPhone } from "react-icons/fa";
 import { SelectItem } from "../../types/generic/SelectItem";
 // @TODO not for first release
 // import { Button } from "react-bootstrap";
@@ -113,12 +113,7 @@ export const ProviderSettingForm = ({
             <InputGroup>
               <InputGroup.Prepend>
                 <InputGroup.Text>
-                  <Icon
-                    type="phone"
-                    style={{
-                      width: "1rem",
-                    }}
-                  />
+                  <FaPhone size={16} />
                 </InputGroup.Text>
               </InputGroup.Prepend>
 

package/src/setting/dashboard/components/IpInput.tsx

@@ -12,7 +12,7 @@ import {
 import { Button, FormControl, InputGroup } from "react-bootstrap";
 import { FormProvider, useForm, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { Icon } from "../../../static";
+import { FaTimes } from "react-icons/fa";
 
 export interface IpInputProps {
   onChange: (value: string) => void;
@@ -154,7 +154,7 @@ export function IpInput({ onChange, onRemove, value }: IpInputProps) {
             disabled={!isRemovable}
             onClick={onRemove}
           >
-            <Icon type="times" width=".55rem" height=".9rem" color="red" />
+            <FaTimes size={14} color="red" />
           </Button>
         </InputGroup.Text>
         <FormControl.Feedback type="invalid">

package/src/setting/dashboard/snippet-templates/card/SnippetTemplateCard.tsx

@@ -1,7 +1,7 @@
 import { Link } from "react-router-dom";
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
 import { useTranslation } from "react-i18next";
-import { Icon } from "../../../../static";
+import { FaTrashAlt } from "react-icons/fa";
 
 export interface SnippetTemplateCardProps extends HasPermissionProp {
   name: string;
@@ -31,7 +31,7 @@ export function SnippetTemplateCard({
             className="snippet-template-card-button"
             onClick={onRemove}
           >
-            <Icon type="trash-alt" />
+            <FaTrashAlt />
           </button>
         )}
       </div>

package/src/setting/dashboard/snippets/card/SnippetCard.tsx

@@ -5,9 +5,9 @@ import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
 import clsx from "clsx";
 import { OverlayTrigger, Popover, ListGroup } from "react-bootstrap";
 import { useId } from "@react-aria/utils";
+import { FaEllipsisH, FaEye, FaTrashAlt } from "react-icons/fa";
 import { MenuButton } from "../../../../table";
 import { ConfirmModal } from "../../../../modals";
-import { Icon } from "../../../../static";
 
 export interface SnippetCardProps extends HasPermissionProp {
   name: string;
@@ -42,7 +42,7 @@ export function SnippetCard({
         <div className="d-flex align-items-center">
           {isDefault && <div className="mr-4">{t("Design:default")}</div>}
           <div className="product-set-card-menu-eye-container">
-            <Icon type="eye" color="#0E8CE2" width="20" />
+            <FaEye color="#0E8CE2" size={20} />
           </div>
           <OverlayTrigger
             trigger="click"
@@ -70,7 +70,7 @@ export function SnippetCard({
                             confirm(onRemove);
                           }}
                           name={t("remove")}
-                          icon="trash-alt"
+                          icon={<FaTrashAlt size={12} />}
                           className="product-set-card-menu-item-text d-flex w-100 align-items-center"
                           rightIcon
                         />
@@ -90,7 +90,7 @@ export function SnippetCard({
                 setIsOverlayVisible(true);
               }}
             >
-              <Icon type="ellipsis-h" />
+              <FaEllipsisH />
             </button>
           </OverlayTrigger>
         </div>

package/src/sidebar/elements/ReturnBack.tsx

@@ -1,6 +1,6 @@
 import { Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
-import Icon from "../../static/Icon";
+import { FaChevronLeft } from "react-icons/fa";
 
 export interface ReturnBackProps {
   onClick: () => void;
@@ -12,7 +12,7 @@ function ReturnBack({ onClick }: ReturnBackProps) {
   return (
     <div className="sidebar-return-back-container">
       <Button onClick={onClick} variant="outline-primary">
-        <Icon type="chevron-left" height="1rem" />
+        <FaChevronLeft />
         <span className="sidebar-return-back__title">{t("backToCompany")}</span>
       </Button>
     </div>

package/src/slide-curtain/SlideCurtain.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
+import { FaEllipsisH } from "react-icons/fa";
 import { useSwipeable } from "react-swipeable";
-import Icon from "../static/Icon";
 
 const formOffsetBuffer = 90;
 
@@ -52,11 +52,7 @@ export function SlideCurtain({ children }) {
         {...handlers}
         ref={passRefToSwieable}
       >
-        <Icon
-          type="ellipsis-h"
-          height="1.5rem"
-          className="slide-form__swipe-trigger__icon"
-        />
+        <FaEllipsisH size={24} className="slide-form__swipe-trigger__icon" />
       </div>
       <div className="slide-form__content">{children}</div>
     </div>

package/src/snippet/snippet-template/settings/SettingButton.tsx

@@ -1,6 +1,6 @@
 import Button from "react-bootstrap/Button";
 import clsx from "clsx";
-import Icon from "../../../static/Icon";
+import { FaCog } from "react-icons/fa";
 import { snippetTemplateViews } from "../context/snippetTemplateView";
 
 export interface SettingButtonProps extends React.PropsWithChildren<unknown> {
@@ -27,7 +27,7 @@ export const SettingButton = ({
         className={clsx("snippet-template__setting d-inline", className)}
         onClick={() => onClick(view as keyof typeof snippetTemplateViews)}
       >
-        <Icon type="cog" style={{ width: 16 }} />
+        <FaCog size={16} />
       </Button>
     </div>
   );

package/src/sortable-list/CreateSortableListItem.tsx

@@ -1,4 +1,4 @@
-import { Icon } from "../static";
+import { FaPlus } from "react-icons/fa";
 
 interface CreateSortableListItemProps {
   onClick: () => void;
@@ -16,12 +16,7 @@ export function CreateSortableListItem({
       type="button"
     >
       <span>{title}</span>
-      <Icon
-        type="plus"
-        height="2rem"
-        width="2rem"
-        className="rounded sortable-list-item-icon p-2"
-      />
+      <FaPlus size={32} className="rounded sortable-list-item-icon p-2" />
     </button>
   );
 }

package/src/sortable-tree/SortableTreeItem.tsx

@@ -9,9 +9,8 @@ import { CSS } from "@dnd-kit/utilities";
 import { Button, Collapse, Modal } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import clsx from "clsx";
-
+import { FaEllipsisH, FaGripVertical, FaMinus } from "react-icons/fa";
 import { ConfirmModal } from "../modals";
-import Icon from "../static/Icon";
 import { DeleteFieldButton } from "../product-set/elements/DeleteFieldButton";
 
 const DRAG_RADIUS_LIMIT = 5;
@@ -205,7 +204,7 @@ export function SortableTreeItem({
             onMouseUp={onHandleExpand}
           >
             {expanded ? (
-              <Icon type="minus" width=".7rem" />
+              <FaMinus size={10} />
             ) : (
               <div className="expand-icon-container">
                 <div />
@@ -251,7 +250,7 @@ export function SortableTreeItem({
                   {...attributes}
                   {...listeners}
                 >
-                  <Icon type="grip-vertical" />
+                  <FaGripVertical />
                 </Button>
               )}
               <Button
@@ -291,7 +290,7 @@ export function SortableTreeItem({
                   onClick={(e) => onEdit(e)}
                   onKeyDown={(e) => e.stopPropagation()}
                 >
-                  <Icon type="ellipsis-h" color="#0E8CE2" height="1rem" />
+                  <FaEllipsisH color="#0E8CE2" size={16} />
                 </div>
               </Button>
             </div>

package/src/static/RestrictedAccess.tsx

@@ -1,7 +1,7 @@
 import { Button } from "react-bootstrap";
 import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
 import { useTranslation } from "react-i18next";
-import Icon from "./Icon";
+import { FaArrowLeft } from "react-icons/fa";
 
 function RestrictedAccess() {
   const { t } = useTranslation("Design");
@@ -13,7 +13,7 @@ function RestrictedAccess() {
         variant="link"
         onClick={() => RouteService.goBack()}
       >
-        <Icon type="arrow-left" width="25" />
+        <FaArrowLeft size={25} />
       </Button>
       <div className="container d-flex justify-content-center pt-5">
         <div className="text-center">

package/src/static/SocialButton.tsx

@@ -2,22 +2,20 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import { ReactNode } from "react";
-import Icon from "./Icon";
+import { FaFacebookF, FaTwitter } from "react-icons/fa";
 
 interface Props {
   children?: ReactNode | ReactNode[];
   onClick?: () => void;
   className?: string;
   type?: string;
-  icon?: string;
   disabled?: boolean;
 }
 
 function SocialButton(props: Props) {
-  const { children, className, onClick, type, icon, disabled } = props;
+  const { children, className, onClick, type, disabled } = props;
 
   const defaultType = "twitter";
-  const defaultIcon = "twitter";
 
   const handleClick = () => {
     if (onClick) {
@@ -38,7 +36,8 @@ function SocialButton(props: Props) {
       onClick={handleClick}
     >
       <span className="separator">
-        <Icon type={["fab", icon ?? defaultIcon]} />
+        {type === "facebook" && <FaFacebookF />}
+        {type === "twitter" && <FaTwitter />}
       </span>
       {children}
     </a>

package/src/static/Static.stories.tsx

@@ -4,10 +4,10 @@ import InputGroup from "react-bootstrap/InputGroup";
 import Row from "react-bootstrap/Row";
 import Input from "react-phone-number-input/input";
 import { FormProvider, useForm } from "react-hook-form";
+import { FaSearch } from "react-icons/fa";
 import CountrySelect from "./CountrySelect";
 import CountryCodeSelect from "./CountryCodeSelect";
 import FormCard from "./FormCard";
-import Icon from "./Icon";
 import Image from "./Image";
 import SocialButton from "./SocialButton";
 import StyledButton from "./StyledButton";
@@ -72,7 +72,7 @@ _RestrictedAccess.story = {
   name: "RestrictedAccess",
 };
 
-export const _Icon = () => <Icon type="search" />;
+export const _Icon = () => <FaSearch />;
 
 _Icon.story = {
   parameters: {

package/src/static/UserBadge.tsx

@@ -1,7 +1,7 @@
 import { Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
+import { FaLongArrowAltDown } from "react-icons/fa";
 import { useIntl } from "react-intl";
-import { Icon } from ".";
 
 interface UserBadgeProps {
   userName: string;
@@ -35,11 +35,7 @@ export function UserBadge({
           </p>
         </div>
       </div>
-      <Icon
-        type="long-arrow-alt-down"
-        height="1.5rem"
-        className="user-badge-down-icon"
-      />
+      <FaLongArrowAltDown size={24} className="user-badge-down-icon" />
     </Button>
   );
 }

package/src/static/date-range-input/DateRangeInput.tsx

@@ -5,7 +5,7 @@ import { useClickAway } from "react-use";
 import { useTranslation } from "react-i18next";
 import { Modifier } from "@popperjs/core";
 import { useId } from "@react-aria/utils";
-import { Icon } from "..";
+import { FaCalendar } from "react-icons/fa";
 import {
   stringDatesToJSDates,
   rangeDatesToStringDates,
@@ -151,11 +151,7 @@ export const DateRangeInput = ({
             className="date-range-input"
             value={stringDatesToInputValue({ startDate, endDate })}
           />
-          <Icon
-            type="calendar"
-            height="1rem"
-            className="date-range-input-icon"
-          />
+          <FaCalendar size={16} className="date-range-input-icon" />
         </div>
       </OverlayTrigger>
     </div>

package/src/static/index.ts

@@ -12,7 +12,6 @@ export * from "./text-expand";
 export { Tabs } from "./tabs";
 export { default as CountrySelect } from "./CountrySelect";
 export { default as FormCard } from "./FormCard";
-export { default as Icon } from "./Icon";
 export { default as Image } from "./Image";
 export { default as SocialButton } from "./SocialButton";
 export { default as StyledButton } from "./StyledButton";

package/src/static/number-input/NumberInput.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import { FormControl } from "react-bootstrap";
-import Icon from "../Icon";
+import { FaChevronDown, FaChevronUp } from "react-icons/fa";
 
 interface NumberInputProps {
   disabled?: boolean;
@@ -63,7 +63,7 @@ export function NumberInput({
         className="licklist-number-input__btn-up"
         disabled={disabled}
       >
-        <Icon type="chevron-up" width="1rem" />
+        <FaChevronUp size={16} />
       </button>
       <button
         type="button"
@@ -71,7 +71,7 @@ export function NumberInput({
         className="licklist-number-input__btn-down"
         disabled={disabled}
       >
-        <Icon type="chevron-down" width="1rem" />
+        <FaChevronDown size={16} />
       </button>
     </div>
   );

package/src/styles/iframe-external-modal/IframeExternalModal.scss

@@ -83,7 +83,7 @@ body[bkdt-scrollable="false"] .bkdt-mask {
           width: 100%;
           height: 100%;
           max-width: 800px;
-          min-height: unset;
+          min-height: 55vh;
         }
       }
     }

package/src/table/MenuButton.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import Icon from "../static/Icon";
+import { ReactElement } from "react";
 
 export type MenuButtonProps = {
   onClick?: () => void;
@@ -7,8 +7,7 @@ export type MenuButtonProps = {
   rightIcon?: boolean;
   name: string;
   className?: string;
-  icon?: string;
-  iconWidth?: string;
+  icon?: ReactElement;
 };
 
 export const MenuButton = ({
@@ -18,10 +17,7 @@ export const MenuButton = ({
   icon,
   leftIcon,
   rightIcon,
-  iconWidth = "12",
 }: MenuButtonProps) => {
-  const iconComponent = icon ? <Icon type={icon} width={iconWidth} /> : null;
-
   return (
     <>
       <button
@@ -32,7 +28,7 @@ export const MenuButton = ({
         }}
         className={clsx(className)}
       >
-        {leftIcon && iconComponent}
+        {leftIcon && icon}
         <span
           className={clsx(
             icon && leftIcon && "ml-3",
@@ -41,7 +37,7 @@ export const MenuButton = ({
         >
           {name}
         </span>
-        {rightIcon && iconComponent}
+        {rightIcon && icon}
       </button>
     </>
   );