@workday/canvas-kit-react 6.8.9 → 6.9.0-next.5

package/ts3.5/dist/es6/tokens/lib/type/levels.d.ts

@@ -1,263 +0,0 @@
-import { typeColors } from '@workday/canvas-colors-web';
-import { CanvasFontFamilies } from './fontFamilies';
-import { CanvasFontSizes } from './fontSizes';
-import { CanvasFontWeights } from './fontWeights';
-/** ### Canvas Type Hierarchy
- * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens-tokens-react--type)
- *
- * ---
- * The hierarchy is organized into four levels, which correspond to levels defined in Figma.
- *
- * - `title`: Intended to be used for large page titles.
- * - `heading`: Intended to be used for headings and large text.
- * - `body`: Intended to be used for standard body text.
- * - `subtext`: Intended to be used for small subtext content or in tight spaces.
- *
- * Each level has three sizes: `large`, `medium`, and `small`.
- *
- * The type hierarchy tokens are recommended for most type usage.
- * These objects handle font sizes, weights, line heights, letter spacing, and color for you,
- * making it really simple to implement consistent type without much effort
- *
- * You can find more detailed information by inspecting individual levels and sizes.
- *
- * @example
- * ```tsx
- * import { type } from '@workday/canvas-kit-react/tokens';
- *
- * const Heading = () => (
- *   <h3 css={type.levels.heading.medium}>
- *     Heading Text
- *   </h3>
- * );
- * ```
- */
-export declare const levels: CanvasTypeHierarchy;
-export declare type CanvasTypeHierarchy = {
-    /** ### Title Type Level
-     * [View Storybook Docs](https://github.workday.io/canvas-kit/)
-     *
-     * ---
-     * The `title` level is intended to be used for large page titles.
-     * It has three sizes: `small`, `medium`, and `large`.
-     * Here's a quick reference for font-sizes and weights:
-     *
-     * - `large`: font-size: 56px (3/5rem), font-weight: bold (700)
-     * - `medium`: font-size: 48px (3rem), font-weight: bold (700)
-     * - `small`: font-size: 40px (2.5rem), font-weight: bold (700)
-     *
-     * You can find more detailed styled information by inspecting individual sizes.
-     *
-     * Below is an example:
-     *
-     * @example
-     * import { type } from '@workday/canvas-kit-react/tokens'
-     *
-     * const Title = () => (
-     *   <h1 css={type.levels.title.medium}>Title Text</h2>
-     * );
-     *
-     */
-    title: CanvasTypeTitleLevel;
-    /** ### Heading Type Level
-     * [View Storybook Docs](https://github.workday.io/canvas-kit/)
-     *
-     * ---
-     * The `heading` level is intended to be used for headings and large text.
-     * It has three sizes: `small`, `medium`, and `large`.
-     * Here's a quick reference for font-sizes and weights:
-     *
-     * - `large`: font-size: 32px (2rem), font-weight: bold (700)
-     * - `medium`: font-size: 28px (1.75rem), font-weight: bold (700)
-     * - `small`: font-size: 24px (1.5rem), font-weight: bold (700)
-     *
-     * You can find more detailed styled information by inspecting individual sizes.
-     *
-     * Below is an example:
-     *
-     * @example
-     * import { type } from '@workday/canvas-kit-react/tokens'
-     *
-     * const Heading = () => (
-     *   <h2 css={type.levels.heading.medium}>Heading Text</h2>
-     * );
-     *
-     */
-    heading: CanvasTypeHeadingLevel;
-    /** ### Body Type Level
-     * [View Storybook Docs](https://github.workday.io/canvas-kit/)
-     *
-     * ---
-     * The `body` level is intended to be used for standard body text.
-     * It has three sizes: `small`, `medium`, and `large`.
-     * Here's a quick reference for font-sizes and weights:
-     *
-     * - `large`: font-size: 20px (1.25rem), font-weight: regular (400)
-     * - `medium`: font-size: 18px (1.125rem), font-weight: regular (400)
-     * - `small`: font-size: 16px (1rem), font-weight: regular (400)
-     *
-     * You can find more detailed styled information by inspecting individual sizes.
-     *
-     * Below is an example:
-     *
-     * @example
-     * import { type } from '@workday/canvas-kit-react/tokens'
-     *
-     * const Body = () => (
-     *   <p css={type.levels.body.medium}>Body text</p>
-     * );
-     *
-     * */
-    body: CanvasTypeBodyLevel;
-    /** ### Subtext Type Level
-     * [View Storybook Docs](https://github.workday.io/canvas-kit/)
-     *
-     * ---
-     * The `subtext` level is intended to be used for small subtext content or in tight spaces.
-     * It has three sizes: `small`, `medium`, and `large`.
-     * Here's a quick reference for font-sizes and weights:
-     *
-     * - `large`: font-size: 14px (0.875rem), font-weight: regular (400)
-     * - `medium`: font-size: 12px (0.75rem), font-weight: regular (400)
-     * - `small`: font-size: 10px (0.625rem), font-weight: regular (400)
-     *
-     * You can find more detailed styled information by inspecting individual sizes.
-     *
-     * Below is an example:
-     *
-     * @example
-     * import { type } from '@workday/canvas-kit-react/tokens'
-     *
-     * const Subtext = () => (
-     *   <span css={type.levels.subtext.medium}>subtext</h2>
-     * );
-     *
-     * */
-    subtext: CanvasTypeSubtextLevel;
-};
-declare type CanvasTypeTitleLevel = {
-    large: {
-        fontFamily: CanvasFontFamilies['default'];
-        /** 56px converted to base-16 rem (3.5rem)*/
-        fontSize: CanvasFontSizes[56];
-        /** 64px converted to base-16 rem (4rem) */
-        lineHeight: '4rem';
-        fontWeight: CanvasFontWeights['bold'];
-        color: typeof typeColors.heading;
-    };
-    medium: {
-        fontFamily: CanvasFontFamilies['default'];
-        /** 48px converted to base-16 rem (3rem)*/
-        fontSize: CanvasFontSizes[48];
-        /** 56px converted to base-16 rem (3.5rem) */
-        lineHeight: '3.5rem';
-        fontWeight: CanvasFontWeights['bold'];
-        color: typeof typeColors.heading;
-    };
-    small: {
-        fontFamily: CanvasFontFamilies['default'];
-        /** 40px converted to base-16 rem (2.5rem)*/
-        fontSize: CanvasFontSizes[40];
-        /** 48px converted to base-16 rem (3rem) */
-        lineHeight: '3rem';
-        fontWeight: CanvasFontWeights['bold'];
-        color: typeof typeColors.heading;
-    };
-};
-declare type CanvasTypeHeadingLevel = {
-    large: {
-        fontFamily: CanvasFontFamilies['default'];
-        /** 32px converted to base-16 rem (2rem)*/
-        fontSize: CanvasFontSizes[32];
-        /** 40px converted to base-16 rem (2.5rem) */
-        lineHeight: '2.5rem';
-        fontWeight: CanvasFontWeights['bold'];
-        color: typeof typeColors.heading;
-    };
-    medium: {
-        fontFamily: CanvasFontFamilies['default'];
-        /** 28px converted to base-16 rem (1.75rem)*/
-        fontSize: CanvasFontSizes[28];
-        /** 36px converted to base-16 rem (2.25rem) */
-        lineHeight: '2.25rem';
-        fontWeight: CanvasFontWeights['bold'];
-        color: typeof typeColors.heading;
-    };
-    small: {
-        fontFamily: CanvasFontFamilies['default'];
-        /** 24px converted to base-16 rem (1.5rem)*/
-        fontSize: CanvasFontSizes[24];
-        /** 32px converted to base-16 rem (2rem) */
-        lineHeight: '2rem';
-        fontWeight: CanvasFontWeights['bold'];
-        color: typeof typeColors.heading;
-    };
-};
-declare type CanvasTypeBodyLevel = {
-    large: {
-        fontFamily: CanvasFontFamilies['default'];
-        /** 20px converted to base-16 rem (1.25rem)*/
-        fontSize: CanvasFontSizes[20];
-        /** 28px converted to base-16 rem (1.75rem) */
-        lineHeight: '1.75rem';
-        fontWeight: CanvasFontWeights['regular'];
-        color: typeof typeColors.body;
-    };
-    medium: {
-        fontFamily: CanvasFontFamilies['default'];
-        /** 18px converted to base-16 rem (1.125rem)*/
-        fontSize: CanvasFontSizes[18];
-        /** 28px converted to base-16 rem (1.75rem) */
-        lineHeight: '1.75rem';
-        fontWeight: CanvasFontWeights['regular'];
-        color: typeof typeColors.body;
-    };
-    small: {
-        fontFamily: CanvasFontFamilies['default'];
-        /** 16px converted to base-16 rem (1rem)*/
-        fontSize: CanvasFontSizes[16];
-        /** 24px converted to base-16 rem (1.5rem) */
-        lineHeight: '1.5rem';
-        /** 0.16px converted to base-16 rem (0.01rem) */
-        letterSpacing: '0.01rem';
-        fontWeight: CanvasFontWeights['regular'];
-        color: typeof typeColors.body;
-    };
-};
-declare type CanvasTypeSubtextLevel = {
-    large: {
-        fontFamily: CanvasFontFamilies['default'];
-        /** 14px converted to base-16 rem (0.875rem)*/
-        fontSize: CanvasFontSizes[14];
-        /** 20px converted to base-16 rem (1.25rem) */
-        lineHeight: '1.25rem';
-        /** 0.24px converted to base-16 rem (0.015rem) */
-        letterSpacing: '0.015rem';
-        fontWeight: CanvasFontWeights['regular'];
-        color: typeof typeColors.body;
-    };
-    medium: {
-        fontFamily: CanvasFontFamilies['default'];
-        /** 12px converted to base-16 rem (0.75rem)*/
-        fontSize: CanvasFontSizes[12];
-        /** 16px converted to base-16 rem (1rem) */
-        lineHeight: '1rem';
-        /** 0.32px converted to base-16 rem (0.02rem) */
-        letterSpacing: '0.02rem';
-        fontWeight: CanvasFontWeights['regular'];
-        color: typeof typeColors.body;
-    };
-    small: {
-        fontFamily: CanvasFontFamilies['default'];
-        /** 10px converted to base-16 rem (0.625rem)*/
-        fontSize: CanvasFontSizes[10];
-        /** 16px converted to base-16 rem (1rem) */
-        lineHeight: '1rem';
-        /** 0.4px converted to base-16 rem (0.025rem) */
-        letterSpacing: '0.025rem';
-        fontWeight: CanvasFontWeights['regular'];
-        color: typeof typeColors.body;
-    };
-};
-export {};
-//# sourceMappingURL=levels.d.ts.map

