@ebay/ui-core-react 9.4.0 → 9.5.0

package/ebay-progress-spinner/README.md

@@ -1,38 +1,5 @@
 # EbayProgressSpinner
 
-## Demo
+## Documentation
 
-[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/progress-ebay-progress-spinner--default-small-large)
-
-## Usage
-
-### Import JS
-
-```jsx harmony
-import { EbayProgressSpinner } from "@ebay/ui-core-react/ebay-progress-spinner";
-```
-
-### Import styles from Skin
-
-```jsx
-import "@ebay/skin/progress-spinner";
-```
-
-### or if using CSS/SCSS
-
-```jsx
-import "@ebay/skin/progress-spinner.css";
-```
-
-### Big spinner
-
-```jsx harmony
-<EbayProgressSpinner size="large">
-```
-
-## Attributes
-
-| Name         | Type   | Stateful | Required | Description                           | Data |
-| ------------ | ------ | -------- | -------- | ------------------------------------- | ---- |
-| `size`       | String | No       | No       | `default` (default), `small`, `large` |
-| `aria-label` | String | No       | No       | custom aria label instead of `Busy`   |
+[Storybook](https://opensource.ebay.com/evo-web/ebayui-core-react/main/?path=/docs/progress-ebay-progress-spinner--docs)

package/ebay-progress-spinner/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../progress-spinner-DTmNtD59.js");exports.EbayProgressSpinner=e.EbayProgressSpinner;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../progress-spinner-CYHN2qj2.js");exports.EbayProgressSpinner=e.EbayProgressSpinner;

package/ebay-progress-stepper/README.md

@@ -1,82 +1,5 @@
 # EbayProgressStepper
 
-## Demo
+## Documentation
 
