@wix/design-system 1.191.2 → 1.193.0

package/dist/docs/components/ListItemEditableProps.md

@@ -0,0 +1,65 @@
+
+### dataHook
+- type: string
+- description: Applied as data-hook HTML attribute that can be used in the tests
+### className
+- type: string
+- description: Specifies a CSS class name to be appended to the component’s root element.
+### value
+- type: string
+- description: Initial value to display with component render
+### placeholder
+- type: string
+- description: Placeholder to display
+### onApprove
+- type: (value: string) => void
+- description: A callback function triggered by clicking the approve button.
+##### Signature:
+function(value: string) => void
+* `value`: the text contained in the input.
+### onCancel
+- type: () => void
+- description: A callback function triggered by clicking the cancel button.
+##### Signature:
+function() => void
+### cancelButtonTooltipContent
+- type: ReactNode
+- description: Cancel button tooltip content
+### cancelButtonTooltipProps
+- type: TooltipCommonProps
+- description: Cancel button tooltip common props
+### approveButtonTooltipContent
+- type: ReactNode
+- description: Approve button tooltip content
+### approveButtonTooltipProps
+- type: TooltipCommonProps
+- description: Approve button tooltip common props
+### approveButtonDisabledOnEmpty
+- type: boolean
+- description: Make the approve button disabled when input value is empty
+### size
+- type: ListItemEditableSize
+- description: Specifies the size of the input
+### status
+- type: InputStatus
+- description: Input status - use to display an status indication for the user
+### statusMessage
+- type: ReactNode
+- description: The status (error/loading) message to display when hovering the status icon, if not given or empty there will be no tooltip
+### margins
+- type: ListItemEditableMargins
+- description: The type of margin
+### suffix
+- type: ReactNode
+- description: Pass a component you want to show as the suffix of the input, e.g., text, icon
+### autoFocus
+- type: boolean
+- description: Focus the input on mount (standard React input autoFocus)
+### onEnterPressed
+- type: KeyboardEventHandler<HTMLInputElement>
+- description: Defines a callback handler that is called when the user presses enter on the input element
+### onChange
+- type: ChangeEventHandler<HTMLInputElement>
+- description: Defines a standard input onChange callback
+
+

package/dist/docs/components/ListItemSectionProps.md

@@ -0,0 +1,28 @@
+
+### dataHook
+- type: string
+- description: Applied as data-hook HTML attribute that can be used in the tests
+### className
+- type: string
+- description: Specifies a CSS class name to be appended to the component’s root element.
+### type
+- type: ListItemSectionTypes
+- description: A list item section can be
+* `title` - Acts as a title for following list items.
+* `subheader` - Acts as separator between list items for differentiation.
+* `whitespace` - Adds some padding between list items.
+* `divider` - Same as whitespace, but with a line.
+### title
+- type: ReactNode
+- description: Text of the list item
+### suffix
+- type: ReactNode
+- description: Suffix node. Renders TextButton for a string otherwise the node itself.
+### ellipsis
+- type: boolean
+- description: If true, long text won't break into more than one line and will be terminated with an ellipsis
+### onClick
+- type: MouseEventHandler<HTMLElement>
+- description: A callback function called when suffix is clicked
+
+

package/dist/docs/components/ListItemSelectIconProps.md

@@ -0,0 +1,33 @@
+
+### icon
+- type: ReactNode
+- description: Icon of the list item
+### label
+- type: string
+- description: Label of the list item
+### dataHook
+- type: string
+- description: Applied as data-hook HTML attribute that can be used in the tests
+### className
+- type: string
+- description: Specifies a CSS class name to be appended to the component’s root element.
+### selected
+- type: boolean
+- description: If true, the item is selected
+### highlighted
+- type: boolean
+- description: If true, the item is highlighted
+### disabled
+- type: boolean
+- description: If true, the item is disabled
+### showTooltip
+- type: boolean
+- description: If true, the tooltip will be shown on hover
+### tooltipProps
+- type: Omit<TooltipProps, "disabled" | "children" | "content">
+- description: Allows to pass all common tooltip props.
+### onClick
+- type: MouseEventHandler<HTMLElement>
+- description: Callback function triggered when list item is clicked
+
+