package/ts3.5/dist/es6/tokens/lib/type/variants.d.ts

@@ -1,53 +0,0 @@
-import { typeColors, statusColors } from '@workday/canvas-colors-web';
-/** ### Canvas Type Variants
- * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens-tokens-react--type)
- *
- * ---
- * There are three type variants:
- *
- * - `error` Used for making errors more visible
- * - `hint` Used for help text and secondary content
- * - `inverse` Used for any text on a dark or colored background
- *
- * Type variants provide modifiers for text styles.
- * They are typically used in conjunction with other type styles
- * such as the type hierarchy and type properties tokens.
- * You can find more detailed information by inspecting individual variants.
- *
- * @example
- * ```tsx
- * import { type } from '@workday/canvas-kit-react/tokens';
- *
- * const ErrorText = () => (
- *   <span css={{ ...type.levels.subtext.small, ...type.variants.error}}>
- *     Error Text
- *   </span>
- * );
- * ```
- */
-export declare const variants: CanvasTypeVariants;
-export declare type CanvasTypeVariants = {
-    /**
-     * - Sets color to Cinnamon 500
-     * - Used for making errors more visible
-     */
-    error: {
-        color: typeof statusColors.error;
-    };
-    /**
-     * - Sets color to Licorice 300
-     * - Used for help text and secondary content
-     */
-    hint: {
-        color: typeof typeColors.hint;
-    };
-    /**
-     * - Sets color to FrenchVanilla 100
-     * - Used for any text on a dark or colored background
-     * - Please consider a11y and color contrast when using white text.
-     */
-    inverse: {
-        color: typeof typeColors.inverse;
-    };
-};
-//# sourceMappingURL=variants.d.ts.map

