@licklist/design 0.44.486-dev.9 → 0.44.486

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

@@ -1,71 +0,0 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
-import {
-  StripedStaticTable,
-  StripedStaticTableProps,
-} from "./StripedStaticTable";
-
-export default {
-  title: "StripedStaticTable",
-  component: StripedStaticTable,
-} as Meta;
-
-export const Default: Story<StripedStaticTableProps> = (args) => {
-  return <StripedStaticTable {...args} />;
-};
-
-Default.args = {
-  columns: [
-    { key: "name", label: "" },
-    { key: "quantity", label: "" },
-    { key: "total", label: "" },
-  ],
-  data: [
-    [
-      {
-        key: 1,
-        name: "test category",
-        quantity: "Qty",
-        total: "Total",
-      },
-      {
-        key: 2,
-        name: "product",
-        quantity: "2/16",
-        total: "160",
-      },
-      {
-        key: 4,
-        name: "total per category",
-        quantity: "2/16",
-        total: "160",
-      },
-    ],
-    [
-      {
-        key: 1,
-        name: "test category",
-        quantity: "Qty",
-        total: "Total",
-      },
-      {
-        key: 2,
-        name: "product",
-        quantity: "2/16",
-        total: "160",
-      },
-      {
-        key: 5,
-        name: "product",
-        quantity: "2/16",
-        total: "160",
-      },
-      {
-        key: 4,
-        name: "total per category",
-        quantity: "2/16",
-        total: "160",
-      },
-    ],
-  ],
-};

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

@@ -1,63 +0,0 @@
-import React from "react";
-
-import { StaticTableProps, StaticTable, StaticTableData } from "../table";
-
-export type StripedStaticTableProps = Omit<StaticTableProps, "data"> & {
-  data: StaticTableData[][];
-};
-
-export const StripedStaticTable = ({
-  columns,
-  className = "",
-  data,
-  ...props
-}: StripedStaticTableProps) => {
-  const styledData = data
-    .map(
-      (section) =>
-        section.map((row, rowIndex, array) => {
-          const { length } = array;
-
-          return Object.fromEntries(
-            Object.entries(row).map(([key, value]) => {
-              if (key === "key") {
-                return [key, value];
-              }
-
-              // make first row blue and bold
-              if (rowIndex === 0) {
-                return [
-                  key,
-                  <div key={key} className="bold header-row">
-                    {value}
-                  </div>,
-                ];
-              }
-
-              // make last row bold
-              if (rowIndex === length - 1) {
-                return [
-                  key,
-                  <div key={key} className="bold">
-                    {value}
-                  </div>,
-                ];
-              }
-
-              return [key, value];
-            })
-          );
-        }) as StaticTableData[]
-    )
-    .flat();
-
-  return (
-    <StaticTable
-      columns={columns}
-      data={styledData}
-      className={`striped-static-table ${className}`}
-      displayHeader={false}
-      {...props}
-    />
-  );
-};

package/src/striped-static-table/index.ts

@@ -1 +0,0 @@
-export * from "./StripedStaticTable";

package/src/styles/back-button/BackButton.scss

@@ -1,33 +0,0 @@
-$base-height: 2.5rem;
-
-.button-wrapper {
-    background-color: $snippet-page-header-steps-close-button-background-color;
-    height: $base-height;
-    width: $base-height;
-    border-radius: $base-height;
-    transition: $color-transition;
-
-
-    .back-button {
-      font-size: 2rem;
-      width: $base-height;
-      height: $base-height;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-weight: lighter;
-      color: $snippet-page-header-steps-close-button-border-color;
-      transition: $color-transition;
-
-      &:hover {
-        cursor: pointer;
-      }
-    }
-
-    &.back-button {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-right: 1rem;
-    }
-  }

package/src/styles/back-button/_index.scss

@@ -1 +0,0 @@
-@import "./BackButton.scss";

package/src/styles/customers/Filter.scss

@@ -1,53 +0,0 @@
-.customers-filter {
-  @include media-breakpoint-down(sm) {
-    label {
-      font-size: 0.8rem;
-    }
-  }
-  
-  @include media-breakpoint-up(md) {
-    label {
-      font-size: 0.9rem;
-    }
-  }
-  
-  @include media-breakpoint-up(lg) {
-    label {
-      font-size: 1rem;
-    }
-  }
-
-  @include media-breakpoint-down(lg) {
-    flex-direction: column;
-  }
-
-  .customers-filter-items {
-    width: 100%;
-
-    .customer-filter {
-      flex: 0 0 33.33%;
-      max-width: 33.33%;
-    }
-  
-    @include media-breakpoint-down(xs) {
-      flex-direction: column;
-
-      .customer-filter {
-        flex: 1;
-        max-width: 100%;
-      }
-    }
-
-    @include media-breakpoint-up(sm) {
-      .customer-filter {
-        &:first-child {
-          padding-left: 0;
-        }
-  
-        &:last-child {
-          padding-right: 0;
-        }
-      }
-    }
-  } 
-}

package/src/styles/customers/_index.scss

@@ -1 +0,0 @@
-@import "./Filter.scss";

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

