@ebay/ui-core-react 1.0.0

package/ebay-pagination/pagination.js

@@ -0,0 +1,119 @@
+"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 __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
+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 debounce_1 = require("../common/debounce");
+var helpers_1 = require("./helpers");
+var component_utils_1 = require("../common/component-utils");
+var EbayPagination = function (_a) {
+    var _b = _a.id, id = _b === void 0 ? 'ebay-pagination' : _b, className = _a.className, _c = _a.a11yCurrentText, a11yCurrentText = _c === void 0 ? 'Pagination - Current Page' : _c, _d = _a.a11yPreviousText, a11yPreviousText = _d === void 0 ? 'Previous page' : _d, _e = _a.a11yNextText, a11yNextText = _e === void 0 ? 'Next page' : _e, _f = _a.variant, variant = _f === void 0 ? 'show-range' : _f, _g = _a.fluid, fluid = _g === void 0 ? false : _g, _h = _a.onPrevious, onPrevious = _h === void 0 ? function () { } : _h, _j = _a.onNext, onNext = _j === void 0 ? function () { } : _j, _k = _a.onSelect, onSelect = _k === void 0 ? function () { } : _k, children = _a.children, rest = __rest(_a, ["id", "className", "a11yCurrentText", "a11yPreviousText", "a11yNextText", "variant", "fluid", "onPrevious", "onNext", "onSelect", "children"]);
+    var paginationContainerRef = react_1.useRef(null);
+    var childPageRefs = react_1.useRef([]);
+    childPageRefs.current = react_1.Children.map(children, react_1.createRef);
+    var totalPages = component_utils_1.filterBy(children, function (_a) {
+        var props = _a.props;
+        return props.type === undefined || props.type === 'page';
+    }).length;
+    var itemWidthRef = react_1.useRef(0);
+    var arrowWidthRef = react_1.useRef(0);
+    var getNumOfVisiblePageItems = function () {
+        var _a, _b, _c, _d;
+        var pageArrowWidth = arrowWidthRef.current || ((_b = (_a = childPageRefs.current[0]) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.offsetWidth);
+        arrowWidthRef.current = pageArrowWidth; // cache arrow width since it should be static
+        var pageItemWidth = itemWidthRef.current || ((_d = (_c = childPageRefs.current[1]) === null || _c === void 0 ? void 0 : _c.current) === null || _d === void 0 ? void 0 : _d.offsetWidth);
+        itemWidthRef.current = pageItemWidth; // cache item width since it should be static
+        return pageItemWidth ?
+            Math.floor((helpers_1.getMaxWidth(paginationContainerRef.current) - pageArrowWidth * 2) / pageItemWidth) :
+            0;
+    };
+    var _l = react_1.useState([]), page = _l[0], setPage = _l[1];
+    var updatePages = function () {
+        var selectedPageIndex = childPageRefs.current.findIndex(function (pageRef) { var _a; return ((_a = pageRef.current) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-current')) === 'page'; });
+        var visiblePageItems = getNumOfVisiblePageItems();
+        var pageState = helpers_1.calcPageState(selectedPageIndex, visiblePageItems, totalPages, variant);
+        setPage(__spreadArrays(['hidden'], pageState));
+    };
+    react_1.useEffect(function () {
+        var debouncedUpdate = debounce_1.debounce(updatePages, 16);
+        updatePages();
+        window.addEventListener('resize', debouncedUpdate);
+        return function () {
+            window.removeEventListener('resize', debouncedUpdate);
+        };
+    }, [children]);
+    var createChildItems = function (itemType) {
+        var pageIndex = 0;
+        return react_1.Children.map(children, function (item, index) {
+            var _a = item.props, _b = _a.type, type = _b === void 0 ? 'page' : _b, current = _a.current, disabled = _a.disabled, href = _a.href, text = _a.children;
+            var newProps = {
+                type: type, current: current, disabled: disabled, href: href,
+                children: page[index] === 'dots' ? '…' : text,
+                pageIndex: type === 'page' ? pageIndex++ : undefined,
+                key: id + "-item-" + index,
+                hide: page[index] === 'hidden',
+                onPrevious: onPrevious, onNext: onNext, onSelect: onSelect, a11yPreviousText: a11yPreviousText, a11yNextText: a11yNextText,
+                ref: childPageRefs.current[index]
+            };
+            return itemType === type ? react_1.cloneElement(item, newProps) : null;
+        });
+    };
+    var headingId = id + "-pagination-heading";
+    return (react_1.default.createElement("nav", __assign({}, rest, { role: "navigation", className: classnames_1.default(className, 'pagination', { 'pagination--fluid': fluid }), "aria-labelledby": headingId, ref: paginationContainerRef }),
+        react_1.default.createElement("span", { "aria-live": "polite", role: "status" },
+            react_1.default.createElement("h2", { className: "clipped", id: headingId }, a11yCurrentText)),
+        createChildItems('previous'),
+        react_1.default.createElement("ol", { className: "pagination__items" }, createChildItems('page')),
+        createChildItems('next')));
+};
+exports.default = EbayPagination;

package/ebay-pagination/types.d.ts

@@ -0,0 +1,3 @@
+export declare type ItemState = 'visible' | 'hidden' | 'dots';
+export declare type PaginationVariant = 'show-last' | 'show-range';
+//# sourceMappingURL=types.d.ts.map

package/ebay-pagination/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ebay-pagination/types.ts"],"names":[],"mappings":"AAAA,oBAAY,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAA;AACrD,oBAAY,iBAAiB,GAAG,WAAW,GAAG,YAAY,CAAA"}

package/ebay-pagination/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/ebay-panel-dialog/README.md

@@ -0,0 +1,34 @@
+# EbayPanelDialog
+
+## Usage
+
+```react
+<EbayPanelDialog open a11yClosetext="Close">
+    <EbayDialogHeader>Heading</EbayDialogHeader>
+    <p>Body content</p>
+    <EbayCloseButton>X</EbayCloseButton>
+</EbayPanelDialog>
+```
+
+## Attributes
+
+Name | Type | Stateful | Required | Description
+--- | --- | --- | --- | ---
+`open` | Boolean | Yes | No | Whether dialog is open.
+`position` | String | No | No | `end` or `start` (default), the position of the panel, either at the start (left side) of the page, or end (right side) of the page.
+`focus` | String | No | No | An id for an element which will receive focus when the drawer opens (defaults to close button).
+`a11yCloseText` | String | No | Yes | A11y text for close button and mask.
+`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` |  | Trigggered when dialog is opened
+`onClose` |  | Triggered when dialog is closed
+
+## EbayDialogHeader
+Will render a header content for the dialog. Will always render the header element even if this is not present
+
+## EbayCloseButton
+If present will render this as the close button content. Otherwise will render a close icon (X). This content will be rendered inside a button tag

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

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

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

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

package/ebay-panel-dialog/index.js

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

package/ebay-panel-dialog/panel-dialog.d.ts

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { DialogBaseProps } from '../ebay-dialog-base';
+declare type Position = 'start' | 'end';
+export interface Props<T = any> extends DialogBaseProps<T> {
+    open?: boolean;
+    animated?: boolean;
+    position?: Position;
+    onOpen?: () => void;
+    onClose?: () => void;
+}
+declare const EbayPanelDialog: FC<Props>;
+export default EbayPanelDialog;
+//# sourceMappingURL=panel-dialog.d.ts.map

package/ebay-panel-dialog/panel-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel-dialog.d.ts","sourceRoot":"","sources":["../../src/ebay-panel-dialog/panel-dialog.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,eAAe,EAAuB,MAAM,qBAAqB,CAAA;AAI1E,aAAK,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAA;AAE/B,MAAM,WAAW,KAAK,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACxD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,KAAK,CAuB9B,CAAA;AAED,eAAe,eAAe,CAAA"}

package/ebay-panel-dialog/panel-dialog.js

@@ -0,0 +1,39 @@
+"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 ebay_dialog_base_1 = require("../ebay-dialog-base");
+var classPrefix = 'panel-dialog';
+var EbayPanelDialog = function (_a) {
+    var _b, _c;
+    var open = _a.open, animated = _a.animated, _d = _a.position, position = _d === void 0 ? 'start' : _d, _e = _a.onClose, onClose = _e === void 0 ? function () { } : _e, _f = _a.onOpen, onOpen = _f === void 0 ? function () { } : _f, className = _a.className, rest = __rest(_a, ["open", "animated", "position", "onClose", "onOpen", "className"]);
+    return (react_1.default.createElement(ebay_dialog_base_1.DialogBaseWithState, __assign({}, rest, { "aria-label": "Infotip", classPrefix: classPrefix, buttonPosition: "right", onCloseBtnClick: onClose, onBackgroundClick: onClose, animated: animated, className: classnames_1.default(className, (_b = {}, _b[classPrefix + "--mask-fade-slow"] = animated, _b)), windowClass: classnames_1.default(classPrefix + "__window--slide", (_c = {},
+            _c[classPrefix + "__window--end"] = position === 'end',
+            _c)), open: open })));
+};
+exports.default = EbayPanelDialog;

package/ebay-progress-bar/README.md

@@ -0,0 +1,34 @@
+# EbayProgressBar
+The progress bar gives an immediate, real-time visualisation of the current task completion status. The progress bar's value does not include its min, so giving a value <= min will set the value to min + 1.
+
+## Demo
+[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/ebay-progress-bar--default)
+
+## Usage
+
+### Import JS
+```jsx harmony
+import { EbayProgressSpinner } from '@ebay/ui-core-react/ebay-progress-bar'
+```
+
+### Import styles from Skin
+```jsx
+import '@ebay/skin/progress-bar'
+```
+
+### or if using CSS/SCSS
+```jsx
+import '@ebay/skin/progress-bar.css';
+```
+
+```jsx harmony
+<EbayProgressBar value={50} />
+```
+
+## Props
+
+Name | Type | Stateful | Required | Description | Data
+--- | --- | --- | --- | --- | ---
+`value` | Integer | No | No | Current value (<= Max)
+`max` | Integer | No | No | Maximal value, default: 100
+`fluid` | Boolean | No | No | Fills the full width of its container

package/ebay-progress-bar/index.d.ts

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

package/ebay-progress-bar/index.d.ts.map

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

package/ebay-progress-bar/index.js

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

package/ebay-progress-bar/progress-bar.d.ts

@@ -0,0 +1,7 @@
+import { ComponentProps, FC } from 'react';
+export declare type EbayProgressBarProps = ComponentProps<'progress'> & {
+    fluid?: boolean;
+};
+declare const EbayProgressBar: FC<EbayProgressBarProps>;
+export default EbayProgressBar;
+//# sourceMappingURL=progress-bar.d.ts.map

package/ebay-progress-bar/progress-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.d.ts","sourceRoot":"","sources":["../../src/ebay-progress-bar/progress-bar.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAGjD,oBAAY,oBAAoB,GAAG,cAAc,CAAC,UAAU,CAAC,GAAG;IAC5D,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB,CAAA;AAED,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAa7C,CAAA;AAED,eAAe,eAAe,CAAA"}

package/ebay-progress-bar/progress-bar.js

@@ -0,0 +1,34 @@
+"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 EbayProgressBar = function (_a) {
+    var _b = _a.value, value = _b === void 0 ? 0 : _b, _c = _a.max, max = _c === void 0 ? 100 : _c, fluid = _a.fluid, className = _a.className, rest = __rest(_a, ["value", "max", "fluid", "className"]);
+    return (react_1.default.createElement("progress", __assign({}, rest, { className: classnames_1.default('progress-bar', className, { 'progress-bar--fluid': fluid }), value: value, max: max })));
+};
+exports.default = EbayProgressBar;

package/ebay-progress-spinner/README.md

@@ -0,0 +1,33 @@
+# EbayProgressSpinner
+
+## Demo
+[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/ebay-progress-spinner--default-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 | `small` (default), `large`
+`aria-label` | String | No | No | custom aria label instead of `Busy`

package/ebay-progress-spinner/index.d.ts

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

package/ebay-progress-spinner/index.d.ts.map

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

package/ebay-progress-spinner/index.js

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

package/ebay-progress-spinner/progress-spinner.d.ts

@@ -0,0 +1,10 @@
+import { ComponentProps, FC } from 'react';
+export declare type SpinnerSize = 'small' | 'large';
+declare type EbayProgressSpinnerProps = {
+    size?: SpinnerSize;
+    'aria-label'?: string;
+};
+declare type SpanProps = Omit<ComponentProps<'span'>, 'size'>;
+declare const EbayProgressSpinner: FC<SpanProps & EbayProgressSpinnerProps>;
+export default EbayProgressSpinner;
+//# sourceMappingURL=progress-spinner.d.ts.map

package/ebay-progress-spinner/progress-spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-spinner.d.ts","sourceRoot":"","sources":["../../src/ebay-progress-spinner/progress-spinner.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAIjD,oBAAY,WAAW,GAAG,OAAO,GAAG,OAAO,CAAA;AAE3C,aAAK,wBAAwB,GAAG;IAC5B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB,CAAA;AAED,aAAK,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC;AAOtD,QAAA,MAAM,mBAAmB,EAAE,EAAE,CAAC,SAAS,GAAG,wBAAwB,CAcjE,CAAA;AAED,eAAe,mBAAmB,CAAA"}

package/ebay-progress-spinner/progress-spinner.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_1 = __importDefault(require("classnames"));
+var ebay_icon_1 = require("../ebay-icon");
+var sizeClass = {
+    'small': '',
+    'large': 'progress-spinner--large'
+};
+var EbayProgressSpinner = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 'SMALL' : _b, _c = _a["aria-label"], ariaLabel = _c === void 0 ? 'Busy' : _c, className = _a.className, rest = __rest(_a, ["size", 'aria-label', "className"]);
+    return (react_1.default.createElement("span", __assign({}, rest, { className: classnames_1.default('progress-spinner', sizeClass[size], className), "aria-label": ariaLabel, role: "img" }),
+        react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "spinner" })));
+};
+exports.default = EbayProgressSpinner;

package/ebay-progress-stepper/README.md

@@ -0,0 +1,84 @@
+# ebay-progress-stepper
+
+## Demo
+
+[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/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/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 | Either `complete`, `upcoming` or `active` (default). Defines the default state for all steps.
+
+### 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
+`type` | String | No | No | Either `attention`, `information`, or `complete`. This takes prescedence over current. Will render the current step with the given icon and color
+`number` | Number | No | No | Renders the current step with the given number. Overrides the default number counting for this step
+
+### 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>
+```

package/ebay-progress-stepper/ebay-progress-step.d.ts

@@ -0,0 +1,13 @@
+import { FC, ReactNode } from 'react';
+import { StepState, StepType } from './types';
+export declare type EbayProgressStepProps = {
+    type?: StepType;
+    state?: StepState;
+    current?: boolean;
+    number?: number;
+    className?: string;
+    children?: ReactNode;
+};
+declare const EbayProgressStep: FC<EbayProgressStepProps>;
+export default EbayProgressStep;
+//# sourceMappingURL=ebay-progress-step.d.ts.map

package/ebay-progress-stepper/ebay-progress-step.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ebay-progress-step.d.ts","sourceRoot":"","sources":["../../src/ebay-progress-stepper/ebay-progress-step.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAY,EAAE,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAA;AAGpE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAG7C,oBAAY,qBAAqB,GAAG;IAChC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,CAAA;AAcD,QAAA,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CA8C/C,CAAA;AAED,eAAe,gBAAgB,CAAA"}

package/ebay-progress-stepper/ebay-progress-step.js

@@ -0,0 +1,82 @@
+"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_icon_1 = require("../ebay-icon");
+var index_1 = require("./index");
+var typeClasses = {
+    attention: 'progress-stepper__item--attention',
+    information: 'progress-stepper__item--information',
+    complete: 'progress-stepper__item--confirmation'
+};
+var typeIcons = {
+    complete: 'stepperConfirmation',
+    information: 'informationFilled',
+    attention: 'attentionFilled'
+};
+var EbayProgressStep = function (_a) {
+    var type = _a.type, current = _a.current, state = _a.state, 
+    /**
+     * @deprecated Don't use number in v9+ (Skin 13+), left for backward-compatibility. TODO: remove in v10.
+     */
+    number = _a.number, children = _a.children, className = _a.className, rest = __rest(_a, ["type", "current", "state", "number", "children", "className"]);
+    var childrenArray = react_1.Children.toArray(children);
+    var title = childrenArray.find(function (child) { return child.type === index_1.EbayProgressTitle; });
+    var text = childrenArray.filter(function (child) { return child.type !== index_1.EbayProgressTitle; });
+    var stepClassNames = classnames_1.default(className, 'progress-stepper__item', typeClasses[type], { 'progress-stepper__item--current': current });
+    var ariaLabel = number === undefined ? state : number.toString();
+    var content = number === undefined ? null : number;
+    var icon = typeIcons[type];
+    return (react_1.default.createElement("div", __assign({}, rest, { className: stepClassNames, role: "listitem", "aria-current": current ? 'step' : undefined }),
+        react_1.default.createElement("div", { className: "progress-stepper__icon" }, icon ?
+            react_1.default.createElement(ebay_icon_1.EbayIcon, { name: icon, height: "24", width: "24" }) :
+            react_1.default.createElement("span", { role: "img", "aria-label": ariaLabel }, content)),
+        react_1.default.createElement("div", { className: "progress-stepper__text" },
+            title,
+            text)));
+};
+exports.default = EbayProgressStep;

package/ebay-progress-stepper/ebay-progress-stepper.d.ts

@@ -0,0 +1,11 @@
+import { FC, ReactNode } from 'react';
+import { StepperDirection, StepState } from './types';
+declare type ProgressStepperProps = {
+    direction?: StepperDirection;
+    defaultState?: StepState;
+    className?: string;
+    children?: ReactNode;
+};
+declare const EbayProgressStepper: FC<ProgressStepperProps>;
+export default EbayProgressStepper;
+//# sourceMappingURL=ebay-progress-stepper.d.ts.map

package/ebay-progress-stepper/ebay-progress-stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ebay-progress-stepper.d.ts","sourceRoot":"","sources":["../../src/ebay-progress-stepper/ebay-progress-stepper.tsx"],"names":[],"mappings":"AAAA,OAAc,EAA0B,EAAE,EAA0B,SAAS,EAAE,MAAM,OAAO,CAAA;AAE5F,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAY,MAAM,SAAS,CAAA;AAG/D,aAAK,oBAAoB,GAAG;IACxB,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,CAAA;AAED,QAAA,MAAM,mBAAmB,EAAE,EAAE,CAAC,oBAAoB,CA6CjD,CAAA;AAQD,eAAe,mBAAmB,CAAA"}