package/dist/docs/components/ListItemSelectProps.md

@@ -0,0 +1,54 @@
+
+### dataHook
+- type: string
+- description: Applied as data-hook HTML attribute that can be used in the tests.
+### className
+- type: string
+- description: Specifies a CSS class name to be appended to the component’s root element.
+### checkbox
+- type: boolean
+- description: If true, a checkbox will be shown.
+### prefix
+- type: ReactNode
+- description: Any prefix.
+### title
+- type: ReactNode
+- description: Title of the list item.
+### subtitle
+- type: ReactNode
+- description: Text of the list item subtitle.
+### suffix
+- type: ReactNode
+- description: Any suffix.
+### selected
+- type: boolean
+- description: If true, the item is selected.
+### highlighted
+- type: boolean
+- description: If true, the item is highlighted, if false - highlighted styles are not automatically applied on item hover.
+### disabled
+- type: boolean
+- description: If true, the item is disabled.
+### disabledDescription
+- type: string
+- description: Tooltip description if item is disabled.
+### tooltipProps
+- type: TooltipProps
+- description: Allows to pass all common tooltip props.
+### onClick
+- type: MouseEventHandler<HTMLElement>
+- description: Callback function triggered when list item is clicked.
+### size
+- type: ListItemSelectSizes
+- description: Changing text size.
+### ellipsis
+- type: boolean
+- description: If true, long text won't break into more than one line and will be terminated with an ellipsis.
+### titleMaxLines
+- type: number
+- description: Maximum number of title lines before truncating with an ellipsis.
+### subtitleMaxLines
+- type: number
+- description: Maximum number of subtitle lines before truncating with an ellipsis.
+
+

package/dist/docs/components/LiveRegionProps.md

@@ -0,0 +1,15 @@
+
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute that can be used in the tests
+### className
+- type: string
+- description: Specifies a CSS class name to be appended to the component’s root element.
+### RefAttributes
+- type: All props from RefAttributes that comes from @types/react/index.d.ts
+- description: No description
+### Attributes
+- type: All props from Attributes that comes from @types/react/index.d.ts
+- description: No description
+
+

package/dist/docs/components/LoaderProps.md

@@ -0,0 +1,21 @@
+
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute to be used in the tests
+### size
+- type: LoaderSize
+- description: Controls the size of the loader
+### color
+- type: LoaderColor
+- description: Controls the skin of the loader
+### text
+- type: ReactNode
+- description: Defines a text message to show below the loader
+### status
+- type: LoaderStatus
+- description: Specifies the status of a loader
+### statusMessage
+- type: string
+- description: Defines the message that explains the current status of the loader. Message will be displayed on loader hover. If not given or empty there will be no tooltip.
+
+

package/dist/docs/components/MarketingLayoutProps.md

@@ -0,0 +1,42 @@
+
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute that can be used in the tests.
+### image
+- type: node
+- description: Accepts image URL or a custom element to be displayed on the side of content.
+### imageBackgroundColor
+- type: string
+- description: Specifies image area background color. Can be a keyword from color palette or any supported CSS color value (HEX, RGB, etc.).
+### size
+- type: enum
+- description: Controls the size of the marketing layout.<br/>
+### direction
+- type: enum
+- description: Controls content direction.
+### alignItems
+- type: enum
+- description: Controls the vertical alignment of the content.
+### inverted
+- type: bool
+- description: Flips content layout. If true, image will be displayed on the left side of the content.
+### actions
+- type: node
+- description: Sets marketing layout actions. Accepts single or multiple interactive components. Most commonly contain `<Button/>` or `<TextButton/>`.
+### title
+- type: node
+- description: Sets the marketing layout title. Accepts text string or a custom element.
+### description
+- type: node
+- description: Sets the marketing layout description. Accepts text string or a custom element.
+### badge
+- type: node
+- description: Adds a container for a `<Badge/>` component at the top left corner. Affect component height.
+### hiddenBadge
+- type: bool
+- description: Specifies whether the badge is hidden. Can be used to add additional vertical spacing, if no badge is given.
+### imagePadding
+- type: bool
+- description: Enables padding inside image container. Use with `direction="horizontal"` layout only.
+
+

