@ebay/ui-core-react 1.0.0

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

@@ -0,0 +1,77 @@
+"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 EbayProgressStepper = function (_a) {
+    var _b = _a.direction, direction = _b === void 0 ? 'row' : _b, _c = _a.defaultState, defaultState = _c === void 0 ? 'active' : _c, children = _a.children, className = _a.className, rest = __rest(_a, ["direction", "defaultState", "children", "className"]);
+    var childrenArray = react_1.Children.toArray(children);
+    var currentIndex = childrenArray.findIndex(function (child) { return child.props.current; });
+    return (react_1.default.createElement("div", __assign({}, rest, { className: classnames_1.default(className, 'progress-stepper', {
+            'progress-stepper--vertical': direction === 'column'
+        }) }),
+        react_1.default.createElement("div", { role: "list", className: classnames_1.default('progress-stepper__items', {
+                'progress-stepper__items--upcoming': defaultState === 'upcoming'
+            }) }, childrenArray.map(function (child, index) {
+            var currentState = stepState(index, currentIndex);
+            var stepTypes = {
+                complete: 'complete',
+                active: currentState === 'complete' ? 'complete' : undefined,
+                upcoming: undefined
+            };
+            return (react_1.default.createElement(react_1.Fragment, { key: index },
+                index > 0 && react_1.default.createElement("hr", { className: "progress-stepper__separator", role: "presentation" }),
+                react_1.cloneElement(child, __assign({ type: stepTypes[defaultState], state: currentState }, child.props))));
+        }))));
+};
+function stepState(stepIndex, currentIndex) {
+    if (stepIndex < currentIndex)
+        return 'complete';
+    if (stepIndex > currentIndex)
+        return 'upcoming';
+    return 'active';
+}
+exports.default = EbayProgressStepper;

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

@@ -0,0 +1,8 @@
+import { FC, ReactNode } from 'react';
+declare type Props = {
+    as?: string;
+    children?: ReactNode;
+};
+declare const EbayProgressTitle: FC<Props>;
+export default EbayProgressTitle;
+//# sourceMappingURL=ebay-progress-title.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ebay-progress-title.d.ts","sourceRoot":"","sources":["../../src/ebay-progress-stepper/ebay-progress-title.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEpD,aAAK,KAAK,GAAG;IACT,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,CAAA;AAED,QAAA,MAAM,iBAAiB,EAAE,EAAE,CAAC,KAAK,CAGgB,CAAA;AAEjD,eAAe,iBAAiB,CAAA"}

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var EbayProgressTitle = function (_a) {
+    var _b = _a.as, TitleComponent = _b === void 0 ? 'h4' : _b, children = _a.children;
+    return react_1.createElement(TitleComponent, {}, children);
+};
+exports.default = EbayProgressTitle;

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

@@ -0,0 +1,5 @@
+export { default as EbayProgressStepper } from './ebay-progress-stepper';
+export { default as EbayProgressStep } from './ebay-progress-step';
+export { default as EbayProgressTitle } from './ebay-progress-title';
+export { StepperDirection, StepType, StepState } from './types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-progress-stepper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,yBAAyB,CAAA;AACxE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAClE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AACpE,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA"}

package/ebay-progress-stepper/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var ebay_progress_stepper_1 = require("./ebay-progress-stepper");
+Object.defineProperty(exports, "EbayProgressStepper", { enumerable: true, get: function () { return ebay_progress_stepper_1.default; } });
+var ebay_progress_step_1 = require("./ebay-progress-step");
+Object.defineProperty(exports, "EbayProgressStep", { enumerable: true, get: function () { return ebay_progress_step_1.default; } });
+var ebay_progress_title_1 = require("./ebay-progress-title");
+Object.defineProperty(exports, "EbayProgressTitle", { enumerable: true, get: function () { return ebay_progress_title_1.default; } });

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

@@ -0,0 +1,4 @@
+export declare type StepperDirection = 'column' | 'row';
+export declare type StepType = 'complete' | 'information' | 'attention';
+export declare type StepState = 'complete' | 'upcoming' | 'active';
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ebay-progress-stepper/types.ts"],"names":[],"mappings":"AAAA,oBAAY,gBAAgB,GAAG,QAAQ,GAAG,KAAK,CAAA;AAE/C,oBAAY,QAAQ,GAAG,UAAU,GAAG,aAAa,GAAG,WAAW,CAAA;AAE/D,oBAAY,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAA"}

package/ebay-progress-stepper/types.js

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

