@wix/design-system 1.191.2 → 1.193.0

package/dist/docs/components/BreadcrumbsProps.md

@@ -0,0 +1,29 @@
+
+### items
+- type: arrayOf
+- description: Describes each breadcrumbs item:
+- `id` (required) - gives an item numeric identifier
+- `value` (required) - sets the item label to be shown on breadcrumbs
+- `link` - stores a link which user is directed to after clicking on an item
+- `customElement` - contains and renders a custom component or `<a>` link instead of an item value
+- `disabled` - disables an item
+### onClick
+- type: func
+- description: Defines a function which is called when a user clicks on an item
+### activeId
+- type: union
+- description: Defines which breadcrumbs item is currently active
+### size
+- type: enum
+- description: Controls the component size
+### itemMaxWidth
+- type: union
+- description: Sets the maximum width of each item value in px. Longer items get truncated with ellipsis.
+### theme
+- type: enum
+- description: Controls the component appearance
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute to be used in the tests
+
+

package/dist/docs/components/BrowserPreviewWidgetProps.md

@@ -0,0 +1,24 @@
+
+### dataHook
+- type: string
+- description: Applied as data-hook HTML attribute that can be used in the tests
+### 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
+### browserBarSize
+- type: enum
+- description: Browser bar height
+### children
+- type: node
+- description: Node to preview
+
+

package/dist/docs/components/ButtonProps.md

@@ -0,0 +1,53 @@
+
+### ButtonHTMLAttributes
+- type: All props from ButtonHTMLAttributes that comes from @types/react/index.d.ts
+- description: No description
+### HTMLAttributes
+- type: All props from HTMLAttributes that comes from @types/react/index.d.ts
+- description: No description
+### AriaAttributes
+- type: All props from AriaAttributes that comes from @types/react/index.d.ts
+- description: No description
+### DOMAttributes
+- type: All props from DOMAttributes that comes from @types/react/index.d.ts
+- description: No description
+### skin
+- type: ButtonSkin
+- description: Specifies the skin of a button.
+### priority
+- type: ButtonPriority
+- description: Specifies the priority of a button.
+### size
+- type: ButtonSize
+- description: Controls the size of a button.
+### fullWidth
+- type: boolean
+- description: Sets button width to fill a 100% of a parent container width.
+### suffixIcon
+- type: IconElement
+- description: Pass an icon or a component to display at the end of a label (e.g., svg, image, etc.)
+### prefixIcon
+- type: IconElement
+- description: Pass an icon or a component to display at the front of a label (e.g., svg, image, etc.)
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute that can be used in the tests.
+### ellipsis
+- type: boolean
+- description: Specifies whether component handles text overflow with ellipsis. If enabled, label that exceed available space will be displayed inside of a tooltip when user hover over a button.
+### showTooltip
+- type: boolean
+- description: Specifies whether the full button label is displayed in a tooltip when label overflows available space.
+
+Behaviour is enabled by default. Set property value to false to show ellipsis without a tooltip.
+### tooltipProps
+- type: TooltipCommonProps
+- description: Allows to pass all common tooltip props. Use it to customize a tooltip created from text ellipsis.
+### as
+- type: "object" | "small" | "form" | "slot" | "style" | "title" | "button" | "search" | "article" | "dialog" | "figure" | "img" | "link" | "main" | "menu" | "option" | "table" | "time" | ... 94 more ... | ComponentType<...>
+- description: Renders component as any other component or a given HTML tag.
+### AnchorHTMLAttributes
+- type: All props from AnchorHTMLAttributes that comes from @types/react/index.d.ts
+- description: No description
+
+

package/dist/docs/components/CalendarPanelFooterProps.md

@@ -0,0 +1,27 @@
+
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute that can be used in the tests
+### primaryActionLabel
+- type: string
+- description: Defines primary (submit) action label
+### secondaryActionLabel
+- type: string
+- description: Defines secondary (cancel) action label
+### primaryActionDisabled
+- type: bool
+- description: Specifies whether primary action is disabled
+### primaryActionOnClick
+- type: func
+- description: Defines a callback function which is called every time primary button is clicked
+### secondaryActionOnClick
+- type: func
+- description: Defines a callback function which is called every time secondary button is clicked
+### selectedDays
+- type: union
+- description: Defines an active date or a date range selection
+### dateToString
+- type: func
+- description: Formats date into a string for displaying the current selected days. Receives a Date instance (not undefined).
+
+

