@workday/canvas-kit-docs 14.0.1 → 14.0.3

package/dist/mdx/react/_examples/mdx/examples/Table/WithSelectableRows.tsx

@@ -1,156 +0,0 @@
-import React from 'react';
-
-import {Table} from '@workday/canvas-kit-react/table';
-import {Heading} from '@workday/canvas-kit-react/text';
-import {Checkbox} from '@workday/canvas-kit-react/checkbox';
-import {createComponent, generateUniqueId} from '@workday/canvas-kit-react/common';
-import {Tooltip} from '@workday/canvas-kit-react/tooltip';
-import {createStencil, createStyles} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
-
-const selectableRowStencil = createStencil({
-  base: {
-    gridTemplateColumns: '3.5rem repeat(2, 1fr)',
-    transition: 'background-color 200ms',
-  },
-  modifiers: {
-    isSelected: {
-      true: {
-        backgroundColor: system.color.bg.primary.soft,
-      },
-    },
-  },
-});
-
-const tableHeaderStyles = createStyles({
-  backgroundColor: system.color.bg.alt.soft,
-});
-
-const tableCellStyles = createStyles({
-  backgroundColor: 'transparent',
-});
-
-interface SelectableRowProps {
-  onSelect?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  rowData: PizzaTopping;
-}
-
-const SelectableRow = createComponent('tr')({
-  displayName: 'SelectableRow',
-  Component: ({onSelect, rowData}: SelectableRowProps) => {
-    return (
-      <Table.Row cs={selectableRowStencil({isSelected: rowData.checked})}>
-        <Table.Cell cs={tableCellStyles}>
-          <Tooltip title={rowData.name}>
-            <Checkbox checked={rowData.checked} onChange={onSelect} />
-          </Tooltip>
-        </Table.Cell>
-        <Table.Header cs={tableCellStyles} scope="row">
-          {rowData.name}
-        </Table.Header>
-        <Table.Cell cs={tableCellStyles}>{rowData.amount}</Table.Cell>
-      </Table.Row>
-    );
-  },
-});
-
-interface PizzaTopping {
-  name: string;
-  amount: string;
-  checked: boolean;
-}
-
-const pizzaToppingData: PizzaTopping[] = [
-  {name: 'Pepperoni', amount: '2.5 oz.', checked: false},
-  {name: 'Mozzarella', amount: '5 oz.', checked: false},
-  {name: 'Basil', amount: '10 Leaves', checked: false},
-  {name: 'Roasted Red Peppers', amount: '3 oz.', checked: false},
-  {name: 'Mushrooms', amount: '2 oz.', checked: false},
-];
-
-const headingID = generateUniqueId();
-
-type SelectAll = 'checked' | 'indeterminate' | 'unchecked';
-
-export default () => {
-  const [selectAllState, setSelectAllState] = React.useState<SelectAll>('unchecked');
-  const [toppings, setToppings] = React.useState(pizzaToppingData);
-
-  const handleToppingChange = (name: string) => {
-    // Toggle the selected item's checked state and update state
-    const updatedToppings = toppings.map(topping => {
-      if (topping.name === name) {
-        return {...topping, checked: !topping.checked};
-      } else {
-        return topping;
-      }
-    });
-    setToppings(updatedToppings);
-
-    // Update the Select All checkbox state
-    const selectedToppings = updatedToppings.filter(topping => topping.checked === true);
-    // If no toppings are selected, set the Select All checkbox to 'unchecked'
-    if (selectedToppings.length === 0) {
-      setSelectAllState('unchecked');
-      // If all toppings are selected, set the Select All checkbox to 'checked'
-    } else if (selectedToppings.length === updatedToppings.length) {
-      setSelectAllState('checked');
-      // Otherwise, set the Select All checkbox to 'indeterminate'
-    } else {
-      setSelectAllState('indeterminate');
-    }
-  };
-
-  const handleSelectAll = () => {
-    // If the Select All checkbox is in a checked or indeterminate state,
-    // update it to 'unchecked', and uncheck all topping checkboxes
-    if (selectAllState === 'checked' || selectAllState === 'indeterminate') {
-      setSelectAllState('unchecked');
-      const updatedToppingData = toppings.map(topping => ({...topping, checked: false}));
-      setToppings(updatedToppingData);
-    }
-    // If the Select All checkbox is in an unchecked state,
-    // update it to 'checked', and check all topping checkboxes
-    if (selectAllState === 'unchecked') {
-      setSelectAllState('checked');
-      const updatedToppingData = toppings.map(topping => ({...topping, checked: true}));
-      setToppings(updatedToppingData);
-    }
-  };
-
-  return (
-    <>
-      <Heading as="h3" id={headingID} size="small">
-        Select your pizza toppings
-      </Heading>
-      <Table aria-labelledby={headingID}>
-        <Table.Row gridTemplateColumns="3.5rem repeat(2, 1fr)">
-          <Table.Cell cs={tableHeaderStyles}>
-            <Tooltip title="Select All">
-              <Checkbox
-                checked={selectAllState === 'checked'}
-                indeterminate={selectAllState === 'indeterminate'}
-                onChange={handleSelectAll}
-              />
-            </Tooltip>
-          </Table.Cell>
-          <Table.Header scope="col" cs={tableHeaderStyles}>
-            Toppings
-          </Table.Header>
-          <Table.Header scope="col" cs={tableHeaderStyles}>
-            Amount
-          </Table.Header>
-        </Table.Row>
-        <Table.Body>
-          {toppings.map(rowData => (
-            <SelectableRow
-              key={rowData.name}
-              rowData={rowData}
-              onSelect={() => handleToppingChange(rowData.name)}
-            />
-          ))}
-        </Table.Body>
-      </Table>
-    </>
-  );
-};

package/dist/mdx/react/_examples/mdx/examples/Table/WithSortableColumnHeaders.tsx

@@ -1,213 +0,0 @@
-import React from 'react';
-
-import {createComponent} from '@workday/canvas-kit-react/common';
-import {Table} from '@workday/canvas-kit-react/table';
-import {Tooltip} from '@workday/canvas-kit-react/tooltip';
-import {TertiaryButton} from '@workday/canvas-kit-react/button';
-import {Text} from '@workday/canvas-kit-react/text';
-import {sortDownIcon, sortUpIcon} from '@workday/canvas-system-icons-web';
-import {createStyles} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
-
-interface CountryData {
-  country: string;
-  capital: string;
-  population: number;
-}
-
-const countryData: CountryData[] = [
-  {country: 'Australia', capital: 'Canberra', population: 25690000},
-  {country: 'Bahamas', capital: 'Nassau', population: 407906},
-  {country: 'Canada', capital: 'Ottawa', population: 38250000},
-  {country: 'Fiji', capital: 'Suva', population: 924610},
-  {country: 'Ghana', capital: 'Accra', population: 32830000},
-  {country: 'Hong Kong', capital: 'City of Victoria', population: 7413000},
-  {country: 'India', capital: 'New Delhi', population: 1408000000},
-  {country: 'Ireland', capital: 'Dublin', population: 5033000},
-  {country: 'Jamaica', capital: 'Kingston', population: 2828000},
-  {country: 'Kenya', capital: 'Nairobi', population: 53010000},
-  {country: 'Micronesia', capital: 'Palikir', population: 113131},
-  {country: 'New Zealand', capital: 'Wellington', population: 5123000},
-  {country: 'Philippines', capital: 'Manila', population: 113900000},
-  {country: 'Puerto Rico', capital: 'San Juan', population: 3264000},
-  {country: 'Samoa', capital: 'Apia', population: 218764},
-  {country: 'Singapore', capital: 'Singapore', population: 5454000},
-  {country: 'Tanzania', capital: 'Dodoma', population: 63590000},
-  {country: 'United Kingdom', capital: 'London', population: 67330000},
-  {country: 'United States', capital: 'Washington, D.C.', population: 331900000},
-  {country: 'Zimbabwe', capital: 'Harare', population: 15990000},
-];
-
-type SortOrder = 'ascending' | 'descending' | 'none';
-
-interface HeaderRowState {
-  column1SortDirection: SortOrder;
-  column2SortDirection: SortOrder;
-  column3SortDirection: SortOrder;
-}
-
-interface HeaderRowAction {
-  column: 'Country' | 'Capital' | 'Population';
-  payload: CountryData[];
-}
-
-const initialHeaderRowState: HeaderRowState = {
-  column1SortDirection: 'none',
-  column2SortDirection: 'none',
-  column3SortDirection: 'none',
-};
-
-/**
- * Given the current sort order, return the next sort order
- */
-function getNextSortOrder(sortOrder: SortOrder) {
-  return sortOrder === 'ascending' ? 'descending' : 'ascending';
-}
-
-function headerRowReducer(state: HeaderRowState, action: HeaderRowAction): HeaderRowState {
-  switch (action.column) {
-    case 'Country':
-      if (state.column1SortDirection === 'ascending') {
-        action.payload.sort((a, b) => b.country.localeCompare(a.country));
-      } else {
-        action.payload.sort((a, b) => a.country.localeCompare(b.country));
-      }
-
-      return {
-        ...initialHeaderRowState,
-        column1SortDirection: getNextSortOrder(state.column1SortDirection),
-      };
-
-    case 'Capital':
-      if (state.column2SortDirection === 'ascending') {
-        action.payload.sort((a, b) => b.capital.localeCompare(a.capital));
-      } else {
-        action.payload.sort((a, b) => a.capital.localeCompare(b.capital));
-      }
-
-      return {
-        ...initialHeaderRowState,
-        column2SortDirection: getNextSortOrder(state.column2SortDirection),
-      };
-
-    case 'Population':
-      if (state.column3SortDirection === 'ascending') {
-        action.payload.sort((a, b) => b.population - a.population);
-      } else {
-        action.payload.sort();
-      }
-
-      return {
-        ...initialHeaderRowState,
-        column3SortDirection: getNextSortOrder(state.column3SortDirection),
-      };
-
-    default:
-      return initialHeaderRowState;
-  }
-}
-
-interface SortableColumnHeaderProps {
-  label: string;
-  onSortAction: (label: string) => void;
-  children?: React.ReactNode;
-  sortOrder: SortOrder;
-}
-
-const getSortIcon = (sortOrder?: SortOrder) => {
-  if (sortOrder === 'ascending') {
-    return sortUpIcon;
-  } else if (sortOrder === 'descending') {
-    return sortDownIcon;
-  } else {
-    return undefined;
-  }
-};
-
-const SortableColumnHeader = createComponent('th')({
-  displayName: 'SortableColumnHeader',
-  Component: (
-    {label, sortOrder, onSortAction, children, ...elemProps}: SortableColumnHeaderProps,
-    ref
-  ) => {
-    return (
-      <Table.Header ref={ref} scope="col" aria-sort={sortOrder} {...elemProps}>
-        <Tooltip type="description" title={`Sort ${getNextSortOrder(sortOrder)}`}>
-          <TertiaryButton
-            icon={getSortIcon(sortOrder)}
-            iconPosition="end"
-            onClick={() => onSortAction(label)}
-          >
-            {children}
-          </TertiaryButton>
-        </Tooltip>
-      </Table.Header>
-    );
-  },
-});
-
-const textStyles = createStyles({
-  paddingInlineStart: system.space.x3,
-});
-
-export default () => {
-  const [headerRowState, headerRowDispatch] = React.useReducer(
-    headerRowReducer,
-    initialHeaderRowState
-  );
-
-  function sortColumnHandler(columnName) {
-    headerRowDispatch({
-      column: columnName,
-      payload: countryData,
-    });
-  }
-
-  return (
-    <Table maxHeight="40rem">
-      <Table.Caption>Population Listed by Country (2021)</Table.Caption>
-      <Table.Head>
-        <Table.Row>
-          <SortableColumnHeader
-            label="Country"
-            sortOrder={headerRowState.column1SortDirection as SortOrder}
-            onSortAction={sortColumnHandler}
-          >
-            Country
-          </SortableColumnHeader>
-          <SortableColumnHeader
-            label="Capital"
-            sortOrder={headerRowState.column2SortDirection as SortOrder}
-            onSortAction={sortColumnHandler}
-          >
-            Capital
-          </SortableColumnHeader>
-          <SortableColumnHeader
-            label="Population"
-            sortOrder={headerRowState.column3SortDirection as SortOrder}
-            onSortAction={sortColumnHandler}
-          >
-            Population
-          </SortableColumnHeader>
-        </Table.Row>
-      </Table.Head>
-      <Table.Body>
-        {countryData.map(item => {
-          return (
-            <Table.Row key={item.country}>
-              <Table.Header scope="row">
-                <Text cs={textStyles}>{item.country}</Text>
-              </Table.Header>
-              <Table.Cell>
-                <Text cs={textStyles}>{item.capital}</Text>
-              </Table.Cell>
-              <Table.Cell>
-                <Text cs={textStyles}>{item.population.toLocaleString()}</Text>
-              </Table.Cell>
-            </Table.Row>
-          );
-        })}
-      </Table.Body>
-    </Table>
-  );
-};

