diff --git a/.changeset/lazy-gorillas-admire.md b/.changeset/lazy-gorillas-admire.md new file mode 100644 index 0000000000..0ad335a666 --- /dev/null +++ b/.changeset/lazy-gorillas-admire.md @@ -0,0 +1,6 @@ +--- +'@swisspost/design-system-styles': minor +'@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. diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss index b768d3e6ea..3cc1177fed 100644 --- a/packages/documentation/.storybook/styles/preview.scss +++ b/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 { diff --git a/packages/documentation/cypress/snapshots/components/link.snapshot.ts b/packages/documentation/cypress/snapshots/components/link.snapshot.ts new file mode 100644 index 0000000000..a455162ad4 --- /dev/null +++ b/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] }); + }); +}); diff --git a/packages/documentation/src/stories/components/link/link.docs.mdx b/packages/documentation/src/stories/components/link/link.docs.mdx new file mode 100644 index 0000000000..44827d14c3 --- /dev/null +++ b/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'; + + + +
+ # Link + + +
+
+ Use links to navigate users to another location, such as a different site, resource, or section within the same page. +
+ + +
+ +
diff --git a/packages/documentation/src/stories/components/link/link.snapshot.stories.ts b/packages/documentation/src/stories/components/link/link.snapshot.stories.ts new file mode 100644 index 0000000000..dfab463bd6 --- /dev/null +++ b/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` +
+ ${['bg-white', 'bg-dark'].map( + bg => html` +
+ ${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, + ), + )} +
+ `, + )} +
+ `; + }, +}; diff --git a/packages/documentation/src/stories/components/link/link.stories.ts b/packages/documentation/src/stories/components/link/link.stories.ts new file mode 100644 index 0000000000..0b59678ee8 --- /dev/null +++ b/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: 'Foundations/Typography/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` ${args.text} `; + }, +}; diff --git a/packages/styles/src/elements/_index.scss b/packages/styles/src/elements/_index.scss index e4233fb679..70bc8dd8ac 100644 --- a/packages/styles/src/elements/_index.scss +++ b/packages/styles/src/elements/_index.scss @@ -1,5 +1,6 @@ @use 'reset'; @use 'body'; +@use 'anchor'; @use 'paragraph'; @use 'heading'; @use 'fieldset-legend'; diff --git a/packages/styles/src/elements/anchor.scss b/packages/styles/src/elements/anchor.scss new file mode 100644 index 0000000000..2903f40ada --- /dev/null +++ b/packages/styles/src/elements/anchor.scss @@ -0,0 +1,37 @@ +@use '../functions/tokens'; +@use '../tokens/elements'; +@use '../mixins/utilities'; + +tokens.$default-map: elements.$post-link; + +a { + text-decoration: tokens.get('link-decoration'); + border-radius: tokens.get('link-border-radius'); + color: inherit; + + &:hover { + color: tokens.get('link-hover-fg'); + } + + @include utilities.focus-style( + $offset: tokens.get('link-focus-outline-offset'), + $width: tokens.get('link-focus-outline-width'), + $color: tokens.get('link-focus-outline-color'), + $style: tokens.get('link-focus-outline-style') + ); + + @include utilities.high-contrast-mode() { + &, + &:focus { + color: LinkText !important; + } + + &:hover { + text-decoration-thickness: 2px; + } + + &:visited { + color: VisitedText; + } + } +} diff --git a/packages/styles/src/utilities/temp/_legacy.scss b/packages/styles/src/utilities/temp/_legacy.scss index 3a963fc06c..3d3743bc57 100644 --- a/packages/styles/src/utilities/temp/_legacy.scss +++ b/packages/styles/src/utilities/temp/_legacy.scss @@ -65,31 +65,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; - } - } -}