From 3518dfe3750c8d3bab260ff0451bab0d40ef479e Mon Sep 17 00:00:00 2001 From: Ngoc Tu NGUYEN Date: Wed, 30 Oct 2024 20:26:03 +0100 Subject: [PATCH 1/4] fix: navigation component Add new story, update styles, changed contributing guide --- .changeset/hip-jobs-change.md | 5 +++++ CONTRIBUTING.md | 6 +++--- packages/nuka/src/Carousel/Carousel.css | 7 ++++--- .../nuka/src/Carousel/Carousel.stories.tsx | 13 +++++++++++++ packages/nuka/src/Carousel/NavButtons.tsx | 18 ++++++++++++++---- 5 files changed, 39 insertions(+), 10 deletions(-) create mode 100644 .changeset/hip-jobs-change.md diff --git a/.changeset/hip-jobs-change.md b/.changeset/hip-jobs-change.md new file mode 100644 index 00000000..d4bfc5ab --- /dev/null +++ b/.changeset/hip-jobs-change.md @@ -0,0 +1,5 @@ +--- +'nuka-carousel': patch +--- + +Replace div for button elements #1081 diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 320c098b..35c04c0e 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -17,13 +17,13 @@ $ pnpm run build ## Running the demos -Run the NextJS example on `localhost:3000` +Run docosaurus site on `localhost:3000` ```sh -$ pnpm run start:nextjs +$ pnpm run start:website ``` -To make changes to the Nuka Carousel library and have those changes reflect in the NextJS demo app also run +To make changes to the Nuka Carousel library and have those changes reflect in the Docosaurus demo app also run ```sh $ pnpm run build:watch diff --git a/packages/nuka/src/Carousel/Carousel.css b/packages/nuka/src/Carousel/Carousel.css index 0f8cabb6..8c94a0d7 100644 --- a/packages/nuka/src/Carousel/Carousel.css +++ b/packages/nuka/src/Carousel/Carousel.css @@ -40,6 +40,10 @@ border-radius: 9999px; font-size: 1rem; user-select: none; + border: 0; + display: flex; + align-items: center; + justify-content: center; } .nuka-nav-button.nuka-nav-button-prev { left: 0; @@ -52,9 +56,6 @@ .nuka-nav-button:hover { background-color: rgba(146, 148, 151, 0.65); } -.nuka-nav-button-enabled { - display: block; -} .nuka-container-auto-hide .nuka-nav-button { display: none; } diff --git a/packages/nuka/src/Carousel/Carousel.stories.tsx b/packages/nuka/src/Carousel/Carousel.stories.tsx index aeafa2e8..a623a652 100644 --- a/packages/nuka/src/Carousel/Carousel.stories.tsx +++ b/packages/nuka/src/Carousel/Carousel.stories.tsx @@ -200,3 +200,16 @@ export const AfterSlide: Story = { ), }, }; + +export const WithArrows: Story = { + args: { + showArrows: true, + children: ( + <> + {[...Array(10)].map((_, index) => ( + + ))} + + ), + }, +}; diff --git a/packages/nuka/src/Carousel/NavButtons.tsx b/packages/nuka/src/Carousel/NavButtons.tsx index 8bd942f9..42a20f39 100644 --- a/packages/nuka/src/Carousel/NavButtons.tsx +++ b/packages/nuka/src/Carousel/NavButtons.tsx @@ -24,7 +24,12 @@ export function NavButtons() { return ( <> -
+
-
+ +
+ ); } From a391411959b883efe73f3dc59458c55162861072 Mon Sep 17 00:00:00 2001 From: Ngoc Tu NGUYEN Date: Wed, 30 Oct 2024 20:41:13 +0100 Subject: [PATCH 2/4] fix(PageIndicators.tsx): add extra text windows narrator would read only numbers without extra context --- packages/nuka/src/Carousel/PageIndicators.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/nuka/src/Carousel/PageIndicators.tsx b/packages/nuka/src/Carousel/PageIndicators.tsx index 5746aa7a..5c500600 100644 --- a/packages/nuka/src/Carousel/PageIndicators.tsx +++ b/packages/nuka/src/Carousel/PageIndicators.tsx @@ -18,7 +18,7 @@ export const PageIndicators = () => { onClick={() => goToPage(index)} className={className(index)} > - {index + 1} + Slide {index + 1} ))} From 653a62d967784980de1aae9f3b40dcec4cf2932b Mon Sep 17 00:00:00 2001 From: Ngoc Tu NGUYEN Date: Wed, 30 Oct 2024 20:50:34 +0100 Subject: [PATCH 3/4] fix(README.md): update install section --- README.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/README.md b/README.md index 30e08d6f..4fa8efc4 100644 --- a/README.md +++ b/README.md @@ -11,10 +11,24 @@ Small, fast and accessibility-first React carousel library with easily customiza To add `nuka-carousel` to your project run the following command in your project folder. +#### Yarn + ```bash $ yarn add nuka-carousel ``` +#### NPM + +```bash +$ npm install nuka-carousel +``` + +#### PNPM + +```bash +$ pnpm add nuka-carousel +``` + Come learn more and see a live demo at our [docs site](https://commerce.nearform.com/open-source/nuka-carousel)! ## Support From b52b613d03e0fdf4e92e93233c25ef2b3c65fad0 Mon Sep 17 00:00:00 2001 From: Ngoc Tu NGUYEN Date: Sat, 25 Apr 2026 15:55:45 +0200 Subject: [PATCH 4/4] fix: set disable prop, update changeset --- .changeset/hip-jobs-change.md | 2 +- CONTRIBUTING.md | 4 ++-- packages/nuka/src/Carousel/NavButtons.tsx | 2 ++ 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/.changeset/hip-jobs-change.md b/.changeset/hip-jobs-change.md index d4bfc5ab..853037e7 100644 --- a/.changeset/hip-jobs-change.md +++ b/.changeset/hip-jobs-change.md @@ -2,4 +2,4 @@ 'nuka-carousel': patch --- -Replace div for button elements #1081 +Replace div elements with button elements (#1081) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 35c04c0e..75c437bb 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -17,13 +17,13 @@ $ pnpm run build ## Running the demos -Run docosaurus site on `localhost:3000` +Run Docusaurus site on `localhost:3000` ```sh $ pnpm run start:website ``` -To make changes to the Nuka Carousel library and have those changes reflect in the Docosaurus demo app also run +To make changes to the Nuka Carousel library and have those changes reflect in the Docusaurus demo app also run ```sh $ pnpm run build:watch diff --git a/packages/nuka/src/Carousel/NavButtons.tsx b/packages/nuka/src/Carousel/NavButtons.tsx index 42a20f39..0bac48de 100644 --- a/packages/nuka/src/Carousel/NavButtons.tsx +++ b/packages/nuka/src/Carousel/NavButtons.tsx @@ -28,6 +28,7 @@ export function NavButtons() { type="button" className={prevNavClassName} onClick={goBack} + disabled={!enablePrevNavButton} aria-label="Go to previous slide" >