@workday/canvas-kit-docs 6.0.0-alpha.0-next.30 → 6.0.0-alpha.0-next.36

package/dist/mdx/labs-react/text-input/examples/ThemedAlert.tsx

@@ -1,51 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
-import {useThemedRing} from '@workday/canvas-kit-labs-react/common';
-import {VStack} from '@workday/canvas-kit-labs-react/layout';
-import {CanvasProvider, PartialEmotionCanvasTheme, styled} from '@workday/canvas-kit-react/common';
-import {colors, CSSProperties, space} from '@workday/canvas-kit-react/tokens';
-
-export default () => {
-  const theme: PartialEmotionCanvasTheme = {
-    canvas: {
-      palette: {
-        common: {
-          focusOutline: colors.grapeSoda300,
-        },
-        alert: {
-          main: colors.kiwi500,
-          darkest: colors.kiwi600,
-        },
-      },
-    },
-  };
-  return (
-    <CanvasProvider theme={theme}>
-      <AlertInput />
-    </CanvasProvider>
-  );
-};
-
-const StyledField = styled(TextInput.Field)<{alertStyles?: CSSProperties}>(
-  ({alertStyles}) => alertStyles
-);
-
-const AlertInput = () => {
-  const [value, setValue] = React.useState('invalid@email');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  const alertStyles = useThemedRing('alert');
-
-  return (
-    <VStack spacing="xxxs" alignItems="flex-start">
-      <TextInput>
-        <TextInput.Label>Email</TextInput.Label>
-        <StyledField alertStyles={alertStyles} onChange={handleChange} value={value} />
-        <TextInput.Hint paddingTop={space.xxs}>Please enter a valid email.</TextInput.Hint>
-      </TextInput>
-    </VStack>
-  );
-};

package/dist/mdx/react/pagination/examples/ShowAdditionalDetails.tsx

@@ -1,52 +0,0 @@
-import * as React from 'react';
-import {
-  Pagination,
-  getLastPage,
-  getVisibleResultsMax,
-  getVisibleResultsMin,
-} from '@workday/canvas-kit-react/pagination';
-
-export default () => {
-  const resultCount = 10;
-  const totalCount = 100;
-  const lastPage = getLastPage(resultCount, totalCount);
-
-  return (
-    <Pagination
-      onPageChange={pageNumber => console.log(pageNumber)}
-      aria-label="Pagination"
-      lastPage={lastPage}
-      rangeSize={3}
-      initialCurrentPage={3}
-    >
-      <Pagination.Controls>
-        <Pagination.JumpToFirstButton aria-label="First" />
-        <Pagination.StepToPreviousButton aria-label="Previous" />
-        <Pagination.PageList>
-          {({state}) =>
-            state.range.map(pageNumber => (
-              <Pagination.PageListItem key={pageNumber}>
-                <Pagination.PageButton aria-label={`Page ${pageNumber}`} pageNumber={pageNumber} />
-              </Pagination.PageListItem>
-            ))
-          }
-        </Pagination.PageList>
-        <Pagination.StepToNextButton aria-label="Next" />
-        <Pagination.JumpToLastButton aria-label="Last" />
-        <Pagination.GoToForm>
-          <Pagination.GoToTextInput aria-label="Go to page number" />
-          <Pagination.GoToLabel>{() => `of ${totalCount} results`}</Pagination.GoToLabel>
-        </Pagination.GoToForm>
-      </Pagination.Controls>
-      <Pagination.AdditionalDetails>
-        {({state}) =>
-          `${getVisibleResultsMin(state.currentPage, resultCount)}-${getVisibleResultsMax(
-            state.currentPage,
-            resultCount,
-            totalCount
-          )} of ${totalCount} results`
-        }
-      </Pagination.AdditionalDetails>
-    </Pagination>
-  );
-};