@workday/canvas-kit-docs 14.0.1 → 14.0.3

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

@@ -1,168 +0,0 @@
-import * as React from 'react';
-import {system} from '@workday/canvas-tokens-web';
-import {SidePanel, useSidePanel} from '@workday/canvas-kit-preview-react/side-panel';
-import {Flex} from '@workday/canvas-kit-react/layout';
-import {Heading, Subtext, Text} from '@workday/canvas-kit-react/text';
-import {Expandable} from '@workday/canvas-kit-react/expandable';
-import {SystemIcon} from '@workday/canvas-kit-react/icon';
-import {Hyperlink, TertiaryButton} from '@workday/canvas-kit-react/button';
-import {Menu} from '@workday/canvas-kit-react/menu';
-import {birthdayIcon, checkIcon, ribbonIcon} from '@workday/canvas-system-icons-web';
-import {createStyles, px2rem} from '@workday/canvas-kit-styling';
-import {Tooltip} from '../../../../tooltip';
-
-const data = {
-  bestsellers: {
-    icon: ribbonIcon,
-    title: 'Best Sellers',
-    subtitle: 'Award winning sweet treats',
-    items: ['Mango Coco Sago', 'Matcha Creme Pie', 'Key Lime Cheesecake', 'Tiramisu'],
-  },
-  cakes: {
-    icon: birthdayIcon,
-    title: 'Custom Cakes',
-    subtitle: 'To celebrate your life milestones',
-    items: ['Anniversary', 'Birthday', 'Graduation', 'Wedding'],
-  },
-};
-
-const stylesOverride = {
-  navContainer: createStyles({
-    height: px2rem(800),
-    positio: 'relative',
-    backgroundColor: system.color.bg.alt.default,
-  }),
-  accordionContainer: createStyles({
-    flexDirection: 'column',
-    rowGap: system.space.zero,
-    paddingInlineStart: system.space.zero,
-  }),
-  accordionIcon: createStyles({
-    verticalAlign: 'middle',
-    padding: system.space.x1,
-  }),
-  accordionSubText: createStyles({
-    margin: system.space.zero,
-  }),
-  listContainer: createStyles({
-    listStyle: 'none',
-    padding: system.space.x4,
-    paddingTop: system.space.x16,
-    flexDirection: 'column',
-  }),
-  links: createStyles({
-    textDecoration: 'none',
-    padding: system.space.x4,
-  }),
-  linkCheck: createStyles({
-    marginLeft: 'auto',
-  }),
-  flyOut: createStyles({
-    marginTop: '8rem',
-  }),
-};
-
-const Accordion = ({config}) => {
-  const [currentPage, setCurrentPage] = React.useState('');
-
-  const handleClick = e => {
-    e.preventDefault();
-    setCurrentPage(e.target.textContent);
-  };
-
-  return (
-    <Expandable>
-      <Expandable.Target>
-        <SystemIcon cs={stylesOverride.accordionIcon} icon={config.icon} />
-        <Expandable.Title>
-          {config.title}
-          <Subtext size="medium" cs={stylesOverride.accordionSubText}>
-            {config.subtitle}
-          </Subtext>
-        </Expandable.Title>
-        <Expandable.Icon iconPosition="end" />
-      </Expandable.Target>
-      <Expandable.Content as="ul" cs={stylesOverride.listContainer}>
-        {config.items.map(i => {
-          return (
-            <li key={i}>
-              <Flex
-                as="a"
-                href="#"
-                aria-current={i === currentPage ? 'true' : undefined}
-                className={stylesOverride.links}
-                onClick={handleClick}
-              >
-                {i}
-                {i === currentPage && <SystemIcon icon={checkIcon} cs={stylesOverride.linkCheck} />}
-              </Flex>
-            </li>
-          );
-        })}
-      </Expandable.Content>
-    </Expandable>
-  );
-};
-
-const IconButtonMenu = ({config}) => {
-  return (
-    <Menu>
-      <Tooltip title={config.title} placement="right">
-        <Menu.Target as={TertiaryButton}>
-          <SystemIcon icon={config.icon} />
-        </Menu.Target>
-      </Tooltip>
-      <Menu.Popper placement="right">
-        <Menu.Card cs={stylesOverride.flyOut}>
-          <Menu.List>
-            {config.items.map(i => (
-              <Menu.Item>{i}</Menu.Item>
-            ))}
-          </Menu.List>
-        </Menu.Card>
-      </Menu.Popper>
-    </Menu>
-  );
-};
-
-const CompactView = () => {
-  return (
-    <Flex as="ul" cs={stylesOverride.listContainer}>
-      <Flex.Item as="li">
-        <IconButtonMenu config={data.bestsellers} />
-      </Flex.Item>
-      <Flex.Item as="li">
-        <IconButtonMenu config={data.cakes} />
-      </Flex.Item>
-    </Flex>
-  );
-};
-
-const ExpandedView = () => {
-  return (
-    <Flex as="ul" cs={stylesOverride.accordionContainer}>
-      <Flex.Item as="li">
-        <Accordion config={data.bestsellers} />
-      </Flex.Item>
-      <Flex.Item as="li">
-        <Accordion config={data.cakes} />
-      </Flex.Item>
-    </Flex>
-  );
-};
-
-export default () => {
-  const {expanded, panelProps, labelProps, controlProps} = useSidePanel();
-
-  return (
-    <Flex cs={stylesOverride.navContainer}>
-      <SidePanel as="nav" {...panelProps}>
-        <Heading size="small" {...labelProps} hidden={!expanded ? true : undefined}>
-          Cake or Death Bakery
-        </Heading>
-        <SidePanel.ToggleButton {...controlProps} />
-        {expanded ? <ExpandedView /> : <CompactView />}
-      </SidePanel>
-    </Flex>
-  );
-};

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

