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

package/banner/lib/hooks/useThemedPalette.ts

@@ -0,0 +1,53 @@
+import {CanvasThemePalette, EmotionCanvasTheme, useTheme} from '@workday/canvas-kit-react/common';
+import {colors} from '@workday/canvas-kit-react/tokens';
+import chroma from 'chroma-js';
+
+type paletteSelection = Exclude<keyof EmotionCanvasTheme['canvas']['palette'], 'common'>;
+
+interface BackgroundColors {
+  normal?: string;
+  hover?: string;
+  contrast?: string;
+}
+
+const isAccessible = (foreground: string, background: string) => {
+  return chroma.contrast(foreground, background) >= 3;
+};
+
+const getPaletteColorsFromTheme = (
+  palette: CanvasThemePalette,
+  fallbackColors?: BackgroundColors
+): BackgroundColors => {
+  return {
+    hover: palette.dark,
+    normal: palette.main,
+    contrast: isAccessible(palette.contrast, palette.main)
+      ? palette.contrast
+      : fallbackColors?.contrast,
+  };
+};
+
+export function getPaletteColors(
+  type: paletteSelection,
+  theme: EmotionCanvasTheme
+): BackgroundColors {
+  const palette = theme.canvas.palette[type];
+
+  switch (type) {
+    case 'error': {
+      return getPaletteColorsFromTheme(palette, {contrast: colors.frenchVanilla100});
+    }
+    case 'alert': {
+      return getPaletteColorsFromTheme(palette, {contrast: colors.blackPepper400});
+    }
+    default: {
+      return getPaletteColorsFromTheme(palette);
+    }
+  }
+}
+
+export const useThemedPalette = (type: paletteSelection) => {
+  const theme = useTheme();
+
+  return getPaletteColors(type, theme);
+};

package/button/lib/IconButton.tsx

