@czi-sds/components 15.1.0 → 15.2.0

package/dist/src/common/helpers/scrollStop.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Custom hook that listens for scroll stop events and triggers a callback function.
+ *
+ * @param callback - The callback function to be executed when scrolling stops.
+ * @param timeout - The duration (in milliseconds) after which the callback is triggered when scrolling stops. Default is 50ms.
+ */
+declare const useScrollStopListener: (callback: () => void, timeout?: number) => void;
+export default useScrollStopListener;

package/dist/src/common/helpers/scrollStop.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+/**
+ * Creates a scroll stop listener with a given callback and timeout.
+ *
+ * @param callback - The callback function to be executed when scrolling stops.
+ * @param timeout - The duration (in milliseconds) after which the callback is triggered when scrolling stops. Default is 50ms.
+ * @returns A function to destroy the scroll stop listener and clean up the event listener.
+ */
+var createScrollStopListener = function (callback, timeout) {
+    if (timeout === void 0) { timeout = 50; }
+    var removed = false;
+    var handle = null;
+    var onScroll = function () {
+        if (handle) {
+            clearTimeout(handle);
+        }
+        handle = setTimeout(callback, timeout);
+    };
+    // Attach scroll event listener to the specified element
+    document.addEventListener("scroll", onScroll, true);
+    return function () {
+        if (removed) {
+            return;
+        }
+        removed = true;
+        if (handle) {
+            clearTimeout(handle);
+        }
+        // Remove the scroll event listener from the element
+        document.removeEventListener("scroll", onScroll);
+    };
+};
+/**
+ * Custom hook that listens for scroll stop events and triggers a callback function.
+ *
+ * @param callback - The callback function to be executed when scrolling stops.
+ * @param timeout - The duration (in milliseconds) after which the callback is triggered when scrolling stops. Default is 50ms.
+ */
+var useScrollStopListener = function (callback, timeout) {
+    if (timeout === void 0) { timeout = 50; }
+    var callbackRef = (0, react_1.useRef)();
+    callbackRef.current = callback;
+    (0, react_1.useEffect)(function () {
+        var destroyListener = createScrollStopListener(function () {
+            if (callbackRef.current) {
+                callbackRef.current();
+            }
+        }, timeout);
+        return function () { return destroyListener(); };
+    }, []);
+};
+exports.default = useScrollStopListener;

package/dist/src/common/storybookConstants.d.ts

@@ -0,0 +1,3 @@
+export interface Template {
+    args: Record<string, never>;
+}

package/dist/src/common/storybookConstants.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/common/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const noop: () => void;
+export declare const toKebabCase: (str: string) => string;

package/dist/src/common/utils.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toKebabCase = exports.noop = void 0;
+var noop = function () { };
+exports.noop = noop;
+var toKebabCase = function (str) {
+    return str.replace(/[\s_]+/g, "-").toLowerCase();
+};
+exports.toKebabCase = toKebabCase;

package/dist/src/common/warnings.d.ts

@@ -0,0 +1,10 @@
+export declare enum SDSWarningTypes {
+    ButtonMissingSDSProps = "buttonMissingProps",
+    ChipDeprecated = "chipDeprecated",
+    MenuSelectDeprecated = "menuSelectDeprecated",
+    ButtonIconMediumSize = "buttonIconMediumSize",
+    TooltipSubtitle = "tooltipSubtitle",
+    TooltipWidth = "tooltipWidth",
+    TooltipInverted = "tooltipInverted"
+}
+export declare const showWarningIfFirstOccurence: (warningType: SDSWarningTypes) => void;

package/dist/src/common/warnings.js