package/dist/docs/components/CalendarPanelProps.md

@@ -0,0 +1,48 @@
+
+### 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.
+### onChange
+- type: func
+- description: Defines a callback function  which is called whenever the user selects a day or a date range in the calendar
+### onClose
+- type: func
+- description: Defines a callback function which is called whenever user press `escape` or click outside of the element
+### excludePastDates
+- type: bool
+- description: Specifies whether past dates should be selectable or not
+### filterDate
+- type: func
+- description: Specifies dates that are selectable. Only the dates that match defined criteria will be available for a user to select.
+### value
+- type: union
+- description: Defines a selected date or date range
+### selectionMode
+- type: enum
+- description: Specifies if user can select a single day or a date range
+### showYearDropdown
+- type: bool
+- description: Specifies whether to display a year selection dropdown inside of a calendar
+### showMonthDropdown
+- type: bool
+- description: Specifies whether to display a month selection dropdown inside of a calendar
+### shouldCloseOnSelect
+- type: bool
+- description: Specifies whether calendar should close on a day selection
+### locale
+- type: union
+- description: Specifies date picker instance locale
+### numOfMonths
+- type: number
+- description: Defines a number of months to display inside of a panel
+### presets
+- type: arrayOf
+- description: Defines an array of predefined calendar presets that are displayed as select items on the left side of a panel
+### footer
+- type: func
+- description: Renders a panel footer. Pass `<CalendarPanelFooter/>` in all common cases. `({selectedDays, submitDisabled}) => void` - `selectedDays` is the same as the CalendarPanel's `value` prop. `submitDisabled` is true when the current selectedDays is not valida for submission.
+
+

package/dist/docs/components/CalendarProps.md

@@ -0,0 +1,100 @@
+
+### dataHook
+- type: string
+- description: Applies as data-hook HTML attribute that can be used in the tests
+### autoFocus
+- type: bool
+- description: Focus selected day automatically when component mounts or updates
+### numOfMonths
+- type: enum
+- description: Allows to display multiple months at once. Currently it shows 1 or 2 months only.
+### firstDayOfWeek
+- type: enum
+- description: First day of the week, allowing only from 0 to 6 (Sunday to Saturday). The default value is 1 which means Monday.
+### className
+- type: string
+- description: Specifies a CSS class name to be appended to the component’s root element.
+### onChange
+- type: func
+- description: Provides a callback function when day in selected in the calendar
+### onClose
+- type: func
+- description: Defines a callback function that is  called whenever a user presses escape, clicks outside of the element or a date is selected and `shouldCloseOnSelect` is set. Receives an event as a first argument.
+### onKeyDown
+- type: func
+- description: Provides a callback function when any key is clicked in the calendar
+### onMonthChange
+- type: func
+- description: Defines a callback function that is called with the date of the first day of the month whenever the user selects a month in the calendar
+### excludePastDates
+- type: bool
+- description: Specify whether past dates should be selectable or not
+### filterDate
+- type: func
+- description: ##### Specify selectable dates:
+ * `param` {Date} `date` - a date to check
+ * `return` {boolean} - true if `date` should be selectable, false otherwise
+### value
+- type: union
+- description: Defines the selected date
+### selectionMode
+- type: enum
+- description: Whether the user should be able to select a date range, or just a single day
+### showYearDropdown
+- type: bool
+- description: Displays a selectable yearDropdown
+### showMonthDropdown
+- type: bool
+- description: Displays a selectable monthDropdown
+### shouldCloseOnSelect
+- type: bool
+- description: Specify whether the calendar closes on day selection
+### locale
+- type: enum
+- description: Specify date picker instance locale
+### rtl
+- type: bool
+- description: Specify whether RTL mode is enabled or not. When true, the keyboard navigation will be changed means pressing on the right arrow will navigate to the previous day, and pressing on the left arrow will navigate to the next day.
+### dateIndication
+- type: func
+- description: ##### Add an indication under a specific date.
+   Function returns the indication node of a specific date or null if this day doesn't have an indication.
+- `param` {date: Date, isSelected: boolean }
+- `date` - a date
+- `isSelected` - whether this date is the selected date
+- `return` {React.node} - the indication node of a specific date or null if this day doesn't have an indication.
+### today
+- type: instanceOf
+- description: Sets today's date. The today indication is added automatically according to the user timezone but in some cases, we need the ability to add the today indication based on the business timezone.
+### leftArrowAriaLabel
+- type: string
+- description: Defines a string value that labels the left arrow in calendar header
+### leftArrowAriaLabelledBy
+- type: string
+- description: Identifies the element that labels the left arrow in calendar header
+### rightArrowAriaLabel
+- type: string
+- description: Defines a string value that labels the right arrow in calendar header
+### rightArrowAriaLabelledBy
+- type: string
+- description: Identifies the element that labels the right arrow in calendar header
+### monthDropdownAriaLabel
+- type: string
+- description: Defines a string value that labels the months dropdown in calendar header
+### monthDropdownAriaLabelledBy
+- type: string
+- description: Identifies the element that labels the months dropdown in calendar header
+### yearDropdownAriaLabel
+- type: string
+- description: Defines a string value that labels the years dropdown in calendar header
+### yearDropdownAriaLabelledBy
+- type: string
+- description: Identifies the element that labels the years dropdown in calendar header
+### size
+- type: enum
+- description: Defines calendar size property. It can be either small or medium (default)
+### containFocus
+- type: bool
+- description: Use FocusScope to contain focus within calendar
+
+

