@ebay/ui-core-react 1.0.0

package/ebay-alert-dialog/alert-dialog.js

@@ -0,0 +1,62 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var ebay_dialog_base_1 = require("../ebay-dialog-base");
+var ebay_button_1 = require("../ebay-button");
+var classPrefix = 'alert-dialog';
+var EbayAlertDialog = function (_a) {
+    var _b = _a.a11yCloseText, a11yCloseText = _b === void 0 ? 'Close Dialog' : _b, confirmText = _a.confirmText, _c = _a.onOpen, onOpen = _c === void 0 ? function () { } : _c, _d = _a.onConfirm, onConfirm = _d === void 0 ? function () { } : _d, rest = __rest(_a, ["a11yCloseText", "confirmText", "onOpen", "onConfirm"]);
+    var confirmBtnRef = react_1.useRef(null);
+    var confirmId = 'alert-dialog-confirm';
+    var mainId = 'alert-dialog-main';
+    return (react_1.default.createElement(ebay_dialog_base_1.DialogBaseWithState, __assign({ focus: confirmBtnRef }, rest, { a11yCloseText: a11yCloseText, role: "alertdialog", classPrefix: classPrefix, ignoreEscape: true, mainId: mainId, buttonPosition: "hidden", className: classnames_1.default(rest.className, classPrefix + "--mask-fade"), windowClass: classPrefix + "__window " + classPrefix + "__window--fade" }),
+        rest.children,
+        react_1.default.createElement(ebay_dialog_base_1.EbayDialogFooter, null,
+            react_1.default.createElement(ebay_button_1.EbayButton, { priority: "primary", "aria-describedby": mainId, onClick: onConfirm, ref: confirmBtnRef, id: confirmId, className: "alert-dialog__acknowledge" }, confirmText))));
+};
+exports.default = EbayAlertDialog;

package/ebay-alert-dialog/index.d.ts

@@ -0,0 +1,2 @@
+export { default as EbayAlertDialog } from './alert-dialog';
+//# sourceMappingURL=index.d.ts.map

package/ebay-alert-dialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-alert-dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,gBAAgB,CAAA"}

package/ebay-alert-dialog/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var alert_dialog_1 = require("./alert-dialog");
+Object.defineProperty(exports, "EbayAlertDialog", { enumerable: true, get: function () { return alert_dialog_1.default; } });

package/ebay-badge/README.md

@@ -0,0 +1,36 @@
+# ebay-badge
+
+## Demo
+[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/ebay-badge--default)
+
+## Usage
+```
+yarn add @ebay/ui-core-react
+```
+
+### Import JS
+```jsx harmony
+import { EbayBadge } from '@ebay/ui-core-react/ebay-badge'
+```
+
+## Import following styles from Skin
+```jsx harmony
+import '@ebay/skin/badge'
+```
+
+## ...or using SCSS/CSS
+```jsx harmony
+import '@ebay/skin/badge.css'
+```
+
+```jsx harmony
+<EbayBadge aria-label="1 unread item">1</EbayBadge>
+```
+
+## Attributes
+
+Name | Type | Stateful | Description
+--- | --- | --- | ---
+`type` | String | No | Yes | (default) `img`, `menu`, `icon`
+`number` | Number | No | Yes | Used as the number to be placed in the badge
+`aria-label` | String | No | Yes | Required only when not a part of a menu or a button. A descriptive label of what the badge represents (e.g. "5 unread items")

package/ebay-badge/badge.d.ts

@@ -0,0 +1,9 @@
+import { ComponentProps, FC } from 'react';
+export declare type EbayBadgeType = 'menu' | 'icon' | 'img';
+declare type Props = ComponentProps<'span'> & {
+    type?: EbayBadgeType;
+    number: number;
+};
+declare const EbayBadge: FC<Props>;
+export default EbayBadge;
+//# sourceMappingURL=badge.d.ts.map

package/ebay-badge/badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/ebay-badge/badge.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAGjD,oBAAY,aAAa,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,CAAA;AAEnD,aAAK,KAAK,GAAG,cAAc,CAAC,MAAM,CAAC,GAAG;IAClC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;CAClB,CAAA;AAED,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,KAAK,CAmBxB,CAAA;AAED,eAAe,SAAS,CAAA"}

