@ebay/ui-core-react 1.7.3 → 1.8.0

package/common/notice-utils/notice-cta.d.ts

@@ -0,0 +1,8 @@
+import React, { FC } from 'react';
+declare type Props = React.HTMLProps<HTMLDivElement> & {
+    type: 'window' | 'section' | 'page';
+    className?: string;
+};
+declare const NoticeCTA: FC<Props>;
+export default NoticeCTA;
+//# sourceMappingURL=notice-cta.d.ts.map

package/common/notice-utils/notice-cta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notice-cta.d.ts","sourceRoot":"","sources":["../../../src/common/notice-utils/notice-cta.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAGjC,aAAK,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,GAAG;IAC3C,IAAI,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAA;AAED,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,KAAK,CAIxB,CAAA;AAED,eAAe,SAAS,CAAA"}

package/common/notice-utils/notice-cta.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 NoticeCTA = function (_a) {
+    var className = _a.className, type = _a.type, children = _a.children, rest = __rest(_a, ["className", "type", "children"]);
+    return (react_1.default.createElement("p", __assign({ className: classnames_1.default(className, type + "-notice__cta") }, rest), children));
+};
+exports.default = NoticeCTA;

package/ebay-page-notice/README.md

@@ -12,6 +12,7 @@ import {
     EbayNoticeContent,
     EbayPageNoticeTitle,
     EbayPageNoticeFooter,
+    EbayPageNoticeCTA
 } from '@ebay/ui-core-react/ebay-page-notice'
 ```
 
@@ -43,6 +44,8 @@ import "@ebay/skin/page-notice";
 
 | Name         | Type                                                                          | Stateful | Description                                                                                                                                 | Default       |
 | ------------ | ----------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
-| `status`     | String ( `"general"`,`"attention"`, `"confirmation"`, or `"information"`) | No       | Determines the style and type of notice to be displayed                                                                                     | `"general"` |
+| `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. | -             |
 | `children`   | React Node                                                                    | No       | The content to be displayed within the notice                                                                                               | -             |
+| `a11yDismissText` | String                                                                   | No       | Determines if the notice will have a dismiss button.  Acts as the aria-label for the dismiss button. Should not be used with a footer.      | -             |
+| `onDismissed` | Dispatch<boolean>                                                            | No       | Handler for any extra functionality for after a notice is dismissed.                                                                        | -             |

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

@@ -1,5 +1,6 @@
 export { default as EbayPageNotice } from './page-notice';
 export { default as EbayPageNoticeTitle } from './page-notice-title';
 export { default as EbayPageNoticeFooter } from './page-notice-footer';
+export { default as EbayPageNoticeCTA } from './page-notice-cta';
 export { EbayNoticeContent } from '../ebay-notice-base/components/ebay-notice-content';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-page-notice/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,eAAe,CAAA;AACzD,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-page-notice/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,eAAe,CAAA;AACzD,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AACtE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAA"}

package/ebay-page-notice/index.js

@@ -6,5 +6,7 @@ var page_notice_title_1 = require("./page-notice-title");
 Object.defineProperty(exports, "EbayPageNoticeTitle", { enumerable: true, get: function () { return page_notice_title_1.default; } });
 var page_notice_footer_1 = require("./page-notice-footer");
 Object.defineProperty(exports, "EbayPageNoticeFooter", { enumerable: true, get: function () { return page_notice_footer_1.default; } });
