-
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
base: main
Are you sure you want to change the base?
Changes from all 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
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> |
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: '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> `; | ||
}, | ||
}; |
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() { | ||
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. The link is missing a hover and focus state on high contrast mode, you can check w3 website to know how they handle this: https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/ 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. There is also a mixin to do this in the design-system: // example
@include high-contrast-mode() {
color: LinkText;
&:hover {
color: HighlightText;
}
}
```
Here you can find he available color names: https://www.w3.org/TR/css-color-4/#css-system-colors |
||
&, | ||
&:focus { | ||
color: LinkText !important; | ||
} | ||
|
||
&:hover { | ||
text-decoration: none; | ||
} | ||
|
||
&: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.
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
*.snapshot.stories.ts
file creates this page: https://preview-3590--swisspost-design-system-next.netlify.app/iframe.html?id=snapshots--link&viewMode=storycypress/*.snapshot.ts
files uses this page to take snapshots that are compared every time we release changes