@licklist/design 0.66.11 → 0.66.12-dev.0

package/src/static/images/Images.stories.tsx

@@ -1,15 +1,17 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
 import Image from "../Image";
 
 const DefaultUserImage = require("../../assets/static/default.user.png");
 
-storiesOf("Static/Images", module).add(
-  "Default User",
-  () => <Image src={DefaultUserImage} alt="test" />,
-  {
+export default {
+  title: "Static/Images",
+};
+
+export const DefaultUser = () => <Image src={DefaultUserImage} alt="test" />;
+
+DefaultUser.story = {
+  parameters: {
     info: `
         Icon component with injected Font Awesome Icon.
       `,
-  }
-);
+  },
+};

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/loader/BlockLoader.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { LoaderIndicator } from "./LoaderIndicator";
 
 export function BlockLoader() {

package/src/static/loader/ButtonLoader.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { LoaderIndicator } from "./LoaderIndicator";
 import ILoaderOptions from "../../types/static/ILoaderOptions";
 

package/src/static/loader/Loader.stories.tsx

@@ -1,5 +1,4 @@
 import { Meta, Story } from "@storybook/react";
-import React from "react";
 import { BlockLoader } from "./BlockLoader";
 import { LoaderIndicator } from "./LoaderIndicator";
 import { ButtonLoader } from "./ButtonLoader";

package/src/static/loader/LoaderIndicator.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-pascal-case */
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 import * as ReactLoader from "react-loader";
 import ILoaderOptions from "../../types/static/ILoaderOptions";
 

package/src/static/loader/PaymentLoader.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { useWindowDimensions } from "@licklist/plugins/dist/hooks/Media/useWindowDimensions";
 import { LoaderIndicator, LoaderIndicatorProps } from "./LoaderIndicator";

package/src/static/loader/SnippetLoader.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { LoaderIndicator } from "./LoaderIndicator";
 
 export function SnippetLoader() {

package/src/static/manual-date-picker/ManualDatePicker.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Form } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { DAYS_ARRAY, MONTHS_ARRAY, YEARS_ARRAY } from "./constants";

package/src/static/manual-date-picker/hooks/useManualDatePicker.ts

@@ -26,7 +26,7 @@ export type UseManualDatePicker = (props: UseManualDatePickerProps) => [
     isChoosedDateValid: () => boolean;
     isRequredSelects: () => boolean;
     fieldErrors: () => string[] | string | undefined;
-  }
+  },
 ];
 
 export const useManualDatePicker: UseManualDatePicker = ({

package/src/static/manual-date-picker/utils/index.ts

@@ -1,7 +1,7 @@
 export const generateDatesArray = (start: number, end: number, step: number) =>
   Array.from(
     { length: (end - start) / step + 1 },
-    (_, index) => 1 + index * step
+    (_, index) => 1 + index * step,
   );
 
 export const generateMonthsOptionsArray = () =>
@@ -21,7 +21,7 @@ export const generateYearsArray = () => {
 
   return Array.from(
     { length: 100 },
-    (_, index) => ageBackYear + index + 1
+    (_, index) => ageBackYear + index + 1,
   ).sort((prevDate, nextDate) => nextDate - prevDate);
 };
 

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

@@ -1,5 +1,5 @@
 import { Meta, Story } from "@storybook/react";
-import React, { useState } from "react";
+import { useState } from "react";
 import { NumberInput } from "./NumberInput";
 
 export default {

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

@@ -1,7 +1,6 @@
 import clsx from "clsx";
-import React from "react";
 import { FormControl } from "react-bootstrap";
-import Icon from "../Icon";
+import { FaChevronDown, FaChevronUp } from "react-icons/fa";
 
 interface NumberInputProps {
   disabled?: boolean;
@@ -64,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"
@@ -72,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/static/switch/BooleanSwitch.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { SelectItem } from "../../types/generic/SelectItem";
 import { Switch } from "./Switch";
@@ -31,7 +31,7 @@ export function BooleanSwitch({
     (value: number) => {
       onChange(Boolean(value));
     },
-    [onChange]
+    [onChange],
   );
 
   return (

package/src/static/switch/Switch.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, Story } from "@storybook/react";
-import React, { useState } from "react";
+import { useState } from "react";
 import { Form } from "react-bootstrap";
 import { Controller, FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";

package/src/static/switch/Switch.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { AnimateSharedLayout, motion } from "framer-motion";
 import { ToggleButton, ToggleButtonGroup } from "react-bootstrap";
 import { useId } from "@react-aria/utils";

package/src/static/tabs/Tab.tsx

@@ -1,5 +1,5 @@
 import { useId } from "@react-aria/utils";
-import React, { FunctionComponent } from "react";
+import { FunctionComponent } from "react";
 import { Tab as BootstrapTab } from "react-bootstrap";
 
 export type TabProps = {

package/src/static/tabs/Tabs.tsx

@@ -1,5 +1,5 @@
 import { useId } from "@react-aria/utils";
-import React, { PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 import {
   Tabs as BootstrapTabs,
   TabsProps as BootstrapTabsProps,

package/src/static/text-expand/TextExpand.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, Story } from "@storybook/react";
-import React, { useState } from "react";
+import { useState } from "react";
 import { TextExpand } from "./TextExpand";
 
 export default {

package/src/static/text-expand/TextExpand.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import React, { PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 import { useTranslation } from "react-i18next";
 
 interface TextExpandProps {
@@ -18,12 +18,12 @@ export function TextExpand({
 
   const contentClasses = clsx(
     isExpanded && "text-expand-wrapper__content--expanded",
-    "text-expand-wrapper__content"
+    "text-expand-wrapper__content",
   );
   const wrapperClasses = clsx(
     isExpanded && "text-expand-wrapper--expanded",
     "text-expand-wrapper",
-    className
+    className,
   );
 
   return (

package/src/striped-static-table/StripedStaticTable.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta, Story } from "@storybook/react";
 import {
   StripedStaticTable,

package/src/striped-static-table/StripedStaticTable.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { StaticTableProps, StaticTable, StaticTableData } from "../table";
 
 export type StripedStaticTableProps = Omit<StaticTableProps, "data"> & {
@@ -45,9 +43,9 @@ export const StripedStaticTable = ({
               }
 
               return [key, value];
-            })
+            }),
           );
-        }) as StaticTableData[]
+        }) as StaticTableData[],
     )
     .flat();
 

package/src/styles/affiliate/AffiliateCard.scss

@@ -27,7 +27,7 @@ $affiliate-card-menu-button-icon-color: adjust-color(
 $affiliate-card-menu-button-icon-color-hover: $affiliate-card-background-color !default;
 $affiliate-card-menu-button-icon-color-container-hover: adjust-color(
   theme-color("primary"),
-  $alpha: -1 / 12
+  $alpha: calc(-1 / 12)
 ) !default;
 $affiliate-card-menu-button-icon-size: sp(4) !default;
 $affiliate-card-menu-button-inset: sp(2) !default;
@@ -44,7 +44,7 @@ $affiliate-card-menu-padding-y: 0 !default;
 
 $affiliate-card-menu-item-text-font-size: sp(3.5) !default;
 $affiliate-card-menu-item-text-font-weight: $font-weight-semibold !default;
-$affiliate-card-menu-item-text-line-height: (24 / 14) !default;
+$affiliate-card-menu-item-text-line-height: calc(24 / 14) !default;
 
 $affiliate-card-menu-icon-margin: sp(8) !default;
 $affiliate-card-menu-icon-size: sp(3.5) !default;

package/src/styles/events/EventCard.scss

@@ -5,7 +5,7 @@ $event-card-contents-inner-gutter: sp(4) !default;
 
 $event-card-title-font-weight: $font-weight-semibold !default;
 $event-card-title-font-size: sp(5) !default;
-$event-card-title-line-height: 4 / 3 !default;
+$event-card-title-line-height: calc(4 / 3) !default;
 
 $event-card-image-container-overflow-top: sp(3) !default;
 $event-card-image-container-overflow-x: sp(3) !default;
@@ -16,7 +16,7 @@ $event-card-date-margin-x: sp(4) !default;
 $event-card-date-margin-y: sp(4) !default;
 
 $event-card-sale-text-font-size: sp(3.5) !default;
-$event-card-sale-text-line-height: 10 / 7 !default;
+$event-card-sale-text-line-height: calc(10 / 7) !default;
 $event-card-sale-text-margin-left: 1px !default;
 $event-card-sale-text-margin-bottom: sp(1.5) !default;
 $event-card-sale-name-color: theme-color("primary") !default;
@@ -97,7 +97,7 @@ $event-card-views-gutter: sp(3) !default;
   &:not(.no-image)::before {
     content: "";
     display: block;
-    padding-bottom: 100% / $event-card-image-container-aspect-ratio;
+    padding-bottom: calc(100% / $event-card-image-container-aspect-ratio);
   }
 
   .card-img-top {

package/src/styles/form/CustomRadio.scss

@@ -0,0 +1,6 @@
+.custom-radio {
+  input[type="radio"] {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+}

package/src/styles/form/_index.scss

@@ -1,3 +1,4 @@
 @import "./InputGroup.scss";
 @import "./Input.scss";
 @import "./CustomCheckbox.scss";
+@import "./CustomRadio.scss";

package/src/styles/iframe-events/Calendar.scss

@@ -48,7 +48,6 @@
         height: 2.25rem;
         width: 14.125rem;
         justify-content: space-between;
-        border: 1px solid $snippet-dropdown-border-color;
         border-radius: $iframe-border-radius;
         transition: $color-transition;
 

package/src/styles/iframe-events/Card.scss

@@ -1,5 +1,5 @@
 @import "../snippet-templates/snippetVariables";
-@import "../themes//bookedit/variables";
+@import "../themes/bookedit/variables";
 
 .iframe-event-card {
   position: relative;

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

@@ -15,7 +15,7 @@ body[bkdt-scrollable="false"] .bkdt-mask {
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 1000000;
+  z-index: 2147483646;
   background-color: rgba(0, 0, 0, 0.5);
   display: none;
 }
@@ -24,7 +24,7 @@ body[bkdt-scrollable="false"] .bkdt-mask {
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 1000001;
+  z-index: 2147483647;
   display: none;
   width: 100%;
   height: 100%;

package/src/styles/overrides/_functions.scss

@@ -1,6 +1,6 @@
-@import "~bootstrap/scss/functions";
+@import "bootstrap/scss/functions";
 
 // size in scalable pixels (0.25rem by default)
 @function sp($value) {
-  @return $value / 4 * $font-size-base;
+  @return calc($value / 4 * $font-size-base);
 }

package/src/styles/product-set/CreateProductSetItem.scss

@@ -17,6 +17,14 @@ $product-set-item-hover-bg-color: #d9efff !default;
   }
 }
 
+.product-set-item-wrapper-zone {
+  color:#84269B;
+  background-color: rgba($color: #84269B, $alpha: 0.1);
+  .product-set-item-icon {
+    background-color: #84269B;
+  }
+}
+
 .product-set-item-wrapper-category {
   color: #1A93AA;
   background-color: rgba($color: #1A93AA, $alpha: 0.1);

package/src/styles/product-set/EditZoneSettingModal.scss

@@ -0,0 +1,16 @@
+.edit-right-form-modal.edit-product-zone {
+    padding: 0;
+    .top-label-container {
+      background-color: #EFE9F5;
+      span {
+        color:#84269B;
+      }
+    }
+    @include media-breakpoint-down(sm) {
+      top: 5%;
+      .step-save-btn {
+        margin-top: 1rem;
+        width: 100%;
+      }
+    }
+  }

package/src/styles/product-set/ProductSetCard.scss

@@ -27,7 +27,7 @@ $product-set-card-menu-button-icon-color: adjust-color(
 $product-set-card-menu-button-icon-color-hover: $product-set-card-background-color !default;
 $product-set-card-menu-button-icon-color-container-hover: adjust-color(
   theme-color("primary"),
-  $alpha: -1 / 12
+  $alpha: calc(-1 / 12)
 ) !default;
 $product-set-card-menu-button-icon-size: sp(4) !default;
 $product-set-card-menu-button-inset: sp(2) !default;
@@ -44,7 +44,7 @@ $product-set-card-menu-padding-y: 0 !default;
 
 $product-set-card-menu-item-text-font-size: sp(3.5) !default;
 $product-set-card-menu-item-text-font-weight: $font-weight-semibold !default;
-$product-set-card-menu-item-text-line-height: (24 / 14) !default;
+$product-set-card-menu-item-text-line-height: calc(24 / 14) !default;
 
 $product-set-card-menu-icon-margin: sp(8) !default;
 $product-set-card-menu-icon-size: sp(3.5) !default;

package/src/styles/product-set/ProductSetForm.scss

@@ -50,7 +50,7 @@
 
   .step-badge,
   .category-badge,
-  .product-badge {
+  .product-badge  {
     font-size: 0.875rem;
     font-weight: 600;
   }
@@ -67,6 +67,8 @@
     background-color: #e9f5ea;
     color: #269b36;
   }
+
+
 }
 
 .product-set-mobile-footer {
@@ -174,3 +176,14 @@
     }
   }
 }
+
+
+.sortable-tree-item-toggle {
+
+  .product-zone-badge {
+    background-color: #EFE9F5;
+    color:#84269B;
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+}

package/src/styles/product-set/_index.scss

@@ -10,4 +10,5 @@
 @import "./EditCategoryModal.scss";
 @import "./EditProductModal.scss";
 @import "./EditVenueMapSetModal";
-@import './SelectCategoryModal.scss'
+@import './SelectCategoryModal.scss';
+@import "./EditZoneSettingModal.scss"

package/src/styles/sales/BookingResults.scss

@@ -5,7 +5,7 @@
     flex-wrap: wrap;
 
     .result-card {
-      height: 14.25rem;
+      height: 14rem;
       border: 1px solid $gray-400;
       max-width: calc(50% - 0.75rem);
       flex: 0 0 calc(50% - 0.75rem);

package/src/styles/sales/SalesAndViews.scss

@@ -1,6 +1,6 @@
-@import "~bootstrap/scss/functions";
-@import "~bootstrap/scss/variables";
-@import "~bootstrap/scss/mixins";
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
 @import "./mixins";
 
 .sales-and-views {
@@ -79,7 +79,8 @@
   font-size: 0.875rem;
   cursor: pointer;
 
-  &:hover, &.active {
+  &:hover,
+  &.active {
     color: $blue;
   }
 }

package/src/styles/snippet-templates/SnippetTemplateCard.scss

@@ -13,7 +13,7 @@ $snippet-template-card-button-icon-color: adjust-color(
 $snippet-template-card-button-icon-color-hover: $product-set-card-background-color !default;
 $snippet-template-card-button-icon-color-container-hover: adjust-color(
   theme-color("primary"),
-  $alpha: -1 / 12
+  $alpha: calc(-1 / 12)
 ) !default;
 $snippet-template-card-button-icon-size: sp(4) !default;
 $snippet-template-card-button-inset: sp(2) !default;

package/src/styles/themes/bookedit/_variables.scss

@@ -296,7 +296,7 @@ $h4-font-size: $font-size-base * 1.5 !default;
 $h5-font-size: $font-size-base * 1.25 !default;
 $h6-font-size: $font-size-base !default;
 
-$headings-margin-bottom: $spacer / 2 !default;
+$headings-margin-bottom: calc($spacer / 2) !default;
 $headings-font-family: null !default;
 $headings-font-weight: 500 !default;
 $headings-line-height: 1.2 !default;
@@ -583,7 +583,9 @@ $custom-radio-indicator-border-radius: 50% !default;
 $custom-radio-indicator-icon-checked: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'><circle r='3' fill='#{$custom-control-indicator-checked-color}'/></svg>") !default;
 
 $custom-switch-width: $custom-control-indicator-size * 1.75 !default;
-$custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default;
+$custom-switch-indicator-border-radius: calc(
+  $custom-control-indicator-size / 2
+) !default;
 $custom-switch-indicator-size: subtract(
   $custom-control-indicator-size,
   $custom-control-indicator-border-width * 4
@@ -735,11 +737,11 @@ $nav-pills-link-active-color: theme-color("primary");
 $nav-pills-link-active-bg: #d9efff;
 
 $nav-divider-color: $gray-200 !default;
-$nav-divider-margin-y: $spacer / 2 !default;
+$nav-divider-margin-y: calc($spacer / 2) !default;
 
 // Navbar
 
-$navbar-padding-y: $spacer / 2 !default;
+$navbar-padding-y: calc($spacer / 2) !default;
 $navbar-padding-x: $spacer !default;
 
 $navbar-nav-link-padding-x: 0.5rem !default;
@@ -748,7 +750,9 @@ $navbar-brand-font-size: $font-size-lg !default;
 // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
 $nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
 $navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
-$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default;
+$navbar-brand-padding-y: calc(
+  ($nav-link-height - $navbar-brand-height) / 2
+) !default;
 
 $navbar-toggler-padding-y: 0.25rem !default;
 $navbar-toggler-padding-x: 0.75rem !default;
@@ -871,7 +875,7 @@ $card-bg: $white !default;
 
 $card-img-overlay-padding: 1.25rem !default;
 
-$card-group-margin: $grid-gutter-width / 2 !default;
+$card-group-margin: calc($grid-gutter-width / 2) !default;
 $card-deck-margin: $card-group-margin !default;
 
 $card-columns-count: 3 !default;
@@ -953,9 +957,9 @@ $toast-header-border-color: rgba(0, 0, 0, 0.05) !default;
 $badge-font-size: 87.5%;
 $badge-font-weight: $font-weight-semibold;
 $badge-padding-y: 0;
-$badge-padding-x: 6em / 7;
-$badge-line-height: (16 / 7);
-$badge-border-radius: 4em / 7;
+$badge-padding-x: calc(6em / 7);
+$badge-line-height: calc(16 / 7);
+$badge-border-radius: calc(4em / 7);
 $badge-letter-spacing: 0.1em;
 
 $badge-transition: $btn-transition !default;

package/src/styles/themes/bookedit/{_index.scss → index.scss}

@@ -5,41 +5,41 @@
 @import "../../overrides/functions";
 @import "./fonts";
 @import "./variables";
-@import "~bootstrap/scss/mixins";
-@import "~bootstrap/scss/root";
-@import "~bootstrap/scss/reboot";
-@import "~bootstrap/scss/type";
-@import "~bootstrap/scss/images";
-@import "~bootstrap/scss/code";
-@import "~bootstrap/scss/grid";
-@import "~bootstrap/scss/tables";
-@import "~bootstrap/scss/forms";
-@import "~bootstrap/scss/buttons";
-@import "~bootstrap/scss/transitions";
-@import "~bootstrap/scss/dropdown";
-@import "~bootstrap/scss/button-group";
-@import "~bootstrap/scss/input-group";
-@import "~bootstrap/scss/custom-forms";
-@import "~bootstrap/scss/nav";
-@import "~bootstrap/scss/navbar";
-@import "~bootstrap/scss/card";
-@import "~bootstrap/scss/breadcrumb";
-@import "~bootstrap/scss/pagination";
-@import "~bootstrap/scss/badge";
-@import "~bootstrap/scss/jumbotron";
-@import "~bootstrap/scss/alert";
-@import "~bootstrap/scss/progress";
-@import "~bootstrap/scss/media";
-@import "~bootstrap/scss/list-group";
-@import "~bootstrap/scss/close";
-@import "~bootstrap/scss/toasts";
-@import "~bootstrap/scss/modal";
-@import "~bootstrap/scss/tooltip";
-@import "~bootstrap/scss/popover";
-@import "~bootstrap/scss/carousel";
-@import "~bootstrap/scss/spinners";
-@import "~bootstrap/scss/utilities";
-@import "~bootstrap/scss/print";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/root";
+@import "bootstrap/scss/reboot";
+@import "bootstrap/scss/type";
+@import "bootstrap/scss/images";
+@import "bootstrap/scss/code";
+@import "bootstrap/scss/grid";
+@import "bootstrap/scss/tables";
+@import "bootstrap/scss/forms";
+@import "bootstrap/scss/buttons";
+@import "bootstrap/scss/transitions";
+@import "bootstrap/scss/dropdown";
+@import "bootstrap/scss/button-group";
+@import "bootstrap/scss/input-group";
+@import "bootstrap/scss/custom-forms";
+@import "bootstrap/scss/nav";
+@import "bootstrap/scss/navbar";
+@import "bootstrap/scss/card";
+@import "bootstrap/scss/breadcrumb";
+@import "bootstrap/scss/pagination";
+@import "bootstrap/scss/badge";
+@import "bootstrap/scss/jumbotron";
+@import "bootstrap/scss/alert";
+@import "bootstrap/scss/progress";
+@import "bootstrap/scss/media";
+@import "bootstrap/scss/list-group";
+@import "bootstrap/scss/close";
+@import "bootstrap/scss/toasts";
+@import "bootstrap/scss/modal";
+@import "bootstrap/scss/tooltip";
+@import "bootstrap/scss/popover";
+@import "bootstrap/scss/carousel";
+@import "bootstrap/scss/spinners";
+@import "bootstrap/scss/utilities";
+@import "bootstrap/scss/print";
 
 @import "../../packages";