@workday/canvas-kit-docs 6.3.3 → 7.0.0-alpha.0-next.0

package/dist/commonjs/lib/specs.js

@@ -41,6 +41,62 @@ module.exports = {specifications: [
       }
     ]
   },
+  {
+    "type": "file",
+    "name": "Banner.spec.ts",
+    "children": [
+      {
+        "type": "describe",
+        "name": "Banner",
+        "children": [
+          {
+            "type": "describe",
+            "name": "given the [Components/Indicators/Banner/React, Error] story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should pass axe checks"
+              },
+              {
+                "type": "it",
+                "name": "should have an element with a role of \"button\""
+              },
+              {
+                "type": "it",
+                "name": "should have an \"aria-labelledby\" that matches the action"
+              },
+              {
+                "type": "it",
+                "name": "should have an \"aria-describedby\" that matches the label"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the [Components/Indicators/Banner/React, Sticky] story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should pass axe checks"
+              },
+              {
+                "type": "it",
+                "name": "should have an element with a role of \"button\""
+              },
+              {
+                "type": "it",
+                "name": "should have an \"aria-labelledby\" that matches the action"
+              },
+              {
+                "type": "it",
+                "name": "should have an \"aria-describedby\" that matches the label"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
   {
     "type": "file",
     "name": "Breadcrumbs.spec.ts",

package/dist/es6/lib/specs.js

@@ -41,6 +41,62 @@ module.exports = {specifications: [
       }
     ]
   },
+  {
+    "type": "file",
+    "name": "Banner.spec.ts",
+    "children": [
+      {
+        "type": "describe",
+        "name": "Banner",
+        "children": [
+          {
+            "type": "describe",
+            "name": "given the [Components/Indicators/Banner/React, Error] story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should pass axe checks"
+              },
+              {
+                "type": "it",
+                "name": "should have an element with a role of \"button\""
+              },
+              {
+                "type": "it",
+                "name": "should have an \"aria-labelledby\" that matches the action"
+              },
+              {
+                "type": "it",
+                "name": "should have an \"aria-describedby\" that matches the label"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the [Components/Indicators/Banner/React, Sticky] story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should pass axe checks"
+              },
+              {
+                "type": "it",
+                "name": "should have an element with a role of \"button\""
+              },
+              {
+                "type": "it",
+                "name": "should have an \"aria-labelledby\" that matches the action"
+              },
+              {
+                "type": "it",
+                "name": "should have an \"aria-describedby\" that matches the label"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
   {
     "type": "file",
     "name": "Breadcrumbs.spec.ts",

package/dist/mdx/7.0-MIGRATION-GUIDE.mdx

@@ -0,0 +1,47 @@
+# Canvas Kit 7.0 Migration Guide
+
+Below are the breaking changes made in Canvas Kit v7. Please
+[reach out](https://github.com/Workday/canvas-kit/issues/new?labels=bug&template=bug.md) if you have
+any questions about the update.
+
+- [Codemod](#codemod)
+- [ActionBar Component Updates](#actionbar-component-updates)
+
+## Codemod
+
+Please use our [codemod package](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+to automatically update your code to work with a majority of the breaking changes in the migration
+from Canvas Kit v6 to v7:
+
+```sh
+> npx @workday/canvas-kit-codemod v7 [path]
+```
+
+> Note: This codemod only works on `.js`, `.jsx`, `.ts`, and `.tsx` extensions. You may need to make
+> some manual changes in other file types (`.json`, `.mdx`, `.md`, etc.).
+
+> Note: You may need to run your linter after executing the codemod, as it's resulting formatting
+> (spacing, quotes, etc.) may not match your project's styling.
+
+**Breaking changes accounted for by this codemod will be marked with a 🤖.**
+
+**Please verify all changes made by the codemod. As a safety precaution, we recommend committing the
+changes from the codemod as a single isolated commit (separate from other changes) so you can
+rollback more easily if necessary.**
+
+[Let us know](https://github.com/Workday/canvas-kit/issues/new?labels=bug&template=bug.md) if you
+encounter any issues or use cases that we've missed. The `@workday/canvas-kit-codemod` package will
+help us maintain additional codemod transforms to make future migrations easier.
+
+## ActionBar Component Updates
+
+We've refactored our ActionBar components to simplify logic.
+
+PR: https://github.com/Workday/canvas-kit/pull/1396
+
+**Changes:**
+
+- Component has been converted to compound component.
+- `fixed` prop has been removed from component.
+- Now ActionBar uses `position` prop to set container position instead `fixed` prop.
+- Fixed position has been set as default if there is not passed `position` prop.

package/dist/mdx/react/action-bar/ActionBar.mdx

@@ -6,7 +6,7 @@ import Basic from './examples/Basic';
 
 # Canvas Kit Action Bar
 
-Full width button toolbar fixed to bottom of screen.
+Action Bar contains primary and secondary actions related to a page or task.
 
 ## Installation
 
@@ -19,38 +19,20 @@ yarn add @workday/canvas-kit-react
 ### Basic Example
 
 Here is a basic example of an `ActionBar` with two buttons. Although not required,
-[buttons](../../button) are often used in in action bars. The primary action button should be left
-aligned followed by secondary buttons. The primary button is on the right only in "progression-based
-UIs" and on mobile devices.
+[buttons](../../button) are often used in in action bars. The primary action button should be used
+only once and left aligned followed by secondary buttons.
 
 <ExampleCodeBlock code={Basic} />
 
-### Fixed
-
-The Action Bar generally lives at the bottom of the viewport. If you would like this behavior
-automatically (using `position: fixed`), you can use the `fixed` prop.
-
-```tsx
-<ActionBar fixed={true}>
-  <PrimaryButton>Button</PrimaryButton>
-  <SecondaryButton>Button</SecondaryButton>
-</ActionBar>
-```
-
 ## Responsive Behavior
 
-At 575px, responsive styles will take effect:
-
-- Applies a flex box to the buttons
-- Makes single-button groups full width
-- All buttons will become the same width (`flex: 1`).
-- Button order will become reversed, making left-aligned primary buttons right-aligned.
+At 768px, responsive styles will take effect:
 
-> When on a mobile form factor, the button placement should flip to have the primary button on the
-> far right.
+- All primary and secondary buttons will become the same width (`flex: 1`).
+- Container Bar padding will be decreased to small (`16px`) for all sides.
 
 ## Props
 
-Undocumented props are spread to the underlying container `<div>` element.
+Undocumented props are spread to the underlying `HStack` component.
 
 <ArgsTable of={ActionBar} />

package/dist/mdx/react/action-bar/examples/Basic.tsx

@@ -4,8 +4,8 @@ import {ActionBar} from '@workday/canvas-kit-react/action-bar';
 import {PrimaryButton, SecondaryButton} from '@workday/canvas-kit-react/button';
 
 export default () => (
-  <ActionBar>
-    <PrimaryButton>Button</PrimaryButton>
-    <SecondaryButton>Button</SecondaryButton>
+  <ActionBar position="relative">
+    <PrimaryButton>First Action</PrimaryButton>
+    <SecondaryButton>Second Action</SecondaryButton>
   </ActionBar>
 );

package/dist/mdx/react/banner/Banner.mdx

@@ -4,11 +4,24 @@ import ActionText from './examples/ActionText';
 import Basic from './examples/Basic';
 import Error from './examples/Error';
 import Sticky from './examples/Sticky';
+import ThemedAlert from './examples/ThemedAlert';
+import ThemedError from './examples/ThemedError';
+import RefForwarding from './examples/RefForwarding';
+import StickyAnimation from './examples/StickyAnimation';
+import StickyRTL from './examples/StickyRTL';
+import {
+  BannerHoistedComponent,
+  BannerModelConfigComponent,
+  BannerIconComponent,
+  BannerLabelComponent,
+  BannerActionComponent,
+} from './PropTables.splitprops.tsx';
 
 
 # Canvas Kit Banner
 
-Banners surface important information and feedback to the user about a task, action, or state.
+`Banner` is a [compound component](/getting-started/for-developers/resources/compound-components/)
+used surface important information and feedback to the user about a task, action, or state.
 
 [> Workday Design Reference](https://design.workday.com/components/indicators/banners)
 
@@ -22,38 +35,209 @@ yarn add @workday/canvas-kit-react
 
 ### Basic Example
 
+Use the children of `Banner.Label` to set the main text for the `Banner`.
+
 <ExampleCodeBlock code={Basic} />
 
-### Error Type
+### Action Text
 
-Set the `error` prop of the Banner to designate the severity of the message presented in the banner.
-`error` accepts the following values:
+Use the children of `Banner.ActionText` to customize the action text contained in the `Banner`. The
+text has default value of `View All`.
 
-- `Banner.ErrorType.Alert` (Default)
-- `Banner.ErrorType.Error`
+<ExampleCodeBlock code={ActionText} />
 
-<ExampleCodeBlock code={Error} />
+### Error Type
 
-### Variant
+Set the `hasError` prop of the `Banner` to designate the severity of the message presented in the
+banner. This will change the defualt icon to `exclamationCircleIcon`.
 
-Banner is available in two variants. `variant` accepts the following values:
+<ExampleCodeBlock code={Error} />
 
-- `Banner.Variant.Full` (Default)
-- `Banner.Variant.Sticky`
+### Sticky
 
-Use the `Sticky` variant if the Banner is to be displayed along the right edge of the page.
+Set the `isSticky` prop of the `Banner` to display it along the right edge of the page. When true,
+the `Banner.ActionText` will be hidden. Some basic styles will be applied, but you will still need
+to manually set the css `position` value.
 
 <ExampleCodeBlock code={Sticky} />
 
-#### Action Text
+You can use keyframes to animate the `Banner` in.
 
-Set the `actionText` prop to customize the text of the link contained in the Banner. `actionText` is
-only available in the `Full` variant and has a default value of `View All`.
+<ExampleCodeBlock code={StickyAnimation} />
 
-<ExampleCodeBlock code={ActionText} />
+### RefForwarding
+
+`Banner` supports ref forwarding. It will forward ref to its underlying button element.
+
+<ExampleCodeBlock code={RefForwarding} />
+
+### Right-to-Left (RTL)
+
+Banner supports right-to-left languages when specified in the CanvasProvider theme.
+
+<ExampleCodeBlock code={StickyRTL} />
+
+### Themed Banners
+
+Banners use the `useThemedPalette` hook for themeing. By default, your alert theme is used. `main`
+will be used for the background, `dark` for the hover background, and `contrast` for the text.
+
+<ExampleCodeBlock code={ThemedAlert} />
+
+If you set the `hasError` prop, the banner will use your error theme.
+
+<ExampleCodeBlock code={ThemedError} />
+
+## Components
+
+### Banner
+
+#### Usage
+
+`Banner` is a container component rendered as a `<button>` element that is responsible for creating
+a `BannerModel` and sharing it with its subcomponents using React context.
+
+```tsx
+<Banner
+	isSticky={true}
+	hasError={true} id:
+	'custom-banner-id'
+	onClick={() => console.log('clicked banner')}
+>
+  {/* Child components */}
+</Banner>
+```
+
+Alternatively, you may pass in a model using the hoisted model pattern.
+
+```tsx
+const model = useBannerModel({
+  isSticky: true,
+  hasError: true,
+  id: 'custom-banner-id',
+});
+
+return (
+  <Banner onClick={() => console.log('clicked banner')} model={model}>
+    {/* Child components */}
+  </Banner>
+);
+```
+
+#### Props
+
+Undocumented props are spread to the underlying `<button>` element.
+
+<ArgsTable of={BannerModelConfigComponent} />
+
+If you're using the hoisted model pattern, follow this table instead (refer to the [Model](#model)
+section for more information about `BannerModel`):
+
+<ArgsTable of={BannerHoistedComponent} />
+
+### Banner.Icon
+
+#### Usage
+
+`Banner.Icon` is a styled `<SystemIcon>`. The icon defaults to exclamationTriangleIcon or
+exclamationCircleIcon when the model's hasError is true.
+
+```tsx
+<Banner.Icon />
+```
+
+#### Props
+
+You can override the default icon if needed.
+
+Undocumented props are spread to the underlying `<SystemIcon>` element.
+
+<ArgsTable of={BannerIconComponent} />
+
+### Banner.Label
+
+#### Usage
+
+`Banner.Label` is a styled `<Flex>`. This component will get an id that will be used for the
+aria-describedby on the top level `<button>`.
+
+```tsx
+<Banner.Label>3 Warnings</Banner.Label>
+```
+
+#### Props
+
+The children prop will be used as the Primary text of the Banner.
+
+Undocumented props are spread to the underlying `<Flex>` element.
+
+<ArgsTable of={BannerLabelComponent} />
+
+### Banner.ActionText
+
+#### Usage
+
+`Banner.ActionText` is a styled `<Box>`. This component will get an id that will be used for the
+aria-labelledby on the top level `<button>`. This component will be visually hidden when the model's
+`isSticky` prop is set to true.
+
+```tsx
+<Banner.ActionText>Custom call to action</Banner.ActionText>
+```
+
+#### Props
+
+The children prop will be used as the 'call to action' text of the Banner.
+
+Undocumented props are spread to the underlying `<Box>` element.
+
+<ArgsTable of={BannerActionComponent} />
+
+## Model
+
+If `Banner` was stripped of all its markup, attributes, and styling, what would remain is the
+[model](/getting-started/for-developers/resources/compound-components/#models). The model is an
+object that holds the `state`, i.e. a description of the current snapshot in time of the component.
+
+By default, `Banner` will create a model and share it internally with its subcomponents using React
+context. You may subscribe to `BannerContext` if you wish to create a custom subcomponent for your
+implementation. Here's a simple example.
+
+```tsx
+import * as React from 'react';
+import {Banner, BannerModelContext} from '@workday/canvas-kit-react/banner';
+
+const CustomText = (props: React.HTMLAttributes<HTMLSpanElement>) => {
+  const model = React.useContext(BannerModelContext);
+
+  return <span {...props}>{model.state.hasError ? 'Error:' : 'Warning:'}</span>;
+};
+
+export const CustomBanner = () => {
+  return (
+    <Banner>
+      <CustomText />
+      {/* Other subcomponents */}
+    </Banner>
+  );
+};
+```
+
+Alternatively, if you need direct access to the model's `state` outside of the `Banner` component,
+you may configure your own model with `useBannerModel` and pass it to `Banner` via a pattern called
+[hoisting the model](/getting-started/for-developers/resources/compound-components/#configuring-a-model).
+
+```tsx
+const model = useBannerModel({
+  isError: true,
+});
+
+<Banner model={model}>{/* Child components */}</Banner>;
+```
 
-## Props
+### Config
 
-Undocumented props are spread to the outermost element rendered by Banner.
+`useBannerModel` accepts a configuration object with the following properties and returns a
+`BannerModel` with a `state` property.
 
-<ArgsTable of={Banner} />
+<ArgsTable of={BannerModelConfigComponent} />

package/dist/mdx/react/banner/PropTables.splitprops.tsx

@@ -0,0 +1,39 @@
+import {BannerModel, BannerModelConfig} from '@workday/canvas-kit-react/banner';
+import {CanvasSystemIcon} from '@workday/design-assets-types';
+import {BannerActionProps} from '../lib/BannerAction';
+
+// <ArgsTable of={Banner} /> generates a very large props table given that
+// BannerProps includes FlexProps. Use this dummy component instead to
+// limit the props shown.
+export const BannerHoistedComponent = (_: {model: BannerModel}) => <div />;
+
+// <ArgsTable of={Banner.Icon} /> generates a props table with
+// SystemIcon props. Use this dummy component instead to limit the props shown.
+export const BannerIconComponent = (_: {
+  /**
+   * Icon to show next to label
+   * @default `exclamationTriangleIcon` or `exclamationCircleIcon` when hasError is true
+   */
+  icon?: CanvasSystemIcon;
+}) => <div />;
+
+// <ArgsTable of={Banner.Label} /> generates a props table with
+// Flex props. Use this dummy component instead to limit the props shown.
+export const BannerLabelComponent = (_: {
+  /**
+   * The text of the Banner.
+   */
+  children: React.ReactNode;
+}) => <div />;
+
+// <ArgsTable of={Banner.ActionText} /> generates a props table with
+// Box props. Use this dummy component instead to limit the props shown.
+export const BannerActionComponent = (_: {
+  /**
+   * The text of the Banner action.
+   * @default 'View All'
+   */
+  children?: React.ReactNode;
+}) => <div />;
+
+export const BannerModelConfigComponent = (_: BannerModelConfig) => <div />;

package/dist/mdx/react/banner/examples/ActionText.tsx

@@ -1,6 +1,13 @@
 import React from 'react';
+
 import {Banner} from '@workday/canvas-kit-react/banner';
 
 export default () => {
-  return <Banner actionText="Show Details" label="3 Warnings" />;
+  return (
+    <Banner>
+      <Banner.Icon />
+      <Banner.Label>3 Warnings</Banner.Label>
+      <Banner.ActionText>Show Details</Banner.ActionText>
+    </Banner>
+  );
 };

package/dist/mdx/react/banner/examples/Basic.tsx

@@ -1,6 +1,13 @@
 import React from 'react';
+
 import {Banner} from '@workday/canvas-kit-react/banner';
 
 export default () => {
-  return <Banner label="3 Warnings" />;
+  return (
+    <Banner onClick={() => console.log('clicked banner')}>
+      <Banner.Icon />
+      <Banner.Label>3 Warnings</Banner.Label>
+      <Banner.ActionText />
+    </Banner>
+  );
 };

package/dist/mdx/react/banner/examples/Error.tsx

@@ -1,6 +1,13 @@
 import React from 'react';
+
 import {Banner} from '@workday/canvas-kit-react/banner';
 
 export default () => {
-  return <Banner error={Banner.ErrorType.Error} label="3 Errors" />;
+  return (
+    <Banner hasError={true}>
+      <Banner.Icon />
+      <Banner.Label>3 Errors</Banner.Label>
+      <Banner.ActionText />
+    </Banner>
+  );
 };

package/dist/mdx/react/banner/examples/RefForwarding.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import {changeFocus} from '@workday/canvas-kit-react/common';
+import {Banner} from '@workday/canvas-kit-react/banner';
+import {SecondaryButton} from '../../..';
+import {VStack} from '@workday/canvas-kit-labs-react';
+
+export default () => {
+  const bannerRef = React.useRef<HTMLButtonElement>(null);
+
+  const focusBanner = () => {
+    changeFocus(bannerRef.current);
+  };
+
+  return (
+    <VStack spacing="xs" alignItems="flex-start">
+      <Banner ref={bannerRef}>
+        <Banner.Icon />
+        <Banner.Label>3 Warnings</Banner.Label>
+        <Banner.ActionText />
+      </Banner>
+      <SecondaryButton onClick={focusBanner}>Focus Banner</SecondaryButton>
+    </VStack>
+  );
+};

package/dist/mdx/react/banner/examples/Sticky.tsx

@@ -1,16 +1,24 @@
+/** @jsx jsx */
+import {jsx} from '@emotion/core';
 import React from 'react';
+
+import {CSSProperties} from '@workday/canvas-kit-react/tokens';
+import {Box, useThemeRTL} from '@workday/canvas-kit-labs-react/common';
 import {Banner} from '@workday/canvas-kit-react/banner';
-import {Box} from '@workday/canvas-kit-labs-react/common';
+
+const styles: CSSProperties = {
+  position: 'absolute',
+  right: 0,
+};
 
 export default () => {
   return (
     <Box height={64}>
-      <Banner
-        error={Banner.ErrorType.Error}
-        label="3 Errors"
-        variant={Banner.Variant.Sticky}
-        style={{position: 'absolute', right: 0}}
-      />
+      <Banner hasError={true} isSticky={true} css={styles}>
+        <Banner.Icon />
+        <Banner.Label>3 Errors</Banner.Label>
+        <Banner.ActionText />
+      </Banner>
     </Box>
   );
 };

package/dist/mdx/react/banner/examples/StickyAnimation.tsx

@@ -0,0 +1,62 @@
+/** @jsx jsx */
+import {jsx, keyframes} from '@emotion/core';
+import React from 'react';
+
+import {CSSProperties} from '@workday/canvas-kit-react/tokens';
+import {Box, useThemeRTL} from '@workday/canvas-kit-labs-react/common';
+import {loopIcon} from '@workday/canvas-system-icons-web';
+import {Banner} from '@workday/canvas-kit-react/banner';
+
+const containerStyles: CSSProperties = {
+  position: 'absolute',
+  right: 0,
+  overflow: 'hidden',
+};
+
+export default () => {
+  const {themeRTL, theme} = useThemeRTL();
+  const bannerRef = React.useRef<HTMLButtonElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const [styles, setStyles] = React.useState<CSSProperties>();
+
+  const [rerun, setRerun] = React.useState(1); // Only needed for demo purposes
+
+  React.useLayoutEffect(() => {
+    let width = bannerRef.current.offsetWidth;
+    if (theme.canvas.direction === 'rtl') {
+      width *= -1;
+    }
+    const slideInKeyframes = keyframes({
+      '0%': {
+        transform: `translateX(${width}px)`,
+      },
+      '100%': {
+        transform: `translateX(0 * ${rerun})`,
+      },
+    });
+
+    setStyles({
+      margin: '4px 0px 4px 4px', // Room for focus outline since container is overflow hidden
+      animation: `${slideInKeyframes} .3s ease-out forwards`,
+    });
+  }, [theme.canvas.direction, rerun]);
+
+  return (
+    <Box height={64}>
+      <div css={containerStyles} ref={containerRef}>
+        <div css={themeRTL(styles)}>
+          <Banner
+            onClick={() => setRerun(r => r + 1)}
+            hasError={true}
+            isSticky={true}
+            ref={bannerRef}
+          >
+            <Banner.Icon icon={loopIcon} />
+            <Banner.Label>Click to run animation</Banner.Label>
+            <Banner.ActionText />
+          </Banner>
+        </div>
+      </div>
+    </Box>
+  );
+};

package/dist/mdx/react/banner/examples/StickyRTL.tsx

@@ -0,0 +1,38 @@
+/** @jsx jsx */
+import {jsx} from '@emotion/core';
+import React from 'react';
+
+import {CSSProperties} from '@workday/canvas-kit-react/tokens';
+import {Box, useThemeRTL} from '@workday/canvas-kit-labs-react/common';
+import {
+  CanvasProvider,
+  ContentDirection,
+  PartialEmotionCanvasTheme,
+} from '@workday/canvas-kit-react/common';
+import {Banner} from '@workday/canvas-kit-react/banner';
+
+const styles: CSSProperties = {
+  position: 'absolute',
+  left: 0,
+};
+
+const theme: PartialEmotionCanvasTheme = {
+  canvas: {
+    direction: ContentDirection.RTL,
+  },
+};
+
+export default () => {
+  const {themeRTL} = useThemeRTL();
+  return (
+    <CanvasProvider theme={theme}>
+      <Box height={64}>
+        <Banner isSticky={true} css={styles}>
+          <Banner.Icon />
+          <Banner.Label>3 אזהרות</Banner.Label>
+          <Banner.ActionText />
+        </Banner>
+      </Box>
+    </CanvasProvider>
+  );
+};

package/dist/mdx/react/banner/examples/ThemedAlert.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import {Banner} from '@workday/canvas-kit-react/banner';
+import {CanvasProvider, PartialEmotionCanvasTheme} from '@workday/canvas-kit-react/common';
+import {colors} from '@workday/canvas-kit-react/tokens';
+
+export default () => {
+  const theme: PartialEmotionCanvasTheme = {
+    canvas: {
+      palette: {
+        alert: {
+          main: colors.kiwi200,
+          dark: colors.kiwi300,
+        },
+      },
+    },
+  };
+
+  return (
+    <CanvasProvider theme={theme}>
+      <Banner>
+        <Banner.Icon />
+        <Banner.Label>3 Items</Banner.Label>
+        <Banner.ActionText />
+      </Banner>
+    </CanvasProvider>
+  );
+};

package/dist/mdx/react/banner/examples/ThemedError.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import {Banner} from '@workday/canvas-kit-react/banner';
+import {CanvasProvider, PartialEmotionCanvasTheme} from '@workday/canvas-kit-react/common';
+import {colors} from '@workday/canvas-kit-react/tokens';
+
+export default () => {
+  const theme: PartialEmotionCanvasTheme = {
+    canvas: {
+      palette: {
+        error: {
+          main: colors.islandPunch500,
+          dark: colors.islandPunch600,
+          contrast: colors.berrySmoothie100,
+        },
+      },
+    },
+  };
+
+  return (
+    <CanvasProvider theme={theme}>
+      <Banner hasError={true}>
+        <Banner.Icon />
+        <Banner.Label>3 Items</Banner.Label>
+        <Banner.ActionText />
+      </Banner>
+    </CanvasProvider>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "6.3.3",
+  "version": "7.0.0-alpha.0-next.0+69f28d82",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -50,7 +50,7 @@
   ],
   "dependencies": {
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-react": "^6.3.3"
+    "@workday/canvas-kit-react": "^7.0.0-alpha.0-next.0+69f28d82"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
@@ -58,5 +58,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "^3.8.3"
   },
-  "gitHead": "51dae8197af8debcac3aaa6229e113ac18fe195c"
+  "gitHead": "69f28d82a0291ed45c2c9d3ef92e437d69033471"
 }