@@ -1,37 +0,0 @@
-@import "../snippet-templates/snippetVariables";
-
-.activity-card {
-  border: 2px solid transparent;
-  transition: $color-transition;
-  color: $snippet-elements-body-color;
-  border-radius: 0.5rem;
-  padding: 0.375rem;
-  min-height: 12.5rem;
-  width: 11.5rem;
-  word-wrap: break-word;
-  background-color: #fff;
-  font-size: 0.8rem;
-  color: $snippet-elements-body-color;
-
-  div {
-    text-align: left;
-  }
-
-  &.active {
-    border: 2px solid #0e8be1;
-  }
-
-  &-image {
-    width: 100%;
-    height: 6.3rem;
-    margin-bottom: 0.5rem;
-    border-radius: 0.3rem;
-  }
-
-  &-title {
-    font-weight: 600;
-    line-height: 1.25rem;
-    cursor: pointer;
-    font-size: 0.875rem;
-  }
-}

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

@@ -1,57 +0,0 @@
-@import "../snippet-templates/snippetVariables";
-
-.list-activity-card {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  cursor: pointer;
-  height: 5rem;
-  border: 2px solid transparent;
-  border: 2px solid transparent;
-  background-color: $snippet-product-set-background-color;
-  color: $snippet-product-set-font-color;
-  transition: $color-transition;
-
-  &.active {
-    border: 2px solid #0e8be1;
-  }
-
-  p {
-    margin-bottom: 0;
-  }
-
-  .description {
-    width: 70%;
-    font-size: 0.81rem;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .title {
-    font-weight: 600;
-    font-size: 0.875rem;
-    line-height: 1.5rem;
-  }
-
-  .image-container {
-    display: flex;
-    justify-content: start;
-    height: 100%;
-
-    .image {
-      display: flex;
-      align-items: start;
-      width: 7rem;
-      height: 4rem;
-      margin-left: 3rem;
-      background-repeat: no-repeat;
-      background-size: cover;
-      background-position: center;
-      border-radius: 0.5rem;
-    }
-  }
-}
-
-.list-activity-card-hr {
-  margin-top: 0;
-}

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

@@ -1,113 +0,0 @@
-.date-time-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  gap: 0.25rem;
-  font-size: 0.82rem;
-  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;
-  transition: $color-transition;
-  min-width: 6rem;
-  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;
-
-    .weekday-info {
-      div:last-child {
-        color: $snippet-calendar-disabled-button-font-color;
-      }
-    }
-
-    .price {
-      color: $snippet-calendar-disabled-button-font-color;
-    }
-  }
-
-  &.selected {
-    border: 2px solid $snippet-calendar-active-button-border-color;
-    background-color: $snippet-calendar-active-button-background-color;
-    color: $snippet-calendar-active-button-font-color;
-    transition: $color-transition;
-
-    .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;
-      transition: $color-transition;
-    }
-
-    .time {
-      font-weight: 600;
-    }
-  }
-
-  &.time-button {
-    min-width: 4.75rem;
-    max-width: 4.75rem;
-    min-height: 2.75rem;
-  }
-
-  &.only-time-container {
-    min-width: 5.3rem;
-    max-width: 5.3rem;
-    min-height: 2.75rem;
-  }
-}
-
-.time {
-  font-size: 0.875rem;
-  font-weight: 300;
-}
-
-.price {
-  font-size: 0.7rem;
-  line-height: 1.03rem;
-  font-weight: 300;
-  color: $snippet-calendar-button-font-color;
-}
-
-.info {
-  display: flex;
-  justify-content: center;
-  font-weight: 300;
-  flex-direction: row;
-
-  .logo {
-    width: 0.5rem;
-    margin-right: 0.5rem;
-  }
-}

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

@@ -1,3 +0,0 @@
-@import "./ActivitiesSelectedCard.scss";
-@import "./ActivitiesCard.scss";
-@import "./DateTimeButton.scss";

package/src/styles/sortable-field/SortableField.scss

@@ -1,21 +0,0 @@
-.sortable-field-list {
-    display: flex;
-
-    .icon-container {
-        margin-right: .8rem;
-        margin-left: .2rem;
-        margin-top: 1rem;
-
-        div {
-            width: 0.75rem;
-            height: 2px;
-            margin-bottom: 2px;
-            background-color: #B5CCDE;
-            border-radius: 1px;
-        }
-    }
-
-    .form-group {
-        width: 80%;
-    }
-}

package/src/styles/sortable-field/_index.scss

@@ -1 +0,0 @@
-@import "./SortableField";

package/src/styles/striped-static-table/_index.scss

@@ -1,33 +0,0 @@
-table.striped-static-table {
-  tbody {
-    tr {
-      border-bottom: 1px solid $gray-500;
-      td {
-        text-transform: capitalize;
-
-        &:nth-child(2),
-        &:nth-child(3) {
-          text-align: right;
-        }
-        &:nth-child(2) {
-          width: 20%;
-        }
-        &:nth-child(3) {
-          width: 35%;
-        }
-      }
-
-      td:has(div.header-row) {
-        background-color: #d8ecf7;
-      }
-
-      &:first-child {
-        border-top: 1px solid $gray-500;
-      }
-    }
-  }
-
-  .bold {
-    font-weight: 600;
-  }
-}