@@ -14,9 +14,12 @@ import {ButtonContainer} from './parts';
 
 export interface IconButtonProps extends Themeable {
   /**
-   * The accessibility label to indicate the action triggered by clicking the IconButton.
+   * The accessibility label to indicate the action triggered by clicking the IconButton. This is optional because there are
+   * instances where an Icon Button might already have an `aria-labelledby`. In a case where an `aria-labelledby` is provided
+   * it will take precedence over the `aria-label` as explained here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute
+   * We highly encourage consumers to either provide an `aria-label` OR an `aria-labelledby`
    */
-  'aria-label': string;
+  'aria-label'?: string;
   /**
    * The type of the IconButton.
    * @default 'circle'

package/common/lib/styles/hideMouseFocus.ts

@@ -1,10 +1,11 @@
-import {CSSObject, Interpolation} from '@emotion/core';
+import {Interpolation} from '@emotion/core';
+import {CSSProperties} from '@workday/canvas-kit-react/tokens';
 
 /**
  * A utility to hide the default canvas style focus ring when using mouse input.
  * Requires wrapping your components in an InputProvider component.
  */
-export const hideMouseFocus: CSSObject = {
+export const hideMouseFocus: CSSProperties = {
   [`[data-whatinput="mouse"] &:focus,
     [data-whatinput="touch"] &:focus,
     [data-whatinput="pointer"] &:focus`]: {

package/dist/commonjs/action-bar/index.d.ts

@@ -1,5 +1,2 @@
-import ActionBar from './lib/ActionBar';
-export default ActionBar;
-export { ActionBar };
 export * from './lib/ActionBar';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/action-bar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../action-bar/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,iBAAiB,CAAC;AAExC,eAAe,SAAS,CAAC;AACzB,OAAO,EAAC,SAAS,EAAC,CAAC;AACnB,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../action-bar/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/dist/commonjs/action-bar/index.js

@@ -2,11 +2,5 @@
 function __export(m) {
     for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
 }
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var ActionBar_1 = __importDefault(require("./lib/ActionBar"));
-exports.ActionBar = ActionBar_1.default;
-exports.default = ActionBar_1.default;
 __export(require("./lib/ActionBar"));

package/dist/commonjs/action-bar/lib/ActionBar.d.ts

@@ -1,12 +1,7 @@
-import * as React from 'react';
-export interface ActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * If true, fix the ActionBar to the bottom of the screen.
-     * @default false
-     */
-    fixed?: boolean;
-}
-export default class ActionBar extends React.Component<ActionBarProps> {
-    render(): JSX.Element;
+import { HStackProps, StackSpacing } from '@workday/canvas-kit-labs-react';
+interface ActionBarProps extends Omit<HStackProps, 'spacing'> {
+    spacing?: StackSpacing;
 }
+export declare const ActionBar: import("../../common").ElementComponent<"div", ActionBarProps>;
+export {};
 //# sourceMappingURL=ActionBar.d.ts.map

package/dist/commonjs/action-bar/lib/ActionBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAuDD,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IAC7D,MAAM;CASd"}
+{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAS,WAAW,EAAE,YAAY,EAAC,MAAM,gCAAgC,CAAC;AAEjF,UAAU,cAAe,SAAQ,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC;IAC3D,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAWD,eAAO,MAAM,SAAS,gEAkBpB,CAAC"}

package/dist/commonjs/action-bar/lib/ActionBar.js

@@ -1,17 +1,4 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -23,17 +10,6 @@ var __assign = (this && this.__assign) || function () {
     };
     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;
-};
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
@@ -45,64 +21,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var React = __importStar(require("react"));
 var common_1 = require("@workday/canvas-kit-react/common");
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
-function getFixedStyles(fixed) {
-    if (fixed === void 0) { fixed = false; }
-    return fixed
-        ? {
-            position: 'fixed',
-            left: 0,
-            bottom: 0,
-            right: 0,
-        }
-        : {};
-}
-var ActionBarContainer = common_1.styled('div')({
-    borderTop: "solid 1px " + tokens_1.colors.soap400,
-    background: tokens_1.commonColors.background,
-    padding: tokens_1.space.s,
-    boxShadow: '0 -2px 4px rgba(0, 0, 0, 0.08)',
-}, function (_a) {
-    var _b;
-    var fixed = _a.fixed, theme = _a.theme;
-    return __assign(__assign({}, getFixedStyles(fixed)), (_b = {}, _b[theme.canvas.breakpoints.down('s')] = {
-        padding: tokens_1.space.xxs,
-    }, _b));
-});
-var ChildrenContainer = common_1.styled('div')({
-    display: 'inline-block',
-    padding: "0 " + tokens_1.space.m,
-    '*:not(:first-of-type)': {
-        marginLeft: tokens_1.space.s,
-    },
-}, function (_a) {
+var canvas_kit_labs_react_1 = require("@workday/canvas-kit-labs-react");
+var ResponsiveHStack = common_1.styled(canvas_kit_labs_react_1.HStack)(function (_a) {
     var _b;
     var theme = _a.theme;
     return (_b = {},
         _b[theme.canvas.breakpoints.down('s')] = {
-            display: 'flex',
-            padding: tokens_1.space.xxs,
-            justifyContent: 'center',
-            flexDirection: 'row-reverse',
-            '> *': {
+            padding: tokens_1.space.s,
+            '> *:not(div)': {
                 flex: 1,
-                '&:not(:first-of-type)': {
-                    marginRight: tokens_1.space.s,
-                    marginLeft: 0,
-                },
             },
         },
         _b);
 });
-var ActionBar = /** @class */ (function (_super) {
-    __extends(ActionBar, _super);
-    function ActionBar() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ActionBar.prototype.render = function () {
-        var _a = this.props, fixed = _a.fixed, children = _a.children, elemProps = __rest(_a, ["fixed", "children"]);
-        return (React.createElement(ActionBarContainer, __assign({}, elemProps, { fixed: fixed }),
-            React.createElement(ChildrenContainer, null, children)));
-    };
-    return ActionBar;
-}(React.Component));
-exports.default = ActionBar;
+exports.ActionBar = common_1.createComponent('div')({
+    displayName: 'ActionBar',
+    Component: function (elemProps, ref, Element) { return (React.createElement(ResponsiveHStack, __assign({ ref: ref, as: Element, spacing: "s", depth: 1, background: tokens_1.commonColors.background, borderTop: "solid 1px " + tokens_1.colors.soap400, padding: tokens_1.space.s + " " + tokens_1.space.xl + " ", position: "fixed", bottom: 0, left: 0, right: 0 }, elemProps))); },
+});

package/dist/commonjs/banner/index.d.ts

@@ -1,5 +1,3 @@
-import Banner from './lib/Banner';
-export default Banner;
-export { Banner };
 export * from './lib/Banner';
+export * from './lib/hooks/';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/banner/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../banner/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,cAAc,CAAC;AAElC,eAAe,MAAM,CAAC;AACtB,OAAO,EAAC,MAAM,EAAC,CAAC;AAChB,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../banner/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC"}

package/dist/commonjs/banner/index.js

@@ -2,11 +2,6 @@
 function __export(m) {
     for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
 }
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var Banner_1 = __importDefault(require("./lib/Banner"));
-exports.Banner = Banner_1.default;
-exports.default = Banner_1.default;
 __export(require("./lib/Banner"));
+__export(require("./lib/hooks/"));

package/dist/commonjs/banner/lib/Banner.d.ts

@@ -1,38 +1,22 @@
 import * as React from 'react';
-import { ErrorType, Themeable } from '@workday/canvas-kit-react/common';
-export declare enum BannerVariant {
-    Full = 0,
-    Sticky = 1
-}
-export interface BannerProps extends Themeable, React.ButtonHTMLAttributes<HTMLButtonElement> {
-    /**
-     * The function called when the Banner is clicked.
-     */
-    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * The label of the Banner.
-     */
-    label?: React.ReactNode;
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { Flex } from '@workday/canvas-kit-labs-react/layout';
+import { BannerModel, BannerModelConfig } from './hooks';
+export declare const BannerModelContext: React.Context<import("../../common").Model<{
+    hasError?: boolean | undefined;
+    isSticky?: boolean | undefined;
+    id?: string | undefined;
+}, {}>>;
+export interface BannerProps extends BannerModelConfig, ExtractProps<typeof Flex, never> {
+    model?: BannerModel;
     /**
-     * The variant of the Banner. Accepts `Full` or `Sticky`.
-     * @default BannerVariant.Full
+     * Children of the Banner. Should contain a `<Banner.Label>` a <Banner.Icon> and an optional `<Banner.ActionText>`
      */
-    variant?: BannerVariant;
-    /**
-     * The type of error associated with the Banner (if applicable).
-     * @default ErrorType.Alert
-     */
-    error?: ErrorType;
-    /**
-     * The text of the Banner action. This prop is also used as the aria-label for the action in the banner
-     * @default 'View All'
-     */
-    actionText?: string;
-}
-declare class Banner extends React.Component<BannerProps> {
-    static Variant: typeof BannerVariant;
-    static ErrorType: typeof ErrorType;
-    render(): JSX.Element;
+    children?: React.ReactNode;
 }
-export default Banner;
+export declare const Banner: import("../../common").ElementComponent<"button", BannerProps> & {
+    Icon: import("../../common").ElementComponent<"span", import("./BannerIcon").BannerIconProps>;
+    Label: import("../../common").ElementComponent<"div", import("./BannerLabel").BannerLabelProps>;
+    ActionText: import("../../common").ElementComponent<"span", import("./BannerActionText").BannerActionTextProps>;
+};
 //# sourceMappingURL=Banner.d.ts.map

package/dist/commonjs/banner/lib/Banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../banner/lib/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAC,SAAS,EAAqB,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAEzF,oBAAY,aAAa;IACvB,IAAI,IAAA;IACJ,MAAM,IAAA;CACP;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAC3F;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC3D;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAoDD,cAAM,MAAO,SAAQ,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC;IAC/C,MAAM,CAAC,OAAO,uBAAiB;IAC/B,MAAM,CAAC,SAAS,mBAAa;IAEtB,MAAM;CA8Bd;AAKD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../banner/lib/Banner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,YAAY,EAKb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,uCAAuC,CAAC;AAE3D,OAAO,EAAC,WAAW,EAAE,iBAAiB,EAA8C,MAAM,SAAS,CAAC;AAMpG,eAAO,MAAM,kBAAkB;;;;OAA8C,CAAC;AAE9E,MAAM,WAAW,WAAY,SAAQ,iBAAiB,EAAE,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACtF,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAkBD,eAAO,MAAM,MAAM;;;;CAqDjB,CAAC"}

package/dist/commonjs/banner/lib/Banner.js

@@ -1,17 +1,4 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -42,63 +29,51 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+/** @jsx jsx */
+var core_1 = require("@emotion/core");
 var React = __importStar(require("react"));
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var icon_1 = require("@workday/canvas-kit-react/icon");
-var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
 var common_1 = require("@workday/canvas-kit-react/common");
-var BannerVariant;
-(function (BannerVariant) {
-    BannerVariant[BannerVariant["Full"] = 0] = "Full";
-    BannerVariant[BannerVariant["Sticky"] = 1] = "Sticky";
-})(BannerVariant = exports.BannerVariant || (exports.BannerVariant = {}));
-var BannerWrapper = common_1.styled('button')(__assign(__assign({}, tokens_1.type.levels.subtext.large), { fontWeight: tokens_1.type.properties.fontWeights.medium, backgroundColor: tokens_1.colors.cantaloupe400, boxSizing: 'border-box', color: tokens_1.colors.blackPepper400, padding: tokens_1.space.xxs + " " + tokens_1.space.s, textAlign: 'left', border: 0, display: 'flex', alignItems: 'center', transition: 'background-color 120ms', '&:focus': __assign({ outline: 'none' }, common_1.focusRing({ separation: 2 })), '&:hover': {
-        cursor: 'pointer',
-    } }), function (_a) {
-    var error = _a.error, variant = _a.variant;
-    return ({
-        backgroundColor: error === common_1.ErrorType.Error ? tokens_1.colors.cinnamon500 : tokens_1.colors.cantaloupe400,
-        color: error === common_1.ErrorType.Error ? tokens_1.colors.frenchVanilla100 : tokens_1.colors.blackPepper400,
-        borderRadius: variant === BannerVariant.Sticky ? tokens_1.borderRadius.m + " 0 0 " + tokens_1.borderRadius.m : tokens_1.borderRadius.m,
-        width: variant === BannerVariant.Sticky ? '222px' : '328px',
-        '&:hover': {
-            backgroundColor: error === common_1.ErrorType.Error ? tokens_1.colors.cinnamon600 : tokens_1.colors.cantaloupe500,
-        },
-    });
-});
-var BannerIcon = common_1.styled(icon_1.SystemIcon)({
-    marginRight: tokens_1.space.xs,
+var layout_1 = require("@workday/canvas-kit-labs-react/layout");
+var hooks_1 = require("./hooks");
+var BannerIcon_1 = require("./BannerIcon");
+var BannerLabel_1 = require("./BannerLabel");
+var BannerActionText_1 = require("./BannerActionText");
+exports.BannerModelContext = React.createContext({});
+// Remove color from our type since it is set on the Flex style attribute
+var _a = tokens_1.type.levels.subtext.large, _color = _a.color, typeLevelsSubtextLarge = __rest(_a, ["color"]);
+var styles = __assign(__assign(__assign({}, typeLevelsSubtextLarge), { cursor: 'pointer', fontWeight: tokens_1.type.properties.fontWeights.medium, textAlign: 'left', transition: 'background-color 120ms', '&:focus': __assign({ outline: 'none' }, common_1.focusRing({ separation: 2 })) }), common_1.hideMouseFocus);
+exports.Banner = common_1.createComponent('button')({
+    displayName: 'Banner',
+    Component: function (_a, ref, Element) {
+        var _b;
+        var children = _a.children, model = _a.model, props = __rest(_a, ["children", "model"]);
+        var hasError = props.hasError, isSticky = props.isSticky, id = props.id, elemProps = __rest(props, ["hasError", "isSticky", "id"]);
+        var value = common_1.useDefaultModel(model, { hasError: hasError, isSticky: isSticky, id: id }, hooks_1.useBannerModel);
+        var palette = hooks_1.useThemedPalette(hasError ? 'error' : 'alert');
+        var themedBackgroundStyles = {
+            '&:hover': {
+                backgroundColor: palette.hover,
+            },
+        };
+        var isRTL = common_1.useIsRTL();
+        var borderBottomLeftRadius = isRTL ? 'borderBottomRightRadius' : 'borderBottomLeftRadius';
+        var borderTopLeftRadius = isRTL ? 'borderTopRightRadius' : 'borderTopLeftRadius';
+        var borderBottomRightRadius = isRTL ? 'borderBottomLeftRadius' : 'borderBottomRightRadius';
+        var borderTopRightRadius = isRTL ? 'borderTopLeftRadius' : 'borderTopRightRadius';
+        var borderStyleProps = (_b = {},
+            _b[borderBottomLeftRadius] = tokens_1.borderRadius.m,
+            _b[borderTopLeftRadius] = tokens_1.borderRadius.m,
+            _b[borderBottomRightRadius] = isSticky ? 0 : tokens_1.borderRadius.m,
+            _b[borderTopRightRadius] = isSticky ? 0 : tokens_1.borderRadius.m,
+            _b);
+        var bannerProps = hooks_1.useBanner(value, elemProps, ref);
+        return (core_1.jsx(exports.BannerModelContext.Provider, { value: value },
+            core_1.jsx(layout_1.Flex, __assign({ as: Element, width: isSticky ? '222px' : '328px', backgroundColor: palette.normal, color: palette.contrast, padding: tokens_1.space.xxs + " " + tokens_1.space.s, border: "0", display: "flex", alignItems: "center" }, borderStyleProps, { css: [styles, themedBackgroundStyles] }, bannerProps), children)));
+    },
+    subComponents: {
+        Icon: BannerIcon_1.BannerIcon,
+        Label: BannerLabel_1.BannerLabel,
+        ActionText: BannerActionText_1.BannerActionText,
+    },
 });
-var BannerLabel = common_1.styled('div')({
-    flex: 1,
-});
-var BannerViewAll = common_1.styled('span')({
-    textDecoration: 'underline',
-}, function (_a) {
-    var variant = _a.variant;
-    return ({
-        display: variant === BannerVariant.Sticky ? 'none' : undefined,
-    });
-});
-var Banner = /** @class */ (function (_super) {
-    __extends(Banner, _super);
-    function Banner() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Banner.prototype.render = function () {
-        var _a = this.props, _b = _a.actionText, actionText = _b === void 0 ? 'View All' : _b, _c = _a.variant, variant = _c === void 0 ? BannerVariant.Full : _c, _d = _a.error, error = _d === void 0 ? common_1.ErrorType.Alert : _d, label = _a.label, onClick = _a.onClick, props = __rest(_a, ["actionText", "variant", "error", "label", "onClick"]);
-        var bannerIcon = error === common_1.ErrorType.Error ? canvas_system_icons_web_1.exclamationCircleIcon : canvas_system_icons_web_1.exclamationTriangleIcon;
-        var iconColor = error === common_1.ErrorType.Error ? tokens_1.colors.frenchVanilla100 : tokens_1.colors.blackPepper400;
-        var iconSize = 24;
-        return (React.createElement(BannerWrapper, __assign({ "aria-label": actionText + ': ' + label, role: "button", variant: variant, tabIndex: 0, onClick: onClick, error: error }, props),
-            React.createElement(BannerIcon, { icon: bannerIcon, color: iconColor, colorHover: iconColor, size: iconSize }),
-            React.createElement(BannerLabel, null, label),
-            React.createElement(BannerViewAll, { variant: variant }, actionText)));
-    };
-    Banner.Variant = BannerVariant;
-    Banner.ErrorType = common_1.ErrorType;
-    return Banner;
-}(React.Component));
-Banner.Variant = BannerVariant;
-Banner.ErrorType = common_1.ErrorType;
-exports.default = Banner;

package/dist/commonjs/banner/lib/BannerActionText.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { Box } from '@workday/canvas-kit-labs-react/common';
+import { BannerModel } from './hooks';
+export interface BannerActionTextProps extends ExtractProps<typeof Box, never> {
+    model?: BannerModel;
+    /**
+     * The text of the Banner action.
+     * @default 'View All'
+     */
+    children?: React.ReactNode;
+}
+export declare const BannerActionText: import("../../common").ElementComponent<"span", BannerActionTextProps>;
+//# sourceMappingURL=BannerActionText.d.ts.map

package/dist/commonjs/banner/lib/BannerActionText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerActionText.d.ts","sourceRoot":"","sources":["../../../../banner/lib/BannerActionText.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,YAAY,EAAmC,MAAM,kCAAkC,CAAC;AAChG,OAAO,EAAC,GAAG,EAAC,MAAM,uCAAuC,CAAC;AAI1D,OAAO,EAAC,WAAW,EAAsB,MAAM,SAAS,CAAC;AAEzD,MAAM,WAAW,qBAAsB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC;IAC5E,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAMD,eAAO,MAAM,gBAAgB,wEAqB3B,CAAC"}

package/dist/commonjs/banner/lib/BannerActionText.js

@@ -0,0 +1,42 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/** @jsx jsx */
+var core_1 = require("@emotion/core");
+var common_1 = require("@workday/canvas-kit-react/common");
+var common_2 = require("@workday/canvas-kit-labs-react/common");
+var Banner_1 = require("./Banner");
+var hooks_1 = require("./hooks");
+var styles = {
+    textDecoration: 'underline',
+};
+exports.BannerActionText = common_1.createComponent('span')({
+    displayName: 'Banner.ActionTextText',
+    Component: function (_a, ref, Element) {
+        var _b = _a.children, children = _b === void 0 ? 'View All' : _b, model = _a.model, elemProps = __rest(_a, ["children", "model"]);
+        var localModel = common_1.useModelContext(Banner_1.BannerModelContext, model);
+        var props = hooks_1.useBannerActionText(localModel, elemProps, ref);
+        return (core_1.jsx(common_2.Box, __assign({ display: localModel.state.isSticky ? 'none' : 'inline', as: Element, css: [styles] }, props), children));
+    },
+});

package/dist/commonjs/banner/lib/BannerIcon.d.ts

@@ -0,0 +1,14 @@
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { SystemIcon } from '@workday/canvas-kit-react/icon';
+import { CanvasSystemIcon } from '@workday/design-assets-types';
+import { BannerModel } from './hooks';
+export interface BannerIconProps extends Omit<ExtractProps<typeof SystemIcon, never>, 'icon'> {
+    model?: BannerModel;
+    /**
+     * Icon to show next to label
+     * @default exclamationTriangleIcon or exclamationCircleIcon when hasError is true
+     */
+    icon?: CanvasSystemIcon;
+}
+export declare const BannerIcon: import("../../common").ElementComponent<"span", BannerIconProps>;
+//# sourceMappingURL=BannerIcon.d.ts.map

package/dist/commonjs/banner/lib/BannerIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerIcon.d.ts","sourceRoot":"","sources":["../../../../banner/lib/BannerIcon.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,YAAY,EAAmC,MAAM,kCAAkC,CAAC;AAEhG,OAAO,EAAC,UAAU,EAAC,MAAM,gCAAgC,CAAC;AAE1D,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,OAAO,EAAC,WAAW,EAAgB,MAAM,SAAS,CAAC;AAEnD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,UAAU,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAC3F,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB;AAMD,eAAO,MAAM,UAAU,kEAarB,CAAC"}

package/dist/commonjs/banner/lib/BannerIcon.js

@@ -0,0 +1,47 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/** @jsx jsx */
+var core_1 = require("@emotion/core");
+var tokens_1 = require("@workday/canvas-kit-react/tokens");
+var common_1 = require("@workday/canvas-kit-react/common");
+var common_2 = require("@workday/canvas-kit-labs-react/common");
+var icon_1 = require("@workday/canvas-kit-react/icon");
+var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
+var Banner_1 = require("./Banner");
+var hooks_1 = require("./hooks");
+var styles = {
+    marginRight: tokens_1.space.xs,
+};
+exports.BannerIcon = common_1.createComponent('span')({
+    displayName: 'Banner.Icon',
+    Component: function (_a, ref) {
+        var _b = _a.icon, icon = _b === void 0 ? canvas_system_icons_web_1.exclamationTriangleIcon : _b, model = _a.model, elemProps = __rest(_a, ["icon", "model"]);
+        var themeRTL = common_2.useThemeRTL().themeRTL;
+        var localModel = common_1.useModelContext(Banner_1.BannerModelContext, model);
+        // SystemIcon is still a class based component so we need to set ref manually.
+        var _c = hooks_1.useBannerIcon(localModel, elemProps, ref), iconRef = _c.ref, defaultIcon = _c.icon, props = __rest(_c, ["ref", "icon"]);
+        return (core_1.jsx(icon_1.SystemIcon, __assign({ icon: icon !== null && icon !== void 0 ? icon : defaultIcon, iconRef: iconRef, css: themeRTL(styles) }, props)));
+    },
+});

package/dist/commonjs/banner/lib/BannerLabel.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { Flex } from '@workday/canvas-kit-labs-react/layout';
+import { BannerModel } from './hooks';
+export interface BannerLabelProps extends ExtractProps<typeof Flex, never> {
+    model?: BannerModel;
+    /**
+     * The text of the Banner.
+     */
+    children: React.ReactNode;
+}
+export declare const BannerLabel: import("../../common").ElementComponent<"div", BannerLabelProps>;
+//# sourceMappingURL=BannerLabel.d.ts.map

package/dist/commonjs/banner/lib/BannerLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerLabel.d.ts","sourceRoot":"","sources":["../../../../banner/lib/BannerLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,YAAY,EAAmC,MAAM,kCAAkC,CAAC;AAChG,OAAO,EAAC,IAAI,EAAC,MAAM,uCAAuC,CAAC;AAG3D,OAAO,EAAC,WAAW,EAAiB,MAAM,SAAS,CAAC;AAEpD,MAAM,WAAW,gBAAiB,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACxE,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,WAAW,kEAYtB,CAAC"}