@czi-sds/components 15.1.0 → 15.2.0

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

@@ -0,0 +1,109 @@
+"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

@@ -0,0 +1,25 @@
+/// <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

@@ -0,0 +1,46 @@
+"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

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

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

@@ -0,0 +1,7 @@
+"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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,9 @@
+"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

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

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

@@ -0,0 +1,11 @@
+"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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,12 @@
+"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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,15 @@
+"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

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

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

@@ -0,0 +1,7 @@
+"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

@@ -0,0 +1,129 @@
+/// <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 {};