@czi-sds/components 15.1.0 → 15.2.0

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

@@ -0,0 +1,238 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Test = exports.SuccessWarningScreenshotTest = exports.GrayPrimaryScreenshotTest = exports.ScreenshotTest = exports.LivePreview = exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var icons_material_1 = require("@mui/icons-material");
+var Icon_1 = __importDefault(require("../Icon"));
+var index_1 = __importDefault(require("./index"));
+var index_testUtils_1 = require("./index.testUtils");
+var Tag = function (props) {
+    var label = props.label;
+    return (0, jsx_runtime_1.jsx)(index_1.default, __assign({ label: label }, props));
+};
+var ICONS = [
+    undefined,
+    (0, jsx_runtime_1.jsx)(Icon_1.default, { sdsSize: "l", sdsIcon: "checkCircle", sdsType: "button" }, "checkCircle"),
+    (0, jsx_runtime_1.jsx)(Icon_1.default, { sdsSize: "l", sdsIcon: "loading", sdsType: "button" }, "loading"),
+    (0, jsx_runtime_1.jsx)(icons_material_1.WbSunny, {}, "WBSunny"),
+    (0, jsx_runtime_1.jsx)(icons_material_1.CheckCircleOutline, {}, "CheckCircleOutline"),
+];
+var SDS_STYLES = ["rounded", "square"];
+var PANEL_COLORS = [
+    "primary",
+    "info",
+    "success",
+    "warning",
+    "error",
+    "gray",
+    "beta",
+    ["#000000", "#C65FA7", "#FFD400"],
+];
+// use PANEL_COLORS to generate colors for ScreenshotTest ...
+var colors = PANEL_COLORS.slice(0, 8);
+// ... but for now it can't include "success" or "warning" colors because they fail a11y tests due to known design issues
+colors.splice(2, 2);
+var SDS_TYPES = ["primary", "secondary"];
+exports.default = {
+    argTypes: {
+        color: {
+            control: {
+                labels: [
+                    "primary",
+                    "info",
+                    "success",
+                    "warning",
+                    "error",
+                    "gray",
+                    "beta",
+                    "Custom colors for Label, Background, Icon",
+                ],
+                type: "select",
+            },
+            mapping: PANEL_COLORS,
+            options: Object.keys(PANEL_COLORS),
+        },
+        hover: {
+            control: { type: "boolean" },
+        },
+        icon: {
+            control: {
+                labels: [
+                    "No Icon",
+                    "SDS Check Circle",
+                    "SDS Loading",
+                    "MUI WbSunny",
+                    "MUI Check Circle",
+                ],
+                type: "select",
+            },
+            mapping: ICONS,
+            options: Object.keys(ICONS),
+        },
+        label: {
+            control: { type: "text" },
+            required: true,
+        },
+        sdsStyle: {
+            control: { type: "radio" },
+            options: ["rounded", "square"],
+        },
+        sdsType: {
+            control: { type: "radio" },
+            options: ["primary", "secondary"],
+        },
+    },
+    component: Tag,
+    title: "Tag",
+};
+// Default
+exports.Default = {
+    args: {
+        hover: true,
+        label: "Label",
+        sdsStyle: "square",
+        sdsType: "primary",
+    },
+};
+// Live Preview
+var livePreviewStyles = {
+    display: "inline-grid",
+    gridColumnGap: 24,
+    gridRowGap: 24,
+    gridTemplateColumns: "repeat(3, auto)",
+    gridTemplateRows: "repeat(2, auto)",
+};
+var LivePreviewDemo = function (props) {
+    var color = props.color, icon = props.icon, label = props.label;
+    return ((0, jsx_runtime_1.jsxs)("div", { style: livePreviewStyles, children: [(0, jsx_runtime_1.jsx)("div", { style: { gridArea: "1 / 1 / 2 / 2" }, children: (0, jsx_runtime_1.jsx)(index_1.default, __assign({}, props, { color: color, icon: undefined, label: label, sdsStyle: "square", sdsType: "primary" })) }), (0, jsx_runtime_1.jsx)("div", { style: { gridArea: "1 / 2 / 2 / 3" }, children: (0, jsx_runtime_1.jsx)(index_1.default, __assign({}, props, { color: color, icon: undefined, label: label, sdsStyle: "square", sdsType: "secondary" })) }), (0, jsx_runtime_1.jsx)("div", { style: { gridArea: "1 / 3 / 2 / 4" }, children: (0, jsx_runtime_1.jsx)(index_1.default, __assign({}, props, { color: color, icon: icon || (0, jsx_runtime_1.jsx)(Icon_1.default, { sdsSize: "l", sdsIcon: "checkCircle", sdsType: "button" }), label: label, sdsStyle: "square", sdsType: "secondary" })) }), (0, jsx_runtime_1.jsx)("div", { style: { gridArea: "2 / 1 / 3 / 2" }, children: (0, jsx_runtime_1.jsx)(index_1.default, __assign({}, props, { color: color, icon: undefined, label: label, sdsStyle: "rounded", sdsType: "primary" })) }), (0, jsx_runtime_1.jsx)("div", { style: { gridArea: "2 / 2 / 3 / 3" }, children: (0, jsx_runtime_1.jsx)(index_1.default, __assign({}, props, { color: color, icon: undefined, label: label, sdsStyle: "rounded", sdsType: "secondary" })) }), (0, jsx_runtime_1.jsx)("div", { style: { gridArea: "2 / 3 / 3 / 4" }, children: (0, jsx_runtime_1.jsx)(index_1.default, __assign({}, props, { color: color, icon: icon || (0, jsx_runtime_1.jsx)(Icon_1.default, { sdsSize: "l", sdsIcon: "checkCircle", sdsType: "button" }), label: label, sdsStyle: "rounded", sdsType: "secondary" })) })] }));
+};
+exports.LivePreview = {
+    args: {
+        label: "Label",
+    },
+    parameters: {
+        snapshot: {
+            skip: true,
+        },
+    },
+    render: function (args) { return (0, jsx_runtime_1.jsx)(LivePreviewDemo, __assign({}, args)); },
+};
+// Screenshot tests
+var SANS_SERIF_STYLE = { fontFamily: "sans-serif" };
+// Main Screenshot Test
+function ScreenshotTestDemo(props) {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", { style: SANS_SERIF_STYLE, children: "This story currently excludes Tags with both `sdsType` of `primary` and `color` of `gray`, and those with `color` of `success` and `primary`, because they do not pass the a11y tests. They have their own stories wherein the a11y tests are disabled until the a11y tests are updated to accommodate APCA (for gray x primary) or until the Tag colors are updated by design (for success and primary)." }), (0, jsx_runtime_1.jsx)(index_testUtils_1.CommonScreenshotTestDemo, { props: props, colors: colors, types: SDS_TYPES })] }));
+}
+exports.ScreenshotTest = {
+    args: {
+        color: colors[0],
+        hover: index_testUtils_1.HOVER_OPTIONS[0],
+        label: "Label",
+        sdsStyle: SDS_STYLES[0],
+        sdsType: SDS_TYPES[0],
+    },
+    parameters: {
+        axe: {
+            timeout: 10 * 1000,
+        },
+        controls: {
+            exclude: ["color", "hover", "label", "sdsStyle", "sdsType", "icon"],
+        },
+        snapshot: {
+            skip: true,
+        },
+    },
+    render: function (props) { return (0, jsx_runtime_1.jsx)(ScreenshotTestDemo, __assign({}, props)); },
+};
+// Gray Primary only
+// Tags with `color` of `gray` and `sdsType` of `primary` have their own story here because they do not currently pass the a11y tests. However, design has manually tested them with APCA, and they are accessible; our tests just do not use APCA yet. In the meantime, the a11y tests are currently disabled for this story, but enabled for the remaining colors in the ScreenshotTest story, so they can be tested properly.
+var GRAY_PRIMARY_COLORS = ["gray"];
+var GRAY_PRIMARY_TYPES = ["primary"];
+function GrayPrimaryScreenshotTestDemo(props) {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", { style: SANS_SERIF_STYLE, children: "Tags with `color` of `gray` and `sdsType` of `primary` have their own story here because they do not currently pass the a11y tests. However, design has manually tested them with APCA, and they are accessible; our tests just do not use APCA yet. In the meantime, the a11y tests are currently disabled for this story, but enabled for the remaining colors in the ScreenshotTest story, so they can be tested properly." }), (0, jsx_runtime_1.jsx)(index_testUtils_1.CommonScreenshotTestDemo, { props: props, colors: GRAY_PRIMARY_COLORS, types: GRAY_PRIMARY_TYPES })] }));
+}
+exports.GrayPrimaryScreenshotTest = {
+    args: {
+        color: colors[0],
+        hover: index_testUtils_1.HOVER_OPTIONS[0],
+        label: "Label",
+        sdsStyle: SDS_STYLES[0],
+        sdsType: SDS_TYPES[0],
+    },
+    parameters: {
+        axe: {
+            // `color-contrast` is disabled for this test because design tested it with APCA and determined these colors pass, our test just isn't able to use APCA yet; this color was pulled into its own story so the remaining colors can be tested separately
+            disabledRules: ["color-contrast"],
+            timeout: 10 * 1000,
+        },
+        controls: {
+            exclude: ["color", "hover", "label", "sdsStyle", "sdsType", "icon"],
+        },
+        snapshot: {
+            skip: true,
+        },
+    },
+    render: function (props) { return ((0, jsx_runtime_1.jsx)(GrayPrimaryScreenshotTestDemo, __assign({}, props))); },
+};
+// Success + Warning only
+// Tags with `color` of `success` or `warning` have their own story here because they do not currently pass the a11y tests. Design is aware of this and will be updating their colors. In the meantime, the a11y tests are currently disabled for this story, but enabled for the remaining colors in the ScreenshotTest story, so they can be tested properly.
+var SUCCESS_WARNING_PRIMARY_COLORS = [
+    "success",
+    "warning",
+];
+function SuccessWarningScreenshotTestDemo(props) {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", { style: SANS_SERIF_STYLE, children: "Tags with `color` of `success` or `warning`have their own story here because they do not currently pass the a11y tests. Design is aware of this and will be updating their colors. In the meantime the a11y tests are currently disabled for this story, but enabled for the remaining colors in the ScreenshotTest story, so they can be tested properly." }), (0, jsx_runtime_1.jsx)(index_testUtils_1.CommonScreenshotTestDemo, { props: props, colors: SUCCESS_WARNING_PRIMARY_COLORS, types: SDS_TYPES })] }));
+}
+exports.SuccessWarningScreenshotTest = {
+    args: {
+        color: colors[0],
+        hover: index_testUtils_1.HOVER_OPTIONS[0],
+        label: "Label",
+        sdsStyle: SDS_STYLES[0],
+        sdsType: SDS_TYPES[0],
+    },
+    parameters: {
+        axe: {
+            // `color-contrast` is disabled for this test because it is now a known issue and design will work on adjusting the colors so that they pass; these colors were pulled into their own story so the remaining colors can be tested separately
+            disabledRules: ["color-contrast"],
+            timeout: 10 * 1000,
+        },
+        controls: {
+            exclude: ["color", "hover", "label", "sdsStyle", "sdsType", "icon"],
+        },
+        snapshot: {
+            skip: true,
+        },
+    },
+    render: function (props) { return ((0, jsx_runtime_1.jsx)(SuccessWarningScreenshotTestDemo, __assign({}, props))); },
+};
+// Test
+var TestDemo = function (props) {
+    var label = props.label;
+    return (0, jsx_runtime_1.jsx)(index_1.default, __assign({ label: label }, props, { "data-testid": "tags" }));
+};
+exports.Test = {
+    args: {
+        label: "Label",
+    },
+    parameters: {
+        snapshot: {
+            skip: true,
+        },
+    },
+    render: function (args) { return (0, jsx_runtime_1.jsx)(TestDemo, __assign({}, args)); },
+};

