@sproutsocial/seeds-react-grid 0.0.1 → 0.1.1
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 +15 -0
- package/dist/esm/index.js +9 -14
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.mts +2 -9
- package/dist/index.d.ts +2 -9
- package/dist/index.js +9 -15
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
- package/src/GridTypes.ts +2 -2
- package/src/__tests__/Grid.typetest.tsx +3 -3
- package/src/index.ts +0 -1
- package/src/utils.ts +10 -7
- package/src/constants.ts +0 -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[32m4.
|
|
13
|
-
[32mCJS[39m ⚡️ Build success in
|
|
14
|
-
[32mESM[39m [1mdist/esm/index.js [22m[32m1.
|
|
15
|
-
[32mESM[39m [1mdist/esm/index.js.map [22m[32m4.
|
|
16
|
-
[32mESM[39m ⚡️ Build success in
|
|
11
|
+
[32mCJS[39m [1mdist/index.js [22m[32m3.59 KB[39m
|
|
12
|
+
[32mCJS[39m [1mdist/index.js.map [22m[32m4.31 KB[39m
|
|
13
|
+
[32mCJS[39m ⚡️ Build success in 15ms
|
|
14
|
+
[32mESM[39m [1mdist/esm/index.js [22m[32m1.72 KB[39m
|
|
15
|
+
[32mESM[39m [1mdist/esm/index.js.map [22m[32m4.20 KB[39m
|
|
16
|
+
[32mESM[39m ⚡️ Build success in 15ms
|
|
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 6.
|
|
18
|
+
[32mDTS[39m ⚡️ Build success in 4889ms
|
|
19
|
+
[32mDTS[39m [1mdist/index.d.ts [22m[32m1.36 KB[39m
|
|
20
|
+
[32mDTS[39m [1mdist/index.d.mts [22m[32m1.36 KB[39m
|
|
21
|
+
Done in 6.30s.
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# @sproutsocial/seeds-react-grid
|
|
2
2
|
|
|
3
|
+
## 0.1.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 1f9a473: Switched grids to use newBreakpoints theme values that are preventing users from using grid's columns api responsively
|
|
8
|
+
- Updated dependencies [1f9a473]
|
|
9
|
+
- @sproutsocial/seeds-react-theme@3.6.1
|
|
10
|
+
- @sproutsocial/seeds-react-box@1.1.15
|
|
11
|
+
|
|
12
|
+
## 0.1.0
|
|
13
|
+
|
|
14
|
+
### Minor Changes
|
|
15
|
+
|
|
16
|
+
- 990c196: Add Grid component: a layout primitive for creating CSS Grid layouts with responsive column configurations and customizable gaps.
|
|
17
|
+
|
|
3
18
|
## 0.0.1
|
|
4
19
|
|
|
5
20
|
### Patch Changes
|
package/dist/esm/index.js
CHANGED
|
@@ -6,7 +6,7 @@ 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 { newBreakpoints } = theme;
|
|
10
10
|
var getResponsiveStyles = (columns = 1) => {
|
|
11
11
|
if (typeof columns === "number") {
|
|
12
12
|
return css`
|
|
@@ -14,20 +14,24 @@ var getResponsiveStyles = (columns = 1) => {
|
|
|
14
14
|
`;
|
|
15
15
|
}
|
|
16
16
|
return css`
|
|
17
|
-
grid-template-columns: repeat(
|
|
17
|
+
grid-template-columns: repeat(1, 1fr);
|
|
18
18
|
|
|
19
|
-
@media (min-width: ${
|
|
19
|
+
@media (min-width: ${newBreakpoints.sm}px) {
|
|
20
|
+
grid-template-columns: repeat(${columns.sm || 1}, 1fr);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@media (min-width: ${newBreakpoints.md}px) {
|
|
20
24
|
grid-template-columns: repeat(${columns.md || columns.sm || 1}, 1fr);
|
|
21
25
|
}
|
|
22
26
|
|
|
23
|
-
@media (min-width: ${
|
|
27
|
+
@media (min-width: ${newBreakpoints.lg}px) {
|
|
24
28
|
grid-template-columns: repeat(
|
|
25
29
|
${columns.lg || columns.md || columns.sm || 1},
|
|
26
30
|
1fr
|
|
27
31
|
);
|
|
28
32
|
}
|
|
29
33
|
|
|
30
|
-
@media (min-width: ${
|
|
34
|
+
@media (min-width: ${newBreakpoints.xl}px) {
|
|
31
35
|
grid-template-columns: repeat(
|
|
32
36
|
${columns.xl || columns.lg || columns.md || columns.sm || 1},
|
|
33
37
|
1fr
|
|
@@ -66,18 +70,9 @@ var Grid_default = Grid;
|
|
|
66
70
|
// src/GridTypes.ts
|
|
67
71
|
import "react";
|
|
68
72
|
|
|
69
|
-
// src/constants.ts
|
|
70
|
-
var BREAKPOINTS = {
|
|
71
|
-
sm: 640,
|
|
72
|
-
md: 768,
|
|
73
|
-
lg: 1024,
|
|
74
|
-
xl: 1280
|
|
75
|
-
};
|
|
76
|
-
|
|
77
73
|
// src/index.ts
|
|
78
74
|
var index_default = Grid_default;
|
|
79
75
|
export {
|
|
80
|
-
BREAKPOINTS,
|
|
81
76
|
Grid_default as Grid,
|
|
82
77
|
index_default as default
|
|
83
78
|
};
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Grid.tsx","../../src/utils.ts","../../src/GridTypes.ts","../../src/
|
|
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 { ResponsiveValue } from \"./GridTypes\";\nimport { css } from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\n\nconst { newBreakpoints } = theme;\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: ${newBreakpoints.sm}px) {\n grid-template-columns: repeat(${columns.sm || 1}, 1fr);\n }\n\n @media (min-width: ${newBreakpoints.md}px) {\n grid-template-columns: repeat(${columns.md || columns.sm || 1}, 1fr);\n }\n\n @media (min-width: ${newBreakpoints.lg}px) {\n grid-template-columns: repeat(\n ${columns.lg || columns.md || columns.sm || 1},\n 1fr\n );\n }\n\n @media (min-width: ${newBreakpoints.xl}px) {\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\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) or pixel string (e.g., \"16px\") */\n gap?: GapValue;\n /** Row gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600) or pixel string (e.g., \"16px\") */\n rowGap?: GapValue;\n /** Column gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600) or pixel string (e.g., \"16px\") */\n columnGap?: GapValue;\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;;;ACDhB,SAAS,WAAW;AACpB,SAAS,aAAa;AAEtB,IAAM,EAAE,eAAe,IAAI;AAEpB,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,eAAe,EAAE;AAAA,sCACJ,QAAQ,MAAM,CAAC;AAAA;AAAA;AAAA,yBAG5B,eAAe,EAAE;AAAA,sCACJ,QAAQ,MAAM,QAAQ,MAAM,CAAC;AAAA;AAAA;AAAA,yBAG1C,eAAe,EAAE;AAAA;AAAA,UAEhC,QAAQ,MAAM,QAAQ,MAAM,QAAQ,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,yBAK5B,eAAe,EAAE;AAAA;AAAA,UAEhC,QAAQ,MAAM,QAAQ,MAAM,QAAQ,MAAM,QAAQ,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAKnE;;;ADnBI;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,UAAU;AAAA,MAClB,WAAW,aAAa;AAAA,MACxB,UAAU;AAAA,MACV;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,eAAQ;;;AE9Bf,OAAuB;;;ACCvB,IAAO,gBAAQ;","names":[]}
|
package/dist/index.d.mts
CHANGED
|
@@ -13,7 +13,7 @@ type ResponsiveValue = number | {
|
|
|
13
13
|
* - A space scale value from the theme (0, 100, 200, 300, 350, 400, 450, 500, 600)
|
|
14
14
|
* - A pixel string value (e.g., "16px", "20px")
|
|
15
15
|
*/
|
|
16
|
-
type GapValue = keyof TypeSpace |
|
|
16
|
+
type GapValue = keyof TypeSpace | (string & {});
|
|
17
17
|
interface ContainerProps {
|
|
18
18
|
$columns?: ResponsiveValue;
|
|
19
19
|
}
|
|
@@ -34,11 +34,4 @@ interface GridProps {
|
|
|
34
34
|
|
|
35
35
|
declare const Grid: React__default.FC<GridProps>;
|
|
36
36
|
|
|
37
|
-
|
|
38
|
-
readonly sm: 640;
|
|
39
|
-
readonly md: 768;
|
|
40
|
-
readonly lg: 1024;
|
|
41
|
-
readonly xl: 1280;
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
export { BREAKPOINTS, type ContainerProps, type GapValue, Grid, type GridProps, type ResponsiveValue, Grid as default };
|
|
37
|
+
export { type ContainerProps, type GapValue, Grid, type GridProps, type ResponsiveValue, Grid as default };
|
package/dist/index.d.ts
CHANGED
|
@@ -13,7 +13,7 @@ type ResponsiveValue = number | {
|
|
|
13
13
|
* - A space scale value from the theme (0, 100, 200, 300, 350, 400, 450, 500, 600)
|
|
14
14
|
* - A pixel string value (e.g., "16px", "20px")
|
|
15
15
|
*/
|
|
16
|
-
type GapValue = keyof TypeSpace |
|
|
16
|
+
type GapValue = keyof TypeSpace | (string & {});
|
|
17
17
|
interface ContainerProps {
|
|
18
18
|
$columns?: ResponsiveValue;
|
|
19
19
|
}
|
|
@@ -34,11 +34,4 @@ interface GridProps {
|
|
|
34
34
|
|
|
35
35
|
declare const Grid: React__default.FC<GridProps>;
|
|
36
36
|
|
|
37
|
-
|
|
38
|
-
readonly sm: 640;
|
|
39
|
-
readonly md: 768;
|
|
40
|
-
readonly lg: 1024;
|
|
41
|
-
readonly xl: 1280;
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
export { BREAKPOINTS, type ContainerProps, type GapValue, Grid, type GridProps, type ResponsiveValue, Grid as default };
|
|
37
|
+
export { type ContainerProps, type GapValue, Grid, type GridProps, type ResponsiveValue, Grid as default };
|
package/dist/index.js
CHANGED
|
@@ -30,7 +30,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
30
30
|
// src/index.ts
|
|
31
31
|
var index_exports = {};
|
|
32
32
|
__export(index_exports, {
|
|
33
|
-
BREAKPOINTS: () => BREAKPOINTS,
|
|
34
33
|
Grid: () => Grid_default,
|
|
35
34
|
default: () => index_default
|
|
36
35
|
});
|
|
@@ -44,7 +43,7 @@ var import_seeds_react_box = __toESM(require("@sproutsocial/seeds-react-box"));
|
|
|
44
43
|
// src/utils.ts
|
|
45
44
|
var import_styled_components = require("styled-components");
|
|
46
45
|
var import_seeds_react_theme = require("@sproutsocial/seeds-react-theme");
|
|
47
|
-
var {
|
|
46
|
+
var { newBreakpoints } = import_seeds_react_theme.theme;
|
|
48
47
|
var getResponsiveStyles = (columns = 1) => {
|
|
49
48
|
if (typeof columns === "number") {
|
|
50
49
|
return import_styled_components.css`
|
|
@@ -52,20 +51,24 @@ var getResponsiveStyles = (columns = 1) => {
|
|
|
52
51
|
`;
|
|
53
52
|
}
|
|
54
53
|
return import_styled_components.css`
|
|
55
|
-
grid-template-columns: repeat(
|
|
54
|
+
grid-template-columns: repeat(1, 1fr);
|
|
56
55
|
|
|
57
|
-
@media (min-width: ${
|
|
56
|
+
@media (min-width: ${newBreakpoints.sm}px) {
|
|
57
|
+
grid-template-columns: repeat(${columns.sm || 1}, 1fr);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
@media (min-width: ${newBreakpoints.md}px) {
|
|
58
61
|
grid-template-columns: repeat(${columns.md || columns.sm || 1}, 1fr);
|
|
59
62
|
}
|
|
60
63
|
|
|
61
|
-
@media (min-width: ${
|
|
64
|
+
@media (min-width: ${newBreakpoints.lg}px) {
|
|
62
65
|
grid-template-columns: repeat(
|
|
63
66
|
${columns.lg || columns.md || columns.sm || 1},
|
|
64
67
|
1fr
|
|
65
68
|
);
|
|
66
69
|
}
|
|
67
70
|
|
|
68
|
-
@media (min-width: ${
|
|
71
|
+
@media (min-width: ${newBreakpoints.xl}px) {
|
|
69
72
|
grid-template-columns: repeat(
|
|
70
73
|
${columns.xl || columns.lg || columns.md || columns.sm || 1},
|
|
71
74
|
1fr
|
|
@@ -104,19 +107,10 @@ var Grid_default = Grid;
|
|
|
104
107
|
// src/GridTypes.ts
|
|
105
108
|
var React2 = require("react");
|
|
106
109
|
|
|
107
|
-
// src/constants.ts
|
|
108
|
-
var BREAKPOINTS = {
|
|
109
|
-
sm: 640,
|
|
110
|
-
md: 768,
|
|
111
|
-
lg: 1024,
|
|
112
|
-
xl: 1280
|
|
113
|
-
};
|
|
114
|
-
|
|
115
110
|
// src/index.ts
|
|
116
111
|
var index_default = Grid_default;
|
|
117
112
|
// Annotate the CommonJS export names for ESM import in node:
|
|
118
113
|
0 && (module.exports = {
|
|
119
|
-
BREAKPOINTS,
|
|
120
114
|
Grid
|
|
121
115
|
});
|
|
122
116
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/Grid.tsx","../src/utils.ts","../src/GridTypes.ts"
|
|
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 { ResponsiveValue } from \"./GridTypes\";\nimport { css } from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\n\nconst { newBreakpoints } = theme;\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: ${newBreakpoints.sm}px) {\n grid-template-columns: repeat(${columns.sm || 1}, 1fr);\n }\n\n @media (min-width: ${newBreakpoints.md}px) {\n grid-template-columns: repeat(${columns.md || columns.sm || 1}, 1fr);\n }\n\n @media (min-width: ${newBreakpoints.lg}px) {\n grid-template-columns: repeat(\n ${columns.lg || columns.md || columns.sm || 1},\n 1fr\n );\n }\n\n @media (min-width: ${newBreakpoints.xl}px) {\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\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) or pixel string (e.g., \"16px\") */\n gap?: GapValue;\n /** Row gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600) or pixel string (e.g., \"16px\") */\n rowGap?: GapValue;\n /** Column gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600) or pixel string (e.g., \"16px\") */\n columnGap?: GapValue;\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;;;ACDhB,+BAAoB;AACpB,+BAAsB;AAEtB,IAAM,EAAE,eAAe,IAAI;AAEpB,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,eAAe,EAAE;AAAA,sCACJ,QAAQ,MAAM,CAAC;AAAA;AAAA;AAAA,yBAG5B,eAAe,EAAE;AAAA,sCACJ,QAAQ,MAAM,QAAQ,MAAM,CAAC;AAAA;AAAA;AAAA,yBAG1C,eAAe,EAAE;AAAA;AAAA,UAEhC,QAAQ,MAAM,QAAQ,MAAM,QAAQ,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,yBAK5B,eAAe,EAAE;AAAA;AAAA,UAEhC,QAAQ,MAAM,QAAQ,MAAM,QAAQ,MAAM,QAAQ,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAKnE;;;ADnBI;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,UAAU;AAAA,MAClB,WAAW,aAAa;AAAA,MACxB,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.1.1",
|
|
4
4
|
"description": "Seeds React Grid",
|
|
5
5
|
"author": "Sprout Social, Inc.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -18,8 +18,8 @@
|
|
|
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": "^3.
|
|
21
|
+
"@sproutsocial/seeds-react-box": "^1.1.15",
|
|
22
|
+
"@sproutsocial/seeds-react-theme": "^3.6.1",
|
|
23
23
|
"@sproutsocial/seeds-react-system-props": "^3.0.1"
|
|
24
24
|
},
|
|
25
25
|
"devDependencies": {
|
package/src/GridTypes.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
1
|
import type { TypeSpace } from "@sproutsocial/seeds-react-theme";
|
|
2
|
+
import * as React from "react";
|
|
3
3
|
|
|
4
4
|
export type ResponsiveValue =
|
|
5
5
|
| number
|
|
@@ -15,7 +15,7 @@ export type ResponsiveValue =
|
|
|
15
15
|
* - A space scale value from the theme (0, 100, 200, 300, 350, 400, 450, 500, 600)
|
|
16
16
|
* - A pixel string value (e.g., "16px", "20px")
|
|
17
17
|
*/
|
|
18
|
-
export type GapValue = keyof TypeSpace |
|
|
18
|
+
export type GapValue = keyof TypeSpace | (string & {});
|
|
19
19
|
|
|
20
20
|
export interface ContainerProps {
|
|
21
21
|
$columns?: ResponsiveValue;
|
|
@@ -62,7 +62,7 @@ function GridTypes() {
|
|
|
62
62
|
<div>Item</div>
|
|
63
63
|
</Grid>
|
|
64
64
|
|
|
65
|
-
{/*
|
|
65
|
+
{/* Valid gap value - any string is allowed */}
|
|
66
66
|
<Grid gap="invalid">
|
|
67
67
|
<div>Item</div>
|
|
68
68
|
</Grid>
|
|
@@ -87,12 +87,12 @@ function GridTypes() {
|
|
|
87
87
|
<div>Item</div>
|
|
88
88
|
</Grid>
|
|
89
89
|
|
|
90
|
-
{/*
|
|
90
|
+
{/* Valid gap value - any string is allowed */}
|
|
91
91
|
<Grid gap="16rem">
|
|
92
92
|
<div>Item</div>
|
|
93
93
|
</Grid>
|
|
94
94
|
|
|
95
|
-
{/*
|
|
95
|
+
{/* Valid gap value - any string is allowed */}
|
|
96
96
|
<Grid gap="1em">
|
|
97
97
|
<div>Item</div>
|
|
98
98
|
</Grid>
|
package/src/index.ts
CHANGED
package/src/utils.ts
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import type { ResponsiveValue } from "./GridTypes";
|
|
2
2
|
import { css } from "styled-components";
|
|
3
3
|
import { theme } from "@sproutsocial/seeds-react-theme";
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
const { breakpoints } = theme;
|
|
4
|
+
|
|
5
|
+
const { newBreakpoints } = theme;
|
|
7
6
|
|
|
8
7
|
export const getResponsiveStyles = (columns: ResponsiveValue = 1) => {
|
|
9
8
|
if (typeof columns === "number") {
|
|
@@ -13,20 +12,24 @@ export const getResponsiveStyles = (columns: ResponsiveValue = 1) => {
|
|
|
13
12
|
}
|
|
14
13
|
|
|
15
14
|
return css`
|
|
16
|
-
grid-template-columns: repeat(
|
|
15
|
+
grid-template-columns: repeat(1, 1fr);
|
|
16
|
+
|
|
17
|
+
@media (min-width: ${newBreakpoints.sm}px) {
|
|
18
|
+
grid-template-columns: repeat(${columns.sm || 1}, 1fr);
|
|
19
|
+
}
|
|
17
20
|
|
|
18
|
-
@media (min-width: ${
|
|
21
|
+
@media (min-width: ${newBreakpoints.md}px) {
|
|
19
22
|
grid-template-columns: repeat(${columns.md || columns.sm || 1}, 1fr);
|
|
20
23
|
}
|
|
21
24
|
|
|
22
|
-
@media (min-width: ${
|
|
25
|
+
@media (min-width: ${newBreakpoints.lg}px) {
|
|
23
26
|
grid-template-columns: repeat(
|
|
24
27
|
${columns.lg || columns.md || columns.sm || 1},
|
|
25
28
|
1fr
|
|
26
29
|
);
|
|
27
30
|
}
|
|
28
31
|
|
|
29
|
-
@media (min-width: ${
|
|
32
|
+
@media (min-width: ${newBreakpoints.xl}px) {
|
|
30
33
|
grid-template-columns: repeat(
|
|
31
34
|
${columns.xl || columns.lg || columns.md || columns.sm || 1},
|
|
32
35
|
1fr
|