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

package/dist/mdx/labs-react/search-form/examples/Collapsed.tsx

@@ -1,64 +0,0 @@
-import * as React from 'react';
-import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
-import {SearchForm} from '@workday/canvas-kit-labs-react/search-form';
-import {Flex} from '@workday/canvas-kit-react/layout';
-
-const initialWineList = [
-  'Beaujolais',
-  'Bordeaux',
-  'Cabernet Sauvignon',
-  'Champagne',
-  'Chardonnay',
-  'Chianti',
-  'Malbec',
-  'Merlot',
-  'Pinot Grigio',
-  'Pinot Gris',
-  'Pinot Noir',
-  'Primitivo',
-  'Prosecco',
-  'Riesling',
-  'Rioja',
-  'Rosé',
-  'Sauvignon Blanc',
-  'Syrah',
-  'Zinfandel',
-];
-
-export default () => {
-  const [wineList, setWineList] = React.useState(initialWineList);
-  // Tracking the input value for onSubmit
-  const [searchInput, setSearchInput] = React.useState('');
-  const menuItems = wineList.map(wine => <StyledMenuItem key={wine}>{wine}</StyledMenuItem>);
-
-  const filterMenuItems = e => {
-    setSearchInput(e.target.value);
-    const formattedValue = e.target.value.toLowerCase();
-
-    // Reset the list if the input is cleared
-    if (!formattedValue.length) {
-      setWineList(initialWineList);
-    } else {
-      const filteredItems = initialWineList.filter(wine =>
-        wine.toLowerCase().includes(formattedValue)
-      );
-      setWineList(filteredItems);
-    }
-  };
-
-  const handleSubmit = () => {
-    // We don't need to prevent the default event because SearchForm handles that internally
-    console.log(`Searching for: ${searchInput}`);
-  };
-
-  return (
-    <Flex minHeight={200} alignItems="flex-start" padding="xs">
-      <SearchForm
-        autocompleteItems={menuItems}
-        onInputChange={filterMenuItems}
-        onSubmit={handleSubmit}
-        isCollapsed
-      />
-    </Flex>
-  );
-};

package/dist/mdx/labs-react/search-form/examples/CustomStyles.tsx

@@ -1,91 +0,0 @@
-import * as React from 'react';
-import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
-import {SearchForm, searchFormStencil} from '@workday/canvas-kit-labs-react/search-form';
-import {Flex} from '@workday/canvas-kit-react/layout';
-import {createStencil} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
-import {systemIconStencil} from '@workday/canvas-kit-react/icon';
-
-const initialWineList = [
-  'Beaujolais',
-  'Bordeaux',
-  'Cabernet Sauvignon',
-  'Champagne',
-  'Chardonnay',
-  'Chianti',
-  'Malbec',
-  'Merlot',
-  'Pinot Grigio',
-  'Pinot Gris',
-  'Pinot Noir',
-  'Primitivo',
-  'Prosecco',
-  'Riesling',
-  'Rioja',
-  'Rosé',
-  'Sauvignon Blanc',
-  'Syrah',
-  'Zinfandel',
-];
-
-const customSearchFormStencil = createStencil({
-  extends: searchFormStencil,
-  base: ({submitSearchIconPart}) => ({
-    [searchFormStencil.vars.background]: 'black',
-    [searchFormStencil.vars.backgroundHover]: system.color.bg.muted.strong,
-    [searchFormStencil.vars.color]: system.color.text.inverse,
-    [searchFormStencil.vars.placeholderColor]: system.color.bg.alt.softer,
-    [submitSearchIconPart]: {
-      [systemIconStencil.vars.color]: system.color.fg.inverse,
-    },
-    [`& [data-part="combobox-reset-button"]`]: {
-      [systemIconStencil.vars.color]: system.color.fg.inverse,
-    },
-    '&:focus-within': {
-      [submitSearchIconPart]: {
-        [systemIconStencil.vars.color]: system.color.fg.default,
-      },
-      [`& [data-part="combobox-reset-button"]`]: {
-        [systemIconStencil.vars.color]: system.color.fg.default,
-      },
-    },
-  }),
-});
-
-export default () => {
-  const [wineList, setWineList] = React.useState(initialWineList);
-  // Tracking the input value for onSubmit
-  const [searchInput, setSearchInput] = React.useState('');
-  const menuItems = wineList.map(wine => <StyledMenuItem key={wine}>{wine}</StyledMenuItem>);
-
-  const filterMenuItems = e => {
-    setSearchInput(e.target.value);
-    const formattedValue = e.target.value.toLowerCase();
-
-    // Reset the list if the input is cleared
-    if (!formattedValue.length) {
-      setWineList(initialWineList);
-    } else {
-      const filteredItems = initialWineList.filter(wine =>
-        wine.toLowerCase().includes(formattedValue)
-      );
-      setWineList(filteredItems);
-    }
-  };
-
-  const handleSubmit = () => {
-    // We don't need to prevent the default event because SearchForm handles that internally
-    console.log(`Searching for: ${searchInput}`);
-  };
-
-  return (
-    <Flex minHeight={200} alignItems="flex-start" padding="xs">
-      <SearchForm
-        cs={customSearchFormStencil()}
-        autocompleteItems={menuItems}
-        onInputChange={filterMenuItems}
-        onSubmit={handleSubmit}
-      />
-    </Flex>
-  );
-};

