Update autoplay examples for controlled and events to display new cal…

…lback
microsoft · Nov 18, 2024 · f1af038 · f1af038
1 parent da29cc0
commit f1af038
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 48 deletions.
diff --git a/packages/react-components/react-carousel/stories/src/Carousel/CarouselControlled.stories.tsx b/packages/react-components/react-carousel/stories/src/Carousel/CarouselControlled.stories.tsx
@@ -9,6 +9,7 @@ import {
   Toolbar,
   ToolbarButton,
   CarouselSlider,
+  CarouselAutoplayButton,
 } from '@fluentui/react-components';
 import {
   Carousel,
@@ -40,6 +41,7 @@ const useClasses = makeStyles({
     gap: '10px',
 
     alignSelf: 'center',
+    justifySelf: 'center',
     width: 'max-content',
 
     border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
@@ -125,58 +127,62 @@ export const Controlled = () => {
     <div className={classes.container}>
       <Carousel
         activeIndex={activeIndex}
-        className={classes.carousel}
         groupSize={1}
         onActiveIndexChange={(e, data) => setActiveIndex(data.index)}
+        onAutoplayIndexChange={(e, data) => setActiveIndex(data.index)}
         announcement={getAnnouncement}
       >
-        <Tooltip content="Go To Previous Page" relationship="label">
-          <CarouselButton navType="prev" aria-label="Previous Carousel Page Button" />
-        </Tooltip>
-
-        <CarouselViewport className={classes.viewport}>
-          <CarouselSlider>
-            <CarouselCard aria-label="1 of 5">
-              <WireframeContent index={0} />
-            </CarouselCard>
-            <CarouselCard aria-label="2 of 5">
-              <WireframeContent index={1} />
-            </CarouselCard>
-            <CarouselCard aria-label="3 of 5">
-              <WireframeContent index={2} />
-            </CarouselCard>
-            <CarouselCard aria-label="4 of 5">
-              <WireframeContent index={3} />
-            </CarouselCard>
-            <CarouselCard aria-label="5 of 5">
-              <WireframeContent index={4} />
-            </CarouselCard>
-          </CarouselSlider>
-        </CarouselViewport>
-
-        <Tooltip content="Go To Next Page" relationship="label">
-          <CarouselButton navType="next" aria-label="Next Carousel Page Button" />
-        </Tooltip>
+        <div className={classes.carousel}>
+          <Tooltip content="Go To Previous Page" relationship="label">
+            <CarouselButton navType="prev" aria-label="Previous Carousel Page Button" />
+          </Tooltip>
+
+          <CarouselViewport className={classes.viewport}>
+            <CarouselSlider>
+              <CarouselCard aria-label="1 of 5">
+                <WireframeContent index={0} />
+              </CarouselCard>
+              <CarouselCard aria-label="2 of 5">
+                <WireframeContent index={1} />
+              </CarouselCard>
+              <CarouselCard aria-label="3 of 5">
+                <WireframeContent index={2} />
+              </CarouselCard>
+              <CarouselCard aria-label="4 of 5">
+                <WireframeContent index={3} />
+              </CarouselCard>
+              <CarouselCard aria-label="5 of 5">
+                <WireframeContent index={4} />
+              </CarouselCard>
+            </CarouselSlider>
+          </CarouselViewport>
+
+          <Tooltip content="Go To Next Page" relationship="label">
+            <CarouselButton navType="next" aria-label="Next Carousel Page Button" />
+          </Tooltip>
+        </div>
+
+        <div className={classes.footer}>
+          <CarouselAutoplayButton />
+          <Divider vertical />
+          <code className={classes.code}>{JSON.stringify({ activeIndex }, null, 2)}</code>
+          <Divider vertical />
+          <Toolbar className={classes.controls}>
+            {new Array(5).fill(null).map((_, index) => (
+              <ToolbarButton
+                key={`toolbar-button-${index}`}
+                aria-label={`Carousel Nav Button ${index} `}
+                className={classes.controlButton}
+                appearance="subtle"
+                disabled={index === activeIndex}
+                onClick={() => setActiveIndex(index)}
+              >
+                {index}
+              </ToolbarButton>
+            ))}
+          </Toolbar>
+        </div>
       </Carousel>
-
-      <div className={classes.footer}>
-        <code className={classes.code}>{JSON.stringify({ activeIndex }, null, 2)}</code>
-        <Divider vertical />
-        <Toolbar className={classes.controls}>
-          {new Array(5).fill(null).map((_, index) => (
-            <ToolbarButton
-              key={`toolbar-button-${index}`}
-              aria-label={`Carousel Nav Button ${index} `}
-              className={classes.controlButton}
-              appearance="subtle"
-              disabled={index === activeIndex}
-              onClick={() => setActiveIndex(index)}
-            >
-              {index}
-            </ToolbarButton>
-          ))}
-        </Toolbar>
-      </div>
     </div>
   );
 };

diff --git a/packages/react-components/react-carousel/stories/src/Carousel/CarouselEventing.stories.tsx b/packages/react-components/react-carousel/stories/src/Carousel/CarouselEventing.stories.tsx
@@ -139,7 +139,7 @@ export const Eventing = () => {
 
   const [activeIndex, setActiveIndex] = React.useState(0);
   const [statusLog, setStatusLog] = React.useState<
-    [number, { type: 'click' | 'focus' | 'drag' | undefined; index: number }][]
+    [number, { type: 'click' | 'focus' | 'drag' | 'autoplay' | undefined; index: number }][]
   >([]);
 
   return (
@@ -155,6 +155,10 @@ export const Eventing = () => {
           setActiveIndex(data.index);
           setStatusLog(prev => [[Date.now(), { type: data.type, index: data.index }], ...prev]);
         }}
+        onAutoplayIndexChange={(ev, data) => {
+          setActiveIndex(data.index);
+          setStatusLog(prev => [[Date.now(), { type: data.type, index: data.index }], ...prev]);
+        }}
       >
         <CarouselViewport>
           <CarouselSlider cardFocus>
@@ -209,6 +213,7 @@ export const Eventing = () => {
           layout="inline"
           next={{ 'aria-label': 'go to next' }}
           prev={{ 'aria-label': 'go to prev' }}
+          autoplay={{ 'aria-label': 'Carousel autoplay' }}
         >
           <CarouselNav>{index => <CarouselNavButton aria-label={`Carousel Nav Button ${index}`} />}</CarouselNav>
         </CarouselNavContainer>