@wix/design-system 1.191.2 → 1.193.0

package/dist/docs/components/SocialPostPreviewProps.md

@@ -0,0 +1,24 @@
+
+### profileName
+- type: ReactNode
+- description: Contains the post’s profile name (a username in Facebook or Instagram)
+### profileImageSrc
+- type: string
+- description: Contains a URL link to the post’s profile picture
+### skin
+- type: SocialPostPreviewSkin
+- description: Controls the appearance and layout of the component
+### caption
+- type: ReactNode
+- description: Adds textual post content
+### media
+- type: ReactNode
+- description: Adds visual post content (most commonly, <Image/> is added as a child item)
+### 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
+
+

package/dist/docs/components/SocialPreviewProps.md

@@ -0,0 +1,24 @@
+
+### dataHook
+- type: string
+- description: No description
+### title
+- type: string
+- description: A social post link title
+### description
+- type: string
+- description: A social post link description
+### previewUrl
+- type: string
+- description: A url representation of the social post link
+### media
+- type: node
+- description: A slot to render a media item, most common will be the ImageViewer component
+### skin
+- type: enum
+- description: Changes the style of the preview
+### size
+- type: enum
+- description: Specifies the size of the preview. Size small works only in combination with twitter skin
+
+

package/dist/docs/components/SortableGridBaseProps.md

@@ -0,0 +1,65 @@
+
+### droppable
+- type: bool
+- description: indicates if user can drop item in the list by default it's true
+### insertPosition
+- type: enum
+- description: function that specifying where the item can be inserted
+### usePortal
+- type: bool
+- description: in case of wrong position of item during drag you can force SortableListBase to use portals
+### dragPreview
+- type: bool
+- description: if you are having nested SortableListBases,
+   list that you are currently dragging need to be marked as dragPreview
+   inside of renderItem callback
+### items
+- type: array
+- description: list of items with {id: any}
+### onDragStart
+- type: func
+- description: callback for drag start
+### onDragEnd
+- type: func
+- description: callback for drag end
+### className
+- type: string
+- description: Specifies a CSS class name to be appended to the component’s root element.
+### contentClassName
+- type: string
+- description: className of the first items parent container
+### animationDuration
+- type: number
+- description: animation duration in ms, default = 0 - disabled
+### animationTiming
+- type: string
+- description: animation timing function, default = '' (ease)
+### canDrag
+- type: func
+- description: callback that could prevent item from dragging
+### delay
+- type: number
+- description: number in seconds to add delay between initial mouseDown and drag start
+### listOfPropsThatAffectItems
+- type: array
+- description: In case that you are using some external props inside of renderItems method,
+   you need to define them here.
+
+   renderItem = ({ item }) => <div key={item.id}>{this.props.myAwesomeProp}</div>
+
+   render() {
+      return (
+        <SortableListBase
+          ...
+          listOfPropsThatAffectItems={[this.props.myAwesomeProp]}
+        />
+      )
+    }
+### startFixedElement
+- type: node
+- description: Node which will be rendered before draggable items and this element won't be draggable
+### endFixedElement
+- type: node
+- description: Node which will be rendered after draggable items and this element won't be draggable
+
+

package/dist/docs/components/SortableListBaseProps.md

