@licklist/design 0.44.551-dev.8 → 0.45.0-dev.0

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

@@ -1,44 +0,0 @@
-import clsx from "clsx";
-import React, { PropsWithChildren } from "react";
-import { useTranslation } from "react-i18next";
-
-interface TextExpandProps {
-  className?: string;
-  isExpanded: boolean;
-  setIsExpanded: (expanded: boolean) => void;
-}
-
-export function TextExpand({
-  children,
-  className = "",
-  isExpanded,
-  setIsExpanded,
-}: PropsWithChildren<TextExpandProps>) {
-  const { t } = useTranslation("Design");
-
-  const contentClasses = clsx(
-    isExpanded && "text-expand-wrapper__content--expanded",
-    "text-expand-wrapper__content"
-  );
-  const wrapperClasses = clsx(
-    isExpanded && "text-expand-wrapper--expanded",
-    "text-expand-wrapper",
-    className
-  );
-
-  return (
-    <div className={wrapperClasses}>
-      <div className="text-expand-container">
-        <div className={contentClasses}>{children}</div>
-      </div>
-
-      <button
-        type="button"
-        className="text-expand-wrapper__expand-btn"
-        onClick={() => setIsExpanded(!isExpanded)}
-      >
-        {isExpanded ? t("readLess") : t("readMore")}
-      </button>
-    </div>
-  );
-}

package/src/static/text-expand/index.ts

@@ -1 +0,0 @@
-export { TextExpand } from "./TextExpand";

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/activity-card/GridActivitiesCard.scss

@@ -1,29 +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;
-  width: 11.5rem;
-  word-wrap: break-word;
-  background-color: #fff;
-  font-size: 0.8rem;
-  background-color: $snippet-product-set-background-color;
-
-  div {
-    text-align: left;
-  }
-
-  &.active {
-    border: 2px solid #0e8be1;
-  }
-
-  &-title {
-    font-weight: 600;
-    line-height: 1.25rem;
-    cursor: pointer;
-    font-size: 0.875rem;
-  }
-}

package/src/styles/activity-card/ListActivitiesCard.scss

