@workday/canvas-kit-docs 14.2.2 → 14.2.4

package/dist/mdx/labs-react/side-panel/examples/OnStateTransition.tsx

@@ -37,7 +37,9 @@ export default () => {
     <Flex cs={stylesOverride.viewport}>
       <SidePanel model={model}>
         <SidePanel.ToggleButton />
-        <AccessibleHide id={model.state.labelId}>Hidden Title</AccessibleHide>
+        <SidePanel.Heading hidden size="small">
+          Hidden Title
+        </SidePanel.Heading>
       </SidePanel>
       <Flex as="main" cs={stylesOverride.main}>
         <Text as="p" typeLevel="body.large">

package/dist/mdx/labs-react/side-panel/examples/RightOrigin.tsx

@@ -1,7 +1,7 @@
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {SidePanel, useSidePanelModel} from '@workday/canvas-kit-labs-react/side-panel';
 import {Flex} from '@workday/canvas-kit-react/layout';
-import {Heading, Text} from '@workday/canvas-kit-react/text';
+import {Text} from '@workday/canvas-kit-react/text';
 import {CanvasProvider} from '@workday/canvas-kit-react/common';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
@@ -37,15 +37,9 @@ const RightPanel = () => {
 
   return (
     <SidePanel model={model} className={stylesOverride.panelContainer}>
-      <SidePanel.ToggleButton />
+      <SidePanel.ToggleButton aria-label="Collapse View" />
       <Flex cs={stylesOverride.panel}>
-        <Heading
-          size="small"
-          hidden={model.state.transitionState === 'collapsed' ? true : undefined}
-          id={model.state.labelId}
-        >
-          Tasks Panel
-        </Heading>
+        <SidePanel.Heading size="small">Tasks Panel</SidePanel.Heading>
       </Flex>
     </SidePanel>
   );

package/dist/mdx/labs-react/side-panel/examples/Variant.tsx

@@ -35,15 +35,9 @@ export default () => {
     <CanvasProvider dir={direction}>
       <Flex cs={stylesOverride.viewport}>
         <SidePanel model={model} variant="alternate">
-          <SidePanel.ToggleButton />
+          <SidePanel.ToggleButton aria-label="Collapse View" />
           <Flex cs={stylesOverride.panel}>
-            <Heading
-              size="small"
-              hidden={model.state.transitionState === 'collapsed' ? true : undefined}
-              id={model.state.labelId}
-            >
-              Alternate Panel
-            </Heading>
+            <SidePanel.Heading size="small">Alternate Panel</SidePanel.Heading>
           </Flex>
         </SidePanel>
         <Flex as="main" cs={stylesOverride.main}>

package/dist/mdx/preview-react/multi-select/MultiSelect.mdx

@@ -30,11 +30,11 @@ yarn add @workday/canvas-kit-preview-react
 ### Basic Example
 
 `MultiSelect` supports a
-[dynamic API](/getting-started/for-developers/resources/collection-api/#dynamic-items) where you
+[dynamic API](/get-started/for-developers/guides/collection-api/#dynamic-items) where you
 pass an array of items via the `items` prop and provide a render function to display the items. The
 items may be provided as an
-[array of strings](/getting-started/for-developers/resources/collection-api/#array-of-strings) or an
-[array of objects](/getting-started/for-developers/resources/collection-api/#array-of-objects).
+[array of strings](/get-started/for-developers/guides/collection-api/#array-of-strings) or an
+[array of objects](/get-started/for-developers/guides/collection-api/#array-of-objects).
 
 `MultiSelect` should be used in tandem with [Form Field](/components/inputs/form-field/) where the
 `MultiSelect` wraps the `FormField` element and the `FormField` element wraps the children of

package/dist/mdx/preview-react/segmented-control/SegmentedControl.mdx

@@ -12,7 +12,7 @@ import Dynamic from './examples/Dynamic';
 # Canvas Kit Segmented Control
 
 Segmented Control is a
-[compound component](/getting-started/for-developers/resources/compound-components/) that represents
+[compound component](/get-started/for-developers/documentation/compound-components/) that represents
 a linear group of multiple buttons allowing the selection of a specific value.
 
 [> Workday Design Reference](https://design.workday.com/components/buttons/segmented-control)
@@ -124,7 +124,7 @@ Set the `disabled` prop of `SegmentedControl` to disable the entire component in
 ### Dynamic Items
 
 `SegmentedControl` supports a
-[dynamic API](/getting-started/for-developers/resources/collection-api/#dynamic-items) where instead
+[dynamic API](/get-started/for-developers/guides/collection-api/#dynamic-items) where instead
 of statically providing the JSX for each `SegmentedControl.Item`, you pass an array of `items` in
 the `model` state and provide a render function to display the items.
 

package/dist/mdx/preview-react/status-indicator/StatusIndicator.mdx

@@ -51,7 +51,7 @@ We **strongly** discourage using text in a `StatusIndicator` which will cause it
 maximum width of `200px`. In situations where this cannot be avoided and text must be overflowed, we
 suggest wrapping `StatusIndicator` in an `OverflowTooltip` and applying `tabIndex={0}` to it so the
 overflowed text is accessible via keyboard and mouse. You may also override the default `maxWidth`
-of `StatusIndicator` via [style props](/getting-started/for-developers/resources/style-props/).
+of `StatusIndicator` via [style props](/get-started/for-developers/documentation/style-props/).
 
 <ExampleCodeBlock code={Overflow} />
 

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

@@ -7,7 +7,7 @@ import OverflowActionBarCustomButtonCount from './examples/OverflowActionBarCust
 
 # Canvas Kit Action Bar
 
-Action Bar is a [compound component](/getting-started/for-developers/resources/compound-components/)
+Action Bar is a [compound component](/get-started/for-developers/documentation/compound-components/)
 that contains primary and secondary actions related to a page or task.
 
 [> Workday Design Reference](https://design.workday.com/components/buttons/action-bar)

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

@@ -13,7 +13,7 @@ import StickyRTL from './examples/StickyRTL';
 
 # Canvas Kit Banner
 
-`Banner` is a [compound component](/getting-started/for-developers/resources/compound-components/)
+`Banner` is a [compound component](/get-started/for-developers/documentation/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)

package/dist/mdx/react/breadcrumbs/Breadcrumbs.mdx

@@ -8,7 +8,7 @@ import LinkTruncation from './examples/LinkTruncation';
 # Canvas Kit Breadcrumbs
 
 Breadcrumbs is a
-[compound component](/getting-started/for-developers/resources/compound-components/) that allows
+[compound component](/get-started/for-developers/documentation/compound-components/) that allows
 users to keep track and maintain awareness of their location as they navigate through pages,
 folders, files, etc.
 

package/dist/mdx/react/card/card.mdx

@@ -9,7 +9,7 @@ import WithStencils from './examples/Stencils';
 # Canvas Kit Card
 
 A Card is a preview that serves as an entry point to more detailed information. Card is a
-presentational [compound component](/getting-started/for-developers/resources/compound-components/)
+presentational [compound component](/get-started/for-developers/documentation/compound-components/)
 used as a building block for other components such as [Popup](/components/popups/popup/) and
 [Modal](/components/popups/modal/).
 

package/dist/mdx/react/common/mdx/CompoundComponentUtilities.mdx

@@ -10,7 +10,7 @@ import CreateComponent from './examples/CreateComponent';
 # Compound Component Utilities
 
 The following utilities are used to create and compose
-[compound components](/getting-started/for-developers/resources/compound-components/).
+[compound components](/get-started/for-developers/documentation/compound-components/).
 
 ## Installation
 

package/dist/mdx/react/layout/Box.mdx

@@ -1,4 +1,4 @@
-import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
+import { ExampleCodeBlock } from '@workday/canvas-kit-docs';
 import Basic from './examples/Box/Basic';
 
 # Box
@@ -31,18 +31,18 @@ supports all `BoxProps` such as `padding`, it also supports semantic anchor elem
 
 ### Style Props
 
-`Box` exposes [style props](/getting-started/for-developers/resources/style-props/) that allow you
+`Box` exposes [style props](/get-started/for-developers/documentation/style-props/) that allow you
 to modify styles in an ergonomic way across components. To learn more about individual sets of `Box`
 style props, consult the lists below.
 
-- [Background Style Props](/getting-started/for-developers/resources/style-props/#background)
-- [Border Style Props](/getting-started/for-developers/resources/style-props/#border)
-- [Color Style Props](/getting-started/for-developers/resources/style-props/#color)
-- [Depth Style Props](/getting-started/for-developers/resources/style-props/#depth)
-- [Flex Item Style Props](/getting-started/for-developers/resources/style-props/#flex-item)
-- [Grid Item Style Props](/getting-started/for-developers/resources/style-props/#grid-item)
-- [Layout Style Props](/getting-started/for-developers/resources/style-props/#layout)
-- [Other Style Props](/getting-started/for-developers/resources/style-props/#other)
-- [Position Style Props](/getting-started/for-developers/resources/style-props/#position)
-- [Space Style Props](/getting-started/for-developers/resources/style-props/#space)
-- [Text Style Props](/getting-started/for-developers/resources/style-props/#text)
+- [Background Style Props](/get-started/for-developers/documentation/style-props/#background)
+- [Border Style Props](/get-started/for-developers/documentation/style-props/#border)
+- [Color Style Props](/get-started/for-developers/documentation/style-props/#color)
+- [Depth Style Props](/get-started/for-developers/documentation/style-props/#depth)
+- [Flex Item Style Props](/get-started/for-developers/documentation/style-props/#flex-item)
+- [Grid Item Style Props](/get-started/for-developers/documentation/style-props/#grid-item)
+- [Layout Style Props](/get-started/for-developers/documentation/style-props/#layout)
+- [Other Style Props](/get-started/for-developers/documentation/style-props/#other)
+- [Position Style Props](/get-started/for-developers/documentation/style-props/#position)
+- [Space Style Props](/get-started/for-developers/documentation/style-props/#space)
+- [Text Style Props](/get-started/for-developers/documentation/style-props/#text)

package/dist/mdx/react/layout/Flex.mdx

@@ -52,13 +52,13 @@ building layouts.
 #### Props
 
 `Flex` exposes
-[flex container style props](/getting-started/for-developers/resources/style-props/#flex) and `Box`
+[flex container style props](/get-started/for-developers/documentation/style-props/#flex) and `Box`
 style props.
 
 ### Flex.Item
 
 `Flex.Item` is a subcomponent of `Flex`. It is a `Box` component under the hood and exposes
-[flex item style props](/getting-started/for-developers/resources/style-props/#flex-item) that map
+[flex item style props](/get-started/for-developers/documentation/style-props/#flex-item) that map
 to CSS Flexbox Item properties. This provides greater control over how child components render in
 your layout.
 
@@ -73,5 +73,5 @@ your layout.
 #### Props
 
 `Flex.Item` exposes
-[flex item style props](/getting-started/for-developers/resources/style-props/#flex-item) and `Box`
+[flex item style props](/get-started/for-developers/documentation/style-props/#flex-item) and `Box`
 style props.

package/dist/mdx/react/layout/Grid.mdx

@@ -9,7 +9,7 @@ import GridLayoutInteractive from './examples/Grid/GridLayoutInteractive';
 two-dimensional layouts (rows and columns) with
 [CSS Grid](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids).
 
-Please refer to our [layout examples](/examples/layout/) for more examples of how to implement
+Please refer to our [layout examples](/examples-layouts--docs) for more examples of how to implement
 different layouts using `Grid`.
 
 ## Installation
@@ -96,13 +96,13 @@ layouts.
 #### Props
 
 `Grid` exposes
-[grid container style props](/getting-started/for-developers/resources/style-props/#grid) and `Box`
+[grid container style props](/get-started/for-developers/documentation/style-props/#grid) and `Box`
 style props.
 
 ### Grid.Item
 
 `Grid.Item` is a subcomponent of `Grid`. It is a `Box` component under the hood and exposes
-[grid item style props](/getting-started/for-developers/resources/style-props/#grid) that map to CSS
+[grid item style props](/get-started/for-developers/documentation/style-props/#grid) that map to CSS
 Grid Item properties. This provides greater control over how child components render in your layout.
 
 ```tsx

package/dist/mdx/react/pagination/pagination.mdx

@@ -10,7 +10,7 @@ import RTL from './examples/RTL';
 # Canvas Kit Pagination
 
 `Pagination` is a
-[compound component](/getting-started/for-developers/resources/compound-components/) that allows
+[compound component](/get-started/for-developers/documentation/compound-components/) that allows
 users to navigate between pages in a range.
 
 [> Workday Design Reference](https://design.workday.com/components/navigation/pagination)
@@ -46,7 +46,7 @@ readers.
 By default, `Pagination` will create and use its own [model](#model) internally. Alternatively, you
 may configure your own model with `usePaginationModel` and pass it to `Pagination` via the `model`
 prop. This pattern is referred to as
-[hoisting the model](/getting-started/for-developers/resources/compound-components/#configuring-a-model)
+[hoisting the model](/get-started/for-developers/documentation/compound-components/#configuring-a-model)
 and provides direct access to its `state` and `events` outside of the `Pagination` component.
 
 In this example, we set up external observation of the model state and create an external button to
@@ -94,7 +94,7 @@ You can use `useResizeObserver` to accomplish this as in the example below.
 ## Model
 
 If `Pagination` 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
+[model](/get-started/for-developers/documentation/compound-components/#models). The model is an
 object composed of two parts: `state` which describes the current snapshot in time of the component
 and `events` which describes events that can be sent to the model.
 
@@ -135,7 +135,7 @@ export const CustomPagination = () => {
 Alternatively, if you need direct access to the model's `state` and `events` outside of the
 `Pagination` component, you may configure your own model with `usePaginationModel` and pass it to
 `Pagination` via a pattern called
-[hoisting the model](/getting-started/for-developers/resources/compound-components/#configuring-a-model).
+[hoisting the model](/get-started/for-developers/documentation/compound-components/#configuring-a-model).
 
 ```tsx
 const model = usePaginationModel({

package/dist/mdx/react/popup/Popup.mdx

@@ -44,7 +44,7 @@ yarn add @workday/canvas-kit-react
 ## Usage
 
 The `Popup` component is a generic
-[Compound Component](/getting-started/for-developers/resources/compound-components/) that is used to
+[Compound Component](/get-started/for-developers/documentation/compound-components/) that is used to
 build popup UIs that are not already covered by Canvas Kit.
 
 ### Basic Example

package/dist/mdx/react/select/Select.mdx

@@ -40,11 +40,11 @@ yarn add @workday/canvas-kit-react
 ### Basic Example
 
 `Select` supports a
-[dynamic API](/getting-started/for-developers/resources/collection-api/#dynamic-items) where you
+[dynamic API](/get-started/for-developers/guides/collection-api/#dynamic-items) where you
 pass an array of items via the `items` prop and provide a render function to display the items. The
 items may be provided as an
-[array of strings](/getting-started/for-developers/resources/collection-api/#array-of-strings) or an
-[array of objects](/getting-started/for-developers/resources/collection-api/#array-of-objects).
+[array of strings](/get-started/for-developers/guides/collection-api/#array-of-strings) or an
+[array of objects](/get-started/for-developers/guides/collection-api/#array-of-objects).
 
 `Select` should be used in tandem with [Form Field](/components/inputs/form-field/) where the
 `Select` wraps the `FormField` element and the `FormField` element wraps the children of `Select` to
@@ -74,7 +74,7 @@ value of the `Select`.
 By default, `Select` will create and use its own model internally. Alternatively, you may configure
 your own model with `useSelectModel` and pass it to `Select` via the `model` prop. This pattern is
 referred to as
-[hoisting the model](/getting-started/for-developers/resources/compound-components/#configuring-a-model)
+[hoisting the model](/get-started/for-developers/documentation/compound-components/#configuring-a-model)
 and provides direct access to its `state` and `events` outside of the `Select` component.
 
 In this example, we set up external observation of the model state and create an external button to

package/dist/mdx/react/tabs/Tabs.mdx

@@ -12,7 +12,7 @@ import DynamicTabs from './examples/DynamicTabs';
 
 # Canvas Kit Tabs
 
-`Tabs` is a [compound component](/getting-started/for-developers/resources/compound-components/)
+`Tabs` is a [compound component](/get-started/for-developers/documentation/compound-components/)
 that allows users to navigate between related views of content while remaining in context of the
 page.
 
@@ -57,7 +57,7 @@ should render.
 By default, `Tabs` will create and use its own [model](#model) internally. Alternatively, you may
 configure your own model with `useTabsModel` and pass it to `Tabs` via the `model` prop. This
 pattern is referred to as
-[hoisting the model](/getting-started/for-developers/resources/compound-components/#configuring-a-model)
+[hoisting the model](/get-started/for-developers/documentation/compound-components/#configuring-a-model)
 and provides direct access to its `state` and `events` outside of the `Tabs` component.
 
 In this example, we set up external observation of the model state and create an external button to

package/dist/mdx/react/text/Text.mdx

@@ -19,7 +19,7 @@ yarn add @workday/canvas-kit-react
 ### Basic Example
 
 `Text` is built on top of [`Box`](/components/layout/box/) and supports a multitude of
-[style props](/getting-started/for-developers/resources/style-props/) including spacing props such
+[style props](/get-started/for-developers/documentation/style-props/) including spacing props such
 as `margin` and `padding`, as well as text styling props such as `fontSize` and `fontWeight`.
 
 `Text` renders a `<span>` element by default. You may override the rendered element using the `as`

package/dist/mdx/react/toast/toast.mdx

@@ -9,7 +9,7 @@ import RTL from './examples/RTL';
 
 # Canvas Kit Toast
 
-`Toast` is a [compound component](/getting-started/for-developers/resources/compound-components/)
+`Toast` is a [compound component](/get-started/for-developers/documentation/compound-components/)
 that contains updates or messages about the status of an application's process.
 
 ## Installation

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "14.2.2",
+  "version": "14.2.4",
   "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.2.2",
-    "@workday/canvas-kit-preview-react": "^14.2.2",
-    "@workday/canvas-kit-react": "^14.2.2",
-    "@workday/canvas-kit-styling": "^14.2.2",
+    "@workday/canvas-kit-labs-react": "^14.2.4",
+    "@workday/canvas-kit-preview-react": "^14.2.4",
+    "@workday/canvas-kit-react": "^14.2.4",
+    "@workday/canvas-kit-styling": "^14.2.4",
     "@workday/canvas-system-icons-web": "^3.0.36",
     "@workday/canvas-tokens-web": "^3.1.1",
     "markdown-to-jsx": "^7.2.0",
@@ -61,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "f12db9d8d13c7fa1d37d7e3262756b3acf667767"
+  "gitHead": "039da83fef34eac26de361fc512d548760ec1ee8"
 }