@workday/canvas-kit-docs 14.0.0-alpha.1167-next.0 → 14.0.0-alpha.1168-next.0

package/dist/es6/index.d.ts

@@ -1,4 +1,4 @@
-export { AIIndicator } from './lib/AIIndicator';
+export { StorybookStatusIndicator } from './lib/StorybookStatusIndicator';
 export { DownloadLLMFile } from './lib/DownloadLLMFile';
 export { ExampleCodeBlock } from './lib/ExampleCodeBlock';
 export * from './lib/specs';

package/dist/es6/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAC,eAAe,EAAC,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAC,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AACxD,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,wBAAwB,EAAC,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAC,eAAe,EAAC,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAC,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AACxD,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC"}

package/dist/es6/index.js

@@ -1,4 +1,4 @@
-export { AIIndicator } from './lib/AIIndicator';
+export { StorybookStatusIndicator } from './lib/StorybookStatusIndicator';
 export { DownloadLLMFile } from './lib/DownloadLLMFile';
 export { ExampleCodeBlock } from './lib/ExampleCodeBlock';
 export * from './lib/specs';

package/dist/es6/lib/StorybookStatusIndicator.d.ts

@@ -0,0 +1,4 @@
+export declare const StorybookStatusIndicator: ({ type }: {
+    type: 'ai' | 'deprecated';
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StorybookStatusIndicator.d.ts.map

package/dist/es6/lib/StorybookStatusIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StorybookStatusIndicator.d.ts","sourceRoot":"","sources":["../../../lib/StorybookStatusIndicator.tsx"],"names":[],"mappings":"AAqCA,eAAO,MAAM,wBAAwB;UAAmB,IAAI,GAAG,YAAY;6CAW1E,CAAC"}

package/dist/es6/lib/StorybookStatusIndicator.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StatusIndicator } 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';
+import { systemIconStencil } from '@workday/canvas-kit-react/icon';
+const storybookStatusIndicatorStencil = createStencil({
+    base: {
+        borderRadius: system.shape.round,
+        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 = {
+    ai: {
+        icon: sparkleSingleSmallIcon,
+        label: 'AI Content',
+    },
+    deprecated: {
+        icon: undefined,
+        label: 'Deprecated',
+    },
+};
+export const StorybookStatusIndicator = ({ type }) => {
+    const { icon, label } = content[type];
+    return (_jsxs(StatusIndicator, { className: "sb-unstyled cnvs-title-status-indicator", cs: storybookStatusIndicatorStencil({ type }), children: [icon && _jsx(StatusIndicator.Icon, { icon: icon }), _jsx(StatusIndicator.Label, { children: label })] }));
+};

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

@@ -1,4 +1,10 @@
-import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
+import {
+  ExampleCodeBlock,
+  StorybookStatusIndicator,
+  SymbolDoc,
+  Specifications,
+} from '@workday/canvas-kit-docs';
+import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
 import Default from './examples/Top Label/Default';
 import DefaultWithCustomOptions from './examples/Top Label/DefaultWithCustomOptions';
 import DefaultWithSimpleOptions from './examples/Top Label/DefaultWithSimpleOptions';
@@ -17,8 +23,20 @@ import ErrorLeft from './examples/Left Label/ErrorLeft';
 import GrowLeft from './examples/Left Label/GrowLeft';
 
 
+# Canvas Kit Select <StorybookStatusIndicator type="deprecated" />
 
-# Canvas Kit Select
+<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
+  <InformationHighlight.Icon />
+  <InformationHighlight.Body>
+    `Select` in Preview has been deprecated and will be removed in a future major version. Please
+    use `Select` in Main instead.
+  </InformationHighlight.Body>
+  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs">
+    Form Field Docs
+  </InformationHighlight.Link>
+</InformationHighlight>
+
+<br />
 
 ## Top Label
 

package/dist/mdx/preview-react/text-area/TextArea.mdx

@@ -1,4 +1,10 @@
-import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
+import {
+  ExampleCodeBlock,
+  StorybookStatusIndicator,
+  SymbolDoc,
+  Specifications,
+} from '@workday/canvas-kit-docs';
+import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
 
 import Alert from './examples/Alert';
 import Basic from './examples/Basic';
@@ -14,15 +20,18 @@ import Required from './examples/Required';
 import ResizeConstraints from './examples/ResizeConstraints';
 
 
-# Canvas Kit Text Area
+# Canvas Kit Text Area <StorybookStatusIndicator type="deprecated" />
 
-<StatusIndicator variant="red">
-  <StatusIndicator.Label>Deprecated</StatusIndicator.Label>
-</StatusIndicator>
-
-`TextArea` in Preview has been deprecated and will be removed in a future major version. Please use
-[`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic)
-instead.
+<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
+  <InformationHighlight.Icon />
+  <InformationHighlight.Body>
+    `TextArea` in Preview has been deprecated and will be removed in a future major version. Please
+    use `FormField` instead.
+  </InformationHighlight.Body>
+  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/story/components-inputs-form-field--docs">
+    Form Field Docs
+  </InformationHighlight.Link>
+</InformationHighlight>
 
 TextArea's allow users to enter and edit multiple lines of text.
 

package/dist/mdx/preview-react/text-input/TextInput.mdx

@@ -1,4 +1,10 @@
-import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
+import {
+  ExampleCodeBlock,
+  StorybookStatusIndicator,
+  SymbolDoc,
+  Specifications,
+} from '@workday/canvas-kit-docs';
+import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
 
 import Basic from './examples/Basic';
 import Disabled from './examples/Disabled';
@@ -18,15 +24,18 @@ import Error from './examples/Error';
 import Alert from './examples/Alert';
 
 
-# Canvas Kit Text Input
+# Canvas Kit Text Input <StorybookStatusIndicator type="deprecated" />
 
-<StatusIndicator variant="red">
-  <StatusIndicator.Label>Deprecated</StatusIndicator.Label>
-</StatusIndicator>
-
-`TextInput` in Preview has been deprecated and will be removed in a future major version. Please use
-[`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic)
-instead.
+<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
+  <InformationHighlight.Icon />
+  <InformationHighlight.Body>
+    `TextInput` in Preview has been deprecated and will be removed in a future major version. Please
+    use `FormField` instead.
+  </InformationHighlight.Body>
+  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/story/components-inputs-form-field--docs">
+    Form Field Docs
+  </InformationHighlight.Link>
+</InformationHighlight>
 
 Text Inputs allow users to enter words or characters without styling.
 
@@ -78,7 +87,7 @@ Set `TextInput.Field`'s `type` prop to `hidden` to completly hide a field while
 value, often used for things like security tokens. Note: You will likely need to manually
 set`aria-describedby={undefined}`and`id={undefined}`
 
-<ExampleCodeBlock code={HiddenInput} />
+<ExampleCodeBlock code={Hidden} />
 
 ### Ref Forwarding
 

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

@@ -1,21 +1,22 @@
-import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
-import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
+import {ExampleCodeBlock, StorybookStatusIndicator, SymbolDoc} from '@workday/canvas-kit-docs';
+import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
 
 import Basic from './examples/Basic';
 import Icon from './examples/Icon';
 import Emphasis from './examples/Emphasis';
 import MaxWidth from './examples/MaxWidth';
 
-# Canvas Kit Status Indicator
-
-<StatusIndicator variant="red">
-  <StatusIndicator.Label>Deprecated</StatusIndicator.Label>
-</StatusIndicator>
-
-`StatusIndicator` in Main has been deprecated and will be removed in a future major version. Please
-use
-[`StatusIndicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic)
-in Preview instead.
+# Canvas Kit Status Indicator <StorybookStatusIndicator type="deprecated" />
+
+<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
+  <InformationHighlight.Icon />
+  <InformationHighlight.Body>
+    `StatusIndicator` in Main has been deprecated and will be removed in a future major version.
+    Please use [Status
+    Indicator](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) in
+    Preview instead.
+  </InformationHighlight.Body>
+</InformationHighlight>
 
 Status Indicators help the user quickly identify the status of a task, action, or page element.
 

package/dist/mdx/react/text/LabelText.mdx

@@ -1,18 +1,21 @@
-import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
-import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
+import {ExampleCodeBlock, StorybookStatusIndicator, SymbolDoc} from '@workday/canvas-kit-docs';
+import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
 import Basic from './examples/LabelText/Basic';
 import Cursor from './examples/LabelText/Cursor';
 import Disabled from './examples/LabelText/Disabled';
 
-# Canvas Kit Label Text
-
-<StatusIndicator variant="red">
-  <StatusIndicator.Label>Deprecated</StatusIndicator.Label>
-</StatusIndicator>
-
-`LabelText` has been deprecated and will be removed in a future major version. Please use
-[FormField.Label](https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-form-field--basic)
-from Preview instead.
+# Canvas Kit Label Text <StorybookStatusIndicator type="deprecated" />
+
+<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
+  <InformationHighlight.Icon />
+  <InformationHighlight.Body>
+    `LabelText` has been deprecated and will be removed in a future major version. Please use
+    `FormField.Label` instead.
+  </InformationHighlight.Body>
+  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/story/components-inputs-form-field--docs">
+    Form Field Docs
+  </InformationHighlight.Link>
+</InformationHighlight>
 
 `LabelText` provides a simple way to render a label with built-in support for Canvas type tokens.
 

package/dist/mdx/react/tokens/Tokens.mdx

@@ -1,13 +1,12 @@
-import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
+import {ExampleCodeBlock, StorybookStatusIndicator} from '@workday/canvas-kit-docs';
 import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';import {BorderRadius, Space, Depth, Colors, Type} from './examples/Tokens';
 import Overview from './examples/Overview';
 
 
-# Tokens
+# Tokens <StorybookStatusIndicator type="deprecated" />
 
 <InformationHighlight variant="caution" className="sb-unstyled" cs={{p: {margin: 0}}}>
   <InformationHighlight.Icon />
-  <InformationHighlight.Heading>React tokens have been deprecated!</InformationHighlight.Heading>
   <InformationHighlight.Body>
     The tokens documented below are deprecated and will be removed in a future release. You must
     migrate to the new Canvas Tokens Web package to ensure continued support and access to the
@@ -23,6 +22,8 @@ information. They enable building components and patterns with consistency acros
 
 <ExampleCodeBlock code={Overview} />
 
+<br />
+
 ## Border Radius
 
 ### Usage

package/dist/mdx/tokens/TokenMigrationOverview.mdx

@@ -1,4 +1,4 @@
-import {AIIndicator, DownloadLLMFile} from '@workday/canvas-kit-docs';
+import {StorybookStatusIndicator, DownloadLLMFile} from '@workday/canvas-kit-docs';
 import {StorybookInformationHighlight} from './StorybookInformationHighlight';
 
 
@@ -15,7 +15,7 @@ Canvas Kit v10+ introduces a new token system that replaces the old JavaScript-b
   Android
 - **Future-Proofing**: Aligns with modern CSS capabilities and Canvas Kit's long-term direction
 
-## LLM Assisted Migration <AIIndicator />
+## LLM Assisted Migration <StorybookStatusIndicator type="ai" />
 
 We provide a **LLM migration mapping file** (`llm-token-migration.txt`) specifically designed for
 use with LLM-based code assistants (such as [Cursor](https://www.cursor.so/) or similar tools). This
@@ -23,8 +23,7 @@ file is not intended for direct human reference or team documentation, but rathe
 input for LLMs to automate and assist with your token migration process.
 
 > The LLM migration file is regularly updated to reflect the latest token mappings and best
-> practices.
-> For more details, see other sections of this migration guide.
+> practices. For more details, see other sections of this migration guide.
 
 This file contains a comprehensive mapping of old Canvas Kit token usages to their new equivalents
 in `@workday/canvas-tokens-web`, along with migration tips and examples and formatted for optimal

package/index.ts

@@ -1,4 +1,4 @@
-export {AIIndicator} from './lib/AIIndicator';
+export {StorybookStatusIndicator} from './lib/StorybookStatusIndicator';
 export {DownloadLLMFile} from './lib/DownloadLLMFile';
 export {ExampleCodeBlock} from './lib/ExampleCodeBlock';
 export * from './lib/specs';

package/lib/StorybookStatusIndicator.tsx

@@ -0,0 +1,49 @@
+import {StatusIndicator} 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';
+import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+
+const storybookStatusIndicatorStencil = createStencil({
+  base: {
+    borderRadius: system.shape.round,
+    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 = {
+  ai: {
+    icon: sparkleSingleSmallIcon,
+    label: 'AI Content',
+  },
+  deprecated: {
+    icon: undefined,
+    label: 'Deprecated',
+  },
+};
+
+export const StorybookStatusIndicator = ({type}: {type: 'ai' | 'deprecated'}) => {
+  const {icon, label} = content[type];
+  return (
+    <StatusIndicator
+      className="sb-unstyled cnvs-title-status-indicator"
+      cs={storybookStatusIndicatorStencil({type})}
+    >
+      {icon && <StatusIndicator.Icon icon={icon} />}
+      <StatusIndicator.Label>{label}</StatusIndicator.Label>
+    </StatusIndicator>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "14.0.0-alpha.1167-next.0",
+  "version": "14.0.0-alpha.1168-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.0.0-alpha.1167-next.0",
-    "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1167-next.0",
-    "@workday/canvas-kit-react": "^14.0.0-alpha.1167-next.0",
-    "@workday/canvas-kit-styling": "^14.0.0-alpha.1167-next.0",
+    "@workday/canvas-kit-labs-react": "^14.0.0-alpha.1168-next.0",
+    "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1168-next.0",
+    "@workday/canvas-kit-react": "^14.0.0-alpha.1168-next.0",
+    "@workday/canvas-kit-styling": "^14.0.0-alpha.1168-next.0",
     "@workday/canvas-system-icons-web": "^3.0.35",
     "@workday/canvas-tokens-web": "3.0.0-alpha.5",
     "markdown-to-jsx": "^7.2.0",
@@ -61,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "25670463a46bad451356d0550adac0de8b5209b0"
+  "gitHead": "c7f43dc689c7377f48786bc8d99b0bace1431c86"
 }

package/dist/es6/lib/AIIndicator.d.ts

@@ -1,2 +0,0 @@
-export declare const AIIndicator: () => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=AIIndicator.d.ts.map

package/dist/es6/lib/AIIndicator.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AIIndicator.d.ts","sourceRoot":"","sources":["../../../lib/AIIndicator.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,WAAW,+CAgBvB,CAAC"}

package/dist/es6/lib/AIIndicator.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { StatusIndicator } from '@workday/canvas-kit-preview-react/status-indicator';
-import { system } from '@workday/canvas-tokens-web';
-import { sparkleSingleSmallIcon } from '@workday/canvas-system-icons-web';
-import { systemIconStencil } from '@workday/canvas-kit-react/icon';
-export const AIIndicator = () => {
-    return (_jsx(_Fragment, { children: _jsxs(StatusIndicator, { className: "sb-unstyled indicator", cs: {
-                background: system.color.bg.ai.default,
-                color: system.color.fg.ai,
-                [systemIconStencil.vars.color]: system.color.fg.ai,
-            }, children: [_jsx(StatusIndicator.Icon, { icon: sparkleSingleSmallIcon }), _jsx(StatusIndicator.Label, { children: "AI Content" })] }) }));
-};

package/lib/AIIndicator.tsx

@@ -1,22 +0,0 @@
-import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
-import {system} from '@workday/canvas-tokens-web';
-import {sparkleSingleSmallIcon} from '@workday/canvas-system-icons-web';
-import {systemIconStencil} from '@workday/canvas-kit-react/icon';
-
-export const AIIndicator = () => {
-  return (
-    <>
-      <StatusIndicator
-        className="sb-unstyled indicator"
-        cs={{
-          background: system.color.bg.ai.default,
-          color: system.color.fg.ai,
-          [systemIconStencil.vars.color]: system.color.fg.ai,
-        }}
-      >
-        <StatusIndicator.Icon icon={sparkleSingleSmallIcon} />
-        <StatusIndicator.Label>AI Content</StatusIndicator.Label>
-      </StatusIndicator>
-    </>
-  );
-};