@czi-sds/components 15.3.0 → 15.4.1

package/dist/src/core/Accordion/index.test.js

@@ -1,58 +0,0 @@
-"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;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (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.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var story_utils_1 = require("@chanzuckerberg/story-utils");
-var react_1 = require("@storybook/react");
-var react_2 = require("@testing-library/react");
-var snapshotTestStoryFile = __importStar(require("./index.stories"));
-var index_stories_1 = __importStar(require("./index.stories"));
-// Returns a component that already contain all decorators from story level, meta level and global level.
-var Test = (0, react_1.composeStory)(index_stories_1.Test, index_stories_1.default);
-describe("<Accordion />", function () {
-    (0, story_utils_1.generateSnapshots)(snapshotTestStoryFile);
-    it("renders accordion component", function () {
-        (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, __assign({}, Test.args)));
-        var accordionElement = react_2.screen.getByTestId("accordion");
-        expect(accordionElement).not.toBeNull();
-    });
-    it("opens accordion when clicked", function () {
-        (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, {}));
-        var accordionElement = react_2.screen.getByTestId("accordion");
-        react_2.fireEvent.click(accordionElement);
-        expect(react_2.screen.getAllByText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")).not.toBeNull();
-    });
-});

package/dist/src/core/Accordion/style.d.ts

@@ -1,30 +0,0 @@
-/// <reference types="react" />
-import { CommonThemeProps } from "../styles";
-export interface AccordionExtraProps extends CommonThemeProps {
-    useDivider?: boolean;
-    togglePosition?: "right" | "left";
-    id: string;
-}
-export declare const StyledAccordion: import("@emotion/styled").StyledComponent<{
-    children: NonNullable<import("react").ReactNode>;
-    classes?: Partial<import("@mui/material").AccordionClasses> | undefined;
-    defaultExpanded?: boolean | undefined;
-    disabled?: boolean | undefined;
-    disableGutters?: boolean | undefined;
-    expanded?: boolean | undefined;
-    onChange?: ((event: import("react").SyntheticEvent<Element, Event>, expanded: boolean) => void) | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    TransitionComponent?: import("react").JSXElementConstructor<import("@mui/material/transitions").TransitionProps & {
-        children?: import("react").ReactElement<any, any> | undefined;
-    }> | undefined;
-    TransitionProps?: import("@mui/material/transitions").TransitionProps | undefined;
-} & Omit<{
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").PaperClasses> | undefined;
-    elevation?: number | undefined;
-    square?: boolean | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: import("@mui/types").OverridableStringUnion<"elevation" | "outlined", import("@mui/material").PaperPropsVariantOverrides> | undefined;
-}, "classes" | "onChange"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "onChange" | "children" | "elevation" | "square" | "sx" | "variant" | "defaultExpanded" | "disabled" | "disableGutters" | "expanded" | "TransitionComponent" | "TransitionProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & AccordionExtraProps, {}, {}>;

package/dist/src/core/Accordion/style.js

