@workday/canvas-kit-docs 5.3.0-next.10 → 5.3.0-next.24

package/dist/mdx/react/button/button/examples/SecondaryInverse.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {HStack} from '@workday/canvas-kit-labs-react/layout';
+import {plusIcon} from '@workday/canvas-system-icons-web';
+
+export default () => (
+  <HStack spacing="s" backgroundColor="blueberry400" padding="s">
+    <SecondaryButton variant="inverse">Secondary</SecondaryButton>
+    <SecondaryButton icon={plusIcon} iconPosition="right" variant="inverse">
+      Secondary
+    </SecondaryButton>
+  </HStack>
+);

package/dist/mdx/react/button/button/examples/Tertiary.tsx

@@ -1,5 +1,14 @@
 import React from 'react';
 
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
+import {HStack} from '@workday/canvas-kit-labs-react/layout';
+import {plusIcon} from '@workday/canvas-system-icons-web';
 
-export default () => <TertiaryButton>Click Me</TertiaryButton>;
+export default () => (
+  <HStack spacing="s" padding="s">
+    <TertiaryButton>Tertiary</TertiaryButton>
+    <TertiaryButton icon={plusIcon} iconPosition="right">
+      Tertiary
+    </TertiaryButton>
+  </HStack>
+);

package/dist/mdx/react/button/button/examples/TertiaryInverse.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import {TertiaryButton} from '@workday/canvas-kit-react/button';
+import {HStack} from '@workday/canvas-kit-labs-react/layout';
+import {plusIcon} from '@workday/canvas-system-icons-web';
+
+export default () => (
+  <HStack spacing="s" backgroundColor="blueberry400" padding="s">
+    <TertiaryButton variant="inverse">Tertiary</TertiaryButton>
+    <TertiaryButton icon={plusIcon} iconPosition="right" variant="inverse">
+      Tertiary
+    </TertiaryButton>
+  </HStack>
+);

package/dist/mdx/react/button/icon-button/IconButton.mdx

@@ -98,6 +98,6 @@ The `toggle` prop can be used to make icon buttons toggleable.
 
 ## Props
 
-Undocumented props are spread to the underlying `button` element.
+Undocumented props are spread to the underlying `<button>` element.
 
 <ArgsTable of={IconButton} />

package/dist/mdx/react/loading-animation/LoadingAnimation.mdx

@@ -1,6 +1,7 @@
 import {LoadingAnimation} from '@workday/canvas-kit-react/loading-animation';
 
 import Basic from './examples/Basic';
+import RTL from './examples/RTL';
 
 
 # Canvas Kit Loading Animation
@@ -22,6 +23,10 @@ yarn add @workday/canvas-kit-react
 
 <ExampleCodeBlock code={Basic} />
 
+### Right-to-Left (RTL)
+
+<ExampleCodeBlock code={RTL} />
+
 ## Props
 
 Loading Animation does not have any documented props. Undocumented props are spread to its outermost

package/dist/mdx/react/loading-animation/examples/RTL.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {LoadingAnimation} from '@workday/canvas-kit-react/loading-animation';
+import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+
+export default () => {
+  const theme = {
+    canvas: {
+      direction: ContentDirection.RTL,
+    },
+  };
+  return (
+    <CanvasProvider theme={theme}>
+      <LoadingAnimation />
+    </CanvasProvider>
+  );
+};

package/dist/mdx/react/pagination/PropTables.splitprops.tsx

@@ -0,0 +1,47 @@
+import {
+  PaginationModel,
+  PaginationState,
+  PaginationEvents,
+  UsePaginationModelConfig,
+} from '@workday/canvas-kit-react/pagination';
+
+// <ArgsTable of={Pagination} /> generates a very large props table given that
+// PaginationProps includes FlexProps. Use this dummy component instead to
+// limit the props shown.
+export const PaginationHoistedComponent = (_: {model: PaginationModel}) => <div />;
+
+// <ArgsTable of={Pagination.PageButton} /> generates a props table with
+// IconButton props. Use this dummy component instead to limit the props shown.
+export const PageButtonComponent = (_: {pageNumber: number}) => <div />;
+
+// <ArgsTable of={Pagination.PageListComponent} /> generates a very large props
+// table given that PageListProps includes FlexProps. Use this dummy component
+// instead to limit the props shown.
+export const PageListComponent = (_: {
+  /**
+   * Accepts child elements or a render prop.
+   */
+  children: (model: PaginationModel) => React.ReactNode | React.ReactNode;
+}) => <div />;
+
+// <ArgsTable of={Pagination.AdditionalDetails} /> generates a very large props
+// table given that AdditionalDetailsProps includes FlexProps. Use this dummy
+// component instead to limit the props shown.
+export const AdditionalDetailsComponent = (_: {
+  /**
+   * Accepts child elements or a render prop.
+   */
+  children: (model: PaginationModel) => React.ReactNode | React.ReactNode;
+  /**
+   * @default true
+   */
+  shouldAnnounceToScreenReader?: boolean;
+  /**
+   * @default false
+   */
+  shouldHideDetails?: boolean;
+}) => <div />;
+
+export const PaginationModelConfigComponent = (_: UsePaginationModelConfig) => <div />;
+export const PaginationStateComponent = (_: PaginationState) => <div />;
+export const PaginationEventsComponent = (_: PaginationEvents) => <div />;

