import * as React from 'react'; import {PrimaryButton, SecondaryButton} from '@workday/canvas-kit-react/button'; import {Box, Grid} from '@workday/canvas-kit-react/layout'; import {createStyles, px2rem} from '@workday/canvas-kit-styling'; import {system} from '@workday/canvas-tokens-web'; const h3Styles = createStyles({ ...system.type.body.lg, margin: 0, fontWeight: system.fontWeight.bold, }); // temporary placeholder until type components are added to canvas-kit const H3 = (props: React.HTMLAttributes) => (

); const bodyStyles = createStyles({ ...system.type.body.sm, margin: 0, }); const Body = (props: React.HTMLAttributes) => (
); const containerStyles = createStyles({ padding: system.padding.xl, backgroundColor: system.color.surface.info.default, borderRadius: system.shape.lg, boxShadow: system.depth[1], maxWidth: px2rem(600), gridTemplate: 'auto / auto', border: `${px2rem(1)} solid ${system.color.border.contrast.default}`, }); export default () => { const [isComplete, setIsComplete] = React.useState(false); return (
Learn about Grid {isComplete && '🥳'}
Complete this task when you have a functional understanding of Grid. setIsComplete(true)}>Complete setIsComplete(false)}>Cancel ); };