package/dist/mdx/react/_examples/mdx/examples/common/FilterListWithLiveStatus.tsx

@@ -1,68 +0,0 @@
-import React, {useState} from 'react';
-import {TextInput} from '@workday/canvas-kit-react/text-input';
-import {BodyText, Heading} from '@workday/canvas-kit-react/text';
-import {AriaLiveRegion} from '@workday/canvas-kit-react/common';
-import {Flex} from '@workday/canvas-kit-react/layout';
-import {system} from '@workday/canvas-tokens-web';
-import {createStyles, px2rem} from '@workday/canvas-kit-styling';
-import {FormField} from '@workday/canvas-kit-react/form-field';
-
-const fruits = [
-  'Apples',
-  'Oranges',
-  'Bananas',
-  'Lemons',
-  'Limes',
-  'Strawberries',
-  'Raspberries',
-  'Blackberries',
-];
-
-const liveRegionStyle = createStyles({
-  border: `${px2rem(1)} solid ${system.color.border.caution.strong}`,
-  backgroundColor: system.color.bg.caution.default,
-  padding: system.space.x2,
-});
-
-const listStyles = {paddingLeft: '0px'};
-
-const listItemStyles = createStyles({
-  listStyle: 'none',
-  paddingLeft: system.space.zero,
-});
-
-let filteredFruits = fruits;
-
-export default () => {
-  const [filter, setFilter] = useState('');
-  function handleFilter(e) {
-    filteredFruits = fruits.filter(i => i.toUpperCase().indexOf(e.target.value.toUpperCase()) >= 0);
-    setFilter(e.target.value);
-  }
-
-  return (
-    <>
-      <Flex gap="1rem">
-        <Heading size="small">Fruits</Heading>
-        <AriaLiveRegion>
-          <BodyText size="small" cs={liveRegionStyle}>
-            {`Showing ${filteredFruits.length} of ${fruits.length}`}
-          </BodyText>
-        </AriaLiveRegion>
-      </Flex>
-      <FormField>
-        <FormField.Label>Filter Items:</FormField.Label>
-        <FormField.Field>
-          <FormField.Input as={TextInput} value={filter} onChange={handleFilter} />
-        </FormField.Field>
-      </FormField>
-      <ul style={listStyles}>
-        {filteredFruits.map(i => (
-          <BodyText size="small" as="li" cs={listItemStyles} key={i}>
-            {i}
-          </BodyText>
-        ))}
-      </ul>
-    </>
-  );
-};

