@workday/canvas-kit-docs 14.0.0 → 14.0.2

package/dist/es6/mdx/accessibility/examples/Table/WithSortableColumnHeaders.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { Table } from '@workday/canvas-kit-react/table';
+import { Tooltip } from '@workday/canvas-kit-react/tooltip';
+import { TertiaryButton } from '@workday/canvas-kit-react/button';
+import { Text } from '@workday/canvas-kit-react/text';
+import { sortDownIcon, sortUpIcon } from '@workday/canvas-system-icons-web';
+import { createStyles } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
+const countryData = [
+    { country: 'Australia', capital: 'Canberra', population: 25690000 },
+    { country: 'Bahamas', capital: 'Nassau', population: 407906 },
+    { country: 'Canada', capital: 'Ottawa', population: 38250000 },
+    { country: 'Fiji', capital: 'Suva', population: 924610 },
+    { country: 'Ghana', capital: 'Accra', population: 32830000 },
+    { country: 'Hong Kong', capital: 'City of Victoria', population: 7413000 },
+    { country: 'India', capital: 'New Delhi', population: 1408000000 },
+    { country: 'Ireland', capital: 'Dublin', population: 5033000 },
+    { country: 'Jamaica', capital: 'Kingston', population: 2828000 },
+    { country: 'Kenya', capital: 'Nairobi', population: 53010000 },
+    { country: 'Micronesia', capital: 'Palikir', population: 113131 },
+    { country: 'New Zealand', capital: 'Wellington', population: 5123000 },
+    { country: 'Philippines', capital: 'Manila', population: 113900000 },
+    { country: 'Puerto Rico', capital: 'San Juan', population: 3264000 },
+    { country: 'Samoa', capital: 'Apia', population: 218764 },
+    { country: 'Singapore', capital: 'Singapore', population: 5454000 },
+    { country: 'Tanzania', capital: 'Dodoma', population: 63590000 },
+    { country: 'United Kingdom', capital: 'London', population: 67330000 },
+    { country: 'United States', capital: 'Washington, D.C.', population: 331900000 },
+    { country: 'Zimbabwe', capital: 'Harare', population: 15990000 },
+];
+const initialHeaderRowState = {
+    column1SortDirection: 'ascending',
+    column2SortDirection: 'none',
+    column3SortDirection: 'none',
+};
+/**
+ * Given the current sort order, return the next sort order
+ */
+function getNextSortOrder(sortOrder) {
+    return sortOrder === 'ascending' ? 'descending' : 'ascending';
+}
+function headerRowReducer(state, action) {
+    switch (action.column) {
+        case 'Country':
+            if (state.column1SortDirection === 'ascending') {
+                action.payload.sort((a, b) => b.country.localeCompare(a.country));
+            }
+            else {
+                action.payload.sort((a, b) => a.country.localeCompare(b.country));
+            }
+            return {
+                ...initialHeaderRowState,
+                column1SortDirection: getNextSortOrder(state.column1SortDirection),
+            };
+        case 'Capital':
+            if (state.column2SortDirection === 'ascending') {
+                action.payload.sort((a, b) => b.capital.localeCompare(a.capital));
+            }
+            else {
+                action.payload.sort((a, b) => a.capital.localeCompare(b.capital));
+            }
+            return {
+                ...initialHeaderRowState,
+                column2SortDirection: getNextSortOrder(state.column2SortDirection),
+            };
+        case 'Population':
+            if (state.column3SortDirection === 'ascending') {
+                action.payload.sort((a, b) => b.population - a.population);
+            }
+            else {
+                action.payload.sort((a, b) => a.population - b.population);
+            }
+            return {
+                ...initialHeaderRowState,
+                column3SortDirection: getNextSortOrder(state.column3SortDirection),
+            };
+        default:
+            return initialHeaderRowState;
+    }
+}
+const getSortIcon = (sortOrder) => {
+    if (sortOrder === 'ascending') {
+        return sortUpIcon;
+    }
+    else if (sortOrder === 'descending') {
+        return sortDownIcon;
+    }
+    else {
+        return undefined;
+    }
+};
+const SortableColumnHeader = createComponent('th')({
+    displayName: 'SortableColumnHeader',
+    Component: ({ label, sortOrder, onSortAction, children, ...elemProps }, ref) => {
+        return (_jsx(Table.Header, { ref: ref, scope: "col", "aria-sort": sortOrder, ...elemProps, children: _jsx(Tooltip, { type: "description", title: `Sort ${getNextSortOrder(sortOrder)}`, children: _jsx(TertiaryButton, { icon: getSortIcon(sortOrder), iconPosition: "end", onClick: () => onSortAction(label), children: children }) }) }));
+    },
+});
+const textStyles = createStyles({
+    paddingInlineStart: system.space.x3,
+});
+export const SortableColumnHeaders = () => {
+    const [headerRowState, headerRowDispatch] = React.useReducer(headerRowReducer, initialHeaderRowState);
+    function sortColumnHandler(columnName) {
+        headerRowDispatch({
+            column: columnName,
+            payload: countryData,
+        });
+    }
+    return (_jsxs(Table, { maxHeight: "40rem", children: [_jsx(Table.Caption, { children: "Population Listed by Country (2021)" }), _jsx(Table.Head, { children: _jsxs(Table.Row, { children: [_jsx(SortableColumnHeader, { label: "Country", sortOrder: headerRowState.column1SortDirection, onSortAction: sortColumnHandler, children: "Country" }), _jsx(SortableColumnHeader, { label: "Capital", sortOrder: headerRowState.column2SortDirection, onSortAction: sortColumnHandler, children: "Capital" }), _jsx(SortableColumnHeader, { label: "Population", sortOrder: headerRowState.column3SortDirection, onSortAction: sortColumnHandler, children: "Population" })] }) }), _jsx(Table.Body, { children: countryData.map(item => {
+                    return (_jsxs(Table.Row, { children: [_jsx(Table.Header, { scope: "row", children: _jsx(Text, { cs: textStyles, children: item.country }) }), _jsx(Table.Cell, { children: _jsx(Text, { cs: textStyles, children: item.capital }) }), _jsx(Table.Cell, { children: _jsx(Text, { cs: textStyles, children: item.population.toLocaleString() }) })] }, item.country));
+                }) })] }));
+};

