@czi-sds/components 15.3.0 → 15.4.0

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

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-import { IconNameToSizes } from "./map";
-import { IconExtraProps, SdsIconColorType } from "./style";
-export type { IconNameToSizes };
-export interface SdsIconWithColor {
-    color?: SdsIconColorType;
-    shade?: 100 | 200 | 300 | 400 | 500 | 600;
-}
-export type IconProps<IconName extends keyof IconNameToSizes> = IconExtraProps<IconName> & SdsIconWithColor;
-/**
- * @see https://mui.com/material-ui/icons/#icons
- */
-declare const Icon: import("react").ForwardRefExoticComponent<IconExtraProps<keyof IconNameToSizes> & SdsIconWithColor & import("react").RefAttributes<HTMLDivElement | null>>;
-export default Icon;

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

@@ -1,25 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var map_1 = require("./map");
-var style_1 = require("./style");
-/**
- * @see https://mui.com/material-ui/icons/#icons
- */
-var Icon = (0, react_1.forwardRef)(function Icon(_a, ref) {
-    var _b;
-    var className = _a.className, color = _a.color, shade = _a.shade, sdsIcon = _a.sdsIcon, sdsSize = _a.sdsSize, sdsType = _a.sdsType;
-    var icon = (_b = map_1.iconMap[sdsIcon]) !== null && _b !== void 0 ? _b : {};
-    var largeIcon = icon.largeIcon, smallIcon = icon.smallIcon;
-    if ((sdsSize === "xs" || sdsSize === "s") && smallIcon) {
-        return ((0, jsx_runtime_1.jsx)(style_1.StyledIcon, { ref: ref, children: (0, jsx_runtime_1.jsx)(style_1.StyledSvgIcon, { iconColor: color, shade: shade, className: className, fillcontrast: "white", viewBox: "0 0 14 14", component: smallIcon, sdsSize: sdsSize, sdsType: sdsType, sdsIcon: sdsIcon }) }));
-    }
-    if ((sdsSize === "l" || sdsSize === "xl") && largeIcon) {
-        return ((0, jsx_runtime_1.jsx)(style_1.StyledIcon, { ref: ref, children: (0, jsx_runtime_1.jsx)(style_1.StyledSvgIcon, { iconColor: color, shade: shade, className: className, fillcontrast: "white", viewBox: "0 0 22 22", component: largeIcon, sdsSize: sdsSize, sdsType: sdsType, sdsIcon: sdsIcon }) }));
-    }
-    // eslint-disable-next-line no-console
-    console.error("Error: Icon ".concat(sdsIcon, " not found for size ").concat(sdsSize, ". This is a @czi-sds/components problem."));
-    return null;
-});
-exports.default = Icon;

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

@@ -1,34 +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: {
-        color: string;
-        sdsIcon: string;
-        sdsSize: string;
-        sdsType: string;
-        shade: number;
-    };
-};
-export declare const IconBank: {
-    args: {
-        color: string;
-    };
-    parameters: {
-        controls: {
-            exclude: string[];
-        };
-    };
-    render: (args: Args) => JSX.Element;
-};
-export declare const Test: {
-    parameters: {
-        controls: {
-            exclude: string[];
-        };
-        snapshot: {
-            skip: boolean;
-        };
-    };
-    render: (args: Args) => JSX.Element;
-};

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

