@wix/design-system 1.191.2 → 1.193.0

package/dist/docs/components/SelectorProps.md

@@ -0,0 +1,60 @@
+
+### className
+- type: string
+- description: No description
+### dataHook
+- type: string
+- description: Applied as data-hook HTML attribute that can be used in the tests.
+### id
+- type: string | number
+- description: No description
+### title
+- type: string
+- description: No description
+### image
+- type: ReactNode
+- description: No description
+### size
+- type: SelectorSize
+- description: No description
+### imageSize
+- type: SelectorImageSize
+- description: No description
+### imageShape
+- type: SelectorImageShape
+- description: No description
+### isSelected
+- type: boolean
+- description: No description
+### isDisabled
+- type: boolean
+- description: No description
+### indeterminate
+- type: boolean
+- description: No description
+### subtitle
+- type: string
+- description: No description
+### hasDivider
+- type: boolean
+- description: No description
+### extraNode
+- type: ReactNode
+- description: No description
+### onToggle
+- type: (id: string | number) => void
+- description: No description
+### toggleType
+- type: SelectorToggleType
+- description: No description
+### showBelowNodeOnSelect
+- type: boolean
+- description: No description
+### belowNode
+- type: ReactNode
+- description: No description
+### subtitleNode
+- type: ReactNode
+- description: No description
+
+

package/dist/docs/components/SidePanelProps.md

@@ -0,0 +1,49 @@
+
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute to be used in the tests
+### buttonText
+- type: string
+- description: No description
+### className
+- type: string
+- description: Specifies a CSS class name to be appended to the component’s root element.
+### onCloseButtonClick
+- type: () => void
+- description: Defines a callback function which is called every time a close button is clicked.
+### onHelpButtonClick
+- type: () => void
+- description: Defines a callback function which is called every time a help button is clicked
+### children
+- type: ReactNode
+- description: Accepts any item as a child element. For standard panel layout pass compound elements of the panel:
+* `<SidePanel.Header/>`
+* `<SidePanel.Content/>`
+* `<SidePanel.Footer/>`
+* `<SidePanel.Divider/>`
+### width
+- type: string | number
+- description: Controls the width of the panel
+### height
+- type: string | number
+- description: Controls the height of the panel
+### maxHeight
+- type: string | number
+- description: Controls the maximum height of the panel
+### skin
+- type: "standard" | "floating"
+- description: Specifies the skin of the side panel.
+### draggable
+- type: boolean
+- description: Specifies if panel is draggable (works only with floating skin).
+### onBackButtonClick
+- type: () => void
+- description: Defines a callback function which is called every time a back button is clicked.
+### backButtonDescription
+- type: ReactNode
+- description: When provided, sets the content of the back button's tooltip.
+### backButtonTooltipProps
+- type: TooltipCommonProps
+- description: Allows to pass all common tooltip props to back button’s tooltip.
+
+

package/dist/docs/components/SidebarBackButtonProps.md

@@ -0,0 +1,18 @@
+
+### dataHook
+- type: string
+- description: Applied as data-hook HTML attribute that can be used to create driver in testing
+### className
+- type: string
+- description: Specifies a CSS class name to be appended to the component’s root element.
+### onClick
+- type: func
+- description: click event handler
+### children
+- type: string
+- description: Text for the button
+### animateArrow
+- type: bool
+- description: Whether or not to constantly animate the arrow
+
+

package/dist/docs/components/SidebarDividerNextProps.md

@@ -0,0 +1,9 @@
+
+### dataHook
+- type: string
+- description: Applied as data-hook HTML attribute that can be used in the tests
+### fullWidth
+- type: bool
+- description: Indicates whether to remove the margin from sides
+
+

package/dist/docs/components/SidebarDividerProps.md

@@ -0,0 +1,9 @@
+
+### dataHook
+- type: string
+- description: Applied as data-hook HTML attribute that can be used in the tests
+### fullWidth
+- type: bool
+- description: Indicates whether to remove the margin from sides
+
+

package/dist/docs/components/SidebarHeaderNextProps.md

@@ -0,0 +1,18 @@
+
+### 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: node
+- description: A text to show as the header title
+### subtitle
+- type: node
+- description: A text to show as the header subtitle
+### children
+- type: node
+- description: A custom node to render from the bottom
+
+

