@workday/canvas-kit-docs/dist/es6/mdx/welcomePage.js

Documentation components of Canvas Kit components

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// @ts-ignore: Cannot find module error
import headerImage from './ck-banner.jpg';
// @ts-ignore: Cannot find module error
import componentsImage from './Components.png';
// @ts-ignore: Cannot find module error
import tokensImage from './Tokens.png';
// @ts-ignore: Cannot find module error
import stylingImage from './Styling.png';
import { Flex, Grid, Box } from '@workday/canvas-kit-react/layout';
import { InstallBlock } from './installBlock';
import { Text, Heading } from '@workday/canvas-kit-react/text';
import { Card } from '@workday/canvas-kit-react/card';
import { ExternalHyperlink, Hyperlink } from '@workday/canvas-kit-react/button';
import { system } from '@workday/canvas-tokens-web';
import { createStyles } from '@workday/canvas-kit-styling';
import { Graphic } from '@workday/canvas-kit-react/icon';
// @ts-ignore: Cannot find module error
import { version } from '../../../lerna.json';
const parentFlexStyles = createStyles({
    display: 'flex',
    flexDirection: 'column',
    gap: system.space.x4,
    marginBottom: system.space.x6,
});
const bannerTextStyles = createStyles({
    color: system.color.text.inverse,
    fontSize: '5vmin',
    lineHeight: '5vmin',
});
const versionStyles = createStyles({
    ...system.type.body.medium,
    marginInlineStart: system.space.x4,
});
const imageStyles = createStyles({
    width: '100%',
    height: 'auto',
});
const gridStyles = createStyles({
    maxHeight: 400,
    gridTemplateRows: '1fr 1fr 2fr 1fr',
    display: 'grid',
});
const linkStyles = createStyles({
    alignSelf: 'end',
    marginTop: system.space.x3,
});
export const WelcomePage = () => {
    return (_jsx("div", { className: "sb-unstyled", children: _jsxs("div", { className: parentFlexStyles, children: [_jsxs(Box, { cs: { overflow: 'hidden', position: 'relative' }, children: [_jsx("img", { src: headerImage, alt: "banner with canvas kit logo and version", className: imageStyles }), _jsx(Flex, { cs: { flexDirection: 'row', position: 'absolute', top: '45%', right: '5%' }, children: _jsxs(Text, { typeLevel: "title.medium", cs: [bannerTextStyles, versionStyles], children: ["v", version] }) })] }), _jsxs(Text, { typeLevel: "body.medium", children: ["This project provides a set of components for the Workday Canvas Design System that can be used to implement user experiences consistent with", _jsx(ExternalHyperlink, { href: "https://canvas.workdaydesign.com/", iconLabel: "Open docs in new window", cs: { marginInlineStart: system.space.x1 }, children: "Workday Design Principles." })] }), _jsx(Heading, { size: "medium", children: "Quick Links" }), _jsxs(Grid, { gridAutoColumns: "auto", gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))", gridGap: "s", children: [_jsxs(Grid, { as: Card, className: gridStyles, children: [_jsx(Graphic, { src: { url: componentsImage } }), _jsx(Card.Heading, { children: "Getting Started" }), _jsx(Card.Body, { children: _jsx(Text, { children: "For all things getting started including helpful guides and docs." }) }), _jsx(Grid.Item, { as: Hyperlink, className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/guides-getting-started--docs", children: "Getting Started Guide" })] }), _jsxs(Grid, { as: Card, className: gridStyles, children: [_jsx(Graphic, { src: { url: tokensImage } }), _jsx(Card.Heading, { children: "Tokens" }), _jsx(Card.Body, { children: _jsx(Text, { children: "Tokens are the smallest pieces of our Design System with the primary function of storing UI information." }) }), _jsx(Grid.Item, { as: ExternalHyperlink, className: linkStyles, href: "https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs", children: "View Our Tokens" })] }), _jsxs(Grid, { as: Card, className: gridStyles, children: [_jsx(Graphic, { src: { url: stylingImage } }), _jsx(Card.Heading, { children: "Styling" }), _jsx(Card.Body, { children: _jsx(Text, { children: "Learn how to style Canvas components using tokens, theming, and custom CSS approaches." }) }), _jsx(Grid.Item, { as: Hyperlink, className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs", children: "Get Started" })] })] }), _jsx(Heading, { size: "medium", children: "Installation" }), _jsx(Text, { children: "To get started using Canvas Kit React first add or install the module to your existing React project" }), _jsx(InstallBlock, { command: "yarn add", packageName: "@workday/canvas-kit-react @workday/canvas-tokens-web" }), "or", _jsx(InstallBlock, { command: "npm install", packageName: "@workday/canvas-kit-react @workday/canvas-tokens-web" })] }) }));
};