package/dist/mdx/labs-react/search-form/examples/CustomTheme.tsx

@@ -1,73 +0,0 @@
-import * as React from 'react';
-import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
-import {SearchForm, SearchThemeAttributes} from '@workday/canvas-kit-labs-react/search-form';
-import {Flex} from '@workday/canvas-kit-react/layout';
-
-const initialWineList = [
-  'Beaujolais',
-  'Bordeaux',
-  'Cabernet Sauvignon',
-  'Champagne',
-  'Chardonnay',
-  'Chianti',
-  'Malbec',
-  'Merlot',
-  'Pinot Grigio',
-  'Pinot Gris',
-  'Pinot Noir',
-  'Primitivo',
-  'Prosecco',
-  'Riesling',
-  'Rioja',
-  'Rosé',
-  'Sauvignon Blanc',
-  'Syrah',
-  'Zinfandel',
-];
-
-export default () => {
-  const [wineList, setWineList] = React.useState(initialWineList);
-  // Tracking the input value for onSubmit
-  const [searchInput, setSearchInput] = React.useState('');
-  const menuItems = wineList.map(wine => <StyledMenuItem key={wine}>{wine}</StyledMenuItem>);
-
-  const filterMenuItems = e => {
-    setSearchInput(e.target.value);
-    const formattedValue = e.target.value.toLowerCase();
-
-    // Reset the list if the input is cleared
-    if (!formattedValue.length) {
-      setWineList(initialWineList);
-    } else {
-      const filteredItems = initialWineList.filter(wine =>
-        wine.toLowerCase().includes(formattedValue)
-      );
-      setWineList(filteredItems);
-    }
-  };
-
-  const handleSubmit = () => {
-    // We don't need to prevent the default event because SearchForm handles that internally
-    console.log(`Searching for: ${searchInput}`);
-  };
-
-  const customTheme = {
-    background: '#a31b12',
-    backgroundFocus: '#fff',
-    placeholderColor: '#fff',
-    placeholderColorFocus: '#333333',
-  } as SearchThemeAttributes;
-
-  return (
-    <Flex minHeight={200} alignItems="flex-start">
-      <Flex padding="xs" backgroundColor="cinnamon500" flex={1} flexBasis="auto">
-        <SearchForm
-          searchTheme={customTheme}
-          autocompleteItems={menuItems}
-          onInputChange={filterMenuItems}
-          onSubmit={handleSubmit}
-        />
-      </Flex>
-    </Flex>
-  );
-};

package/dist/mdx/labs-react/search-form/examples/Grow.tsx

@@ -1,64 +0,0 @@
-import * as React from 'react';
-import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
-import {SearchForm} from '@workday/canvas-kit-labs-react/search-form';
-import {Flex} from '@workday/canvas-kit-react/layout';
-
-const initialWineList = [
-  'Beaujolais',
-  'Bordeaux',
-  'Cabernet Sauvignon',
-  'Champagne',
-  'Chardonnay',
-  'Chianti',
-  'Malbec',
-  'Merlot',
-  'Pinot Grigio',
-  'Pinot Gris',
-  'Pinot Noir',
-  'Primitivo',
-  'Prosecco',
-  'Riesling',
-  'Rioja',
-  'Rosé',
-  'Sauvignon Blanc',
-  'Syrah',
-  'Zinfandel',
-];
-
-export default () => {
-  const [wineList, setWineList] = React.useState(initialWineList);
-  // Tracking the input value for onSubmit
-  const [searchInput, setSearchInput] = React.useState('');
-  const menuItems = wineList.map(wine => <StyledMenuItem key={wine}>{wine}</StyledMenuItem>);
-
-  const filterMenuItems = e => {
-    setSearchInput(e.target.value);
-    const formattedValue = e.target.value.toLowerCase();
-
-    // Reset the list if the input is cleared
-    if (!formattedValue.length) {
-      setWineList(initialWineList);
-    } else {
-      const filteredItems = initialWineList.filter(wine =>
-        wine.toLowerCase().includes(formattedValue)
-      );
-      setWineList(filteredItems);
-    }
-  };
-
-  const handleSubmit = () => {
-    // We don't need to prevent the default event because SearchForm handles that internally
-    console.log(`Searching for: ${searchInput}`);
-  };
-
-  return (
-    <Flex minHeight={200} alignItems="flex-start" padding="xs">
-      <SearchForm
-        autocompleteItems={menuItems}
-        grow
-        onInputChange={filterMenuItems}
-        onSubmit={handleSubmit}
-      />
-    </Flex>
-  );
-};