package/dist/docs/components/SidebarHeaderProps.md

@@ -0,0 +1,15 @@
+
+### dataHook
+- type: string
+- description: Applied as data-hook HTML attribute that can be used in the tests
+### title
+- type: node
+- description: A text to show as the header title
+### subtitle
+- type: node
+- description: A text to show as the header subtitle
+### children
+- type: node
+- description: A custom node to render from the bottom
+
+

package/dist/docs/components/SidebarItemNextProps.md

@@ -0,0 +1,45 @@
+
+### as
+- type: union
+- description: render as some other component or DOM tag
+### href
+- type: string
+- description: URL of the page that link goes to
+### 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.
+### suffix
+- type: union
+- description: An element/array of elements to appear at the end of the text. max number of elements to pass is 2
+### prefix
+- type: node
+- description: An element to appear at the start of the text.
+### disabled
+- type: bool
+- description: Indicates whether to display the item as disabled
+### onClick
+- type: func
+- description: A callback to be triggered on click
+### itemKey
+- type: string
+- description: unique identifier per item, used to mark it for navigation and selection
+### isInQuickNavigation
+- type: bool
+- description: indicates whether the item is inside quickNavigation popover
+### role
+- type: string
+- description: Defines one of the aria roles to provide semantic meaning to content
+### minimizedTooltipContent
+- type: node
+- description: An element to appear as the content of the tooltip
+### onMouseEnter
+- type: func
+- description: A callback to be triggered on mouse enter
+### onMouseLeave
+- type: func
+- description: A callback to be triggered on mouse leave
+
+

package/dist/docs/components/SidebarNextProps.md

@@ -0,0 +1,54 @@
+
+### dataHook
+- type: string
+- description: The dataHook of the Sidebar
+### className
+- type: string
+- description: The classes of the Sidebar
+### children
+- type: React.ReactNode
+- description: Sidebar menu children
+### skin
+- type: SidebarSkin
+- description: Sets the skin of the Sidebar
+### header
+- type: React.ReactNode
+- description: Renders header element
+### footer
+- type: React.ReactNode
+- description: Renders footer element
+### hidden
+- type: boolean
+- description: Controls if the sidebar is shown or hidden, using an animation to switch between the two
+### selectedKey
+- type: string
+- description: The selected item key
+### isLoading
+- type: boolean
+- description: Control whether the sidebar displays a loading animation, true by default
+### ariaLabel
+- type: string
+- description: Define a string that labels the current element in case where a text label is not visible on the screen
+### width
+- type: string | number
+- description: Defines the width
+### minimized
+- type: boolean
+- description: Enables minimized mode
+### enableMinimizeToggle
+- type: boolean
+- description: Enables toggle button
+### minimizeToggleTooltip
+- type: string
+- description: Defines the tooltip content of minimization toggle.
+### onMinimizeToggleClick
+- type: () => void
+- description: Defines a callback function which is called every time a minimize toggle button is clicked.
+### zIndex
+- type: number
+- description: Defines the z-index of the sidebar.
+### next
+- type: boolean
+- description: Defined if to use new sidebar design (when less then 3 levels)
+
+

package/dist/docs/components/SidebarProps.md

@@ -0,0 +1,18 @@
+
+### classNames
+- type: string
+- description: classNames overrides
+### dataHook
+- type: string
+- description: The dataHook of the Sidebar
+### children
+- type: node
+- description: Sidebar menu children
+### isHidden
+- type: bool
+- description: Sidebar indicator for animating out or in
+### skin
+- type: enum
+- description: Sets the skin of the Sidebar
+
+

package/dist/docs/components/SidebarSectionItemProps.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.
+### prefix
+- type: node
+- description: An element to appear at the beginning of the text
+### suffix
+- type: node
+- description: An element to appear at the end of the text
+### selected
+- type: bool
+- description: Indicates whether to display the item as selected
+### disabled
+- type: bool
+- description: Indicates whether to display the item as disabled
+### drillable
+- type: bool
+- description: Indicates whether to display an icon for drilling in on hover
+### alwaysDisplayChevron
+- type: bool
+- description: Indicates whether to display a low-opacity icon for drilling even without hover, relevant only when drillable is true
+### onClick
+- type: func
+- description: A callback to be triggered on click
+### itemKey
+- type: string
+- description: unique identifier per item, used to mark it for navigation and selection
+
+