@@ -1,28 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledAccordion = void 0;
-var react_1 = require("@emotion/react");
-var material_1 = require("@mui/material");
-var styles_1 = require("@mui/material/styles");
-var styles_2 = require("../styles");
-var sdsPropNames = ["useDivider", "togglePosition"];
-exports.StyledAccordion = (0, styles_1.styled)(material_1.Accordion, {
-    shouldForwardProp: function (prop) {
-        return !sdsPropNames.includes(prop.toString());
-    },
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
-    var useDivider = props.useDivider, togglePosition = props.togglePosition;
-    var shadows = (0, styles_2.getShadows)(props);
-    var typography = (0, styles_2.getTypography)(props);
-    var border = (0, styles_2.getBorders)(props);
-    return (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      &.MuiAccordion-root {\n        box-shadow: ", ";\n        font-family: ", ";\n        border-bottom: ", ";\n        height: fit-content;\n\n        & .MuiAccordionSummary-root {\n          padding: 10px;\n          min-height: 40px;\n\n          &.Mui-expanded {\n            min-height: unset;\n          }\n\n          & .MuiAccordionSummary-expandIcon,\n          & .MuiAccordionSummary-expandIconWrapper {\n            padding: 0;\n            align-self: flex-start;\n          }\n        }\n\n        .MuiAccordionDetails-root {\n          padding: 10px;\n          padding-top: 4px;\n        }\n\n        &:before {\n          opacity: 0;\n        }\n\n        &.Mui-expanded {\n          margin: 0;\n        }\n        ", "\n      }\n    "], ["\n      &.MuiAccordion-root {\n        box-shadow: ", ";\n        font-family: ", ";\n        border-bottom: ", ";\n        height: fit-content;\n\n        & .MuiAccordionSummary-root {\n          padding: 10px;\n          min-height: 40px;\n\n          &.Mui-expanded {\n            min-height: unset;\n          }\n\n          & .MuiAccordionSummary-expandIcon,\n          & .MuiAccordionSummary-expandIconWrapper {\n            padding: 0;\n            align-self: flex-start;\n          }\n        }\n\n        .MuiAccordionDetails-root {\n          padding: 10px;\n          padding-top: 4px;\n        }\n\n        &:before {\n          opacity: 0;\n        }\n\n        &.Mui-expanded {\n          margin: 0;\n        }\n        ", "\n      }\n    "])), shadows === null || shadows === void 0 ? void 0 : shadows.none, typography === null || typography === void 0 ? void 0 : typography.fontFamily, useDivider ? border === null || border === void 0 ? void 0 : border.gray[300] : "none", togglePosition === "left" && leftPosition(props));
-});
-var leftPosition = function (props) {
-    var spaces = (0, styles_2.getSpaces)(props);
-    return (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    &.MuiAccordion-root {\n      & .MuiAccordionSummary-root {\n        flex-direction: row-reverse;\n\n        .MuiAccordionSummary-content {\n          padding-left: ", "px;\n        }\n\n        .MuiAccordionSummary-expandIconWrapper {\n          margin: 0;\n          transform: rotate(-90deg);\n          align-self: flex-start;\n          margin-top: ", "px;\n\n          &.Mui-expanded {\n            transform: rotate(0deg);\n          }\n        }\n      }\n\n      & .MuiAccordionDetails-root {\n        padding-left: 30px;\n      }\n    }\n  "], ["\n    &.MuiAccordion-root {\n      & .MuiAccordionSummary-root {\n        flex-direction: row-reverse;\n\n        .MuiAccordionSummary-content {\n          padding-left: ", "px;\n        }\n\n        .MuiAccordionSummary-expandIconWrapper {\n          margin: 0;\n          transform: rotate(-90deg);\n          align-self: flex-start;\n          margin-top: ", "px;\n\n          &.Mui-expanded {\n            transform: rotate(0deg);\n          }\n        }\n      }\n\n      & .MuiAccordionDetails-root {\n        padding-left: 30px;\n      }\n    }\n  "])), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.xxs);
-};
-var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/core/Alert/index.d.ts

@@ -1,7 +0,0 @@
-import { AlertProps as RawAlertProps } from "@mui/lab";
-export type AlertProps = Omit<RawAlertProps, "nonce" | "rev" | "rel" | "autoFocus" | "content">;
-/**
- * @see https://mui.com/material-ui/react-alert/
- */
-declare const Alert: (props: AlertProps) => JSX.Element;
-export default Alert;

package/dist/src/core/Alert/index.js

@@ -1,22 +0,0 @@
-"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);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var style_1 = require("./style");
-/**
- * @see https://mui.com/material-ui/react-alert/
- */
-var Alert = function (props) {
-    return (0, jsx_runtime_1.jsx)(style_1.StyledAlert, __assign({}, props));
-};
-exports.default = Alert;

package/dist/src/core/Alert/index.stories.d.ts

@@ -1,19 +0,0 @@
-import { Args } from "@storybook/react";
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, Args>;
-export default _default;
-export declare const Default: {
-    args: {
-        text: string;
-    };
-    parameters: {
-        snapshot: {
-            skip: boolean;
-        };
-    };
-};
-export declare const SnackbarAlert: () => JSX.Element;
-export declare const Test: {
-    args: {
-        text: string;
-    };
-};

package/dist/src/core/Alert/index.stories.js

@@ -1,70 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Test = exports.SnackbarAlert = exports.Default = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var icons_material_1 = require("@mui/icons-material");
-var material_1 = require("@mui/material");
-var styles_1 = require("@mui/material/styles");
-var react_1 = __importDefault(require("react"));
-var Button_1 = __importDefault(require("../Button"));
-var defaultTheme_1 = require("../styles/common/defaultTheme");
-var index_1 = __importDefault(require("./index"));
-var DismissButton = (0, styles_1.styled)(Button_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-left: -", "px;\n  padding-bottom: 0;\n  font-size: 12px;\n  line-height: 18px;\n  letter-spacing: 1px;\n  font-weight: 600;\n  &:hover {\n    background: none;\n  }\n"], ["\n  margin-left: -", "px;\n  padding-bottom: 0;\n  font-size: 12px;\n  line-height: 18px;\n  letter-spacing: 1px;\n  font-weight: 600;\n  &:hover {\n    background: none;\n  }\n"])), defaultTheme_1.defaultTheme.spacing(3));
-var Demo = function (props) {
-    var text = props.text;
-    return ((0, jsx_runtime_1.jsx)(index_1.default, __assign({ icon: (0, jsx_runtime_1.jsx)(icons_material_1.CheckCircleOutline, {}), onClose: function () { } }, props, { children: text })));
-};
-exports.default = {
-    argTypes: {
-        text: {
-            control: { type: "text" },
-            required: true,
-        },
-    },
-    component: Demo,
-    title: "Alert - To Be Depreciated",
-};
-exports.Default = {
-    args: {
-        text: "This is an alert!",
-    },
-    parameters: {
-        snapshot: {
-            skip: true,
-        },
-    },
-};
-var SnackbarAlert = function () {
-    var _a = react_1.default.useState(false), open = _a[0], setOpen = _a[1];
-    var handleOpen = function () { return setOpen(true); };
-    var handleClose = function () { return setOpen(false); };
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(Button_1.default, { sdsType: "primary", sdsStyle: "square", onClick: handleOpen, children: "Open alert" }), (0, jsx_runtime_1.jsx)(material_1.Snackbar, { anchorOrigin: {
-                    horizontal: "right",
-                    vertical: "top",
-                }, open: open, autoHideDuration: 6000, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)(index_1.default, { className: "elevated", severity: "info", children: [(0, jsx_runtime_1.jsx)("div", { children: "This is a snackbar alert!" }), (0, jsx_runtime_1.jsx)(DismissButton, { onClick: handleClose, children: "DISMISS" })] }) }) })] }));
-};
-exports.SnackbarAlert = SnackbarAlert;
-exports.Test = {
-    args: {
-        text: "Test Alert!",
-    },
-};
-var templateObject_1;