package/dist/mdx/accessibility/AccessibilityOverview.mdx

@@ -0,0 +1,167 @@
+## Canvas Kit Accessibility
+
+Canvas Kit is built with accessibility in mind and we continuously strive to provide a robust set of
+accessible components that are easy to customize for your needs. Core concepts and key investments
+made by the Canvas Kit development team are introduced in the sections below and throughout this
+guide.
+
+## Read Me First
+
+**No ARIA is better than Bad ARIA.**
+[Read Me First | APG | WAI | W3C](https://www.w3.org/WAI/ARIA/apg/practices/read-me-first/)
+
+Accessible Rich Internet Applications (ARIA) is like CSS styling for assistive technologies. Unlike
+CSS however, ARIA mistakes and gaps in support are not clearly visible to designers and developers.
+Canvas Kit components are built with semantic HTML and include as much of the required ARIA as
+possible according to the [WAI-ARIA 1.2 specification](https://www.w3.org/TR/wai-aria-1.2/)
+recommended by the W3C and the patterns found in the ARIA Authoring Practices Guide. (APG)
+
+## The Accessibility Tree
+
+The Accessibility Tree is created by the web browser from the semantic information provided in the
+document object model (DOM). It's like a simplified outline containing only the most important
+information: the elements on the page, what they are (e.g., a button, a link, a heading), and what
+they do. This tree is what a screen reader uses to tell a person what's on the page and how to
+interact with it.
+
+- `name:` a.k.a. “Label” describes the purpose of an element. (E.g. text fields provided for first
+  name, last name, and street address.)
+- `role:` describes what an element is and how it can be used. (E.g. a text field, radio button
+  group, or single checkbox.)
+- `state:` describes the current state of an element. (E.g. whether a text field is empty or
+  displaying text.)
+
+Further reading:
+[Full accessibility tree in Chrome DevTools](https://developer.chrome.com/blog/full-accessibility-tree#main-content)
+
+## Accessible Names and Descriptions
+
+Giving an element an **accessible name** is like giving it a label. It's a short phrase, like
+"Search" or "Submit," that a screen reader uses to tell a person what an item is. This helps a user
+understand the element's purpose and tell it apart from other items on the page. Some items, like
+buttons and links, are required to have an accessible name. You can also add an **accessible
+description** if you need to provide more information. This could be instructions for a form field
+or a longer explanation of what a button does. A screen reader will read the name first, and then
+the description, giving the user all the information they need to understand and use the element.
+
+To make a website accessible to everyone, follow these five cardinal rules for naming web elements:
+always **prefer visible text and native techniques** like HTML labels, which are simpler and more
+reliable. You should also **avoid browser fallback** like the title attribute or placeholder values.
+The names themselves should be **brief and useful**. Lastly, you should always **heed warnings and
+test thoroughly** to ensure everything works correctly.
+
+### Naming Priority (Simplified):
+
+1. `aria-labelledby` (unique id)
+2. `aria-label` (string)
+3. `<label>` and `for` attribute with unique `id` (for input)
+4. `placeholder` (for input)
+5. `alt` (for images)
+6. `text content` (between opening and closing tags)
+7. `title` (string)
+
+Further reading:
+[Providing Accessible Names and Descriptions | APG | WAI | W3C](https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/)
+
+## `<AccessibleHide>` Component
+
+```
+<AccessibleHide>
+  This text is hidden using CSS and still available to screen readers.
+</AccessibleHide>
+```
+
+## `<AriaLiveRegion>` Component
+
+```
+/**
+* This component includes:
+* aria-atomic="true"
+* aria-live="polite"
+* role="status"
+*/
+<AriaLiveRegion>
+  When this text is updated, screen readers will announce it automatically in live time.
+</AriaLiveRegion>
+```
+
+Check out our [Aria Live Region Examples](?path=/docs/guides-accessibility-aria-live-regions--docs)
+for more detailed information about this topic.
+
+Sometimes, things change on a webpage without the whole page reloading. Think of a live sports score
+that updates every few seconds or a search result that appears as you type. For users of screen
+readers, these changes can be missed because the screen reader doesn't know to look for them. This
+is where **ARIA live regions** come in. An ARIA live region is a special area on a webpage that
+tells a screen reader to pay close attention to it. When the content in this area changes, the
+screen reader automatically announces the update to the user. This ensures that everyone, including
+those using assistive technology, is kept aware of important, real-time changes on the page.
+
+## `useUniqueId()` Hook
+
+This handy utility function is useful anytime a unique ID is needed for assigning labels,
+descriptions, or for anything else in the web application.
+
+```
+/**
+* This example demonstrates using 'aria-labelledby' on the table container
+* instead of using HTML <caption> to assign a name for the table.
+*/
+const tableHeadingId = useUniqueId();
+...
+<Heading id={tableHeadingId}> Pizza Toppings </Heading>
+...
+<Table aria-labelledby={tableHeadingId}>
+  /* table rows */
+</Table>
+
+```
+
+Example:
+[Components > Containers > Table > Basic With Heading](?path=/story/components-containers-table--basic-with-heading)
+
+## `px2rem()` Function
+
+This is another handy utility function that will convert pixel units into relative units. While
+using the [Canvas Token System](?path=/docs/guides-tokens-migration-overview--docs) is **strongly
+recommended** first, this is a nice tool for using relative units if a space token isn't feasible.
+
+Further reading: [Canvas Kit Styling Utilities](?path=/docs/styling-utilities--docs)
+
+```
+/**
+* This example demonstrates the main content region
+* of the grid to have a height of 800px.
+*/
+const gridLayoutStyles = createStyles({
+  ...
+  gridTemplateRows: `auto ${px2rem(800)} auto`,
+});
+```
+
+Example:
+[Guides > Accessibility > Page Structure](?path=/docs/guides-accessibility-page-structure--docs)
+
+## Responsiveness and Reflow
+
+**WCAG v2.2 success criterion 1.4.10 Reflow states:**
+
+> _“Content can be presented without loss of information or functionality, and without requiring
+> scrolling in two dimensions for vertical scrolling content at a width equivalent to 320 CSS pixels
+> and horizontal scrolling content at a height equivalent to 256 CSS pixels. ”_
+
+Of course, there are exceptions to this guideline, including tables that do not apply. (Source:
+[Understanding Success Criterion 1.4.10 Reflow](https://www.w3.org/WAI/WCAG22/Understanding/reflow.html))
+In general, we have 2 key recommendations for satisfying this guideline:
+
+1. Do not specify a minimum width greater than `320px` to avoid unnecessary horizontal scroll.
+2. Do not use any sticky headers or footers at the smallest responsive breakpoints.
+
+### How we test against this guideline:
+
+Set the browser viewport to `1280px x 1024px` and increase browser zoom to 400%. This is
+mathetmatically equivalent to a width of 320 pixels and a height of 256 pixels required by the
+guideline.
+
+- Evaluate whether any horizontal scroll isn't necessary in the application.
+- Evaluate whether there is any loss of function due to sticky content.
+- Look for clipping, overlapping, or otherwise unreadable text.

package/dist/mdx/accessibility/AccessibilityTesting.mdx

@@ -0,0 +1,10 @@
+import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
+import WithFormFields from './examples/Table/WithFormFields';
+
+
+## Table with form field components
+
+- Using `aria-labelledby` id references on the form field inputs to the column header name
+- Testing form fields as table row headers
+
+<ExampleCodeBlock code={WithFormFields} />

package/dist/mdx/{react/_examples/mdx → accessibility}/Headers.mdx

@@ -1,6 +1,5 @@
 import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
 
-import {Basic as PageHeaderBasic} from './examples/PageHeader';
 import {Basic as GlobalHeaderBasic} from './examples/GlobalHeader';
 
 

package/dist/mdx/accessibility/PageStructure.mdx

@@ -0,0 +1,58 @@
+import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
+import LandmarkRegaions from './examples/PageStructure/LandmarkRegions';
+import FullPageDemo from './examples/PageStructure/FullPageDemo';
+
+
+## Making Webpages Easy to Use for Everyone
+
+Making a webpage easy to understand is important for everyone, especially for people with
+disabilities. We do this by giving the page a clear and meaningful structure. This guide explains
+how to use landmark regions, headings, lists, and tables to organize a page.
+
+### Organizing Your Page with Landmark Regions
+
+Imagine a webpage is like a house. It has different rooms for different purposes; a kitchen, a
+bedroom, a living room, and so on. A good webpage is set up the same way. It has different sections,
+like a header at the top, a main content area, and a footer at the bottom.
+
+These sections are called landmark regions. They act like signs that tell a screen reader user where
+they are on the page.
+
+A screen reader user can quickly jump to a specific section, like the main content, without having
+to listen to the whole page.
+
+The most common landmark regions are:
+
+- `<header>`: The top of the page.
+- `<nav>`: The main navigation menu.
+- `<main>`: The most important content on the page.
+- `<footer>`: The bottom of the page.
+
+All the content on the page should be inside one of these landmark regions. If you have two
+navigation sections, make sure to give them different names so a screen reader can tell them apart.
+For example, a global navigation region should be distinguishable from a bread crumb navigation
+region.
+
+<ExampleCodeBlock code={LandmarkRegaions} />
+
+### Using Headings to Outline Your Content
+
+Headings are like the chapters and subheadings in a book. They create a clear outline for the page.
+Just like you can scan a book's table of contents to see what it's about, a screen reader user can
+get a list of all the headings on a page to understand its structure.
+
+- Start your page's main content with a single `<h1>` heading. This is the most important title on
+  the page.
+- Use other headings (`<h2>`, `<h3>`, etc.) to create a clear order. Don't skip levels if possible.
+  For example, don't jump straight from an `<h1>` to an `<h4>` heading unless the content design
+  hierarchy leaves no other options.
+- The heading levels should match how important the text looks on the page. The biggest, boldest
+  titles should be `<h1>`, and so on.
+
+## Full Page Demo
+
+Further reading:
+[Examples > Page Header](?path=/docs/guides-accessibility-examples-page-header--docs) and
+[Examples > Side Panel Navigation](?path=/docs/guides-accessibility-examples-side-panel-navigation--docs)
+
+<ExampleCodeBlock code={FullPageDemo} />

package/dist/mdx/{react/_examples/mdx → accessibility}/SidePanel.mdx

@@ -1,6 +1,5 @@
 import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
 import WithNavigation from './examples/SidePanelWithNavigation';
-import WithOverlay from './examples/SidePanelWithOverlay';
 
 
 ## Side Panel As Navigation
@@ -22,8 +21,4 @@ wide range of support for accessibility.
 - In the compact view, the `<Tooltip>` component is used to provide an accessible name to the icon
   button menu targets
 
-<ExampleCodeBlock code={WithNavigation} />
-
-## Side Panel With Overlay
-
-<ExampleCodeBlock code={WithOverlay} />
+<ExampleCodeBlock code={WithNavigation} />

package/dist/mdx/{react/_examples/mdx → accessibility}/TablesAdvanced.mdx

@@ -8,6 +8,17 @@ import FilterableColumnHeaders from './examples/Table/WithColumnHeaderFilters';
 
 ## Advanced Table Examples
 
+Tables should only be used to organize data that has a clear relationship between rows and columns,
+like a calendar or a schedule. Never use a table just for page layout.
+
+When you use the proper HTML table markup, a screen reader can help a user navigate the table. It
+will automatically read the column and row headers as they move through the data, so they always
+know what information they're looking at.
+
+- All tables should have a clear header and a descriptive title.
+- Keep your tables simple. If a table is too complex, it might be better to break it up into several
+  smaller tables or use a different format.
+
 Out of the box, `Table` is a lightweight compound component with a high degree of flexibility, but
 not much functionality outside of providing a basic table layout. This flexibility lets developers
 implement common features, such as selecting rows and sorting columns, on top of `Table` to meet

package/dist/mdx/accessibility/WindowsHighContrastThemes.mdx

@@ -0,0 +1,97 @@
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import iconBefore from './assets/icons-before-whcm.png';
+import iconAfter from './assets/icons-after-whcm.png';
+import checkMark from './assets/checkmarks.png';
+import checkMarkWhcm from './assets/checkmarks-whcm.png';
+import borderOutline from './assets/border-outline-dialog-tooltip-3.png';
+import buttonFocus from './assets/button-focus-2.png';
+import menuFocus from './assets/menu-focus.png';
+
+
+## Supporting Windows 11 High Contrast Desktop Themes
+
+High-contrast themes in Windows 11 are crucial for accessibility. High contrast themes overwrite CSS
+colors including `color`, `backgroundColor`, and `boxShadow`, while `border` and `outline`
+properties retain their settings. To ensure your UI is compatible, follow these best practices for
+improved visibility.
+
+Further reading:
+[Change color contrast in Windows](https://support.microsoft.com/en-us/windows/change-color-contrast-in-windows-fedc744c-90ac-69df-aed5-c8a90125e696)
+
+### Focus Indicators:
+
+Since Canvas Kit components rely on `boxShadow` for the keyboard focus state, it won’t be visible in
+high contrast themes. We’ve added a `2px solid transparent` CSS `outline` to ensure a focus
+indicator remains visible. Use `outlineOffset` to add space between the element and the outline for
+aesthetics. We’ve used a `2px` offset on components like
+[BaseButton](https://github.com/Workday/canvas-kit/blob/master/modules/react/button/lib/BaseButton.tsx)
+to match the visual design of the `boxShadow` in the system. A `-2px` negative offset is used for
+focusable components inside popup containers like the `<Menu>` component to ensure the focus
+indicator isn’t clipped off the edge. (For example:
+[MenuItem](https://github.com/Workday/canvas-kit/blob/master/modules/react/menu/lib/MenuItem.tsx).)
+
+<Flex justifyContent="space-evenly" paddingBottom={system.space.x4}>
+  <img src={buttonFocus} alt="Primary button with outline offset 2 pixels" />
+  <img src={menuFocus} alt="Menu item with outline offset -2 pixels" />
+</Flex>
+
+### Boundary Borders and Outlines:
+
+If content needs to be grouped with a boundary in high contrast themes, using a `transparent` CSS
+`outline` can be useful because it won’t cause alignment problems on the page. We’ve done this to
+draw boundaries in components that don't have any focus state like
+[ModalCard](https://github.com/Workday/canvas-kit/blob/master/modules/react/modal/lib/ModalCard.tsx)
+and
+[TooltipContainer](https://github.com/Workday/canvas-kit/blob/master/modules/react/tooltip/lib/TooltipContainer.tsx).
+
+<Flex justifyContent="center">
+  <figure margin="0">
+    <img src={borderOutline} alt="" />
+    <figcaption style={{width: px2rem(300)}}>
+      CSS outlines appear in high contrast mode around dialog containers and tooltips
+    </figcaption>
+  </figure>
+</Flex>
+
+### Images:
+
+`<img>` elements, which are for images like JPEGs or PNGs, are not affected by high contrast themes.
+If you use a meaningful image with a transparent background, it could become difficult to see
+against some background colors. Be careful when using such images for conveying information to
+users.
+
+<Flex justifyContent="space-evenly" paddingBottom={system.space.x4}>
+  <img src={checkMark} alt="Check mark images highly visible on white background" />
+  <img src={checkMarkWhcm} alt="Check mark images have poor contrast on dark background" />
+</Flex>
+
+### SVG Icons
+
+The colors inside `<svg>` elements usually don't change with high contrast themes, which can make
+them hard to see on some backgrounds. We’ve used a media query to set the icon `fill` and `color`
+properties to `currentColor` ensuring the icon uses the correct color from the user's preferred high
+contrast theme.
+
+```
+// for Windows high contrast desktop themes
+'@media (prefers-contrast: more)': {
+  '.wd-icon-fill, .wd-icon-accent': {
+    color: 'currentColor',
+    fill: 'currentColor',
+  },
+},
+```
+
+<Flex justifyContent='space-evenly'>
+<figure margin='0'>
+  <img src={iconBefore} alt="" />
+  <figcaption style={{width: px2rem(370)}}>Before: The mail icon color has poor contrast on dark backgrounds</figcaption>
+</figure>
+
+<figure margin='0'>
+  <img src={iconAfter} alt="" />
+  <figcaption style={{width: px2rem(370)}}>After: The mail icon inherits the theme's current color for best contrast</figcaption>
+</figure>
+</Flex>

package/dist/mdx/react/layout/examples/Grid/Basic.tsx

@@ -1,69 +1,50 @@
-import * as React from 'react';
-import {Grid, GridProps, Box} from '@workday/canvas-kit-react/layout';
-import {type} from '@workday/canvas-kit-react/tokens';
-import styled from '@emotion/styled';
-
-// temporary placeholder until type components are added to canvas-kit
-
-const StyledHeading = styled(Box.as('h3'))({
-  ...type.levels.body.large,
-  ...type.variants.inverse,
-  margin: 0,
-  fontWeight: type.properties.fontWeights.bold,
+import {Grid} from '@workday/canvas-kit-react/layout';
+import {Heading} from '@workday/canvas-kit-react/text';
+import {system} from '@workday/canvas-tokens-web';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+
+const containerStyles = createStyles({
+  gridTemplateAreas:
+    "'Header Header Header Header' 'SideBar BodyContent BodyContent BodyContent' 'Footer Footer Footer Footer'",
+  gridGap: system.space.x4,
+  gridTemplateColumns: '3fr 9fr',
+  gridTemplateRows: `auto ${px2rem(300)} auto`,
 });
 
-const borderPadProps = {
-  borderRadius: 'm',
-  padding: 's',
-};
-
-const Header = ({children, ...props}: GridProps) => (
-  <Grid as="header" gridArea="Header" depth={1} {...props} {...borderPadProps}>
-    {children}
-  </Grid>
-);
-
-const BodyContent = ({children, ...props}: GridProps) => (
-  <Grid as="main" gridArea="BodyContent" depth={1} {...props} {...borderPadProps}>
-    {children}
-  </Grid>
-);
-
-const SideBar = ({children, ...props}: GridProps) => (
-  <Grid as="aside" gridArea="SideBar" depth={1} {...props} {...borderPadProps}>
-    {children}
-  </Grid>
-);
+const gridStyles = createStyles({
+  backgroundColor: system.color.bg.primary.default,
+  borderRadius: system.shape.x1,
+  boxShadow: system.depth[1],
+  padding: system.space.x4,
+});
 
-const Footer = ({children, ...props}: GridProps) => (
-  <Grid as="footer" gridArea="Footer" depth={1} {...props} {...borderPadProps}>
-    {children}
-  </Grid>
-);
+const headingStyles = createStyles({
+  margin: system.space.zero,
+  ...system.type.heading.small,
+});
 
 export default () => {
-  const parentCont = {
-    gridTemplateAreas:
-      "'Header Header Header Header' 'SideBar BodyContent BodyContent BodyContent' 'Footer Footer Footer Footer'",
-    gridGap: 's',
-    gridTemplateColumns: '3fr 9fr',
-    gridTemplateRows: 'auto 300px auto',
-  };
   return (
-    <Grid as="section" padding="s">
-      <Grid {...parentCont}>
-        <Header backgroundColor="blueberry400">
-          <StyledHeading>Header</StyledHeading>
-        </Header>
-        <SideBar backgroundColor="blueberry300">
-          <StyledHeading>SideBar</StyledHeading>
-        </SideBar>
-        <BodyContent backgroundColor="plum300">
-          <StyledHeading>Body Content</StyledHeading>
-        </BodyContent>
-        <Footer backgroundColor="berrySmoothie300">
-          <StyledHeading>Footer</StyledHeading>
-        </Footer>
+    <Grid cs={containerStyles}>
+      <Grid as="header" gridArea="Header" cs={gridStyles}>
+        <Heading variant="inverse" size="small" cs={headingStyles}>
+          Page Header
+        </Heading>
+      </Grid>
+      <Grid as="nav" gridArea="SideBar" cs={gridStyles}>
+        <Heading variant="inverse" size="small" cs={headingStyles}>
+          Navigation
+        </Heading>
+      </Grid>
+      <Grid as="main" gridArea="BodyContent" cs={gridStyles}>
+        <Heading variant="inverse" size="small" cs={headingStyles}>
+          Main Content
+        </Heading>
+      </Grid>
+      <Grid as="footer" gridArea="Footer" cs={gridStyles}>
+        <Heading variant="inverse" size="small" cs={headingStyles}>
+          Page Footer
+        </Heading>
       </Grid>
     </Grid>
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "14.0.0",
+  "version": "14.0.2",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -45,10 +45,10 @@
     "@emotion/styled": "^11.6.0",
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^14.0.0",
-    "@workday/canvas-kit-preview-react": "^14.0.0",
-    "@workday/canvas-kit-react": "^14.0.0",
-    "@workday/canvas-kit-styling": "^14.0.0",
+    "@workday/canvas-kit-labs-react": "^14.0.2",
+    "@workday/canvas-kit-preview-react": "^14.0.2",
+    "@workday/canvas-kit-react": "^14.0.2",
+    "@workday/canvas-kit-styling": "^14.0.2",
     "@workday/canvas-system-icons-web": "^3.0.36",
     "@workday/canvas-tokens-web": "^3.0.0",
     "markdown-to-jsx": "^7.2.0",
@@ -61,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "f3daaebdf010e739066e6fd32b745997fd813a26"
+  "gitHead": "c57ff7b71c46b677f04e665ddf925cd40e036a5d"
 }

package/dist/mdx/react/_examples/mdx/AccessibilityOverview.mdx

@@ -1,18 +0,0 @@
-## Accessibility Overview Coming Soon!
-
-Canvas Kit is built with accessibility in mind. We continuously strive to provide a robust set of
-accessible components that are easy to customize for your specific needs.
-
-## What you can expect
-
-- Introduction to the accessibility tree
-- Introduction to the accessible name and description calculation
-- Supporting Windows 11 high contrast desktop themes
-- Responsiveness and reflow
-- Introduction to ARIA live regions
-
-### Bigger and better examples
-
-- Page layouts with landmark regions and structured content headings
-- Cards, clickable cards, and lists of cards
-- Forms and error handling