6 | This component is work in progress and currently in prerelease.
7 |
8 | A divider to segment and visually organize content
9 |
10 | View the [documentation for Divider](https://workday.github.io/canvas-kit/?path=/docs/preview-divider-react)
11 | on Storybook.
12 |
--------------------------------------------------------------------------------
/modules/preview-react/divider/index.ts:
--------------------------------------------------------------------------------
1 | export * from './lib/Divider';
2 |
--------------------------------------------------------------------------------
/modules/preview-react/divider/spec/SSR.spec.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * @jest-environment node
3 | */
4 | import React from 'react';
5 | import {renderToString} from 'react-dom/server';
6 | import {Divider} from '../';
7 |
8 | describe('Divider', () => {
9 | it('should render on a server without crashing', () => {
10 | const ssrRender = () => renderToString(
5 | This component is work in progress and currently in prerelease.
6 |
7 | A information highlight component to highlight and prioritize content
8 |
9 | View the [documentation for Information Highlight](https://workday.github.io/canvas-kit/?path=/docs/preview-information-highlight--docs)
10 | on Storybook.
11 |
--------------------------------------------------------------------------------
/modules/preview-react/information-highlight/index.ts:
--------------------------------------------------------------------------------
1 | export * from './lib/InformationHighlight';
2 | export * from './lib/parts/Body';
3 | export * from './lib/parts/Heading';
4 | export * from './lib/parts/Icon';
5 | export * from './lib/parts/Link';
6 |
--------------------------------------------------------------------------------
/modules/preview-react/information-highlight/lib/hooks/useInformationHighlightModel.ts:
--------------------------------------------------------------------------------
1 | import {createModelHook} from '@workday/canvas-kit-react/common';
2 |
3 | export const useInformationHighlightModel = createModelHook({
4 | defaultConfig: {
5 | variant: 'informational' as 'informational' | 'caution' | 'critical',
6 | emphasis: 'low' as 'low' | 'high',
7 | },
8 | })(config => {
9 | return {
10 | state: {
11 | variant: config.variant,
12 | emphasis: config.emphasis,
13 | },
14 | events: {},
15 | };
16 | });
17 |
--------------------------------------------------------------------------------
/modules/preview-react/information-highlight/stories/examples/Body.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
4 |
5 | export const Body = () => {
6 | return (
7 |
5 | This component is work in progress and currently in preview.
6 |
7 | Status Indicators help the user quickly identify the status of a task, action, or page element.
8 |
9 | View the
10 | [documentation for Status Indicator](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator-react--basic)
11 | on Storybook.
12 |
13 |
--------------------------------------------------------------------------------
/modules/preview-react/status-indicator/index.ts:
--------------------------------------------------------------------------------
1 | export {StatusIndicator, StatusIndicatorProps, StatusIndicatorVariant} from './lib/StatusIndicator';
2 |
--------------------------------------------------------------------------------
/modules/preview-react/status-indicator/lib/StatusIndicatorIcon.tsx:
--------------------------------------------------------------------------------
1 | import {createComponent} from '@workday/canvas-kit-react/common';
2 | import {SystemIcon, SystemIconProps} from '@workday/canvas-kit-react/icon';
3 |
4 | export interface StatusIndicatorIconProps extends SystemIconProps {}
5 |
6 | export const StatusIndicatorIcon = createComponent('span')({
7 | displayName: 'StatusIndicatorIcon',
8 | Component: (elemProps: SystemIconProps, ref, Element) => {
9 | return Inspect Element to see the markup
8 |
14 |
17 | );
18 |
--------------------------------------------------------------------------------
/modules/react/avatar/stories/avatar/examples/LazyLoad.tsx:
--------------------------------------------------------------------------------
1 | import {Avatar} from '@workday/canvas-kit-react/avatar';
2 | // @ts-ignore: Cannot find module error
3 | import testAvatar from './test-avatar.png';
4 |
5 | export const LazyLoad = () => (
6 |
7 | {Array.from({length: 5}, (v, index) => (
8 | <>
9 | (
4 |
8 | 3 Warnings
10 | Show Details
11 |
12 | );
13 | };
14 |
--------------------------------------------------------------------------------
/modules/react/banner/stories/examples/Basic.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import {Banner} from '@workday/canvas-kit-react/banner';
4 |
5 | export const Basic = () => {
6 | return (
7 | console.log('clicked banner')}>
8 | 3 Warnings
10 |
12 | );
13 | };
14 |
--------------------------------------------------------------------------------
/modules/react/banner/stories/examples/Error.tsx:
--------------------------------------------------------------------------------
1 | import {Banner} from '@workday/canvas-kit-react/banner';
2 |
3 | export const Error = () => {
4 | return (
5 |
6 | 3 Errors
8 |
10 | );
11 | };
12 |
--------------------------------------------------------------------------------
/modules/react/banner/stories/examples/IconBanner.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import {Banner} from '@workday/canvas-kit-react/banner';
4 | import {Tooltip} from '@workday/canvas-kit-react/tooltip';
5 | import {styled} from '@workday/canvas-kit-react/common';
6 |
7 | export const IconBanner = () => {
8 | return (
9 |
10 |
11 |
13 |
14 | );
15 | };
16 |
--------------------------------------------------------------------------------
/modules/react/banner/stories/examples/Sticky.tsx:
--------------------------------------------------------------------------------
1 | import {Box} from '@workday/canvas-kit-react/layout';
2 | import {Banner} from '@workday/canvas-kit-react/banner';
3 | import {styled} from '@workday/canvas-kit-react/common';
4 |
5 | const StyledBanner = styled(Banner)({
6 | position: 'absolute',
7 | right: 0,
8 | });
9 |
10 | export const Sticky = () => {
11 | return (
12 |
13 |
14 | 3 Errors
16 |
18 |
19 | );
20 | };
21 |
--------------------------------------------------------------------------------
/modules/react/banner/stories/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../../tsconfig.stories.json"
3 | }
4 |
--------------------------------------------------------------------------------
/modules/react/breadcrumbs/README.md:
--------------------------------------------------------------------------------
1 | # Canvas Kit React Breadcrumbs
2 |
3 | Breadcrumbs is a
4 | [compound component](/getting-started/for-developers/resources/compound-components/) that allows
5 | users to keep track and maintain awareness of their location as they navigate through pages,
6 | folders, files, etc.
7 |
8 | For more detailed information on this component, please refer to the
9 | [storybook documentation](https://workday.github.io/canvas-kit/?path=/docs/components-navigation-breadcrumbs-react--basic)
10 |
--------------------------------------------------------------------------------
/modules/react/breadcrumbs/index.ts:
--------------------------------------------------------------------------------
1 | export * from './lib/Breadcrumbs';
2 | export * from './lib/hooks/useBreadcrumbsModel';
3 |
--------------------------------------------------------------------------------
/modules/react/breadcrumbs/spec/SSR.spec.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * @jest-environment node
3 | */
4 | import React from 'react';
5 | import {renderToString} from 'react-dom/server';
6 | import {Breadcrumbs} from '../';
7 |
8 | describe('Breadcrumbs', () => {
9 | it('should render on a server without crashing', () => {
10 | const ssrRender = () =>
11 | renderToString(
12 |
13 |
14 | Item
15 |
16 |
17 | );
18 | expect(ssrRender).not.toThrow();
19 | });
20 | });
21 |
--------------------------------------------------------------------------------
/modules/react/breadcrumbs/spec/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../../tsconfig.spec.json"
3 | }
4 |
--------------------------------------------------------------------------------
/modules/react/breadcrumbs/stories/examples/CurrentItemTruncation.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Breadcrumbs} from '@workday/canvas-kit-react/breadcrumbs';
3 |
4 | export const CurrentItemTruncation = () => {
5 | return (
6 |
7 | Foccacia Genovese
8 |
9 | );
10 | };
11 |
--------------------------------------------------------------------------------
/modules/react/breadcrumbs/stories/examples/LinkTruncation.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Breadcrumbs} from '@workday/canvas-kit-react/breadcrumbs';
3 |
4 | export const LinkTruncation = () => {
5 | return (
6 |
7 | Small Plates & Appetizers
8 |
9 | );
10 | };
11 |
--------------------------------------------------------------------------------
/modules/react/breadcrumbs/stories/tsconfig.json:
--------------------------------------------------------------------------------
1 |
2 | {
3 | "extends": "../../../../tsconfig.stories.json"
4 | }
5 |
--------------------------------------------------------------------------------
/modules/react/button/lib/parts/index.tsx:
--------------------------------------------------------------------------------
1 | export {ButtonLabel} from './ButtonLabel';
2 | export {ButtonLabelIcon} from './ButtonLabelIcon';
3 |
--------------------------------------------------------------------------------
/modules/react/button/spec/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../../tsconfig.spec.json"
3 | }
4 |
--------------------------------------------------------------------------------
/modules/react/button/stories/button/examples/ExternalHyperlink.tsx:
--------------------------------------------------------------------------------
1 | import {ExternalHyperlink} from '@workday/canvas-kit-react/button';
2 |
3 | export const ExternalLink = () => (
4 |
5 | External Hyperlink
6 |
7 | );
8 |
--------------------------------------------------------------------------------
/modules/react/button/stories/button/examples/Hyperlink.tsx:
--------------------------------------------------------------------------------
1 | import {Hyperlink} from '@workday/canvas-kit-react/button';
2 |
3 | export const Link = () => Hyperlink ;
4 |
--------------------------------------------------------------------------------
/modules/react/button/stories/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../../tsconfig.stories.json"
3 | }
4 |
--------------------------------------------------------------------------------
/modules/react/card/README.md:
--------------------------------------------------------------------------------
1 | # Canvas Kit Card
2 |
3 | View the
4 | [documentation for Card](https://workday.github.io/canvas-kit/?path=/docs/components-containers-card-react--basic)
5 | on Storybook.
6 |
7 | [> Workday Design Reference](https://design.workday.com/components/containers/cards)
8 |
--------------------------------------------------------------------------------
/modules/react/card/index.ts:
--------------------------------------------------------------------------------
1 | export {Card, cardStencil} from './lib/Card';
2 | export {cardHeadingStencil} from './lib/CardHeading';
3 | export {cardBodyStencil} from './lib/CardBody';
4 |
--------------------------------------------------------------------------------
/modules/react/card/spec/Card.spec.tsx:
--------------------------------------------------------------------------------
1 | import {Card} from '../lib/Card';
2 |
3 | describe('Card', () => {
4 | verifyComponent(Card, {});
5 | });
6 |
--------------------------------------------------------------------------------
/modules/react/card/spec/CardBody.spec.tsx:
--------------------------------------------------------------------------------
1 | import {CardBody} from '../lib/CardBody';
2 |
3 | describe('CardBody', () => {
4 | verifyComponent(CardBody, {});
5 | });
6 |
--------------------------------------------------------------------------------
/modules/react/card/spec/CardHeading.spec.tsx:
--------------------------------------------------------------------------------
1 | import {CardHeading} from '../lib/CardHeading';
2 |
3 | describe('CardHeading', () => {
4 | verifyComponent(CardHeading, {});
5 | });
6 |
--------------------------------------------------------------------------------
/modules/react/card/spec/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../../tsconfig.spec.json"
3 | }
4 |
--------------------------------------------------------------------------------
/modules/react/card/stories/card.stories.ts:
--------------------------------------------------------------------------------
1 | import {Meta, StoryObj} from '@storybook/react';
2 |
3 | import mdxDoc from './card.mdx';
4 |
5 | import {Card} from '@workday/canvas-kit-react/card';
6 |
7 | import {Basic as BasicExample} from './examples/Basic';
8 |
9 | export default {
10 | title: 'Components/Containers/Card',
11 | component: Card,
12 | tags: ['autodocs'],
13 | parameters: {
14 | docs: {
15 | page: mdxDoc,
16 | },
17 | },
18 | } as Meta;
19 |
20 | type Story = StoryObj;
21 |
22 | export const Basic: Story = {
23 | render: BasicExample,
24 | };
25 |
--------------------------------------------------------------------------------
/modules/react/card/stories/examples/Basic.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {Card} from '@workday/canvas-kit-react/card';
3 |
4 | export const Basic = () => {
5 | return (
6 |
7 | Canvas Supreme
8 |
9 | Our house special supreme pizza includes pepperoni, sausage, bell peppers, mushrooms,
10 | onions, and oregano.
11 |
12 |
13 | );
14 | };
15 |
--------------------------------------------------------------------------------
/modules/react/card/stories/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../../tsconfig.stories.json"
3 | }
4 |
--------------------------------------------------------------------------------
/modules/react/checkbox/README.md:
--------------------------------------------------------------------------------
1 | # Canvas Kit Checkbox
2 |
3 | View the
4 | [documentation for Checkbox](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-checkbox-react--basic)
5 | on Storybook.
6 |
7 | [> Workday Design Reference](https://design.workday.com/components/inputs/checkboxes)
8 |
--------------------------------------------------------------------------------
/modules/react/checkbox/index.ts:
--------------------------------------------------------------------------------
1 | export * from './lib/Checkbox';
2 |
--------------------------------------------------------------------------------
/modules/react/checkbox/spec/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../../tsconfig.spec.json"
3 | }
4 |
--------------------------------------------------------------------------------
/modules/react/collection/README.md:
--------------------------------------------------------------------------------
1 | # Canvas Kit Collection
2 |
3 | Collection System
4 |
5 | ## Installation
6 |
7 | ```sh
8 | yarn add @workday/canvas-kit-react
9 | ```
10 |
11 | ## Usage
12 |
13 | ```tsx
14 | import * as React from 'react';
15 | import {Collection} from '@workday/canvas-kit-react/collection';
16 |
17 |
8 | First
9 | Second
10 |
11 | );
12 | };
13 |
--------------------------------------------------------------------------------
/modules/react/collection/stories/mdx/examples/DynamicItemsStrings.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import {ListBox} from '@workday/canvas-kit-react/collection';
4 |
5 | const items = ['Pizza', 'Chocolate', 'Cheeseburgers'];
6 |
7 | export const DynamicItemsStrings = () => (
8 | {item => {item} }
9 | );
10 |
--------------------------------------------------------------------------------
/modules/react/collection/stories/mdx/examples/IdentifiedItems.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import {ListBox} from '@workday/canvas-kit-react/collection';
4 |
5 | export const IdentifiedItems = () => {
6 | return (
7 |
8 | First
9 | Second
10 |
11 | );
12 | };
13 |
--------------------------------------------------------------------------------
/modules/react/collection/stories/mdx/examples/Virtualization.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import {ListBox} from '@workday/canvas-kit-react/collection';
4 |
5 | interface Item {
6 | id: string;
7 | text: string;
8 | }
9 |
10 | const items: Item[] = Array(1000)
11 | .fill(true)
12 | .map((_, index) => ({id: String(index + 1), text: `Item - ${index + 1}`}));
13 |
14 | export const Virtualization = () => {
15 | return (
16 |
17 | {(item: Item) => {item.text} }
18 |
19 | );
20 | };
21 |
--------------------------------------------------------------------------------
/modules/react/collection/stories/tsconfig.json:
--------------------------------------------------------------------------------
1 |
2 | {
3 | "extends": "../../../../tsconfig.stories.json"
4 | }
5 |
--------------------------------------------------------------------------------
/modules/react/color-picker/README.md:
--------------------------------------------------------------------------------
1 | # Canvas Kit Color Picker
2 |
3 | The Color Picker module includes two components: Color Input and Color Preview.
4 |
5 | View the
6 | [documentation for Color Input](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-color-picker-color-input-react--basic)
7 | on Storybook.
8 |
9 | View the
10 | [documentation for Color Preview](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-color-picker-color-preview-react--basic)
11 | on Storybook.
12 |
13 | [> Workday Design Reference](https://design.workday.com/components/inputs/color-input)
14 |
--------------------------------------------------------------------------------
/modules/react/color-picker/index.ts:
--------------------------------------------------------------------------------
1 | export * from './lib/ColorInput';
2 | export * from './lib/ColorPreview';
3 | export * from './lib/parts/ColorSwatch';
4 |
--------------------------------------------------------------------------------
/modules/react/color-picker/spec/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../../tsconfig.spec.json"
3 | }
4 |
--------------------------------------------------------------------------------
/modules/react/color-picker/stories/color-preview/examples/Basic.tsx:
--------------------------------------------------------------------------------
1 | import {ColorPreview} from '@workday/canvas-kit-react/color-picker';
2 | import {FormField} from '@workday/canvas-kit-react/form-field';
3 |
4 | export const Basic = () => {
5 | return (
6 |
7 | Current Color
8 |
9 |
11 |
12 | );
13 | };
14 |
--------------------------------------------------------------------------------
/modules/react/color-picker/stories/color-preview/examples/LabelPosition.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {FormField} from '@workday/canvas-kit-react/form-field';
3 | import {ColorPreview} from '@workday/canvas-kit-react/color-picker';
4 |
5 | export const LabelPosition = () => {
6 | return (
7 |
8 | Background Color
9 |
10 |
12 |
13 | );
14 | };
15 |
--------------------------------------------------------------------------------
/modules/react/combobox/README.md:
--------------------------------------------------------------------------------
1 | # Canvas Kit Combobox
2 |
3 | Combobox
4 |
5 | View the
6 | [documentation for Combobox](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--autocomplete)
7 | on Storybook.
8 |
--------------------------------------------------------------------------------
/modules/react/combobox/lib/ComboboxInput.tsx:
--------------------------------------------------------------------------------
1 | import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
2 | import {TextInput} from '@workday/canvas-kit-react/text-input';
3 |
4 | import {useComboboxModel} from './hooks/useComboboxModel';
5 | import {useComboboxInput} from './hooks/useComboboxInput';
6 |
7 | export const ComboboxInput = createSubcomponent(TextInput)({
8 | modelHook: useComboboxModel,
9 | elemPropsHook: useComboboxInput,
10 | })>(({children, ...elemProps}, Element) => {
11 | return {children} ;
12 | });
13 |
--------------------------------------------------------------------------------
/modules/react/combobox/lib/ComboboxMenuItem.tsx:
--------------------------------------------------------------------------------
1 | import {useMenuOption} from '@workday/canvas-kit-react/menu';
2 |
3 | /**
4 | * @deprecated Use `useMenuOption` instead
5 | */
6 | export const useComboboxMenuItem = useMenuOption;
7 |
--------------------------------------------------------------------------------
/modules/react/combobox/spec/tsconfig.json:
--------------------------------------------------------------------------------
1 |
2 | {
3 | "extends": "../../../../tsconfig.spec.json"
4 | }
5 |
--------------------------------------------------------------------------------
/modules/react/combobox/stories/tsconfig.json:
--------------------------------------------------------------------------------
1 |
2 | {
3 | "extends": "../../../../tsconfig.stories.json"
4 | }
5 |
--------------------------------------------------------------------------------
/modules/react/common/index.ts:
--------------------------------------------------------------------------------
1 | export * from './lib/parts';
2 | export * from './lib/types';
3 | export * from './lib/genericStyles';
4 | export * from './lib/theming';
5 | export * from './lib/styles';
6 | export * from './lib/utils';
7 | export * from './lib/AccessibleHide';
8 | export * from './lib/AriaLiveRegion';
9 | export * from './lib/CanvasProvider';
10 | export * from './lib/InputProvider';
11 | export * from './lib/EllipsisText';
12 | export * from './lib/responsive/useResponsiveContainerStyles';
13 |
--------------------------------------------------------------------------------
/modules/react/common/lib/EllipsisText.tsx:
--------------------------------------------------------------------------------
1 | import styled, {CSSObject} from '@emotion/styled';
2 |
3 | import {createComponent} from './utils';
4 |
5 | export const ellipsisStyles: CSSObject = {
6 | whiteSpace: 'nowrap',
7 | textOverflow: 'ellipsis',
8 | overflow: 'hidden',
9 | };
10 |
11 | const StyledEllipsisComponent = styled('span')(ellipsisStyles);
12 |
13 | export const EllipsisText = createComponent('span')({
14 | displayName: 'EllipsisText',
15 | Component(elemProps = {}, ref, Element) {
16 | return (value: T | null | undefined, message?: string): asserts value is T;
3 | export function assert(value: any, message?: string) {
4 | if (value === false || value === null || typeof value === 'undefined') {
5 | throw new Error(message || 'Assertion failed');
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/modules/react/common/lib/utils/isWithinBreakpoint.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This function determines whether or not a container's width is within two values.
3 | */
4 | export const isWithinBreakpoint = (width: number, min: number, max?: number) => {
5 | return width >= min && (!max || (max && width <= max - 0.5));
6 | };
7 |
--------------------------------------------------------------------------------
/modules/react/common/lib/utils/makeMq.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Generates a media queries given a set of named breakpoints
3 | * @param {Object} breakpoints Object of key-value pairs where the key is the name of
4 | * the breakpoint size and the value is the min-width of that breakpoint
5 | * @returns {Object} A set of CSS media queries for each breakpoint size
6 | */
7 | export const makeMq = (breakpoints: {[key: string]: number}) => {
8 | const mq: {[key: string]: string} = {};
9 |
10 | Object.keys(breakpoints).forEach(key => {
11 | mq[key] = `@media (min-width: ${breakpoints[key]}px)`;
12 | });
13 |
14 | return mq;
15 | };
16 |
--------------------------------------------------------------------------------
/modules/react/common/lib/utils/slugify.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Function that takes a string and returns a "slug" which can be used in HTML
3 | */
4 | export function slugify(input: string): string {
5 | return input
6 | .trim()
7 | .replace(/[\.\s_-]+/g, '-')
8 | .replace(/[^\w\s-]/g, '')
9 | .replace(/([A-Z])/g, m => {
10 | return '-' + m.toLowerCase();
11 | })
12 | .replace(/^-+|-+$/g, '')
13 | .toLowerCase();
14 | }
15 |
--------------------------------------------------------------------------------
/modules/react/common/lib/utils/useConstant.ts:
--------------------------------------------------------------------------------
1 | import {useRef} from 'react';
2 |
3 | /**
4 | * Get a constant value in React, only running the callback function once. `React.useMemo` does not
5 | * guarantee that a function will only be run once.
6 | *
7 | * @example
8 | * const value = useConstant(generateUniqueId)
9 | */
10 | export function useConstant(fn: () => T): T {
11 | const ref = useRef();
12 |
13 | if (!ref.current) {
14 | ref.current = fn();
15 | }
16 |
17 | return ref.current;
18 | }
19 |
--------------------------------------------------------------------------------
/modules/react/common/lib/utils/useIsFullscreen.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import screenfull from 'screenfull';
3 |
4 | export const useIsFullscreen = () => {
5 | const [isFullscreen, setIsFullscreen] = React.useState(false);
6 |
7 | const handler = React.useCallback(() => {
8 | setIsFullscreen(screenfull.isFullscreen);
9 | }, []);
10 |
11 | React.useEffect(() => {
12 | screenfull.on('change', handler);
13 |
14 | return () => {
15 | screenfull.off('change', handler);
16 | };
17 | }, [handler]);
18 |
19 | return isFullscreen;
20 | };
21 |
--------------------------------------------------------------------------------
/modules/react/common/lib/utils/useResizeObserver.ts:
--------------------------------------------------------------------------------
1 | import useResizeObserver from 'use-resize-observer';
2 |
3 | export {useResizeObserver};
4 |
--------------------------------------------------------------------------------
/modules/react/common/spec/AccessibleHide.spec.tsx:
--------------------------------------------------------------------------------
1 | import {AccessibleHide} from '../lib/AccessibleHide';
2 |
3 | describe('AccessibleHide', () => {
4 | verifyComponent(AccessibleHide, {});
5 | });
6 |
--------------------------------------------------------------------------------
/modules/react/common/spec/AriaLiveRegion.spec.tsx:
--------------------------------------------------------------------------------
1 | import {AriaLiveRegion} from '../lib/AriaLiveRegion';
2 |
3 | describe('AriaLiveRegion', () => {
4 | verifyComponent(AriaLiveRegion, {});
5 | });
6 |
--------------------------------------------------------------------------------
/modules/react/common/spec/SSR.spec.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * @jest-environment node
3 | */
4 | import React from 'react';
5 | import {renderToString} from 'react-dom/server';
6 | import InputProvider from '../lib/InputProvider';
7 |
8 | describe('InputProvider', () => {
9 | it('should render on a server without crashing', () => {
10 | const ssrRender = () => renderToString(
12 | Target
13 | Content
14 |
15 | );
16 | expect(ssrRender).not.toThrow();
17 | });
18 | });
19 |
--------------------------------------------------------------------------------
/modules/react/expandable/spec/tsconfig.json:
--------------------------------------------------------------------------------
1 |
2 | {
3 | "extends": "../../../../tsconfig.spec.json"
4 | }
5 |
--------------------------------------------------------------------------------
/modules/react/expandable/stories/examples/Depth.tsx:
--------------------------------------------------------------------------------
1 | import {Expandable} from '@workday/canvas-kit-react/expandable';
2 |
3 | export const Depth = () => {
4 | return (
5 |
6 |
7 | Additional Information
8 |
10 |
11 | This Expandable Container has a depth of 3.
12 |
13 | );
14 | };
15 |
--------------------------------------------------------------------------------
/modules/react/expandable/stories/examples/EndIcon.tsx:
--------------------------------------------------------------------------------
1 | import {Expandable} from '@workday/canvas-kit-react/expandable';
2 |
3 | export const EndIcon = () => (
4 |
5 |
6 | Title
7 |
9 |
10 | Content
11 |
12 | );
13 |
--------------------------------------------------------------------------------
/modules/react/expandable/stories/examples/StartIcon.tsx:
--------------------------------------------------------------------------------
1 | import {Expandable} from '@workday/canvas-kit-react/expandable';
2 |
3 | export const StartIcon = () => (
4 |
5 |
6 | Title
8 |
9 |
10 | Content
11 |
12 | );
13 |
--------------------------------------------------------------------------------
/modules/react/expandable/stories/examples/test-avatar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Workday/canvas-kit/60e23d05fa006d402e49a3abffa25038bca2960b/modules/react/expandable/stories/examples/test-avatar.png
--------------------------------------------------------------------------------
/modules/react/expandable/stories/tsconfig.json:
--------------------------------------------------------------------------------
1 |
2 | {
3 | "extends": "../../../../tsconfig.stories.json"
4 | }
5 |
--------------------------------------------------------------------------------
/modules/react/form-field/README.md:
--------------------------------------------------------------------------------
1 | # Canvas Kit React Form Field
2 |
3 | View the
4 | [documentation for Form Field](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-form-field--docs)
5 | on Storybook.
6 |
7 | [> Workday Design Reference: Text Area](https://design.workday.com/components/inputs/text-area)
8 | [> Workday Design Reference: Text Input](https://design.workday.com/components/inputs/text-input)
9 |
--------------------------------------------------------------------------------
/modules/react/form-field/index.ts:
--------------------------------------------------------------------------------
1 | export * from './lib/FormField';
2 | export * from './lib/FormFieldGroup';
3 | export * from './lib/hooks';
4 | export * from './lib/FormFieldGroupLabel';
5 | export * from './lib/FormFieldGroupInput';
6 | export * from './lib/FormFieldGroupList';
7 | export {formFieldStencil} from './lib/formFieldStencil';
8 | export {formFieldContainerStencil} from './lib/FormFieldContainer';
9 | export {formFieldHintStencil} from './lib/FormFieldHint';
10 | export {formFieldLabelStencil} from './lib/FormFieldLabel';
11 | export {useFormFieldGroupInput} from './lib/FormFieldGroupInput';
12 |
--------------------------------------------------------------------------------
/modules/react/form-field/lib/FormFieldInput.tsx:
--------------------------------------------------------------------------------
1 | import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
2 | import {Box, mergeStyles} from '@workday/canvas-kit-react/layout';
3 |
4 | import {useFormFieldInput, useFormFieldModel} from './hooks';
5 |
6 | export const FormFieldInput = createSubcomponent('input')({
7 | displayName: 'FormField.Input',
8 | modelHook: useFormFieldModel,
9 | elemPropsHook: useFormFieldInput,
10 | })>((elemProps, Element) => {
11 | return , HTMLSpanElement>;
4 |
--------------------------------------------------------------------------------
/modules/react/icon/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import {CanvasIcon, CanvasIconTypes} from '@workday/design-assets-types';
2 |
3 | export function validateIconType(icon: CanvasIcon, expectedType: CanvasIconTypes) {
4 | if (icon.type !== expectedType) {
5 | throw `${icon.name}: Icon type "${icon.type}" does not match expected type "${expectedType}"`;
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/modules/react/icon/spec/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../../tsconfig.spec.json"
3 | }
4 |
--------------------------------------------------------------------------------
/modules/react/icon/stories/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../../tsconfig.stories.json"
3 | }
4 |
--------------------------------------------------------------------------------
/modules/react/layout/lib/utils/getValidChildren.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export function getValidChildren(children: React.ReactNode) {
4 | return React.Children.toArray(children).filter(child =>
5 | React.isValidElement(child)
6 | ) as React.ReactElement[];
7 | }
8 |
--------------------------------------------------------------------------------
/modules/react/layout/spec/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../../tsconfig.spec.json"
3 | }
4 |
--------------------------------------------------------------------------------
/modules/react/layout/stories/Box.stories.ts:
--------------------------------------------------------------------------------
1 | import {Meta, StoryObj} from '@storybook/react';
2 |
3 | import mdxDoc from './Box.mdx';
4 |
5 | import {Box} from '@workday/canvas-kit-react/layout';
6 | // examples
7 | import {Basic as BasicExample} from './examples/Box/Basic';
8 |
9 | export default {
10 | title: 'Components/Layout/Box',
11 | component: Box,
12 | tags: ['autodocs'],
13 | parameters: {
14 | docs: {
15 | page: mdxDoc,
16 | },
17 | },
18 | } as Meta;
19 |
20 | type Story = StoryObj;
21 |
22 | export const Basic: Story = {
23 | render: BasicExample,
24 | };
25 |
--------------------------------------------------------------------------------
/modules/react/layout/stories/Flex.stories.ts:
--------------------------------------------------------------------------------
1 | import {Meta, StoryObj} from '@storybook/react';
2 |
3 | import mdxDoc from './Flex.mdx';
4 |
5 | import {Flex} from '@workday/canvas-kit-react/layout';
6 | // examples
7 | import {Basic as BasicExample} from './examples/Flex/Basic';
8 |
9 | export default {
10 | title: 'Components/Layout/Flex',
11 | component: Flex,
12 | tags: ['autodocs'],
13 | parameters: {
14 | docs: {
15 | page: mdxDoc,
16 | },
17 | },
18 | } as Meta;
19 |
20 | type Story = StoryObj;
21 |
22 | export const Basic: Story = {
23 | render: BasicExample,
24 | };
25 |
--------------------------------------------------------------------------------
/modules/react/layout/stories/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../../tsconfig.stories.json"
3 | }
4 |
--------------------------------------------------------------------------------
/modules/react/loading-dots/README.md:
--------------------------------------------------------------------------------
1 | # Canvas Kit Loading Dots
2 |
3 | View the
4 | [documentation for Loading Dots](https://workday.github.io/canvas-kit/?path=/docs/components-indicators-loading-dots-react--basic)
5 | on Storybook.
6 |
7 | [> Workday Design Reference](https://design.workday.com/components/indicators/loading-dots)
8 |
--------------------------------------------------------------------------------
/modules/react/loading-dots/index.ts:
--------------------------------------------------------------------------------
1 | export * from './lib/LoadingDots';
2 |
--------------------------------------------------------------------------------
/modules/react/loading-dots/spec/LoadingDots.spec.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {render} from '@testing-library/react';
3 |
4 | import {LoadingDots} from '../lib/LoadingDots';
5 |
6 | describe('LoadingDots', () => {
7 | it('should spread extra props to container', () => {
8 | const {container} = render(
13 |
15 | );
16 | };
17 |
--------------------------------------------------------------------------------
/modules/react/loading-dots/stories/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../../tsconfig.stories.json"
3 | }
4 |
--------------------------------------------------------------------------------
/modules/react/menu/README.md:
--------------------------------------------------------------------------------
1 | # Canvas Kit Menu
2 |
3 | Canvas Kit Menu Component
4 |
5 | ## Installation
6 |
7 | ```sh
8 | yarn add @workday/canvas-kit-react
9 | ```
10 |
11 | ## Usage
12 |
13 | ```tsx
14 | import * as React from 'react';
15 | import {Menu} from '@workday/canvas-kit-react/menu';
16 |
17 | ;
18 | ```
19 |
20 | ## Static Properties
21 |
22 | > None
23 |
24 | ## Component Props
25 |
26 | ### Required
27 |
28 | > None
29 |
30 | ### Optional
31 |
32 | > None
33 |
--------------------------------------------------------------------------------
/modules/react/menu/index.ts:
--------------------------------------------------------------------------------
1 | export {useMenuModel} from './lib/useMenuModel';
2 | export {Menu} from './lib/Menu';
3 |
4 | export {useMenuCard, menuCardStencil} from './lib/MenuCard';
5 | export {useMenuItem, menuItemStencil, StyledMenuItem} from './lib/MenuItem';
6 | export {useMenuOption} from './lib/MenuOption';
7 | export {useMenuList, menuListStencil} from './lib/MenuList';
8 | export {useMenuPopper} from './lib/MenuPopper';
9 | export {useMenuTarget, useMenuTargetContext} from './lib/MenuTarget';
10 | export {menuDividerStencil} from './lib/MenuDivider';
11 |
--------------------------------------------------------------------------------
/modules/react/menu/spec/tsconfig.json:
--------------------------------------------------------------------------------
1 |
2 | {
3 | "extends": "../../../../tsconfig.spec.json"
4 | }
5 |
--------------------------------------------------------------------------------
/modules/react/menu/stories/testingFallback.stories.tsx:
--------------------------------------------------------------------------------
1 | import {customViewport} from '../../../../utils/storybook';
2 | import {Menu} from '@workday/canvas-kit-react/menu';
3 | import {MenuWithFallbackPlacements as MenuWithFallbackPlacementsExample} from './examples/MenuWithFallbackPlacements';
4 |
5 | export default {
6 | title: 'Testing/Popups/Menu',
7 | component: Menu,
8 | parameters: {
9 | viewport: {
10 | viewports: customViewport,
11 | defaultViewport: 'landscape',
12 | },
13 | },
14 | };
15 |
16 | export const MenuWithFallbackPlacements = {
17 | render: MenuWithFallbackPlacementsExample,
18 | };
19 |
--------------------------------------------------------------------------------
/modules/react/menu/stories/tsconfig.json:
--------------------------------------------------------------------------------
1 |
2 | {
3 | "extends": "../../../../tsconfig.stories.json"
4 | }
5 |
--------------------------------------------------------------------------------
/modules/react/modal/.npmignore:
--------------------------------------------------------------------------------
1 | tsconfig.json
2 | yarn.lock
3 |
4 |
--------------------------------------------------------------------------------
/modules/react/modal/README.md:
--------------------------------------------------------------------------------
1 | # Canvas Kit Modal
2 |
3 | A Modal component that allows you to render a Popup with translucent overlays.
4 |
5 | ## Installation
6 |
7 | ```sh
8 | yarn add @workday/canvas-kit-react
9 | ```
10 |
11 | For more detailed information on this component, please refer to the
12 | [storybook documentation](https://workday.github.io/canvas-kit/?path=/docs/components-popups-modal-react)
13 |
--------------------------------------------------------------------------------
/modules/react/modal/index.ts:
--------------------------------------------------------------------------------
1 | export * from './lib/hooks';
2 | export * from './lib/Modal';
3 |
--------------------------------------------------------------------------------
/modules/react/modal/lib/hooks/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useCloseOnOverlayClick';
2 | export * from './useModalCard';
3 | export * from './useModalHeading';
4 | export * from './useModalModel';
5 |
--------------------------------------------------------------------------------
/modules/react/modal/spec/Modal.spec.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {renderToString} from 'react-dom/server';
3 |
4 | import {Basic} from '../stories/examples/Basic';
5 |
6 | describe('Modal', () => {
7 | it('should render on a server without crashing', () => {
8 | const ssrRender = () => renderToString( {
4 | 'aria-label': string;
5 | }
6 |
7 | export const PaginationNav = (elemProps: PaginationNavProps) => {
8 | return (
9 | Close );
10 |
11 | expect(screen.getByRole('button', {name: 'Close'})).toBeInTheDocument();
12 | });
13 | });
14 |
--------------------------------------------------------------------------------
/modules/react/popup/spec/PopupCloseIcon.spec.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {screen, render} from '@testing-library/react';
3 | import {Popup, usePopupModel} from '@workday/canvas-kit-react/popup';
4 |
5 | describe('Popup.CloseIcon', () => {
6 | verifyComponent(Popup.CloseIcon, {modelFn: usePopupModel});
7 |
8 | it('should have a role of "button"', () => {
9 | render(Heading );
10 |
11 | expect(screen.getByRole('heading')).toBeInTheDocument();
12 | });
13 | });
14 |
--------------------------------------------------------------------------------
/modules/react/popup/spec/PopupTarget.spec.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {screen, render} from '@testing-library/react';
3 | import {Popup, usePopupModel} from '@workday/canvas-kit-react/popup';
4 |
5 | describe('Popup.Target', () => {
6 | verifyComponent(Popup.Target, {modelFn: usePopupModel});
7 |
8 | it('should have a role of "button"', () => {
9 | render(Open );
10 |
11 | expect(screen.getByRole('button', {name: 'Open'})).toBeInTheDocument();
12 | });
13 | });
14 |
--------------------------------------------------------------------------------
/modules/react/popup/spec/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../../tsconfig.spec.json"
3 | }
4 |
--------------------------------------------------------------------------------
/modules/react/popup/stories/testingFallback.stories.tsx:
--------------------------------------------------------------------------------
1 | import {customViewport} from '../../../../utils/storybook';
2 | import {Popup} from '@workday/canvas-kit-react/popup';
3 | import {PopupWithFallbackPlacements as PopupWithFallbackPlacementsExample} from './examples/PopupWithFallbackPlacements';
4 |
5 | export default {
6 | title: 'Testing/Popups/Popup',
7 | component: Popup,
8 | parameters: {
9 | viewport: {
10 | viewports: customViewport,
11 | defaultViewport: 'landscape',
12 | },
13 | },
14 | };
15 |
16 | export const PopupWithFallbackPlacements = {
17 | render: PopupWithFallbackPlacementsExample,
18 | };
19 |
--------------------------------------------------------------------------------
/modules/react/popup/stories/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../../tsconfig.stories.json"
3 | }
4 |
--------------------------------------------------------------------------------
/modules/react/radio/README.md:
--------------------------------------------------------------------------------
1 | # Canvas Kit Radio
2 |
3 | View the
4 | [documentation for Radio](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-radio-react--basic)
5 | on Storybook.
6 |
7 | [> Workday Design Reference](https://design.workday.com/components/inputs/radio-buttons)
8 |
--------------------------------------------------------------------------------
/modules/react/radio/index.ts:
--------------------------------------------------------------------------------
1 | export * from './lib/Radio';
2 | export * from './lib/RadioGroup';
3 |
--------------------------------------------------------------------------------
/modules/react/radio/spec/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../../tsconfig.spec.json"
3 | }
4 |
--------------------------------------------------------------------------------
/modules/react/segmented-control/index.ts:
--------------------------------------------------------------------------------
1 | export * from './lib/SegmentedControl';
2 |
--------------------------------------------------------------------------------
/modules/react/segmented-control/spec/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../../tsconfig.spec.json"
3 | }
4 |
--------------------------------------------------------------------------------
/modules/react/segmented-control/stories/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../../tsconfig.stories.json"
3 | }
4 |
--------------------------------------------------------------------------------
/modules/react/select/README.md:
--------------------------------------------------------------------------------
1 | # Canvas Kit Select
2 |
3 | View the
4 | [documentation for Select](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select-react--basic)
5 | on Storybook.
6 |
7 | [> Workday Design Reference](https://design.workday.com/components/inputs/select-drop-down)
8 |
9 | > Consider using the
10 | > [Select in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-select-react-top-label--default)
11 | > instead. It utilizes a Canvas-styled menu with theming support and a more flexible API for
12 | > defining options. The Select in Preview will replace this component in the future.
13 |
--------------------------------------------------------------------------------
/modules/react/select/index.ts:
--------------------------------------------------------------------------------
1 | export * from './lib/Select';
2 | export {selectInputStencil} from './lib/SelectInput';
3 | export * from './lib/hooks';
4 |
--------------------------------------------------------------------------------
/modules/react/select/lib/hooks/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useSelectModel';
2 | export * from './useSelectInput';
3 | export * from './useSelectCard';
4 |
--------------------------------------------------------------------------------
/modules/react/select/lib/hooks/useSelectCard.ts:
--------------------------------------------------------------------------------
1 | import {createElemPropsHook} from '@workday/canvas-kit-react/common';
2 | import {useSelectModel} from './useSelectModel';
3 |
4 | /**
5 | * Sets the width of the ` SelectCard` to the `Select.Input` width.
6 | */
7 | export const useSelectCard = createElemPropsHook(useSelectModel)(model => {
8 | return {
9 | width: model.state.width,
10 | } as const;
11 | });
12 |
--------------------------------------------------------------------------------
/modules/react/select/spec/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../../tsconfig.spec.json"
3 | }
4 |
--------------------------------------------------------------------------------
/modules/react/side-panel/.npmignore:
--------------------------------------------------------------------------------
1 | tsconfig.json
2 | yarn.lock
3 |
--------------------------------------------------------------------------------
/modules/react/side-panel/index.ts:
--------------------------------------------------------------------------------
1 | export * from './lib/SidePanel';
2 |
--------------------------------------------------------------------------------
/modules/react/side-panel/spec/SSR.spec.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * @jest-environment node
3 | */
4 | import React from 'react';
5 | import {renderToString} from 'react-dom/server';
6 | import {SidePanel} from '../';
7 |
8 | describe('Modal', () => {
9 | it('should render on a server without crashing', () => {
10 | const ssrRender = () => renderToString(
7 |
9 | );
10 | };
11 |
--------------------------------------------------------------------------------
/modules/react/skeleton/stories/examples/Shape.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {Skeleton} from '@workday/canvas-kit-react/skeleton';
3 | import {borderRadius, space} from '@workday/canvas-kit-react/tokens';
4 |
5 | export const Shape = () => {
6 | return (
7 |
8 |
10 | );
11 | };
12 |
--------------------------------------------------------------------------------
/modules/react/skeleton/stories/examples/Text.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {Skeleton} from '@workday/canvas-kit-react/skeleton';
3 |
4 | export const Text = () => {
5 | return (
6 |
7 |
9 | );
10 | };
11 |
--------------------------------------------------------------------------------
/modules/react/skeleton/stories/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../../tsconfig.stories.json"
3 | }
4 |
--------------------------------------------------------------------------------
/modules/react/status-indicator/README.md:
--------------------------------------------------------------------------------
1 | # Canvas Kit Status Indicator
2 |
3 | View the
4 | [documentation for Status Indicator](https://workday.github.io/canvas-kit/?path=/docs/components-indicators-status-indicator-react--basic)
5 | on Storybook.
6 |
7 | [> Workday Design Reference](https://design.workday.com/components/indicators/status-indicators)
8 |
--------------------------------------------------------------------------------
/modules/react/status-indicator/index.ts:
--------------------------------------------------------------------------------
1 | export * from './lib/StatusIndicator';
2 |
--------------------------------------------------------------------------------
/modules/react/status-indicator/spec/StatusIndicator.spec.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {render} from '@testing-library/react';
3 |
4 | import {StatusIndicator} from '../lib/StatusIndicator';
5 |
6 | describe('StatusIndicator', () => {
7 | it('Card should spread extra props', () => {
8 | const {container} = render(
9 |
9 | {children}
10 |
11 | );
12 | },
13 | });
14 |
--------------------------------------------------------------------------------
/modules/react/table/lib/parts/BaseTableRow.tsx:
--------------------------------------------------------------------------------
1 | import {createComponent} from '@workday/canvas-kit-react/common';
2 | import {BoxProps} from '@workday/canvas-kit-react/layout';
3 |
4 | export const BaseTableRow = createComponent('tr')({
5 | displayName: 'Table.Row',
6 | Component: ({children, ...elemProps}: BoxProps, ref, Element) => {
7 | return (
8 |
9 | {children}
10 |
11 | );
12 | },
13 | });
14 |
--------------------------------------------------------------------------------
/modules/react/table/lib/parts/css-grid-table/index.tsx:
--------------------------------------------------------------------------------
1 | export * from './TableRow';
2 |
--------------------------------------------------------------------------------
/modules/react/table/lib/parts/index.tsx:
--------------------------------------------------------------------------------
1 | export * from './BaseTableBody';
2 | export * from './BaseTableCaption';
3 | export * from './BaseTableCell';
4 | export * from './BaseTableFooter';
5 | export * from './BaseTableHead';
6 | export * from './BaseTableHeader';
7 | export * from './BaseTableRow';
8 |
--------------------------------------------------------------------------------
/modules/react/table/spec/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../../tsconfig.spec.json"
3 | }
4 |
--------------------------------------------------------------------------------
/modules/react/table/stories/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../../tsconfig.stories.json"
3 | }
4 |
--------------------------------------------------------------------------------
/modules/react/tabs/README.md:
--------------------------------------------------------------------------------
1 | # Canvas Kit Tabs
2 |
3 | View the
4 | [documentation for Tabs](https://workday.github.io/canvas-kit/?path=/docs/components-containers-tabs-react--basic)
5 | on Storybook.
6 |
7 | [> Workday Design Reference](https://design.workday.com/components/navigation/tabs)
8 |
--------------------------------------------------------------------------------
/modules/react/tabs/index.ts:
--------------------------------------------------------------------------------
1 | export * from './lib/Tabs';
2 | export * from './lib/useTabsModel';
3 |
4 | export {StyledTabItem, useTabsItem} from './lib/TabsItem';
5 | export {useTabsList} from './lib/TabsList';
6 | export {useTabsMenuPopper} from './lib/TabsMenuPopper';
7 | export {useTabsOverflowButton} from './lib/TabsOverflowButton';
8 | export {useTabsPanel} from './lib/TabsPanel';
9 |
--------------------------------------------------------------------------------
/modules/react/tabs/spec/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../../tsconfig.spec.json"
3 | }
4 |
--------------------------------------------------------------------------------
/modules/react/tabs/stories/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../../tsconfig.stories.json"
3 | }
4 |
--------------------------------------------------------------------------------
/modules/react/testing/README.md:
--------------------------------------------------------------------------------
1 | # Canvas Kit Testing
2 |
3 | A package that provides components for testing
4 |
5 | View the [documentation for Testing](https://workday.github.io/canvas-kit/?path=/docs/testing-react)
6 | on Storybook.
7 |
--------------------------------------------------------------------------------
/modules/react/testing/index.ts:
--------------------------------------------------------------------------------
1 | export * from './lib/ComponentStatesTable';
2 | export * from './lib/StaticStates';
3 | export * from './lib/permutateProps';
4 | export * from './lib/propTypes';
5 |
--------------------------------------------------------------------------------
/modules/react/testing/lib/propTypes.ts:
--------------------------------------------------------------------------------
1 | export type PropDeclaration = {
2 | value: any;
3 | label: string;
4 | };
5 |
6 | export type PropsDeclaration = {[key: string]: PropDeclaration[]};
7 |
8 | export type Props = {
9 | [key: string]: any;
10 | };
11 |
12 | export type PropCombination = {
13 | label: string;
14 | props: Props;
15 | };
16 |
--------------------------------------------------------------------------------
/modules/react/testing/stories/Testing.stories.ts:
--------------------------------------------------------------------------------
1 | import {Meta, StoryObj} from '@storybook/react';
2 |
3 | import mdxDoc from './Testing.mdx';
4 |
5 | import {Basic} from './examples/Basic';
6 |
7 | export default {
8 | title: 'Hooks and Utilities/Testing',
9 | tags: ['autodocs'],
10 | parameters: {
11 | docs: {
12 | page: mdxDoc,
13 | },
14 | },
15 | } as Meta;
16 |
17 | type Story = StoryObj;
18 |
19 | export const Docs: Story = {
20 | render: Basic,
21 | };
22 |
--------------------------------------------------------------------------------
/modules/react/testing/stories/tsconfig.json:
--------------------------------------------------------------------------------
1 |
2 | {
3 | "extends": "../../../../tsconfig.stories.json"
4 | }
5 |
--------------------------------------------------------------------------------
/modules/react/text-area/README.md:
--------------------------------------------------------------------------------
1 | # Canvas Kit Text Area
2 |
3 | View the
4 | [documentation for Text Area](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-textarea-react--basic)
5 | on Storybook.
6 |
7 | [> Workday Design Reference](https://design.workday.com/components/inputs/text-area)
8 |
--------------------------------------------------------------------------------
/modules/react/text-area/index.ts:
--------------------------------------------------------------------------------
1 | export * from './lib/TextArea';
2 |
--------------------------------------------------------------------------------
/modules/react/text-area/spec/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../../tsconfig.spec.json"
3 | }
4 |
--------------------------------------------------------------------------------
/modules/react/text-input/README.md:
--------------------------------------------------------------------------------
1 | # Canvas Kit Text Input
2 |
3 | View the
4 | [documentation for Text Input](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-text-input-react--basic)
5 | on Storybook.
6 |
7 | [> Workday Design Reference](https://design.workday.com/components/inputs/text-input)
8 |
--------------------------------------------------------------------------------
/modules/react/text-input/index.ts:
--------------------------------------------------------------------------------
1 | export * from './lib/TextInput';
2 | export {InputGroup, useInputGroupModel} from './lib/InputGroup';
3 |
--------------------------------------------------------------------------------
/modules/react/text-input/spec/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../../tsconfig.spec.json"
3 | }
4 |
--------------------------------------------------------------------------------
/modules/react/text/README.md:
--------------------------------------------------------------------------------
1 | # Canvas Kit Text
2 |
3 | View the
4 | [documentation for Text](https://workday.github.io/canvas-kit/?path=/docs/preview-text-react--text)
5 | on Storybook.
6 |
--------------------------------------------------------------------------------
/modules/react/text/index.ts:
--------------------------------------------------------------------------------
1 | export * from './lib/Text';
2 | export * from './lib/TypeLevelComponents';
3 | export * from './lib/LabelText';
4 |
--------------------------------------------------------------------------------
/modules/react/text/spec/tsconfig.json:
--------------------------------------------------------------------------------
1 |
2 | {
3 | "extends": "../../../../tsconfig.spec.json"
4 | }
5 |
--------------------------------------------------------------------------------
/modules/react/text/stories/BodyText.stories.ts:
--------------------------------------------------------------------------------
1 | import {Meta, StoryObj} from '@storybook/react';
2 |
3 | import mdxDoc from './BodyText.mdx';
4 |
5 | import {BodyText} from '@workday/canvas-kit-react/text';
6 |
7 | import {Basic as BasicExample} from './examples/BodyText/Basic';
8 |
9 | export default {
10 | title: 'Components/Text/Body Text',
11 | component: BodyText,
12 | tags: ['autodocs'],
13 | parameters: {
14 | docs: {
15 | page: mdxDoc,
16 | },
17 | },
18 | } as Meta;
19 |
20 | type Story = StoryObj;
21 |
22 | export const Basic: Story = {
23 | render: BasicExample,
24 | };
25 |
--------------------------------------------------------------------------------
/modules/react/text/stories/Heading.stories.ts:
--------------------------------------------------------------------------------
1 | import {Meta, StoryObj} from '@storybook/react';
2 |
3 | import mdxDoc from './Heading.mdx';
4 |
5 | import {Heading} from '@workday/canvas-kit-react/text';
6 |
7 | import {Basic as BasicExample} from './examples/Heading/Basic';
8 |
9 | export default {
10 | title: 'Components/Text/Heading',
11 | component: Heading,
12 | tags: ['autodocs'],
13 | parameters: {
14 | docs: {
15 | page: mdxDoc,
16 | },
17 | },
18 | } as Meta;
19 |
20 | type Story = StoryObj;
21 |
22 | export const Basic: Story = {
23 | render: BasicExample,
24 | };
25 |
--------------------------------------------------------------------------------
/modules/react/text/stories/Subtext.stories.ts:
--------------------------------------------------------------------------------
1 | import {Meta, StoryObj} from '@storybook/react';
2 |
3 | import mdxDoc from './Subtext.mdx';
4 |
5 | import {Subtext} from '@workday/canvas-kit-react/text';
6 |
7 | import {Basic as BasicExample} from './examples/Subtext/Basic';
8 |
9 | export default {
10 | title: 'Components/Text/Subtext',
11 | component: Subtext,
12 | tags: ['autodocs'],
13 | parameters: {
14 | docs: {
15 | page: mdxDoc,
16 | },
17 | },
18 | } as Meta;
19 |
20 | type Story = StoryObj;
21 |
22 | export const Basic: Story = {
23 | render: BasicExample,
24 | };
25 |
--------------------------------------------------------------------------------
/modules/react/text/stories/Title.stories.ts:
--------------------------------------------------------------------------------
1 | import {Meta, StoryObj} from '@storybook/react';
2 |
3 | import mdxDoc from './Title.mdx';
4 |
5 | import {Title} from '@workday/canvas-kit-react/text';
6 |
7 | import {Basic as BasicExample} from './examples/Title/Basic';
8 |
9 | export default {
10 | title: 'Components/Text/Title',
11 | component: Title,
12 | tags: ['autodocs'],
13 | parameters: {
14 | docs: {
15 | page: mdxDoc,
16 | },
17 | },
18 | } as Meta;
19 |
20 | type Story = StoryObj;
21 |
22 | export const Basic: Story = {
23 | render: BasicExample,
24 | };
25 |
--------------------------------------------------------------------------------
/modules/react/text/stories/examples/BodyText/Basic.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {BodyText} from '@workday/canvas-kit-react/text';
3 |
4 | export const Basic = () => (
5 | <>
6 | Large Body Text
7 | Medium Body Text
8 | Small Body Text
9 |
10 | );
11 |
--------------------------------------------------------------------------------
/modules/react/text/stories/examples/Heading/Basic.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {Heading} from '@workday/canvas-kit-react/text';
3 |
4 | export const Basic = () => (
5 | <>
6 |
7 | Large Heading Text
8 |
9 |
10 | Medium Heading Text
11 |
12 |
13 | Small Heading Text
14 |
15 |
16 | );
17 |
--------------------------------------------------------------------------------
/modules/react/text/stories/examples/LabelText/Basic.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {LabelText} from '@workday/canvas-kit-react/text';
3 |
4 | export const Basic = () => Label ;
5 |
--------------------------------------------------------------------------------
/modules/react/text/stories/examples/LabelText/Cursor.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {LabelText} from '@workday/canvas-kit-react/text';
3 |
4 | export const Cursor = () => Label with Pointer ;
5 |
--------------------------------------------------------------------------------
/modules/react/text/stories/examples/Subtext/Basic.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {Subtext} from '@workday/canvas-kit-react/text';
3 |
4 | export const Basic = () => (
5 | <>
6 | Large Subtext
7 | Medium Subtext
8 | Small Subtext
9 |
10 | );
11 |
--------------------------------------------------------------------------------
/modules/react/text/stories/examples/Text/TypeLevel.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import {Text} from '@workday/canvas-kit-react/text';
4 |
5 | export const TypeLevel = () => (
6 |
7 | Small Body level text
8 |
9 | );
10 |
--------------------------------------------------------------------------------
/modules/react/text/stories/examples/Text/Variant.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import {Text} from '@workday/canvas-kit-react/text';
4 |
5 | export const Variant = () => (
6 |
7 | Error text
8 |
9 | );
10 |
--------------------------------------------------------------------------------
/modules/react/text/stories/examples/Title/Basic.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {Title} from '@workday/canvas-kit-react/text';
3 |
4 | export const Basic = () => (
5 | <>
6 |
7 | Large Title Text
8 |
9 |
10 | Medium Title Text
11 |
12 |
13 | Small Title Text
14 |
15 |
16 | );
17 |
--------------------------------------------------------------------------------
/modules/react/text/stories/tsconfig.json:
--------------------------------------------------------------------------------
1 |
2 | {
3 | "extends": "../../../../tsconfig.stories.json"
4 | }
5 |
--------------------------------------------------------------------------------
/modules/react/toast/README.md:
--------------------------------------------------------------------------------
1 | # Canvas Kit Toast
2 |
3 | View the
4 | [documentation for Toast](https://workday.github.io/canvas-kit/?path=/docs/components-popups-toast-react--with-popper#canvas-kit-toast)
5 | on Storybook.
6 |
--------------------------------------------------------------------------------
/modules/react/toast/index.ts:
--------------------------------------------------------------------------------
1 | export * from './lib/Toast';
2 | export * from './lib/hooks/useToastModel';
3 |
--------------------------------------------------------------------------------
/modules/react/toast/lib/ToastLink.tsx:
--------------------------------------------------------------------------------
1 | import {createComponent} from '@workday/canvas-kit-react/common';
2 | import {Hyperlink, HyperlinkProps} from '@workday/canvas-kit-react/button';
3 |
4 | export interface ToastLinkProps extends HyperlinkProps {}
5 |
6 | export const ToastLink = createComponent('a')({
7 | displayName: 'Toast.Link',
8 | Component: ({children, href, ...elemProps}: ToastLinkProps, ref, Element) => {
9 | return (
10 |
11 | {children}
12 |
13 | );
14 | },
15 | });
16 |
--------------------------------------------------------------------------------
/modules/react/toast/spec/ToastCloseIcon.spec.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {render, screen} from '@testing-library/react';
3 | import {usePopupModel} from '@workday/canvas-kit-react/popup';
4 | import {Toast} from '../lib/Toast';
5 |
6 | describe('Toast.Close', () => {
7 | verifyComponent(Toast.CloseIcon, {modelFn: usePopupModel});
8 |
9 | it('should have a role of "button"', () => {
10 | render(Link Link );
11 |
12 | expect(screen.getByRole('link')).toBeInTheDocument();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/modules/react/toast/spec/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../../tsconfig.spec.json"
3 | }
4 |
--------------------------------------------------------------------------------
/modules/react/toast/stories/examples/Basic.tsx:
--------------------------------------------------------------------------------
1 | import {Toast} from '@workday/canvas-kit-react/toast';
2 | import {checkIcon} from '@workday/canvas-system-icons-web';
3 |
4 | export const Basic = () => {
5 | return (
6 |
7 |
9 | Your workbook was successfully processed.
10 |
11 |
12 | );
13 | };
14 |
--------------------------------------------------------------------------------
/modules/react/toast/stories/examples/ToastAlert.tsx:
--------------------------------------------------------------------------------
1 | import {Toast} from '@workday/canvas-kit-react/toast';
2 | import {exclamationCircleIcon} from '@workday/canvas-system-icons-web';
3 | import {colors} from '@workday/canvas-kit-react/tokens';
4 |
5 | export const ToastAlert = () => (
6 |
7 |
9 | There was an error with your workbook.
10 |
11 |
12 | );
13 |
--------------------------------------------------------------------------------
/modules/react/toast/stories/examples/ToastDialog.tsx:
--------------------------------------------------------------------------------
1 | import {Toast} from '@workday/canvas-kit-react/toast';
2 | import {checkIcon} from '@workday/canvas-system-icons-web';
3 |
4 | export const ToastDialog = () => (
5 |
6 |
8 | Your workbook was successfully processed.
9 | Custom Link
10 |
11 |
12 | );
13 |
--------------------------------------------------------------------------------
/modules/react/toast/stories/tsconfig.json:
--------------------------------------------------------------------------------
1 |
2 | {
3 | "extends": "../../../../tsconfig.stories.json"
4 | }
5 |
--------------------------------------------------------------------------------
/modules/react/tokens/lib/types.ts:
--------------------------------------------------------------------------------
1 | import {CSSProperties as RCP} from 'react';
2 | import {CSSObject} from '@emotion/styled';
3 |
4 | export type CSSProperties = RCP & CSSObject;
5 |
--------------------------------------------------------------------------------
/modules/react/tokens/spec/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../../tsconfig.spec.json"
3 | }
4 |
--------------------------------------------------------------------------------
/modules/react/tokens/stories/examples/Overview.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import styled from '@emotion/styled';
3 |
4 | import {colors, type, depth, space, borderRadius} from '@workday/canvas-kit-react/tokens';
5 | import {Flex} from '@workday/canvas-kit-react/layout';
6 |
7 | const StyledCard = styled('div')({
8 | ...depth[3],
9 | padding: space.m,
10 | borderRadius: borderRadius.m,
11 | backgroundColor: colors.cinnamon300,
12 | ...type.levels.body.medium,
13 | });
14 |
15 | export const Overview = () => (
16 |
17 | Using Tokens To Style
18 |
19 | );
20 |
--------------------------------------------------------------------------------
/modules/react/tokens/stories/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../../tsconfig.stories.json"
3 | }
4 |
--------------------------------------------------------------------------------
/modules/react/tooltip/index.ts:
--------------------------------------------------------------------------------
1 | export * from './lib/Tooltip';
2 | export * from './lib/OverflowTooltip';
3 | export * from './lib/TooltipContainer';
4 | export * from './lib/useTooltip';
5 |
--------------------------------------------------------------------------------
/modules/react/tooltip/spec/OverflowTooltip.spec.tsx:
--------------------------------------------------------------------------------
1 | import {findEllipsisElement, findOverflowElement} from '..';
2 |
3 | describe('findEllipsisElement', () => {
4 | it('returns null if element has no children attribute [SVG in IE 11]', () => {
5 | const el = document.createElement('svg');
6 | expect(findEllipsisElement(el)).toBeNull();
7 | });
8 | });
9 |
10 | describe('findOverflowElement', () => {
11 | it('returns null if element has no children attribute [SVG in IE 11]', () => {
12 | const el = document.createElement('svg');
13 | expect(findOverflowElement(el)).toBeNull();
14 | });
15 | });
16 |
--------------------------------------------------------------------------------
/modules/react/tooltip/spec/SSR.spec.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * @jest-environment node
3 | */
4 | import React from 'react';
5 | import {renderToString} from 'react-dom/server';
6 | import {Tooltip} from '../';
7 |
8 | describe('Tooltip', () => {
9 | it('should render on a server without crashing', () => {
10 | const ssrRender = () =>
11 | renderToString(
12 |
13 | Test
14 |
15 | );
16 | expect(ssrRender).not.toThrow();
17 | });
18 | });
19 |
--------------------------------------------------------------------------------
/modules/react/tooltip/spec/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../../tsconfig.spec.json"
3 | }
4 |
--------------------------------------------------------------------------------
/modules/react/tooltip/stories/examples/Default.tsx:
--------------------------------------------------------------------------------
1 | import {xIcon} from '@workday/canvas-system-icons-web';
2 | import {TertiaryButton} from '@workday/canvas-kit-react/button';
3 | import {Tooltip} from '@workday/canvas-kit-react/tooltip';
4 |
5 | export const Default = () => {
6 | return (
7 |
8 |
10 | );
11 | };
12 |
--------------------------------------------------------------------------------
/modules/react/tooltip/stories/examples/DelayedTooltip.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import {SecondaryButton} from '@workday/canvas-kit-react/button';
4 | import {Tooltip} from '@workday/canvas-kit-react/tooltip';
5 |
6 | export const DelayedTooltip = () => {
7 | return (
8 |
9 |
10 |
11 | Tooltip appears after 2 seconds and disappears after 1 second
12 |
13 |
14 |
15 | );
16 | };
17 |
--------------------------------------------------------------------------------
/modules/react/tooltip/stories/examples/DescribeType.tsx:
--------------------------------------------------------------------------------
1 | import {DeleteButton} from '@workday/canvas-kit-react/button';
2 | import {Tooltip} from '@workday/canvas-kit-react/tooltip';
3 |
4 | export const DescribeType = () => {
5 | return (
6 |
7 | Delete
8 |
9 | );
10 | };
11 |
--------------------------------------------------------------------------------
/modules/react/tooltip/stories/examples/Muted.tsx:
--------------------------------------------------------------------------------
1 | import {Tooltip} from '@workday/canvas-kit-react/tooltip';
2 |
3 | export const Muted = () => {
4 | return (
5 |
6 | Some text. The contents of the tooltip are invisible to screen reader users.
7 |
8 | );
9 | };
10 |
--------------------------------------------------------------------------------
/modules/react/tooltip/stories/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../../tsconfig.stories.json"
3 | }
4 |
--------------------------------------------------------------------------------
/modules/react/tsconfig.cjs.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "declaration": true,
5 | "module": "commonjs",
6 | "outDir": "dist/commonjs",
7 | "skipLibCheck": true,
8 | "tsBuildInfoFile": "./.build-info/tsconfig.cjs.tsbuildinfo"
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/modules/react/tsconfig.es6.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "declaration": true,
5 | "outDir": "dist/es6",
6 | "tsBuildInfoFile": "./.build-info/tsconfig.es6.tsbuildinfo"
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/modules/react/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "exclude": ["node_modules", "ts-tmp", "dist", "**/spec", "**/stories"],
4 | "compilerOptions": {
5 | "plugins": [
6 | {
7 | "transform": "../styling-transform"
8 | }
9 | ]
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/modules/styling-transform/lib/createPropertyTransform.ts:
--------------------------------------------------------------------------------
1 | import {PropertyTransform} from './utils/types';
2 |
3 | /**
4 | * A property transform takes a style property node and will return a string. You can use
5 | * `parseNodeToStaticValue` to help you process properties that might be inputs to a function.
6 | */
7 | export function createPropertyTransform(transformFn: PropertyTransform): PropertyTransform {
8 | return transformFn;
9 | }
10 |
--------------------------------------------------------------------------------
/modules/styling-transform/lib/utils/getHash.ts:
--------------------------------------------------------------------------------
1 | import ts from 'typescript';
2 | import crypto from 'node:crypto';
3 |
4 | import {TransformerContext} from './types';
5 |
6 | export function getHash(node: ts.Node, context: TransformerContext) {
7 | const fileName = context.getFileName(node.getSourceFile().fileName);
8 | return crypto
9 | .createHash('md5')
10 | .update(fileName + node.pos) // file name + position should be unique and repeatable
11 | .digest('hex')
12 | .substring(0, 6);
13 | }
14 |
--------------------------------------------------------------------------------
/modules/styling-transform/lib/utils/injectStyles.ts:
--------------------------------------------------------------------------------
1 | import {TransformerContext} from './types';
2 |
3 | export function injectStyles(
4 | {styles, cache}: TransformerContext,
5 | fileName: string,
6 | hash: string,
7 | styleOutput: string
8 | ) {
9 | if (!cache[hash]) {
10 | styles[fileName] = styles[fileName] || [];
11 | styles[fileName].push(styleOutput);
12 | cache[hash] = styleOutput;
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/modules/styling-transform/spec/_variables.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --var-1: red;
3 | }
4 |
--------------------------------------------------------------------------------
/modules/styling-transform/spec/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../tsconfig.spec.json"
3 | }
4 |
--------------------------------------------------------------------------------
/modules/styling-transform/spec/utils/createStyleObjectNode.spec.ts:
--------------------------------------------------------------------------------
1 | import ts from 'typescript';
2 |
3 | import {createStyleObjectNode} from '../../lib/utils/createStyleObjectNode';
4 |
5 | describe('createStyleObjectNode', () => {
6 | it('should serialize styles with a hard-coded name and styles', () => {
7 | const node = createStyleObjectNode('padding:12px;');
8 |
9 | const printer = ts.createPrinter();
10 | const output = printer.printNode(ts.EmitHint.Unspecified, node, {} as any);
11 |
12 | expect(output).toMatch(/{ name: "[a-z0-9]+", styles: "padding:12px;" }/);
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/modules/styling-transform/testing.ts:
--------------------------------------------------------------------------------
1 | export {createProgramFromSource} from './spec/createProgramFromSource';
2 | export {transform, _reset, withDefaultContext} from './lib/styleTransform';
3 | export {findNodes} from './spec/findNodes';
4 |
--------------------------------------------------------------------------------
/modules/styling-transform/tsconfig.cjs.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "declaration": true,
5 | "module": "commonjs",
6 | "outDir": "dist/commonjs",
7 | "skipLibCheck": true,
8 | "tsBuildInfoFile": "./.build-info/tsconfig.cjs.tsbuildinfo"
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/modules/styling-transform/tsconfig.es6.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "declaration": true,
5 | "outDir": "dist/es6",
6 | "tsBuildInfoFile": "./.build-info/tsconfig.es6.tsbuildinfo"
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/modules/styling-transform/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "exclude": ["node_modules", "ts-tmp", "dist", "**/spec", "**/stories"]
4 | }
5 |
--------------------------------------------------------------------------------
/modules/styling/README.md:
--------------------------------------------------------------------------------
1 | # Canvas Kit Styling
2 |
3 | This package contains everything needed to create CSS styling. This styling package contains a
4 | runtime for development and a static parsing process for build time. For more information, visit
5 | https://workday.github.io/canvas-kit/?path=/docs/styling-why-canvas-styling--docs
6 |
--------------------------------------------------------------------------------
/modules/styling/index.ts:
--------------------------------------------------------------------------------
1 | export * from './lib/calc';
2 | export * from './lib/cs';
3 | export * from './lib/px2rem';
4 | export * from './lib/slugify';
5 | export * from './lib/uniqueId';
6 |
--------------------------------------------------------------------------------
/modules/styling/lib/px2rem.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Function that converts a `px` value (number) to `rem` (string).
3 | * @example
4 | * ```ts
5 | * margin: px2rem(2);
6 | * // returns '0.125rem'
7 | * ```
8 | */
9 | export function px2rem(px: number, base = 16): string {
10 | return `${px / base}rem`;
11 | }
12 |
--------------------------------------------------------------------------------
/modules/styling/lib/slugify.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Function that takes a string and returns a "slug" which can be used in HTML
3 | */
4 | export function slugify(input: string): string {
5 | return input
6 | .trim()
7 | .replace(/[\.\s_-]+/g, '-')
8 | .replace(/[^\w\s-]/g, '')
9 | .replace(/([A-Z])/g, m => {
10 | return '-' + m.toLowerCase();
11 | })
12 | .replace(/^-+|-+$/g, '')
13 | .toLowerCase();
14 | }
15 |
--------------------------------------------------------------------------------
/modules/styling/spec/px2rem.spec.ts:
--------------------------------------------------------------------------------
1 | import {px2rem} from '../lib/px2rem';
2 |
3 | describe('px2rem', () => {
4 | it('should ', () => {
5 | const pxValue = 4;
6 | const expected = px2rem(pxValue);
7 |
8 | expect(expected).toBe('0.25rem');
9 | });
10 |
11 | it('should support alternate base', () => {
12 | const pxValue = 16;
13 | const baseValue = 10;
14 | const expected = px2rem(pxValue, baseValue);
15 |
16 | expect(expected).toBe('1.6rem');
17 | });
18 | });
19 |
--------------------------------------------------------------------------------
/modules/styling/spec/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../tsconfig.spec.json"
3 | }
4 |
--------------------------------------------------------------------------------
/modules/styling/stories/mdx/examples/CreateStyles.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import {createStyles} from '@workday/canvas-kit-styling';
4 | import {system} from '@workday/canvas-tokens-web';
5 |
6 | const styles = createStyles({
7 | background: system.color.bg.primary.default,
8 | color: system.color.text.inverse,
9 | });
10 |
11 | export const CreateStyles = () => {
12 | return ;
13 | };
14 |
--------------------------------------------------------------------------------
/modules/styling/stories/mdx/examples/CreateVars.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import {createStyles, createVars, cssVar} from '@workday/canvas-kit-styling';
4 |
5 | const myVars = createVars('background');
6 |
7 | const styles = createStyles({
8 | width: 100,
9 | height: 100,
10 | backgroundColor: cssVar(myVars.background),
11 | });
12 |
13 | export const CreateVars = () => {
14 | return (
15 | <>
16 |
17 |
18 |
19 | );
20 | };
21 |
--------------------------------------------------------------------------------
/modules/styling/tsconfig.cjs.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "declaration": true,
5 | "module": "commonjs",
6 | "outDir": "dist/commonjs",
7 | "skipLibCheck": true,
8 | "tsBuildInfoFile": "./.build-info/tsconfig.cjs.tsbuildinfo"
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/modules/styling/tsconfig.es6.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "declaration": true,
5 | "outDir": "dist/es6",
6 | "tsBuildInfoFile": "./.build-info/tsconfig.es6.tsbuildinfo"
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/modules/styling/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "exclude": ["node_modules", "ts-tmp", "dist", "**/spec", "**/stories"]
4 | }
5 |
--------------------------------------------------------------------------------
/tsconfig.docs.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "noEmit": true
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/tsconfig.eslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "exclude": ["cypress", "node_modules", "modules/**/dist/*", "modules/**/ts-tmp/*", "docs"]
4 | }
5 |
--------------------------------------------------------------------------------
/tsconfig.expect-type.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.spec.json",
3 | "include": ["**/*.test-d.ts*"],
4 | "exclude": []
5 | }
6 |
--------------------------------------------------------------------------------
/tsconfig.stories.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "include": ["**/*stories*.tsx", "**/*stories*.ts", "**/examples/*.tsx"],
4 | "exclude": ["cypress"],
5 | "compilerOptions": {
6 | "declaration": false,
7 | "declarationMap": false,
8 | "noImplicitReturns": false,
9 | "noImplicitThis": true,
10 | "preserveConstEnums": true,
11 | "allowUnreachableCode": false,
12 | "noImplicitAny": false,
13 | "strictNullChecks": false,
14 | "noUnusedLocals": false,
15 | "types": ["mdx"],
16 | "incremental": false,
17 | "skipLibCheck": true
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/typings.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.jpg';
2 |
--------------------------------------------------------------------------------
/utils/create-component/consoleUtils.js:
--------------------------------------------------------------------------------
1 | const chalk = require('chalk');
2 |
3 | const consoleMessage = (prefix, fileName, color = 'cyan') => {
4 | console.log(`${prefix} ${chalk[color](fileName)}`);
5 | }
6 |
7 | module.exports = {
8 | consoleMessage,
9 | };
10 |
--------------------------------------------------------------------------------
/utils/create-component/templates/react/hook.content.js:
--------------------------------------------------------------------------------
1 | module.exports = pascalCaseName => `
2 | import {createElemPropsHook} from '@workday/canvas-kit-react/common';
3 | import {use${pascalCaseName}Model} from './use${pascalCaseName}Model';
4 |
5 | /**
6 | * Adds the necessary props to a \`Content\` component.
7 | * Used by the ${pascalCaseName}.Content subcomponent.
8 | */
9 | export const use${pascalCaseName}Content = createElemPropsHook(use${pascalCaseName}Model)(({state}) => {
10 | return {
11 | ['data-is-it-open']: \`\${state.open ? 'yes' : 'no'}\`,
12 | };
13 | });
14 | `;
15 |
--------------------------------------------------------------------------------
/utils/create-component/templates/react/hook.index.js:
--------------------------------------------------------------------------------
1 | module.exports = pascalCaseName => `
2 | export * from './use${pascalCaseName}Model';
3 | export * from './use${pascalCaseName}Content';
4 | export * from './use${pascalCaseName}Target';
5 | `;
6 |
--------------------------------------------------------------------------------
/utils/create-component/templates/react/index.js:
--------------------------------------------------------------------------------
1 | module.exports = pascalCaseName => `
2 | export * from './lib/${pascalCaseName}';
3 | export * from './lib/hooks/';
4 | `;
5 |
--------------------------------------------------------------------------------
/utils/create-component/templates/react/stories.basic.js:
--------------------------------------------------------------------------------
1 | module.exports = (modulePath, pascalCaseName) => `
2 | import React from 'react';
3 |
4 | import {${pascalCaseName}} from '${modulePath}';
5 | import {SecondaryButton} from '@workday/canvas-kit-react/button';
6 |
7 | export const Basic = () => {
8 | return (
9 | <${pascalCaseName}>
10 | <${pascalCaseName}.Target as={SecondaryButton}>Toggle
11 | <${pascalCaseName}.Content>
12 | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
13 |
14 |
15 | );
16 | };
17 | `;
18 |
--------------------------------------------------------------------------------
/utils/custom-lint-rules/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Note: you need to run `yarn add -WD file:./utils/custom-lint-rules` after changes for them to be reflected locally
3 | */
4 | const restrictedImports = require('./restricted-imports');
5 | const useCKSlashImports = require('./use-ck-slash-imports');
6 |
7 | module.exports = {
8 | rules: {
9 | 'restricted-imports': restrictedImports,
10 | 'use-ck-slash-imports': useCKSlashImports,
11 | },
12 | };
13 |
--------------------------------------------------------------------------------
/utils/custom-lint-rules/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "eslint-plugin-workday-custom-rules",
3 | "version": "0.0.1",
4 | "main": "index.js",
5 | "devDependencies": {
6 | "eslint": "~2.6.0"
7 | },
8 | "engines": {
9 | "node": ">=0.10.0"
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/utils/storybook/InputProviderDecorator.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {InputProvider} from '@workday/canvas-kit-react/common';
3 |
4 | export default (storyFn: () => React.ReactNode) => {storyFn()} ;
5 |
--------------------------------------------------------------------------------
/utils/storybook/Markdown.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import 'github-markdown-css';
3 | import emojijs from 'emoji-js';
4 | import MarkdownToJSX from 'markdown-to-jsx';
5 |
6 | const emoji = new emojijs.EmojiConvertor();
7 |
8 | interface MarkdownProps {
9 | content: string;
10 | }
11 |
12 | export default class Markdown extends React.Component {
13 | render() {
14 | const convertedContent = emoji.replace_colons(this.props.content);
15 |
16 | return {convertedContent} ;
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/utils/storybook/customThemes.ts:
--------------------------------------------------------------------------------
1 | import {PartialCanvasTheme} from '@workday/canvas-kit-react/common';
2 |
3 | export const customColorTheme: PartialCanvasTheme = {
4 | palette: {
5 | primary: {
6 | main: 'purple',
7 | contrast: 'turquoise',
8 | },
9 | alert: {
10 | main: 'coral',
11 | },
12 | error: {
13 | main: 'crimson',
14 | },
15 | success: {
16 | main: 'aquamarine',
17 | },
18 | neutral: {
19 | main: 'gray',
20 | },
21 | common: {
22 | focusOutline: 'turquoise',
23 | },
24 | },
25 | };
26 |
--------------------------------------------------------------------------------
/utils/storybook/index.ts:
--------------------------------------------------------------------------------
1 | export {
2 | ControlledComponentWrapper,
3 | controlComponent,
4 | useControlledValue,
5 | useControlledCheck,
6 | } from './ControlledComponentWrapper';
7 | export {customColorTheme} from './customThemes';
8 | export {withSnapshotsEnabled} from './withSnapshotsEnabled';
9 | export {default as CanvasProviderDecorator} from './CanvasProviderDecorator';
10 | export {PopperController, customViewport} from './PopperController';
11 | export * from './testingOnly';
12 |
--------------------------------------------------------------------------------
/utils/storybook/testingOnly.ts:
--------------------------------------------------------------------------------
1 | export function testingOnly(fn: any) {
2 | fn.story = fn.story || {};
3 | fn.story.name = `_hidden_`; // hides via style in .storybook/manager-head.html
4 |
5 | return fn;
6 | }
7 |
--------------------------------------------------------------------------------
5 |
10 | );
11 |
--------------------------------------------------------------------------------
/modules/react/avatar/stories/avatar/examples/test-avatar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Workday/canvas-kit/60e23d05fa006d402e49a3abffa25038bca2960b/modules/react/avatar/stories/avatar/examples/test-avatar.png
--------------------------------------------------------------------------------
/modules/react/avatar/stories/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../../tsconfig.stories.json"
3 | }
4 |
--------------------------------------------------------------------------------
/modules/react/badge/eslintrc.js:
--------------------------------------------------------------------------------
1 | require('../../../eslintrc.js');
2 |
--------------------------------------------------------------------------------
/modules/react/badge/index.ts:
--------------------------------------------------------------------------------
1 | export {CountBadge, CountBadgeProps} from './lib/CountBadge';
2 |
--------------------------------------------------------------------------------
/modules/react/badge/spec/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../../tsconfig.spec.json"
3 | }
4 |
--------------------------------------------------------------------------------
/modules/react/badge/stories/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../../tsconfig.stories.json"
3 | }
4 |
--------------------------------------------------------------------------------
/modules/react/banner/README.md:
--------------------------------------------------------------------------------
1 | # Canvas Kit Banner
2 |
3 | View the
4 | [documentation for Banner](https://workday.github.io/canvas-kit/?path=/docs/components-indicators-banner-react--basic)
5 | on Storybook.
6 |
7 | [> Workday Design Reference](https://design.workday.com/components/indicators/banners)
--------------------------------------------------------------------------------
/modules/react/banner/index.ts:
--------------------------------------------------------------------------------
1 | export * from './lib/Banner';
2 | export * from './lib/hooks/';
3 |
--------------------------------------------------------------------------------
/modules/react/banner/lib/hooks/index.ts:
--------------------------------------------------------------------------------
1 | import {getPaletteColors} from './useThemedPalette';
2 | export * from './useBannerModel';
3 | export * from './useThemedPalette';
4 | export * from './useBannerIcon';
5 | export * from './useBannerLabel';
6 | export * from './useBannerActionText';
7 | export {getPaletteColors};
8 |
--------------------------------------------------------------------------------
/modules/react/banner/lib/hooks/useBannerActionText.tsx:
--------------------------------------------------------------------------------
1 | import {createElemPropsHook} from '@workday/canvas-kit-react/common';
2 | import {useBannerModel} from './useBannerModel';
3 |
4 | /**
5 | * Adds the necessary props to a `ActionText` component.
6 | * Used by the Banner.ActionText subcomponent
7 | */
8 | export const useBannerActionText = createElemPropsHook(useBannerModel)(({state}) => {
9 | return {
10 | id: `action-${state.id}`,
11 | };
12 | });
13 |
--------------------------------------------------------------------------------
/modules/react/banner/lib/hooks/useBannerIcon.tsx:
--------------------------------------------------------------------------------
1 | import {createElemPropsHook} from '@workday/canvas-kit-react/common';
2 | import {exclamationCircleIcon, exclamationTriangleIcon} from '@workday/canvas-system-icons-web';
3 | import {useBannerModel} from './useBannerModel';
4 |
5 | /**
6 | * Adds the necessary props to a `Icon` component.
7 | * Used by the Banner.Icon subcomponent
8 | */
9 | export const useBannerIcon = createElemPropsHook(useBannerModel)(({state}) => {
10 | return {
11 | icon: state.hasError ? exclamationCircleIcon : exclamationTriangleIcon,
12 | size: 24,
13 | };
14 | });
15 |
--------------------------------------------------------------------------------
/modules/react/banner/lib/hooks/useBannerLabel.tsx:
--------------------------------------------------------------------------------
1 | import {createElemPropsHook} from '@workday/canvas-kit-react/common';
2 | import {useBannerModel} from './useBannerModel';
3 |
4 | /**
5 | * Adds the necessary props to a `Label` component.
6 | * Used by the Banner.Label subcomponent
7 | */
8 | export const useBannerLabel = createElemPropsHook(useBannerModel)(({state}) => {
9 | return {
10 | id: `label-${state.id}`,
11 | };
12 | });
13 |
--------------------------------------------------------------------------------
/modules/react/banner/spec/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../../tsconfig.spec.json"
3 | }
4 |
--------------------------------------------------------------------------------
/modules/react/banner/stories/examples/ActionText.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import {Banner} from '@workday/canvas-kit-react/banner';
4 |
5 | export const ActionText = () => {
6 | return (
7 |