package/dist/src/core/Alert/style.d.ts

@@ -1 +0,0 @@
-export declare const StyledAlert: import("@emotion/styled").StyledComponent<import("@mui/material").AlertProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/dist/src/core/Alert/style.js

@@ -1,23 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledAlert = void 0;
-var material_1 = require("@mui/material");
-var styles_1 = require("@mui/material/styles");
-var styles_2 = require("../styles");
-var defaultTheme_1 = require("../styles/common/defaultTheme");
-exports.StyledAlert = (0, styles_1.styled)(material_1.Alert)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
-    var colors = (0, styles_2.getColors)(props);
-    var spacings = (0, styles_2.getSpaces)(props);
-    var shadows = (0, styles_2.getShadows)(props);
-    var _a = props.severity, severity = _a === void 0 ? "success" : _a;
-    var borderColor = (colors && colors[severity][400]) || "black";
-    var alertColor = (colors && colors[severity][100]) || "white";
-    var iconColor = (colors && colors[severity][400]) || "black";
-    var backgroundColor = colors && colors[severity][100];
-    return "\n      background-color: ".concat(backgroundColor, ";\n      margin: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.m, "px 0;\n      color: ").concat(defaultTheme_1.defaultTheme.palette.text.primary, ";\n      padding: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px\n        ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px 9px;\n      background-color: ").concat(alertColor, ";\n      &.elevated {\n        border-left: 5px solid;\n        box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.s, ";\n        border-color: ").concat(borderColor, ";\n      }\n      .MuiAlert-icon {\n        path {\n          fill: ").concat(iconColor, ";\n        }\n      }\n    ");
-});
-var templateObject_1;

package/dist/src/core/Banner/Banner.namespace-test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/src/core/Banner/Banner.namespace-test.js

