@trafilea/afrodita-components 5.0.0-beta.3 → 5.0.0-beta.35

package/build/index.d.ts

@@ -2,8 +2,9 @@
 import { IconProps as IconProps$1 } from 'src/types/types';
 import React, { FC, ReactNode, ElementType, CSSProperties, AriaAttributes, AnchorHTMLAttributes, LabelHTMLAttributes, RefObject } 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 * as _emotion_styled from '@emotion/styled';
+import { StyledComponent } from '@emotion/styled';
+import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-namespace';
 import * as _emotion_react from '@emotion/react';
 
 declare enum CardSectionType {
@@ -33,6 +34,7 @@ interface IconProps {
     height?: number;
     fill?: string;
     title?: string;
+    testId?: string;
 }
 declare type ButtonType = 'button' | 'submit' | 'reset';
 interface CTAProps {
@@ -100,7 +102,10 @@ declare type Filter = {
     title: string;
     columns: number;
     isOpenByDefault?: boolean;
-    items: string[];
+    items: Array<{
+        label: string;
+        checked?: boolean;
+    }>;
 };
 declare type FilterChange = {
     sectionIndex: number;
@@ -111,6 +116,7 @@ interface SearchBarOptionItem {
     src: string;
     price: string;
     title: string;
+    optionUrl: string;
 }
 
 declare const SixtyDaysGuarantee: ({ height, width, fill, title }: IconProps) => JSX.Element;
@@ -191,9 +197,9 @@ declare namespace Other {
 
 declare const ChevronDown: ({ height, width, fill }: IconProps) => JSX.Element;
 
-declare const ChevronLeft: ({ height, width, fill, opacity }: IconWithOpacityProps) => JSX.Element;
+declare const ChevronLeft: ({ height, width, fill, opacity, testId }: IconWithOpacityProps) => JSX.Element;
 
-declare const ChevronRight: ({ height, width, fill, opacity }: IconWithOpacityProps) => JSX.Element;
+declare const ChevronRight: ({ height, width, fill, opacity, testId }: IconWithOpacityProps) => JSX.Element;
 
 declare const ChevronRightVariant: ({ height, width, fill }: IconProps) => JSX.Element;
 
@@ -300,11 +306,11 @@ declare namespace SocialMedia {
   };
 }
 
-declare const Search: ({ height, width, fill }: IconProps) => JSX.Element;
+declare const Search: ({ height, width, fill, testId }: IconProps) => JSX.Element;
 
 declare const User: ({ height, width, fill }: IconProps) => JSX.Element;
 
-declare const ShoppingBag: ({ height, width, fill }: IconProps) => JSX.Element;
+declare const ShoppingBag: ({ height, width, fill, testId }: IconProps) => JSX.Element;
 
 declare const ShoppingCart: FC<IconProps>;
 
@@ -342,7 +348,7 @@ interface IconWrapperProps {
     viewBoxX: number;
     viewBoxY: number;
     children: React.ReactNode;
-    testid?: string;
+    testId?: string;
     fill?: string;
 }
 
@@ -416,7 +422,16 @@ declare namespace SlideDots {
   };
 }
 
-declare type IconType = ({ height, width, fill }: IconProps) => JSX.Element;
+declare const Thinking: ({ height, width }: IconProps$1) => JSX.Element;
+
+declare const Emoji_Thinking: typeof Thinking;
+declare namespace Emoji {
+  export {
+    Emoji_Thinking as Thinking,
+  };
+}
+
+declare type IconType = ({ height, width, fill, testId }: IconProps) => JSX.Element;
 declare const Icon: {
     Custom: typeof Custom;
     Arrows: typeof Arrows;
@@ -429,6 +444,7 @@ declare const Icon: {
     Download: typeof Download;
     Payment: typeof Payment;
     SlideDots: typeof SlideDots;
+    Emoji: typeof Emoji;
 };
 
 interface CardBodyProps {
@@ -491,16 +507,17 @@ interface SizeSelectorProps {
     selectedValue: SizeOption;
     onChange: (size: SizeOption) => void;
     inline?: boolean;
+    width?: string;
 }
-declare const SizeSelector: ({ label, sizes, selectedValue, onChange, inline, }: SizeSelectorProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const SizeSelector: ({ label, sizes, selectedValue, onChange, inline, width, }: SizeSelectorProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 interface SizeFitGuideProps {
     title: string;
-    fitPercentageLabel: string;
-    fitPercentage: number;
+    fitPercentage?: number;
     onClick: () => void;
+    onClickFitPercentage?: () => void;
 }
-declare const SizeFitGuide: ({ title, fitPercentageLabel, fitPercentage, onClick }: SizeFitGuideProps) => JSX.Element;
+declare const SizeFitGuide: ({ title, fitPercentage, onClick, onClickFitPercentage, }: SizeFitGuideProps) => JSX.Element;
 
 interface BaseButtonProps {
     children: React.ReactNode;
@@ -511,6 +528,7 @@ interface BaseButtonProps {
     onClick: () => void;
     className?: string;
     inline?: boolean;
+    uppercase?: boolean;
     testId?: string;
 }
 
@@ -521,8 +539,9 @@ interface TextButtonProps$1 extends BaseProps {
     TrailingIcon?: IconType;
     iconColor?: string;
     size?: ComponentSize;
+    uppercase?: boolean;
 }
-declare const TextButton: ({ text, LeadingIcon, TrailingIcon, iconColor, disabled, type, size, onClick, }: TextButtonProps$1) => _emotion_react_jsx_runtime.JSX.Element;
+declare const TextButton: ({ text, LeadingIcon, TrailingIcon, iconColor, disabled, type, size, uppercase, onClick, }: TextButtonProps$1) => _emotion_react_jsx_runtime.JSX.Element;
 
 interface DiscountTagProps {
     discount: number;
@@ -541,8 +560,9 @@ interface PriceLabelProps {
     color?: string;
     size?: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
     discount?: DiscountTagProps;
+    testId?: string;
 }
-declare const PriceLabel: ({ finalPrice, originalPrice, discount, color, size, }: PriceLabelProps) => JSX.Element;
+declare const PriceLabel: ({ finalPrice, originalPrice, discount, color, testId, size, }: PriceLabelProps) => JSX.Element;
 
 interface ColorPickerProps {
     options: ColorPickerOption[];
@@ -564,12 +584,13 @@ declare const MultiColorPicker: ({ options, label, selectedValue, onChange, }: M
 interface ProductGalleryProps {
     images: ImageType[];
     selectedValue?: ImageType;
-    DiscountTagElement?: JSX.Element;
-    BestSellerTagElement?: JSX.Element;
+    topTag?: JSX.Element;
+    bottomTag?: JSX.Element;
     productImageDataTestId?: string;
     previewListDataTestId?: string;
+    thumbnailPosition?: 'vertical' | 'horizontal';
 }
-declare const ProductGallery: ({ images, selectedValue, DiscountTagElement, BestSellerTagElement, productImageDataTestId, previewListDataTestId, }: ProductGalleryProps) => JSX.Element;
+declare const ProductGallery: ({ images, selectedValue, topTag, bottomTag, productImageDataTestId, previewListDataTestId, thumbnailPosition, }: ProductGalleryProps) => JSX.Element;
 
 interface RatingProps {
     rating: number;
@@ -1014,8 +1035,10 @@ declare type ThemeComponent = {
     packSelector: {
         borderRadius: string;
         borderColor: string;
-        highlight: string;
-        selected: string;
+        highlightColor: string;
+        selectedColor: string;
+        selectedContrast: string;
+        tagColor: string;
     };
 };
 declare type ThemeTypography = {
@@ -1090,10 +1113,11 @@ interface MinimalisticProps {
     discount: number;
     offText: string;
     widthAuto?: boolean;
+    testId?: string;
 }
 
 declare const Bundle: {
-    Minimalistic: ({ backgroundColor, borderColor, originalPrice, price, savingPrice, getMorePayLessText, youAreSavingText, getQtyForText, discount, offText, widthAuto, }: MinimalisticProps) => JSX.Element;
+    Minimalistic: ({ backgroundColor, borderColor, originalPrice, price, savingPrice, getMorePayLessText, youAreSavingText, getQtyForText, discount, offText, widthAuto, testId, }: MinimalisticProps) => JSX.Element;
     Simple: ({ title, freeShippingText, price, anyQtyForText, backgroundColor, widthAuto, }: SimpleProps) => JSX.Element;
 };
 
@@ -1166,6 +1190,7 @@ interface BaseCTAProps {
     size?: ComponentSize;
     text: string;
     type?: ButtonType;
+    inline?: boolean;
     testId?: string;
 }
 
@@ -1314,19 +1339,22 @@ interface ReviewProps {
 declare const Review: ({ reviewerName, date, rating, stars, title, description, image }: ReviewProps) => JSX.Element;
 
 interface SliderNavigationProps {
-    children: JSX.Element[];
+    children: JSX.Element | JSX.Element[] | StyledComponent<any>;
     infinite: boolean;
     adaptiveHeight: boolean;
-    dotsSize: ComponentSize.Large | ComponentSize.Medium | ComponentSize.Small;
-    dotListMarginTop: number;
+    dotsSize?: ComponentSize.Large | ComponentSize.Medium | ComponentSize.Small;
+    dotListMarginTop?: number;
     initialSlide?: number;
     arrows?: {
         arrowWidth: number;
         arrowHeight: number;
         arrowPadding: number;
     };
+    dots?: boolean;
+    slidesToShow?: number;
+    speed?: number;
 }
-declare const SliderNavigation: ({ children, infinite, arrows, adaptiveHeight, dotsSize, dotListMarginTop, initialSlide, }: SliderNavigationProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const SliderNavigation: ({ children, infinite, arrows, adaptiveHeight, dotsSize, dotListMarginTop, initialSlide, dots, slidesToShow, speed, }: SliderNavigationProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 interface DropdownListIconsProps {
     items: DropdownListIconsItem[];
@@ -1380,8 +1408,8 @@ interface ProductItemProps {
     price: Pick<PriceLabelProps, 'finalPrice' | 'originalPrice' | 'color'>;
     rating: Pick<RatingProps, 'rating' | 'reviews'>;
     tags?: {
-        categoryTagText: string;
-        seasonOfferTagText: string;
+        categoryTagText?: string;
+        seasonOfferTagText?: string;
     };
     alignName?: 'left' | 'center';
     url?: string;
@@ -1390,6 +1418,9 @@ interface ProductItemProps {
 
 interface ProductItemSmallMobileProps extends ProductItemProps {
     size: ComponentSize.Medium | ComponentSize.Small | ComponentSize.Large;
+    topTag?: JSX.Element;
+    bottomTag?: JSX.Element;
+    onClick?: () => void;
 }
 
 declare function withProductGrid<P extends ProductItemProps>(ProductItemComponent: React.FC<P>, data: ProductItemProps[]): {
@@ -1398,7 +1429,7 @@ declare function withProductGrid<P extends ProductItemProps>(ProductItemComponen
 };
 
 declare const Collection: {
-    ProductItemMobile: ({ title, image, price, rating, size, tags, alignName, url, className, }: ProductItemSmallMobileProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+    ProductItemMobile: ({ title, image, price, rating, size, alignName, url, className, topTag, bottomTag, onClick, }: ProductItemSmallMobileProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
     withProductGrid: typeof withProductGrid;
 };
 
@@ -1556,6 +1587,7 @@ declare type TextTagProps = {
 declare type TextProps = AriaAttributes & {
     style?: CSSProperties;
     className?: string;
+    testId?: string;
 } & (TextHeroProps | TextDisplayProps | TextHeadingProps | TextBodyProps | TextLinkProps | TextButtonProps | TextPricingProps | TextLabelProps | TextTagProps);
 
 interface SearchBarProps {
@@ -1563,19 +1595,23 @@ interface SearchBarProps {
     resultOptions: SearchBarOptionItem[];
     onChange: (text: string) => void;
     onSearch: (term: string) => void;
+    onClose: () => void;
     resultsPanelDataTestId?: string;
+    allResults?: number;
+    initialTerm?: string;
+    shouldClear?: boolean;
 }
-declare const SearchBar: ({ suggestions, resultOptions, onChange, onSearch, resultsPanelDataTestId, }: SearchBarProps) => JSX.Element;
+declare const SearchBar: ({ suggestions, resultOptions, onChange, onSearch, onClose, resultsPanelDataTestId, allResults, initialTerm, shouldClear, }: SearchBarProps) => JSX.Element;
 
 interface ProductGalleryMobileProps {
     images: ImageType[];
     selectedValue?: ImageType;
-    DiscountTagElement?: JSX.Element;
-    BestSellerTagElement?: JSX.Element;
+    topTag?: JSX.Element;
+    bottomTag?: JSX.Element;
     productImageDataTestId?: string;
     slideDotsDataTestId?: string;
 }
-declare const ProductGalleryMobile: ({ images, selectedValue, DiscountTagElement, BestSellerTagElement, productImageDataTestId, slideDotsDataTestId, }: ProductGalleryMobileProps) => JSX.Element;
+declare const ProductGalleryMobile: ({ images, selectedValue, topTag, bottomTag, productImageDataTestId, slideDotsDataTestId, }: ProductGalleryMobileProps) => JSX.Element;
 
 interface RadioProps {
     name: string;
@@ -1598,16 +1634,24 @@ declare const Portal: FC<PortalProps>;
 declare type ModalProps = {
     id: string;
     dismissable?: boolean;
+    maxFullScreen?: boolean;
 };
+interface ContainerProps {
+    maxFullScreen: boolean;
+    opened?: boolean;
+}
 declare const Overlay: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme | undefined;
     as?: React.ElementType<any> | undefined;
-} & {
-    opened?: boolean | undefined;
-}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+} & Pick<ContainerProps, "opened">, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 declare const Modal: FC<ModalProps>;
 declare const modalEvent: (id: string, detail: Omit<Events['modal'], 'id'>) => void;
-declare const useModalEvent: (id: string, cb: (event: CustomEvent<Events['modal']>) => void) => void;
+declare const useModalEvent: (id: string, cb: (event: CustomEvent<Events['modal']>) => void) => void;
+declare const useModal: (id: string) => {
+    opened: boolean;
+    open: () => void;
+    close: () => void;
+};
 
 interface CloseButtonProps {
     onClick: () => void;
@@ -1646,8 +1690,9 @@ declare type QuantityPickerPropsUncontrolled = {
 declare type QuantityPickerProps = {
     initialValue?: number;
     maxValue?: number;
+    testId?: string;
 } & (QuantityPickerPropsControlled | QuantityPickerPropsUncontrolled);
-declare const QuantityPicker: ({ initialValue, maxValue, value, onChange, }: QuantityPickerProps) => JSX.Element;
+declare const QuantityPicker: ({ initialValue, maxValue, value, testId, onChange, }: QuantityPickerProps) => JSX.Element;
 
 declare type SpacingProps = {
     size: number;
@@ -1675,6 +1720,29 @@ interface PackSelectorProps {
 }
 declare const PackSelector: FC<PackSelectorProps>;
 
+interface FiltersProps {
+    values: Filter[];
+    onChange: (newValues: Filter[], filtersState?: FilterChange) => void;
+    tagsColor?: string;
+    filterByText: string;
+    clearAllText: string;
+    filtersSelectText: string;
+    isMobile: boolean;
+    applyText: string;
+    mobileBackArrowClick: () => void;
+    mobileApplyButtonClick: () => void;
+    onResetValues: () => void;
+}
+declare const Filters: ({ values, onChange, tagsColor, filterByText, clearAllText, isMobile, filtersSelectText, applyText, mobileApplyButtonClick, mobileBackArrowClick, onResetValues, }: FiltersProps) => JSX.Element;
+
+interface SearchNavigationProps {
+    returnText?: string;
+    returnUrl?: string;
+    steps?: string[];
+    returnAction?: () => void;
+}
+declare const SearchNavigation: ({ returnText, returnUrl, steps, returnAction, }: SearchNavigationProps) => JSX.Element;
+
 declare global {
     interface Events {
         modal: {
@@ -1714,4 +1782,4 @@ declare const formatPrice: (value: number, { locale, currency }?: {
     currency?: string | undefined;
 }) => string;
 
-export { Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, CTAProps, _default as Card, CardSectionType, CartProductItem, 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, Modal, MultiColorPicker, OfferBanner, OrderBar, Overlay, PackSelector, Pagination, Pattern, PaymentMethod, PaypalButton, Portal, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioGroupOption, RadioInput, Rating, Review, ScrollToTop, SearchBar, SearchBarOptionItem, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, Text, TextButton, Theme, ThemeAssets, ThemeBasicPallete, ThemeBreakpoints, ThemeColorPallete, ThemeColors, ThemeComponent, ThemeFonts, ThemeProvider, ThemeTypography, ThemeVariables, Timer, Tooltip, Totals, WithTestId, decimalFormat, formatPrice, isEmail, isEmpty, isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
+export { Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, CTAProps, _default as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, Color, ColorPickerOption, ComponentPosition, ComponentSize, index_d as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, Filter, FilterChange, FilteringDropdown, Tags as FilteringTags, Filters, FitPredictor, Icon, IconButton, IconProps, IconWithOpacityProps, Image, ImageType, Input, InputValidationType, Modal, MultiColorPicker, OfferBanner, OrderBar, Overlay, PackSelector, Pagination, Pattern, PaymentMethod, PaypalButton, Portal, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioGroupOption, RadioInput, Rating, Review, ScrollToTop, SearchBar, SearchBarOptionItem, SearchNavigation, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, Text, TextButton, Theme, ThemeAssets, ThemeBasicPallete, ThemeBreakpoints, ThemeColorPallete, ThemeColors, ThemeComponent, ThemeFonts, ThemeProvider, ThemeTypography, ThemeVariables, Timer, Tooltip, Totals, WithTestId, decimalFormat, formatPrice, isEmail, isEmpty, isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };