@spark-web/columns 1.0.3 → 1.0.4

package/README.md

@@ -78,9 +78,10 @@ Columns can be collapsed into a single vertical stack responsively using the
 | -------------- | ------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------- |
 | alignY?        | [ResponsiveProp][responsive-prop]\<AlignY>              |         | Vertically align items within the container.                                           |
 | children       | React.ReactNode                                         |         | Children elements to be rendered within the column component representing each column. |
-| collapseBelow? | [ResponsiveRangeProps][responsive-range-props]('below') |         | At which breakpoint, if amy, should the columns collapse.                              |
+| collapseBelow? | [ResponsiveRangeProps][responsive-range-props]['below'] |         | At which breakpoint, if amy, should the columns collapse.                              |
 | gap?           | [Gap][gap]                                              |         | The size of the gap between each column.                                               |
 | template?      | number[]                                                |         | Define the relative width of each column. By default each column is the same width.    |
+| data?          | [DataAttributeMap][data-attribute-map]                  |         | Sets data attributes on the component.                                                 |
 
 [`Box`](/package/box) props are also included as `Column` props and are not
 listed here (excluding `display`, `alignItems`, `gap`, `flexDirection`,
@@ -89,8 +90,10 @@ listed here (excluding `display`, `alignItems`, `gap`, `flexDirection`,
 Extra props are passed into the underlying [`Box`](/package/box) component.
 
 [responsive-prop]:
-  https://bitbucket.org/brighte-energy/energy/src/537c678a81090af545969504776c6b3d2e67743e/spark-web/packages/theme/src/themeUtils.ts#spark-web/packages/theme/src/themeUtils.ts-11
+  https://github.com/brighte-labs/spark-web/blob/e503bea4f7668d187ec7a78f99c5ed374417588b/packages/theme/src/themeUtils.ts#L11
 [responsive-range-props]:
-  https://bitbucket.org/brighte-energy/energy/src/537c678a81090af545969504776c6b3d2e67743e/spark-web/packages/theme/src/themeutils.ts#spark-web/packages/theme/src/themeutils.ts-130
+  https://github.com/brighte-labs/spark-web/blob/e503bea4f7668d187ec7a78f99c5ed374417588b/packages/theme/src/themeUtils.ts#L130
 [gap]:
-  https://bitbucket.org/brighte-energy/energy/src/537c678a81090af545969504776c6b3d2e67743e/spark-web/packages/columns/src/Columns.tsx#spark-web/packages/columns/src/Columns.tsx-14
+  https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/columns/src/Columns.tsx#L17
+[data-attribute-map]:
+  https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1

package/dist/declarations/src/Columns.d.ts

@@ -1,5 +1,6 @@
 import type { BoxProps } from '@spark-web/box';
 import type { BrighteTheme, ResponsiveProp, ResponsiveRangeProps } from '@spark-web/theme';
+import type { DataAttributeMap } from '@spark-web/utils/internal';
 import type { ReactNode } from 'react';
 import type { AlignY } from './alignment';
 declare type Gap = ResponsiveProp<keyof Omit<BrighteTheme['spacing'], 'none'>>;
@@ -11,6 +12,8 @@ export declare type ColumnsProps = {
     children: ReactNode;
     /** At which breakpoint, if any, should the columns collapse. */
     collapseBelow?: ResponsiveRangeProps['below'];
+    /** Sets data attributes on the component. */
+    data?: DataAttributeMap;
     /** The size of the gap between each column. */
     gap?: Gap;
     /** Define the relative width of each column. By default each column is the same width. */
@@ -26,6 +29,8 @@ export declare const Columns: <Comp extends import("react").ElementType<any> = "
     children: ReactNode;
     /** At which breakpoint, if any, should the columns collapse. */
     collapseBelow?: ResponsiveRangeProps['below'];
+    /** Sets data attributes on the component. */
+    data?: DataAttributeMap | undefined;
     /** The size of the gap between each column. */
     gap?: Gap | undefined;
     /** Define the relative width of each column. By default each column is the same width. */

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

@@ -20,11 +20,12 @@ var alignYLookup = {
 };
 var alignYToAlignItems = theme.createResponsiveMapFn(alignYLookup);
 
-var _excluded = ["alignY", "collapseBelow", "gap", "template"];
+var _excluded = ["alignY", "collapseBelow", "data", "gap", "template"];
 var Columns = ts.forwardRefWithAs(function (_ref, forwardedRef) {
   var _ref$alignY = _ref.alignY,
       alignY = _ref$alignY === void 0 ? 'top' : _ref$alignY,
       collapseBelow = _ref.collapseBelow,
+      data = _ref.data,
       gap = _ref.gap,
       template = _ref.template,
       props = _objectWithoutProperties(_ref, _excluded);
@@ -59,7 +60,8 @@ var Columns = ts.forwardRefWithAs(function (_ref, forwardedRef) {
       '> *': {
         minWidth: 0
       }
-    }))
+    })),
+    data: data
   }, props));
 });
 

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

@@ -20,11 +20,12 @@ var alignYLookup = {
 };
 var alignYToAlignItems = theme.createResponsiveMapFn(alignYLookup);
 
-var _excluded = ["alignY", "collapseBelow", "gap", "template"];
+var _excluded = ["alignY", "collapseBelow", "data", "gap", "template"];
 var Columns = ts.forwardRefWithAs(function (_ref, forwardedRef) {
   var _ref$alignY = _ref.alignY,
       alignY = _ref$alignY === void 0 ? 'top' : _ref$alignY,
       collapseBelow = _ref.collapseBelow,
+      data = _ref.data,
       gap = _ref.gap,
       template = _ref.template,
       props = _objectWithoutProperties(_ref, _excluded);
@@ -59,7 +60,8 @@ var Columns = ts.forwardRefWithAs(function (_ref, forwardedRef) {
       '> *': {
         minWidth: 0
       }
-    }))
+    })),
+    data: data
   }, props));
 });
 

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

