@workday/canvas-kit-react 7.0.0-alpha.0-next.3 → 7.0.0-alpha.0-next.7

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

@@ -19,5 +19,8 @@ export interface TooltipContainerProps extends React.HTMLAttributes<HTMLDivEleme
         anchorElement: HTMLElement | null;
     };
 }
-export declare const TooltipContainer: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TooltipContainerProps, object>;
+export declare const TooltipContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: "symbol" | "object" | "button" | "meter" | "textarea" | "style" | "progress" | "text" | "ruby" | "table" | "small" | "sub" | "circle" | "embed" | "pre" | "caption" | "menu" | "menuitem" | "clipPath" | "filter" | "mask" | "marker" | "big" | "link" | "sup" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "canvas" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "map" | "mark" | "meta" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "q" | "rp" | "rt" | "s" | "samp" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "summary" | "template" | "tbody" | "td" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined;
+} & TooltipContainerProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 //# sourceMappingURL=TooltipContainer.d.ts.map

package/dist/es6/tooltip/lib/TooltipContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipContainer.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/TooltipContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,eAAe,EAAyB,MAAM,kCAAkC,CAAC;AAiBzF,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF;;;OAGG;IACH,eAAe,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACzC;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,WAAW,CAAC,EAAE;QACZ,IAAI,EAAE,OAAO,CAAC;QACd,aAAa,EAAE,WAAW,GAAG,IAAI,CAAC;KACnC,CAAC;CACH;AAOD,eAAO,MAAM,gBAAgB,8JA4D5B,CAAC"}
+{"version":3,"file":"TooltipContainer.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/TooltipContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,eAAe,EAAyB,MAAM,kCAAkC,CAAC;AAiBzF,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF;;;OAGG;IACH,eAAe,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACzC;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,WAAW,CAAC,EAAE;QACZ,IAAI,EAAE,OAAO,CAAC;QACd,aAAa,EAAE,WAAW,GAAG,IAAI,CAAC;KACnC,CAAC;CACH;AAOD,eAAO,MAAM,gBAAgB;;;6GA4D5B,CAAC"}

package/dist/es6/tooltip/lib/TooltipContainer.js

@@ -13,7 +13,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { keyframes } from '@emotion/core';
+import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
 import { borderRadius, colors, space, spaceNumbers, type } from '@workday/canvas-kit-react/tokens';
 import { getTranslateFromOrigin } from '@workday/canvas-kit-react/common';

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

