@spark-web/columns 1.0.3 → 2.0.0
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 +27 -4
- package/dist/declarations/src/Columns.d.ts +8 -3
- package/dist/declarations/src/alignment.d.ts +5 -5
- package/dist/spark-web-columns.cjs.dev.js +4 -2
- package/dist/spark-web-columns.cjs.prod.js +4 -2
- package/dist/spark-web-columns.esm.js +4 -2
- package/package.json +9 -6
- package/CHANGELOG.md +0 -63
- package/src/Columns.stories.tsx +0 -27
- package/src/Columns.tsx +0 -85
- package/src/alignment.ts +0 -12
- package/src/index.ts +0 -5
package/README.md
CHANGED
|
@@ -72,15 +72,36 @@ Columns can be collapsed into a single vertical stack responsively using the
|
|
|
72
72
|
</Columns>
|
|
73
73
|
```
|
|
74
74
|
|
|
75
|
+
### Template
|
|
76
|
+
|
|
77
|
+
If you need more control over how your columns are distributed, you can use the
|
|
78
|
+
`template` prop. `template` receives an array of numbers that represent the
|
|
79
|
+
relative width of each column.
|
|
80
|
+
|
|
81
|
+
```jsx live
|
|
82
|
+
<Columns gap="small" template={[1, 3, 1]} collapseBelow="tablet">
|
|
83
|
+
<Box border="field" padding="small">
|
|
84
|
+
<Text>nav</Text>
|
|
85
|
+
</Box>
|
|
86
|
+
<Box border="field" padding="small">
|
|
87
|
+
<Text>main</Text>
|
|
88
|
+
</Box>
|
|
89
|
+
<Box border="field" padding="small">
|
|
90
|
+
<Text>aside</Text>
|
|
91
|
+
</Box>
|
|
92
|
+
</Columns>
|
|
93
|
+
```
|
|
94
|
+
|
|
75
95
|
## Props
|
|
76
96
|
|
|
77
97
|
| Prop | Type | Default | Description |
|
|
78
98
|
| -------------- | ------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------- |
|
|
79
99
|
| alignY? | [ResponsiveProp][responsive-prop]\<AlignY> | | Vertically align items within the container. |
|
|
80
100
|
| children | React.ReactNode | | Children elements to be rendered within the column component representing each column. |
|
|
81
|
-
| collapseBelow? | [ResponsiveRangeProps][responsive-range-props]
|
|
101
|
+
| collapseBelow? | [ResponsiveRangeProps][responsive-range-props]['below'] | | At which breakpoint, if amy, should the columns collapse. |
|
|
82
102
|
| gap? | [Gap][gap] | | The size of the gap between each column. |
|
|
83
103
|
| template? | number[] | | Define the relative width of each column. By default each column is the same width. |
|
|
104
|
+
| data? | [DataAttributeMap][data-attribute-map] | | Sets data attributes on the component. |
|
|
84
105
|
|
|
85
106
|
[`Box`](/package/box) props are also included as `Column` props and are not
|
|
86
107
|
listed here (excluding `display`, `alignItems`, `gap`, `flexDirection`,
|
|
@@ -89,8 +110,10 @@ listed here (excluding `display`, `alignItems`, `gap`, `flexDirection`,
|
|
|
89
110
|
Extra props are passed into the underlying [`Box`](/package/box) component.
|
|
90
111
|
|
|
91
112
|
[responsive-prop]:
|
|
92
|
-
https://
|
|
113
|
+
https://github.com/brighte-labs/spark-web/blob/e503bea4f7668d187ec7a78f99c5ed374417588b/packages/theme/src/themeUtils.ts#L11
|
|
93
114
|
[responsive-range-props]:
|
|
94
|
-
https://
|
|
115
|
+
https://github.com/brighte-labs/spark-web/blob/e503bea4f7668d187ec7a78f99c5ed374417588b/packages/theme/src/themeUtils.ts#L130
|
|
95
116
|
[gap]:
|
|
96
|
-
https://
|
|
117
|
+
https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/columns/src/Columns.tsx#L17
|
|
118
|
+
[data-attribute-map]:
|
|
119
|
+
https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import type { BoxProps } from '@spark-web/box';
|
|
2
2
|
import type { BrighteTheme, ResponsiveProp, ResponsiveRangeProps } from '@spark-web/theme';
|
|
3
|
+
import type { DataAttributeMap } from '@spark-web/utils/internal';
|
|
3
4
|
import type { ReactNode } from 'react';
|
|
4
5
|
import type { AlignY } from './alignment';
|
|
5
6
|
declare type Gap = ResponsiveProp<keyof Omit<BrighteTheme['spacing'], 'none'>>;
|
|
6
|
-
declare type ValidBoxProps = Omit<BoxProps, 'display' | 'alignItems' | 'gap' | 'flexDirection' | 'justifyContent' | 'flexWrap'>;
|
|
7
|
+
declare type ValidBoxProps = Omit<BoxProps, 'display' | 'alignItems' | 'gap' | 'flexDirection' | 'justifyContent' | 'flexWrap' | 'dangerouslySetInnerHTML'>;
|
|
7
8
|
export declare type ColumnsProps = {
|
|
8
9
|
/** Vertically align items within the container. */
|
|
9
10
|
alignY?: ResponsiveProp<AlignY>;
|
|
@@ -11,6 +12,8 @@ export declare type ColumnsProps = {
|
|
|
11
12
|
children: ReactNode;
|
|
12
13
|
/** At which breakpoint, if any, should the columns collapse. */
|
|
13
14
|
collapseBelow?: ResponsiveRangeProps['below'];
|
|
15
|
+
/** Sets data attributes on the component. */
|
|
16
|
+
data?: DataAttributeMap;
|
|
14
17
|
/** The size of the gap between each column. */
|
|
15
18
|
gap?: Gap;
|
|
16
19
|
/** Define the relative width of each column. By default each column is the same width. */
|
|
@@ -18,14 +21,16 @@ export declare type ColumnsProps = {
|
|
|
18
21
|
} & ValidBoxProps;
|
|
19
22
|
export declare const Columns: <Comp extends import("react").ElementType<any> = "div">(props: {
|
|
20
23
|
as?: Comp | undefined;
|
|
21
|
-
ref?: import("react").Ref<Comp extends "symbol" | "clipPath" | "filter" | "mask" | "marker" | "
|
|
24
|
+
ref?: import("react").Ref<Comp extends "symbol" | "clipPath" | "filter" | "mask" | "marker" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap | "set" ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "clipPath" | "filter" | "mask" | "marker" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "set">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
|
|
22
25
|
} & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & {
|
|
23
26
|
/** Vertically align items within the container. */
|
|
24
|
-
alignY?: ResponsiveProp<"bottom" | "top" | "
|
|
27
|
+
alignY?: ResponsiveProp<"bottom" | "top" | "center" | "stretch"> | undefined;
|
|
25
28
|
/** Elements representing each column. */
|
|
26
29
|
children: ReactNode;
|
|
27
30
|
/** At which breakpoint, if any, should the columns collapse. */
|
|
28
31
|
collapseBelow?: ResponsiveRangeProps['below'];
|
|
32
|
+
/** Sets data attributes on the component. */
|
|
33
|
+
data?: DataAttributeMap | undefined;
|
|
29
34
|
/** The size of the gap between each column. */
|
|
30
35
|
gap?: Gap | undefined;
|
|
31
36
|
/** Define the relative width of each column. By default each column is the same width. */
|
|
@@ -5,10 +5,10 @@ declare const alignYLookup: {
|
|
|
5
5
|
readonly stretch: "stretch";
|
|
6
6
|
};
|
|
7
7
|
export declare type AlignY = keyof typeof alignYLookup;
|
|
8
|
-
export declare const alignYToAlignItems: (prop?: import("@spark-web/theme").ResponsiveProp<"bottom" | "top" | "
|
|
9
|
-
mobile: "
|
|
10
|
-
tablet: "
|
|
11
|
-
desktop: "
|
|
12
|
-
wide: "
|
|
8
|
+
export declare const alignYToAlignItems: (prop?: import("@spark-web/theme").ResponsiveProp<"bottom" | "top" | "center" | "stretch"> | undefined) => "center" | "stretch" | "start" | "end" | {
|
|
9
|
+
mobile: "center" | "stretch" | "start" | "end" | undefined;
|
|
10
|
+
tablet: "center" | "stretch" | "start" | "end" | undefined;
|
|
11
|
+
desktop: "center" | "stretch" | "start" | "end" | undefined;
|
|
12
|
+
wide: "center" | "stretch" | "start" | "end" | undefined;
|
|
13
13
|
} | undefined;
|
|
14
14
|
export {};
|
|
@@ -20,11 +20,12 @@ var alignYLookup = {
|
|
|
20
20
|
};
|
|
21
21
|
var alignYToAlignItems = theme.createResponsiveMapFn(alignYLookup);
|
|
22
22
|
|
|
23
|
-
var _excluded = ["alignY", "collapseBelow", "gap", "template"];
|
|
23
|
+
var _excluded = ["alignY", "collapseBelow", "data", "gap", "template"];
|
|
24
24
|
var Columns = ts.forwardRefWithAs(function (_ref, forwardedRef) {
|
|
25
25
|
var _ref$alignY = _ref.alignY,
|
|
26
26
|
alignY = _ref$alignY === void 0 ? 'top' : _ref$alignY,
|
|
27
27
|
collapseBelow = _ref.collapseBelow,
|
|
28
|
+
data = _ref.data,
|
|
28
29
|
gap = _ref.gap,
|
|
29
30
|
template = _ref.template,
|
|
30
31
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
@@ -59,7 +60,8 @@ var Columns = ts.forwardRefWithAs(function (_ref, forwardedRef) {
|
|
|
59
60
|
'> *': {
|
|
60
61
|
minWidth: 0
|
|
61
62
|
}
|
|
62
|
-
}))
|
|
63
|
+
})),
|
|
64
|
+
data: data
|
|
63
65
|
}, props));
|
|
64
66
|
});
|
|
65
67
|
|
|
@@ -20,11 +20,12 @@ var alignYLookup = {
|
|
|
20
20
|
};
|
|
21
21
|
var alignYToAlignItems = theme.createResponsiveMapFn(alignYLookup);
|
|
22
22
|
|
|
23
|
-
var _excluded = ["alignY", "collapseBelow", "gap", "template"];
|
|
23
|
+
var _excluded = ["alignY", "collapseBelow", "data", "gap", "template"];
|
|
24
24
|
var Columns = ts.forwardRefWithAs(function (_ref, forwardedRef) {
|
|
25
25
|
var _ref$alignY = _ref.alignY,
|
|
26
26
|
alignY = _ref$alignY === void 0 ? 'top' : _ref$alignY,
|
|
27
27
|
collapseBelow = _ref.collapseBelow,
|
|
28
|
+
data = _ref.data,
|
|
28
29
|
gap = _ref.gap,
|
|
29
30
|
template = _ref.template,
|
|
30
31
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
@@ -59,7 +60,8 @@ var Columns = ts.forwardRefWithAs(function (_ref, forwardedRef) {
|
|
|
59
60
|
'> *': {
|
|
60
61
|
minWidth: 0
|
|
61
62
|
}
|
|
62
|
-
}))
|
|
63
|
+
})),
|
|
64
|
+
data: data
|
|
63
65
|
}, props));
|
|
64
66
|
});
|
|
65
67
|
|
|
@@ -16,11 +16,12 @@ var alignYLookup = {
|
|
|
16
16
|
};
|
|
17
17
|
var alignYToAlignItems = createResponsiveMapFn(alignYLookup);
|
|
18
18
|
|
|
19
|
-
var _excluded = ["alignY", "collapseBelow", "gap", "template"];
|
|
19
|
+
var _excluded = ["alignY", "collapseBelow", "data", "gap", "template"];
|
|
20
20
|
var Columns = forwardRefWithAs(function (_ref, forwardedRef) {
|
|
21
21
|
var _ref$alignY = _ref.alignY,
|
|
22
22
|
alignY = _ref$alignY === void 0 ? 'top' : _ref$alignY,
|
|
23
23
|
collapseBelow = _ref.collapseBelow,
|
|
24
|
+
data = _ref.data,
|
|
24
25
|
gap = _ref.gap,
|
|
25
26
|
template = _ref.template,
|
|
26
27
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
@@ -55,7 +56,8 @@ var Columns = forwardRefWithAs(function (_ref, forwardedRef) {
|
|
|
55
56
|
'> *': {
|
|
56
57
|
minWidth: 0
|
|
57
58
|
}
|
|
58
|
-
}))
|
|
59
|
+
})),
|
|
60
|
+
data: data
|
|
59
61
|
}, props));
|
|
60
62
|
});
|
|
61
63
|
|
package/package.json
CHANGED
|
@@ -1,15 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spark-web/columns",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "dist/spark-web-columns.cjs.js",
|
|
6
6
|
"module": "dist/spark-web-columns.esm.js",
|
|
7
|
+
"files": [
|
|
8
|
+
"dist"
|
|
9
|
+
],
|
|
7
10
|
"dependencies": {
|
|
8
|
-
"@babel/runtime": "^7.
|
|
9
|
-
"@emotion/css": "^11.
|
|
10
|
-
"@spark-web/box": "^1.0.
|
|
11
|
-
"@spark-web/theme": "^
|
|
12
|
-
"@spark-web/utils": "^1.1.
|
|
11
|
+
"@babel/runtime": "^7.18.0",
|
|
12
|
+
"@emotion/css": "^11.9.0",
|
|
13
|
+
"@spark-web/box": "^1.0.5",
|
|
14
|
+
"@spark-web/theme": "^3.0.1",
|
|
15
|
+
"@spark-web/utils": "^1.1.3"
|
|
13
16
|
},
|
|
14
17
|
"devDependencies": {
|
|
15
18
|
"@types/react": "^17.0.12",
|
package/CHANGELOG.md
DELETED
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
# @spark-web/columns
|
|
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/theme@2.0.2
|
|
16
|
-
- @spark-web/utils@1.1.1
|
|
17
|
-
|
|
18
|
-
## 1.0.2
|
|
19
|
-
|
|
20
|
-
### Patch Changes
|
|
21
|
-
|
|
22
|
-
- [#40](https://github.com/brighte-labs/spark-web/pull/40)
|
|
23
|
-
[`062c8ab`](https://github.com/brighte-labs/spark-web/commit/062c8ab8c7b4120f8d14c269b5f7801288c678ca)
|
|
24
|
-
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Add
|
|
25
|
-
@babel/transform-runtime
|
|
26
|
-
|
|
27
|
-
- Updated dependencies
|
|
28
|
-
[[`062c8ab`](https://github.com/brighte-labs/spark-web/commit/062c8ab8c7b4120f8d14c269b5f7801288c678ca)]:
|
|
29
|
-
- @spark-web/box@1.0.2
|
|
30
|
-
- @spark-web/theme@2.0.1
|
|
31
|
-
- @spark-web/utils@1.0.2
|
|
32
|
-
|
|
33
|
-
## 1.0.1
|
|
34
|
-
|
|
35
|
-
### Patch Changes
|
|
36
|
-
|
|
37
|
-
- [#36](https://github.com/brighte-labs/spark-web/pull/36)
|
|
38
|
-
[`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)
|
|
39
|
-
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update Babel
|
|
40
|
-
config
|
|
41
|
-
|
|
42
|
-
- Updated dependencies
|
|
43
|
-
[[`aebff30`](https://github.com/brighte-labs/spark-web/commit/aebff30c86cb0a9db22b545c46159ce0d1c14afb),
|
|
44
|
-
[`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)]:
|
|
45
|
-
- @spark-web/theme@2.0.0
|
|
46
|
-
- @spark-web/box@1.0.1
|
|
47
|
-
- @spark-web/utils@1.0.1
|
|
48
|
-
|
|
49
|
-
## 1.0.0
|
|
50
|
-
|
|
51
|
-
### Major Changes
|
|
52
|
-
|
|
53
|
-
- [#27](https://github.com/brighte-labs/spark-web/pull/27)
|
|
54
|
-
[`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)
|
|
55
|
-
Thanks [@JedWatson](https://github.com/JedWatson)! - Initial Version
|
|
56
|
-
|
|
57
|
-
### Patch Changes
|
|
58
|
-
|
|
59
|
-
- Updated dependencies
|
|
60
|
-
[[`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)]:
|
|
61
|
-
- @spark-web/box@1.0.0
|
|
62
|
-
- @spark-web/theme@1.0.0
|
|
63
|
-
- @spark-web/utils@1.0.0
|
package/src/Columns.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 { ColumnsProps } from './Columns';
|
|
5
|
-
import { Columns } from './Columns';
|
|
6
|
-
|
|
7
|
-
export default {
|
|
8
|
-
title: 'Page & Layout / Columns',
|
|
9
|
-
component: Columns,
|
|
10
|
-
} as ComponentMeta<typeof Columns>;
|
|
11
|
-
|
|
12
|
-
const ColumnsStory: ComponentStory<typeof Columns> = (
|
|
13
|
-
args: Omit<ColumnsProps, 'className'>
|
|
14
|
-
) => <Columns {...args} />;
|
|
15
|
-
|
|
16
|
-
export const Default = ColumnsStory.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 ColumnsProps;
|
package/src/Columns.tsx
DELETED
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
import { css } from '@emotion/css';
|
|
2
|
-
import type { BoxProps } from '@spark-web/box';
|
|
3
|
-
import { Box } from '@spark-web/box';
|
|
4
|
-
import type {
|
|
5
|
-
BrighteTheme,
|
|
6
|
-
ResponsiveProp,
|
|
7
|
-
ResponsiveRangeProps,
|
|
8
|
-
} from '@spark-web/theme';
|
|
9
|
-
import { useTheme } from '@spark-web/theme';
|
|
10
|
-
import { forwardRefWithAs } from '@spark-web/utils/ts';
|
|
11
|
-
import type { ReactNode } from 'react';
|
|
12
|
-
import { Children } from 'react';
|
|
13
|
-
|
|
14
|
-
import type { AlignY } from './alignment';
|
|
15
|
-
import { alignYToAlignItems } from './alignment';
|
|
16
|
-
|
|
17
|
-
type Gap = ResponsiveProp<keyof Omit<BrighteTheme['spacing'], 'none'>>;
|
|
18
|
-
type ValidBoxProps = Omit<
|
|
19
|
-
BoxProps,
|
|
20
|
-
| 'display'
|
|
21
|
-
| 'alignItems'
|
|
22
|
-
| 'gap'
|
|
23
|
-
| 'flexDirection'
|
|
24
|
-
| 'justifyContent'
|
|
25
|
-
| 'flexWrap'
|
|
26
|
-
>;
|
|
27
|
-
|
|
28
|
-
export type ColumnsProps = {
|
|
29
|
-
/** Vertically align items within the container. */
|
|
30
|
-
alignY?: ResponsiveProp<AlignY>;
|
|
31
|
-
/** Elements representing each column. */
|
|
32
|
-
children: ReactNode;
|
|
33
|
-
/** At which breakpoint, if any, should the columns collapse. */
|
|
34
|
-
collapseBelow?: ResponsiveRangeProps['below'];
|
|
35
|
-
/** The size of the gap between each column. */
|
|
36
|
-
gap?: Gap;
|
|
37
|
-
/** Define the relative width of each column. By default each column is the same width. */
|
|
38
|
-
template?: number[];
|
|
39
|
-
} & ValidBoxProps;
|
|
40
|
-
|
|
41
|
-
export const Columns = forwardRefWithAs<'div', ColumnsProps>(
|
|
42
|
-
(
|
|
43
|
-
{ alignY = 'top', collapseBelow, gap, template, ...props },
|
|
44
|
-
forwardedRef
|
|
45
|
-
) => {
|
|
46
|
-
const { spacing, utils } = useTheme();
|
|
47
|
-
const alignItems = alignYToAlignItems(alignY);
|
|
48
|
-
const count = Children.count(props.children);
|
|
49
|
-
const gridTemplateColumns = template
|
|
50
|
-
? template.map(c => `${c}fr`).join(' ')
|
|
51
|
-
: `repeat(${count}, 1fr)`;
|
|
52
|
-
|
|
53
|
-
const [
|
|
54
|
-
collapseOnMobile,
|
|
55
|
-
collapseOnTablet,
|
|
56
|
-
collapseOnDesktop,
|
|
57
|
-
collapseOnWide,
|
|
58
|
-
] = utils.responsiveRange({ below: collapseBelow });
|
|
59
|
-
|
|
60
|
-
return (
|
|
61
|
-
<Box
|
|
62
|
-
ref={forwardedRef}
|
|
63
|
-
className={css(
|
|
64
|
-
utils.resolveResponsiveProps({
|
|
65
|
-
alignItems,
|
|
66
|
-
display: 'grid',
|
|
67
|
-
gap: utils.mapResponsiveScale(gap, spacing),
|
|
68
|
-
gridTemplateColumns: collapseBelow
|
|
69
|
-
? utils.optimizeResponsiveArray([
|
|
70
|
-
collapseOnMobile ? null : gridTemplateColumns,
|
|
71
|
-
collapseOnTablet ? null : gridTemplateColumns,
|
|
72
|
-
collapseOnDesktop ? null : gridTemplateColumns,
|
|
73
|
-
collapseOnWide ? null : gridTemplateColumns,
|
|
74
|
-
])
|
|
75
|
-
: gridTemplateColumns,
|
|
76
|
-
|
|
77
|
-
// fix flex overflow bug that prevents text truncation
|
|
78
|
-
'> *': { minWidth: 0 },
|
|
79
|
-
})
|
|
80
|
-
)}
|
|
81
|
-
{...props}
|
|
82
|
-
/>
|
|
83
|
-
);
|
|
84
|
-
}
|
|
85
|
-
);
|
package/src/alignment.ts
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { createResponsiveMapFn } from '@spark-web/theme';
|
|
2
|
-
|
|
3
|
-
const alignYLookup = {
|
|
4
|
-
top: 'start',
|
|
5
|
-
center: 'center',
|
|
6
|
-
bottom: 'end',
|
|
7
|
-
stretch: 'stretch',
|
|
8
|
-
} as const;
|
|
9
|
-
|
|
10
|
-
export type AlignY = keyof typeof alignYLookup;
|
|
11
|
-
|
|
12
|
-
export const alignYToAlignItems = createResponsiveMapFn(alignYLookup);
|