@@ -1,171 +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 __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 });
-exports.Test = exports.IconBank = exports.Default = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styled_1 = __importDefault(require("@emotion/styled"));
-var react_1 = require("react");
-var Callout_1 = __importDefault(require("../Callout"));
-var InputSearch_1 = __importDefault(require("../InputSearch"));
-var styles_1 = require("../styles");
-var index_1 = __importDefault(require("./index"));
-var map_1 = require("./map");
-var Icon = function (props) {
-    var sdsIcon = props.sdsIcon, sdsSize = props.sdsSize, sdsType = props.sdsType, rest = __rest(props, ["sdsIcon", "sdsSize", "sdsType"]);
-    return ((0, jsx_runtime_1.jsx)(index_1.default, __assign({ sdsIcon: sdsIcon, sdsSize: sdsSize, sdsType: sdsType }, rest)));
-};
-exports.default = {
-    argTypes: {
-        color: {
-            control: {
-                type: "select",
-            },
-            options: [
-                "beta",
-                "gray",
-                "primary",
-                "secondary",
-                "error",
-                "info",
-                "success",
-                "warning",
-            ],
-        },
-        sdsIcon: {
-            control: {
-                type: "select",
-            },
-            options: [
-                "checkCircle",
-                "copy",
-                "edit",
-                "lightBulb",
-                "linesHorizontal",
-                "loading",
-                "xMark",
-            ],
-        },
-        sdsSize: {
-            control: { type: "select" },
-            options: ["xs", "s", "l", "xl"],
-        },
-        sdsType: {
-            control: { type: "select" },
-            options: ["iconButton", "interactive", "static", "button"],
-        },
-        shade: {
-            control: {
-                type: "select",
-            },
-            options: [100, 200, 300, 400, 500, 600],
-        },
-    },
-    component: Icon,
-    title: "Icon",
-};
-// Default
-exports.Default = {
-    args: {
-        color: "primary",
-        sdsIcon: "checkCircle",
-        sdsSize: "xl",
-        sdsType: "static",
-        shade: 400,
-    },
-};
-// Icon Bank
-var IconBankWrapper = (0, styled_1.default)("div")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
-    var typography = (0, styles_1.getTypography)(props);
-    var spacings = (0, styles_1.getSpaces)(props);
-    return "\n      font-family: ".concat(typography === null || typography === void 0 ? void 0 : typography.fontFamily, ";\n      display: grid;\n      grid-gap: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px;\n      margin: 0 auto;\n      grid-template-columns: repeat(auto-fit, 210px);\n      margin-top: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.m, "px;\n    ");
-});
-var IconWrapper = (0, styled_1.default)("div")(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
-    var colors = (0, styles_1.getColors)(props);
-    var spacings = (0, styles_1.getSpaces)(props);
-    var _a = props.color, color = _a === void 0 ? "primary" : _a, _b = props.shade, shade = _b === void 0 ? 400 : _b;
-    return "\n      align-items: center;\n      border: 1px solid #eee;\n      border-radius: 2px;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      padding: 8px;\n      position: relative;\n      cursor: pointer;\n      transition: all .2s;\n\n      p {\n        margin: ".concat(spacings === null || spacings === void 0 ? void 0 : spacings.m, "px 0 0 0;\n        text-align: center;\n        font-size: 13px;\n        background-color: transparent;\n      }\n\n      span {\n        color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[600], ";\n        font-size: 11px;\n      }\n\n      span.size-tag {\n        background-color: rgba(0, 0, 0, 0.05);\n        font-size: 10px;\n        padding: 0 4px;\n        margin: 0 2px;\n        border-radius: 2px;\n      }\n\n      &:hover {\n        border-radius: 2px;\n        background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors[color][shade], ";\n        border-color: ").concat(colors === null || colors === void 0 ? void 0 : colors[color][shade], ";\n        color: white;\n\n        p {\n          color: white;\n        }\n\n        span {\n          color: white;\n        }\n\n        span.size-tag {\n          background-color: rgba(0, 0, 0, 0.2);\n        }\n\n        svg {\n          fill: white;\n        }\n\n        div.notif {\n          display: flex;\n        }\n      }\n\n      div.icon {\n        min-height: 22px;\n        display: flex;\n        align-items: center;\n      }\n\n      div.notif {\n        flex-direction: column;\n        border-radius: 2px;\n        display: none;\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        background-color: rgba(0, 0, 0, 0.3);\n        backdrop-filter: blur(3px);\n        color: white;\n        align-items: center;\n        justify-content: center;\n      }\n    ");
-});
-var IconItem = function (props) {
-    var sdsIcon = props.sdsIcon, innerIcon = props.innerIcon, color = props.color, shade = props.shade;
-    if (!innerIcon[1])
-        return null;
-    var sdsSize = innerIcon[0] === "smallIcon" ? "s" : "l";
-    var _a = (0, react_1.useState)(false), copied = _a[0], setCopied = _a[1];
-    var copyIconNameHandler = function (iconName) {
-        navigator.clipboard.writeText(iconName);
-        setCopied(true);
-        setTimeout(function () {
-            setCopied(false);
-        }, 1500);
-    };
-    return ((0, jsx_runtime_1.jsxs)(IconWrapper, { color: color, shade: shade, onClick: function () { return copyIconNameHandler(sdsIcon); }, children: [(0, jsx_runtime_1.jsx)("div", { className: "icon", children: (0, jsx_runtime_1.jsx)(index_1.default, { color: color, shade: shade, sdsSize: sdsSize, sdsIcon: sdsIcon, sdsType: "static" }) }), (0, jsx_runtime_1.jsx)("p", { children: sdsIcon }), (0, jsx_runtime_1.jsxs)("span", { children: ["Available sizes", " ", sdsSize === "s" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "size-tag", children: "xs" }), (0, jsx_runtime_1.jsx)("span", { className: "size-tag", children: "s" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "size-tag", children: "l" }), (0, jsx_runtime_1.jsx)("span", { className: "size-tag", children: "xl" })] }))] }), copied && ((0, jsx_runtime_1.jsxs)("div", { className: "notif", children: [(0, jsx_runtime_1.jsx)(index_1.default, { color: color, shade: shade, sdsSize: sdsSize, sdsIcon: sdsIcon, sdsType: "static" }), (0, jsx_runtime_1.jsx)("p", { children: "Copied!" }), (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(index_1.default, { color: color, shade: shade, sdsSize: "xs", sdsIcon: "check", sdsType: "static" }) })] }))] }, sdsIcon + sdsSize));
-};
-var IconBankDemo = function (props) {
-    var color = props.color, shade = props.shade;
-    var initialIcons = Object.entries(map_1.iconMap);
-    var _a = (0, react_1.useState)(initialIcons), icons = _a[0], setIcons = _a[1];
-    var searchIconHandler = function (e) {
-        var query = e.target.value;
-        var regex = new RegExp(query, "gi");
-        var newIcons = initialIcons.filter(function (icon) {
-            return icon[0].match(regex);
-        });
-        setIcons(newIcons);
-    };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(InputSearch_1.default, { id: "squareSearchPreview", label: "Search", sdsStyle: "square", placeholder: "Search icons", name: "square-input-search", onChange: searchIconHandler }), icons.length ? ((0, jsx_runtime_1.jsx)(IconBankWrapper, { children: icons.map(function (_a) {
-                    var sdsIcon = _a[0], icon = _a[1];
-                    return Object.entries(icon).map(function (innerIcon) { return ((0, jsx_runtime_1.jsx)(IconItem, { color: color, shade: shade, innerIcon: innerIcon, sdsIcon: sdsIcon }, sdsIcon + innerIcon[0])); });
-                }) })) : ((0, jsx_runtime_1.jsx)(Callout_1.default, { intent: "warning", icon: (0, jsx_runtime_1.jsx)(index_1.default, { sdsSize: "l", sdsIcon: "infoSpeechBubble", sdsType: "static" }), children: "Sorry, there are no matches for your search!" }))] }));
-};
-exports.IconBank = {
-    args: {
-        color: "primary",
-    },
-    parameters: {
-        controls: {
-            exclude: ["sdsIcon", "sdsSize", "sdsType", "shade"],
-        },
-    },
-    render: function (args) { return (0, jsx_runtime_1.jsx)(IconBankDemo, __assign({}, args)); },
-};
-// Test
-exports.Test = {
-    parameters: {
-        controls: {
-            exclude: ["color", "sdsIcon", "sdsSize", "sdsType"],
-        },
-        snapshot: {
-            skip: true,
-        },
-    },
-    render: function (args) { return ((0, jsx_runtime_1.jsx)(index_1.default, __assign({ sdsIcon: "checkCircle", sdsSize: "l", sdsType: "static", color: "success", "data-testid": "icon" }, args))); },
-};
-var templateObject_1, templateObject_2;