package/dist/src/core/Tag/index.test.d.ts

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

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

@@ -0,0 +1,40 @@
+"use strict";
+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"));
+var Test = (0, react_1.composeStory)(index_stories_1.Test, index_stories_1.default);
+describe("<Tag />", function () {
+    (0, story_utils_1.generateSnapshots)(snapshotTestStoryFile);
+    it("renders Tags component", function () {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, {}));
+        var elements = react_2.screen.getAllByTestId("tags");
+        expect(elements.length).toBeTruthy();
+    });
+});

package/dist/src/core/Tag/index.testUtils.d.ts

@@ -0,0 +1,8 @@
+import { Args } from "@storybook/react";
+import { ExtraTagProps } from "./style";
+export declare const HOVER_OPTIONS: boolean[];
+export declare function CommonScreenshotTestDemo({ props, colors, types, }: {
+    props: Args;
+    colors: ExtraTagProps["tagColor"][];
+    types: ExtraTagProps["sdsType"][];
+}): JSX.Element;

package/dist/src/core/Tag/index.testUtils.js

@@ -0,0 +1,108 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommonScreenshotTestDemo = exports.HOVER_OPTIONS = void 0;
+var react_1 = require("react");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Icon_1 = __importDefault(require("../Icon"));
+var index_1 = __importDefault(require("./index"));
+var SDS_STYLES = ["rounded", "square"];
+var DISPLAY_CONTENTS = {
+    display: "contents",
+};
+var MID_LABEL = {
+    borderStyle: "solid none none none",
+    gridColumn: "1 / 6",
+    justifySelf: "stretch",
+    paddingTop: 10,
+};
+var ICON_OPTIONS = [
+    undefined,
+    (0, jsx_runtime_1.jsx)(Icon_1.default, { sdsSize: "l", sdsIcon: "checkCircle", sdsType: "button" }, "checkCircle"),
+];
+exports.HOVER_OPTIONS = [true, false];
+function CommonScreenshotTestDemo(_a) {
+    var props = _a.props, colors = _a.colors, types = _a.types;
+    // loop through all SDS_STYLES
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: SDS_STYLES.map(function (sdsStyle) {
+            return ((0, jsx_runtime_1.jsx)(TagStyle, { colors: colors, types: types, props: props, sdsStyle: sdsStyle }, sdsStyle));
+        }) }));
+}
+exports.CommonScreenshotTestDemo = CommonScreenshotTestDemo;
+// loop through all COLORS + create headers for SDS_STYLES
+function TagStyle(_a) {
+    var colors = _a.colors, types = _a.types, sdsStyle = _a.sdsStyle, props = _a.props;
+    var LEVEL_STYLE = {
+        columnGap: "20px",
+        display: "inline-grid",
+        fontFamily: "sans-serif",
+        marginRight: "50px",
+    };
+    var LABEL_STYLE = {
+        fontSize: "2em",
+        gridColumn: "1 / 6",
+        marginBottom: 0,
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { style: LEVEL_STYLE, children: [(0, jsx_runtime_1.jsxs)("p", { style: LABEL_STYLE, children: ["Style: ", (0, jsx_runtime_1.jsx)("b", { children: sdsStyle })] }), colors.map(function (color) {
+                return ((0, jsx_runtime_1.jsx)(TagColor, { sdsStyle: sdsStyle, color: color, types: types, props: props }, String(color)));
+            })] }));
+}
+// loop through all SDS_TYPES + create headers for COLORS
+function TagColor(_a) {
+    var sdsStyle = _a.sdsStyle, color = _a.color, types = _a.types, props = _a.props;
+    var LABEL_STYLE = __assign(__assign({}, MID_LABEL), { borderWidth: "5px", fontSize: "1.5em", margin: "20px 0 0 0" });
+    return ((0, jsx_runtime_1.jsxs)("div", { style: DISPLAY_CONTENTS, children: [(0, jsx_runtime_1.jsxs)("p", { style: LABEL_STYLE, children: ["Color: ", (0, jsx_runtime_1.jsx)("b", { children: typeof color === "string" ? color : "custom" })] }), types.map(function (sdsType) {
+                // exclude gray primary from rendering in the main ScreenshotTest story (types.includes("secondary")), but allow gray primary to render in GrayPrimaryScreenshotTest story
+                return types.includes("secondary") &&
+                    sdsType === "primary" &&
+                    color === "gray" ? null : ((0, jsx_runtime_1.jsx)(TagType, { sdsStyle: sdsStyle, color: color, sdsType: sdsType, props: props }, sdsType));
+            })] }));
+}
+// loop through all ICON_OPTIONS + create headers for SDS_TYPES
+function TagType(_a) {
+    var sdsStyle = _a.sdsStyle, color = _a.color, sdsType = _a.sdsType, props = _a.props;
+    var LABEL_STYLE = __assign(__assign({}, MID_LABEL), { borderWidth: "2px", fontSize: "1.17em", margin: "20px 0" });
+    return ((0, jsx_runtime_1.jsxs)("div", { style: DISPLAY_CONTENTS, children: [(0, jsx_runtime_1.jsxs)("p", { style: LABEL_STYLE, children: ["Type: ", (0, jsx_runtime_1.jsx)("b", { children: sdsType })] }), ICON_OPTIONS.map(function (icon) {
+                return ((0, jsx_runtime_1.jsx)(TagIcon, { sdsStyle: sdsStyle, color: color, sdsType: sdsType, icon: icon, props: props }, String(icon)));
+            })] }));
+}
+// loop through all HOVER_OPTIONS + create headers for ICON_OPTIONS
+function TagIcon(_a) {
+    var sdsStyle = _a.sdsStyle, color = _a.color, sdsType = _a.sdsType, icon = _a.icon, props = _a.props;
+    var LABEL_STYLE = __assign(__assign({}, MID_LABEL), { alignSelf: "end", borderWidth: "1px", fontSize: "0.83em", margin: "0 0 5px 0" });
+    return ((0, jsx_runtime_1.jsxs)("div", { style: DISPLAY_CONTENTS, children: [(0, jsx_runtime_1.jsxs)("p", { style: LABEL_STYLE, children: ["Icon: ", (0, jsx_runtime_1.jsx)("b", { children: icon ? "yes" : "no" })] }), exports.HOVER_OPTIONS.map(function (hover) {
+                return ((0, react_1.createElement)(TagState, __assign({}, props, { sdsStyle: sdsStyle, color: color, sdsType: sdsType, icon: icon, hover: hover, key: String(hover) })));
+            })] }));
+}
+// loop through all PSEUDO_STATES + create headers for HOVER_OPTIONS, PSEUDO_STATES
+function TagState(props) {
+    var sdsStyle = props.sdsStyle, color = props.color, sdsType = props.sdsType, icon = props.icon, hover = props.hover;
+    var PSEUDO_STATES = ["default", "hover", "active", "focus-visible"];
+    var HOVER_LEVEL = {
+        display: "contents",
+    };
+    var STATE_LABEL = {
+        fontSize: "0.67em",
+        margin: "10px 0",
+    };
+    var STATE_LEVEL = {
+        marginBottom: 10,
+    };
+    var LABEL = "Label";
+    return ((0, jsx_runtime_1.jsx)("div", { style: HOVER_LEVEL, children: PSEUDO_STATES.map(function (state) {
+            return ((0, jsx_runtime_1.jsx)("div", { style: STATE_LEVEL, children: (hover === true || (hover === false && state === "default")) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("p", { style: STATE_LABEL, children: [hover ? "State: " : "Hoverable: ", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("b", { children: hover ? state : "false" })] }), (0, react_1.createElement)(index_1.default, __assign({}, props, { label: LABEL, "data-testid": "tag", sdsStyle: sdsStyle, color: color, sdsType: sdsType, icon: icon, hover: hover, className: hover ? "pseudo-".concat(state) : "pseudo-default", key: state }))] })) }, state));
+        }) }));
+}

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

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { CommonThemeProps } from "../styles";
+export type SdsTagColorType = "primary" | "info" | "success" | "warning" | "error" | "gray" | "beta" | [string, string] | [string, string, string];
+export interface ExtraTagProps extends CommonThemeProps {
+    hover?: boolean;
+    sdsType?: "primary" | "secondary";
+    sdsStyle?: "square" | "rounded";
+    tagColor?: SdsTagColorType;
+    icon?: JSX.Element;
+}
+export declare const StyledTag: import("@emotion/styled").StyledComponent<{
+    avatar?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    children?: null | undefined;
+    classes?: Partial<import("@mui/material").ChipClasses> | undefined;
+    clickable?: boolean | undefined;
+    color?: import("@mui/types").OverridableStringUnion<"primary" | "secondary" | "default" | "error" | "info" | "success" | "warning", import("@mui/material").ChipPropsColorOverrides> | undefined;
+    deleteIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    disabled?: boolean | undefined;
+    icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    label?: import("react").ReactNode;
+    onDelete?: ((event: any) => void) | undefined;
+    size?: import("@mui/types").OverridableStringUnion<"small" | "medium", import("@mui/material").ChipPropsSizeOverrides> | undefined;
+    skipFocusWhenDisabled?: boolean | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    variant?: import("@mui/types").OverridableStringUnion<"outlined" | "filled", import("@mui/material").ChipPropsVariantOverrides> | undefined;
+} & 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 | "children" | "sx" | "variant" | "color" | "disabled" | "label" | "tabIndex" | "size" | "icon" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & ExtraTagProps, {}, {}>;

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