-[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/progress-ebay-progress-stepper--default)
-
-## Usage
-
-```
-yarn add @ebay/ui-core-react
-```
-
-## Import JS
-
-```jsx harmony
-import { EbayProgressStepper, EbayProgressStep as Step } from "@ebay/ui-core-react/ebay-progress-stepper";
-```
-
-### Import styles from Skin
-
-```jsx
-import "@ebay/skin/progress-stepper";
-```
-
-```jsx
-<EbayProgressStepper>
-    <Step>Started</Step>
-    <Step>Shipped</Step>
-    <Step current>Transit</Step>
-    <Step>Delivered</Step>
-</EbayProgressStepper>
-```
-
-## Components
-
-### EbayProgressStepper
-
-This is the container of the wizard stepper and you can define the direction of the stepper and pass properties to
-customize the layout (`className` or `style`)
-
-#### Props
-
-| Name           | Type   | Stateful | Required | Description                                                                                                                                                                                                                                                                              |
-| -------------- | ------ | -------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `direction`    | String | No       | No       | Either `column` or `row` (default). Will display stepper as a vertical column or horizontal row.                                                                                                                                                                                         |
-| `defaultState` | String | Yes      | No       | `complete`: all items will be in `complete` state by default, `upcoming`:all items will be in `upcoming` state, `attention`: current item will be shown as blocked. Otherwise, default state (`active`) will change items based on the current item (defaults to first step if not set). |
-
-### EbayProgressStep
-
-This component is used to render each step. It renders an icon, a title and a text label.
-
-#### Props
-
-| Name      | Type    | Stateful | Required | Description                                                                                                                                                                                                                                              |
-| --------- | ------- | -------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `current` | Boolean | No       | No       | The current step. Only first step that has this property will be considered current. All steps before will be rendered as complete, and all after will render as upcoming. If not present on any step, then will render based on `defaultState` property |
-
-### EbayProgressTitle
-
-The bolded title for each step. Will be rendered in an `h4` by default.
-
-#### Props
-
-| Name | Type   | Stateful | Required | Description                     |
-| ---- | ------ | -------- | -------- | ------------------------------- |
-| `as` | String | No       | No       | HTML tag to use instead of `h4` |
-
-#### Example
-
-```jsx
-<EbayProgressStepper>
-    <EbayProgressStep>
-        <EbayProgressTitle>Started</EbayProgressTitle>
-        July 3rd
-    </EbayProgressStep>
-
-    <EbayProgressStep current>
-        <EbayProgressTitle>Shipped</EbayProgressTitle>
-        July 4th
-    </EbayProgressStep>
-</EbayProgressStepper>
-```
+[Storybook](https://opensource.ebay.com/evo-web/ebayui-core-react/main/?path=/docs/progress-ebay-progress-stepper--docs)

package/ebay-progress-stepper/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("../tslib.es6-C4EgNkz1.js"),t=require("react"),b=require("classnames"),g=require("../icons/ebay-icon-stepper-confirmation-24/index.js"),_=require("../icons/ebay-icon-stepper-attention-24/index.js"),S=require("../icons/ebay-icon-stepper-upcoming-24/index.js"),f=e=>{var{direction:r="row",defaultState:s="active",children:a,className:p}=e,l=y.__rest(e,["direction","defaultState","children","className"]);const c=t.Children.toArray(a),o=v(c,s);return t.createElement("div",Object.assign({},l,{className:b(p,"progress-stepper",{"progress-stepper--vertical":r==="column"})}),t.createElement("div",{role:"list",className:"progress-stepper__items"},c.map((i,n)=>t.createElement(t.Fragment,{key:n},n>0&&t.createElement("hr",{className:"progress-stepper__separator",role:"presentation"}),t.cloneElement(i,Object.assign(Object.assign({state:N(n,o)},i.props),{current:o===n}))))))};function v(e,r){const s=e.findIndex(a=>a.props.current);if(s===-1)switch(r){case"complete":return e.length-1;case"upcoming":return 0}return s}function N(e,r){if(e<=r)return"complete";if(e>r)return"upcoming"}const h={complete:g.EbayIconStepperConfirmation24,attention:_.EbayIconStepperAttention24,upcoming:S.EbayIconStepperUpcoming24,active:g.EbayIconStepperConfirmation24},I=e=>{var{current:r,state:s="complete",children:a,className:p}=e,l=y.__rest(e,["current","state","children","className"]);const c=t.Children.toArray(a),o=c.find(m=>m.type===u),i=c.filter(m=>m.type!==u),n=b(p,"progress-stepper__item",{"progress-stepper__item--attention":s==="attention"}),d=h[s],E=r?"current":s;return t.createElement("div",Object.assign({},l,{className:n,role:"listitem","aria-current":r?"step":void 0}),t.createElement("div",{className:"progress-stepper__icon"},t.createElement(d,{"aria-label":E})),t.createElement("div",{className:"progress-stepper__text"},o,i))},u=({as:e="h4",children:r})=>t.createElement(e,{},r);exports.EbayProgressStep=I;exports.EbayProgressStepper=f;exports.EbayProgressTitle=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("../tslib.es6-BW4cJBUu.js"),t=require("react"),b=require("classnames"),g=require("../icons/ebay-icon-stepper-confirmation-24/index.js"),_=require("../icons/ebay-icon-stepper-attention-24/index.js"),S=require("../icons/ebay-icon-stepper-upcoming-24/index.js"),f=e=>{var{direction:r="row",defaultState:s="active",children:a,className:p}=e,l=y.__rest(e,["direction","defaultState","children","className"]);const c=t.Children.toArray(a),o=v(c,s);return t.createElement("div",Object.assign({},l,{className:b(p,"progress-stepper",{"progress-stepper--vertical":r==="column"})}),t.createElement("div",{role:"list",className:"progress-stepper__items"},c.map((i,n)=>t.createElement(t.Fragment,{key:n},n>0&&t.createElement("hr",{className:"progress-stepper__separator",role:"presentation"}),t.cloneElement(i,Object.assign(Object.assign({state:N(n,o)},i.props),{current:o===n}))))))};function v(e,r){const s=e.findIndex(a=>a.props.current);if(s===-1)switch(r){case"complete":return e.length-1;case"upcoming":return 0}return s}function N(e,r){if(e<=r)return"complete";if(e>r)return"upcoming"}const h={complete:g.EbayIconStepperConfirmation24,attention:_.EbayIconStepperAttention24,upcoming:S.EbayIconStepperUpcoming24,active:g.EbayIconStepperConfirmation24},I=e=>{var{current:r,state:s="complete",children:a,className:p}=e,l=y.__rest(e,["current","state","children","className"]);const c=t.Children.toArray(a),o=c.find(m=>m.type===u),i=c.filter(m=>m.type!==u),n=b(p,"progress-stepper__item",{"progress-stepper__item--attention":s==="attention"}),d=h[s],E=r?"current":s;return t.createElement("div",Object.assign({},l,{className:n,role:"listitem","aria-current":r?"step":void 0}),t.createElement("div",{className:"progress-stepper__icon"},t.createElement(d,{"aria-label":E})),t.createElement("div",{className:"progress-stepper__text"},o,i))},u=({as:e="h4",children:r})=>t.createElement(e,{},r);exports.EbayProgressStep=I;exports.EbayProgressStepper=f;exports.EbayProgressTitle=u;

package/ebay-radio/README.md

@@ -1,61 +1,5 @@
 # EbayRadio
 
-## Demo
+## Documentation
 
-[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/form-input-ebay-radio--default)
-
-## Install
-
-```
-yarn add @ebay/ui-core-react
-```
-
-## Usage
-
-### Import JS
-
-```jsx harmony
-import { EbayRadio } from "@ebay/ui-core-react/ebay-radio";
-```
-
-### Import LESS from SKIN
-
-```jsx harmony
-import "@ebay/skin/radio";
-```
-
-### or SCSS/CSS
-
-```jsx harmony
-import "@ebay/skin/radio.css";
-```
-
-## EbayRadio with EbayLabel
-
-```jsx harmony
-import { EbayLabel } from "@ebay/ui-core-react/ebay-field";
-
-<EbayRadio value="1" id="radio-1">
-    <Ebaylabel>Choice 1</Ebaylabel>
-</EbayRadio>;
-```
-
-## Attributes
-
-| Name             | Type    | Description                                                                                             |
-| ---------------- | ------- | ------------------------------------------------------------------------------------------------------- | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `disabled`       | boolean | Disabled when true                                                                                      |
-| `value`          | string  | The value of radio button component. For the radio checked/unchecked state, please use `checked` props. |
-| `checked`        | boolean | Set the radio button state to checked/unchecked. Use this for **controlled component**.                 |
-| `defaultChecked` | boolean | Set the radio button initial state to checked/unchecked. Use this for **uncontrolled component**.       |
-| `size`           | string  | No                                                                                                      | No  | Either `large` or `regular` (default). Sets the radio icon size. For mweb this should be set to `large`. (Note: The dimensions of the radio will not change, but only the icon) |
-
-## Callbacks
-
-| Name        | Data                         | Description                                          |
-| ----------- | ---------------------------- | ---------------------------------------------------- |
-| `onChange`  | `(ChangeEvent, { value })`   | Callback fired when selected radio button is changed |
-| `onFocus`   | `(FocusEvent, { value })`    | Callback fired when radio button is focused          |
-| `onKeydown` | `(KeyboardEvent, { value })` | Callback fired when key is down                      |
-
-Note: For this component, `className`/`style` are applied to the container, while all other HTML attributes are applied to the input.
+[Storybook](https://opensource.ebay.com/evo-web/ebayui-core-react/main/?path=/docs/form-input-ebay-radio--docs)

package/ebay-radio/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../radio-LVgK_odp.js");exports.EbayRadio=e.EbayRadio;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../radio-B9y_zYUD.js");exports.EbayRadio=e.EbayRadio;

package/ebay-section-notice/README.md

@@ -1,56 +1,5 @@
 # EbaySectionNotice
 
-## Demo
+## Documentation
 
-[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/notices-tips-ebay-section-notice--default-message-with-no-action)
-
-## Import JS
-
-```jsx harmony
-import {
-    EbaySectionNotice,
-    EbayNoticeContent,
-    EbaySectionNoticeTitle,
-    EbaySectionNoticeFooter,
-} from "@ebay/ui-core-react/ebay-section-notice";
-```
-
-### Import following styles from SKIN
-
-```jsx harmony
-import "@ebay/skin/section-notice";
-```
-
-## Use
-
-```jsx harmony
-<EbaySectionNotice status="confirmation" aria-label="Confirmation">
-    <EbayNoticeContent>
-        <EbaySectionNoticeTitle>Congratulations</EbaySectionNoticeTitle>
-        <p>
-            This successfully finished <a href="http://www.ebay.com">next page</a>
-        </p>
-    </EbayNoticeContent>
-    <EbaySectionNoticeFooter>
-        <EbayButton>Action</EbayButton>
-    </EbaySectionNoticeFooter>
-</EbaySectionNotice>
-```
-
-## Attributes
-
-| Name                   | Type                                                                                | Stateful | Description                                                                                                                                 | Default         |
-| ---------------------- | ----------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------- | --------------- |
-| `status`               | String (`"general", "attention"`, `"confirmation"`, `"information"`, `"education"`) | No       | Determines the style and type of notice to be displayed                                                                                     | `"general"`     |
-| `aria-label`           | String                                                                              | No       | The description of the notice itself for screen readers. Check out [this issue](https://github.com/eBay/skin/issues/1001) for more context. | -               |
-| `aria-roledescription` | String                                                                              | No       | Adds role description attribute to the section notice                                                                                       | `"Notice"`      |
-| `children`             | React Node                                                                          | No       | The content to be displayed within the notice. **Must have the EbayNoticeContent within the children!**                                     | -               |
-| `educationIcon`        | Icon                                                                                | No       | Icon of the educational banner                                                                                                              | `"lightbulb24"` |
-| `iconClass`            | String                                                                              | No       | Class that will be added to the icon svg                                                                                                    | -               |
-| `prominent`            | Boolean                                                                             | No       | Sets the educational banner with a more prominent background                                                                                | `false`         |
-
-## Callbacks
-
-| Name        | Required | Description                 | Arguments |
-| ----------- | -------- | --------------------------- | --------- |
-| `onDismiss` | No       | Triggered on notice dismiss | (Event)   |
+[Storybook](https://opensource.ebay.com/evo-web/ebayui-core-react/main/?path=/docs/notices-tips-ebay-section-notice--docs)

package/ebay-section-notice/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("../tslib.es6-C4EgNkz1.js"),e=require("react"),j=require("classnames"),E=require("../notice-content-C0ZStfuX.js"),D=require("../notice-content-9iF4T8uB.js"),O=require("../icon-I30uh1Ov.js"),$=require("../random-id-DlJj_RWH.js"),A=require("../utils-C9NL3q0j.js"),v=require("../icons/ebay-icon-lightbulb-24/index.js"),k=require("../icons/ebay-icon-attention-filled-16/index.js"),x=require("../icons/ebay-icon-confirmation-filled-16/index.js"),L=require("../icons/ebay-icon-information-filled-16/index.js"),P=require("../icons/ebay-icon-close-16/index.js"),N=require("../notice-footer-G6VPjVZu.js"),R=require("../notice-cta-CKl_qBge.js"),w={attention:k.EbayIconAttentionFilled16,confirmation:x.EbayIconConfirmationFilled16,information:L.EbayIconInformationFilled16},M=n=>{var{status:t="general",children:i,className:a,"aria-label":c,"aria-roledescription":C="Notice",a11yDismissText:u,educationIcon:f,iconClass:p,prominent:g,onDismiss:q=()=>{}}=n,S=y.__rest(n,["status","children","className","aria-label","aria-roledescription","a11yDismissText","educationIcon","iconClass","prominent","onDismiss"]);const[h,_]=e.useState(!1),[m,F]=e.useState("");e.useEffect(()=>{F($.randomId())},[]);const d=A.findComponent(i,E.EbayNoticeContent),s=t!=="general"&&t!=="none",r=t==="education";let o=null;const l={className:p,a11yText:c,a11yVariant:"label"};if(s)if(r)o=f||e.createElement(v.EbayIconLightbulb24,Object.assign({},l));else{const b=w[t];o=e.createElement(b,Object.assign({},l))}if(!d)throw new Error("EbaySectionNotice: Please use a EbayNoticeContent that defines the content of the notice");const T=b=>{_(!0),q(b)};return h?null:e.createElement("section",Object.assign({},S,{className:j(a,"section-notice",{[`section-notice--${t}`]:s,"section-notice--education":r&&g,"section-notice--large-icon":r}),"aria-label":s?null:c,"aria-labelledby":s?`section-notice-${t}-${m}`:null,"aria-roledescription":C}),o&&e.createElement("div",{className:"section-notice__header",id:`section-notice-${t}-${m}`},typeof o=="string"?e.createElement(O.EbayIcon,Object.assign({name:o},l)):o),e.createElement(D.NoticeContent,Object.assign({},d.props,{type:"section"})),i,u&&e.createElement(I,null,e.createElement("button",{"aria-label":u,className:"fake-link page-notice__dismiss",onClick:T},e.createElement(P.EbayIconClose16,null))))},V=n=>{var{className:t,as:i,children:a}=n,c=y.__rest(n,["className","as","children"]);return e.createElement(N.NoticeTitle,Object.assign({},c,{className:t,as:i,type:"section"}),a)},I=({className:n,children:t})=>e.createElement(N.NoticeFooter,{className:n,type:"section"},t),z=({className:n,children:t})=>e.createElement(R.NoticeCTA,{className:n,type:"section"},t);exports.EbayNoticeContent=E.EbayNoticeContent;exports.EbaySectionNotice=M;exports.EbaySectionNoticeCTA=z;exports.EbaySectionNoticeFooter=I;exports.EbaySectionNoticeTitle=V;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("../tslib.es6-BW4cJBUu.js"),e=require("react"),j=require("classnames"),E=require("../notice-content-C0ZStfuX.js"),D=require("../notice-content-9iF4T8uB.js"),O=require("../icon-M7M42naA.js"),$=require("../random-id-DlJj_RWH.js"),A=require("../utils-C9NL3q0j.js"),v=require("../icons/ebay-icon-lightbulb-24/index.js"),k=require("../icons/ebay-icon-attention-filled-16/index.js"),x=require("../icons/ebay-icon-confirmation-filled-16/index.js"),L=require("../icons/ebay-icon-information-filled-16/index.js"),P=require("../icons/ebay-icon-close-16/index.js"),N=require("../notice-footer-DOQFXLxG.js"),R=require("../notice-cta-DJCS8kXJ.js"),w={attention:k.EbayIconAttentionFilled16,confirmation:x.EbayIconConfirmationFilled16,information:L.EbayIconInformationFilled16},M=n=>{var{status:t="general",children:i,className:a,"aria-label":c,"aria-roledescription":C="Notice",a11yDismissText:u,educationIcon:f,iconClass:p,prominent:g,onDismiss:q=()=>{}}=n,S=y.__rest(n,["status","children","className","aria-label","aria-roledescription","a11yDismissText","educationIcon","iconClass","prominent","onDismiss"]);const[h,_]=e.useState(!1),[m,F]=e.useState("");e.useEffect(()=>{F($.randomId())},[]);const d=A.findComponent(i,E.EbayNoticeContent),s=t!=="general"&&t!=="none",r=t==="education";let o=null;const l={className:p,a11yText:c,a11yVariant:"label"};if(s)if(r)o=f||e.createElement(v.EbayIconLightbulb24,Object.assign({},l));else{const b=w[t];o=e.createElement(b,Object.assign({},l))}if(!d)throw new Error("EbaySectionNotice: Please use a EbayNoticeContent that defines the content of the notice");const T=b=>{_(!0),q(b)};return h?null:e.createElement("section",Object.assign({},S,{className:j(a,"section-notice",{[`section-notice--${t}`]:s,"section-notice--education":r&&g,"section-notice--large-icon":r}),"aria-label":s?null:c,"aria-labelledby":s?`section-notice-${t}-${m}`:null,"aria-roledescription":C}),o&&e.createElement("div",{className:"section-notice__header",id:`section-notice-${t}-${m}`},typeof o=="string"?e.createElement(O.EbayIcon,Object.assign({name:o},l)):o),e.createElement(D.NoticeContent,Object.assign({},d.props,{type:"section"})),i,u&&e.createElement(I,null,e.createElement("button",{"aria-label":u,className:"fake-link page-notice__dismiss",onClick:T},e.createElement(P.EbayIconClose16,null))))},V=n=>{var{className:t,as:i,children:a}=n,c=y.__rest(n,["className","as","children"]);return e.createElement(N.NoticeTitle,Object.assign({},c,{className:t,as:i,type:"section"}),a)},I=({className:n,children:t})=>e.createElement(N.NoticeFooter,{className:n,type:"section"},t),z=({className:n,children:t})=>e.createElement(R.NoticeCTA,{className:n,type:"section"},t);exports.EbayNoticeContent=E.EbayNoticeContent;exports.EbaySectionNotice=M;exports.EbaySectionNoticeCTA=z;exports.EbaySectionNoticeFooter=I;exports.EbaySectionNoticeTitle=V;

package/ebay-section-title/README.md

@@ -1,77 +1,5 @@
 # EbaySectionTitle
 
-## Install
+## Documentation
 
-```shell
-yarn add @ebay/ui-core-react
-```
-
-## Usage
-
-### Import JS
-
-```jsx
-import {
-    EbaySectionTitle,
-    EbaySectionTitleTitle as Title,
-    EbaySectionTitleSubtitle as Subtitle,
-} from "@ebay/ui-core-react/ebay-section-title";
-```
-
-### Import styles from Skin
-
-```jsx
-import "@ebay/skin/section-title";
-```
-
-### or if using CSS/SCSS
-
-```jsx
-import "@ebay/skin/section-title.css";
-```
-
-```jsx
-<EbaySectionTitle>Today's Deals – All With Free Shipping</EbaySectionTitle>
-
-<EbaySectionTitle href="https://www.ebay.com" ctaText="See All">
-    <Title>Today's Deals – All With Free Shipping</Title>
-    <Subtitle>Plus, guaranteed best prices.</Subtitle>
-</EbaySectionTitle>
-```
-
-## EbaySectionTitle Props
-
-| Name      | Type   | Stateful | Required | Description                                                                                             |
-| --------- | ------ | -------- | -------- | ------------------------------------------------------------------------------------------------------- |
-| `ctaText` | string | No       | No       | URL text. Optional content to be displayed next to title. `href` is required when using this attribute. |
-| `href`    | string | No       | No       | URL. Title content and optional CTA content will link to this. Populating `cta-text` is optional.       |
-
-## Nested Components
-
-| Name       | Required | Description                                                                              |
-| ---------- | -------- | ---------------------------------------------------------------------------------------- |
-| `title`    | No       | The main title content to be displayed. Title tag is required when using other sub-tags. |
-| `subtitle` | No       | The subtitle content to be displayed                                                     |
-| `info`     | No       | Placeholder for `<EbayInfotip>` component                                                |
-| `overflow` | No       | Placeholder for `<EbayMenuButton>` component                                             |
-
-### Examples
-
-```jsx
-import { EbaySectionTitleInfo as Info } from "@ebay/ui-core-react/ebay-section-title";
-import { EbayInfotip, EbayInfotipHeading, EbayInfotipContent } from "@ebay/ui-core-react/ebay-infotip";
-
-<Info>
-    <EbayInfotip
-        a11yCloseText="Dismiss infotip"
-        aria-label="Important information"
-        pointer="top-left"
-        icon={<EbayIconInformation16 />}
-    >
-        <EbayInfotipHeading>Important</EbayInfotipHeading>
-        <EbayInfotipContent>
-            <p>This is some important info</p>
-        </EbayInfotipContent>
-    </EbayInfotip>
-</Info>;
-```
+[Storybook](https://opensource.ebay.com/evo-web/ebayui-core-react/main/?path=/docs/navigation-disclosure-ebay-section-title--docs)

package/ebay-section-title/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("../tslib.es6-C4EgNkz1.js"),c=require("react"),i=require("classnames"),r=require("../utils-C9NL3q0j.js"),E=e=>{var{ctaText:t,href:s,className:n}=e,l=a.__rest(e,["ctaText","href","className"]);return t?c.createElement("a",Object.assign({},l,{className:i("section-title__cta",n),href:s}),t):null},T=e=>{var{href:t,ctaText:s,className:n,children:l}=e,N=a.__rest(e,["href","ctaText","className","children"]);const b=i(n,"section-title"),_=r.findComponent(l,o),f=r.findComponent(l,m),h=r.findComponent(l,u),v=r.findComponent(l,d);return c.createElement("div",Object.assign({},N,{className:b}),c.createElement("div",{className:"section-title__title-container"},_||c.createElement(o,null,l),f),t&&c.createElement(E,{href:t,ctaText:s})||h||v)},o=e=>{var{children:t,className:s}=e,n=a.__rest(e,["children","className"]);return c.createElement("h2",Object.assign({},n,{className:i(s,"section-title__title")}),t)},m=e=>{var{children:t,className:s}=e,n=a.__rest(e,["children","className"]);return c.createElement("span",Object.assign({},n,{className:i(s,"section-title__subtitle")}),t)},u=e=>{var{className:t,children:s}=e,n=a.__rest(e,["className","children"]);return c.createElement("div",Object.assign({},n,{className:i(t,"section-title__info")}),s)},d=e=>{var{children:t,className:s}=e,n=a.__rest(e,["children","className"]);return c.createElement("div",Object.assign({},n,{className:i(s,"section-title__overflow")}),t)};exports.EbaySectionTitle=T;exports.EbaySectionTitleInfo=u;exports.EbaySectionTitleOverflow=d;exports.EbaySectionTitleSubtitle=m;exports.EbaySectionTitleTitle=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("../tslib.es6-BW4cJBUu.js"),c=require("react"),i=require("classnames"),r=require("../utils-C9NL3q0j.js"),E=e=>{var{ctaText:t,href:s,className:n}=e,l=a.__rest(e,["ctaText","href","className"]);return t?c.createElement("a",Object.assign({},l,{className:i("section-title__cta",n),href:s}),t):null},T=e=>{var{href:t,ctaText:s,className:n,children:l}=e,N=a.__rest(e,["href","ctaText","className","children"]);const b=i(n,"section-title"),_=r.findComponent(l,o),f=r.findComponent(l,m),h=r.findComponent(l,u),v=r.findComponent(l,d);return c.createElement("div",Object.assign({},N,{className:b}),c.createElement("div",{className:"section-title__title-container"},_||c.createElement(o,null,l),f),t&&c.createElement(E,{href:t,ctaText:s})||h||v)},o=e=>{var{children:t,className:s}=e,n=a.__rest(e,["children","className"]);return c.createElement("h2",Object.assign({},n,{className:i(s,"section-title__title")}),t)},m=e=>{var{children:t,className:s}=e,n=a.__rest(e,["children","className"]);return c.createElement("span",Object.assign({},n,{className:i(s,"section-title__subtitle")}),t)},u=e=>{var{className:t,children:s}=e,n=a.__rest(e,["className","children"]);return c.createElement("div",Object.assign({},n,{className:i(t,"section-title__info")}),s)},d=e=>{var{children:t,className:s}=e,n=a.__rest(e,["children","className"]);return c.createElement("div",Object.assign({},n,{className:i(s,"section-title__overflow")}),t)};exports.EbaySectionTitle=T;exports.EbaySectionTitleInfo=u;exports.EbaySectionTitleOverflow=d;exports.EbaySectionTitleSubtitle=m;exports.EbaySectionTitleTitle=o;

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;