@trafilea/afrodita-components 3.0.0 → 3.0.3-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;
 
@@ -299,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,
@@ -316,8 +317,16 @@ declare enum InputValidationType {
     Empty = 2
 }
 
+interface Breakpoints {
+    mobile: number;
+    desktop: number;
+}
 interface Theme {
     name: string;
+    fontSizes: number[];
+    fontWeights: number[];
+    lineHeights: number[];
+    mediaQueries: Breakpoints;
     colors: {
         primary: string;
         secondary: string;
@@ -356,12 +365,17 @@ interface Theme {
             disabled: string;
         };
         text: {
+            body: string;
             disabled: string;
         };
     };
     text: {
         weight: {
+            heavy: number;
             bold: number;
+            demi: number;
+            medium: number;
+            regular: number;
         };
     };
     component: {
@@ -424,6 +438,204 @@ interface Theme {
                 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;
+            };
+        };
     };
 }
 interface IconProps {
@@ -493,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;
@@ -526,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>;
@@ -552,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[];
@@ -581,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;
@@ -642,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;
@@ -678,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;
+interface AccordionProps {
     defaultOpen?: boolean;
+    variant: 'simple' | 'box';
+    header: ReactNode;
+    content: ReactNode;
     disabled?: boolean;
+    openIcon: IconType;
+    closeIcon: IconType;
 }
-declare const AccordionBox: ({ title, text, defaultOpen, disabled }: AccordionBoxProps) => JSX.Element;
-
-interface AccordionIconProps {
-    title: string;
-    text: string;
-    leadingIcon: React.ReactNode;
-    defaultOpen?: boolean;
-    disabled?: boolean;
-}
-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;
@@ -745,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;
@@ -850,13 +1021,6 @@ declare const Input: {
     SimplePlusIcon: ({ Icon, ...rest }: BasePlusIconProps) => JSX.Element;
 };
 
-declare const index_d$1_Input: typeof Input;
-declare namespace index_d$1 {
-  export {
-    index_d$1_Input as Input,
-  };
-}
-
 interface PaymentMethodsProps {
     Icon: IconType;
     width: string;
@@ -1022,17 +1186,6 @@ interface AmazonPaypalBtnProps {
 declare const AmazonButton: ({ onClick }: AmazonPaypalBtnProps) => JSX.Element;
 declare const PaypalButton: ({ onClick }: AmazonPaypalBtnProps) => JSX.Element;
 
-type AmazonPaypalButtons_d_AmazonPaypalBtnProps = AmazonPaypalBtnProps;
-declare const AmazonPaypalButtons_d_AmazonButton: typeof AmazonButton;
-declare const AmazonPaypalButtons_d_PaypalButton: typeof PaypalButton;
-declare namespace AmazonPaypalButtons_d {
-  export {
-    AmazonPaypalButtons_d_AmazonPaypalBtnProps as AmazonPaypalBtnProps,
-    AmazonPaypalButtons_d_AmazonButton as AmazonButton,
-    AmazonPaypalButtons_d_PaypalButton as PaypalButton,
-  };
-}
-
 interface CrossSellCheckboxProps extends rightToLeftProps {
     imageURL: string;
     title: string;
@@ -1086,7 +1239,7 @@ 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;
@@ -1111,4 +1264,138 @@ interface SpinnerProps {
 }
 declare const Spinner: ({ fill, background, animationDuration, complete, completeIconStroke, size, }: SpinnerProps) => 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, Drawer, 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, Spinner, StarList, TextButton, Theme, ThemeProvider, Timer, Tooltip, Totals, WithTestId };
+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 { Accordion, AmazonButton, 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, Input, InputValidationType, MultiColorPicker, OfferBanner, OrderBar, Pagination, Pattern, PaymentMethod, PaypalButton, 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 };