package/ebay-badge/badge.js

@@ -0,0 +1,36 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var EbayBadge = function (_a) {
+    var number = _a.number, _b = _a.type, type = _b === void 0 ? 'img' : _b, className = _a.className, rest = __rest(_a, ["number", "type", "className"]);
+    // Parse in case user provided a string by mistake
+    var parsed = Math.round(parseInt(String(number), 10));
+    return parsed <= 0 ? null : (react_1.default.createElement("span", __assign({}, rest, { className: classnames_1.default('badge', className), role: type === 'img' ? 'img' : undefined, "aria-hidden": type !== 'img' }), parsed > 99 ? '99+' : parsed));
+};
+exports.default = EbayBadge;

package/ebay-badge/index.d.ts

@@ -0,0 +1,2 @@
+export { default as EbayBadge } from './badge';
+//# sourceMappingURL=index.d.ts.map

package/ebay-badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,SAAS,CAAA"}

package/ebay-badge/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var badge_1 = require("./badge");
+Object.defineProperty(exports, "EbayBadge", { enumerable: true, get: function () { return badge_1.default; } });

package/ebay-breadcrumbs/README.md

@@ -0,0 +1,48 @@
+# EbayBreadcrumbs
+
+## Demo
+[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/ebay-breadcrumbs--default)
+
+## Usage
+
+### Import JS
+```jsx
+import { EbayBreadcrumbs, EbayBreadcrumbItem } from '@ebay/ui-core-react/ebay-breadcrumbs'
+```
+
+### Import styles from Skin
+```jsx
+import '@ebay/skin/breadcrumbs';
+import '@ebay/skin/utility';
+```
+
+### Breadcrumbs
+```jsx
+<EbayBreadcrumbs a11yHeadingText="Page navigation">
+    <EbayBreadcrumbItem href="https://ebay.com">eBay</EbayBreadcrumbItem>
+    <EbayBreadcrumbItem href="https://ebay.com/cars">Auto Parts and Vehicles</EbayBreadcrumbItem>
+    <EbayBreadcrumbItem>Motors Parts and Accessories</EbayBreadcrumbItem>
+</EbayBreadcrumbs>
+```
+
+If you render breadcrumbs dynamically don't forget about [keys](../../../#notes)
+
+## EbayBreadcrumb Attributes
+
+Name | Type | Stateful | Description | Data
+--- | --- | --- | --- | ---
+`a11yHeadingText` | String | No | heading for breadcrumb which will be clipped (default: 'Page navigation')
+`a11yHeadingTag` | String | No | heading tag for breadcrumb (default: `h2`)
+`onSelect` | Function | No | click breadcrumb items | `{ originalEvent, el }`
+
+All other props will be applied to the main wrapper (`nav`) element.
+
+## EbayBreadcrumbItem Attributes
+
+Name | Type | Stateful | Description
+--- | --- | --- | ---
+`href` | String | No | anchor href; omitting the href will switch to a button
+
+Notes:
+* custom `EbayBreadcrumbItem` props like `_sp` will be passed to `a`/`button` tag
+* If you want to have client side or ajax based navigation then you should omit the `href` attribute on each item. This will cause each item to be `<button>` instead of an `<a>`. Alternatively you can manually `preventDefault` the provided `originalEvent` on the `breadcrumb-select` event.

package/ebay-breadcrumbs/breadcrumb-item.d.ts

@@ -0,0 +1,14 @@
+import { ComponentProps, FC, MouseEventHandler, ReactNode } from 'react';
+declare type ItemAttributes = ComponentProps<'a'> & ComponentProps<'button'>;
+declare type BreadcrumbItemProps = ItemAttributes & {
+    children: ReactNode;
+    tag?: 'a' | 'button';
+    href?: string;
+    isLastItem?: boolean;
+    onClick?: MouseEventHandler;
+    _sp?: string;
+    navsrc?: string;
+};
+declare const BreadcrumbItem: FC<BreadcrumbItemProps>;
+export default BreadcrumbItem;
+//# sourceMappingURL=breadcrumb-item.d.ts.map

