@workday/canvas-kit-docs 9.0.0-alpha.401-next.7 → 9.0.0-alpha.405-next.7
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/mdx/react/_examples/Layouts.mdx +30 -7
- package/dist/mdx/react/_examples/examples/layout/AreaColumnPositioning.tsx +27 -0
- package/dist/mdx/react/_examples/examples/layout/CustomColumnPositioning.tsx +42 -0
- package/dist/mdx/react/_examples/examples/layout/CustomColumnWidth.tsx +27 -0
- package/dist/mdx/react/_examples/examples/layout/FullWidthWith3Columns.tsx +35 -0
- package/dist/mdx/react/_examples/examples/layout/FullWidthWith3Columns2Rows.tsx +39 -0
- package/dist/mdx/react/_examples/examples/layout/Masonry.tsx +53 -0
- package/dist/mdx/react/_examples/examples/layout/ResponsiveColumns.tsx +32 -0
- package/dist/mdx/react/_examples/examples/layout/Tiled2and3Columns.tsx +41 -0
- package/dist/mdx/react/_examples/examples/layout/Tiled4and2Columns.tsx +42 -0
- package/dist/mdx/react/layout/Grid.mdx +3 -0
- package/package.json +5 -5
- package/dist/mdx/react/_examples/examples/Layouts.tsx +0 -116
|
@@ -1,9 +1,12 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
import AreaColumnPositioning from './examples/layout/AreaColumnPositioning';
|
|
2
|
+
import CustomColumnPositioning from './examples/layout/CustomColumnPositioning';
|
|
3
|
+
import CustomColumnWidth from './examples/layout/CustomColumnWidth';
|
|
4
|
+
import FullWidthWith3Columns from './examples/layout/FullWidthWith3Columns';
|
|
5
|
+
import FullWidthWith3Columns2Rows from './examples/layout/FullWidthWith3Columns2Rows';
|
|
6
|
+
import Masonry from './examples/layout/Masonry';
|
|
7
|
+
import ResponsiveColumns from './examples/layout/ResponsiveColumns';
|
|
8
|
+
import Tiled2and3Columns from './examples/layout/Tiled2and3Columns';
|
|
9
|
+
import Tiled4and2Columns from './examples/layout/Tiled4and2Columns';
|
|
7
10
|
|
|
8
11
|
|
|
9
12
|
# Canvas Kit Examples
|
|
@@ -24,6 +27,26 @@ Below are layout examples to reference as you build your own. For more in-depth
|
|
|
24
27
|
|
|
25
28
|
<ExampleCodeBlock code={CustomColumnWidth} />
|
|
26
29
|
|
|
30
|
+
## Full Width With 3 Columns
|
|
31
|
+
|
|
32
|
+
<ExampleCodeBlock code={FullWidthWith3Columns} />
|
|
33
|
+
|
|
34
|
+
## Full Width With 3 Columns and 2 Rows
|
|
35
|
+
|
|
36
|
+
<ExampleCodeBlock code={FullWidthWith3Columns2Rows} />
|
|
37
|
+
|
|
38
|
+
## Masonry
|
|
39
|
+
|
|
40
|
+
<ExampleCodeBlock code={Masonry} />
|
|
41
|
+
|
|
27
42
|
## Responsive Columns
|
|
28
43
|
|
|
29
|
-
<ExampleCodeBlock code={ResponsiveColumns} />
|
|
44
|
+
<ExampleCodeBlock code={ResponsiveColumns} />
|
|
45
|
+
|
|
46
|
+
## 3 and 2 Column Tiled View
|
|
47
|
+
|
|
48
|
+
<ExampleCodeBlock code={Tiled2and3Columns} />
|
|
49
|
+
|
|
50
|
+
## 4 and 2 Column Tiled View
|
|
51
|
+
|
|
52
|
+
<ExampleCodeBlock code={Tiled4and2Columns} />
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
import {Grid, Box} from '@workday/canvas-kit-react/layout';
|
|
4
|
+
import {BodyText, Heading} from '@workday/canvas-kit-react/text';
|
|
5
|
+
|
|
6
|
+
export default () => (
|
|
7
|
+
<>
|
|
8
|
+
<Heading size="medium">Area Column Positioning</Heading>
|
|
9
|
+
<Grid gridTemplateColumns="4fr 8fr" gridTemplateAreas="'header header' 'side main'" gridGap="m">
|
|
10
|
+
<Box height="120px" backgroundColor="blueberry400" gridArea="header">
|
|
11
|
+
<BodyText size="small" textAlign="center" color="frenchVanilla100">
|
|
12
|
+
"header" area
|
|
13
|
+
</BodyText>
|
|
14
|
+
</Box>
|
|
15
|
+
<Box height="120px" backgroundColor="blueberry500" gridArea="side">
|
|
16
|
+
<BodyText size="small" textAlign="center" color="frenchVanilla100">
|
|
17
|
+
"side" area
|
|
18
|
+
</BodyText>
|
|
19
|
+
</Box>
|
|
20
|
+
<Box height="120px" backgroundColor="blueberry600" gridArea="main">
|
|
21
|
+
<BodyText size="small" textAlign="center" color="frenchVanilla100">
|
|
22
|
+
"main" area
|
|
23
|
+
</BodyText>
|
|
24
|
+
</Box>
|
|
25
|
+
</Grid>
|
|
26
|
+
</>
|
|
27
|
+
);
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
import {Grid, Box} from '@workday/canvas-kit-react/layout';
|
|
4
|
+
import {BodyText, Heading} from '@workday/canvas-kit-react/text';
|
|
5
|
+
|
|
6
|
+
export default () => (
|
|
7
|
+
<>
|
|
8
|
+
<Heading size="medium">Custom Column Positioning</Heading>
|
|
9
|
+
<Grid gridTemplateColumns="repeat(12, 1fr)" gridGap="m">
|
|
10
|
+
<Box height="60px" gridColumn="span 4" backgroundColor="blueberry100">
|
|
11
|
+
<BodyText size="small" textAlign="center">
|
|
12
|
+
4 column width
|
|
13
|
+
</BodyText>
|
|
14
|
+
</Box>
|
|
15
|
+
<Box height="60px" gridColumn="span 3" backgroundColor="blueberry200">
|
|
16
|
+
<BodyText size="small" textAlign="center">
|
|
17
|
+
3 column width
|
|
18
|
+
</BodyText>
|
|
19
|
+
</Box>
|
|
20
|
+
<Box height="60px" gridColumn="span 5" backgroundColor="blueberry400">
|
|
21
|
+
<BodyText size="small" textAlign="center" color="frenchVanilla100">
|
|
22
|
+
5 column width
|
|
23
|
+
</BodyText>
|
|
24
|
+
</Box>
|
|
25
|
+
<Box height="60px" gridColumn="1 / 6" backgroundColor="blueberry500">
|
|
26
|
+
<BodyText size="small" textAlign="center" color="frenchVanilla100">
|
|
27
|
+
from 1st to 5th column position
|
|
28
|
+
</BodyText>
|
|
29
|
+
</Box>
|
|
30
|
+
<Box height="60px" gridColumn="7 / 12" backgroundColor="blueberry500">
|
|
31
|
+
<BodyText size="small" textAlign="center" color="frenchVanilla100">
|
|
32
|
+
from 7th to 11th column position
|
|
33
|
+
</BodyText>
|
|
34
|
+
</Box>
|
|
35
|
+
<Box height="60px" gridColumn="2 / span 10" backgroundColor="blueberry600">
|
|
36
|
+
<BodyText size="small" textAlign="center" color="frenchVanilla100">
|
|
37
|
+
10 column width starting from 2nd column
|
|
38
|
+
</BodyText>
|
|
39
|
+
</Box>
|
|
40
|
+
</Grid>
|
|
41
|
+
</>
|
|
42
|
+
);
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
import {Grid, Box} from '@workday/canvas-kit-react/layout';
|
|
4
|
+
import {BodyText, Heading} from '@workday/canvas-kit-react/text';
|
|
5
|
+
|
|
6
|
+
export default () => (
|
|
7
|
+
<>
|
|
8
|
+
<Heading size="medium">Custom Column Width</Heading>
|
|
9
|
+
<Grid gridTemplateColumns="4fr 2fr 6fr" gridGap="m">
|
|
10
|
+
<Box height="120px" backgroundColor="blueberry400">
|
|
11
|
+
<BodyText size="small" textAlign="center" color="frenchVanilla100">
|
|
12
|
+
4 column width
|
|
13
|
+
</BodyText>
|
|
14
|
+
</Box>
|
|
15
|
+
<Box height="120px" backgroundColor="blueberry500">
|
|
16
|
+
<BodyText size="small" textAlign="center" color="frenchVanilla100">
|
|
17
|
+
2 column width
|
|
18
|
+
</BodyText>
|
|
19
|
+
</Box>
|
|
20
|
+
<Box height="120px" backgroundColor="blueberry600">
|
|
21
|
+
<BodyText size="small" textAlign="center" color="frenchVanilla100">
|
|
22
|
+
6 column width
|
|
23
|
+
</BodyText>
|
|
24
|
+
</Box>
|
|
25
|
+
</Grid>
|
|
26
|
+
</>
|
|
27
|
+
);
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
import {Grid, Box} from '@workday/canvas-kit-react/layout';
|
|
4
|
+
import {BodyText, Heading} from '@workday/canvas-kit-react/text';
|
|
5
|
+
import {colors} from '@workday/canvas-kit-react/tokens';
|
|
6
|
+
|
|
7
|
+
export default () => (
|
|
8
|
+
<Grid
|
|
9
|
+
gridTemplateAreas="'Heading Heading Heading' 'FormLeft FormCenter FormRight'"
|
|
10
|
+
gridAutoRows="min-content"
|
|
11
|
+
gridRowGap="s"
|
|
12
|
+
gridColumnGap="xxxl"
|
|
13
|
+
>
|
|
14
|
+
<Box gridArea="Heading" paddingX="s" border={`1px solid ${colors.blueberry400}`}>
|
|
15
|
+
<Heading size="medium">Full Width With 3 Columns</Heading>
|
|
16
|
+
</Box>
|
|
17
|
+
<FormSkeleton gridArea="FormLeft" text="Form - Left Third" />
|
|
18
|
+
<FormSkeleton gridArea="FormCenter" text="Form - Center Third" />
|
|
19
|
+
<FormSkeleton gridArea="FormRight" text="Form - Right Third" />
|
|
20
|
+
</Grid>
|
|
21
|
+
);
|
|
22
|
+
|
|
23
|
+
const FormSkeleton = ({gridArea, text}) => (
|
|
24
|
+
<Box border={`1px dashed ${colors.blueberry400}`} paddingX="m" gridArea={gridArea}>
|
|
25
|
+
<BodyText size="small" fontWeight="bold">
|
|
26
|
+
{text}
|
|
27
|
+
</BodyText>
|
|
28
|
+
{Array.from({length: 5}).map(() => (
|
|
29
|
+
<Grid gridGap="s" marginBottom="xl">
|
|
30
|
+
<Box backgroundColor="soap500" width="120px" height="s" />
|
|
31
|
+
<Box borderWidth="1px" borderStyle="solid" borderColor="soap500" width="100%" height="xl" />
|
|
32
|
+
</Grid>
|
|
33
|
+
))}
|
|
34
|
+
</Box>
|
|
35
|
+
);
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
import {Grid, Box} from '@workday/canvas-kit-react/layout';
|
|
4
|
+
import {BodyText, Heading} from '@workday/canvas-kit-react/text';
|
|
5
|
+
import {colors} from '@workday/canvas-kit-react/tokens';
|
|
6
|
+
|
|
7
|
+
export default () => (
|
|
8
|
+
<Grid
|
|
9
|
+
gridTemplateAreas="'Heading Heading Heading'"
|
|
10
|
+
gridColumn="repeat(3, 1fr)"
|
|
11
|
+
gridAutoRows="min-content"
|
|
12
|
+
gridRowGap="s"
|
|
13
|
+
gridColumnGap="xxxl"
|
|
14
|
+
>
|
|
15
|
+
<Box gridArea="Heading" paddingX="s" border={`1px solid ${colors.blueberry400}`}>
|
|
16
|
+
<Heading size="medium">Full Width With 3 Columns and 2 Rows</Heading>
|
|
17
|
+
</Box>
|
|
18
|
+
<FormSkeleton />
|
|
19
|
+
<FormSkeleton />
|
|
20
|
+
<FormSkeleton />
|
|
21
|
+
<FormSkeleton />
|
|
22
|
+
<FormSkeleton />
|
|
23
|
+
<FormSkeleton />
|
|
24
|
+
</Grid>
|
|
25
|
+
);
|
|
26
|
+
|
|
27
|
+
const FormSkeleton = props => (
|
|
28
|
+
<Box border={`1px dashed ${colors.blueberry400}`} paddingX="m" {...props}>
|
|
29
|
+
<BodyText size="small" fontWeight="bold">
|
|
30
|
+
Form Block
|
|
31
|
+
</BodyText>
|
|
32
|
+
{Array.from({length: 3}).map(() => (
|
|
33
|
+
<Grid gridGap="s" marginBottom="xl">
|
|
34
|
+
<Box backgroundColor="soap500" width="120px" height="s" />
|
|
35
|
+
<Box borderWidth="1px" borderStyle="solid" borderColor="soap500" width="100%" height="xl" />
|
|
36
|
+
</Grid>
|
|
37
|
+
))}
|
|
38
|
+
</Box>
|
|
39
|
+
);
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import {colors} from '@workday/canvas-kit-react/tokens';
|
|
3
|
+
import {Box, Grid} from '@workday/canvas-kit-react/layout';
|
|
4
|
+
import {Heading} from '@workday/canvas-kit-react/text';
|
|
5
|
+
import {styled} from '@workday/canvas-kit-react/common';
|
|
6
|
+
|
|
7
|
+
const Container = styled(Box)({
|
|
8
|
+
columnCount: 3,
|
|
9
|
+
columnGap: '12px',
|
|
10
|
+
});
|
|
11
|
+
|
|
12
|
+
const StyledCard = styled(Box)({
|
|
13
|
+
breakInside: 'avoid',
|
|
14
|
+
});
|
|
15
|
+
|
|
16
|
+
export default () => (
|
|
17
|
+
<>
|
|
18
|
+
<Heading size="medium">Masonry Layout</Heading>
|
|
19
|
+
<Container>
|
|
20
|
+
{Array.from({length: 8}).map((_, ind) => (
|
|
21
|
+
<StyledCard
|
|
22
|
+
key={ind}
|
|
23
|
+
border={`2px dashed ${colors.blueberry400}`}
|
|
24
|
+
marginBottom="xs"
|
|
25
|
+
padding="s"
|
|
26
|
+
>
|
|
27
|
+
<Grid gridGap="s" marginBottom="xl">
|
|
28
|
+
<Box backgroundColor="soap500" width="120px" height="s" />
|
|
29
|
+
<Box
|
|
30
|
+
borderWidth="1px"
|
|
31
|
+
borderStyle="solid"
|
|
32
|
+
borderColor="soap500"
|
|
33
|
+
width="100%"
|
|
34
|
+
height="xl"
|
|
35
|
+
/>
|
|
36
|
+
</Grid>
|
|
37
|
+
{ind % 2 === 0 && (
|
|
38
|
+
<Grid gridGap="s" marginBottom="xl">
|
|
39
|
+
<Box backgroundColor="soap500" width="120px" height="s" />
|
|
40
|
+
<Box
|
|
41
|
+
borderWidth="1px"
|
|
42
|
+
borderStyle="solid"
|
|
43
|
+
borderColor="soap500"
|
|
44
|
+
width="100%"
|
|
45
|
+
height="xl"
|
|
46
|
+
/>
|
|
47
|
+
</Grid>
|
|
48
|
+
)}
|
|
49
|
+
</StyledCard>
|
|
50
|
+
))}
|
|
51
|
+
</Container>
|
|
52
|
+
</>
|
|
53
|
+
);
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
import {Grid, Box} from '@workday/canvas-kit-react/layout';
|
|
4
|
+
import {BodyText, Heading} from '@workday/canvas-kit-react/text';
|
|
5
|
+
import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
|
|
6
|
+
|
|
7
|
+
export default () => {
|
|
8
|
+
const [screen, setScreen] = React.useState('100%');
|
|
9
|
+
|
|
10
|
+
return (
|
|
11
|
+
<>
|
|
12
|
+
<Heading size="medium">Responsive Columns</Heading>
|
|
13
|
+
<BodyText size="small">Choose screen size to see changes</BodyText>
|
|
14
|
+
<SegmentedControl initialValue={screen} onSelect={data => setScreen(data.id)}>
|
|
15
|
+
<SegmentedControl.List aria-label="screen-size" marginBottom="l">
|
|
16
|
+
<SegmentedControl.Item data-id="100%">100%</SegmentedControl.Item>
|
|
17
|
+
<SegmentedControl.Item data-id="75%">75%</SegmentedControl.Item>
|
|
18
|
+
<SegmentedControl.Item data-id="50%">50%</SegmentedControl.Item>
|
|
19
|
+
<SegmentedControl.Item data-id="25%">25%</SegmentedControl.Item>
|
|
20
|
+
</SegmentedControl.List>
|
|
21
|
+
</SegmentedControl>
|
|
22
|
+
<Box maxWidth={screen} border="2px solid black" padding="s">
|
|
23
|
+
<Grid gridTemplateColumns="repeat(auto-fit, minmax(200px, 1fr))" gridGap="m">
|
|
24
|
+
<Box height="120px" backgroundColor="blueberry300" />
|
|
25
|
+
<Box height="120px" backgroundColor="blueberry400" />
|
|
26
|
+
<Box height="120px" backgroundColor="blueberry500" />
|
|
27
|
+
<Box height="120px" backgroundColor="blueberry600" />
|
|
28
|
+
</Grid>
|
|
29
|
+
</Box>
|
|
30
|
+
</>
|
|
31
|
+
);
|
|
32
|
+
};
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
import {Grid, Box} from '@workday/canvas-kit-react/layout';
|
|
4
|
+
import {BodyText, Heading} from '@workday/canvas-kit-react/text';
|
|
5
|
+
import {colors} from '@workday/canvas-kit-react/tokens';
|
|
6
|
+
|
|
7
|
+
export default () => (
|
|
8
|
+
<Grid
|
|
9
|
+
gridTemplateAreas={`
|
|
10
|
+
'Heading Heading Heading Heading Heading Heading'
|
|
11
|
+
'FormThirdLeft FormThirdLeft FormThirdCenter FormThirdCenter FormThirdRight FormThirdRight'
|
|
12
|
+
'FormHalfRight FormHalfRight FormHalfRight FormHalfLeft FormHalfLeft FormHalfLeft'
|
|
13
|
+
`}
|
|
14
|
+
gridAutoRows="min-content"
|
|
15
|
+
gridRowGap="s"
|
|
16
|
+
gridColumnGap="xxxl"
|
|
17
|
+
>
|
|
18
|
+
<Box gridArea="Heading" paddingX="s" border={`1px solid ${colors.blueberry400}`}>
|
|
19
|
+
<Heading size="medium">3 and 2 Column Tiled View</Heading>
|
|
20
|
+
</Box>
|
|
21
|
+
<FormSkeleton gridArea="FormThirdLeft" text="Form - Left Third" />
|
|
22
|
+
<FormSkeleton gridArea="FormThirdCenter" text="Form - Center Third" />
|
|
23
|
+
<FormSkeleton gridArea="FormThirdRight" text="Form - Right Third" />
|
|
24
|
+
<FormSkeleton gridArea="FormHalfRight" text="Form - Left Half" />
|
|
25
|
+
<FormSkeleton gridArea="FormHalfLeft" text="Form - Right Half" />
|
|
26
|
+
</Grid>
|
|
27
|
+
);
|
|
28
|
+
|
|
29
|
+
const FormSkeleton = ({gridArea, text}) => (
|
|
30
|
+
<Box border={`1px dashed ${colors.blueberry400}`} paddingX="m" gridArea={gridArea}>
|
|
31
|
+
<BodyText size="small" fontWeight="bold">
|
|
32
|
+
{text}
|
|
33
|
+
</BodyText>
|
|
34
|
+
{Array.from({length: 3}).map(() => (
|
|
35
|
+
<Grid gridGap="s" marginBottom="xl">
|
|
36
|
+
<Box backgroundColor="soap500" width="120px" height="s" />
|
|
37
|
+
<Box borderWidth="1px" borderStyle="solid" borderColor="soap500" width="100%" height="xl" />
|
|
38
|
+
</Grid>
|
|
39
|
+
))}
|
|
40
|
+
</Box>
|
|
41
|
+
);
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
import {Grid, Box} from '@workday/canvas-kit-react/layout';
|
|
4
|
+
import {BodyText, Heading} from '@workday/canvas-kit-react/text';
|
|
5
|
+
import {colors} from '@workday/canvas-kit-react/tokens';
|
|
6
|
+
|
|
7
|
+
export default () => (
|
|
8
|
+
<Grid
|
|
9
|
+
gridTemplateAreas={`
|
|
10
|
+
'Heading Heading Heading Heading'
|
|
11
|
+
'FormTopHalfLeft FormTopHalfLeft FormQuarterLeft FormQuarterRight'
|
|
12
|
+
'FormHalfLeft FormHalfLeft FormHalfRight FormHalfRight '
|
|
13
|
+
`}
|
|
14
|
+
gridTemplateColumns="repeat(4, 1fr)"
|
|
15
|
+
gridAutoRows="min-content"
|
|
16
|
+
gridRowGap="s"
|
|
17
|
+
gridColumnGap="xxxl"
|
|
18
|
+
>
|
|
19
|
+
<Box gridArea="Heading" paddingX="s" border={`1px solid ${colors.blueberry400}`}>
|
|
20
|
+
<Heading size="medium">4 and 2 Column Tiled View</Heading>
|
|
21
|
+
</Box>
|
|
22
|
+
<FormSkeleton gridArea="FormTopHalfLeft" text="Form - Top Left Half" />
|
|
23
|
+
<FormSkeleton gridArea="FormQuarterLeft" text="Form - Left Quarter" />
|
|
24
|
+
<FormSkeleton gridArea="FormQuarterRight" text="Form - Right Quarter" />
|
|
25
|
+
<FormSkeleton gridArea="FormHalfLeft" text="Form - Left Half" />
|
|
26
|
+
<FormSkeleton gridArea="FormHalfRight" text="Form - Right Half" />
|
|
27
|
+
</Grid>
|
|
28
|
+
);
|
|
29
|
+
|
|
30
|
+
const FormSkeleton = ({gridArea, text}) => (
|
|
31
|
+
<Box border={`1px dashed ${colors.blueberry400}`} paddingX="m" gridArea={gridArea}>
|
|
32
|
+
<BodyText size="small" fontWeight="bold">
|
|
33
|
+
{text}
|
|
34
|
+
</BodyText>
|
|
35
|
+
{Array.from({length: 3}).map(() => (
|
|
36
|
+
<Grid gridGap="s" marginBottom="xl">
|
|
37
|
+
<Box backgroundColor="soap500" width="120px" height="s" />
|
|
38
|
+
<Box borderWidth="1px" borderStyle="solid" borderColor="soap500" width="100%" height="xl" />
|
|
39
|
+
</Grid>
|
|
40
|
+
))}
|
|
41
|
+
</Box>
|
|
42
|
+
);
|
|
@@ -11,6 +11,9 @@ import GridLayoutInteractive from './examples/Grid/GridLayoutInteractive';
|
|
|
11
11
|
two-dimensional layouts (rows and columns) with
|
|
12
12
|
[CSS Grid](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids).
|
|
13
13
|
|
|
14
|
+
Please refer to our [layout examples](/examples/layout/) for more examples of how to implement
|
|
15
|
+
different layouts using `Grid`.
|
|
16
|
+
|
|
14
17
|
## Installation
|
|
15
18
|
|
|
16
19
|
```sh
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "9.0.0-alpha.
|
|
3
|
+
"version": "9.0.0-alpha.405-next.7+75acd35a",
|
|
4
4
|
"description": "Documentation components of Canvas Kit components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -44,9 +44,9 @@
|
|
|
44
44
|
"dependencies": {
|
|
45
45
|
"@emotion/styled": "^11.6.0",
|
|
46
46
|
"@storybook/csf": "0.0.1",
|
|
47
|
-
"@workday/canvas-kit-labs-react": "^9.0.0-alpha.
|
|
48
|
-
"@workday/canvas-kit-preview-react": "^9.0.0-alpha.
|
|
49
|
-
"@workday/canvas-kit-react": "^9.0.0-alpha.
|
|
47
|
+
"@workday/canvas-kit-labs-react": "^9.0.0-alpha.405-next.7+75acd35a",
|
|
48
|
+
"@workday/canvas-kit-preview-react": "^9.0.0-alpha.405-next.7+75acd35a",
|
|
49
|
+
"@workday/canvas-kit-react": "^9.0.0-alpha.405-next.7+75acd35a",
|
|
50
50
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
51
51
|
"markdown-to-jsx": "^6.10.3",
|
|
52
52
|
"ts-node": "^10.9.1"
|
|
@@ -57,5 +57,5 @@
|
|
|
57
57
|
"mkdirp": "^1.0.3",
|
|
58
58
|
"typescript": "4.2"
|
|
59
59
|
},
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "75acd35a4c65042ac05c468a0258871d2a7a0a60"
|
|
61
61
|
}
|
|
@@ -1,116 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
|
|
3
|
-
import {Grid, Box} from '@workday/canvas-kit-react/layout';
|
|
4
|
-
import {BodyText, Heading} from '@workday/canvas-kit-react/text';
|
|
5
|
-
import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
|
|
6
|
-
|
|
7
|
-
export default () => (
|
|
8
|
-
<>
|
|
9
|
-
<Heading size="medium">Custom Column Positioning</Heading>
|
|
10
|
-
<Grid gridTemplateColumns="repeat(12, 1fr)" gridGap="m">
|
|
11
|
-
<Box height="60px" gridColumn="span 4" backgroundColor="blueberry100">
|
|
12
|
-
<BodyText size="small" textAlign="center">
|
|
13
|
-
4 column width
|
|
14
|
-
</BodyText>
|
|
15
|
-
</Box>
|
|
16
|
-
<Box height="60px" gridColumn="span 3" backgroundColor="blueberry200">
|
|
17
|
-
<BodyText size="small" textAlign="center">
|
|
18
|
-
3 column width
|
|
19
|
-
</BodyText>
|
|
20
|
-
</Box>
|
|
21
|
-
<Box height="60px" gridColumn="span 5" backgroundColor="blueberry400">
|
|
22
|
-
<BodyText size="small" textAlign="center" color="frenchVanilla100">
|
|
23
|
-
5 column width
|
|
24
|
-
</BodyText>
|
|
25
|
-
</Box>
|
|
26
|
-
<Box height="60px" gridColumn="1 / 6" backgroundColor="blueberry500">
|
|
27
|
-
<BodyText size="small" textAlign="center" color="frenchVanilla100">
|
|
28
|
-
from 1st to 5th column position
|
|
29
|
-
</BodyText>
|
|
30
|
-
</Box>
|
|
31
|
-
<Box height="60px" gridColumn="7 / 12" backgroundColor="blueberry500">
|
|
32
|
-
<BodyText size="small" textAlign="center" color="frenchVanilla100">
|
|
33
|
-
from 7th to 11th column position
|
|
34
|
-
</BodyText>
|
|
35
|
-
</Box>
|
|
36
|
-
<Box height="60px" gridColumn="2 / span 10" backgroundColor="blueberry600">
|
|
37
|
-
<BodyText size="small" textAlign="center" color="frenchVanilla100">
|
|
38
|
-
10 column width starting from 2nd column
|
|
39
|
-
</BodyText>
|
|
40
|
-
</Box>
|
|
41
|
-
</Grid>
|
|
42
|
-
</>
|
|
43
|
-
);
|
|
44
|
-
|
|
45
|
-
export default () => (
|
|
46
|
-
<>
|
|
47
|
-
<Heading size="medium">Area Column Positioning</Heading>
|
|
48
|
-
<Grid gridTemplateColumns="4fr 8fr" gridTemplateAreas="'header header' 'side main'" gridGap="m">
|
|
49
|
-
<Box height="120px" backgroundColor="blueberry400" gridArea="header">
|
|
50
|
-
<BodyText size="small" textAlign="center" color="frenchVanilla100">
|
|
51
|
-
"header" area
|
|
52
|
-
</BodyText>
|
|
53
|
-
</Box>
|
|
54
|
-
<Box height="120px" backgroundColor="blueberry500" gridArea="side">
|
|
55
|
-
<BodyText size="small" textAlign="center" color="frenchVanilla100">
|
|
56
|
-
"side" area
|
|
57
|
-
</BodyText>
|
|
58
|
-
</Box>
|
|
59
|
-
<Box height="120px" backgroundColor="blueberry600" gridArea="main">
|
|
60
|
-
<BodyText size="small" textAlign="center" color="frenchVanilla100">
|
|
61
|
-
"main" area
|
|
62
|
-
</BodyText>
|
|
63
|
-
</Box>
|
|
64
|
-
</Grid>
|
|
65
|
-
</>
|
|
66
|
-
);
|
|
67
|
-
|
|
68
|
-
export default () => (
|
|
69
|
-
<>
|
|
70
|
-
<Heading size="medium">Custom Column Width</Heading>
|
|
71
|
-
<Grid gridTemplateColumns="4fr 2fr 6fr" gridGap="m">
|
|
72
|
-
<Box height="120px" backgroundColor="blueberry400">
|
|
73
|
-
<BodyText size="small" textAlign="center" color="frenchVanilla100">
|
|
74
|
-
4 column width
|
|
75
|
-
</BodyText>
|
|
76
|
-
</Box>
|
|
77
|
-
<Box height="120px" backgroundColor="blueberry500">
|
|
78
|
-
<BodyText size="small" textAlign="center" color="frenchVanilla100">
|
|
79
|
-
2 column width
|
|
80
|
-
</BodyText>
|
|
81
|
-
</Box>
|
|
82
|
-
<Box height="120px" backgroundColor="blueberry600">
|
|
83
|
-
<BodyText size="small" textAlign="center" color="frenchVanilla100">
|
|
84
|
-
6 column width
|
|
85
|
-
</BodyText>
|
|
86
|
-
</Box>
|
|
87
|
-
</Grid>
|
|
88
|
-
</>
|
|
89
|
-
);
|
|
90
|
-
|
|
91
|
-
export default () => {
|
|
92
|
-
const [screen, setScreen] = React.useState('100%');
|
|
93
|
-
|
|
94
|
-
return (
|
|
95
|
-
<>
|
|
96
|
-
<Heading size="medium">Responsive Columns</Heading>
|
|
97
|
-
<BodyText size="small">Choose screen size to see changes</BodyText>
|
|
98
|
-
<SegmentedControl initialValue={screen} onSelect={data => setScreen(data.id)}>
|
|
99
|
-
<SegmentedControl.List aria-label="screen-size" marginBottom="l">
|
|
100
|
-
<SegmentedControl.Item data-id="100%">100%</SegmentedControl.Item>
|
|
101
|
-
<SegmentedControl.Item data-id="75%">75%</SegmentedControl.Item>
|
|
102
|
-
<SegmentedControl.Item data-id="50%">50%</SegmentedControl.Item>
|
|
103
|
-
<SegmentedControl.Item data-id="25%">25%</SegmentedControl.Item>
|
|
104
|
-
</SegmentedControl.List>
|
|
105
|
-
</SegmentedControl>
|
|
106
|
-
<Box maxWidth={screen} border="2px solid black" padding="s">
|
|
107
|
-
<Grid gridTemplateColumns="repeat(auto-fit, minmax(200px, 1fr))" gridGap="m">
|
|
108
|
-
<Box height="120px" backgroundColor="blueberry300" />
|
|
109
|
-
<Box height="120px" backgroundColor="blueberry400" />
|
|
110
|
-
<Box height="120px" backgroundColor="blueberry500" />
|
|
111
|
-
<Box height="120px" backgroundColor="blueberry600" />
|
|
112
|
-
</Grid>
|
|
113
|
-
</Box>
|
|
114
|
-
</>
|
|
115
|
-
);
|
|
116
|
-
};
|