From b5bf2262012205681c34d19027710b1693888fe0 Mon Sep 17 00:00:00 2001 From: Jialecl Date: Fri, 28 Mar 2025 14:36:05 +0100 Subject: [PATCH 1/4] Link component redesign --- packages/lib/src/link/Link.stories.tsx | 12 ---- packages/lib/src/link/Link.tsx | 87 ++++++++++++-------------- 2 files changed, 39 insertions(+), 60 deletions(-) diff --git a/packages/lib/src/link/Link.stories.tsx b/packages/lib/src/link/Link.stories.tsx index a6ea36ce92..62e9542fbf 100644 --- a/packages/lib/src/link/Link.stories.tsx +++ b/packages/lib/src/link/Link.stories.tsx @@ -20,12 +20,6 @@ const icon = ( ); -const opinionatedTheme = { - link: { - baseColor: "#fabada", - }, -}; - const Link = () => ( <> @@ -199,12 +193,6 @@ const Link = () => ( </DxcLink> </ExampleContainer> <Title title="Opinionated theme" theme="light" level={2} /> - <ExampleContainer pseudoState="pseudo-visited"> - <HalstackProvider theme={opinionatedTheme}> - <Title title="With link visited" theme="light" level={4} /> - <DxcLink href="https://www.google.com">Test</DxcLink> - </HalstackProvider> - </ExampleContainer> </> ); diff --git a/packages/lib/src/link/Link.tsx b/packages/lib/src/link/Link.tsx index c67677ec62..cda3ac5b68 100644 --- a/packages/lib/src/link/Link.tsx +++ b/packages/lib/src/link/Link.tsx @@ -1,10 +1,8 @@ -import { forwardRef, Ref, useContext } from "react"; -import styled, { ThemeProvider } from "styled-components"; +import { forwardRef, Ref } from "react"; +import styled from "styled-components"; import { spaces } from "../common/variables"; import DxcIcon from "../icon/Icon"; -import HalstackContext from "../HalstackContext"; import { LinkProps } from "./types"; -import CoreTokens from "../common/coreTokens"; const StyledLink = styled.a<{ margin: LinkProps["margin"]; @@ -27,28 +25,28 @@ const StyledLink = styled.a<{ border: none; border-radius: 4px; width: fit-content; - ${(props) => `padding-bottom: ${props.theme.underlineSpacing};`} - font-family: ${(props) => props.theme.fontFamily}; - font-size: ${(props) => props.theme.fontSize}; - font-style: ${(props) => props.theme.fontStyle}; - font-weight: ${(props) => props.theme.fontWeight}; - line-height: ${CoreTokens.type_leading_compact_02}; + font-family: var(--font-family-sans); + font-size: var(--font-size-14); + font-weight: var(--font-weight-regular); text-decoration: none; color: ${(props) => - props.inheritColor ? "inherit" : !props.disabled ? props.theme.fontColor : props.theme.disabledFontColor}; + props.inheritColor + ? "inherit" + : !props.disabled + ? "var(--color-fg-secondary-strong)" + : "var(--color-fg-neutral-medium)"}; ${(props) => (props.disabled ? "cursor: default;" : "cursor: pointer;")} ${(props) => (props.disabled ? "pointer-events: none;" : "")} &:visited { - color: ${(props) => (!props.inheritColor && !props.disabled ? props.theme.visitedFontColor : "")}; + color: ${(props) => (!props.inheritColor && !props.disabled ? "var(--color-fg-neutral-medium)" : "")}; & > span:hover { - ${(props) => `color: ${props.theme.visitedFontColor}; - border-bottom-color: ${props.theme.visitedUnderlineColor};`} + ${(props) => `color: ${props.theme.visitedFontColor};`} } } &:focus { - outline: 2px solid ${(props) => props.theme.focusColor}; - outline-offset: 2px; + outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); + outline-offset: var(--border-width-m); ${(props) => props.disabled && "outline: none"} } `; @@ -57,30 +55,27 @@ const LinkContainer = styled.span<{ iconPosition: LinkProps["iconPosition"]; inheritColor: LinkProps["inheritColor"]; }>` - ${(props) => `border-bottom: ${props.theme.underlineThickness} ${props.theme.underlineStyle} transparent;`} + border-bottom: transparent; display: inline-flex; align-items: center; ${(props) => (props.iconPosition === "before" ? "flex-direction: row-reverse;" : "")} - gap: ${(props) => props.theme.iconSpacing}; + gap: var(--spacing-gap-xs); &:hover { - ${(props) => - `color: ${props.theme.hoverFontColor}; - cursor: pointer; - border-bottom-color: ${props.theme.hoverUnderlineColor};`} + color: var(--color-fg-secondary-stronger); + cursor: pointer; } &:active { - ${(props) => `color: ${props.theme.activeFontColor} !important; - border-bottom-color: ${props.theme.activeUnderlineColor} !important;`} + color: var(--color-fg-neutral-dark) !important; } `; const LinkIconContainer = styled.div` display: flex; - font-size: ${(props) => props.theme.iconSize}; + font-size: var(--height-xxs); svg { - width: ${(props) => props.theme.iconSize}; - height: ${(props) => props.theme.iconSize}; + width: 16px; + height: var(--height-xxs); } `; @@ -101,28 +96,24 @@ const DxcLink = forwardRef( }: LinkProps, ref: Ref<HTMLAnchorElement> ): JSX.Element => { - const colorsTheme = useContext(HalstackContext); - return ( - <ThemeProvider theme={colorsTheme.link}> - <StyledLink - as={onClick && !href ? "button" : "a"} - tabIndex={tabIndex} - onClick={!disabled ? onClick : undefined} - href={!disabled && href ? href : undefined} - target={href ? (newWindow ? "_blank" : "_self") : undefined} - disabled={disabled} - inheritColor={inheritColor} - margin={margin} - ref={ref} - {...otherProps} - > - <LinkContainer iconPosition={iconPosition} inheritColor={inheritColor}> - {children} - {icon && <LinkIconContainer>{typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}</LinkIconContainer>} - </LinkContainer> - </StyledLink> - </ThemeProvider> + <StyledLink + as={onClick && !href ? "button" : "a"} + tabIndex={tabIndex} + onClick={!disabled ? onClick : undefined} + href={!disabled && href ? href : undefined} + target={href ? (newWindow ? "_blank" : "_self") : undefined} + disabled={disabled} + inheritColor={inheritColor} + margin={margin} + ref={ref} + {...otherProps} + > + <LinkContainer iconPosition={iconPosition} inheritColor={inheritColor}> + {children} + {icon && <LinkIconContainer>{typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}</LinkIconContainer>} + </LinkContainer> + </StyledLink> ); } ); From 50feec145159da9d2abb7a72711e26830e465156 Mon Sep 17 00:00:00 2001 From: Jialecl <jialestrabajos@gmail.com> Date: Thu, 3 Apr 2025 16:56:59 +0200 Subject: [PATCH 2/4] Tokens fixed based on comments and doc added --- apps/website/pages/components/link/code.tsx | 17 + apps/website/pages/components/link/index.tsx | 24 +- .../pages/components/link/specifications.tsx | 21 -- apps/website/pages/components/link/usage.tsx | 21 -- .../components/link/LinkPageLayout.tsx | 10 +- .../link/overview/LinkOverviewPage.tsx | 87 +++++ .../link/overview/images/link-anatomy.png | Bin 0 -> 11245 bytes .../components/link/specs/LinkSpecsPage.tsx | 347 ------------------ .../link/specs/images/link_specs.png | Bin 8764 -> 0 bytes .../link/specs/images/link_states.png | Bin 10781 -> 0 bytes .../components/link/usage/LinkUsagePage.tsx | 45 --- .../link/usage/examples/iconUsage.ts | 57 --- .../link/usage/images/link_states_icon.png | Bin 18642 -> 0 bytes packages/lib/src/link/Link.stories.tsx | 5 +- packages/lib/src/link/Link.tsx | 14 +- 15 files changed, 127 insertions(+), 521 deletions(-) create mode 100644 apps/website/pages/components/link/code.tsx delete mode 100644 apps/website/pages/components/link/specifications.tsx delete mode 100644 apps/website/pages/components/link/usage.tsx create mode 100644 apps/website/screens/components/link/overview/LinkOverviewPage.tsx create mode 100644 apps/website/screens/components/link/overview/images/link-anatomy.png delete mode 100644 apps/website/screens/components/link/specs/LinkSpecsPage.tsx delete mode 100644 apps/website/screens/components/link/specs/images/link_specs.png delete mode 100644 apps/website/screens/components/link/specs/images/link_states.png delete mode 100644 apps/website/screens/components/link/usage/LinkUsagePage.tsx delete mode 100644 apps/website/screens/components/link/usage/examples/iconUsage.ts delete mode 100644 apps/website/screens/components/link/usage/images/link_states_icon.png diff --git a/apps/website/pages/components/link/code.tsx b/apps/website/pages/components/link/code.tsx new file mode 100644 index 0000000000..c1de068bfa --- /dev/null +++ b/apps/website/pages/components/link/code.tsx @@ -0,0 +1,17 @@ +import Head from "next/head"; +import type { ReactElement } from "react"; +import LinkPageLayout from "screens/components/link/LinkPageLayout"; +import LinkCodePage from "screens/components/link/code/LinkCodePage"; + +const Code = () => ( + <> + <Head> + <title>Link code — Halstack Design System + + + +); + +Code.getLayout = (page: ReactElement) => {page}; + +export default Code; diff --git a/apps/website/pages/components/link/index.tsx b/apps/website/pages/components/link/index.tsx index e3bf049d24..ac2fb0eb4e 100644 --- a/apps/website/pages/components/link/index.tsx +++ b/apps/website/pages/components/link/index.tsx @@ -1,21 +1,17 @@ import Head from "next/head"; import type { ReactElement } from "react"; import LinkPageLayout from "screens/components/link/LinkPageLayout"; -import LinkCodePage from "screens/components/link/code/LinkCodePage"; +import LinkOverviewPage from "screens/components/link/overview/LinkOverviewPage"; -const Index = () => { - return ( - <> - - Link — Halstack Design System - - - - ); -}; +const Index = () => ( + <> + + Link — 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/link/specifications.tsx b/apps/website/pages/components/link/specifications.tsx deleted file mode 100644 index 2b0ca22e29..0000000000 --- a/apps/website/pages/components/link/specifications.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import LinkPageLayout from "screens/components/link/LinkPageLayout"; -import LinkSpecsPage from "screens/components/link/specs/LinkSpecsPage"; - -const Specifications = () => { - return ( - <> - - Link Specs — Halstack Design System - - - - ); -}; - -Specifications.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Specifications; diff --git a/apps/website/pages/components/link/usage.tsx b/apps/website/pages/components/link/usage.tsx deleted file mode 100644 index 4e2a3786c6..0000000000 --- a/apps/website/pages/components/link/usage.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import LinkPageLayout from "screens/components/link/LinkPageLayout"; -import LinkUsagePage from "screens/components/link/usage/LinkUsagePage"; - -const Index = () => { - return ( - <> - - Link usage — Halstack Design System - - - - ); -}; - -Index.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Index; diff --git a/apps/website/screens/components/link/LinkPageLayout.tsx b/apps/website/screens/components/link/LinkPageLayout.tsx index 3a2c17a655..d2d2573222 100644 --- a/apps/website/screens/components/link/LinkPageLayout.tsx +++ b/apps/website/screens/components/link/LinkPageLayout.tsx @@ -6,9 +6,8 @@ import { ReactNode } from "react"; const LinkPageHeading = ({ children }: { children: ReactNode }) => { const tabs = [ - { label: "Code", path: "/components/link" }, - { label: "Usage", path: "/components/link/usage" }, - { label: "Specifications", path: "/components/link/specifications" }, + { label: "Overview", path: "/components/link" }, + { label: "Code", path: "/components/link/code" }, ]; return ( @@ -17,8 +16,9 @@ const LinkPageHeading = ({ children }: { children: ReactNode }) => { - Links are used as navigational elements. They may appear isolated, inside a sentence or paragraph or - following the content. + Links serve as navigational elements, allowing users to move between pages or access related content. They + can appear independently, be embedded within text, or follow a section to provide additional information or + actions. diff --git a/apps/website/screens/components/link/overview/LinkOverviewPage.tsx b/apps/website/screens/components/link/overview/LinkOverviewPage.tsx new file mode 100644 index 0000000000..a11e873f3a --- /dev/null +++ b/apps/website/screens/components/link/overview/LinkOverviewPage.tsx @@ -0,0 +1,87 @@ +import { DxcLink, DxcBulletedList, DxcFlex, DxcTable, DxcParagraph } 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 Code from "@/common/Code"; +import linkAnatomy from "./images/link-anatomy.png"; + +const sections = [ + { + title: "Introduction", + content: ( + + Links are essential interactive elements that enable users to navigate between pages, access external resources, + or explore related content. They can be placed within text, used as standalone elements, or positioned after + sections to provide additional actions or information. Links enhance usability by clearly indicating their + purpose and destination, ensuring a seamless and intuitive browsing experience. Proper usage of links helps + maintain accessibility and improves content discoverability across digital products. + + ), + }, + { + title: "Anatomy", + content: ( + <> + Link's anatomy + + + Icon: an optional visual element that can be used to represent more graphically the purpose + of the link. It can be placed before or after the link it’s representing. + + + Label: displays the textual content of the link, conveying where exactly it’s going to + navigate the component. + + + + ), + }, + { + title: "Best practices", + content: ( + <> + + + Use clear and descriptive labels: link labels should clearly indicate what users can expect + when they click. Avoid generic labels like "click here". + + + Indicate external links appropriately: If a link directs users to an external site or opens + a new tab, provide an appropiate icon to set expectations. + + + Avoid excessive linking: too many links within a paragraph can overwhelm users and make + content harder to read. Use links strategically. + + + Prioritize vertical stacking: for better readability and usability, stack checkboxes + vertically, especially when dealing with multiple options. Horizontal stacking should be reserved for short + lists with clear, non-wrapping labels. + + + Use appropriate link placement: position links logically within content, either integrated + into sentences or placed at the end of a section for additional navigation. + + + Differentiate links from buttons: links are primarily for navigation, while buttons trigger + actions like form submissions or modal openings. Use each element correctly. + + + + ), + }, +]; + +const LinkOverviewPage = () => { + return ( + + + + + + + ); +}; + +export default LinkOverviewPage; diff --git a/apps/website/screens/components/link/overview/images/link-anatomy.png b/apps/website/screens/components/link/overview/images/link-anatomy.png new file mode 100644 index 0000000000000000000000000000000000000000..05bfb822cf2b3fcfef98f09afd35bb22843e135a GIT binary patch literal 11245 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 - Link design specifications - - ), - }, - { - title: "States", - content: ( - <> - - States: enabled, hover, focus, active,{" "} - visited and disabled. - -
- Link states -
- - ), - }, - { - title: "Design tokens", - subSections: [ - { - title: "Color", - content: ( - - - - Component token - Element - Core token - Value - - - - - - fontColor - - Label - - color-blue-800 - - #0067b3 - - - - hoverFontColor - - Label:hover - - color-blue-800 - - #0067b3 - - - - activeFontColor - - Label:active - - color-black - - #000000 - - - - disabledFontColor - - Label:disabled - - color-grey-500 - - #999999 - - - - visitedFontColor - - Label:visited - - color-purple-700 - - #5f249f - - - - hoverUnderlineColor - - Underline:hover - - color-blue-800 - - #0067b3 - - - - activeUnderlineColor - - Underline:active - - color-black - - #000000 - - - - visitedUnderlineColor - - Underline:visited - - color-purple-700 - - #5f249f - - - - focusColor - - Outline:focus - - color-blue-600 - - #0095ff - - - - ), - }, - { - title: "Margin", - content: ( - - - - Margin - Value - - - - - - xxsmall - - 6px - - - - xsmall - - 16px - - - - small - - 24px - - - - medium - - 36px - - - - large - - 48px - - - - xlarge - - 64px - - - - xxlarge - - 100px - - - - ), - }, - { - title: "Typography", - content: ( - - - - Property - Value - - - - - - font-size - - 1rem/16px - - - - font-weight - - 400 - - - - ), - }, - { - title: "Border", - content: ( - - - - Property - Element - Core token - Value - - - - - - border-bottom-width - - Link container:hover - - border-width-1 - - 1px - - - - border-style - - Link container:hover - - border-style-solid - - solid - - - - ), - }, - ], - }, - { - title: "Icon specs", - content: ( - - - - Property - Element - Value - - - - - - height/width - - icon - 16/16px - - - - padding-left - - icon - 4px - - - - ), - }, - { - title: "Accessibility", - subSections: [ - { - title: "WCAG 2.2", - content: ( - - - Understanding WCAG 2.2 -{" "} - - 2.4.9: Link Purpose (Link Only) - - - - Understanding WCAG 2.2 -{" "} - - 2.4.4: Link Purpose (In Context) - - - - ), - }, - { - title: "WAI-ARIA 1.2", - content: ( - - - WAI-ARIA authoring practices 1.2 -{" "} - - 3.13 Link - - - - ), - }, - ], - }, -]; - -const LinkSpecsPage = () => { - return ( - - - - - - - ); -}; - -export default LinkSpecsPage; diff --git a/apps/website/screens/components/link/specs/images/link_specs.png b/apps/website/screens/components/link/specs/images/link_specs.png deleted file mode 100644 index a243ef924eb76305bcb2de450553ba663e81ba82..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 8764 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 NElh1ps{izQ{6FpwJ1PJG diff --git a/apps/website/screens/components/link/usage/LinkUsagePage.tsx b/apps/website/screens/components/link/usage/LinkUsagePage.tsx deleted file mode 100644 index e063d00bfe..0000000000 --- a/apps/website/screens/components/link/usage/LinkUsagePage.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react"; -import DocFooter from "@/common/DocFooter"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import iconUsage from "./examples/iconUsage"; -import Example from "@/common/example/Example"; - -const sections = [ - { - title: "Usage", - content: ( - - Provide visual cue to suggest clickability for all types of links. - Distinguish the visited and unvisited for navigation links. - Clearly explain where the link will take you to. - Front-load the most relevant keyword. - - ), - }, - { - title: "Icon usage", - content: ( - <> - - An icon can be used either in the normal or underlined mode to represent more graphical the purpose of the - link, placing the icon before or after the link that is representing. - - - - ), - }, -]; - -const LinkUsagePage = () => { - return ( - - - - - - - ); -}; - -export default LinkUsagePage; diff --git a/apps/website/screens/components/link/usage/examples/iconUsage.ts b/apps/website/screens/components/link/usage/examples/iconUsage.ts deleted file mode 100644 index fb34b0faa0..0000000000 --- a/apps/website/screens/components/link/usage/examples/iconUsage.ts +++ /dev/null @@ -1,57 +0,0 @@ -import { DxcLink, DxcFlex, DxcInset } from "@dxc-technology/halstack-react"; - -const code = `() => { - const icon = ( - - - - - ); - - return ( - - - - - Link - - - Link - - - Link - - - - - Link - - - Link - - - Link - - - - - ); -}`; - -const scope = { - DxcLink, - DxcFlex, - DxcInset, -}; - -export default { code, scope }; diff --git a/apps/website/screens/components/link/usage/images/link_states_icon.png b/apps/website/screens/components/link/usage/images/link_states_icon.png deleted file mode 100644 index 9f3a76808c1f7792620cb7f3343bdef48a12da43..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 18642 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 diff --git a/packages/lib/src/link/Link.stories.tsx b/packages/lib/src/link/Link.stories.tsx index 62e9542fbf..cb5f0b386c 100644 --- a/packages/lib/src/link/Link.stories.tsx +++ b/packages/lib/src/link/Link.stories.tsx @@ -57,7 +57,9 @@ const Link = () => ( - This is a <DxcLink inheritColor>Test</DxcLink>. + <span style={{ color: "#fabada" }}> + This is a <DxcLink inheritColor>Test</DxcLink>. + </span> </ExampleContainer> <ExampleContainer pseudoState="pseudo-focus"> <Title title="With brackets and focus" theme="light" level={4} /> @@ -192,7 +194,6 @@ const Link = () => ( Test </DxcLink> </ExampleContainer> - <Title title="Opinionated theme" theme="light" level={2} /> </> ); diff --git a/packages/lib/src/link/Link.tsx b/packages/lib/src/link/Link.tsx index cda3ac5b68..9c56afa8b3 100644 --- a/packages/lib/src/link/Link.tsx +++ b/packages/lib/src/link/Link.tsx @@ -23,11 +23,11 @@ const StyledLink = styled.a<{ props.margin && typeof props.margin === "object" && props.margin.left ? spaces[props.margin.left] : ""}; background: none; border: none; - border-radius: 4px; + border-radius: var(--spacing-gap-xs); width: fit-content; - font-family: var(--font-family-sans); - font-size: var(--font-size-14); - font-weight: var(--font-weight-regular); + font-family: var(--typography-font-family); + font-size: var(--typography-link-m); + font-weight: var(--typography-link-regular); text-decoration: none; color: ${(props) => props.inheritColor @@ -39,10 +39,7 @@ const StyledLink = styled.a<{ ${(props) => (props.disabled ? "pointer-events: none;" : "")} &:visited { - color: ${(props) => (!props.inheritColor && !props.disabled ? "var(--color-fg-neutral-medium)" : "")}; - & > span:hover { - ${(props) => `color: ${props.theme.visitedFontColor};`} - } + color: ${(props) => (!props.inheritColor && !props.disabled ? "var(--color-fg-primary-strong)" : "")}; } &:focus { outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); @@ -55,7 +52,6 @@ const LinkContainer = styled.span<{ iconPosition: LinkProps["iconPosition"]; inheritColor: LinkProps["inheritColor"]; }>` - border-bottom: transparent; display: inline-flex; align-items: center; ${(props) => (props.iconPosition === "before" ? "flex-direction: row-reverse;" : "")} From e91781d61aa375b249538fb6816544836ef3186f Mon Sep 17 00:00:00 2001 From: Jialecl <jialestrabajos@gmail.com> Date: Tue, 8 Apr 2025 13:00:50 +0200 Subject: [PATCH 3/4] Fied documentation errors --- .../components/link/code/LinkCodePage.tsx | 63 +++++++++---------- .../link/overview/LinkOverviewPage.tsx | 19 +++--- 2 files changed, 38 insertions(+), 44 deletions(-) diff --git a/apps/website/screens/components/link/code/LinkCodePage.tsx b/apps/website/screens/components/link/code/LinkCodePage.tsx index 3c3cfefd01..5d4de67884 100644 --- a/apps/website/screens/components/link/code/LinkCodePage.tsx +++ b/apps/website/screens/components/link/code/LinkCodePage.tsx @@ -27,25 +27,36 @@ const sections = [ </thead> <tbody> <tr> - <td>disabled</td> <td> - <TableCode>boolean</TableCode> + <DxcFlex direction="column" gap="0.25rem" alignItems="baseline"> + <StatusBadge status="required" /> + children + </DxcFlex> </td> - <td>If true, the link is disabled.</td> <td> - <TableCode>false</TableCode> + <TableCode>string</TableCode> </td> + <td>Text of the link.</td> + <td>-</td> </tr> <tr> - <td>inheritColor</td> + <td>disabled</td> <td> <TableCode>boolean</TableCode> </td> - <td>If true, the color is inherited from parent.</td> + <td>If true, the link is disabled.</td> <td> <TableCode>false</TableCode> </td> </tr> + <tr> + <td>href</td> + <td> + <TableCode>string</TableCode> + </td> + <td>Page to be opened when the user clicks on the link.</td> + <td>-</td> + </tr> <tr> <td>icon</td> <td> @@ -59,7 +70,6 @@ const sections = [ replace spaces with underscores. By default they are outlined if you want it to be filled prefix the symbol name with <TableCode>"filled_"</TableCode>. </td> - <td>-</td> </tr> <tr> @@ -73,55 +83,44 @@ const sections = [ </td> </tr> <tr> - <td>href</td> - <td> - <TableCode>string</TableCode> - </td> - <td>Page to be opened when the user clicks on the link.</td> - <td>-</td> - </tr> - <tr> - <td>newWindow</td> + <td>inheritColor</td> <td> <TableCode>boolean</TableCode> </td> - <td>If true, the page is opened in a new browser tab.</td> + <td>If true, the color is inherited from parent.</td> <td> <TableCode>false</TableCode> </td> </tr> <tr> - <td>onClick</td> + <td>margin</td> <td> - <TableCode>{"() => void"}</TableCode> + <TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin</TableCode> </td> <td> - If defined, the link will be displayed as a button. This function will be called when the user clicks the - link. + Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and + 'right' properties in order to specify different margin sizes. </td> <td>-</td> </tr> <tr> + <td>newWindow</td> <td> - <DxcFlex direction="column" gap="0.25rem" alignItems="baseline"> - <StatusBadge status="required" /> - children - </DxcFlex> + <TableCode>boolean</TableCode> </td> + <td>If true, the page is opened in a new browser tab.</td> <td> - <TableCode>string</TableCode> + <TableCode>false</TableCode> </td> - <td>Text of the link.</td> - <td>-</td> </tr> <tr> - <td>margin</td> + <td>onClick</td> <td> - <TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin</TableCode> + <TableCode>{"() => void"}</TableCode> </td> <td> - Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and - 'right' properties in order to specify different margin sizes. + If defined, the link will be displayed as a button. This function will be called when the user clicks the + link. </td> <td>-</td> </tr> diff --git a/apps/website/screens/components/link/overview/LinkOverviewPage.tsx b/apps/website/screens/components/link/overview/LinkOverviewPage.tsx index a11e873f3a..3fa9afb5b8 100644 --- a/apps/website/screens/components/link/overview/LinkOverviewPage.tsx +++ b/apps/website/screens/components/link/overview/LinkOverviewPage.tsx @@ -11,11 +11,11 @@ const sections = [ title: "Introduction", content: ( <DxcParagraph> - Links are essential interactive elements that enable users to navigate between pages, access external resources, - or explore related content. They can be placed within text, used as standalone elements, or positioned after - sections to provide additional actions or information. Links enhance usability by clearly indicating their - purpose and destination, ensuring a seamless and intuitive browsing experience. Proper usage of links helps - maintain accessibility and improves content discoverability across digital products. + Links are essential interactive elements that enable users to <strong>navigate</strong> between pages, access + external resources, or explore related content. They can be placed within text, used as standalone elements, or + positioned after sections to provide additional actions or information. Links enhance usability by clearly + indicating their purpose and destination, ensuring a seamless and intuitive browsing experience. Proper usage of + links helps maintain accessibility and improves content discoverability across digital products. </DxcParagraph> ), }, @@ -44,21 +44,16 @@ const sections = [ <DxcBulletedList> <DxcBulletedList.Item> <strong>Use clear and descriptive labels:</strong> link labels should clearly indicate what users can expect - when they click. Avoid generic labels like "click here". + when they click. Avoid generic labels like <em>"click here"</em>. </DxcBulletedList.Item> <DxcBulletedList.Item> <strong>Indicate external links appropriately:</strong> If a link directs users to an external site or opens - a new tab, provide an appropiate icon to set expectations. + a new tab, provide an appropriate icon to set expectations. </DxcBulletedList.Item> <DxcBulletedList.Item> <strong>Avoid excessive linking:</strong> too many links within a paragraph can overwhelm users and make content harder to read. Use links strategically. </DxcBulletedList.Item> - <DxcBulletedList.Item> - <strong>Prioritize vertical stacking:</strong> for better readability and usability, stack checkboxes - vertically, especially when dealing with multiple options. Horizontal stacking should be reserved for short - lists with clear, non-wrapping labels. - </DxcBulletedList.Item> <DxcBulletedList.Item> <strong>Use appropriate link placement:</strong> position links logically within content, either integrated into sentences or placed at the end of a section for additional navigation. From ed6051f6d6a38878751b61f9bc5d5db7a91ac63e Mon Sep 17 00:00:00 2001 From: Jialecl <jialestrabajos@gmail.com> Date: Wed, 9 Apr 2025 11:00:05 +0200 Subject: [PATCH 4/4] single tag for quicknav --- .../screens/components/link/overview/LinkOverviewPage.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/apps/website/screens/components/link/overview/LinkOverviewPage.tsx b/apps/website/screens/components/link/overview/LinkOverviewPage.tsx index 3fa9afb5b8..8e062fd01a 100644 --- a/apps/website/screens/components/link/overview/LinkOverviewPage.tsx +++ b/apps/website/screens/components/link/overview/LinkOverviewPage.tsx @@ -3,7 +3,6 @@ import DocFooter from "@/common/DocFooter"; import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import Image from "@/common/Image"; -import Code from "@/common/Code"; import linkAnatomy from "./images/link-anatomy.png"; const sections = [ @@ -72,7 +71,7 @@ const LinkOverviewPage = () => { return ( <DxcFlex direction="column" gap="4rem"> <QuickNavContainerLayout> - <QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer> + <QuickNavContainer sections={sections} startHeadingLevel={2} /> </QuickNavContainerLayout> <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/link/overview/LinkOverviewPage.tsx" /> </DxcFlex>