@workday/canvas-kit-docs 10.3.0-653-next.0 → 10.3.0-660-next.0

package/dist/mdx/preview-react/loading-sparkles/LoadingSparkles.mdx

@@ -19,8 +19,21 @@ yarn add @workday/canvas-kit-react
 
 ### Basic Example
 
-`LoadingSparkles` is designed to work out-of-the-box, but you'll need to add `aria-live="polite"`
-and a descriptive `aria-label` for screen reader accesibility.
+`LoadingSparkles` is designed to work out-of-the-box, but you'll need to add some wiring for screen
+readers. In the example below, we're simulating a loading state with a `setTimeout` that's triggered
+when the "Generate Quote" button is clicked.
+
+The ARIA live region uses the `aria-label` on `LoadingSparkles` to announce the loading state. And
+it uses the text in `AccessibleHide` to announce when loading is complete. In a real-world
+application, you would probably add another state for loading failures. Also note that generated
+text should live outside the live region. This content doesn't need to be announced to screen
+readers.
+
+#### Consolidating ARIA Live Regions
+
+In the example, we wrapped `LoadingSparkles` inside our `AriaLiveRegion` component, but in general
+you should not have multiple ARIA live regions on the page at once. If you already have a live
+region, consider sending these loading messages there instead of adding another region.
 
 <ExampleCodeBlock code={Basic} />
 

package/dist/mdx/preview-react/loading-sparkles/examples/Basic.tsx

@@ -1,6 +1,64 @@
 import React from 'react';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {Text} from '@workday/canvas-kit-react/text';
 import {LoadingSparkles} from '@workday/canvas-kit-preview-react/loading-sparkles';
+import {AccessibleHide, AriaLiveRegion} from '@workday/canvas-kit-react/common';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const containerStyles = createStyles({
+  minHeight: '3.5rem',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.5rem',
+});
 
 export default () => {
-  return <LoadingSparkles aria-live="polite" aria-label="Generating content" />;
+  const [loadingStatus, setLoadingStatus] = React.useState<'idle' | 'loading' | 'success'>('idle');
+  const [quote, setQuote] = React.useState('');
+
+  React.useEffect(() => {
+    if (loadingStatus === 'loading') {
+      const mockLoading = setTimeout(() => {
+        setLoadingStatus('success');
+        setQuote(getQuote());
+      }, 3000);
+
+      return () => {
+        clearTimeout(mockLoading);
+      };
+    }
+  }, [loadingStatus]);
+
+  const handleClick = () => {
+    setQuote('');
+    setLoadingStatus('loading');
+  };
+
+  return (
+    <>
+      <div className={containerStyles}>
+        {quote && <Text cs={{maxWidth: '60ch'}}>{quote}</Text>}
+        <AriaLiveRegion>
+          {loadingStatus === 'loading' && <LoadingSparkles aria-label="loading" />}
+          {loadingStatus === 'success' && (
+            <AccessibleHide role="status">loading complete</AccessibleHide>
+          )}
+        </AriaLiveRegion>
+      </div>
+      <SecondaryButton onClick={handleClick}>Generate Quote</SecondaryButton>
+    </>
+  );
+};
+
+const robotQuotes = [
+  'The Zeroth Law: A robot may not harm humanity, or, by inaction, allow humanity to come to harm.',
+  'Law 1: A robot may not injure a human being or, through inaction, allow a human being to come to harm.',
+  'Law 2: A robot must obey the orders given it by human beings except where such orders would conflict with the First Law.',
+  'Law 3: A robot must protect its own existence as long as such protection does not conflict with the First or Second Law.',
+  'There is nothing so eternally adhesive as the memory of power.',
+];
+
+const getQuote = () => {
+  const index = Math.floor(Math.random() * robotQuotes.length);
+  return robotQuotes[index];
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "10.3.0-653-next.0",
+  "version": "10.3.0-660-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,10 +44,10 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^10.3.0-653-next.0",
-    "@workday/canvas-kit-preview-react": "^10.3.0-653-next.0",
-    "@workday/canvas-kit-react": "^10.3.0-653-next.0",
-    "@workday/canvas-kit-styling": "^10.3.0-653-next.0",
+    "@workday/canvas-kit-labs-react": "^10.3.0-660-next.0",
+    "@workday/canvas-kit-preview-react": "^10.3.0-660-next.0",
+    "@workday/canvas-kit-react": "^10.3.0-660-next.0",
+    "@workday/canvas-kit-styling": "^10.3.0-660-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^1.0.0",
     "markdown-to-jsx": "^6.10.3",
@@ -59,5 +59,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.2"
   },
-  "gitHead": "7d7f7c528ded20938d7eef83a61c946d463708af"
+  "gitHead": "f910885560529fbddd85ae827d4fa4f019a9f58d"
 }