@ebay/ui-core-react 7.2.0-alpha.5 → 7.2.1

package/README.md

@@ -6,26 +6,35 @@ eBayUI React components
 
 ### Requirements
 
-* [Node.js](https://nodejs.org/en/) (v18.13)
-* [React](https://reactjs.org/) (v16.8+)
-* [eBay Skin](https://ebay.github.io/skin/) (v16)
+* [Node.js](https://nodejs.org/en/) (v20.12.2)
+* [React](https://reactjs.org/) (v18+, v16.8+ in maintenance mode)
+* [eBay Skin](https://ebay.github.io/skin/) (v18+)
 
 ### eBayUI Components
 * [ ] `ebay-3d-viewer`
 * [x] [ebay-alert-dialog](src/ebay-alert-dialog)
+* [ ] `ebay-area-chart`
+* [ ] `ebay-avatar`
 * [x] [ebay-confirm-dialog](src/ebay-confirm-dialog)
 * [x] [ebay-badge](src/ebay-badge)
+* [ ] `ebay-bar-chart`
 * [x] [ebay-breadcrumbs](src/ebay-breadcrumbs)
 * [x] [ebay-button](src/ebay-button)
-* [ ] `ebay-calendar`
+* [x] [ebay-calendar](src/ebay-calendar)
+* [ ] `ebay-character-count`
 * [x] [ebay-carousel](src/ebay-carousel)
+* [ ] `ebay-chart-legend`
 * [x] [ebay-checkbox](src/ebay-checkbox)
+* [ ] `ebay-chip`
+* [ ] `ebay-chips-combobox`
 * [ ] `ebay-combobox`
 * [x] [ebay-confirm-dialog](src/ebay-confirm-dialog)
 * [x] [ebay-cta-button](src/ebay-cta-button)
-* [ ] `ebay-date-textbox`
+* [x] [ebay-date-textbox](src/ebay-date-textbox)
 * [ ] `ebay-details`
+* [ ] `ebay-donut-chart`
 * [x] [ebay-drawer-dialog](src/ebay-drawer-dialog)
+* [ ] `ebay-education-notice`
 * [x] [ebay-eek](src/ebay-eek)
 * [x] [ebay-fullscreen-dialog](src/ebay-fullscreen-dialog)
 * [ ] `ebay-fake-link`
@@ -33,11 +42,14 @@ eBayUI React components
 * [x] [ebay-fake-menu-button](src/ebay-fake-menu-button)
 * [x] [ebay-fake-tabs](src/ebay-fake-tabs)
 * [x] [ebay-field](src/ebay-field)
-* [ ] `ebay-filter` (in progress...)
+* [ ] `ebay-filter`
 * [ ] `ebay-filter-menu`
 * [ ] `ebay-filter-menu-button`
+* [ ] `ebay-flag`
+* [x] [ebay-fullscreen-dialog](src/ebay-fullscreen-dialog)
 * [x] [ebay-icon-button](src/ebay-icon-button)
 * [x] [ebay-icon](src/ebay-icon)
+* [ ] `ebay-image-placeholder`
 * [x] [ebay-infotip](src/ebay-infotip)
 * [x] [ebay-inline-notice](src/ebay-inline-notice)
 * [x] [ebay-lightbox-dialog](src/ebay-lightbox-dialog)
@@ -49,15 +61,20 @@ eBayUI React components
 * [x] [ebay-page-notice](src/ebay-page-notice)
 * [x] [ebay-pagination](src/ebay-pagination)
 * [x] [ebay-panel-dialog](src/ebay-panel-dialog)
+* [ ] `ebay-phone-input`
 * [x] [ebay-progress-bar](src/ebay-progress-bar)
+* [ ] `ebay-progress-bar-expressive`
 * [x] [ebay-progress-spinner](src/ebay-progress-spinner)
 * [x] [ebay-progress-stepper](src/ebay-progress-stepper)
 * [x] [ebay-radio](src/ebay-radio)
 * [x] [ebay-section-title](src/ebay-section-title)
 * [x] [ebay-section-notice](src/ebay-section-notice)
+* [x] [ebay-segmented-buttons](src/ebay-segmented-buttons)
 * [x] [ebay-select](src/ebay-select)
 * [x] [ebay-signal](src/ebay-signal)
+* [ ] `ebay-skeleton`
 * [x] [ebay-snackbar-dialog](src/ebay-snackbar-dialog)
+* [ ] `ebay-spark-line`
 * [x] [ebay-split-button](src/ebay-split-button)
 * [x] [ebay-star-rating](src/ebay-star-rating)
 * [x] [ebay-star-rating-select](src/ebay-star-rating-select)
@@ -65,6 +82,8 @@ eBayUI React components
 * [x] [ebay-tabs](src/ebay-tabs)
 * [x] [ebay-textbox](src/ebay-textbox)
 * [x] [ebay-toast-dialog](src/ebay-toast-dialog)
+* [ ] `ebay-toggle-button`
+* [ ] `ebay-toggle-button-group`
 * [x] [ebay-tooltip](src/ebay-tooltip)
 * [x] [ebay-tourtip](src/ebay-tourtip)
 * [ ] `ebay-tri-state-checkbox`
@@ -77,18 +96,9 @@ These react components are available as `@ebay/ui-core-react` package on [NPM](h
 Use npm or yarn to add the package dependency to your project:
 
 ```sh
-yarn add @ebay/ui-core-react
-```
-
-### for quick development/POC
-```jsx
-import { EbayTextbox, EbayButton } from '@ebay/ui-core-react'
-
-<EbayTextbox placeholder="Enter text here" />
-<EbayButton>Submit</EbayButton>
+yarn add @ebay/ui-core-react @ebay/skin
 ```
 
-### for smaller bundle size
 ```jsx harmony
 import { EbayTextbox } from '@ebay/ui-core-react/ebay-textbox'
 import { EbayButton } from '@ebay/ui-core-react/ebay-button'
@@ -123,16 +133,18 @@ Create an issue on github
 ## Changelog
 
 `@ebay/ui-core-react`
+### version 7.x (Skin 18, breaking changes in icon names)
+### version 6.x (Skin 17, breaking changes in icon names)
 ### version 5.x (Skin 16, breaking changes in event callbacks)
 ### version 4.x (Skin 16, breaking changes in icon names)
 ### version 3.x (Skin 15, some breaking changes in dialog components)
 ### version 2.x (Skin 15)
 
-`@ebay/ebayui-core-react`
+`@ebay/ebayui-core-react` (obsolete)
 ### version 10.x (Skin 14)
 ### version 9.x (skin 13)
 
-`ebayui-core-react`
+`ebayui-core-react` (obsolete)
 ### version 8.x (skin 12)
 ### version 6.x (skin 10)
 ### version 5.x (removed less, changed imports to minimize bundle size)

package/ebay-segmented-buttons/README.md

@@ -0,0 +1,42 @@
+# EbaySegmentedButtons
+
+## Demo
+[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"><EbayIcon name="settings24" /> 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

package/ebay-segmented-buttons/button.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { SegmentedButtonProps } from './types';
+declare const SegmentedButton: FC<SegmentedButtonProps>;
+export default SegmentedButton;
+//# sourceMappingURL=button.d.ts.map

package/ebay-segmented-buttons/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/ebay-segmented-buttons/button.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAIjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAE9C,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA8B7C,CAAA;AAED,eAAe,eAAe,CAAA"}

package/ebay-segmented-buttons/index.d.ts

@@ -0,0 +1,4 @@
+export { default as EbaySegmentedButtons } from './segmented-buttons';
+export { default as EbaySegmentedButton } from './button';
+export type { SegmentedButtonsProps, SegmentedButtonProps, SegmentedButtonSize } from './types';
+//# sourceMappingURL=index.d.ts.map

package/ebay-segmented-buttons/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-segmented-buttons/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AACrE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,UAAU,CAAA;AACzD,YAAY,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA"}

package/ebay-segmented-buttons/segmented-buttons.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { SegmentedButtonsProps } from './types';
+declare const EbaySegmentedButtons: FC<SegmentedButtonsProps>;
+export default EbaySegmentedButtons;
+//# sourceMappingURL=segmented-buttons.d.ts.map

package/ebay-segmented-buttons/segmented-buttons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-buttons.d.ts","sourceRoot":"","sources":["../../src/ebay-segmented-buttons/segmented-buttons.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAgB,EAAE,EAA0B,MAAM,OAAO,CAAA;AAEvE,OAAO,EAAwB,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAIrE,QAAA,MAAM,oBAAoB,EAAE,EAAE,CAAC,qBAAqB,CAsCnD,CAAA;AAED,eAAe,oBAAoB,CAAA"}

package/ebay-segmented-buttons/types.d.ts

@@ -0,0 +1,16 @@
+import { ComponentProps } from 'react';
+import { EbayChangeEventHandler, EbayMouseEventHandler } from '../common/event-utils/types';
+export type SegmentedButtonProps = Omit<ComponentProps<'button'>, 'onClick'> & {
+    value?: string;
+    selected?: boolean;
+    onClick?: EbayMouseEventHandler<HTMLButtonElement>;
+};
+export type SegmentedButtonSize = 'large' | 'regular';
+export type SegmentedButtonsProps = Omit<ComponentProps<'div'>, 'onChange'> & {
+    size?: SegmentedButtonSize;
+    onChange?: EbayChangeEventHandler<HTMLButtonElement, {
+        index: number;
+        value?: string;
+    }>;
+};
+//# sourceMappingURL=types.d.ts.map

package/ebay-segmented-buttons/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ebay-segmented-buttons/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAA;AAE3F,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC,GAAG;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,qBAAqB,CAAC,iBAAiB,CAAC,CAAC;CACtD,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,SAAS,CAAA;AAErD,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAC1E,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,QAAQ,CAAC,EAAE,sBAAsB,CAAC,iBAAiB,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC3F,CAAA"}

package/ebay-segmented-buttons.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebay/ui-core-react",
-  "version": "7.2.0-alpha.5",
+  "version": "7.2.1",
   "description": "Skin components build off React",
   "publishConfig": {
     "registry": "https://registry.npmjs.org"