package/ebay-breadcrumbs/breadcrumb-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb-item.d.ts","sourceRoot":"","sources":["../../src/ebay-breadcrumbs/breadcrumb-item.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAG/E,aAAK,cAAc,GAAG,cAAc,CAAC,GAAG,CAAC,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC;AAErE,aAAK,mBAAmB,GAAG,cAAc,GAAG;IACxC,QAAQ,EAAE,SAAS,CAAC;IACpB,GAAG,CAAC,EAAE,GAAG,GAAG,QAAQ,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAA;AAED,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAqB3C,CAAA;AAED,eAAe,cAAc,CAAA"}

package/ebay-breadcrumbs/breadcrumb-item.js

@@ -0,0 +1,38 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var ebay_icon_1 = require("../ebay-icon");
+var BreadcrumbItem = function (_a) {
+    var _b = _a.tag, Item = _b === void 0 ? 'button' : _b, _c = _a.isLastItem, isLastItem = _c === void 0 ? false : _c, href = _a.href, children = _a.children, onClick = _a.onClick, rest = __rest(_a, ["tag", "isLastItem", "href", "children", "onClick"]);
+    var isLink = Item === 'a';
+    var itemAttr = __assign(__assign(__assign({}, rest), isLastItem ? { 'aria-current': 'location' } : {}), { href: isLink ? href : undefined, onClick: isLink ? undefined : onClick });
+    return (react_1.default.createElement("li", null,
+        react_1.default.createElement(Item, __assign({}, itemAttr), children),
+        !isLastItem && react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "breadcrumb", height: "8", width: "8" })));
+};
+exports.default = BreadcrumbItem;

package/ebay-breadcrumbs/breadcrumbs.d.ts

@@ -0,0 +1,17 @@
+import { ComponentProps, FC, ReactNode } from 'react';
+declare type BreadcrumbProps = ComponentProps<'div'> & {
+    /**
+     * Breadcrumbs expects `<EbayBreadcrumbItem/>` as children.
+     * Other elements will not work.
+     *
+     * @see Docs https://github.com/eBay/ebayui-core-react/tree/main/src/components/ebay-breadcrumb#usage
+     */
+    children: ReactNode;
+    id?: string;
+    a11yHeadingTag?: keyof JSX.IntrinsicElements;
+    a11yHeadingText?: string;
+    onSelect?: (event: MouseEvent | KeyboardEvent, target: HTMLElement) => void;
+};
+declare const Breadcrumbs: FC<BreadcrumbProps>;
+export default Breadcrumbs;
+//# sourceMappingURL=breadcrumbs.d.ts.map

package/ebay-breadcrumbs/breadcrumbs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.d.ts","sourceRoot":"","sources":["../../src/ebay-breadcrumbs/breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAc,EAA0B,cAAc,EAAE,EAAE,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAA;AAGlG,aAAK,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC3C;;;;;OAKG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,cAAc,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;IAC7C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,aAAa,EAAE,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CAC/E,CAAA;AAED,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,eAAe,CAwCpC,CAAA;AAED,eAAe,WAAW,CAAA"}

package/ebay-breadcrumbs/breadcrumbs.js