@@ -0,0 +1,59 @@
+
+### droppable
+- type: bool
+- description: indicates if user can drop item in the list by default it's true
+### insertPosition
+- type: enum
+- description: function that specifying where the item can be inserted
+### usePortal
+- type: bool
+- description: in case of wrong position of item during drag you can force SortableListBase to use portals
+### dragPreview
+- type: bool
+- description: if you are having nested SortableListBases,
+   list that you are currently dragging need to be marked as dragPreview
+   inside of renderItem callback
+### items
+- type: array
+- description: list of items with {id: any}
+### onDragStart
+- type: func
+- description: callback for drag start
+### onDragEnd
+- type: func
+- description: callback for drag end
+### className
+- type: string
+- description: Specifies a CSS class name to be appended to the component’s root element.
+### contentClassName
+- type: string
+- description: className of the first items parent container
+### animationDuration
+- type: number
+- description: animation duration in ms, default = 0 - disabled
+### animationTiming
+- type: string
+- description: animation timing function, default = '' (ease)
+### canDrag
+- type: func
+- description: callback that could prevent item from dragging
+### delay
+- type: number
+- description: number in seconds to add delay between initial mouseDown and drag start
+### listOfPropsThatAffectItems
+- type: array
+- description: In case that you are using some external props inside of renderItems method,
+    you need to define them here.
+
+    renderItem = ({ item }) => <div key={item.id}>{this.props.myAwesomeProp}</div>
+
+    render() {
+      return (
+        <SortableListBase
+          ...
+          listOfPropsThatAffectItems={[this.props.myAwesomeProp]}
+        />
+      )
+    }
+
+

package/dist/docs/components/SparklineChartProps.md

@@ -0,0 +1,36 @@
+
+### 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: number
+- description: Sets the width of the sparkline (pixels)
+### height
+- type: number
+- description: Sets the height of the sparkline (pixels)
+### data
+- type: arrayOf
+- description: Chart data
+### color
+- type: string
+- description: Sets the color of the sparkline
+### highlightedStartingIndex
+- type: number
+- description: Indicates the starting index of the highlighted area. Default is 0
+### highlightedEndingIndex
+- type: number
+- description: Indicates the ending index of the highlighted area. Default is the last one
+### getTooltipContent
+- type: func
+- description: Tooltip content (JSX) getter function.
+### onHover
+- type: func
+- description: callback when graph is hovered
+### animationDuration
+- type: number
+- description: Sets the duration of the animation in milliseconds
+
+

package/dist/docs/components/StackedBarChartProps.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.
+### data
+- type: arrayOf
+- description: Chart data
+### tooltipTemplate
+- type: func
+- description: Tooltip template function
+### tooltipCommonProps
+- type: shape
+- description: Props that modify the Tooltip created from text bar charts
+### height
+- type: number
+- description: Chart height (px)
+### width
+- type: number
+- description: Chart width (px)
+### margin
+- type: shape
+- description: Margin (px) for each side of the Chart. For example, in order to render larger number of digits at the yAxis, increase the left margin prop.
+### yAxisTickFormat
+- type: func
+- description: ##### Formats Y axis ticks
+ * `param` {string} `rawValue` - a raw value e.g. 10000
+ * `param` {string} `rawValue` - number formatted value, comma separated e.g. 10,000
+ * `return` {string} - the value to be shown as Y axis tick
+
+

package/dist/docs/components/StarsRatingBarProps.md

@@ -0,0 +1,39 @@
+
+### 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: "tiny" | "small" | "medium" | "large"
+- description: Controls the size of the star rating bar. Interactive mode can be `large` or `medium`. The default value for the read only mode is `medium`.
+### readOnly
+- type: boolean
+- description: Specifies whether the rating bar is in read-only mode.
+### labelValues
+- type: string[]
+- description: Specifies the rate input value labels.
+### descriptionValues
+- type: string[]
+- description: Specifies the rate caption value labels. Array must contain all 5 strings to display the rating labels.
+### value
+- type: 0 | 1 | 2 | 3 | 4 | 5
+- description: Specifies the selected rate. 0 indicates an undefined rating.
+### onChange
+- type: (rating: number) => void
+- description: Defines a handler that is called whenever rating changes.
+##### Signature:
+function(rating: number) => void
+* * `rating`: 1 | 2 | 3 | 4 | 5
+### name
+- type: string
+- description: Specifies radio group name.
+### 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/StatisticsWidgetProps.md

