From 3c4889ca18f8fa866533f4f26cd27eab8f726047 Mon Sep 17 00:00:00 2001 From: "Zherdetska Alona, IT21.1" Date: Tue, 24 Sep 2024 15:26:03 +0200 Subject: [PATCH 01/18] chore(style): delete the initial link styles --- packages/styles/src/components/utilities.scss | 28 ------------------- 1 file changed, 28 deletions(-) diff --git a/packages/styles/src/components/utilities.scss b/packages/styles/src/components/utilities.scss index 4ab4e9c196..72a6317209 100644 --- a/packages/styles/src/components/utilities.scss +++ b/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; - } - } -} From 735e7069fd7f46aa24e2250f55ecbf79412ffbff Mon Sep 17 00:00:00 2001 From: "Zherdetska Alona, IT21.1" Date: Tue, 24 Sep 2024 15:26:50 +0200 Subject: [PATCH 02/18] feat(token): text-link token was implemented --- packages/styles/src/elements/link.scss | 30 ++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 packages/styles/src/elements/link.scss diff --git a/packages/styles/src/elements/link.scss b/packages/styles/src/elements/link.scss new file mode 100644 index 0000000000..2c9f2c13cf --- /dev/null +++ b/packages/styles/src/elements/link.scss @@ -0,0 +1,30 @@ +@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'); + } + + &:focus { + outline: tokens.get('post-link', 'focus-outline-color') + tokens.get('post-link', 'focus-outline-style') tokens.get('post-link', 'focus-outline-width'); + outline-offset: tokens.get('post-link', 'focus-outline-offset'); + } + + @include utilities.high-contrast-mode() { + &, + &:visited, + &:focus, + &:hover { + color: LinkText !important; + } + } +} From 441368ed7b2dbf43cfb8d5ce0ff4d0f795add199 Mon Sep 17 00:00:00 2001 From: "Zherdetska Alona, IT21.1" Date: Tue, 24 Sep 2024 15:27:45 +0200 Subject: [PATCH 03/18] feat(token): import link.scss to the _index.scss --- packages/styles/src/elements/_index.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/styles/src/elements/_index.scss b/packages/styles/src/elements/_index.scss index 76b6e5d06c..94aca2eda1 100644 --- a/packages/styles/src/elements/_index.scss +++ b/packages/styles/src/elements/_index.scss @@ -1,2 +1,3 @@ @use 'reset'; @use 'body'; +@use 'link'; From 11d7d5e3d8464818e509fc810f92f21090fac8b3 Mon Sep 17 00:00:00 2001 From: "Zherdetska Alona, IT21.1" Date: Wed, 25 Sep 2024 11:20:25 +0200 Subject: [PATCH 04/18] fix(style): remove unnecessary mixin usage for the link --- packages/documentation/.storybook/styles/preview.scss | 7 ------- 1 file changed, 7 deletions(-) diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss index e8e8a9784f..27be783b36 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 { From a570b133d5eba73be651eac088fd86a2848fcfbf Mon Sep 17 00:00:00 2001 From: "Zherdetska Alona, IT21.1" Date: Thu, 26 Sep 2024 09:40:29 +0200 Subject: [PATCH 05/18] chore(docs): implement the documentation for the link component --- .../src/stories/components/link/link.docs.mdx | 25 +++++++++ .../components/link/link.snapshot.stories.ts | 37 +++++++++++++ .../stories/components/link/link.stories.ts | 52 +++++++++++++++++++ 3 files changed, 114 insertions(+) create mode 100644 packages/documentation/src/stories/components/link/link.docs.mdx create mode 100644 packages/documentation/src/stories/components/link/link.snapshot.stories.ts create mode 100644 packages/documentation/src/stories/components/link/link.stories.ts 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..01a6591e72 --- /dev/null +++ b/packages/documentation/src/stories/components/link/link.docs.mdx @@ -0,0 +1,25 @@ +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. +
+ +Apply the override classes for custom styling as needed. + + +
+ +
+ + 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..e9d2bbd524 --- /dev/null +++ b/packages/documentation/src/stories/components/link/link.snapshot.stories.ts @@ -0,0 +1,37 @@ +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..7434d1fb4c --- /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: 'link-component', + 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` ${args.text} `; + }, +}; From 6990166a445ae2efb92d503c514b73647ac3c3f8 Mon Sep 17 00:00:00 2001 From: "Zherdetska Alona, IT21.1" Date: Thu, 26 Sep 2024 09:56:52 +0200 Subject: [PATCH 06/18] chore(changeset): implement a changeset --- .changeset/lazy-gorillas-admire.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/lazy-gorillas-admire.md diff --git a/.changeset/lazy-gorillas-admire.md b/.changeset/lazy-gorillas-admire.md new file mode 100644 index 0000000000..c8bc4f872b --- /dev/null +++ b/.changeset/lazy-gorillas-admire.md @@ -0,0 +1,6 @@ +--- +'@swisspost/design-system-styles': major +'@swisspost/design-system-documentation': minor +--- + +Tokenized the Link component styles, added a documentation page outlining the usage of the component. From 120da6fda60828c5e1ff5e037abade565860578d Mon Sep 17 00:00:00 2001 From: "Zherdetska Alona, IT21.1" Date: Thu, 26 Sep 2024 10:30:40 +0200 Subject: [PATCH 07/18] feat(styles): use focus-style mixin for link focus --- packages/styles/src/elements/link.scss | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/styles/src/elements/link.scss b/packages/styles/src/elements/link.scss index 2c9f2c13cf..2f9e28efa9 100644 --- a/packages/styles/src/elements/link.scss +++ b/packages/styles/src/elements/link.scss @@ -14,9 +14,13 @@ a { } &:focus { - outline: tokens.get('post-link', 'focus-outline-color') - tokens.get('post-link', 'focus-outline-style') tokens.get('post-link', 'focus-outline-width'); - outline-offset: tokens.get('post-link', 'focus-outline-offset'); + @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() { From 4466e4615da1f417557684d6f7e2ca9a17439d6e Mon Sep 17 00:00:00 2001 From: "Zherdetska Alona, IT21.1" Date: Thu, 26 Sep 2024 14:03:53 +0200 Subject: [PATCH 08/18] fix(import): Eliminate the import of the styles --- .../documentation/src/stories/components/link/link.docs.mdx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/documentation/src/stories/components/link/link.docs.mdx b/packages/documentation/src/stories/components/link/link.docs.mdx index 01a6591e72..b2306606e9 100644 --- a/packages/documentation/src/stories/components/link/link.docs.mdx +++ b/packages/documentation/src/stories/components/link/link.docs.mdx @@ -21,5 +21,3 @@ Apply the override classes for custom styling as needed.
- - From 41666eeebe902489514ca988dba303a27dd1dd66 Mon Sep 17 00:00:00 2001 From: "Zherdetska Alona, IT21.1" Date: Thu, 3 Oct 2024 12:20:03 +0200 Subject: [PATCH 09/18] chore(styles): remove redundant &:focus selector --- packages/styles/src/elements/link.scss | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/styles/src/elements/link.scss b/packages/styles/src/elements/link.scss index 2f9e28efa9..7bebfc6435 100644 --- a/packages/styles/src/elements/link.scss +++ b/packages/styles/src/elements/link.scss @@ -13,15 +13,13 @@ a { color: tokens.get('post-link', 'hover-fg'); } - &:focus { - @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.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() { &, From cda79ca0eb11d645faa9fda72b19cee365ab4eb6 Mon Sep 17 00:00:00 2001 From: "Zherdetska Alona, IT21.1" Date: Thu, 3 Oct 2024 12:30:57 +0200 Subject: [PATCH 10/18] chore(docs): add random UUID to the link stories --- .../documentation/src/stories/components/link/link.stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/src/stories/components/link/link.stories.ts b/packages/documentation/src/stories/components/link/link.stories.ts index 7434d1fb4c..7585277539 100644 --- a/packages/documentation/src/stories/components/link/link.stories.ts +++ b/packages/documentation/src/stories/components/link/link.stories.ts @@ -3,7 +3,7 @@ import { html } from 'lit/static-html.js'; import { MetaComponent } from '@root/types'; const meta: MetaComponent = { - id: 'link-component', + id: '6f359d06-bca5-4983-b588-c8c790531642', title: 'Components/Link', tags: ['package:HTML'], parameters: { From 52676e667a90d13aa83d55f29e4519e078830710 Mon Sep 17 00:00:00 2001 From: "Zherdetska Alona, IT21.1" Date: Thu, 3 Oct 2024 13:55:40 +0200 Subject: [PATCH 11/18] fix(changeset): adjust the changeset statement --- .changeset/lazy-gorillas-admire.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/lazy-gorillas-admire.md b/.changeset/lazy-gorillas-admire.md index c8bc4f872b..bcbdaeb6de 100644 --- a/.changeset/lazy-gorillas-admire.md +++ b/.changeset/lazy-gorillas-admire.md @@ -3,4 +3,4 @@ '@swisspost/design-system-documentation': minor --- -Tokenized the Link component styles, added a documentation page outlining the usage of the component. +Updated the Link component styles to align with the new design, added a documentation page outlining the usage of the component. From 0164e0d573bb8adea6811b7b23b5ee0b20d2d919 Mon Sep 17 00:00:00 2001 From: "Zherdetska Alona, IT21.1" Date: Thu, 3 Oct 2024 18:25:24 +0200 Subject: [PATCH 12/18] chore(snapshot): create the LinkSnapshot --- .../cypress/snapshots/components/link.snapshot.ts | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 packages/documentation/cypress/snapshots/components/link.snapshot.ts 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] }); + }); +}); From 3f2f5470347ea012b3604dd732f4ac17af6e9a84 Mon Sep 17 00:00:00 2001 From: "Zherdetska Alona, IT21.1" Date: Thu, 3 Oct 2024 22:11:01 +0200 Subject: [PATCH 13/18] fix(docs): remove redundant info --- .../documentation/src/stories/components/link/link.docs.mdx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/documentation/src/stories/components/link/link.docs.mdx b/packages/documentation/src/stories/components/link/link.docs.mdx index b2306606e9..44827d14c3 100644 --- a/packages/documentation/src/stories/components/link/link.docs.mdx +++ b/packages/documentation/src/stories/components/link/link.docs.mdx @@ -15,8 +15,6 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx'; Use links to navigate users to another location, such as a different site, resource, or section within the same page. -Apply the override classes for custom styling as needed. -
From 6e0d6fbe8c1ae654eff5ad932f7deaefa2ab97f0 Mon Sep 17 00:00:00 2001 From: "Zherdetska Alona, IT21.1" Date: Thu, 3 Oct 2024 22:13:18 +0200 Subject: [PATCH 14/18] fix(docs): set data-color-mode attribute in link snapshot stories --- .../src/stories/components/link/link.snapshot.stories.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/documentation/src/stories/components/link/link.snapshot.stories.ts b/packages/documentation/src/stories/components/link/link.snapshot.stories.ts index e9d2bbd524..dfab463bd6 100644 --- a/packages/documentation/src/stories/components/link/link.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/link/link.snapshot.stories.ts @@ -18,7 +18,10 @@ export const Link: Story = {
${['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'], From 0cb8fcd9d0db4eff43bd6aa1256672cc6d2316b3 Mon Sep 17 00:00:00 2001 From: "Zherdetska Alona, IT21.1" Date: Thu, 3 Oct 2024 22:15:31 +0200 Subject: [PATCH 15/18] fix(styles): update high-contrast mode link styling --- packages/styles/src/elements/link.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/styles/src/elements/link.scss b/packages/styles/src/elements/link.scss index 7bebfc6435..fb0e17d257 100644 --- a/packages/styles/src/elements/link.scss +++ b/packages/styles/src/elements/link.scss @@ -22,10 +22,10 @@ a { ); @include utilities.high-contrast-mode() { - &, - &:visited, - &:focus, - &:hover { + color: CanvasText !important; + + &:hover, + &:focus { color: LinkText !important; } } From 0d2a3775046fbc4ef7c0387e679292c592f15917 Mon Sep 17 00:00:00 2001 From: "Zherdetska Alona, IT21.1" Date: Fri, 4 Oct 2024 11:43:39 +0200 Subject: [PATCH 16/18] fix(styles): adjust the style for the visited state in the high-contrast-mode --- packages/styles/src/elements/link.scss | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/styles/src/elements/link.scss b/packages/styles/src/elements/link.scss index fb0e17d257..79479aa087 100644 --- a/packages/styles/src/elements/link.scss +++ b/packages/styles/src/elements/link.scss @@ -22,11 +22,14 @@ a { ); @include utilities.high-contrast-mode() { - color: CanvasText !important; - - &:hover, - &:focus { + &, + &:focus, + &:hover { color: LinkText !important; } } + + &:visited { + color: VisitedText; + } } From 361f044e4a47e4daa5c7dfa03e57f42de62c304d Mon Sep 17 00:00:00 2001 From: "Zherdetska Alona, IT21.1" Date: Fri, 4 Oct 2024 16:00:18 +0200 Subject: [PATCH 17/18] chore(styles): refine the Link styles in high-contrast mode --- packages/styles/src/elements/link.scss | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/styles/src/elements/link.scss b/packages/styles/src/elements/link.scss index 79479aa087..e56e633a3c 100644 --- a/packages/styles/src/elements/link.scss +++ b/packages/styles/src/elements/link.scss @@ -23,13 +23,16 @@ a { @include utilities.high-contrast-mode() { &, - &:focus, - &:hover { + &:focus { color: LinkText !important; } - } - &:visited { - color: VisitedText; + &:hover { + text-decoration: none; + } + + &:visited { + color: VisitedText; + } } } From 46f0ca19cc3fec4c1190ee38c56c6962abfbf787 Mon Sep 17 00:00:00 2001 From: Alona Zherdetska <138328641+alionazherdetska@users.noreply.github.com> Date: Mon, 7 Oct 2024 15:21:49 +0200 Subject: [PATCH 18/18] Update .changeset/lazy-gorillas-admire.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Oliver Schürch --- .changeset/lazy-gorillas-admire.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/lazy-gorillas-admire.md b/.changeset/lazy-gorillas-admire.md index bcbdaeb6de..0ad335a666 100644 --- a/.changeset/lazy-gorillas-admire.md +++ b/.changeset/lazy-gorillas-admire.md @@ -1,5 +1,5 @@ --- -'@swisspost/design-system-styles': major +'@swisspost/design-system-styles': minor '@swisspost/design-system-documentation': minor ---