@trafilea/afrodita-components 2.2.0 → 2.3.3

package/build/index.css

@@ -1,324 +1,269 @@
 /* Slider */
-.slick-slider
-{
-    position: relative;
+.slick-slider {
+  position: relative;
 
-    display: block;
-    box-sizing: border-box;
+  display: block;
+  box-sizing: border-box;
 
-    -webkit-user-select: none;
-       -moz-user-select: none;
-        -ms-user-select: none;
-            user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 
-    -webkit-touch-callout: none;
-    -khtml-user-select: none;
-    -ms-touch-action: pan-y;
-        touch-action: pan-y;
-    -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  -khtml-user-select: none;
+  -ms-touch-action: pan-y;
+  touch-action: pan-y;
+  -webkit-tap-highlight-color: transparent;
 }
 
-.slick-list
-{
-    position: relative;
+.slick-list {
+  position: relative;
 
-    display: block;
-    overflow: hidden;
+  display: block;
+  overflow: hidden;
 
-    margin: 0;
-    padding: 0;
+  margin: 0;
+  padding: 0;
 }
-.slick-list:focus
-{
-    outline: none;
+.slick-list:focus {
+  outline: none;
 }
-.slick-list.dragging
-{
-    cursor: pointer;
-    cursor: hand;
+.slick-list.dragging {
+  cursor: pointer;
+  cursor: hand;
 }
 
 .slick-slider .slick-track,
-.slick-slider .slick-list
-{
-    -webkit-transform: translate3d(0, 0, 0);
-       -moz-transform: translate3d(0, 0, 0);
-        -ms-transform: translate3d(0, 0, 0);
-         -o-transform: translate3d(0, 0, 0);
-            transform: translate3d(0, 0, 0);
+.slick-slider .slick-list {
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  -ms-transform: translate3d(0, 0, 0);
+  -o-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
 }
 
-.slick-track
-{
-    position: relative;
-    top: 0;
-    left: 0;
+.slick-track {
+  position: relative;
+  top: 0;
+  left: 0;
 
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
 }
 .slick-track:before,
-.slick-track:after
-{
-    display: table;
+.slick-track:after {
+  display: table;
 
-    content: '';
+  content: '';
 }
-.slick-track:after
-{
-    clear: both;
+.slick-track:after {
+  clear: both;
 }
-.slick-loading .slick-track
-{
-    visibility: hidden;
+.slick-loading .slick-track {
+  visibility: hidden;
 }
 
-.slick-slide
-{
-    display: none;
-    float: left;
+.slick-slide {
+  display: none;
+  float: left;
 
-    height: 100%;
-    min-height: 1px;
+  height: 100%;
+  min-height: 0.063rem;
 }
-[dir='rtl'] .slick-slide
-{
-    float: right;
+[dir='rtl'] .slick-slide {
+  float: right;
 }
-.slick-slide img
-{
-    display: block;
+.slick-slide img {
+  display: block;
 }
-.slick-slide.slick-loading img
-{
-    display: none;
+.slick-slide.slick-loading img {
+  display: none;
 }
-.slick-slide.dragging img
-{
-    pointer-events: none;
+.slick-slide.dragging img {
+  pointer-events: none;
 }
-.slick-initialized .slick-slide
-{
-    display: block;
+.slick-initialized .slick-slide {
+  display: block;
 }
-.slick-loading .slick-slide
-{
-    visibility: hidden;
+.slick-loading .slick-slide {
+  visibility: hidden;
 }
-.slick-vertical .slick-slide
-{
-    display: block;
+.slick-vertical .slick-slide {
+  display: block;
 
-    height: auto;
+  height: auto;
 
-    border: 1px solid transparent;
+  border: 0.063rem solid transparent;
 }
 .slick-arrow.slick-hidden {
-    display: none;
+  display: none;
 }
 
-@charset 'UTF-8';
-/* Slider */
-.slick-loading .slick-list
-{
-    background: #fff url('./ajax-loader.gif') center center no-repeat;
-}
-
-/* Icons */
-@font-face
-{
-    font-family: 'slick';
-    font-weight: normal;
-    font-style: normal;
-
-    src: url('./fonts/slick.eot');
-    src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
-}
 /* Arrows */
 .slick-prev,
-.slick-next
-{
-    font-size: 0;
-    line-height: 0;
+.slick-next {
+  font-size: 0;
+  line-height: 0;
 
-    position: absolute;
-    top: 50%;
+  position: absolute;
+  top: 50%;
 
-    display: block;
+  display: block;
 
-    width: 20px;
-    height: 20px;
-    padding: 0;
-    -webkit-transform: translate(0, -50%);
-    -ms-transform: translate(0, -50%);
-    transform: translate(0, -50%);
+  width: 1.25rem;
+  height: 1.25rem;
+  padding: 0;
+  -webkit-transform: translate(0, -50%);
+  -ms-transform: translate(0, -50%);
+  transform: translate(0, -50%);
 
-    cursor: pointer;
+  cursor: pointer;
 
-    color: transparent;
-    border: none;
-    outline: none;
-    background: transparent;
+  color: transparent;
+  border: none;
+  outline: none;
+  background: transparent;
 }
 .slick-prev:hover,
 .slick-prev:focus,
 .slick-next:hover,
-.slick-next:focus
-{
-    color: transparent;
-    outline: none;
-    background: transparent;
+.slick-next:focus {
+  color: transparent;
+  outline: none;
+  background: transparent;
 }
 .slick-prev:hover:before,
 .slick-prev:focus:before,
 .slick-next:hover:before,
-.slick-next:focus:before
-{
-    opacity: 1;
+.slick-next:focus:before {
+  opacity: 1;
 }
 .slick-prev.slick-disabled:before,
-.slick-next.slick-disabled:before
-{
-    opacity: .25;
+.slick-next.slick-disabled:before {
+  opacity: 0.25;
 }
 
 .slick-prev:before,
-.slick-next:before
-{
-    font-family: 'slick';
-    font-size: 20px;
-    line-height: 1;
+.slick-next:before {
+  font-family: 'slick';
+  font-size: 1.25rem;
+  line-height: 1;
 
-    opacity: .75;
-    color: white;
+  opacity: 0.75;
+  color: white;
 
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-.slick-prev
-{
-    left: -25px;
+.slick-prev {
+  left: -1.5rem;
 }
-[dir='rtl'] .slick-prev
-{
-    right: -25px;
-    left: auto;
+[dir='rtl'] .slick-prev {
+  right: -1.5rem;
+  left: auto;
 }
-.slick-prev:before
-{
-    content: '←';
+.slick-prev:before {
+  content: '←';
 }
-[dir='rtl'] .slick-prev:before
-{
-    content: '→';
+[dir='rtl'] .slick-prev:before {
+  content: '→';
 }
 
-.slick-next
-{
-    right: -25px;
+.slick-next {
+  right: -1.5rem;
 }
-[dir='rtl'] .slick-next
-{
-    right: auto;
-    left: -25px;
+[dir='rtl'] .slick-next {
+  right: auto;
+  left: -1.5rem;
 }
-.slick-next:before
-{
-    content: '→';
+.slick-next:before {
+  content: '→';
 }
-[dir='rtl'] .slick-next:before
-{
-    content: '←';
+[dir='rtl'] .slick-next:before {
+  content: '←';
 }
 
 /* Dots */
-.slick-dotted.slick-slider
-{
-    margin-bottom: 30px;
+.slick-dotted.slick-slider {
+  margin-bottom: 1.875rem;
 }
 
-.slick-dots
-{
-    position: absolute;
-    bottom: -25px;
+.slick-dots {
+  position: absolute;
+  bottom: -1.5rem;
 
-    display: block;
+  display: block;
 
-    width: 100%;
-    padding: 0;
-    margin: 0;
+  width: 100%;
+  padding: 0;
+  margin: 0;
 
-    list-style: none;
+  list-style: none;
 
-    text-align: center;
+  text-align: center;
 }
-.slick-dots li
-{
-    position: relative;
+.slick-dots li {
+  position: relative;
 
-    display: inline-block;
+  display: inline-block;
 
-    width: 20px;
-    height: 20px;
-    margin: 0 5px;
-    padding: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin: 0 0.313rem;
+  padding: 0;
 
-    cursor: pointer;
+  cursor: pointer;
 }
-.slick-dots li button
-{
-    font-size: 0;
-    line-height: 0;
+.slick-dots li button {
+  font-size: 0;
+  line-height: 0;
 
-    display: block;
+  display: block;
 
-    width: 20px;
-    height: 20px;
-    padding: 5px;
+  width: 1.25rem;
+  height: 1.25rem;
+  padding: 0.313rem;
 
-    cursor: pointer;
+  cursor: pointer;
 
-    color: transparent;
-    border: 0;
-    outline: none;
-    background: transparent;
+  color: transparent;
+  border: 0;
+  outline: none;
+  background: transparent;
 }
 .slick-dots li button:hover,
-.slick-dots li button:focus
-{
-    outline: none;
+.slick-dots li button:focus {
+  outline: none;
 }
 .slick-dots li button:hover:before,
-.slick-dots li button:focus:before
-{
-    opacity: 1;
+.slick-dots li button:focus:before {
+  opacity: 1;
 }
-.slick-dots li button:before
-{
-    font-family: 'slick';
-    font-size: 6px;
-    line-height: 20px;
+.slick-dots li button:before {
+  font-family: 'slick';
+  font-size: 0.375rem;
+  line-height: 1.25rem;
 
-    position: absolute;
-    top: 0;
-    left: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
 
-    width: 20px;
-    height: 20px;
+  width: 1.25rem;
+  height: 1.25rem;
 
-    content: '•';
-    text-align: center;
+  content: '•';
+  text-align: center;
 
-    opacity: .25;
-    color: black;
+  opacity: 0.25;
+  color: black;
 
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
-.slick-dots li.slick-active button:before
-{
-    opacity: .75;
-    color: black;
+.slick-dots li.slick-active button:before {
+  opacity: 0.75;
+  color: black;
 }

package/build/index.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import React, { ReactNode, ElementType } from 'react';
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
+import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-namespace';
 
 declare const SixtyDaysGuarantee: ({ height, width, fill, title }: IconProps) => JSX.Element;
 
@@ -24,12 +25,18 @@ declare const LightCheck: ({ height, width, fill, strokeWidth }: LightCheckProps
 
 declare const Question: ({ height, width, fill }: IconProps) => JSX.Element;
 
+declare const Close: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const Trash: ({ height, width, fill }: IconProps) => JSX.Element;
+
 declare const Actions_Check: typeof Check;
 declare const Actions_ClearLight: typeof ClearLight;
 declare const Actions_LightExclamation: typeof LightExclamation;
 type Actions_LightCheckProps = LightCheckProps;
 declare const Actions_LightCheck: typeof LightCheck;
 declare const Actions_Question: typeof Question;
+declare const Actions_Close: typeof Close;
+declare const Actions_Trash: typeof Trash;
 declare namespace Actions {
   export {
     Actions_Check as Check,
@@ -38,6 +45,8 @@ declare namespace Actions {
     Actions_LightCheckProps as LightCheckProps,
     Actions_LightCheck as LightCheck,
     Actions_Question as Question,
+    Actions_Close as Close,
+    Actions_Trash as Trash,
   };
 }
 
@@ -68,6 +77,8 @@ declare const ChevronLeft: ({ height, width, fill, opacity }: IconWithOpacityPro
 
 declare const ChevronRight: ({ height, width, fill, opacity }: IconWithOpacityProps) => JSX.Element;
 
+declare const ChevronRightVariant: ({ height, width, fill }: IconProps) => JSX.Element;
+
 declare const ChevronUp: ({ height, width, fill }: IconProps) => JSX.Element;
 
 declare const ChevronUpSolid: ({ height, width, fill }: IconProps) => JSX.Element;
@@ -77,6 +88,7 @@ declare const CircleUp: ({ width, height, fill }: IconProps) => JSX.Element;
 declare const Arrows_ChevronDown: typeof ChevronDown;
 declare const Arrows_ChevronLeft: typeof ChevronLeft;
 declare const Arrows_ChevronRight: typeof ChevronRight;
+declare const Arrows_ChevronRightVariant: typeof ChevronRightVariant;
 declare const Arrows_ChevronUp: typeof ChevronUp;
 declare const Arrows_ChevronUpSolid: typeof ChevronUpSolid;
 declare const Arrows_CircleUp: typeof CircleUp;
@@ -85,6 +97,7 @@ declare namespace Arrows {
     Arrows_ChevronDown as ChevronDown,
     Arrows_ChevronLeft as ChevronLeft,
     Arrows_ChevronRight as ChevronRight,
+    Arrows_ChevronRightVariant as ChevronRightVariant,
     Arrows_ChevronUp as ChevronUp,
     Arrows_ChevronUpSolid as ChevronUpSolid,
     Arrows_CircleUp as CircleUp,
@@ -374,9 +387,13 @@ declare type Color = {
     secondaryColor?: string;
     tertiaryColor?: string;
 };
+declare type Pattern = {
+    url: string;
+};
 declare type ColorPickerOption = {
     label: string;
-    color: Color;
+    color?: Color;
+    pattern?: Pattern;
 };
 declare type RadioGroupOption = {
     value: string;
@@ -400,6 +417,17 @@ declare type DropdownListIconsItem = {
 declare type DropdownListIconsSubItem = {
     description: string;
     callback: () => void;
+};
+declare type Filter = {
+    title: string;
+    columns: number;
+    isOpenByDefault?: boolean;
+    items: Array<string>;
+};
+declare type FilterChange = {
+    sectionIndex: number;
+    itemIndex: number;
+    checked?: boolean;
 };
 
 interface ThemeProviderProps {
@@ -955,4 +983,38 @@ declare namespace index_d {
   };
 }
 
-export { _default as Accordion, AccordionBox, AccordionIcon, AmazonPaypalButtons_d as AmazonAndPaypalButtons, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, CTAProps, _default$1 as Card, CardSectionType, CategoryTag, Checkbox, Color, ColorPickerOption, ComponentPosition, ComponentSize, index_d as CrossSell, DeliveryDetails, DiscountTag, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, FitPredictor, Icon, IconButton, IconProps, IconWithOpacityProps, Image, ImageType, index_d$1 as Input, InputValidationType, MultiColorPicker, OfferBanner, OrderBar, PaymentMethod, PriceLabel, ProductGallery, ProgressBar, RadioGroupInput, RadioGroupOption, Rating, Review, ScrollToTop, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, TextButton, Theme, ThemeProvider, Timer, Tooltip, Totals, WithTestId };
+interface ProductItemProps {
+    title: string;
+    image: ImageProps;
+    price: Pick<PriceLabelProps, 'finalPrice' | 'originalPrice' | 'color'>;
+    rating: Pick<RatingProps, 'rating' | 'reviews'>;
+    tags?: {
+        categoryTagText: string;
+        seasonOfferTagText: string;
+    };
+    alignName?: 'left' | 'center';
+}
+
+interface ProductItemSmallMobileProps extends ProductItemProps {
+    size: ComponentSize.Medium | ComponentSize.Small;
+}
+
+declare function withProductGrid<P extends ProductItemProps>(ProductItemComponent: React.FC<P>, data: ProductItemProps[]): {
+    (props: Omit<P, 'title' | 'image' | 'price' | 'rating'>): JSX.Element;
+    displayName: string;
+};
+
+declare const Collection: {
+    ProductItemMobile: ({ title, image, price, rating, size, tags, alignName, }: ProductItemSmallMobileProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+    withProductGrid: typeof withProductGrid;
+};
+
+interface StarListProps {
+    rating: number;
+    size?: ComponentSize;
+    starsNumber: number;
+    fill: string;
+}
+declare const StarList: ({ rating, starsNumber, fill, size, }: StarListProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+export { _default as Accordion, AccordionBox, AccordionIcon, AmazonPaypalButtons_d as AmazonAndPaypalButtons, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, CTAProps, _default$1 as Card, CardSectionType, CategoryTag, Checkbox, Collection, Color, ColorPickerOption, ComponentPosition, ComponentSize, index_d as CrossSell, DeliveryDetails, DiscountTag, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, Filter, FilterChange, FitPredictor, Icon, IconButton, IconProps, IconWithOpacityProps, Image, ImageType, index_d$1 as Input, InputValidationType, MultiColorPicker, OfferBanner, OrderBar, Pattern, PaymentMethod, PriceLabel, ProductGallery, ProgressBar, RadioGroupInput, RadioGroupOption, Rating, Review, ScrollToTop, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, StarList, TextButton, Theme, ThemeProvider, Timer, Tooltip, Totals, WithTestId };