@spark-web/stack 1.0.3 → 1.0.4

package/README.md

@@ -103,10 +103,11 @@ Nest Stack components to create more complex white space rules.
 
 ## Props
 
-| Prop      | Type                            | Default   | Description                                           |
-| --------- | ------------------------------- | --------- | ----------------------------------------------------- |
-| align?    | [ResponsiveProp\<Align>][align] | 'stretch' | Horizontally align items within the container.        |
-| dividers? | boolean                         |           | Sets whether to place a divider between each element. |
+| Prop      | Type                                   | Default   | Description                                           |
+| --------- | -------------------------------------- | --------- | ----------------------------------------------------- |
+| align?    | [ResponsiveProp\<Align>][align]        | 'stretch' | Horizontally align items within the container.        |
+| dividers? | boolean                                |           | Sets whether to place a divider between each element. |
+| data?     | [DataAttributeMap][data-attribute-map] |           | Sets data attributes on the component.                |
 
 `Stack` props also include [`Box`](/package/box) props and are not listed here
 (excludes `display`, `className`, `alignItems`, `flexDirection`,
@@ -115,4 +116,6 @@ Nest Stack components to create more complex white space rules.
 Extra props are also passed into the underlying [`Box`](/package/box) component.
 
 [align]:
-  https://bitbucket.org/brighte-energy/energy/src/537c678a81090af545969504776c6b3d2e67743e/spark-web/packages/stack/src/Stack.tsx#spark-web/packages/stack/src/Stack.tsx-21
+  https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/stack/src/Stack.tsx#L24
+[data-attribute-map]:
+  https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1

package/dist/spark-web-stack.cjs.dev.js

@@ -19,11 +19,12 @@ var alignLookup = {
 };
 var alignToAlignItems = theme.createResponsiveMapFn(alignLookup);
 
-var _excluded = ["align", "children", "dividers"];
+var _excluded = ["align", "children", "data", "dividers"];
 var Stack = ts.forwardRefWithAs(function (_ref, forwardedRef) {
   var _ref$align = _ref.align,
       align = _ref$align === void 0 ? 'stretch' : _ref$align,
       children = _ref.children,
+      data = _ref.data,
       dividers = _ref.dividers,
       props = _objectWithoutProperties(_ref, _excluded);
 
@@ -32,6 +33,7 @@ var Stack = ts.forwardRefWithAs(function (_ref, forwardedRef) {
   var rootProps = _objectSpread({
     ref: forwardedRef,
     alignItems: alignItems,
+    data: data,
     display: 'flex',
     flexDirection: 'column'
   }, props); // bail early w/o dividers to avoid unnecessary map

package/dist/spark-web-stack.cjs.prod.js

@@ -19,11 +19,12 @@ var alignLookup = {
 };
 var alignToAlignItems = theme.createResponsiveMapFn(alignLookup);
 
-var _excluded = ["align", "children", "dividers"];
+var _excluded = ["align", "children", "data", "dividers"];
 var Stack = ts.forwardRefWithAs(function (_ref, forwardedRef) {
   var _ref$align = _ref.align,
       align = _ref$align === void 0 ? 'stretch' : _ref$align,
       children = _ref.children,
+      data = _ref.data,
       dividers = _ref.dividers,
       props = _objectWithoutProperties(_ref, _excluded);
 
@@ -32,6 +33,7 @@ var Stack = ts.forwardRefWithAs(function (_ref, forwardedRef) {
   var rootProps = _objectSpread({
     ref: forwardedRef,
     alignItems: alignItems,
+    data: data,
     display: 'flex',
     flexDirection: 'column'
   }, props); // bail early w/o dividers to avoid unnecessary map

package/dist/spark-web-stack.esm.js

@@ -15,11 +15,12 @@ var alignLookup = {
 };
 var alignToAlignItems = createResponsiveMapFn(alignLookup);
 
-var _excluded = ["align", "children", "dividers"];
+var _excluded = ["align", "children", "data", "dividers"];
 var Stack = forwardRefWithAs(function (_ref, forwardedRef) {
   var _ref$align = _ref.align,
       align = _ref$align === void 0 ? 'stretch' : _ref$align,
       children = _ref.children,
+      data = _ref.data,
       dividers = _ref.dividers,
       props = _objectWithoutProperties(_ref, _excluded);
 
@@ -28,6 +29,7 @@ var Stack = forwardRefWithAs(function (_ref, forwardedRef) {
   var rootProps = _objectSpread({
     ref: forwardedRef,
     alignItems: alignItems,
+    data: data,
     display: 'flex',
     flexDirection: 'column'
   }, props); // bail early w/o dividers to avoid unnecessary map

package/package.json

@@ -1,16 +1,19 @@
 {
   "name": "@spark-web/stack",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "license": "MIT",
   "main": "dist/spark-web-stack.cjs.js",
   "module": "dist/spark-web-stack.esm.js",
+  "files": [
+    "dist"
+  ],
   "dependencies": {
     "@babel/runtime": "^7.14.6",
     "@emotion/css": "^11.7.1",
-    "@spark-web/box": "^1.0.3",
-    "@spark-web/divider": "^1.0.3",
-    "@spark-web/theme": "^2.0.2",
-    "@spark-web/utils": "^1.1.1"
+    "@spark-web/box": "^1.0.4",
+    "@spark-web/divider": "^1.0.4",
+    "@spark-web/theme": "^3.0.0",
+    "@spark-web/utils": "^1.1.2"
   },
   "devDependencies": {
     "@types/react": "^17.0.12",

package/CHANGELOG.md

@@ -1,67 +0,0 @@
-# @spark-web/stack
-
-## 1.0.3
-
-### Patch Changes
-
-- [#42](https://github.com/brighte-labs/spark-web/pull/42)
-  [`435779a`](https://github.com/brighte-labs/spark-web/commit/435779aa42bd635bbf43e1fd41724c666402caa2)
-  Thanks [@lukebennett88](https://github.com/lukebennett88)! - Prevent multiple
-  versions of React
-
-- Updated dependencies
-  [[`435779a`](https://github.com/brighte-labs/spark-web/commit/435779aa42bd635bbf43e1fd41724c666402caa2)]:
-  - @spark-web/box@1.0.3
-  - @spark-web/divider@1.0.3
-  - @spark-web/theme@2.0.2
-  - @spark-web/utils@1.1.1
-
-## 1.0.2
-
-### Patch Changes
-
-- [#40](https://github.com/brighte-labs/spark-web/pull/40)
-  [`062c8ab`](https://github.com/brighte-labs/spark-web/commit/062c8ab8c7b4120f8d14c269b5f7801288c678ca)
-  Thanks [@lukebennett88](https://github.com/lukebennett88)! - Add
-  @babel/transform-runtime
-
-- Updated dependencies
-  [[`062c8ab`](https://github.com/brighte-labs/spark-web/commit/062c8ab8c7b4120f8d14c269b5f7801288c678ca)]:
-  - @spark-web/box@1.0.2
-  - @spark-web/divider@1.0.2
-  - @spark-web/theme@2.0.1
-  - @spark-web/utils@1.0.2
-
-## 1.0.1
-
-### Patch Changes
-
-- [#36](https://github.com/brighte-labs/spark-web/pull/36)
-  [`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)
-  Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update Babel
-  config
-
-- Updated dependencies
-  [[`aebff30`](https://github.com/brighte-labs/spark-web/commit/aebff30c86cb0a9db22b545c46159ce0d1c14afb),
-  [`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)]:
-  - @spark-web/theme@2.0.0
-  - @spark-web/box@1.0.1
-  - @spark-web/divider@1.0.1
-  - @spark-web/utils@1.0.1
-
-## 1.0.0
-
-### Major Changes
-
-- [#27](https://github.com/brighte-labs/spark-web/pull/27)
-  [`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)
-  Thanks [@JedWatson](https://github.com/JedWatson)! - Initial Version
-
-### Patch Changes
-
-- Updated dependencies
-  [[`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)]:
-  - @spark-web/box@1.0.0
-  - @spark-web/divider@1.0.0
-  - @spark-web/theme@1.0.0
-  - @spark-web/utils@1.0.0

package/src/Stack.stories.tsx

@@ -1,27 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-import { Placeholder } from '../../../docs/components/example-helpers';
-import type { StackProps } from './Stack';
-import { Stack } from './Stack';
-
-export default {
-  title: 'Page & Layout / Stack',
-  component: Stack,
-} as ComponentMeta<typeof Stack>;
-
-const StackStory: ComponentStory<typeof Stack> = (args: StackProps) => (
-  <Stack {...args} />
-);
-
-export const Default = StackStory.bind({});
-
-Default.args = {
-  gap: 'large',
-  children: (
-    <>
-      <Placeholder height={40} />
-      <Placeholder height={40} />
-      <Placeholder height={40} />
-    </>
-  ),
-} as StackProps;

package/src/Stack.tsx

@@ -1,59 +0,0 @@
-import type { BoxProps } from '@spark-web/box';
-import { Box } from '@spark-web/box';
-import { Divider } from '@spark-web/divider';
-import type { ResponsiveProp } from '@spark-web/theme';
-import { forwardRefWithAs } from '@spark-web/utils/ts';
-import type { ReactElement } from 'react';
-import { Children, Fragment } from 'react';
-
-import type { Align } from './alignment';
-import { alignToAlignItems } from './alignment';
-
-type ValidBoxProps = Omit<
-  BoxProps,
-  | 'display'
-  | 'className'
-  | 'alignItems'
-  | 'flexDirection'
-  | 'justifyContent'
-  | 'flexWrap'
->;
-
-export type StackProps = {
-  /** Horizontally align items within the stack. */
-  align?: ResponsiveProp<Align>;
-  /** Place a divider between each element. */
-  dividers?: boolean;
-} & ValidBoxProps;
-
-export const Stack = forwardRefWithAs<'div', StackProps>(
-  ({ align = 'stretch', children, dividers, ...props }, forwardedRef) => {
-    const alignItems = alignToAlignItems(align);
-    const rootProps = {
-      ref: forwardedRef,
-      alignItems,
-      display: 'flex',
-      flexDirection: 'column',
-      ...props,
-    } as const;
-
-    // bail early w/o dividers to avoid unnecessary map
-    if (!dividers) {
-      return <Box {...rootProps}>{children}</Box>;
-    }
-
-    // map over children to insert dividers
-    // remove falsy values before mapping, keeps the index in sync
-    const childArray = Children.toArray(children) as ReactElement[];
-    return (
-      <Box {...rootProps}>
-        {childArray.map((child, idx) => (
-          <Fragment key={child.key || idx}>
-            {dividers && idx ? <Divider /> : null}
-            {child}
-          </Fragment>
-        ))}
-      </Box>
-    );
-  }
-);

package/src/alignment.ts

@@ -1,12 +0,0 @@
-import { createResponsiveMapFn } from '@spark-web/theme';
-
-const alignLookup = {
-  left: 'start',
-  center: 'center',
-  right: 'end',
-  stretch: 'stretch',
-} as const;
-
-export type Align = keyof typeof alignLookup;
-
-export const alignToAlignItems = createResponsiveMapFn(alignLookup);

package/src/index.ts

@@ -1,5 +0,0 @@
-export { Stack } from './Stack';
-
-// types
-
-export type { StackProps } from './Stack';