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

package/src/auth/Social/SocialFormComponent.tsx

@@ -74,7 +74,6 @@ function SocialFormComponent(props: SocialFormComponentProps) {
           <SocialButton
             className={["btn-social-lg", "pl-5", "pr-1"].join(" ")}
             type="facebook"
-            icon="facebook-f"
             onClick={handleFacebookClick}
             disabled={isLoading}
           >

package/src/collapsible-input-group/CollapsibleInputGroup.tsx

@@ -7,7 +7,7 @@ import {
   Form,
 } from "react-bootstrap";
 import clsx from "clsx";
-import Icon from "../static/Icon";
+import { FaChevronUp, FaChevronDown } from "react-icons/fa";
 
 export type CollapsibleInputGroupProps = {
   label: ReactNode;
@@ -27,8 +27,7 @@ export function CollapsibleInputGroup({
   error,
 }: CollapsibleInputGroupProps) {
   const currentEventKey = useContext(AccordionContext);
-  const accordionIcon =
-    currentEventKey === eventKey ? "chevron-up" : "chevron-down";
+
   const isInvalid = Boolean(error);
 
   return (
@@ -42,7 +41,11 @@ export function CollapsibleInputGroup({
       >
         <div className="accordion-form-control-header">
           <h5 className="mb-0 pl-3">{label}</h5>
-          <Icon type={accordionIcon} height="1.25rem" />
+          {currentEventKey === eventKey ? (
+            <FaChevronUp size={20} />
+          ) : (
+            <FaChevronDown size={20} />
+          )}
         </div>
         <Collapse in={currentEventKey !== eventKey}>
           <div className="pl-3">{description}</div>

package/src/custom-fields/{constants.ts → constants.tsx}

@@ -3,18 +3,19 @@ import {
   CUSTOM_FIELD_TYPE_DROPDOWN,
   CUSTOM_FIELD_TYPE_INPUT,
 } from "@licklist/core/dist/DataMapper/Order/CustomFieldDataMapper";
+import { FaFont, FaListOl } from "react-icons/fa";
 import { SORTABLE_ID_KEY } from "../sortable-list";
 
 export const FIELD_TYPES = {
   [CUSTOM_FIELD_TYPE_INPUT]: {
     id: "1",
     label: "Text Input",
-    icon: "font",
+    icon: <FaFont size={32} />,
   },
   [CUSTOM_FIELD_TYPE_DROPDOWN]: {
     id: "2",
     label: "Dropdown",
-    icon: "list-ol",
+    icon: <FaListOl size={32} />,
   },
 };
 

package/src/custom-fields/field/FieldItem.tsx

@@ -1,17 +1,18 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import { Icon } from "../../static";
+
+import { ReactElement } from "react";
 
 interface FieldItemProps {
   label: string;
-  icon: string;
+  icon: ReactElement;
   onClick: () => void;
 }
 
 export function FieldItem({ label, icon, onClick }: FieldItemProps) {
   return (
     <div className="custom-field-item" onClick={onClick}>
-      <Icon type={icon} height="2rem" />
+      {icon}
       <h6>{label}</h6>
     </div>
   );

package/src/custom-fields/forms/DropdownForm.tsx

@@ -11,7 +11,7 @@ import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permi
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
 import { FieldNamePrefixPath } from "@licklist/plugins/dist/types/services/Form/hook-form-service";
 import { Option } from "@licklist/core/dist/DataMapper/Order/CustomFieldDataMapper";
-import { Icon } from "../../static";
+import { FaPlus, FaTrashAlt } from "react-icons/fa";
 
 interface DropdownFormProps<T>
   extends FieldNamePrefixPath<T>,
@@ -178,7 +178,7 @@ export function DropdownForm<T>({
                     trigger();
                   }}
                 >
-                  <Icon type="trash-alt" height="1.2rem" />
+                  <FaTrashAlt size={20} />
                 </button>
               </Form.Group>
             </div>
@@ -196,7 +196,7 @@ export function DropdownForm<T>({
             resetOptionsError();
           }}
         >
-          <Icon type="plus" height="1.1rem" width=".8rem" />
+          <FaPlus size={18} />
         </Button>
       </div>
       <div className="manual-form-error">

package/src/events/edit-recurrent-event-modal/EditRecurrentEventModal.tsx

@@ -1,7 +1,7 @@
 import { Form, Modal, Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { Controller, useForm } from "react-hook-form";
-import Icon from "../../static/Icon";
+import { FaTimes } from "react-icons/fa";
 
 export const MODE_THIS_EVENT = "thisEvent";
 export const MODE_THIS_AND_FOLLOWING_EVENTS = "thisAndFollowingEvents";
@@ -62,7 +62,7 @@ export const EditRecurrentEventModal = ({
         <Modal.Header className="border-0">
           <Modal.Title as="h6">{title}</Modal.Title>
           <Button variant="danger" className="btn-sm rounded" onClick={onHide}>
-            <Icon type="times" height="1rem" />
+            <FaTimes size={16} />
           </Button>
         </Modal.Header>
         <Modal.Body className="p-0 ml-4">

package/src/events/event-card/EventCard.tsx

@@ -12,7 +12,13 @@ import { useTranslation } from "react-i18next";
 import * as Config from "@licklist/core/dist/Config";
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
 import { EventStatistic } from "@licklist/core/dist/DataMapper/Provider/EventStatisticDataMapper";
-import Icon from "../../static/Icon";
+import {
+  FaEye,
+  FaExternalLinkAlt,
+  FaEdit,
+  FaCopy,
+  FaTrashAlt,
+} from "react-icons/fa";
 import { Sale } from "../../types/bookings";
 import { TipTapEditor } from "../../tiptap-editor/TipTapEditor";
 import {
@@ -159,7 +165,8 @@ export function EventCard({
               <ChartBarIcon />
             </button>
             <div className="event-card-views">
-              <Icon type="eye" />
+              <FaEye />
+
               <span>{formatNumber(totalViews)}</span>
             </div>
           </div>
@@ -169,7 +176,7 @@ export function EventCard({
               className="event-card-link-button"
               onClick={onPreview}
             >
-              <Icon type="external-link-alt" />
+              <FaExternalLinkAlt />
             </button>
             {hasPermission && (
               <>
@@ -178,21 +185,21 @@ export function EventCard({
                   className="event-card-link-button"
                   onClick={onEdit}
                 >
-                  <Icon type="edit" />
+                  <FaEdit />
                 </button>
                 <button
                   type="button"
                   className="event-card-link-button"
                   onClick={onCopy}
                 >
-                  <Icon type="copy" />
+                  <FaCopy />
                 </button>
                 <button
                   type="button"
                   className="event-card-link-button"
                   onClick={onRemove}
                 >
-                  <Icon type="trash-alt" />
+                  <FaTrashAlt />
                 </button>
               </>
             )}

package/src/events/event-statistic-modal/EventStatisticModal.tsx

@@ -2,7 +2,7 @@ import { Modal, Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { EventStatistic } from "@licklist/core/dist/DataMapper/Provider/EventStatisticDataMapper";
 import { Event } from "@licklist/core/dist/DataMapper/Provider/EventDataMapper";
-import Icon from "../../static/Icon";
+import { FaTimes } from "react-icons/fa";
 import { StaticTable } from "../../table";
 import { useTableData } from "./hooks/useTableData";
 
@@ -44,7 +44,7 @@ export const EventStatisticModal = ({
           className="btn-sm rounded"
           onClick={handleClose}
         >
-          <Icon type="times" height="1rem" />
+          <FaTimes size={16} />
         </Button>
       </Modal.Header>
       <Modal.Body>

package/src/events/event-venue-map/components/ZoomButtons/ZoomButtons.tsx

@@ -1,5 +1,5 @@
 import { Button } from "react-bootstrap";
-import { Icon } from "../../../../static";
+import { FaSearch } from "react-icons/fa";
 import { useZoom } from "../../hooks/useZoom";
 import { CanvasRefs } from "../../types";
 
@@ -13,7 +13,7 @@ export const ZoomButtons = ({
     <div className="zoom-buttons">
       <div className="buttons-wrapper">
         <div className="icon-wrapper mb-1">
-          <Icon type="search" width="1rem" height="1rem" />
+          <FaSearch size={16} />
         </div>
         <Button onClick={onZoomOut} className="mb-1">
           -

package/src/file-upload/FilePreview.tsx

@@ -4,8 +4,8 @@ import {
 } from "@licklist/core/dist/DataMapper/Media/ImageDataMapper";
 import { Attachment } from "@licklist/core/dist/DataMapper/Notification/AttachmentDataMapper";
 import { AttachmentMetadata } from "@licklist/core/dist/DataMapper/Notification/AttachmentMetadataDataMapper";
-
-import { Icon, Image as ImageComponent } from "../static";
+import { FaFile, FaFilePdf, FaTimes } from "react-icons/fa";
+import { Image as ImageComponent } from "../static";
 
 type Item = File | Image | Attachment | AttachmentMetadata;
 
@@ -65,7 +65,7 @@ export function PreviewItem({ disabled, item, onRemove }: PreviewItemProps) {
         }}
         disabled={disabled}
       >
-        <Icon type="times" height="1rem" />
+        <FaTimes />
       </button>
       {renderItemPreview(item)}
     </div>
@@ -129,11 +129,7 @@ const renderFileTypeIcon = (itemName?: string) => {
 
   return (
     <div className="preview-item__file">
-      {isPdfFile ? (
-        <Icon type="file-pdf" height="5rem" />
-      ) : (
-        <Icon type="file" height="5rem" />
-      )}
+      {isPdfFile ? <FaFilePdf size={80} /> : <FaFile size={80} />}
     </div>
   );
 };

package/src/header/Header.stories.tsx

@@ -1,5 +1,4 @@
 import Nav from "react-bootstrap/Nav";
-import Icon from "../static/Icon";
 import StyledButton from "../static/StyledButton";
 import BookeditHeader from "./BookeditHeader";
 import CompanySelector from "./elements/CompanySelector";
@@ -29,7 +28,7 @@ export const Licklist = () => (
           <ul className="navbar-nav bd-navbar-nav flex-row navbar-nav-primary">
             <li className="nav-item px-3 px-sm-3 px-lg-4">
               <Nav.Link href="#">
-                <Icon type="search" />
+                <FaSearch />
               </Nav.Link>
             </li>
             <li className="nav-item px-3 px-sm-4 d-none d-sm-inline">

package/src/help/popover/HelpPopover.tsx

@@ -5,7 +5,7 @@ import OverlayTrigger from "react-bootstrap/OverlayTrigger";
 import Popover from "react-bootstrap/Popover";
 import { ButtonVariant } from "react-bootstrap/types";
 import clsx from "clsx";
-import Icon from "../../static/Icon";
+import { FaQuestion } from "react-icons/fa";
 
 export type HelpPopoverProps = {
   children?: React.ReactElement | React.ReactElement[];
@@ -47,7 +47,7 @@ export function HelpPopover({
           {...triggerHandler}
           className="btn-icon-popover rounded-circle px-2 py-1 d-inline-flex align-items-center"
         >
-          {icon ?? <Icon type="question" style={{ width: "10px" }} />}
+          {icon ?? <FaQuestion size={10} />}
         </Button>
       )}
     </OverlayTrigger>

package/src/iframe/event/event-booking-products/components/AccordionItem/AccordionItem.tsx

@@ -9,10 +9,10 @@ import {
   OrderItems,
 } from "@licklist/plugins/dist/types/context/Iframe/orderItems";
 import { Product } from "@licklist/plugins/dist/types/context/sale/menuSteps";
+import { useContext } from "react";
+import { FaAngleRight, FaTimes } from "react-icons/fa";
 import { NumberInput } from "../../../../../static";
-import Icon from "../../../../../static/Icon";
 import { SetOrderFn } from "../../../../../types";
-import { useContext } from "react";
 
 interface CustomToggleProps {
   eventKey: string;
@@ -49,7 +49,7 @@ function CustomToggle({
   return (
     <Card.Header className="accordion-toggle p-4" onClick={decoratedOnClick}>
       <div className={contentClassName}>{children}</div>
-      <Icon className={iconClassName} type="angle-right" height="1.5rem" />
+      <FaAngleRight className={iconClassName} size={24} />
     </Card.Header>
   );
 }
@@ -152,12 +152,7 @@ function ProductItem({
           value={order[id]?.quantity || 0}
           className="product-item__counter"
         />
-        <Icon
-          className="product-item__icon m-3"
-          type="times"
-          height="1rem"
-          width="1rem"
-        />
+        <FaTimes className="product-item__icon m-3" size={16} />
         <div className="product-item__price">
           {formatNumber(price * (order[id]?.quantity || 1), {
             style: "currency",

package/src/iframe/event/event-navigation-footer/EventNavigationFooter.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from "react-i18next";
 import Button from "react-bootstrap/Button";
 import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
-import Icon from "../../../static/Icon";
+import { FaArrowLeft, FaArrowRight } from "react-icons/fa";
 
 interface PaginationDotsProps {
   amount: number;
@@ -54,7 +54,7 @@ export function EventNavigationFooter({
         className="event-fixed-footer__prev-btn m-0"
         onClick={onPrevButtonClick}
       >
-        <Icon type="arrow-left" width="1rem" />
+        <FaArrowLeft size={16} />
       </Button>
       {amount > 1 && (
         <PaginationDots amount={amount} activeElement={activeElement} />
@@ -67,11 +67,12 @@ export function EventNavigationFooter({
           {...submitButtonProps}
         >
           {t("continue")}
-          <Icon type="arrow-right" width="1rem" className="ml-2" />
+          <FaArrowRight size={16} className="ml-2" />
         </Button>
       ) : (
         <Button className="m-0" onClick={onNextClick}>
-          {t("next")} <Icon type="arrow-right" width="1rem" className="ml-2" />
+          {t("next")}
+          <FaArrowRight size={16} className="ml-2" />
         </Button>
       )}
     </>

package/src/iframe/order-process/components/BookingSummary/components/ToggleHeader/ToggleHeader.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 import { useAccordionToggle } from "react-bootstrap/AccordionToggle";
 import AccordionContext from "react-bootstrap/AccordionContext";
 import clsx from "clsx";
-import { Icon } from "../../../../../../static";
+import { FaChevronDown, FaChevronUp } from "react-icons/fa";
 import { ACCORDION_KEY } from "../../types";
 
 type ToggleHeaderProps = {
@@ -91,14 +91,11 @@ const HeaderContent = ({
           <p className="m-0 mr-2 toggle-title">{title || t("yourBooking")}</p>
           {showExpandButton && (
             <div className="expand-button">
-              <Icon
-                type={
-                  currentEventKey === ACCORDION_KEY
-                    ? "chevron-up"
-                    : "chevron-down"
-                }
-                width="0.5rem"
-              />
+              {currentEventKey === ACCORDION_KEY ? (
+                <FaChevronUp size={8} />
+              ) : (
+                <FaChevronDown size={8} />
+              )}
             </div>
           )}
         </div>

package/src/iframe/order-process/components/CalendarStepsForm/components/CategoryProductModal.tsx

@@ -7,8 +7,8 @@ import {
   Product,
   ProductCategory,
 } from "@licklist/plugins/dist/types/context/sale/menuSteps";
+import { FaTimes } from "react-icons/fa";
 import { CategoryProduct } from "../../CategoryProduct";
-import Icon from "../../../../../static/Icon";
 
 export type CategoryProductModalProps = {
   activePointId?: number;
@@ -57,7 +57,7 @@ export const CategoryProductModal = ({
           className="btn-sm rounded"
           onClick={onCloseModal}
         >
-          <Icon type="times" height="1rem" />
+          <FaTimes />
         </Button>
       </div>
     </div>

package/src/iframe/order-process/components/ErrorModal/ErrorModal.tsx

@@ -4,7 +4,7 @@ import ModalHeader from "react-bootstrap/ModalHeader";
 import ModalTitle from "react-bootstrap/ModalTitle";
 import ModalBody from "react-bootstrap/ModalBody";
 import Modal from "react-bootstrap/Modal";
-import Icon from "../../../../static/Icon";
+import { FaTimes } from "react-icons/fa";
 
 export interface ErrorModalProps {
   isOpen: boolean;
@@ -43,7 +43,7 @@ export const ErrorModal = ({
           className="btn-sm rounded"
           onClick={handleClose}
         >
-          <Icon type="times" height="1rem" />
+          <FaTimes />
         </Button>
       </ModalHeader>
       <ModalBody className="confirmation-modal-body">

package/src/iframe/order-process/components/NavigationFooter/NavigationFooter.tsx

@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import Button from "react-bootstrap/Button";
-import Icon from "../../../../static/Icon";
+import { FaArrowLeft, FaArrowRight } from "react-icons/fa";
 
 interface NavigationFooterProps {
   onPrevStep: () => void;
@@ -32,12 +32,12 @@ export const NavigationFooter = ({
         className="event-fixed-footer__prev-btn m-0"
         onClick={onPrevButtonClick}
       >
-        <Icon type="arrow-left" width="1rem" />
+        <FaArrowLeft />
       </Button>
 
       <Button className="m-0" disabled={isButtonDisabled} {...buttonProps}>
         {nextButtonLabel ?? t("continue")}
-        <Icon type="arrow-right" width="1rem" className="ml-2" />
+        <FaArrowRight className="ml-2" />
       </Button>
     </div>
   );

package/src/iframe/order-process/components/PaymentCard/PaymentCard.tsx

@@ -4,7 +4,7 @@ import { useIntl } from "react-intl";
 import * as Config from "@licklist/core/dist/Config";
 import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
 import { PaymentDetail } from "@licklist/core/dist/DataMapper/Order/PaymentDetailDataMapper";
-import { Icon } from "../../../../static";
+import { FaCreditCard } from "react-icons/fa";
 
 export type PaymentCardProps = {
   discountBlock?: ReactNode;
@@ -71,7 +71,7 @@ export const PaymentCard: FC<PaymentCardProps> = ({
   return (
     <div className="payment-card">
       <div className="title">
-        <Icon type="credit-card" />
+        <FaCreditCard />
         <p className="m-0">{t("Design:payment")}</p>
       </div>
       <div className="payment-summary mb-5">

package/src/iframe/order-process/components/Timer/Timer.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from "react-i18next";
+import { FaStopwatch } from "react-icons/fa";
 import { fancyTimeFormat } from "./utils";
-import { Icon } from "../../../../static";
 
 export type TimerProps = {
   timer: number;
@@ -14,7 +14,7 @@ export const Timer = ({ timer }: TimerProps) => {
       <div className="timer-wrapper ">
         <div className="timer">
           <div className="d-flex align-items-center">
-            <Icon type="stopwatch" />
+            <FaStopwatch />
           </div>
           <div className="time">{fancyTimeFormat(timer)}</div>
         </div>

package/src/image-radio-input/ImageRadioInput.stories.tsx

@@ -1,8 +1,8 @@
 import { Meta, Story } from "@storybook/react";
 import { FormProvider, useForm } from "react-hook-form";
+import { FaBars } from "react-icons/fa";
 import { ImageRadioInput, ImageRadioInputProps } from "./ImageRadioInput";
 import { ReactComponent as MonthIcon } from "../assets/widgets/monthCalendar.svg";
-import Icon from "../static/Icon";
 
 export default {
   title: "ImageRadioInput",
@@ -30,7 +30,7 @@ Default.args = {
 };
 
 export const WithFontAwesomeIcon: Story<ImageRadioInputProps<FormModel>> = (
-  args
+  args,
 ) => {
   const form = useForm();
 
@@ -42,7 +42,7 @@ export const WithFontAwesomeIcon: Story<ImageRadioInputProps<FormModel>> = (
 };
 
 WithFontAwesomeIcon.args = {
-  img: <Icon type="bars" />,
+  img: <FaBars />,
   label: "List",
   name: "test",
 };

package/src/modals/confirmation/ConfirmModal.tsx

@@ -6,7 +6,7 @@ import ModalTitle from "react-bootstrap/ModalTitle";
 import ModalBody from "react-bootstrap/ModalBody";
 import ModalFooter from "react-bootstrap/ModalFooter";
 import Modal from "react-bootstrap/Modal";
-import Icon from "../../static/Icon";
+import { FaTimes } from "react-icons/fa";
 
 export type ConfirmAction = () => void;
 export const ConfirmModalType = {
@@ -91,7 +91,7 @@ export function ConfirmModal({
             onClick={handleClose}
             data-id={CONFIRM_MODAL_ACTION_DECLINE}
           >
-            <Icon type="times" height="1rem" />
+            <FaTimes size={16} />
           </Button>
         </ModalHeader>
         <ModalBody className="confirmation-modal-body">

package/src/modals/fullscreen/FullscreenModal.tsx

@@ -6,7 +6,7 @@ import ModalTitle from "react-bootstrap/ModalTitle";
 import ModalBody from "react-bootstrap/ModalBody";
 import ModalFooter from "react-bootstrap/ModalFooter";
 import Modal from "react-bootstrap/Modal";
-import Icon from "../../static/Icon";
+import { FaTimes } from "react-icons/fa";
 
 export interface FullscreenModalProps {
   children?: (confirm: () => void) => ReactNode;
@@ -63,7 +63,7 @@ export const FullscreenModal = ({
               className="btn-sm rounded"
               onClick={handleClose}
             >
-              <Icon type="times" height="1rem" />
+              <FaTimes size={16} />
             </Button>
           </ModalHeader>
         )}

package/src/notification/email-template/card/EmailTemplateCard.tsx

@@ -2,8 +2,8 @@ import { Link } from "react-router-dom";
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
 import { useTranslation } from "react-i18next";
 import { NotificationType } from "@licklist/core/dist/DataMapper/Notification/NotificationTypeDataMapper";
+import { FaTrashAlt, FaCopy } from "react-icons/fa";
 import { ConfirmModal, ConfirmModalType } from "../../../modals";
-import { Icon } from "../../../static";
 import { useTranslatedParameters } from "../../hooks/useTranslatedParameters";
 
 export interface EmailTemplateCardProps extends HasPermissionProp {
@@ -53,7 +53,7 @@ export function EmailTemplateCard({
                   confirm(onRemove);
                 }}
               >
-                <Icon type="trash-alt" />
+                <FaTrashAlt />
               </button>
             )}
           </ConfirmModal>
@@ -63,7 +63,7 @@ export function EmailTemplateCard({
           className="snippet-template-card-button"
           onClick={onDuplicate}
         >
-          <Icon type="copy" />
+          <FaCopy />
         </button>
       </div>
       <div className={`mt-${isDefault ? "3" : "4"}`}>

package/src/notification/sms-template/card/SmsTemplateCard.tsx

@@ -2,8 +2,8 @@ import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
 import { NotificationType } from "@licklist/core/dist/DataMapper/Notification/NotificationTypeDataMapper";
+import { FaCopy, FaTrashAlt } from "react-icons/fa";
 import { ConfirmModal, ConfirmModalType } from "../../../modals";
-import { Icon } from "../../../static";
 import { useTranslatedParameters } from "../../hooks/useTranslatedParameters";
 
 export interface SmsTemplateCardProps extends HasPermissionProp {
@@ -51,7 +51,7 @@ export function SmsTemplateCard({
                   confirm(onRemove);
                 }}
               >
-                <Icon type="trash-alt" />
+                <FaTrashAlt />
               </button>
             )}
           </ConfirmModal>
@@ -61,7 +61,7 @@ export function SmsTemplateCard({
           className="snippet-template-card-button"
           onClick={onDuplicate}
         >
-          <Icon type="copy" />
+          <FaCopy />
         </button>
       </div>
       <div className="mt-2">