feat(styles): tokenize the Link component styles #3590

alionazherdetska · 2024-09-26T08:44:01Z

No description provided.

changeset-bot · 2024-09-26T08:44:05Z

🦋 Changeset detected

Latest commit: 531b418

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 16 packages

Name	Type
@swisspost/design-system-styles	Minor
@swisspost/design-system-documentation	Minor
@swisspost/design-system-components-angular-workspace	Patch
@swisspost/design-system-components	Minor
@swisspost/internet-header	Patch
@swisspost/design-system-intranet-header-workspace	Patch
@swisspost/design-system-nextjs-integration	Patch
@swisspost/design-system-styles-primeng-workspace	Patch
@swisspost/design-system-intranet-header	Minor
@swisspost/design-system-styles-primeng	Minor
@swisspost/design-system-components-react	Minor
@swisspost/design-system-components-angular	Minor
@swisspost/design-system-intranet-header-showcase	Patch
@swisspost/design-system-tokens	Minor
@swisspost/design-system-icons	Minor
@swisspost/design-system-migrations	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

swisspost-bot · 2024-09-26T08:44:21Z

Related Previews

alizedebray

Good job 👍
Do not hesitate to contact me if one of my comments is not clear

packages/styles/src/elements/link.scss

alizedebray · 2024-10-02T13:33:54Z

packages/documentation/src/stories/components/link/link.stories.ts