@@ -1,46 +0,0 @@
-import * as React from 'react';
-import {SidePanel, useSidePanel} from '@workday/canvas-kit-preview-react/side-panel';
-import {Flex, Box} from '@workday/canvas-kit-react/layout';
-import {Heading} from '@workday/canvas-kit-react/text';
-import {createStyles, px2rem} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
-
-const stylesOverride = {
-  panelContainer: createStyles({
-    height: px2rem(320),
-    backgroundColor: system.color.bg.alt.soft,
-    position: 'relative',
-  }),
-  panelContent: createStyles({
-    alignItems: 'center',
-    paddingY: system.space.x4,
-    paddingX: system.space.x4,
-  }),
-  panel: createStyles({
-    zIndex: 1,
-  }),
-  overlay: createStyles({
-    position: 'absolute',
-    background: system.color.bg.overlay,
-    height: '100%',
-    width: '100%',
-  }),
-};
-
-export default () => {
-  const {expanded, panelProps, labelProps, controlProps} = useSidePanel();
-
-  return (
-    <Flex cs={stylesOverride.panelContainer}>
-      <SidePanel className={stylesOverride.panel} {...panelProps} variant="alternate">
-        <Flex cs={stylesOverride.panelContainer}>
-          <Heading size="small" {...labelProps} hidden={!expanded ? true : undefined}>
-            Alternate Panel
-          </Heading>
-          <SidePanel.ToggleButton {...controlProps} />
-        </Flex>
-      </SidePanel>
-      {expanded && <Box cs={stylesOverride.overlay} />}
-    </Flex>
-  );
-};

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

