@trafilea/afrodita-components 2.3.4 → 3.0.2-beta.0

package/build/index.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
-import React, { ReactNode, ElementType } from 'react';
+import React, { ReactNode, FC, AriaAttributes, CSSProperties, AnchorHTMLAttributes, LabelHTMLAttributes } 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';
+import { SearchBarOptionItem as SearchBarOptionItem$1 } from 'src/types/types';
 
 declare const SixtyDaysGuarantee: ({ height, width, fill, title }: IconProps) => JSX.Element;
 
@@ -59,15 +60,19 @@ declare const Loading: ({ height, width, fill, backgroundColor }: LoadingProps)
 
 declare const Shapermint: ({ height, width }: IconProps) => JSX.Element;
 
+declare const McAfee: ({ height, width }: IconProps) => JSX.Element;
+
 type Other_LoadingProps = LoadingProps;
 declare const Other_Loading: typeof Loading;
 declare const Other_Shapermint: typeof Shapermint;
+declare const Other_McAfee: typeof McAfee;
 declare namespace Other {
   export {
     FitPredictor$1 as FitPredictor,
     Other_LoadingProps as LoadingProps,
     Other_Loading as Loading,
     Other_Shapermint as Shapermint,
+    Other_McAfee as McAfee,
   };
 }
 