@@ -0,0 +1,60 @@
+"use strict";
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.showWarningIfFirstOccurence = exports.SDSWarningTypes = void 0;
+var SDSWarningTypes;
+(function (SDSWarningTypes) {
+    SDSWarningTypes["ButtonMissingSDSProps"] = "buttonMissingProps";
+    SDSWarningTypes["ChipDeprecated"] = "chipDeprecated";
+    SDSWarningTypes["MenuSelectDeprecated"] = "menuSelectDeprecated";
+    SDSWarningTypes["ButtonIconMediumSize"] = "buttonIconMediumSize";
+    SDSWarningTypes["TooltipSubtitle"] = "tooltipSubtitle";
+    SDSWarningTypes["TooltipWidth"] = "tooltipWidth";
+    SDSWarningTypes["TooltipInverted"] = "tooltipInverted";
+})(SDSWarningTypes || (exports.SDSWarningTypes = SDSWarningTypes = {}));
+var SDS_WARNINGS = (_a = {},
+    _a[SDSWarningTypes.ButtonMissingSDSProps] = {
+        hasWarned: false,
+        message: "Warning: Buttons without sdsStyle or sdsType props will be deprecated.",
+    },
+    _a[SDSWarningTypes.ChipDeprecated] = {
+        hasWarned: false,
+        message: "Warning: <Chip /> will be deprecated and replaced with <Tag />",
+    },
+    _a[SDSWarningTypes.MenuSelectDeprecated] = {
+        hasWarned: false,
+        message: "Warning: MenuSelect will be deprecated and replaced with <DropdownMenu />",
+    },
+    _a[SDSWarningTypes.ButtonIconMediumSize] = {
+        hasWarned: false,
+        message: "Warning: A medium size ButtonIcon can only be of type tertiary!",
+    },
+    _a[SDSWarningTypes.TooltipSubtitle] = {
+        hasWarned: false,
+        message: "Warning: The 'subtitle' text is only available for dark tooltips!",
+    },
+    _a[SDSWarningTypes.TooltipWidth] = {
+        hasWarned: false,
+        message: "Warning: The 'wide' width is only available for light tooltips!",
+    },
+    _a[SDSWarningTypes.TooltipInverted] = {
+        hasWarned: false,
+        message: "Warning: Tooltips using the inverted prop will be deprecated. Please use sdsStyle: 'dark' | 'light' instead!",
+    },
+    _a);
+var showWarningIfFirstOccurence = function (warningType) {
+    if (!(warningType in SDS_WARNINGS)) {
+        // add undefined warning to prevent multiple warnings
+        SDS_WARNINGS[warningType] = {
+            hasWarned: false,
+            message: "Warning: SDSWarningType ".concat(warningType, " is not defined in SDS_WARNINGS"),
+        };
+    }
+    if (SDS_WARNINGS[warningType].hasWarned) {
+        return;
+    }
+    // eslint-disable-next-line no-console
+    console.warn(SDS_WARNINGS[warningType].message);
+    SDS_WARNINGS[warningType].hasWarned = true;
+};
+exports.showWarningIfFirstOccurence = showWarningIfFirstOccurence;

package/dist/src/common/warnings.test.d.ts

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

package/dist/src/common/warnings.test.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var warnings_1 = require("src/common/warnings");
+describe("showWarningIfFirstOccurence", function () {
+    var consoleWarnSpy;
+    beforeEach(function () {
+        consoleWarnSpy = jest.spyOn(console, "warn");
+    });
+    it("shows warning on first call", function () {
+        (0, warnings_1.showWarningIfFirstOccurence)(warnings_1.SDSWarningTypes.ChipDeprecated);
+        expect(consoleWarnSpy).toHaveBeenCalledTimes(1);
+    });
+    it("does not show warning on subsequent calls", function () {
+        (0, warnings_1.showWarningIfFirstOccurence)(warnings_1.SDSWarningTypes.ChipDeprecated);
+        (0, warnings_1.showWarningIfFirstOccurence)(warnings_1.SDSWarningTypes.ChipDeprecated);
+        (0, warnings_1.showWarningIfFirstOccurence)(warnings_1.SDSWarningTypes.ChipDeprecated);
+        expect(consoleWarnSpy).toHaveBeenCalledTimes(1);
+    });
+});

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

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

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

@@ -0,0 +1,18 @@
+"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 components_1 = require("@czi-sds/components");
+var AccordionNameSpaceTest = function (props) {
+    return ((0, jsx_runtime_1.jsx)(components_1.Accordion, __assign({}, props, { useDivider: true, togglePosition: "right", id: "accordion-id" })));
+};

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

