feat(styles): tokenize the Link component styles

.changeset/lazy-gorillas-admire.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-styles': major
+'@swisspost/design-system-documentation': minor
+---
+
+Updated the Link component styles to align with the new design, added a documentation page outlining the usage of the component.

packages/documentation/.storybook/styles/preview.scss

@@ -68,13 +68,6 @@
       }
     }
 
-    // General styles for content
-    a:not(.sb-story a) {
-      @include utilities.focus-style() {
-        border-radius: post.$border-radius;
-      }
-    }
-
     // Style buttons related to the current page next to the tile
     .docs-title,
     .docs-title nav {

packages/documentation/cypress/snapshots/components/link.snapshot.ts

@@ -0,0 +1,7 @@
+describe('Link', () => {
+  it('default', () => {
+    cy.visit('/iframe.html?id=snapshots--link');
+    cy.get('a', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Links', { widths: [400] });
+  });
+});

packages/documentation/src/stories/components/link/link.docs.mdx

@@ -0,0 +1,21 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+import * as LinkStories from './link.stories';
+import StylesPackageImport from '@/shared/styles-package-import.mdx';
+
+<Meta of={LinkStories} />
+
+<div className="docs-title">
+  # Link
+
+  <nav>
+    <link-design of={JSON.stringify(LinkStories)}></link-design>
+  </nav>
+</div>
+<div className="lead">
+  Use links to navigate users to another location, such as a different site, resource, or section within the same page.
+</div>
+
+<Canvas sourceState="shown" of={LinkStories.Default} />
+<div className="hide-col-default">
+  <Controls of={LinkStories.Default} />
+</div>

packages/documentation/src/stories/components/link/link.snapshot.stories.ts

@@ -0,0 +1,40 @@
+import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
+import meta, { Default } from './link.stories';
+import { html } from 'lit';
+import { bombArgs } from '@/utils';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+};
+
+type Story = StoryObj;
+
+export const Link: Story = {
+  render: (_args: Args, context: StoryContext) => {
+    return html`
+      <div>
+        ${['bg-white', 'bg-dark'].map(
+          bg => html`
+            <div
+              class="${bg} d-flex flex-column gap-regular p-regular mt-regular"
+              data-color-mode="${bg === 'bg-white' ? 'light' : 'dark'}"
+            >
+              ${bombArgs({
+                text: ['Link Text', 'Lorem ipsum dolor sit amet consectetur'],
+                href: ['https://example.com', 'https://imgur.com/FKmX7dt'],
+              }).map((args: Args) =>
+                Default.render?.(
+                  { ...context.args, ...args, text: `${args.text}`, href: `${args.href}` },
+                  context,
+                ),
+              )}
+            </div>
+          `,
+        )}
+      </div>
+    `;
+  },
+};

packages/documentation/src/stories/components/link/link.stories.ts

@@ -0,0 +1,52 @@
+import type { Args, StoryObj } from '@storybook/web-components';
+import { html } from 'lit/static-html.js';
+import { MetaComponent } from '@root/types';
+
+const meta: MetaComponent = {
+  id: '6f359d06-bca5-4983-b588-c8c790531642',
+  title: 'Components/Link',
+  tags: ['package:HTML'],
+  parameters: {
+    badges: [],
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=2016-47948',
+    },
+  },
+  args: {
+    text: 'Link Text',
+    href: 'https://imgur.com/FKmX7dt',
+  },
+  argTypes: {
+    text: {
+      name: 'Text',
+      description: 'Defines the text within the link.',
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'General',
+      },
+    },
+    href: {
+      name: 'Href',
+      description: 'Defines the target URL for the link.',
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'General',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: (args: Args) => {
+    return html` <a href="${args.href}">${args.text}</a> `;
+  },
+};

packages/styles/src/components/utilities.scss

@@ -67,31 +67,3 @@ span.spacer {
     @include color-mx.colored-background($color);
   }
 }
-
-// TODO: refactor to link default styles
-.text-auto {
-  a {
-    color: inherit;
-
-    &:hover {
-      opacity: 0.8;
-    }
-  }
-}
-
-a {
-  color: var(--post-contrast-color);
-
-  &:hover {
-    color: rgba(var(--post-contrast-color-rgb), 0.8);
-  }
-
-  @include utilities.high-contrast-mode() {
-    &,
-    &:visited,
-    &:focus,
-    &:hover {
-      color: LinkText !important;
-    }
-  }
-}

packages/styles/src/elements/_index.scss

@@ -1,2 +1,3 @@
 @use 'reset';
 @use 'body';
+@use 'link';

packages/styles/src/elements/link.scss

@@ -0,0 +1,35 @@
+@use '../functions/tokens';
+@use '../tokens/elements';
+@use '../mixins/utilities';
+
+tokens.$default-map: elements.$post-link;
+
+a {
+  text-decoration: tokens.get('post-link', 'decoration');
+  border-radius: tokens.get('post-link', 'border-radius');
+  color: inherit;
+
+  &:hover {
+    color: tokens.get('post-link', 'hover-fg');
+  }
+
+  @include utilities.focus-style(
+    '',
+    tokens.get('post-link', 'focus-outline-offset'),
+    tokens.get('post-link', 'focus-outline-width'),
+    tokens.get('post-link', 'focus-outline-color'),
+    tokens.get('post-link', 'focus-outline-style')
+  );
+
+  @include utilities.high-contrast-mode() {
+    &,
+    &:focus,
+    &:hover {
+      color: LinkText !important;
+    }
+  }
+
+  &:visited {
+    color: VisitedText;
+  }
+}