package/dist/mdx/react/pagination/examples/{StepControls.tsx → Basic.tsx}

@@ -30,7 +30,7 @@ export default () => {
         </Pagination.PageList>
         <Pagination.StepToNextButton aria-label="Next" />
       </Pagination.Controls>
-      <Pagination.AdditionalDetails shouldHideDetails>
+      <Pagination.AdditionalDetails>
         {({state}) =>
           `${getVisibleResultsMin(state.currentPage, resultCount)}-${getVisibleResultsMax(
             state.currentPage,

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

@@ -33,7 +33,7 @@ export default () => {
         <Pagination.JumpToLastButton aria-label="Last" />
         <Pagination.GoToForm>
           <Pagination.GoToTextInput aria-label="Go to page number" />
-          <Pagination.GoToLabel>{({state}) => `of ${totalCount} results`}</Pagination.GoToLabel>
+          <Pagination.GoToLabel>{({state}) => `of ${state.lastPage} pages`}</Pagination.GoToLabel>
         </Pagination.GoToForm>
       </Pagination.Controls>
       <Pagination.AdditionalDetails shouldHideDetails>

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {
   Pagination,
   getLastPage,
@@ -16,30 +17,43 @@ export default () => {
     lastPage,
     onPageChange: number => console.log(number),
   });
+
   return (
-    <Pagination aria-label="Pagination" model={model}>
-      <Pagination.Controls>
-        <Pagination.StepToPreviousButton aria-label="Previous" />
-        <Pagination.PageList>
+    <>
+      <Pagination aria-label="Pagination" model={model}>
+        <Pagination.Controls>
+          <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.Controls>
+        <Pagination.AdditionalDetails shouldHideDetails>
           {({state}) =>
-            state.range.map(pageNumber => (
-              <Pagination.PageListItem key={pageNumber}>
-                <Pagination.PageButton aria-label={`Page ${pageNumber}`} pageNumber={pageNumber} />
-              </Pagination.PageListItem>
-            ))
+            `${getVisibleResultsMin(state.currentPage, resultCount)}-${getVisibleResultsMax(
+              state.currentPage,
+              resultCount,
+              totalCount
+            )} of ${totalCount} results`
           }
-        </Pagination.PageList>
-        <Pagination.StepToNextButton aria-label="Next" />
-      </Pagination.Controls>
-      <Pagination.AdditionalDetails shouldHideDetails>
-        {({state}) =>
-          `${getVisibleResultsMin(state.currentPage, resultCount)}-${getVisibleResultsMax(
-            state.currentPage,
-            resultCount,
-            totalCount
-          )} of ${totalCount} results`
-        }
-      </Pagination.AdditionalDetails>
-    </Pagination>
+        </Pagination.AdditionalDetails>
+      </Pagination>
+      <SecondaryButton
+        onClick={() => {
+          model.events.goTo(7);
+        }}
+      >
+        Go to Page 7
+      </SecondaryButton>
+    </>
   );
 };

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

@@ -36,7 +36,7 @@ export default () => {
           <Pagination.JumpToLastButton aria-label="Last" />
           <Pagination.GoToForm>
             <Pagination.GoToTextInput aria-label="Go to page number" />
-            <Pagination.GoToLabel>{() => `من 100 صفحات`}</Pagination.GoToLabel>
+            <Pagination.GoToLabel>{({state}) => `از ${state.lastPage} صفحه`}</Pagination.GoToLabel>
           </Pagination.GoToForm>
         </Pagination.Controls>
         <Pagination.AdditionalDetails shouldHideDetails>