@@ -0,0 +1,71 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var Breadcrumbs = function (_a) {
+    var _b = _a.a11yHeadingText, a11yHeadingText = _b === void 0 ? 'Page navigation' : _b, _c = _a.a11yHeadingTag, a11yHeadingTag = _c === void 0 ? 'h2' : _c, _d = _a.id, id = _d === void 0 ? 'ebay-breadcrumb' : _d, _e = _a.children, breadcrumbItems = _e === void 0 ? [] : _e, className = _a.className, _f = _a.onSelect, onSelect = _f === void 0 ? function () { } : _f, rest = __rest(_a, ["a11yHeadingText", "a11yHeadingTag", "id", "children", "className", "onSelect"]);
+    var headingId = id + "-breadcrumbs-heading";
+    var lastItemIndex = react_1.Children.count(breadcrumbItems) - 1;
+    var A11yHeadingTag = a11yHeadingTag;
+    var anyLink = react_1.Children.toArray(breadcrumbItems).some(function (item) { return item.props.href; });
+    var tag = anyLink ? 'a' : 'button';
+    return (react_1.default.createElement("nav", __assign({}, rest, { "aria-labelledby": headingId, className: classnames_1.default('breadcrumbs', className), role: "navigation" }),
+        react_1.default.createElement(A11yHeadingTag, { id: headingId, className: "clipped" }, a11yHeadingText),
+        react_1.default.createElement("ul", null, react_1.Children.map(breadcrumbItems, function (item, index) {
+            var isLastItem = index === lastItemIndex;
+            var _a = item.props, href = _a.href, children = _a.children;
+            var itemProps = {
+                tag: tag,
+                isLastItem: isLastItem,
+                href: href,
+                children: children,
+                onClick: function (event) { return onSelect(event, event.target); }
+            };
+            return react_1.cloneElement(item, itemProps);
+        }))));
+};
+exports.default = Breadcrumbs;

package/ebay-breadcrumbs/index.d.ts

@@ -0,0 +1,3 @@
+export { default as EbayBreadcrumbs } from './breadcrumbs';
+export { default as EbayBreadcrumbItem } from './breadcrumb-item';
+//# sourceMappingURL=index.d.ts.map

package/ebay-breadcrumbs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-breadcrumbs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,eAAe,CAAA;AAC1D,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,mBAAmB,CAAA"}

package/ebay-breadcrumbs/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var breadcrumbs_1 = require("./breadcrumbs");
+Object.defineProperty(exports, "EbayBreadcrumbs", { enumerable: true, get: function () { return breadcrumbs_1.default; } });
+var breadcrumb_item_1 = require("./breadcrumb-item");
+Object.defineProperty(exports, "EbayBreadcrumbItem", { enumerable: true, get: function () { return breadcrumb_item_1.default; } });

package/ebay-button/README.md

@@ -0,0 +1,57 @@
+# EbayButton
+
+## Demo
+[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/ebay-button--default)
+
+## Usage
+
+### Import JS
+```jsx harmony
+import { EbayButton } from '@ebay/ui-core-react/ebay-button'
+```
+### Import following styles from SKIN
+```jsx harmony
+import "@ebay/skin/button"
+```
+### Or import styles using SCSS/CSS
+```jsx harmony
+import '@ebay/skin/button.css'
+```
+
+### Big button
+```jsx harmony
+<EbayButton size="large">I'm a big button!</EbayButton>
+```
+
+### Icon button
+```jsx
+<EbayButton aria-label="Menu button">
+    <EbayIcon name="MENU" />
+</EbayButton>
+```
+
+### Complex button
+```jsx
+<EbayButton priority="primary" fluid>
+    <EbayButtonCell style={{ justifyContent: 'space-between' }}>
+        <span>Label</span>
+        <span>Filter</span>
+    </EbayButtonCell>
+</EbayButton>
+```
+
+## Attributes
+
+Name | Type | Stateful | Required | Description | Data
+--- | --- | --- | --- | --- | ---
+`priority` | String | No | No | `primary`, `secondary` (default), `tertiary`, `delete`, `none`
+`size` | String | No | No | `default` (default), `large`
+`bodyState` | String | No | No | `loading`
+`href` | String | No | No | for link that looks like a button
+`fluid` | Boolean | No | No | takes the whole width of the parent element
+`disabled` | Boolean | Yes | No
+`partiallyDisabled` | Boolean | No | No | sets aria disabled but not disabled attribute
+`transparent` | Boolean | Yes | No | for transparent background
+`truncate` | Boolean | No | No | will truncate the text of the button onto a single line, and adds an ellipsis, when the button's text overflows
+`onClick` | Function | - | No | click or action key pressed (`Space` / `Enter`)
+`onEscape` | Function | - | No | `Esc`-key pressed

package/ebay-button/button-cell.d.ts

@@ -0,0 +1,8 @@
+import { ComponentProps, FC } from 'react';
+declare type ButtonType = 'cta' | 'fake' | 'expand' | 'default';
+declare type Props = ComponentProps<'span'> & {
+    type?: ButtonType;
+};
+declare const EbayButtonCell: FC<Props>;
+export default EbayButtonCell;
+//# sourceMappingURL=button-cell.d.ts.map