package/dist/mdx/react/_examples/mdx/examples/common/HiddenLiveRegion.tsx

@@ -1,33 +0,0 @@
-import React, {useState, useRef} from 'react';
-import {AriaLiveRegion, AccessibleHide} from '@workday/canvas-kit-react/common';
-import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {TextInput} from '@workday/canvas-kit-react/text-input';
-import {Flex} from '@workday/canvas-kit-react/layout';
-import {system} from '@workday/canvas-tokens-web';
-import {FormField} from '@workday/canvas-kit-react/form-field';
-
-export default () => {
-  const [message, setMessage] = useState('This is an ARIA Live Region!');
-  const inputRef = useRef();
-  function handleSendMessage() {
-    setMessage(inputRef.current.value);
-    inputRef.current.value = '';
-  }
-
-  return (
-    <>
-      <Flex gap={`var(${system.space.x4})`} alignItems="flex-end">
-        <FormField>
-          <FormField.Label>Type your message:</FormField.Label>
-          <FormField.Field>
-            <FormField.Input as={TextInput} ref={inputRef} />
-          </FormField.Field>
-        </FormField>
-        <PrimaryButton onClick={handleSendMessage}>Send Message</PrimaryButton>
-      </Flex>
-      <AriaLiveRegion>
-        <AccessibleHide>{message}</AccessibleHide>
-      </AriaLiveRegion>
-    </>
-  );
-};