@@ -1,58 +0,0 @@
-@import "../snippet-templates/snippetVariables";
-
-.list-activity-card {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  cursor: pointer;
-  height: 5rem;
-  padding: 0.375rem;
-  border: 2px solid transparent;
-  border-radius: 0.5rem;
-  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/activity-card/_index.scss

@@ -1,2 +0,0 @@
-@import "./GridActivitiesCard.scss";
-@import "./ListActivitiesCard.scss";

package/src/styles/affiliate/AffiliateCard.scss

@@ -1,179 +0,0 @@
-$affiliate-card-background-color: color("white") !default;
-$affiliate-card-box-shadow-focus: $btn-focus-box-shadow !default;
-$affiliate-card-transition: $btn-transition !default;
-
-$affiliate-card-link-background-color: $affiliate-card-background-color !default;
-$affiliate-card-link-background-color-hover: theme-color-level("primary", -10.5) !default;
-$affiliate-card-link-box-shadow-focus: $affiliate-card-box-shadow-focus !default;
-$affiliate-card-link-padding-x: sp(10) !default;
-$affiliate-card-link-padding-y: sp(10) !default;
-$affiliate-card-link-text-color: $black !default;
-$affiliate-card-link-text-color-hover: theme-color("primary") !default;
-$affiliate-card-link-text-font-weight: $font-weight-normal !default;
-$affiliate-card-link-transition: $affiliate-card-transition !default;
-
-$affiliate-card-menu-button-background-color-hover: theme-color("primary") !default;
-$affiliate-card-menu-button-border-radius: $border-radius !default;
-$affiliate-card-menu-button-box-shadow-focus: $affiliate-card-box-shadow-focus !default;
-$affiliate-card-menu-button-icon-color: adjust-color(theme-color("primary"), $alpha: -1/3) !default;
-$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) !default;
-$affiliate-card-menu-button-icon-size: sp(4) !default;
-$affiliate-card-menu-button-inset: sp(2) !default;
-$affiliate-card-menu-button-size: sp(8) !default;
-$affiliate-card-menu-button-transition: $affiliate-card-transition !default;
-
-$affiliate-card-popover-border-radius: $border-radius !default;
-$affiliate-card-popover-box-shadow-filter: drop-shadow(
-  0px 4px 40px rgba(0, 0, 0, 0.1)
-) !default; // would be nice to have it standardized in design somewhere
-
-$affiliate-card-menu-padding-x: sp(3) !default;
-$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-icon-margin: sp(8) !default;
-$affiliate-card-menu-icon-size: sp(3.5) !default;
-
-.disabled-div {
-  pointer-events: none !important;
-}
-
-.grey-text {
-  color: $gray-500;
-}
-
-.affiliate-card-wrapper {
-  padding-left: 2rem;
-  padding-right: 2rem;
-  background-color: $affiliate-card-link-background-color;
-
-  .arrow {
-    border: 1px solid red !important;
-  }
-
-  &:hover {
-    cursor: pointer;
-    background-color: $affiliate-card-link-background-color-hover;
-
-    .affiliate-card-menu-eye-container {
-      display: flex !important;
-      visibility: visible !important;
-    }
-  }
-
-  .affilates-statistic {
-    text-align: center;
-    width: 6rem;
-    color: $gray-500;
-  }
-  .affiliate-card {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 3.4rem;
-    transition: $affiliate-card-link-transition;
-    border-bottom: 2px solid #f2f2f2;
-
-    a {
-      color: $affiliate-card-link-text-color;
-      font-size: 1rem;
-      font-weight: $affiliate-card-link-text-font-weight;
-
-      &:hover {
-        color: $affiliate-card-link-text-color-hover;
-        text-decoration: none;
-      }
-    }
-
-    &:focus {
-      outline: 0;
-      box-shadow: $affiliate-card-link-box-shadow-focus;
-    }
-
-    .affiliate-card-menu-eye-container {
-      visibility: hidden;
-      justify-content: center;
-      align-items: center;
-      border-radius: 4px;
-      background-color: $affiliate-card-background-color;
-      width: 2rem;
-      height: 2rem;
-      margin-right: 0.8rem;
-    }
-
-    .affiliate-card-menu-button {
-      padding: 0;
-      border: none;
-      background: transparent;
-      color: $affiliate-card-menu-button-icon-color;
-      top: $affiliate-card-menu-button-inset;
-      right: $affiliate-card-menu-button-inset;
-      height: $affiliate-card-menu-button-size;
-      width: $affiliate-card-menu-button-size;
-      border-radius: $affiliate-card-menu-button-border-radius;
-      transition: $affiliate-card-menu-button-transition;
-      z-index: 10;
-
-      &:hover {
-        background-color: $affiliate-card-menu-button-background-color-hover;
-        color: $affiliate-card-menu-button-icon-color-hover;
-      }
-
-      &:focus {
-        outline: 0;
-        box-shadow: $affiliate-card-menu-button-box-shadow-focus;
-      }
-
-      > svg {
-        height: $affiliate-card-menu-button-icon-size;
-      }
-    }
-  }
-
-  .affiliate-card-link:hover ~ .affiliate-card-menu-button {
-    color: $affiliate-card-menu-button-icon-color-container-hover;
-  }
-}
-
-.affiliate-card-popover {
-  border-radius: $affiliate-card-popover-border-radius;
-  border: none;
-  filter: $affiliate-card-popover-box-shadow-filter;
-
-  .affiliate-card-menu {
-    padding: $affiliate-card-menu-padding-x $affiliate-card-menu-padding-y;
-    border-radius: $affiliate-card-popover-border-radius;
-
-    .list-group-item {
-      display: flex;
-      align-items: center;
-      border: none;
-      padding: 0;
-
-      button.affiliate-card-menu-item-text {
-        border: none;
-        background-color: transparent;
-        color: inherit;
-        padding: 0.75rem 1.5rem;
-      }
-
-      .affiliate-card-menu-item-text {
-        font-weight: $affiliate-card-menu-item-text-font-weight;
-        font-size: $affiliate-card-menu-item-text-font-size;
-        line-height: $affiliate-card-menu-item-text-line-height;
-      }
-
-      > svg {
-        height: $affiliate-card-menu-icon-size;
-        margin-left: $affiliate-card-menu-icon-margin;
-      }
-    }
-  }
-}
-
-$snippet-template-card-background-color: color("red") !default;
-$snippet-template-card-border: 1px solid red;

package/src/styles/affiliate/AffiliateForm.scss

