@czi-sds/components 15.3.0 → 15.4.0

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

@@ -1,109 +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("<TooltipTable />", function () {
-    (0, story_utils_1.generateSnapshots)(snapshotTestStoryFile);
-    it("renders tooltip component", function () { return __awaiter(void 0, void 0, void 0, function () {
-        var tooltipTableElement;
-        return __generator(this, function (_a) {
-            (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, __assign({}, Test.args)));
-            tooltipTableElement = react_2.screen.getByTestId("tooltipTable");
-            expect(tooltipTableElement).not.toBeNull();
-            return [2 /*return*/];
-        });
-    }); });
-    it("renders two sections if provided two objects of data", function () {
-        (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, __assign({}, Test.args)));
-        var sectionHeaders = react_2.screen.getAllByText(/Section/i);
-        expect(sectionHeaders).toHaveLength(2);
-    });
-    it("renders an alert if one is passed", function () { return __awaiter(void 0, void 0, void 0, function () {
-        var props, contentAlert;
-        return __generator(this, function (_a) {
-            props = {
-                contentAlert: "test",
-            };
-            (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, __assign({}, Test.args, props)));
-            contentAlert = react_2.screen.getByText(/test/i);
-            expect(contentAlert).toBeTruthy();
-            return [2 /*return*/];
-        });
-    }); });
-});

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

@@ -1,25 +0,0 @@
-/// <reference types="react" />
-import { CommonThemeProps } from "../styles";
-export interface TooltipTableExtraProps extends CommonThemeProps {
-    data?: Array<{
-        label?: string;
-        dataRows: {
-            label: string;
-            value: string | number;
-        }[];
-        disabled?: boolean;
-    }>;
-    contentAlert?: string | JSX.Element;
-    itemAlign?: "left" | "right";
-}
-export declare const disabledStyle: (props: SectionProps) => string;
-interface SectionProps extends CommonThemeProps {
-    disabled?: boolean;
-    label?: string;
-}
-export declare const Section: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & SectionProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const SectionLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & SectionProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const RowLabel: import("@emotion/styled").StyledComponent<import("@mui/material").TableCellProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & SectionProps, {}, {}>;
-export declare const RowValue: import("@emotion/styled").StyledComponent<import("@mui/material").TableCellProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & SectionProps, {}, {}>;
-export declare const Alert: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & CommonThemeProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export {};

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

@@ -1,46 +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.Alert = exports.RowValue = exports.RowLabel = exports.SectionLabel = exports.Section = exports.disabledStyle = void 0;
-var material_1 = require("@mui/material");
-var styles_1 = require("@mui/material/styles");
-var styles_2 = require("../styles");
-var sdsPropNames = ["contentAlert", "itemAlign"];
-var disabledStyle = function (props) {
-    var colors = (0, styles_2.getColors)(props);
-    var disabled = props.disabled;
-    if (!disabled)
-        return "";
-    return "\n    color: ".concat(colors === null || colors === void 0 ? void 0 : colors.gray["300"], ";\n  ");
-};
-exports.disabledStyle = disabledStyle;
-exports.Section = (0, styles_1.styled)("div")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), exports.disabledStyle, function (props) {
-    var colors = (0, styles_2.getColors)(props);
-    var spacings = (0, styles_2.getSpaces)(props);
-    return "\n      &:not(:last-child) {\n        padding-bottom: ".concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px;\n        border-bottom: 1px solid ").concat(colors === null || colors === void 0 ? void 0 : colors.gray["200"], ";\n      }\n\n      &:not(:first-of-type) {\n        padding-top: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px;\n      }\n    ");
-});
-exports.SectionLabel = (0, styles_1.styled)("div")(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  ", "\n\n  ", "\n"], ["\n  ", "\n  ", "\n\n  ", "\n"])), styles_2.fontCapsXxxxs, exports.disabledStyle, function (props) {
-    var colors = (0, styles_2.getColors)(props);
-    var spacings = (0, styles_2.getSpaces)(props);
-    if (!props.label)
-        return "";
-    return "\n      margin-bottom: ".concat(spacings === null || spacings === void 0 ? void 0 : spacings.m, "px;\n      color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray["500"], ";\n    ");
-});
-exports.RowLabel = (0, styles_1.styled)(material_1.TableCell, {
-    shouldForwardProp: function (prop) {
-        return !sdsPropNames.includes(prop.toString());
-    },
-})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n  ", "\n"])), styles_2.fontBodyXs, exports.disabledStyle, function (props) {
-    var spacings = (0, styles_2.getSpaces)(props);
-    return "\n      padding: 0 0 ".concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px 0;\n      width: 50%;\n      border-bottom: none;\n      font-weight: 600;\n    ");
-});
-exports.RowValue = (0, styles_1.styled)(material_1.TableCell, {
-    shouldForwardProp: function (prop) {
-        return !sdsPropNames.includes(prop.toString());
-    },
-})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n  ", "\n\n  padding-top: 0;\n  padding-bottom: 0;\n  padding-right: 0 !important;\n  border-bottom: none;\n"], ["\n  ", "\n  ", "\n\n  padding-top: 0;\n  padding-bottom: 0;\n  padding-right: 0 !important;\n  border-bottom: none;\n"])), styles_2.fontBodyXs, exports.disabledStyle);
-exports.Alert = (0, styles_1.styled)("div")(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_2.fontBodyXxs);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/src/core/styles/common/constants/black.d.ts