package/dist/docs/components/MarketingPageLayoutContentProps.md

@@ -0,0 +1,27 @@
+
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute that can be used in tests
+### className
+- type: string
+- description: Specifies a CSS class name to be appended to the component’s root element.
+### size
+- type: enum
+- description: Controls the size of the marketing page layout content
+### overline
+- type: node
+- description: Set overline content. Accepts text string or a custom element.
+### title
+- type: node
+- description: Set the page layout title. Accepts text string or a custom element.
+### subtitle
+- type: node
+- description: Set pages layout subtitle. Accepts text string or a custom element.
+### content
+- type: node
+- description: Sets the main content. Accepts a text paragraph or any custom elements.
+### actions
+- type: node
+- description: Adds a container for page actions. Accepts single or multiple components. Most commonly contains `<Button/>` and `<TextButton/>`.
+
+

package/dist/docs/components/MarketingPageLayoutProps.md

@@ -0,0 +1,33 @@
+
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute that can be used in the tests.
+### className
+- type: string
+- description: Specifies a CSS class name to be appended to the component’s root element.
+### horizontalSize
+- type: enum
+- description: Controls horizontal padding size.
+### verticalSize
+- type: enum
+- description: Controls vertical padding size.
+### removeImageHorizontalPadding
+- type: bool
+- description: Specifies whether to remove image side paddings.
+### removeImageVerticalPadding
+- type: bool
+- description: Specifies whether to remove image vertical paddings.
+### content
+- type: node
+- description: Defines page content. In the majority of cases should use `<MarketingPageLayoutContent/>` component as a content.
+### image
+- type: node
+- description: Accepts link to an image source or a custom media element.
+### footer
+- type: node
+- description: Accepts content to be displayed at the bottom of a page.
+### fullheightImage
+- type: any
+- description: No description
+
+

package/dist/docs/components/MediaOverlayProps.md

@@ -0,0 +1,43 @@
+
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute that can be used in the tests.
+### className
+- type: string
+- description: Specifies a CSS class name to be appended to the component’s root element.
+### skin
+- type: enum
+- description: Sets a default overlay skin.
+### hoverSkin
+- type: enum
+- description: Sets a hover overlay skin.
+### media
+- type: node
+- description: Accept image URL or a custom node as a media background.
+### onClick
+- type: func
+- description: Defines a click handler. When provided, component will be clickable and will have a pointer cursor on hover.
+### children
+- type: node
+- description: Accepts any component as `<MediaOverlay.Content>` content.
+Each element has the following properties:
+- `visible` - define when to display this content. Possible values are:
+  - `default` (default) - content is visible only when not hovered.
+  - `hover` - content is visible only when hovered.
+  - `always` - content is always visible.
+- `placement` - define where to place this content. Possible values are `top-start`,
+`top-end`, `middle` (default), `bottom-end` and `bottom-start`.
+### hovered
+- type: bool
+- description: Toggles hover state in a controlled mode.
+### removeRoundedBorders
+- type: bool
+- description: Removes a default borders radius.
+### borderRadius
+- type: union
+- description: Control border radius of the media container.
+### ariaHidden
+- type: bool
+- description: Adding aria-hidden="true" to an element removes that element and all of its children from the accessibility tree.
+
+

package/dist/docs/components/MessageBoxFunctionalLayoutProps.md