package/ebay-button/button-cell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-cell.d.ts","sourceRoot":"","sources":["../../src/ebay-button/button-cell.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjD,aAAK,UAAU,GAAG,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAA;AACvD,aAAK,KAAK,GAAG,cAAc,CAAC,MAAM,CAAC,GAAG;IAClC,IAAI,CAAC,EAAE,UAAU,CAAC;CACrB,CAAA;AASD,QAAA,MAAM,cAAc,EAAC,EAAE,CAAC,KAAK,CAI0D,CAAA;AAEvF,eAAe,cAAc,CAAA"}

package/ebay-button/button-cell.js

@@ -0,0 +1,40 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var classNames = {
+    cta: 'cta-',
+    fake: 'fake-',
+    expand: 'expand-',
+    default: ''
+};
+var EbayButtonCell = function (_a) {
+    var _b = _a.type, type = _b === void 0 ? 'default' : _b, children = _a.children, rest = __rest(_a, ["type", "children"]);
+    return react_1.default.createElement("span", __assign({ className: classNames[type] + "btn__cell" }, rest),
+        react_1.default.createElement(react_1.default.Fragment, null, children));
+};
+exports.default = EbayButtonCell;

package/ebay-button/button-loading.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+declare const EbayButtonLoading: FC;
+export default EbayButtonLoading;
+//# sourceMappingURL=button-loading.d.ts.map

package/ebay-button/button-loading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-loading.d.ts","sourceRoot":"","sources":["../../src/ebay-button/button-loading.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAIjC,QAAA,MAAM,iBAAiB,EAAE,EAIxB,CAAA;AAED,eAAe,iBAAiB,CAAA"}

package/ebay-button/button-loading.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var button_cell_1 = __importDefault(require("./button-cell"));
+var ebay_progress_spinner_1 = require("../ebay-progress-spinner");
+var EbayButtonLoading = function () { return (react_1.default.createElement(button_cell_1.default, null,
+    react_1.default.createElement(ebay_progress_spinner_1.EbayProgressSpinner, null))); };
+exports.default = EbayButtonLoading;

package/ebay-button/button.d.ts

@@ -0,0 +1,19 @@
+import React, { ComponentProps, KeyboardEvent, MouseEvent, RefObject } from 'react';
+import { Priority, Size, BodyState } from './types';
+export declare type EbayButtonProps = {
+    fluid?: boolean;
+    partiallyDisabled?: boolean;
+    truncate?: boolean;
+    href?: string;
+    priority?: Priority;
+    size?: Size;
+    bodyState?: BodyState;
+    transparent?: boolean;
+    onClick?: (e: MouseEvent) => void;
+    onEscape?: (e: KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    forwardedRef?: RefObject<HTMLAnchorElement & HTMLButtonElement>;
+};
+declare type Props = ComponentProps<'button'> & ComponentProps<'a'> & EbayButtonProps;
+declare const _default: React.ForwardRefExoticComponent<Pick<Props, "form" | "slot" | "style" | "title" | "type" | "download" | "name" | "className" | "forwardedRef" | "color" | "id" | "lang" | "media" | "target" | "role" | "tabIndex" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "size" | "priority" | "bodyState" | "transparent" | "fluid" | "disabled" | "partiallyDisabled" | "onEscape" | "truncate" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "hrefLang" | "ping" | "rel" | "referrerPolicy"> & React.RefAttributes<React.FC<Props>>>;
+export default _default;
+//# sourceMappingURL=button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/ebay-button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEV,cAAc,EAEd,aAAa,EACb,UAAU,EAGV,SAAS,EACZ,MAAM,OAAO,CAAA;AAGd,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAInD,oBAAY,eAAe,GAAG;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC7E,YAAY,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;CACnE,CAAA;AAED,aAAK,KAAK,GAAG,cAAc,CAAC,QAAQ,CAAC,GAAG,cAAc,CAAC,GAAG,CAAC,GAAG,eAAe,CAAC;;AAmF9E,wBAAyC"}