Skip to content

Commit 3de3cec

Browse files
raquelarrojoraquelarrojo
authored
Merge pull request #1582 from dxc-technology/gomezivann-new-grid-docs
First version of the Grid documentation
2 parents f53d80b + a0ff279 commit 3de3cec

File tree

26 files changed

+1580
-862
lines changed

26 files changed

+1580
-862
lines changed

‎lib/src/bleed/Bleed.stories.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -337,5 +337,6 @@ const Placeholder = styled.div`
337337
min-height: 40px;
338338
min-width: 120px;
339339
border: 1px solid #a46ede;
340+
border-radius: 0.5rem;
340341
background-color: #e5d5f6;
341342
`;

‎lib/src/flex/Flex.stories.tsx‎

Lines changed: 19 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,19 @@ export const Chromatic = () => (
1414
<Container>
1515
<DxcFlex>
1616
<Placeholder />
17-
<Placeholder width="50px" />
17+
<Placeholder minWidth="50px" />
1818
<Placeholder />
19-
<Placeholder width="50px" />
20-
<Placeholder width="50px" />
19+
<Placeholder minWidth="50px" />
20+
<Placeholder minWidth="50px" />
2121
</DxcFlex>
2222
</Container>
2323
<Title title="Direction column, wrap, justify content end, align items center and gap" level={4} />
2424
<Container>
2525
<DxcFlex direction="column" wrap="wrap" justifyContent="end" alignItems="center" gap="20px">
2626
<Placeholder />
27-
<Placeholder width="100px" />
27+
<Placeholder minWidth="100px" />
2828
<Placeholder />
29-
<Placeholder width="100px" />
29+
<Placeholder minWidth="100px" />
3030
<Placeholder />
3131
</DxcFlex>
3232
</Container>
@@ -37,44 +37,44 @@ export const Chromatic = () => (
3737
<Placeholder />
3838
<Placeholder />
3939
<Placeholder />
40-
<Placeholder width="100px" />
40+
<Placeholder minWidth="100px" />
4141
<Placeholder />
4242
<Placeholder />
43-
<Placeholder width="100px" />
43+
<Placeholder minWidth="100px" />
4444
<Placeholder />
4545
<Placeholder />
46-
<Placeholder width="100px" />
46+
<Placeholder minWidth="100px" />
4747
<Placeholder />
4848
</DxcFlex>
4949
</Container>
5050
<Title title="Basis 100%, order, grow and align self" level={4} />
5151
<Container height="75px">
5252
<DxcFlex basis="100%">
5353
<DxcFlex order={3} grow={1} alignSelf="flex-end">
54-
<PlaceholderGrowAndShrink>order 3, grow 1, align self end</PlaceholderGrowAndShrink>
54+
<Placeholder width="100%" minWidth="0">order 3, grow 1, align self end</Placeholder>
5555
</DxcFlex>
5656
<DxcFlex order={-1} grow={4}>
57-
<PlaceholderGrowAndShrink>order -1, grow 4</PlaceholderGrowAndShrink>
57+
<Placeholder width="100%" minWidth="0">order -1, grow 4</Placeholder>
5858
</DxcFlex>
5959
<DxcFlex order={5} grow={1}>
60-
<PlaceholderGrowAndShrink>order 5, grow 1</PlaceholderGrowAndShrink>
60+
<Placeholder width="100%" minWidth="0">order 5, grow 1</Placeholder>
6161
</DxcFlex>
6262
<DxcFlex order={2} grow={2}>
63-
<PlaceholderGrowAndShrink>order 2. grow 2</PlaceholderGrowAndShrink>
63+
<Placeholder width="100%" minWidth="0">order 2. grow 2</Placeholder>
6464
</DxcFlex>
6565
</DxcFlex>
6666
</Container>
6767
<Title title="Basis and shrink" level={4} />
6868
<Container>
6969
<DxcFlex basis="600px">
7070
<DxcFlex shrink={4} basis="400px">
71-
<PlaceholderGrowAndShrink>shrink 4</PlaceholderGrowAndShrink>
71+
<Placeholder width="100%" minWidth="0">shrink 4</Placeholder>
7272
</DxcFlex>
7373
<DxcFlex shrink={2} basis="400px">
74-
<PlaceholderGrowAndShrink>shrink 2</PlaceholderGrowAndShrink>
74+
<Placeholder width="100%" minWidth="0">shrink 2</Placeholder>
7575
</DxcFlex>
7676
<DxcFlex shrink={1} basis="400px">
77-
<PlaceholderGrowAndShrink>shrink 1</PlaceholderGrowAndShrink>
77+
<Placeholder width="100%" minWidth="0">shrink 1</Placeholder>
7878
</DxcFlex>
7979
</DxcFlex>
8080
</Container>
@@ -88,16 +88,11 @@ const Container = styled.div<{ height?: string }>`
8888
${({ height }) => (height ? `height: ${height}` : "max-height: 150px")};
8989
`;
9090

91-
const Placeholder = styled.div<{ width?: string }>`
91+
const Placeholder = styled.div<{ minWidth?: string, width?: string }>`
9292
height: 40px;
93-
min-width: ${({ width }) => width || "200px"};
94-
border: 1px solid #a46ede;
95-
background-color: #e5d5f6;
96-
`;
97-
98-
const PlaceholderGrowAndShrink = styled.div`
99-
height: 40px;
100-
width: 100%;
93+
min-width: ${({ minWidth }) => minWidth ?? "200px"};
94+
width: ${({ width }) => width};
10195
border: 1px solid #a46ede;
96+
border-radius: 0.5rem;
10297
background-color: #e5d5f6;
10398
`;

‎lib/src/grid/types.ts‎

Lines changed: 70 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,23 +23,92 @@ type PlaceGeneric<PlaceValues, Element extends string> =
2323
| PlaceValues;
2424

2525
export type GridItemProps = {
26+
/**
27+
* Sets the name of an item so that it can be referenced by a template created with the grid-template-areas property.
28+
*/
2629
areaName?: string;
30+
/**
31+
* Sets the grid-column CSS property.
32+
*
33+
* See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column
34+
*/
2735
column?: number | string | GridCell;
36+
/**
37+
* Sets the grid-row CSS property.
38+
*
39+
* See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row
40+
*/
2841
row?: number | string | GridCell;
42+
/**
43+
* Sets the place-self CSS property.
44+
*
45+
* See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/place-self
46+
*/
2947
placeSelf?: PlaceGeneric<PlaceSelfValues, "self">;
48+
/**
49+
* Sets a custom HTML tag.
50+
*/
3051
as?: keyof HTMLElementTagNameMap;
52+
/**
53+
* Custom content inside the grid container.
54+
*/
3155
children: React.ReactNode;
3256
};
3357

3458
type Props = GridItemProps & {
59+
/**
60+
* Sets the grid-auto-columns CSS property.
61+
*
62+
* See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns
63+
*/
3564
autoColumns?: string;
36-
autoRows?: string;
65+
/**
66+
* Sets the grid-auto-flow CSS property.
67+
*
68+
* See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow
69+
*/
3770
autoFlow?: "row" | "column" | "row dense" | "column dense";
71+
/**
72+
* Sets the grid-auto-rows CSS property.
73+
*
74+
* See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows
75+
*/
76+
autoRows?: string;
77+
/**
78+
* Sets the gap CSS property.
79+
*
80+
* See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/gap
81+
*/
3882
gap?: Spaces | Gap;
83+
/**
84+
* Sets the place-content CSS property.
85+
*
86+
* See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/place-content
87+
*/
3988
placeContent?: PlaceGeneric<PlaceContentValues, "content">;
89+
/**
90+
* Sets the place-items CSS property.
91+
*
92+
* See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/place-items
93+
*/
4094
placeItems?: PlaceGeneric<PlaceItemsValues, "items">;
95+
/**
96+
* Sets the grid-template-areas CSS property.
97+
*
98+
* See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas
99+
*/
41100
templateAreas?: string[];
101+
/**
102+
* Sets the grid-template-columns CSS property.
103+
*
104+
* See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
105+
*/
42106
templateColumns?: string[];
107+
/**
108+
* Sets the grid-template-rows CSS property.
109+
*
110+
* See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows
111+
*/
43112
templateRows?: string[];
44113
};
45114

‎lib/src/inset/Inset.stories.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -225,5 +225,6 @@ const Placeholder = styled.div`
225225
min-height: 40px;
226226
min-width: 120px;
227227
border: 1px solid #a46ede;
228+
border-radius: 0.5rem;
228229
background-color: #e5d5f6;
229230
`;

0 commit comments

Comments
 (0)