@workday/canvas-kit-docs 13.0.0-alpha.950-next.0 → 13.0.0-alpha.996-next.0

package/dist/mdx/react/_examples/mdx/examples/GlobalHeader.tsx

@@ -1,65 +1,295 @@
 import * as React from 'react';
-import {styled, createComponent, dubLogoBlue} from '@workday/canvas-kit-react/common';
-import {colors, depth, space, type} from '@workday/canvas-kit-react/tokens';
-
+import {
+  AccessibleHide,
+  AriaLiveRegion,
+  composeHooks,
+  createComponent,
+  createElemPropsHook,
+  createSubcomponent,
+  ExtractProps,
+  useUniqueId,
+} from '@workday/canvas-kit-react/common';
+import {base, system} from '@workday/canvas-tokens-web';
+import {calc, createStyles, px2rem} from '@workday/canvas-kit-styling';
 import {
   notificationsIcon,
   inboxIcon,
   justifyIcon,
   assistantIcon,
+  searchIcon,
 } from '@workday/canvas-system-icons-web';
 
-import {TertiaryButton, Hyperlink} from '@workday/canvas-kit-react/button';
+import {SecondaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';
 import {Avatar} from '@workday/canvas-kit-react/avatar';
 import {Flex, FlexProps} from '@workday/canvas-kit-react/layout';
-import {SearchForm} from '@workday/canvas-kit-labs-react/search-form';
+import {LoadReturn} from '@workday/canvas-kit-react/collection';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {
+  Combobox,
+  useComboboxModel,
+  useComboboxInput,
+  useComboboxLoader,
+} from '@workday/canvas-kit-react/combobox';
+import {InputGroup, TextInput} from '@workday/canvas-kit-react/text-input';
+import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
+import {SystemIcon} from '@workday/canvas-kit-react/icon';
+import {CountBadge} from '@workday/canvas-kit-react/badge';
 
 interface HeaderItemProps extends FlexProps {}
+interface LiveCountBadgeProps extends FlexProps {
+  cnt: number;
+}
 
-export default () => (
-  <GlobalHeader>
-    <GlobalHeader.Item>
-      <TertiaryButton aria-label="menu" icon={justifyIcon} />
-      <Hyperlink>
-        <WorkdayLogo dangerouslySetInnerHTML={{__html: dubLogoBlue}} />
-      </Hyperlink>
-    </GlobalHeader.Item>
-    <GlobalHeader.Item margin="auto" width="100%" maxWidth={`calc(${space.xxxl} * 6)`}>
-      <SearchForm onSubmit={() => 1} />
-    </GlobalHeader.Item>
-    <GlobalHeader.Item>
-      <TertiaryButton aria-label="messages" icon={assistantIcon} />
-      <TertiaryButton aria-label="notifications" icon={notificationsIcon} />
-      <TertiaryButton aria-label="inbox" icon={inboxIcon} />
-      <Avatar size="medium" variant="light" />
-    </GlobalHeader.Item>
-  </GlobalHeader>
+const tasks = ['Request Time Off', 'Create Expense Report', 'Change Benefits'];
+
+const styleOverrides = {
+  headerWrapper: createStyles({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    boxSizing: 'border-box',
+    ...system.type.subtext.large,
+    WebkitFontSmoothing: 'antialiased',
+    MozOsxFontSmoothing: 'grayscale',
+    backgroundColor: system.color.bg.default,
+    padding: system.space.x1,
+  }),
+  inputGroupInner: createStyles({
+    marginLeft: '1rem',
+    width: px2rem(20),
+    transition: 'opacity 100ms ease',
+  }),
+  comboboxContainer: createStyles({
+    margin: 'auto',
+    width: '100%',
+    maxWidth: calc.multiply(system.space.x20, 6),
+  }),
+  comboboxInput: createStyles({
+    borderRadius: px2rem(1000),
+    width: '20rem',
+  }),
+  comboboxMenuList: createStyles({
+    maxHeight: px2rem(200),
+  }),
+  menuButtonStyles: createStyles({
+    textDecoration: 'none',
+    color: base.blackPepper500,
+  }),
+  notificationContainerStyles: createStyles({
+    boxSizing: 'border-box',
+    position: 'relative',
+  }),
+  countBadgeStyles: createStyles({
+    boxSizing: 'border-box',
+    position: 'absolute',
+    top: calc.negate(system.space.x1),
+    insetInlineEnd: calc.negate(system.space.x1),
+  }),
+  actionButtonStyles: createStyles({
+    gap: system.space.x4,
+    margin: system.space.x4,
+  }),
+};
+
+const useAutocompleteInput = composeHooks(
+  createElemPropsHook(useComboboxModel)(model => {
+    return {
+      onKeyPress(event: React.KeyboardEvent) {
+        model.events.show(event);
+      },
+    };
+  }),
+  useComboboxInput
 );
 
+const AutoCompleteInput = createSubcomponent(TextInput)({
+  modelHook: useComboboxModel,
+  elemPropsHook: useAutocompleteInput,
+})<ExtractProps<typeof Combobox.Input, never>>((elemProps, Element) => {
+  return <Combobox.Input as={Element} {...elemProps} />;
+});
+
+export default () => {
+  const [notifications, setNotifications] = React.useState(0);
+
+  function handleAdd() {
+    setNotifications(prev => prev + 1);
+  }
+
+  function handleClear() {
+    setNotifications(0);
+  }
+
+  return (
+    <>
+      <GlobalHeader>
+        <GlobalHeader.Item>
+          <Tooltip title="Global Navigation" type="describe">
+            <TertiaryButton icon={justifyIcon} cs={styleOverrides.menuButtonStyles}>
+              MENU
+            </TertiaryButton>
+          </Tooltip>
+          <Tooltip title="Workday Home">
+            <TertiaryButton>
+              <img src="https://design.workday.com/images/ck-dub-logo-blue.svg" alt="" />
+            </TertiaryButton>
+          </Tooltip>
+        </GlobalHeader.Item>
+        <GlobalHeader.Item cs={styleOverrides.comboboxContainer}>
+          <Autocomplete aria-label="Search Workday" />
+        </GlobalHeader.Item>
+        <GlobalHeader.Item>
+          <Tooltip title="Assistant">
+            <TertiaryButton icon={assistantIcon} />
+          </Tooltip>
+
+          <NotificationLiveBadge cnt={notifications} />
+
+          <Tooltip title="My Tasks">
+            <TertiaryButton icon={inboxIcon} />
+          </Tooltip>
+          <Tooltip title="Profile">
+            <Avatar />
+          </Tooltip>
+        </GlobalHeader.Item>
+      </GlobalHeader>
+      <Flex cs={styleOverrides.actionButtonStyles}>
+        <SecondaryButton onClick={handleAdd}>Add notification</SecondaryButton>
+        <TertiaryButton onClick={handleClear}>Clear</TertiaryButton>
+      </Flex>
+    </>
+  );
+};
+
 const GlobalHeaderItem = createComponent('div')({
   displayName: 'GlobalHeader.Item',
   Component: ({gap = 's', ...props}: HeaderItemProps, ref) => (
-    <Flex gap={gap} alignItems="center" marginX={space.xs} ref={ref} {...props} />
+    <Flex gap={gap} alignItems="center" marginX={system.space.x3} ref={ref} {...props} />
   ),
 });
 
 const GlobalHeader = createComponent('header')({
   displayName: 'GlobalHeader',
-  Component: (props, ref, Element) => <HeaderWrapper ref={ref} as={Element} {...props} />,
+  Component: (props, ref) => (
+    <header className={styleOverrides.headerWrapper} ref={ref} {...props} />
+  ),
   subComponents: {Item: GlobalHeaderItem},
 });
 
-const HeaderWrapper = styled('header')({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  boxSizing: 'border-box',
-  ...type.levels.subtext.large,
-  WebkitFontSmoothing: 'antialiased',
-  MozOsxFontSmoothing: 'grayscale',
-  backgroundColor: colors.frenchVanilla100,
-  ...depth[1],
-  padding: space.xxs,
+const Autocomplete = createComponent('div')({
+  displayName: 'Autocomplete',
+  Component: props => {
+    const [searchText, setSearchText] = React.useState('');
+
+    function handleChange(e) {
+      setSearchText(e.target.value);
+    }
+
+    const {model, loader} = useComboboxLoader(
+      {
+        // You can start with any number that makes sense.
+        total: 0,
+
+        // Pick whatever number makes sense for your API
+        pageSize: 20,
+
+        // A load function that will be called by the loader. You must return a promise that returns
+        // an object like `{items: [], total: 0}`. The `items` will be merged into the loader's cache
+        async load({pageNumber, pageSize, filter}) {
+          return new Promise<LoadReturn<string>>(resolve => {
+            // simulate a server response by resolving after a period of time
+            setTimeout(() => {
+              // simulate paging and filtering based on pre-computed items
+              const start = (pageNumber - 1) * pageSize;
+              const end = start + pageSize;
+              const filteredTasks = tasks.filter(i => {
+                if (searchText.trim() === '' || typeof searchText !== 'string') {
+                  return true;
+                }
+                return i.toLowerCase().includes(searchText.trim().toLowerCase());
+              });
+
+              const total = filteredTasks.length;
+              const items = filteredTasks.slice(start, end);
+
+              resolve({
+                items,
+                total,
+              });
+            }, 300);
+          });
+        },
+        onShow() {
+          // The `shouldLoad` cancels while the combobox menu is hidden, so let's load when it is
+          // visible
+          loader.load();
+        },
+      },
+      useComboboxModel
+    );
+
+    return (
+      <Combobox model={model}>
+        <InputGroup>
+          <InputGroup.InnerStart cs={styleOverrides.inputGroupInner}>
+            <SystemIcon icon={searchIcon} />
+          </InputGroup.InnerStart>
+          <InputGroup.Input
+            as={AutoCompleteInput}
+            cs={styleOverrides.comboboxInput}
+            onChange={handleChange}
+            value={searchText}
+            {...props}
+          />
+        </InputGroup>
+        <Combobox.Menu.Popper>
+          <Combobox.Menu.Card>
+            {model.state.items.length === 0 ? (
+              <StyledMenuItem as="span">No Results Found</StyledMenuItem>
+            ) : (
+              model.state.items.length > 0 && (
+                <Combobox.Menu.List maxHeight={px2rem(200)}>
+                  {item => <Combobox.Menu.Item>{item}</Combobox.Menu.Item>}
+                </Combobox.Menu.List>
+              )
+            )}
+          </Combobox.Menu.Card>
+        </Combobox.Menu.Popper>
+      </Combobox>
+    );
+  },
 });
 
-const WorkdayLogo = styled('span')({lineHeight: 0});
+const NotificationLiveBadge = createComponent('span')({
+  displayName: 'NotificationLiveBadge',
+  Component: ({cnt = 0, ...props}: LiveCountBadgeProps) => {
+    const btnId = useUniqueId();
+    const badgeId = useUniqueId();
+
+    return (
+      <Flex cs={styleOverrides.notificationContainerStyles}>
+        <Tooltip title="Notifications">
+          <TertiaryButton
+            id={btnId}
+            icon={notificationsIcon}
+            aria-describedby={cnt > 0 ? badgeId : undefined}
+            {...props}
+          />
+        </Tooltip>
+        <AriaLiveRegion aria-labelledby={btnId}>
+          {cnt > 0 && (
+            <>
+              <CountBadge
+                id={badgeId}
+                count={cnt}
+                limit={100}
+                cs={styleOverrides.countBadgeStyles}
+              />
+              <AccessibleHide>New</AccessibleHide>
+            </>
+          )}
+        </AriaLiveRegion>
+      </Flex>
+    );
+  },
+});

package/dist/mdx/react/badge/CountBadge.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 CustomLimit from './examples/CustomLimit';
@@ -60,7 +60,7 @@ of another screen update, then this use of `AriaLiveRegion` is unnecessary and n
 ### Custom Styles
 
 Count Badge supports custom styling via the `cs` prop. For more information, check our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
 
 ## Component API
 

package/dist/mdx/react/breadcrumbs/examples/Overflow.tsx

@@ -9,7 +9,7 @@ export interface Breadcrumb {
   text: string;
 }
 
-export default () => {
+export default ({width = '100%'}) => {
   const [items] = React.useState<Breadcrumb[]>([
     {id: '1', text: 'Home', link: '/'},
     {id: '2', text: 'Second Link', link: '#'},
@@ -21,11 +21,15 @@ export default () => {
   ]);
 
   const model = useBreadcrumbsModel({items});
-  const [containerWidth, setContainerWidth] = React.useState('350px');
-
+  const [containerWidth, setContainerWidth] = React.useState(width);
   return (
     <div>
       <Box width={containerWidth} marginBottom="xl">
+        <div style={{display: 'flex', flexDirection: 'column'}}>
+          <span>Current Container Width: {containerWidth}</span>
+          <span>Overflow visibility: {model.menu.state.visibility}</span>
+        </div>
+        <hr />
         <Breadcrumbs model={model} aria-label="Breadcrumbs">
           <Breadcrumbs.List overflowButton={<Breadcrumbs.OverflowButton aria-label="More links" />}>
             {item =>
@@ -51,7 +55,12 @@ export default () => {
       </Box>
       <hr />
       <h4>Change Breadcrumbs container size</h4>
-      <SegmentedControl onSelect={data => setContainerWidth(data.id)}>
+      <SegmentedControl
+        initialValue={width}
+        onSelect={data => {
+          setContainerWidth(data.id);
+        }}
+      >
         <SegmentedControl.List aria-label="container width control" marginBottom="m">
           <SegmentedControl.Item data-id="100%">100%</SegmentedControl.Item>
           <SegmentedControl.Item data-id="480px">480px</SegmentedControl.Item>

package/dist/mdx/react/button/button/Button.mdx

@@ -1,8 +1,8 @@
 import {
-  ExampleCodeBlock,
-  Specifications,
-  SymbolDoc,
-  SymbolDescription,
+	ExampleCodeBlock,
+	Specifications,
+	SymbolDoc,
+	SymbolDescription,
 } from '@workday/canvas-kit-docs';
 
 import Primary from './examples/Primary';
@@ -86,7 +86,7 @@ the width of the button to the width of its container.
 ### Custom Styles
 
 All of our buttons support custom styling via the `cs` prop. For more information, check our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page)
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs)
 or view the example below.
 
 <ExampleCodeBlock code={CustomStyles} />

package/dist/mdx/react/card/card.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 WithCustomStyles from './examples/CustomStyles';
 import WithStencils from './examples/Stencils';
@@ -30,7 +30,7 @@ yarn add @workday/canvas-kit-react
 ### Custom Styles
 
 Card and its subcomponents support custom styling via the `cs` prop. For more information, check our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
 
 <ExampleCodeBlock code={WithCustomStyles} />
 

package/dist/mdx/react/checkbox/Checkbox.mdx

@@ -1,8 +1,8 @@
 import {
-  ExampleCodeBlock,
-  SymbolDoc,
-  Specifications,
-  InformationHighlight,
+	ExampleCodeBlock,
+	SymbolDoc,
+	Specifications,
+	InformationHighlight,
 } from '@workday/canvas-kit-docs';
 import Alert from './examples/Alert';
 import Basic from './examples/Basic';
@@ -104,7 +104,7 @@ or `Checkbox.ErrorType.Error` if Form Field is not being used.
 ### Custom Styles
 
 Checkbox supports custom styling via the `cs` prop. For more information, check our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
 
 ## Component API
 

package/dist/mdx/react/combobox/Combobox.mdx

@@ -1,4 +1,4 @@
-import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
+import { ExampleCodeBlock, SymbolDoc, Specifications } from '@workday/canvas-kit-docs';
 import Autocomplete from './examples/Autocomplete';
 
 # Combobox
@@ -72,7 +72,7 @@ An Autocomplete is an example of an arbitrary combobox.
 
 Combobox and its subcomponents support custom styling via the `cs` prop. For more information, check
 our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
 
 ## Component API
 

package/dist/mdx/react/form-field/FormField.mdx

@@ -1,4 +1,4 @@
-import {ExampleCodeBlock, Specifications, SymbolDoc} from '@workday/canvas-kit-docs';
+import { ExampleCodeBlock, Specifications, SymbolDoc } from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
 import Alert from './examples/Alert';
 import Error from './examples/Error';
@@ -202,7 +202,7 @@ You can theme your error rings by wrapping an input in a `CanvasProvider` and de
 
 Form Field and its subcomponents support custom styling via the `cs` prop. For more information,
 check our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
 
 ## Component API
 

package/dist/mdx/react/modal/examples/IframeTest.tsx

@@ -17,7 +17,10 @@ export default () => {
               <Modal.CloseButton as={DeleteButton}>Delete</Modal.CloseButton>
               <Modal.CloseButton>Cancel</Modal.CloseButton>
             </Flex>
-            <iframe srcDoc="<html><body>Hello, <b>world</b>.<button>iframe button 1</button><button>iframe button 2</button></body></html>" />
+            <iframe
+              role="iframe"
+              srcDoc="<html><body>Hello, <b>world</b>.<button>iframe button 1</button><button data-testid='button2'>iframe button 2</button></body></html>"
+            />
           </Modal.Body>
         </Modal.Card>
       </Modal.Overlay>