@sproutsocial/seeds-react-grid 0.1.1 → 0.2.5
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/.turbo/turbo-build.log +10 -10
- package/CHANGELOG.md +59 -0
- package/dist/esm/index.js +11 -7
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.mts +18 -7
- package/dist/index.d.ts +18 -7
- package/dist/index.js +11 -7
- package/dist/index.js.map +1 -1
- package/package.json +4 -4
- package/src/Grid.stories.tsx +62 -2
- package/src/Grid.tsx +3 -3
- package/src/GridTypes.ts +20 -6
- package/src/__tests__/Grid.typetest.tsx +30 -0
- package/src/__tests__/grid.test.tsx +60 -0
- package/src/utils.ts +19 -6
package/.turbo/turbo-build.log
CHANGED
|
@@ -8,14 +8,14 @@ $ tsup --dts
|
|
|
8
8
|
[34mCLI[39m Cleaning output folder
|
|
9
9
|
[34mCJS[39m Build start
|
|
10
10
|
[34mESM[39m Build start
|
|
11
|
-
[32mCJS[39m [1mdist/index.js [22m[32m3.
|
|
12
|
-
[32mCJS[39m [1mdist/index.js.map [22m[
|
|
13
|
-
[32mCJS[39m ⚡️ Build success in
|
|
14
|
-
[32mESM[39m [1mdist/esm/index.js [22m[32m1.
|
|
15
|
-
[32mESM[39m [1mdist/esm/index.js.map [22m[
|
|
16
|
-
[32mESM[39m ⚡️ Build success in
|
|
11
|
+
[32mCJS[39m [1mdist/index.js [22m[32m3.71 KB[39m
|
|
12
|
+
[32mCJS[39m [1mdist/index.js.map [22m[32m5.23 KB[39m
|
|
13
|
+
[32mCJS[39m ⚡️ Build success in 102ms
|
|
14
|
+
[32mESM[39m [1mdist/esm/index.js [22m[32m1.84 KB[39m
|
|
15
|
+
[32mESM[39m [1mdist/esm/index.js.map [22m[32m5.11 KB[39m
|
|
16
|
+
[32mESM[39m ⚡️ Build success in 102ms
|
|
17
17
|
[34mDTS[39m Build start
|
|
18
|
-
[32mDTS[39m ⚡️ Build success in
|
|
19
|
-
[32mDTS[39m [1mdist/index.d.ts [22m[32m1.
|
|
20
|
-
[32mDTS[39m [1mdist/index.d.mts [22m[32m1.
|
|
21
|
-
Done in
|
|
18
|
+
[32mDTS[39m ⚡️ Build success in 5812ms
|
|
19
|
+
[32mDTS[39m [1mdist/index.d.ts [22m[32m1.86 KB[39m
|
|
20
|
+
[32mDTS[39m [1mdist/index.d.mts [22m[32m1.86 KB[39m
|
|
21
|
+
Done in 7.70s.
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,64 @@
|
|
|
1
1
|
# @sproutsocial/seeds-react-grid
|
|
2
2
|
|
|
3
|
+
## 0.2.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [5892f44]
|
|
8
|
+
- @sproutsocial/seeds-react-system-props@3.1.1
|
|
9
|
+
- @sproutsocial/seeds-react-box@1.1.21
|
|
10
|
+
|
|
11
|
+
## 0.2.4
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- Updated dependencies [5114a32]
|
|
16
|
+
- @sproutsocial/seeds-react-theme@4.1.0
|
|
17
|
+
- @sproutsocial/seeds-react-box@1.1.20
|
|
18
|
+
|
|
19
|
+
## 0.2.3
|
|
20
|
+
|
|
21
|
+
### Patch Changes
|
|
22
|
+
|
|
23
|
+
- Updated dependencies [132ef9d]
|
|
24
|
+
- Updated dependencies [132ef9d]
|
|
25
|
+
- @sproutsocial/seeds-react-theme@4.0.0
|
|
26
|
+
- @sproutsocial/seeds-react-system-props@3.1.0
|
|
27
|
+
- @sproutsocial/seeds-react-box@1.1.19
|
|
28
|
+
|
|
29
|
+
## 0.2.2
|
|
30
|
+
|
|
31
|
+
### Patch Changes
|
|
32
|
+
|
|
33
|
+
- Updated dependencies [47c62b3]
|
|
34
|
+
- @sproutsocial/seeds-react-theme@3.7.1
|
|
35
|
+
- @sproutsocial/seeds-react-box@1.1.18
|
|
36
|
+
|
|
37
|
+
## 0.2.1
|
|
38
|
+
|
|
39
|
+
### Patch Changes
|
|
40
|
+
|
|
41
|
+
- Updated dependencies [06da9c2]
|
|
42
|
+
- @sproutsocial/seeds-react-theme@3.7.0
|
|
43
|
+
- @sproutsocial/seeds-react-box@1.1.17
|
|
44
|
+
|
|
45
|
+
## 0.2.0
|
|
46
|
+
|
|
47
|
+
### Minor Changes
|
|
48
|
+
|
|
49
|
+
- a08b705: Gap values can now be passed an object of responsive values
|
|
50
|
+
|
|
51
|
+
### Patch Changes
|
|
52
|
+
|
|
53
|
+
- 4ba8720: Fix `breakpoints` alias typing so consumers can import `TypeBreakpoint` (and use `theme.breakpoints`) without type errors.
|
|
54
|
+
|
|
55
|
+
- `theme.breakpoints.sm/md/lg/xl` are now CSS length strings (e.g. `"640px"`) instead of raw numbers. Array entries (`breakpoints[0]`...) are unchanged during the migration to the new scale.
|
|
56
|
+
- `newBreakpoints` is no longer exported from the theme package — consumers should use `theme.breakpoints.sm/md/lg/xl` instead. Grid media queries updated accordingly.
|
|
57
|
+
|
|
58
|
+
- Updated dependencies [4ba8720]
|
|
59
|
+
- @sproutsocial/seeds-react-theme@3.6.2
|
|
60
|
+
- @sproutsocial/seeds-react-box@1.1.16
|
|
61
|
+
|
|
3
62
|
## 0.1.1
|
|
4
63
|
|
|
5
64
|
### Patch Changes
|
package/dist/esm/index.js
CHANGED
|
@@ -6,7 +6,11 @@ import Box from "@sproutsocial/seeds-react-box";
|
|
|
6
6
|
// src/utils.ts
|
|
7
7
|
import { css } from "styled-components";
|
|
8
8
|
import { theme } from "@sproutsocial/seeds-react-theme";
|
|
9
|
-
var {
|
|
9
|
+
var { breakpoints } = theme;
|
|
10
|
+
var toResponsiveGapObject = (value) => {
|
|
11
|
+
if (typeof value !== "object") return value;
|
|
12
|
+
return value;
|
|
13
|
+
};
|
|
10
14
|
var getResponsiveStyles = (columns = 1) => {
|
|
11
15
|
if (typeof columns === "number") {
|
|
12
16
|
return css`
|
|
@@ -16,22 +20,22 @@ var getResponsiveStyles = (columns = 1) => {
|
|
|
16
20
|
return css`
|
|
17
21
|
grid-template-columns: repeat(1, 1fr);
|
|
18
22
|
|
|
19
|
-
@media (min-width: ${
|
|
23
|
+
@media (min-width: ${breakpoints.sm}) {
|
|
20
24
|
grid-template-columns: repeat(${columns.sm || 1}, 1fr);
|
|
21
25
|
}
|
|
22
26
|
|
|
23
|
-
@media (min-width: ${
|
|
27
|
+
@media (min-width: ${breakpoints.md}) {
|
|
24
28
|
grid-template-columns: repeat(${columns.md || columns.sm || 1}, 1fr);
|
|
25
29
|
}
|
|
26
30
|
|
|
27
|
-
@media (min-width: ${
|
|
31
|
+
@media (min-width: ${breakpoints.lg}) {
|
|
28
32
|
grid-template-columns: repeat(
|
|
29
33
|
${columns.lg || columns.md || columns.sm || 1},
|
|
30
34
|
1fr
|
|
31
35
|
);
|
|
32
36
|
}
|
|
33
37
|
|
|
34
|
-
@media (min-width: ${
|
|
38
|
+
@media (min-width: ${breakpoints.xl}) {
|
|
35
39
|
grid-template-columns: repeat(
|
|
36
40
|
${columns.xl || columns.lg || columns.md || columns.sm || 1},
|
|
37
41
|
1fr
|
|
@@ -57,8 +61,8 @@ var Grid = ({
|
|
|
57
61
|
Container,
|
|
58
62
|
{
|
|
59
63
|
display: "grid",
|
|
60
|
-
rowGap: rowGap ?? gap,
|
|
61
|
-
columnGap: columnGap ?? gap,
|
|
64
|
+
rowGap: toResponsiveGapObject(rowGap ?? gap),
|
|
65
|
+
columnGap: toResponsiveGapObject(columnGap ?? gap),
|
|
62
66
|
$columns: columns,
|
|
63
67
|
className,
|
|
64
68
|
children
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Grid.tsx","../../src/utils.ts","../../src/GridTypes.ts","../../src/index.ts"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { ContainerProps, GridProps } from \"./GridTypes\";\nimport { getResponsiveStyles } from \"./utils\";\n\nconst Container = styled(Box)<ContainerProps>`\n ${(props) => getResponsiveStyles(props.$columns)}\n`;\n\nconst Grid: React.FC<GridProps> = ({\n columns = 1,\n gap = 400,\n rowGap,\n columnGap,\n children,\n className,\n}) => {\n return (\n <Container\n display=\"grid\"\n rowGap={rowGap ?? gap}\n columnGap={columnGap ?? gap}\n $columns={columns}\n className={className}\n >\n {children}\n </Container>\n );\n};\n\nexport default Grid;\n","import type {
|
|
1
|
+
{"version":3,"sources":["../../src/Grid.tsx","../../src/utils.ts","../../src/GridTypes.ts","../../src/index.ts"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { ContainerProps, GridProps } from \"./GridTypes\";\nimport { getResponsiveStyles, toResponsiveGapObject } from \"./utils\";\n\nconst Container = styled(Box)<ContainerProps>`\n ${(props) => getResponsiveStyles(props.$columns)}\n`;\n\nconst Grid: React.FC<GridProps> = ({\n columns = 1,\n gap = 400,\n rowGap,\n columnGap,\n children,\n className,\n}) => {\n return (\n <Container\n display=\"grid\"\n rowGap={toResponsiveGapObject(rowGap ?? gap)}\n columnGap={toResponsiveGapObject(columnGap ?? gap)}\n $columns={columns}\n className={className}\n >\n {children}\n </Container>\n );\n};\n\nexport default Grid;\n","import type {\n GapValue,\n ResponsiveGapValue,\n ResponsiveValue,\n} from \"./GridTypes\";\nimport { css } from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\n\nconst { breakpoints } = theme;\n\nexport const toResponsiveGapObject = (\n value: ResponsiveGapValue\n):\n | GapValue\n | { sm?: GapValue; md?: GapValue; lg?: GapValue; xl?: GapValue } => {\n if (typeof value !== \"object\") return value;\n return value;\n};\n\nexport const getResponsiveStyles = (columns: ResponsiveValue = 1) => {\n if (typeof columns === \"number\") {\n return css`\n grid-template-columns: repeat(${columns}, 1fr);\n `;\n }\n\n return css`\n grid-template-columns: repeat(1, 1fr);\n\n @media (min-width: ${breakpoints.sm}) {\n grid-template-columns: repeat(${columns.sm || 1}, 1fr);\n }\n\n @media (min-width: ${breakpoints.md}) {\n grid-template-columns: repeat(${columns.md || columns.sm || 1}, 1fr);\n }\n\n @media (min-width: ${breakpoints.lg}) {\n grid-template-columns: repeat(\n ${columns.lg || columns.md || columns.sm || 1},\n 1fr\n );\n }\n\n @media (min-width: ${breakpoints.xl}) {\n grid-template-columns: repeat(\n ${columns.xl || columns.lg || columns.md || columns.sm || 1},\n 1fr\n );\n }\n `;\n};\n","import type { TypeSpace } from \"@sproutsocial/seeds-react-theme\";\nimport * as React from \"react\";\n\nexport type ResponsiveValue =\n | number\n | {\n sm?: number;\n md?: number;\n lg?: number;\n xl?: number;\n };\n\n/**\n * Gap value that can be either:\n * - A space scale value from the theme (0, 100, 200, 300, 350, 400, 450, 500, 600)\n * - A pixel string value (e.g., \"16px\", \"20px\")\n */\nexport type GapValue = keyof TypeSpace | (string & {});\n\n/**\n * Responsive gap value that can be either:\n * - A single GapValue applied at all breakpoints\n * - An object with optional breakpoint keys (sm, md, lg, xl) for responsive values\n */\nexport type ResponsiveGapValue =\n | GapValue\n | {\n sm?: GapValue;\n md?: GapValue;\n lg?: GapValue;\n xl?: GapValue;\n };\n\nexport interface ContainerProps {\n $columns?: ResponsiveValue;\n}\n\nexport interface GridProps {\n /** Number of columns (can be responsive) */\n columns?: ResponsiveValue;\n /** Gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., \"16px\"), or responsive object (e.g., { sm: 400, md: 500 }) */\n gap?: ResponsiveGapValue;\n /** Row gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., \"16px\"), or responsive object (e.g., { sm: 400, md: 500 }) */\n rowGap?: ResponsiveGapValue;\n /** Column gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., \"16px\"), or responsive object (e.g., { sm: 400, md: 500 }) */\n columnGap?: ResponsiveGapValue;\n /** Children elements to display in the grid */\n children?: React.ReactNode;\n /** Custom className */\n className?: string;\n}\n","import Grid from \"./Grid\";\n\nexport default Grid;\nexport { Grid };\nexport * from \"./GridTypes\";\n"],"mappings":";AAAA,OAAkB;AAClB,OAAO,YAAY;AACnB,OAAO,SAAS;;;ACGhB,SAAS,WAAW;AACpB,SAAS,aAAa;AAEtB,IAAM,EAAE,YAAY,IAAI;AAEjB,IAAM,wBAAwB,CACnC,UAGoE;AACpE,MAAI,OAAO,UAAU,SAAU,QAAO;AACtC,SAAO;AACT;AAEO,IAAM,sBAAsB,CAAC,UAA2B,MAAM;AACnE,MAAI,OAAO,YAAY,UAAU;AAC/B,WAAO;AAAA,sCAC2B,OAAO;AAAA;AAAA,EAE3C;AAEA,SAAO;AAAA;AAAA;AAAA,yBAGgB,YAAY,EAAE;AAAA,sCACD,QAAQ,MAAM,CAAC;AAAA;AAAA;AAAA,yBAG5B,YAAY,EAAE;AAAA,sCACD,QAAQ,MAAM,QAAQ,MAAM,CAAC;AAAA;AAAA;AAAA,yBAG1C,YAAY,EAAE;AAAA;AAAA,UAE7B,QAAQ,MAAM,QAAQ,MAAM,QAAQ,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,yBAK5B,YAAY,EAAE;AAAA;AAAA,UAE7B,QAAQ,MAAM,QAAQ,MAAM,QAAQ,MAAM,QAAQ,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAKnE;;;ADhCI;AAbJ,IAAM,YAAY,OAAO,GAAG;AAAA,IACxB,CAAC,UAAU,oBAAoB,MAAM,QAAQ,CAAC;AAAA;AAGlD,IAAM,OAA4B,CAAC;AAAA,EACjC,UAAU;AAAA,EACV,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,QAAQ,sBAAsB,UAAU,GAAG;AAAA,MAC3C,WAAW,sBAAsB,aAAa,GAAG;AAAA,MACjD,UAAU;AAAA,MACV;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,eAAQ;;;AE9Bf,OAAuB;;;ACCvB,IAAO,gBAAQ;","names":[]}
|
package/dist/index.d.mts
CHANGED
|
@@ -14,18 +14,29 @@ type ResponsiveValue = number | {
|
|
|
14
14
|
* - A pixel string value (e.g., "16px", "20px")
|
|
15
15
|
*/
|
|
16
16
|
type GapValue = keyof TypeSpace | (string & {});
|
|
17
|
+
/**
|
|
18
|
+
* Responsive gap value that can be either:
|
|
19
|
+
* - A single GapValue applied at all breakpoints
|
|
20
|
+
* - An object with optional breakpoint keys (sm, md, lg, xl) for responsive values
|
|
21
|
+
*/
|
|
22
|
+
type ResponsiveGapValue = GapValue | {
|
|
23
|
+
sm?: GapValue;
|
|
24
|
+
md?: GapValue;
|
|
25
|
+
lg?: GapValue;
|
|
26
|
+
xl?: GapValue;
|
|
27
|
+
};
|
|
17
28
|
interface ContainerProps {
|
|
18
29
|
$columns?: ResponsiveValue;
|
|
19
30
|
}
|
|
20
31
|
interface GridProps {
|
|
21
32
|
/** Number of columns (can be responsive) */
|
|
22
33
|
columns?: ResponsiveValue;
|
|
23
|
-
/** Gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600)
|
|
24
|
-
gap?:
|
|
25
|
-
/** Row gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600)
|
|
26
|
-
rowGap?:
|
|
27
|
-
/** Column gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600)
|
|
28
|
-
columnGap?:
|
|
34
|
+
/** Gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., "16px"), or responsive object (e.g., { sm: 400, md: 500 }) */
|
|
35
|
+
gap?: ResponsiveGapValue;
|
|
36
|
+
/** Row gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., "16px"), or responsive object (e.g., { sm: 400, md: 500 }) */
|
|
37
|
+
rowGap?: ResponsiveGapValue;
|
|
38
|
+
/** Column gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., "16px"), or responsive object (e.g., { sm: 400, md: 500 }) */
|
|
39
|
+
columnGap?: ResponsiveGapValue;
|
|
29
40
|
/** Children elements to display in the grid */
|
|
30
41
|
children?: React.ReactNode;
|
|
31
42
|
/** Custom className */
|
|
@@ -34,4 +45,4 @@ interface GridProps {
|
|
|
34
45
|
|
|
35
46
|
declare const Grid: React__default.FC<GridProps>;
|
|
36
47
|
|
|
37
|
-
export { type ContainerProps, type GapValue, Grid, type GridProps, type ResponsiveValue, Grid as default };
|
|
48
|
+
export { type ContainerProps, type GapValue, Grid, type GridProps, type ResponsiveGapValue, type ResponsiveValue, Grid as default };
|
package/dist/index.d.ts
CHANGED
|
@@ -14,18 +14,29 @@ type ResponsiveValue = number | {
|
|
|
14
14
|
* - A pixel string value (e.g., "16px", "20px")
|
|
15
15
|
*/
|
|
16
16
|
type GapValue = keyof TypeSpace | (string & {});
|
|
17
|
+
/**
|
|
18
|
+
* Responsive gap value that can be either:
|
|
19
|
+
* - A single GapValue applied at all breakpoints
|
|
20
|
+
* - An object with optional breakpoint keys (sm, md, lg, xl) for responsive values
|
|
21
|
+
*/
|
|
22
|
+
type ResponsiveGapValue = GapValue | {
|
|
23
|
+
sm?: GapValue;
|
|
24
|
+
md?: GapValue;
|
|
25
|
+
lg?: GapValue;
|
|
26
|
+
xl?: GapValue;
|
|
27
|
+
};
|
|
17
28
|
interface ContainerProps {
|
|
18
29
|
$columns?: ResponsiveValue;
|
|
19
30
|
}
|
|
20
31
|
interface GridProps {
|
|
21
32
|
/** Number of columns (can be responsive) */
|
|
22
33
|
columns?: ResponsiveValue;
|
|
23
|
-
/** Gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600)
|
|
24
|
-
gap?:
|
|
25
|
-
/** Row gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600)
|
|
26
|
-
rowGap?:
|
|
27
|
-
/** Column gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600)
|
|
28
|
-
columnGap?:
|
|
34
|
+
/** Gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., "16px"), or responsive object (e.g., { sm: 400, md: 500 }) */
|
|
35
|
+
gap?: ResponsiveGapValue;
|
|
36
|
+
/** Row gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., "16px"), or responsive object (e.g., { sm: 400, md: 500 }) */
|
|
37
|
+
rowGap?: ResponsiveGapValue;
|
|
38
|
+
/** Column gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., "16px"), or responsive object (e.g., { sm: 400, md: 500 }) */
|
|
39
|
+
columnGap?: ResponsiveGapValue;
|
|
29
40
|
/** Children elements to display in the grid */
|
|
30
41
|
children?: React.ReactNode;
|
|
31
42
|
/** Custom className */
|
|
@@ -34,4 +45,4 @@ interface GridProps {
|
|
|
34
45
|
|
|
35
46
|
declare const Grid: React__default.FC<GridProps>;
|
|
36
47
|
|
|
37
|
-
export { type ContainerProps, type GapValue, Grid, type GridProps, type ResponsiveValue, Grid as default };
|
|
48
|
+
export { type ContainerProps, type GapValue, Grid, type GridProps, type ResponsiveGapValue, type ResponsiveValue, Grid as default };
|
package/dist/index.js
CHANGED
|
@@ -43,7 +43,11 @@ var import_seeds_react_box = __toESM(require("@sproutsocial/seeds-react-box"));
|
|
|
43
43
|
// src/utils.ts
|
|
44
44
|
var import_styled_components = require("styled-components");
|
|
45
45
|
var import_seeds_react_theme = require("@sproutsocial/seeds-react-theme");
|
|
46
|
-
var {
|
|
46
|
+
var { breakpoints } = import_seeds_react_theme.theme;
|
|
47
|
+
var toResponsiveGapObject = (value) => {
|
|
48
|
+
if (typeof value !== "object") return value;
|
|
49
|
+
return value;
|
|
50
|
+
};
|
|
47
51
|
var getResponsiveStyles = (columns = 1) => {
|
|
48
52
|
if (typeof columns === "number") {
|
|
49
53
|
return import_styled_components.css`
|
|
@@ -53,22 +57,22 @@ var getResponsiveStyles = (columns = 1) => {
|
|
|
53
57
|
return import_styled_components.css`
|
|
54
58
|
grid-template-columns: repeat(1, 1fr);
|
|
55
59
|
|
|
56
|
-
@media (min-width: ${
|
|
60
|
+
@media (min-width: ${breakpoints.sm}) {
|
|
57
61
|
grid-template-columns: repeat(${columns.sm || 1}, 1fr);
|
|
58
62
|
}
|
|
59
63
|
|
|
60
|
-
@media (min-width: ${
|
|
64
|
+
@media (min-width: ${breakpoints.md}) {
|
|
61
65
|
grid-template-columns: repeat(${columns.md || columns.sm || 1}, 1fr);
|
|
62
66
|
}
|
|
63
67
|
|
|
64
|
-
@media (min-width: ${
|
|
68
|
+
@media (min-width: ${breakpoints.lg}) {
|
|
65
69
|
grid-template-columns: repeat(
|
|
66
70
|
${columns.lg || columns.md || columns.sm || 1},
|
|
67
71
|
1fr
|
|
68
72
|
);
|
|
69
73
|
}
|
|
70
74
|
|
|
71
|
-
@media (min-width: ${
|
|
75
|
+
@media (min-width: ${breakpoints.xl}) {
|
|
72
76
|
grid-template-columns: repeat(
|
|
73
77
|
${columns.xl || columns.lg || columns.md || columns.sm || 1},
|
|
74
78
|
1fr
|
|
@@ -94,8 +98,8 @@ var Grid = ({
|
|
|
94
98
|
Container,
|
|
95
99
|
{
|
|
96
100
|
display: "grid",
|
|
97
|
-
rowGap: rowGap ?? gap,
|
|
98
|
-
columnGap: columnGap ?? gap,
|
|
101
|
+
rowGap: toResponsiveGapObject(rowGap ?? gap),
|
|
102
|
+
columnGap: toResponsiveGapObject(columnGap ?? gap),
|
|
99
103
|
$columns: columns,
|
|
100
104
|
className,
|
|
101
105
|
children
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/Grid.tsx","../src/utils.ts","../src/GridTypes.ts"],"sourcesContent":["import Grid from \"./Grid\";\n\nexport default Grid;\nexport { Grid };\nexport * from \"./GridTypes\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { ContainerProps, GridProps } from \"./GridTypes\";\nimport { getResponsiveStyles } from \"./utils\";\n\nconst Container = styled(Box)<ContainerProps>`\n ${(props) => getResponsiveStyles(props.$columns)}\n`;\n\nconst Grid: React.FC<GridProps> = ({\n columns = 1,\n gap = 400,\n rowGap,\n columnGap,\n children,\n className,\n}) => {\n return (\n <Container\n display=\"grid\"\n rowGap={rowGap ?? gap}\n columnGap={columnGap ?? gap}\n $columns={columns}\n className={className}\n >\n {children}\n </Container>\n );\n};\n\nexport default Grid;\n","import type {
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/Grid.tsx","../src/utils.ts","../src/GridTypes.ts"],"sourcesContent":["import Grid from \"./Grid\";\n\nexport default Grid;\nexport { Grid };\nexport * from \"./GridTypes\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { ContainerProps, GridProps } from \"./GridTypes\";\nimport { getResponsiveStyles, toResponsiveGapObject } from \"./utils\";\n\nconst Container = styled(Box)<ContainerProps>`\n ${(props) => getResponsiveStyles(props.$columns)}\n`;\n\nconst Grid: React.FC<GridProps> = ({\n columns = 1,\n gap = 400,\n rowGap,\n columnGap,\n children,\n className,\n}) => {\n return (\n <Container\n display=\"grid\"\n rowGap={toResponsiveGapObject(rowGap ?? gap)}\n columnGap={toResponsiveGapObject(columnGap ?? gap)}\n $columns={columns}\n className={className}\n >\n {children}\n </Container>\n );\n};\n\nexport default Grid;\n","import type {\n GapValue,\n ResponsiveGapValue,\n ResponsiveValue,\n} from \"./GridTypes\";\nimport { css } from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\n\nconst { breakpoints } = theme;\n\nexport const toResponsiveGapObject = (\n value: ResponsiveGapValue\n):\n | GapValue\n | { sm?: GapValue; md?: GapValue; lg?: GapValue; xl?: GapValue } => {\n if (typeof value !== \"object\") return value;\n return value;\n};\n\nexport const getResponsiveStyles = (columns: ResponsiveValue = 1) => {\n if (typeof columns === \"number\") {\n return css`\n grid-template-columns: repeat(${columns}, 1fr);\n `;\n }\n\n return css`\n grid-template-columns: repeat(1, 1fr);\n\n @media (min-width: ${breakpoints.sm}) {\n grid-template-columns: repeat(${columns.sm || 1}, 1fr);\n }\n\n @media (min-width: ${breakpoints.md}) {\n grid-template-columns: repeat(${columns.md || columns.sm || 1}, 1fr);\n }\n\n @media (min-width: ${breakpoints.lg}) {\n grid-template-columns: repeat(\n ${columns.lg || columns.md || columns.sm || 1},\n 1fr\n );\n }\n\n @media (min-width: ${breakpoints.xl}) {\n grid-template-columns: repeat(\n ${columns.xl || columns.lg || columns.md || columns.sm || 1},\n 1fr\n );\n }\n `;\n};\n","import type { TypeSpace } from \"@sproutsocial/seeds-react-theme\";\nimport * as React from \"react\";\n\nexport type ResponsiveValue =\n | number\n | {\n sm?: number;\n md?: number;\n lg?: number;\n xl?: number;\n };\n\n/**\n * Gap value that can be either:\n * - A space scale value from the theme (0, 100, 200, 300, 350, 400, 450, 500, 600)\n * - A pixel string value (e.g., \"16px\", \"20px\")\n */\nexport type GapValue = keyof TypeSpace | (string & {});\n\n/**\n * Responsive gap value that can be either:\n * - A single GapValue applied at all breakpoints\n * - An object with optional breakpoint keys (sm, md, lg, xl) for responsive values\n */\nexport type ResponsiveGapValue =\n | GapValue\n | {\n sm?: GapValue;\n md?: GapValue;\n lg?: GapValue;\n xl?: GapValue;\n };\n\nexport interface ContainerProps {\n $columns?: ResponsiveValue;\n}\n\nexport interface GridProps {\n /** Number of columns (can be responsive) */\n columns?: ResponsiveValue;\n /** Gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., \"16px\"), or responsive object (e.g., { sm: 400, md: 500 }) */\n gap?: ResponsiveGapValue;\n /** Row gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., \"16px\"), or responsive object (e.g., { sm: 400, md: 500 }) */\n rowGap?: ResponsiveGapValue;\n /** Column gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., \"16px\"), or responsive object (e.g., { sm: 400, md: 500 }) */\n columnGap?: ResponsiveGapValue;\n /** Children elements to display in the grid */\n children?: React.ReactNode;\n /** Custom className */\n className?: string;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkB;AAClB,IAAAA,4BAAmB;AACnB,6BAAgB;;;ACGhB,+BAAoB;AACpB,+BAAsB;AAEtB,IAAM,EAAE,YAAY,IAAI;AAEjB,IAAM,wBAAwB,CACnC,UAGoE;AACpE,MAAI,OAAO,UAAU,SAAU,QAAO;AACtC,SAAO;AACT;AAEO,IAAM,sBAAsB,CAAC,UAA2B,MAAM;AACnE,MAAI,OAAO,YAAY,UAAU;AAC/B,WAAO;AAAA,sCAC2B,OAAO;AAAA;AAAA,EAE3C;AAEA,SAAO;AAAA;AAAA;AAAA,yBAGgB,YAAY,EAAE;AAAA,sCACD,QAAQ,MAAM,CAAC;AAAA;AAAA;AAAA,yBAG5B,YAAY,EAAE;AAAA,sCACD,QAAQ,MAAM,QAAQ,MAAM,CAAC;AAAA;AAAA;AAAA,yBAG1C,YAAY,EAAE;AAAA;AAAA,UAE7B,QAAQ,MAAM,QAAQ,MAAM,QAAQ,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,yBAK5B,YAAY,EAAE;AAAA;AAAA,UAE7B,QAAQ,MAAM,QAAQ,MAAM,QAAQ,MAAM,QAAQ,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAKnE;;;ADhCI;AAbJ,IAAM,gBAAY,0BAAAC,SAAO,uBAAAC,OAAG;AAAA,IACxB,CAAC,UAAU,oBAAoB,MAAM,QAAQ,CAAC;AAAA;AAGlD,IAAM,OAA4B,CAAC;AAAA,EACjC,UAAU;AAAA,EACV,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,QAAQ,sBAAsB,UAAU,GAAG;AAAA,MAC3C,WAAW,sBAAsB,aAAa,GAAG;AAAA,MACjD,UAAU;AAAA,MACV;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,eAAQ;;;AE9Bf,IAAAC,SAAuB;;;AHCvB,IAAO,gBAAQ;","names":["import_styled_components","styled","Box","React"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sproutsocial/seeds-react-grid",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.5",
|
|
4
4
|
"description": "Seeds React Grid",
|
|
5
5
|
"author": "Sprout Social, Inc.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -18,9 +18,9 @@
|
|
|
18
18
|
"test:watch": "jest --watch --coverage=false"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@sproutsocial/seeds-react-box": "^1.1.
|
|
22
|
-
"@sproutsocial/seeds-react-theme": "^
|
|
23
|
-
"@sproutsocial/seeds-react-system-props": "^3.
|
|
21
|
+
"@sproutsocial/seeds-react-box": "^1.1.21",
|
|
22
|
+
"@sproutsocial/seeds-react-theme": "^4.1.0",
|
|
23
|
+
"@sproutsocial/seeds-react-system-props": "^3.1.1"
|
|
24
24
|
},
|
|
25
25
|
"devDependencies": {
|
|
26
26
|
"@types/react": "^18.0.0",
|
package/src/Grid.stories.tsx
CHANGED
|
@@ -175,10 +175,16 @@ export const Playground: StoryObj<PlaygroundArgs> = {
|
|
|
175
175
|
lg: columnsLg,
|
|
176
176
|
xl: columnsXl,
|
|
177
177
|
},
|
|
178
|
-
...(rowGap &&
|
|
178
|
+
...(rowGap &&
|
|
179
|
+
(typeof rowGap === "string" ||
|
|
180
|
+
(typeof rowGap === "number" && rowGap > 0) ||
|
|
181
|
+
typeof rowGap === "object")
|
|
179
182
|
? { rowGap }
|
|
180
183
|
: {}),
|
|
181
|
-
...(columnGap &&
|
|
184
|
+
...(columnGap &&
|
|
185
|
+
(typeof columnGap === "string" ||
|
|
186
|
+
(typeof columnGap === "number" && columnGap > 0) ||
|
|
187
|
+
typeof columnGap === "object")
|
|
182
188
|
? { columnGap }
|
|
183
189
|
: {}),
|
|
184
190
|
};
|
|
@@ -198,6 +204,60 @@ export const Playground: StoryObj<PlaygroundArgs> = {
|
|
|
198
204
|
},
|
|
199
205
|
};
|
|
200
206
|
|
|
207
|
+
export const ResponsiveGap: Story = {
|
|
208
|
+
name: "Responsive Gap",
|
|
209
|
+
render: () => {
|
|
210
|
+
return (
|
|
211
|
+
<div style={{ display: "flex", flexDirection: "column", gap: "32px" }}>
|
|
212
|
+
<div>
|
|
213
|
+
<p style={{ marginBottom: "8px", fontWeight: "bold" }}>
|
|
214
|
+
Uniform gap (resize to see no change): gap={400}
|
|
215
|
+
</p>
|
|
216
|
+
<Grid columns={{ sm: 1, md: 2, lg: 3 }} gap={400}>
|
|
217
|
+
<GridItem color={COLORS.COLOR_BLUE_600}>Item 1</GridItem>
|
|
218
|
+
<GridItem color={COLORS.COLOR_BLUE_600}>Item 2</GridItem>
|
|
219
|
+
<GridItem color={COLORS.COLOR_BLUE_600}>Item 3</GridItem>
|
|
220
|
+
</Grid>
|
|
221
|
+
</div>
|
|
222
|
+
|
|
223
|
+
<div>
|
|
224
|
+
<p style={{ marginBottom: "8px", fontWeight: "bold" }}>
|
|
225
|
+
Responsive gap (resize to see gap change): gap={{ sm: 200,
|
|
226
|
+
md: 400, lg: 500 }}
|
|
227
|
+
</p>
|
|
228
|
+
<Grid
|
|
229
|
+
columns={{ sm: 1, md: 2, lg: 3 }}
|
|
230
|
+
gap={{ sm: 200, md: 400, lg: 500 }}
|
|
231
|
+
>
|
|
232
|
+
<GridItem color={COLORS.COLOR_PURPLE_600}>Item 1</GridItem>
|
|
233
|
+
<GridItem color={COLORS.COLOR_PURPLE_600}>Item 2</GridItem>
|
|
234
|
+
<GridItem color={COLORS.COLOR_PURPLE_600}>Item 3</GridItem>
|
|
235
|
+
</Grid>
|
|
236
|
+
</div>
|
|
237
|
+
|
|
238
|
+
<div>
|
|
239
|
+
<p style={{ marginBottom: "8px", fontWeight: "bold" }}>
|
|
240
|
+
Independent row/column gaps: rowGap={{ sm: 200, md: 500
|
|
241
|
+
}} columnGap={{ sm: 400, md: 200 }}
|
|
242
|
+
</p>
|
|
243
|
+
<Grid
|
|
244
|
+
columns={{ sm: 2, md: 3 }}
|
|
245
|
+
rowGap={{ sm: 200, md: 500 }}
|
|
246
|
+
columnGap={{ sm: 400, md: 200 }}
|
|
247
|
+
>
|
|
248
|
+
<GridItem color={COLORS.COLOR_TEAL_600}>Item 1</GridItem>
|
|
249
|
+
<GridItem color={COLORS.COLOR_TEAL_600}>Item 2</GridItem>
|
|
250
|
+
<GridItem color={COLORS.COLOR_TEAL_600}>Item 3</GridItem>
|
|
251
|
+
<GridItem color={COLORS.COLOR_TEAL_600}>Item 4</GridItem>
|
|
252
|
+
<GridItem color={COLORS.COLOR_TEAL_600}>Item 5</GridItem>
|
|
253
|
+
<GridItem color={COLORS.COLOR_TEAL_600}>Item 6</GridItem>
|
|
254
|
+
</Grid>
|
|
255
|
+
</div>
|
|
256
|
+
</div>
|
|
257
|
+
);
|
|
258
|
+
},
|
|
259
|
+
};
|
|
260
|
+
|
|
201
261
|
export const NestedGrid: Story = {
|
|
202
262
|
name: "Nested Grid Layout",
|
|
203
263
|
args: {
|
package/src/Grid.tsx
CHANGED
|
@@ -2,7 +2,7 @@ import React from "react";
|
|
|
2
2
|
import styled from "styled-components";
|
|
3
3
|
import Box from "@sproutsocial/seeds-react-box";
|
|
4
4
|
import type { ContainerProps, GridProps } from "./GridTypes";
|
|
5
|
-
import { getResponsiveStyles } from "./utils";
|
|
5
|
+
import { getResponsiveStyles, toResponsiveGapObject } from "./utils";
|
|
6
6
|
|
|
7
7
|
const Container = styled(Box)<ContainerProps>`
|
|
8
8
|
${(props) => getResponsiveStyles(props.$columns)}
|
|
@@ -19,8 +19,8 @@ const Grid: React.FC<GridProps> = ({
|
|
|
19
19
|
return (
|
|
20
20
|
<Container
|
|
21
21
|
display="grid"
|
|
22
|
-
rowGap={rowGap ?? gap}
|
|
23
|
-
columnGap={columnGap ?? gap}
|
|
22
|
+
rowGap={toResponsiveGapObject(rowGap ?? gap)}
|
|
23
|
+
columnGap={toResponsiveGapObject(columnGap ?? gap)}
|
|
24
24
|
$columns={columns}
|
|
25
25
|
className={className}
|
|
26
26
|
>
|
package/src/GridTypes.ts
CHANGED
|
@@ -17,6 +17,20 @@ export type ResponsiveValue =
|
|
|
17
17
|
*/
|
|
18
18
|
export type GapValue = keyof TypeSpace | (string & {});
|
|
19
19
|
|
|
20
|
+
/**
|
|
21
|
+
* Responsive gap value that can be either:
|
|
22
|
+
* - A single GapValue applied at all breakpoints
|
|
23
|
+
* - An object with optional breakpoint keys (sm, md, lg, xl) for responsive values
|
|
24
|
+
*/
|
|
25
|
+
export type ResponsiveGapValue =
|
|
26
|
+
| GapValue
|
|
27
|
+
| {
|
|
28
|
+
sm?: GapValue;
|
|
29
|
+
md?: GapValue;
|
|
30
|
+
lg?: GapValue;
|
|
31
|
+
xl?: GapValue;
|
|
32
|
+
};
|
|
33
|
+
|
|
20
34
|
export interface ContainerProps {
|
|
21
35
|
$columns?: ResponsiveValue;
|
|
22
36
|
}
|
|
@@ -24,12 +38,12 @@ export interface ContainerProps {
|
|
|
24
38
|
export interface GridProps {
|
|
25
39
|
/** Number of columns (can be responsive) */
|
|
26
40
|
columns?: ResponsiveValue;
|
|
27
|
-
/** Gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600)
|
|
28
|
-
gap?:
|
|
29
|
-
/** Row gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600)
|
|
30
|
-
rowGap?:
|
|
31
|
-
/** Column gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600)
|
|
32
|
-
columnGap?:
|
|
41
|
+
/** Gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., "16px"), or responsive object (e.g., { sm: 400, md: 500 }) */
|
|
42
|
+
gap?: ResponsiveGapValue;
|
|
43
|
+
/** Row gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., "16px"), or responsive object (e.g., { sm: 400, md: 500 }) */
|
|
44
|
+
rowGap?: ResponsiveGapValue;
|
|
45
|
+
/** Column gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., "16px"), or responsive object (e.g., { sm: 400, md: 500 }) */
|
|
46
|
+
columnGap?: ResponsiveGapValue;
|
|
33
47
|
/** Children elements to display in the grid */
|
|
34
48
|
children?: React.ReactNode;
|
|
35
49
|
/** Custom className */
|
|
@@ -57,6 +57,36 @@ function GridTypes() {
|
|
|
57
57
|
<div>Item 2</div>
|
|
58
58
|
</Grid>
|
|
59
59
|
|
|
60
|
+
{/* With responsive gap using space scale */}
|
|
61
|
+
<Grid gap={{ sm: 400, md: 450, lg: 500 }}>
|
|
62
|
+
<div>Item</div>
|
|
63
|
+
</Grid>
|
|
64
|
+
|
|
65
|
+
{/* With partial responsive gap */}
|
|
66
|
+
<Grid gap={{ sm: 400 }}>
|
|
67
|
+
<div>Item</div>
|
|
68
|
+
</Grid>
|
|
69
|
+
|
|
70
|
+
{/* With responsive rowGap using pixel strings */}
|
|
71
|
+
<Grid rowGap={{ sm: "16px", md: "24px" }}>
|
|
72
|
+
<div>Item</div>
|
|
73
|
+
</Grid>
|
|
74
|
+
|
|
75
|
+
{/* With responsive columnGap */}
|
|
76
|
+
<Grid columnGap={{ sm: 300, md: 400, lg: 450, xl: 500 }}>
|
|
77
|
+
<div>Item</div>
|
|
78
|
+
</Grid>
|
|
79
|
+
|
|
80
|
+
{/* @ts-expect-error - invalid key in responsive gap */}
|
|
81
|
+
<Grid gap={{ xs: 400 }}>
|
|
82
|
+
<div>Item</div>
|
|
83
|
+
</Grid>
|
|
84
|
+
|
|
85
|
+
{/* @ts-expect-error - invalid gap value inside responsive object */}
|
|
86
|
+
<Grid gap={{ sm: 16 }}>
|
|
87
|
+
<div>Item</div>
|
|
88
|
+
</Grid>
|
|
89
|
+
|
|
60
90
|
{/* @ts-expect-error - invalid columns value */}
|
|
61
91
|
<Grid columns="invalid">
|
|
62
92
|
<div>Item</div>
|
|
@@ -151,6 +151,66 @@ describe("Grid", () => {
|
|
|
151
151
|
expect(styles.columnGap).toBe("10px");
|
|
152
152
|
});
|
|
153
153
|
|
|
154
|
+
it("should accept responsive object for gap", () => {
|
|
155
|
+
const { container } = render(
|
|
156
|
+
<Grid gap={{ sm: 400, md: 450, lg: 500 }}>
|
|
157
|
+
<div>Item 1</div>
|
|
158
|
+
<div>Item 2</div>
|
|
159
|
+
</Grid>
|
|
160
|
+
);
|
|
161
|
+
const gridElement = container.firstChild as HTMLElement;
|
|
162
|
+
const styles = window.getComputedStyle(gridElement);
|
|
163
|
+
expect(styles.display).toBe("grid");
|
|
164
|
+
});
|
|
165
|
+
|
|
166
|
+
it("should accept responsive object for rowGap", () => {
|
|
167
|
+
const { container } = render(
|
|
168
|
+
<Grid rowGap={{ sm: 300, md: 400 }} columnGap={400}>
|
|
169
|
+
<div>Item 1</div>
|
|
170
|
+
<div>Item 2</div>
|
|
171
|
+
</Grid>
|
|
172
|
+
);
|
|
173
|
+
const gridElement = container.firstChild as HTMLElement;
|
|
174
|
+
const styles = window.getComputedStyle(gridElement);
|
|
175
|
+
expect(styles.columnGap).toBe("16px");
|
|
176
|
+
});
|
|
177
|
+
|
|
178
|
+
it("should accept responsive object for columnGap", () => {
|
|
179
|
+
const { container } = render(
|
|
180
|
+
<Grid rowGap={400} columnGap={{ sm: 400, lg: 500 }}>
|
|
181
|
+
<div>Item 1</div>
|
|
182
|
+
<div>Item 2</div>
|
|
183
|
+
</Grid>
|
|
184
|
+
);
|
|
185
|
+
const gridElement = container.firstChild as HTMLElement;
|
|
186
|
+
const styles = window.getComputedStyle(gridElement);
|
|
187
|
+
expect(styles.rowGap).toBe("16px");
|
|
188
|
+
});
|
|
189
|
+
|
|
190
|
+
it("should mix responsive and static gap values", () => {
|
|
191
|
+
const { container } = render(
|
|
192
|
+
<Grid gap={{ sm: 400 }} columnGap={300}>
|
|
193
|
+
<div>Item 1</div>
|
|
194
|
+
<div>Item 2</div>
|
|
195
|
+
</Grid>
|
|
196
|
+
);
|
|
197
|
+
const gridElement = container.firstChild as HTMLElement;
|
|
198
|
+
const styles = window.getComputedStyle(gridElement);
|
|
199
|
+
expect(styles.columnGap).toBe("8px");
|
|
200
|
+
});
|
|
201
|
+
|
|
202
|
+
it("should accept responsive object with pixel strings", () => {
|
|
203
|
+
const { container } = render(
|
|
204
|
+
<Grid gap={{ sm: "16px", md: "24px" }}>
|
|
205
|
+
<div>Item 1</div>
|
|
206
|
+
<div>Item 2</div>
|
|
207
|
+
</Grid>
|
|
208
|
+
);
|
|
209
|
+
const gridElement = container.firstChild as HTMLElement;
|
|
210
|
+
const styles = window.getComputedStyle(gridElement);
|
|
211
|
+
expect(styles.display).toBe("grid");
|
|
212
|
+
});
|
|
213
|
+
|
|
154
214
|
it("should render with single column by default", () => {
|
|
155
215
|
const { container } = render(
|
|
156
216
|
<Grid>
|
package/src/utils.ts
CHANGED
|
@@ -1,8 +1,21 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type {
|
|
2
|
+
GapValue,
|
|
3
|
+
ResponsiveGapValue,
|
|
4
|
+
ResponsiveValue,
|
|
5
|
+
} from "./GridTypes";
|
|
2
6
|
import { css } from "styled-components";
|
|
3
7
|
import { theme } from "@sproutsocial/seeds-react-theme";
|
|
4
8
|
|
|
5
|
-
const {
|
|
9
|
+
const { breakpoints } = theme;
|
|
10
|
+
|
|
11
|
+
export const toResponsiveGapObject = (
|
|
12
|
+
value: ResponsiveGapValue
|
|
13
|
+
):
|
|
14
|
+
| GapValue
|
|
15
|
+
| { sm?: GapValue; md?: GapValue; lg?: GapValue; xl?: GapValue } => {
|
|
16
|
+
if (typeof value !== "object") return value;
|
|
17
|
+
return value;
|
|
18
|
+
};
|
|
6
19
|
|
|
7
20
|
export const getResponsiveStyles = (columns: ResponsiveValue = 1) => {
|
|
8
21
|
if (typeof columns === "number") {
|
|
@@ -14,22 +27,22 @@ export const getResponsiveStyles = (columns: ResponsiveValue = 1) => {
|
|
|
14
27
|
return css`
|
|
15
28
|
grid-template-columns: repeat(1, 1fr);
|
|
16
29
|
|
|
17
|
-
@media (min-width: ${
|
|
30
|
+
@media (min-width: ${breakpoints.sm}) {
|
|
18
31
|
grid-template-columns: repeat(${columns.sm || 1}, 1fr);
|
|
19
32
|
}
|
|
20
33
|
|
|
21
|
-
@media (min-width: ${
|
|
34
|
+
@media (min-width: ${breakpoints.md}) {
|
|
22
35
|
grid-template-columns: repeat(${columns.md || columns.sm || 1}, 1fr);
|
|
23
36
|
}
|
|
24
37
|
|
|
25
|
-
@media (min-width: ${
|
|
38
|
+
@media (min-width: ${breakpoints.lg}) {
|
|
26
39
|
grid-template-columns: repeat(
|
|
27
40
|
${columns.lg || columns.md || columns.sm || 1},
|
|
28
41
|
1fr
|
|
29
42
|
);
|
|
30
43
|
}
|
|
31
44
|
|
|
32
|
-
@media (min-width: ${
|
|
45
|
+
@media (min-width: ${breakpoints.xl}) {
|
|
33
46
|
grid-template-columns: repeat(
|
|
34
47
|
${columns.xl || columns.lg || columns.md || columns.sm || 1},
|
|
35
48
|
1fr
|