+import { MetaComponent } from '@root/types';
+
+const meta: MetaComponent = {
+  id: 'link-component',


We usually use random UUID here, you can generate one on this website for axample: https://www.uuidgenerator.net/

alizedebray · 2024-10-02T13:38:52Z

packages/documentation/src/stories/components/link/link.docs.mdx

+  Use links to navigate users to another location, such as a different site, resource, or section within the same page.
+</div>
+
+Apply the override classes for custom styling as needed.


Not sure I get this sentence, what do you mean?

alizedebray · 2024-10-02T14:20:01Z

packages/documentation/src/stories/components/link/link.snapshot.stories.ts

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

The *.snapshot.stories.ts file creates this page: https://preview-3590--swisspost-design-system-next.netlify.app/iframe.html?id=snapshots--link&viewMode=story

The cypress/*.snapshot.ts files uses this page to take snapshots that are compared every time we release changes

alizedebray · 2024-10-02T14:22:34Z

packages/documentation/src/stories/components/link/link.snapshot.stories.ts

+      <div>
+        ${['bg-white', 'bg-dark'].map(
+          bg => html`
+            <div class="${bg} d-flex flex-column gap-regular p-regular mt-regular">


Here you also have to set a data-color-mode="light" or data-color-mode="dark" attribute so that the correct set of token is used.

…ast-mode

oliverschuerch

Please relocate this component so it appears under "Foundations/Typography/Link"!
And also move the files.

.changeset/lazy-gorillas-admire.md

packages/styles/src/elements/link.scss

Co-authored-by: Oliver Schürch <[email protected]>

…st/design-system into 3424-component-text-link

# Conflicts: # packages/styles/src/elements/_index.scss

…st/design-system into 3424-component-text-link

alionazherdetska · 2024-10-10T08:53:29Z

I have used the same hover effect for the high contrast mode (increased the thickness of text decoration) as on:
https://www.w3.org/TR/css-color-4/#css-system-colors

oliverschuerch · 2024-10-14T06:14:20Z

.idea/indexLayout.xml

This file should be added to the .gitignore file.

…ent was adjusted

packages/styles/src/elements/anchor.scss

Co-authored-by: Alizé Debray <[email protected]>

oliverschuerch · 2024-10-16T08:19:30Z

packages/documentation/src/stories/components/link/link.stories.ts

+
+const meta: MetaComponent = {
+  id: '6f359d06-bca5-4983-b588-c8c790531642',
+  title: 'Typography/Link',


Suggested change

title: 'Typography/Link',

title: 'Foundations/Typography/Link',

sonarqubecloud · 2024-10-16T11:05:25Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

@oliverschuerch

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. ⚠️

⚠️

⚠️ `main` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `main`. ⚠️

⚠️

⚠️ # Releases ## @swisspost/[email protected] ### Major Changes - Switched stencil hydrated flag from class (`hydrated`) to attribute (`data-hydrated`). This flag indicates when a component finished rendering on the page. If your tests relied on the class being present, please rewrite the selector to use the new attribute selector. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#3783](#3783)) ### Minor Changes - Added the post-language-option component, a header component made to enable users to select their preferred language. (by [@alizedebray](https://github.com/alizedebray) with [#3802](#3802)) - Added component `post-avatar` to show an avatar, based on different possible input data (gravatar by email, initials by first- and/or lastname, fallback). (by [@oliverschuerch](https://github.com/oliverschuerch) with [#3352](#3352)) ### Patch Changes - Made the ´<post-popovercontainer>´ visually hidden for tooltips to fix accessability issue. (by [@schaertim](https://github.com/schaertim) with [#3619](#3619)) - Fixed the `post-card-control` label read twice by screen readers. (by [@myrta2302](https://github.com/myrta2302) with [#3625](#3625)) - Fixed an issue with property validation where some checks were run before the framework had the chance to add computed properties (for example Angular bindings like `[for]="$id"`). The checks are now delayed to work around this issue. (by [@gfellerph](https://github.com/gfellerph) with [#3775](#3775)) - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Major Changes - Removed deprecated accent colors (nightblue, petrol, coral, olive, purple, aubergine and their light variations) and updated all relevant components, documentation, and utilities. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#3693](#3693)) - Removed deprecated grid container helper classes. (by [@veyaromain](https://github.com/veyaromain) with [#3527](#3527)) ### Minor Changes - Updated the Link component styles to align with the new design, added a documentation page outlining the usage of the component. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#3590](#3590)) - Updated the utility classes for opacity. (by [@myrta2302](https://github.com/myrta2302) with [#3754](#3754)) - Added a new App Store Badge component for promoting apps, supporting both Google Play and Apple App Store badges. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#3731](#3731)) - Added paragraph style. (by [@bashirkarimi](https://github.com/bashirkarimi) with [#3569](#3569)) ### Patch Changes - Updated margin styles according to the contribution guidelines. Content elements like headings and paragraphs no longer have a margin top if they're the first child and no margin bottom if they're the last child in a container. (by [@gfellerph](https://github.com/gfellerph) with [#3667](#3667)) ## @swisspost/[email protected] ### Minor Changes - Added component `post-avatar` to show an avatar, based on different possible input data (gravatar by email, initials by first- and/or lastname, fallback). (by [@oliverschuerch](https://github.com/oliverschuerch) with [#3352](#3352)) ### Patch Changes - Fixed an issue with property validation where some checks were run before the framework had the chance to add computed properties (for example Angular bindings like `[for]="$id"`). The checks are now delayed to work around this issue. (by [@gfellerph](https://github.com/gfellerph) with [#3775](#3775)) - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Minor Changes - Added icons number 2613, 2614, 2615, 2616, 2617, 2618, 2619 and 2620. (by [@gfellerph](https://github.com/gfellerph) with [#3781](#3781)) - Added icons number 2621, 2622, 2623, 2624, 2625, 2626, 2627, 2628, 2629, 2630 and 2631. (by [@gfellerph](https://github.com/gfellerph) with [#3832](#3832)) ## @swisspost/[email protected] ### Patch Changes - Fixed an issue with property validation where some checks were run before the framework had the chance to add computed properties (for example Angular bindings like `[for]="$id"`). The checks are now delayed to work around this issue. (by [@gfellerph](https://github.com/gfellerph) with [#3775](#3775)) - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ## @swisspost/[email protected] ### Major Changes - Switched stencil hydrated flag from class (`hydrated`) to attribute (`data-hydrated`). This flag indicates when a component finished rendering on the page. If your tests relied on the class being present, please rewrite the selector to use the new attribute selector. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#3783](#3783)) ### Minor Changes - Added and documented the possibility to create plain links in the main navigation by adding noFlyout: true to the config. The flyout property is now optional and can be omitted. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#3596](#3596)) ### Patch Changes - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Minor Changes - Added the post-language-option component, a header component made to enable users to select their preferred language. (by [@alizedebray](https://github.com/alizedebray) with [#3802](#3802)) - Updated the Accessibility documentation, reorganized in mutliple folders and added Grouping Controls section (by [@myrta2302](https://github.com/myrta2302) with [#3638](#3638)) - Added component `post-avatar` to show an avatar, based on different possible input data (gravatar by email, initials by first- and/or lastname, fallback). (by [@oliverschuerch](https://github.com/oliverschuerch) with [#3352](#3352)) - Updated the Link component styles to align with the new design, added a documentation page outlining the usage of the component. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#3590](#3590)) - Updated the utility classes for opacity. (by [@myrta2302](https://github.com/myrta2302) with [#3754](#3754)) - Removed deprecated grid container helper classes. (by [@veyaromain](https://github.com/veyaromain) with [#3527](#3527)) - Added a new App Store Badge component for promoting apps, supporting both Google Play and Apple App Store badges. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#3731](#3731)) - Added paragraph element. (by [@bashirkarimi](https://github.com/bashirkarimi) with [#3569](#3569)) ### Patch Changes - Added and documented the possibility to create plain links in the main navigation by adding noFlyout: true to the config. The flyout property is now optional and can be omitted. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#3596](#3596)) - Fixed the dropdown toggle in the example of the intranet header with a navigation bar. (by [@alizedebray](https://github.com/alizedebray) with [#3722](#3722)) - Updated the text of the Accessibility Forms Control Grouping section and corrected the last example (by [@myrta2302](https://github.com/myrta2302) with [#3638](#3638)) - Removed class `hydrated` in stories because from now on we're using the attribute `data-hydrated` to make components visible after hydration. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#3783](#3783)) - Removed deprecated accent colors (nightblue, petrol, coral, olive, purple, aubergine and their light variations) and updated all relevant components, documentation, and utilities. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#3693](#3693)) - Updated dependencies: - @swisspost/[email protected] - @swisspost/[email protected] - @swisspost/[email protected] - @swisspost/[email protected] - @swisspost/[email protected] ## @swisspost/[email protected] ### Minor Changes - Added a new App Store Badge component for promoting apps, supporting both Google Play and Apple App Store badges. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#3731](#3731)) ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] - @swisspost/[email protected] - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Removed deprecated accent colors (nightblue, petrol, coral, olive, purple, aubergine and their light variations) and updated all relevant components, documentation, and utilities. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#3693](#3693)) - Updated dependencies: - @swisspost/[email protected] --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Philipp Gfeller <[email protected]>

Zherdetska Alona, IT21.1 added 9 commits September 24, 2024 15:26

chore(style): delete the initial link styles

3c4889c

feat(token): text-link token was implemented

735e706

feat(token): import link.scss to the _index.scss

441368e

fix(style): remove unnecessary mixin usage for the link

11d7d5e

Merge branch 'main' into 3424-component-text-link

9b39668

chore(docs): implement the documentation for the link component

a570b13

chore(changeset): implement a changeset

6990166

Merge branch 'main' into 3424-component-text-link

53ebf2a

feat(styles): use focus-style mixin for link focus

120da6f

alionazherdetska requested a review from a team as a code owner September 26, 2024 08:44

alionazherdetska requested a review from oliverschuerch September 26, 2024 08:44

alionazherdetska linked an issue Sep 26, 2024 that may be closed by this pull request

[component]: Text link #3424

Closed

5 tasks

alionazherdetska requested a review from alizedebray September 26, 2024 08:44

alionazherdetska changed the title ~~[component]: Text link~~ feat(styles): tokenize the Link component styles Sep 26, 2024

Zherdetska Alona, IT21.1 and others added 2 commits September 26, 2024 14:03

fix(import): Eliminate the import of the styles

4466e46

Merge branch 'main' into 3424-component-text-link

7227e98

alizedebray requested changes Oct 2, 2024

View reviewed changes

Zherdetska Alona, IT21.1 added 8 commits October 3, 2024 12:20

chore(styles): remove redundant &:focus selector

41666ee

chore(docs): add random UUID to the link stories

cda79ca

fix(changeset): adjust the changeset statement

52676e6

chore(snapshot): create the LinkSnapshot

0164e0d

fix(docs): remove redundant info

3f2f547

fix(docs): set data-color-mode attribute in link snapshot stories

6e0d6fb

fix(styles): update high-contrast mode link styling

0cb8fcd

fix(styles): adjust the style for the visited state in the high-contr…

0d2a377

…ast-mode

alionazherdetska requested a review from alizedebray October 4, 2024 09:48

chore(styles): refine the Link styles in high-contrast mode

361f044

oliverschuerch requested changes Oct 7, 2024

View reviewed changes

.changeset/lazy-gorillas-admire.md Outdated Show resolved Hide resolved

packages/styles/src/elements/link.scss Outdated Show resolved Hide resolved

alionazherdetska and others added 6 commits October 7, 2024 15:21

Update .changeset/lazy-gorillas-admire.md

46f0ca1

Co-authored-by: Oliver Schürch <[email protected]>

Merge branch '3424-component-text-link' of https://github.com/swisspo…

8b5e12f

…st/design-system into 3424-component-text-link

Merge branch 'main' into 3424-component-text-link

8778447

Merge branch 'main' into 3424-component-text-link

3012ac7

# Conflicts: # packages/styles/src/elements/_index.scss

Merge branch '3424-component-text-link' of https://github.com/swisspo…

f9aab11

…st/design-system into 3424-component-text-link

chore(docs): move link element to Typography category

5206224

fix(style): change the hover effect on high contrast mode as in W3C

1d74aae

alionazherdetska requested a review from oliverschuerch October 10, 2024 08:58

oliverschuerch requested changes Oct 14, 2024

View reviewed changes

.idea/indexLayout.xml Outdated

Copy link

Contributor

oliverschuerch Oct 14, 2024

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.

alionazherdetska requested a review from oliverschuerch October 15, 2024 07:55

alionazherdetska force-pushed the 3424-component-text-link branch 2 times, most recently from f2ec933 to 1d74aae Compare October 15, 2024 13:27

alionazherdetska and others added 3 commits October 15, 2024 15:28

Delete .idea/indexLayout.xml

c079a2c

Merge branch 'main' into 3424-component-text-link

6f6100c

chore(component): link component was renamed to anchor, token assignm…

c917caf

…ent was adjusted

alizedebray approved these changes Oct 15, 2024

View reviewed changes

packages/styles/src/elements/anchor.scss Outdated Show resolved Hide resolved

alionazherdetska and others added 2 commits October 15, 2024 17:53

Update packages/styles/src/elements/anchor.scss

cc21ca3

Co-authored-by: Alizé Debray <[email protected]>

fix(linting): redundant coma was removed

76eb978

oliverschuerch requested changes Oct 16, 2024

View reviewed changes

Zherdetska Alona, IT21.1 and others added 2 commits October 16, 2024 11:49

chore: relocated the component to "Foundations/Typography/Link"

2106fd1

Merge branch 'main' into 3424-component-text-link

531b418

alionazherdetska requested a review from oliverschuerch October 16, 2024 11:29

oliverschuerch approved these changes Oct 16, 2024

View reviewed changes

alionazherdetska merged commit 283275b into main Oct 16, 2024
9 checks passed

alionazherdetska deleted the 3424-component-text-link branch October 16, 2024 13:28

swisspost-bot mentioned this pull request Oct 16, 2024

chore(changesets): 🦋📦 publish packages (main) (next) #3761

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(styles): tokenize the Link component styles #3590

feat(styles): tokenize the Link component styles #3590

alionazherdetska commented Sep 26, 2024

changeset-bot bot commented Sep 26, 2024 •

edited

Loading

swisspost-bot commented Sep 26, 2024 •

edited

Loading

alizedebray left a comment

alizedebray Oct 2, 2024

alizedebray Oct 2, 2024

alizedebray Oct 2, 2024

alizedebray Oct 2, 2024

oliverschuerch left a comment

alionazherdetska commented Oct 10, 2024 •

edited

Loading

oliverschuerch Oct 14, 2024

oliverschuerch Oct 16, 2024

sonarqubecloud bot commented Oct 16, 2024

	title: 'Typography/Link',
	title: 'Foundations/Typography/Link',

feat(styles): tokenize the Link component styles #3590

feat(styles): tokenize the Link component styles #3590

Conversation

alionazherdetska commented Sep 26, 2024

changeset-bot bot commented Sep 26, 2024 • edited Loading

🦋 Changeset detected

swisspost-bot commented Sep 26, 2024 • edited Loading

alizedebray left a comment

Choose a reason for hiding this comment

alizedebray Oct 2, 2024

Choose a reason for hiding this comment

alizedebray Oct 2, 2024

Choose a reason for hiding this comment

alizedebray Oct 2, 2024

Choose a reason for hiding this comment

alizedebray Oct 2, 2024

Choose a reason for hiding this comment

oliverschuerch left a comment

Choose a reason for hiding this comment

alionazherdetska commented Oct 10, 2024 • edited Loading

oliverschuerch Oct 14, 2024

Choose a reason for hiding this comment

oliverschuerch Oct 16, 2024

Choose a reason for hiding this comment

sonarqubecloud bot commented Oct 16, 2024

Quality Gate passed

changeset-bot bot commented Sep 26, 2024 •

edited

Loading

swisspost-bot commented Sep 26, 2024 •

edited

Loading

alionazherdetska commented Oct 10, 2024 •

edited

Loading