@@ -0,0 +1,100 @@
+"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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledTag = 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 withoutIcon = function (props) {
+    var spacings = (0, styles_2.getSpaces)(props);
+    var iconSizes = (0, styles_2.getIconSizes)(props);
+    return (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    height: unset;\n    margin: 0 ", "px ", "px 0;\n\n    .MuiChip-label {\n      ", "\n      padding: 0;\n    }\n\n    .MuiChip-deleteIcon {\n      ", "\n      color: white;\n      margin: 0 0 0 ", "px;\n      height: ", "px;\n      width: ", "px;\n    }\n  "], ["\n    height: unset;\n    margin: 0 ", "px ", "px 0;\n\n    .MuiChip-label {\n      ", "\n      padding: 0;\n    }\n\n    .MuiChip-deleteIcon {\n      ", "\n      color: white;\n      margin: 0 0 0 ", "px;\n      height: ", "px;\n      width: ", "px;\n    }\n  "])), spacings === null || spacings === void 0 ? void 0 : spacings.xxs, spacings === null || spacings === void 0 ? void 0 : spacings.xs, (0, styles_2.fontBodyXxxs)(props), (0, styles_2.fontHeaderXs)(props), spacings === null || spacings === void 0 ? void 0 : spacings.xxs, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width);
+};
+var withIcon = function (props) {
+    var spacings = (0, styles_2.getSpaces)(props);
+    var iconSizes = (0, styles_2.getIconSizes)(props);
+    return (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    height: unset;\n    margin: 0 ", "px ", "px 0;\n\n    .MuiChip-label {\n      ", "\n      padding: 0;\n    }\n\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n      padding-right: ", "px;\n      margin: 0 0 0 -", "px;\n    }\n\n    .MuiChip-deleteIcon {\n      ", "\n      color: white;\n      margin: 0 0 0 ", "px;\n      height: ", "px;\n      width: ", "px;\n    }\n  "], ["\n    height: unset;\n    margin: 0 ", "px ", "px 0;\n\n    .MuiChip-label {\n      ", "\n      padding: 0;\n    }\n\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n      padding-right: ", "px;\n      margin: 0 0 0 -", "px;\n    }\n\n    .MuiChip-deleteIcon {\n      ", "\n      color: white;\n      margin: 0 0 0 ", "px;\n      height: ", "px;\n      width: ", "px;\n    }\n  "])), spacings === null || spacings === void 0 ? void 0 : spacings.xxs, spacings === null || spacings === void 0 ? void 0 : spacings.xs, (0, styles_2.fontBodyXs)(props), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.width, spacings === null || spacings === void 0 ? void 0 : spacings.xxs, spacings === null || spacings === void 0 ? void 0 : spacings.xxxs, (0, styles_2.fontHeaderXs)(props), spacings === null || spacings === void 0 ? void 0 : spacings.xxs, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width);
+};
+var rounded = function (props) {
+    var corners = (0, styles_2.getCorners)(props);
+    var spacings = (0, styles_2.getSpaces)(props);
+    var icon = props.icon;
+    return (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    border-radius: ", "px;\n    padding: ", ";\n\n    &:after {\n      border-radius: ", "px;\n    }\n  "], ["\n    border-radius: ", "px;\n    padding: ", ";\n\n    &:after {\n      border-radius: ", "px;\n    }\n  "])), corners === null || corners === void 0 ? void 0 : corners.l, icon
+        ? "".concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px")
+        : "".concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxxs, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px"), corners === null || corners === void 0 ? void 0 : corners.l);
+};
+var square = function (props) {
+    var corners = (0, styles_2.getCorners)(props);
+    var spacings = (0, styles_2.getSpaces)(props);
+    var icon = props.icon;
+    return (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    border-radius: ", "px;\n    padding: ", ";\n\n    &:after {\n      border-radius: ", "px;\n    }\n  "], ["\n    border-radius: ", "px;\n    padding: ", ";\n\n    &:after {\n      border-radius: ", "px;\n    }\n  "])), corners === null || corners === void 0 ? void 0 : corners.m, icon
+        ? "".concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px")
+        : "".concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxxs, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px"), corners === null || corners === void 0 ? void 0 : corners.m);
+};
+var withHover = function () {
+    return (0, react_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    &:hover {\n      cursor: pointer;\n    }\n\n    &:hover,\n    &:focus-visible {\n      color: white;\n    }\n  "], ["\n    &:hover {\n      cursor: pointer;\n    }\n\n    &:hover,\n    &:focus-visible {\n      color: white;\n    }\n  "])));
+};
+var primary = function (props) {
+    return createTypeCss(props, "primary");
+};
+var secondary = function (props) {
+    return createTypeCss(props, "secondary");
+};
+function createTypeCss(props, type) {
+    var themeColors = (0, styles_2.getColors)(props);
+    var intent = typeof props.tagColor === "string" ? props.tagColor : "primary";
+    var colors = Array.isArray(props.tagColor) ? __spreadArray([], props.tagColor, true) : [];
+    var typeToColors = {
+        primary: {
+            background: colors.length >= 2 ? colors[1] : themeColors === null || themeColors === void 0 ? void 0 : themeColors[intent][400],
+            backgroundClicked: colors.length >= 2
+                ? (0, material_1.darken)(colors[1], 0.3)
+                : themeColors === null || themeColors === void 0 ? void 0 : themeColors[intent][600],
+            backgroundHover: colors.length >= 2
+                ? (0, material_1.darken)(colors[1], 0.15)
+                : themeColors === null || themeColors === void 0 ? void 0 : themeColors[intent][500],
+            iconColor: colors.length > 2 ? colors[2] : "white",
+            label: colors.length ? colors[0] : "white",
+        },
+        secondary: {
+            background: colors.length >= 2 ? colors[1] : themeColors === null || themeColors === void 0 ? void 0 : themeColors[intent][200],
+            backgroundClicked: colors.length >= 2
+                ? (0, material_1.darken)(colors[1], 0.3)
+                : themeColors === null || themeColors === void 0 ? void 0 : themeColors[intent][600],
+            backgroundHover: colors.length >= 2
+                ? (0, material_1.darken)(colors[1], 0.15)
+                : themeColors === null || themeColors === void 0 ? void 0 : themeColors[intent][500],
+            iconColor: colors.length > 2 ? colors[2] : themeColors === null || themeColors === void 0 ? void 0 : themeColors[intent][400],
+            label: colors.length ? colors[0] : themeColors === null || themeColors === void 0 ? void 0 : themeColors[intent][600],
+        },
+    };
+    var typeColors = typeToColors[type];
+    return (0, react_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    background-color: ", ";\n    position: relative;\n\n    .MuiChip-label {\n      color: ", ";\n    }\n\n    svg {\n      fill: ", ";\n    }\n\n    &:hover,\n    &:active,\n    &:focus {\n      .MuiChip-label {\n        color: white;\n      }\n\n      svg {\n        fill: white;\n      }\n    }\n\n    &:hover {\n      background-color: ", ";\n    }\n\n    &:active {\n      background-color: ", ";\n    }\n\n    &:focus {\n      background-color: ", ";\n    }\n\n    &:focus:hover {\n      background-color: ", ";\n    }\n\n    &:focus:active {\n      background-color: ", ";\n    }\n  "], ["\n    background-color: ", ";\n    position: relative;\n\n    .MuiChip-label {\n      color: ", ";\n    }\n\n    svg {\n      fill: ", ";\n    }\n\n    &:hover,\n    &:active,\n    &:focus {\n      .MuiChip-label {\n        color: white;\n      }\n\n      svg {\n        fill: white;\n      }\n    }\n\n    &:hover {\n      background-color: ", ";\n    }\n\n    &:active {\n      background-color: ", ";\n    }\n\n    &:focus {\n      background-color: ", ";\n    }\n\n    &:focus:hover {\n      background-color: ", ";\n    }\n\n    &:focus:active {\n      background-color: ", ";\n    }\n  "])), typeColors.background, typeColors.label, typeColors.iconColor, typeColors.backgroundHover, typeColors.backgroundClicked, typeColors.background, typeColors.backgroundHover, typeColors.backgroundClicked);
+}
+var typeToCss = {
+    primary: primary,
+    secondary: secondary,
+};
+var doNotForwardProps = ["sdsType", "sdsStyle", "tagColor", "hover"];
+exports.StyledTag = (0, styles_1.styled)(material_1.Chip, {
+    shouldForwardProp: function (prop) { return !doNotForwardProps.includes(prop); },
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  border: none;\n\n  ", "\n"], ["\n  border: none;\n\n  ", "\n"])), function (props) {
+    var _a = props.hover, hover = _a === void 0 ? true : _a, sdsType = props.sdsType, sdsStyle = props.sdsStyle, icon = props.icon;
+    var isRounded = sdsStyle === "rounded";
+    var type = sdsType || "primary";
+    return (0, react_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n      ", "\n      ", "\n    "])), icon ? withIcon(props) : withoutIcon(props), typeToCss[type](props), isRounded ? rounded(props) : square(props), hover ? withHover() : "pointer-events: none;");
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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

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

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var components_1 = require("@czi-sds/components");
+var utils_1 = require("src/common/utils");
+var TagFilterNameSpaceTest = function (props) {
+    return (0, jsx_runtime_1.jsx)(components_1.TagFilter, { label: "Label", onDelete: utils_1.noop });
+};

package/dist/src/core/TagFilter/__snapshots__/index.test.js.snap

@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<TagFilter /> Default story renders snapshot 1`] = `
+<div
+  style="display: inline-grid; grid-template-columns: repeat(1, 1fr); grid-template-rows: repeat(1, 1fr);"
+>
+  <div
+    style="grid-area: 1 / 1 / 1 / 2;"
+  >
+    <button
+      class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium Mui-disabled MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1qnokts-MuiButtonBase-root-MuiButton-root"
+      disabled=""
+      tabindex="-1"
+      type="button"
+    >
+      Delete the tag by clicking on its icon
+    </button>
+  </div>
+  <div
+    style="grid-area: 2 / 1 / 2 / 2;"
+  >
+    <div
+      class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-deletable MuiChip-deletableColorPrimary MuiChip-filledPrimary css-4l3rqc-MuiButtonBase-root-MuiChip-root"
+      role="button"
+      tabindex="0"
+    >
+      <span
+        class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
+      >
+        TagFilter
+      </span>
+      <svg
+        aria-hidden="true"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiChip-deleteIcon MuiChip-deleteIconMedium MuiChip-deleteIconColorPrimary MuiChip-deleteIconFilledColorPrimary css-i4bv87-MuiSvgIcon-root"
+        data-testid="ClearIcon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,12 @@
+import { ChipProps } from "@mui/material";
+import React from "react";
+export interface SdsTagFilterProps extends Omit<ChipProps, "color" | "variant" | "nonce" | "rev" | "rel" | "autoFocus" | "content"> {
+    label: string;
+    onDelete: React.EventHandler<any>;
+}
+export type TagFilterProps = SdsTagFilterProps;
+/**
+ * @see https://mui.com/material-ui/react-chip/
+ */
+declare const TagFilter: (props: SdsTagFilterProps) => JSX.Element;
+export default TagFilter;

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

@@ -0,0 +1,23 @@
+"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 icons_material_1 = require("@mui/icons-material");
+var style_1 = require("./style");
+/**
+ * @see https://mui.com/material-ui/react-chip/
+ */
+var TagFilter = function (props) {
+    return (0, jsx_runtime_1.jsx)(style_1.StyledTag, __assign({ deleteIcon: (0, jsx_runtime_1.jsx)(icons_material_1.Clear, {}) }, props));
+};
+exports.default = TagFilter;