-
Notifications
You must be signed in to change notification settings - Fork 14
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(styles): tokenize the Link component styles #3590
Changes from 27 commits
3c4889c
735e706
441368e
11d7d5e
9b39668
a570b13
6990166
53ebf2a
120da6f
4466e46
7227e98
41666ee
cda79ca
52676e6
0164e0d
3f2f547
6e0d6fb
0cb8fcd
0d2a377
361f044
46f0ca1
8b5e12f
8778447
3012ac7
f9aab11
5206224
1d74aae
c079a2c
6f6100c
c917caf
cc21ca3
76eb978
2106fd1
531b418
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
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. |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
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] }); | ||
}); | ||
}); |
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> |
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. When you create a new snapshot file you also need to create the matching visual regression test here: https://github.com/swisspost/design-system/tree/main/packages/documentation/cypress/snapshots/components
|
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> | ||
`; | ||
}, | ||
}; |
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: 'Typography/Link', | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
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> `; | ||||||
}, | ||||||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,4 @@ | ||
@use 'reset'; | ||
@use 'body'; | ||
@use 'link'; | ||
@use 'heading'; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
@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() { | ||
oliverschuerch marked this conversation as resolved.
Show resolved
Hide resolved
|
||
&, | ||
&:focus { | ||
color: LinkText !important; | ||
} | ||
|
||
&:hover { | ||
text-decoration-thickness: 2px; | ||
} | ||
|
||
&:visited { | ||
color: VisitedText; | ||
} | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This file should be added to the .gitignore file.