[minor] ButtonLink implementation

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</title>
+    </Head>
+    <ButtonLinkCodePage />
+  </>
+);
+
+Code.getLayout = (page: ReactElement) => <ButtonLinkPageLayout>{page}</ButtonLinkPageLayout>;
+
+export default Code;

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 = () => (
+  <>
+    <Head>
+      <title>Button Link — Halstack Design System</title>
+    </Head>
+    <ButtonLinkOverviewPage />
+  </>
+);
+
+Index.getLayout = (page: ReactElement) => <ButtonLinkPageLayout>{page}</ButtonLinkPageLayout>;
+
+export default Index;

apps/website/screens/common/componentsList.json

@@ -291,6 +291,12 @@
         "status": "stable",
         "icon": "arrow_back"
       },
+      {
+        "label": "Button link",
+        "path": "/components/button-link",
+        "status": "stable",
+        "icon": "outbound"
+      },
       {
         "label": "Contextual menu",
         "path": "/components/contextual-menu",

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 (
+    <DxcFlex direction="column" gap="var(--spacing-gap-xxl)">
+      <PageHeading>
+        <DxcFlex direction="column" gap="var(--spacing-gap-xl)">
+          <ComponentHeading name="Button link" />
+          <DxcParagraph>
+            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.
+          </DxcParagraph>
+          <TabsPageHeading tabs={tabs} />
+        </DxcFlex>
+      </PageHeading>
+      {children}
+    </DxcFlex>
+  );
+};
+
+export default ButtonLinkPageHeading;

apps/website/screens/components/button-link/code/ButtonLinkCodePage.tsx

@@ -0,0 +1,205 @@
+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";
+import Example from "@/common/example/Example";
+import basicUsage from "./examples/basicUsage";
+import icons from "./examples/icons";
+import modes from "./examples/modes";
+import sizes from "./examples/sizes";
+
+const sections = [
+  {
+    title: "Props",
+    content: (
+      <DxcTable>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Type</th>
+            <th>Description</th>
+            <th>Default</th>
+          </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>
+              <TableCode>boolean</TableCode>
+            </td>
+            <td>If true, the link will be disabled.</td>
+            <td>
+              <TableCode>false</TableCode>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
+                <StatusBadge status="required" />
+                href
+              </DxcFlex>
+            </td>
+            <td>
+              <TableCode>string</TableCode>
+            </td>
+            <td>Page to be opened when the user clicks on the link.</td>
+            <td>-</td>
+          </tr>
+          <tr>
+            <td>icon</td>
+            <td>
+              <TableCode>string | {"(React.ReactNode & React.SVGProps <SVGSVGElement>)"}</TableCode>
+            </td>
+            <td>
+              <DxcLink newWindow href="https://fonts.google.com/icons">
+                Material Symbol
+              </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 <Code>label</Code> is provided.
+            </td>
+            <td>-</td>
+          </tr>
+          <tr>
+            <td>iconPosition</td>
+            <td>
+              <TableCode>'before' | 'after'</TableCode>
+            </td>
+            <td>Indicates the position of the icon in the component.</td>
+            <td>
+              <TableCode>'before'</TableCode>
+            </td>
+          </tr>
+          <tr>
+            <td>label</td>
+            <td>
+              <TableCode>string</TableCode>
+            </td>
+            <td>
+              Text to be placed in the button link. Required if no <Code>icon</Code> is provided.
+            </td>
+            <td>-</td>
+          </tr>
+          <tr>
+            <td>mode</td>
+            <td>
+              <TableCode>'primary' | 'secondary' | 'tertiary'</TableCode>
+            </td>
+            <td>The available button link modes.</td>
+            <td>
+              <TableCode>'primary'</TableCode>
+            </td>
+          </tr>
+          <tr>
+            <td>newWindow</td>
+            <td>
+              <TableCode>boolean</TableCode>
+            </td>
+            <td>If true, the page is opened in a new browser tab.</td>
+            <td>
+              <TableCode>false</TableCode>
+            </td>
+          </tr>
+          <tr>
+            <td>onClick</td>
+            <td>
+              <TableCode>{"(event: React.MouseEvent<HTMLAnchorElement>) => void"}</TableCode>
+            </td>
+            <td>
+              If defined, the link will be displayed as a button. This function will be called when the user clicks the
+              link.
+            </td>
+            <td>-</td>
+          </tr>
+          <tr>
+            <td>ref</td>
+            <td>
+              <TableCode>{"React.Ref<HTMLAnchorElement>"}</TableCode>
+            </td>
+            <td>Ref of the link element.</td>
+            <td>-</td>
+          </tr>
+          <tr>
+            <td>size</td>
+            <td>
+              <TableCode>
+                {
+                  "{ height: 'small' | 'medium' | 'large'; width: 'small' | 'medium' | 'large' | 'fillParent' | 'fitContent' }"
+                }
+              </TableCode>
+            </td>
+            <td>Object used to define the dimensions of the button in terms of height and width. </td>
+            <td>
+              <TableCode>{"{ height: 'large'; width: 'fitContent' }"}</TableCode>
+            </td>
+          </tr>
+          <tr>
+            <td>tabIndex</td>
+            <td>
+              <TableCode>number</TableCode>
+            </td>
+            <td>
+              Value of the <Code>tabindex</Code> attribute.
+            </td>
+            <td>
+              <TableCode>0</TableCode>
+            </td>
+          </tr>
+          <tr>
+            <td>title</td>
+            <td>
+              <TableCode>string</TableCode>
+            </td>
+            <td>
+              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.
+            </td>
+            <td>-</td>
+          </tr>
+        </tbody>
+      </DxcTable>
+    ),
+  },
+  {
+    title: "Examples",
+    subSections: [
+      {
+        title: "Basic usage",
+        content: <Example example={basicUsage} defaultIsVisible />,
+      },
+      {
+        title: "Icons",
+        content: <Example example={icons} defaultIsVisible />,
+      },
+      {
+        title: "Modes",
+        content: <Example example={modes} defaultIsVisible />,
+      },
+      {
+        title: "Size",
+        content: <Example example={sizes} defaultIsVisible />,
+      },
+    ],
+  },
+];
+
+const ButtonLinkCodePage = () => (
+  <DxcFlex direction="column" gap="4rem">
+    <QuickNavContainer sections={sections} startHeadingLevel={2} />
+    <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/button-link/code/ButtonLinkCodePage.tsx" />
+  </DxcFlex>
+);
+
+export default ButtonLinkCodePage;

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 };

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 };

apps/website/screens/components/button-link/code/examples/modes.tsx

@@ -0,0 +1,21 @@
+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="Primary" />
+        <DxcButtonLink href="#" mode="secondary" label="Secondary" />
+        <DxcButtonLink href="#" mode="tertiary" label="Tertiary" />
+      </DxcFlex>
+    </DxcInset>
+  );
+}`;
+
+const scope = {
+  DxcButtonLink,
+  DxcFlex,
+  DxcInset,
+};
+
+export default { code, scope };

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 };