package/dist/docs/components/SidebarSectionTitleProps.md

@@ -0,0 +1,9 @@
+
+### dataHook
+- type: string
+- description: Applied as data-hook HTML attribute that can be used in the tests
+### children
+- type: node
+- description: Usually plain text, but could be any renderable node
+
+

package/dist/docs/components/SidebarSubMenuNextProps.md

@@ -0,0 +1,42 @@
+
+### as
+- type: union
+- description: render as some other component or DOM tag
+### href
+- type: string
+- description: URL of the page that link goes to
+### 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.
+### disabled
+- type: bool
+- description: Indicates whether to display the item as disabled
+### onClick
+- type: func
+- description: A callback to be triggered on click
+### itemKey
+- type: string
+- description: unique identifier per item, used to mark it for navigation and selection
+### title
+- type: node
+- description: An element to appear as the title of the submenu
+### onExpand
+- type: func
+- description: A callback to be triggered when the sub menu expands
+### onCollapse
+- type: func
+- description: A callback to be triggered when the sub menu collapses
+### suffix
+- type: union
+- description: An element to appear at the end of the text
+### prefix
+- type: node
+- description: An element to appear at the start of the text.
+### onQuickNavOpen
+- type: func
+- description: A callback to be triggered when the quick nav opens
+
+

package/dist/docs/components/SidebarTitleItemNextProps.md

@@ -0,0 +1,6 @@
+
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute that can be used in tests.
+
+

package/dist/docs/components/SkeletonCircleProps.md

@@ -0,0 +1,37 @@
+
+### 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.
+### diameter
+- type: any
+- description: Sets the diameter of the box (pixels)
+### margin
+- type: any
+- description: Sets margin on all sides.
+Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
+a spacing token (SP1, SP2, etc.) or a string of space-separated values ("3px 3px")
+### marginTop
+- type: any
+- description: Sets margin on the top.
+Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
+a spacing token (SP1, SP2, etc.) or a string of space-separated values ("3px 3px")
+### marginRight
+- type: any
+- description: Sets margin on the right.
+Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
+a spacing token (SP1, SP2, etc.) or a string of space-separated values ("3px 3px")
+### marginBottom
+- type: any
+- description: Sets margin on the bottom.
+Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
+a spacing token (SP1, SP2, etc.) or a string of space-separated values ("3px 3px")
+### marginLeft
+- type: any
+- description: Sets margin on the left.
+Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
+a spacing token (SP1, SP2, etc.) or a string of space-separated values ("3px 3px")
+
+

package/dist/docs/components/SkeletonGroupProps.md

@@ -0,0 +1,15 @@
+
+### 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.
+### skin
+- type: SkeletonGroupSkin
+- description: Effects the color of the Skeleton
+### backgroundColor
+- type: string
+- description: The background on which the skeleton is rendered
+
+

package/dist/docs/components/SkeletonLineProps.md

@@ -0,0 +1,37 @@
+
+### 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.
+### width
+- type: union
+- description: Sets the width of the box (pixels)
+### margin
+- type: union
+- description: Sets margin on all sides.
+Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
+a spacing token (SP1, SP2, etc.) or a string of space-separated values ("3px 3px")
+### marginTop
+- type: union
+- description: Sets margin on the top.
+Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
+a spacing token (SP1, SP2, etc.) or a string of space-separated values ("3px 3px")
+### marginRight
+- type: union
+- description: Sets margin on the right.
+Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
+a spacing token (SP1, SP2, etc.) or a string of space-separated values ("3px 3px")
+### marginBottom
+- type: union
+- description: Sets margin on the bottom.
+Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
+a spacing token (SP1, SP2, etc.) or a string of space-separated values ("3px 3px")
+### marginLeft
+- type: union
+- description: Sets margin on the left.
+Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
+a spacing token (SP1, SP2, etc.) or a string of space-separated values ("3px 3px")
+
+

package/dist/docs/components/SkeletonProps.md

@@ -0,0 +1,18 @@
+
+### 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.
+### content
+- type: arrayOf
+- description: The type of the skeleton
+### alignment
+- type: enum
+- description: The position of the indicating progress line
+### spacing
+- type: enum
+- description: The space between the first and second lines
+
+

