-
Notifications
You must be signed in to change notification settings - Fork 221
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'prerelease/major' into tabs-refactor-25-01
- Loading branch information
Showing
26 changed files
with
244 additions
and
191 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,158 +1,169 @@ | ||
| import React from 'react'; | ||
| // @ts-ignore: Cannot find module error | ||
| import headerImage from './storybook-welcome-header.png'; | ||
| 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 {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'; | ||
| import {system} from '@workday/canvas-tokens-web'; | ||
| import {cssVar} from '@workday/canvas-kit-styling'; | ||
| 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 ( | ||
| <Flex flexDirection="column" gap="s" marginBottom="m"> | ||
| <Box borderRadius="m" overflow="hidden" position="relative"> | ||
| <Flex position="absolute" flexDirection="column" top="30%" left="10%"> | ||
| <Text | ||
| typeLevel="title.medium" | ||
| color={colors.frenchVanilla100} | ||
| style={{lineHeight: '3vmin', fontSize: '6vmin', marginBottom: cssVar(system.space.x4)}} | ||
| > | ||
| Canvas Kit | ||
| </Text> | ||
| <Text | ||
| typeLevel="body.large" | ||
| style={{lineHeight: '2vw', fontSize: '3vmin'}} | ||
| color={colors.frenchVanilla100} | ||
| > | ||
| v{version} | ||
| </Text> | ||
| </Flex> | ||
| <img src={headerImage} alt="test" style={{width: '100%', height: 'auto'}} /> | ||
| </Box> | ||
| <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{' '} | ||
| <ExternalHyperlink | ||
| href="https://canvas.workdaydesign.com/" | ||
| iconLabel="Open docs in new window" | ||
| > | ||
| Workday Design Principles. | ||
| </ExternalHyperlink> | ||
| </Text> | ||
| <Heading size="medium" borderBottom={`1px solid ${colors.blueberry200}`} paddingBottom="xxs"> | ||
| Quick Links | ||
| </Heading> | ||
| <Grid | ||
| gridAutoColumns="auto" | ||
| gridTemplateColumns="repeat(auto-fill, minmax(250px, 1fr))" | ||
| gridGap="s" | ||
| > | ||
| <Grid | ||
| as={Card} | ||
| gridTemplateRows="1fr 1fr 2fr 1fr" | ||
| depth="none" | ||
| display="grid" | ||
| maxHeight={320} | ||
| > | ||
| <SystemIcon | ||
| color={colors.cantaloupe400} | ||
| colorHover={colors.cantaloupe400} | ||
| icon={rocketIcon} | ||
| size={60} | ||
| ></SystemIcon> | ||
| <Card.Heading>Getting Started</Card.Heading> | ||
| <Card.Body> | ||
| <Text>For all things getting started including helpful guides and docs.</Text> | ||
| </Card.Body> | ||
| <Grid.Item | ||
| as={Hyperlink} | ||
| alignSelf="end" | ||
| marginTop="xs" | ||
| href="https://workday.github.io/canvas-kit/?path=/docs/guides-getting-started--docs" | ||
| > | ||
| {' '} | ||
| Getting Started Guide | ||
| </Grid.Item> | ||
| </Grid> | ||
| <Grid | ||
| as={Card} | ||
| gridTemplateRows="1fr 1fr 2fr 1fr" | ||
| depth="none" | ||
| display="grid" | ||
| maxHeight={320} | ||
| > | ||
| <SystemIcon | ||
| color={colors.blueberry400} | ||
| icon={tokensIcon} | ||
| colorHover={colors.blueberry400} | ||
| size={60} | ||
| ></SystemIcon> | ||
| <Card.Heading>Tokens</Card.Heading> | ||
| <Card.Body> | ||
| <Text> | ||
| Tokens are the smallest pieces of our Design System with the primary function of | ||
| storing UI information. | ||
| <div className="sb-unstyled"> | ||
| <div className={parentFlexStyles}> | ||
| <Box cs={{overflow: 'hidden', position: 'relative'}}> | ||
| <Flex cs={{flexDirection: 'row', position: 'absolute', top: '45%', left: '10%'}}> | ||
| <Text typeLevel="title.medium" cs={textStyles}> | ||
| Canvas Kit | ||
| </Text> | ||
| <Text typeLevel="title.medium" cs={[textStyles, versionStyles]}> | ||
| v{version} | ||
| </Text> | ||
| </Card.Body> | ||
| <Grid.Item | ||
| alignSelf="end" | ||
| as={Hyperlink} | ||
| marginTop="xs" | ||
| href="https://workday.github.io/canvas-kit/?path=/docs/tokens--overview" | ||
| </Flex> | ||
| <img | ||
| src={headerImage} | ||
| alt="banner with canvas kit logo and version" | ||
| className={imageStyles} | ||
| /> | ||
| </Box> | ||
| <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 | ||
| <ExternalHyperlink | ||
| href="https://canvas.workdaydesign.com/" | ||
| iconLabel="Open docs in new window" | ||
| > | ||
| {' '} | ||
| View Our Tokens | ||
| </Grid.Item> | ||
| </Grid> | ||
| Workday Design Principles. | ||
| </ExternalHyperlink> | ||
| </Text> | ||
| <Heading size="medium" className={borderStyles}> | ||
| Quick Links | ||
| </Heading> | ||
| <Grid | ||
| as={Card} | ||
| gridTemplateRows="1fr 1fr 2fr 1fr" | ||
| depth="none" | ||
| display="grid" | ||
| maxHeight={320} | ||
| gridAutoColumns="auto" | ||
| gridTemplateColumns="repeat(auto-fill, minmax(250px, 1fr))" | ||
| gridGap="s" | ||
| > | ||
| <SystemIcon | ||
| color={colors.greenApple400} | ||
| icon={shapesIcon} | ||
| size={60} | ||
| colorHover={colors.greenApple400} | ||
| ></SystemIcon> | ||
| <Card.Heading>Assets</Card.Heading> | ||
| <Card.Body> | ||
| <Text> | ||
| Assets are graphics which help communicate meaning or highlight areas of interaction | ||
| to our users. | ||
| </Text> | ||
| </Card.Body> | ||
| <Grid.Item | ||
| as={Hyperlink} | ||
| alignSelf="end" | ||
| marginTop="xs" | ||
| href="https://workday.github.io/canvas-kit/?path=/docs/assets-icons--overview" | ||
| > | ||
| {' '} | ||
| View Assets | ||
| </Grid.Item> | ||
| <Grid as={Card} className={gridStyles}> | ||
| <SystemIcon | ||
| color={base.cantaloupe400} | ||
| colorHover={base.cantaloupe400} | ||
| icon={rocketIcon} | ||
| size={60} | ||
| ></SystemIcon> | ||
| <Card.Heading>Getting Started</Card.Heading> | ||
| <Card.Body> | ||
| <Text>For all things getting started including helpful guides and docs.</Text> | ||
| </Card.Body> | ||
| <Grid.Item | ||
| as={Hyperlink} | ||
| className={linkStyles} | ||
| href="https://workday.github.io/canvas-kit/?path=/docs/guides-getting-started--docs" | ||
| > | ||
| Getting Started Guide | ||
| </Grid.Item> | ||
| </Grid> | ||
| <Grid as={Card} className={gridStyles}> | ||
| <SystemIcon | ||
| color={base.blueberry400} | ||
| icon={tokensIcon} | ||
| colorHover={base.blueberry400} | ||
| size={60} | ||
| ></SystemIcon> | ||
| <Card.Heading>Tokens</Card.Heading> | ||
| <Card.Body> | ||
| <Text> | ||
| Tokens are the smallest pieces of our Design System with the primary function of | ||
| storing UI information. | ||
| </Text> | ||
| </Card.Body> | ||
| <Grid.Item | ||
| as={Hyperlink} | ||
| className={linkStyles} | ||
| href="https://workday.github.io/canvas-kit/?path=/docs/tokens--overview" | ||
| > | ||
| View Our Tokens | ||
| </Grid.Item> | ||
| </Grid> | ||
| <Grid as={Card} className={gridStyles}> | ||
| <SystemIcon | ||
| color={base.greenApple400} | ||
| icon={shapesIcon} | ||
| size={60} | ||
| colorHover={base.greenApple400} | ||
| ></SystemIcon> | ||
| <Card.Heading>Assets</Card.Heading> | ||
| <Card.Body> | ||
| <Text> | ||
| Assets are graphics which help communicate meaning or highlight areas of interaction | ||
| to our users. | ||
| </Text> | ||
| </Card.Body> | ||
| <Grid.Item | ||
| as={Hyperlink} | ||
| className={linkStyles} | ||
| href="https://workday.github.io/canvas-kit/?path=/docs/assets-icons--overview" | ||
| > | ||
| View Assets | ||
| </Grid.Item> | ||
| </Grid> | ||
| </Grid> | ||
| </Grid> | ||
| <Heading size="medium" borderBottom={`1px solid ${colors.blueberry200}`} paddingBottom="xxs"> | ||
| Installation | ||
| </Heading> | ||
| <Text> | ||
| To get started using Canvas kit React first add or install the module to your existing React | ||
| project | ||
| </Text> | ||
| <InstallBlock command="yarn add" packageName="@workday/canvas-kit-react" /> | ||
| or | ||
| <InstallBlock command="npm install" packageName="@workday/canvas-kit-react" /> | ||
| </Flex> | ||
| <Heading size="medium" className={borderStyles}> | ||
| Installation | ||
| </Heading> | ||
| <Text> | ||
| To get started using Canvas Kit React first add or install the module to your existing | ||
| React project | ||
| </Text> | ||
| <InstallBlock command="yarn add" packageName="@workday/canvas-kit-react" /> | ||
| or | ||
| <InstallBlock command="npm install" packageName="@workday/canvas-kit-react" /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.