package/dist/docs/components/CardFolderTabsProps.md

@@ -0,0 +1,27 @@
+
+### 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.
+### activeId
+- type: string
+- description: Specifies an id of a currently visible tab.
+### onTabChange
+- type: func
+- description: Defines a callback function which is called on tab change. An id of a newly selected tab is passed as a parameter.
+### maxTabWidth
+- type: union
+- description: Defines a maximum width of a tab button.
+### fluid
+- type: bool
+- description: Stretches tabs to fill a 100% of a parent container width
+### ellipsis
+- type: bool
+- description: Specifies whether text that exceeds tab width is truncated with ellipsis. If false, text will wrap to another line.
+### size
+- type: enum
+- description: Controls tab label font size
+
+

package/dist/docs/components/CardGalleryItemProps.md

@@ -0,0 +1,77 @@
+
+### badge
+- type: React.ReactNode
+- description: Accepts a <Badge/> or any other static indicator. Passed element will be displayed at the top left corner of a card.
+### title
+- type: React.ReactNode
+- description: Set card title.
+### subtitle
+- type: React.ReactNode
+- description: Set card subtitle.
+### suffix
+- type: React.ReactNode
+- description: Accepts any component to be rendered as a suffix of the card's footer.
+### draggable
+- type: boolean
+- description: Show drag handle
+### dragHandleProps
+- type: Partial<DragHandlePublicAPIProps>
+- description: Extra props to pass to the `<DragHandle />` element.
+### dragging
+- type: boolean
+- description: Indicates the element is dragging.
+### droppable
+- type: boolean
+- description: Removes buttons when other element is dragging and this card is droppable.
+### dragDisabled
+- type: boolean
+- description: Show disabled drag handle.
+### tabIndex
+- type: number
+- description: Specifies the tab order of the component.
+### size
+- type: ValuesOf<{ readonly small: "small"; readonly medium: "medium"; }>
+- description: Set card size.
+### backgroundImageUrl
+- type: string
+- description: Specifies background image URL.
+### backgroundImageNode
+- type: React.ReactNode
+- description: Accepts any component to be rendered as a background image.
+### primaryActionProps
+- type: { label?: React.ReactNode; onClick?: React.MouseEventHandler<HTMLDivElement>; disabled?: boolean; disabledMessage?: string; }
+- description: Defines properties for the primary action button.
+### secondaryActionProps
+- type: { label?: React.ReactNode; onClick?: React.MouseEventHandler<HTMLButtonElement>; }
+- description: Defines properties for the secondary action button.
+### settingsMenu
+- type: React.ReactNode
+- description: Defines a popover menu to be displayed on hover at the top right corner or a card.
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute that can be used in the tests.
+### aspectRatio
+- type: string | number
+- description: Recommended values:
+- Square - 1
+- Portrait - 3/4
+- Cinema - 16/9
+- Landscape - 4/3
+- Custom number (e.g. 1.5)
+### imagePlacement
+- type: "top" | "side"
+- description: Sets placement of background image.
+### showSuffixOnHover
+- type: boolean
+- description: Sets suffix behavior to appear only on card hover.
+### skin
+- type: "standard" | "outlined"
+- description: Sets skin to the card item.
+### skinVisibility
+- type: "always" | "hover"
+- description: Sets when the skin is visible.
+### footer
+- type: React.ReactNode
+- description: Accepts any component to be rendered under default footer. Only on imagePlacement 'top'.
+
+

