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

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

@@ -0,0 +1,52 @@
+import * as React from 'react';
+
+import {AccessibleHide} from '@workday/canvas-kit-react/common';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {
+  SidePanel,
+  SidePanelTransitionStates,
+  useSidePanelModel,
+} from '@workday/canvas-kit-react/side-panel';
+import {Text} from '@workday/canvas-kit-react/text';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+
+const stylesOverride = {
+  viewport: createStyles({
+    height: px2rem(320),
+  }),
+  main: createStyles({
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    flex: 1,
+    flexBasis: 'auto',
+  }),
+};
+
+export default () => {
+  const [transitionState, setTransitionState] =
+    React.useState<SidePanelTransitionStates>('expanded');
+
+  const model = useSidePanelModel({
+    onStateTransition: state => {
+      setTransitionState(state);
+      console.log('Expanded changed to:', state);
+    },
+  });
+
+  return (
+    <Flex cs={stylesOverride.viewport}>
+      <SidePanel model={model}>
+        <SidePanel.ToggleButton aria-label="Collapse View" />
+        <SidePanel.Heading hidden size="small">
+          Hidden Title
+        </SidePanel.Heading>
+      </SidePanel>
+      <Flex as="main" cs={stylesOverride.main}>
+        <Text as="p" typeLevel="body.large">
+          Side panel is {transitionState}.
+        </Text>
+      </Flex>
+    </Flex>
+  );
+};

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

@@ -0,0 +1,67 @@
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {SidePanel, useSidePanelModel} from '@workday/canvas-kit-react/side-panel';
+import {Text} from '@workday/canvas-kit-react/text';
+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),
+  }),
+  panelContainer: createStyles({
+    marginInlineStart: 'auto',
+  }),
+  panel: createStyles({
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    padding: system.padding.md,
+  }),
+  main: createStyles({
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    flex: 1,
+    flexBasis: 'auto',
+  }),
+};
+
+const RightPanel = () => {
+  const model = useSidePanelModel({
+    origin: 'end',
+  });
+
+  return (
+    <SidePanel model={model} className={stylesOverride.panelContainer}>
+      <SidePanel.ToggleButton aria-label="Collapse View" />
+      <Flex cs={stylesOverride.panel}>
+        <SidePanel.Heading size="small">Tasks Panel</SidePanel.Heading>
+      </Flex>
+    </SidePanel>
+  );
+};
+
+export default () => {
+  const {direction, toggleDirection} = useDirection();
+
+  return (
+    <CanvasProvider dir={direction}>
+      <Flex cs={stylesOverride.viewport}>
+        <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>
+
+        <RightPanel />
+      </Flex>
+    </CanvasProvider>
+  );
+};

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

