Figuring out a Getting Started Guide / Quick Start Guide

[alanbsmith]

Getting Started Guide

If this is your first time using Canvas Kit or your integrating this library into your application, read our Quick Start Guide to get up and running.

React

Installation

First, install our main dependencies.

yarn add @workday/canvas-kit-react @emotion/react @emotion/styled

npm install @workday/canvas-kit-react @emotion/react @emotion/styled

Note: If you're using components in our labs or preview packages, you'll need to install those packages as well.

You will probably also need icons.

npm install @workday/canvas-system-icons-web @workday/canvas-applet-icons-web @workday/canvas-accent-icons-web

Canvas Provider Setup

The CanvasProvider should be rendered once at the very top of your application. It

• sets the Canvas theme
• sets the content direction for left-to-right and right-to-left languages
• renders the InputProvider which helps manage the focus rings on inputs and buttons

// App.tsx
import * as React from 'react';
import { CanvasProvider } from '@workday/canvas-kit-react/common';

export const App = (props) => {
  return (
    <CanvasProvider>
      {props.children}
    </CanvasProvider>
  )
} 

Bidirectional Support

All Canvas Kit components have bidirectional styles built-in. But you'll need to pass the

// App.tsx
import * as React from 'react';
import { CanvasProvider, ContentDirection } from '@workday/canvas-kit-react/common';

// Most Workday applications have access to the content direction based on the user's locale.
// Use that value to set the `direction` in `canvas.theme`.
export const App = ({ children, isRTL }) => {
  const theme = {
    canvas: {
        direction: isRTL ? ContentDirection.RTL : ContentDirection.LTR,
    }
  }
  return (
    <CanvasProvider theme={theme}>
      {children}
    </CanvasProvider>
  );
}

Building your First Component

import { PrimaryButton, SecondaryButton } from '@workday/canvas-kit-react/button';
import { Card } from '@workday/canvas-kit-react/card';
import { Stack, Flex } from '@workday/canvas-kit-react/layout';
import { Heading, BodyText } from '@workday/canvas-kit-labs-react/text';

export interface ProfileCardProps {
    name: string;
    description: string;

}

const ProfileCard = ({  }) => {
  return (
    <Card padding="s">

    </Card>
  )
}

[alanbsmith]

Questions

• Is there anything we should add?