@@ -0,0 +1,27 @@
+
+### dataHook
+- type: string
+- description: Applied as data-hook HTML attribute that can be used to create driver in testing
+### size
+- type: enum
+- description: Displayed value size (default: large)
+### alignItems
+- type: enum
+- description: Alignment of inner items (default: center)
+### isLoading
+- type: bool
+- description: Show loader instead of values for all statistic items (default: undefined)
+### items
+- type: arrayOf
+- description: Array of statistic items
+ * `value` - Value of the statistic. Displayed as big text in the first row.
+ * `valueInShort` - Short version of value. Will be applied when there is no space for long value. If not specified, part of the value will be hidden with ellipsis
+ * `description` - Description of the statistic. Displayed in the second row.
+ * `descriptionInfo` - More info about the description. Displayed as an info icon with this text inside a tooltip
+ * `percentage` - Change in percents. Positive number - arrow up, negative - arrow down.
+ * `invertedPercentage` - When set to true renders positive percentage in red and negative in green.
+ * `onClick` - Callback to be executed on click (also on Enter/Space key press)
+ * `isLoading` - Shows a loader instead of value.
+ * `children` - Node to render on bottom of section.
+
+

package/dist/docs/components/StatusIndicatorProps.md

@@ -0,0 +1,21 @@
+
+### 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.
+### status
+- type: StatusIndicatorState
+- description: Sets the indication type.
+### message
+- type: ReactNode
+- description: Sets the message that’s displayed in a tooltip. If not set, the tooltip won’t appear.
+### tooltipPlacement
+- type: StatusIndicatorTooltipPlacement
+- description: Defines which side the tooltip will be placed on.
+### tooltipProps
+- type: TooltipCommonProps
+- description: Customize <Tooltip/> appearance with its props component.
+
+

package/dist/docs/components/StatusToastProps.md

@@ -0,0 +1,33 @@
+
+### key
+- type: string
+- description: Toast key
+### id
+- type: string
+- description: Toast id
+### 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 that can be used in the tests.
+### dismissible
+- type: boolean
+- description: Whether the toast should render the dismiss button.
+### dismissLabel
+- type: string
+- description: Aria label for the dismiss button.
+### onDismiss
+- type: (event?: React.MouseEvent) => void
+- description: Callback function called whenever the user clicks the dismiss button.
+### status
+- type: ToastStatus
+- description: Toast status.
+### action
+- type: React.ReactNode
+- description: Action element to render.
+### duration
+- type: number
+- description: Number in milliseconds to auto dismiss the toast. If the duration is set to 'null', toast won't be automatically dismissed.
+
+

package/dist/docs/components/StepperProps.md

@@ -0,0 +1,27 @@
+
+### dataHook
+- type: string
+- description: Hook for testing purposes.
+### onClick
+- type: func
+- description: Event triggered on step click: `onClick(stepIndex)`
+### activeStep
+- type: number
+- description: Index of the active step.
+### steps
+- type: arrayOf
+- description: An array of steps, where each step is an object with the following properties:
+- `text` - step title text (required).
+- `type` - step type (`completed`, `disabled`, `error` or default `normal`).
+### type
+- type: enum
+- description: Style type.
+### size
+- type: enum
+- description: Sets the size of the items
+### fit
+- type: enum
+- description: Fit mode for steps. In `stretched` mode the component will grow to fill parent
+container width.
+
+

package/dist/docs/components/SwatchesProps.md

@@ -0,0 +1,51 @@
+
+### colors
+- type: array
+- description: Defines an array of colors to be shown as swatches.
+### selected
+- type: string
+- description: Specifies which color from the list is in a selected state.
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute that can be used in the tests
+### onClick
+- type: func
+- description: Defines a callback function for  user click on a swatch. Returns color HEX string representation.
+### size
+- type: enum
+- description: Size of swatches
+### showClear
+- type: bool
+- description: Specifies whether to display a ‘No color’ option as a first item on a list or not.
+### showClearMessage
+- type: node
+- description: Defines a message to display on ‘No color’ option hover. `showClear` must be set to true.
+### onAdd
+- type: func
+- description: Defines a callback function for ‘Add’ button click. Returns color HEX string representation once user selects a color to be added.
+### onChange
+- type: func
+- description: Defines a callback function for color change. Returns color HEX string representation.
+### onCancel
+- type: func
+- description: Defines a callback function for color picker popover ‘Cancel’ action (user closes it without picking color).
+### showAddButton
+- type: bool
+- description: Specifies whether New color’ button is displayed or not. Add button opens up a color picker.
+### addButtonMessage
+- type: string
+- description: Specifies a message to display on ‘Add’ button hover. If not provided, the tooltip won’t be displayed.
+### addButtonIconSize
+- type: enum
+- description: Controls the size of a plus icon inside of the add button.
+### columns
+- type: number
+- description: Specifies a number of columns in a single row. Default value is 6.
+### gap
+- type: number
+- description: Specifies a gap between swatches in pixels. Default value is 12px.
+### popoverProps
+- type: shape
+- description: Props that get passed to New color popover.
+
+

