diff --git a/sanityv3/schemas/textSnippets.ts b/sanityv3/schemas/textSnippets.ts index 03737479b..f01b26a8d 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/components/src/Tabs/Tab.tsx b/web/components/src/Tabs/Tab.tsx deleted file mode 100644 index 8dcb3d6e8..000000000 --- a/web/components/src/Tabs/Tab.tsx +++ /dev/null @@ -1,64 +0,0 @@ -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' - -const { outline } = Tokens - -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) { - return ( - - {children} - - ) -}) diff --git a/web/components/src/Tabs/TabList.tsx b/web/components/src/Tabs/TabList.tsx deleted file mode 100644 index 6e88aa715..000000000 --- a/web/components/src/Tabs/TabList.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { forwardRef } from 'react' -import { TabList as CTabList, TabListProps as CTabListProps } from '@chakra-ui/react' - -export type TabListProps = CTabListProps - -export const TabList = forwardRef(function TabList({ children, ...rest }, ref) { - return ( - - {children} - - ) -}) diff --git a/web/components/src/Tabs/TabPanel.tsx b/web/components/src/Tabs/TabPanel.tsx deleted file mode 100644 index ba33d8750..000000000 --- a/web/components/src/Tabs/TabPanel.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { forwardRef } from 'react' -import { TabPanel as CTabPanel, TabPanelProps as CTabPanelProps } from '@chakra-ui/react' - -export type TabPanelProps = CTabPanelProps - -export const TabPanel = forwardRef(function TabPanel({ children, ...rest }, ref) { - return ( - - {children} - - ) -}) diff --git a/web/components/src/Tabs/TabPanels.tsx b/web/components/src/Tabs/TabPanels.tsx deleted file mode 100644 index 37c26365c..000000000 --- a/web/components/src/Tabs/TabPanels.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { forwardRef } from 'react' -import { TabPanels as CTabPanels, TabPanelsProps as CTabPanelsProps } from '@chakra-ui/react' - -export type TabPanelsProps = CTabPanelsProps - -export const TabPanels = forwardRef(function TabPanels({ children, ...rest }, ref) { - return ( - - {children} - - ) -}) 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 new file mode 100644 index 000000000..be98cb626 --- /dev/null +++ b/web/core/Tabs/Tab.tsx @@ -0,0 +1,37 @@ +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..5f11a9370 --- /dev/null +++ b/web/core/Tabs/TabList.tsx @@ -0,0 +1,19 @@ +import { forwardRef } from 'react' +import * as RadixTabs from '@radix-ui/react-tabs' +import envisTwMerge from '../../twMerge' + +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( + { 'aria-label': ariaLabel, children, className = '', ...rest }, + ref, +) { + return ( + + {children} + + ) +}) diff --git a/web/core/Tabs/TabPanel.tsx b/web/core/Tabs/TabPanel.tsx new file mode 100644 index 000000000..b834b5e79 --- /dev/null +++ b/web/core/Tabs/TabPanel.tsx @@ -0,0 +1,23 @@ +import { forwardRef } from 'react' +import * as RadixTabs from '@radix-ui/react-tabs' +import envisTwMerge from '../../twMerge' + +export type TabPanelProps = RadixTabs.TabsContentProps + +export const TabPanel = forwardRef(function TabPanel( + { className = '', children, ...rest }, + ref, +) { + return ( + + {children} + + ) +}) diff --git a/web/components/src/Tabs/Tabs.tsx b/web/core/Tabs/Tabs.tsx similarity index 52% rename from web/components/src/Tabs/Tabs.tsx rename to web/core/Tabs/Tabs.tsx index a58822b53..ffe4b1446 100644 --- a/web/components/src/Tabs/Tabs.tsx +++ b/web/core/Tabs/Tabs.tsx @@ -1,12 +1,12 @@ import { forwardRef } from 'react' -import { Tabs as CTabs, TabsProps as CTabsProps } from '@chakra-ui/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) { return ( - + {children} - + ) }) 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/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..692999994 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' @@ -8,18 +7,9 @@ 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 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 @@ -31,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) @@ -53,14 +43,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': @@ -73,40 +55,53 @@ 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) => ( - - - {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/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} > 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: 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',