@@ -1,3 +0,0 @@
-export declare enum Black {
-    DEFAULT = "#000000"
-}

package/dist/src/core/styles/common/constants/black.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Black = void 0;
-var Black;
-(function (Black) {
-    Black["DEFAULT"] = "#000000";
-})(Black || (exports.Black = Black = {}));

package/dist/src/core/styles/common/constants/boxShadows.d.ts

@@ -1,5 +0,0 @@
-export declare enum BoxShadows {
-    S = "0 2px 12px 0 rgba(0,0,0,0.3)",
-    M = "0 2px 4px 0 rgba(0,0,0, 0.15),0 2px 10px 0 rgba(0,0,0, 0.15)",
-    L = "0 2px 4px 0 rgba(0,0,0, 0.25)"
-}

package/dist/src/core/styles/common/constants/boxShadows.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BoxShadows = void 0;
-var BoxShadows;
-(function (BoxShadows) {
-    BoxShadows["S"] = "0 2px 12px 0 rgba(0,0,0,0.3)";
-    BoxShadows["M"] = "0 2px 4px 0 rgba(0,0,0, 0.15),0 2px 10px 0 rgba(0,0,0, 0.15)";
-    BoxShadows["L"] = "0 2px 4px 0 rgba(0,0,0, 0.25)";
-})(BoxShadows || (exports.BoxShadows = BoxShadows = {}));

package/dist/src/core/styles/common/constants/fontWeights.d.ts

@@ -1,7 +0,0 @@
-export declare enum FontWeights {
-    HEAVY = 800,
-    BOLD = 700,
-    SEMI_BOLD = 600,
-    REGULAR = 400,
-    THIN = 300
-}

package/dist/src/core/styles/common/constants/fontWeights.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FontWeights = void 0;
-var FontWeights;
-(function (FontWeights) {
-    FontWeights[FontWeights["HEAVY"] = 800] = "HEAVY";
-    FontWeights[FontWeights["BOLD"] = 700] = "BOLD";
-    FontWeights[FontWeights["SEMI_BOLD"] = 600] = "SEMI_BOLD";
-    FontWeights[FontWeights["REGULAR"] = 400] = "REGULAR";
-    FontWeights[FontWeights["THIN"] = 300] = "THIN";
-})(FontWeights || (exports.FontWeights = FontWeights = {}));

package/dist/src/core/styles/common/constants/gray.d.ts

@@ -1,8 +0,0 @@
-export declare enum Gray {
-    DARKEST = "#545454",
-    DARK = "#767676",
-    MEDIUM = "#999999",
-    LIGHT = "#cccccc",
-    LIGHTEST = "#eaeaea",
-    OFF_WHITE = "#f8f8f8"
-}

package/dist/src/core/styles/common/constants/gray.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Gray = void 0;
-var Gray;
-(function (Gray) {
-    Gray["DARKEST"] = "#545454";
-    Gray["DARK"] = "#767676";
-    Gray["MEDIUM"] = "#999999";
-    Gray["LIGHT"] = "#cccccc";
-    Gray["LIGHTEST"] = "#eaeaea";
-    Gray["OFF_WHITE"] = "#f8f8f8";
-})(Gray || (exports.Gray = Gray = {}));

package/dist/src/core/styles/common/constants/spaces.d.ts