@@ -38,10 +38,10 @@ export declare function useTooltip<T extends Element = Element>({ type, titleTex
     targetProps: {
         'aria-describedby': string | undefined;
         'aria-label': string | undefined;
-        onMouseEnter: (event: React.SyntheticEvent<Element, Event>) => void;
+        onMouseEnter: (event: React.SyntheticEvent) => void;
         onMouseLeave: () => void;
-        onMouseDown: (event: React.MouseEvent<Element, MouseEvent>) => void;
-        onFocus: (event: React.FocusEvent<Element, Element>) => void;
+        onMouseDown: (event: React.MouseEvent) => void;
+        onFocus: (event: React.FocusEvent) => void;
         onBlur: () => void;
     };
     /** Mix these properties into the `Popper` component */

package/dist/es6/tooltip/lib/useTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/useTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkD/B;;;GAGG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,EAAE,EACtD,IAAc,EACd,SAAc,EACd,SAAe,EACf,SAAe,GAChB,GAAE;IACD;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;IACtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACf;IA6CF,2EAA2E;;;;;;;;;;IAY3E,uDAAuD;;;;;;IAMvD,iEAAiE;;;;;;;EAQpE"}
+{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/useTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkD/B;;;GAGG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,EAAE,EACtD,IAAc,EACd,SAAc,EACd,SAAe,EACf,SAAe,GAChB,GAAE;IACD;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;IACtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACf;IA6CF,2EAA2E;;;;8BA3B5C,MAAM,cAAc;;6BAazB,gBAAgB;yBARpB,gBAAgB;;;IAkCtC,uDAAuD;;;;;;IAMvD,iEAAiE;;;;;;;EAQpE"}

package/icon/lib/AccentIcon.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {colors} from '@workday/canvas-kit-react/tokens';
 import {CanvasAccentIcon, CanvasIconTypes} from '@workday/design-assets-types';
-import {CSSObject} from '@emotion/core';
+import {CSSObject} from '@emotion/styled';
 import Icon, {IconProps} from './Icon';
 
 export interface AccentIconStyles {

package/icon/lib/AppletIcon.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {colors, BrandingColor, CanvasColor} from '@workday/canvas-kit-react/tokens';
 import {CanvasAppletIcon, CanvasIconTypes} from '@workday/design-assets-types';
-import {CSSObject} from '@emotion/core';
+import {CSSObject} from '@emotion/styled';
 import Icon, {IconProps} from './Icon';
 
 export interface AppletIconStyles {

package/icon/lib/Graphic.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {CanvasGraphic, CanvasIconTypes} from '@workday/design-assets-types';
-import {CSSObject} from '@emotion/core';
+import {CSSObject} from '@emotion/styled';
 import Svg, {SvgProps} from './Svg';
 
 export interface GraphicStyles {

package/icon/lib/Icon.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {CSSObject} from '@emotion/core';
+import {CSSObject} from '@emotion/styled';
 import {CanvasIcon, CanvasIconTypes} from '@workday/design-assets-types';
 import Svg, {SvgProps} from './Svg';
 

package/icon/lib/Svg.tsx

@@ -1,4 +1,4 @@
-import {CSSObject} from '@emotion/core';
+import {CSSObject} from '@emotion/styled';
 import * as React from 'react';
 import {CanvasIcon, CanvasIconTypes} from '@workday/design-assets-types';
 import {validateIconType} from './utils';
@@ -17,9 +17,11 @@ export interface SvgProps extends React.HTMLAttributes<HTMLSpanElement> {
 }
 
 const StyledIconSpan = styled('span')<Pick<SvgProps, 'shouldMirror' | 'styles'>>(
-  ({shouldMirror, styles}) => ({
+  {
     display: 'inline-block',
     '> svg': {display: 'block'},
+  },
+  ({shouldMirror, styles}) => ({
     transform: shouldMirror ? 'scaleX(-1)' : undefined,
     ...styles,
   })

package/icon/lib/SystemIcon.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {iconColors} from '@workday/canvas-kit-react/tokens';
 import {CanvasSystemIcon, CanvasIconTypes} from '@workday/design-assets-types';
-import {CSSObject} from '@emotion/core';
+import {CSSObject} from '@emotion/styled';
 import Icon, {IconProps} from './Icon';
 
 export interface SystemIconStyles {

package/index.ts

@@ -7,7 +7,6 @@ export * from './card';
 export * from './checkbox';
 export * from './color-picker';
 export * from './common';
-export * from './cookie-banner';
 export * from './dialog';
 export * from './disclosure';
 export * from './form-field';
@@ -15,7 +14,6 @@ export * from './icon';
 export * from './layout';
 export * from './loading-animation';
 export * from './modal';
-export * from './page-header';
 export * from './pagination';
 export * from './popup';
 export * from './radio';

package/layout/LICENSE

@@ -45,6 +45,7 @@ END OF TERMS AND CONDITIONS
 
 ©2020. Workday, Inc. All rights reserved. Workday and the Workday logo are registered trademarks of Workday, Inc. All other brand and product names are trademarks or registered trademarks of their respective holders.
 
+
 Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
 http://www.apache.org/licenses/LICENSE-2.0
 

package/layout/README.md

@@ -1,3 +1,16 @@
+# Canvas Kit React Layout
+
+A collection of layout components.
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-react/layout
+```
+
+For more detailed information on this component, please refer to the
+[storybook documentation](http://workday.github.io/canvas-kit/?path=/docs/components-containers-layout-react-column-and-layout--page-layout)
+
 # Canvas Kit Layout
 
 The layout component is used to create layouts for your application. The component comes with the
@@ -123,3 +136,21 @@ import {Layout} from '@workday/canvas-kit-react/layout';
 > The left and right padding for the column (inherits from Layout prop)
 
 Default: `12`
+
+# Flex
+
+View the
+[documentation for Flex](http://workday.github.io/canvas-kit/?path=/docs/components-containers-layout-flex--usage)
+on Storybook.
+
+# Stack
+
+View the
+[documentation for Stack](http://workday.github.io/canvas-kit/?path=/docs/components-containers-layout-stack--basic-stack)
+on Storybook.
+
+# Box
+
+View the
+[documentation for Stack](http://workday.github.io/canvas-kit/?path=/docs/components-containers-layout-box--as#box)
+on Storybook.

package/layout/index.ts

@@ -1,6 +1,16 @@
 import Layout from './lib/Layout';
 import Column from './lib/Column';
 
-export default Layout;
-export {Layout, Column};
-export * from './lib/Layout';
+export { Layout, Column};
+export * from './lib/Box';
+export * from './lib/utils/border';
+export * from './lib/utils/color';
+export {DepthStyleProps} from './lib/utils/depth';
+export * from './lib/utils/flexItem';
+export * from './lib/utils/layout';
+export * from './lib/utils/position';
+export {SpaceStyleProps} from './lib/utils/space';
+export * from './lib/Flex';
+export * from './lib/Stack';
+export type { FlexStyleProps } from './lib/utils/flex';
+export type { StackSpacing, StackDirection, StackStyleProps } from './lib/utils/stack';

package/layout/lib/Box.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+import isPropValid from '@emotion/is-prop-valid';
+import {createComponent, StyledType, useConstant} from '@workday/canvas-kit-react/common';
+
+// style props
+import {border, BorderStyleProps} from './utils/border';
+import {color, ColorStyleProps} from './utils/color';
+import {depth, DepthStyleProps} from './utils/depth';
+import {flexItem, FlexItemStyleProps} from './utils/flexItem';
+import {layout, LayoutStyleProps} from './utils/layout';
+import {other, OtherStyleProps} from './utils/other';
+import {position, PositionStyleProps} from './utils/position';
+import {space, SpaceStyleProps} from './utils/space';
+
+export type BoxProps = BorderStyleProps &
+  ColorStyleProps &
+  DepthStyleProps &
+  FlexItemStyleProps &
+  LayoutStyleProps &
+  OtherStyleProps &
+  PositionStyleProps &
+  SpaceStyleProps & {
+    children?: React.ReactNode;
+  };
+
+const omittedProps = ['display', 'color', 'height', 'overflow', 'width', 'border', 'background'];
+
+const shouldForwardProp = (prop: string) => {
+  return isPropValid(prop) && !omittedProps.includes(prop);
+};
+
+// Meant to be used with elements. The `shouldForwardProps` will remove all style props
+const StyledBoxElement = styled('div', {shouldForwardProp})<StyledType & BoxProps>(
+  {
+    boxSizing: 'border-box',
+  },
+  border,
+  color,
+  depth,
+  flexItem,
+  layout,
+  position,
+  space
+);
+
+// Meant to be used with components. There is no `shouldForwardProps` - all props will be forwarded to the component
+const StyledBoxComponent = styled('div')<StyledType & BoxProps>(
+  {
+    boxSizing: 'border-box',
+  },
+  border,
+  color,
+  depth,
+  flexItem,
+  layout,
+  other,
+  position,
+  space
+);
+
+/**
+ * `Box` is a primitive component that provides a common, ergonomic API around Canvas design tokens.
+ * It is highly flexible, and its primary purpose is to build other components.
+ *
+ * @example
+ * import { Box, BoxProps } from '@workday/canvas-kit-react/layout';
+ *
+ * interface CardProps extends BoxProps {
+ *   // card-specific props
+ * }
+ *
+ * // `Card`'s default values are set using `BoxProps`
+ * const Card = (props: CardProps) => (
+ *   <Box depth={2} padding="m" borderRadius="l" {...props}>Hello, Card!</Box>
+ * );
+ *
+ */
+export const Box = createComponent('div')({
+  displayName: 'Box',
+  Component: ({children, ...elemProps}: BoxProps, ref, Element) => {
+    const BoxComponent = useConstant(() =>
+      typeof Element === 'string' ? StyledBoxElement : StyledBoxComponent
+    );
+
+    return (
+      <BoxComponent as={Element} ref={ref} {...elemProps}>
+        {children}
+      </BoxComponent>
+    );
+  },
+});

package/layout/lib/Flex.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+import {createComponent, StyledType} from '@workday/canvas-kit-react/common';
+import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
+
+import {flex, FlexStyleProps} from './utils/flex';
+
+export type FlexProps = BoxProps & FlexStyleProps;
+
+const StyledFlex = styled(Box)<StyledType & FlexProps>(
+  {
+    display: 'flex',
+  },
+  flex
+);
+
+/**
+ * `Flex` is a low-level layout component that provides a common, ergonomic API for applying CSS flexbox styles.
+ * It is highly flexible, and can be used on its own or to build other components.
+ * `Flex` is built on top of `Box` and has access to all `BoxProps`.
+ *
+ * @example
+ * import { Flex, FlexProps } from '@workday/canvas-kit-react/layout';
+ *
+ * interface CardProps extends FlexProps {
+ *   // card-specific props
+ * }
+ *
+ * // `Card`'s default values are set using `FlexProps`
+ * const Card = (props: CardProps) => (
+ *   <Flex flexDirection="column" alignItems="flex-start" depth={2} space="m" {...props}>
+ *     <h1>Hello, Card!</h1>
+ *     <p>This card uses flexbox to set its layout.</p>
+ *   </Flex>
+ * );
+ *
+ */
+export const Flex = createComponent('div')({
+  displayName: 'Flex',
+  Component: ({children, ...elemProps}: FlexProps, ref, Element) => {
+    return (
+      <StyledFlex as={Element} ref={ref} {...elemProps}>
+        {children}
+      </StyledFlex>
+    );
+  },
+});

package/layout/lib/Stack.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+import {createComponent, StyledType} from '@workday/canvas-kit-react/common';
+import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
+import {Flex, FlexProps} from './Flex';
+import {getValidChildren} from './utils/getValidChildren';
+import {stack, StackStyleProps} from './utils/stack';
+
+export type StackProps = FlexProps & StackStyleProps;
+
+const StackItem = createComponent('div')({
+  displayName: 'Stack.Item',
+  Component: ({children, ...elemProps}: BoxProps, ref, Element) => {
+    return (
+      <Box
+        as={Element}
+        ref={ref}
+        display="inline-block"
+        flex="0 0 auto"
+        minWidth={0}
+        {...elemProps}
+      >
+        {children}
+      </Box>
+    );
+  },
+});
+
+// prevent `spacing` prop from being passed through to the HTML element
+const shouldForwardProp = (prop: string) => {
+  return prop !== 'spacing';
+};
+
+const StyledStack = styled(Flex, {shouldForwardProp})<StyledType & StackProps>(stack);
+
+export const Stack = createComponent('div')({
+  displayName: 'Stack',
+  Component: ({children, shouldWrapChildren = false, ...elemProps}: StackProps, ref, Element) => {
+    const validChildren = getValidChildren(children);
+    return (
+      <StyledStack as={Element} ref={ref} flexDirection="row" {...elemProps}>
+        {shouldWrapChildren
+          ? validChildren.map(child => <StackItem>{child}</StackItem>)
+          : validChildren}
+      </StyledStack>
+    );
+  },
+  subComponents: {
+    Item: StackItem,
+  },
+});
+
+export interface HStackProps extends StackProps {
+  /**
+   * sets the direction for the stack
+   * @default "row"
+   * */
+  flexDirection?: 'row' | 'row-reverse';
+}
+
+export const HStack = createComponent('div')({
+  displayName: 'HStack',
+  Component: ({children, ...elemProps}: HStackProps, ref, Element) => {
+    return (
+      <Stack as={Element} ref={ref} flexDirection="row" {...elemProps}>
+        {children}
+      </Stack>
+    );
+  },
+  subComponents: {
+    Item: StackItem,
+  },
+});
+
+export interface VStackProps extends StackProps {
+  /**
+   * sets the direction for the stack
+   * @default "column"
+   * */
+  flexDirection?: 'column' | 'column-reverse';
+}
+
+export const VStack = createComponent('div')({
+  displayName: 'VStack',
+  Component: ({children, ...elemProps}: VStackProps, ref, Element) => {
+    return (
+      <Stack as={Element} ref={ref} flexDirection="column" {...elemProps}>
+        {children}
+      </Stack>
+    );
+  },
+  subComponents: {
+    Item: StackItem,
+  },
+});