@licklist/design 0.44.485-dev.79 → 0.44.485-dev.80

package/src/iframe/select-date-time/component/date-container/SelectDateAndTimeEventList.tsx

@@ -1,39 +0,0 @@
-import React from "react";
-import clsx from "clsx";
-import { SelectDateAndTimeEvent } from "./SelectDateAndTimeEvent";
-
-export type EventProductSetsProps = {
-  selectedProductSetId?: number;
-  onSelectProductSet?: (productSetId: number) => void;
-  dateList: any[];
-  title?: string;
-  timeContainer?: boolean;
-};
-
-export const SelectDateAndTimeEventList = ({
-  selectedProductSetId,
-  onSelectProductSet,
-  dateList,
-  title,
-  timeContainer,
-}: EventProductSetsProps) => {
-  return (
-    <>
-      <h5>{title}</h5>
-      <div
-        className={clsx("event-date-list", timeContainer && "time-container")}
-      >
-        {dateList.map((date) => {
-          return (
-            <SelectDateAndTimeEvent
-              key={date.id}
-              date={date}
-              selected={selectedProductSetId === date.id}
-              onSelectProductSet={onSelectProductSet}
-            />
-          );
-        })}
-      </div>
-    </>
-  );
-};

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

@@ -1,85 +0,0 @@
-.event-date-list {
-    display: flex;
-    align-items: center;
-    justify-content: start;
-    grid-gap: 1rem;
-    flex-wrap: wrap;
-
-    .event-date-set {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-        font-size: .82rem;
-        line-height: 1.3rem;
-        font-weight: 600;
-        background-color: $snippet-product-set-background-color;
-        border-radius: .2rem;
-        text-align: center;
-        border: 2px solid $snippet-product-set-border-color;
-        color: $snippet-product-set-font-color;
-        flex-grow: 1;
-        transition: $color-transition;
-        min-width: 6rem;
-        max-width: 7.25rem;
-        min-height: 2.75rem;
-        max-height: 8.375rem;
-
-        &.disabled {
-            border: 2px solid $snippet-product-set-background-color;
-            background-color: $snippet-product-set-background-color;
-            color: $snippet-product-set-font-color;
-            opacity: 0.5;
-
-            .descriptions {
-                color: $snippet-product-set-font-color;
-            }
-        }
-
-        &.selected {
-            border: 2px solid $snippet-active-product-set-border-color;
-            background-color: $snippet-active-product-set-border-color;
-            color: white;
-            transition: $color-transition;
-
-            .descriptions {
-                color: white;
-                font-weight: 600;
-            }
-
-            .time {
-                font-weight: 600;
-            }
-        }
-
-        &.time-container {
-            min-width: 4.175rem;
-            max-width: 4.175rem;
-            height: 2.75rem;
-        }
-    }
-
-    .time {
-        font-size: .875rem;
-        font-weight: 300;
-    }
-
-    .descriptions {
-        font-size: .7rem;
-        line-height: 1.03rem;
-        font-weight: 300;
-        color: #0E8CE2;
-    }
-
-    .info {
-        display: flex;
-        justify-content: center;
-        font-weight: 300;
-        flex-direction: row;
-
-        .logo {
-            width: .5rem;
-            margin-right: .5rem;
-        }
-    }
-}