braid-design-system
Version:
Themeable design system for the SEEK Group
84 lines (83 loc) • 2.95 kB
JavaScript
import { alignYToFlexAlign, alignToFlexAlign } from "./align.mjs";
import { optimizeResponsiveArray } from "./optimizeResponsiveArray.mjs";
import { resolveResponsiveRangeProps } from "./resolveResponsiveRangeProps.mjs";
import { normalizeResponsiveValue } from "../css/atoms/sprinkles.css.mjs";
function invertAlignment(alignment) {
if (alignment === "flexStart") {
return "flexEnd";
}
if (alignment === "flexEnd") {
return "flexStart";
}
return alignment;
}
function resolveCollapsibleAlignmentProps({
align,
alignY,
collapseBelow,
reverse,
inlineItems = false
}) {
const [collapseMobile, collapseTablet, collapseDesktop] = resolveResponsiveRangeProps({
below: collapseBelow
});
const defaultAlignItems = inlineItems ? "flexStart" : void 0;
const rowDirection = collapseBelow && reverse ? "rowReverse" : "row";
const flexDirection = [
collapseMobile ? "column" : "row",
collapseTablet ? "column" : rowDirection,
collapseDesktop ? "column" : rowDirection,
rowDirection
];
const nonCollapsedAlignItems = alignYToFlexAlign(alignY) || defaultAlignItems;
const normalizedAlignY = normalizeResponsiveValue(
nonCollapsedAlignItems || {}
);
const {
mobile: alignYMobile = defaultAlignItems || null,
tablet: alignYTablet = alignYMobile,
desktop: alignYDesktop = alignYTablet,
wide: alignYWide = alignYDesktop
} = normalizedAlignY;
const normalizedAlign = normalizeResponsiveValue(
alignToFlexAlign(align) || "flexStart"
);
const {
mobile: alignMobile = "flexStart",
tablet: alignTablet = alignMobile,
desktop: alignDesktop = alignTablet,
wide: alignWide = alignDesktop
} = normalizedAlign;
const collapsedAlignItems = [
collapseMobile && alignMobile === "flexStart" ? null : alignMobile,
collapseTablet && alignTablet === "flexStart" ? null : alignTablet,
collapseDesktop && alignDesktop === "flexStart" ? null : alignDesktop
// wide doesnt collapse, no check needed here
];
return {
collapseMobile,
collapseTablet,
collapseDesktop,
collapsibleAlignmentProps: {
display: "flex",
flexDirection: optimizeResponsiveArray(flexDirection),
justifyContent: align ? optimizeResponsiveArray([
alignMobile,
// mobile doesnt reverse, no check needed here
reverse ? invertAlignment(alignTablet) : alignTablet,
reverse ? invertAlignment(alignDesktop) : alignDesktop,
reverse ? invertAlignment(alignWide) : alignWide
]) : void 0,
alignItems: collapseBelow ? optimizeResponsiveArray([
collapseMobile ? collapsedAlignItems[0] : alignYMobile,
collapseTablet ? collapsedAlignItems[1] : alignYTablet,
collapseDesktop ? collapsedAlignItems[2] : alignYDesktop,
alignYWide
// wide doesnt collapse, no check needed here
]) : nonCollapsedAlignItems
}
};
}
export {
resolveCollapsibleAlignmentProps
};