@ebay/ui-core-react 9.4.0 → 9.6.0

package/ebay-segmented-buttons/README.md

@@ -1,45 +1,5 @@
 # EbaySegmentedButtons
 
-## Demo
+## Documentation
 
-[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/buttons-ebay-segmented-buttons--default)
-
-## Install
-
-```
-yarn add @ebay/ui-core-react @ebay/skin
-```
-
-## Usage
-
-```
-import React from 'react'
-import { EbaySegmentedButtons, EbaySegmentedButton as Button } from '@ebay/ui-core-react/ebay-segmented-buttons'
-import { EbayIcon } from '@ebay/ui-core-react/ebay-icon'
-import '@ebay/skin/segmented-buttons'
-
-export const Example = () => (
-    <EbaySegmentedButtons
-        size="large"
-        onChange={(e, { i, value }) => console.log('Selected:', i, value)}
-    >
-        <Button value="1" selected>Button 1</Button>
-        <Button value="2">Button 2</Button>
-        <Button value="3"><EbayIconSettings24 /> Button 3</Button>
-    />
-);
-```
-
-## EbaySegmentedButtons Props
-
-| Name       | Type     | Required | Description                                                                            |
-| ---------- | -------- | -------- | -------------------------------------------------------------------------------------- |
-| `size`     | enum     | No       | Can be `regular` (default) or `large`                                                  |
-| `onChange` | Function | No       | props: (e: event, { index: number, value: string), triggered on selected button change |
-
-## EbaySegmentedButton Props
-
-| Name       | Type    | Required | Description                               |
-| ---------- | ------- | -------- | ----------------------------------------- |
-| `value`    | String  | No       | the value to use with `onChange` callback |
-| `selected` | Boolean | No       | Whether or not the button is selected     |
+[Storybook](https://opensource.ebay.com/evo-web/ebayui-core-react/main/?path=/docs/buttons-ebay-segmented-buttons--docs)

package/ebay-segmented-buttons/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("../tslib.es6-C4EgNkz1.js"),e=require("react"),E=require("classnames"),b=require("../utils-C9NL3q0j.js"),g=require("../icon-I30uh1Ov.js"),p=n=>{var{selected:l,children:s,className:u}=n,i=m.__rest(n,["selected","children","className"]);const a=b.findComponent(s,g.EbayIcon),o=()=>{const d=b.excludeComponent(s,g.EbayIcon);return e.createElement("span",{className:"segmented-buttons__button-cell"},a,e.createElement("span",null,d))};return e.createElement("li",null,e.createElement("button",Object.assign({className:E("segmented-buttons__button",u),"aria-current":l||void 0},i),a?o():s))},v=n=>{var{size:l,className:s,onChange:u=()=>{},children:i}=n,a=m.__rest(n,["size","className","onChange","children"]);const o=b.filterByType(i,p),[d,_]=e.useState(o.findIndex(t=>t.props.selected)||0),y=(t,c,r)=>{_(c),u(t,{index:c,value:r})};return e.createElement("div",Object.assign({className:E("segmented-buttons",l&&`segmented-buttons--${l}`,s)},a),e.createElement("ul",null,o.map((t,c)=>{const r=t.props,{value:h}=r,N=m.__rest(r,["value"]);return e.cloneElement(t,Object.assign(Object.assign({},N),{onClick:S=>y(S,c,h),selected:c===d}))})))};exports.EbaySegmentedButton=p;exports.EbaySegmentedButtons=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("../tslib.es6-BW4cJBUu.js"),e=require("react"),E=require("classnames"),b=require("../utils-C9NL3q0j.js"),g=require("../icon-M7M42naA.js"),p=n=>{var{selected:l,children:s,className:u}=n,i=m.__rest(n,["selected","children","className"]);const a=b.findComponent(s,g.EbayIcon),o=()=>{const d=b.excludeComponent(s,g.EbayIcon);return e.createElement("span",{className:"segmented-buttons__button-cell"},a,e.createElement("span",null,d))};return e.createElement("li",null,e.createElement("button",Object.assign({className:E("segmented-buttons__button",u),"aria-current":l||void 0},i),a?o():s))},v=n=>{var{size:l,className:s,onChange:u=()=>{},children:i}=n,a=m.__rest(n,["size","className","onChange","children"]);const o=b.filterByType(i,p),[d,_]=e.useState(o.findIndex(t=>t.props.selected)||0),y=(t,c,r)=>{_(c),u(t,{index:c,value:r})};return e.createElement("div",Object.assign({className:E("segmented-buttons",l&&`segmented-buttons--${l}`,s)},a),e.createElement("ul",null,o.map((t,c)=>{const r=t.props,{value:h}=r,N=m.__rest(r,["value"]);return e.cloneElement(t,Object.assign(Object.assign({},N),{onClick:S=>y(S,c,h),selected:c===d}))})))};exports.EbaySegmentedButton=p;exports.EbaySegmentedButtons=v;

package/ebay-select/README.md

@@ -1,85 +1,5 @@
 # EbaySelect
 
-This component is used to create a native `<select>` form element with default browser styling.
+## Documentation
 
-## Demo
-
-[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/form-input-ebay-select--basic)
-
-## Import JS
-
-```jsx harmony
-import { EbaySelect, EbaySelectOption } from "@ebay/ui-core-react/ebay-select";
-```
-
-## Import following styles from SKIN
-
-```jsx harmony
-import "@ebay/skin/select";
-
-// Add if you're using floating labels
-import "@ebay/skin/floating-label";
-```
-
-## Import styles using SCSS/CSS
-
-```jsx harmony
-import "@ebay/skin/select.css";
-
-// Add if you're using floating labels
-import "@ebay/skin/floating-label.css";
-```
-
-## Usage
-
-When no selected option is specified:
-
-```jsx harmony
-<EbaySelect name="formSelect">
-    <EbaySelectOption value="1">Option 1</EbaySelectOption>
-    <EbaySelectOption value="2">Option 2</EbaySelectOption>
-    <EbaySelectOption value="3">Option 3</EbaySelectOption>
-</EbaySelect>
-```
-
-When a selected option is specified:
-
-```jsx harmony
-<EbaySelect name="formSelect" value="2">
-    <EbaySelectOption value="1">Option 1</EbaySelectOption>
-    <EbaySelectOption value="2">Option 2</EbaySelectOption>
-    <EbaySelectOption value="3">Option 3</EbaySelectOption>
-</EbaySelect>
-```
-
-Please look at this documentation as to the recommended way in React to pre-select a value:
-https://reactjs.org/docs/forms.html#the-select-tag. Notice that the selected value is set right in the props of `<EbaySelect/>`.
-
-## EbaySelect Attributes
-
-| Name            | Type    | Required | Description                                                                       |
-| --------------- | ------- | -------- | --------------------------------------------------------------------------------- |
-| `name`          | String  | Yes      | passed to the `<select>` element                                                  |
-| `value`         | String  | No       | Set the value of the `<select>` element. Use this for **controlled component**.   |
-| `defaultValue`  | String  | No       | Set the initial value for `<select>` elemtn, only for **uncontrolled component**. |
-| `disabled`      | String  | No       | passed to the `<select>` element, default is `false`                              |
-| `className`     | String  | No       | passed to the wrapper-element of the `<select>` element                           |
-| `borderless`    | String  | No       | whether button has borders, default is `false`                                    |
-| `floatingLabel` | String  | No       | Indicates that the select is a floating label type and renders it as a label      |
-| `inputSize`     | String  | No       | `default` (default), `large`                                                      |
-| `invalid`       | Boolean | No       | Indicates a field-level error with red border if true                             |
-
-## Callbacks
-
-| Name       | Type     | Required | Description                                                                                   |
-| ---------- | -------- | -------- | --------------------------------------------------------------------------------------------- |
-| `onChange` | Function | No       | Called on option change with arguments: `(ChangeEvent, { index: number, selected: string[] }` |
-
-## EbaySelectOption Attributes
-
-| Name       | Type    | Required | Description                      |
-| ---------- | ------- | -------- | -------------------------------- |
-| `value`    | String  | Yes      | passed to the `<option>` element |
-| `disabled` | Boolean | No       | disables the option              |
-
-It supports all the supported aria attributes (e.g. `aria-label`, `aria-invalid`)
+[Storybook](https://opensource.ebay.com/evo-web/ebayui-core-react/main/?path=/docs/form-input-ebay-select--docs)

package/ebay-select/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("../tslib.es6-C4EgNkz1.js"),o=require("react"),N=require("classnames"),B=require("../forwardRef-DBQKIlPy.js"),R=require("../utils-C9NL3q0j.js"),V=require("../hooks-uidlIIid.js"),k=require("../icons/ebay-icon-chevron-down-12/index.js"),h=t=>{var{children:e}=t,r=f.__rest(t,["children"]);return o.createElement("option",Object.assign({},r),e)},_=t=>typeof t<"u",x=t=>{var{value:e,defaultValue:r,className:n,borderless:u,name:i,disabled:s,onChange:g=()=>{},onBlur:p=()=>{},onFocus:d=()=>{},floatingLabel:b,forwardedRef:l,children:m,inputSize:y,invalid:E}=t,a=f.__rest(t,["value","defaultValue","className","borderless","name","disabled","onChange","onBlur","onFocus","floatingLabel","forwardedRef","children","inputSize","invalid"]);const v=E||a["aria-invalid"]==="true",[w,O]=o.useState(r),C=V.useFloatingLabel({text:b,disabled:s,size:y,invalid:v}),F=c=>{const{value:S,selectedIndex:L}=c.target;_(e)||O(S),g(c,{index:L,selected:[S]})},G=c=>{p(c)},q=c=>{d(c)},j=N("select",n,{"select--borderless":u,"select--large":y==="large"});return o.createElement(C.Container,null,o.createElement(C.Label,{htmlFor:a.id}),o.createElement("span",{className:j},o.createElement("select",Object.assign({},a,{name:i,value:_(e)?e:w,disabled:s,onChange:F,onBlur:G,onFocus:q,ref:l}),z(m)),o.createElement(k.EbayIconChevronDown12,{height:"8",width:"8"})))},I=B.withForwardRef(x);function P(t){const e={};return t.forEach(r=>{const n=r.props;n.optgroup&&(Object.prototype.hasOwnProperty.call(e,n.optgroup)||(e[n.optgroup]=[]),e[n.optgroup].push(n))}),e}function z(t){const e=[],r=[];let n={},u=!1;const i=R.filterByType(t,h).map(s=>o.cloneElement(s,{}));if(i){n=P(i);let s;return i.forEach((g,p)=>{const d=g.props,{children:b,optgroup:l}=d,m=f.__rest(d,["children","optgroup"]);if(u=l&&e.indexOf(l)===-1,u){s=l;const E=n[s].map(a=>{const{children:v,optgroup:w}=a,O=f.__rest(a,["children","optgroup"]);return o.createElement(h,Object.assign({key:`opt-${a.value}`},O),v)});r.push(o.createElement("optgroup",{key:p,label:l},E)),e.push(l)}else l||r.push(o.createElement(h,Object.assign({key:p},m),b))}),r}}exports.EbaySelect=I;exports.EbaySelectOption=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("../tslib.es6-BW4cJBUu.js"),o=require("react"),N=require("classnames"),B=require("../forwardRef-DBQKIlPy.js"),R=require("../utils-C9NL3q0j.js"),V=require("../hooks-BZOKHA9o.js"),k=require("../icons/ebay-icon-chevron-down-12/index.js"),h=t=>{var{children:e}=t,r=f.__rest(t,["children"]);return o.createElement("option",Object.assign({},r),e)},_=t=>typeof t<"u",x=t=>{var{value:e,defaultValue:r,className:n,borderless:u,name:i,disabled:s,onChange:g=()=>{},onBlur:p=()=>{},onFocus:d=()=>{},floatingLabel:b,forwardedRef:l,children:m,inputSize:y,invalid:E}=t,a=f.__rest(t,["value","defaultValue","className","borderless","name","disabled","onChange","onBlur","onFocus","floatingLabel","forwardedRef","children","inputSize","invalid"]);const v=E||a["aria-invalid"]==="true",[w,O]=o.useState(r),C=V.useFloatingLabel({text:b,disabled:s,size:y,invalid:v}),F=c=>{const{value:S,selectedIndex:L}=c.target;_(e)||O(S),g(c,{index:L,selected:[S]})},G=c=>{p(c)},q=c=>{d(c)},j=N("select",n,{"select--borderless":u,"select--large":y==="large"});return o.createElement(C.Container,null,o.createElement(C.Label,{htmlFor:a.id}),o.createElement("span",{className:j},o.createElement("select",Object.assign({},a,{name:i,value:_(e)?e:w,disabled:s,onChange:F,onBlur:G,onFocus:q,ref:l}),z(m)),o.createElement(k.EbayIconChevronDown12,{height:"8",width:"8"})))},I=B.withForwardRef(x);function P(t){const e={};return t.forEach(r=>{const n=r.props;n.optgroup&&(Object.prototype.hasOwnProperty.call(e,n.optgroup)||(e[n.optgroup]=[]),e[n.optgroup].push(n))}),e}function z(t){const e=[],r=[];let n={},u=!1;const i=R.filterByType(t,h).map(s=>o.cloneElement(s,{}));if(i){n=P(i);let s;return i.forEach((g,p)=>{const d=g.props,{children:b,optgroup:l}=d,m=f.__rest(d,["children","optgroup"]);if(u=l&&e.indexOf(l)===-1,u){s=l;const E=n[s].map(a=>{const{children:v,optgroup:w}=a,O=f.__rest(a,["children","optgroup"]);return o.createElement(h,Object.assign({key:`opt-${a.value}`},O),v)});r.push(o.createElement("optgroup",{key:p,label:l},E)),e.push(l)}else l||r.push(o.createElement(h,Object.assign({key:p},m),b))}),r}}exports.EbaySelect=I;exports.EbaySelectOption=h;

package/ebay-signal/README.md

@@ -1,42 +1,5 @@
 # EbaySignal
 
-##Description
-Signals are data-backed recommendations to help customers make more informed decisions. There are four signal statuses, each corresponding to a specific color: `trustworthy`, `recent`, `time-sensitive` & `neutral`. Defaults to `neutral` if none specified.
+## Documentation
 
-## Demo
-
-[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/graphics-icons-ebay-signal--default-case)
-
-## Usage
-
-```
-yarn add @ebay/ui-core-react
-```
-
-### Import JS
-
-```jsx harmony
-import { EbaySignal } from "@ebay/ui-core-react/ebay-signal";
-```
-
-## Import styles from Skin
-
-```jsx harmony
-import "@ebay/skin/signal";
-```
-
-## ...or using SCSS/CSS
-
-```jsx harmony
-import "@ebay/skin/signal.css";
-```
-
-```jsx harmony
-<EbaySignal status="trustworthy">Trustworthy</EbaySignal>
-```
-
-## Attributes
-
-| Name     | Type   | Stateful | Description                                                                                                          |
-| -------- | ------ | -------- | -------------------------------------------------------------------------------------------------------------------- |
-| `status` | String | No       | Status of signal; determines color. Possible values: `trustworthy`, `recent`, `time-sensitive` & `neutral` (default) |
+[Storybook](https://opensource.ebay.com/evo-web/ebayui-core-react/main/?path=/docs/graphics-icons-ebay-signal--docs)

package/ebay-signal/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../tslib.es6-C4EgNkz1.js"),n=require("react"),c=require("classnames"),l=e=>{var{status:t="neutral"}=e,s=r.__rest(e,["status"]);const a=c(`signal signal--${t}`,s.className);return n.createElement("span",Object.assign({},s,{className:a}))};exports.EbaySignal=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../tslib.es6-BW4cJBUu.js"),n=require("react"),c=require("classnames"),l=e=>{var{status:t="neutral"}=e,s=r.__rest(e,["status"]);const a=c(`signal signal--${t}`,s.className);return n.createElement("span",Object.assign({},s,{className:a}))};exports.EbaySignal=l;

package/ebay-skeleton/README.md

@@ -1,108 +1,5 @@
 # EbaySkeleton
 
-## Demo
+## Documentation
 
-[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/docs/building-blocks-ebay-skeleton--docs)
-
-## Import JS
-
-```jsx harmony
-import {
-    EbaySkeleton,
-    EbaySkeletonAvatar,
-    EbaySkeletonButton,
-    EbaySkeletonImage,
-    EbaySkeletonText,
-    EbaySkeletonTextbox,
-} from "@ebay/ui-core-react/ebay-skeleton";
-```
-
-## Import following styles from SKIN
-
-```js
-import "@ebay/skin/skeleton";
-```
-
-## Import styles using SCSS/CSS
-
-```js
-import "@ebay/skin/skeleton.css";
-```
-
-## Usage
-
-```jsx
-<EbaySkeleton aria-label="Loading...">
-    <EbaySkeletonImage style={{ width: "220px", height: "220px" }} />
-    <EbaySkeletonText multiline />
-</EbaySkeleton>
-```
-
-## Attributes
-
-### EbaySkeleton
-
-| Name    | Type   | Required | Description                                        |
-| ------- | ------ | -------- | -------------------------------------------------- |
-| `color` | string | No       | Color of the Skeleton, `purple`, `green` or `blue` |
-
-### EbaySkeletonAvatar
-
-| Name | Type   | Required | Description                                            |
-| ---- | ------ | -------- | ------------------------------------------------------ |
-| `as` | string | No       | Attribute to define the element to use `div` or `span` |
-
-### EbaySkeletonButton
-
-| Name   | Type   | Required | Description                                            |
-| ------ | ------ | -------- | ------------------------------------------------------ |
-| `as`   | string | No       | Attribute to define the element to use `div` or `span` |
-| `size` | string | No       | size of the button can be `small` or `large`           |
-
-### EbaySkeletonImage
-
-| Name | Type   | Required | Description                                            |
-| ---- | ------ | -------- | ------------------------------------------------------ |
-| `as` | string | No       | Attribute to define the element to use `div` or `span` |
-
-### EbaySkeletonText
-
-| Name        | Type    | Required | Description                                            |
-| ----------- | ------- | -------- | ------------------------------------------------------ |
-| `as`        | string  | No       | Attribute to define the element to use `div` or `span` |
-| `multiline` | boolean | No       | Attribute to define the text as multiline              |
-| `size`      | string  | No       | size of the text can be `small` or `large`             |
-
-### EbaySkeletonTextbox
-
-| Name | Type   | Required | Description                                            |
-| ---- | ------ | -------- | ------------------------------------------------------ |
-| `as` | string | No       | Attribute to define the element to use `div` or `span` |
-
-## Examples
-
-### Composite
-
-```jsx
-<EbaySkeleton color={color} style={{ width: "300px" }}>
-    <div>
-        <EbaySkeletonAvatar as="span" />
-        <EbaySkeletonText
-            multiline={multiline}
-            as="span"
-            size={size}
-            style={{ width: "220px", verticalAlign: "top" }}
-        />
-    </div>
-    <EbaySkeletonButton size={size} />
-</EbaySkeleton>
-```
-
-### Tile
-
-```jsx
-<EbaySkeleton color={color} style={{ width: "220px" }}>
-    <EbaySkeletonImage style={{ width: "220px", height: "220px" }} />
-    <EbaySkeletonText multiline={multiline} size={size} />
-</EbaySkeleton>
-```
+[Storybook](https://opensource.ebay.com/evo-web/ebayui-core-react/main/?path=/docs/building-blocks-ebay-skeleton--docs)

package/ebay-skeleton/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../tslib.es6-C4EgNkz1.js"),l=require("react"),o=require("classnames"),m=e=>{var{children:s,className:a,color:t}=e,c=n.__rest(e,["children","className","color"]);return l.createElement("div",Object.assign({role:"img",className:o("skeleton",t&&`skeleton--${t}`,a)},c),s)},i=e=>{const{as:s="div",className:a}=e,t=n.__rest(e,["as","className"]);return l.createElement(s,Object.assign({className:o("skeleton__avatar",a)},t))},_=e=>{const{as:s="div",className:a,size:t}=e,c=n.__rest(e,["as","className","size"]);return l.createElement(s,Object.assign({className:o("skeleton__button",t&&`skeleton__button--${t}`,a)},c))},b=e=>{const{as:s="div",className:a}=e,t=n.__rest(e,["as","className"]);return l.createElement(s,Object.assign({className:o("skeleton__image",a)},t))},k=e=>{const{as:s="div",className:a,size:t,multiline:c}=e,r=n.__rest(e,["as","className","size","multiline"]);return l.createElement(s,Object.assign({className:o("skeleton__text",c&&"skeleton__text--multiline",t==="large"&&"skeleton__text--large",a)},r))},u=e=>{const{as:s="div",className:a}=e,t=n.__rest(e,["as","className"]);return l.createElement(s,Object.assign({className:o("skeleton__textbox",a)},t))};exports.EbaySkeleton=m;exports.EbaySkeletonAvatar=i;exports.EbaySkeletonButton=_;exports.EbaySkeletonImage=b;exports.EbaySkeletonText=k;exports.EbaySkeletonTextbox=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../tslib.es6-BW4cJBUu.js"),l=require("react"),o=require("classnames"),m=e=>{var{children:s,className:a,color:t}=e,c=n.__rest(e,["children","className","color"]);return l.createElement("div",Object.assign({role:"img",className:o("skeleton",t&&`skeleton--${t}`,a)},c),s)},i=e=>{const{as:s="div",className:a}=e,t=n.__rest(e,["as","className"]);return l.createElement(s,Object.assign({className:o("skeleton__avatar",a)},t))},_=e=>{const{as:s="div",className:a,size:t}=e,c=n.__rest(e,["as","className","size"]);return l.createElement(s,Object.assign({className:o("skeleton__button",t&&`skeleton__button--${t}`,a)},c))},b=e=>{const{as:s="div",className:a}=e,t=n.__rest(e,["as","className"]);return l.createElement(s,Object.assign({className:o("skeleton__image",a)},t))},k=e=>{const{as:s="div",className:a,size:t,multiline:c}=e,r=n.__rest(e,["as","className","size","multiline"]);return l.createElement(s,Object.assign({className:o("skeleton__text",c&&"skeleton__text--multiline",t==="large"&&"skeleton__text--large",a)},r))},u=e=>{const{as:s="div",className:a}=e,t=n.__rest(e,["as","className"]);return l.createElement(s,Object.assign({className:o("skeleton__textbox",a)},t))};exports.EbaySkeleton=m;exports.EbaySkeletonAvatar=i;exports.EbaySkeletonButton=_;exports.EbaySkeletonImage=b;exports.EbaySkeletonText=k;exports.EbaySkeletonTextbox=u;

package/ebay-snackbar-dialog/README.md

@@ -1,62 +1,5 @@
 # EbaySnackbarDialog
 
-A snackbar is a non-modal dialog that appears in response to a lightweight user action. It disappears automatically after a minimum of 6 seconds.
+## Documentation
 
-The user usually will want to manage the state of the snackbar, and so should provide the open state as a boolean as well as a function to synchronize the app state with the snackbar state when the on-close event occurs.
-
-In the case where the application developer only wants to manage the initial state of the snackbar, the dev can choose to provide only the open state as a boolean. This is useful when a dev wants the snackbar to appear only once on initial render and then disappear.
-
-## Demo
-
-[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/dialogs-ebay-snackbar-dialog--default)
-
-## Import JS
-
-```jsx harmony
-import { EbaySnackbarDialog, EbaySnackbarDialogAction } from "@ebay/ui-core-react/ebay-snackbar-dialog";
-```
-
-## Import following styles from SKIN
-
-```jsx harmony
-import "@ebay/skin/snackbar-dialog";
-```
-
-## Usage
-
-```jsx harmony
-<EbaySnackbarDialog open>
-    <p>Simple snackbar</p>
-</EbaySnackbarDialog>
-```
-
-```jsx harmony
-<EbaySnackbarDialog open>
-    <p>Snackbar with action</p>
-    <EbaySnackbarDialogAction accessKey="U" aria-label="Undo - Access Key: U">
-        Undo
-    </EbaySnackbarDialogAction>
-</EbaySnackbarDialog>
-```
-
-## Attributes
-
-| Name       | Type    | Stateful | Required | Description                                                                                                      |
-| ---------- | ------- | -------- | -------- | ---------------------------------------------------------------------------------------------------------------- |
-| `open`     | Boolean | Yes      | No       | Whether snackbar is open or not.                                                                                 |
-| `layout`   | String  | No       | No       | Direction of row or column for the text and the action button. Default is 'row'. Options are 'row' and 'column'. |
-| `animated` | Boolean | Yes      | No       | Renders the dialog with an animation. Note that the dialog will always be present in the DOM                     |
-
-## Events
-
-| Event      | Data | Description             |
-| ---------- | ---- | ----------------------- |
-| `onOpen`   |      | Snackbar opened         |
-| `onClose`  |      | Snackbar closed         |
-| `onAction` |      | Snackbar clicked action |
-
-## EbaySnackbarDialogAction Props
-
-| Name        | Type   | Stateful | Required | Description                                                                                                                                                                                                                                 |
-| ----------- | ------ | -------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `accessKey` | String | No       | No       | [`accesskey`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey) HTML attribute that generated a keyboard shortcut for the action element. Use together with `aria-label` to give more information to the user. |
+[Storybook](https://opensource.ebay.com/evo-web/ebayui-core-react/main/?path=/docs/dialogs-ebay-snackbar-dialog--docs)

package/ebay-snackbar-dialog/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const C=require("../tslib.es6-C4EgNkz1.js"),y=require("classnames"),e=require("react"),h=require("../dialog-previous-button-aXPjyhOT.js");require("../icon-button-AJ6dtyvc.js");require("../icon-I30uh1Ov.js");const k=require("../utils-C9NL3q0j.js"),E=n=>{var{className:l,children:c}=n,r=C.__rest(n,["className","children"]);return e.createElement("button",Object.assign({className:y(l,"fake-link")},r),c)},R=6e3,B=n=>{var{className:l,onOpen:c=()=>{},onClose:r=()=>{},layout:D,open:i,children:f,onAction:u}=n,S=C.__rest(n,["className","onOpen","onClose","layout","open","children","onAction"]);const o=e.useRef(new Set),g=e.useRef(null),[q,v]=e.useState(i),t=k.findComponent(f,E),T=k.excludeComponent(f,E),s=()=>{clearTimeout(g.current)},d=()=>{v(!1),r()},m=()=>{o.current.size===0&&(s(),g.current=setTimeout(()=>{d()},R))},_=()=>{v(!0),c(),m()},N=()=>{s(),o.current.add("focus")},O=()=>{o.current.delete("focus"),m()},A=()=>{s(),o.current.add("mouseEnter")},M=()=>{o.current.delete("mouseEnter"),m()},w=p=>{var a,b;s(),u?.(p),(b=(a=t?.props)===null||a===void 0?void 0:a.onClick)===null||b===void 0||b.call(a,p),d()};return e.useEffect(()=>()=>{s()},[]),e.useEffect(()=>{i?_():d()},[i]),e.createElement(h.DialogBaseWithState,Object.assign({},S,{open:q,isModal:!1,baseEl:"aside",classPrefix:"snackbar-dialog",transitionElement:"root",a11yCloseText:"",buttonPosition:"hidden",className:y(l,"snackbar-dialog--transition"),windowClass:D==="column"&&"snackbar-dialog__window--column",onFocus:N,onBlur:O,onMouseEnter:A,onMouseLeave:M}),T,t?e.createElement(h.EbayDialogActions,null,e.cloneElement(t,{onClick:w})):null)};exports.EbaySnackbarDialog=B;exports.EbaySnackbarDialogAction=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const C=require("../tslib.es6-BW4cJBUu.js"),y=require("classnames"),e=require("react"),h=require("../dialog-previous-button-BXqfHRJY.js");require("../icon-button-E_6JKTh3.js");require("../icon-M7M42naA.js");const k=require("../utils-C9NL3q0j.js"),E=n=>{var{className:l,children:c}=n,r=C.__rest(n,["className","children"]);return e.createElement("button",Object.assign({className:y(l,"fake-link")},r),c)},R=6e3,B=n=>{var{className:l,onOpen:c=()=>{},onClose:r=()=>{},layout:D,open:i,children:f,onAction:u}=n,S=C.__rest(n,["className","onOpen","onClose","layout","open","children","onAction"]);const o=e.useRef(new Set),g=e.useRef(null),[q,v]=e.useState(i),t=k.findComponent(f,E),T=k.excludeComponent(f,E),s=()=>{clearTimeout(g.current)},d=()=>{v(!1),r()},m=()=>{o.current.size===0&&(s(),g.current=setTimeout(()=>{d()},R))},_=()=>{v(!0),c(),m()},N=()=>{s(),o.current.add("focus")},O=()=>{o.current.delete("focus"),m()},A=()=>{s(),o.current.add("mouseEnter")},M=()=>{o.current.delete("mouseEnter"),m()},w=p=>{var a,b;s(),u?.(p),(b=(a=t?.props)===null||a===void 0?void 0:a.onClick)===null||b===void 0||b.call(a,p),d()};return e.useEffect(()=>()=>{s()},[]),e.useEffect(()=>{i?_():d()},[i]),e.createElement(h.DialogBaseWithState,Object.assign({},S,{open:q,isModal:!1,baseEl:"aside",classPrefix:"snackbar-dialog",transitionElement:"root",a11yCloseText:"",buttonPosition:"hidden",className:y(l,"snackbar-dialog--transition"),windowClass:D==="column"&&"snackbar-dialog__window--column",onFocus:N,onBlur:O,onMouseEnter:A,onMouseLeave:M}),T,t?e.createElement(h.EbayDialogActions,null,e.cloneElement(t,{onClick:w})):null)};exports.EbaySnackbarDialog=B;exports.EbaySnackbarDialogAction=E;

package/ebay-split-button/README.md

@@ -1,58 +1,5 @@
 # EbaySplitButton
 
-## Demo
+## Documentation
 
-[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/buttons-ebay-split-button--controls)
-
-## Usage
-
-### Import JS
-
-```jsx harmony
-import { EbaySplitButton } from "@ebay/ui-core-react/ebay-split-button";
-```
-
-### Import following styles from SKIN
-
-```jsx harmony
-import "@ebay/skin/split-button";
-```
-
-### Or import styles using SCSS/CSS
-
-```jsx harmony
-import "@ebay/skin/split-button.css";
-```
-
-### Icon button
-
-```jsx harmony
-<EbaySplitButton a11yMenuText="Show save options">
-    Save document
-    <Item>Save as...</Item>
-    <Item>Export</Item>
-</EbaySplitButton>
-```
-
-## Props
-
-| Name                    | Type     | Stateful | Required | Description                                                                                                                              | Data |
-| ----------------------- | -------- | -------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ---- |
-| `a11yMenuText`          | String   | No       | Yes      | aria label for menu button part                                                                                                          |
-| `href`                  | String   | No       | No       | url for link behaviour (switches to anchor tag)                                                                                          |
-| `size`                  | String   | No       | No       | button size: `small` or `large`                                                                                                          |
-| `priority`              | String   | No       | No       | `primary`, `secondary` (default), `tertiary`, `none`                                                                                     |
-| `bodyState`             | String   | No       | No       | `loading` adds progress spinner, when user interacts with button, `reset` should be called to reset `aria-live` state, default is `none` |
-| `a11yButtonLoadingText` | String   | No       | No       | `aria-label` for button when `bodyState` is `loading`                                                                                    |
-| `type`                  | String   | No       | No       | menu items type: `radio` or `checkbox`                                                                                                   |
-| `transparent`           | Boolean  | No       | No       | for transparent background                                                                                                               |
-| `disabled`              | Boolean  | Yes      | No       |
-| `partiallyDisabled`     | Boolean  | No       | No       | sets `aria-disabled` but not `disabled` prop                                                                                             |
-| `onClick`               | Function | -        | No       | click or action key pressed (`Space` or `Enter`)                                                                                         |
-| `onEscape`              | Function | -        | No       | `Esc`-key pressed                                                                                                                        |
-| `onFocus`               | Function | -        | No       | triggered on focus                                                                                                                       |
-| `onBlur`                | Function | -        | No       | triggered on blur                                                                                                                        |
-| `onExpand`              | Function | -        | No       | Called when content is expanded                                                                                                          |
-| `onCollapse`            | Function | -        | No       | Called when content is collapsed                                                                                                         |
-| `onChange`              | Function | -        | No       | Arguments: (e: event, { index: number, checked: number[], checkedValues: string[] }) for type `radio`/`checkbox`                         |
-| `onSelect`              | Function | -        | No       | Arguments: (e: event, { index: number, checked: number[] }), not for use with type `radio`/`checkbox`                                    |
+[Storybook](https://opensource.ebay.com/evo-web/ebayui-core-react/main/?path=/docs/buttons-ebay-split-button--docs)

package/ebay-split-button/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("../tslib.es6-C4EgNkz1.js"),n=require("react"),i=require("../utils-C9NL3q0j.js"),g=require("../button-xYFMCdP0.js"),s=require("../menu-button-Cw_SMZjv.js"),x=require("../menu-Bvnencku.js");require("classnames");const q=a=>{var{a11yMenuText:l,children:o,type:u,bodyState:t,a11yButtonLoadingText:y,onCollapse:d,onExpand:p,onSelect:c=()=>{},onChange:b=()=>{}}=a,e=S.__rest(a,["a11yMenuText","children","type","bodyState","a11yButtonLoadingText","onCollapse","onExpand","onSelect","onChange"]);const r=[x.EbayMenuItem,s.EbayMenuButtonSeparator],m=i.filterBy(o,B=>!r.includes(B.type)),E=i.filterByType(o,r);return n.createElement("span",{className:"split-button"},n.createElement(g.EbayButton,Object.assign({"aria-label":t==="loading"?y:void 0},e,{ref:void 0,split:"start",bodyState:t==="expand"?void 0:t}),m),n.createElement(s.EbayMenuButton,{priority:e.priority,disabled:e.disabled,transparent:e.transparent,partiallyDisabled:e.partiallyDisabled,size:e.size,type:u,split:"end",reverse:!0,a11yText:l,onCollapse:d,onExpand:p,onSelect:c,onChange:b},E))};exports.EbaySplitButton=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("../tslib.es6-BW4cJBUu.js"),n=require("react"),i=require("../utils-C9NL3q0j.js"),g=require("../button-Cylml1aK.js"),s=require("../menu-button-BPwZtkuk.js"),x=require("../menu-A2rDgu5k.js");require("classnames");const q=a=>{var{a11yMenuText:l,children:o,type:u,bodyState:t,a11yButtonLoadingText:y,onCollapse:d,onExpand:p,onSelect:c=()=>{},onChange:b=()=>{}}=a,e=S.__rest(a,["a11yMenuText","children","type","bodyState","a11yButtonLoadingText","onCollapse","onExpand","onSelect","onChange"]);const r=[x.EbayMenuItem,s.EbayMenuButtonSeparator],m=i.filterBy(o,B=>!r.includes(B.type)),E=i.filterByType(o,r);return n.createElement("span",{className:"split-button"},n.createElement(g.EbayButton,Object.assign({"aria-label":t==="loading"?y:void 0},e,{ref:void 0,split:"start",bodyState:t==="expand"?void 0:t}),m),n.createElement(s.EbayMenuButton,{priority:e.priority,disabled:e.disabled,transparent:e.transparent,partiallyDisabled:e.partiallyDisabled,size:e.size,type:u,split:"end",reverse:!0,a11yText:l,onCollapse:d,onExpand:p,onSelect:c,onChange:b},E))};exports.EbaySplitButton=q;

package/ebay-star-rating/README.md

@@ -1,43 +1,5 @@
 # EbayStarRating
 
-For full stars use (rating from 0-5): ebay-star-rating-{rating} For half stars use: ebay-star-rating-{rating}-5 DS v1.0.0
+## Documentation
 
-## Demo
-
-[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/graphics-icons-ebay-star-rating--stars)
-
-## Usage
-
-```
-yarn add @ebay/ui-core-react
-```
-
-### Import JS
-
-```jsx harmony
-import { EbayStarRating } from "@ebay/ui-core-react/ebay-star-rating";
-```
-
-## Import following styles from Skin
-
-```jsx harmony
-import "@ebay/skin/star-rating";
-```
-
-## ...or using SCSS/CSS
-
-```jsx harmony
-import "@ebay/skin/star-rating.css";
-```
-
-```jsx harmony
-<EbayStarRating aria-label="Star Rating" value="1"/>
-<EbayStarRating aria-label="Star Rating" value="0-5"/>
-```
-
-## Attributes
-
-| Name       | Type   | Stateful | Description |
-| ---------- | ------ | -------- | ----------- | ------------------------------------------------------------------------------------------- |
-| `a11yText` | String | No       | Yes         | text for non-decorative inline icon; icon is assumed to be decorative if this is not passed |
-| `value`    | String | No       | Yes         | The amount of stars to be filled. Can be "2-5" for 2 and a half stars.                      |
+[Storybook](https://opensource.ebay.com/evo-web/ebayui-core-react/main/?path=/docs/graphics-icons-ebay-star-rating--docs)

package/ebay-star-rating/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../tslib.es6-C4EgNkz1.js"),e=require("react"),l=require("classnames"),o=require("../icons/ebay-icon-star-dynamic/index.js"),m=require("../range-DOsPN0h5.js"),u=m.range(1,5),y=a=>{var{value:t,a11yText:r,className:s}=a,n=i.__rest(a,["value","a11yText","className"]);return e.createElement("div",Object.assign({role:"img","aria-label":r,className:l("star-rating",s),"data-stars":t},n),u.map(c=>e.createElement(o.EbayIconStarDynamic,{key:c,className:"star-rating__icon"})))};exports.EbayStarRating=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../tslib.es6-BW4cJBUu.js"),e=require("react"),l=require("classnames"),o=require("../icons/ebay-icon-star-dynamic/index.js"),m=require("../range-DOsPN0h5.js"),u=m.range(1,5),y=a=>{var{value:t,a11yText:r,className:s}=a,n=i.__rest(a,["value","a11yText","className"]);return e.createElement("div",Object.assign({role:"img","aria-label":r,className:l("star-rating",s),"data-stars":t},n),u.map(c=>e.createElement(o.EbayIconStarDynamic,{key:c,className:"star-rating__icon"})))};exports.EbayStarRating=y;

package/ebay-star-rating-select/README.md

@@ -1,52 +1,5 @@
 # EbayStarRatingSelect
 
-use (rating from 0-5)
+## Documentation
 
-## Demo
-
-[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/form-input-ebay-star-rating-select--isolated)
-
-## Usage
-
-```
-yarn add @ebay/ui-core-react
-```
-
-### Import JS
-
-```jsx harmony
-import { EbayStarRatingSelect } from "@ebay/ui-core-react/ebay-star-rating-select";
-```
-
-## Import following styles from Skin
-
-```jsx harmony
-import "@ebay/skin/star-rating-select";
-```
-
-## ...or using SCSS/CSS
-
-```jsx harmony
-import "@ebay/skin/star-rating.css";
-```
-
-```jsx harmony
-<EbayStarRatingSelect value={1}>
-```
-
-## Attributes
-
-| Name           | Type    | Stateful | Description                      |
-| -------------- | ------- | -------- | -------------------------------- | ---------------------------------------------------------------------- |
-| `a11yStarText` | array   | No       | Yes                              | array of strings for star inputs                                       |
-| `a11yText`     | String  | No       | Yes                              | container aria-label                                                   |
-| `value`        | String  | No       | Yes                              | The amount of stars to be filled. Can be "2-5" for 2 and a half stars. |
-| `disabled`     | Boolean | No       | Rating stars are disabled or not |
-
-## Callbacks
-
-| Name        | Type     | Required | Description               | Data                                 |
-| ----------- | -------- | -------- | ------------------------- | ------------------------------------ |
-| `onChange`  | Function | No       | triggered on value change | `(ChangeEvent, { value: number })`   |
-| `onFocus`   | Function | No       | triggered on focus        | `(FocusEvent, { value: number })`    |
-| `onKeydown` | Function | No       | triggered on keydown      | `(KeyboardEvent, { value: number })` |
+[Storybook](https://opensource.ebay.com/evo-web/ebayui-core-react/main/?path=/docs/form-input-ebay-star-rating-select--docs)

package/ebay-star-rating-select/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("../tslib.es6-C4EgNkz1.js"),t=require("react"),d=require("classnames"),k=require("../range-DOsPN0h5.js"),q=require("../random-id-DlJj_RWH.js"),C=require("../icons/ebay-icon-star-dynamic/index.js"),D=k.range(1,5),s=r=>{let a=parseInt(r,0)||0;return a>5&&(a=0),a},I=r=>{var{value:a=0,a11yText:i,className:m,a11yStarText:l=[],disabled:c,onChange:g=()=>{},onFocus:y=()=>{},onKeyDown:_=()=>{},name:b}=r,v=h.__rest(r,["value","a11yText","className","a11yStarText","disabled","onChange","onFocus","onKeyDown","name"]);const S=q.useRandomId(),f=b||`star-rating-${S}`,[u,o]=t.useState(s(a));t.useEffect(()=>{o(s(a))},[a]);const p=e=>n=>{c||(o(s(e)),_(n,{value:e}))},E=e=>n=>{c||(o(s(e)),g(n,{value:e}))},N=e=>n=>{c||(o(s(e)),y(n,{value:e}))};return t.createElement("div",Object.assign({role:i&&"radiogroup","aria-label":i,className:d("star-rating-select",m)},v),D.map(e=>t.createElement("span",{className:"star-rating-select__radio",key:e},t.createElement("input",{"aria-label":l?.[e-1],className:d("star-rating-select__control",{"star-rating-select__control--filled":e<=u}),type:"radio",name:f,value:e,disabled:c,defaultChecked:u===e,onClick:E(e),onFocus:N(e),onKeyDown:p(e)}),t.createElement("span",{className:"star-rating-select__radio-icon"},t.createElement(C.EbayIconStarDynamic,{className:"star-rating__icon"})))))};exports.EbayStarRatingSelect=I;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("../tslib.es6-BW4cJBUu.js"),t=require("react"),d=require("classnames"),k=require("../range-DOsPN0h5.js"),q=require("../random-id-DlJj_RWH.js"),C=require("../icons/ebay-icon-star-dynamic/index.js"),D=k.range(1,5),s=r=>{let a=parseInt(r,0)||0;return a>5&&(a=0),a},I=r=>{var{value:a=0,a11yText:i,className:m,a11yStarText:l=[],disabled:c,onChange:g=()=>{},onFocus:y=()=>{},onKeyDown:_=()=>{},name:b}=r,v=h.__rest(r,["value","a11yText","className","a11yStarText","disabled","onChange","onFocus","onKeyDown","name"]);const S=q.useRandomId(),f=b||`star-rating-${S}`,[u,o]=t.useState(s(a));t.useEffect(()=>{o(s(a))},[a]);const p=e=>n=>{c||(o(s(e)),_(n,{value:e}))},E=e=>n=>{c||(o(s(e)),g(n,{value:e}))},N=e=>n=>{c||(o(s(e)),y(n,{value:e}))};return t.createElement("div",Object.assign({role:i&&"radiogroup","aria-label":i,className:d("star-rating-select",m)},v),D.map(e=>t.createElement("span",{className:"star-rating-select__radio",key:e},t.createElement("input",{"aria-label":l?.[e-1],className:d("star-rating-select__control",{"star-rating-select__control--filled":e<=u}),type:"radio",name:f,value:e,disabled:c,defaultChecked:u===e,onClick:E(e),onFocus:N(e),onKeyDown:p(e)}),t.createElement("span",{className:"star-rating-select__radio-icon"},t.createElement(C.EbayIconStarDynamic,{className:"star-rating__icon"})))))};exports.EbayStarRatingSelect=I;

package/ebay-svg/README.md

@@ -1,41 +1,5 @@
 # EbaySvg
 
-This is a helper component which holds all the SVG icons for your other `@ebay/ui-core-react` components.
+## Documentation
 
-## Install
-
-```
-yarn add @ebay/ui-core-react
-```
-
-## Usage
-
-Import it and place at the end of your HTML and make sure that this component is only rendered on the server and never import it on the client side.
-
-```jsx harmony
-import { EbaySvg, EbayFlagsSvg } from "@ebay/ui-core-react/ebay-svg";
-
-<Html>
-    <Component1 />
-    <Component2 />
-    <EbaySvg />
-    <EbayFlagsSvg />
-</Html>;
-```
-
-### Use only necessary icons
-
-In order to reduce the size of the HTML and the processing time of React, make sure to use only the necessary icons to your application by using the
-`icons` attribute.
-
-```jsx harmony
-import { EbaySvg } from "@ebay/ui-core-react/ebay-svg";
-
-<EbaySvg icons={["attention16", "information16"]} />;
-```
-
-## Attributes
-
-| Name    | Type   | Stateful | Description |
-| ------- | ------ | -------- | ----------- | -------------------------------------------------------------------- |
-| `icons` | Icon[] | No       | Yes         | Use it to filter only the symbols that is needed in your application |
+[Storybook](https://opensource.ebay.com/evo-web/ebayui-core-react/main/?path=/docs/graphics-icons-ebay-svg--docs)