@@ -1,11 +0,0 @@
-export declare enum Spaces {
-    DEFAULT = "10px",
-    XXXS = "2px",
-    XXS = "4px",
-    XS = "6px",
-    S = "8px",
-    M = "10px",
-    L = "14px",
-    XL = "22px",
-    XXL = "38px"
-}

package/dist/src/core/styles/common/constants/spaces.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Spaces = void 0;
-var Spaces;
-(function (Spaces) {
-    Spaces["DEFAULT"] = "10px";
-    Spaces["XXXS"] = "2px";
-    Spaces["XXS"] = "4px";
-    Spaces["XS"] = "6px";
-    Spaces["S"] = "8px";
-    Spaces["M"] = "10px";
-    Spaces["L"] = "14px";
-    Spaces["XL"] = "22px";
-    Spaces["XXL"] = "38px";
-})(Spaces || (exports.Spaces = Spaces = {}));

package/dist/src/core/styles/common/constants/white.d.ts

@@ -1,3 +0,0 @@
-export declare enum White {
-    DEFAULT = "#ffffff"
-}

package/dist/src/core/styles/common/constants/white.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.White = void 0;
-var White;
-(function (White) {
-    White["DEFAULT"] = "#ffffff";
-})(White || (exports.White = White = {}));

package/dist/src/core/styles/common/defaultTheme.d.ts

@@ -1,129 +0,0 @@
-/// <reference types="react" />
-import { Theme, ThemeOptions, TypographyStyle } from "@mui/material/styles";
-export declare const defaultAppTheme: AppTheme;
-export declare function makeThemeOptions(appTheme: AppTheme): SDSThemeOptions;
-export interface SDSTheme extends Theme {
-    app?: AppTheme;
-}
-export interface SDSThemeOptions extends ThemeOptions {
-    app?: AppTheme;
-}
-interface AppTheme {
-    borders?: Borders;
-    colors: Colors;
-    corners: Corners;
-    fontWeights: FontWeights;
-    iconSizes: IconSizes;
-    shadows: Shadows;
-    spacing: Spacings;
-    typography: Typography;
-}
-export interface Shadows {
-    none: "none";
-    s: string;
-    m: string;
-    l: string;
-}
-export interface Typography {
-    fontFamily: React.CSSProperties["fontFamily"];
-    styles: {
-        header: {
-            xxl: TypographyStyle;
-            xl: TypographyStyle;
-            l: TypographyStyle;
-            m: TypographyStyle;
-            s: TypographyStyle;
-            xs: TypographyStyle;
-            xxs: TypographyStyle;
-            xxxs: TypographyStyle;
-        };
-        body: {
-            button: TypographyStyle;
-            l: TypographyStyle;
-            m: TypographyStyle;
-            s: TypographyStyle;
-            xs: TypographyStyle;
-            xxs: TypographyStyle;
-            xxxs: TypographyStyle;
-        };
-        caps: {
-            xxs: TypographyStyle;
-            xxxs: TypographyStyle;
-            xxxxs: TypographyStyle;
-        };
-    };
-}
-export interface FontWeights {
-    bold: number;
-    light: number;
-    medium: number;
-    regular: number;
-    semibold: number;
-}
-export interface Corners {
-    none: number;
-    s: number;
-    m: number;
-    l: number;
-}
-export interface Spaces {
-    default: number;
-    xxxs: number;
-    xxs: number;
-    xs: number;
-    s: number;
-    m: number;
-    l: number;
-    xl: number;
-    xxl: number;
-}
-export type Spacings = Spaces;
-export interface Color {
-    600?: string;
-    500?: string;
-    400: string;
-    300?: string;
-    200?: string;
-    100?: string;
-}
-export interface Colors {
-    beta: Color;
-    primary: Color;
-    secondary: Color;
-    gray: Color;
-    info: Color;
-    success: Color;
-    warning: Color;
-    error: Color;
-}
-interface IconSize {
-    height: number;
-    width: number;
-}
-export interface IconSizes {
-    xs: IconSize;
-    s: IconSize;
-    l: IconSize;
-    xl: IconSize;
-    input: IconSize;
-}
-export interface Border {
-    600?: string;
-    500?: string;
-    400?: string;
-    300?: string;
-    200?: string;
-    100?: string;
-    dashed?: string;
-    solid?: string;
-}
-export interface Borders {
-    error: Border;
-    gray: Border;
-    link: Border;
-    primary: Border;
-    success: Border;
-    warning: Border;
-}
-export declare const defaultTheme: Theme;
-export {};