bonprix-design-system 0.54.2 → 0.55.0

package/dist/assets/icons/voucher-icon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
+  <path d="M21.4 6.5a.899.899 0 0 0-.808-.895L20.5 5.6h-17a.9.9 0 0 0-.9.9v2.917a2.694 2.694 0 0 1 0 5.163v2.92l.005.092a.899.899 0 0 0 .895.807h17l.092-.005a.899.899 0 0 0 .802-.802l.005-.092v-2.947a2.697 2.697 0 0 1 0-5.109V6.5Zm1.4 3.416a.804.804 0 0 1-.703.796A1.3 1.3 0 0 0 20.968 12l.006.122a1.299 1.299 0 0 0 1.125 1.165c.38.049.701.372.702.796V17.5a2.3 2.3 0 0 1-2.3 2.3h-17a2.3 2.3 0 0 1-2.3-2.3v-3.408c0-.438.342-.766.736-.8l.122-.017a1.297 1.297 0 0 0 1.057-1.15L3.121 12c0-.679-.52-1.236-1.185-1.294a.805.805 0 0 1-.736-.8V6.5a2.3 2.3 0 0 1 2.3-2.3h17a2.3 2.3 0 0 1 2.3 2.3v3.416Z"/>
+  <path d="M14.037 12.929a2.036 2.036 0 1 0 0 4.071 2.036 2.036 0 0 0 0-4.071Zm-.678 2.035a.679.679 0 1 1 1.357 0 .679.679 0 0 1-1.357 0ZM7.93 9.536a2.036 2.036 0 1 1 4.071 0 2.036 2.036 0 0 1-4.071 0Zm2.036-.679a.679.679 0 1 0 0 1.357.679.679 0 0 0 0-1.357Zm4.722-.253a.271.271 0 0 1 .384 0 1.086 1.086 0 0 1 0 1.535l-5.758 5.758a.271.271 0 0 1-.383 0 1.086 1.086 0 0 1 0-1.536l5.757-5.758Z"/>
+</svg>

package/dist/index.d.ts

@@ -11,6 +11,19 @@ import { Ref } from 'react';
 import { RefObject } from 'react';
 import { SplideSlide } from '@splidejs/react-splide';
 
+declare type AccessibilityLabel = {
+    /** Sets an invisible header for the carousel to create a landmark. Do not use both `title` and `aria-labelledby`. */
+    title: string;
+    /** Defines the level of the used header element. Only applicable if using `title` instead of `aria-labelledby`. */
+    titleLevel?: "h2" | "h3" | "h4" | "h5" | "h6";
+    "aria-labelledby"?: never;
+} | {
+    /** Use if a title already exists on the page. Do not use both `title`and `aria-labelledby`. */
+    "aria-labelledby": string;
+    title?: never;
+    titleLevel?: never;
+};
+
 export declare const Accordion: FC<AccordionProps> & {
     Item: typeof Collapsible;
 };
@@ -153,19 +166,30 @@ declare interface BaseProps {
     amount?: number;
 }
 
