From 8ab70f13ab5ba5edf38bbaca38b8ad1794bc6d56 Mon Sep 17 00:00:00 2001 From: jomcarvajal Date: Fri, 25 Apr 2025 12:12:14 -0600 Subject: [PATCH 1/2] rename sectionnav -> buttonnav --- ...SectionNav.spec.tsx => ButtonNav.spec.tsx} | 12 ++-- ...nNav.stories.tsx => ButtonNav.stories.tsx} | 57 ++++++++++--------- .../{SectionNav => ButtonNav}/index.tsx | 24 ++++---- .../{SectionNav => ButtonNav}/styles.ts | 6 +- src/components/ToggleButtonGroup.stories.tsx | 8 +-- src/components/ToggleButtonGroup/index.tsx | 5 +- ....spec.tsx.snap => ButtonNav.spec.tsx.snap} | 4 +- src/index.ts | 2 +- 8 files changed, 59 insertions(+), 59 deletions(-) rename src/components/{SectionNav.spec.tsx => ButtonNav.spec.tsx} (85%) rename src/components/{SectionNav.stories.tsx => ButtonNav.stories.tsx} (64%) rename src/components/{SectionNav => ButtonNav}/index.tsx (74%) rename src/components/{SectionNav => ButtonNav}/styles.ts (87%) rename src/components/__snapshots__/{SectionNav.spec.tsx.snap => ButtonNav.spec.tsx.snap} (97%) diff --git a/src/components/SectionNav.spec.tsx b/src/components/ButtonNav.spec.tsx similarity index 85% rename from src/components/SectionNav.spec.tsx rename to src/components/ButtonNav.spec.tsx index 85d269d6c..1548128be 100644 --- a/src/components/SectionNav.spec.tsx +++ b/src/components/ButtonNav.spec.tsx @@ -1,7 +1,7 @@ -import { SectionNav } from './SectionNav/index'; +import { ButtonNav } from './ButtonNav/index'; import renderer from 'react-test-renderer'; -describe('SectionNav', () => { +describe('ButtonNav', () => { const childrenListWithKeys = [ , @@ -16,26 +16,26 @@ describe('SectionNav', () => { it('matches snapshot', () => { const tree = renderer.create( - {childrenListWithKeys} - + ).toJSON(); expect(tree).toMatchSnapshot(); }); it('matches snapshot when arrows are disabled', () => { const tree = renderer.create( - {childrenListWithKeys} - + ).toJSON(); expect(tree).toMatchSnapshot(); }); diff --git a/src/components/SectionNav.stories.tsx b/src/components/ButtonNav.stories.tsx similarity index 64% rename from src/components/SectionNav.stories.tsx rename to src/components/ButtonNav.stories.tsx index 0cb1e038a..0eff88f56 100644 --- a/src/components/SectionNav.stories.tsx +++ b/src/components/ButtonNav.stories.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { SectionNav } from "./SectionNav/index"; +import { ButtonNav } from "./ButtonNav/index"; import { ToggleButtonGroup } from "./ToggleButtonGroup/index"; import { Key } from "react-aria-components"; @@ -28,14 +28,14 @@ export const Default = () => { return ( <> - {[childrenListWithKeys]} - + Selected section: {selectedIndex + 1} @@ -68,38 +68,36 @@ export const WithToggleButtonGroups = () => { const flattenedSections = sections.flat(); - const [selectedItems, setSelectedItems] = React.useState(new Set([flattenedSections[0].id])); + const [selectedItem, setSelectedItem] = React.useState(flattenedSections ? flattenedSections[0].id : ''); - const scrollToIndex = (id: Key) => { - const child = document.querySelector(`[data-button-id="${id}"]`) as HTMLElement; + const scrollNavToSection = (sectionDataId: string) => { + const child = document.querySelector(`[data-button-id="${sectionDataId}"]`); if (child) { child.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' }); } }; const handlePrevArrow = () => { - setSelectedItems((prev) => { - const newSet = new Set(); - const firstSectionKeys = flattenedSections.map(section => section.id); - const currentIndex = firstSectionKeys.indexOf([...prev][0] as string); + setSelectedItem((prev) => { + const currentIndex = flattenedSections.findIndex((element) => element.id === prev); + let newSelectedItem = prev; if (currentIndex > 0) { - newSet.add(firstSectionKeys[currentIndex - 1]); - scrollToIndex(firstSectionKeys[currentIndex - 1]); + newSelectedItem = flattenedSections[currentIndex - 1].id; + scrollNavToSection(flattenedSections[currentIndex - 1].id); } - return newSet; + return newSelectedItem; }); }; const handleNextArrow = () => { - setSelectedItems((prev) => { - const newSet = new Set(); - const firstSectionKeys = flattenedSections.map(section => section.id); - const currentIndex = firstSectionKeys.indexOf([...prev][0] as string); - if (currentIndex < firstSectionKeys.length - 1) { - newSet.add(firstSectionKeys[currentIndex + 1]); - scrollToIndex(firstSectionKeys[currentIndex + 1]); + setSelectedItem((prev) => { + const currentIndex = flattenedSections.findIndex((element) => element.id === prev); + let newSelectedItem = prev; + if (currentIndex < flattenedSections.length - 1) { + newSelectedItem = flattenedSections[currentIndex + 1].id; + scrollNavToSection(flattenedSections[currentIndex + 1].id); } - return newSet; + return newSelectedItem; }); }; @@ -107,23 +105,26 @@ export const WithToggleButtonGroups = () => { (sectionSet, index) => ([selectedItem])} + onSelectionChange={(newSet) => setSelectedItem([...newSet][0] as string)} items={sectionSet} /> ); return ( <> - {ToggleGroup} - -

Current selections: {[...selectedItems].join(', ')}

+ +

Current selected: {selectedItem}

); diff --git a/src/components/SectionNav/index.tsx b/src/components/ButtonNav/index.tsx similarity index 74% rename from src/components/SectionNav/index.tsx rename to src/components/ButtonNav/index.tsx index 1bb940b69..e4e14c299 100644 --- a/src/components/SectionNav/index.tsx +++ b/src/components/ButtonNav/index.tsx @@ -1,14 +1,14 @@ import React from "react"; import { - SectionNavContainer, - SectionNavWrapper, - SectionNavGroup, + ButtonNavContainer, + ButtonNavWrapper, + ButtonNavGroup, StyledArrow, } from './styles'; import { LeftArrow } from "../svgs/LeftArrow"; import { RightArrow } from "../svgs/RightArrow"; -export interface SectionNavProps { +export interface ButtonNavProps { children: React.ReactNode[]; handlePrevArrow: () => void; handleNextArrow: () => void; @@ -16,18 +16,18 @@ export interface SectionNavProps { isNextArrowDisabled?: boolean; } -export const SectionNav = ( +export const ButtonNav = ( { children, handlePrevArrow, handleNextArrow, isPrevArrowDisabled = false, isNextArrowDisabled = false - }: SectionNavProps) => { + }: ButtonNavProps) => { const wrapperRef = React.useRef(null); return ( - + - + {children.map((child, index) => - + {child} - + )} - + - + ); }; \ No newline at end of file diff --git a/src/components/SectionNav/styles.ts b/src/components/ButtonNav/styles.ts similarity index 87% rename from src/components/SectionNav/styles.ts rename to src/components/ButtonNav/styles.ts index 2297dc2d3..3e2e8fb08 100644 --- a/src/components/SectionNav/styles.ts +++ b/src/components/ButtonNav/styles.ts @@ -1,7 +1,7 @@ import styled from 'styled-components'; import { palette } from '../../theme/palette'; -export const SectionNavContainer = styled.div` +export const ButtonNavContainer = styled.div` position: relative; display: flex; justify-content: space-between; @@ -10,7 +10,7 @@ export const SectionNavContainer = styled.div` max-width: fit-content; `; -export const SectionNavWrapper = styled.div` +export const ButtonNavWrapper = styled.div` display: flex; position: inherit; overflow-x: auto; @@ -18,7 +18,7 @@ export const SectionNavWrapper = styled.div` transition: transform 0.3s ease-in-out; `; -export const SectionNavGroup = styled.div` +export const ButtonNavGroup = styled.div` flex: 0 0 auto; &:not(:last-child) { margin-right: 0.8rem; diff --git a/src/components/ToggleButtonGroup.stories.tsx b/src/components/ToggleButtonGroup.stories.tsx index c1a9f41f3..c1ccc0c8a 100644 --- a/src/components/ToggleButtonGroup.stories.tsx +++ b/src/components/ToggleButtonGroup.stories.tsx @@ -26,15 +26,15 @@ export const MultipleSelection = () => { }; export const SingleSelection = () => { - const [selectedItems, setSelectedItems] = React.useState(new Set([])); + const [selectedItem, setSelectedItem] = React.useState(''); return ( <> ([selectedItem])} + onSelectionChange={(newSet) => setSelectedItem([...newSet][0] as string)} items={childrenListWithKeys} /> -

Current selections: {[...selectedItems].join(', ')}

+

Current selections: {selectedItem}

); }; diff --git a/src/components/ToggleButtonGroup/index.tsx b/src/components/ToggleButtonGroup/index.tsx index 5dd6479b4..fc8b567f9 100644 --- a/src/components/ToggleButtonGroup/index.tsx +++ b/src/components/ToggleButtonGroup/index.tsx @@ -1,11 +1,10 @@ -import React from "react"; import { StyledToggleButtonGroup, StyledToggleButton } from "./styles"; import { Key } from "react-aria-components"; export interface ToggleButtonGroupProps { items: { id: string, value: string }[]; - selectedItems: Set; - onSelectionChange?: React.Dispatch>>; + selectedItems: Iterable | undefined; + onSelectionChange?: ((keys: Set) => void) | undefined; selectionMode?: 'single' | 'multiple'; className?: string; } diff --git a/src/components/__snapshots__/SectionNav.spec.tsx.snap b/src/components/__snapshots__/ButtonNav.spec.tsx.snap similarity index 97% rename from src/components/__snapshots__/SectionNav.spec.tsx.snap rename to src/components/__snapshots__/ButtonNav.spec.tsx.snap index 3754644fc..a115398b0 100644 --- a/src/components/__snapshots__/SectionNav.spec.tsx.snap +++ b/src/components/__snapshots__/ButtonNav.spec.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`SectionNav matches snapshot 1`] = ` +exports[`ButtonNav matches snapshot 1`] = `
@@ -84,7 +84,7 @@ exports[`SectionNav matches snapshot 1`] = `
`; -exports[`SectionNav matches snapshot when arrows are disabled 1`] = ` +exports[`ButtonNav matches snapshot when arrows are disabled 1`] = `
diff --git a/src/index.ts b/src/index.ts index 8106c4c17..afac93bba 100644 --- a/src/index.ts +++ b/src/index.ts @@ -25,7 +25,7 @@ export * from './components/Text'; export * from './components/ToastContainer'; export * from './components/Tooltip'; export * as Forms from './components/forms'; -export * from './components/SectionNav'; +export * from './components/ButtonNav'; export * from './components/ToggleButtonGroup'; export * from './constants'; export * from './contexts'; From eba804d491846b032dda4cb5e019f6fb42524cbd Mon Sep 17 00:00:00 2001 From: jomcarvajal Date: Mon, 28 Apr 2025 14:13:04 -0600 Subject: [PATCH 2/2] resolve comments --- src/components/ButtonNav.stories.tsx | 6 ++-- src/components/ToggleButtonGroup.stories.tsx | 2 +- src/components/ToggleButtonGroup/index.tsx | 4 +-- src/components/ToggleButtonGroup/styles.ts | 1 + .../ToggleButtonGroup.spec.tsx.snap | 30 +++++++++---------- 5 files changed, 22 insertions(+), 21 deletions(-) diff --git a/src/components/ButtonNav.stories.tsx b/src/components/ButtonNav.stories.tsx index 0eff88f56..42513cf95 100644 --- a/src/components/ButtonNav.stories.tsx +++ b/src/components/ButtonNav.stories.tsx @@ -83,7 +83,7 @@ export const WithToggleButtonGroups = () => { let newSelectedItem = prev; if (currentIndex > 0) { newSelectedItem = flattenedSections[currentIndex - 1].id; - scrollNavToSection(flattenedSections[currentIndex - 1].id); + scrollNavToSection(newSelectedItem); } return newSelectedItem; }); @@ -95,7 +95,7 @@ export const WithToggleButtonGroups = () => { let newSelectedItem = prev; if (currentIndex < flattenedSections.length - 1) { newSelectedItem = flattenedSections[currentIndex + 1].id; - scrollNavToSection(flattenedSections[currentIndex + 1].id); + scrollNavToSection(newSelectedItem); } return newSelectedItem; }); @@ -106,7 +106,7 @@ export const WithToggleButtonGroups = () => { ([selectedItem])} - onSelectionChange={(newSet) => setSelectedItem([...newSet][0] as string)} + onSelectionChange={(newSet) => setSelectedItem(newSet.size ? [...newSet][0] as string : '')} items={sectionSet} /> ); diff --git a/src/components/ToggleButtonGroup.stories.tsx b/src/components/ToggleButtonGroup.stories.tsx index c1ccc0c8a..bfdba5ab2 100644 --- a/src/components/ToggleButtonGroup.stories.tsx +++ b/src/components/ToggleButtonGroup.stories.tsx @@ -31,7 +31,7 @@ export const SingleSelection = () => { <> ([selectedItem])} - onSelectionChange={(newSet) => setSelectedItem([...newSet][0] as string)} + onSelectionChange={(newSet) => setSelectedItem(newSet.size ? [...newSet][0] as string : '')} items={childrenListWithKeys} />

Current selections: {selectedItem}

diff --git a/src/components/ToggleButtonGroup/index.tsx b/src/components/ToggleButtonGroup/index.tsx index fc8b567f9..5d17c2410 100644 --- a/src/components/ToggleButtonGroup/index.tsx +++ b/src/components/ToggleButtonGroup/index.tsx @@ -3,8 +3,8 @@ import { Key } from "react-aria-components"; export interface ToggleButtonGroupProps { items: { id: string, value: string }[]; - selectedItems: Iterable | undefined; - onSelectionChange?: ((keys: Set) => void) | undefined; + selectedItems?: Iterable; + onSelectionChange?: ((keys: Set) => void); selectionMode?: 'single' | 'multiple'; className?: string; } diff --git a/src/components/ToggleButtonGroup/styles.ts b/src/components/ToggleButtonGroup/styles.ts index 6d4d88948..2ef61c3b5 100644 --- a/src/components/ToggleButtonGroup/styles.ts +++ b/src/components/ToggleButtonGroup/styles.ts @@ -17,6 +17,7 @@ export const StyledToggleButton = styled(ToggleButton)` font-size: 1.6rem; line-height: 2rem; white-space: nowrap; + user-select: none; & + & { border-left: none; diff --git a/src/components/__snapshots__/ToggleButtonGroup.spec.tsx.snap b/src/components/__snapshots__/ToggleButtonGroup.spec.tsx.snap index c39b485f9..82ce8e245 100644 --- a/src/components/__snapshots__/ToggleButtonGroup.spec.tsx.snap +++ b/src/components/__snapshots__/ToggleButtonGroup.spec.tsx.snap @@ -13,7 +13,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode multiple 1`] = ` >