package/ts3.5/dist/es6/tokens/lib/types.d.ts

@@ -1,4 +0,0 @@
-import { CSSProperties as RCP } from 'react';
-import { CSSObject } from '@emotion/core';
-export declare type CSSProperties = RCP & CSSObject;
-//# sourceMappingURL=types.d.ts.map

package/ts3.5/dist/es6/tooltip/index.d.ts

@@ -1,7 +0,0 @@
-import { Tooltip } from './lib/Tooltip';
-export default Tooltip;
-export * from './lib/Tooltip';
-export * from './lib/OverflowTooltip';
-export * from './lib/TooltipContainer';
-export * from './lib/useTooltip';
-//# sourceMappingURL=index.d.ts.map

package/ts3.5/dist/es6/tooltip/lib/OverflowTooltip.d.ts

@@ -1,30 +0,0 @@
-import * as React from 'react';
-import { Placement } from '@workday/canvas-kit-react/popup';
-/**
- * Look for an element within the tree for an overflow element (auto, scroll, clip, or hidden).
- * This could be the passed element, or a descendant. If no element is found, `null` is returned.
- */
-export declare const findOverflowElement: (element: Element) => Element | null;
-/**
- * Look for an element within the tree for a `text-overflow` CSS property of `ellipsis`.
- * This could be the passed element, or a descendant. If no element is found, `null` is returned.
- */
-export declare const findEllipsisElement: (element: Element) => Element | null;
-export interface OverflowTooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
-    /**
-     * The target (anchor element) for the Tooltip.
-     *
-     * **Note:** This **must** be a single Element, StyledComponent, or any other component that
-     * forwards extra props to an Element. Tooltip works running `React.cloneElement` on the children
-     * and adds extra properties like aria attributes and event handlers. This is currently a
-     * limitation of the Tooltip component. Functionality will not work if this condition isn't met.
-     */
-    children: React.ReactElement<any>;
-    /**
-     * Sets the placement preference used by PopperJS.
-     * @default 'top'
-     */
-    placement?: Placement;
-}
-export declare const OverflowTooltip: ({ placement, children, ...elemProps }: OverflowTooltipProps) => JSX.Element;
-//# sourceMappingURL=OverflowTooltip.d.ts.map