@@ -0,0 +1,85 @@
+
+### dataHook
+- type: string
+- description: applied as data-hook HTML attribute that can be used to create driver in testing
+### hideFooter
+- type: bool
+- description: Hides the footer that contains the action buttons
+### confirmText
+- type: node
+- description: Defines the main action button text
+### confirmPrefixIcon
+- type: element
+- description: Add a prefix icon for the main action button
+### confirmSuffixIcon
+- type: element
+- description: Add a suffix icon for the main action button
+### cancelText
+- type: node
+- description: Defines the secondary action button text
+### cancelPrefixIcon
+- type: element
+- description: Add a prefix icon for the secondary action button
+### cancelSuffixIcon
+- type: element
+- description: Add a suffix icon for the secondary action button
+### theme
+- type: enum
+- description: modal theme color
+### onOk
+- type: func
+- description: Called when the main action (confirm) is clicked
+### onCancel
+- type: func
+- description: Called when the secondary action (cancel) is clicked
+### onClose
+- type: func
+- description: Called when the close button is clicked
+### width
+- type: string
+- description: Specify exact width
+### margin
+- type: string
+- description: Specify exact margin. Use to fine tune position inside other elements.
+When used inside `<Modal>`, beware that `<Modal>` is a flex container, therefore specific flex item CSS rules apply for this margin.
+### title
+- type: node
+- description: Defines the modals's header title
+### children
+- type: any
+- description: The content to be displayed. can be text or some node
+### maxHeight
+- type: union
+- description: Max height. When supplied - will allow internal scroll to the component
+### buttonsHeight
+- type: enum
+- description: Defines the buttons size
+### closeButton
+- type: bool
+- description: Show/hide the close button
+### disableCancel
+- type: bool
+- description: Defines the secondary action button
+### disableConfirmation
+- type: bool
+- description: Defines the main action button
+### noBodyPadding
+- type: bool
+- description: Removes the content padding. Used in custom modal that defines it's own padding
+### footerBottomChildren
+- type: node
+- description: A render slot to display a foot note
+### fullscreen
+- type: bool
+- description: Stretches the component to a full screen mode (with some padding)
+### withEmptyState
+- type: bool
+- description: Changes the internal padding to be used with `<EmptyState/>` component
+### sideActions
+- type: node
+- description: Used to display some side component in the footer, for example `<Checkbox/>`
+### image
+- type: node
+- description: Used to display an illustration on the left side
+
+

package/dist/docs/components/MessageBoxMarketerialLayoutProps.md

@@ -0,0 +1,57 @@
+
+### dataHook
+- type: string
+- description: applied as data-hook HTML attribute that can be used to create driver in testing
+### title
+- type: node
+- description: No description
+### content
+- type: node
+- description: No description
+### primaryButtonLabel
+- type: string
+- description: No description
+### primaryButtonDisabled
+- type: bool
+- description: No description
+### primaryButtonNode
+- type: node
+- description: No description
+### secondaryButtonLabel
+- type: string
+- description: No description
+### onPrimaryButtonClick
+- type: func
+- description: No description
+### onSecondaryButtonClick
+- type: func
+- description: No description
+### imageUrl
+- type: string
+- description: No description
+### onClose
+- type: func
+- description: No description
+### imageComponent
+- type: node
+- description: No description
+### footerBottomChildren
+- type: node
+- description: No description
+### theme
+- type: enum
+- description: No description
+### primaryButtonTheme
+- type: enum
+- description: No description
+### removeButtonsPadding
+- type: bool
+- description: No description
+### width
+- type: string
+- description: No description
+### noBodyPadding
+- type: bool
+- description: No description
+
+

package/dist/docs/components/MessageModalLayoutProps.md