@@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Accordion /> Default story renders snapshot 1`] = `
+<div
+  class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root MuiAccordion-gutters css-1x3fmw6-MuiPaper-root-MuiAccordion-root"
+>
+  <div
+    aria-controls="undefined-header-panel-content"
+    aria-expanded="false"
+    class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters css-q39ari-MuiButtonBase-root-MuiAccordionSummary-root"
+    id="undefined-header"
+    role="button"
+    tabindex="0"
+  >
+    <div
+      class="MuiAccordionSummary-content MuiAccordionSummary-contentGutters css-o4b71y-MuiAccordionSummary-content"
+    >
+      Accordion Header
+    </div>
+    <div
+      class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
+    >
+      <div
+        class="css-1ft6wgl"
+      >
+        <svg
+          aria-hidden="true"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-25m3b5-MuiSvgIcon-root"
+          data-jest-file-name="IconChevronDownSmall.svg"
+          data-jest-svg-name="IconChevronDownSmall"
+          data-testid="IconChevronDownSmall"
+          fillcontrast="white"
+          focusable="false"
+          viewBox="0 0 14 14"
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
+    style="min-height: 0px;"
+  >
+    <div
+      class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
+    >
+      <div
+        class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
+      >
+        <div
+          aria-labelledby="undefined-header"
+          class="MuiAccordion-region"
+          role="region"
+        >
+          <div
+            class="MuiAccordionDetails-root css-rnrgul-MuiAccordionDetails-root"
+          >
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/dist/src/core/Accordion/components/AccordionDetails/index.d.ts

@@ -0,0 +1,3 @@
+import { AccordionDetailsProps } from "@mui/material";
+declare const AccordionDetails: (props: AccordionDetailsProps) => JSX.Element;
+export default AccordionDetails;

package/dist/src/core/Accordion/components/AccordionDetails/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var style_1 = require("./style");
+var AccordionDetails = function (props) {
+    var children = props.children;
+    return (0, jsx_runtime_1.jsx)(style_1.StyledAccordionDetails, { children: children });
+};
+exports.default = AccordionDetails;

package/dist/src/core/Accordion/components/AccordionDetails/style.d.ts

@@ -0,0 +1,2 @@
+import { CommonThemeProps } from "src/core/styles";
+export declare const StyledAccordionDetails: import("@emotion/styled").StyledComponent<import("@mui/material").AccordionDetailsProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & CommonThemeProps, {}, {}>;

package/dist/src/core/Accordion/components/AccordionDetails/style.js

@@ -0,0 +1,16 @@
+"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.StyledAccordionDetails = 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("src/core/styles");
+exports.StyledAccordionDetails = (0, styles_1.styled)(material_1.AccordionDetails)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), styles_2.fontBodyS, function (props) {
+    var spaces = (0, styles_2.getSpaces)(props);
+    return (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding: ", "px;\n      padding-top: ", "px;\n    "], ["\n      padding: ", "px;\n      padding-top: ", "px;\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxs);
+});
+var templateObject_1, templateObject_2;

package/dist/src/core/Accordion/components/AccordionHeader/index.d.ts

@@ -0,0 +1,7 @@
+import { AccordionSummaryProps as RawAccordionSummaryProps } from "@mui/material";
+export interface SdsAccordionHeaderProps {
+    subtitle?: string;
+}
+export type AccordionHeaderProps = RawAccordionSummaryProps & SdsAccordionHeaderProps;
+declare const AccordionHeader: (props: AccordionHeaderProps) => JSX.Element;
+export default AccordionHeader;

package/dist/src/core/Accordion/components/AccordionHeader/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Icon_1 = __importDefault(require("src/core/Icon"));
+var style_1 = require("./style");
+var AccordionHeader = function (props) {
+    var children = props.children, id = props.id, subtitle = props.subtitle;
+    return ((0, jsx_runtime_1.jsxs)(style_1.StyledAccordionHeader, { "aria-controls": "".concat(id, "-panel-content"), id: id, expandIcon: (0, jsx_runtime_1.jsx)(Icon_1.default, { sdsIcon: "chevronDown", sdsSize: "s", sdsType: "static" }), children: [children, subtitle && (0, jsx_runtime_1.jsx)(style_1.StyledSubtitle, { children: subtitle })] }));
+};
+exports.default = AccordionHeader;

package/dist/src/core/Accordion/components/AccordionHeader/style.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { CommonThemeProps } from "src/core/styles";
+export declare const StyledAccordionHeader: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").AccordionSummaryClasses> | undefined;
+    expandIcon?: import("react").ReactNode;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & 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" | "disabled" | "tabIndex" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "expandIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & CommonThemeProps, {}, {}>;
+export declare const StyledSubtitle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & CommonThemeProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;