package/ts3.5/dist/es6/tooltip/lib/Tooltip.d.ts

@@ -1,50 +0,0 @@
-import * as React from 'react';
-import { Placement } from '@workday/canvas-kit-react/popup';
-export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
-    /**
-     * This should be a string in most cases. HTML is supported, but only text is understood
-     * by assistive technology. This is true for both `label` and `describe` modes.
-     */
-    title: React.ReactNode;
-    /**
-     * The target (anchor element) for the Tooltip.
-     *
-     * **Note:** This **must** be a single Element, StyledComponent, or any other component that
-     * forwards extra props to an Element. Tooltip works running `React.cloneElement` on the children
-     * and adds extra properties like aria attributes and event handlers. This is currently a
-     * limitation of the Tooltip component. Functionality will not work if this condition isn't met.
-     */
-    children: React.ReactElement<any>;
-    /**
-     * Sets the placement preference used by PopperJS.
-     * @default 'top'
-     */
-    placement?: Placement;
-    /**
-     * Determines the tooltip type for accessibility.
-     *
-     * - `label`: Sets the accessible name for the wrapped element. Use for icons or if tooltip
-     *   `title` prop is the same as the text content of the wrapped element. E.g. IconButtons or
-     *   Ellipsis tooltips.
-     * - `describe`: Sets `aria-describedby` of the wrapped element. Use if the tooltip has additional
-     *   information about the target.
-     * - `muted`: No effort is made to make the tooltip accessible to screen readers. Use if the
-     *   tooltip contents are not useful to a screen reader or if you have handled accessibility of
-     *   the tooltip yourself.
-     *
-     * **Note**: Assistive technology may ignore `describe` techniques based on verbosity settings.
-     * Consider an alternate way to inform a user of additional important information.
-     * @default 'label'
-     */
-    type?: 'label' | 'describe' | 'muted';
-    /**
-     * Amount of time (in ms) to delay before showing the tooltip
-     */
-    showDelay?: number;
-    /**
-     * Amount of time (in ms) to delay before hiding the tooltip
-     */
-    hideDelay?: number;
-}
-export declare const Tooltip: ({ type, placement, title, children, showDelay, hideDelay, ...elemProps }: TooltipProps) => JSX.Element;
-//# sourceMappingURL=Tooltip.d.ts.map

