Add focusable example

FormidableLabs · Feb 21, 2024 · 64437cc · 64437cc
1 parent 5bcf9ea
commit 64437cc
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 70 deletions.
diff --git a/.github/workflows/storybook-tests.yml b/.github/workflows/storybook-tests.yml
diff --git a/packages/nuka/src/Carousel/Carousel.stories.tsx b/packages/nuka/src/Carousel/Carousel.stories.tsx
@@ -3,7 +3,11 @@ import { within, waitFor, userEvent } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 import { Carousel, CarouselProps, SlideHandle } from './Carousel';
 import { useRef } from 'react';
-import { ExampleSlide, FullWidthSlide } from './ExampleSlide';
+import {
+  ExampleSlide,
+  FocusableLinkSlide,
+  FullWidthSlide,
+} from './ExampleSlide';
 import './CarouselStories.css';
 
 const StorybookComponent = (props: CarouselProps) => {
@@ -125,3 +129,15 @@ export const PageIndicators: Story = {
     ),
   },
 };
+
+export const FocusableCards: Story = {
+  args: {
+    children: (
+      <>
+        {[...Array(10)].map((_, index) => (
+          <FocusableLinkSlide key={index} index={index} />
+        ))}
+      </>
+    ),
+  },
+};
diff --git a/packages/nuka/src/Carousel/CarouselStories.css b/packages/nuka/src/Carousel/CarouselStories.css
@@ -21,3 +21,8 @@
 .indicator__current {
   background-color: darkslategray;
 }
+
+.focusable:focus::after {
+  display: block;
+  content: 'focused';
+}
diff --git a/packages/nuka/src/Carousel/ExampleSlide.tsx b/packages/nuka/src/Carousel/ExampleSlide.tsx
@@ -24,3 +24,17 @@ export const FullWidthSlide = ({ index }: { index: number }) => (
     {index}
   </div>
 );
+
+export const FocusableLinkSlide = ({ index }: { index: number }) => (
+  <a
+    href="#"
+    style={{
+      ...getExampleSlideStyles(index),
+      flexDirection: 'column',
+    }}
+    onFocus={(event) => event.target.scrollIntoView()}
+    className="focusable"
+  >
+    Card {index}
+  </a>
+);
diff --git a/website/src/components/cards.tsx b/website/src/components/cards.tsx
@@ -19,30 +19,21 @@ const Card = ({ className, slideId }: CardProps) => (
   </div>
 );
 
-export const Cards = [
-  <Card
-    slideId="Slide 1"
-    key="amber-card"
-    className="bg-amber-400 text-amber-700"
-  />,
-  <Card
-    slideId="Slide 2"
-    key="indigo-card"
-    className="bg-indigo-400 text-indigo-800"
-  />,
-  <Card
-    slideId="Slide 3"
-    key="green-card"
-    className="bg-green-400 text-green-800"
-  />,
-  <Card
-    slideId="Slide 4"
-    key="rose-card"
-    className="bg-rose-400 text-rose-800"
-  />,
-  <Card
-    slideId="Slide 5"
-    key="stone-card"
-    className="bg-stone-400 text-stone-700"
-  />,
+const colorPairings = [
+  'bg-red-300 text-red-700',
+  'bg-orange-300 text-orange-700',
+  'bg-yellow-300 text-yellow-700',
+  'bg-green-300 text-green-700',
+  'bg-blue-300 text-blue-700',
+  'bg-purple-300 text-purple-700',
+  'bg-violet-300 text-violet-700',
 ];
+
+export const generateCards = (length: number = 7) =>
+  [...Array(length)].map((_, index) => (
+    <Card
+      slideId={`Slide ${index}`}
+      key={index}
+      className={colorPairings[index % 7]}
+    />
+  ));
diff --git a/website/src/components/demos.tsx b/website/src/components/demos.tsx
@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
 import Carousel, { SlideHandle } from 'nuka-carousel';
-import { Cards } from '@site/src/components/cards';
+import { generateCards } from '@site/src/components/cards';
 
 type scrollDistanceType = number | 'slide' | 'screen';
 
@@ -29,7 +29,6 @@ export const BasicDemo = ({
   className = '',
 }: Props) => {
   const ref = useRef<SlideHandle>(null);
-  console.log(scrollDistance);
   return (
     <div className={className}>
       <Carousel
@@ -41,7 +40,7 @@ export const BasicDemo = ({
         wrapperClassName={wrapperClassName}
         ref={ref}
       >
-        {Cards}
+        {generateCards()}
       </Carousel>
 
       <div>