package/dist/docs/components/CardProps.md

@@ -0,0 +1,27 @@
+
+### children
+- type: ReactNode
+- description: Contains elements inside the card `<Card.Header/>`, `<Card.Subeader/>`, `<Card.Content/>` or `<Card.Divider/>`.
+### controls
+- type: ReactNode
+- description: Contains elements that control the component (usually a <CloseButton/>).
+### stretchVertically
+- type: boolean
+- description: Makes a card stretch vertically to max height in a layout or container.
+### hideOverflow
+- type: boolean
+- description: Hides a portion of card content that overflows its dimensions.
+### showShadow
+- type: boolean
+- description: Applies a drop shadow effect.
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute to be used in the tests.
+### className
+- type: string
+- description: Specifies a CSS class name to be appended to the component’s root element.
+### highlight
+- type: "focus"
+- description: Applies highlighting effect on the borders of the component.
+
+

package/dist/docs/components/CarouselProps.md

@@ -0,0 +1,63 @@
+
+### 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.
+### images
+- type: array
+- description: Defines an array of objects where each contains the `src` of an image (in `<img src="your_src" />`)
+### imagesPosition
+- type: string
+- description: Sets the image's position
+### imagesFit
+- type: enum
+- description: Sets the image’s fit
+### children
+- type: node
+- description: Accepts any component as a child item. Most commonly used to display `<Card/>`,  `<Image/>` or video files.
+### buttonSkin
+- type: enum
+- description: Sets the skin of the control (next / previous) buttons
+### showControlsShadow
+- type: bool
+- description: Drops a shadow below the control buttons
+### infinite
+- type: bool
+- description: Loops images endlessly
+### autoplay
+- type: bool
+- description: Auto-plays images
+### dots
+- type: bool
+- description: Controls if the bottom dots are visible or hidden
+### variableWidth
+- type: bool
+- description: Shows one slide at a time (default) or stacks one slide after another horizontally
+### initialSlideIndex
+- type: number
+- description: Sets the slide to start a presentation with
+### afterChange
+- type: func
+- description: Index change callback. `index => ...`
+### beforeChange
+- type: func
+- description: Index change callback. `(oldIndex, newIndex) => ...`
+### controlsPosition
+- type: enum
+- description: Sets the control buttons’ position
+### controlsSize
+- type: enum
+- description: Sets the control buttons’ size
+### controlsStartEnd
+- type: enum
+- description: Controls if the next / previous control buttons are visible, hidden or disabled at the start and end of the slideshow
+### gradientColor
+- type: string
+- description: Controls gradient color when controlsPosition set to overlay
+### gradient
+- type: bool
+- description: Enables gradient on when controlsPosition set to overlay
+
+

package/dist/docs/components/CarouselWIPProps.md

@@ -0,0 +1,75 @@
+
+### 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.
+### children
+- type: ReactNode
+- description: Any element to render inside
+### images
+- type: CarouselWIPImage[]
+- description: Array of objects where each contains the `src` of an image (in \<img src="your_src" /\>)
+### controlsSkin
+- type: "standard" | "inverted" | "light" | "transparent"
+- description: Sets the skin of the arrow buttons
+### showControlsShadow
+- type: boolean
+- description: Show a shadow for the carousel controls
+### infinite
+- type: boolean
+- description: Images loop endlessly
+### initialSlideIndex
+- type: number
+- description: An index of the slide to start on
+### afterChange
+- type: (index: number) => void
+- description: Index change callback. `index => ...`
+### beforeChange
+- type: (oldIndex: number, newIndex: number) => void
+- description: Index change callback. `(oldIndex, newIndex) => ...`
+### controlsPosition
+- type: "sides" | "overlay" | "bottom" | "none"
+- description: Sets the arrows position
+### controlsSize
+- type: "medium" | "tiny" | "small"
+- description: Sets the arrows position
+### controlsStartEnd
+- type: "disabled" | "hidden"
+- description: Configure the start and end controls to be shown disabled or hidden. Relevant when infinite prop is set to false.
+### slidingType
+- type: "align-to-start" | "reveal-one" | "reveal-chunk"
+- description: Sliding behaviour type for the carousel
+### startEndOffset
+- type: number
+- description: Number of pixels for showing "peeking" cards on the edges of the carousel
+### gutter
+- type: number
+- description: Number of pixels dividing between slides
+### sidesGradientColor
+- type: string
+- description: Color for the gradients on the sides of the carousel
+### imagesPosition
+- type: string
+- description: Sets the images position
+### imagesFit
+- type: "none" | "fill" | "contain" | "cover" | "scale-down"
+- description: Sets the images fit
+### autoplay
+- type: boolean
+- description: Auto-playing of images
+### hideDots
+- type: boolean
+- description: Hide dots
+### variableWidth
+- type: boolean
+- description: 🚧 Variable width of children
+### animationDuration
+- type: number
+- description: Animation duration
+### easing
+- type: (t: number) => number
+- description: Animation function
+
+

