@workday/canvas-kit-docs 14.2.0-0052-next.0 → 14.2.0-0058-next.0

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

@@ -0,0 +1,60 @@
+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 {CanvasProvider} from '@workday/canvas-kit-react/common';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+// local helper hook for setting content direction;
+import {useDirection} from './useDirection';
+
+const stylesOverride = {
+  viewport: createStyles({
+    height: px2rem(320),
+    backgroundColor: system.color.bg.alt.default,
+  }),
+  panel: createStyles({
+    alignItems: 'center',
+    padding: system.space.x4,
+  }),
+  main: createStyles({
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    flex: 1,
+    flexBasis: 'auto',
+  }),
+};
+
+export default () => {
+  const {direction, toggleDirection} = useDirection();
+  const model = useSidePanelModel({});
+
+  return (
+    <CanvasProvider dir={direction}>
+      <Flex cs={stylesOverride.viewport}>
+        <SidePanel model={model} variant="alternate">
+          <SidePanel.ToggleButton />
+          <Flex cs={stylesOverride.panel}>
+            <Heading
+              size="small"
+              hidden={model.state.transitionState === 'collapsed' ? true : undefined}
+              id={model.state.labelId}
+            >
+              Alternate Panel
+            </Heading>
+          </Flex>
+        </SidePanel>
+        <Flex as="main" cs={stylesOverride.main}>
+          <Text as="p" typeLevel="body.large">
+            Toggle the content direction
+          </Text>
+          <SecondaryButton onClick={toggleDirection}>
+            Set to {direction === 'ltr' ? 'Right-to-Left' : 'Left-to-Right'}
+          </SecondaryButton>
+        </Flex>
+      </Flex>
+    </CanvasProvider>
+  );
+};

package/dist/mdx/labs-react/side-panel/examples/useDirection.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import {ContentDirection} from '@workday/canvas-kit-react/common';
+
+export function useDirection(initialDirection = ContentDirection.LTR) {
+  const [direction, setDirection] = React.useState(initialDirection);
+
+  return {
+    direction,
+    toggleDirection() {
+      if (direction === ContentDirection.LTR) {
+        setDirection(ContentDirection.RTL);
+      } else {
+        setDirection(ContentDirection.LTR);
+      }
+    },
+    setLTR() {
+      setDirection(ContentDirection.LTR);
+    },
+    setRTL() {
+      setDirection(ContentDirection.RTL);
+    },
+  };
+}

package/dist/mdx/preview-react/side-panel/SidePanel.mdx

@@ -1,4 +1,5 @@
-import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
+import {ExampleCodeBlock, SymbolDoc, Specifications, StorybookStatusIndicator} from '@workday/canvas-kit-docs';import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight'
+
 import Basic from './examples/Basic';
 import HiddenName from './examples/HiddenName';
 import AlternatePanel from './examples/Variant';
@@ -9,9 +10,20 @@ import OnExpandedChange from './examples/OnExpandedChange';
 import OnStateTransition from './examples/OnStateTransition';
 
 
-# Canvas Kit Side Panel
+# Canvas Kit Side Panel <StorybookStatusIndicator type="deprecated" />
+
+<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
+  <InformationHighlight.Icon />
+  <InformationHighlight.Body>
+    `SidePanel` in Preview has been deprecated and will be removed in a future major version. Please
+    use `SidePanel` in Labs instead.
+  </InformationHighlight.Body>
+  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs">
+    View SidePanel Docs
+  </InformationHighlight.Link>
+</InformationHighlight>
 
-`SidePanel` is a collaspible container that anchors to the left or right side of the screen.
+`SidePanel` is a collapsible container that anchors to the left or right side of the screen.
 
 [> Workday Design Reference](https://design.workday.com/components/containers/side-panel)
 

package/dist/mdx/react/button/button/examples/Primary.tsx

@@ -17,7 +17,10 @@ const parentContainerStyles = createStyles({
 export default () => (
   <Flex cs={parentContainerStyles}>
     <PrimaryButton>Primary</PrimaryButton>
-    <PrimaryButton icon={plusIcon} iconPosition="start">
+    <PrimaryButton
+      icon={plusIcon}
+      iconPosition="start"
+    >
       Primary
     </PrimaryButton>
     <PrimaryButton icon={caretDownIcon} iconPosition="end">

package/lib/StorybookStatusIndicator.tsx

@@ -1,4 +1,7 @@
-import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
+import {
+  StatusIndicator,
+  type StatusIndicatorVariant,
+} from '@workday/canvas-kit-preview-react/status-indicator';
 import {system} from '@workday/canvas-tokens-web';
 import {sparkleSingleSmallIcon} from '@workday/canvas-system-icons-web';
 import {createStencil} from '@workday/canvas-kit-styling';
@@ -10,18 +13,6 @@ const storybookStatusIndicatorStencil = createStencil({
     padding: `${system.space.zero} ${system.space.x2}`,
     [systemIconStencil.vars.color]: 'currentColor',
   },
-  modifiers: {
-    type: {
-      ai: {
-        background: system.color.bg.ai.default,
-        color: system.color.fg.ai,
-      },
-      deprecated: {
-        background: system.color.static.amber.soft,
-        color: system.color.static.amber.stronger,
-      },
-    },
-  },
 });
 
 const content = {
@@ -33,14 +24,26 @@ const content = {
     icon: undefined,
     label: 'Deprecated',
   },
+  new: {
+    icon: undefined,
+    label: 'New',
+  },
 };
 
-export const StorybookStatusIndicator = ({type}: {type: 'ai' | 'deprecated'}) => {
+export const StorybookStatusIndicator = ({type}: {type: 'ai' | 'deprecated' | 'new'}) => {
   const {icon, label} = content[type];
+  const variantMapping = {
+    ai: 'ai',
+    deprecated: 'caution',
+    new: 'positive',
+  };
+  console.log(variantMapping[type]);
   return (
     <StatusIndicator
       className="sb-unstyled cnvs-title-status-indicator"
       cs={storybookStatusIndicatorStencil({type})}
+      variant={variantMapping[type] as StatusIndicatorVariant}
+      emphasis="low"
     >
       {icon && <StatusIndicator.Icon icon={icon} />}
       <StatusIndicator.Label>{label}</StatusIndicator.Label>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "14.2.0-0052-next.0",
+  "version": "14.2.0-0058-next.0",
   "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.0-0052-next.0",
-    "@workday/canvas-kit-preview-react": "^14.2.0-0052-next.0",
-    "@workday/canvas-kit-react": "^14.2.0-0052-next.0",
-    "@workday/canvas-kit-styling": "^14.2.0-0052-next.0",
+    "@workday/canvas-kit-labs-react": "^14.2.0-0058-next.0",
+    "@workday/canvas-kit-preview-react": "^14.2.0-0058-next.0",
+    "@workday/canvas-kit-react": "^14.2.0-0058-next.0",
+    "@workday/canvas-kit-styling": "^14.2.0-0058-next.0",
     "@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": "b1fc1f892afd637a9840c355759407aa0b579878"
+  "gitHead": "464d89a31875769371724f0db9031cef57340f80"
 }