package/ebay-radio/README.md

@@ -0,0 +1,52 @@
+# ebay-radio
+
+## Demo
+[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/ebay-radio--default-radio-button)
+
+## 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>
+```
+
+## Icons
+This component uses SVG icons, so you need to add the `<EbaySvg/>` component at the end of your html.
+
+## 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)
+`onChange` | Function | Callback fired when selected is changed, with param `{ originalEvent, value }`
+`onFocus` | Function | Callback fired when button is focused, with param `{ originalEvent, value }`
+
+Note: For this component, `className`/`style` are applied to the container, while all other HTML attributes are applied to the input.

package/ebay-radio/index.d.ts

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

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

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

package/ebay-radio/index.js

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

package/ebay-radio/radio.d.ts

@@ -0,0 +1,10 @@
+import { ChangeEvent, ComponentProps, FC } from 'react';
+declare type Size = 'default' | 'large';
+declare type EbayRadioProps = {
+    size?: Size;
+    onChange?: (event: ChangeEvent<HTMLInputElement>, value: string | number) => void;
+};
+declare type InputProps = Omit<ComponentProps<'input'>, 'size'>;
+declare const EbayRadio: FC<InputProps & EbayRadioProps>;
+export default EbayRadio;
+//# sourceMappingURL=radio.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../src/ebay-radio/radio.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,WAAW,EAA0B,cAAc,EAAE,EAAE,EAAgB,MAAM,OAAO,CAAA;AAKpG,aAAK,IAAI,GAAG,SAAS,GAAG,OAAO,CAAA;AAE/B,aAAK,cAAc,GAAG;IAClB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;CACrF,CAAA;AACD,aAAK,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,CAAA;AAEvD,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,UAAU,GAAG,cAAc,CAoD9C,CAAA;AAED,eAAe,SAAS,CAAA"}

package/ebay-radio/radio.js

@@ -0,0 +1,76 @@
+"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 ebay_field_1 = require("../ebay-field");
+var EbayRadio = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 'default' : _b, checked = _a.checked, defaultChecked = _a.defaultChecked, className = _a.className, style = _a.style, id = _a.id, _c = _a.onChange, onChange = _c === void 0 ? function () { } : _c, children = _a.children, rest = __rest(_a, ["size", "checked", "defaultChecked", "className", "style", "id", "onChange", "children"]);
+    var handleChange = function (e) {
+        var input = e.target;
+        onChange(e, input === null || input === void 0 ? void 0 : input.value);
+    };
+    var containerClass = classnames_1.default('radio', className, { 'radio--large': size === 'large' });
+    var iconChecked = size === 'large' ?
+        react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "radioCheckedLarge", className: "radio__checked" }) :
+        react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "radioChecked", className: "radio__checked" });
+    var iconUnChecked = size === 'large' ?
+        react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "radioUncheckedLarge", className: "radio__unchecked" }) :
+        react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "radioUnchecked", className: "radio__unchecked" });
+    var childrenArray = react_1.Children.toArray(children);
+    var ebayLabel = childrenArray.find(function (child) { return child.type === ebay_field_1.EbayLabel; });
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("span", { className: containerClass, style: __assign(__assign({}, style), { alignItems: 'center' }) },
+            react_1.default.createElement("input", __assign({}, rest, { id: id, className: "radio__control", type: "radio", defaultChecked: defaultChecked, checked: checked, onChange: handleChange })),
+            react_1.default.createElement("span", { className: "radio__icon", hidden: true },
+                iconChecked,
+                iconUnChecked)),
+        ebayLabel ?
+            react_1.cloneElement(ebayLabel, __assign(__assign({}, ebayLabel.props), { position: 'end', htmlFor: id })) :
+            children));
+};
+exports.default = EbayRadio;

package/ebay-section-notice/README.md

@@ -0,0 +1,47 @@
+# ebay-section-notice
+
+## Demo
+
+[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/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"`, or `"information"`) | 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!**                                     | -          |

package/ebay-section-notice/index.d.ts

@@ -0,0 +1,5 @@
+export { default as EbaySectionNotice } from './section-notice';
+export { default as EbaySectionNoticeTitle } from './section-notice-title';
+export { default as EbaySectionNoticeFooter } from './section-notice-footer';
+export { EbayNoticeContent } from '../ebay-notice-base/components/ebay-notice-content';
+//# sourceMappingURL=index.d.ts.map

package/ebay-section-notice/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-section-notice/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAC/D,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,wBAAwB,CAAA;AAC1E,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,yBAAyB,CAAA;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAA"}

