@workday/canvas-kit-react 9.0.0-alpha.368-next.6 → 9.0.0-alpha.382-next.2

package/dist/es6/button/lib/deprecated_Button.js

@@ -1,30 +1,8 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import * as React from 'react';
 import { canvas, borderRadius, type } from '@workday/canvas-kit-react/tokens';
 import { focusRing, mouseFocusBehavior, createComponent, } from '@workday/canvas-kit-react/common';
 import styled from '@emotion/styled';
-var Container = styled('button')({
+const Container = styled('button')({
     fontFamily: type.properties.fontFamilies.default,
     fontSize: 14,
     fontWeight: 500,
@@ -42,13 +20,12 @@ var Container = styled('button')({
     // Makes the "down" state of the button happens faster than the hover state, so it animates in correctly.
     '&:hover:active': { transitionDuration: '40ms' },
     '&:disabled, &:disabled:active': { cursor: 'default', boxShadow: 'none' },
-}, function (_a) {
-    var size = _a.size;
+}, ({ size }) => {
     switch (size) {
         case 'large':
             return {
                 height: '40px',
-                padding: "0 " + canvas.space.l,
+                padding: `0 ${canvas.space.l}`,
                 minWidth: '112px',
                 maxWidth: '288px',
             };
@@ -56,7 +33,7 @@ var Container = styled('button')({
         default:
             return {
                 height: '24px',
-                padding: "0 " + canvas.space.m,
+                padding: `0 ${canvas.space.m}`,
                 minWidth: '80px',
                 maxWidth: '200px',
                 fontSize: 13, // hardcoded value to prevent shifting from type changes
@@ -64,19 +41,15 @@ var Container = styled('button')({
         case 'small':
             return {
                 height: '18px',
-                padding: "0 " + canvas.space.xxs,
+                padding: `0 ${canvas.space.xxs}`,
                 minWidth: '56px',
                 maxWidth: '120px',
                 fontSize: 10,
                 lineHeight: 'normal',
             };
     }
-}, function (_a) {
-    var grow = _a.grow;
-    return grow && { width: '100%', maxWidth: '100%' };
-}, function (_a) {
-    var variant = _a.variant;
-    var buttonColors;
+}, ({ grow }) => grow && { width: '100%', maxWidth: '100%' }, ({ variant }) => {
+    let buttonColors;
     switch (variant) {
         case 'primary':
             buttonColors = canvas.buttonColors.primary;
@@ -86,53 +59,77 @@ var Container = styled('button')({
             buttonColors = canvas.buttonColors.secondary;
             break;
         case 'delete':
-            buttonColors = __assign(__assign({}, canvas.buttonColors.delete), { focusBorder: canvas.colors.cinnamon500, activeBorder: canvas.colors.cinnamon500 });
+            buttonColors = {
+                ...canvas.buttonColors.delete,
+                focusBorder: canvas.colors.cinnamon500,
+                activeBorder: canvas.colors.cinnamon500,
+            };
             break;
     }
     if (!buttonColors) {
         return {};
     }
-    var baseStyles = {
+    const baseStyles = {
         backgroundColor: buttonColors.background,
         borderColor: buttonColors.border,
         color: buttonColors.text,
     };
-    var hoverStyles = {
+    const hoverStyles = {
         ':hover': {
             backgroundColor: buttonColors.hoverBackground,
             borderColor: buttonColors.hoverBorder,
             color: buttonColors.hoverText,
         },
     };
-    var activeStyles = {
+    const activeStyles = {
         ':active, :focus:active, :hover:active': {
             backgroundColor: buttonColors.activeBackground,
             borderColor: buttonColors.activeBorder,
             color: buttonColors.activeText,
         },
     };
-    return __assign(__assign(__assign(__assign(__assign(__assign({}, baseStyles), { ':focus': {
+    return {
+        ...baseStyles,
+        ':focus': {
             backgroundColor: buttonColors.focusBackground,
             borderColor: buttonColors.focusBorder,
             color: buttonColors.focusText,
-        } }), activeStyles), hoverStyles), { ':disabled, :active:disabled, :focus:disabled, :hover:disabled': {
+        },
+        ...activeStyles,
+        ...hoverStyles,
+        ':disabled, :active:disabled, :focus:disabled, :hover:disabled': {
             backgroundColor: buttonColors.disabledBackground,
             borderColor: buttonColors.disabledBorder,
             color: buttonColors.disabledText,
-        }, '&:not([disabled])': {
-            '&:focus': __assign({ borderColor: buttonColors.focusBorder }, focusRing()),
-            '&:active': __assign({ borderColor: buttonColors.activeBorder }, focusRing()),
-        } }), mouseFocusBehavior({
-        '&:focus': __assign(__assign(__assign(__assign({}, baseStyles), { outline: 'none', boxShadow: 'none', animation: 'none' }), hoverStyles), activeStyles),
-    }));
+        },
+        '&:not([disabled])': {
+            '&:focus': {
+                borderColor: buttonColors.focusBorder,
+                ...focusRing(),
+            },
+            '&:active': {
+                borderColor: buttonColors.activeBorder,
+                ...focusRing(),
+            },
+        },
+        ...mouseFocusBehavior({
+            '&:focus': {
+                ...baseStyles,
+                outline: 'none',
+                boxShadow: 'none',
+                animation: 'none',
+                ...hoverStyles,
+                ...activeStyles,
+            },
+        }),
+    };
 });
-export var DeprecatedButton = createComponent('button')({
+export const DeprecatedButton = createComponent('button')({
     displayName: 'DeprecatedButton',
-    Component: function (_a, ref, Element) {
-        var _b = _a.variant, variant = _b === void 0 ? 'secondary' : _b, _c = _a.size, size = _c === void 0 ? 'large' : _c, children = _a.children, elemProps = __rest(_a, ["variant", "size", "children"]);
-        React.useEffect(function () {
+    Component: ({ variant = 'secondary', size = 'large', children, ...elemProps }, ref, Element) => {
+        React.useEffect(() => {
             console.warn('This component is now deprecated, consider using the new Button component');
         }, []);
-        return (React.createElement(Container, __assign({ ref: ref, as: Element, variant: variant, size: size }, elemProps), children));
+        return (React.createElement(Container, Object.assign({ ref: ref, as: Element, variant: variant, size: size }, elemProps), children));
     },
 });

package/dist/es6/button/lib/parts/ButtonLabel.js

@@ -1,38 +1,15 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from 'react';
 import { styled, createComponent } from '@workday/canvas-kit-react/common';
 import { Box } from '@workday/canvas-kit-react/layout';
-var StyledButtonLabel = styled(Box.as('span'))({
+const StyledButtonLabel = styled(Box.as('span'))({
     position: 'relative',
     textOverflow: 'ellipsis',
     overflow: 'hidden',
     whiteSpace: 'nowrap',
 });
-export var ButtonLabel = createComponent('span')({
+export const ButtonLabel = createComponent('span')({
     displayName: 'ButtonLabel',
-    Component: function (_a, ref, Element) {
-        var children = _a.children, elemProps = __rest(_a, ["children"]);
-        return (React.createElement(StyledButtonLabel, __assign({ as: Element, ref: ref }, elemProps), children));
+    Component: ({ children, ...elemProps }, ref, Element) => {
+        return (React.createElement(StyledButtonLabel, Object.assign({ as: Element, ref: ref }, elemProps), children));
     },
 });

package/dist/es6/button/lib/parts/ButtonLabelIcon.js

@@ -1,42 +1,19 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from 'react';
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { SystemIcon } from '@workday/canvas-kit-react/icon';
-var iconSizes = {
+const iconSizes = {
     extraSmall: 18,
     small: 20,
     medium: 20,
     large: 24,
 };
-export var ButtonLabelIcon = createComponent('span')({
+export const ButtonLabelIcon = createComponent('span')({
     displayName: 'ButtonLabelIconNew',
-    Component: function (_a, ref, Element) {
-        var icon = _a.icon, _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.shouldMirrorIcon, shouldMirrorIcon = _c === void 0 ? false : _c, elemProps = __rest(_a, ["icon", "size", "shouldMirrorIcon"]);
+    Component: ({ icon, size = 'medium', shouldMirrorIcon = false, ...elemProps }, ref, Element) => {
         if (icon === undefined) {
             return null;
         }
-        var iconSize = iconSizes[size];
-        return (React.createElement(SystemIcon, __assign({ size: iconSize, icon: icon, shouldMirror: shouldMirrorIcon, width: size ? iconSizes[size] : iconSizes.large, height: size ? iconSizes[size] : iconSizes.large, display: "inline-block" }, elemProps)));
+        const iconSize = iconSizes[size];
+        return (React.createElement(SystemIcon, Object.assign({ size: iconSize, icon: icon, shouldMirror: shouldMirrorIcon, width: size ? iconSizes[size] : iconSizes.large, height: size ? iconSizes[size] : iconSizes.large, display: "inline-block" }, elemProps)));
     },
 });

package/dist/es6/card/lib/Card.js

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import * as React from 'react';
 import { colors } from '@workday/canvas-kit-react/tokens';
 import { createComponent } from '@workday/canvas-kit-react/common';
@@ -38,11 +16,10 @@ import { CardBody } from './CardBody';
  * disabilities. Semantic container elements like `<section>`, or using `<li>` grouped together in a
  * common `<ul>` can be a useful way to elevate the accessibility of your design.
  */
-export var Card = createComponent('div')({
+export const Card = createComponent('div')({
     displayName: 'Card',
-    Component: function (_a, ref, Element) {
-        var children = _a.children, elemProps = __rest(_a, ["children"]);
-        return (React.createElement(Box, __assign({ ref: ref, as: Element, depth: 1, padding: "l", backgroundColor: "frenchVanilla100", border: "1px solid " + colors.soap500, borderRadius: "l" }, elemProps), children));
+    Component: ({ children, ...elemProps }, ref, Element) => {
+        return (React.createElement(Box, Object.assign({ ref: ref, as: Element, depth: 1, padding: "l", backgroundColor: "frenchVanilla100", border: `1px solid ${colors.soap500}`, borderRadius: "l" }, elemProps), children));
     },
     subComponents: {
         /**

package/dist/es6/card/lib/CardBody.js

@@ -1,33 +1,10 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import * as React from 'react';
 import { type } from '@workday/canvas-kit-react/tokens';
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { Box } from '@workday/canvas-kit-react/layout';
-export var CardBody = createComponent('div')({
+export const CardBody = createComponent('div')({
     displayName: 'Card.Body',
-    Component: function (_a, ref, Element) {
-        var children = _a.children, elemProps = __rest(_a, ["children"]);
-        return (React.createElement(Box, __assign({ ref: ref, as: Element }, type.levels.subtext.large, elemProps), children));
+    Component: ({ children, ...elemProps }, ref, Element) => {
+        return (React.createElement(Box, Object.assign({ ref: ref, as: Element }, type.levels.subtext.large, elemProps), children));
     },
 });

package/dist/es6/card/lib/CardHeading.js

@@ -1,32 +1,9 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import * as React from 'react';
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { Text } from '@workday/canvas-kit-react/text';
-export var CardHeading = createComponent('h3')({
+export const CardHeading = createComponent('h3')({
     displayName: 'Card.Heading',
-    Component: function (_a, ref, Element) {
-        var children = _a.children, elemProps = __rest(_a, ["children"]);
-        return (React.createElement(Text, __assign({ ref: ref, typeLevel: "body.large", fontWeight: "bold", marginBottom: "m", marginTop: 0, as: Element }, elemProps), children));
+    Component: ({ children, ...elemProps }, ref, Element) => {
+        return (React.createElement(Text, Object.assign({ ref: ref, typeLevel: "body.large", fontWeight: "bold", marginBottom: "m", marginTop: 0, as: Element }, elemProps), children));
     },
 });