package/dist/docs/components/TableActionCellProps.md

@@ -0,0 +1,55 @@
+
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute to be used in the tests.
+### primaryAction
+- type: shape
+- description: Controls the behaviour and appearance of a primary action:
+   - `text` specifies action label
+   - `skin` <b>deprecated</b> property that was previously used to control the visual appearance of a button. It has been replaced by the visibility property, which switches skin properties automatically based on visibility options.
+   - `onClick` defines a callback function which is called on button click
+   - `disabled` restrict user interactions
+   - `prefixIcon` add an icon in front of a button label
+   - `suffixIcon` add an icon after button label
+   - `as` renders button as another component or a DOM tag
+   - `dataHook` applies a data-hook HTML attribute to be used in the tests
+   - `disabledDescription` indicates an explanatory text string to display in tooltip when action is visible and disabled
+   - `tooltipProps` controls the tooltip appearance
+   - `visibility` specifies whether the primary action button is visible. When the value is set to "onHover", the button is only visible when the mouse hovers over it, and it appears as a primary button. When the value is set to "always", the button is always visible and appears as a secondary button.
+### secondaryActions
+- type: arrayOf
+- description: Controls the behaviour and appearance of secondary actions:
+
+   Action object containing
+   - `text` specifies action label to be shown in the tooltip or popover menu
+   - `icon` specifies icon of an action
+   - `onClick` defines a callback function which is called on button click
+   - `subtitle` a subtitle for the action
+   - `disabled` restrict user interactions
+   - `dataHook` applies a data-hook HTML attribute to be used in the tests
+   - `disabledDescription` indicates an explanatory text string to display in tooltip when action is visible and disabled
+   - `tooltipProps` controls the tooltip appearance
+   - `skin` controls the skin of the item
+
+   OR Divider object containing
+   - `divider` displays a divider between the action items in popover menu
+### numOfVisibleSecondaryActions
+- type: number
+- description: Specifies the number of secondary actions to display outside of the popover menu
+### alwaysShowSecondaryActions
+- type: bool
+- description: Specifies whether secondary actions should be visible all the time. By default secondary actions are visible on row hover only.
+### moreActionsTooltipText
+- type: string
+- description: Sets the tooltip text of more actions icon button
+### popoverMenuProps
+- type: shape
+- description: Controls the appearance of secondary actions menu with all common popover menu props
+### size
+- type: enum
+- description: Controls the size of action buttons
+### onClick
+- type: any
+- description: No description
+
+

package/dist/docs/components/TableListHeaderProps.md

