braid-design-system
Version:
Themeable design system for the SEEK Group
73 lines (72 loc) • 2.43 kB
JavaScript
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import assert from "assert";
import { useMemo, Children } from "react";
import { flattenChildren } from "../../utils/flattenChildren.mjs";
import { Divider } from "../Divider/Divider.mjs";
import { Stack } from "../Stack/Stack.mjs";
import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
import { validTones, AccordionContext } from "./AccordionContext.mjs";
import { normalizeResponsiveValue } from "../../css/atoms/sprinkles.css.mjs";
const validSpaceValues = ["medium", "large", "xlarge"];
const defaultSize = "large";
const defaultSpaceForSize = {
divided: {
xsmall: "medium",
small: "medium",
standard: "medium",
large: "medium"
},
undivided: {
xsmall: "medium",
small: "medium",
standard: "large",
large: "large"
}
};
const Accordion = ({
children,
size = defaultSize,
tone,
weight,
space: spaceProp,
dividers = true,
data,
...restProps
}) => {
assert(
spaceProp === void 0 || Object.values(normalizeResponsiveValue(spaceProp)).every(
(value) => value === void 0 || validSpaceValues.includes(value)
),
`To ensure adequate space for touch targets, 'space' prop values must be one of the following: ${validSpaceValues.map((x) => `"${x}"`).join(", ")}`
);
assert(
tone === void 0 || validTones.includes(tone),
`The 'tone' prop should be one of the following: ${validTones.map((x) => `"${x}"`).join(", ")}`
);
if (process.env.NODE_ENV !== "production") {
buildDataAttributes({ data, validateRestProps: restProps });
}
const contextValue = useMemo(
() => ({ size, tone, weight }),
[size, tone, weight]
);
const space = spaceProp ?? defaultSpaceForSize[dividers ? "divided" : "undivided"][size];
return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(Stack, { space, data, children: !dividers ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(Divider, {}),
Children.map(flattenChildren(children), (child, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
index > 0 ? /* @__PURE__ */ jsx(
Divider,
{
weight: typeof dividers === "string" ? dividers : void 0
}
) : null,
child
] })),
/* @__PURE__ */ jsx(Divider, {})
] }) }) });
};
export {
Accordion,
defaultSize,
validSpaceValues
};