@@ -1,202 +0,0 @@
-import React from 'react';
-
-import {AriaLiveRegion, createComponent, useUniqueId} from '@workday/canvas-kit-react/common';
-import {Flex} from '@workday/canvas-kit-react/layout';
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {InputGroup, TextInput} from '@workday/canvas-kit-react/text-input';
-import {
-  Popup,
-  usePopupModel,
-  useCloseOnOutsideClick,
-  useCloseOnEscape,
-  useInitialFocus,
-  useReturnFocus,
-  useFocusRedirect,
-} from '@workday/canvas-kit-react/popup';
-import {PrimaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';
-import {Table} from '@workday/canvas-kit-react/table';
-import {Text} from '@workday/canvas-kit-react/text';
-import {SystemIcon} from '@workday/canvas-kit-react/icon';
-import {Tooltip} from '@workday/canvas-kit-react/tooltip';
-import {createStyles} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
-import {filterIcon, searchIcon} from '@workday/canvas-system-icons-web';
-
-interface CountryData {
-  country: string;
-  capital: string;
-  population: string;
-}
-
-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},
-];
-
-const textStyles = createStyles({
-  paddingInlineStart: system.space.x3,
-});
-
-interface FilterableColumnHeaderProps {
-  label: string;
-  onFilter: (filterObject: {filterText: string; column: string}) => void;
-}
-
-const FilterableColumnHeader = createComponent('th')({
-  displayName: 'FilterableColumnHeader',
-  Component: ({label, onFilter}: FilterableColumnHeaderProps, ref) => {
-    const [inputVal, setInputVal] = React.useState('');
-    const targetId = useUniqueId();
-    const popupId = useUniqueId();
-    const initialFocusRef = React.useRef(null);
-    const filterPopupModel = usePopupModel({
-      initialFocusRef,
-    });
-
-    useCloseOnOutsideClick(filterPopupModel);
-    useCloseOnEscape(filterPopupModel);
-    useInitialFocus(filterPopupModel);
-    useFocusRedirect(filterPopupModel);
-    useReturnFocus(filterPopupModel);
-
-    function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
-      const newVal = e.target.value;
-      setInputVal(newVal);
-      onFilter({filterText: newVal, column: label.toLowerCase()});
-    }
-
-    return (
-      <Table.Header scope="col" aria-owns={targetId + ' ' + popupId}>
-        <Popup model={filterPopupModel}>
-          <Tooltip title={`Filter${inputVal !== '' ? `ed: "${inputVal}"` : ''}`} type="description">
-            <Popup.Target
-              as={TertiaryButton}
-              id={targetId}
-              icon={inputVal === '' ? searchIcon : filterIcon}
-              iconPosition="end"
-            >
-              {label}
-            </Popup.Target>
-          </Tooltip>
-          <Popup.Popper>
-            <Popup.Card id={popupId}>
-              <Popup.Heading>Filter</Popup.Heading>
-              <Popup.Body>
-                <FormField>
-                  <FormField.Label>{label}</FormField.Label>
-                  <FormField.Input as={InputGroup}>
-                    <InputGroup.InnerStart>
-                      <SystemIcon icon={searchIcon} />
-                    </InputGroup.InnerStart>
-                    <InputGroup.Input
-                      as={TextInput}
-                      type="search"
-                      ref={initialFocusRef}
-                      onChange={handleChange}
-                      value={inputVal}
-                    />
-                  </FormField.Input>
-                </FormField>
-              </Popup.Body>
-              <Flex>
-                <Popup.CloseButton as={PrimaryButton}>Done</Popup.CloseButton>
-              </Flex>
-            </Popup.Card>
-          </Popup.Popper>
-        </Popup>
-      </Table.Header>
-    );
-  },
-});
-
-function filterTableData(data: CountryData[], filters: CountryData) {
-  return data.filter(item => {
-    for (const key in filters) {
-      if (filters.hasOwnProperty(key) && filters[key]) {
-        const filterText = filters[key].toLowerCase();
-        const itemValue = String(item[key]).toLowerCase();
-        if (!itemValue.includes(filterText)) {
-          return false;
-        }
-      }
-    }
-    return true;
-  });
-}
-
-export default () => {
-  const [filteredData, setFilteredData] = React.useState(countryData);
-  const [colFilters, setColFilters] = React.useState<CountryData>({
-    country: '',
-    capital: '',
-    population: '',
-  });
-
-  React.useEffect(() => {
-    setFilteredData(filterTableData(countryData, colFilters));
-  }, [colFilters]);
-
-  let typingDelay: NodeJS.Timeout;
-  function handleColFilters({filterText, column}) {
-    clearTimeout(typingDelay);
-    typingDelay = setTimeout(() => {
-      setColFilters(prev => {
-        const newState = {...prev, [column]: filterText};
-        return newState;
-      });
-    }, 400);
-  }
-
-  return (
-    <Table maxHeight="40rem">
-      <Table.Caption>
-        Population Listed by Country (2021)
-        <AriaLiveRegion cs={textStyles}>
-          {filteredData.length} of {countryData.length} items
-        </AriaLiveRegion>
-      </Table.Caption>
-      <Table.Head>
-        <Table.Row>
-          <FilterableColumnHeader label="Country" onFilter={handleColFilters} />
-          <FilterableColumnHeader label="Capital" onFilter={handleColFilters} />
-          <FilterableColumnHeader label="Population" onFilter={handleColFilters} />
-        </Table.Row>
-      </Table.Head>
-      <Table.Body>
-        {filteredData.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/Table/WithExpandableRows.tsx

@@ -1,216 +0,0 @@
-import React from 'react';
-
-import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
-import {Table} from '@workday/canvas-kit-react/table';
-import {TertiaryButton} from '@workday/canvas-kit-react/button';
-import {generateUniqueId} from '@workday/canvas-kit-react/common';
-import {Heading, Subtext} from '@workday/canvas-kit-react/text';
-import {Tooltip} from '@workday/canvas-kit-react/tooltip';
-import {createStyles} from '@workday/canvas-kit-styling';
-
-import {chevronDownSmallIcon, chevronRightSmallIcon} from '@workday/canvas-system-icons-web';
-import {system} from '@workday/canvas-tokens-web';
-
-interface AutoData {
-  id: string;
-  brand: string;
-  model: string;
-  year: string;
-  price: string;
-  engine: string;
-  transmission: string;
-  horsepower: string;
-  torque: string;
-  curbWeight: string;
-  orderStatus: string;
-}
-
-const headingID = generateUniqueId();
-const autoData: AutoData[] = [
-  {
-    id: generateUniqueId(),
-    brand: 'Porsche',
-    model: '992 911 GT3',
-    year: '2022',
-    price: 'Starts at $160,000',
-    engine: '4.0L Flat 6',
-    transmission: 'PDK or 7-Speed Manual',
-    horsepower: '502hp',
-    torque: '346 lb-ft',
-    curbWeight: '3,164 lbs',
-    orderStatus: 'Order Placed',
-  },
-  {
-    id: generateUniqueId(),
-    brand: 'BMW',
-    model: 'M5 Competition',
-    year: '2018',
-    price: 'Starts at $105,000',
-    engine: 'Twin-Turbo 4.4L V8',
-    transmission: 'Automatic',
-    horsepower: '627hp',
-    torque: '553 lb-ft',
-    curbWeight: '4,345 lbs',
-    orderStatus: 'Order Fulfilled',
-  },
-  {
-    id: generateUniqueId(),
-    brand: 'Audi',
-    model: 'R8',
-    year: '2022',
-    price: 'Starts at $148,000',
-    engine: '5.2L V10',
-    transmission: 'Automatic',
-    horsepower: '562hp',
-    torque: '408 lb-ft',
-    curbWeight: '3,594 lbs',
-    orderStatus: 'Order Fulfilled',
-  },
-  {
-    id: generateUniqueId(),
-    brand: 'Lotus',
-    model: 'Emira',
-    year: '2023',
-    price: 'Starts at $78,000',
-    engine: 'Supercharged 3.5L V6',
-    transmission: 'Automatic or 6-Speed Manual',
-    horsepower: '400hp',
-    torque: '317 lb-ft',
-    curbWeight: '3520 lbs',
-    orderStatus: 'Shipped: In Transit',
-  },
-  {
-    id: generateUniqueId(),
-    brand: 'Toyota',
-    model: 'Supra',
-    year: '1998',
-    price: '$40,000 - $80,000',
-    engine: '3.0L Inline 6',
-    transmission: 'Automatic or 6-Speed Manual',
-    horsepower: '320hp',
-    torque: '315 lb-ft',
-    curbWeight: '3,599 lbs',
-    orderStatus: 'Delivered',
-  },
-  {
-    id: generateUniqueId(),
-    brand: 'Nissan',
-    model: 'Skyline GT-R',
-    year: '1994',
-    price: '$45,000 - $90,000',
-    engine: '2.6L Twin-Turbo Inline 6',
-    transmission: '5-Speed Manual',
-    horsepower: '276hp',
-    torque: '260 lb-ft',
-    curbWeight: '3,153 lbs',
-    orderStatus: 'Delivered',
-  },
-];
-
-interface RowProps {
-  data: AutoData;
-}
-
-const expandableSectionStyles = createStyles({
-  alignItems: 'flex-start',
-  display: 'flex',
-  gap: system.space.x4,
-  padding: system.space.x8,
-});
-
-const expandableHeadingStyles = createStyles({
-  margin: 0,
-  fontWeight: system.fontWeight.bold,
-});
-
-const expandableListStyles = createStyles({
-  listStyle: 'none',
-  margin: 0,
-  padding: 0,
-  gap: system.space.x2,
-});
-
-function ExpandableRow({data}: RowProps) {
-  const [rowExpanded, setRowExpanded] = React.useState(false);
-
-  return (
-    <>
-      <Table.Row gridTemplateColumns="4rem repeat(4, 1fr)">
-        <Table.Cell>
-          <Tooltip title={`${data.brand} ${data.model}`}>
-            <TertiaryButton
-              size="small"
-              icon={rowExpanded ? chevronDownSmallIcon : chevronRightSmallIcon}
-              aria-expanded={rowExpanded}
-              onClick={() => setRowExpanded(!rowExpanded)}
-            />
-          </Tooltip>
-        </Table.Cell>
-        <Table.Header scope="row">{data.brand}</Table.Header>
-        <Table.Cell>{data.model}</Table.Cell>
-        <Table.Cell>{data.year}</Table.Cell>
-        <Table.Cell>{data.price}</Table.Cell>
-      </Table.Row>
-      {rowExpanded && (
-        <Table.Row>
-          <Table.Cell colSpan={5} cs={expandableSectionStyles}>
-            <div>
-              <Subtext as="h4" size="large" cs={expandableHeadingStyles}>
-                Status
-              </Subtext>
-              <StatusIndicator variant="blue">{data.orderStatus}</StatusIndicator>
-            </div>
-            <div>
-              <Subtext as="h4" size="large" cs={expandableHeadingStyles}>
-                Specifications
-              </Subtext>
-              <ul className={expandableListStyles}>
-                <Subtext as="li" size="large">
-                  Engine: {data.engine}
-                </Subtext>
-                <Subtext as="li" size="large">
-                  Transmission: {data.transmission}
-                </Subtext>
-                <Subtext as="li" size="large">
-                  Horsepower: {data.horsepower}
-                </Subtext>
-                <Subtext as="li" size="large">
-                  Torque: {data.torque}
-                </Subtext>
-                <Subtext as="li" size="large">
-                  Curb Weight: {data.curbWeight}
-                </Subtext>
-              </ul>
-            </div>
-          </Table.Cell>
-        </Table.Row>
-      )}
-    </>
-  );
-}
-
-export default () => {
-  return (
-    <>
-      <Heading as="h3" id={headingID} size="small">
-        Showroom Inventory
-      </Heading>
-      <Table aria-labelledby={headingID}>
-        <Table.Head>
-          <Table.Row gridTemplateColumns="4rem repeat(4, 1fr)">
-            <Table.Cell></Table.Cell>
-            <Table.Header scope="col">Make</Table.Header>
-            <Table.Header scope="col">Model</Table.Header>
-            <Table.Header scope="col">Year</Table.Header>
-            <Table.Header scope="col">Price</Table.Header>
-          </Table.Row>
-        </Table.Head>
-        <Table.Body>
-          {autoData.map(item => (
-            <ExpandableRow key={item.id} data={item} />
-          ))}
-        </Table.Body>
-      </Table>
-    </>
-  );
-};