@workday/canvas-kit-docs 15.0.0-alpha.0076-next.0 → 15.0.0-alpha.0090-next.0

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

@@ -2,7 +2,7 @@ import {AccentIcon} from '@workday/canvas-kit-react/icon';
 import {rocketIcon} from '@workday/canvas-accent-icons-web';
 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 {system} from '@workday/canvas-tokens-web';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 
@@ -37,9 +37,9 @@ export default () => {
       <SidePanel model={model}>
         <Flex cs={stylesOverride.panelContainer}>
           <AccentIcon icon={rocketIcon} cs={stylesOverride.accentIcon} />
-          <Heading size="small" cs={stylesOverride.panelHeading} id={model.state.labelId}>
+          <SidePanel.Heading size="small" cs={stylesOverride.panelHeading}>
             Tasks Panel
-          </Heading>
+          </SidePanel.Heading>
         </Flex>
       </SidePanel>
       <Flex as="main" cs={stylesOverride.mainContent}>

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

@@ -1,54 +1,34 @@
 import * as React from 'react';
-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 {AccentIcon} from '@workday/canvas-kit-react/icon';
-import {rocketIcon} from '@workday/canvas-accent-icons-web';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {rocketIcon} from '@workday/canvas-accent-icons-web';
 import {system} from '@workday/canvas-tokens-web';
 
-const stylesOverride = {
-  viewPortContainer: createStyles({
-    height: px2rem(320),
-  }),
-  panel: createStyles({
-    alignItems: 'center',
-    padding: system.space.x4,
-  }),
-  accentIcon: createStyles({
-    marginInlineEnd: system.space.x4,
-  }),
-  mainContent: createStyles({
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexDirection: 'column',
-    flex: 1,
-    flexBasis: 'auto',
-  }),
-};
+const flexHeadingStyles = createStyles({
+  alignItems: 'center',
+  gap: system.space.x2,
+});
+
+const viewPortStyles = createStyles({
+  height: px2rem(320),
+});
 
 export default () => {
   const model = useSidePanelModel();
 
   return (
-    <Flex cs={stylesOverride.viewPortContainer}>
+    <Flex cs={viewPortStyles}>
       <SidePanel model={model}>
-        <SidePanel.ToggleButton />
-        <Flex cs={stylesOverride.panel}>
-          {model.state.transitionState === 'expanded' && (
-            <Flex cs={stylesOverride.accentIcon}>
-              <AccentIcon icon={rocketIcon} />
-            </Flex>
-          )}
-          <Heading
-            size="small"
-            id={model.state.labelId}
-            hidden={model.state.transitionState === 'collapsed' ? true : undefined}
-          >
+        <SidePanel.Heading size="small">
+          <Flex cs={flexHeadingStyles}>
+            <AccentIcon icon={rocketIcon} />
             Tasks Panel
-          </Heading>
-        </Flex>
+          </Flex>
+        </SidePanel.Heading>
+        <SidePanel.ToggleButton aria-label="Collapse View" />
       </SidePanel>
     </Flex>
   );

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 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 {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
@@ -26,19 +26,6 @@ const stylesOverride = {
   }),
 };
 
-/*
- * NOTE TO DEV:
- * Spreading the `controlProps` onto an external control creates serious accessibility issues.
- * - `aria-labelledby` id reference is invalid when the SidePanel is collapsed
- * - `aria-labelledby` will change the name of "Toggle Side Panel" button to "Tasks Panel"
- * - `aria-expanded` won't make sense to screen reader users when the expanded SidePanel content isn't following the control
- * - `aria-controls` is unsupported by screen readers and will not allow users to navigate to the controlled content
- *
- * SOLUTION:
- * - Pass the `controlProps` click handler function down to the external control component.
- * - Add a toggle state to Button components with `aria-pressed` for screen readers,
- * - OR use a similar toggle input like Checkbox or Switch.
- */
 export default () => {
   const model = useSidePanelModel({
     initialTransitionState: 'collapsed',
@@ -48,13 +35,12 @@ export default () => {
   return (
     <Flex cs={stylesOverride.viewport}>
       <SidePanel model={model}>
-        <SidePanel.ToggleButton />
+        <SidePanel.ToggleButton aria-label="Collapse View" />
+        <SidePanel.Heading size="small" cs={stylesOverride.panelHeading}>
+          Task Panel
+        </SidePanel.Heading>
         {model.state.transitionState === 'expanded' && (
-          <Flex cs={stylesOverride.panel}>
-            <Heading size="small" cs={stylesOverride.panelHeading} id={model.state.labelId}>
-              Tasks Panel
-            </Heading>
-          </Flex>
+          <Flex cs={stylesOverride.panel}>Contents</Flex>
         )}
       </SidePanel>
       <Flex as="main" cs={stylesOverride.main}>

package/dist/mdx/labs-react/side-panel/examples/{HiddenName.tsx → Heading.tsx}

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {SidePanel, useSidePanelModel} from '@workday/canvas-kit-labs-react/side-panel';
 import {Flex} from '@workday/canvas-kit-react/layout';
-import {AccessibleHide} from '@workday/canvas-kit-react/common';
 import {Text} from '@workday/canvas-kit-react/text';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 
@@ -28,8 +27,10 @@ export default () => {
   return (
     <Flex cs={stylesOverride.viewport}>
       <SidePanel model={model}>
-        <SidePanel.ToggleButton />
-        <AccessibleHide id={model.state.labelId}>Hidden Title</AccessibleHide>
+        <SidePanel.ToggleButton aria-label="Collapse View" />
+        <SidePanel.Heading hidden size="small">
+          Tasks Panel
+        </SidePanel.Heading>
       </SidePanel>
       <Flex as="main" cs={stylesOverride.main}>
         <Text as="p" typeLevel="body.large">

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/divider/examples/Basic.tsx

@@ -96,7 +96,7 @@ const ProfileCard = ({id, name, bio}: ProfileCardProps) => (
     <Avatar
       size="extraLarge"
       url={`https://avatars.githubusercontent.com/u/${id}?v=4`}
-      altText={`${name}'s avatar`}
+      name={`${name}'s avatar`}
       className={profileCardAvatarStyles}
     />
     <h3 className={profileCardHeadingStyles}>{name}</h3>

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/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/{preview-react → react}/avatar/Avatar.mdx

@@ -1,6 +1,6 @@
-import {SymbolDoc, Specifications, ExampleCodeBlock} from '@workday/canvas-kit-docs';
+import {SymbolDoc, Specifications, ExampleCodeBlock, StorybookStatusIndicator} from '@workday/canvas-kit-docs';
 
-import {Avatar} from '@workday/canvas-kit-preview-react/avatar';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
 import Basic from './examples/Basic';
 import Image from './examples/Image';
 import Size from './examples/Size';
@@ -9,14 +9,12 @@ import Custom from './examples/Custom';
 import Decorative from './examples/Decorative';
 
 
-# Avatar
-
-
+# Avatar <StorybookStatusIndicator type="promoted" />
 
 ## Installation
 
 ```sh
-yarn add @workday/canvas-kit-preview-react
+yarn add @workday/canvas-kit-react
 ```
 
 
@@ -77,4 +75,4 @@ If the Avatar is purely decorative, you can set the `isDecorative` prop to `true
 
 ## Component API
 
-<SymbolDoc name="Avatar" fileName="/preview-react/" hideDescription />
+<SymbolDoc name="Avatar" fileName="/react/" hideDescription />

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

@@ -0,0 +1,5 @@
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+
+export default () => {
+  return <Avatar name="John Doe" />;
+};

package/dist/mdx/{preview-react → react}/avatar/examples/Custom.tsx

@@ -1,4 +1,4 @@
-import {BaseAvatar} from '@workday/canvas-kit-preview-react/avatar';
+import {BaseAvatar} from '@workday/canvas-kit-react/avatar';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 import {base} from '@workday/canvas-tokens-web';
 

package/dist/mdx/{preview-react → react}/avatar/examples/Decorative.tsx

@@ -1,4 +1,4 @@
-import {Avatar} from '@workday/canvas-kit-preview-react/avatar';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
 // @ts-ignore
 import nicholasAvatar from './nicholas-avatar.jpg';
 import {createStyles} from '@workday/canvas-kit-styling';

package/dist/mdx/{preview-react → react}/avatar/examples/Image.tsx

@@ -1,4 +1,4 @@
-import {Avatar} from '@workday/canvas-kit-preview-react/avatar';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
 
 export default () => {
   return (

package/dist/mdx/{preview-react → react}/avatar/examples/Size.tsx

@@ -1,4 +1,4 @@
-import {Avatar} from '@workday/canvas-kit-preview-react/avatar';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 

package/dist/mdx/{preview-react → react}/avatar/examples/Variant.tsx

@@ -1,4 +1,4 @@
-import {Avatar} from '@workday/canvas-kit-preview-react/avatar';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 

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

@@ -41,11 +41,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
@@ -75,7 +75,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/lib/StorybookStatusIndicator.tsx

@@ -28,14 +28,23 @@ const content = {
     icon: undefined,
     label: 'New',
   },
+  promoted: {
+    icon: undefined,
+    label: 'Promoted',
+  },
 };
 
-export const StorybookStatusIndicator = ({type}: {type: 'ai' | 'deprecated' | 'new'}) => {
+export const StorybookStatusIndicator = ({
+  type,
+}: {
+  type: 'ai' | 'deprecated' | 'new' | 'promoted';
+}) => {
   const {icon, label} = content[type];
   const variantMapping = {
     ai: 'ai',
     deprecated: 'caution',
     new: 'positive',
+    promoted: 'info',
   };
   console.log(variantMapping[type]);
   return (