@@ -0,0 +1,24 @@
+
+### dataHook
+- type: string
+- description: No description
+### className
+- type: string
+- description: Specifies a CSS class name to be appended to the component’s root element.
+### options
+- type: arrayOf
+- description: `width` supports px/%/fr
+`sortable`: Sets whether this field is sortable. If `true` clicking the header will call `onSortChange`
+`sortDescending`: Sets what sort icon to display in the column header. `true` will show an up arrow, `false` will show a down arrow, `undefined' will show no icon
+`infoTooltipProps`: Props object for column header's [tooltip](/?path=/story/components-api-components--tooltip). Note: `dataHook`, `moveBy` and `children` will not be passed to tooltip.
+### checkboxState
+- type: enum
+- description: State of Checkbox rendered at first column. 'hidden' to not render it
+### onCheckboxChange
+- type: func
+- description: Called when checkbox is clicked
+### onSortChange
+- type: func
+- description: A callback function called on each column title click. Signature `onSortChange(colNum, nativeEvent)`
+
+

package/dist/docs/components/TableListItemProps.md

@@ -0,0 +1,111 @@
+
+### 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.
+### onClick
+- type: React.ReactEventHandler<HTMLElement>
+- description: Defines a callback when the item is clicked
+### options
+- type: TableListItemColumn[]
+- description: Defines each TableListItem column  individually, using the following props:
+- `value` - defines column’s content.
+- `width` - sets the width of a column. It supports all grid-template-column values: [https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns)
+- `align` - aligns the content in the horizontal axis.
+### verticalPadding
+- type: TableListItemPadding
+- description: Adjusts the top and bottom padding size.
+### horizontalPadding
+- type: TableListItemPadding
+- description: Adjusts the left and right padding size.
+### checkbox
+- type: boolean
+- description: Defines whether the component is selectable by a checkbox.
+### checkboxDisabled
+- type: boolean
+- description: Disables the visible checkbox
+### checked
+- type: boolean
+- description: Defines if component is selected
+### focused
+- type: boolean
+- description: Forces focus on drag handle
+### onBlur
+- type: (e: React.FocusEvent) => void
+- description: Defines a callback when item loses its focus
+### onKeyUp
+- type: (e: React.KeyboardEvent) => void
+- description: Defines a callback when the item is focused, and a key is pressed and released. Used for NestableList solutions controlled with a keyboard.
+### onCheckboxChange
+- type: React.ChangeEventHandler<HTMLInputElement>
+- description: Defines a callback when checkbox is clicked
+### draggable
+- type: boolean
+- description: Makes drag handle visible.
+### dragging
+- type: boolean
+- description: Visually indicates that component is being dragged
+### dragDisabled
+- type: boolean
+- description: Disables the visible drag handle
+### showDragHandleOnHover
+- type: boolean
+- description: Enables showing drag handle only on hover.
+### showDivider
+- type: boolean
+- description: Enables a divider at the bottom of the list item.
+### dragHandleProps
+- type: Partial<DragHandlePublicAPIProps>
+- description: Extra props to pass to the `<DragHandle />` element
+### checkboxTooltipContent
+- type: React.ReactNode
+- description: Defines a message to be displayed in a tooltip. Tooltip is displayed on a checkbox hover.
+### checkboxTooltipProps
+- type: TooltipCommonProps
+- description: Tooltip props (when hovering over the checkbox)
+### border
+- type: boolean
+- description: Adds a border around the component.
+### showSelectionBorder
+- type: boolean
+- description: When item is with checkbox and is selected, adds a border on the left side of the component.
+### dragHandleSize
+- type: DragHandleSizes
+- description: Changes the size of the DragHandle.
+### expandable
+- type: boolean
+- description: Adds functionality to expand the list item.
+### expandDisabled
+- type: boolean
+- description: Disables the visible expand handle
+### reserveExpandHandleSpace
+- type: boolean
+- description: Hides the expand handle without changing the layout. Used for aligning items when there's a mix of expandable and non-expandable items at the same level.
+### onClickExpand
+- type: React.MouseEventHandler
+- description: Defines a callback when caret handle is clicked
+### expanded
+- type: boolean
+- description: Defines whether the list component is expanded/collapsed.
+### onMouseEnter
+- type: React.MouseEventHandler
+- description: Defines a callback function which is called on `onMouseEnter` event on the list item
+### onMouseLeave
+- type: React.MouseEventHandler
+- description: Defines a callback function which is called on `onMouseLeave` event on the list item
+### selectable
+- type: boolean
+- description: Defines whether the root element of list component is selectable.
+### ariaLabel
+- type: string
+- description: Provides context for screen readers when has a root element of list component in selectable state
+### 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
+
+