package/ebay-section-notice/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var section_notice_1 = require("./section-notice");
+Object.defineProperty(exports, "EbaySectionNotice", { enumerable: true, get: function () { return section_notice_1.default; } });
+var section_notice_title_1 = require("./section-notice-title");
+Object.defineProperty(exports, "EbaySectionNoticeTitle", { enumerable: true, get: function () { return section_notice_title_1.default; } });
+var section_notice_footer_1 = require("./section-notice-footer");
+Object.defineProperty(exports, "EbaySectionNoticeFooter", { enumerable: true, get: function () { return section_notice_footer_1.default; } });
+var ebay_notice_content_1 = require("../ebay-notice-base/components/ebay-notice-content");
+Object.defineProperty(exports, "EbayNoticeContent", { enumerable: true, get: function () { return ebay_notice_content_1.EbayNoticeContent; } });

package/ebay-section-notice/section-notice-footer.d.ts

@@ -0,0 +1,8 @@
+import { FC, ReactNode } from 'react';
+declare type Props = {
+    className?: string;
+    children?: ReactNode;
+};
+declare const EbaySectionNoticeFooter: FC<Props>;
+export default EbaySectionNoticeFooter;
+//# sourceMappingURL=section-notice-footer.d.ts.map

package/ebay-section-notice/section-notice-footer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"section-notice-footer.d.ts","sourceRoot":"","sources":["../../src/ebay-section-notice/section-notice-footer.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAG5C,aAAK,KAAK,GAAG;IACT,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,CAAA;AAED,QAAA,MAAM,uBAAuB,EAAE,EAAE,CAAC,KAAK,CAItC,CAAA;AAED,eAAe,uBAAuB,CAAA"}

package/ebay-section-notice/section-notice-footer.js

@@ -0,0 +1,12 @@
+"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 notice_footer_1 = __importDefault(require("../common/notice-utils/notice-footer"));
+var EbaySectionNoticeFooter = function (_a) {
+    var className = _a.className, children = _a.children;
+    return (react_1.default.createElement(notice_footer_1.default, { className: className, type: "section" }, children));
+};
+exports.default = EbaySectionNoticeFooter;

package/ebay-section-notice/section-notice-title.d.ts

@@ -0,0 +1,8 @@
+import React, { FC } from 'react';
+declare type Props = React.HTMLProps<HTMLHeadingElement> & {
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    className?: string;
+};
+declare const EbaySectionNoticeTitle: FC<Props>;
+export default EbaySectionNoticeTitle;
+//# sourceMappingURL=section-notice-title.d.ts.map

package/ebay-section-notice/section-notice-title.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"section-notice-title.d.ts","sourceRoot":"","sources":["../../src/ebay-section-notice/section-notice-title.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAGjC,aAAK,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC,kBAAkB,CAAC,GAAG;IAC/C,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAA;AAED,QAAA,MAAM,sBAAsB,EAAE,EAAE,CAAC,KAAK,CAIrC,CAAA;AAED,eAAe,sBAAsB,CAAA"}

package/ebay-section-notice/section-notice-title.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 notice_title_1 = __importDefault(require("../common/notice-utils/notice-title"));
+var EbaySectionNoticeTitle = function (_a) {
+    var className = _a.className, as = _a.as, children = _a.children, rest = __rest(_a, ["className", "as", "children"]);
+    return (react_1.default.createElement(notice_title_1.default, __assign({}, rest, { className: className, as: as, type: "section" }), children));
+};
+exports.default = EbaySectionNoticeTitle;

package/ebay-section-notice/section-notice.d.ts

@@ -0,0 +1,10 @@
+import React, { FC } from 'react';
+declare type Props = React.HTMLProps<HTMLElement> & {
+    status?: 'general' | 'none' | 'attention' | 'confirmation' | 'information';
+    'aria-label'?: string;
+    'aria-roledescription'?: string;
+    className?: string;
+};
+declare const EbaySectionNotice: FC<Props>;
+export default EbaySectionNotice;
+//# sourceMappingURL=section-notice.d.ts.map

package/ebay-section-notice/section-notice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"section-notice.d.ts","sourceRoot":"","sources":["../../src/ebay-section-notice/section-notice.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,EAAgB,MAAM,OAAO,CAAA;AAM/C,aAAK,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG;IACxC,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,WAAW,GAAG,cAAc,GAAG,aAAa,CAAC;IAC3E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAA;AAED,QAAA,MAAM,iBAAiB,EAAE,EAAE,CAAC,KAAK,CAiChC,CAAA;AAED,eAAe,iBAAiB,CAAA"}