@@ -1,34 +0,0 @@
-.affiliate-control {
-  margin-top: 4.6rem;
-  input {
-    border-radius: 0.5rem;
-  }
-}
-
-.target-link-container {
-  margin-bottom: 2.5rem;
-}
-
-.button-container {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.affiliate-save-btn:disabled {
-  background-color: #fafafa;
-  border: none;
-  color: #b1b1b1;
-}
-
-@include media-breakpoint-down(sm) {
-  .affiliate-save-btn-wrapper {
-    padding-left: 0 !important;
-    display: flex;
-    justify-content: center;
-
-    .affiliate-save-btn {
-      width: 80%;
-      margin-left: 0 !important;
-    }
-  }
-}

package/src/styles/affiliate/_index.scss

@@ -1,2 +0,0 @@
-@import "./AffiliateCard.scss";
-@import "./AffiliateForm.scss";

package/src/styles/auth/AccessDenied.scss

@@ -1,11 +0,0 @@
-.access-denied {
-  .icon-wrapper {
-    svg {
-      color: $gray-500;
-    }
-  }
-
-  h6 {
-    color: $gray-600;
-  }
-}

package/src/styles/auth/_index.scss

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

package/src/styles/availability-indicator/AvailabilityIndicator.scss

@@ -1,7 +0,0 @@
-.availability-indicator {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 0.5rem;
-  font-weight: 300;
-}

package/src/styles/availability-indicator/_index.scss

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

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/company-user-form/UserForm.scss

@@ -1,65 +0,0 @@
-.company-user-form {
-  .roles-form-group {
-    .roles-wrapper {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 1.5rem;
-
-      .role {
-        width: 20rem;
-        height: 12.5rem;
-        border: 1px solid rgba(14, 140, 226, 0.2);
-        border-radius: 1rem;
-        background-color: white;
-        padding: 1.5rem 1.5rem 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        flex-direction: column;
-
-        .label {
-          font-weight: 600;
-          margin-bottom: 4px;
-        }
-
-        .brand-logo-container {
-          margin-bottom: 1rem;
-        }
-
-        .description {
-          text-align: center;
-          color: #878787;
-        }
-
-        &.active {
-          color: #0E8CE2;
-          background: linear-gradient(149.72deg, #D9EFFF 50.04%, #E9F4FE 107.75%);
-
-          svg path {
-            stroke: #0E8CE2;
-          }
-        }
-      }
-    }
-
-    &.is-invalid {
-      .invalid-feedback {
-        display: block;
-      }
-    }
-  }
-}
-
-@include media-breakpoint-down(xs) {
-  .company-user-form {
-    .roles-form-group {
-      .roles-wrapper {
-        .role {
-          width: 100%;
-        }
-      }
-    }
-  }
-}
-

package/src/styles/company-user-form/_index.scss

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

package/src/styles/custom-fields/CreateSortableListItem.scss

@@ -1,29 +0,0 @@
- 
-$sortable-list-item-hover-bg-color: #d9efff !default;
-
-.sortable-list-item-wrapper {
-  display: flex;
-  text-decoration: none;
-  align-items: center;
-  text-align: start;
-  font-weight: $font-weight-semibold;
-  color: $black;
-  justify-content: space-between;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  width: calc(100% - 0.7rem);
-  margin-left: 0.7rem;
-  border: 1px dashed #afc1d9;
-  padding: 0.5rem 1rem;
-  background-color: colors("white");
-  transition: background-color 0.1s ease-in-out;
-
-  .sortable-list-item-icon {
-    border: 1px solid theme-color("primary");
-    color: theme-color("primary");
-  }
-
-  &:hover {
-    background-color: $sortable-list-item-hover-bg-color;
-  }
-}

package/src/styles/custom-fields/FieldItem.scss

@@ -1,33 +0,0 @@
-.custom-field-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  min-width: 5rem;
-  padding: 1rem 0.5rem;
-  cursor: pointer;
-  border-radius: 0.3rem;
-
-  & svg {
-    margin-bottom: 1rem;
-    color: $blue;
-  }
-
-  & h6 {
-    color: $blue;
-    padding-bottom: 0;
-    margin-bottom: 0;
-  }
-
-  &:hover {
-    background-color: lighten($blue, 45);
-  }
-}
-
-.dropdown-option {
-  display: flex;
-  justify-content: space-between;
-
-  .input {
-    width: 100%;
-  }
-}

package/src/styles/custom-fields/SelectFieldModal.scss

@@ -1,2 +0,0 @@
-.select-field-header {
-}