braid-design-system 32.22.0 → 32.23.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # braid-design-system
 
+## 32.23.0
+
+### Minor Changes
+
+- **Spread:** Add `component` prop support ([#1559](https://github.com/seek-oss/braid-design-system/pull/1559))
+
+  Enable support for changing the underlying HTML element of the `Spread` component.
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <Spread component="span">...</Spread>
+  ```
+
+- **Spread:** Add `data` prop support ([#1559](https://github.com/seek-oss/braid-design-system/pull/1559))
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <Spread data={{ test: 123 }}>...</Spread>
+  ```
+
 ## 32.22.0
 
 ### Minor Changes

package/dist/lib/components/Spread/Spread.cjs

@@ -3,12 +3,16 @@ const jsxRuntime = require("react/jsx-runtime");
 const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
 const lib_utils_align_cjs = require("../../utils/align.cjs");
 const lib_components_Spread_Spread_css_cjs = require("./Spread.css.cjs");
+const lib_components_private_buildDataAttributes_cjs = require("../private/buildDataAttributes.cjs");
 const Spread = ({
+  component,
   children,
   space,
   direction = "horizontal",
   align,
-  alignY
+  alignY,
+  data,
+  ...restProps
 }) => {
   const isVertical = direction === "vertical";
   const isHorizontal = !isVertical;
@@ -21,6 +25,7 @@ const Spread = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     lib_components_Box_Box_cjs.Box,
     {
+      component,
       display: "flex",
       flexDirection: isVertical ? "column" : "row",
       width: "full",
@@ -28,6 +33,7 @@ const Spread = ({
       justifyContent: "spaceBetween",
       alignItems,
       className: lib_components_Spread_Spread_css_cjs.responsiveGap({ gap: space }),
+      ...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
       children
     }
   );

package/dist/lib/components/Spread/Spread.mjs

@@ -2,12 +2,16 @@ import { jsx } from "react/jsx-runtime";
 import { Box } from "../Box/Box.mjs";
 import { alignToFlexAlign, alignYToFlexAlign } from "../../utils/align.mjs";
 import { responsiveGap } from "./Spread.css.mjs";
+import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
 const Spread = ({
+  component,
   children,
   space,
   direction = "horizontal",
   align,
-  alignY
+  alignY,
+  data,
+  ...restProps
 }) => {
   const isVertical = direction === "vertical";
   const isHorizontal = !isVertical;
@@ -20,6 +24,7 @@ const Spread = ({
   return /* @__PURE__ */ jsx(
     Box,
     {
+      component,
       display: "flex",
       flexDirection: isVertical ? "column" : "row",
       width: "full",
@@ -27,6 +32,7 @@ const Spread = ({
       justifyContent: "spaceBetween",
       alignItems,
       className: responsiveGap({ gap: space }),
+      ...buildDataAttributes({ data, validateRestProps: restProps }),
       children
     }
   );

package/dist/wireframe.chunk.d.ts

@@ -3713,13 +3713,15 @@ declare const responsiveGapProperties: {
 type RequiredResponsiveValue<Value extends string | number> = RequiredConditionalValue<typeof responsiveGapProperties, Value>;
 
 interface SpreadProps {
+    component?: BoxProps['component'];
     children: ReactNodeNoStrings;
     space: RequiredResponsiveValue<Space>;
     direction?: 'horizontal' | 'vertical';
     align?: OptionalResponsiveValue<Align>;
     alignY?: OptionalResponsiveValue<AlignY>;
+    data?: DataAttributeMap;
 }
-declare const Spread$1: ({ children, space, direction, align, alignY, }: SpreadProps) => React.JSX.Element;
+declare const Spread$1: ({ component, children, space, direction, align, alignY, data, ...restProps }: SpreadProps) => React.JSX.Element;
 
 interface StepProps {
     children: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "32.22.0",
+  "version": "32.23.0",
   "description": "Themeable design system for the SEEK Group",
   "homepage": "https://seek-oss.github.io/braid-design-system/",
   "bugs": {
@@ -226,7 +226,7 @@
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.3.0",
     "sanitize-html": "^2.12.1",
-    "sku": "13.0.3",
+    "sku": "13.0.4",
     "storybook": "7.6.20",
     "svgo": "^2.8.0",
     "title-case": "^3.0.3",