@homebound/beam 2.306.2 → 2.307.0

package/dist/components/Accordion.d.ts

@@ -21,6 +21,8 @@ export interface AccordionProps<X = AccordionXss> {
     omitPadding?: boolean;
     /** Styles overrides for padding */
     xss?: X;
+    /** Modifies the typography, padding, icon size and background color of the accordion header */
+    compact?: boolean;
 }
 export declare function Accordion<X extends Only<AccordionXss, X>>(props: AccordionProps<X>): import("@emotion/react/jsx-runtime").JSX.Element;
 export type AccordionSize = "xs" | "sm" | "md" | "lg";

package/dist/components/Accordion.js

@@ -9,7 +9,7 @@ const Icon_1 = require("./Icon");
 const Css_1 = require("../Css");
 const utils_2 = require("../utils");
 function Accordion(props) {
-    const { title, children, size, disabled = false, defaultExpanded = false, topBorder = true, bottomBorder = false, index, setExpandedIndex, omitPadding = false, xss, } = props;
+    const { title, children, size, disabled = false, defaultExpanded = false, compact = false, topBorder = compact ? false : true, bottomBorder = false, index, setExpandedIndex, omitPadding = false, xss, } = props;
     const testIds = (0, utils_2.useTestIds)(props, "accordion");
     const id = (0, utils_1.useId)();
     const [expanded, setExpanded] = (0, react_1.useState)(defaultExpanded && !disabled);
@@ -40,7 +40,8 @@ function Accordion(props) {
             ...Css_1.Css.bGray300.if(topBorder).bt.if(bottomBorder).bb.$,
             ...(size ? Css_1.Css.wPx(accordionSizes[size]).$ : {}),
         }, children: [(0, jsx_runtime_1.jsxs)("button", { ...testIds.title, ...focusProps, "aria-controls": id, "aria-expanded": expanded, disabled: disabled, css: {
-                    ...Css_1.Css.df.jcsb.gap2.aic.w100.p2.baseMd.outline("none").addIn(":hover", Css_1.Css.bgGray100.$).$,
+                    ...Css_1.Css.df.jcsb.gapPx(12).aic.w100.p2.baseMd.outline("none").onHover.bgGray100.$,
+                    ...(compact && Css_1.Css.smMd.pl2.prPx(10).py1.bgGray100.mbPx(4).br8.onHover.bgGray200.$),
                     ...(disabled && Css_1.Css.gray500.$),
                     ...(isFocusVisible && Css_1.Css.boxShadow(`inset 0 0 0 2px ${Css_1.Palette.Blue700}`).$),
                     ...xss,
@@ -48,7 +49,8 @@ function Accordion(props) {
                     setExpanded(!expanded);
                     if (setExpandedIndex)
                         setExpandedIndex(index);
-                }, children: [(0, jsx_runtime_1.jsx)("span", { children: title }), (0, jsx_runtime_1.jsx)("span", { css: {
+                }, children: [(0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.fg1.tl.$, children: title }), (0, jsx_runtime_1.jsx)("span", { css: {
+                            ...Css_1.Css.fs0.$,
                             transition: "transform 250ms linear",
                             transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
                         }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "chevronDown" }) })] }), (0, jsx_runtime_1.jsx)("div", { ...testIds.details, id: id, "aria-hidden": !expanded, css: Css_1.Css.overflowHidden.h(contentHeight).add("transition", "height 250ms ease-in-out").$, children: expanded && ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.px2.pb2.pt1.if(omitPadding).p0.$, ref: contentRef, ...testIds.content, children: children })) })] }));

package/dist/components/AccordionList.d.ts

@@ -4,6 +4,8 @@ interface AccordionListProps {
     /** Allows multiple accordions to be expanded simultaneously (enabled by default) */
     allowMultipleExpanded?: boolean;
     size?: AccordionSize;
+    /** Modifies the typography, padding, icon size and background color of the accordion header */
+    compact?: boolean;
 }
 export declare function AccordionList(props: AccordionListProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/AccordionList.js

@@ -7,9 +7,9 @@ const react_2 = require("react");
 const __1 = require("..");
 const Accordion_1 = require("./Accordion");
 function AccordionList(props) {
-    const { accordions, size, allowMultipleExpanded = true } = props;
+    const { accordions, size, allowMultipleExpanded = true, compact = false } = props;
     const [expandedIndex, setExpandedIndex] = (0, react_2.useState)(accordions.findIndex((a) => a.defaultExpanded));
     const tid = (0, __1.useTestIds)(props, "accordionList");
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: accordions.map((accordionProps, index, arr) => ((0, react_1.createElement)(Accordion_1.Accordion, { ...accordionProps, ...tid, key: index, size: size, bottomBorder: index === arr.length - 1, defaultExpanded: !allowMultipleExpanded && expandedIndex === index, index: index, setExpandedIndex: setExpandedIndex }))) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: accordions.map((accordionProps, index, arr) => ((0, react_1.createElement)(Accordion_1.Accordion, { ...accordionProps, ...tid, compact: compact, key: index, size: size, bottomBorder: compact ? false : index === arr.length - 1, defaultExpanded: !allowMultipleExpanded && expandedIndex === index, index: index, setExpandedIndex: setExpandedIndex }))) }));
 }
 exports.AccordionList = AccordionList;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.306.2",
+  "version": "2.307.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",