@@ -16,11 +16,12 @@ var alignYLookup = {
 };
 var alignYToAlignItems = createResponsiveMapFn(alignYLookup);
 
-var _excluded = ["alignY", "collapseBelow", "gap", "template"];
+var _excluded = ["alignY", "collapseBelow", "data", "gap", "template"];
 var Columns = forwardRefWithAs(function (_ref, forwardedRef) {
   var _ref$alignY = _ref.alignY,
       alignY = _ref$alignY === void 0 ? 'top' : _ref$alignY,
       collapseBelow = _ref.collapseBelow,
+      data = _ref.data,
       gap = _ref.gap,
       template = _ref.template,
       props = _objectWithoutProperties(_ref, _excluded);
@@ -55,7 +56,8 @@ var Columns = forwardRefWithAs(function (_ref, forwardedRef) {
       '> *': {
         minWidth: 0
       }
-    }))
+    })),
+    data: data
   }, props));
 });
 

package/package.json

@@ -1,15 +1,18 @@
 {
   "name": "@spark-web/columns",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "license": "MIT",
   "main": "dist/spark-web-columns.cjs.js",
   "module": "dist/spark-web-columns.esm.js",
+  "files": [
+    "dist"
+  ],
   "dependencies": {
     "@babel/runtime": "^7.14.6",
     "@emotion/css": "^11.7.1",
-    "@spark-web/box": "^1.0.3",
-    "@spark-web/theme": "^2.0.2",
-    "@spark-web/utils": "^1.1.1"
+    "@spark-web/box": "^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,63 +0,0 @@
-# @spark-web/columns
-
-## 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/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/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/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/theme@1.0.0
-  - @spark-web/utils@1.0.0

package/src/Columns.stories.tsx

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

package/src/Columns.tsx

@@ -1,85 +0,0 @@
-import { css } from '@emotion/css';
-import type { BoxProps } from '@spark-web/box';
-import { Box } from '@spark-web/box';
-import type {
-  BrighteTheme,
-  ResponsiveProp,
-  ResponsiveRangeProps,
-} from '@spark-web/theme';
-import { useTheme } from '@spark-web/theme';
-import { forwardRefWithAs } from '@spark-web/utils/ts';
-import type { ReactNode } from 'react';
-import { Children } from 'react';
-
-import type { AlignY } from './alignment';
-import { alignYToAlignItems } from './alignment';
-
-type Gap = ResponsiveProp<keyof Omit<BrighteTheme['spacing'], 'none'>>;
-type ValidBoxProps = Omit<
-  BoxProps,
-  | 'display'
-  | 'alignItems'
-  | 'gap'
-  | 'flexDirection'
-  | 'justifyContent'
-  | 'flexWrap'
->;
-
-export type ColumnsProps = {
-  /** Vertically align items within the container. */
-  alignY?: ResponsiveProp<AlignY>;
-  /** Elements representing each column. */
-  children: ReactNode;
-  /** At which breakpoint, if any, should the columns collapse. */
-  collapseBelow?: ResponsiveRangeProps['below'];
-  /** The size of the gap between each column. */
-  gap?: Gap;
-  /** Define the relative width of each column. By default each column is the same width. */
-  template?: number[];
-} & ValidBoxProps;
-
-export const Columns = forwardRefWithAs<'div', ColumnsProps>(
-  (
-    { alignY = 'top', collapseBelow, gap, template, ...props },
-    forwardedRef
-  ) => {
-    const { spacing, utils } = useTheme();
-    const alignItems = alignYToAlignItems(alignY);
-    const count = Children.count(props.children);
-    const gridTemplateColumns = template
-      ? template.map(c => `${c}fr`).join(' ')
-      : `repeat(${count}, 1fr)`;
-
-    const [
-      collapseOnMobile,
-      collapseOnTablet,
-      collapseOnDesktop,
-      collapseOnWide,
-    ] = utils.responsiveRange({ below: collapseBelow });
-
-    return (
-      <Box
-        ref={forwardedRef}
-        className={css(
-          utils.resolveResponsiveProps({
-            alignItems,
-            display: 'grid',
-            gap: utils.mapResponsiveScale(gap, spacing),
-            gridTemplateColumns: collapseBelow
-              ? utils.optimizeResponsiveArray([
-                  collapseOnMobile ? null : gridTemplateColumns,
-                  collapseOnTablet ? null : gridTemplateColumns,
-                  collapseOnDesktop ? null : gridTemplateColumns,
-                  collapseOnWide ? null : gridTemplateColumns,
-                ])
-              : gridTemplateColumns,
-
-            // fix flex overflow bug that prevents text truncation
-            '> *': { minWidth: 0 },
-          })
-        )}
-        {...props}
-      />
-    );
-  }
-);

package/src/alignment.ts

@@ -1,12 +0,0 @@
-import { createResponsiveMapFn } from '@spark-web/theme';
-
-const alignYLookup = {
-  top: 'start',
-  center: 'center',
-  bottom: 'end',
-  stretch: 'stretch',
-} as const;
-
-export type AlignY = keyof typeof alignYLookup;
-
-export const alignYToAlignItems = createResponsiveMapFn(alignYLookup);

package/src/index.ts

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