package/dist/docs/components/SkeletonRectangleProps.md

@@ -0,0 +1,40 @@
+
+### 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.
+### height
+- type: any
+- description: Sets the height of the box (pixels)
+### width
+- type: any
+- description: Sets the width of the box (pixels)
+### margin
+- type: any
+- description: Sets margin on all sides.
+Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
+a spacing token (SP1, SP2, etc.) or a string of space-separated values ("3px 3px")
+### marginTop
+- type: any
+- description: Sets margin on the top.
+Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
+a spacing token (SP1, SP2, etc.) or a string of space-separated values ("3px 3px")
+### marginRight
+- type: any
+- description: Sets margin on the right.
+Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
+a spacing token (SP1, SP2, etc.) or a string of space-separated values ("3px 3px")
+### marginBottom
+- type: any
+- description: Sets margin on the bottom.
+Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
+a spacing token (SP1, SP2, etc.) or a string of space-separated values ("3px 3px")
+### marginLeft
+- type: any
+- description: Sets margin on the left.
+Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
+a spacing token (SP1, SP2, etc.) or a string of space-separated values ("3px 3px")
+
+

package/dist/docs/components/SliderProps.md

@@ -0,0 +1,88 @@
+
+### allowCross
+- type: bool
+- description: Allows sliders handles to cross.
+### 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.
+### displayMarks
+- type: bool
+- description: Controls the visibility of the marks.
+### displayTooltip
+- type: bool
+- description: Controls visibility of slide handle tooltip
+### id
+- type: string
+- description: Assigns an unique identifier for the root element.
+### max
+- type: number
+- description: Sets the absolute maximum value of sliders range.
+### min
+- type: number
+- description: Sets the absolute minimum value of the sliders range.
+### marks
+- type: object
+- description: Specifies slider marks. The key determines the position, and the value determines what will show. The object structure should be either
+```{ number : number}``` / ```{ number : string }```
+### onAfterChange
+- type: func
+- description: Defines a callback function which will be called when ontouchend or onmouseup is triggered.
+### onBeforeChange
+- type: func
+- description: Defines a callback function which will be called when ontouchstart or onmousedown is triggered.
+### onChange
+- type: func
+- description: Defines a callback function which is called upon every value change.
+### rtl
+- type: bool
+- description: Adjust component for RTL.
+### step
+- type: number
+- description: Specifies the interval between range values.
+### pushable
+- type: union
+- description: Push surrounding handles when moving a handle (relevant for multi value sliders only). Number specifies a minimum distance between handles.
+### value
+- type: union
+- description: Specifies the selected value.
+### disabled
+- type: bool
+- description: Specifies whether interactions are disabled.
+### startPoint
+- type: number
+- description: Specifies the starting value of a track. If undefined, the minimum value of a range is used as a starting point.
+### direction
+- type: enum
+- description: Sets slider direction in either horizontal way or vertical
+### ariaLabelForHandle
+- type: union
+- description: Set the aria-label attributes for slider handles.
+### onFocus
+- type: func
+- description: Sets the onFocus callback for the slider's handle.
+```javascript
+ onFocus((handleValue) => ({}))
+```
+### onBlur
+- type: func
+- description: Sets the onBlur callback for the slider's handle.
+```javascript
+ onBlur((handleValue) => ({}))
+```
+### gradientColor
+- type: string
+- description: Converts slider to a slider with a gradient background. RGB, HEX formats or color names are accepted.
+```javascript
+ gradientColor="rgb(105, 110, 28)"
+ gradientColor="#FFAC4B"
+ gradientColor="pink"
+```
+If color cannot be parsed, fallback color will be applied
+### marksLabelAlignment
+- type: enum
+- description: Sets the alignment of the marks labels.
+
+

package/dist/docs/components/SocialButtonProps.md

@@ -0,0 +1,18 @@
+
+### dataHook
+- type: string
+- description: hook for testing purposes
+### text
+- type: node
+- description: Text for the button
+### onClick
+- type: func
+- description: Click handler
+### icon
+- type: enum
+- description: Share button social network type
+### disabled
+- type: bool
+- description: Disable button
+
+