@licklist/design 0.44.485-dev.98 → 0.44.485-dev.99

package/dist/date-time-button/DateContent.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { DateTime } from "luxon";
+import { DateTimeButtonProps } from "./DateTimeButton";
+type DateContentProps = Pick<DateTimeButtonProps, "isDisabled" | "isSelected"> & {
+    date: DateTime;
+};
+export declare const DateContent: ({ date, isDisabled, isSelected, }: DateContentProps) => JSX.Element;
+export {};
+//# sourceMappingURL=DateContent.d.ts.map

package/dist/date-time-button/DateContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateContent.d.ts","sourceRoot":"","sources":["../../src/date-time-button/DateContent.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAEvD,KAAK,gBAAgB,GAAG,IAAI,CAC1B,mBAAmB,EACnB,YAAY,GAAG,YAAY,CAC5B,GAAG;IACF,IAAI,EAAE,QAAQ,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,WAAW,sCAIrB,gBAAgB,gBAyBlB,CAAC"}

package/dist/date-time-button/DateContent.js

@@ -0,0 +1 @@
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("tslib"),r=e(require("react")),i=require("@licklist/core/dist/Config"),a=e(require("clsx")),o=require("@licklist/plugins/dist/utils/formatDate"),s=require("date-fns"),l=require("react-i18next/*");exports.DateContent=function(e){var n=e.date,c=e.isDisabled,d=e.isSelected,u=l.useTranslation("Design").t,f=t.__read(n.toFormat(i.DAY_NUMBER_WITH_MONTH).split(" "),2),m=f[0],D=f[1];return r.createElement("div",{className:"weekday-info"},r.createElement("div",null,s.isToday(n.toJSDate())?u("today"):s.isTomorrow(n.toJSDate())?u("tomorrow"):n.toFormat(i.DAY_OF_WEEK)),r.createElement("div",{className:a("descriptions",d&&"selected",c&&"disabled")},"".concat(o.getDayWithOrdinal(+m)," ").concat(D)))};

package/dist/date-time-button/DateTimeButton.d.ts

@@ -1,12 +1,12 @@
-/// <reference types="react" />
+import { ReactElement } from "react";
 import { DateTime } from "luxon";
-export type DateTimeButtonProps = {
-    date?: DateTime;
-    time?: string;
+export type DateTimeButtonProps<T = DateTime | string> = {
+    date: T;
     isSelected?: boolean;
     isDisabled?: boolean;
-    onSelect: (date: DateTime | string) => void;
+    onSelect: (date: T) => void;
     isOnlyTimeContainer?: boolean;
+    price?: string | number | ReactElement | null;
 };
-export declare const DateTimeButton: ({ date, isDisabled, time, isSelected, onSelect, isOnlyTimeContainer, }: DateTimeButtonProps) => JSX.Element;
+export declare const DateTimeButton: <T extends string | DateTime>({ date, isDisabled, isSelected, onSelect, isOnlyTimeContainer, price, }: DateTimeButtonProps<T>) => JSX.Element;
 //# sourceMappingURL=DateTimeButton.d.ts.map

package/dist/date-time-button/DateTimeButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeButton.d.ts","sourceRoot":"","sources":["../../src/date-time-button/DateTimeButton.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAKjC,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,QAAQ,GAAG,MAAM,KAAK,IAAI,CAAC;IAC5C,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B,CAAC;AAEF,eAAO,MAAM,cAAc,2EAOxB,mBAAmB,gBAoDrB,CAAC"}
+{"version":3,"file":"DateTimeButton.d.ts","sourceRoot":"","sources":["../../src/date-time-button/DateTimeButton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,MAAM,MAAM,mBAAmB,CAAC,CAAC,GAAG,QAAQ,GAAG,MAAM,IAAI;IACvD,IAAI,EAAE,CAAC,CAAC;IACR,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,IAAI,CAAC;CAC/C,CAAC;AAEF,eAAO,MAAM,cAAc,+IA0D1B,CAAC"}

package/dist/date-time-button/DateTimeButton.js

@@ -1 +1 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react")),i=require("@licklist/core/dist/Config"),r=require("react-i18next"),n=e(require("clsx")),a=require("date-fns"),o=function(e){var o=e.date,s=e.isDisabled,l=e.isSelected,d=r.useTranslation("Design").t;return t.createElement(t.Fragment,null,a.isToday(o.toJSDate())?d("today"):a.isTomorrow(o.toJSDate())?d("tomorrow"):o.toFormat(i.DAY_OF_WEEK),t.createElement("div",{className:n("descriptions",l&&"selected",s&&"disabled")},o.toFormat(i.DAY_NUMBER_WITH_MONTH)))};exports.DateTimeButton=function(e){var i=e.date,r=e.isDisabled,a=e.time,s=e.isSelected,l=e.onSelect,d=e.isOnlyTimeContainer,c=function(){r||l(i||a)};return t.createElement("div",{role:"button",onClick:c,onKeyPress:c,className:n("date-time-button",r&&"disabled",s&&"selected",a&&"time-button",d&&"only-time-container"),tabIndex:0},i?t.createElement(o,{date:i,isDisabled:r,isSelected:s}):a)};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react")),n=e(require("clsx")),i=require("./DateContent.js");exports.DateTimeButton=function(e){var r=e.date,a=e.isDisabled,o=e.isSelected,s=e.onSelect,c=e.isOnlyTimeContainer,l=e.price,u="string"==typeof r;return t.createElement("button",{type:"button",onClick:function(){return s(r)},disabled:a,className:n("date-time-button",a&&"disabled",o&&"selected",u&&"time-button",c&&"only-time-container",!u&&"today")},u?r:t.createElement(i.DateContent,{date:r,isDisabled:a,isSelected:o}),l&&t.createElement("div",{className:"price"},l))};