@@ -295,10 +300,10 @@ declare enum CardSectionType {
     Footer = 1
 }
 declare enum ComponentSize {
-    Large = 0,
-    Medium = 1,
-    Small = 2,
-    XSmall = 3
+    Large = "large",
+    Medium = "medium",
+    Small = "small",
+    XSmall = "xsmall"
 }
 declare enum ComponentPosition {
     Top = 0,
@@ -312,46 +317,324 @@ declare enum InputValidationType {
     Empty = 2
 }
 
+interface Breakpoints {
+    mobile: number;
+    desktop: number;
+}
 interface Theme {
-    palette: {
-        primary: {
-            default: string;
-            hover: string;
-            pressed: string;
+    name: string;
+    fontSizes: number[];
+    fontWeights: number[];
+    lineHeights: number[];
+    mediaQueries: Breakpoints;
+    colors: {
+        primary: string;
+        secondary: string;
+        black: string;
+        white: string;
+        neutral10: string;
+        neutral50: string;
+        neutral100: string;
+        neutral150: string;
+        neutral200: string;
+        neutral250: string;
+        neutral300: string;
+        neutral350: string;
+        neutral400: string;
+        neutral450: string;
+        neutral500: string;
+        neutral550: string;
+        neutral600: string;
+        neutral650: string;
+        neutral700: string;
+        neutral750: string;
+        neutral800: string;
+        neutral850: string;
+        neutral900: string;
+        neutral950: string;
+        neutral990: string;
+        semantic: {
+            error: string;
+            success: string;
         };
-        secondary: {
-            default: string;
-            hover: string;
-            pressed: string;
+        border: {
+            disabled: string;
+            highlight: string;
+        };
+        background: {
+            disabled: string;
+        };
+        text: {
+            body: string;
+            disabled: string;
         };
-    };
-    shades: {
-        white: string;
-        gray010: string;
-        gray050: string;
-        gray100: string;
-        gray150: string;
-        gray200: string;
-        gray250: string;
-        gray300: string;
-        gray350: string;
-        gray400: string;
-        gray450: string;
-        gray500: string;
-        gray550: string;
-        gray600: string;
-        gray650: string;
-        gray700: string;
-        gray750: string;
-        gray800: string;
-        gray850: string;
-        gray900: string;
-        gray950: string;
-        gray990: string;
     };
     text: {
         weight: {
+            heavy: number;
             bold: number;
+            demi: number;
+            medium: number;
+            regular: number;
+        };
+    };
+    component: {
+        button: {
+            border: string;
+            borderRadius: string;
+            fontWeight: number;
+            size: {
+                small: {
+                    fontSize: string;
+                    padding: string;
+                };
+                medium: {
+                    fontSize: string;
+                    padding: string;
+                };
+                large: {
+                    fontSize: string;
+                    padding: string;
+                };
+            };
+            primary: {
+                active: {
+                    backgroundColor: string;
+                    color: string;
+                };
+                hover: {
+                    backgroundColor: string;
+                    color: string;
+                };
+            };
+            secondary: {
+                active: {
+                    backgroundColor: string;
+                    color: string;
+                };
+                hover: {
+                    backgroundColor: string;
+                    color: string;
+                };
+            };
+        };
+        input: {
+            background: string;
+            color: string;
+            placeholderColor: string;
+            borderRadius: string;
+            fontSize: string;
+            fontWeight: number;
+            padding: string;
+            lineHeight: string;
+            border: string;
+            boxShadow: string;
+        };
+        inputCustom: {
+            button: {
+                borderRadius: string;
+            };
+            input: {
+                borderRadius: string;
+            };
+        };
+        selector: {
+            size: {
+                small: {
+                    padding: string;
+                    borderRadius: string;
+                };
+                medium: {
+                    padding: string;
+                    borderRadius: string;
+                };
+            };
+            default: {
+                fontWeight: number;
+                border: string;
+                background: string;
+                color: string;
+            };
+            hover: {
+                fontWeight: number;
+                background: string;
+                border: string;
+                color: string;
+            };
+            disabled: {
+                border: string;
+            };
+            fontSize: string;
+        };
+        rating: {
+            fontWeight: number;
+            size: {
+                xsmall: {
+                    fontSize: string;
+                    lineHeight: string;
+                };
+                small: {
+                    fontSize: string;
+                    lineHeight: string;
+                };
+                medium: {
+                    fontSize: string;
+                    lineHeight: string;
+                };
+                large: {
+                    fontSize: string;
+                    lineHeight: string;
+                };
+            };
+        };
+        card: {
+            borderRadius: string;
+        };
+        radio: {
+            borderColor: string;
+            background: string;
+            size: {
+                small: {
+                    borderWidth: string;
+                    margin: string;
+                    height: string;
+                    active: {
+                        borderWidth: string;
+                    };
+                };
+                medium: {
+                    borderWidth: string;
+                    margin: string;
+                    height: string;
+                    active: {
+                        borderWidth: string;
+                    };
+                };
+                large: {
+                    borderWidth: string;
+                    margin: string;
+                    height: string;
+                    active: {
+                        borderWidth: string;
+                    };
+                };
+            };
+        };
+        label: {
+            fontSize: {
+                small: string;
+                medium: string;
+                large: string;
+            };
+            lineHeight: {
+                small: string;
+                medium: string;
+                large: string;
+            };
+        };
+        checkbox: {
+            background: string;
+            borderColor: string;
+            active: {
+                background: string;
+            };
+            size: {
+                large: {
+                    width: string;
+                    height: string;
+                    borderRadius: string;
+                    borderWidth: string;
+                    margin: string;
+                    icon: {
+                        width: string;
+                        height: string;
+                    };
+                };
+                medium: {
+                    width: string;
+                    height: string;
+                    borderRadius: string;
+                    borderWidth: string;
+                    margin: string;
+                    icon: {
+                        width: string;
+                        height: string;
+                    };
+                };
+                small: {
+                    width: string;
+                    height: string;
+                    borderRadius: string;
+                    borderWidth: string;
+                    margin: string;
+                    icon: {
+                        width: string;
+                        height: string;
+                    };
+                };
+            };
+        };
+        accordion: {
+            variant: {
+                box: {
+                    container: {
+                        border: string;
+                        borderColor: string;
+                        borderRadius: string;
+                        padding: string;
+                    };
+                    summary: {
+                        fontWeight: number;
+                        fontSize: string;
+                        lineHeight: string;
+                        color: string;
+                    };
+                    details: {
+                        margin: string;
+                    };
+                    icon: {
+                        width: number;
+                        height: number;
+                        color: string;
+                    };
+                };
+                simple: {
+                    container: {
+                        borderTop: string;
+                        borderBottom: string;
+                        borderColor: string;
+                        borderRadius: string;
+                        padding: string;
+                    };
+                    summary: {
+                        fontWeight: number;
+                        fontSize: string;
+                        lineHeight: string;
+                        color: string;
+                    };
+                    details: {
+                        margin: string;
+                    };
+                    icon: {
+                        width: number;
+                        height: number;
+                        color: string;
+                    };
+                };
+            };
+        };
+        dropdown: {
+            borderRadius: string;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            padding: string;
+            color: string;
+            fill: string;
+            options: {
+                borderColor: string;
+                color: string;
+            };
         };
     };
 }
@@ -422,13 +705,18 @@ declare type Filter = {
     title: string;
     columns: number;
     isOpenByDefault?: boolean;
-    items: Array<string>;
+    items: string[];
 };
 declare type FilterChange = {
     sectionIndex: number;
     itemIndex: number;
     checked?: boolean;
-};
+};
+interface SearchBarOptionItem {
+    src: string;
+    price: string;
+    title: string;
+}
 
 interface ThemeProviderProps {
     theme: Theme;
@@ -455,24 +743,25 @@ interface CardProps {
     border?: borderProps;
     flex?: boolean;
 }
-declare const _default$1: (({ children, backgroundColor, widthAuto, border, flex }: CardProps) => JSX.Element) & {
+declare const _default: (({ children, backgroundColor, widthAuto, border, flex }: CardProps) => JSX.Element) & {
     Header: ({ children }: CardSectionProps) => JSX.Element;
     Footer: ({ children }: CardSectionProps) => JSX.Element;
     Body: ({ children }: CardBodyProps) => JSX.Element;
 };
 
-declare const ButtonPrimary: ({ text, onClick, disabled, wide, size }: CTAProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const ButtonPrimary: ({ text, onClick, disabled, wide, size, type }: CTAProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-declare const ButtonSecondary: ({ text, onClick, disabled, wide, size }: CTAProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const ButtonSecondary: ({ text, onClick, disabled, wide, size, className }: CTAProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 declare const ButtonSecondaryOutline: ({ text, onClick, disabled, wide, size, className, }: CTAProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-declare type CommonProps$2<T> = {
+declare type CommonProps<T> = {
     options: DropdownOption<T>[];
     disabled?: boolean;
     wide?: boolean;
     onChange: (option: DropdownOption<T>) => void;
     label?: string;
+    sort?: boolean;
 };
 declare type ConditionalProps<T> = {
     initialValue: DropdownOption<T>;
@@ -481,8 +770,8 @@ declare type ConditionalProps<T> = {
     initialValue?: undefined;
     placeHolder: string;
 };
-declare type SimpleDropdownProps<T> = CommonProps$2<T> & ConditionalProps<T>;
-declare function SimpleDropdown<T>({ options, disabled, initialValue, placeHolder, label, wide, onChange, }: SimpleDropdownProps<T>): JSX.Element;
+declare type SimpleDropdownProps<T> = CommonProps<T> & ConditionalProps<T>;
+declare function SimpleDropdown<T>({ options, disabled, initialValue, placeHolder, label, wide, sort, onChange, }: SimpleDropdownProps<T>): JSX.Element;
 
 interface SizeSelectorProps {
     sizes: SizeOption[];
@@ -510,14 +799,14 @@ interface BaseButtonProps {
 }
 
 declare type BaseProps = Pick<BaseButtonProps, 'disabled' | 'type' | 'onClick'>;
-interface TextButtonProps extends BaseProps {
+interface TextButtonProps$1 extends BaseProps {
     text: string;
     LeadingIcon?: IconType;
     TrailingIcon?: IconType;
     iconColor?: string;
     size?: ComponentSize;
 }
-declare const TextButton: ({ text, LeadingIcon, TrailingIcon, iconColor, disabled, type, size, onClick, }: TextButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const TextButton: ({ text, LeadingIcon, TrailingIcon, iconColor, disabled, type, size, onClick, }: TextButtonProps$1) => _emotion_react_jsx_runtime.JSX.Element;
 
 interface DiscountTagProps {
     discount: number;
@@ -571,7 +860,7 @@ interface RatingProps {
     reviews: number;
     reviewsText: string;
 }
-declare const Rating: ({ size, reviews, reviewsText, rating, }: RatingProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const Rating: ({ size, reviews, reviewsText, rating, }: RatingProps) => JSX.Element;
 
 interface FitPredictorProps {
     onClick: () => void;
@@ -607,65 +896,16 @@ interface TooltipProps {
 }
 declare const Tooltip: ({ children, position, text, align, onClick, header, }: TooltipProps) => JSX.Element;
 
-interface CommonProps$1 {
-    children: React.ReactNode;
-}
-declare type InternalProps = {
-    staticProp?: boolean;
-    unmount?: never;
-} | {
-    staticProp?: never;
-    unmount?: boolean;
-};
-declare type StyleProps$1 = {
-    as: ElementType<any>;
-    className?: string;
-} | {
-    as?: undefined;
-    className?: never;
-};
-declare type AccordionPanelProps = CommonProps$1 & InternalProps & StyleProps$1;
-
-interface AccordionButtonProps {
-    disabled?: boolean;
-    as?: ElementType<any>;
-    className?: string;
-    children: ReactNode;
-}
-
-interface CommonProps {
-    children: React.ReactNode;
-    defaultOpen?: boolean;
-}
-declare type StyleProps = {
-    as: ElementType<any>;
-    className?: string;
-} | {
-    as?: undefined;
-    className?: never;
-};
-declare type AccordionProps = CommonProps & StyleProps;
-declare const _default: (({ defaultOpen, as, className, children }: AccordionProps) => _emotion_react_jsx_runtime.JSX.Element) & {
-    Button: ({ disabled, as, className, children }: AccordionButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
-    Panel: ({ as, staticProp, unmount, children, className }: AccordionPanelProps) => _emotion_react_jsx_runtime.JSX.Element;
-};
-
-interface AccordionBoxProps {
-    title: string;
-    text: string;
-    defaultOpen?: boolean;
-    disabled?: boolean;
-}
-declare const AccordionBox: ({ title, text, defaultOpen, disabled }: AccordionBoxProps) => JSX.Element;
-
-interface AccordionIconProps {
-    title: string;
-    text: string;
-    leadingIcon: React.ReactNode;
+interface AccordionProps {
     defaultOpen?: boolean;
+    variant: 'simple' | 'box';
+    header: ReactNode;
+    content: ReactNode;
     disabled?: boolean;
+    openIcon: IconType;
+    closeIcon: IconType;
 }
-declare const AccordionIcon: ({ title, text, leadingIcon, defaultOpen, disabled, }: AccordionIconProps) => JSX.Element;
+declare const Accordion: ({ header, content, defaultOpen, variant, disabled, openIcon, closeIcon, }: AccordionProps) => JSX.Element;
 
 interface CheckboxProps {
     disabled?: boolean;
@@ -674,8 +914,10 @@ interface CheckboxProps {
     text: string;
     checked?: boolean;
     id: string;
+    backgroundColor?: string;
+    variant: 'primary' | 'secondary';
 }
-declare const Checkbox: ({ disabled, onChange, size, text, checked, id, }: CheckboxProps) => JSX.Element;
+declare const Checkbox: ({ disabled, onChange, size, text, checked, id, variant, }: CheckboxProps) => JSX.Element;
 
 interface RadioGroupInputProps {
     name: string;
@@ -1015,6 +1257,163 @@ interface StarListProps {
     starsNumber: number;
     fill: string;
 }
-declare const StarList: ({ rating, starsNumber, fill, size, }: StarListProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const StarList: ({ rating, starsNumber, fill, size, }: StarListProps) => JSX.Element;
+
+interface DrawerProps {
+    children: React.ReactNode;
+    isOpen: boolean;
+    onClose?: () => void;
+    onOpen?: () => void;
+    onClickOutside?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    backgroundColor?: string;
+    backdropColor?: string;
+    position?: 'left' | 'right';
+    width?: string;
+}
+declare const Drawer: ({ children, isOpen, onClose, onOpen, backgroundColor, backdropColor, position, width, onClickOutside, }: DrawerProps) => JSX.Element | null;
+
+interface SpinnerProps {
+    fill: string;
+    background: string;
+    animationDuration?: number;
+    complete?: boolean;
+    completeIconStroke?: number;
+    size?: string;
+}
+declare const Spinner: ({ fill, background, animationDuration, complete, completeIconStroke, size, }: SpinnerProps) => JSX.Element;
+
+interface TagsProps {
+    color?: string;
+    items: string[];
+    onCloseClick: (index: number) => void;
+}
+declare const Tags: ({ color, items, onCloseClick }: TagsProps) => JSX.Element;
+
+declare type FilteringDropdownProps<T> = {
+    options: DropdownOption<T>[];
+    disabled?: boolean;
+    wide?: boolean;
+    onChange: (options: DropdownOption<T>[]) => void;
+    filter?: boolean;
+    sliceAfter?: number;
+    placeHolder: string;
+};
+declare function FilteringDropdown<T>({ options, disabled, placeHolder, wide, sliceAfter, filter, onChange, }: FilteringDropdownProps<T>): JSX.Element;
+
+interface PaginationProps {
+    from: number;
+    to: number;
+    onChange: (page: number) => void;
+    currentPage?: number;
+    underlineActive?: boolean;
+    boldActive?: boolean;
+    disabled?: boolean;
+}
+declare const Pagination: ({ from, to, currentPage, onChange, underlineActive, boldActive, disabled, }: PaginationProps) => JSX.Element;
+
+declare const Text: FC<TextProps>;
+
+declare type TextHeroProps = {
+    variant: 'hero1' | 'hero2' | 'hero3';
+    weight?: 'heavy' | 'bold' | 'demi';
+    size?: 'regular';
+    underline?: never;
+    disabled?: never;
+    wide?: never;
+    original?: never;
+    allCaps?: never;
+};
+declare type TextDisplayProps = {
+    variant: 'display1' | 'display2';
+    weight?: 'bold' | 'demi';
+    size?: 'regular';
+    underline?: never;
+    disabled?: never;
+    wide?: never;
+    original?: never;
+    allCaps?: never;
+};
+declare type TextHeadingProps = {
+    variant: 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6';
+    weight: 'bold' | 'demi' | 'regular';
+    size?: 'regular';
+    underline?: never;
+    disabled?: never;
+    wide?: never;
+    original?: never;
+    allCaps?: never;
+};
+declare type TextBodyProps = {
+    variant: 'body';
+    size?: 'regular' | 'small';
+    weight?: 'bold' | 'demi' | 'regular';
+    underline?: never;
+    disabled?: never;
+    wide?: never;
+    original?: never;
+    allCaps?: never;
+};
+declare type TextButtonProps = {
+    variant: 'button';
+    size: 'large' | 'regular' | 'small';
+    weight: 'bold' | 'demi';
+    underline?: never;
+    disabled?: never;
+    wide?: boolean;
+    original?: never;
+    allCaps?: never;
+};
+declare type TextPricingProps = {
+    variant: 'pricing';
+    size: 'large' | 'medium' | 'regular' | 'small';
+    weight?: never;
+    underline?: never;
+    disabled?: never;
+    wide?: never;
+    original?: boolean;
+    allCaps?: never;
+};
+declare type TextLinkProps = {
+    variant: 'link';
+    weight?: 'demi' | 'regular';
+    size?: 'regular' | 'small';
+    underline?: boolean;
+    disabled?: boolean;
+    wide?: never;
+    original?: never;
+    allCaps?: never;
+} & AnchorHTMLAttributes<'a'>;
+declare type TextLabelProps = {
+    variant: 'label';
+    weight?: 'regular' | 'demi';
+    size?: 'regular' | 'small';
+    underline?: never;
+    disabled?: boolean;
+    wide?: never;
+    original?: never;
+    allCaps?: never;
+} & LabelHTMLAttributes<'label'>;
+declare type TextTagProps = {
+    variant: 'tag';
+    size: 'regular' | 'small' | 'x-small';
+    weight?: 'regular' | 'demi' | 'bold';
+    underline?: never;
+    disabled?: boolean;
+    wide?: never;
+    original?: never;
+    allCaps?: boolean;
+};
+declare type TextProps = AriaAttributes & {
+    style?: CSSProperties;
+} & (TextHeroProps | TextDisplayProps | TextHeadingProps | TextBodyProps | TextLinkProps | TextButtonProps | TextPricingProps | TextLabelProps | TextTagProps);
+
+interface SearchBarProps {
+    suggestions: SearchBarOptionItem$1[];
+    resultOptions: SearchBarOptionItem$1[];
+    onChange: (text: string) => void;
+    onSearch: (term: string) => void;
+    resultsPanelDataTestId?: string;
+}
+declare const SearchBar: ({ suggestions, resultOptions, onChange, onSearch, resultsPanelDataTestId, }: SearchBarProps) => 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 };
+export { Accordion, AmazonPaypalButtons_d as AmazonAndPaypalButtons, Breakpoints, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, CTAProps, _default as Card, CardSectionType, CategoryTag, Checkbox, Collection, Color, ColorPickerOption, ComponentPosition, ComponentSize, index_d as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, Filter, FilterChange, FilteringDropdown, Tags as FilteringTags, FitPredictor, Icon, IconButton, IconProps, IconWithOpacityProps, Image, ImageType, index_d$1 as Input, InputValidationType, MultiColorPicker, OfferBanner, OrderBar, Pagination, Pattern, PaymentMethod, PriceLabel, ProductGallery, ProgressBar, RadioGroupInput, RadioGroupOption, Rating, Review, ScrollToTop, SearchBar, SearchBarOptionItem, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, Spinner, StarList, Text, TextButton, Theme, ThemeProvider, Timer, Tooltip, Totals, WithTestId };