package/dist/docs/components/CheckToggleProps.md

@@ -0,0 +1,39 @@
+
+### 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.
+### checked
+- type: boolean
+- description: Specifies whether a check is selected
+### onChange
+- type: ChangeEventHandler<HTMLInputElement>
+- description: Defines a callback function which is called every time the check value is changed
+### disabled
+- type: boolean
+- description: Specifies whether toggle interactions should be disabled
+### size
+- type: CheckToggleSize
+- description: Controls the size of the component
+### skin
+- type: CheckToggleSkin
+- description: Controls the skin of the component
+### tooltipContent
+- type: ReactNode
+- description: Defines a message to be displayed in a tooltip. Tooltip is displayed on component hover.
+### tooltipProps
+- type: TooltipCommonProps
+- description: Allows to pass all common tooltip props.
+### focusableOnFocus
+- type: React.FocusEventHandler<E>
+- description: No description
+### focusableOnBlur
+- type: React.FocusEventHandler<E>
+- description: No description
+### ref
+- type: React.RefObject<E>
+- description: No description
+
+

package/dist/docs/components/CheckboxProps.md

@@ -0,0 +1,72 @@
+
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute that can be used in tests
+### checked
+- type: boolean
+- description: Specifies whether a checkbox is selected
+### disabled
+- type: boolean
+- description: Specifies whether a checkbox is disabled
+### required
+- type: boolean
+- description: Specifies whether a checkbox is required
+### hasError
+- type: boolean
+- description: Specifies whether a checkbox has an error
+### id
+- type: string
+- description: Assigns a unique identifier for the checkbox
+### indeterminate
+- type: boolean
+- description: Specifies whether a checkbox is in an indeterminate state
+### errorMessage
+- type: string
+- description: The error message when there's an error
+### selectionArea
+- type: CheckboxSelectionArea
+- description: Controls the selection area highlight visibility
+### vAlign
+- type: CheckboxVAlign
+- description: Controls checkbox alignment to the label on the Y axis
+### size
+- type: CheckboxLabelSize
+- description: Controls the size of the checkbox label
+### onChange
+- type: ChangeEventHandler<HTMLInputElement>
+- description: Defines a callback function which is called every time the checkbox state is changed
+### className
+- type: string
+- description: Specifies a CSS class name to be appended to the component’s root element.
+### tooltipProps
+- type: TooltipCommonProps
+- description: Allows you to pass all common tooltip props.
+### tooltipContent
+- type: ReactNode
+- description: Defines a message to be displayed in a tooltip. Tooltip is displayed on a checkbox hover.
+### selectionAreaSkin
+- type: CheckboxSelectionAreaSkin
+- description: Sets the design of the selection area
+### selectionAreaPadding
+- type: Padding<string | number>
+- description: Sets the amount of white space around the checkbox label in pixels
+### children
+- type: ReactNode
+- description: Defines a checkbox label
+### ellipsis
+- type: boolean
+- description: Truncates text that is longer than its parent container and displays ellipsis at the end of the last line.
+### maxLines
+- type: number
+- description: Truncates label text at a specific number of lines when using ellipsis
+### focusableOnFocus
+- type: React.FocusEventHandler<E>
+- description: No description
+### focusableOnBlur
+- type: React.FocusEventHandler<E>
+- description: No description
+### ref
+- type: React.RefObject<E>
+- description: No description
+
+