import React from 'react';
// @ts-ignore: Cannot find module error
import headerImage from './storybook-welcome-header.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 { colors } from '@workday/canvas-kit-react/tokens';
import { rocketIcon, tokensIcon, shapesIcon } from '@workday/canvas-system-icons-web';
import { SystemIcon } from '@workday/canvas-kit-react/icon';
// @ts-ignore: Cannot find module error
import { version } from '../../../lerna.json';
export var WelcomePage = function () {
    return (React.createElement(Flex, { flexDirection: "column", gap: "s" },
        React.createElement(Box, { borderRadius: "m", overflow: "hidden", position: "relative" },
            React.createElement(Flex, { position: "absolute", flexDirection: "column", top: "30%", left: "10%" },
                React.createElement(Text, { typeLevel: "title.medium", color: colors.frenchVanilla100, fontSize: "6vmin", marginBottom: "s", style: { lineHeight: '3vmin' } }, "Canvas Kit"),
                React.createElement(Text, { typeLevel: "body.large", fontSize: "3vmin", style: { lineHeight: '2vw' }, color: colors.frenchVanilla100 },
                    "v",
                    version)),
            React.createElement("img", { src: headerImage, alt: "test", style: { width: '100%', height: 'auto' } })),
        React.createElement(Text, { typeLevel: "body.medium" },
            ' ',
            "This project provides a set of components for the Workday Canvas Design System that can be used to implement user experiences consistent with",
            ' ',
            React.createElement(ExternalHyperlink, { href: "https://canvas.workdaydesign.com/" }, "Workday Design Principles.")),
        React.createElement(Heading, { size: "medium", borderBottom: "1px solid " + colors.blueberry200, paddingBottom: "xxs" }, "Quick Links"),
        React.createElement(Grid, { gridAutoColumns: "auto", gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))", gridGap: "s" },
            React.createElement(Grid, { as: Card, gridTemplateRows: "1fr 1fr 2fr 1fr", depth: "none", display: "grid", maxHeight: 320 },
                React.createElement(SystemIcon, { color: colors.cantaloupe400, colorHover: colors.cantaloupe400, icon: rocketIcon, size: 60 }),
                React.createElement(Card.Heading, null, "Getting Started"),
                React.createElement(Card.Body, null,
                    React.createElement(Text, null, "For all things getting started including helpful guides and docs.")),
                React.createElement(Grid.Item, { as: Hyperlink, alignSelf: "end", marginTop: "xs", href: "https://workday.github.io/canvas-kit/?path=/docs/guides-getting-started--page" },
                    ' ',
                    "Getting Started Guide")),
            React.createElement(Grid, { as: Card, gridTemplateRows: "1fr 1fr 2fr 1fr", depth: "none", display: "grid", maxHeight: 320 },
                React.createElement(SystemIcon, { color: colors.blueberry400, icon: tokensIcon, colorHover: colors.blueberry400, size: 60 }),
                React.createElement(Card.Heading, null, "Tokens"),
                React.createElement(Card.Body, null,
                    React.createElement(Text, null, "Tokens are the smallest pieces of our Design System with the primary function of storing UI information.")),
                React.createElement(Grid.Item, { alignSelf: "end", as: Hyperlink, marginTop: "xs", href: "https://workday.github.io/canvas-kit/?path=/docs/tokens--overview" },
                    ' ',
                    "View Our Tokens")),
            React.createElement(Grid, { as: Card, gridTemplateRows: "1fr 1fr 2fr 1fr", depth: "none", display: "grid", maxHeight: 320 },
                React.createElement(SystemIcon, { color: colors.greenApple400, icon: shapesIcon, size: 60, colorHover: colors.greenApple400 }),
                React.createElement(Card.Heading, null, "Assets"),
                React.createElement(Card.Body, null,
                    React.createElement(Text, null, "Assets are graphics which help communicate meaning or highlight areas of interaction to our users.")),
                React.createElement(Grid.Item, { as: Hyperlink, alignSelf: "end", marginTop: "xs", href: "https://workday.github.io/canvas-kit/?path=/docs/assets-icons--overview" },
                    ' ',
                    "View Assets"))),
        React.createElement(Heading, { size: "medium", borderBottom: "1px solid " + colors.blueberry200, paddingBottom: "xxs" }, "Installation"),
        React.createElement(Text, null, "To get started using Canvas kit React first add or install the module to your existing React project"),
        React.createElement(InstallBlock, { command: "yarn add", packageName: "@workday/canvas-kit-react" }),
        "or",
        React.createElement(InstallBlock, { command: "npm install", packageName: "@workday/canvas-kit-react" })));
};