@@ -0,0 +1,60 @@
+
+### className
+- type: string
+- description: Specifies a CSS class name to be appended to the component’s root element.
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute to be used in the tests
+### onCloseButtonClick
+- type: func
+- description: Defines a call-back function after user clicks on the close button
+### onHelpButtonClick
+- type: func
+- description: Defines a call-back function after user clicks on the help button
+### theme
+- type: enum
+- description: Sets the appearance of modal (i.e., changes the skin of primary and secondary action buttons)
+### title
+- type: union
+- description: Sets text title for the modal; can be used in conjunction with other components
+### subtitle
+- type: union
+- description: Sets text subtitle for the modal; can be used in conjunction with other components
+### content
+- type: union
+- description: Contains modal’s message in its middle area. <MessageModalLayout/> children are passed as content, too.
+### actionsSize
+- type: enum
+- description: Determines the action buttons size
+### primaryButtonText
+- type: string
+- description: Sets text label for the primary button
+### primaryButtonOnClick
+- type: func
+- description: Defines a call-back function after user clicks on the primary button
+### primaryButtonProps
+- type: custom
+- description: Passes on any \<Button/\> properties on the primary button
+### secondaryButtonText
+- type: string
+- description: Sets text label for the secondary button
+### secondaryButtonOnClick
+- type: func
+- description: Defines a call-back function after user clicks on the secondary button
+### secondaryButtonProps
+- type: custom
+- description: Passes on any \<Button/\> properties on the secondary button
+### sideActions
+- type: node
+- description: Contains a checkbox or other components at the start of the footer
+### footnote
+- type: node
+- description: Renders supplementary text or other components at the bottom of the modal
+### footnoteSkin
+- type: enum
+- description: Sets the look and feel of the footnote
+### illustration
+- type: union
+- description: Contains a 120x120 px illustration at the left side of the modal
+
+

package/dist/docs/components/MobilePreviewWidgetProps.md

@@ -0,0 +1,21 @@
+
+### dataHook
+- type: string
+- description: Mobile preview widget data hook
+### skin
+- type: enum
+- description: Background skin. To use `custom` skin, set it to `custom` and use the `backgroundColor` prop
+### backgroundColor
+- type: string
+- description: Mobile preview widget background color. Can be set with `design system` colors
+### height
+- type: string
+- description: Sets the height of the component.
+### width
+- type: string
+- description: Sets the width of the component
+### children
+- type: node
+- description: Node to preview
+
+

package/dist/docs/components/ModalMobileLayoutProps.md

@@ -0,0 +1,33 @@
+
+### dataHook
+- type: string
+- description: Applied as data-hook HTML attribute that can be used in the tests
+### className
+- type: string
+- description: Specifies a CSS class name to be appended to the component’s root element.
+### title
+- type: ReactNode
+- description: title node to be displayed in the header strip
+### stickyTitle
+- type: boolean
+- description: If true, the title will be sticky to the top of the modal
+### content
+- type: ReactNode
+- description: content node to be displayed
+### footer
+- type: ReactNode
+- description: footer node to be displayed
+### stickyFooter
+- type: boolean
+- description: If true, the footer will be sticky to the bottom of the modal
+### onOverlayClick
+- type: () => void
+- description: callback for when there's a click on the overlay (in case the modal in not fullscreen)
+### onCloseButtonClick
+- type: MouseEventHandler<HTMLButtonElement>
+- description: callback for when the the close button is clicked.  **Note**: if this prop is not provided, then the close button will not be shown.
+### fullscreen
+- type: boolean
+- description: If true, the modal will take all of the screen
+
+

package/dist/docs/components/ModalPreviewLayoutProps.md

@@ -0,0 +1,42 @@
+
+### dataHook
+- type: string
+- description: Applied as data-hook HTML attribute that can be used in the tests
+### actions
+- type: node
+- description: component to be displayed in header strip to preform actions relevant to the displayed content
+### title
+- type: string
+- description: title text to be displayed in the header strip
+### children
+- type: node
+- description: modal content displayed mid-screen
+### onClose
+- type: func
+- description: callback for when the modal is closed
+### shouldCloseOnOverlayClick
+- type: bool
+- description: boolean to determine whether closing the overlay on click
+### closeButtonTooltipText
+- type: node
+- description: Tooltip close button text
+### prevButtonProps
+- type: shape
+- description: Previous button props
+##### onClick signature:
+function(childIndexDisplayed: number) => void
+* `childIndexDisplayed`: the index of the child component displayed.
+### nextButtonProps
+- type: shape
+- description: Next button props
+##### onClick signature:
+function(childIndexDisplayed: number) => void
+* `childIndexDisplayed`: the index of the child component displayed.
+### startDisplayingAtChildIndex
+- type: number
+- description: Pass an index to start rendering from a specific child component.
+### skin
+- type: enum
+- description: Controls the skin of the component
+
+