package/dist/mdx/react/_examples/mdx/examples/common/IconButtonsWithLiveBadges.tsx

@@ -1,98 +0,0 @@
-import React, {useState} from 'react';
-import {AccessibleHide, AriaLiveRegion, useUniqueId} from '@workday/canvas-kit-react/common';
-import {notificationsIcon, inboxIcon, assistantIcon} from '@workday/canvas-system-icons-web';
-import {space} from '@workday/canvas-kit-react/tokens';
-import {SecondaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';
-import {Flex} from '@workday/canvas-kit-react/layout';
-import {Tooltip} from '@workday/canvas-kit-react/tooltip';
-import {CountBadge} from '@workday/canvas-kit-react/badge';
-
-const MyTasksLiveBadge = ({cnt}) => {
-  // use tooltip to assign name,
-  // use AriaLiveRegion inside button,
-  // assign name to live region referencing the button,
-  // use BadgeCount inside live region,
-  // use AccessibleHide to create invisible word "new" after badge
-  // use aria-describedby on button, referencing live region container to set description
-  // Safari + VO => not working at all
-  // JAWS 2024 + Chrome / Edge => works as expected :)
-  // NVDA + Chrome / Edge => works as expected :)
-  // Firefox => isn't announcing description on focus, only announces "X New" live (missing button name)
-  const badgeID = useUniqueId();
-  const myTasksID = useUniqueId();
-
-  return (
-    <Tooltip title="My Tasks">
-      <TertiaryButton icon={inboxIcon} id={myTasksID} aria-describedby={badgeID}>
-        <AriaLiveRegion id={badgeID} aria-labelledby={myTasksID}>
-          <CountBadge count={cnt} />
-          <AccessibleHide>New</AccessibleHide>
-        </AriaLiveRegion>
-      </TertiaryButton>
-    </Tooltip>
-  );
-};
-
-// use AriaLiveRegion around the button,
-// use Tooltip to assign the name of the button,
-// make sure Tooltip title string includes count value
-// Chrome + VO => Announces name "notifications X new" and innerText 'X'
-// Safari + VO => Works as expected :)
-// JAWS 2024 => Announces full button name twice (previous state, then new state)
-// JAWS 2024 + Firefox => Works as expected :)
-// NVDA (All Browsers) => Atomic property isn't working, only announcing number change, announces twice
-const NotificationsLiveBadge = ({cnt}) => (
-  <AriaLiveRegion>
-    <Tooltip title={`Notifications ${cnt} new`}>
-      <TertiaryButton icon={notificationsIcon}>
-        <CountBadge count={cnt} />
-      </TertiaryButton>
-    </Tooltip>
-  </AriaLiveRegion>
-);
-
-const AssistantLiveBadge = ({cnt}) => {
-  // use AriaLiveRegion around the button
-  // use muted type Tooltip (avoid using aria-label to name button)
-  // use AccessibleHide inside of button to compose name
-  // Chrome + VO => announces twice
-  // Safari + VO => works as expected :)
-  const lbl = 'Workday Assistant';
-
-  return (
-    <AriaLiveRegion>
-      <Tooltip title={lbl} type="muted">
-        <TertiaryButton icon={assistantIcon}>
-          <AccessibleHide>{lbl}</AccessibleHide>
-          <CountBadge count={cnt} />
-          <AccessibleHide>New</AccessibleHide>
-        </TertiaryButton>
-      </Tooltip>
-    </AriaLiveRegion>
-  );
-};
-
-export default () => {
-  const [counter, setCounter] = useState(0);
-  const [notifications, setNotifications] = useState(0);
-  const [assistant, setAssistant] = useState(0);
-
-  const handleAddTask = () => setCounter(prev => prev + 1);
-  const handleAddNotification = () => setNotifications(prev => prev + 1);
-  const handleAssistant = () => setAssistant(prev => prev + 1);
-
-  return (
-    <>
-      <Flex padding={space.s} gap={space.s} as="header">
-        <AssistantLiveBadge cnt={assistant} />
-        <NotificationsLiveBadge cnt={notifications} />
-        <MyTasksLiveBadge cnt={counter} />
-      </Flex>
-      <Flex padding={space.s} gap={space.s} as="main">
-        <SecondaryButton onClick={handleAssistant}>Add a Message</SecondaryButton>
-        <SecondaryButton onClick={handleAddNotification}>Add a Notification</SecondaryButton>
-        <SecondaryButton onClick={handleAddTask}>Add an item to My Tasks</SecondaryButton>
-      </Flex>
-    </>
-  );
-};

package/dist/mdx/react/_examples/mdx/examples/common/TextInputWithLiveError.tsx

@@ -1,28 +0,0 @@
-import React, {useState, useRef} from 'react';
-import {TextInput} from '@workday/canvas-kit-react/text-input';
-import {AriaLiveRegion, changeFocus} from '@workday/canvas-kit-react/common';
-import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {FormField} from '@workday/canvas-kit-react/form-field';
-
-export default () => {
-  const errMsg = 'Error: First name is required.';
-  const [hasError, setHasError] = useState(false);
-  const inputRef = useRef();
-  const handleBlur = e => setHasError(e.target.value.trim().length === 0);
-  const handleSubmit = () => hasError && changeFocus(inputRef.current);
-
-  return (
-    <>
-      <FormField error={hasError ? 'error' : undefined} isRequired={true}>
-        <FormField.Label>First Name:</FormField.Label>
-        <FormField.Field>
-          <FormField.Input onBlur={handleBlur} as={TextInput} ref={inputRef} />
-          <FormField.Hint>
-            <AriaLiveRegion>{hasError && errMsg}</AriaLiveRegion>
-          </FormField.Hint>
-        </FormField.Field>
-      </FormField>
-      <PrimaryButton onClick={handleSubmit}>Continue</PrimaryButton>
-    </>
-  );
-};

package/dist/mdx/react/_examples/mdx/examples/common/VisibleLiveRegion.tsx

@@ -1,44 +0,0 @@
-import React, {useState, useRef} from 'react';
-import {AriaLiveRegion} from '@workday/canvas-kit-react/common';
-import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {TextInput} from '@workday/canvas-kit-react/text-input';
-import {Flex} from '@workday/canvas-kit-react/layout';
-import {Text} from '@workday/canvas-kit-react/text';
-import {system} from '@workday/canvas-tokens-web';
-import {createStyles, px2rem} from '@workday/canvas-kit-styling';
-
-const liveRegionStyle = createStyles({
-  border: `${px2rem(1)} solid ${system.color.bg.caution.stronger}`,
-  backgroundColor: system.color.bg.caution.default,
-  padding: system.space.x4,
-  display: 'block',
-  margin: system.space.x4 + ' 0',
-});
-
-export default () => {
-  const [message, setMessage] = useState('This is an ARIA Live Region!');
-  const inputRef = useRef();
-
-  function handleSendMessage() {
-    setMessage(inputRef.current.value);
-    inputRef.current.value = '';
-  }
-
-  return (
-    <>
-      <AriaLiveRegion>
-        <Text cs={liveRegionStyle}>{message}</Text>
-      </AriaLiveRegion>
-      <Flex gap={`var(${system.space.x4})`} alignItems="flex-end">
-        <FormField>
-          <FormField.Label>Type your message:</FormField.Label>
-          <FormField.Field>
-            <FormField.Input as={TextInput} ref={inputRef} />
-          </FormField.Field>
-        </FormField>
-        <PrimaryButton onClick={handleSendMessage}>Send Message</PrimaryButton>
-      </Flex>
-    </>
-  );
-};