package/dist/styles/iframe-customers-journey/DateTimeButton.scss

@@ -3,27 +3,50 @@
   align-items: center;
   justify-content: center;
   flex-direction: column;
+  gap: 0.25rem;
   font-size: 0.82rem;
-  line-height: 1.3rem;
-  font-weight: 600;
   background-color: $snippet-calendar-button-background-color;
   border-radius: 0.4rem;
   text-align: center;
   border: 2px solid $snippet-calendar-button-border-color;
   color: $snippet-calendar-button-font-color;
-  flex-grow: 1;
   transition: $color-transition;
   min-width: 6rem;
-  max-width: 7.25rem;
-  min-height: 3.3rem;
-  max-height: 8.375rem;
+  min-height: 3rem;
+  max-width: max-content;
+  padding: 0.5rem;
+
+  .weekday-info {
+    div:first-child {
+      text-transform: uppercase;
+      font-weight: 600;
+    }
+
+    div:last-child {
+      color: $snippet-calendar-active-button-background-color;
+    }
+  }
+
+  .descriptions {
+    font-size: 0.7rem;
+  }
+
+  &.today:first-of-type {
+    min-width: 7.5rem;
+  }
 
   &.disabled {
     border: 2px solid $snippet-calendar-disabled-button-border-color;
     background-color: $snippet-calendar-disabled-button-background-color;
     color: $snippet-calendar-disabled-button-font-color;
 
-    .descriptions {
+    .weekday-info {
+      div:last-child {
+        color: $snippet-calendar-disabled-button-font-color;
+      }
+    }
+
+    .price {
       color: $snippet-calendar-disabled-button-font-color;
     }
   }
@@ -34,7 +57,13 @@
     color: $snippet-calendar-active-button-font-color;
     transition: $color-transition;
 
-    .descriptions {
+    .weekday-info {
+      div:last-child {
+        color: $snippet-calendar-active-button-font-color;
+      }
+    }
+
+    .price {
       color: $snippet-calendar-active-button-font-color;
       background-color: $snippet-calendar-active-button-background-color;
       font-weight: 600;
@@ -64,7 +93,7 @@
   font-weight: 300;
 }
 
-.descriptions {
+.price {
   font-size: 0.7rem;
   line-height: 1.03rem;
   font-weight: 300;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.44.485-dev.98",
+  "version": "0.44.485-dev.99",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"

package/src/date-time-button/DateContent.tsx

@@ -0,0 +1,46 @@
+import { DAY_OF_WEEK, DAY_NUMBER_WITH_MONTH } from "@licklist/core/dist/Config";
+import { getDayWithOrdinal } from "@licklist/plugins/dist/utils/formatDate";
+import clsx from "clsx";
+import { isToday, isTomorrow } from "date-fns";
+import { DateTime } from "luxon";
+import React from "react";
+import { useTranslation } from "react-i18next/*";
+import { DateTimeButtonProps } from "./DateTimeButton";
+
+type DateContentProps = Pick<
+  DateTimeButtonProps,
+  "isDisabled" | "isSelected"
+> & {
+  date: DateTime;
+};
+
+export const DateContent = ({
+  date,
+  isDisabled,
+  isSelected,
+}: DateContentProps) => {
+  const { t } = useTranslation("Design");
+
+  const getDate = () => {
+    if (isToday(date.toJSDate())) return t("today");
+    if (isTomorrow(date.toJSDate())) return t("tomorrow");
+    return date.toFormat(DAY_OF_WEEK);
+  };
+
+  const [day, month] = date.toFormat(DAY_NUMBER_WITH_MONTH).split(" ");
+
+  return (
+    <div className="weekday-info">
+      <div>{getDate()}</div>
+      <div
+        className={clsx(
+          "descriptions",
+          isSelected && "selected",
+          isDisabled && "disabled"
+        )}
+      >
+        {`${getDayWithOrdinal(+day)} ${month}`}
+      </div>
+    </div>
+  );
+};

package/src/date-time-button/DateTimeButton.stories.tsx

@@ -48,11 +48,10 @@ export const Time: Story<DateTimeButtonProps> = (args) => {
 };
 
 Time.args = {
-  date,
+  date: "10:10",
   isSelected: false,
   isDisabled: true,
   onSelect: () => null,
-  isTimeButton: true,
 };
 
 export const OnlyTime: Story<DateTimeButtonProps> = (args) => {
@@ -60,9 +59,22 @@ export const OnlyTime: Story<DateTimeButtonProps> = (args) => {
 };
 
 OnlyTime.args = {
-  date,
+  date: "10:10",
   isSelected: false,
   isDisabled: true,
   onSelect: () => null,
   isOnlyTimeContainer: true,
 };
+
+export const WithPrice: Story<DateTimeButtonProps> = (args) => {
+  return <DateTimeButton {...args} />;
+};
+
+WithPrice.args = {
+  date,
+  isSelected: false,
+  isDisabled: false,
+  onSelect: () => null,
+  isOnlyTimeContainer: false,
+  price: "from $8000",
+};

package/src/date-time-button/DateTimeButton.tsx

@@ -1,32 +1,25 @@
-import React from "react";
+import React, { ReactElement } from "react";
 import clsx from "clsx";
 import { DateTime } from "luxon";
-import { DAY_NUMBER_WITH_MONTH, DAY_OF_WEEK } from "@licklist/core/dist/Config";
-import { useTranslation } from "react-i18next";
-import { isToday, isTomorrow } from "date-fns";
+import { DateContent } from "./DateContent";
 
-export type DateTimeButtonProps = {
-  date?: DateTime;
-  time?: string;
+export type DateTimeButtonProps<T = DateTime | string> = {
+  date: T;
   isSelected?: boolean;
   isDisabled?: boolean;
-  onSelect: (date: DateTime | string) => void;
+  onSelect: (date: T) => void;
   isOnlyTimeContainer?: boolean;
+  price?: string | number | ReactElement | null;
 };
 
-export const DateTimeButton = ({
+export const DateTimeButton = <T extends DateTime | string>({
   date,
   isDisabled,
-  time,
   isSelected,
   onSelect,
   isOnlyTimeContainer,
-}: DateTimeButtonProps) => {
-  const onClick = () => {
-    if (isDisabled) return;
-    onSelect(date || time);
-  };
-
+  price,
+}: DateTimeButtonProps<T>) => {
   // const infoLogo = useMemo(() => {
   //   if (info?.logo === infoLogoType.LIMIT) {
   //     return <LimitedSvg />;
@@ -40,67 +33,41 @@ export const DateTimeButton = ({
   //   return null;
   // }, [info]);
 
+  const isTimeVariant = typeof date === "string";
+
   return (
-    <div
-      role="button"
-      onClick={onClick}
-      onKeyPress={onClick}
+    <button
+      type="button"
+      onClick={() => onSelect(date)}
+      disabled={isDisabled}
       className={clsx(
         "date-time-button",
         isDisabled && "disabled",
         isSelected && "selected",
-        time && "time-button",
-        isOnlyTimeContainer && "only-time-container"
+        isTimeVariant && "time-button",
+        isOnlyTimeContainer && "only-time-container",
+        !isTimeVariant && "today"
       )}
-      tabIndex={0}
     >
-      {date ? (
+      {isTimeVariant ? (
+        date
+      ) : (
         <DateContent
           date={date}
           isDisabled={isDisabled}
           isSelected={isSelected}
         />
-      ) : (
-        time
       )}
 
-      {/* TODO fix info props */}
+      {price && <div className="price">{price}</div>}
+
+      {/* TODO uncomment when adding availability */}
       {/* {info && (
         <div className="info">
           {info.logo && <Logo className="logo" logo={infoLogo} />}
           <div>{info.description}</div>
         </div>
       )} */}
-    </div>
-  );
-};
-
-const DateContent = ({
-  date,
-  isDisabled,
-  isSelected,
-}: Pick<DateTimeButtonProps, "date" | "isDisabled" | "isSelected">) => {
-  const { t } = useTranslation("Design");
-
-  const getDate = () => {
-    if (isToday(date.toJSDate())) return t("today");
-    if (isTomorrow(date.toJSDate())) return t("tomorrow");
-    return date.toFormat(DAY_OF_WEEK);
-  };
-
-  return (
-    <>
-      {getDate()}
-      <div
-        className={clsx(
-          "descriptions",
-          isSelected && "selected",
-          isDisabled && "disabled"
-        )}
-      >
-        {/* TODO add ordinal to date format */}
-        {date.toFormat(DAY_NUMBER_WITH_MONTH)}
-      </div>
-    </>
+    </button>
   );
 };

package/src/styles/iframe-customers-journey/DateTimeButton.scss

@@ -3,27 +3,50 @@
   align-items: center;
   justify-content: center;
   flex-direction: column;
+  gap: 0.25rem;
   font-size: 0.82rem;
-  line-height: 1.3rem;
-  font-weight: 600;
   background-color: $snippet-calendar-button-background-color;
   border-radius: 0.4rem;
   text-align: center;
   border: 2px solid $snippet-calendar-button-border-color;
   color: $snippet-calendar-button-font-color;
-  flex-grow: 1;
   transition: $color-transition;
   min-width: 6rem;
-  max-width: 7.25rem;
-  min-height: 3.3rem;
-  max-height: 8.375rem;
+  min-height: 3rem;
+  max-width: max-content;
+  padding: 0.5rem;
+
+  .weekday-info {
+    div:first-child {
+      text-transform: uppercase;
+      font-weight: 600;
+    }
+
+    div:last-child {
+      color: $snippet-calendar-active-button-background-color;
+    }
+  }
+
+  .descriptions {
+    font-size: 0.7rem;
+  }
+
+  &.today:first-of-type {
+    min-width: 7.5rem;
+  }
 
   &.disabled {
     border: 2px solid $snippet-calendar-disabled-button-border-color;
     background-color: $snippet-calendar-disabled-button-background-color;
     color: $snippet-calendar-disabled-button-font-color;
 
-    .descriptions {
+    .weekday-info {
+      div:last-child {
+        color: $snippet-calendar-disabled-button-font-color;
+      }
+    }
+
+    .price {
       color: $snippet-calendar-disabled-button-font-color;
     }
   }
@@ -34,7 +57,13 @@
     color: $snippet-calendar-active-button-font-color;
     transition: $color-transition;
 
-    .descriptions {
+    .weekday-info {
+      div:last-child {
+        color: $snippet-calendar-active-button-font-color;
+      }
+    }
+
+    .price {
       color: $snippet-calendar-active-button-font-color;
       background-color: $snippet-calendar-active-button-background-color;
       font-weight: 600;
@@ -64,7 +93,7 @@
   font-weight: 300;
 }
 
-.descriptions {
+.price {
   font-size: 0.7rem;
   line-height: 1.03rem;
   font-weight: 300;