@workday/canvas-kit-docs 6.0.5 → 6.0.6

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

@@ -216,6 +216,9 @@ const CustomGlobalHeader = props => {
 };
 ```
 
+You may continue to use this component exactly as you did in v5, but note that we plan to hard-deprecate it in Canvas Kit v7.
+If you would like to migrate away from this deprecated component now, you can reference [this example](https://workday.github.io/canvas-kit/?path=/story/examples-global-header-react--basic) instead.
+
 ### Page Header
 
 We are [soft-deprecating](#soft-deprecation) `PageHeader`. It has been renamed to
@@ -267,6 +270,9 @@ export const CustomPageHeader = (props: CustomPageHeaderProps) => {
 };
 ```
 
+You may continue to use this component exactly as you did in v5, but note that we plan to hard-deprecate it in Canvas Kit v7.
+If you would like to migrate away from this deprecated component now, you can reference [this example](https://workday.github.io/canvas-kit/?path=/story/examples-page-header-react--basic) instead.
+
 ## Component Migrations
 
 ### Search Bar

package/dist/mdx/react/_examples/GlobalHeader.mdx

@@ -0,0 +1,9 @@
+import Basic from './examples/GlobalHeader';
+
+
+# Canvas Kit Examples
+
+## GlobalHeader
+Developers building internal Workday applications will likely not need to create this component. However, if you're building components to be used outside of Workday, this is a helpful reference for building a global navigation header that looks like our internal `GlobalHeader`.
+
+<ExampleCodeBlock code={Basic} />

package/dist/mdx/react/_examples/PageHeader.mdx

@@ -0,0 +1,8 @@
+import {Basic} from "./examples/PageHeader";
+
+
+# Canvas Kit Examples
+
+## PageHeader
+
+<ExampleCodeBlock code={Basic} />

package/dist/mdx/react/_examples/examples/GlobalHeader.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import {styled, createComponent, dubLogoBlue} from '@workday/canvas-kit-react/common';
+import {colors, depth, space, type} from '@workday/canvas-kit-react/tokens';
+
+import {
+  notificationsIcon,
+  inboxIcon,
+  justifyIcon,
+  assistantIcon,
+} from '@workday/canvas-system-icons-web';
+
+import {IconButton, Hyperlink} from '@workday/canvas-kit-react/button';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+import {SearchForm, HStack, HStackProps, StackSpacing} from '@workday/canvas-kit-labs-react';
+
+interface HeaderItemProps extends Omit<HStackProps, 'spacing'> {
+  spacing?: StackSpacing;
+}
+
+export default () => (
+  <GlobalHeader>
+    <GlobalHeader.Item>
+      <IconButton aria-label="menu" icon={justifyIcon} />
+      <Hyperlink>
+        <WorkdayLogo dangerouslySetInnerHTML={{__html: dubLogoBlue}} />
+      </Hyperlink>
+    </GlobalHeader.Item>
+    <GlobalHeader.Item margin="auto" width="100%" maxWidth={`calc(${space.xxxl} * 6)`}>
+      <SearchForm onSubmit={() => 1} />
+    </GlobalHeader.Item>
+    <GlobalHeader.Item>
+      <IconButton aria-label="messages" icon={assistantIcon} />
+      <IconButton aria-label="notifications" icon={notificationsIcon} />
+      <IconButton aria-label="inbox" icon={inboxIcon} />
+      <Avatar size={Avatar.Size.m} variant={Avatar.Variant.Light} />
+    </GlobalHeader.Item>
+  </GlobalHeader>
+);
+
+const GlobalHeaderItem = createComponent('div')({
+  displayName: 'GlobalHeader.Item',
+  Component: ({spacing = 's', ...props}: HeaderItemProps, ref) => (
+    <HStack spacing={spacing} alignItems="center" marginX={space.xs} ref={ref} {...props} />
+  ),
+});
+
+const GlobalHeader = createComponent('header')({
+  displayName: 'GlobalHeader',
+  Component: (props, ref, Element) => <HeaderWrapper ref={ref} as={Element} {...props} />,
+  subComponents: {Item: GlobalHeaderItem},
+});
+
+const HeaderWrapper = styled('header')({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  boxSizing: 'border-box',
+  ...type.levels.subtext.large,
+  WebkitFontSmoothing: 'antialiased',
+  MozOsxFontSmoothing: 'grayscale',
+  backgroundColor: colors.frenchVanilla100,
+  ...depth[1],
+  padding: space.xxs,
+});
+
+const WorkdayLogo = styled('span')({lineHeight: 0});

package/dist/mdx/react/_examples/examples/PageHeader.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import {styled, createComponent} from '@workday/canvas-kit-react/common';
+
+import {colors, gradients, space, type} from '@workday/canvas-kit-react/tokens';
+
+import {HStack, HStackProps, StackSpacing} from '@workday/canvas-kit-labs-react';
+import {IconButton} from '@workday/canvas-kit-react/button';
+import {justifyIcon, notificationsIcon} from '@workday/canvas-system-icons-web';
+
+interface HeaderItemProps extends Omit<HStackProps, 'spacing'> {
+  spacing?: StackSpacing;
+}
+
+export default () => (
+  <PageHeader>
+    <PageHeader.Title>Page Header</PageHeader.Title>
+    <PageHeader.Item>
+      <IconButton aria-label="notifications" icon={notificationsIcon} variant="inverse" />
+      <IconButton aria-label="menu" icon={justifyIcon} variant="inverse" />
+    </PageHeader.Item>
+  </PageHeader>
+);
+
+const PageHeaderItem = createComponent('div')({
+  displayName: 'PageHeader.Item',
+  Component: ({spacing = 'xxs', ...props}: HeaderItemProps, ref, Element) => (
+    <HStack spacing={spacing} ref={ref} as={Element} {...props} />
+  ),
+});
+
+const PageHeaderTitle = createComponent('h2')({
+  displayName: 'PageHeader.Title',
+  Component: ({children, ...props}, ref, Element) => (
+    <Title ref={ref} as={Element} {...props}>
+      {children}
+    </Title>
+  ),
+});
+
+const PageHeader = createComponent('header')({
+  displayName: 'PageHeader',
+  Component: (props, ref, Element) => <Header ref={ref} as={Element} {...props} />,
+  subComponents: {Item: PageHeaderItem, Title: PageHeaderTitle},
+});
+
+const Header = styled('header')({
+  padding: `${space.xs} ${space.xl}`,
+  backgroundImage: gradients.blueberry,
+  color: colors.frenchVanilla100,
+  WebkitFontSmoothing: 'antialiased',
+  MozOsxFontSmoothing: 'grayscale',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+});
+
+const Title = styled('h2')({
+  ...type.levels.heading.medium,
+  color: colors.frenchVanilla100,
+  padding: `${space.xs} 0`,
+  margin: 0,
+  whiteSpace: 'nowrap',
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "6.0.5",
+  "version": "6.0.6",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,7 +49,7 @@
   ],
   "dependencies": {
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-react": "^6.0.5"
+    "@workday/canvas-kit-react": "^6.0.6"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
@@ -57,5 +57,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "^3.8.3"
   },
-  "gitHead": "57439ccf19ad8753d7260730a1c83589b07c22a2"
+  "gitHead": "f4290c84ed12119c110a549db106e250e746553d"
 }