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

package/lib/ExampleCodeBlock.tsx

@@ -1,54 +1,62 @@
+import sdk from '@stackblitz/sdk';
 import React from 'react';
 import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter';
+import {vscDarkPlus} from 'react-syntax-highlighter/dist/cjs/styles/prism';
 
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
 import {Card} from '@workday/canvas-kit-react/card';
+import {CanvasProvider, defaultBranding} from '@workday/canvas-kit-react/common';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 import {calc, createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
-import {vscDarkPlus} from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import {checkCircleIcon, copyIcon} from '@workday/canvas-system-icons-web';
-import {Tooltip} from '@workday/canvas-kit-react/tooltip';
-import sdk from '@stackblitz/sdk';
-import tsconfigFile from '!!raw-loader!./stackblitzFiles/tsconfig.json';
+import {base, system} from '@workday/canvas-tokens-web';
+
+import eslintrc from './stackblitzFiles/.eslintrc.cjs.txt?raw';
+import appFile from './stackblitzFiles/App.tsx?raw';
+import indexHTMLFile from './stackblitzFiles/index.html?raw';
+import mainFile from './stackblitzFiles/main.tsx?raw';
 import {packageJSONFile} from './stackblitzFiles/packageJSONFile';
-import indexHTMLFile from '!!raw-loader!./stackblitzFiles/index.html';
-import mainFile from '!!raw-loader!./stackblitzFiles/main.tsx';
-import viteConfigFile from '!!raw-loader!./stackblitzFiles/vite.config.ts';
-import eslintrc from '!!raw-loader!./stackblitzFiles/.eslintrc.cjs.txt';
-import tsconfigNodeFile from '!!raw-loader!./stackblitzFiles/tsconfig.node.json';
-import appFile from '!!raw-loader!./stackblitzFiles/App.tsx';
-import viteEnvFile from '!!raw-loader!./stackblitzFiles/vite-env.d.ts';
-import {CanvasProvider, defaultBranding} from '@workday/canvas-kit-react/common';
+import tsconfigFile from './stackblitzFiles/tsconfig.json?raw';
+import tsconfigNodeFile from './stackblitzFiles/tsconfig.node.json?raw';
+import viteEnvFile from './stackblitzFiles/vite-env.d.ts?raw';
+import viteConfigFile from './stackblitzFiles/vite.config.ts?raw';
 
 const cardStencil = createStencil({
   base: {
+    // Lets the block shrink inside flex/grid doc layouts so content width does not force overflow.
+    minWidth: 0,
+    maxWidth: '100%',
     '[data-part="example-block"]': {
       boxShadow: system.depth[1],
-      borderRadius: system.shape.x1,
+      borderRadius: system.shape.sm,
+      padding: system.padding.md,
       position: 'relative',
+      minWidth: 0,
       overflow: 'auto', // This allows for the entire ExampleCodeBlock to scroll on smaller viewports
     },
     '[data-part="example-block-container"]': {
+      minWidth: 0,
       overflow: 'auto',
+      padding: system.padding.md,
     },
     '[data-part="code-block"]': {
       display: 'none',
       boxShadow: system.depth[1],
-      borderRadius: system.shape.x1,
+      borderRadius: system.shape.sm,
     },
     '[data-part="code-toggle-stackblitz-btn-container"]': {
       position: 'absolute',
       right: calc.negate(px2rem(1)),
-      bottom: calc.negate(px2rem(1)),
+      bottom: calc.negate(px2rem(4)),
       display: 'flex',
-      gap: system.space.x2,
+      gap: system.gap.sm,
     },
     '[data-part="copy-btn"]': {
       position: 'absolute',
-      bottom: system.space.zero,
-      right: system.space.zero,
-      borderRadius: system.shape.zero,
-      borderTopLeftRadius: system.shape.x1,
+      bottom: '0',
+      right: '0',
+      borderRadius: system.shape.none,
+      borderTopLeftRadius: system.shape.sm,
     },
   },
   modifiers: {
@@ -56,12 +64,12 @@ const cardStencil = createStencil({
       true: {
         '[data-part="code-block"]': {
           display: 'block',
-          borderTopLeftRadius: system.shape.zero,
-          borderTopRightRadius: system.shape.zero,
+          borderTopLeftRadius: system.shape.none,
+          borderTopRightRadius: system.shape.none,
         },
         '[data-part="example-block"]': {
-          borderBottomLeftRadius: system.shape.zero,
-          borderBottomRightRadius: system.shape.zero,
+          borderBottomLeftRadius: system.shape.none,
+          borderBottomRightRadius: system.shape.none,
         },
       },
     },
@@ -157,10 +165,12 @@ export const ExampleCodeBlock = ({code}: any) => {
                   language="jsx"
                   style={vscDarkPlus}
                   customStyle={{
-                    fontSize: cssVar(system.fontSize.subtext.large),
-                    lineHeight: cssVar(system.lineHeight.subtext.large),
+                    fontSize: cssVar(system.fontSize.subtext.lg),
+                    lineHeight: cssVar(system.lineHeight.subtext.lg),
                     margin: '0',
-                    padding: `${cssVar(system.space.x8)} ${cssVar(system.space.x10)}`,
+                    padding: `${cssVar(system.padding.xxl)} ${cssVar(base.size500)}`,
+                    boxSizing: 'border-box',
+                    maxWidth: '100%',
                   }}
                   children={code.__RAW__}
                 />

package/lib/MDXElements.tsx

@@ -1,9 +1,10 @@
-//@ts-ignore
 import {useMDXComponents} from '@mdx-js/react';
-import React from 'react';
 import MarkdownToJSX from 'markdown-to-jsx';
+import React from 'react';
+
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {Box} from '@workday/canvas-kit-react/layout';
 
-import {Box, createComponent} from '@workday/canvas-kit-react';
 import {HeadingLevelContext, SymbolDialog} from './widgetUtils';
 
 /**
@@ -39,7 +40,7 @@ const Button = (props: any) => {
       </code>
     );
   }
-  return React.createElement(components['button'] || 'button', props, props.children);
+  return React.createElement(components.button || 'button', props, props.children);
 };
 
 /**
@@ -48,7 +49,7 @@ const Button = (props: any) => {
  */
 function convertLinkToSymbolLinks(input: string): string {
   return input.replace(
-    /{@link ([a-z0-9.]+)( [a-z0-9.]+)?}/gi,
+    /{@link\s+([^\s}]+)(?:\s+([^}]+))?\s?}/gi,
     (_substr, symbol, text = '') =>
       `<button data-symbol="${text.trim()}" className="token symbol">${symbol}</button>`
   );

package/lib/MoreTooltip.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
 
-import {getTransformFromPlacement, Placement, Popper} from '@workday/canvas-kit-react/popup';
 import {mergeCallback} from '@workday/canvas-kit-react/common';
-
+import {Placement, Popper, getTransformFromPlacement} from '@workday/canvas-kit-react/popup';
 import {TooltipContainer, useTooltip} from '@workday/canvas-kit-react/tooltip';
 
 const isOverflowed = (element: Element) => {
@@ -31,14 +30,17 @@ function mergeCallbacks<T extends {[key: string]: any}>(
   componentProps: T,
   keys: (keyof T)[] = Object.keys(componentProps)
 ) {
-  return (keys as string[]).reduce((mergedProps, key) => {
-    if (typeof elemProps[key] === 'function') {
-      mergedProps[key] = mergeCallback(componentProps[key], elemProps[key]);
-    } else {
-      mergedProps[key] = componentProps[key];
-    }
-    return mergedProps;
-  }, {} as {[key: string]: any});
+  return (keys as string[]).reduce(
+    (mergedProps, key) => {
+      if (typeof elemProps[key] === 'function') {
+        mergedProps[key] = mergeCallback(componentProps[key], elemProps[key]);
+      } else {
+        mergedProps[key] = componentProps[key];
+      }
+      return mergedProps;
+    },
+    {} as {[key: string]: any}
+  );
 }
 
 function getTooltipContents(title: unknown) {

package/lib/Specifications.tsx

@@ -1,15 +1,32 @@
 /* eslint-disable no-param-reassign */
-import React from 'react';
 import {toId} from '@storybook/csf';
-import {Table} from '@workday/canvas-kit-react/table';
+import React from 'react';
+
 import {Hyperlink} from '@workday/canvas-kit-react/button';
+import {Table} from '@workday/canvas-kit-react/table';
 
-import {specifications, SpecDescribe, SpecIt} from './specs';
+import {type FileBlock} from '../utils/parseSpecFile';
 import {GithubBranch, GithubUrl, StorybookUrl} from './docs';
+import {SpecDescribe, SpecIt} from './specs';
+
+function useFetchSpecification({file, initialSpecs}: {file: string; initialSpecs?: FileBlock}) {
+  const [specs, setSpecs] = React.useState(initialSpecs);
+
+  React.useEffect(() => {
+    if (file && !initialSpecs) {
+      import(/* @vite-ignore */ file).then(({default: contents}: {default: FileBlock}) => {
+        setSpecs(contents);
+      });
+    }
+  }, [file, initialSpecs]);
+
+  return specs;
+}
 
 export interface SpecificationsProps {
   file: string;
   name?: string;
+  initialSpecs?: FileBlock;
 }
 
 interface Row {
@@ -56,18 +73,17 @@ function createTableRows(
   return rows;
 }
 
-export const Specifications = ({file, name}: SpecificationsProps) => {
+export const Specifications = ({file, name, initialSpecs}: SpecificationsProps) => {
   const storybookBaseUrl = React.useContext(StorybookUrl);
   const githubUrl = React.useContext(GithubUrl);
   const githubBranch = React.useContext(GithubBranch);
 
-  const specFile = specifications.find(f => f.name === file);
-
-  if (!specFile) {
+  const contents = useFetchSpecification({file, initialSpecs});
+  if (!contents) {
     return null;
   }
 
-  const block = name ? specFile.children.find(d => d.name === name) : specFile.children[0];
+  const block = name ? contents.children.find(d => d.name === name) : contents.children[0];
 
   if (!block) {
     return null;
@@ -86,23 +102,23 @@ export const Specifications = ({file, name}: SpecificationsProps) => {
     const [, first, kind, name, last] = matches;
 
     return (
-      <>
+      <div>
         {first.replace(/given /i, '')}
         <Hyperlink
           href={`${storybookBaseUrl}?path=/story/${toId(
             kind,
-            name.replace('DefaultStory', 'Default Story')
+            name.replace('DefaultStory', 'Default Story').replace(/([A-Z])/g, '-$1')
           )}`}
         >
           {name.replace('DefaultStory', 'Default')}
         </Hyperlink>
         {last}
-      </>
+      </div>
     );
   };
 
   return block.type === 'describe' ? (
-    <>
+    <div className="sb-unstyled">
       <Table>
         <Table.Head>
           <Table.Row>
@@ -135,10 +151,7 @@ export const Specifications = ({file, name}: SpecificationsProps) => {
           ))}
         </Table.Body>
       </Table>
-      Source:{' '}
-      <Hyperlink href={`${githubUrl}blob/${githubBranch}/cypress/integration/${file}`}>
-        {file}
-      </Hyperlink>
-    </>
+      Source: <Hyperlink href={`${githubUrl}blob/${githubBranch}/${file}`}>{file}</Hyperlink>
+    </div>
   ) : null;
 };

package/lib/StorybookStatusIndicator.tsx

@@ -1,46 +1,58 @@
-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 {
+  StatusIndicator,
+  type StatusIndicatorVariant,
+} from '@workday/canvas-kit-preview-react/status-indicator';
 import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {sparkleIcon} from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
 
 const storybookStatusIndicatorStencil = createStencil({
   base: {
-    borderRadius: system.shape.round,
-    padding: `${system.space.zero} ${system.space.x2}`,
+    borderRadius: system.shape.full,
+    padding: `0 ${system.padding.xs}`,
     [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,
+    icon: sparkleIcon,
     label: 'AI Content',
   },
   deprecated: {
     icon: undefined,
     label: 'Deprecated',
   },
+  new: {
+    icon: undefined,
+    label: 'New',
+  },
+  promoted: {
+    icon: undefined,
+    label: 'Promoted',
+  },
 };
 
-export const StorybookStatusIndicator = ({type}: {type: 'ai' | 'deprecated'}) => {
+export const StorybookStatusIndicator = ({
+  type,
+}: {
+  type: 'ai' | 'deprecated' | 'new' | 'promoted';
+}) => {
   const {icon, label} = content[type];
+  const variantMapping = {
+    ai: 'info',
+    deprecated: 'caution',
+    new: 'positive',
+    promoted: 'info',
+  };
+
   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/lib/StylePropsTable.tsx

@@ -1,5 +1,6 @@
+import {ExternalHyperlink} from '@workday/canvas-kit-react/button';
 import {Box} from '@workday/canvas-kit-react/layout';
-import {ExternalHyperlink} from '@workday/canvas-kit-react';
+
 import {Table} from './Table';
 
 type StyleProp = {

package/lib/SymbolDoc.tsx

@@ -1,2 +1,3 @@
-export {SymbolDoc, SymbolDescription} from './widgetUtils';
 import './widgets';
+
+export {SymbolDoc, SymbolDescription} from './widgetUtils';

package/lib/Table.tsx

@@ -1,8 +1,8 @@
-import {createComponent, StyledType} from '@workday/canvas-kit-react/common';
+import {createComponent} from '@workday/canvas-kit-react/common';
 import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
-import {Text, TextProps} from '@workday/canvas-kit-react/text';
-import styled from '@emotion/styled';
-import {type} from '@workday/canvas-kit-react/tokens';
+import {Subtext, TextProps} from '@workday/canvas-kit-react/text';
+import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 const TableHead = createComponent('thead')({
   Component: (props: BoxProps, ref, Element) => {
@@ -16,66 +16,64 @@ const TableBody = createComponent('tbody')({
   },
 });
 
+const tableRowStencil = createStencil({
+  base: {
+    borderBottom: `${px2rem(1)} solid ${system.color.border.strong}`,
+  },
+});
+
 const TableRow = createComponent('tr')({
   Component: (props: BoxProps, ref, Element) => {
-    return (
-      <Box as={Element} ref={ref} borderBottom="solid 1px" borderBottomColor="soap400" {...props} />
-    );
+    return <Box as={Element} ref={ref} {...handleCsProp(props, tableRowStencil())} />;
+  },
+});
+
+const tableHeaderStencil = createStencil({
+  base: {
+    fontWeight: system.fontWeight.medium,
+    padding: `${system.padding.md} ${system.padding.xs}`,
+    textAlign: 'start',
   },
 });
 
 const TableHeader = createComponent('th')({
   Component: (props: TextProps, ref, Element) => {
     return (
-      <Text
-        as={Element}
-        ref={ref}
-        fontWeight="medium"
-        paddingX="xxs"
-        paddingY="s"
-        textAlign="start"
-        typeLevel="subtext.large"
-        {...props}
-      />
+      <Subtext as={Element} ref={ref} size="large" {...handleCsProp(props, tableHeaderStencil())} />
     );
   },
 });
 
-const StyledText = styled(Text)<StyledType>({
-  code: {
-    fontFamily: type.properties.fontFamilies.monospace,
+const tableDataStencil = createStencil({
+  base: {
+    padding: `${system.padding.md} ${system.padding.xs}`,
+    textAlign: 'start',
+    code: {
+      fontFamily: system.fontFamily.mono,
+    },
   },
 });
 
 const TableData = createComponent('td')({
   Component: (props: TextProps, ref, Element) => {
     return (
-      <StyledText
-        as={Element}
-        ref={ref}
-        paddingX="xxs"
-        paddingY="s"
-        textAlign="start"
-        typeLevel="subtext.large"
-        {...props}
-      />
+      <Subtext as={Element} ref={ref} size="large" {...handleCsProp(props, tableDataStencil())} />
     );
   },
 });
 
+const tableCaptionStencil = createStencil({
+  base: {
+    borderCollapse: 'collapse',
+    marginBottom: system.gap.md,
+    width: '100%',
+  },
+});
+
 export const Table = createComponent('table')({
   displayName: 'Table',
   Component: (props: BoxProps, ref, Element) => {
-    return (
-      <Box
-        as={Element}
-        ref={ref}
-        borderCollapse="collapse"
-        width="100%"
-        {...props}
-        marginBottom="s"
-      />
-    );
+    return <Box as={Element} ref={ref} {...handleCsProp(props, tableCaptionStencil())} />;
   },
   subComponents: {
     Head: TableHead,

package/lib/Value.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 
-import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {Table} from '@workday/canvas-kit-react/table';
 import {Text} from '@workday/canvas-kit-react/text';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
 
 import * as types from '../docgen/docTypes';
-import {MdxJSToJSX} from './MDXElements';
-import {Table} from '@workday/canvas-kit-react';
-import {capitalize, IndentLevelContext, RenderContext, indent} from './widgetUtils';
 import {DescriptionTooltip} from './DescriptionTooltip';
-import {colors} from '@workday/canvas-kit-react/tokens';
-import {createStyles} from '@workday/canvas-kit-styling';
-import {Flex} from '@workday/canvas-kit-react';
+import {MdxJSToJSX} from './MDXElements';
+import {IndentLevelContext, RenderContext, capitalize, indent} from './widgetUtils';
 
 const widgets: Record<string, React.FC<ValueProps>> = {};
 
@@ -45,6 +45,7 @@ export const PropertiesInline = ({properties}: {properties: types.ObjectProperty
   if (properties.length === 0) {
     return <span className="token punctuation">&#123;&#125;</span>;
   }
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const level = React.useContext(IndentLevelContext);
 
   return (
@@ -58,20 +59,22 @@ export const PropertiesInline = ({properties}: {properties: types.ObjectProperty
             {p.description || p.tags.deprecated ? (
               <DescriptionTooltip
                 type="describe"
-                style={{maxWidth: '50em'}}
+                cs={{maxWidth: '50em'}}
                 title={<MdxJSToJSX>{p.description || p.tags.deprecated}</MdxJSToJSX>}
               >
-                <span
+                <Text
                   className="token property"
-                  style={{
+                  cs={{
                     cursor: 'pointer',
                     textDecoration: p.tags.deprecated ? 'line-through' : 'underline',
                     textDecorationStyle: 'dotted',
-                    color: p.tags.deprecated ? colors.cinnamon600 : colors.plum600,
+                    color: p.tags.deprecated
+                      ? system.color.fg.danger.default
+                      : system.color.fg.info.default,
                   }}
                 >
                   {p.name}
-                </span>
+                </Text>
               </DescriptionTooltip>
             ) : (
               <span className="token property">{p.name}</span>
@@ -105,16 +108,20 @@ function getTableRows(
     const title = property.declarations?.[0]?.filePath;
 
     const propName = (
-      <Text as="code" whiteSpace={'nowrap !important' as any}>
+      <Text as="code" cs={{whiteSpace: 'nowrap !important'}}>
         {indent(level)}
         {level > 0 && '\u2514\u00A0'}
         {property.name}
-        {showRequired && property.required ? <Text color="chiliMango600">*</Text> : ''}
+        {showRequired && property.required ? (
+          <Text cs={{color: system.color.fg.danger.default}}>*</Text>
+        ) : (
+          ''
+        )}
       </Text>
     );
     return [
       <Table.Row key={index + i}>
-        <Table.Cell color="plum600">
+        <Table.Cell cs={{color: base.blue800}}>
           {/* Use a tooltip to help with debugging where the type sources are coming from */}
           {title ? (
             <Tooltip type="describe" title={title}>

package/lib/docs.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {ExportedSymbol, Value} from '../docgen/docTypes';
 
 export const GithubUrl = React.createContext('https://github.com/Workday/canvas-kit/');

package/lib/stackblitzFiles/App.tsx

@@ -1,33 +1,19 @@
-import {
-  CanvasProvider,
-  ContentDirection,
-  PartialEmotionCanvasTheme,
-  useTheme,
-} from '@workday/canvas-kit-react/common';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
 import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 import {Demo} from './Demo';
-import {system} from '@workday/canvas-tokens-web';
 
 const mainContentStyles = createStyles({
-  padding: system.space.x4,
+  padding: system.padding.md,
 });
 
 export const App = () => {
-  // useTheme is filling in the Canvas theme object if any keys are missing
-  const canvasTheme: PartialEmotionCanvasTheme = useTheme({
-    canvas: {
-      direction: ContentDirection.LTR,
-    },
-  });
-
   return (
-    <CanvasProvider theme={canvasTheme}>
-      <>
-        <main className={mainContentStyles}>
-          <Demo />
-        </main>
-      </>
+    <CanvasProvider>
+      <main className={mainContentStyles}>
+        <Demo />
+      </main>
     </CanvasProvider>
   );
 };

package/lib/stackblitzFiles/main.tsx

@@ -1,13 +1,15 @@
 import {createRoot} from 'react-dom/client';
+
 import {fonts} from '@workday/canvas-kit-react-fonts';
-import {system} from '@workday/canvas-tokens-web';
 import {injectGlobal} from '@workday/canvas-kit-styling';
-import {App} from './App';
-
+import {system} from '@workday/canvas-tokens-web';
 import '@workday/canvas-tokens-web/css/base/_variables.css';
 import '@workday/canvas-tokens-web/css/brand/_variables.css';
+import '@workday/canvas-tokens-web/css/component/_variables.css';
 import '@workday/canvas-tokens-web/css/system/_variables.css';
 
+import {App} from './App';
+
 //@ts-ignore
 injectGlobal({
   ...fonts,
@@ -18,7 +20,7 @@ injectGlobal({
   },
   '#root, #root < div': {
     minHeight: '100vh',
-    ...system.type.body.small,
+    ...system.type.body.sm,
   },
 });