From 64890245f179958d752eea81dec935c5300113fd Mon Sep 17 00:00:00 2001 From: "Malin J." Date: Fri, 15 Nov 2024 10:34:12 +0100 Subject: [PATCH 1/4] =?UTF-8?q?=F0=9F=8E=A8=20Chakra=20tabs=20#2679?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/components/src/Tabs/Tab.tsx | 71 +++------------- web/components/src/Tabs/TabList.tsx | 19 +++-- web/components/src/Tabs/TabPanel.tsx | 19 +++-- web/components/src/Tabs/TabPanels.tsx | 19 +++-- web/components/src/Tabs/Tabs.tsx | 19 +++-- web/package.json | 9 +- web/pageComponents/search/SearchResults.tsx | 14 +--- web/pnpm-lock.yaml | 92 +++++++++++++++++++++ 8 files changed, 155 insertions(+), 107 deletions(-) diff --git a/web/components/src/Tabs/Tab.tsx b/web/components/src/Tabs/Tab.tsx index 8dcb3d6e8..742c6ae2c 100644 --- a/web/components/src/Tabs/Tab.tsx +++ b/web/components/src/Tabs/Tab.tsx @@ -1,64 +1,15 @@ -import { forwardRef, CSSProperties } from 'react' -import styled from 'styled-components' -import { outlineTemplate, Tokens } from '@utils' -import { Tab as CTab, TabProps as CTabProps } from '@chakra-ui/react' +import { forwardRef } from 'react'; +import * as RadixTabs from '@radix-ui/react-tabs'; -const { outline } = Tokens +export type TabProps = RadixTabs.TabsTriggerProps; -const StyledTab = styled(CTab)` - color: var(--font-color); - background: transparent; - border: none; - - padding: var(--space-xSmall) 0; - /* Not sure about this one, but some spaces for tab components that wrap multiple lines */ - margin-bottom: var(--space-small); - :not(:last-child) { - margin-right: var(--space-medium); - } - &:hover { - cursor: pointer; - } - - color: var(--color-on-background); - - &:active { - background: transparent; - } - - &:focus-visible { - outline: none; - ${outlineTemplate(outline)} - outline-color: var(--mist-blue-100); - } - - &[data-selected] { - border-bottom: 2px solid; - } -` - -export type TabProps = CTabProps & { - variant?: string -} - -export const Tab = forwardRef(function CTab({ children, variant = 'line', ...rest }, ref) { +export const Tab = forwardRef(function Tab( + { children, ...rest }, + ref +) { return ( - + {children} - - ) -}) + + ); +}); \ No newline at end of file diff --git a/web/components/src/Tabs/TabList.tsx b/web/components/src/Tabs/TabList.tsx index 6e88aa715..cf7328042 100644 --- a/web/components/src/Tabs/TabList.tsx +++ b/web/components/src/Tabs/TabList.tsx @@ -1,12 +1,15 @@ -import { forwardRef } from 'react' -import { TabList as CTabList, TabListProps as CTabListProps } from '@chakra-ui/react' +import { forwardRef } from 'react'; +import * as RadixTabs from '@radix-ui/react-tabs'; -export type TabListProps = CTabListProps +export type TabListProps = RadixTabs.TabsListProps; -export const TabList = forwardRef(function TabList({ children, ...rest }, ref) { +export const TabList = forwardRef(function TabList( + { children, ...rest }, + ref +) { return ( - + {children} - - ) -}) + + ); +}); \ No newline at end of file diff --git a/web/components/src/Tabs/TabPanel.tsx b/web/components/src/Tabs/TabPanel.tsx index ba33d8750..c2b333b3b 100644 --- a/web/components/src/Tabs/TabPanel.tsx +++ b/web/components/src/Tabs/TabPanel.tsx @@ -1,12 +1,15 @@ -import { forwardRef } from 'react' -import { TabPanel as CTabPanel, TabPanelProps as CTabPanelProps } from '@chakra-ui/react' +import { forwardRef } from 'react'; +import * as RadixTabs from '@radix-ui/react-tabs'; -export type TabPanelProps = CTabPanelProps +export type TabPanelProps = RadixTabs.TabsContentProps; -export const TabPanel = forwardRef(function TabPanel({ children, ...rest }, ref) { +export const TabPanel = forwardRef(function TabPanel( + { children, ...rest }, + ref +) { return ( - + {children} - - ) -}) + + ); +}); \ No newline at end of file diff --git a/web/components/src/Tabs/TabPanels.tsx b/web/components/src/Tabs/TabPanels.tsx index 37c26365c..f67fc031c 100644 --- a/web/components/src/Tabs/TabPanels.tsx +++ b/web/components/src/Tabs/TabPanels.tsx @@ -1,12 +1,15 @@ -import { forwardRef } from 'react' -import { TabPanels as CTabPanels, TabPanelsProps as CTabPanelsProps } from '@chakra-ui/react' +import { forwardRef } from 'react'; +import * as RadixTabs from '@radix-ui/react-tabs'; -export type TabPanelsProps = CTabPanelsProps +export type TabPanelsProps = { children: React.ReactNode }; -export const TabPanels = forwardRef(function TabPanels({ children, ...rest }, ref) { +export const TabPanels = forwardRef(function TabPanels( + { children, ...rest }, + ref +) { return ( - +
{children} - - ) -}) +
+ ); +}); \ No newline at end of file diff --git a/web/components/src/Tabs/Tabs.tsx b/web/components/src/Tabs/Tabs.tsx index a58822b53..9fc9d9977 100644 --- a/web/components/src/Tabs/Tabs.tsx +++ b/web/components/src/Tabs/Tabs.tsx @@ -1,12 +1,15 @@ -import { forwardRef } from 'react' -import { Tabs as CTabs, TabsProps as CTabsProps } from '@chakra-ui/react' +import { forwardRef } from 'react'; +import * as RadixTabs from '@radix-ui/react-tabs'; -export type TabsProps = CTabsProps +export type TabsProps = RadixTabs.TabsProps; -export const Tabs = forwardRef(function Tabs({ children, ...rest }, ref) { +export const Tabs = forwardRef(function Tabs( + { children, ...rest }, + ref +) { return ( - + {children} - - ) -}) + + ); +}); \ No newline at end of file diff --git a/web/package.json b/web/package.json index a24cab48a..3aa0aa2f0 100644 --- a/web/package.json +++ b/web/package.json @@ -35,12 +35,13 @@ "@portabletext/react": "^3.1.0", "@portabletext/to-html": "^2.0.13", "@portabletext/types": "^2.0.13", + "@radix-ui/react-accordion": "^1.2.0", + "@radix-ui/react-tabs": "^1.1.1", "@react-spring/web": "^9.4.5", "@sanity/asset-utils": "^1.3.0", "@sanity/client": "5.4.2", "@sanity/image-url": "^1.0.2", "@sanity/webhook": "^2.0.0", - "@radix-ui/react-accordion": "^1.2.0", "algoliasearch": "^4.16.0", "date-fns": "^2.29.3", "date-fns-tz": "^2.0.0", @@ -84,19 +85,19 @@ "@tailwindcss/typography": "^0.5.10", "@testing-library/jest-dom": "^6.1.4", "@testing-library/react": "^14.0.0", + "@types/easy-soap-request": "^4.1.1", "@types/http-proxy": "^1.17.10", "@types/jest": "^29.5.7", "@types/node": "^18.14.9999", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@types/react-instantsearch": "^6.10.1", - "@types/testing-library__jest-dom": "^5.14.5", - "@types/easy-soap-request": "^4.1.1", + "@types/react-transition-group": "^4.4.10", "@types/styled-components": "^5.1.26", + "@types/testing-library__jest-dom": "^5.14.5", "@types/uuid": "^8.3.4", "@types/video.js": "^7.3.57", "@types/xml2js": "^0.4.11", - "@types/react-transition-group": "^4.4.10", "autoprefixer": "^10.4.17", "babel-plugin-styled-components": "^2.1.1", "jest": "^28.1.0", diff --git a/web/pageComponents/search/SearchResults.tsx b/web/pageComponents/search/SearchResults.tsx index 4d219cd10..576a0c158 100644 --- a/web/pageComponents/search/SearchResults.tsx +++ b/web/pageComponents/search/SearchResults.tsx @@ -53,14 +53,6 @@ const SearchResults = (props: SearchResultsProps) => { } }, [userClicked, scopedResults, options, results?.__isArtificial, indexUiState.query, currentRefinement, refine]) - const handleTabChange = (index: number) => { - setUserClicked(true) - const activeIndex = options[index] - if (activeIndex) { - refine(activeIndex.value) - } - } - const getHitProps = (tab: string) => { switch (tab) { case 'Magazine': @@ -79,10 +71,10 @@ const SearchResults = (props: SearchResultsProps) => { <> {hasQuery && ( - + {options.map((item) => ( - + {item.label} @@ -99,7 +91,7 @@ const SearchResults = (props: SearchResultsProps) => { {options.map((it) => ( - + diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml index 25d52af49..fa62f0688 100644 --- a/web/pnpm-lock.yaml +++ b/web/pnpm-lock.yaml @@ -49,6 +49,9 @@ dependencies: '@radix-ui/react-accordion': specifier: ^1.2.0 version: 1.2.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-tabs': + specifier: ^1.1.1 + version: 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) '@react-spring/web': specifier: ^9.4.5 version: 9.4.5(react-dom@18.3.1)(react@18.3.1) @@ -4666,6 +4669,19 @@ packages: react: 18.3.1 dev: false + /@radix-ui/react-context@1.1.1(@types/react@18.3.3)(react@18.3.1): + resolution: {integrity: sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@types/react': 18.3.3 + react: 18.3.1 + dev: false + /@radix-ui/react-direction@1.1.0(@types/react@18.3.3)(react@18.3.1): resolution: {integrity: sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==} peerDependencies: @@ -4714,6 +4730,27 @@ packages: react-dom: 18.3.1(react@18.3.1) dev: false + /@radix-ui/react-presence@1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1) + '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.3)(react@18.3.1) + '@types/react': 18.3.3 + '@types/react-dom': 18.3.0 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + dev: false + /@radix-ui/react-primitive@2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==} peerDependencies: @@ -4734,6 +4771,34 @@ packages: react-dom: 18.3.1(react@18.3.1) dev: false + /@radix-ui/react-roving-focus@1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-EA6AMGeq9AEeQDeSH0aZgG198qkfHSbvWTf1HvoDmOB5bBG/qTxjYMWUKMnYiV6J/iP/J8MEFSuB2zRU2n7ODA==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@radix-ui/primitive': 1.1.0 + '@radix-ui/react-collection': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1) + '@radix-ui/react-context': 1.1.0(@types/react@18.3.3)(react@18.3.1) + '@radix-ui/react-direction': 1.1.0(@types/react@18.3.3)(react@18.3.1) + '@radix-ui/react-id': 1.1.0(@types/react@18.3.3)(react@18.3.1) + '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.3)(react@18.3.1) + '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.3)(react@18.3.1) + '@types/react': 18.3.3 + '@types/react-dom': 18.3.0 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + dev: false + /@radix-ui/react-slot@1.1.0(@types/react@18.3.3)(react@18.3.1): resolution: {integrity: sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==} peerDependencies: @@ -4748,6 +4813,33 @@ packages: react: 18.3.1 dev: false + /@radix-ui/react-tabs@1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-3GBUDmP2DvzmtYLMsHmpA1GtR46ZDZ+OreXM/N+kkQJOPIgytFWWTfDQmBQKBvaFS0Vno0FktdbVzN28KGrMdw==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@radix-ui/primitive': 1.1.0 + '@radix-ui/react-context': 1.1.1(@types/react@18.3.3)(react@18.3.1) + '@radix-ui/react-direction': 1.1.0(@types/react@18.3.3)(react@18.3.1) + '@radix-ui/react-id': 1.1.0(@types/react@18.3.3)(react@18.3.1) + '@radix-ui/react-presence': 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-roving-focus': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.3)(react@18.3.1) + '@types/react': 18.3.3 + '@types/react-dom': 18.3.0 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + dev: false + /@radix-ui/react-use-callback-ref@1.1.0(@types/react@18.3.3)(react@18.3.1): resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==} peerDependencies: From eb3d35ea6811db65719c9c18c6c1d30da64f1083 Mon Sep 17 00:00:00 2001 From: Borghild Date: Wed, 20 Nov 2024 08:31:30 +0100 Subject: [PATCH 2/4] :art: update --- web/components/src/Tabs/Tab.tsx | 15 ----- web/components/src/Tabs/TabList.tsx | 15 ----- web/components/src/Tabs/TabPanels.tsx | 15 ----- web/core/Tabs/Tab.tsx | 39 ++++++++++++ web/core/Tabs/TabList.tsx | 16 +++++ .../src => core}/Tabs/TabPanel.tsx | 0 web/{components/src => core}/Tabs/Tabs.tsx | 0 web/{components/src => core}/Tabs/index.ts | 5 +- web/pageComponents/search/SearchResults.tsx | 59 +++++++------------ web/tailwind.config.cjs | 4 ++ 10 files changed, 82 insertions(+), 86 deletions(-) delete mode 100644 web/components/src/Tabs/Tab.tsx delete mode 100644 web/components/src/Tabs/TabList.tsx delete mode 100644 web/components/src/Tabs/TabPanels.tsx create mode 100644 web/core/Tabs/Tab.tsx create mode 100644 web/core/Tabs/TabList.tsx rename web/{components/src => core}/Tabs/TabPanel.tsx (100%) rename web/{components/src => core}/Tabs/Tabs.tsx (100%) rename web/{components/src => core}/Tabs/index.ts (69%) diff --git a/web/components/src/Tabs/Tab.tsx b/web/components/src/Tabs/Tab.tsx deleted file mode 100644 index 742c6ae2c..000000000 --- a/web/components/src/Tabs/Tab.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { forwardRef } from 'react'; -import * as RadixTabs from '@radix-ui/react-tabs'; - -export type TabProps = RadixTabs.TabsTriggerProps; - -export const Tab = forwardRef(function Tab( - { children, ...rest }, - ref -) { - return ( - - {children} - - ); -}); \ No newline at end of file diff --git a/web/components/src/Tabs/TabList.tsx b/web/components/src/Tabs/TabList.tsx deleted file mode 100644 index cf7328042..000000000 --- a/web/components/src/Tabs/TabList.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { forwardRef } from 'react'; -import * as RadixTabs from '@radix-ui/react-tabs'; - -export type TabListProps = RadixTabs.TabsListProps; - -export const TabList = forwardRef(function TabList( - { children, ...rest }, - ref -) { - return ( - - {children} - - ); -}); \ No newline at end of file diff --git a/web/components/src/Tabs/TabPanels.tsx b/web/components/src/Tabs/TabPanels.tsx deleted file mode 100644 index f67fc031c..000000000 --- a/web/components/src/Tabs/TabPanels.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { forwardRef } from 'react'; -import * as RadixTabs from '@radix-ui/react-tabs'; - -export type TabPanelsProps = { children: React.ReactNode }; - -export const TabPanels = forwardRef(function TabPanels( - { children, ...rest }, - ref -) { - return ( -
- {children} -
- ); -}); \ No newline at end of file diff --git a/web/core/Tabs/Tab.tsx b/web/core/Tabs/Tab.tsx new file mode 100644 index 000000000..b6a1c76de --- /dev/null +++ b/web/core/Tabs/Tab.tsx @@ -0,0 +1,39 @@ +import { forwardRef } from 'react' +import * as RadixTabs from '@radix-ui/react-tabs' +import envisTwMerge from '../../twMerge' + +export type TabProps = RadixTabs.TabsTriggerProps + +export const Tab = forwardRef(function Tab({ children, className = '', ...rest }, ref) { + return ( + + {children} + + ) +}) diff --git a/web/core/Tabs/TabList.tsx b/web/core/Tabs/TabList.tsx new file mode 100644 index 000000000..1945d7316 --- /dev/null +++ b/web/core/Tabs/TabList.tsx @@ -0,0 +1,16 @@ +import { forwardRef } from 'react' +import * as RadixTabs from '@radix-ui/react-tabs' +import envisTwMerge from '../../twMerge' + +export type TabListProps = RadixTabs.TabsListProps + +export const TabList = forwardRef(function TabList( + { children, className = '', ...rest }, + ref, +) { + return ( + + {children} + + ) +}) diff --git a/web/components/src/Tabs/TabPanel.tsx b/web/core/Tabs/TabPanel.tsx similarity index 100% rename from web/components/src/Tabs/TabPanel.tsx rename to web/core/Tabs/TabPanel.tsx diff --git a/web/components/src/Tabs/Tabs.tsx b/web/core/Tabs/Tabs.tsx similarity index 100% rename from web/components/src/Tabs/Tabs.tsx rename to web/core/Tabs/Tabs.tsx diff --git a/web/components/src/Tabs/index.ts b/web/core/Tabs/index.ts similarity index 69% rename from web/components/src/Tabs/index.ts rename to web/core/Tabs/index.ts index 099a7d588..0fd6d434a 100644 --- a/web/components/src/Tabs/index.ts +++ b/web/core/Tabs/index.ts @@ -2,13 +2,11 @@ import { Tabs as TabsWrapper, TabsProps } from './Tabs' import { TabList, TabListProps } from './TabList' import { Tab, TabProps } from './Tab' import { TabPanel, TabPanelProps } from './TabPanel' -import { TabPanels, TabPanelsProps } from './TabPanels' type TabsCompoundProps = typeof TabsWrapper & { TabList: typeof TabList Tab: typeof Tab TabPanel: typeof TabPanel - TabPanels: typeof TabPanels } const Tabs = TabsWrapper as TabsCompoundProps @@ -16,7 +14,6 @@ const Tabs = TabsWrapper as TabsCompoundProps Tabs.TabList = TabList Tabs.Tab = Tab Tabs.TabPanel = TabPanel -Tabs.TabPanels = TabPanels export { Tabs } -export type { TabsProps, TabListProps, TabProps, TabPanelProps, TabPanelsProps } +export type { TabsProps, TabListProps, TabProps, TabPanelProps } diff --git a/web/pageComponents/search/SearchResults.tsx b/web/pageComponents/search/SearchResults.tsx index 576a0c158..2ee73e1ed 100644 --- a/web/pageComponents/search/SearchResults.tsx +++ b/web/pageComponents/search/SearchResults.tsx @@ -1,6 +1,5 @@ -import { Tabs } from '@components' -import { RefObject, useEffect, useState, useContext } from 'react' -import styled from 'styled-components' +import { Tabs } from '@core/Tabs' +import { RefObject, useEffect, useState } from 'react' import EventHit from './EventHit' import Hits from './Hits' import MagazineHit from './MagazineHit' @@ -9,17 +8,7 @@ import TopicHit from './TopicHit' import TotalResultsStat from './TotalResultsStat' import { useSortBy, UseSortByProps, useHits, useInstantSearch } from 'react-instantsearch' -const Results = styled.div` - margin-top: var(--space-xLarge); -` - -const TabText = styled.span` - font-size: var(--typeScale-05); -` -const HitsContainer = styled.span` - margin-left: var(--space-4); -` -const { Tab, TabList, TabPanel, TabPanels } = Tabs +const { TabList, Tab, TabPanel } = Tabs // Sven: I don't understand how we can revieve this number, it's configured // in the Configure component, so how could we get it from there @@ -70,35 +59,31 @@ const SearchResults = (props: SearchResultsProps) => { return ( <> {hasQuery && ( - - +
+ {options.map((item) => ( - - - {item.label} - - ( - { - scopedResults.find((it) => it.indexId === item.value && it.indexId === it.results?.index) - ?.results?.nbHits - } - ) - - + + {item.label} + + ( + { + scopedResults.find((it) => it.indexId === item.value && it.indexId === it.results?.index)?.results + ?.nbHits + } + ) + ))} - - {options.map((it) => ( - - - - - ))} - + {options.map((it) => ( + + + + + ))} - +
)} ) diff --git a/web/tailwind.config.cjs b/web/tailwind.config.cjs index 2f7f09c3b..6d433c660 100644 --- a/web/tailwind.config.cjs +++ b/web/tailwind.config.cjs @@ -357,6 +357,10 @@ module.exports = { data: { open: 'state~="open"', closed: 'state~="closed"', + active: 'state~="active"', + vertical: 'orientation~="vertical"', + horizontal: 'orientation~="horizontal"', + selected: 'selected~="true"', }, flex: { fr: '1 1 1', From d8af63d38c853072a3a0af8f21a6bb2382b08223 Mon Sep 17 00:00:00 2001 From: Borghild Date: Wed, 27 Nov 2024 20:57:53 +0100 Subject: [PATCH 3/4] :art: update --- web/components/src/index.ts | 1 - web/core/Tabs/Tab.tsx | 10 ++++------ web/pageComponents/search/SearchResults.tsx | 14 +++++++++++++- 3 files changed, 17 insertions(+), 8 deletions(-) diff --git a/web/components/src/index.ts b/web/components/src/index.ts index 26e7c653f..288fe29ea 100644 --- a/web/components/src/index.ts +++ b/web/components/src/index.ts @@ -14,6 +14,5 @@ export * from './Accordion' export * from './Menu' export * from './Heading' export * from './Table' -export * from './Tabs' export * from './Form' export * from './Breadcrumbs' diff --git a/web/core/Tabs/Tab.tsx b/web/core/Tabs/Tab.tsx index b6a1c76de..be98cb626 100644 --- a/web/core/Tabs/Tab.tsx +++ b/web/core/Tabs/Tab.tsx @@ -15,17 +15,15 @@ export const Tab = forwardRef(function Tab({ childr py-2 pl-3 pr-8 - border-b + border-0 hover:underline - hover:underline-offset-4 + underline-offset-2 + decoration-1 border-slate-80 dark:border-white-100 hover:cursor-pointer data-active:font-medium - data-active:border-l - data-active:border-r - data-active:border-b-0 - data-active:first:border-l-0 + data-active:border-b-2 focus:envis-outline dark:focus:envis-outline-invert `, diff --git a/web/pageComponents/search/SearchResults.tsx b/web/pageComponents/search/SearchResults.tsx index 2ee73e1ed..8a0fd1fef 100644 --- a/web/pageComponents/search/SearchResults.tsx +++ b/web/pageComponents/search/SearchResults.tsx @@ -54,13 +54,25 @@ const SearchResults = (props: SearchResultsProps) => { return TopicHit } } + const handleTabChange = (value: string) => { + setUserClicked(true) + const activeIndex = options.find((option) => option.label === value) + if (activeIndex) { + refine(activeIndex.value) + } + } + const activeTab = options.findIndex((it) => it.value === currentRefinement) const hasQuery = results && results.query !== '' return ( <> {hasQuery && (
- + {options.map((item) => ( From 258e0ad3e5207e9a0f63e02a9eb162d91f71973c Mon Sep 17 00:00:00 2001 From: Borghild Date: Thu, 28 Nov 2024 10:10:40 +0100 Subject: [PATCH 4/4] :art: more accessibility --- sanityv3/schemas/textSnippets.ts | 5 +++++ web/core/Tabs/TabList.tsx | 9 +++++--- web/core/Tabs/TabPanel.tsx | 24 ++++++++++++++------- web/core/Tabs/Tabs.tsx | 15 ++++++------- web/pageComponents/search/SearchResults.tsx | 14 ++++++++---- web/pageComponents/shared/LogoLink.tsx | 2 +- 6 files changed, 44 insertions(+), 25 deletions(-) diff --git a/sanityv3/schemas/textSnippets.ts b/sanityv3/schemas/textSnippets.ts index 487c333d7..0edb9aeff 100644 --- a/sanityv3/schemas/textSnippets.ts +++ b/sanityv3/schemas/textSnippets.ts @@ -816,6 +816,11 @@ const snippets: textSnippet = { defaultValue: `Please don't enter any personal information`, group: groups.common, }, + categories: { + title: 'Categories', + defaultValue: 'Categories', + group: groups.common, + }, } type textSnippetGroup = { title: string; hidden?: boolean } diff --git a/web/core/Tabs/TabList.tsx b/web/core/Tabs/TabList.tsx index 1945d7316..5f11a9370 100644 --- a/web/core/Tabs/TabList.tsx +++ b/web/core/Tabs/TabList.tsx @@ -2,14 +2,17 @@ import { forwardRef } from 'react' import * as RadixTabs from '@radix-ui/react-tabs' import envisTwMerge from '../../twMerge' -export type TabListProps = RadixTabs.TabsListProps +export type TabListProps = { + /* Provides a label that describes the purpose of the set of tabs. */ + 'aria-label': string +} & RadixTabs.TabsListProps export const TabList = forwardRef(function TabList( - { children, className = '', ...rest }, + { 'aria-label': ariaLabel, children, className = '', ...rest }, ref, ) { return ( - + {children} ) diff --git a/web/core/Tabs/TabPanel.tsx b/web/core/Tabs/TabPanel.tsx index c2b333b3b..b834b5e79 100644 --- a/web/core/Tabs/TabPanel.tsx +++ b/web/core/Tabs/TabPanel.tsx @@ -1,15 +1,23 @@ -import { forwardRef } from 'react'; -import * as RadixTabs from '@radix-ui/react-tabs'; +import { forwardRef } from 'react' +import * as RadixTabs from '@radix-ui/react-tabs' +import envisTwMerge from '../../twMerge' -export type TabPanelProps = RadixTabs.TabsContentProps; +export type TabPanelProps = RadixTabs.TabsContentProps export const TabPanel = forwardRef(function TabPanel( - { children, ...rest }, - ref + { className = '', children, ...rest }, + ref, ) { return ( - + {children} - ); -}); \ No newline at end of file + ) +}) diff --git a/web/core/Tabs/Tabs.tsx b/web/core/Tabs/Tabs.tsx index 9fc9d9977..ffe4b1446 100644 --- a/web/core/Tabs/Tabs.tsx +++ b/web/core/Tabs/Tabs.tsx @@ -1,15 +1,12 @@ -import { forwardRef } from 'react'; -import * as RadixTabs from '@radix-ui/react-tabs'; +import { forwardRef } from 'react' +import * as RadixTabs from '@radix-ui/react-tabs' -export type TabsProps = RadixTabs.TabsProps; +export type TabsProps = RadixTabs.TabsProps -export const Tabs = forwardRef(function Tabs( - { children, ...rest }, - ref -) { +export const Tabs = forwardRef(function Tabs({ children, ...rest }, ref) { return ( {children} - ); -}); \ No newline at end of file + ) +}) diff --git a/web/pageComponents/search/SearchResults.tsx b/web/pageComponents/search/SearchResults.tsx index 8a0fd1fef..692999994 100644 --- a/web/pageComponents/search/SearchResults.tsx +++ b/web/pageComponents/search/SearchResults.tsx @@ -7,6 +7,7 @@ import NewsHit from './NewsHit' import TopicHit from './TopicHit' import TotalResultsStat from './TotalResultsStat' import { useSortBy, UseSortByProps, useHits, useInstantSearch } from 'react-instantsearch' +import { FormattedMessage, useIntl } from 'react-intl' const { TabList, Tab, TabPanel } = Tabs @@ -20,7 +21,7 @@ type SearchResultsProps = { const SearchResults = (props: SearchResultsProps) => { const { resultsRef } = props const { refine, currentRefinement, options } = useSortBy(props) - + const intl = useIntl() const { results } = useHits() const { scopedResults, indexUiState } = useInstantSearch() const [userClicked, setUserClicked] = useState(false) @@ -73,9 +74,14 @@ const SearchResults = (props: SearchResultsProps) => { activationMode="manual" onValueChange={handleTabChange} > - + {options.map((item) => ( - + {item.label} ( @@ -89,7 +95,7 @@ const SearchResults = (props: SearchResultsProps) => { ))} {options.map((it) => ( - + diff --git a/web/pageComponents/shared/LogoLink.tsx b/web/pageComponents/shared/LogoLink.tsx index 7741f6f20..922da223c 100644 --- a/web/pageComponents/shared/LogoLink.tsx +++ b/web/pageComponents/shared/LogoLink.tsx @@ -10,7 +10,7 @@ export const LogoLink = ({ ...rest }: LogoLinkProps) => { href="/" aria-label="Equinor home page" {...rest} - className="flex items-center justify-self-start h-full focus:outline-none focus-visible:envis-outline" + className="flex items-center justify-self-start h-full focus:outline-none focus-visible:envis-outline dark:focus-visible:envis-outline-invert" prefetch={false} >