bonprix-design-system 0.59.0 → 0.60.0

package/README.md

@@ -1,6 +1,56 @@
 [![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@main/badge/badge-storybook.svg)](https://storybook.bonprix.net/)
 [![semantic-release: angular](https://img.shields.io/badge/semantic--release-angular-e10079?logo=semantic-release)](https://github.com/semantic-release/semantic-release)
 
-# design-system
+# Design System
 
-This repository contains design system's icons, fonts and a component library for the web plattform.
+This repository contains the design system's icons, fonts and a component library for the web plattform.
+
+## Getting Started
+
+This guide will walk you through setting up the project for local development.
+
+### Prerequisites
+
+The required Node.js version is specified in the `.nvmrc` file. Use a version manager like `nvm` or `asdf` to install and use the correct version.
+
+- Using `nvm`:
+  ```bash
+  nvm install
+  nvm use
+  ```
+- Using `asdf`:
+  ```bash
+  asdf install
+  ```
+
+### Setup
+
+1.  **Install dependencies:**
+    ```bash
+    npm install
+    ```
+2.  **Initialize Git hooks:**
+    This command sets up hooks to ensure code consistency and quality.
+    ```bash
+    npm run setup
+    ```
+
+### Local Development
+
+There are two environments available for developing and testing components.
+
+- **Storybook:**
+  For developing components in isolation. This is the primary development environment.
+
+  ```bash
+  npm run storybook
+  ```
+
+  Storybook will be running at `http://localhost:6006`.
+
+- **Vite Playground:**
+  For testing components in a plain Vite application.
+  ```bash
+  npm run dev
+  ```
+  The playground will be running at `http://localhost:5173`.

package/dist/index.d.ts

@@ -520,6 +520,11 @@ export declare type CheckboxProps = {
 
 export declare const Collapsible: FC<CollapsibleProps>;
 
+declare interface CollapsibleImperativeHandle {
+    open: () => void;
+    close: () => void;
+}
+
 export declare interface CollapsibleProps {
     /** Brief summary or label for the content within the component. */
     title: ReactNode;
@@ -531,6 +536,8 @@ export declare interface CollapsibleProps {
     initiallyOpened?: boolean;
     /** A reference to the root element. */
     rootRef?: RefObject<HTMLDivElement | null>;
+    /** A reference to the imperative handle of the component. */
+    imperativeRef?: Ref<CollapsibleImperativeHandle>;
     /** The id of the collapsible component. */
     id?: string;
     /** Callback function that is called when the collapsible component is opened. */
@@ -629,14 +636,14 @@ declare type ControlledInputProps_4 = BaseProps_12 & {
     onChange: (value: string) => void;
 };
 
-declare interface ControlledInputProps_5 extends TextFieldBaseProps {
+declare type ControlledInputProps_5 = TextFieldBaseProps & {
     /** 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. */
     defaultValue?: never;
     /** Callback that is triggered when the input value changes. Should be used in conjunction with `value`, when controlling the input. Optional otherwise. */
     onChange: (value: string) => void;
-}
+};
 
 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. */
@@ -664,6 +671,15 @@ declare interface ControlledSelectProps extends BaseProps_8 {
     onValueChange: (value: string) => void;
 }
 
+declare interface DatelikeFieldBaseProps extends TextInputBaseProps {
+    /** The type of the input field. Refers to and is a subset of the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types" target="_blank">HTML input type attribute</a>. */
+    type?: "date" | "datetime-local" | "time";
+    /** If `true`, hides the clear icon button. Always true for date-like types. */
+    hideClear?: never;
+    mask?: never;
+    unmask?: never;
+}
+
 export declare const Dialog: FC<DialogProps> & Subcomponents_3;
 
 export declare interface DialogProps {
@@ -1008,6 +1024,17 @@ export declare interface RatingProps {
     size?: "small" | "large";
 }
 
+declare interface RegularFieldBaseProps extends TextInputBaseProps {
+    /** The type of the input field. Refers to and is a subset of the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types" target="_blank">HTML input type attribute</a>. */
+    type?: "text" | "email";
+    /** If `true`, hides the clear icon button. Always true for date-like types. */
+    hideClear?: boolean;
+    /** Any of valid mask types. We use <a href="https://imask.js.org/" target="_blank">IMask</a> behind the scenes. */
+    mask?: string;
+    /** If `true`, the input will return the unmasked/row value, instead of modified one. Will only have effect when `mask` is used. */
+    unmask?: boolean;
+}
+
 declare interface RegularImage extends BasicProps {
     /** The source set for the image, containing different resolutions. */
     srcSet: SourceSetMapper;
@@ -1161,7 +1188,15 @@ declare interface SheetProps {
     children: ReactNode;
     /** Toggles the visibility of the sheet. Should be used in conjunction with the `onClose` property. */
     isOpen: boolean;
-    /** Callback function, that is triggered when the sheet is attempted to be closed. `isOpen` should be set appropriately. */
+    /** Callback function, that is triggered when the sheet is attempted to be closed.
+     *
+     * It will be called in following cases:
+     * - Click on backdrop
+     * - Swipe down to close
+     * - Click on "close" icon button in the upper-right corner
+     * - Click on any button (PrimaryButton or SecondaryButton)
+     *
+     * Should be used in conjunction with `isOpen`. */
     onClose: () => void;
     /** Callback to execute when clicking back icon. */
     onBack?: () => void;
@@ -1174,7 +1209,15 @@ declare interface SheetProps_2 {
     children: ReactNode;
     /** Toggles the visibility of the sheet. Should be used in conjunction with the `onClose` property. */
     isOpen: boolean;
-    /** Callback function, that is triggered when the sheet is attempted to be closed. `isOpen` should be set appropriately. */
+    /** Callback function, that is triggered when the sheet is attempted to be closed.
+     *
+     * It will be called in following cases:
+     * - Click on backdrop
+     * - Swipe down to close
+     * - Click on "close" icon button in the upper-right corner
+     * - Click on any button (PrimaryButton or SecondaryButton)
+     *
+     * Should be used in conjunction with `isOpen`. */
     onClose: () => void;
     /** Callback to execute when clicking back icon. */
     onBack?: () => void;
@@ -1228,7 +1271,7 @@ export declare interface ShowMoreListProps {
     /** Whether the interaction box is hidden in fully expanded state. */
     hideInteractionBoxWhenOpen?: boolean;
     /** Whether the corners of inner containers (header, interaction box) are rounded. */
-    roundedCorners?: boolean;
+    roundedCorners?: "none" | "outside" | "all";
     /** Slot to contain the component's children. `ShowMoreList.Item`s must be used for all countable children. Combine with your own `<li>` elements for customization (e.g. categories). */
     children: ReactNode;
     /** How many items should be shown initially. */
@@ -1459,6 +1502,9 @@ export declare const tailwindConfig: {
                 bonprixRegular: [string, string];
                 sourceSans3: [string, string];
             };
+            borderRadius: {
+                0.5: string;
+            };
             keyframes: {
                 fadeIn: {
                     from: {
@@ -1592,16 +1638,7 @@ export declare type TextareaProps = ControlledProps | UncontrolledProps;
 
 export declare const TextField: FC<TextFieldProps>;
 
-declare interface TextFieldBaseProps extends TextInputBaseProps {
-    /** The type of the input field. Refers to and is a subset of the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types" target="_blank">HTML input type attribute</a>. */
-    type?: "text" | "email";
-    /** If `true`, hides the clear icon button. */
-    hideClear?: boolean;
-    /** Any of valid mask types. We use <a href="https://imask.js.org/" target="_blank">IMask</a> behind the scenes. */
-    mask?: string;
-    /** If `true`, the input will return the unmasked/row value, instead of modified one. Will only have effect when `mask` is used. */
-    unmask?: boolean;
-}
+declare type TextFieldBaseProps = DatelikeFieldBaseProps | RegularFieldBaseProps;
 
 export declare type TextFieldProps = ControlledInputProps_5 | UncontrolledInputProps_5;
 
@@ -1746,11 +1783,11 @@ declare type UncontrolledInputProps_4 = BaseProps_12 & {
     onChange?: (value: string) => void;
 };
 
-declare interface UncontrolledInputProps_5 extends TextFieldBaseProps {
+declare type UncontrolledInputProps_5 = TextFieldBaseProps & {
     value?: never;
     defaultValue: string;
     onChange?: (value: string) => void;
-}
+};
 
 declare interface UncontrolledInputProps_6 extends BaseProps_13 {
     value?: never;