From 79ed608edc9f3fe475a3ca64717f9d31bc113d49 Mon Sep 17 00:00:00 2001 From: Jialecl Date: Wed, 26 Mar 2025 16:56:37 +0100 Subject: [PATCH 1/8] NavTabs redesign --- .../pages/components/nav-tabs/code.tsx | 17 ++ .../pages/components/nav-tabs/index.tsx | 24 ++- .../components/nav-tabs/specifications.tsx | 21 --- .../pages/components/nav-tabs/usage.tsx | 21 --- .../components/nav-tabs/NavTabsPageLayout.tsx | 5 +- ...sSpecsPage.tsx => NavTabsOverviewPage.tsx} | 8 +- .../nav-tabs/usage/NavTabsUsagePage.tsx | 59 ------- .../usage/images/navTabs_navigation.png | Bin 4027 -> 0 bytes packages/lib/src/nav-tabs/NavTabs.stories.tsx | 87 ---------- packages/lib/src/nav-tabs/NavTabs.tsx | 50 +++--- packages/lib/src/nav-tabs/Tab.tsx | 163 ++++++++---------- 11 files changed, 130 insertions(+), 325 deletions(-) create mode 100644 apps/website/pages/components/nav-tabs/code.tsx delete mode 100644 apps/website/pages/components/nav-tabs/specifications.tsx delete mode 100644 apps/website/pages/components/nav-tabs/usage.tsx rename apps/website/screens/components/nav-tabs/specs/{NavTabsSpecsPage.tsx => NavTabsOverviewPage.tsx} (98%) delete mode 100644 apps/website/screens/components/nav-tabs/usage/NavTabsUsagePage.tsx delete mode 100644 apps/website/screens/components/nav-tabs/usage/images/navTabs_navigation.png diff --git a/apps/website/pages/components/nav-tabs/code.tsx b/apps/website/pages/components/nav-tabs/code.tsx new file mode 100644 index 0000000000..b6e2985afa --- /dev/null +++ b/apps/website/pages/components/nav-tabs/code.tsx @@ -0,0 +1,17 @@ +import Head from "next/head"; +import type { ReactElement } from "react"; +import NavTabsPageLayout from "screens/components/nav-tabs/NavTabsPageLayout"; +import NavTabsCodePage from "screens/components/nav-tabs/code/NavTabsCodePage"; + +const Code = () => ( + <> + + Nav Tabs Code — Halstack Design System + + + +); + +Code.getLayout = (page: ReactElement) => {page}; + +export default Code; diff --git a/apps/website/pages/components/nav-tabs/index.tsx b/apps/website/pages/components/nav-tabs/index.tsx index 765def99ab..ee544052fc 100644 --- a/apps/website/pages/components/nav-tabs/index.tsx +++ b/apps/website/pages/components/nav-tabs/index.tsx @@ -1,21 +1,17 @@ import Head from "next/head"; import type { ReactElement } from "react"; import NavTabsPageLayout from "screens/components/nav-tabs/NavTabsPageLayout"; -import NavTabsCodePage from "screens/components/nav-tabs/code/NavTabsCodePage"; +import NavTabsOverviewPage from "screens/components/nav-tabs/specs/NavTabsOverviewPage"; -const Index = () => { - return ( - <> - - Nav Tabs — Halstack Design System - - - - ); -}; +const Index = () => ( + <> + + Nav Tabs — Halstack Design System + + + +); -Index.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; +Index.getLayout = (page: ReactElement) => {page}; export default Index; diff --git a/apps/website/pages/components/nav-tabs/specifications.tsx b/apps/website/pages/components/nav-tabs/specifications.tsx deleted file mode 100644 index 53005dfec3..0000000000 --- a/apps/website/pages/components/nav-tabs/specifications.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import NavTabsPageLayout from "screens/components/nav-tabs/NavTabsPageLayout"; -import NavTabsSpecsPage from "screens/components/nav-tabs/specs/NavTabsSpecsPage"; - -const Specifications = () => { - return ( - <> - - Nav Tabs Specs — Halstack Design System - - - - ); -}; - -Specifications.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Specifications; diff --git a/apps/website/pages/components/nav-tabs/usage.tsx b/apps/website/pages/components/nav-tabs/usage.tsx deleted file mode 100644 index ae598a1dea..0000000000 --- a/apps/website/pages/components/nav-tabs/usage.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import NavTabsPageLayout from "screens/components/nav-tabs/NavTabsPageLayout"; -import NavTabsUsagePage from "screens/components/nav-tabs/usage/NavTabsUsagePage"; - -const Usage = () => { - return ( - <> - - Nav Tabs Usage — Halstack Design System - - - - ); -}; - -Usage.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Usage; diff --git a/apps/website/screens/components/nav-tabs/NavTabsPageLayout.tsx b/apps/website/screens/components/nav-tabs/NavTabsPageLayout.tsx index 4c2a936fdd..0dbd32ee67 100644 --- a/apps/website/screens/components/nav-tabs/NavTabsPageLayout.tsx +++ b/apps/website/screens/components/nav-tabs/NavTabsPageLayout.tsx @@ -6,9 +6,8 @@ import { ReactNode } from "react"; const NumberInputPageHeading = ({ children }: { children: ReactNode }) => { const tabs = [ - { label: "Code", path: "/components/nav-tabs" }, - { label: "Usage", path: "/components/nav-tabs/usage" }, - { label: "Specifications", path: "/components/nav-tabs/specifications" }, + { label: "Overview", path: "/components/nav-tabs" }, + { label: "Code", path: "/components/nav-tabs/code" }, ]; return ( diff --git a/apps/website/screens/components/nav-tabs/specs/NavTabsSpecsPage.tsx b/apps/website/screens/components/nav-tabs/specs/NavTabsOverviewPage.tsx similarity index 98% rename from apps/website/screens/components/nav-tabs/specs/NavTabsSpecsPage.tsx rename to apps/website/screens/components/nav-tabs/specs/NavTabsOverviewPage.tsx index 9ae7affb4d..7d11f7e880 100644 --- a/apps/website/screens/components/nav-tabs/specs/NavTabsSpecsPage.tsx +++ b/apps/website/screens/components/nav-tabs/specs/NavTabsOverviewPage.tsx @@ -11,7 +11,7 @@ import navTabsStates from "./images/navTabs_states.png"; const sections = [ { - title: "Specifications", + title: "Introduction", content: (
Nav tabs design specifications @@ -257,15 +257,15 @@ const sections = [ }, ]; -const NavTabsSpecsPage = () => { +const NavTabsOverviewPage = () => { return ( - + ); }; -export default NavTabsSpecsPage; +export default NavTabsOverviewPage; diff --git a/apps/website/screens/components/nav-tabs/usage/NavTabsUsagePage.tsx b/apps/website/screens/components/nav-tabs/usage/NavTabsUsagePage.tsx deleted file mode 100644 index bd9704ed79..0000000000 --- a/apps/website/screens/components/nav-tabs/usage/NavTabsUsagePage.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { DxcBulletedList, DxcFlex, DxcParagraph, DxcLink } from "@dxc-technology/halstack-react"; -import DocFooter from "@/common/DocFooter"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import Figure from "@/common/Figure"; -import Image from "@/common/Image"; -import navTabsNavigation from "./images/navTabs_navigation.png"; - -const sections = [ - { - title: "Usage", - content: ( - <> - - Nav tabs organize and allow navigation across different pages of content that are related and at the same - level of hierarchy. They are commonly used in the header of a page. - - - - Use nav tabs for page or site navigation when dividing content into different pages. Please take into - account the site navigation as the main difference between nav tabs and regular tabs in order to use them. - - The content should follow an organized structure and hierarchy. - Text labels should be brief and clearly related to the content. - - - For general tabs usage, refer to the{" "} - tabs usage section. - - - ), - }, - { - title: "Navigation", - content: ( - <> - - Nav tabs can be used both to navigate within a page as well as to external pages and links. - -
- Nav tabs navigation combination of internal and external links -
- - ), - }, -]; - -const NavTabsUsagePage = () => { - return ( - - - - - - - ); -}; - -export default NavTabsUsagePage; diff --git a/apps/website/screens/components/nav-tabs/usage/images/navTabs_navigation.png b/apps/website/screens/components/nav-tabs/usage/images/navTabs_navigation.png deleted file mode 100644 index 287765788de29dca323fe108ef32da0b645d549b..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4027 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 P002O~hhA=WxpnW~DzI>l diff --git a/packages/lib/src/nav-tabs/NavTabs.stories.tsx b/packages/lib/src/nav-tabs/NavTabs.stories.tsx index 1d1c48e82d..89ec47052e 100644 --- a/packages/lib/src/nav-tabs/NavTabs.stories.tsx +++ b/packages/lib/src/nav-tabs/NavTabs.stories.tsx @@ -2,7 +2,6 @@ import { Meta, StoryObj } from "@storybook/react"; import ExampleContainer from "../../.storybook/components/ExampleContainer"; import Title from "../../.storybook/components/Title"; import DxcContainer from "../container/Container"; -import { HalstackProvider } from "../HalstackContext"; import DxcNavTabs from "./NavTabs"; export default { @@ -21,13 +20,6 @@ const favoriteIcon = "filled_Favorite"; const pinIcon = "Location_On"; -const opinionatedTheme = { - navTabs: { - baseColor: "#666666", - accentColor: "#5f249f", - }, -}; - const NavTabs = () => ( <> @@ -196,85 +188,6 @@ const NavTabs = () => ( - <ExampleContainer> - <Title title="Only label" theme="light" level={4} /> - <HalstackProvider theme={opinionatedTheme}> - <DxcNavTabs> - <DxcNavTabs.Tab href="#" active> - Tab 1 - </DxcNavTabs.Tab> - <DxcNavTabs.Tab href="#" disabled> - Tab 2 - </DxcNavTabs.Tab> - <DxcNavTabs.Tab href="#">Tab 3</DxcNavTabs.Tab> - <DxcNavTabs.Tab href="#">Tab 4</DxcNavTabs.Tab> - </DxcNavTabs> - </HalstackProvider> - </ExampleContainer> - <ExampleContainer pseudoState="pseudo-hover"> - <Title title="Hovered tabs" theme="light" level={4} /> - <HalstackProvider theme={opinionatedTheme}> - <DxcNavTabs> - <DxcNavTabs.Tab href="#" active> - Tab 1 - </DxcNavTabs.Tab> - <DxcNavTabs.Tab href="#" disabled> - Tab 2 - </DxcNavTabs.Tab> - <DxcNavTabs.Tab href="#">Tab 3</DxcNavTabs.Tab> - <DxcNavTabs.Tab href="#">Tab 4</DxcNavTabs.Tab> - </DxcNavTabs> - </HalstackProvider> - </ExampleContainer> - <ExampleContainer pseudoState="pseudo-focus"> - <Title title="Focused tabs" theme="light" level={4} /> - <HalstackProvider theme={opinionatedTheme}> - <DxcNavTabs> - <DxcNavTabs.Tab href="#" active> - Tab 1 - </DxcNavTabs.Tab> - <DxcNavTabs.Tab href="#" disabled> - Tab 2 - </DxcNavTabs.Tab> - <DxcNavTabs.Tab href="#">Tab 3</DxcNavTabs.Tab> - <DxcNavTabs.Tab href="#">Tab 4</DxcNavTabs.Tab> - </DxcNavTabs> - </HalstackProvider> - </ExampleContainer> - <ExampleContainer pseudoState="pseudo-active"> - <Title title="Actived tabs" theme="light" level={4} /> - <HalstackProvider theme={opinionatedTheme}> - <DxcNavTabs> - <DxcNavTabs.Tab href="#" active> - Tab 1 - </DxcNavTabs.Tab> - <DxcNavTabs.Tab href="#" disabled> - Tab 2 - </DxcNavTabs.Tab> - <DxcNavTabs.Tab href="#">Tab 3</DxcNavTabs.Tab> - <DxcNavTabs.Tab href="#">Tab 4</DxcNavTabs.Tab> - </DxcNavTabs> - </HalstackProvider> - </ExampleContainer> - <ExampleContainer> - <Title title="With icon and notification number" theme="light" level={4} /> - <HalstackProvider theme={opinionatedTheme}> - <DxcNavTabs> - <DxcNavTabs.Tab href="#" active icon={favoriteIcon} notificationNumber> - Tab 1 - </DxcNavTabs.Tab> - <DxcNavTabs.Tab href="#" disabled icon={favoriteIcon} notificationNumber={5}> - Tab 2 - </DxcNavTabs.Tab> - <DxcNavTabs.Tab href="#" icon={favoriteIcon} notificationNumber={120}> - Tab 3 - </DxcNavTabs.Tab> - <DxcNavTabs.Tab href="#" icon={favoriteIcon} notificationNumber={12}> - Tab 4 - </DxcNavTabs.Tab> - </DxcNavTabs> - </HalstackProvider> - </ExampleContainer> <ExampleContainer> <Title title="NavTabs in a limited space container" theme="light" level={4} /> <DxcContainer width="500px"> diff --git a/packages/lib/src/nav-tabs/NavTabs.tsx b/packages/lib/src/nav-tabs/NavTabs.tsx index d37a57f620..e9cf9d1b64 100644 --- a/packages/lib/src/nav-tabs/NavTabs.tsx +++ b/packages/lib/src/nav-tabs/NavTabs.tsx @@ -1,6 +1,5 @@ -import { Children, KeyboardEvent, ReactElement, ReactNode, useContext, useEffect, useMemo, useRef, useState } from "react"; -import styled, { ThemeProvider } from "styled-components"; -import HalstackContext from "../HalstackContext"; +import { Children, KeyboardEvent, ReactElement, ReactNode, useEffect, useMemo, useRef, useState } from "react"; +import styled from "styled-components"; import NavTabsPropsType from "./types"; import DxcTab from "./Tab"; import NavTabsContext from "./NavTabsContext"; @@ -45,11 +44,27 @@ const getNextTabIndex = (array: ReactElement[], initialIndex: number): number => return index; }; +const Underline = styled.div<{ underlineWidth: number }>` + position: absolute; + bottom: 0; + left: 0; + height: var(--border-width-m); + background-color: var(--border-color-neutral-medium); + z-index: -1; + width: ${(props) => props.underlineWidth}px; +`; + +const NavTabsContainer = styled.div` + display: flex; + position: relative; + overflow: auto; + z-index: 0; +`; + const DxcNavTabs = ({ iconPosition = "top", tabIndex = 0, children }: NavTabsPropsType): JSX.Element => { const [innerFocusIndex, setInnerFocusIndex] = useState<number | null>(null); const [underlineWidth, setUnderlineWidth] = useState<number | null>(null); const refNavTabList = useRef<HTMLDivElement | null>(null); - const colorsTheme = useContext(HalstackContext); const childArray = Children.toArray(children).filter( (child) => typeof child === "object" && "props" in child @@ -88,32 +103,13 @@ const DxcNavTabs = ({ iconPosition = "top", tabIndex = 0, children }: NavTabsPro }; return ( - <ThemeProvider theme={colorsTheme.navTabs}> - <NavTabsContainer onKeyDown={handleOnKeyDown} ref={refNavTabList} role="tablist" aria-label="Navigation tabs"> - <NavTabsContext.Provider value={contextValue}>{children}</NavTabsContext.Provider> - <Underline underlineWidth={underlineWidth ?? 0} /> - </NavTabsContainer> - </ThemeProvider> + <NavTabsContainer onKeyDown={handleOnKeyDown} ref={refNavTabList} role="tablist" aria-label="Navigation tabs"> + <NavTabsContext.Provider value={contextValue}>{children}</NavTabsContext.Provider> + <Underline underlineWidth={underlineWidth ?? 0} /> + </NavTabsContainer> ); }; -const Underline = styled.div<{ underlineWidth: number }>` - position: absolute; - bottom: 0; - left: 0; - height: 2px; - background-color: ${(props) => props.theme.dividerColor}; - z-index: -1; - width: ${(props) => props.underlineWidth}px; -`; - DxcNavTabs.Tab = DxcTab; -const NavTabsContainer = styled.div` - display: flex; - position: relative; - overflow: auto; - z-index: 0; -`; - export default DxcNavTabs; diff --git a/packages/lib/src/nav-tabs/Tab.tsx b/packages/lib/src/nav-tabs/Tab.tsx index 076c0f5d49..b90b09d9e0 100644 --- a/packages/lib/src/nav-tabs/Tab.tsx +++ b/packages/lib/src/nav-tabs/Tab.tsx @@ -6,6 +6,80 @@ import NavTabsPropsType, { TabProps } from "./types"; import NavTabsContext from "./NavTabsContext"; import DxcIcon from "../icon/Icon"; +const TabContainer = styled.div<{ active: TabProps["active"] }>` + align-items: stretch; + border-bottom: var(--border-width-s) var(--border-style-default) + ${(props) => (props.active ? "var(--border-color-primary-stronger)" : "transparent")}; + padding: var(--spacing-padding-xs); +`; + +const Tab = styled.a<{ + disabled: TabProps["disabled"]; + hasIcon: boolean; + iconPosition: NavTabsPropsType["iconPosition"]; +}>` + box-sizing: border-box; + display: flex; + flex-direction: ${(props) => (props.hasIcon && props.iconPosition === "top" ? "column" : "row")}; + justify-content: center; + align-items: center; + gap: ${(props) => + props.hasIcon && props.iconPosition === "top" ? "var(--spacing-gap-xs)" : "var(--spacing-gap-xs)"}; + height: ${(props) => (props.hasIcon && props.iconPosition === "top" ? "78px" : "100%")}; + min-width: 176px; + min-height: 48px; + padding: 0px var(--spacing-padding-xs); + border-radius: var(--border-radius-s); + background: var(--color-bg-neutral-lightest); + text-decoration-color: transparent; + text-decoration-line: none; + cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")}; + + ${(props) => + !props.disabled && + ` + :hover { + background: var(--color-bg-primary-lighter); + } + :focus { + outline: var(--border-width-s) var(--border-style-default) var(--border-color-secondary-medium; + } + :active { + background: var(--color-bg-primary-lighter); + } + `} +`; + +const Label = styled.span<{ + disabled: TabProps["disabled"]; + active: TabProps["active"]; +}>` + display: inline; + color: ${(props) => (props.disabled ? "var(--color-fg-neutral-medium)" : "var(--color-fg-neutral-stronger)")}; + font-family: var(--typography-font-family); + font-size: var(--typography-label-l); + font-weight: var(--typography-label-semibold); + text-align: center; + text-decoration: none; + text-overflow: unset; + white-space: normal; + margin: 0; +`; + +const TabIconContainer = styled.div<{ + iconPosition: NavTabsPropsType["iconPosition"]; + active: TabProps["active"]; + disabled: TabProps["disabled"]; +}>` + display: flex; + font-size: 24px; + color: ${(props) => (props.disabled ? "var(--color-fg-neutral-medium)" : "var(--color-fg-neutral-stronger)")}; + svg { + height: 24px; + width: 24px; + } +`; + const DxcTab = forwardRef( ( { href, active = false, icon, disabled = false, notificationNumber = false, children, ...otherProps }: TabProps, @@ -39,7 +113,6 @@ const DxcTab = forwardRef( <Tab href={!disabled ? href : undefined} disabled={disabled} - active={active} iconPosition={iconPosition} hasIcon={icon != null} ref={(anchorRef: HTMLAnchorElement) => { @@ -83,92 +156,4 @@ const DxcTab = forwardRef( } ); -const TabContainer = styled.div<{ active: TabProps["active"] }>` - align-items: stretch; - border-bottom: 2px solid ${(props) => (props.active ? props.theme.selectedUnderlineColor : "transparent")}; - padding: 0.5rem; -`; - -const Tab = styled.a<{ - disabled: TabProps["disabled"]; - active: TabProps["active"]; - hasIcon: boolean; - iconPosition: NavTabsPropsType["iconPosition"]; -}>` - box-sizing: border-box; - display: flex; - flex-direction: ${(props) => (props.hasIcon && props.iconPosition === "top" ? "column" : "row")}; - justify-content: center; - align-items: center; - gap: ${(props) => (props.hasIcon && props.iconPosition === "top" ? "0.375rem" : "0.625rem")}; - height: ${(props) => (props.hasIcon && props.iconPosition === "top" ? "78px" : "100%")}; - min-width: 176px; - min-height: 44px; - padding: 0.375rem; - border-radius: 4px; - background: ${(props) => - props.active ? props.theme.selectedBackgroundColor : props.theme.unselectedBackgroundColor}; - text-decoration-color: transparent; - text-decoration-line: none; - cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")}; - - ${(props) => - !props.disabled && - ` - :hover { - background: ${props.theme.hoverBackgroundColor}; - } - :focus { - outline: 2px solid ${props.theme.focusOutline}; - } - :active { - background: ${props.theme.pressedBackgroundColor}; - outline: 2px solid #33aaff}; - } - `} -`; - -const Label = styled.span<{ - disabled: TabProps["disabled"]; - active: TabProps["active"]; -}>` - display: inline; - color: ${(props) => - props.disabled - ? props.theme.disabledFontColor - : props.active - ? props.theme.selectedFontColor - : props.theme.unselectedFontColor}; - font-family: ${(props) => props.theme.fontFamily}; - font-size: ${(props) => props.theme.fontSize}; - font-style: ${(props) => props.theme.fontStyle}; - font-weight: ${(props) => props.theme.fontWeight}; - text-align: center; - letter-spacing: 0.025em; - line-height: 1.715em; - text-decoration: none; - text-overflow: unset; - white-space: normal; - margin: 0; -`; - -const TabIconContainer = styled.div<{ - iconPosition: NavTabsPropsType["iconPosition"]; - active: TabProps["active"]; - disabled: TabProps["disabled"]; -}>` - display: flex; - font-size: 24px; - color: ${(props) => - props.active - ? props.theme.selectedIconColor - : props.disabled - ? props.theme.disabledIconColor - : props.theme.unselectedIconColor}; - svg { - height: 24px; - width: 24px; - } -`; - export default DxcTab; From 546fe80920fde94eecdb37e17f1a2259140935c5 Mon Sep 17 00:00:00 2001 From: Jialecl <jialestrabajos@gmail.com> Date: Tue, 1 Apr 2025 12:01:39 +0200 Subject: [PATCH 2/8] Added some missing tokens --- packages/lib/src/nav-tabs/Tab.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/lib/src/nav-tabs/Tab.tsx b/packages/lib/src/nav-tabs/Tab.tsx index b90b09d9e0..16f99a75a3 100644 --- a/packages/lib/src/nav-tabs/Tab.tsx +++ b/packages/lib/src/nav-tabs/Tab.tsx @@ -28,7 +28,7 @@ const Tab = styled.a<{ height: ${(props) => (props.hasIcon && props.iconPosition === "top" ? "78px" : "100%")}; min-width: 176px; min-height: 48px; - padding: 0px var(--spacing-padding-xs); + padding: var(--spacing-padding-none) var(--spacing-padding-xs); border-radius: var(--border-radius-s); background: var(--color-bg-neutral-lightest); text-decoration-color: transparent; @@ -42,7 +42,7 @@ const Tab = styled.a<{ background: var(--color-bg-primary-lighter); } :focus { - outline: var(--border-width-s) var(--border-style-default) var(--border-color-secondary-medium; + outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); } :active { background: var(--color-bg-primary-lighter); @@ -63,7 +63,6 @@ const Label = styled.span<{ text-decoration: none; text-overflow: unset; white-space: normal; - margin: 0; `; const TabIconContainer = styled.div<{ @@ -72,10 +71,10 @@ const TabIconContainer = styled.div<{ disabled: TabProps["disabled"]; }>` display: flex; - font-size: 24px; + font-size: var(--height-s); color: ${(props) => (props.disabled ? "var(--color-fg-neutral-medium)" : "var(--color-fg-neutral-stronger)")}; svg { - height: 24px; + height: var(--height-s); width: 24px; } `; From 72926c5c9182db8e594687b1d8ab3d4a921a76e8 Mon Sep 17 00:00:00 2001 From: Jialecl <jialestrabajos@gmail.com> Date: Fri, 4 Apr 2025 12:38:55 +0200 Subject: [PATCH 3/8] added outline offset, fixed flex gap and minor fixes --- packages/lib/src/nav-tabs/NavTabs.stories.tsx | 2 +- packages/lib/src/nav-tabs/Tab.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/lib/src/nav-tabs/NavTabs.stories.tsx b/packages/lib/src/nav-tabs/NavTabs.stories.tsx index 89ec47052e..77bd08ac54 100644 --- a/packages/lib/src/nav-tabs/NavTabs.stories.tsx +++ b/packages/lib/src/nav-tabs/NavTabs.stories.tsx @@ -61,7 +61,7 @@ const NavTabs = () => ( <DxcNavTabs.Tab href="#">Tab 4</DxcNavTabs.Tab> </DxcNavTabs> </ExampleContainer> - <ExampleContainer pseudoState="pseudo-active"> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> <Title title="Actived tabs" theme="light" level={4} /> <DxcNavTabs> <DxcNavTabs.Tab href="#" active> diff --git a/packages/lib/src/nav-tabs/Tab.tsx b/packages/lib/src/nav-tabs/Tab.tsx index 16f99a75a3..5aec52514b 100644 --- a/packages/lib/src/nav-tabs/Tab.tsx +++ b/packages/lib/src/nav-tabs/Tab.tsx @@ -23,8 +23,7 @@ const Tab = styled.a<{ flex-direction: ${(props) => (props.hasIcon && props.iconPosition === "top" ? "column" : "row")}; justify-content: center; align-items: center; - gap: ${(props) => - props.hasIcon && props.iconPosition === "top" ? "var(--spacing-gap-xs)" : "var(--spacing-gap-xs)"}; + gap: var(--spacing-gap-xs); height: ${(props) => (props.hasIcon && props.iconPosition === "top" ? "78px" : "100%")}; min-width: 176px; min-height: 48px; @@ -43,6 +42,7 @@ const Tab = styled.a<{ } :focus { outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); + outline-offset: var(--border-width-m); } :active { background: var(--color-bg-primary-lighter); @@ -137,7 +137,7 @@ const DxcTab = forwardRef( {typeof icon === "string" ? <DxcIcon icon={icon} /> : icon} </TabIconContainer> )} - <DxcFlex alignItems="center" gap="0.5rem"> + <DxcFlex alignItems="center" gap="var(--spacing-gap-s)"> <Label active={active} disabled={disabled}> {children} </Label> From e05fd26572c84199fc00e97a191710d2f4f7a083 Mon Sep 17 00:00:00 2001 From: Jialecl <jialestrabajos@gmail.com> Date: Wed, 9 Apr 2025 17:27:35 +0200 Subject: [PATCH 4/8] documentation + examples added --- .../pages/components/nav-tabs/index.tsx | 2 +- .../nav-tabs/overview/NavTabsOverviewPage.tsx | 216 ++++++++++++++ .../nav-tabs/overview/examples/badges.ts | 26 ++ .../nav-tabs/overview/examples/external.ts | 26 ++ .../nav-tabs/overview/examples/icons_left.ts | 26 ++ .../nav-tabs/overview/examples/icons_top.ts | 26 ++ .../overview/images/navTabs_anatomy.png | Bin 0 -> 21629 bytes .../images/navTabs_specs.png | Bin .../images/navTabs_states.png | Bin .../nav-tabs/specs/NavTabsOverviewPage.tsx | 271 ------------------ .../nav-tabs/specs/images/navTabs_anatomy.png | Bin 6249 -> 0 bytes 11 files changed, 321 insertions(+), 272 deletions(-) create mode 100644 apps/website/screens/components/nav-tabs/overview/NavTabsOverviewPage.tsx create mode 100644 apps/website/screens/components/nav-tabs/overview/examples/badges.ts create mode 100644 apps/website/screens/components/nav-tabs/overview/examples/external.ts create mode 100644 apps/website/screens/components/nav-tabs/overview/examples/icons_left.ts create mode 100644 apps/website/screens/components/nav-tabs/overview/examples/icons_top.ts create mode 100644 apps/website/screens/components/nav-tabs/overview/images/navTabs_anatomy.png rename apps/website/screens/components/nav-tabs/{specs => overview}/images/navTabs_specs.png (100%) rename apps/website/screens/components/nav-tabs/{specs => overview}/images/navTabs_states.png (100%) delete mode 100644 apps/website/screens/components/nav-tabs/specs/NavTabsOverviewPage.tsx delete mode 100644 apps/website/screens/components/nav-tabs/specs/images/navTabs_anatomy.png diff --git a/apps/website/pages/components/nav-tabs/index.tsx b/apps/website/pages/components/nav-tabs/index.tsx index ee544052fc..d7d3c23176 100644 --- a/apps/website/pages/components/nav-tabs/index.tsx +++ b/apps/website/pages/components/nav-tabs/index.tsx @@ -1,7 +1,7 @@ import Head from "next/head"; import type { ReactElement } from "react"; import NavTabsPageLayout from "screens/components/nav-tabs/NavTabsPageLayout"; -import NavTabsOverviewPage from "screens/components/nav-tabs/specs/NavTabsOverviewPage"; +import NavTabsOverviewPage from "screens/components/nav-tabs/overview/NavTabsOverviewPage"; const Index = () => ( <> diff --git a/apps/website/screens/components/nav-tabs/overview/NavTabsOverviewPage.tsx b/apps/website/screens/components/nav-tabs/overview/NavTabsOverviewPage.tsx new file mode 100644 index 0000000000..aa9981d717 --- /dev/null +++ b/apps/website/screens/components/nav-tabs/overview/NavTabsOverviewPage.tsx @@ -0,0 +1,216 @@ +import { DxcBulletedList, DxcFlex, DxcParagraph, DxcLink, DxcHeading } from "@dxc-technology/halstack-react"; +import DocFooter from "@/common/DocFooter"; +import QuickNavContainer from "@/common/QuickNavContainer"; +import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; +import Image from "@/common/Image"; +import navTabsAnatomy from "./images/navTabs_anatomy.png"; +import Link from "next/link"; +import Example from "@/common/example/Example"; +import icons_top from "./examples/icons_top"; +import icons_left from "./examples/icons_left"; +import badges from "./examples/badges"; +import external from "./examples/external"; + +const sections = [ + { + title: "Introduction", + content: ( + <DxcParagraph> + Our nav tabs provide a simple and efficient way to organize and navigate between multiple content sections + within the same page. By dividing related information into distinct tabs, it helps reduce visual clutter and + improves content discoverability without requiring users to leave the current view. This component is especially + useful in scenarios where users need to compare or switch between data sets, settings or categories. It supports + both horizontal and stacked layouts, ensuring adaptability across different use cases and screen sizes. + </DxcParagraph> + ), + }, + { + title: "Anatomy", + content: ( + <> + <Image src={navTabsAnatomy} alt="Nav tabs anatomy" /> + <DxcBulletedList type="number"> + <DxcBulletedList.Item> + <strong>Container: </strong>the outer wrapper that holds and organizes all tab items. It defines the overall + structure and layout of the navigation tabs, ensuring proper alignment and spacing across the component. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + <strong>Label: </strong>the text displayed within each tab that indicates the section or category it leads + to. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + <strong>Notification badge </strong> + <em>(Optional)</em> + <strong>: </strong>an optional visual indicator that displays the number of pending actions, alerts or + updates related to a specific tab. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + <strong>Selected tab: </strong>the active tab currently in focus, representing the visible content section. + It is visually distinguished from unselected tabs using different color, weight or indicator styling. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + <strong>Icon</strong> + <em>(Optional)</em> + <strong>: </strong>an optional graphical element placed before the label to visually reinforce the tab's + meaning or category. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + <strong>Selected tab indicator: </strong>a horizontal bar that visually marks the currently active tab. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + <strong>Unselected tab indicator: </strong>a horizontal bar that visually marks the currently unactive tab. + </DxcBulletedList.Item> + </DxcBulletedList> + </> + ), + }, + { + title: "Using navtabs", + subSections: [ + { + title: "Icon position", + content: ( + <> + <DxcParagraph> + Icons in nav tabs can be placed wither above or to the left of the label, depending on the layout and + density of the interface. + </DxcParagraph> + <DxcBulletedList> + <DxcBulletedList.Item> + Use the top position when the tabs are displayed in a horizontal layout and you want to emphasize the + icon as a key visual cue—ideal for dashboards or mobile-first interfaces where vertical stacking feels + more natural. + <Example example={icons_top} defaultIsVisible={false} /> + </DxcBulletedList.Item> + <DxcBulletedList.Item> + Place the icon to the left of the label in more compact environments, especially when space is limited. + This configuration maintains readability while preserving a clean, organized structure. + <Example example={icons_left} defaultIsVisible={false} /> + </DxcBulletedList.Item> + </DxcBulletedList> + <DxcParagraph> + Choose the position that best aligns with the visual hierarchy and user flow of your application. + </DxcParagraph> + </> + ), + }, + { + title: "Notification badges", + content: ( + <> + <DxcParagraph> + Nav tabs can optionally include a notification badge to indicate new activity, alerts, or content updates + related to that tab. These badges are typically displayed as small counters and serve as a visual prompt + to draw the user's attention to something that requires their interaction or awareness. Use notification + badges sparingly and only when there is a clear need to highlight important changes—such as unread + messages, pending actions or system alerts—to avoid visual noise and ensure they retain their impact. + </DxcParagraph> + <Example example={badges} defaultIsVisible={false} /> + </> + ), + }, + { + title: "External links", + content: ( + <> + <DxcParagraph> + Nav tabs are not limited to internal navigation—they can also be used to direct users to external + resources or tools. When using tabs as external links, ensure that it's clear the user will be taken out + of the current context. This can be done with a visual indicator (such as an icon) or through a tooltip. + Consider external nav tabs when your application integrates with third-party platforms or provides + documentation, support pages or dashboards that live outside of your main product. + </DxcParagraph> + <Example example={external} defaultIsVisible={false} /> + </> + ), + }, + { + title: "Nav tabs vs. Tabs", + content: ( + <> + <DxcParagraph> + Both{" "} + <Link href="/components/tabs" passHref legacyBehavior> + <DxcLink>tabs</DxcLink> + </Link>{" "} + and nav tabs are used for navigation, but they serve different purposes and function in distinct ways. + </DxcParagraph> + <DxcHeading level={4} text="Nav tabs" /> + <DxcBulletedList> + <DxcBulletedList.Item> + Act as primary navigation elements, often leading to different pages or sections of an application. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + Clicking on a nav tab may trigger a full page reload or route change. + </DxcBulletedList.Item> + </DxcBulletedList> + <DxcHeading level={4} text="Tabs" /> + <DxcBulletedList> + <DxcBulletedList.Item> + Used to switch between different content sections within the same page or container. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + Typically do not trigger a full page reload but update content dynamically. + </DxcBulletedList.Item> + </DxcBulletedList> + <DxcParagraph> + Both components improve usability, but Tabs are best for grouping related content within a page, while + NavTabs help users move across different sections or pages of an application. + </DxcParagraph> + </> + ), + }, + ], + }, + { + title: "Best practices", + content: ( + <> + <DxcBulletedList> + <DxcBulletedList.Item> + Use nav tabs to <strong>group related content</strong> or views under a shared context, making it easier for + users to switch between them without losing orientation. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + Keep nav tab items <strong>labels short and descriptive</strong> to avoid truncation and maintain clarity, + especially on smaller viewports. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + Ensure that tabs <strong>follow a logical order</strong>—based on frequency of use, workflow, or user + priority. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + Use notification badges to <strong>highlight relevant updates</strong> only when necessary, and avoid + overloading multiple tabs with badges at once. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + When linking to external content, provide a clear indication (e.g., an icon or tooltip) so users are aware + they will be redirected outside the current environment. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + Choose icon placement (left or top) based on the available space and the importance of the icon in the + context of the label. Left is preferred for horizontal layouts; top works best in vertical or + space-constrained scenarios. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + Avoid mixing navigation tabs and action buttons within the same group, as this can create confusion around + expected behavior. + </DxcBulletedList.Item> + </DxcBulletedList> + </> + ), + }, +]; + +const NavTabsOverviewPage = () => { + return ( + <DxcFlex direction="column" gap="4rem"> + <QuickNavContainerLayout> + <QuickNavContainer sections={sections} startHeadingLevel={2} /> + </QuickNavContainerLayout> + <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/nav-tabs/overview/NavTabsOverviewPage.tsx" /> + </DxcFlex> + ); +}; + +export default NavTabsOverviewPage; diff --git a/apps/website/screens/components/nav-tabs/overview/examples/badges.ts b/apps/website/screens/components/nav-tabs/overview/examples/badges.ts new file mode 100644 index 0000000000..79a2fac169 --- /dev/null +++ b/apps/website/screens/components/nav-tabs/overview/examples/badges.ts @@ -0,0 +1,26 @@ +import { DxcNavTabs, DxcInset } from "@dxc-technology/halstack-react"; + +const code = `() => { + return ( + <DxcInset space="var(--spacing-padding-l)"> + <DxcNavTabs> + <DxcNavTabs.Tab href="#" active notificationNumber> + Tab 1 + </DxcNavTabs.Tab> + <DxcNavTabs.Tab href="#" disabled notificationNumber={5}> + Tab 2 + </DxcNavTabs.Tab> + <DxcNavTabs.Tab href="#" notificationNumber={120}> + Tab 3 + </DxcNavTabs.Tab> + </DxcNavTabs> + </DxcInset> + ); +}`; + +const scope = { + DxcNavTabs, + DxcInset, +}; + +export default { code, scope }; diff --git a/apps/website/screens/components/nav-tabs/overview/examples/external.ts b/apps/website/screens/components/nav-tabs/overview/examples/external.ts new file mode 100644 index 0000000000..e62a708c61 --- /dev/null +++ b/apps/website/screens/components/nav-tabs/overview/examples/external.ts @@ -0,0 +1,26 @@ +import { DxcNavTabs, DxcInset } from "@dxc-technology/halstack-react"; + +const code = `() => { + return ( + <DxcInset space="var(--spacing-padding-l)"> + <DxcNavTabs> + <DxcNavTabs.Tab href="#" active> + Mail + </DxcNavTabs.Tab> + <DxcNavTabs.Tab href="#"> + Calendar + </DxcNavTabs.Tab> + <DxcNavTabs.Tab href="#"> + External site + </DxcNavTabs.Tab> + </DxcNavTabs> + </DxcInset> + ); +}`; + +const scope = { + DxcNavTabs, + DxcInset, +}; + +export default { code, scope }; diff --git a/apps/website/screens/components/nav-tabs/overview/examples/icons_left.ts b/apps/website/screens/components/nav-tabs/overview/examples/icons_left.ts new file mode 100644 index 0000000000..77c3437f37 --- /dev/null +++ b/apps/website/screens/components/nav-tabs/overview/examples/icons_left.ts @@ -0,0 +1,26 @@ +import { DxcNavTabs, DxcInset } from "@dxc-technology/halstack-react"; + +const code = `() => { + return ( + <DxcInset space="var(--spacing-padding-l)"> + <DxcNavTabs iconPosition="left"> + <DxcNavTabs.Tab href="#" active icon="favorite"> + Tab 1 + </DxcNavTabs.Tab> + <DxcNavTabs.Tab href="#" disabled icon="favorite"> + Tab 2 + </DxcNavTabs.Tab> + <DxcNavTabs.Tab href="#" icon="favorite"> + Tab 3 + </DxcNavTabs.Tab> + </DxcNavTabs> + </DxcInset> + ); +}`; + +const scope = { + DxcNavTabs, + DxcInset, +}; + +export default { code, scope }; diff --git a/apps/website/screens/components/nav-tabs/overview/examples/icons_top.ts b/apps/website/screens/components/nav-tabs/overview/examples/icons_top.ts new file mode 100644 index 0000000000..04296b8042 --- /dev/null +++ b/apps/website/screens/components/nav-tabs/overview/examples/icons_top.ts @@ -0,0 +1,26 @@ +import { DxcNavTabs, DxcInset } from "@dxc-technology/halstack-react"; + +const code = `() => { + return ( + <DxcInset space="var(--spacing-padding-l)"> + <DxcNavTabs iconPosition="top"> + <DxcNavTabs.Tab href="#" active icon="favorite"> + Tab 1 + </DxcNavTabs.Tab> + <DxcNavTabs.Tab href="#" disabled icon="favorite"> + Tab 2 + </DxcNavTabs.Tab> + <DxcNavTabs.Tab href="#" icon="favorite"> + Tab 3 + </DxcNavTabs.Tab> + </DxcNavTabs> + </DxcInset> + ); +}`; + +const scope = { + DxcNavTabs, + DxcInset, +}; + +export default { code, scope }; diff --git a/apps/website/screens/components/nav-tabs/overview/images/navTabs_anatomy.png b/apps/website/screens/components/nav-tabs/overview/images/navTabs_anatomy.png new file mode 100644 index 0000000000000000000000000000000000000000..c3514b59641f31754fedb730bb3983731935025c GIT binary patch literal 21629 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 b0t)+6nLD$Tm4FSFpl@pFUMsp{`{aKCeJeln literal 0 HcmV?d00001 diff --git a/apps/website/screens/components/nav-tabs/specs/images/navTabs_specs.png b/apps/website/screens/components/nav-tabs/overview/images/navTabs_specs.png similarity index 100% rename from apps/website/screens/components/nav-tabs/specs/images/navTabs_specs.png rename to apps/website/screens/components/nav-tabs/overview/images/navTabs_specs.png diff --git a/apps/website/screens/components/nav-tabs/specs/images/navTabs_states.png b/apps/website/screens/components/nav-tabs/overview/images/navTabs_states.png similarity index 100% rename from apps/website/screens/components/nav-tabs/specs/images/navTabs_states.png rename to apps/website/screens/components/nav-tabs/overview/images/navTabs_states.png diff --git a/apps/website/screens/components/nav-tabs/specs/NavTabsOverviewPage.tsx b/apps/website/screens/components/nav-tabs/specs/NavTabsOverviewPage.tsx deleted file mode 100644 index 7d11f7e880..0000000000 --- a/apps/website/screens/components/nav-tabs/specs/NavTabsOverviewPage.tsx +++ /dev/null @@ -1,271 +0,0 @@ -import { DxcBulletedList, DxcFlex, DxcTable, DxcParagraph } from "@dxc-technology/halstack-react"; -import DocFooter from "@/common/DocFooter"; -import Figure from "@/common/Figure"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import Image from "@/common/Image"; -import Code from "@/common/Code"; -import navTabsSpecs from "./images/navTabs_specs.png"; -import navTabsAnatomy from "./images/navTabs_anatomy.png"; -import navTabsStates from "./images/navTabs_states.png"; - -const sections = [ - { - title: "Introduction", - content: ( - <Figure caption="Nav tabs design specifications"> - <Image src={navTabsSpecs} alt="Nav tabs design specifications" /> - </Figure> - ), - }, - { - title: "States", - content: ( - <> - <DxcParagraph> - Tabs can get different states based on user interaction. These states are: <strong>enabled</strong>,{" "} - <strong>hover</strong>, <strong>focus</strong>, <strong>active</strong> and <strong>disabled</strong>. - </DxcParagraph> - <Figure caption="Nav tabs states"> - <Image src={navTabsStates} alt="Nav tabs states" /> - </Figure> - </> - ), - }, - { - title: "Anatomy", - content: ( - <> - <Image src={navTabsAnatomy} alt="Nav tabs anatomy" /> - <DxcBulletedList type="number"> - <DxcBulletedList.Item>Container</DxcBulletedList.Item> - <DxcBulletedList.Item>Default text label</DxcBulletedList.Item> - <DxcBulletedList.Item>Selected tab indicator</DxcBulletedList.Item> - <DxcBulletedList.Item>Default tab indicator</DxcBulletedList.Item> - </DxcBulletedList> - </> - ), - }, - { - title: "Design tokens", - subSections: [ - { - title: "Color", - content: ( - <DxcTable> - <thead> - <tr> - <th>Component token</th> - <th>Element</th> - <th>Core token</th> - <th>Value</th> - </tr> - </thead> - <tbody> - <tr> - <td> - <Code>selectedBackgroundColor</Code> - </td> - <td>Tab item background:selected</td> - <td> - <Code>color-white</Code> - </td> - <td>#ffffff</td> - </tr> - <tr> - <td> - <Code>unselectedBackgroundColor</Code> - </td> - <td>Tab item background:enabled</td> - <td> - <Code>color-white</Code> - </td> - <td>#ffffff</td> - </tr> - <tr> - <td> - <Code>hoverBackgroundColor</Code> - </td> - <td>Tab item background:hover</td> - <td> - <Code>color-grey-100</Code> - </td> - <td>#f2f2f2</td> - </tr> - <tr> - <td> - <Code>pressedBackgroundColor</Code> - </td> - <td>Tab item background:active</td> - <td> - <Code>color-grey-200</Code> - </td> - <td>#e6e6e6</td> - </tr> - <tr> - <td> - <Code>selectedFontColor</Code> - </td> - <td>Label</td> - <td> - <Code>color-grey-700</Code> - </td> - <td>#666666</td> - </tr> - <tr> - <td> - <Code>unselectedFontColor</Code> - </td> - <td>Label</td> - <td> - <Code>color-grey-700</Code> - </td> - <td>#666666</td> - </tr> - <tr> - <td> - <Code>disabledFontColor</Code> - </td> - <td>Label:disabled</td> - <td> - <Code>color-grey-500</Code> - </td> - <td>#999999</td> - </tr> - <tr> - <td> - <Code>selectedIconColor</Code> - </td> - <td>Icon</td> - <td> - <Code>color-grey-700</Code> - </td> - <td>#666666</td> - </tr> - <tr> - <td> - <Code>unselectedIconColor</Code> - </td> - <td>Icon</td> - <td> - <Code>color-grey-700</Code> - </td> - <td>#666666</td> - </tr> - <tr> - <td> - <Code>disabledIconColor</Code> - </td> - <td>Icon:disabled</td> - <td> - <Code>color-grey-500</Code> - </td> - <td>#999999</td> - </tr> - <tr> - <td> - <Code>focusOutline</Code> - </td> - <td>Tab item outline</td> - <td> - <Code>color-blue-600</Code> - </td> - <td>#0095ff</td> - </tr> - <tr> - <td> - <Code>selectedUnderlineColor</Code> - </td> - <td>Tab item border botton</td> - <td> - <Code>color-purple-700</Code> - </td> - <td>#5f249f</td> - </tr> - <tr> - <td> - <Code>dividerColor</Code> - </td> - <td>Separator</td> - <td> - <Code>color-grey-400</Code> - </td> - <td>#bfbfbf</td> - </tr> - </tbody> - </DxcTable> - ), - }, - { - title: "Typography", - content: ( - <DxcTable> - <thead> - <tr> - <th>Component token</th> - <th>Element</th> - <th>Core token</th> - <th>Value</th> - </tr> - </thead> - <tbody> - <tr> - <td> - <Code>fontFamily</Code> - </td> - <td>Title</td> - <td> - <Code>font-family-sans</Code> - </td> - <td>'Open Sans', sans-serif</td> - </tr> - <tr> - <td> - <Code>fontSize</Code> - </td> - <td>Title</td> - <td> - <Code>font-scale-03</Code> - </td> - <td>1rem / 16px</td> - </tr> - <tr> - <td> - <Code>fontStyle</Code> - </td> - <td>Title</td> - <td> - <Code>font-style-normal</Code> - </td> - <td>normal</td> - </tr> - <tr> - <td> - <Code>fontWeight</Code> - </td> - <td>Title</td> - <td> - <Code>font-weight-regular</Code> - </td> - <td>400</td> - </tr> - </tbody> - </DxcTable> - ), - }, - ], - }, -]; - -const NavTabsOverviewPage = () => { - return ( - <DxcFlex direction="column" gap="4rem"> - <QuickNavContainerLayout> - <QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer> - </QuickNavContainerLayout> - <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/nav-tabs/overview/NavTabsOverviewPage.tsx" /> - </DxcFlex> - ); -}; - -export default NavTabsOverviewPage; diff --git a/apps/website/screens/components/nav-tabs/specs/images/navTabs_anatomy.png b/apps/website/screens/components/nav-tabs/specs/images/navTabs_anatomy.png deleted file mode 100644 index 3f03145c9b2d15b5235e5038f39b7159a534ccae..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6249 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 Wlms^D{cixg%r4!yh&H|T@ZSL82m90j From f81c7a21734aee2356bd0917060cb69c18f7657f Mon Sep 17 00:00:00 2001 From: Jialecl <jialestrabajos@gmail.com> Date: Thu, 10 Apr 2025 12:22:08 +0200 Subject: [PATCH 5/8] Documentation fixed + removed external links documentation --- .../components/nav-tabs/NavTabsPageLayout.tsx | 4 +- .../nav-tabs/overview/NavTabsOverviewPage.tsx | 67 +++++++------------ .../nav-tabs/overview/examples/external.ts | 26 ------- 3 files changed, 26 insertions(+), 71 deletions(-) delete mode 100644 apps/website/screens/components/nav-tabs/overview/examples/external.ts diff --git a/apps/website/screens/components/nav-tabs/NavTabsPageLayout.tsx b/apps/website/screens/components/nav-tabs/NavTabsPageLayout.tsx index 0dbd32ee67..16077c5cd3 100644 --- a/apps/website/screens/components/nav-tabs/NavTabsPageLayout.tsx +++ b/apps/website/screens/components/nav-tabs/NavTabsPageLayout.tsx @@ -16,8 +16,8 @@ const NumberInputPageHeading = ({ children }: { children: ReactNode }) => { <DxcFlex direction="column" gap="2rem"> <ComponentHeading name="Nav Tabs" /> <DxcParagraph> - Nav tabs function in the same way as the tab component but are more focused on navigation across pages or - links. + Nav tabs lets users switch between different views or sections within the same page, organizing related + content into a clear and accessible layout. </DxcParagraph> <TabsPageHeading tabs={tabs}></TabsPageHeading> </DxcFlex> diff --git a/apps/website/screens/components/nav-tabs/overview/NavTabsOverviewPage.tsx b/apps/website/screens/components/nav-tabs/overview/NavTabsOverviewPage.tsx index aa9981d717..8738e9682f 100644 --- a/apps/website/screens/components/nav-tabs/overview/NavTabsOverviewPage.tsx +++ b/apps/website/screens/components/nav-tabs/overview/NavTabsOverviewPage.tsx @@ -9,7 +9,6 @@ import Example from "@/common/example/Example"; import icons_top from "./examples/icons_top"; import icons_left from "./examples/icons_left"; import badges from "./examples/badges"; -import external from "./examples/external"; const sections = [ { @@ -40,9 +39,8 @@ const sections = [ </DxcBulletedList.Item> <DxcBulletedList.Item> <strong>Notification badge </strong> - <em>(Optional)</em> - <strong>: </strong>an optional visual indicator that displays the number of pending actions, alerts or - updates related to a specific tab. + <em>(Optional)</em>: a visual indicator that displays the number of pending actions, alerts or updates + related to a specific tab. </DxcBulletedList.Item> <DxcBulletedList.Item> <strong>Selected tab: </strong>the active tab currently in focus, representing the visible content section. @@ -50,15 +48,14 @@ const sections = [ </DxcBulletedList.Item> <DxcBulletedList.Item> <strong>Icon</strong> - <em>(Optional)</em> - <strong>: </strong>an optional graphical element placed before the label to visually reinforce the tab's + <em>(Optional)</em>: an optional graphical element placed before the label to visually reinforce the tab's meaning or category. </DxcBulletedList.Item> <DxcBulletedList.Item> <strong>Selected tab indicator: </strong>a horizontal bar that visually marks the currently active tab. </DxcBulletedList.Item> <DxcBulletedList.Item> - <strong>Unselected tab indicator: </strong>a horizontal bar that visually marks the currently unactive tab. + <strong>Unselected tab indicator: </strong>a horizontal bar that visually marks the currently inactive tab. </DxcBulletedList.Item> </DxcBulletedList> </> @@ -72,19 +69,20 @@ const sections = [ content: ( <> <DxcParagraph> - Icons in nav tabs can be placed wither above or to the left of the label, depending on the layout and - density of the interface. + Icons in nav tabs can be placed either <strong>above or to the left</strong> of the label, depending on + the layout and density of the interface. </DxcParagraph> <DxcBulletedList> <DxcBulletedList.Item> - Use the top position when the tabs are displayed in a horizontal layout and you want to emphasize the - icon as a key visual cue—ideal for dashboards or mobile-first interfaces where vertical stacking feels - more natural. + Use the <strong>top position</strong> when the tabs are displayed in a horizontal layout and you want to + emphasize the icon as a key visual cue—ideal for dashboards or mobile - first interfaces where vertical + stacking feels more natural. <Example example={icons_top} defaultIsVisible={false} /> </DxcBulletedList.Item> <DxcBulletedList.Item> - Place the icon to the left of the label in more compact environments, especially when space is limited. - This configuration maintains readability while preserving a clean, organized structure. + Place the icon <strong>to the left</strong> of the label in more compact environments, especially when + space is limited. This configuration maintains readability while preserving a clean, organized + structure. <Example example={icons_left} defaultIsVisible={false} /> </DxcBulletedList.Item> </DxcBulletedList> @@ -99,31 +97,17 @@ const sections = [ content: ( <> <DxcParagraph> - Nav tabs can optionally include a notification badge to indicate new activity, alerts, or content updates - related to that tab. These badges are typically displayed as small counters and serve as a visual prompt - to draw the user's attention to something that requires their interaction or awareness. Use notification - badges sparingly and only when there is a clear need to highlight important changes—such as unread - messages, pending actions or system alerts—to avoid visual noise and ensure they retain their impact. + Nav tabs can optionally include a <strong>notification badge</strong> to indicate new activity, alerts, or + content updates related to that tab. These badges are typically displayed as small counters and serve as a + visual prompt to <strong>draw the user's attention</strong> to something that requires their interaction + or awareness. Use notification badges sparingly and only when there is a clear need to highlight important + changes—such as unread messages, pending actions or system alerts—to avoid visual noise and ensure they + retain their impact. </DxcParagraph> <Example example={badges} defaultIsVisible={false} /> </> ), }, - { - title: "External links", - content: ( - <> - <DxcParagraph> - Nav tabs are not limited to internal navigation—they can also be used to direct users to external - resources or tools. When using tabs as external links, ensure that it's clear the user will be taken out - of the current context. This can be done with a visual indicator (such as an icon) or through a tooltip. - Consider external nav tabs when your application integrates with third-party platforms or provides - documentation, support pages or dashboards that live outside of your main product. - </DxcParagraph> - <Example example={external} defaultIsVisible={false} /> - </> - ), - }, { title: "Nav tabs vs. Tabs", content: ( @@ -138,10 +122,11 @@ const sections = [ <DxcHeading level={4} text="Nav tabs" /> <DxcBulletedList> <DxcBulletedList.Item> - Act as primary navigation elements, often leading to different pages or sections of an application. + Act as primary navigation elements, often leading to <strong>different pages</strong> or sections of an + application. </DxcBulletedList.Item> <DxcBulletedList.Item> - Clicking on a nav tab may trigger a full page reload or route change. + Clicking on a <strong>nav tab</strong> may trigger a full page reload or route change. </DxcBulletedList.Item> </DxcBulletedList> <DxcHeading level={4} text="Tabs" /> @@ -150,7 +135,7 @@ const sections = [ Used to switch between different content sections within the same page or container. </DxcBulletedList.Item> <DxcBulletedList.Item> - Typically do not trigger a full page reload but update content dynamically. + Typically do <strong>not</strong> trigger a full page reload but update content dynamically. </DxcBulletedList.Item> </DxcBulletedList> <DxcParagraph> @@ -183,14 +168,10 @@ const sections = [ Use notification badges to <strong>highlight relevant updates</strong> only when necessary, and avoid overloading multiple tabs with badges at once. </DxcBulletedList.Item> - <DxcBulletedList.Item> - When linking to external content, provide a clear indication (e.g., an icon or tooltip) so users are aware - they will be redirected outside the current environment. - </DxcBulletedList.Item> <DxcBulletedList.Item> Choose icon placement (left or top) based on the available space and the importance of the icon in the - context of the label. Left is preferred for horizontal layouts; top works best in vertical or - space-constrained scenarios. + context of the label. Left is preferred for horizontal layouts; top works best in vertical or space - + constrained scenarios. </DxcBulletedList.Item> <DxcBulletedList.Item> Avoid mixing navigation tabs and action buttons within the same group, as this can create confusion around diff --git a/apps/website/screens/components/nav-tabs/overview/examples/external.ts b/apps/website/screens/components/nav-tabs/overview/examples/external.ts deleted file mode 100644 index e62a708c61..0000000000 --- a/apps/website/screens/components/nav-tabs/overview/examples/external.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { DxcNavTabs, DxcInset } from "@dxc-technology/halstack-react"; - -const code = `() => { - return ( - <DxcInset space="var(--spacing-padding-l)"> - <DxcNavTabs> - <DxcNavTabs.Tab href="#" active> - Mail - </DxcNavTabs.Tab> - <DxcNavTabs.Tab href="#"> - Calendar - </DxcNavTabs.Tab> - <DxcNavTabs.Tab href="#"> - External site - </DxcNavTabs.Tab> - </DxcNavTabs> - </DxcInset> - ); -}`; - -const scope = { - DxcNavTabs, - DxcInset, -}; - -export default { code, scope }; From 322d4413f865ff640156ab0c8e5449ece72d9dbe Mon Sep 17 00:00:00 2001 From: Jialecl <jialestrabajos@gmail.com> Date: Thu, 10 Apr 2025 12:24:17 +0200 Subject: [PATCH 6/8] Nav tabs consistency naming --- .../components/nav-tabs/overview/NavTabsOverviewPage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/website/screens/components/nav-tabs/overview/NavTabsOverviewPage.tsx b/apps/website/screens/components/nav-tabs/overview/NavTabsOverviewPage.tsx index 8738e9682f..498d5748be 100644 --- a/apps/website/screens/components/nav-tabs/overview/NavTabsOverviewPage.tsx +++ b/apps/website/screens/components/nav-tabs/overview/NavTabsOverviewPage.tsx @@ -62,7 +62,7 @@ const sections = [ ), }, { - title: "Using navtabs", + title: "Using nav tabs", subSections: [ { title: "Icon position", @@ -140,7 +140,7 @@ const sections = [ </DxcBulletedList> <DxcParagraph> Both components improve usability, but Tabs are best for grouping related content within a page, while - NavTabs help users move across different sections or pages of an application. + <strong>nav tabs</strong> help users move across different sections or pages of an application. </DxcParagraph> </> ), From a25fe5d4220c572928e5fe43314ff879959235e6 Mon Sep 17 00:00:00 2001 From: Jialecl <jialestrabajos@gmail.com> Date: Thu, 10 Apr 2025 12:41:21 +0200 Subject: [PATCH 7/8] additional small changes --- .../components/nav-tabs/overview/NavTabsOverviewPage.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/website/screens/components/nav-tabs/overview/NavTabsOverviewPage.tsx b/apps/website/screens/components/nav-tabs/overview/NavTabsOverviewPage.tsx index 498d5748be..768921134f 100644 --- a/apps/website/screens/components/nav-tabs/overview/NavTabsOverviewPage.tsx +++ b/apps/website/screens/components/nav-tabs/overview/NavTabsOverviewPage.tsx @@ -139,7 +139,8 @@ const sections = [ </DxcBulletedList.Item> </DxcBulletedList> <DxcParagraph> - Both components improve usability, but Tabs are best for grouping related content within a page, while + Both components improve usability, but <strong>tabs</strong> are best for grouping related content within + a page, while <strong>nav tabs</strong> help users move across different sections or pages of an application. </DxcParagraph> </> @@ -161,7 +162,7 @@ const sections = [ especially on smaller viewports. </DxcBulletedList.Item> <DxcBulletedList.Item> - Ensure that tabs <strong>follow a logical order</strong>—based on frequency of use, workflow, or user + Ensure that tabs <strong>follow a logical order</strong> — based on frequency of use, workflow, or user priority. </DxcBulletedList.Item> <DxcBulletedList.Item> From bb761a77fdc6644f110ab5519cf4afd3ab79d711 Mon Sep 17 00:00:00 2001 From: Jialecl <jialestrabajos@gmail.com> Date: Thu, 10 Apr 2025 12:50:49 +0200 Subject: [PATCH 8/8] props reordered --- .../nav-tabs/code/NavTabsCodePage.tsx | 46 +++++++++---------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/apps/website/screens/components/nav-tabs/code/NavTabsCodePage.tsx b/apps/website/screens/components/nav-tabs/code/NavTabsCodePage.tsx index 0d5be9e1c8..20157e8204 100644 --- a/apps/website/screens/components/nav-tabs/code/NavTabsCodePage.tsx +++ b/apps/website/screens/components/nav-tabs/code/NavTabsCodePage.tsx @@ -26,16 +26,6 @@ const sections = [ </tr> </thead> <tbody> - <tr> - <td>iconPosition</td> - <td> - <TableCode>'top' | 'left'</TableCode> - </td> - <td>Whether the icon should appear above or to the left of the label.</td> - <td> - <TableCode>'top'</TableCode> - </td> - </tr> <tr> <td> <DxcFlex direction="column" gap="0.25rem" alignItems="baseline"> @@ -51,6 +41,16 @@ const sections = [ </td> <td>-</td> </tr> + <tr> + <td>iconPosition</td> + <td> + <TableCode>'top' | 'left'</TableCode> + </td> + <td>Whether the icon should appear above or to the left of the label.</td> + <td> + <TableCode>'top'</TableCode> + </td> + </tr> <tr> <td>tabIndex</td> <td> @@ -94,6 +94,19 @@ const sections = [ <TableCode>false</TableCode> </td> </tr> + <tr> + <td> + <DxcFlex direction="column" gap="0.25rem" alignItems="baseline"> + <StatusBadge status="required" /> + children + </DxcFlex> + </td> + <td> + <TableCode>string</TableCode> + </td> + <td>Tab label text.</td> + <td>-</td> + </tr> <tr> <td>disabled</td> <td> @@ -141,19 +154,6 @@ const sections = [ <TableCode>false</TableCode> </td> </tr> - <tr> - <td> - <DxcFlex direction="column" gap="0.25rem" alignItems="baseline"> - <StatusBadge status="required" /> - children - </DxcFlex> - </td> - <td> - <TableCode>string</TableCode> - </td> - <td>Tab label text.</td> - <td>-</td> - </tr> </tbody> </DxcTable> ),