package/dist/mdx/labs-react/search-form/examples/RTL.tsx

@@ -1,66 +0,0 @@
-import * as React from 'react';
-import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
-import {SearchForm} from '@workday/canvas-kit-labs-react/search-form';
-import {Flex} from '@workday/canvas-kit-react/layout';
-import {CanvasProvider} from '@workday/canvas-kit-react/common';
-
-const initialWineList = [
-  'Beaujolais',
-  'Bordeaux',
-  'Cabernet Sauvignon',
-  'Champagne',
-  'Chardonnay',
-  'Chianti',
-  'Malbec',
-  'Merlot',
-  'Pinot Grigio',
-  'Pinot Gris',
-  'Pinot Noir',
-  'Primitivo',
-  'Prosecco',
-  'Riesling',
-  'Rioja',
-  'Rosé',
-  'Sauvignon Blanc',
-  'Syrah',
-  'Zinfandel',
-];
-
-export default () => {
-  const [wineList, setWineList] = React.useState(initialWineList);
-  // Tracking the input value for onSubmit
-  const [searchInput, setSearchInput] = React.useState('');
-  const menuItems = wineList.map(wine => <StyledMenuItem key={wine}>{wine}</StyledMenuItem>);
-
-  const filterMenuItems = e => {
-    setSearchInput(e.target.value);
-    const formattedValue = e.target.value.toLowerCase();
-
-    // Reset the list if the input is cleared
-    if (!formattedValue.length) {
-      setWineList(initialWineList);
-    } else {
-      const filteredItems = initialWineList.filter(wine =>
-        wine.toLowerCase().includes(formattedValue)
-      );
-      setWineList(filteredItems);
-    }
-  };
-
-  const handleSubmit = () => {
-    // We don't need to prevent the default event because SearchForm handles that internally
-    console.log(`Searching for: ${searchInput}`);
-  };
-
-  return (
-    <CanvasProvider dir="rtl">
-      <Flex minHeight={200} alignItems="flex-start" padding="xs">
-        <SearchForm
-          autocompleteItems={menuItems}
-          onInputChange={filterMenuItems}
-          onSubmit={handleSubmit}
-        />
-      </Flex>
-    </CanvasProvider>
-  );
-};

package/dist/mdx/labs-react/search-form/examples/Theming.tsx

@@ -1,66 +0,0 @@
-import * as React from 'react';
-import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
-import {SearchForm, SearchTheme} from '@workday/canvas-kit-labs-react/search-form';
-import {Flex} from '@workday/canvas-kit-react/layout';
-
-const initialWineList = [
-  'Beaujolais',
-  'Bordeaux',
-  'Cabernet Sauvignon',
-  'Champagne',
-  'Chardonnay',
-  'Chianti',
-  'Malbec',
-  'Merlot',
-  'Pinot Grigio',
-  'Pinot Gris',
-  'Pinot Noir',
-  'Primitivo',
-  'Prosecco',
-  'Riesling',
-  'Rioja',
-  'Rosé',
-  'Sauvignon Blanc',
-  'Syrah',
-  'Zinfandel',
-];
-
-export default () => {
-  const [wineList, setWineList] = React.useState(initialWineList);
-  // Tracking the input value for onSubmit
-  const [searchInput, setSearchInput] = React.useState('');
-  const menuItems = wineList.map(wine => <StyledMenuItem key={wine}>{wine}</StyledMenuItem>);
-
-  const filterMenuItems = e => {
-    setSearchInput(e.target.value);
-    const formattedValue = e.target.value.toLowerCase();
-
-    // Reset the list if the input is cleared
-    if (!formattedValue.length) {
-      setWineList(initialWineList);
-    } else {
-      const filteredItems = initialWineList.filter(wine =>
-        wine.toLowerCase().includes(formattedValue)
-      );
-      setWineList(filteredItems);
-    }
-  };
-
-  const handleSubmit = () => {
-    // We don't need to prevent the default event because SearchForm handles that internally
-    console.log(`Searching for: ${searchInput}`);
-  };
-
-  return (
-    <Flex minHeight={200} alignItems="flex-start">
-      <Flex padding="xs" backgroundColor="blueberry500" flex={1} flexBasis="auto">
-        <SearchForm
-          searchTheme={SearchTheme.Dark}
-          autocompleteItems={menuItems}
-          onInputChange={filterMenuItems}
-          onSubmit={handleSubmit}
-        />
-      </Flex>
-    </Flex>
-  );
-};