Skip to content

Commit

Permalink
feat(styles): tokenize the Link component styles (#3590)
Browse files Browse the repository at this point in the history
Co-authored-by: Zherdetska Alona, IT21.1 <[email protected]>
Co-authored-by: Philipp Gfeller <[email protected]>
Co-authored-by: Oliver Schürch <[email protected]>
Co-authored-by: Alizé Debray <[email protected]>
  • Loading branch information
5 people authored Oct 16, 2024
1 parent 224f190 commit 283275b
Show file tree
Hide file tree
Showing 9 changed files with 164 additions and 35 deletions.
6 changes: 6 additions & 0 deletions .changeset/lazy-gorillas-admire.md
Original file line number Diff line number Diff line change
@@ -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.
7 changes: 0 additions & 7 deletions packages/documentation/.storybook/styles/preview.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
@@ -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] });
});
});
21 changes: 21 additions & 0 deletions packages/documentation/src/stories/components/link/link.docs.mdx
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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>
`;
},
};
52 changes: 52 additions & 0 deletions packages/documentation/src/stories/components/link/link.stories.ts
Original file line number Diff line number Diff line change
@@ -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` <a href="${args.href}">${args.text}</a> `;
},
};
1 change: 1 addition & 0 deletions packages/styles/src/elements/_index.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@use 'reset';
@use 'body';
@use 'anchor';
@use 'paragraph';
@use 'heading';
@use 'fieldset-legend';
37 changes: 37 additions & 0 deletions packages/styles/src/elements/anchor.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
28 changes: 0 additions & 28 deletions packages/styles/src/utilities/temp/_legacy.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}

0 comments on commit 283275b

Please sign in to comment.