@spark-web/row 1.0.3 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -7
- package/dist/declarations/src/Row.d.ts +5 -0
- package/dist/spark-web-row.cjs.dev.js +8 -3
- package/dist/spark-web-row.cjs.prod.js +8 -3
- package/dist/spark-web-row.esm.js +8 -3
- package/package.json +8 -5
- package/CHANGELOG.md +0 -67
- package/src/Row.stories.tsx +0 -27
- package/src/Row.tsx +0 -60
- package/src/alignment.ts +0 -15
- package/src/index.ts +0 -5
package/README.md
CHANGED
|
@@ -112,11 +112,12 @@ element in the Row.
|
|
|
112
112
|
|
|
113
113
|
## Props
|
|
114
114
|
|
|
115
|
-
| Prop | Type
|
|
116
|
-
| --------- |
|
|
117
|
-
| align? | [ResponsiveProp\<Align>][align]
|
|
118
|
-
| alignY? | [ResponsiveProp\<AlignY>][align-y]
|
|
119
|
-
| dividers? | boolean
|
|
115
|
+
| Prop | Type | Default | Description |
|
|
116
|
+
| --------- | -------------------------------------- | --------- | ----------------------------------------------------- |
|
|
117
|
+
| align? | [ResponsiveProp\<Align>][align] | 'left' | Horizontally align items within the container. |
|
|
118
|
+
| alignY? | [ResponsiveProp\<AlignY>][align-y] | 'stretch' | Vertically align items within the container. |
|
|
119
|
+
| dividers? | boolean | | Sets whether to place a divider between each element. |
|
|
120
|
+
| data? | [DataAttributeMap][data-attribute-map] | | Sets data attributes on the component. |
|
|
120
121
|
|
|
121
122
|
`Row` props also include [`Box`](/package/box) props and are not listed here
|
|
122
123
|
(excludes `display`, `alignItems`, `flexDirection`, `justifyContent` and
|
|
@@ -125,6 +126,8 @@ element in the Row.
|
|
|
125
126
|
Extra props are also passed into the underlying [`Box`](/package/box) component.
|
|
126
127
|
|
|
127
128
|
[align]:
|
|
128
|
-
https://
|
|
129
|
+
https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/inline/src/Inline.tsx#L16
|
|
129
130
|
[align-y]:
|
|
130
|
-
https://
|
|
131
|
+
https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/inline/src/Inline.tsx#L18
|
|
132
|
+
[data-attribute-map]:
|
|
133
|
+
https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { BoxProps } from '@spark-web/box';
|
|
2
2
|
import type { ResponsiveProp } from '@spark-web/theme';
|
|
3
|
+
import type { DataAttributeMap } from '@spark-web/utils/internal';
|
|
3
4
|
import type { ReactElement } from 'react';
|
|
4
5
|
import type { Align, AlignY } from './alignment';
|
|
5
6
|
declare type ValidBoxProps = Omit<BoxProps, 'display' | 'alignItems' | 'flexDirection' | 'justifyContent' | 'flexWrap'>;
|
|
@@ -8,6 +9,8 @@ export declare type RowProps = {
|
|
|
8
9
|
align?: ResponsiveProp<Align>;
|
|
9
10
|
/** Vertically align items within the container. */
|
|
10
11
|
alignY?: ResponsiveProp<AlignY>;
|
|
12
|
+
/** Allows setting of data attributes on the underlying element. */
|
|
13
|
+
data?: DataAttributeMap;
|
|
11
14
|
/** Place a divider between each element. */
|
|
12
15
|
dividers?: boolean;
|
|
13
16
|
} & ValidBoxProps;
|
|
@@ -19,6 +22,8 @@ export declare const Row: <Comp extends import("react").ElementType<any> = "div"
|
|
|
19
22
|
align?: ResponsiveProp<"left" | "right" | "center"> | undefined;
|
|
20
23
|
/** Vertically align items within the container. */
|
|
21
24
|
alignY?: ResponsiveProp<"bottom" | "top" | "stretch" | "center"> | undefined;
|
|
25
|
+
/** Allows setting of data attributes on the underlying element. */
|
|
26
|
+
data?: DataAttributeMap | undefined;
|
|
22
27
|
/** Place a divider between each element. */
|
|
23
28
|
dividers?: boolean | undefined;
|
|
24
29
|
} & ValidBoxProps) => ReactElement<any, string | import("react").JSXElementConstructor<any>>;
|
|
@@ -25,13 +25,14 @@ var alignYLookup = {
|
|
|
25
25
|
var alignToJustifyContent = theme.createResponsiveMapFn(alignLookup);
|
|
26
26
|
var alignYToAlignItems = theme.createResponsiveMapFn(alignYLookup);
|
|
27
27
|
|
|
28
|
-
var _excluded = ["align", "alignY", "children", "dividers"];
|
|
28
|
+
var _excluded = ["align", "alignY", "children", "data", "dividers"];
|
|
29
29
|
var Row = ts.forwardRefWithAs(function (_ref, forwardedRef) {
|
|
30
30
|
var _ref$align = _ref.align,
|
|
31
31
|
align = _ref$align === void 0 ? 'left' : _ref$align,
|
|
32
32
|
_ref$alignY = _ref.alignY,
|
|
33
33
|
alignY = _ref$alignY === void 0 ? 'stretch' : _ref$alignY,
|
|
34
34
|
children = _ref.children,
|
|
35
|
+
data = _ref.data,
|
|
35
36
|
dividers = _ref.dividers,
|
|
36
37
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
37
38
|
|
|
@@ -47,7 +48,9 @@ var Row = ts.forwardRefWithAs(function (_ref, forwardedRef) {
|
|
|
47
48
|
|
|
48
49
|
|
|
49
50
|
if (!dividers) {
|
|
50
|
-
return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({
|
|
51
|
+
return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({
|
|
52
|
+
data: data
|
|
53
|
+
}, rootProps), {}, {
|
|
51
54
|
children: children
|
|
52
55
|
}));
|
|
53
56
|
} // map over children to insert dividers
|
|
@@ -55,7 +58,9 @@ var Row = ts.forwardRefWithAs(function (_ref, forwardedRef) {
|
|
|
55
58
|
|
|
56
59
|
|
|
57
60
|
var childArray = react.Children.toArray(children);
|
|
58
|
-
return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({
|
|
61
|
+
return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({
|
|
62
|
+
data: data
|
|
63
|
+
}, rootProps), {}, {
|
|
59
64
|
children: childArray.map(function (child, idx) {
|
|
60
65
|
return /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
|
|
61
66
|
children: [dividers && idx ? /*#__PURE__*/jsxRuntime.jsx(divider.Divider, {
|
|
@@ -25,13 +25,14 @@ var alignYLookup = {
|
|
|
25
25
|
var alignToJustifyContent = theme.createResponsiveMapFn(alignLookup);
|
|
26
26
|
var alignYToAlignItems = theme.createResponsiveMapFn(alignYLookup);
|
|
27
27
|
|
|
28
|
-
var _excluded = ["align", "alignY", "children", "dividers"];
|
|
28
|
+
var _excluded = ["align", "alignY", "children", "data", "dividers"];
|
|
29
29
|
var Row = ts.forwardRefWithAs(function (_ref, forwardedRef) {
|
|
30
30
|
var _ref$align = _ref.align,
|
|
31
31
|
align = _ref$align === void 0 ? 'left' : _ref$align,
|
|
32
32
|
_ref$alignY = _ref.alignY,
|
|
33
33
|
alignY = _ref$alignY === void 0 ? 'stretch' : _ref$alignY,
|
|
34
34
|
children = _ref.children,
|
|
35
|
+
data = _ref.data,
|
|
35
36
|
dividers = _ref.dividers,
|
|
36
37
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
37
38
|
|
|
@@ -47,7 +48,9 @@ var Row = ts.forwardRefWithAs(function (_ref, forwardedRef) {
|
|
|
47
48
|
|
|
48
49
|
|
|
49
50
|
if (!dividers) {
|
|
50
|
-
return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({
|
|
51
|
+
return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({
|
|
52
|
+
data: data
|
|
53
|
+
}, rootProps), {}, {
|
|
51
54
|
children: children
|
|
52
55
|
}));
|
|
53
56
|
} // map over children to insert dividers
|
|
@@ -55,7 +58,9 @@ var Row = ts.forwardRefWithAs(function (_ref, forwardedRef) {
|
|
|
55
58
|
|
|
56
59
|
|
|
57
60
|
var childArray = react.Children.toArray(children);
|
|
58
|
-
return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({
|
|
61
|
+
return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({
|
|
62
|
+
data: data
|
|
63
|
+
}, rootProps), {}, {
|
|
59
64
|
children: childArray.map(function (child, idx) {
|
|
60
65
|
return /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
|
|
61
66
|
children: [dividers && idx ? /*#__PURE__*/jsxRuntime.jsx(divider.Divider, {
|
|
@@ -21,13 +21,14 @@ var alignYLookup = {
|
|
|
21
21
|
var alignToJustifyContent = createResponsiveMapFn(alignLookup);
|
|
22
22
|
var alignYToAlignItems = createResponsiveMapFn(alignYLookup);
|
|
23
23
|
|
|
24
|
-
var _excluded = ["align", "alignY", "children", "dividers"];
|
|
24
|
+
var _excluded = ["align", "alignY", "children", "data", "dividers"];
|
|
25
25
|
var Row = forwardRefWithAs(function (_ref, forwardedRef) {
|
|
26
26
|
var _ref$align = _ref.align,
|
|
27
27
|
align = _ref$align === void 0 ? 'left' : _ref$align,
|
|
28
28
|
_ref$alignY = _ref.alignY,
|
|
29
29
|
alignY = _ref$alignY === void 0 ? 'stretch' : _ref$alignY,
|
|
30
30
|
children = _ref.children,
|
|
31
|
+
data = _ref.data,
|
|
31
32
|
dividers = _ref.dividers,
|
|
32
33
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
33
34
|
|
|
@@ -43,7 +44,9 @@ var Row = forwardRefWithAs(function (_ref, forwardedRef) {
|
|
|
43
44
|
|
|
44
45
|
|
|
45
46
|
if (!dividers) {
|
|
46
|
-
return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({
|
|
47
|
+
return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({
|
|
48
|
+
data: data
|
|
49
|
+
}, rootProps), {}, {
|
|
47
50
|
children: children
|
|
48
51
|
}));
|
|
49
52
|
} // map over children to insert dividers
|
|
@@ -51,7 +54,9 @@ var Row = forwardRefWithAs(function (_ref, forwardedRef) {
|
|
|
51
54
|
|
|
52
55
|
|
|
53
56
|
var childArray = Children.toArray(children);
|
|
54
|
-
return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({
|
|
57
|
+
return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({
|
|
58
|
+
data: data
|
|
59
|
+
}, rootProps), {}, {
|
|
55
60
|
children: childArray.map(function (child, idx) {
|
|
56
61
|
return /*#__PURE__*/jsxs(Fragment, {
|
|
57
62
|
children: [dividers && idx ? /*#__PURE__*/jsx(Divider, {
|
package/package.json
CHANGED
|
@@ -1,16 +1,19 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spark-web/row",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "dist/spark-web-row.cjs.js",
|
|
6
6
|
"module": "dist/spark-web-row.esm.js",
|
|
7
|
+
"files": [
|
|
8
|
+
"dist"
|
|
9
|
+
],
|
|
7
10
|
"dependencies": {
|
|
8
11
|
"@babel/runtime": "^7.14.6",
|
|
9
12
|
"@emotion/css": "^11.7.1",
|
|
10
|
-
"@spark-web/box": "^1.0.
|
|
11
|
-
"@spark-web/divider": "^1.0.
|
|
12
|
-
"@spark-web/theme": "^
|
|
13
|
-
"@spark-web/utils": "^1.1.
|
|
13
|
+
"@spark-web/box": "^1.0.4",
|
|
14
|
+
"@spark-web/divider": "^1.0.4",
|
|
15
|
+
"@spark-web/theme": "^3.0.0",
|
|
16
|
+
"@spark-web/utils": "^1.1.2"
|
|
14
17
|
},
|
|
15
18
|
"devDependencies": {
|
|
16
19
|
"@types/react": "^17.0.12",
|
package/CHANGELOG.md
DELETED
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
# @spark-web/row
|
|
2
|
-
|
|
3
|
-
## 1.0.3
|
|
4
|
-
|
|
5
|
-
### Patch Changes
|
|
6
|
-
|
|
7
|
-
- [#42](https://github.com/brighte-labs/spark-web/pull/42)
|
|
8
|
-
[`435779a`](https://github.com/brighte-labs/spark-web/commit/435779aa42bd635bbf43e1fd41724c666402caa2)
|
|
9
|
-
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Prevent multiple
|
|
10
|
-
versions of React
|
|
11
|
-
|
|
12
|
-
- Updated dependencies
|
|
13
|
-
[[`435779a`](https://github.com/brighte-labs/spark-web/commit/435779aa42bd635bbf43e1fd41724c666402caa2)]:
|
|
14
|
-
- @spark-web/box@1.0.3
|
|
15
|
-
- @spark-web/divider@1.0.3
|
|
16
|
-
- @spark-web/theme@2.0.2
|
|
17
|
-
- @spark-web/utils@1.1.1
|
|
18
|
-
|
|
19
|
-
## 1.0.2
|
|
20
|
-
|
|
21
|
-
### Patch Changes
|
|
22
|
-
|
|
23
|
-
- [#40](https://github.com/brighte-labs/spark-web/pull/40)
|
|
24
|
-
[`062c8ab`](https://github.com/brighte-labs/spark-web/commit/062c8ab8c7b4120f8d14c269b5f7801288c678ca)
|
|
25
|
-
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Add
|
|
26
|
-
@babel/transform-runtime
|
|
27
|
-
|
|
28
|
-
- Updated dependencies
|
|
29
|
-
[[`062c8ab`](https://github.com/brighte-labs/spark-web/commit/062c8ab8c7b4120f8d14c269b5f7801288c678ca)]:
|
|
30
|
-
- @spark-web/box@1.0.2
|
|
31
|
-
- @spark-web/divider@1.0.2
|
|
32
|
-
- @spark-web/theme@2.0.1
|
|
33
|
-
- @spark-web/utils@1.0.2
|
|
34
|
-
|
|
35
|
-
## 1.0.1
|
|
36
|
-
|
|
37
|
-
### Patch Changes
|
|
38
|
-
|
|
39
|
-
- [#36](https://github.com/brighte-labs/spark-web/pull/36)
|
|
40
|
-
[`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)
|
|
41
|
-
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update Babel
|
|
42
|
-
config
|
|
43
|
-
|
|
44
|
-
- Updated dependencies
|
|
45
|
-
[[`aebff30`](https://github.com/brighte-labs/spark-web/commit/aebff30c86cb0a9db22b545c46159ce0d1c14afb),
|
|
46
|
-
[`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)]:
|
|
47
|
-
- @spark-web/theme@2.0.0
|
|
48
|
-
- @spark-web/box@1.0.1
|
|
49
|
-
- @spark-web/divider@1.0.1
|
|
50
|
-
- @spark-web/utils@1.0.1
|
|
51
|
-
|
|
52
|
-
## 1.0.0
|
|
53
|
-
|
|
54
|
-
### Major Changes
|
|
55
|
-
|
|
56
|
-
- [#27](https://github.com/brighte-labs/spark-web/pull/27)
|
|
57
|
-
[`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)
|
|
58
|
-
Thanks [@JedWatson](https://github.com/JedWatson)! - Initial Version
|
|
59
|
-
|
|
60
|
-
### Patch Changes
|
|
61
|
-
|
|
62
|
-
- Updated dependencies
|
|
63
|
-
[[`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)]:
|
|
64
|
-
- @spark-web/box@1.0.0
|
|
65
|
-
- @spark-web/divider@1.0.0
|
|
66
|
-
- @spark-web/theme@1.0.0
|
|
67
|
-
- @spark-web/utils@1.0.0
|
package/src/Row.stories.tsx
DELETED
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import type { ComponentMeta, ComponentStory } from '@storybook/react';
|
|
2
|
-
|
|
3
|
-
import { Placeholder } from '../../../docs/components/example-helpers';
|
|
4
|
-
import type { RowProps } from './Row';
|
|
5
|
-
import { Row } from './Row';
|
|
6
|
-
|
|
7
|
-
export default {
|
|
8
|
-
title: 'Page & Layout / Row',
|
|
9
|
-
component: Row,
|
|
10
|
-
} as ComponentMeta<typeof Row>;
|
|
11
|
-
|
|
12
|
-
const RowStory: ComponentStory<typeof Row> = (
|
|
13
|
-
args: Omit<RowProps, 'className'>
|
|
14
|
-
) => <Row {...args} />;
|
|
15
|
-
|
|
16
|
-
export const Default = RowStory.bind({});
|
|
17
|
-
|
|
18
|
-
Default.args = {
|
|
19
|
-
gap: 'large',
|
|
20
|
-
children: (
|
|
21
|
-
<>
|
|
22
|
-
<Placeholder height={40} />
|
|
23
|
-
<Placeholder height={40} />
|
|
24
|
-
<Placeholder height={40} />
|
|
25
|
-
</>
|
|
26
|
-
),
|
|
27
|
-
} as RowProps;
|
package/src/Row.tsx
DELETED
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
import type { BoxProps } from '@spark-web/box';
|
|
2
|
-
import { Box } from '@spark-web/box';
|
|
3
|
-
import { Divider } from '@spark-web/divider';
|
|
4
|
-
import type { ResponsiveProp } from '@spark-web/theme';
|
|
5
|
-
import { forwardRefWithAs } from '@spark-web/utils/ts';
|
|
6
|
-
import type { ReactElement } from 'react';
|
|
7
|
-
import { Children, Fragment } from 'react';
|
|
8
|
-
|
|
9
|
-
import type { Align, AlignY } from './alignment';
|
|
10
|
-
import { alignToJustifyContent, alignYToAlignItems } from './alignment';
|
|
11
|
-
|
|
12
|
-
type ValidBoxProps = Omit<
|
|
13
|
-
BoxProps,
|
|
14
|
-
'display' | 'alignItems' | 'flexDirection' | 'justifyContent' | 'flexWrap'
|
|
15
|
-
>;
|
|
16
|
-
|
|
17
|
-
export type RowProps = {
|
|
18
|
-
/** Horizontally align items within the container. */
|
|
19
|
-
align?: ResponsiveProp<Align>;
|
|
20
|
-
/** Vertically align items within the container. */
|
|
21
|
-
alignY?: ResponsiveProp<AlignY>;
|
|
22
|
-
/** Place a divider between each element. */
|
|
23
|
-
dividers?: boolean;
|
|
24
|
-
} & ValidBoxProps;
|
|
25
|
-
|
|
26
|
-
export const Row = forwardRefWithAs<'div', RowProps>(
|
|
27
|
-
(
|
|
28
|
-
{ align = 'left', alignY = 'stretch', children, dividers, ...props },
|
|
29
|
-
forwardedRef
|
|
30
|
-
) => {
|
|
31
|
-
const justifyContent = alignToJustifyContent(align);
|
|
32
|
-
const alignItems = alignYToAlignItems(alignY);
|
|
33
|
-
const rootProps = {
|
|
34
|
-
ref: forwardedRef,
|
|
35
|
-
display: 'flex',
|
|
36
|
-
alignItems,
|
|
37
|
-
justifyContent,
|
|
38
|
-
...props,
|
|
39
|
-
} as const;
|
|
40
|
-
|
|
41
|
-
// bail early w/o dividers to avoid unnecessary map
|
|
42
|
-
if (!dividers) {
|
|
43
|
-
return <Box {...rootProps}>{children}</Box>;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
// map over children to insert dividers
|
|
47
|
-
// remove falsy values before mapping, keeps the index in sync
|
|
48
|
-
const childArray = Children.toArray(children) as ReactElement[];
|
|
49
|
-
return (
|
|
50
|
-
<Box {...rootProps}>
|
|
51
|
-
{childArray.map((child, idx) => (
|
|
52
|
-
<Fragment key={child.key || idx}>
|
|
53
|
-
{dividers && idx ? <Divider vertical /> : null}
|
|
54
|
-
{child}
|
|
55
|
-
</Fragment>
|
|
56
|
-
))}
|
|
57
|
-
</Box>
|
|
58
|
-
);
|
|
59
|
-
}
|
|
60
|
-
);
|
package/src/alignment.ts
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { createResponsiveMapFn } from '@spark-web/theme';
|
|
2
|
-
|
|
3
|
-
const alignLookup = { left: 'start', center: 'center', right: 'end' } as const;
|
|
4
|
-
const alignYLookup = {
|
|
5
|
-
top: 'start',
|
|
6
|
-
center: 'center',
|
|
7
|
-
bottom: 'end',
|
|
8
|
-
stretch: 'stretch',
|
|
9
|
-
} as const;
|
|
10
|
-
|
|
11
|
-
export type Align = keyof typeof alignLookup;
|
|
12
|
-
export type AlignY = keyof typeof alignYLookup;
|
|
13
|
-
|
|
14
|
-
export const alignToJustifyContent = createResponsiveMapFn(alignLookup);
|
|
15
|
-
export const alignYToAlignItems = createResponsiveMapFn(alignYLookup);
|