@@ -1,18 +0,0 @@
-"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);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var components_1 = require("@czi-sds/components");
-var BannerNameSpaceTest = function (props) {
-    return ((0, jsx_runtime_1.jsx)(components_1.Banner, __assign({}, props, { dismissible: true, sdsType: "primary", children: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt aliquid maxime soluta voluptas expedita molestias neque saepe aperiam amet enim natus placeat, tempore doloribus odio reiciendis repellat? Dolorem, voluptatem tempore." })));
-};

package/dist/src/core/Banner/banner.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/src/core/Banner/banner.test.js

@@ -1,126 +0,0 @@
-"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;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (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.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var story_utils_1 = require("@chanzuckerberg/story-utils");
-var react_1 = require("@storybook/react");
-var react_2 = require("@testing-library/react");
-var snapshotTestStoryFile = __importStar(require("./index.stories"));
-var index_stories_1 = __importStar(require("./index.stories"));
-// Returns a component that already contain all decorators from story level, meta level and global level.
-var Test = (0, react_1.composeStory)(index_stories_1.Test, index_stories_1.default);
-describe("<Banner />", function () {
-    (0, story_utils_1.generateSnapshots)(snapshotTestStoryFile);
-    it("renders banner component", function () { return __awaiter(void 0, void 0, void 0, function () {
-        var banner;
-        return __generator(this, function (_a) {
-            (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, __assign({}, Test.args)));
-            banner = react_2.screen.getByRole("banner");
-            expect(banner).not.toBeNull();
-            return [2 /*return*/];
-        });
-    }); });
-    it("renders text given to it", function () {
-        var text = "this is a test component";
-        (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, __assign({}, Test.args, { textChild: text })));
-        var bannerText = react_2.screen.getByText(text);
-        expect(bannerText).not.toBeNull();
-    });
-    it("can be dismissed", function () { return __awaiter(void 0, void 0, void 0, function () {
-        var banner, closeButton, click, banner2;
-        return __generator(this, function (_a) {
-            (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, __assign({}, Test.args)));
-            banner = react_2.screen.getByRole("banner");
-            expect(banner).not.toBeNull();
-            closeButton = react_2.screen.getByRole("button");
-            click = new MouseEvent("click", {
-                bubbles: true,
-                cancelable: true,
-            });
-            (0, react_2.fireEvent)(closeButton, click);
-            banner2 = react_2.screen.queryByRole("banner");
-            expect(banner2).toBeNull();
-            return [2 /*return*/];
-        });
-    }); });
-    it("executes callback on close", function () {
-        var onClose = jest.fn();
-        (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, __assign({}, Test.args, { onClose: onClose })));
-        var closeButton = react_2.screen.getByRole("button");
-        var click = new MouseEvent("click", {
-            bubbles: true,
-            cancelable: true,
-        });
-        (0, react_2.fireEvent)(closeButton, click);
-        expect(onClose).toHaveBeenCalledTimes(1);
-    });
-});

package/dist/src/core/Banner/index.d.ts

@@ -1,11 +0,0 @@
-import React from "react";
-import { ButtonIconSizeToTypes } from "../ButtonIcon";
-import { BannerExtraProps } from "./style";
-export interface BannerProps<ButtonIconSize extends keyof ButtonIconSizeToTypes> extends BannerExtraProps<ButtonIconSize> {
-    children: React.ReactNode;
-    dismissed?: boolean;
-    dismissible?: boolean;
-    onClose?: (e: React.MouseEvent) => void;
-}
-declare const Banner: React.ForwardRefExoticComponent<BannerProps<keyof ButtonIconSizeToTypes> & React.RefAttributes<HTMLDivElement | null>>;
-export default Banner;

package/dist/src/core/Banner/index.js

@@ -1,47 +0,0 @@
-"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 jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var Icon_1 = __importDefault(require("../Icon"));
-var style_1 = require("./style");
-var Banner = (0, react_1.forwardRef)(function Banner(props, ref) {
-    var children = props.children, dismissed = props.dismissed, _a = props.dismissible, dismissible = _a === void 0 ? true : _a, onClose = props.onClose, sdsType = props.sdsType, rest = __rest(props, ["children", "dismissed", "dismissible", "onClose", "sdsType"]);
-    var _b = (0, react_1.useState)(false), wasDismissed = _b[0], setWasDismissed = _b[1];
-    if (dismissed || wasDismissed)
-        return null;
-    var handleClose = function (e) {
-        if (dismissed === undefined) {
-            // let the component be uncontrolled
-            setWasDismissed(true);
-        }
-        if (onClose)
-            onClose(e);
-    };
-    return ((0, jsx_runtime_1.jsxs)(style_1.StyledBanner, __assign({ role: "banner", sdsType: sdsType, ref: ref }, rest, { children: [(0, jsx_runtime_1.jsxs)(style_1.Centered, { children: [(0, jsx_runtime_1.jsx)(style_1.IconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { sdsIcon: "infoCircle", sdsSize: "l", sdsType: "static" }) }), children] }), dismissible && ((0, jsx_runtime_1.jsx)(style_1.StyledButtonIcon, { "aria-label": "Close", bannerType: sdsType, sdsType: "tertiary", sdsSize: "small", onClick: handleClose, sdsIcon: "xMark" }))] })));
-});
-exports.default = Banner;

