@licklist/design 0.53.0-dev.4 → 0.53.0

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

@@ -59,8 +59,7 @@
           color: $snippet-elements-button-color;
           border: none;
           background-color: $snippet-elements-button-background-color;
-          box-shadow: 0 0 0 $input-btn-focus-width
-            $snippet-elements-button-background-color;
+          box-shadow: 0 0 0 $input-btn-focus-width $snippet-elements-button-background-color;
         }
 
         &:disabled {
@@ -73,14 +72,14 @@
       &:focus,
       &.focus {
         &:not(:disabled) {
-          opacity: 0.7;
+          opacity: .7;
         }
       }
 
       &:active,
       &.active {
         &:not(:disabled) {
-          opacity: 0.8;
+          opacity: .8;
         }
       }
     }
@@ -91,7 +90,7 @@
   }
 
   &__label {
-    font-size: 0.8rem;
+    font-size: .8rem;
     margin-top: 1rem;
     margin-bottom: 0.2rem;
   }
@@ -104,8 +103,8 @@
     position: absolute;
     top: 0;
     right: 0;
-    margin-right: 0.5rem;
-    margin-top: 0.5rem;
+    margin-right: .5rem;
+    margin-top: .5rem;
   }
 
   .form-label {
@@ -182,8 +181,7 @@
           color: $snippet-elements-button-color;
           border: none;
           background-color: $snippet-elements-button-background-color;
-          box-shadow: 0 0 0 $input-btn-focus-width
-            $snippet-elements-button-background-color;
+          box-shadow: 0 0 0 $input-btn-focus-width $snippet-elements-button-background-color;
         }
 
         &:disabled {
@@ -196,14 +194,14 @@
       &:focus,
       &.focus {
         &:not(:disabled) {
-          opacity: 0.7;
+          opacity:  .7;
         }
       }
 
       &:active,
       &.active {
         &:not(:disabled) {
-          opacity: 0.8;
+          opacity: .8;
         }
       }
     }
@@ -338,8 +336,7 @@
       }
     }
 
-    .bottom-wrapper,
-    .snippet-template__form {
+    .bottom-wrapper, .snippet-template__form {
       .btn {
         border-radius: 0.25rem;
         width: 100%;
@@ -384,10 +381,6 @@
   }
 }
 
-.disabled-number-input-button {
-  background-color: $snippet-calendar-disabled-button-font-color !important;
-  border-color: $snippet-calendar-disabled-button-font-color !important;
-}
 .color-picker {
   &__color {
     position: absolute;
@@ -449,6 +442,7 @@
       }
     }
   }
+    
 }
 
 @include media-breakpoint-down(xs) {

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

@@ -28,13 +28,12 @@ $snippet-template-card-button-transition: $product-set-card-transition !default;
   border: 1px solid #ccc;
   border-radius: $border-radius;
   height: 10rem;
-  min-width: 15rem;
+  width: 15rem;
   padding: 1rem;
 
   @include media-breakpoint-down(sm) {
     height: 100%;
     max-height: 10rem;
-    width: 100%;
   }
 
   p {
@@ -110,4 +109,4 @@ $snippet-template-card-button-transition: $product-set-card-transition !default;
   &:hover {
     border: 2px solid $blue;
   }
-}
+}

package/src/styles/static/Tabs.scss

@@ -11,12 +11,6 @@ $tab-nav-link-active-border-bottom: 1px solid $tab-nav-link-active-color !defaul
   margin-left: -1.25rem;
   border-bottom: 1px solid $nav-tabs-border-color;
 
