UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

67 lines (66 loc) 2.41 kB
import * as React from 'react'; import styled from '@emotion/styled'; import { createComponent } from '@workday/canvas-kit-react/common'; import { Box } from './Box'; import { grid } from './utils/grid'; const StyledGrid = styled(Box)({ display: 'grid', }, grid); const GridItem = createComponent('div')({ displayName: 'Grid.Item', Component: ({ children, ...elemProps }, ref, Element) => { return (React.createElement(Box, { as: Element, ref: ref, ...elemProps }, children)); }, }); /** * `Grid` is a two-dimensional layout system for the web. It lets you lay content out in rows and columns. * It is highly flexible, and can be used on its own or to build other components. * `Grid` is built on top of `Box` and has access to all `BoxProps`. * * @example * ```tsx * import { Grid } from '@workday/canvas-kit-react/layout'; * * interface CardProps extends GridProps { * // card-specific props * } * * // `Card`'s default values are set using `GridProps` * const Card = (props: CardProps) => ( * <Grid gridAutoFlow="row" alignItems="start" depth={1} space="m" {...props}> * <h1>Hello, Card!</h1> * <p>This card uses grid to set its layout.</p> * </Grid> * ); *``` */ export const Grid = createComponent('div')({ displayName: 'Grid', Component: ({ children, ...elemProps }, ref, Element) => { return (React.createElement(StyledGrid, { as: Element, ref: ref, ...elemProps }, children)); }, subComponents: { /** * `<Grid.Item />` is the child specific sub-component to `<Grid/>`. `<Grid.Item />` gets child specific props, whereas `<Grid./>` gets parent container props. * * @example * ``` * import { Grid } from '@workday/canvas-kit-react/layout'; * `Grid` is built on top of `Box` so `<Grid.Item />` gets all `BoxProps` as well. * * interface CardProps extends GridItemStyleProps { * // card-specific props * } * * // `Card`'s default values are set using `GridItemStyleProps` * const Card = (props: CardProps) => ( * <Grid.Item gridRowStart="1" gridArea="Card" {...props}> * <h1>Hello, Card!</h1> * <p>This card uses grid child specific props to set its layout.</p> * </Grid.Item> * ); *``` */ Item: GridItem, }, });