@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
110 lines (109 loc) • 2.51 kB
JavaScript
import { buildStyleFns, buildStylePropFn } from './buildStyleFns';
export const gridStyleFnConfigs = [
{
name: 'gridGap',
properties: ['gridGap'],
system: 'space',
},
{
name: 'gridRowGap',
properties: ['gridRowGap'],
system: 'space',
},
{
name: 'gridColumnGap',
properties: ['gridColumnGap'],
system: 'space',
},
{
name: 'alignContent',
properties: ['alignContent'],
system: 'none',
},
{
name: 'alignItems',
properties: ['alignItems'],
system: 'none',
},
{
name: 'display',
properties: ['display'],
system: 'none',
},
{
name: 'justifyContent',
properties: ['justifyContent'],
system: 'none',
},
{
name: 'justifyItems',
properties: ['justifyItems'],
system: 'none',
},
{
name: 'gridTemplateAreas',
properties: ['gridTemplateAreas'],
system: 'none',
},
{
name: 'gridTemplate',
properties: ['gridTemplate'],
system: 'none',
},
{
name: 'gridTemplateColumns',
properties: ['gridTemplateColumns'],
system: 'none',
},
{
name: 'gridTemplateRows',
properties: ['gridTemplateRows'],
system: 'none',
},
{
name: 'gridPlaceItems',
properties: ['gridPlaceItems'],
system: 'none',
},
{
name: 'gridAutoColumns',
properties: ['gridAutoColumns'],
system: 'none',
},
{
name: 'gridAutoRows',
properties: ['gridAutoRows'],
system: 'none',
},
{
name: 'gridAutoFlow',
properties: ['gridAutoFlow'],
system: 'none',
},
{
name: 'gridArea',
properties: ['gridArea'],
system: 'none',
},
{
name: 'grid',
properties: ['grid'],
system: 'none',
},
];
export const gridStyleFns = buildStyleFns(gridStyleFnConfigs);
/**
* A style prop function that takes component props and returns grid styles.
* If no `GridStyleProps` are found, it returns an empty object.
* Space tokens are available for gridGap, gridRowGap, gridColumnGap props.
*
* @example
* ```tsx
* const GridExample = () => (
* <Grid gridAutoFlow="row" justifyContent="center" alignItems="center">
* Hello, Grid!
* </Grid>
* );
* ```
*/
export const grid = buildStylePropFn(gridStyleFns);