@sproutsocial/seeds-react-grid 0.2.12 → 0.2.13
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/dist/esm/index.js +93 -14
- package/dist/esm/index.js.map +1 -1
- package/dist/grid.css +87 -0
- package/dist/index.d.mts +5 -0
- package/dist/index.d.ts +5 -0
- package/dist/index.js +95 -16
- package/dist/index.js.map +1 -1
- package/package.json +14 -3
- package/.eslintignore +0 -6
- package/.eslintrc.js +0 -4
- package/.turbo/turbo-build.log +0 -21
- package/CHANGELOG.md +0 -140
- package/jest.config.js +0 -9
- package/src/Grid.stories.tsx +0 -290
- package/src/Grid.tsx +0 -32
- package/src/GridTypes.ts +0 -51
- package/src/__tests__/Grid.typetest.tsx +0 -131
- package/src/__tests__/grid.test.tsx +0 -225
- package/src/index.ts +0 -5
- package/src/styled.d.ts +0 -7
- package/src/styles.ts +0 -21
- package/src/utils.ts +0 -52
- package/tsconfig.json +0 -9
- package/tsup.config.ts +0 -12
|
@@ -1,225 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { render } from "@sproutsocial/seeds-react-testing-library";
|
|
3
|
-
import Grid from "../Grid";
|
|
4
|
-
|
|
5
|
-
describe("Grid", () => {
|
|
6
|
-
it("should render properly", async () => {
|
|
7
|
-
const { container, runA11yCheck } = render(
|
|
8
|
-
<Grid>
|
|
9
|
-
<div>Item 1</div>
|
|
10
|
-
<div>Item 2</div>
|
|
11
|
-
</Grid>
|
|
12
|
-
);
|
|
13
|
-
expect(container).toBeTruthy();
|
|
14
|
-
await runA11yCheck();
|
|
15
|
-
});
|
|
16
|
-
|
|
17
|
-
it("should render children", () => {
|
|
18
|
-
const { getByText } = render(
|
|
19
|
-
<Grid>
|
|
20
|
-
<div>Item 1</div>
|
|
21
|
-
<div>Item 2</div>
|
|
22
|
-
<div>Item 3</div>
|
|
23
|
-
</Grid>
|
|
24
|
-
);
|
|
25
|
-
expect(getByText("Item 1")).toBeInTheDocument();
|
|
26
|
-
expect(getByText("Item 2")).toBeInTheDocument();
|
|
27
|
-
expect(getByText("Item 3")).toBeInTheDocument();
|
|
28
|
-
});
|
|
29
|
-
|
|
30
|
-
it("should apply custom className", () => {
|
|
31
|
-
const { container } = render(
|
|
32
|
-
<Grid className="custom-class">
|
|
33
|
-
<div>Item 1</div>
|
|
34
|
-
</Grid>
|
|
35
|
-
);
|
|
36
|
-
expect(container.firstChild).toHaveClass("custom-class");
|
|
37
|
-
});
|
|
38
|
-
|
|
39
|
-
it("should render with fixed columns", () => {
|
|
40
|
-
const { container } = render(
|
|
41
|
-
<Grid columns={3}>
|
|
42
|
-
<div>Item 1</div>
|
|
43
|
-
<div>Item 2</div>
|
|
44
|
-
<div>Item 3</div>
|
|
45
|
-
</Grid>
|
|
46
|
-
);
|
|
47
|
-
const gridElement = container.firstChild as HTMLElement;
|
|
48
|
-
const styles = window.getComputedStyle(gridElement);
|
|
49
|
-
expect(styles.display).toBe("grid");
|
|
50
|
-
});
|
|
51
|
-
|
|
52
|
-
it("should render with responsive columns", () => {
|
|
53
|
-
const { container } = render(
|
|
54
|
-
<Grid columns={{ sm: 1, md: 2, lg: 3, xl: 4 }}>
|
|
55
|
-
<div>Item 1</div>
|
|
56
|
-
<div>Item 2</div>
|
|
57
|
-
</Grid>
|
|
58
|
-
);
|
|
59
|
-
const gridElement = container.firstChild as HTMLElement;
|
|
60
|
-
const styles = window.getComputedStyle(gridElement);
|
|
61
|
-
expect(styles.display).toBe("grid");
|
|
62
|
-
});
|
|
63
|
-
|
|
64
|
-
it("should apply gap prop", () => {
|
|
65
|
-
const { container } = render(
|
|
66
|
-
<Grid gap={450}>
|
|
67
|
-
<div>Item 1</div>
|
|
68
|
-
<div>Item 2</div>
|
|
69
|
-
</Grid>
|
|
70
|
-
);
|
|
71
|
-
const gridElement = container.firstChild as HTMLElement;
|
|
72
|
-
const styles = window.getComputedStyle(gridElement);
|
|
73
|
-
expect(styles.rowGap).toBe("24px");
|
|
74
|
-
expect(styles.columnGap).toBe("24px");
|
|
75
|
-
});
|
|
76
|
-
|
|
77
|
-
it("should apply rowGap and columnGap props", () => {
|
|
78
|
-
const { container } = render(
|
|
79
|
-
<Grid rowGap={500} columnGap={400}>
|
|
80
|
-
<div>Item 1</div>
|
|
81
|
-
<div>Item 2</div>
|
|
82
|
-
</Grid>
|
|
83
|
-
);
|
|
84
|
-
const gridElement = container.firstChild as HTMLElement;
|
|
85
|
-
const styles = window.getComputedStyle(gridElement);
|
|
86
|
-
expect(styles.rowGap).toBe("32px");
|
|
87
|
-
expect(styles.columnGap).toBe("16px");
|
|
88
|
-
});
|
|
89
|
-
|
|
90
|
-
it("should override gap with rowGap and columnGap", () => {
|
|
91
|
-
const { container } = render(
|
|
92
|
-
<Grid gap={400} rowGap={500} columnGap={300}>
|
|
93
|
-
<div>Item 1</div>
|
|
94
|
-
<div>Item 2</div>
|
|
95
|
-
</Grid>
|
|
96
|
-
);
|
|
97
|
-
const gridElement = container.firstChild as HTMLElement;
|
|
98
|
-
const styles = window.getComputedStyle(gridElement);
|
|
99
|
-
expect(styles.rowGap).toBe("32px");
|
|
100
|
-
expect(styles.columnGap).toBe("8px");
|
|
101
|
-
});
|
|
102
|
-
|
|
103
|
-
it("should default to 16px gap when no gap props provided", () => {
|
|
104
|
-
const { container } = render(
|
|
105
|
-
<Grid>
|
|
106
|
-
<div>Item 1</div>
|
|
107
|
-
</Grid>
|
|
108
|
-
);
|
|
109
|
-
const gridElement = container.firstChild as HTMLElement;
|
|
110
|
-
const styles = window.getComputedStyle(gridElement);
|
|
111
|
-
expect(styles.rowGap).toBe("16px");
|
|
112
|
-
expect(styles.columnGap).toBe("16px");
|
|
113
|
-
});
|
|
114
|
-
|
|
115
|
-
it("should accept pixel string values for gap", () => {
|
|
116
|
-
const { container } = render(
|
|
117
|
-
<Grid gap="20px">
|
|
118
|
-
<div>Item 1</div>
|
|
119
|
-
<div>Item 2</div>
|
|
120
|
-
</Grid>
|
|
121
|
-
);
|
|
122
|
-
const gridElement = container.firstChild as HTMLElement;
|
|
123
|
-
const styles = window.getComputedStyle(gridElement);
|
|
124
|
-
expect(styles.rowGap).toBe("20px");
|
|
125
|
-
expect(styles.columnGap).toBe("20px");
|
|
126
|
-
});
|
|
127
|
-
|
|
128
|
-
it("should accept pixel string values for rowGap and columnGap", () => {
|
|
129
|
-
const { container } = render(
|
|
130
|
-
<Grid rowGap="48px" columnGap="12px">
|
|
131
|
-
<div>Item 1</div>
|
|
132
|
-
<div>Item 2</div>
|
|
133
|
-
</Grid>
|
|
134
|
-
);
|
|
135
|
-
const gridElement = container.firstChild as HTMLElement;
|
|
136
|
-
const styles = window.getComputedStyle(gridElement);
|
|
137
|
-
expect(styles.rowGap).toBe("48px");
|
|
138
|
-
expect(styles.columnGap).toBe("12px");
|
|
139
|
-
});
|
|
140
|
-
|
|
141
|
-
it("should mix space scale and pixel string values", () => {
|
|
142
|
-
const { container } = render(
|
|
143
|
-
<Grid rowGap={450} columnGap="10px">
|
|
144
|
-
<div>Item 1</div>
|
|
145
|
-
<div>Item 2</div>
|
|
146
|
-
</Grid>
|
|
147
|
-
);
|
|
148
|
-
const gridElement = container.firstChild as HTMLElement;
|
|
149
|
-
const styles = window.getComputedStyle(gridElement);
|
|
150
|
-
expect(styles.rowGap).toBe("24px");
|
|
151
|
-
expect(styles.columnGap).toBe("10px");
|
|
152
|
-
});
|
|
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
|
-
|
|
214
|
-
it("should render with single column by default", () => {
|
|
215
|
-
const { container } = render(
|
|
216
|
-
<Grid>
|
|
217
|
-
<div>Item 1</div>
|
|
218
|
-
<div>Item 2</div>
|
|
219
|
-
</Grid>
|
|
220
|
-
);
|
|
221
|
-
const gridElement = container.firstChild as HTMLElement;
|
|
222
|
-
const styles = window.getComputedStyle(gridElement);
|
|
223
|
-
expect(styles.display).toBe("grid");
|
|
224
|
-
});
|
|
225
|
-
});
|
package/src/index.ts
DELETED
package/src/styled.d.ts
DELETED
package/src/styles.ts
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import styled, { css } from "styled-components";
|
|
2
|
-
import { COMMON, LAYOUT } from "@sproutsocial/seeds-react-system-props";
|
|
3
|
-
|
|
4
|
-
interface GridProps {
|
|
5
|
-
isLoading?: boolean;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
const Grid = styled.div<GridProps>`
|
|
9
|
-
display: block;
|
|
10
|
-
|
|
11
|
-
${(props) =>
|
|
12
|
-
props.isLoading &&
|
|
13
|
-
css`
|
|
14
|
-
visibility: hidden;
|
|
15
|
-
`}
|
|
16
|
-
|
|
17
|
-
${COMMON}
|
|
18
|
-
${LAYOUT}
|
|
19
|
-
`;
|
|
20
|
-
|
|
21
|
-
export default Grid;
|
package/src/utils.ts
DELETED
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
GapValue,
|
|
3
|
-
ResponsiveGapValue,
|
|
4
|
-
ResponsiveValue,
|
|
5
|
-
} from "./GridTypes";
|
|
6
|
-
import { css } from "styled-components";
|
|
7
|
-
import { theme } from "@sproutsocial/seeds-react-theme";
|
|
8
|
-
|
|
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
|
-
};
|
|
19
|
-
|
|
20
|
-
export const getResponsiveStyles = (columns: ResponsiveValue = 1) => {
|
|
21
|
-
if (typeof columns === "number") {
|
|
22
|
-
return css`
|
|
23
|
-
grid-template-columns: repeat(${columns}, 1fr);
|
|
24
|
-
`;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
return css`
|
|
28
|
-
grid-template-columns: repeat(1, 1fr);
|
|
29
|
-
|
|
30
|
-
@media (min-width: ${breakpoints.sm}) {
|
|
31
|
-
grid-template-columns: repeat(${columns.sm || 1}, 1fr);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
@media (min-width: ${breakpoints.md}) {
|
|
35
|
-
grid-template-columns: repeat(${columns.md || columns.sm || 1}, 1fr);
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
@media (min-width: ${breakpoints.lg}) {
|
|
39
|
-
grid-template-columns: repeat(
|
|
40
|
-
${columns.lg || columns.md || columns.sm || 1},
|
|
41
|
-
1fr
|
|
42
|
-
);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
@media (min-width: ${breakpoints.xl}) {
|
|
46
|
-
grid-template-columns: repeat(
|
|
47
|
-
${columns.xl || columns.lg || columns.md || columns.sm || 1},
|
|
48
|
-
1fr
|
|
49
|
-
);
|
|
50
|
-
}
|
|
51
|
-
`;
|
|
52
|
-
};
|
package/tsconfig.json
DELETED
package/tsup.config.ts
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { defineConfig } from "tsup";
|
|
2
|
-
|
|
3
|
-
export default defineConfig((options) => ({
|
|
4
|
-
entry: ["src/index.ts"],
|
|
5
|
-
format: ["cjs", "esm"],
|
|
6
|
-
clean: true,
|
|
7
|
-
legacyOutput: true,
|
|
8
|
-
dts: options.dts,
|
|
9
|
-
external: ["react"],
|
|
10
|
-
sourcemap: true,
|
|
11
|
-
metafile: options.metafile,
|
|
12
|
-
}));
|