package/dist/src/core/Banner/index.stories.d.ts

@@ -1,46 +0,0 @@
-import { Args } from "@storybook/react";
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, Args>;
-export default _default;
-export declare const Default: {
-    args: {
-        dismissed: boolean;
-        dismissible: boolean;
-        sdsType: string;
-        textChild: string;
-    };
-};
-export declare const LivePreview: {
-    args: {
-        dismissible: boolean;
-        sdsType: string;
-        textChild: string;
-    };
-    parameters: {
-        axe: {
-            disabledRules: string[];
-        };
-        controls: {
-            exclude: string[];
-        };
-        snapshot: {
-            skip: boolean;
-        };
-    };
-    render: (args: Args) => JSX.Element;
-};
-export declare const Test: {
-    args: {
-        dismissible: boolean;
-        sdsType: string;
-        textChild: string;
-    };
-    parameters: {
-        controls: {
-            exclude: string[];
-        };
-        snapshot: {
-            skip: boolean;
-        };
-    };
-    render: (props: Args) => JSX.Element;
-};

package/dist/src/core/Banner/index.stories.js

@@ -1,106 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Test = exports.LivePreview = exports.Default = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styles_1 = require("@mui/material/styles");
-var index_1 = __importDefault(require("./index"));
-var BANNER_TEXT = "Banner text lorem ipsum dolor mit";
-var Banner = function (props) {
-    var sdsType = props.sdsType, textChild = props.textChild;
-    return ((0, jsx_runtime_1.jsx)(index_1.default, __assign({ sdsType: sdsType }, props, { children: textChild })));
-};
-exports.default = {
-    argTypes: {
-        dismissed: {
-            control: { type: "boolean" },
-        },
-        dismissible: {
-            control: { type: "boolean" },
-        },
-        sdsType: {
-            control: { type: "radio" },
-            options: ["primary", "secondary"],
-            required: true,
-        },
-        textChild: {
-            control: { type: "text" },
-            required: true,
-        },
-    },
-    component: Banner,
-    parameters: {
-        axe: {
-            disabledRules: ["landmark-no-duplicate-banner", "landmark-unique"],
-        },
-    },
-    title: "Banner",
-};
-// Default
-exports.Default = {
-    args: {
-        dismissed: false,
-        dismissible: true,
-        sdsType: "primary",
-        textChild: BANNER_TEXT,
-    },
-};
-// Live Preview
-var StyledBanner = (0, styles_1.styled)(index_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: Crimson;\n"], ["\n  background-color: Crimson;\n"])));
-var LivePreviewDemo = function () {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { padding: "24px", width: "600px" }, children: [(0, jsx_runtime_1.jsx)(index_1.default, { dismissible: true, sdsType: "primary", children: BANNER_TEXT }), (0, jsx_runtime_1.jsx)("div", { style: { height: "24px" } }), (0, jsx_runtime_1.jsx)(index_1.default, { dismissible: true, sdsType: "secondary", children: BANNER_TEXT }), (0, jsx_runtime_1.jsx)("div", { style: { height: "24px" } }), (0, jsx_runtime_1.jsx)(StyledBanner, { sdsType: "primary", children: "Stylable. Should have Crimson background color" })] }));
-};
-exports.LivePreview = {
-    args: {
-        dismissible: true,
-        sdsType: "primary",
-        textChild: "test text",
-    },
-    parameters: {
-        axe: {
-            disabledRules: ["landmark-no-duplicate-banner", "landmark-unique"],
-        },
-        controls: {
-            exclude: ["dismissible", "sdsType", "textChild", "dismissed"],
-        },
-        snapshot: {
-            skip: true,
-        },
-    },
-    render: function (args) { return (0, jsx_runtime_1.jsx)(LivePreviewDemo, __assign({}, args)); },
-};
-// Test
-exports.Test = {
-    args: {
-        dismissible: true,
-        sdsType: "primary",
-        textChild: "test text",
-    },
-    parameters: {
-        controls: {
-            exclude: ["dismissible", "sdsType", "textChild", "dismissed"],
-        },
-        snapshot: {
-            skip: true,
-        },
-    },
-    render: function (props) { return ((0, jsx_runtime_1.jsx)(Banner, __assign({}, props, { "data-testid": "banner" }))); },
-};
-var templateObject_1;