-  @include media-breakpoint-down(sm) {
-    display: flex;
-    flex-direction: column;
-    white-space: nowrap;
-  }
-
   .nav-link {
     color: $tab-nav-link-color;
     background-color: transparent;

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

@@ -98,8 +98,7 @@
       color: gray("600");
 
       &.sortable {
-        &::before,
-        &::after {
+        &::before, &::after {
           opacity: 1;
         }
 
@@ -133,20 +132,20 @@
     width: 2.5rem;
     height: 2.5rem;
     background-color: transparent;
-
+  
     svg {
       margin-bottom: 2.5px;
     }
 
     &:hover {
       cursor: pointer;
-      border-radius: 0.5rem;
+      border-radius: .5rem;
       background-color: lighten($primary, 40);
     }
   }
 
   .page-item {
-    margin-left: 0.4rem;
+    margin-left: .4rem;
     min-width: 15px;
     width: 2.5rem;
     height: 2.5rem;
@@ -154,7 +153,7 @@
     .page-link {
       border: 0;
       padding: 0;
-      border-radius: 0.5rem;
+      border-radius: .5rem;
       height: 100%;
       display: flex;
       align-items: center;
@@ -163,13 +162,13 @@
       color: $black;
       font-weight: 600;
       font-size: 0.875rem;
-
+      
       &:hover {
-        border-radius: 0.5rem;
+        border-radius: .5rem;
         background-color: lighten($primary, 40);
       }
     }
-
+    
     &.active {
       .page-link {
         border: 2px solid $primary;

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

@@ -197,7 +197,6 @@ $grid-breakpoints: (
   md: 768px,
   lg: 992px,
   xl: 1200px,
-  xxl: 1500px,
 ) !default;
 
 @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@@ -212,7 +211,6 @@ $container-max-widths: (
   md: 720px,
   lg: 960px,
   xl: 1140px,
-  xxl: 1500px,
 ) !default;
 
 @include _assert-ascending($container-max-widths, "$container-max-widths");

package/dist/events/edit-event-modal/hooks/index.d.ts

@@ -1,3 +0,0 @@
-export * from "./useFormattedDuration";
-export * from "./useValidationOptions";
-//# sourceMappingURL=index.d.ts.map

package/dist/events/edit-event-modal/hooks/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/events/edit-event-modal/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC"}

package/dist/events/edit-event-modal/hooks/useFormattedDuration.d.ts

@@ -1,2 +0,0 @@
-export declare const useFormattedDuration: () => string;
-//# sourceMappingURL=useFormattedDuration.d.ts.map

package/dist/events/edit-event-modal/hooks/useFormattedDuration.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useFormattedDuration.d.ts","sourceRoot":"","sources":["../../../../src/events/edit-event-modal/hooks/useFormattedDuration.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,oBAAoB,cAiChC,CAAC"}

package/dist/events/edit-event-modal/hooks/useFormattedDuration.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("tslib"),r=require("react"),u=((e=r)&&"object"==typeof e&&"default"in e&&e.default,require("react-hook-form")),n=require("luxon"),o=require("react-intl");exports.useFormattedDuration=function(){var e=u.useFormContext().control,a=u.useWatch({control:e,name:"start"}),i=u.useWatch({control:e,name:"end"}),s=o.useIntl(),l=s.formatList,m=s.formatNumber,f=r.useMemo((function(){var e=n.Interval.fromDateTimes(n.DateTime.fromISO(a),n.DateTime.fromISO(i)).toDuration(["days","hours","minutes"]);if(e.isValid){var r=function(e,t){return m(e,{style:"unit",unit:t,unitDisplay:"long"})},u=[[e.days,"day"],[e.hours,"hour"],[e.minutes,"minute"]].filter((function(e){return t.__read(e,1)[0]}));return l(u.map((function(e){return r.apply(void 0,t.__spreadArray([],t.__read(e),!1))})),{style:"long",type:"unit"})}}),[a,i]);return f};

package/dist/events/edit-event-modal/hooks/useValidationOptions.d.ts

@@ -1,11 +0,0 @@
-export declare const useValidationOptions: () => {
-    start: {
-        required: string;
-        validate: (value: any) => string | true;
-    };
-    end: {
-        required: string;
-        validate: (value: any) => string | true;
-    };
-};
-//# sourceMappingURL=useValidationOptions.d.ts.map

package/dist/events/edit-event-modal/hooks/useValidationOptions.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useValidationOptions.d.ts","sourceRoot":"","sources":["../../../../src/events/edit-event-modal/hooks/useValidationOptions.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,oBAAoB;;;;;;;;;CA+BhC,CAAC"}

package/dist/events/edit-event-modal/hooks/useValidationOptions.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react-i18next"),t=require("react-hook-form"),i=require("luxon");exports.useValidationOptions=function(){var r=t.useFormContext().control,a=e.useTranslation(["Design","Validation"]).t,n=t.useWatch({control:r,name:"start"});return{start:{required:a("Validation:fieldRequired",{attribute:a("start")}),validate:function(e){return i.DateTime.fromISO(e).diffNow().toMillis()>0||a("Validation:fieldValidEventStart")}},end:{required:a("Validation:fieldRequired",{attribute:a("end")}),validate:function(e){return!e||(i.DateTime.fromISO(e).diff(i.DateTime.fromISO(n)).toMillis()>0||a("Validation:fieldValidEventEnd"))}}}};

package/src/events/edit-event-modal/hooks/index.ts

@@ -1,2 +0,0 @@
-export * from "./useFormattedDuration";
-export * from "./useValidationOptions";

package/src/events/edit-event-modal/hooks/useFormattedDuration.tsx

@@ -1,40 +0,0 @@
-import { useMemo } from "react";
-import { useFormContext, useWatch } from "react-hook-form";
-import { useIntl } from "react-intl";
-import { DateTime, Interval } from "luxon";
-import { IntervalInputValues } from "../IntervalInput";
-
-export const useFormattedDuration = () => {
-  const { control } = useFormContext<IntervalInputValues>();
-  const start = useWatch({ control, name: "start" });
-  const end = useWatch({ control, name: "end" });
-  const { formatList, formatNumber } = useIntl();
-
-  const duration = useMemo(() => {
-    const interval = Interval.fromDateTimes(
-      DateTime.fromISO(start),
-      DateTime.fromISO(end)
-    ).toDuration(["days", "hours", "minutes"]);
-
-    if (!interval.isValid) return undefined;
-
-    const formatUnit = (value: number, unit: string) =>
-      formatNumber(value, { style: "unit", unit, unitDisplay: "long" });
-
-    const units = (
-      [
-        [interval.days, "day"],
-        [interval.hours, "hour"],
-        [interval.minutes, "minute"],
-      ] as Parameters<typeof formatUnit>[]
-    ).filter(([value]) => value);
-
-    return formatList(
-      units.map((args) => formatUnit(...args)),
-      { style: "long", type: "unit" }
-    );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [start, end]);
-
-  return duration;
-};

package/src/events/edit-event-modal/hooks/useValidationOptions.tsx

@@ -1,36 +0,0 @@
-import { DateTime } from "luxon";
-import { useFormContext, useWatch } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-
-export const useValidationOptions = () => {
-  const { control } = useFormContext();
-  const { t } = useTranslation(["Design", "Validation"]);
-  const start = useWatch({ control, name: "start" });
-
-  return {
-    start: {
-      required: t("Validation:fieldRequired", {
-        attribute: t("start"),
-      }) as string,
-      // TODO: uncomment when event splitting is implemented
-      // and extract into plugins
-      validate: (value) =>
-        DateTime.fromISO(value).diffNow().toMillis() > 0 ||
-        (t("Validation:fieldValidEventStart") as string),
-    },
-
-    end: {
-      required: t("Validation:fieldRequired", {
-        attribute: t("end"),
-      }) as string,
-      // TODO: uncomment when event splitting is implemented
-      // and extract into plugins
-      validate: (value) =>
-        // endAt not required
-        value
-          ? DateTime.fromISO(value).diff(DateTime.fromISO(start)).toMillis() >
-              0 || (t("Validation:fieldValidEventEnd") as string)
-          : true,
-    },
-  };
-};