From 6da80b32374dbb93be31575a6ecacce254671102 Mon Sep 17 00:00:00 2001 From: jialecl Date: Thu, 29 Oct 2026 16:32:07 +0100 Subject: [PATCH 1/8] New button link component --- .../src/button-link/ButtonLink.stories.tsx | 45 ++++++++ .../lib/src/button-link/ButtonLink.test.tsx | 33 ++++++ packages/lib/src/button-link/ButtonLink.tsx | 82 ++++++++++++++ packages/lib/src/button-link/types.ts | 57 ++++++++++ packages/lib/src/button-link/utils.ts | 101 ++++++++++++++++++ packages/lib/src/button/utils.ts | 2 +- 6 files changed, 319 insertions(+), 1 deletion(-) create mode 100644 packages/lib/src/button-link/ButtonLink.stories.tsx create mode 100644 packages/lib/src/button-link/ButtonLink.test.tsx create mode 100644 packages/lib/src/button-link/ButtonLink.tsx create mode 100644 packages/lib/src/button-link/types.ts create mode 100644 packages/lib/src/button-link/utils.ts diff --git a/packages/lib/src/button-link/ButtonLink.stories.tsx b/packages/lib/src/button-link/ButtonLink.stories.tsx new file mode 100644 index 000000000..c9c02027a --- /dev/null +++ b/packages/lib/src/button-link/ButtonLink.stories.tsx @@ -0,0 +1,45 @@ +import Title from "../../.storybook/components/Title"; +import ExampleContainer from "../../.storybook/components/ExampleContainer"; +import { Meta, StoryObj } from "@storybook/react-vite"; + +import DxcButtonLink from "./ButtonLink"; +import DxcFlex from "../flex/Flex"; + +export default { + title: "Button Link", + component: DxcButtonLink, +} satisfies Meta; + +const ButtonLink = () => ( + <> + + <ExampleContainer> + <DxcFlex gap="1rem"> + <DxcButtonLink label="Button Link" href="#not-visited" /> + <DxcButtonLink label="Button Link" href="#not-visited" mode="secondary" /> + <DxcButtonLink label="Button Link" href="#not-visited" mode="tertiary" /> + </DxcFlex> + </ExampleContainer> + <Title title="Visited" theme="light" level={4} /> + <ExampleContainer pseudoState={["pseudo-visited"]}> + <DxcFlex gap="1rem"> + <DxcButtonLink label="Button Link" href="https://example.com" /> + <DxcButtonLink label="Button Link" href="https://example.com" mode="secondary" /> + <DxcButtonLink label="Button Link" href="https://example.com" mode="tertiary" /> + </DxcFlex> + </ExampleContainer> + <Title title="Disabled" theme="light" level={4} /> + <ExampleContainer> + <DxcFlex gap="1rem"> + <DxcButtonLink label="Button Link" href="https://example.com" disabled /> + <DxcButtonLink label="Button Link" href="https://example.com" mode="secondary" disabled /> + <DxcButtonLink label="Button Link" href="https://example.com" mode="tertiary" disabled /> + </DxcFlex> + </ExampleContainer> + </> +); + +type Story = StoryObj<typeof DxcButtonLink>; +export const Chromatic: Story = { + render: ButtonLink, +}; diff --git a/packages/lib/src/button-link/ButtonLink.test.tsx b/packages/lib/src/button-link/ButtonLink.test.tsx new file mode 100644 index 000000000..be7a8f633 --- /dev/null +++ b/packages/lib/src/button-link/ButtonLink.test.tsx @@ -0,0 +1,33 @@ +import "@testing-library/jest-dom"; +import { render } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import DxcButtonLink from "./ButtonLink"; + +describe("ButtonLink component tests", () => { + test("Calls correct function on click", async () => { + const onClick = jest.fn(); + const { getByText, getByRole } = render(<DxcButtonLink label="Button Link" href="#" onClick={onClick} />); + const buttonLink = getByText("Button Link"); + await userEvent.click(buttonLink); + expect(onClick).toHaveBeenCalled(); + expect(getByRole("button")).toBeTruthy(); + }); + test("Check button Link href and role attributes", () => { + const { getByRole } = render(<DxcButtonLink label="Button Link" href="www.test.com" />); + expect(getByRole("link")).toBeTruthy(); + expect(getByRole("link")).toHaveAttribute("href", "www.test.com"); + }); + test("Href works as a disabled button", () => { + const { getByRole } = render(<DxcButtonLink label="Button Link" href="www.test.com" disabled />); + const buttonLink = getByRole("link"); + expect(buttonLink).not.toHaveAttribute("href"); + expect(buttonLink).toHaveAttribute("aria-disabled", "true"); + }); + test("ButtonLink onClick does not fire when disabled", async () => { + const onClick = jest.fn(); + const { getByText } = render(<DxcButtonLink label="Button Link" href="#" onClick={onClick} disabled />); + const buttonLink = getByText("Button Link"); + await userEvent.click(buttonLink); + expect(onClick).not.toHaveBeenCalled(); + }); +}); diff --git a/packages/lib/src/button-link/ButtonLink.tsx b/packages/lib/src/button-link/ButtonLink.tsx new file mode 100644 index 000000000..1d0f2edee --- /dev/null +++ b/packages/lib/src/button-link/ButtonLink.tsx @@ -0,0 +1,82 @@ +import styled from "@emotion/styled"; +import DxcIcon from "../icon/Icon"; +import ButtonLinkProps from "./types"; +import type { ButtonMode, ButtonSize } from "../button/types"; +import { getHeight, widths } from "../button/utils"; +import { getButtonLinkStyles } from "./utils"; +import { Tooltip } from "../tooltip/Tooltip"; + +const ButtonLink = styled.a<{ + iconPosition: ButtonLinkProps["iconPosition"]; + disabled: ButtonLinkProps["disabled"]; + size: ButtonSize; + $mode: ButtonMode; + iconOnly: boolean; +}>` + cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")}; + text-decoration: none; + display: inline-flex; + align-items: center; + justify-content: center; + flex-direction: ${({ iconPosition }) => (iconPosition === "after" ? "row" : "row-reverse")}; + gap: ${({ size }) => + size.height === "medium" || size.height === "small" ? "var(--spacing-gap-xs)" : "var(--spacing-gap-s)"}; + height: ${({ size }) => getHeight(size.height)}; + width: ${(props) => (props.size.width ? widths[props.size?.width] : "fit-content")}; + + ${(props) => getButtonLinkStyles(props.disabled, props.$mode, props.size)}; + ${({ size, iconOnly }) => { + switch (size.height) { + case "small": + return `padding: var(--spacing-padding-none) var(${iconOnly ? "--spacing-padding-xxs" : "--spacing-padding-xs"});`; + case "medium": + return "padding: var(--spacing-padding-none) var(--spacing-padding-xs)"; + case "large": + return `padding: var(--spacing-padding-none) var(${iconOnly ? "--spacing-padding-xs" : "--spacing-padding-m"});`; + default: + return `padding: var(--spacing-padding-none) var(${iconOnly ? "--spacing-padding-xs" : "--spacing-padding-m"});`; + } + }}; +`; + +const DxcButtonLink = ({ + disabled, + href, + icon, + iconPosition = "before", + label, + mode = "primary", + newWindow, + onClick, + size = { height: "large", width: "fitContent" }, + tabIndex = 0, + title, + ref, + ...otherProps +}: ButtonLinkProps) => ( + <Tooltip label={!disabled ? title : undefined}> + <ButtonLink + role={onClick ? "button" : "link"} + tabIndex={!disabled ? tabIndex : -1} + onClick={!disabled ? onClick : undefined} + href={!disabled && href ? href : undefined} + target={href ? (newWindow ? "_blank" : "_self") : undefined} + aria-disabled={disabled} + aria-label={label || title} + disabled={disabled} + $mode={mode} + size={size} + iconPosition={iconPosition} + iconOnly={!label && !!icon} + ref={ref} + {...otherProps} + > + {label} + {icon && <span>{typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}</span>} + </ButtonLink> + </Tooltip> +); + +DxcButtonLink.displayName = "DxcButtonLink"; + +export default DxcButtonLink; diff --git a/packages/lib/src/button-link/types.ts b/packages/lib/src/button-link/types.ts new file mode 100644 index 000000000..36f7309fc --- /dev/null +++ b/packages/lib/src/button-link/types.ts @@ -0,0 +1,57 @@ +import { SVG } from "../common/types"; +import type { ButtonMode, ButtonSize } from "../button/types"; + +export type ButtonLinkProps = { + /** + * If true, the link will be disabled. + */ + disabled?: boolean; + /** + * Page to be opened when the user clicks on the link. + */ + href: string; + /** + * Material Symbol name or SVG element as the icon that will be placed next to the link text. + */ + icon?: string | SVG; + /** + * Indicates the position of the icon in the component. + */ + iconPosition?: "before" | "after"; + /** + * Text to be placed in the button link. + */ + label?: string; + /** + * The available button link modes. + */ + mode?: ButtonMode; + /** + * If true, the page is opened in a new browser tab. + */ + newWindow?: boolean; + /** + * If defined, the link will be displayed as a button. This + * function will be called when the user clicks the link. + */ + onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void; + /** + * Ref of the link element. + */ + ref?: React.Ref<HTMLAnchorElement>; + /** + * Size of the component. + */ + size?: ButtonSize; + /** + * Value of the tabindex. + */ + tabIndex?: number; + /** + * Text to be displayed as a tooltip when hovering over the link. + * If there is no label, the title will be used as the aria-label. + */ + title?: string; +}; + +export type { ButtonLinkProps as default }; diff --git a/packages/lib/src/button-link/utils.ts b/packages/lib/src/button-link/utils.ts new file mode 100644 index 000000000..a8db82dae --- /dev/null +++ b/packages/lib/src/button-link/utils.ts @@ -0,0 +1,101 @@ +import type { ButtonMode, ButtonSize } from "../button/types"; + +export const getButtonLinkStyles = (disabled: boolean | undefined, mode: ButtonMode, size: ButtonSize) => { + const commonStyles = ` + font-family: var(--typography-font-family); + font-size: var(${size.height === "medium" || size.height === "small" ? "--typography-label-m" : "--typography-label-l"}); + font-weight: var(--typography-label-semibold); + border: var(--border-width-none) var(--border-style-default) transparent; + border-radius: var(--border-radius-s); + ${ + !disabled + ? `&:focus { + outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark); + outline-offset: -2px; + }` + : "" + } + `; + + if (mode === "primary") { + if (disabled) { + return `${commonStyles} + color: var(--color-fg-primary-light); + background-color: var(--color-bg-primary-lightest);`; + } + + return `${commonStyles} + color: var(--color-fg-neutral-bright); + background-color: var(--color-bg-primary-stronger); + &:hover { + background-color: var(--color-bg-primary-strongest); + } + &:active { + background-color: var(--color-bg-primary-strongest); + } + &:visited { + background-color: var(--color-bg-primary-strongest); + } + &:visited:hover, + &:visited:active { + background-color: var(--color-bg-primary-stronger); + }`; + } + + if (mode === "secondary") { + if (disabled) { + return `${commonStyles} + background-color: transparent; + border: var(--border-width-s) var(--border-style-default) var(--border-color-primary-lighter); + color: var(--color-fg-primary-light);`; + } + + return `${commonStyles} + background-color: transparent; + border: var(--border-width-s) var(--border-style-default) var(--border-color-primary-stronger); + color: var(--color-fg-primary-stronger); + &:hover { + background-color: var(--color-bg-primary-stronger); + color: var(--color-fg-neutral-bright); + } + &:active { + border-color: transparent; + background-color: var(--color-bg-primary-stronger); + color: var(--color-fg-neutral-bright); + } + &:visited { + border-color: var(--border-color-primary-stronger); + color: var(--color-fg-primary-strongest); + } + &:visited:hover, + &:visited:active { + background-color: var(--color-bg-primary-stronger); + color: var(--color-fg-neutral-bright); + }`; + } + + if (disabled) { + return `${commonStyles} + background-color: transparent; + color: var(--color-fg-primary-light);`; + } + + return `${commonStyles} + background-color: transparent; + color: var(--color-fg-primary-stronger); + &:hover { + background-color: var(--color-bg-primary-lighter); + } + &:active { + border-color: transparent; + background-color: var(--color-bg-primary-light); + } + &:visited { + color: var(--color-fg-primary-strongest); + } + &:visited:hover, + &:visited:active { + background-color: var(--color-bg-primary-lighter); + color: var(--color-fg-primary-strongest); + }`; +}; diff --git a/packages/lib/src/button/utils.ts b/packages/lib/src/button/utils.ts index eb456be40..a25c684bb 100644 --- a/packages/lib/src/button/utils.ts +++ b/packages/lib/src/button/utils.ts @@ -203,7 +203,7 @@ export const getButtonStyles = ( } }; -const widths = { +export const widths = { small: "42px", medium: "120px", large: "240px", From 9854411f7a69a41987a5efe23c470bf1a7711e4e Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso <pfelguerosogalguera@gmail.com> Date: Tue, 3 Nov 2026 16:19:53 +0100 Subject: [PATCH 2/8] first documentation approach --- .../pages/components/button-link/code.tsx | 17 ++ .../pages/components/button-link/index.tsx | 17 ++ .../screens/common/componentsList.json | 6 + .../button-link/ButtonLinkPageLayout.tsx | 31 +++ .../button-link/code/ButtonLinkCodePage.tsx | 187 +++++++++++++++ .../overview/ButtonLinkOverviewPage.tsx | 226 ++++++++++++++++++ .../overview/images/button_link_anatomy.png | Bin 0 -> 14088 bytes 7 files changed, 484 insertions(+) create mode 100644 apps/website/pages/components/button-link/code.tsx create mode 100644 apps/website/pages/components/button-link/index.tsx create mode 100644 apps/website/screens/components/button-link/ButtonLinkPageLayout.tsx create mode 100644 apps/website/screens/components/button-link/code/ButtonLinkCodePage.tsx create mode 100644 apps/website/screens/components/button-link/overview/ButtonLinkOverviewPage.tsx create mode 100644 apps/website/screens/components/button-link/overview/images/button_link_anatomy.png diff --git a/apps/website/pages/components/button-link/code.tsx b/apps/website/pages/components/button-link/code.tsx new file mode 100644 index 000000000..616b037b9 --- /dev/null +++ b/apps/website/pages/components/button-link/code.tsx @@ -0,0 +1,17 @@ +import Head from "next/head"; +import type { ReactElement } from "react"; +import ButtonLinkPageLayout from "screens/components/button-link/ButtonLinkPageLayout"; +import ButtonLinkCodePage from "screens/components/button-link/code/ButtonLinkCodePage"; + +const Code = () => ( + <> + <Head> + <title>Button Link code — Halstack Design System + + + +); + +Code.getLayout = (page: ReactElement) => {page}; + +export default Code; diff --git a/apps/website/pages/components/button-link/index.tsx b/apps/website/pages/components/button-link/index.tsx new file mode 100644 index 000000000..ddf350fe6 --- /dev/null +++ b/apps/website/pages/components/button-link/index.tsx @@ -0,0 +1,17 @@ +import Head from "next/head"; +import type { ReactElement } from "react"; +import ButtonLinkPageLayout from "screens/components/button-link/ButtonLinkPageLayout"; +import ButtonLinkOverviewPage from "screens/components/button-link/overview/ButtonLinkOverviewPage"; + +const Index = () => ( + <> + + Button Link — Halstack Design System + + + +); + +Index.getLayout = (page: ReactElement) => {page}; + +export default Index; diff --git a/apps/website/screens/common/componentsList.json b/apps/website/screens/common/componentsList.json index 818d91ffb..369a2a6cc 100644 --- a/apps/website/screens/common/componentsList.json +++ b/apps/website/screens/common/componentsList.json @@ -123,6 +123,12 @@ "status": "stable", "icon": "smart_button" }, + { + "label": "Button link", + "path": "/components/button-link", + "status": "stable", + "icon": "smart_button" + }, { "label": "Checkbox", "path": "/components/checkbox", diff --git a/apps/website/screens/components/button-link/ButtonLinkPageLayout.tsx b/apps/website/screens/components/button-link/ButtonLinkPageLayout.tsx new file mode 100644 index 000000000..5b1690b30 --- /dev/null +++ b/apps/website/screens/components/button-link/ButtonLinkPageLayout.tsx @@ -0,0 +1,31 @@ +import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react"; +import PageHeading from "@/common/PageHeading"; +import TabsPageHeading from "@/common/TabsPageLayout"; +import ComponentHeading from "@/common/ComponentHeading"; +import { ReactNode } from "react"; + +const ButtonLinkPageHeading = ({ children }: { children: ReactNode }) => { + const tabs = [ + { label: "Overview", path: "/components/button-link" }, + { label: "Code", path: "/components/button-link/code" }, + ]; + + return ( + + + + + + Button link is a navigation element that combines the visual appearance of a button with the native behavior + and semantics of a link. It allows users to navigate to another page, resource, or destination through a + more prominent, button-like interface. + + + + + {children} + + ); +}; + +export default ButtonLinkPageHeading; diff --git a/apps/website/screens/components/button-link/code/ButtonLinkCodePage.tsx b/apps/website/screens/components/button-link/code/ButtonLinkCodePage.tsx new file mode 100644 index 000000000..c4267576c --- /dev/null +++ b/apps/website/screens/components/button-link/code/ButtonLinkCodePage.tsx @@ -0,0 +1,187 @@ +import { DxcFlex, DxcLink, DxcTable } from "@dxc-technology/halstack-react"; +import DocFooter from "@/common/DocFooter"; +import QuickNavContainer from "@/common/QuickNavContainer"; +import Code, { TableCode } from "@/common/Code"; +import StatusBadge from "@/common/StatusBadge"; + +const sections = [ + { + title: "Props", + content: ( + + + + Name + Type + Description + Default + + + + + disabled + + boolean + + If true, the link will be disabled. + + false + + + + + + + href + + + + string + + Page to be opened when the user clicks on the link. + - + + + icon + + string | {"(React.ReactNode & React.SVGProps )"} + + + + Material Symbol + {" "} + name or SVG element as the icon that will be placed next to the link text. When using Material Symbols, + replace spaces with underscores. By default they are outlined if you want it to be filled prefix the + symbol name with "filled_". + + - + + + iconPosition + + 'before' | 'after' + + Indicates the position of the icon in the component. + + 'before' + + + + label + + string + + Text to be placed in the button link. + - + + + mode + + 'primary' | 'secondary' | 'tertiary' + + The available button link modes. + + 'primary' + + + + newWindow + + boolean + + If true, the page is opened in a new browser tab. + + false + + + + onClick + + {"(event: React.MouseEvent) => void"} + + + If defined, the link will be displayed as a button. This function will be called when the user clicks the + link. + + - + + + ref + + {"React.Ref"} + + Ref of the link element. + - + + + size + + + { + "{ height: 'small' | 'medium' | 'large'; width: 'small' | 'medium' | 'large' | 'fillParent' | 'fitContent' }" + } + + + Object used to define the dimensions of the button in terms of height and width. + + {"{ height: 'large'; width: 'fitContent' }"} + + + + tabIndex + + number + + + Value of the tabindex attribute. + + + 0 + + + + title + + string + + + Text to be displayed as a tooltip when hovering over the link. If there is no label, the title will be + used as the aria-label. + + - + + + + ), + }, + // { + // title: "Examples", + // subSections: [ + // { + // title: "Basic usage", + // content: , + // }, + // { + // title: "Icons", + // content: , + // }, + // { + // title: "Semantic", + // content: , + // }, + // { + // title: "Size", + // content: , + // }, + // ], + // }, +]; + +const ButtonLinkCodePage = () => ( + + + + +); + +export default ButtonLinkCodePage; diff --git a/apps/website/screens/components/button-link/overview/ButtonLinkOverviewPage.tsx b/apps/website/screens/components/button-link/overview/ButtonLinkOverviewPage.tsx new file mode 100644 index 000000000..d097d6fa5 --- /dev/null +++ b/apps/website/screens/components/button-link/overview/ButtonLinkOverviewPage.tsx @@ -0,0 +1,226 @@ +import { DxcBulletedList, DxcFlex, DxcParagraph, DxcAlert } from "@dxc-technology/halstack-react"; +import QuickNavContainer from "@/common/QuickNavContainer"; +import DocFooter from "@/common/DocFooter"; +import Image from "@/common/Image"; +import anatomy from "./images/button_link_anatomy.png"; + +const sections = [ + { + title: "Introduction", + content: ( + <> + + The Halstack Button Link component is designed for navigation that requires more visual emphasis than a + standard text link. It provides the familiar appearance of a button while preserving the expected behavior of + a link. + + + Although buttons and links can look similar, they serve different purposes. A button triggers an action within + the current interface, while a link navigates users to another destination. Button Link bridges this visual + distinction by allowing navigation to be presented with the appearance of a button without changing its + underlying semantics. + + + ), + }, + { + title: "Anatomy", + content: ( + <> + Button link anatomy + + + Container: provides the interactive area and visual treatment inherited from the existing + Button component. + + + Icon: appears before or after the label to provide additional context or clarify the + destination. + + + Label: communicates the destination or purpose of the navigation. + + + + ), + }, + { + title: "Variants", + content: <>, + }, + { + title: "Icon usage", + content: <>, + }, + { + title: "Semantic buttons", + content: <>, + }, + { + title: "Sizes", + content: ( + <> + + The context in which a button is used often dictates its size. Halstack provides buttons in different sizes to + help create interfaces that are not only functional but also intuitive and accessible, catering to a wide + range of user needs and interaction scenarios. + + + Varying button sizes help establish a clear visual hierarchy, guiding users towards the most critical actions. + Primary actions are made more prominent with larger buttons, while secondary actions use smaller buttons to + avoid distraction. + + + + ), + subSections: [ + { + title: "Height", + subSections: [ + { + title: "Small", + content: <>, + }, + { + title: "Medium", + content: <>, + }, + { + title: "Large", + content: <>, + }, + ], + }, + ], + }, + { + title: "Best practices for button labels", + subSections: [ + { + title: "Be clear and concise", + content: ( + + + Use actionable language: Start with a verb that clearly describes the action. Examples: + "Submit", "Save" or "Delete". + + + Keep it short: Aim for one or two words. Longer text can make buttons harder to read and + understand quickly. + + + ), + }, + { + title: "Ensure clarity", + content: ( + + + Avoid ambiguity: Make sure the button's purpose is immediately clear. Avoid vague labels + like "Click here" or "Go". + + + Use specific nouns: If necessary, include a noun to provide more context. Examples: "Add + item", "View details". + + + ), + }, + { + title: "Maintain consistency", + content: ( + + + Consistent terminology: Use the same terms for similar actions across your interface to + avoid confusion. For example, always use "Submit" for form submissions. + + + Sentence case: Use sentence-style capitalization — only capitalize the first word. This + improves readability and looks more approachable. + + + ), + }, + { + title: "Focus on the user", + content: ( + + + User-centric language: Write from the user's perspective. For actions that the user + performs, consider using first-person pronouns (e.g., "My profile"). + + + Positive tone: Where possible, frame actions positively to encourage interaction. For + example, use "Continue" instead of "Next". + + + ), + }, + { + title: "Accessibility", + content: ( + + + Descriptive labels: Ensure that the button copy makes sense out of context for screen + reader users. Avoid labels like "More" without additional context. + + + Avoid jargon: Use plain language that is easily understood by all users, including those + who may not be familiar with technical terms. + + + ), + }, + { + title: "Visual hierarchy", + content: ( + + + Primary action first: Ensure the primary action stands out with a prominent position and + styling. + + + Avoid redundant text: Do not include unnecessary words that do not add value to the + action. + + + ), + }, + { + title: "Tips", + content: ( + + + Test for clarity: Show your button text to others without context to see if they + understand the action. + + + Iterate based on feedback: Be open to changing your button copy based on user feedback + and testing results. + + + Avoid punctuation: Do not use end punctuation in button labels unless absolutely + necessary. + + + ), + }, + ], + }, +]; + +const ButtonLinkOverviewPage = () => ( + + + + +); + +export default ButtonLinkOverviewPage; diff --git a/apps/website/screens/components/button-link/overview/images/button_link_anatomy.png b/apps/website/screens/components/button-link/overview/images/button_link_anatomy.png new file mode 100644 index 0000000000000000000000000000000000000000..a2356903422388992f7c6a663f3deccc92ae6925 GIT binary patch literal 14088 zcmeHuXH-*L*X~xaa6~y`^0?fFvZOd~3yX-aGCc-yP%rc<-NYxW~}Fv)A0K%r)1X&n!g! zVQRSPmtDUg2(szS>67OXWPJpJtnS#b4!rT%=9K_$!dFk*_#wy+S@>_&ne)GY2QOFo zoi{v=W&fayzOKkAcZ}D?)WQT81o_v^ zGbfK-2wpWiC>pbEDd{`Sa806lt1}I~@ewL7!Ll(m^4=Mh^_jsmg)B#}{tMUq+!iyP z=W`O7HMU(nMHq=Zs>5@f(#Y7^mx*^X+uc8nBuyH)HJt2l+j!u)qk+(2%T9+J`^{Ui z;W9;}`&F%Pw5zli+a?}*UcMaEmy{yuHXW2U5o8?{L=Ia8rU@?n0d1WhPsr(G2wXI{ zP9OjI^pgia<>2R85U7Kn`rv=2PINvF)^+tggNl<6L@nsg4pyo#=K7^{?KCWgD3Vmm zp)293SPu4M>VsZnrr>>&i#faYiUSh2U8}&& z=~pE}`Ln67Wt~xpX!A{PK?5Qq3qM|R8O~1}&CXTKPo2}=(PHy<5zmfrcLMEBCpU|N z8@tzspJUDJUhA?0AC0RjZFY%Y`OJMk4Vn;f#jSPV7T{Pu7a8o+xJf0Ia0}YG$W|d` z1gTq<_bWbnr+nP#?H$3p!E61MEfK&r9%`8$v%E`Gmt9S*##?~*$nIa{(^nx8_sg)9 z)^1h&@Zf-C-ldTjA85DHglL&ek_e!Qc&5Ax-2JQR!^`Je8;70oV=B4<-Hp)LDqmO) z#_Q;8sUWTddc|3G7X>_AghNH_En2+`K_;zT>5Kh~6k~wBG^;SOd8bao@ZL z#q=E9)_(QVl8sMGJf(5TPwCaEFQKxlv9+wq-asbtr0Q&luS0-XFkl5-W{30-Hgzr9 z`;AbG8+SIP>3;Wb#7 zPqw4ADWL9lW61Z@$a;t8S)UDa%RETSy!Ot+VNca6AgjM!TB`;|^9e2Wj=3DX*oSUr z6Km9la_kcV$m+5i61&OG?ffoH9^rQP)EAj7^1YyGJxn>2Z}9Oy%j;^pTeZ&qr*ulDeP%vX|WMq=> zO-(pj*YNsBJ#sysJ-tXo;PgZU5K4S)mVJl=l|F$b0`Q0+O*depf3omHxn{ScV>!g= zJ~XR!nvU`29h<$jJOpXPH~!#<+tF6+_hM2ZOB6-nl$3|s3)iL?10_i>`TnD&mc*wj?W>a0! zj5D<%Kf{HGBJBR|XUvgwM^XbmY!{pl@gIVtHph9Xa`EFgxBcehDUx7x_CZb4}KJXL8*v!?9{iMppJ(C! zzdm^UE8z0z?1zb=m=ZH??E)ioHk6CX801dYjs4atCA^1dMqWPMmZWm9HstH< z1A0%%0@hw@7+5AJ0yLy`k5?wb(7!~?_UO@9z*59LputxjCxov%`nEsI5uo9SLOH0+ zUA%J<5&sB>0zL-N#i&C>0Ixm5|Bm{=HPD-qw1RFYfnxjD%%gWOnBRsJZIO6-NY!??7Pq6tX2`M()KRESsi z${Vpt2qaeNduT5{a&ckP43~z&gWpk|sRJu6)n~PN?;qn^RBFoX#(cmw6dwUwy64X~ zp%vRluxF#{3{9VI=^~+bA!}?H6KVHc(d)GL`gNr*FwwPnqb%gc|l?KkNS>N z-(DaK)lQEr*DFbFbldORLVIqI_R3T@VN#vDEF;Rsm~s|yIB#MwdF^_xs%-k)tCQV# zG^%$o2_dpg{eRRJu(G5E!npfU`22-Z^;5>e^~ITIHld#8XK?ldd=z2n9}L_GhQKQ; znQyQs_nf62-OiOFbqV4xM%V?i%Yz>9!uDZ-`Ei=xB53R0)bJ(E+k$S)V|MC{o5Xg}!L+YO-n>*IXA2{!^B1EHigAU3n>|B5$F>w-of8?xpr@xcRhBG1GSmBxNyTMX zk&k|5qbQ4vs_rx2PA!`0W->#$-+V&&J5hYvW6qyZHRviGjJCu+*AS8YR`Xemia~s@ zv^Jh^N=(y!u%J#lI`&u(bDUCZ8iMo8zDB;8&DWbD-f5bcptUr&P@aZ!w$!8*jh5in zFR%^mMIJj@om)QIU0Jk*Bznz-3N89*KF+m9s||0vqz7b z)+|s*x)L3_S8B_GJUwg?Me{mss+~n_UB{J{PhK@*B*j`rVdlDG-Xr}0IzOy(mo=5M zqO@dF!Wkv%$w(17UlSh3D0ID*%_pJgz0-4IEF+=3v~}E}mwsWWa8|6u$goDW?WSV+ z{M2EIwb5kKv_wQ}v&XTL2FA*R=fq& zh@t#28sk9nS0uY~T_$mD@nnUG&7!5gRo6saM=EHwyL790-OCrp^wx*Af5NA2lt)n( zJ}czj;$d+CrfJQV&hD&TxrYkwJPGUZjKf+v?!W1NO|Ru!plUq&!7IMOZC?1>XEgOc zjx*xpQ5qeWa3Pyp{6n}i7d4F@DUq$_LI_+g5T41C(048_JaTT}u`8L?%G^-??8all{b>{XWGOZjmy163Up;e`p2{m7GhuTv6Fk% zx@&Gh-0~VGoJcDh=XMXL?fyO*P39~g8^zKW$MMzda=A^uXmw1guL(VzXcZC@8|T$L z&)k1+2E7qY(20Co>&)cCO@))D^KJYPL=j?@@36^5bT^5S~X4 z#;AbrAj{)h(X|deY=|ZEuR2b|(#mw=68XV5mp1|*SPhtt^s{swO7gPZ?vOo9pCCVZ@V=EhG|^bYmL{~8jLPc-yZ)I&9whjMy0o}&ULNtr?p?mq${!LgahUu z=@UFl>4`m8x?ah?cfhZV2bYVXpH{R~5)YE!7?t}RDZlkr%u^yOx7BD2%^R&B+Rzv9 zCFTo{RHDE<*Q3N-(bZWD|7`ETvMmuFRI(ZwKep!k^<}%2er}42Lv0!xz3xD#e>!r_ z{oSLvt0aPyLM!(3AGrDH_+CfiLbVRxwL1_`=IdXfl`)uQ9M2YVUj=aY^|N4XE&Xi# znf}Y6Jciv!B8Vxahz?3*cu{-C8$H}2*{^M4F#1npea?bapVLy zse2zozpzxNiQVB?ABguzH{Otk-xNm?3d6U!xW^C;0{UydvQUrEfo|Z37TyLbTNpI# zC>2DqLc+(|yQhW=-(V>W#MUh8u53>CqwF@Z{#{n6#P^mrCf^bW4ZWSe{K++F9O?7Y z#d(Vc?wC&)X2jl>iJH@;?hgGTb-Z&D_b9q|UYl0_ zmYdbO&7W0a?@x-^YnCn5cK^iV7)Kl7+LEFO<8&oj5#w{h3|(c3w&UnZnHyu8s-%?M zi5aP=-VyocKET%L4%lHz3`JLUF^nA`N z>YluW+(Bk7*IWJ2zqG%VMEBdyHhs5Cjhk;704LFqEX}aOUw7(1kV3J~wDVY1ZVgaG z=$flG!VU$57!rX-HKbe*=omXZW{QgiQ4%%iS%~ix4bPWPxA?sHo>9J#>laFyO?Y+T z`S3@h3%hbb$mk-MRb@~?Ez}{Gn3xZ_Jb7cqN+P^!Xk;%}EhO@{@N2&Ybw^ExqIff1 zqt8b%4Q>ZeiS(yvssq^}{MfS{p~T?v^~CZ&^e_ax`$e5c9d_XdFVe14YfiGU7Casg zpgq9-JtN=2|C3i`U#q8j*vTEm2MmlX`_QX9J6CSs_8q#KG|w4BDb5x}R+h`M)G)bE z0RY8?%LQ3EUyF*FX};L*%e_Qh!Kh1{Z%V^Sqj|yT)j>&&n#u)cNqFP(OFS>T+^us` z2%xQqKo<~VOFs*PnFFb7?4?%f*Pp#olF{~XKolEXQhBA!#HvSL9wR{^ZGJ)X{IZi; zu_tl{AUJQ6EIjLVe}h-M6Dn@1IhMqpctT&_bCr_$sa2~x)+4*sL$eCY?=r9X%3P4f z-tFd>zh-K&=3TQa_utgM_zQ@#{|IIFe*%Hi42O6`ByaLg8P+>W^+M~Dud|qn(u~xy z;W;MP)xzK9u+%1bD}E_6RJblJMZJOg?X$=63la~b6GdnO9NnK#AU6n^@C|+QU8K^qbIB^zao4mAA z&rHeqj%ruCAi^-`l%c6l=^F*&+`L~^vTB&Gta1+tz>@Nk4J*szlu^RD)YXa@i-LmB zW));MojjJfy=5lLJRbe{0GV67W@2w*T9;pZFurU%$d>5ef#TTzNqFLL6!4Ye0xzw8 z9C&Wy+jrf;a>{crZwF^OYxUo5r6V ze)~w-F_U5Cz<>LDDNJ!hm|h0Kdi|$Q0OU1EqJ%#z27cbrHR5g(uCl>V`P|zLNAeu> z0_iAShu8-|IY?&Yot$bqNCTOJfl2?dkb{_Dil!*=>?SY$lXoh9>6PmptDu3~-~Yj# zQgGLOLTOWf*Uhw<9LH4V(^T;&)dXF!4)2zhi6^N+jOGND4YgdGuz`_j+lA+ZTfn7p zIW`kIjhO&GSDp16Xd`0dAF%81NsJ8EjBec<>C#eNv?g7$o5Yhe19-z4%TbtjTr>hF zL|+#MT>GtU*67asCI8&vk&_o!weGuu-9q-zjO*OeJBgz!95f)*GlA;NuPDKB%hp4C z%Oyd&>j~l%TuUz@H*m~R)+ZcBu%jV$fYM38o!qmlh#9|Hrcs0{S8y&Vkd|@#U#z|tKmn39lkDL3m8~V}3&&9&c)VLe3o~{k*`@9Op zcsHP7B?E#3h#Fkqo+wrC+FV(yV~Ndb{4D+sB*xx`RlT$lr?mpY$PufOz+_K9H|a~| z%t^S6G7}Bu{|;}9yn`Cr1jTzlG!TakuMrE!Pke^!TL*J4aN~d&~PCR+N0Vs|~CGArUZ@YiBoroX7E`HU-RLf>YJR2Sb+u$+AbnhJ8TYhU`p%kpoNN7krEY;eo=5Sf7-Pxq?3fIe$ z=fWC3C3Uxs%73+50?S1rdVU8i@qaCLvvoi?Izb4LSEqR48&mi9G}bx{WPt4F^hyi;iGqfM zyGWzEigCiAF%pK$k#w24;T6k(g))MZ_jcLU ziOt2twKw2$<^+l1bQ!OTDQ$)Ac#jsBe&4Qcuny$iUcsO~fuG9`1rFgc#W@ST3>}&q z9Pk;0rl6)lX(;eSab+w;u?*t*h!cWjN5{FAC9HgYxc3FA(Nb-1kbFTjxBY_^K_;Ll zHRy_+&=+S|uhSS%08k$y5-+H2IC`qegx~XMdqV_^#BVM;~xR*?%icZXeZ8%EWoKujv$lk;Ypj~R93M#9z*}bht;W{+MVSowozm=LNk@1@zZpy-kkmzW3aa&BD3RN+T1DS5I0zf0W-MH@CM2x6wbQfR77h5TA1DV&#TgJhDPzFPAtgUgeGtb0FUvBaMU;C=UsttWZ@wvOUB(5&Kg_xU5R7^}60 zLktqJSFoc_;w`@s(`uJmrs=SlCeG43af3Z+?a;MW(Gk`F7QmUmlU#_%iKv<);u`{a zrKNu&5!S>^oM3`=Au)H}RaS)!LHKyudoCoasa6iSm6_ofhvL~fdQ$g537y@ zVmGlaQq3McTwi?m4BYTuP_3iB4u6SF&^uS2yq43?E>SseKAyybXnpd>kykMV5dPG3 zp3zbsYw`nLtU0aZb*N1=QFa3g#~p4Mx66;dEJ#klsk%aF7IFWa<-x?F2&PVjVx-5Q z27llECwlVt^G^r#9ewJ~r0RK6?`nRG?KLLf)njfoV zpl!YU<+6Z-C!ArC7b5vGIXkTWd5>saCLS2QZ+v{YQVu zS&mSlS7>Q5QZNO5mB43eX0H|^=>*DG$`*D?5X5T!xhgOP20vLqh;OB zX$)vNr7!p-BPEdQrLg6?F(+l9-Xj|f?0cCH0*Gnne3KWI-jU&R< zz|9#2$%{siZxyZFS82jdm<%(KU6#U={(|`@&|RIIz=VJ& Date: Tue, 3 Nov 2026 17:01:30 +0100 Subject: [PATCH 3/8] add stories and tests --- .../src/button-link/ButtonLink.stories.tsx | 278 ++++++++++++++++-- .../lib/src/button-link/ButtonLink.test.tsx | 56 +++- 2 files changed, 314 insertions(+), 20 deletions(-) diff --git a/packages/lib/src/button-link/ButtonLink.stories.tsx b/packages/lib/src/button-link/ButtonLink.stories.tsx index c9c02027a..e749b3df5 100644 --- a/packages/lib/src/button-link/ButtonLink.stories.tsx +++ b/packages/lib/src/button-link/ButtonLink.stories.tsx @@ -1,40 +1,262 @@ import Title from "../../.storybook/components/Title"; import ExampleContainer from "../../.storybook/components/ExampleContainer"; import { Meta, StoryObj } from "@storybook/react-vite"; +import { userEvent, within } from "storybook/test"; import DxcButtonLink from "./ButtonLink"; +import type ButtonLinkProps from "./types"; import DxcFlex from "../flex/Flex"; +import DxcInset from "../inset/Inset"; +import DxcTooltip from "../tooltip/Tooltip"; export default { title: "Button Link", component: DxcButtonLink, } satisfies Meta; +const facebookIcon = ( + + + + + +); + +const StatesColumn = (props: ButtonLinkProps) => ( + + + + + + + + + + + + + + + + + +); + const ButtonLink = () => ( <> - - <ExampleContainer> - <DxcFlex gap="1rem"> - <DxcButtonLink label="Button Link" href="#not-visited" /> - <DxcButtonLink label="Button Link" href="#not-visited" mode="secondary" /> - <DxcButtonLink label="Button Link" href="#not-visited" mode="tertiary" /> + <Title title="Small" theme="light" level={2} /> + <Title title="Primary" theme="light" level={3} /> + <DxcFlex> + <StatesColumn href="#not-visited" label="Button Link" mode="primary" size={{ height: "small" }} /> + <StatesColumn href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "small" }} /> + <StatesColumn + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "small" }} + /> + <StatesColumn href="#not-visited" icon="home" mode="primary" size={{ height: "small" }} title="Home" /> + </DxcFlex> + <DxcFlex> + <DxcFlex direction="column"> + <Title title="Width" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "small", width: "small" }} + title="Facebook" + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Medium" + mode="primary" + size={{ height: "small", width: "medium" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Large" + mode="primary" + size={{ height: "small", width: "large" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Fit content" + mode="primary" + size={{ height: "small", width: "fitContent" }} + /> + </ExampleContainer> + </DxcFlex> </DxcFlex> + </DxcFlex> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Fill parent" + mode="primary" + size={{ height: "small", width: "fillParent" }} + /> </ExampleContainer> - <Title title="Visited" theme="light" level={4} /> - <ExampleContainer pseudoState={["pseudo-visited"]}> - <DxcFlex gap="1rem"> - <DxcButtonLink label="Button Link" href="https://example.com" /> - <DxcButtonLink label="Button Link" href="https://example.com" mode="secondary" /> - <DxcButtonLink label="Button Link" href="https://example.com" mode="tertiary" /> - </DxcFlex> + <Title title="Secondary" theme="light" level={3} /> + <DxcFlex> + <StatesColumn href="#not-visited" label="Button Link" mode="secondary" size={{ height: "small" }} /> + <StatesColumn href="#not-visited" label="Button Link" icon="home" mode="secondary" size={{ height: "small" }} /> + <StatesColumn + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "small" }} + /> + <StatesColumn href="#not-visited" icon="home" mode="secondary" size={{ height: "small" }} title="Home" /> + </DxcFlex> + <Title title="Tertiary" theme="light" level={3} /> + <DxcFlex> + <StatesColumn href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "small" }} /> + <StatesColumn href="#not-visited" label="Button Link" icon="home" mode="tertiary" size={{ height: "small" }} /> + <StatesColumn + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "small" }} + /> + <StatesColumn href="#not-visited" icon="home" mode="tertiary" size={{ height: "small" }} title="Home" /> + </DxcFlex> + <Title title="Medium" theme="light" level={2} /> + <Title title="Primary" theme="light" level={3} /> + <DxcFlex> + <StatesColumn href="#not-visited" label="Button Link" mode="primary" size={{ height: "medium" }} /> + <StatesColumn href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "medium" }} /> + <StatesColumn + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "medium" }} + /> + <StatesColumn href="#not-visited" icon="home" mode="primary" size={{ height: "medium" }} title="Home" /> + </DxcFlex> + <Title title="Secondary" theme="light" level={3} /> + <DxcFlex> + <StatesColumn href="#not-visited" label="Button Link" mode="secondary" size={{ height: "medium" }} /> + <StatesColumn href="#not-visited" label="Button Link" icon="home" mode="secondary" size={{ height: "medium" }} /> + <StatesColumn + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "medium" }} + /> + <StatesColumn href="#not-visited" icon="home" mode="secondary" size={{ height: "medium" }} title="Home" /> + </DxcFlex> + <Title title="Tertiary" theme="light" level={3} /> + <DxcFlex> + <StatesColumn href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "medium" }} /> + <StatesColumn href="#not-visited" label="Button Link" icon="home" mode="tertiary" size={{ height: "medium" }} /> + <StatesColumn + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "medium" }} + /> + <StatesColumn href="#not-visited" icon="home" mode="tertiary" size={{ height: "medium" }} title="Home" /> + </DxcFlex> + <Title title="Large" theme="light" level={2} /> + <Title title="Primary" theme="light" level={3} /> + <DxcFlex> + <StatesColumn href="#not-visited" label="Button Link" mode="primary" size={{ height: "large" }} /> + <StatesColumn href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "large" }} /> + <StatesColumn + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "large" }} + /> + <StatesColumn href="#not-visited" icon="home" mode="primary" size={{ height: "large" }} title="Home" /> + </DxcFlex> + <Title title="Secondary" theme="light" level={3} /> + <DxcFlex> + <StatesColumn href="#not-visited" label="Button Link" mode="secondary" size={{ height: "large" }} /> + <StatesColumn href="#not-visited" label="Button Link" icon="home" mode="secondary" size={{ height: "large" }} /> + <StatesColumn + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "large" }} + /> + <StatesColumn href="#not-visited" icon="home" mode="secondary" size={{ height: "large" }} title="Home" /> + </DxcFlex> + <Title title="Tertiary" theme="light" level={3} /> + <DxcFlex> + <StatesColumn href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "large" }} /> + <StatesColumn href="#not-visited" label="Button Link" icon="home" mode="tertiary" size={{ height: "large" }} /> + <StatesColumn + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "large" }} + /> + <StatesColumn href="#not-visited" icon="home" mode="tertiary" size={{ height: "large" }} title="Home" /> + </DxcFlex> + </> +); + +const Tooltip = () => ( + <> + <Title title="Default tooltip" theme="light" level={2} /> + <ExampleContainer> + <DxcButtonLink label="Button Link" href="#not-visited" title="Button Link" /> </ExampleContainer> - <Title title="Disabled" theme="light" level={4} /> + </> +); + +const NestedTooltip = () => ( + <> + <Title title="Nested tooltip" theme="light" level={2} /> <ExampleContainer> - <DxcFlex gap="1rem"> - <DxcButtonLink label="Button Link" href="https://example.com" disabled /> - <DxcButtonLink label="Button Link" href="https://example.com" mode="secondary" disabled /> - <DxcButtonLink label="Button Link" href="https://example.com" mode="tertiary" disabled /> - </DxcFlex> + <DxcInset top="var(--spacing-padding-xxl)"> + <DxcTooltip label="Button Link" position="top"> + <DxcButtonLink label="Button Link" href="#not-visited" title="Button Link" /> + </DxcTooltip> + </DxcInset> </ExampleContainer> </> ); @@ -43,3 +265,21 @@ type Story = StoryObj<typeof DxcButtonLink>; export const Chromatic: Story = { render: ButtonLink, }; + +export const ButtonLinkTooltip: Story = { + render: Tooltip, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + const buttonLink = await canvas.findByRole("link"); + await userEvent.hover(buttonLink); + }, +}; + +export const NestedButtonLinkTooltip: Story = { + render: NestedTooltip, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + const buttonLink = await canvas.findByRole("link"); + await userEvent.hover(buttonLink); + }, +}; diff --git a/packages/lib/src/button-link/ButtonLink.test.tsx b/packages/lib/src/button-link/ButtonLink.test.tsx index be7a8f633..01394a76f 100644 --- a/packages/lib/src/button-link/ButtonLink.test.tsx +++ b/packages/lib/src/button-link/ButtonLink.test.tsx @@ -1,8 +1,15 @@ import "@testing-library/jest-dom"; -import { render } from "@testing-library/react"; +import { createRef } from "react"; +import { render, screen, waitFor } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import DxcButtonLink from "./ButtonLink"; +global.ResizeObserver = jest.fn().mockImplementation(() => ({ + observe: jest.fn(), + unobserve: jest.fn(), + disconnect: jest.fn(), +})); + describe("ButtonLink component tests", () => { test("Calls correct function on click", async () => { const onClick = jest.fn(); @@ -30,4 +37,51 @@ describe("ButtonLink component tests", () => { await userEvent.click(buttonLink); expect(onClick).not.toHaveBeenCalled(); }); + test("Opens in the same window by default and in a new one with newWindow", () => { + const { getByRole, rerender } = render(<DxcButtonLink label="Button Link" href="#" />); + expect(getByRole("link")).toHaveAttribute("target", "_self"); + rerender(<DxcButtonLink label="Button Link" href="#" newWindow />); + expect(getByRole("link")).toHaveAttribute("target", "_blank"); + }); + test("Uses tabIndex 0 by default, the provided value otherwise, and -1 when disabled", () => { + const { getByRole, rerender } = render(<DxcButtonLink label="Button Link" href="#" />); + expect(getByRole("link")).toHaveAttribute("tabindex", "0"); + rerender(<DxcButtonLink label="Button Link" href="#" tabIndex={3} />); + expect(getByRole("link")).toHaveAttribute("tabindex", "3"); + rerender(<DxcButtonLink label="Button Link" href="#" tabIndex={3} disabled />); + expect(getByRole("link")).toHaveAttribute("tabindex", "-1"); + }); + test("Uses the label as aria-label and falls back to the title when there is no label", () => { + const { getByRole, rerender } = render(<DxcButtonLink label="Button Link" href="#" title="Go home" />); + expect(getByRole("link")).toHaveAttribute("aria-label", "Button Link"); + rerender(<DxcButtonLink href="#" icon="home" title="Go home" />); + expect(getByRole("link")).toHaveAttribute("aria-label", "Go home"); + }); + test("Renders string icons as a Material Symbol and SVG icons as provided", () => { + const { container, rerender } = render(<DxcButtonLink label="Button Link" href="#" icon="home" />); + expect(container.querySelector('[role="img"]')).toBeInTheDocument(); + rerender(<DxcButtonLink label="Button Link" href="#" icon={<svg data-testid="custom-icon" />} />); + expect(container.querySelector('[data-testid="custom-icon"]')).toBeInTheDocument(); + }); + test("Forwards the ref to the anchor element", () => { + const ref = createRef<HTMLAnchorElement>(); + const { getByRole } = render(<DxcButtonLink label="Button Link" href="#" ref={ref} />); + expect(ref.current).toBe(getByRole("link")); + }); + test("Shows the title as a tooltip on hover when enabled", async () => { + const user = userEvent.setup(); + const { getByRole } = render(<DxcButtonLink label="Button Link" href="#" title="Button tooltip" />); + await user.hover(getByRole("link")); + expect(await screen.findByRole("tooltip", { name: "Button tooltip" })).toBeInTheDocument(); + }); + test("Does not show the title tooltip when disabled", async () => { + const user = userEvent.setup(); + const { getByRole, queryByRole } = render( + <DxcButtonLink label="Button Link" href="#" title="Button tooltip" disabled /> + ); + await user.hover(getByRole("link")); + await waitFor(() => { + expect(queryByRole("tooltip")).toBeFalsy(); + }); + }); }); From f2573a6fb7712c59a3369f9b752b0e5196942988 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso <pfelguerosogalguera@gmail.com> Date: Wed, 4 Nov 2026 09:31:28 +0100 Subject: [PATCH 4/8] add examples to documentation and add overviewpage --- .../button-link/code/ButtonLinkCodePage.tsx | 47 +- .../button-link/code/examples/basicUsage.tsx | 16 + .../button-link/code/examples/icons.tsx | 20 + .../button-link/code/examples/semantic.tsx | 23 + .../button-link/code/examples/sizes.tsx | 39 ++ .../overview/ButtonLinkOverviewPage.tsx | 475 ++++++++++++++---- .../overview/examples/iconUsage.tsx | 47 ++ .../overview/examples/variants.tsx | 21 + packages/lib/src/index.ts | 1 + 9 files changed, 558 insertions(+), 131 deletions(-) create mode 100644 apps/website/screens/components/button-link/code/examples/basicUsage.tsx create mode 100644 apps/website/screens/components/button-link/code/examples/icons.tsx create mode 100644 apps/website/screens/components/button-link/code/examples/semantic.tsx create mode 100644 apps/website/screens/components/button-link/code/examples/sizes.tsx create mode 100644 apps/website/screens/components/button-link/overview/examples/iconUsage.tsx create mode 100644 apps/website/screens/components/button-link/overview/examples/variants.tsx diff --git a/apps/website/screens/components/button-link/code/ButtonLinkCodePage.tsx b/apps/website/screens/components/button-link/code/ButtonLinkCodePage.tsx index c4267576c..7574015f0 100644 --- a/apps/website/screens/components/button-link/code/ButtonLinkCodePage.tsx +++ b/apps/website/screens/components/button-link/code/ButtonLinkCodePage.tsx @@ -3,6 +3,11 @@ import DocFooter from "@/common/DocFooter"; import QuickNavContainer from "@/common/QuickNavContainer"; import Code, { TableCode } from "@/common/Code"; import StatusBadge from "@/common/StatusBadge"; +import Example from "@/common/example/Example"; +import basicUsage from "./examples/basicUsage"; +import icons from "./examples/icons"; +import semantic from "./examples/semantic"; +import sizes from "./examples/sizes"; const sections = [ { @@ -154,27 +159,27 @@ const sections = [ </DxcTable> ), }, - // { - // title: "Examples", - // subSections: [ - // { - // title: "Basic usage", - // content: <Example example={basicUsage} defaultIsVisible />, - // }, - // { - // title: "Icons", - // content: <Example example={icons} defaultIsVisible />, - // }, - // { - // title: "Semantic", - // content: <Example example={semantic} defaultIsVisible />, - // }, - // { - // title: "Size", - // content: <Example example={sizes} defaultIsVisible />, - // }, - // ], - // }, + { + title: "Examples", + subSections: [ + { + title: "Basic usage", + content: <Example example={basicUsage} defaultIsVisible />, + }, + { + title: "Icons", + content: <Example example={icons} defaultIsVisible />, + }, + { + title: "Semantic", + content: <Example example={semantic} defaultIsVisible />, + }, + { + title: "Size", + content: <Example example={sizes} defaultIsVisible />, + }, + ], + }, ]; const ButtonLinkCodePage = () => ( diff --git a/apps/website/screens/components/button-link/code/examples/basicUsage.tsx b/apps/website/screens/components/button-link/code/examples/basicUsage.tsx new file mode 100644 index 000000000..b35d0b991 --- /dev/null +++ b/apps/website/screens/components/button-link/code/examples/basicUsage.tsx @@ -0,0 +1,16 @@ +import { DxcButtonLink, DxcInset } from "@dxc-technology/halstack-react"; + +const code = `() => { + return ( + <DxcInset space="var(--spacing-padding-xl)"> + <DxcButtonLink label="Link" href="#" /> + </DxcInset> + ); +}`; + +const scope = { + DxcButtonLink, + DxcInset, +}; + +export default { code, scope }; diff --git a/apps/website/screens/components/button-link/code/examples/icons.tsx b/apps/website/screens/components/button-link/code/examples/icons.tsx new file mode 100644 index 000000000..d06a2645f --- /dev/null +++ b/apps/website/screens/components/button-link/code/examples/icons.tsx @@ -0,0 +1,20 @@ +import { DxcButtonLink, DxcFlex, DxcInset } from "@dxc-technology/halstack-react"; + +const code = `() => { + return ( + <DxcInset space="var(--spacing-padding-xl)"> + <DxcFlex gap="var(--spacing-gap-l)"> + <DxcButtonLink href="#" icon="volunteer_activism" label="Donate" /> + <DxcButtonLink href="#" icon="filled_volunteer_activism" mode="secondary" title="Donate" /> + </DxcFlex> + </DxcInset> + ); +}`; + +const scope = { + DxcButtonLink, + DxcFlex, + DxcInset, +}; + +export default { code, scope }; diff --git a/apps/website/screens/components/button-link/code/examples/semantic.tsx b/apps/website/screens/components/button-link/code/examples/semantic.tsx new file mode 100644 index 000000000..e3286b905 --- /dev/null +++ b/apps/website/screens/components/button-link/code/examples/semantic.tsx @@ -0,0 +1,23 @@ +import { DxcButtonLink, DxcFlex, DxcInset } from "@dxc-technology/halstack-react"; + +const code = `() => { + return ( + <DxcInset space="var(--spacing-padding-xl)"> + <DxcFlex gap="var(--spacing-gap-l)"> + <DxcButtonLink href="#" label="Search" /> + <DxcButtonLink href="#" semantic="error" label="Cancel" /> + <DxcButtonLink href="#" semantic="warning" label="Report" /> + <DxcButtonLink href="#" semantic="success" label="Confirm" /> + <DxcButtonLink href="#" semantic="info" label="Details" /> + </DxcFlex> + </DxcInset> + ); +}`; + +const scope = { + DxcButtonLink, + DxcFlex, + DxcInset, +}; + +export default { code, scope }; diff --git a/apps/website/screens/components/button-link/code/examples/sizes.tsx b/apps/website/screens/components/button-link/code/examples/sizes.tsx new file mode 100644 index 000000000..341bccef9 --- /dev/null +++ b/apps/website/screens/components/button-link/code/examples/sizes.tsx @@ -0,0 +1,39 @@ +import { DxcButtonLink, DxcInset, DxcFlex } from "@dxc-technology/halstack-react"; + +const code = `() => { + return ( + <DxcInset space="var(--spacing-padding-xl)"> + <DxcFlex gap="var(--spacing-gap-l)" direction="column"> + <DxcFlex gap="var(--spacing-gap-l)"> + <DxcButtonLink href="#" icon="person" semantic="default" size={{ height: "small", width: "small" }} /> + <DxcButtonLink href="#" label="Submit" size={{ height: "small", width: "medium" }} /> + <DxcButtonLink href="#" label="Search" icon="search" size={{ height: "small", width: "large" }} /> + <DxcButtonLink href="#" label="Edit" size={{ height: "small", width: "fitContent" }} /> + <DxcButtonLink href="#" label="Learn more" size={{ height: "small", width: "fillParent" }} /> + </DxcFlex> + <DxcFlex gap="var(--spacing-gap-l)"> + <DxcButtonLink href="#" icon="person" semantic="default" size={{ height: "medium", width: "small" }} /> + <DxcButtonLink href="#" label="Submit" size={{ height: "medium", width: "medium" }} /> + <DxcButtonLink href="#" label="Search" icon="search" size={{ height: "medium", width: "large" }} /> + <DxcButtonLink href="#" label="Edit" size={{ height: "medium", width: "fitContent" }} /> + <DxcButtonLink href="#" label="Learn more" size={{ height: "medium", width: "fillParent" }} /> + </DxcFlex> + <DxcFlex gap="var(--spacing-gap-l)"> + <DxcButtonLink href="#" icon="person" semantic="default" size={{ height: "large", width: "small"}} /> + <DxcButtonLink href="#" label="Submit" size={{ height: "large", width: "medium" }} /> + <DxcButtonLink href="#" label="Search" icon="search" size={{ height: "large", width: "large" }} /> + <DxcButtonLink href="#" label="Edit" size={{ height: "large", width: "fitContent" }} /> + <DxcButtonLink href="#" label="Learn more" size={{ height: "large", width: "fillParent" }} /> + </DxcFlex> + </DxcFlex> + </DxcInset> + ); +}`; + +const scope = { + DxcButtonLink, + DxcInset, + DxcFlex, +}; + +export default { code, scope }; diff --git a/apps/website/screens/components/button-link/overview/ButtonLinkOverviewPage.tsx b/apps/website/screens/components/button-link/overview/ButtonLinkOverviewPage.tsx index d097d6fa5..b984e62c3 100644 --- a/apps/website/screens/components/button-link/overview/ButtonLinkOverviewPage.tsx +++ b/apps/website/screens/components/button-link/overview/ButtonLinkOverviewPage.tsx @@ -1,8 +1,19 @@ -import { DxcBulletedList, DxcFlex, DxcParagraph, DxcAlert } from "@dxc-technology/halstack-react"; +import { + DxcBulletedList, + DxcFlex, + DxcParagraph, + DxcAlert, + DxcTypography, + DxcTable, +} from "@dxc-technology/halstack-react"; import QuickNavContainer from "@/common/QuickNavContainer"; import DocFooter from "@/common/DocFooter"; import Image from "@/common/Image"; import anatomy from "./images/button_link_anatomy.png"; +import Example from "@/common/example/Example"; +import variants from "./examples/variants"; +import HeaderDescriptionCell from "@/common/HeaderDescriptionCell"; +import iconUsage from "./examples/iconUsage"; const sections = [ { @@ -41,29 +52,110 @@ const sections = [ <strong>Label:</strong> communicates the destination or purpose of the navigation. </DxcBulletedList.Item> </DxcBulletedList> + <DxcTypography as="p" fontStyle="italic"> + Button link follows the existing button component's typography, spacing, sizing, and visual styling rules. + </DxcTypography> </> ), }, { title: "Variants", - content: <></>, + content: ( + <> + <DxcParagraph> + Button link supports three visual variants: primary, secondary, and tertiary. Each variant provides a + different level of visual emphasis according to the importance of the destination within the interface. + </DxcParagraph> + <Example example={variants} /> + <DxcTable> + <thead> + <tr> + <th>Variant</th> + <HeaderDescriptionCell>Description</HeaderDescriptionCell> + </tr> + </thead> + <tbody> + <tr> + <td> + <strong>Primary</strong> + </td> + <td> + For the most prominent navigation destination within a page or user flow. Use when navigation represents + the main call to action. + </td> + </tr> + <tr> + <td> + <strong>Secondary</strong> + </td> + <td> + For less prominent navigation that still requires button-like emphasis. It can be used alongside a + primary button link or independently. + </td> + </tr> + <tr> + <td> + <strong>Tertiary</strong> + </td> + <td> + For the least pronounced navigation destinations. Use when a lighter visual treatment is sufficient, + such as supporting or contextual navigation. + </td> + </tr> + </tbody> + </DxcTable> + <DxcTypography as="p" fontStyle="italic"> + Choose the variant according to the importance of the destination within the interface. Avoid giving multiple + navigation elements the same level of prominence when a clear visual hierarchy can be established. + </DxcTypography> + </> + ), }, { title: "Icon usage", - content: <></>, - }, - { - title: "Semantic buttons", - content: <></>, + content: ( + <> + <DxcParagraph> + Any icon from the application's chosen icon library can be used in Halstack button link. It is recommended to + use the same icon library throughout the application to maintain visual consistency. + </DxcParagraph> + <DxcBulletedList> + <DxcBulletedList.Item> + Icons can appear before or after the label, with an 8-pixel separation from the text, following the existing + button component's spacing rules. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + Use icons when they provide additional meaning or help users understand the destination. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + Consider using a trailing arrow to reinforce navigation when appropriate. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + An external-link icon can help users recognize that the destination leads outside the current application. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + Avoid using icons solely for decoration. The icon should provide meaningful context. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + Ensure the label communicates the destination without relying on the icon alone. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + Icon-only button links are allowed when the context supports them. In these cases, provide a tooltip and an + accessible name to communicate the link's purpose. + </DxcBulletedList.Item> + </DxcBulletedList> + <Example example={iconUsage} /> + </> + ), }, { title: "Sizes", content: ( <> <DxcParagraph> - The context in which a button is used often dictates its size. Halstack provides buttons in different sizes to - help create interfaces that are not only functional but also intuitive and accessible, catering to a wide - range of user needs and interaction scenarios. + Button link follows the existing button component's sizing options: small, medium, and large. The size should + be selected according to the surrounding interface while maintaining consistency with other interactive + elements. </DxcParagraph> <DxcParagraph> Varying button sizes help establish a clear visual hierarchy, guiding users towards the most critical actions. @@ -82,134 +174,297 @@ const sections = [ ), subSections: [ { - title: "Height", + title: "Small", + content: ( + <> + <DxcParagraph> + Small button links are suitable for compact layouts or contexts where space is limited. + </DxcParagraph> + <DxcParagraph>Use cases:</DxcParagraph> + <DxcBulletedList> + <DxcBulletedList.Item> + <strong>Compact spaces:</strong> Use in tables, toolbars, or other areas with limited space. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + <strong>Supporting navigation:</strong> Suitable for less prominent navigation where a smaller visual + treatment is appropriate. + </DxcBulletedList.Item> + </DxcBulletedList> + </> + ), + }, + { + title: "Medium", + content: ( + <> + <DxcParagraph> + Medium button links provide a balance between visibility and space usage, making them suitable for general + navigation across applications. + </DxcParagraph> + <DxcParagraph>Use cases:</DxcParagraph> + <DxcBulletedList> + <DxcBulletedList.Item> + <strong>General navigation:</strong> Use as the standard size for most navigation scenarios. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + <strong>Consistency:</strong> Helps maintain a consistent appearance with other medium-sized interactive + elements. + </DxcBulletedList.Item> + </DxcBulletedList> + </> + ), + }, + { + title: "Large", + content: ( + <> + <DxcParagraph> + Large button links provide greater visual prominence and are suitable for navigation that requires + stronger emphasis. + </DxcParagraph> + <DxcParagraph>Use cases:</DxcParagraph> + <DxcBulletedList> + <DxcBulletedList.Item> + <strong>Prominent destinations</strong> Use when directing users to an important page or section. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + <strong>Call to action:</strong> Suitable for prominent navigation areas where encouraging users to + visit another destination is important. + </DxcBulletedList.Item> + </DxcBulletedList> + </> + ), + }, + ], + }, + { + title: "Choosing between a link, button and button link", + subSections: [ + { + title: "Be clear and concise", + content: ( + <> + <DxcParagraph> + Links and buttons are both interactive elements, but they serve different purposes. The main difference is + whether the interaction takes users to another destination or performs an action within the current + interface. + </DxcParagraph> + <DxcParagraph> + Choosing the right component is important because it affects not only how an element looks, but also how + it behaves, how users interact with it, and how assistive technologies interpret it. + </DxcParagraph> + </> + ), subSections: [ { - title: "Small", - content: <></>, + title: "When to use a link", + content: ( + <> + <DxcParagraph> + Use a <strong>link</strong> when the primary purpose is to navigate users to another page, section, or + resource, and the destination does not require strong visual emphasis. + </DxcParagraph> + <DxcParagraph> + Links are commonly integrated into content and provide a lightweight way to direct users to related + information. + </DxcParagraph> + + <DxcParagraph>Use cases:</DxcParagraph> + <DxcBulletedList> + <DxcBulletedList.Item> + <strong>Inline navigation:</strong> Direct users to related information within a paragraph or + sentence. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + <strong>Performing an operation</strong> Link to related pages, documentation, or external + references. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + <strong>Supporting navigation:</strong> Provide access to additional resources or secondary + destinations. + </DxcBulletedList.Item> + </DxcBulletedList> + </> + ), }, { - title: "Medium", - content: <></>, + title: "When to use a button", + content: ( + <> + <DxcParagraph> + Use a <strong>button</strong> when the interaction triggers an action or changes something within the + current application or interface. + </DxcParagraph> + <DxcParagraph> + A button is intended for actions that do not primarily involve navigating to another destination. + </DxcParagraph> + + <DxcParagraph>Use cases:</DxcParagraph> + <DxcBulletedList> + <DxcBulletedList.Item> + <strong>Submitting information:</strong> Submit a form or send user-provided information. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + <strong>Performing an operation:</strong> Save changes, delete an item, or update a record. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + <strong>Changing the interface:</strong> Open a dialog, expand a section, or trigger an interaction. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + <strong>Executing a process:</strong> Start an operation or initiate a workflow. + </DxcBulletedList.Item> + </DxcBulletedList> + </> + ), }, { - title: "Large", - content: <></>, + title: "When to use a button link", + content: ( + <> + <DxcParagraph> + Use a <strong>button link</strong> when the primary purpose is navigation, but the destination needs + more visual prominence than a standard Link can provide. + </DxcParagraph> + <DxcParagraph> + Button link combines the visual appearance of a button with the native behavior and semantics of a + link. It is useful when a navigation destination is important enough to stand out within the + interface, but the interaction should still behave like a link.{" "} + </DxcParagraph> + + <DxcParagraph>Use cases:</DxcParagraph> + <DxcBulletedList> + <DxcBulletedList.Item> + <strong>Prominent calls to action:</strong> Direct users to an important destination, such as "View + Details" or "Open Project". + </DxcBulletedList.Item> + <DxcBulletedList.Item> + <strong>Highlighted navigation:</strong> Provide access to an important section or resource that + needs greater visual emphasis than a standard text link. + </DxcBulletedList.Item> + </DxcBulletedList> + + <DxcTypography as="p" fontStyle="italic"> + Although button link looks like a button, it must retain link semantics and native anchor behavior. It + should navigate to a destination rather than trigger an action within the current interface + </DxcTypography> + </> + ), }, ], }, ], }, { - title: "Best practices for button labels", + title: "Best practices", subSections: [ { - title: "Be clear and concise", - content: ( - <DxcBulletedList> - <DxcBulletedList.Item> - <strong>Use actionable language:</strong> Start with a verb that clearly describes the action. Examples: - "Submit", "Save" or "Delete". - </DxcBulletedList.Item> - <DxcBulletedList.Item> - <strong>Keep it short:</strong> Aim for one or two words. Longer text can make buttons harder to read and - understand quickly. - </DxcBulletedList.Item> - </DxcBulletedList> - ), - }, - { - title: "Ensure clarity", + title: "General", content: ( - <DxcBulletedList> - <DxcBulletedList.Item> - <strong>Avoid ambiguity:</strong> Make sure the button's purpose is immediately clear. Avoid vague labels - like "Click here" or "Go". - </DxcBulletedList.Item> - <DxcBulletedList.Item> - <strong>Use specific nouns:</strong> If necessary, include a noun to provide more context. Examples: "Add - item", "View details". - </DxcBulletedList.Item> - </DxcBulletedList> + <> + <DxcBulletedList> + <DxcBulletedList.Item> + <strong>Use for navigation:</strong> Button link should only be used when the primary purpose is to + navigate users to another destination. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + <strong>Choose the appropriate component:</strong> Use button for actions, standard Link for lightweight + navigation, and Button Link for prominent navigation. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + <strong>Use clear labels:</strong> Choose concise and descriptive labels that help users understand + where the link will take them. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + <strong>Maintain consistency:</strong> Follow the existing button component's typography, spacing, + sizing, and visual styling rules. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + <strong>Avoid unnecessary emphasis:</strong> Do not use button link when a standard link provides + sufficient visual emphasis. + </DxcBulletedList.Item> + </DxcBulletedList> + </> ), }, { - title: "Maintain consistency", + title: "Variants and hierarchy", content: ( - <DxcBulletedList> - <DxcBulletedList.Item> - <strong>Consistent terminology:</strong> Use the same terms for similar actions across your interface to - avoid confusion. For example, always use "Submit" for form submissions. - </DxcBulletedList.Item> - <DxcBulletedList.Item> - <strong>Sentence case:</strong> Use sentence-style capitalization — only capitalize the first word. This - improves readability and looks more approachable. - </DxcBulletedList.Item> - </DxcBulletedList> + <> + <DxcBulletedList> + <DxcBulletedList.Item> + <strong>Reserve primary for the main destination:</strong> Use primary for the most prominent navigation + destination within the relevant context. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + <strong>Use secondary for supporting destinations:</strong> Choose Secondary when navigation needs + emphasis without competing with the primary destination. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + <strong>Use tertiary for less prominent navigation:</strong> Use Tertiary when a lighter visual + treatment is more appropriate. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + <strong>Establish a clear hierarchy:</strong> Avoid presenting several navigation destinations with + equal visual prominence when one should receive more attention + </DxcBulletedList.Item> + </DxcBulletedList> + </> ), }, { - title: "Focus on the user", + title: "Navigation behavior", content: ( - <DxcBulletedList> - <DxcBulletedList.Item> - <strong>User-centric language:</strong> Write from the user's perspective. For actions that the user - performs, consider using first-person pronouns (e.g., "My profile"). - </DxcBulletedList.Item> - <DxcBulletedList.Item> - <strong>Positive tone:</strong> Where possible, frame actions positively to encourage interaction. For - example, use "Continue" instead of "Next". - </DxcBulletedList.Item> - </DxcBulletedList> + <> + <DxcBulletedList> + <DxcBulletedList.Item> + <strong>Internal navigation:</strong> Use internal links to navigate to destinations within the same + application or website, following the application's established routing behavior. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + <strong>External navigation:</strong> Use external links to navigate to destinations outside the current + application or website. Consider an external-link icon when it helps communicate this behavior. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + <strong>Opening a new tab:</strong> Open destinations in a new tab only when required by the use case. + When appropriate, communicate this behavior to users. + </DxcBulletedList.Item> + </DxcBulletedList> + </> ), }, { title: "Accessibility", content: ( - <DxcBulletedList> - <DxcBulletedList.Item> - <strong>Descriptive labels:</strong> Ensure that the button copy makes sense out of context for screen - reader users. Avoid labels like "More" without additional context. - </DxcBulletedList.Item> - <DxcBulletedList.Item> - <strong>Avoid jargon:</strong> Use plain language that is easily understood by all users, including those - who may not be familiar with technical terms. - </DxcBulletedList.Item> - </DxcBulletedList> - ), - }, - { - title: "Visual hierarchy", - content: ( - <DxcBulletedList> - <DxcBulletedList.Item> - <strong>Primary action first:</strong> Ensure the primary action stands out with a prominent position and - styling. - </DxcBulletedList.Item> - <DxcBulletedList.Item> - <strong>Avoid redundant text:</strong> Do not include unnecessary words that do not add value to the - action. - </DxcBulletedList.Item> - </DxcBulletedList> - ), - }, - { - title: "Tips", - content: ( - <DxcBulletedList> - <DxcBulletedList.Item> - <strong>Test for clarity:</strong> Show your button text to others without context to see if they - understand the action. - </DxcBulletedList.Item> - <DxcBulletedList.Item> - <strong>Iterate based on feedback:</strong> Be open to changing your button copy based on user feedback - and testing results. - </DxcBulletedList.Item> - <DxcBulletedList.Item> - <strong>Avoid punctuation:</strong> Do not use end punctuation in button labels unless absolutely - necessary. - </DxcBulletedList.Item> - </DxcBulletedList> + <> + <DxcBulletedList> + <DxcBulletedList.Item> + <strong>Preserve link semantics:</strong> Implement Button link using link semantics, regardless of its + visual variant. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + <strong>Provide descriptive labels:</strong> Ensure the accessible name communicates the destination or + purpose of the link. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + <strong>Support keyboard navigation:</strong> Ensure users can reach the component using the keyboard + and activate it using Enter. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + <strong>Maintain visible focus:</strong> Provide a clearly visible focus indicator for keyboard users. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + <strong>Ensure sufficient contrast:</strong> Maintain sufficient contrast between the component and its + background across its supported visual states. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + <strong>Do not rely on icons alone:</strong> Icons should not replace the accessible name of the link. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + <strong>Handle unavailable destinations appropriately</strong> If navigation is unavailable, ensure the + implementation prevents navigation and communicates the intended state to assistive technologies. + </DxcBulletedList.Item> + </DxcBulletedList> + </> ), }, ], diff --git a/apps/website/screens/components/button-link/overview/examples/iconUsage.tsx b/apps/website/screens/components/button-link/overview/examples/iconUsage.tsx new file mode 100644 index 000000000..47391de8f --- /dev/null +++ b/apps/website/screens/components/button-link/overview/examples/iconUsage.tsx @@ -0,0 +1,47 @@ +import { DxcButtonLink, DxcFlex, DxcInset } from "@dxc-technology/halstack-react"; + +const code = `() => { + return ( + <DxcInset space="var(--spacing-padding-xl)"> + <DxcFlex direction="column" gap="var(--spacing-gap-l)"> + <DxcFlex justifyContent="space-evenly"> + <DxcButtonLink href="#" label="Primary" size={{ width: "large" }} icon="filled_home" /> + <DxcButtonLink href="#" label="Primary" size={{ width: "large" }} iconPosition="after" icon="filled_home" /> + <DxcButtonLink href="#" icon="filled_home" title="Go home" /> + </DxcFlex> + <DxcFlex justifyContent="space-evenly"> + <DxcButtonLink href="#" size={{ width: "large" }} mode="secondary" label="Secondary" icon="filled_home" /> + <DxcButtonLink + href="#" + size={{ width: "large" }} + mode="secondary" + label="Secondary" + iconPosition="after" + icon="filled_home" + /> + <DxcButtonLink mode="secondary" icon="filled_home" title="Go home" /> + </DxcFlex> + <DxcFlex justifyContent="space-evenly"> + <DxcButtonLink href="#" label="Tertiary" mode="tertiary" size={{ width: "large" }} icon="filled_home" /> + <DxcButtonLink + href="#" + label="Tertiary" + mode="tertiary" + size={{ width: "large" }} + iconPosition="after" + icon="filled_home" + /> + <DxcButtonLink href="#" mode="tertiary" icon="filled_home" title="Go home" /> + </DxcFlex> + </DxcFlex> + </DxcInset> + ); +}`; + +const scope = { + DxcButtonLink, + DxcFlex, + DxcInset, +}; + +export default { code, scope }; diff --git a/apps/website/screens/components/button-link/overview/examples/variants.tsx b/apps/website/screens/components/button-link/overview/examples/variants.tsx new file mode 100644 index 000000000..971de8cf1 --- /dev/null +++ b/apps/website/screens/components/button-link/overview/examples/variants.tsx @@ -0,0 +1,21 @@ +import { DxcButtonLink, DxcInset, DxcFlex } from "@dxc-technology/halstack-react"; + +const code = `() => { + return ( + <DxcInset space="var(--spacing-padding-xl)"> + <DxcFlex gap="var(--spacing-gap-xl)" justifyContent="center"> + <DxcButtonLink href="#" mode="primary" label="Primary" /> + <DxcButtonLink href="#" mode="secondary" label="Secondary" /> + <DxcButtonLink href="#" mode="tertiary" label="Tertiary" /> + </DxcFlex> + </DxcInset> + ); +}`; + +const scope = { + DxcButtonLink, + DxcFlex, + DxcInset, +}; + +export default { code, scope }; diff --git a/packages/lib/src/index.ts b/packages/lib/src/index.ts index 3d943d9b8..aca8bf781 100644 --- a/packages/lib/src/index.ts +++ b/packages/lib/src/index.ts @@ -10,6 +10,7 @@ export { default as DxcBleed } from "./bleed/Bleed"; export { default as DxcBreadcrumbs } from "./breadcrumbs/Breadcrumbs"; export { default as DxcBulletedList } from "./bulleted-list/BulletedList"; export { default as DxcButton } from "./button/Button"; +export { default as DxcButtonLink } from "./button-link/ButtonLink"; export { default as DxcCard } from "./card/Card"; export { default as DxcCheckbox } from "./checkbox/Checkbox"; export { default as DxcChip } from "./chip/Chip"; From 527ffcd09367bd79a6e35496bbc0305892a3bd70 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso <pfelguerosogalguera@gmail.com> Date: Wed, 4 Nov 2026 12:24:11 +0100 Subject: [PATCH 5/8] refine docmuentation and stories, fix iconContainer --- .../overview/ButtonLinkOverviewPage.tsx | 17 +- .../src/button-link/ButtonLink.stories.tsx | 3587 ++++++++++++++++- packages/lib/src/button-link/ButtonLink.tsx | 15 +- 3 files changed, 3446 insertions(+), 173 deletions(-) diff --git a/apps/website/screens/components/button-link/overview/ButtonLinkOverviewPage.tsx b/apps/website/screens/components/button-link/overview/ButtonLinkOverviewPage.tsx index b984e62c3..d9c6d2b78 100644 --- a/apps/website/screens/components/button-link/overview/ButtonLinkOverviewPage.tsx +++ b/apps/website/screens/components/button-link/overview/ButtonLinkOverviewPage.tsx @@ -1,11 +1,4 @@ -import { - DxcBulletedList, - DxcFlex, - DxcParagraph, - DxcAlert, - DxcTypography, - DxcTable, -} from "@dxc-technology/halstack-react"; +import { DxcBulletedList, DxcFlex, DxcParagraph, DxcTypography, DxcTable } from "@dxc-technology/halstack-react"; import QuickNavContainer from "@/common/QuickNavContainer"; import DocFooter from "@/common/DocFooter"; import Image from "@/common/Image"; @@ -162,14 +155,6 @@ const sections = [ Primary actions are made more prominent with larger buttons, while secondary actions use smaller buttons to avoid distraction. </DxcParagraph> - <DxcAlert - title="Sizes" - semantic="warning" - message={{ - text: "To maintain a clear and effective visual hierarchy, avoid overusing different button sizes within a single interface.", - }} - closable={false} - /> </> ), subSections: [ diff --git a/packages/lib/src/button-link/ButtonLink.stories.tsx b/packages/lib/src/button-link/ButtonLink.stories.tsx index e749b3df5..6ae347b37 100644 --- a/packages/lib/src/button-link/ButtonLink.stories.tsx +++ b/packages/lib/src/button-link/ButtonLink.stories.tsx @@ -4,7 +4,6 @@ import { Meta, StoryObj } from "@storybook/react-vite"; import { userEvent, within } from "storybook/test"; import DxcButtonLink from "./ButtonLink"; -import type ButtonLinkProps from "./types"; import DxcFlex from "../flex/Flex"; import DxcInset from "../inset/Inset"; import DxcTooltip from "../tooltip/Tooltip"; @@ -37,82 +36,841 @@ const facebookIcon = ( </svg> ); -const StatesColumn = (props: ButtonLinkProps) => ( - <DxcFlex direction="column"> - <ExampleContainer> - <DxcButtonLink {...props} /> - </ExampleContainer> - <ExampleContainer pseudoState="pseudo-hover"> - <DxcButtonLink {...props} /> - </ExampleContainer> - <ExampleContainer pseudoState="pseudo-focus"> - <DxcButtonLink {...props} /> - </ExampleContainer> - <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> - <DxcButtonLink {...props} /> - </ExampleContainer> - <ExampleContainer> - <DxcButtonLink {...props} disabled /> - </ExampleContainer> - </DxcFlex> -); - const ButtonLink = () => ( <> + <Title title="Default size" theme="light" level={2} /> + <Title title="Primary" theme="light" level={3} /> + <Title title="Default" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="primary" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="primary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="primary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="primary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="primary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="primary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="primary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="primary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="primary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Disabled" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" disabled /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" disabled /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" title="Home" disabled /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="primary" title="Facebook" disabled /> + </ExampleContainer> + </DxcFlex> + <Title title="Secondary" theme="light" level={3} /> + <Title title="Default" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="secondary" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="secondary" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="secondary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="secondary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="secondary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="secondary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="secondary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="secondary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="secondary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="secondary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Disabled" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" disabled /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="secondary" disabled /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" title="Home" disabled /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="secondary" title="Facebook" disabled /> + </ExampleContainer> + </DxcFlex> + <Title title="Tertiary" theme="light" level={3} /> + <Title title="Default" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="tertiary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="tertiary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="tertiary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="tertiary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="tertiary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="tertiary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="tertiary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="tertiary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Disabled" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" disabled /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" disabled /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" title="Home" disabled /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="tertiary" title="Facebook" disabled /> + </ExampleContainer> + </DxcFlex> <Title title="Small" theme="light" level={2} /> <Title title="Primary" theme="light" level={3} /> + <Title title="Default" theme="light" level={4} /> <DxcFlex> - <StatesColumn href="#not-visited" label="Button Link" mode="primary" size={{ height: "small" }} /> - <StatesColumn href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "small" }} /> - <StatesColumn - href="#not-visited" - label="Button Link" - icon="home" - iconPosition="after" - mode="primary" - size={{ height: "small" }} - /> - <StatesColumn href="#not-visited" icon="home" mode="primary" size={{ height: "small" }} title="Home" /> - </DxcFlex> - <DxcFlex> - <DxcFlex direction="column"> - <Title title="Width" theme="light" level={4} /> - <DxcFlex> - <ExampleContainer> - <DxcButtonLink - href="#not-visited" - icon={facebookIcon} - mode="primary" - size={{ height: "small", width: "small" }} - title="Facebook" - /> - </ExampleContainer> - <ExampleContainer> - <DxcButtonLink - href="#not-visited" - label="Medium" - mode="primary" - size={{ height: "small", width: "medium" }} - /> - </ExampleContainer> - <ExampleContainer> - <DxcButtonLink - href="#not-visited" - label="Large" - mode="primary" - size={{ height: "small", width: "large" }} - /> - </ExampleContainer> - <ExampleContainer> - <DxcButtonLink - href="#not-visited" - label="Fit content" - mode="primary" - size={{ height: "small", width: "fitContent" }} - /> - </ExampleContainer> - </DxcFlex> - </DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Disabled" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "small" }} disabled /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="primary" + size={{ height: "small" }} + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "small" }} + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon="home" + mode="primary" + size={{ height: "small" }} + title="Home" + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "small" }} + title="Facebook" + disabled + /> + </ExampleContainer> + </DxcFlex> + <Title title="Width" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "small", width: "small" }} + title="Facebook" + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Medium" mode="primary" size={{ height: "small", width: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Large" mode="primary" size={{ height: "small", width: "large" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Fit content" + mode="primary" + size={{ height: "small", width: "fitContent" }} + /> + </ExampleContainer> </DxcFlex> <ExampleContainer> <DxcButtonLink @@ -123,118 +881,2634 @@ const ButtonLink = () => ( /> </ExampleContainer> <Title title="Secondary" theme="light" level={3} /> + <Title title="Default" theme="light" level={4} /> <DxcFlex> - <StatesColumn href="#not-visited" label="Button Link" mode="secondary" size={{ height: "small" }} /> - <StatesColumn href="#not-visited" label="Button Link" icon="home" mode="secondary" size={{ height: "small" }} /> - <StatesColumn - href="#not-visited" - label="Button Link" - icon="home" - iconPosition="after" - mode="secondary" - size={{ height: "small" }} - /> - <StatesColumn href="#not-visited" icon="home" mode="secondary" size={{ height: "small" }} title="Home" /> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Disabled" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "small" }} disabled /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "small" }} + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "small" }} + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon="home" + mode="secondary" + size={{ height: "small" }} + title="Home" + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "small" }} + title="Facebook" + disabled + /> + </ExampleContainer> </DxcFlex> <Title title="Tertiary" theme="light" level={3} /> + <Title title="Default" theme="light" level={4} /> <DxcFlex> - <StatesColumn href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "small" }} /> - <StatesColumn href="#not-visited" label="Button Link" icon="home" mode="tertiary" size={{ height: "small" }} /> - <StatesColumn - href="#not-visited" - label="Button Link" - icon="home" - iconPosition="after" - mode="tertiary" - size={{ height: "small" }} - /> - <StatesColumn href="#not-visited" icon="home" mode="tertiary" size={{ height: "small" }} title="Home" /> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Disabled" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "small" }} disabled /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="tertiary" + size={{ height: "small" }} + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "small" }} + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon="home" + mode="tertiary" + size={{ height: "small" }} + title="Home" + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "small" }} + title="Facebook" + disabled + /> + </ExampleContainer> </DxcFlex> <Title title="Medium" theme="light" level={2} /> <Title title="Primary" theme="light" level={3} /> + <Title title="Default" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and active" theme="light" level={4} /> <DxcFlex> - <StatesColumn href="#not-visited" label="Button Link" mode="primary" size={{ height: "medium" }} /> - <StatesColumn href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "medium" }} /> - <StatesColumn + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Disabled" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "medium" }} disabled /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="primary" + size={{ height: "medium" }} + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "medium" }} + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon="home" + mode="primary" + size={{ height: "medium" }} + title="Home" + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "medium" }} + title="Facebook" + disabled + /> + </ExampleContainer> + </DxcFlex> + <Title title="Width" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "medium", width: "small" }} + title="Facebook" + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Medium" mode="primary" size={{ height: "medium", width: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Large" mode="primary" size={{ height: "medium", width: "large" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Fit content" + mode="primary" + size={{ height: "medium", width: "fitContent" }} + /> + </ExampleContainer> + </DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" - label="Button Link" - icon="home" - iconPosition="after" + label="Fill parent" mode="primary" - size={{ height: "medium" }} + size={{ height: "medium", width: "fillParent" }} /> - <StatesColumn href="#not-visited" icon="home" mode="primary" size={{ height: "medium" }} title="Home" /> - </DxcFlex> + </ExampleContainer> <Title title="Secondary" theme="light" level={3} /> + <Title title="Default" theme="light" level={4} /> <DxcFlex> - <StatesColumn href="#not-visited" label="Button Link" mode="secondary" size={{ height: "medium" }} /> - <StatesColumn href="#not-visited" label="Button Link" icon="home" mode="secondary" size={{ height: "medium" }} /> - <StatesColumn - href="#not-visited" - label="Button Link" - icon="home" - iconPosition="after" - mode="secondary" - size={{ height: "medium" }} - /> - <StatesColumn href="#not-visited" icon="home" mode="secondary" size={{ height: "medium" }} title="Home" /> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Disabled" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "medium" }} disabled /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "medium" }} + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "medium" }} + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon="home" + mode="secondary" + size={{ height: "medium" }} + title="Home" + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "medium" }} + title="Facebook" + disabled + /> + </ExampleContainer> </DxcFlex> <Title title="Tertiary" theme="light" level={3} /> + <Title title="Default" theme="light" level={4} /> <DxcFlex> - <StatesColumn href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "medium" }} /> - <StatesColumn href="#not-visited" label="Button Link" icon="home" mode="tertiary" size={{ height: "medium" }} /> - <StatesColumn - href="#not-visited" - label="Button Link" - icon="home" - iconPosition="after" - mode="tertiary" - size={{ height: "medium" }} - /> - <StatesColumn href="#not-visited" icon="home" mode="tertiary" size={{ height: "medium" }} title="Home" /> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="tertiary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="tertiary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="tertiary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="tertiary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="tertiary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="tertiary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="tertiary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="tertiary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Disabled" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "medium" }} disabled /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="tertiary" + size={{ height: "medium" }} + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "medium" }} + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon="home" + mode="tertiary" + size={{ height: "medium" }} + title="Home" + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "medium" }} + title="Facebook" + disabled + /> + </ExampleContainer> </DxcFlex> <Title title="Large" theme="light" level={2} /> <Title title="Primary" theme="light" level={3} /> + <Title title="Default" theme="light" level={4} /> <DxcFlex> - <StatesColumn href="#not-visited" label="Button Link" mode="primary" size={{ height: "large" }} /> - <StatesColumn href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "large" }} /> - <StatesColumn + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Disabled" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "large" }} disabled /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="primary" + size={{ height: "large" }} + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "large" }} + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon="home" + mode="primary" + size={{ height: "large" }} + title="Home" + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "large" }} + title="Facebook" + disabled + /> + </ExampleContainer> + </DxcFlex> + <Title title="Width" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "large", width: "small" }} + title="Facebook" + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Medium" mode="primary" size={{ height: "large", width: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Large" mode="primary" size={{ height: "large", width: "large" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Fit content" + mode="primary" + size={{ height: "large", width: "fitContent" }} + /> + </ExampleContainer> + </DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" - label="Button Link" - icon="home" - iconPosition="after" + label="Fill parent" mode="primary" - size={{ height: "large" }} + size={{ height: "large", width: "fillParent" }} /> - <StatesColumn href="#not-visited" icon="home" mode="primary" size={{ height: "large" }} title="Home" /> - </DxcFlex> + </ExampleContainer> <Title title="Secondary" theme="light" level={3} /> + <Title title="Default" theme="light" level={4} /> <DxcFlex> - <StatesColumn href="#not-visited" label="Button Link" mode="secondary" size={{ height: "large" }} /> - <StatesColumn href="#not-visited" label="Button Link" icon="home" mode="secondary" size={{ height: "large" }} /> - <StatesColumn - href="#not-visited" - label="Button Link" - icon="home" - iconPosition="after" - mode="secondary" - size={{ height: "large" }} - /> - <StatesColumn href="#not-visited" icon="home" mode="secondary" size={{ height: "large" }} title="Home" /> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Disabled" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "large" }} disabled /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "large" }} + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "large" }} + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon="home" + mode="secondary" + size={{ height: "large" }} + title="Home" + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "large" }} + title="Facebook" + disabled + /> + </ExampleContainer> </DxcFlex> <Title title="Tertiary" theme="light" level={3} /> + <Title title="Default" theme="light" level={4} /> <DxcFlex> - <StatesColumn href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "large" }} /> - <StatesColumn href="#not-visited" label="Button Link" icon="home" mode="tertiary" size={{ height: "large" }} /> - <StatesColumn - href="#not-visited" - label="Button Link" - icon="home" - iconPosition="after" - mode="tertiary" - size={{ height: "large" }} - /> - <StatesColumn href="#not-visited" icon="home" mode="tertiary" size={{ height: "large" }} title="Home" /> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Disabled" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "large" }} disabled /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="tertiary" + size={{ height: "large" }} + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "large" }} + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon="home" + mode="tertiary" + size={{ height: "large" }} + title="Home" + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "large" }} + title="Facebook" + disabled + /> + </ExampleContainer> </DxcFlex> </> ); @@ -262,6 +3536,7 @@ const NestedTooltip = () => ( ); type Story = StoryObj<typeof DxcButtonLink>; + export const Chromatic: Story = { render: ButtonLink, }; diff --git a/packages/lib/src/button-link/ButtonLink.tsx b/packages/lib/src/button-link/ButtonLink.tsx index 1d0f2edee..749072bfd 100644 --- a/packages/lib/src/button-link/ButtonLink.tsx +++ b/packages/lib/src/button-link/ButtonLink.tsx @@ -39,6 +39,19 @@ const ButtonLink = styled.a<{ }}; `; +const IconContainer = styled.div<{ + size: ButtonSize; +}>` + display: flex; + font-size: ${({ size }) => + size.height === "medium" || size.height === "small" ? "var(--height-xxs)" : "var(--height-s)"}; + svg { + height: ${({ size }) => + size.height === "medium" || size.height === "small" ? "var(--height-xxs)" : "var(--height-s)"}; + width: ${({ size }) => (size.height === "medium" || size.height === "small" ? "16" : "24")}px; + } +`; + const DxcButtonLink = ({ disabled, href, @@ -72,7 +85,7 @@ const DxcButtonLink = ({ {...otherProps} > {label} - {icon && <span>{typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}</span>} + {icon && <IconContainer size={size}>{typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}</IconContainer>} </ButtonLink> </Tooltip> ); From 07259e272a4921c12f563b1e318758cfc48e645d Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso <pfelguerosogalguera@gmail.com> Date: Wed, 4 Nov 2026 13:03:11 +0100 Subject: [PATCH 6/8] Fix types when no label o icon is set --- .../screens/common/componentsList.json | 12 +++---- .../button-link/code/ButtonLinkCodePage.tsx | 7 ++-- .../src/button-link/ButtonLink.stories.tsx | 1 + packages/lib/src/button-link/types.ts | 34 ++++++++++++++----- 4 files changed, 37 insertions(+), 17 deletions(-) diff --git a/apps/website/screens/common/componentsList.json b/apps/website/screens/common/componentsList.json index 369a2a6cc..5f90fd9bc 100644 --- a/apps/website/screens/common/componentsList.json +++ b/apps/website/screens/common/componentsList.json @@ -123,12 +123,6 @@ "status": "stable", "icon": "smart_button" }, - { - "label": "Button link", - "path": "/components/button-link", - "status": "stable", - "icon": "smart_button" - }, { "label": "Checkbox", "path": "/components/checkbox", @@ -297,6 +291,12 @@ "status": "stable", "icon": "arrow_back" }, + { + "label": "Button link", + "path": "/components/button-link", + "status": "stable", + "icon": "smart_button" + }, { "label": "Contextual menu", "path": "/components/contextual-menu", diff --git a/apps/website/screens/components/button-link/code/ButtonLinkCodePage.tsx b/apps/website/screens/components/button-link/code/ButtonLinkCodePage.tsx index 7574015f0..23d2c2630 100644 --- a/apps/website/screens/components/button-link/code/ButtonLinkCodePage.tsx +++ b/apps/website/screens/components/button-link/code/ButtonLinkCodePage.tsx @@ -57,7 +57,8 @@ const sections = [ </DxcLink>{" "} name or SVG element as the icon that will be placed next to the link text. When using Material Symbols, replace spaces with underscores. By default they are outlined if you want it to be filled prefix the - symbol name with <TableCode>"filled_"</TableCode>. + symbol name with <TableCode>"filled_"</TableCode>. Required if no <TableCode>label</TableCode> is + provided. </td> <td>-</td> </tr> @@ -76,7 +77,9 @@ const sections = [ <td> <TableCode>string</TableCode> </td> - <td>Text to be placed in the button link.</td> + <td> + Text to be placed in the button link. Required if no <TableCode>icon</TableCode> is provided. + </td> <td>-</td> </tr> <tr> diff --git a/packages/lib/src/button-link/ButtonLink.stories.tsx b/packages/lib/src/button-link/ButtonLink.stories.tsx index 6ae347b37..dad14a19a 100644 --- a/packages/lib/src/button-link/ButtonLink.stories.tsx +++ b/packages/lib/src/button-link/ButtonLink.stories.tsx @@ -38,6 +38,7 @@ const facebookIcon = ( const ButtonLink = () => ( <> + <DxcButtonLink href="#" /> <Title title="Default size" theme="light" level={2} /> <Title title="Primary" theme="light" level={3} /> <Title title="Default" theme="light" level={4} /> diff --git a/packages/lib/src/button-link/types.ts b/packages/lib/src/button-link/types.ts index 36f7309fc..f83d2071e 100644 --- a/packages/lib/src/button-link/types.ts +++ b/packages/lib/src/button-link/types.ts @@ -1,7 +1,7 @@ import { SVG } from "../common/types"; import type { ButtonMode, ButtonSize } from "../button/types"; -export type ButtonLinkProps = { +type CommonProps = { /** * If true, the link will be disabled. */ @@ -10,18 +10,10 @@ export type ButtonLinkProps = { * Page to be opened when the user clicks on the link. */ href: string; - /** - * Material Symbol name or SVG element as the icon that will be placed next to the link text. - */ - icon?: string | SVG; /** * Indicates the position of the icon in the component. */ iconPosition?: "before" | "after"; - /** - * Text to be placed in the button link. - */ - label?: string; /** * The available button link modes. */ @@ -54,4 +46,28 @@ export type ButtonLinkProps = { title?: string; }; +type LabelProps = { + /** + * Material Symbol name or SVG element as the icon that will be placed next to the link text. + */ + icon?: string | SVG; + /** + * Text to be placed in the button link. + */ + label: string; +}; + +type IconProps = { + /** + * Material Symbol name or SVG element as the icon that will be placed next to the link text. + */ + icon: string | SVG; + /** + * Text to be placed in the button link. + */ + label?: string; +}; + +export type ButtonLinkProps = CommonProps & (LabelProps | IconProps); + export type { ButtonLinkProps as default }; From 596230a606fee62ceb85bb4242046a747e913410 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso <pfelguerosogalguera@gmail.com> Date: Thu, 5 Nov 2026 10:55:43 +0100 Subject: [PATCH 7/8] Fix accessibility issues, document them and add icon to the componentList --- .../screens/common/componentsList.json | 2 +- .../button-link/code/ButtonLinkCodePage.tsx | 16 ++++++++++--- .../src/button-link/ButtonLink.stories.tsx | 3 +-- packages/lib/src/button-link/ButtonLink.tsx | 3 ++- packages/lib/src/button-link/types.ts | 23 +++++++++++++++++-- 5 files changed, 38 insertions(+), 9 deletions(-) diff --git a/apps/website/screens/common/componentsList.json b/apps/website/screens/common/componentsList.json index 5f90fd9bc..6921ee03e 100644 --- a/apps/website/screens/common/componentsList.json +++ b/apps/website/screens/common/componentsList.json @@ -295,7 +295,7 @@ "label": "Button link", "path": "/components/button-link", "status": "stable", - "icon": "smart_button" + "icon": "outbound" }, { "label": "Contextual menu", diff --git a/apps/website/screens/components/button-link/code/ButtonLinkCodePage.tsx b/apps/website/screens/components/button-link/code/ButtonLinkCodePage.tsx index 23d2c2630..2cf28a274 100644 --- a/apps/website/screens/components/button-link/code/ButtonLinkCodePage.tsx +++ b/apps/website/screens/components/button-link/code/ButtonLinkCodePage.tsx @@ -23,6 +23,17 @@ const sections = [ </tr> </thead> <tbody> + <tr> + <td>ariaLabel</td> + <td> + <TableCode>string</TableCode> + </td> + <td> + Text to be used as aria-label for the button link. If provided, it takes precedence over the label as the + accessible name. It will be required if no <Code>label</Code> or <Code>title</Code> are provided. + </td> + <td>-</td> + </tr> <tr> <td>disabled</td> <td> @@ -57,8 +68,7 @@ const sections = [ </DxcLink>{" "} name or SVG element as the icon that will be placed next to the link text. When using Material Symbols, replace spaces with underscores. By default they are outlined if you want it to be filled prefix the - symbol name with <TableCode>"filled_"</TableCode>. Required if no <TableCode>label</TableCode> is - provided. + symbol name with <TableCode>"filled_"</TableCode>. Required if no <Code>label</Code> is provided. </td> <td>-</td> </tr> @@ -78,7 +88,7 @@ const sections = [ <TableCode>string</TableCode> </td> <td> - Text to be placed in the button link. Required if no <TableCode>icon</TableCode> is provided. + Text to be placed in the button link. Required if no <Code>icon</Code> is provided. </td> <td>-</td> </tr> diff --git a/packages/lib/src/button-link/ButtonLink.stories.tsx b/packages/lib/src/button-link/ButtonLink.stories.tsx index dad14a19a..6ebcb8fff 100644 --- a/packages/lib/src/button-link/ButtonLink.stories.tsx +++ b/packages/lib/src/button-link/ButtonLink.stories.tsx @@ -38,7 +38,6 @@ const facebookIcon = ( const ButtonLink = () => ( <> - <DxcButtonLink href="#" /> <Title title="Default size" theme="light" level={2} /> <Title title="Primary" theme="light" level={3} /> <Title title="Default" theme="light" level={4} /> @@ -71,7 +70,7 @@ const ButtonLink = () => ( <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="primary" /> </ExampleContainer> <ExampleContainer pseudoState="pseudo-hover"> - <DxcButtonLink href="#not-visited" icon="home" mode="primary" title="Home" /> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" title="Home" ariaLabel="Home" /> </ExampleContainer> <ExampleContainer pseudoState="pseudo-hover"> <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="primary" title="Facebook" /> diff --git a/packages/lib/src/button-link/ButtonLink.tsx b/packages/lib/src/button-link/ButtonLink.tsx index 749072bfd..dcfb8ad11 100644 --- a/packages/lib/src/button-link/ButtonLink.tsx +++ b/packages/lib/src/button-link/ButtonLink.tsx @@ -58,6 +58,7 @@ const DxcButtonLink = ({ icon, iconPosition = "before", label, + ariaLabel, mode = "primary", newWindow, onClick, @@ -75,7 +76,7 @@ const DxcButtonLink = ({ href={!disabled && href ? href : undefined} target={href ? (newWindow ? "_blank" : "_self") : undefined} aria-disabled={disabled} - aria-label={label || title} + aria-label={ariaLabel || label || title} disabled={disabled} $mode={mode} size={size} diff --git a/packages/lib/src/button-link/types.ts b/packages/lib/src/button-link/types.ts index f83d2071e..fd75b7009 100644 --- a/packages/lib/src/button-link/types.ts +++ b/packages/lib/src/button-link/types.ts @@ -41,7 +41,7 @@ type CommonProps = { tabIndex?: number; /** * Text to be displayed as a tooltip when hovering over the link. - * If there is no label, the title will be used as the aria-label. + * If there is no aria-label or label, the title will be used as the aria-label. */ title?: string; }; @@ -55,6 +55,10 @@ type LabelProps = { * Text to be placed in the button link. */ label: string; + /** + * Text to be used as aria-label for the button link. If provided, it takes precedence over the label as the accessible name. + */ + ariaLabel?: string; }; type IconProps = { @@ -66,7 +70,22 @@ type IconProps = { * Text to be placed in the button link. */ label?: string; -}; +} & ( + | { + /** + * Text to be displayed as a tooltip when hovering over the link. Required when no ariaLabel is provided. + */ + title: string; + ariaLabel?: string; + } + | { + /** + * Text to be used as aria-label for the button link. Required when no title is provided. + */ + ariaLabel: string; + title?: string; + } +); export type ButtonLinkProps = CommonProps & (LabelProps | IconProps); From 2a343073b35c7ac43472e62c0c68277187d90dee Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso <pfelguerosogalguera@gmail.com> Date: Fri, 6 Nov 2026 13:21:43 +0100 Subject: [PATCH 8/8] remove semantic example --- .../components/button-link/code/ButtonLinkCodePage.tsx | 6 +++--- .../button-link/code/examples/{semantic.tsx => modes.tsx} | 8 +++----- 2 files changed, 6 insertions(+), 8 deletions(-) rename apps/website/screens/components/button-link/code/examples/{semantic.tsx => modes.tsx} (51%) diff --git a/apps/website/screens/components/button-link/code/ButtonLinkCodePage.tsx b/apps/website/screens/components/button-link/code/ButtonLinkCodePage.tsx index 2cf28a274..2044bf492 100644 --- a/apps/website/screens/components/button-link/code/ButtonLinkCodePage.tsx +++ b/apps/website/screens/components/button-link/code/ButtonLinkCodePage.tsx @@ -6,7 +6,7 @@ import StatusBadge from "@/common/StatusBadge"; import Example from "@/common/example/Example"; import basicUsage from "./examples/basicUsage"; import icons from "./examples/icons"; -import semantic from "./examples/semantic"; +import modes from "./examples/modes"; import sizes from "./examples/sizes"; const sections = [ @@ -184,8 +184,8 @@ const sections = [ content: <Example example={icons} defaultIsVisible />, }, { - title: "Semantic", - content: <Example example={semantic} defaultIsVisible />, + title: "Modes", + content: <Example example={modes} defaultIsVisible />, }, { title: "Size", diff --git a/apps/website/screens/components/button-link/code/examples/semantic.tsx b/apps/website/screens/components/button-link/code/examples/modes.tsx similarity index 51% rename from apps/website/screens/components/button-link/code/examples/semantic.tsx rename to apps/website/screens/components/button-link/code/examples/modes.tsx index e3286b905..aa58acb2d 100644 --- a/apps/website/screens/components/button-link/code/examples/semantic.tsx +++ b/apps/website/screens/components/button-link/code/examples/modes.tsx @@ -4,11 +4,9 @@ const code = `() => { return ( <DxcInset space="var(--spacing-padding-xl)"> <DxcFlex gap="var(--spacing-gap-l)"> - <DxcButtonLink href="#" label="Search" /> - <DxcButtonLink href="#" semantic="error" label="Cancel" /> - <DxcButtonLink href="#" semantic="warning" label="Report" /> - <DxcButtonLink href="#" semantic="success" label="Confirm" /> - <DxcButtonLink href="#" semantic="info" label="Details" /> + <DxcButtonLink href="#" label="Primary" /> + <DxcButtonLink href="#" mode="secondary" label="Secondary" /> + <DxcButtonLink href="#" mode="tertiary" label="Tertiary" /> </DxcFlex> </DxcInset> );