+var page_notice_cta_1 = require("./page-notice-cta");
+Object.defineProperty(exports, "EbayPageNoticeCTA", { enumerable: true, get: function () { return page_notice_cta_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-page-notice/page-notice-cta.d.ts

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

package/ebay-page-notice/page-notice-cta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-notice-cta.d.ts","sourceRoot":"","sources":["../../src/ebay-page-notice/page-notice-cta.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,iBAAiB,EAAE,EAAE,CAAC,KAAK,CAIhC,CAAA;AAED,eAAe,iBAAiB,CAAA"}

package/ebay-page-notice/page-notice-cta.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_cta_1 = __importDefault(require("../common/notice-utils/notice-cta"));
+var EbayPageNoticeCTA = function (_a) {
+    var className = _a.className, children = _a.children;
+    return (react_1.default.createElement(notice_cta_1.default, { className: className, type: "page" }, children));
+};
+exports.default = EbayPageNoticeCTA;

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

@@ -1,7 +1,9 @@
-import React, { FC } from 'react';
+import React, { Dispatch, FC, MouseEvent } from 'react';
 declare type Props = React.HTMLProps<HTMLElement> & {
     status?: 'general' | 'attention' | 'confirmation' | 'information';
     'aria-label'?: string;
+    a11yDismissText: string;
+    onDismiss?: Dispatch<MouseEvent>;
 };
 declare const EbayPageNotice: FC<Props>;
 export default EbayPageNotice;

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

@@ -1 +1 @@
-{"version":3,"file":"page-notice.d.ts","sourceRoot":"","sources":["../../src/ebay-page-notice/page-notice.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,EAAgB,MAAM,OAAO,CAAA;AAK/C,aAAK,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG;IACxC,MAAM,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,cAAc,GAAG,aAAa,CAAC;IAClE,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,KAAK,CAgC7B,CAAA;AAED,eAAe,cAAc,CAAA"}
+{"version":3,"file":"page-notice.d.ts","sourceRoot":"","sources":["../../src/ebay-page-notice/page-notice.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAA0B,MAAM,OAAO,CAAA;AAK/E,aAAK,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG;IACxC,MAAM,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,cAAc,GAAG,aAAa,CAAC;IAClE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAA;CACnC,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,KAAK,CAoD7B,CAAA;AAED,eAAe,cAAc,CAAA"}

package/ebay-page-notice/page-notice.js

@@ -10,6 +10,25 @@ var __assign = (this && this.__assign) || function () {
     };
     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)
@@ -25,21 +44,31 @@ 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 react_1 = __importStar(require("react"));
 var notice_content_1 = __importDefault(require("../common/notice-utils/notice-content"));
 var ebay_notice_content_1 = require("../ebay-notice-base/components/ebay-notice-content");
 var ebay_icon_1 = require("../ebay-icon");
 var EbayPageNotice = function (_a) {
-    var _b = _a.status, status = _b === void 0 ? 'general' : _b, children = _a.children, ariaLabel = _a["aria-label"], rest = __rest(_a, ["status", "children", 'aria-label']);
+    var _b = _a.status, status = _b === void 0 ? 'general' : _b, children = _a.children, onDismiss = _a.onDismiss, a11yDismissText = _a.a11yDismissText, ariaLabel = _a["aria-label"], rest = __rest(_a, ["status", "children", "onDismiss", "a11yDismissText", 'aria-label']);
+    var _c = react_1.useState(false), dismissed = _c[0], setDismissed = _c[1];
     var childrenArray = react_1.default.Children.toArray(children);
     var content = childrenArray.find(function (child) { return child.type === ebay_notice_content_1.EbayNoticeContent; });
     if (!content) {
         throw new Error("EbayPageNotice: Please use a EbayNoticeContent that defines the content of the notice");
     }
-    return (react_1.default.createElement("section", __assign({}, rest, { "aria-labelledby": status + "-status", className: "page-notice " + (status !== "general" ? "page-notice--" + status : ""), role: "region" }),
+    var handleDismissedClicked = function (event) {
+        setDismissed(true);
+        if (onDismiss) {
+            onDismiss(event);
+        }
+    };
+    return dismissed ? null : (react_1.default.createElement("section", __assign({}, rest, { "aria-labelledby": status + "-status", className: "page-notice " + (status !== "general" ? "page-notice--" + status : ""), role: "region" }),
         status !== "general" ? (react_1.default.createElement("div", { className: "page-notice__header", id: status + "-status" },
             react_1.default.createElement(ebay_icon_1.EbayIcon, { name: status + "FilledSmall", a11yText: ariaLabel, a11yVariant: "label" }))) : null,
         react_1.default.createElement(notice_content_1.default, __assign({}, content.props, { type: "page" })),
-        children));
+        children,
+        a11yDismissText && (react_1.default.createElement("div", { className: "page-notice__footer" },
+            react_1.default.createElement("button", { "aria-label": a11yDismissText, className: "fake-link page-notice__dismiss", onClick: handleDismissedClicked },
+                react_1.default.createElement(ebay_icon_1.EbayIcon, { name: 'close-small' }))))));
 };
 exports.default = EbayPageNotice;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebay/ui-core-react",
-  "version": "1.7.3",
+  "version": "1.8.0",
   "description": "Skin components build off React",
   "main": "index.js",
   "types": "index.d.ts",