package/ts3.5/dist/es6/tooltip/lib/TooltipContainer.d.ts

@@ -1,23 +0,0 @@
-import * as React from 'react';
-import { TransformOrigin } from '@workday/canvas-kit-react/common';
-export interface TooltipContainerProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * The origin from which the Tooltip will animate. Pass in `null` for no animation
-     * @default {horizontal: 'center', vertical: 'top'}
-     */
-    transformOrigin?: TransformOrigin | null;
-    /**
-     * HTML id of the tooltip container - useful for accessibility.
-     * Should link the tooltip container to a `aria-describedby` on the target
-     */
-    id?: string;
-    /**
-     * optional popper properties if `placement` is set
-     */
-    popperProps?: {
-        open: boolean;
-        anchorElement: HTMLElement | null;
-    };
-}
-export declare const TooltipContainer: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TooltipContainerProps, object>;
-//# sourceMappingURL=TooltipContainer.d.ts.map

package/ts3.5/dist/es6/tooltip/lib/useTooltip.d.ts

@@ -1,61 +0,0 @@
-import * as React from 'react';
-/**
- * Convenience hook for creating components with tooltips. It will return an object of properties to mix
- * into a target, popper and tooltip
- */
-export declare function useTooltip<T extends Element = Element>({ type, titleText, showDelay, hideDelay, }?: {
-    /**
-     * Determines the tooltip type for accessibility.
-     *
-     * - `label`: Sets the accessible name for the wrapped element. Use for icons or if tooltip
-     *   `title` prop is the same as the text content of the wrapped element. E.g. IconButtons or
-     *   Ellipsis tooltips.
-     * - `describe`: Sets `aria-describedby` of the wrapped element. Use if the tooltip has additional
-     *   information about the target.
-     * - `muted`: No effort is made to make the tooltip accessible to screen readers. Use if the
-     *   tooltip contents are not useful to a screen reader or if you have handled accessibility of
-     *   the tooltip yourself.
-     *
-     * **Note**: Assistive technology may ignore `describe` techniques based on verbosity settings.
-     * Consider an alternate way to inform a user of additional important information.
-     * @default 'label'
-     */
-    type?: 'label' | 'describe' | 'muted';
-    /**
-     * The content of the `aria-label` if `type` is `label.
-     */
-    titleText?: string;
-    /**
-     * Amount of time (in ms) to delay before showing the tooltip
-     */
-    showDelay?: number;
-    /**
-     * Amount of time (in ms) to delay before hiding the tooltip
-     */
-    hideDelay?: number;
-}): {
-    /** Mix these properties into the target element. **Must be an Element** */
-    targetProps: {
-        'aria-describedby': string | undefined;
-        'aria-label': string | undefined;
-        onMouseEnter: (event: React.SyntheticEvent<Element, Event>) => void;
-        onMouseLeave: () => void;
-        onMouseDown: (event: React.MouseEvent<Element, MouseEvent>) => void;
-        onFocus: (event: React.FocusEvent<Element, Element>) => void;
-        onBlur: () => void;
-    };
-    /** Mix these properties into the `Popper` component */
-    popperProps: {
-        open: boolean;
-        anchorElement: T | null;
-        ref: React.RefObject<HTMLDivElement>;
-    };
-    /** Mix these properties into the `TooltipContainer` component */
-    tooltipProps: {
-        id: string | undefined;
-        role: string;
-        onMouseEnter: () => void;
-        onMouseLeave: () => void;
-    };
-};
-//# sourceMappingURL=useTooltip.d.ts.map