-declare interface BaseProps_10 extends TextInputBaseProps {
+declare interface BaseProps_10 {
+    /** This property should contain all of the subcomponents of the TabGroup component (TabGroup.Item, TabGroup.Content, TabGroup.List). */
+    children: ReactNode;
+    /** The currently active tab. Should be used in conjunction with the `onChange` prop. */
+    activeTab: string;
+    /** Callback function that is called when the active tab changes. */
+    onChange: (value: string) => void;
+    /** Sets "the variant.  */
+    variant?: TabGroupVariant;
+}
+
+declare interface BaseProps_11 extends TextInputBaseProps {
     /** The placeholder text for the input field. */
     placeholder?: string;
     /** Reference to the input element. */
     inputRef?: RefObject<HTMLTextAreaElement>;
 }
 
-declare interface BaseProps_11 extends TextInputBaseProps {
+declare interface BaseProps_12 extends TextInputBaseProps {
     /** Reference to the input element. */
     inputRef?: RefObject<HTMLInputElement>;
 }
 
-declare interface BaseProps_12 extends TextInputBaseProps {
+declare interface BaseProps_13 extends TextInputBaseProps {
     /** Callback that is triggered when the search button is clicked. */
     onSearch: () => void;
     /** Reference to the input element. */
@@ -232,6 +256,8 @@ declare interface BaseProps_4 {
     variant?: "primary" | "secondary" | "tertiary";
     /** Standard HTML global attribute. Controls, if the button can be focused and how. Read more on <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex">MDN, Attributes - tabindex</a>. */
     tabIndex?: number;
+    /** If `true`, inverts the colors of the component. */
+    inverted?: boolean;
 }
 
 declare interface BaseProps_5 {
@@ -248,6 +274,8 @@ declare interface BaseProps_5 {
     tabIndex?: number;
     /** Alternative label for the screen reader. This can for example be used, if a proper name cannot be setup because of the position in the text. */
     srLabel?: string;
+    /** If `true`, inverts the colors of the component. */
+    inverted?: boolean;
 }
 
 declare interface BaseProps_6 {
@@ -266,6 +294,17 @@ declare interface BaseProps_6 {
 }
 
 declare interface BaseProps_7 {
+    /** Current price of the item. Available and mandatory for all variants except `no-price`. */
+    finalPrice: number;
+    /** If set, the voucher is displayed with the given percentage. Optional for all variants except `no-price`. Must be used alongside `voucherDiscount` and `startPrice`! */
+    discountInPercent?: number;
+    /** The price of the item without voucher discount. Optional for all variants except `no-price`. Must be used alongside `discountInPercent` and `startPrice`! */
+    voucherDiscount?: number;
+    /** The price of the item without discount. Optional for all variants except `no-price`. Must be used alongside `discountInPercent` and `voucherDiscount`! */
+    startPrice?: number;
+}
+
+declare interface BaseProps_8 {
     /** The id of the input field. */
     id?: string;
     /** The visible label for the input field. */
@@ -290,7 +329,7 @@ declare interface BaseProps_7 {
     ref?: RefObject<HTMLButtonElement>;
 }
 
-declare interface BaseProps_8 {
+declare interface BaseProps_9 {
     /** The visible label. **/
     label: string;
     /** If `true`, the switch will be disabled. */
@@ -301,17 +340,6 @@ declare interface BaseProps_8 {
     description?: string;
 }
 
-declare interface BaseProps_9 {
-    /** This property should contain all of the subcomponents of the TabGroup component (TabGroup.Item, TabGroup.Content, TabGroup.List). */
-    children: ReactNode;
-    /** The currently active tab. Should be used in conjunction with the `onChange` prop. */
-    activeTab: string;
-    /** Callback function that is called when the active tab changes. */
-    onChange: (value: string) => void;
-    /** Sets "the variant.  */
-    variant?: TabGroupVariant;
-}
-
 declare interface BasicProps {
     /** The title. */
     title?: string;
@@ -342,6 +370,17 @@ declare interface BestProps extends TwoPriceProps {
 
 export declare const BottomSheet: FC<BottomSheetProps> & Subcomponents;
 
+declare interface BottomSheetButtonsBaseProps {
+    /** The label of the button. */
+    children: string;
+    /** If used, an icon will be additionally shown. The value is a name of one icon from our icon set. */
+    icon?: Icon_2;
+    /** The position of the icon relative to the content. */
+    iconPosition?: "start" | "end";
+    /** Size of the button. */
+    size?: Exclude<ButtonSize, "small">;
+}
+
 export declare interface BottomSheetProps {
     /** All of the subcomponents should be placed inside this property. */
     children: ReactNode;
@@ -349,10 +388,14 @@ export declare interface BottomSheetProps {
     isOpen: boolean;
     /** Callback function, that is triggered when the BottomSheet is attempted to be closed. `isOpen` should be set appropriately.*/
     onClose: () => void;
+    /** Callback to execute when clicking back icon */
+    onBack?: () => void;
     /** The z-index of the BottomSheet. */
     zIndex?: number;
     /** A reference to the root element of the BottomSheet. */
     ref?: Ref<HTMLDivElement>;
+    /** If `true`, the horizontal padding around the content will be removed. */
+    disableHorizontalPadding?: boolean;
 }
 
 export declare const Breadcrumb: FC<BreadcrumbProps>;
@@ -440,13 +483,9 @@ export declare interface CarouselProps {
 
 export declare const CarouselV2: FC<CarouselV2Props> & SubComponents;
 
-export declare interface CarouselV2Props {
+export declare type CarouselV2Props = AccessibilityLabel & {
     /** The content of the carousel. Here, all of the subcomponents should be placed. */
     children: ReactNode;
-    /** Sets a visual header for the carousel. */
-    title: string;
-    /** Defines the level of the used header element. */
-    titleLevel?: "h2" | "h3" | "h4" | "h5" | "h6";
     /** Amount of slides that will be visible at the same time, thus building a page. */
     perPage?: number | ResponsiveNumber;
     /** Amount of slides to move per arrow icon button click. */
@@ -469,9 +508,7 @@ export declare interface CarouselV2Props {
     disableHorizontalPadding?: boolean;
     /** Moves to a certain page imperatively. It's a one-time operation and is not supposed to fully control Carousel from the outside. */
     moveToPage?: number;
-    /** Can be used if a title already exists on the page. Do not use both `title`and `aria-labelledby`. */
-    "aria-labelledby"?: string;
-}
+};
 
 export declare const Checkbox: FC<CheckboxProps>;
 
@@ -604,14 +641,14 @@ declare interface ControlledInputProps_2 extends Omit<ControlGroupProps, "compon
     onChange: (value: string) => void;
 }
 
-declare interface ControlledInputProps_3 extends BaseProps_8 {
+declare interface ControlledInputProps_3 extends BaseProps_9 {
     /** Controls, whether the switch is checked or not. Should be used in conjunction with `onChange`, if controlled. */
     checked: boolean;
     /** Callback which is triggered when the checked state changes. Should be used in conjunction with `checked`, if controlled from outside. Optional otherwise. */
     onChange: (checked: boolean) => void;
 }
 
-declare type ControlledInputProps_4 = BaseProps_11 & {
+declare type ControlledInputProps_4 = BaseProps_12 & {
     /** The current value of the input field. Should be used in conjunction with `onChange`, when controlling the input. Should be `undefined` otherwise. */
     value: string;
     /** The default value of the input field. Should be used when the input is uncontrolled. */
@@ -629,7 +666,7 @@ declare interface ControlledInputProps_5 extends TextFieldBaseProps {
     onChange: (value: string) => void;
 }
 
-declare interface ControlledInputProps_6 extends BaseProps_12 {
+declare interface ControlledInputProps_6 extends BaseProps_13 {
     /** The current value of the input field. Should be used in conjunction with `onChange`, when controlling the input. Should be `undefined` otherwise. */
     value: string;
     defaultValue?: never;
@@ -637,7 +674,7 @@ declare interface ControlledInputProps_6 extends BaseProps_12 {
     onChange: (value: string) => void;
 }
 
-declare interface ControlledProps extends BaseProps_10 {
+declare interface ControlledProps extends BaseProps_11 {
     /** The current value of the input field. Should be used in conjunction with `onChange`, when controlling the input. Should be `undefined` otherwise. */
     value: string;
     /** The default value of the input field. Should be used when the input is uncontrolled. */
@@ -646,7 +683,7 @@ declare interface ControlledProps extends BaseProps_10 {
     onChange: (value: string) => void;
 }
 
-declare interface ControlledSelectProps extends BaseProps_7 {
+declare interface ControlledSelectProps extends BaseProps_8 {
     /** The current value of the select. Should be used in conjunction with `onValueChange`. */
     value: string;
     /** The default value of the select. Should be used when select is uncontrolled. */
@@ -752,7 +789,7 @@ export declare const IconButton: FC<IconButtonProps>;
 
 export declare type IconButtonProps = AsLink_3 | AsButton_3;
 
-declare const iconNames: readonly ["account-balanced", "address-book", "ai", "alarm-clock", "alert", "app", "apple", "armchair", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "back", "bell", "bra", "briefcase", "cake-piece-full", "cake-piece", "calendar", "cart", "catalog", "chat", "check-bold", "check", "child", "closer", "clothing", "clothing-size", "communication", "connection", "control-panel", "cookie", "copy", "credit-card", "crown", "culture", "curtain-almost-dark", "curtain-dark", "curtain-opaque", "curtain-semi-transparent", "curtain-transparent", "customer", "delivery", "denied", "desktop", "diamond", "discount", "dots", "download", "edit", "education", "email", "error", "exchange", "family", "faq", "fast-delivery", "feedback-negative", "feedback-positive", "first-aid", "fitness", "fossil-fuel", "free-delivery", "friendship", "global-warming", "glossary", "handshake", "hanger", "hashtag", "health", "heart-eyes-emoji", "heart-full", "heart", "help", "hint", "home", "home2", "image-placeholder", "info", "invoice", "light-bulb-heart", "light-bulb", "lightning", "location", "locations", "lock", "lock-open", "logged-in", "logout", "mail", "menu", "minus", "newsletter", "not-yet-available", "order", "order2", "out-of-stock", "pause", "personal-data", "phone", "pin", "pinch-zoom", "plane", "play", "plus", "prepaid", "print", "process", "production-site", "puzzle", "qr-code", "quality", "question", "radio", "recently-viewed", "recycling", "religion", "return", "review-full", "review", "rocket", "roots", "scale", "search-categories", "search-form-arrow", "search", "sepa", "service", "share", "shopping-bag", "signpost", "signpost-single", "similar-products", "size", "social", "sold-out", "sort", "spark", "store", "success", "suitcase", "sustainable-animal-welfare", "sustainable-energy-efficient", "sustainable-natural-cosmetics", "sustainable-organic-materials", "sustainable-production", "sustainable-recyclable-design", "sustainable-recycling", "sustainable-resource", "sustainable-social-initiatives", "swords", "tablet", "teacup", "thumb-down-full", "thumb-down", "thumb-up-full", "thumb-up", "trash-bin", "tv", "user", "visibility", "visibility-off", "wallet", "water-pollution", "water-usage", "whatsapp-bell", "whatsapp-phone", "zoom-in", "zoom-out"];
+declare const iconNames: readonly ["account-balanced", "address-book", "ai", "alarm-clock", "alert", "app", "apple", "armchair", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "back", "bell", "bra", "briefcase", "cake-piece-full", "cake-piece", "calendar", "cart", "catalog", "chat", "check-bold", "check", "child", "closer", "clothing", "clothing-size", "communication", "connection", "control-panel", "cookie", "copy", "credit-card", "crown", "culture", "curtain-almost-dark", "curtain-dark", "curtain-opaque", "curtain-semi-transparent", "curtain-transparent", "customer", "delivery", "denied", "desktop", "diamond", "discount", "dots", "download", "edit", "education", "email", "error", "exchange", "family", "faq", "fast-delivery", "feedback-negative", "feedback-positive", "first-aid", "fitness", "fossil-fuel", "free-delivery", "friendship", "global-warming", "glossary", "handshake", "hanger", "hashtag", "health", "heart-eyes-emoji", "heart-full", "heart", "help", "hint", "home", "home2", "image-placeholder", "info", "invoice", "light-bulb-heart", "light-bulb", "lightning", "location", "locations", "lock", "lock-open", "logged-in", "logout", "mail", "menu", "minus", "newsletter", "not-yet-available", "order", "order2", "out-of-stock", "pause", "personal-data", "phone", "pin", "pinch-zoom", "plane", "play", "plus", "prepaid", "print", "process", "production-site", "puzzle", "qr-code", "quality", "question", "radio", "recently-viewed", "recycling", "religion", "return", "review-full", "review", "rocket", "roots", "scale", "search-categories", "search-form-arrow", "search", "sepa", "service", "share", "shopping-bag", "signpost", "signpost-single", "similar-products", "size", "social", "sold-out", "sort", "spark", "store", "success", "suitcase", "sustainable-animal-welfare", "sustainable-energy-efficient", "sustainable-natural-cosmetics", "sustainable-organic-materials", "sustainable-production", "sustainable-recyclable-design", "sustainable-recycling", "sustainable-resource", "sustainable-social-initiatives", "swords", "tablet", "teacup", "thumb-down-full", "thumb-down", "thumb-up-full", "thumb-up", "trash-bin", "tv", "user", "visibility", "visibility-off", "voucher", "wallet", "water-pollution", "water-usage", "whatsapp-bell", "whatsapp-phone", "zoom-in", "zoom-out"];
 
 export declare interface IconProps {
     /** One of the valid icon variants. */
@@ -825,6 +862,11 @@ declare interface NoPriceProps {
     size: "small" | "large";
 }
 
+declare interface NoPriceProps_2 {
+    /** One of the valid variants of the price component. */
+    variant: "no-price";
+}
+
 declare const Notification_2: FC<NotificationProps>;
 export { Notification_2 as Notification }
 
@@ -872,19 +914,25 @@ export declare const Price: FC<PriceProps>;
 
 export declare type PriceProps = RegularProps | SaleProps | BestProps | TopDealProps | NoPriceProps;
 
-declare const PrimaryButton: ({ children, onClick, type, form }: PrimaryButtonProps) => default_2.JSX.Element;
+export declare const PriceStacked: (props: PriceStackedProps) => default_2.JSX.Element;
+
+export declare type PriceStackedProps = RegularProps_2 | SaleProps_2 | NoPriceProps_2;
+
+declare const PrimaryButton: ({ children, onClick, type, form, icon, iconPosition, size }: PrimaryButtonProps) => default_2.JSX.Element;
 
 declare const PrimaryButton_2: FC<Props_2>;
 
-declare interface PrimaryButtonProps {
-    /** The label of the button. */
-    children: string;
+declare interface PrimaryButtonProps extends BottomSheetButtonsBaseProps {
     /** Callback, which is triggered when the button is activated. */
     onClick?: (event: default_2.MouseEvent<HTMLButtonElement>) => void;
     /** The type attribute of the button. */
     type?: ButtonTypeAttribute;
     /** Standard HTML attribute. Read more on <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#form">MDN, Button Element - form</a>. */
     form?: string;
+    /** If `true`, the button will be disabled and thus not interactable.  */
+    disabled?: boolean;
+    /** If `true`, a loading spinner will be shown instead of the content. */
+    loading?: boolean;
 }
 
 declare type Props = ControlledInputProps | UncontrolledInputProps;
@@ -942,6 +990,10 @@ declare interface Props_5 {
     value: string;
     /** The label of the radio button. */
     label: string;
+    /** Suffix that will be placed on the far right side inside the `<label>` to further visualize the item's value, e.g. with icon(s) or logo(s). Make sure to only include allowed children here to avoid irregular HTML markup. */
+    suffix?: ReactNode;
+    /** Additional content to be displayed when item is selected. */
+    additional?: ReactNode;
 }
 
 declare interface Props_6 {
@@ -974,7 +1026,7 @@ declare interface Props_9 {
 
 export declare const RadioGroup: FC<RadioGroupProps> & Subcomponents_6;
 
-declare const RadioGroupItem: FC<Props_5>;
+declare const RadioGroupItem: ({ value, label, additional, suffix }: Props_5) => default_2.JSX.Element;
 
 export declare type RadioGroupProps = ControlledInputProps_2 | UncontrolledInputProps_2;
 
@@ -1005,6 +1057,11 @@ declare interface RegularProps extends BaseProps_6 {
     variant: "regular";
 }
 
+declare interface RegularProps_2 extends BaseProps_7 {
+    /** One of the valid variants of the price component. */
+    variant: "regular";
+}
+
 export declare const RemovedItemPlaceholder: FC<RemovedItemPlaceholderProps>;
 
 export declare interface RemovedItemPlaceholderProps {
@@ -1022,6 +1079,11 @@ declare interface SaleProps extends TwoPriceProps {
     variant: "sale";
 }
 
+declare interface SaleProps_2 extends BaseProps_7 {
+    /** One of the valid variants of the price component. */
+    variant: "sale";
+}
+
 export declare const ScrollArea: FC<ScrollAreaProps>;
 
 export declare interface ScrollAreaProps {
@@ -1041,14 +1103,11 @@ export declare const SearchField: FC<SearchFieldProps>;
 
 export declare type SearchFieldProps = ControlledInputProps_6 | UncontrolledInputProps_6;
 
-declare const SecondaryButton: ({ children }: SecondaryButtonProps) => default_2.JSX.Element;
+declare const SecondaryButton: ({ children, icon, iconPosition, size }: SecondaryButtonProps) => default_2.JSX.Element;
 
 declare const SecondaryButton_2: FC<Props_3>;
 
-declare interface SecondaryButtonProps {
-    /** The label of the button. */
-    children: string;
-}
+declare type SecondaryButtonProps = BottomSheetButtonsBaseProps;
 
 export declare const Select: FC<SelectProps> & Subcomponents_7;
 
@@ -1234,7 +1293,7 @@ export declare const Switch: FC<SwitchProps>;
 
 export declare type SwitchProps = ControlledInputProps_3 | UncontrolledInputProps_3;
 
-declare interface TabBoxProps extends BaseProps_9 {
+declare interface TabBoxProps extends BaseProps_10 {
     variant?: "tab-box";
     /** If true, the tab items will occupy the available width. */
     fullWidth?: boolean;
@@ -1257,7 +1316,7 @@ export declare type TabGroupProps = TabBoxProps | TabProps;
 
 declare type TabGroupVariant = "tab" | "tab-box";
 
-declare interface TabProps extends BaseProps_9 {
+declare interface TabProps extends BaseProps_10 {
     variant?: "tab";
     fullWidth?: never;
 }
@@ -1435,6 +1494,7 @@ export declare const tailwindConfig: {
                     error: string;
                     alert: string;
                     success: string;
+                    "success-inverse": string;
                     info: string;
                 };
                 sale: string;
@@ -1600,14 +1660,14 @@ declare interface UncontrolledInputProps_2 extends Omit<ControlGroupProps, "comp
     onChange?: (value: string) => void;
 }
 
-declare interface UncontrolledInputProps_3 extends BaseProps_8 {
+declare interface UncontrolledInputProps_3 extends BaseProps_9 {
     checked?: never;
     /** The default value of the switch. Should be used when the switch is uncontrolled. */
     defaultChecked: boolean;
     onChange?: (checked: boolean) => void;
 }
 
-declare type UncontrolledInputProps_4 = BaseProps_11 & {
+declare type UncontrolledInputProps_4 = BaseProps_12 & {
     value?: never;
     defaultValue: string;
     onChange?: (value: string) => void;
@@ -1619,20 +1679,20 @@ declare interface UncontrolledInputProps_5 extends TextFieldBaseProps {
     onChange?: (value: string) => void;
 }
 
-declare interface UncontrolledInputProps_6 extends BaseProps_12 {
+declare interface UncontrolledInputProps_6 extends BaseProps_13 {
     value?: never;
     /** The default value of the input field. Should be used when the input is uncontrolled. */
     defaultValue: string;
     onChange?: (value: string) => void;
 }
 
-declare interface UncontrolledProps extends BaseProps_10 {
+declare interface UncontrolledProps extends BaseProps_11 {
     value?: never;
     defaultValue: string;
     onChange?: (value: string) => void;
 }
 
-declare interface UncontrolledSelectProps extends BaseProps_7 {
+declare interface UncontrolledSelectProps extends BaseProps_8 {
     value?: never;
     defaultValue: string;
     onValueChange?: (value: string) => void;