package/dist/src/core/Icon/map.d.ts

@@ -1,98 +0,0 @@
-import { FC } from "react";
-export interface IconNameToSizes {
-    bacteria: "xs" | "s" | "l" | "xl";
-    barChartHorizontal3: "xs" | "s";
-    barChartVertical3: "xs" | "s";
-    barChartVertical4: "xs" | "s";
-    book: "l" | "xl";
-    check: "xs" | "s";
-    checkCircle: "xs" | "s" | "l" | "xl";
-    chevronDown: "xs" | "s" | "l" | "xl";
-    chevronLeft: "xs" | "s" | "l" | "xl";
-    chevronRight: "xs" | "s" | "l" | "xl";
-    chevronUp: "xs" | "s" | "l" | "xl";
-    circlesOverlap: "xs" | "s" | "l" | "xl";
-    compass: "l" | "xl";
-    copy: "xs" | "s" | "l" | "xl";
-    dna: "l" | "xl";
-    document: "xs" | "s";
-    dotsHorizontal: "xs" | "s" | "l" | "xl";
-    download: "xs" | "s" | "l" | "xl";
-    edit: "xs" | "s" | "l" | "xl";
-    exclamationMarkCircle: "xs" | "s" | "l" | "xl";
-    exclamationMarkSpeechBubble: "l" | "xl";
-    eyeClosed: "xs" | "s";
-    eyeOpen: "xs" | "s";
-    filter: "xs" | "s";
-    flagCheck: "xs" | "s";
-    flagOutline: "xs" | "s";
-    flagQuestionmark: "xs" | "s";
-    flagXmark: "xs" | "s";
-    flask: "l" | "xl";
-    flaskPrivate: "l" | "xl";
-    flaskPublic: "l" | "xl";
-    gear: "xs" | "s";
-    globe: "xs" | "s";
-    globeBasic: "l" | "xl";
-    grid: "l" | "xl";
-    gridPrivate: "l" | "xl";
-    gridPublic: "l" | "xl";
-    house: "xs" | "s";
-    infoCircle: "xs" | "s" | "l" | "xl";
-    infoSpeechBubble: "l" | "xl";
-    lifeRing: "xs" | "s";
-    lightBulb: "xs" | "s" | "l" | "xl";
-    linesDashed3Solid1: "xs" | "s";
-    linesHorizontal: "xs" | "s" | "l" | "xl";
-    link: "xs" | "s";
-    list: "xs" | "s";
-    loading: "xs" | "s" | "l" | "xl";
-    lock: "xs" | "s" | "l" | "xl";
-    lockCircle: "xs" | "s";
-    minus: "xs" | "s";
-    open: "xs" | "s";
-    people: "xs" | "s" | "l" | "xl";
-    percentage: "xs" | "s";
-    person: "xs" | "s" | "l" | "xl";
-    pin: "xs" | "s";
-    pinLocation: "xs" | "s";
-    play: "l" | "xl";
-    plus: "xs" | "s";
-    plusCircle: "xs" | "s";
-    projectPrivate: "l" | "xl";
-    projectPublic: "l" | "xl";
-    puzzlePiece: "xs" | "s";
-    questionMark: "l" | "xl";
-    refresh: "xs" | "s" | "l" | "xl";
-    save: "l" | "xl";
-    search: "xs" | "s" | "l" | "xl";
-    searchLinesHorizontal: "xs" | "s" | "l" | "xl";
-    share: "l" | "xl";
-    slidersHorizontal: "l" | "xl";
-    speechBubbles: "l" | "xl";
-    squareOnDashedSquare: "l" | "xl";
-    starburst: "xs" | "s";
-    star: "l" | "xl";
-    table: "xs" | "s";
-    trashCan: "xs" | "s" | "l" | "xl";
-    treeDendogram: "l" | "xl";
-    treeHorizontal: "xs" | "s" | "l" | "xl";
-    treeHorizontalPrivate: "l" | "xl";
-    treeHorizontalPublic: "l" | "xl";
-    treeHorizontalTopRightFilled: "l" | "xl";
-    treeVertical: "xs" | "s";
-    triangleDown: "xs" | "s";
-    triangleLeft: "xs" | "s";
-    triangleRight: "xs" | "s";
-    triangleUp: "xs" | "s";
-    upload: "l" | "xl";
-    virus: "l" | "xl";
-    xMark: "xs" | "s" | "l" | "xl";
-    xMarkCircle: "xs" | "s";
-}
-type Props = Record<keyof IconNameToSizes, {
-    largeIcon: FC<CustomSVGProps> | null;
-    smallIcon: FC<CustomSVGProps> | null;
-}>;
-export declare const iconMap: Props;
-export {};