package/ebay-section-notice/section-notice.js

@@ -0,0 +1,50 @@
+"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_notice_content_1 = require("../ebay-notice-base/components/ebay-notice-content");
+var notice_content_1 = __importDefault(require("../common/notice-utils/notice-content"));
+var icon_1 = __importDefault(require("../ebay-icon/icon"));
+var EbaySectionNotice = function (_a) {
+    var _b = _a.status, status = _b === void 0 ? 'general' : _b, children = _a.children, className = _a.className, ariaLabel = _a["aria-label"], _c = _a["aria-roledescription"], ariaRoleDescription = _c === void 0 ? 'Notice' : _c, rest = __rest(_a, ["status", "children", "className", 'aria-label', 'aria-roledescription']);
+    var childrenArray = react_1.default.Children.toArray(children);
+    var content = childrenArray.find(function (_a) {
+        var type = _a.type;
+        return type === ebay_notice_content_1.EbayNoticeContent;
+    });
+    var hasStatus = status !== 'general' && status !== 'none';
+    if (!content) {
+        throw new Error("EbaySectionNotice: Please use a EbayNoticeContent that defines the content of the notice");
+    }
+    return (react_1.default.createElement("section", __assign({}, rest, { className: classnames_1.default(className, "section-notice", hasStatus && "section-notice--" + status), role: "region", "aria-label": !hasStatus ? ariaLabel : null, "aria-labelledby": hasStatus ? "section-notice-" + status : null, "aria-roledescription": ariaRoleDescription }),
+        hasStatus && (react_1.default.createElement("div", { className: "section-notice__header", id: "section-notice-" + status },
+            react_1.default.createElement(icon_1.default, { name: status + "-filled", a11yText: ariaLabel, a11yVariant: "label" }))),
+        react_1.default.createElement(notice_content_1.default, __assign({}, content.props, { type: "section" })),
+        children));
+};
+exports.default = EbaySectionNotice;

package/ebay-section-title/README.md

@@ -0,0 +1,70 @@
+# EbaySectionTitle
+
+## Install
+```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.
+`size` | String | No | No | "small", "large", or "giant" (default: medium)
+
+## 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="information"
+    >
+        <EbayInfotipHeading>Important</EbayInfotipHeading>
+        <EbayInfotipContent><p>This is some important info</p></EbayInfotipContent>
+    </EbayInfotip>
+</Info>
+```

package/ebay-section-title/cta.d.ts

@@ -0,0 +1,10 @@
+import { ComponentProps, FC, ReactNode } from 'react';
+import { Icon } from '../ebay-icon';
+declare type Props = ComponentProps<'div'> & {
+    ctaText?: ReactNode;
+    href?: string;
+    icon?: Icon;
+};
+declare const Cta: FC<Props>;
+export default Cta;
+//# sourceMappingURL=cta.d.ts.map

package/ebay-section-title/cta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cta.d.ts","sourceRoot":"","sources":["../../src/ebay-section-title/cta.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE5D,OAAO,EAAY,IAAI,EAAE,MAAM,cAAc,CAAA;AAE7C,aAAK,KAAK,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACnC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,CAAC;CACb,CAAA;AAED,QAAA,MAAM,GAAG,EAAE,EAAE,CAAC,KAAK,CAyBlB,CAAA;AAED,eAAe,GAAG,CAAA"}

package/ebay-section-title/cta.js

@@ -0,0 +1,41 @@
+"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 Cta = function (_a) {
+    var ctaText = _a.ctaText, href = _a.href, _b = _a.icon, icon = _b === void 0 ? 'arrowRightBold' : _b, rest = __rest(_a, ["ctaText", "href", "icon"]);
+    var className = classnames_1.default('section-title__cta', {
+        'section-title__cta--no-text': !ctaText
+    });
+    return (react_1.default.createElement("div", __assign({}, rest, { className: className }),
+        react_1.default.createElement("a", { href: href, tabIndex: -1, "aria-hidden": "true" },
+            ctaText && react_1.default.createElement("span", { className: "section-title__cta-text" }, ctaText),
+            react_1.default.createElement(ebay_icon_1.EbayIcon, { name: icon, className: "section-title__cta-icon", noSkinClasses: true, height: "24", width: "24", "aria-hidden": "true" }))));
+};
+exports.default = Cta;