package/dist/src/core/Accordion/components/AccordionHeader/style.js

@@ -0,0 +1,21 @@
+"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.StyledSubtitle = exports.StyledAccordionHeader = 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("src/core/styles");
+exports.StyledAccordionHeader = (0, styles_1.styled)(material_1.AccordionSummary)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), styles_2.fontHeaderS, function (props) {
+    var spaces = (0, styles_2.getSpaces)(props);
+    var colors = (0, styles_2.getColors)(props);
+    return (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding: ", "px;\n      min-height: 40px;\n      align-items: flex-start;\n      box-sizing: border-box;\n\n      &.Mui-expanded {\n        min-height: 40px;\n      }\n\n      .MuiAccordionSummary-content {\n        margin: 0;\n        flex-direction: column;\n\n        &.Mui-expanded {\n          margin: 0;\n        }\n      }\n\n      .MuiAccordionSummary-expandIconWrapper {\n        padding: 0px;\n        margin-right: 0;\n        margin-left: ", "px;\n        svg {\n          color: ", ";\n        }\n      }\n    "], ["\n      padding: ", "px;\n      min-height: 40px;\n      align-items: flex-start;\n      box-sizing: border-box;\n\n      &.Mui-expanded {\n        min-height: 40px;\n      }\n\n      .MuiAccordionSummary-content {\n        margin: 0;\n        flex-direction: column;\n\n        &.Mui-expanded {\n          margin: 0;\n        }\n      }\n\n      .MuiAccordionSummary-expandIconWrapper {\n        padding: 0px;\n        margin-right: 0;\n        margin-left: ", "px;\n        svg {\n          color: ", ";\n        }\n      }\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m, colors === null || colors === void 0 ? void 0 : colors.gray[500]);
+});
+exports.StyledSubtitle = (0, styles_1.styled)("p")(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), styles_2.fontBodyXxs, function (props) {
+    var colors = (0, styles_2.getColors)(props);
+    return (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      color: ", ";\n      margin: 0;\n    "], ["\n      color: ", ";\n      margin: 0;\n    "])), colors === null || colors === void 0 ? void 0 : colors.gray[500]);
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -0,0 +1,12 @@
+import { AccordionProps as RawAccordionProps } from "@mui/material";
+import React from "react";
+import AccordionDetails from "./components/AccordionDetails";
+import AccordionHeader from "./components/AccordionHeader";
+import { AccordionExtraProps } from "./style";
+export { AccordionDetails, AccordionHeader };
+export type AccordionProps = Omit<RawAccordionProps, "nonce" | "rev" | "rel" | "autoFocus" | "content"> & AccordionExtraProps;
+/**
+ * @see https://mui.com/material-ui/react-accordion/
+ */
+declare const Accordion: React.ForwardRefExoticComponent<Pick<AccordionProps, keyof import("@mui/material/OverridableComponent").CommonProps | "onChange" | "children" | "elevation" | "square" | "sx" | "variant" | "color" | "translate" | "defaultExpanded" | "disabled" | "disableGutters" | "expanded" | "TransitionComponent" | "TransitionProps" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | keyof AccordionExtraProps> & React.RefAttributes<HTMLDivElement>>;
+export default Accordion;

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

@@ -0,0 +1,38 @@
+"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.AccordionHeader = exports.AccordionDetails = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
+var AccordionDetails_1 = __importDefault(require("./components/AccordionDetails"));
+exports.AccordionDetails = AccordionDetails_1.default;
+var AccordionHeader_1 = __importDefault(require("./components/AccordionHeader"));
+exports.AccordionHeader = AccordionHeader_1.default;
+var style_1 = require("./style");
+/**
+ * @see https://mui.com/material-ui/react-accordion/
+ */
+var Accordion = react_1.default.forwardRef(function (props, ref) {
+    var children = props.children, useDivider = props.useDivider, _a = props.togglePosition, togglePosition = _a === void 0 ? "right" : _a, id = props.id;
+    var _b = react_1.default.useState(false), expanded = _b[0], setExpanded = _b[1];
+    var handleChange = function (panel) {
+        return function (_event, isExpanded) {
+            setExpanded(isExpanded ? panel : false);
+        };
+    };
+    return ((0, jsx_runtime_1.jsx)(style_1.StyledAccordion, __assign({ square: true, useDivider: useDivider, togglePosition: togglePosition, expanded: expanded === id, onChange: handleChange(id), ref: ref }, props, { children: children })));
+});
+exports.default = Accordion;

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

@@ -0,0 +1,28 @@
+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: {
+        togglePosition: string;
+    };
+};
+export declare const LivePreview: {
+    parameters: {
+        snapshot: {
+            skip: boolean;
+        };
+    };
+    render: (args: Args) => JSX.Element;
+};
+export declare const Test: {
+    args: {
+        id: string;
+        togglePosition: string;
+    };
+    parameters: {
+        snapshot: {
+            skip: boolean;
+        };
+    };
+    render: (props: Args) => JSX.Element;
+};

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

@@ -0,0 +1,82 @@
+"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.LivePreview = exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var AccordionDetails_1 = __importDefault(require("./components/AccordionDetails"));
+var AccordionHeader_1 = __importDefault(require("./components/AccordionHeader"));
+var index_1 = __importDefault(require("./index"));
+var Accordion = function (props) {
+    var id = props.id, subtitle = props.subtitle, useDivider = props.useDivider, togglePosition = props.togglePosition;
+    return ((0, jsx_runtime_1.jsxs)(index_1.default, __assign({ id: id, useDivider: useDivider, togglePosition: togglePosition }, props, { children: [(0, jsx_runtime_1.jsx)(AccordionHeader_1.default, { id: "".concat(id, "-header"), subtitle: subtitle, children: "Accordion Header" }), (0, jsx_runtime_1.jsx)(AccordionDetails_1.default, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget." })] })));
+};
+exports.default = {
+    argTypes: {
+        id: {
+            control: { type: "text" },
+            required: true,
+        },
+        subtitle: {
+            control: { type: "text" },
+        },
+        togglePosition: {
+            control: { type: "select" },
+            options: ["right", "left"],
+        },
+        useDivider: {
+            control: { type: "boolean" },
+        },
+    },
+    component: Accordion,
+    title: "Accordion",
+};
+// Default
+exports.Default = {
+    args: {
+        togglePosition: "right",
+    },
+};
+// LivePreview
+var livePreviewStyles = {
+    display: "grid",
+    gridColumnGap: "24px",
+    gridRowGap: "50px",
+    gridTemplateColumns: "repeat(4, 200px)",
+};
+function LivePreviewDemo(props) {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: livePreviewStyles, children: [(0, jsx_runtime_1.jsx)(Accordion, __assign({ id: "accordion-1", togglePosition: "right", useDivider: true }, props)), (0, jsx_runtime_1.jsx)(Accordion, __assign({ id: "accordion-2", togglePosition: "right", subtitle: "Optional Subtitle", useDivider: true }, props)), (0, jsx_runtime_1.jsx)(Accordion, __assign({ id: "accordion-3", togglePosition: "left", useDivider: true }, props)), (0, jsx_runtime_1.jsx)(Accordion, __assign({ id: "accordion-4", togglePosition: "left", subtitle: "Optional Subtitle", useDivider: true }, props))] }));
+}
+exports.LivePreview = {
+    parameters: {
+        snapshot: {
+            skip: true,
+        },
+    },
+    render: function (args) { return (0, jsx_runtime_1.jsx)(LivePreviewDemo, __assign({}, args)); },
+};
+// Test
+exports.Test = {
+    args: {
+        id: "test-story",
+        togglePosition: "right",
+    },
+    parameters: {
+        snapshot: {
+            skip: true,
+        },
+    },
+    render: function (props) { return ((0, jsx_runtime_1.jsx)(Accordion, __assign({}, props, { "data-testid": "accordion" }))); },
+};

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

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

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

@@ -0,0 +1,58 @@
+"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;
+};
+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("<Accordion />", function () {
+    (0, story_utils_1.generateSnapshots)(snapshotTestStoryFile);
+    it("renders accordion component", function () {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, __assign({}, Test.args)));
+        var accordionElement = react_2.screen.getByTestId("accordion");
+        expect(accordionElement).not.toBeNull();
+    });
+    it("opens accordion when clicked", function () {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, {}));
+        var accordionElement = react_2.screen.getByTestId("accordion");
+        react_2.fireEvent.click(accordionElement);
+        expect(react_2.screen.getAllByText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")).not.toBeNull();
+    });
+});