@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-temp.jpg';
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 { rocketIcon, tokensIcon, shapesIcon } from '@workday/canvas-system-icons-web';
import { SystemIcon } from '@workday/canvas-kit-react/icon';
import { system, base } from '@workday/canvas-tokens-web';
import { createStyles } from '@workday/canvas-kit-styling';
// @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 textStyles = createStyles({
    color: system.color.text.inverse,
    fontSize: '5vmin',
    lineHeight: '5vmin',
});
const versionStyles = createStyles({
    fontWeight: base.fontFamily100,
    marginInlineStart: system.space.x4,
});
const imageStyles = createStyles({
    width: '100%',
    height: 'auto',
});
const borderStyles = createStyles({
    borderBottom: `1px solid ${base.blueberry200}`,
    marginBottom: system.space.x2,
});
const gridStyles = createStyles({
    maxHeight: 320,
    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: [_jsxs(Flex, { cs: { flexDirection: 'row', position: 'absolute', top: '45%', left: '10%' }, children: [_jsx(Text, { typeLevel: "title.medium", cs: textStyles, children: "Canvas Kit" }), _jsxs(Text, { typeLevel: "title.medium", cs: [textStyles, versionStyles], children: ["v", version] })] }), _jsx("img", { src: headerImage, alt: "banner with canvas kit logo and version", className: imageStyles })] }), _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", children: "Workday Design Principles." })] }), _jsx(Heading, { size: "medium", className: borderStyles, 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(SystemIcon, { color: base.cantaloupe400, colorHover: base.cantaloupe400, icon: rocketIcon, size: 60 }), _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(SystemIcon, { color: base.blueberry400, icon: tokensIcon, colorHover: base.blueberry400, size: 60 }), _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: Hyperlink, className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/tokens--overview", children: "View Our Tokens" })] }), _jsxs(Grid, { as: Card, className: gridStyles, children: [_jsx(SystemIcon, { color: base.greenApple400, icon: shapesIcon, size: 60, colorHover: base.greenApple400 }), _jsx(Card.Heading, { children: "Assets" }), _jsx(Card.Body, { children: _jsx(Text, { children: "Assets are graphics which help communicate meaning or highlight areas of interaction to our users." }) }), _jsx(Grid.Item, { as: Hyperlink, className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/assets-icons--overview", children: "View Assets" })] })] }), _jsx(Heading, { size: "medium", className: borderStyles, 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" })] }) }));
};