@czi-sds/components 15.1.1 → 15.3.0

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

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

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

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

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

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