@@ -0,0 +1,51 @@
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {SidePanel} from '@workday/canvas-kit-react/side-panel';
+import {Text} from '@workday/canvas-kit-react/text';
+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.padding.md,
+  }),
+  main: createStyles({
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    flex: 1,
+    flexBasis: 'auto',
+  }),
+};
+
+export default () => {
+  const {direction, toggleDirection} = useDirection();
+
+  return (
+    <CanvasProvider dir={direction}>
+      <Flex cs={stylesOverride.viewport}>
+        <SidePanel variant="alternate">
+          <SidePanel.ToggleButton aria-label="Collapse View" />
+          <SidePanel.Heading size="small">Alternate Panel</SidePanel.Heading>
+        </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/react/side-panel/examples/useDirection.ts

@@ -0,0 +1,24 @@
+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/react/skeleton/Skeleton.mdx

@@ -1,4 +1,4 @@
-import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
+import { ExampleCodeBlock, SymbolDoc } from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
 import Color from './examples/Color';
 import Header from './examples/Header';

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

@@ -1,14 +1,16 @@
-import React from 'react';
-import {Skeleton} from '@workday/canvas-kit-react/skeleton';
 import {Box, Flex} from '@workday/canvas-kit-react/layout';
-import {borderRadius, space} from '@workday/canvas-kit-react/tokens';
+import {Skeleton} from '@workday/canvas-kit-react/skeleton';
+import {calc} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   return (
     <Skeleton>
-      <Flex alignItems="center">
-        <Skeleton.Shape width={space.xl} height={space.xl} borderRadius={borderRadius.circle} />
-        <Box flex={1} marginLeft="xs">
+      <Flex cs={{alignItems: 'center'}}>
+        <Skeleton.Shape
+          cs={{width: system.size.md, height: system.size.md, borderRadius: system.shape.full}}
+        />
+        <Box cs={{flex: 1, marginLeft: calc.add(system.gap.sm, system.gap.xs)}}>
           <Skeleton.Header />
         </Box>
       </Flex>

package/dist/mdx/react/skeleton/examples/Color.tsx

@@ -1,24 +1,26 @@
-import React from 'react';
-import {Skeleton} from '@workday/canvas-kit-react/skeleton';
 import {Box, Flex} from '@workday/canvas-kit-react/layout';
-import {borderRadius, colors, space} from '@workday/canvas-kit-react/tokens';
+import {Skeleton} from '@workday/canvas-kit-react/skeleton';
+import {calc} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
 
 export default () => {
   return (
     <Skeleton>
-      <Flex alignItems="center">
+      <Flex cs={{alignItems: 'center'}}>
         <Skeleton.Shape
-          width={space.xl}
-          height={space.xl}
-          borderRadius={borderRadius.circle}
-          backgroundColor={colors.berrySmoothie100}
+          cs={{
+            width: system.size.md,
+            height: system.size.md,
+            borderRadius: system.shape.full,
+            backgroundColor: base.indigo50,
+          }}
         />
-        <Box flex={1} marginLeft="xs">
-          <Skeleton.Header backgroundColor={colors.cantaloupe100} />
+        <Box cs={{flex: 1, marginLeft: calc.add(system.gap.sm, system.gap.xs)}}>
+          <Skeleton.Header cs={{backgroundColor: base.amber50}} />
         </Box>
       </Flex>
       <div>
-        <Skeleton.Text backgroundColor={colors.fruitPunch100} />
+        <Skeleton.Text cs={{backgroundColor: base.red25}} />
       </div>
     </Skeleton>
   );

package/dist/mdx/react/skeleton/examples/Header.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {Skeleton} from '@workday/canvas-kit-react/skeleton';
 
 export default () => {

package/dist/mdx/react/skeleton/examples/Shape.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
 import {Skeleton} from '@workday/canvas-kit-react/skeleton';
-import {borderRadius, space} from '@workday/canvas-kit-react/tokens';
+import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   return (
     <Skeleton>
-      <Skeleton.Shape width={space.xxl} height={space.xxl} borderRadius={borderRadius.circle} />
+      <Skeleton.Shape
+        cs={{width: system.size.xxl, height: system.size.xxl, borderRadius: system.shape.full}}
+      />
     </Skeleton>
   );
 };

package/dist/mdx/react/skeleton/examples/Simulation.tsx

@@ -1,18 +1,18 @@
-import React from 'react';
 import {keyframes} from '@emotion/react';
+import React from 'react';
 
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {Card} from '@workday/canvas-kit-react/card';
 import {Checkbox} from '@workday/canvas-kit-react/checkbox';
 import {FormField} from '@workday/canvas-kit-react/form-field';
-import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {SystemIconCircle} from '@workday/canvas-kit-react/icon';
-import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {Box, Flex} from '@workday/canvas-kit-react/layout';
 import {Skeleton} from '@workday/canvas-kit-react/skeleton';
-import {borderRadius, space} from '@workday/canvas-kit-react/tokens';
-import {patternIcon} from '@workday/canvas-system-icons-web';
-import {styled, StyledType} from '@workday/canvas-kit-react/common';
 import {Heading} from '@workday/canvas-kit-react/text';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {calc, createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {patternIcon} from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
 
 const fadeOut = keyframes`
   from {
@@ -24,8 +24,21 @@ const fadeOut = keyframes`
   }
 `;
 
-const StyledSimulation = styled(Box)<StyledType>({
-  pointerEvents: 'none',
+const boxStencil = createStencil({
+  base: {
+    pointerEvents: 'none',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+  },
+  modifiers: {
+    loading: {
+      true: {
+        animation: `${fadeOut} 150ms ease-out forwards`,
+      },
+    },
+  },
 });
 
 export default () => {
@@ -63,7 +76,7 @@ export default () => {
 
   return (
     <Box>
-      <Box marginBottom="l">
+      <Box cs={{marginBottom: system.gap.xl}}>
         <FormField orientation="horizontalStart">
           <FormField.Label>Load Time</FormField.Label>
           <FormField.Input as={TextInput} onChange={onChangeLoadTime} value={loadTime} />
@@ -76,34 +89,36 @@ export default () => {
       </Box>
       <Card>
         <Card.Body>
-          <Box minHeight={180} position="relative">
+          <Box cs={{minHeight: px2rem(180), position: 'relative'}}>
             {loading ? (
-              <StyledSimulation
-                position="absolute"
-                top={0}
-                left={0}
-                width="100%"
-                animation={!loading ? `${fadeOut} 150ms ease-out forwards` : undefined}
-              >
+              <Box cs={boxStencil({loading})}>
                 <Skeleton>
-                  <Flex alignItems="center">
+                  <Flex cs={{alignItems: 'center'}}>
                     <Skeleton.Shape
-                      width={space.xl}
-                      height={space.xl}
-                      borderRadius={borderRadius.circle}
+                      cs={{
+                        width: system.size.md,
+                        height: system.size.md,
+                        borderRadius: system.shape.full,
+                      }}
                     />
-                    <Box flex={1} marginLeft="xs">
+                    <Box cs={{flex: 1, marginLeft: calc.add(system.gap.sm, system.gap.xs)}}>
                       <Skeleton.Header />
                     </Box>
                   </Flex>
                   <Skeleton.Text lineCount={3} />
                 </Skeleton>
-              </StyledSimulation>
+              </Box>
             ) : (
               <Box>
-                <Flex alignItems="center" display="inline-flex" marginBottom="s">
+                <Flex
+                  cs={{
+                    marginBottom: calc.add(system.gap.sm, system.gap.xs),
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                  }}
+                >
                   <SystemIconCircle icon={patternIcon} />
-                  <Heading as="h3" size="small" margin={`0 0 0 ${space.xxs}`}>
+                  <Heading as="h3" size="small" cs={{margin: `0 0 0 ${system.gap.sm}`}}>
                     Patterns
                   </Heading>
                 </Flex>

package/dist/mdx/react/skeleton/examples/Text.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {Skeleton} from '@workday/canvas-kit-react/skeleton';
 
 export default () => {

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

@@ -1,5 +1,5 @@
 import {ExampleCodeBlock, StorybookStatusIndicator, SymbolDoc} from '@workday/canvas-kit-docs';
-import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
+import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
 
 import Basic from './examples/Basic';
 import Icon from './examples/Icon';

package/dist/mdx/react/status-indicator/examples/Basic.tsx

@@ -1,23 +1,22 @@
-import React from 'react';
-import styled from '@emotion/styled';
 import {StatusIndicator} from '@workday/canvas-kit-react/status-indicator';
-import {space} from '@workday/canvas-kit-react/tokens';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
-const StatusIndicators = styled('div')({
+const parentContainerStyles = createStyles({
   '& > *': {
-    margin: space.xxs,
+    margin: system.gap.sm,
   },
 });
 
 export default () => {
   return (
-    <StatusIndicators>
+    <div className={parentContainerStyles}>
       <StatusIndicator label="unpublished" type={StatusIndicator.Type.Gray} />
       <StatusIndicator label="submitted" type={StatusIndicator.Type.Orange} />
       <StatusIndicator label="in progress" type={StatusIndicator.Type.Blue} />
       <StatusIndicator label="published" type={StatusIndicator.Type.Green} />
       <StatusIndicator label="failed" type={StatusIndicator.Type.Red} />
       <StatusIndicator label="normal" type={StatusIndicator.Type.Transparent} />
-    </StatusIndicators>
+    </div>
   );
 };

package/dist/mdx/react/status-indicator/examples/Emphasis.tsx

@@ -1,17 +1,16 @@
-import React from 'react';
-import styled from '@emotion/styled';
 import {StatusIndicator} from '@workday/canvas-kit-react/status-indicator';
-import {space} from '@workday/canvas-kit-react/tokens';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
-const StatusIndicators = styled('div')({
+const parentContainerStyles = createStyles({
   '& > *': {
-    margin: space.xxs,
+    margin: system.gap.sm,
   },
 });
 
 export default () => {
   return (
-    <StatusIndicators>
+    <div className={parentContainerStyles}>
       <StatusIndicator
         emphasis={StatusIndicator.Emphasis.Low}
         label="unpublished"
@@ -42,6 +41,6 @@ export default () => {
         label="normal"
         type={StatusIndicator.Type.Transparent}
       />
-    </StatusIndicators>
+    </div>
   );
 };

package/dist/mdx/react/status-indicator/examples/Icon.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
+
 import {StatusIndicator} from '@workday/canvas-kit-react/status-indicator';
-import {uploadCloudIcon} from '@workday/canvas-system-icons-web';
+import {cloudArrowUpIcon} from '@workday/canvas-system-icons-web';
 
 export default () => {
   return (
-    <StatusIndicator icon={uploadCloudIcon} label="published" type={StatusIndicator.Type.Green} />
+    <StatusIndicator icon={cloudArrowUpIcon} label="published" type={StatusIndicator.Type.Green} />
   );
 };

package/dist/mdx/react/status-indicator/examples/MaxWidth.tsx

@@ -1,18 +1,17 @@
-import React from 'react';
-import styled from '@emotion/styled';
 import {StatusIndicator} from '@workday/canvas-kit-react/status-indicator';
 import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
-import {space} from '@workday/canvas-kit-react/tokens';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
-const StatusIndicators = styled('div')({
+const statusIndicatorsStyles = createStyles({
   '& > *': {
-    margin: space.xxs,
+    margin: system.gap.sm,
   },
 });
 
 export default () => {
   return (
-    <StatusIndicators>
+    <div className={statusIndicatorsStyles}>
       <StatusIndicator
         label="Longer Than Normal Ellipsized Status"
         type={StatusIndicator.Type.Blue}
@@ -25,6 +24,6 @@ export default () => {
           tabIndex={0}
         />
       </OverflowTooltip>
-    </StatusIndicators>
+    </div>
   );
 };

package/dist/mdx/react/switch/Switch.mdx

@@ -1,17 +1,31 @@
 import {
   ExampleCodeBlock,
-  SymbolDoc,
   Specifications,
-  InformationHighlight,
+  StorybookStatusIndicator,
+  SymbolDoc,
 } from '@workday/canvas-kit-docs';
-import Caution from './examples/Caution';
+
+import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
 import Basic from './examples/Basic';
+import Caution from './examples/Caution';
 import Disabled from './examples/Disabled';
 import Error from './examples/Error';
 import LabelPosition from './examples/LabelPosition';
 import RefForwarding from './examples/RefForwarding';
 
-# Canvas Kit Switch
+
+# Canvas Kit Switch <StorybookStatusIndicator type="deprecated" />
+
+<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
+  <InformationHighlight.Icon />
+  <InformationHighlight.Body>
+    `Switch` in Main has been deprecated and will be removed in a future major version. Please use
+    `Switch` in Preview instead.
+  </InformationHighlight.Body>
+  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-switch--docs">
+    Switch Docs
+  </InformationHighlight.Link>
+</InformationHighlight>
 
 Switch is a selection control that is used to switch between two potential states.
 
@@ -54,10 +68,9 @@ input component. By default, the orientation will be set to `vertical`.
 
 ### Error States
 
-Set the `error` prop of the wrapping Form Field to `"caution"` or
-`"error"` to set the Switch to the Caution or Error state, respectively. You will
-also need to set the `hintId` and `hintText` props on the Form Field to meet accessibility
-standards.
+Set the `error` prop of the wrapping Form Field to `"caution"` or `"error"` to set the Switch to the
+Caution or Error state, respectively. You will also need to set the `hintId` and `hintText` props on
+the Form Field to meet accessibility standards.
 
 The `error` prop may be applied directly to the Switch with a value of `Switch.ErrorType.Caution` or
 `Switch.ErrorType.Error` if Form Field is not being used.
@@ -81,4 +94,4 @@ Switch supports custom styling via the `cs` prop. For more information, check ou
 
 ## Specifications
 
-<Specifications file="Switch.spec.ts" name="Switch" />
+<Specifications file="./cypress/component/Switch.spec.tsx" name="Switch" />

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

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Switch} from '@workday/canvas-kit-react/switch';
 

package/dist/mdx/react/switch/examples/Caution.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Switch} from '@workday/canvas-kit-react/switch';
 

package/dist/mdx/react/switch/examples/Disabled.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Switch} from '@workday/canvas-kit-react/switch';
 

package/dist/mdx/react/switch/examples/Error.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Switch} from '@workday/canvas-kit-react/switch';
 

package/dist/mdx/react/switch/examples/LabelPosition.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Switch} from '@workday/canvas-kit-react/switch';
 

package/dist/mdx/react/switch/examples/RefForwarding.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Switch} from '@workday/canvas-kit-react/switch';

package/dist/mdx/react/table/examples/BaseHtmlTable.tsx

@@ -1,11 +1,9 @@
-import React from 'react';
-
 import {BaseTable} from '@workday/canvas-kit-react/table';
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 const tableHeaderStyles = createStyles({
-  backgroundColor: system.color.bg.alt.softer,
+  backgroundColor: system.color.surface.raised,
 });
 
 export default () => {

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

@@ -1,11 +1,9 @@
-import React from 'react';
-
 import {Table} from '@workday/canvas-kit-react/table';
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 const tableHeaderStyles = createStyles({
-  backgroundColor: system.color.bg.alt.softer,
+  backgroundColor: system.color.surface.default,
 });
 
 export default () => {