Feature/3445 standalone link development - #3590
Conversation
🦋 Changeset detectedLatest commit: 65f958d The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
🕸 Preview deploys |
…ne-link-development
There was a problem hiding this comment.
Pull request overview
Introduces the standalone sl-link component with styling, localization, theme icons, tests, documentation, and Angular Storybook integration.
Changes:
- Adds the Link package, behavior, styles, stories, and tests.
- Adds required icon and animation tokens across themes.
- Adds translations and Angular usage examples.
Reviewed changes
Copilot reviewed 38 out of 40 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
.changeset/huge-candies-stand.md |
Records the initial Link release. |
packages/angular/package.json |
Adds the Link dependency. |
packages/angular/stories/wrappers-navigation.stories.ts |
Adds the Angular Link example. |
packages/components/link/index.ts |
Exports the Link API. |
packages/components/link/package.json |
Defines package metadata. |
packages/components/link/register.ts |
Registers sl-link. |
packages/components/link/src/link.scss |
Implements Link styling. |
packages/components/link/src/link.spec.ts |
Tests Link behavior. |
packages/components/link/src/link.stories.ts |
Documents Link variants. |
packages/components/link/src/link.ts |
Implements the component. |
packages/components/link/tsconfig.json |
Configures TypeScript compilation. |
packages/locales/src/es-ES.ts |
Adds Spanish translation. |
packages/locales/src/es-ES.xlf |
Adds Spanish localization source. |
packages/locales/src/it.ts |
Adds Italian translation. |
packages/locales/src/it.xlf |
Adds Italian localization source. |
packages/locales/src/nl.ts |
Adds Dutch translation. |
packages/locales/src/nl.xlf |
Adds Dutch localization source. |
packages/locales/src/pl.ts |
Adds Polish translation. |
packages/locales/src/pl.xlf |
Adds Polish localization source. |
packages/tokens/src/tokens/core.json |
Adds Link indicator icons. |
packages/tokens/src/tokens/system.json |
Adds animation tokens. |
packages/themes/bingel-dc/icons.ts |
Generates new theme icons. |
packages/themes/bingel-int/icons.ts |
Generates new theme icons. |
packages/themes/clickedu/icons.ts |
Generates new theme icons. |
packages/themes/editorial-suite/icons.ts |
Generates new theme icons. |
packages/themes/itslearning/icons.ts |
Generates new theme icons. |
packages/themes/kampus/icons.ts |
Generates new theme icons. |
packages/themes/magister/icons.ts |
Generates new theme icons. |
packages/themes/max/icons.ts |
Generates new theme icons. |
packages/themes/my-digital-book/icons.ts |
Generates new theme icons. |
packages/themes/neon/icons.ts |
Generates new theme icons. |
packages/themes/sanoma-learning/icons.ts |
Generates new theme icons. |
packages/themes/sanoma-pro/icons.ts |
Generates new theme icons. |
packages/themes/sanoma-utbildning/icons.ts |
Generates new theme icons. |
packages/themes/teacher-assistant/icons.ts |
Generates new theme icons. |
packages/themes/teas/icons.ts |
Generates new theme icons. |
packages/themes/tig/icons.ts |
Generates new theme icons. |
scripts/studio.lock |
Refreshes token source metadata. |
tsconfig.all.json |
Adds Link to the project graph. |
yarn.lock |
Locks the new workspace package. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
a11ymiko
left a comment
a11ymiko
left a comment
There was a problem hiding this comment.
In story Link > All for all themes focus indicator is hard to see on Inverted Links. Maybe it'd be better if Inverted Links have got different focus indicator color (the same way it works right now for Inverted Toolbar)?
Screen.Recording.2026-08-13.at.07.07.56.mov
a11ymiko
left a comment
a11ymiko
left a comment
There was a problem hiding this comment.
For ITSLrearning and My Digital Book themes secondary and ghost links are not visible on the same color background: https://storybook-3590.d3c5h2uor7jlkj.amplifyapp.com/?path=/story/navigation-link--all&globals=theme:itslearning
Maybe some other background could be use for this links in that two themes?
| title: 'Navigation/Link', | ||
| args: { | ||
| fill: 'solid', | ||
| href: '/dashboard', |
There was a problem hiding this comment.
thought: it would be really cool if the links in our stories actually navigated somewhere, like simple dummy pages. I know we can use @storybook/addon-links to link them to other stories in SB. Extra points for easter eggs 😄
link.mov
There was a problem hiding this comment.
That is hard to maintain (been there, done that). If the name of the story we're linking to changes, then the link breaks. Nowadays i usually use example.com
There was a problem hiding this comment.
But that is not really an option here, because i need to use a relative path to show the internal link variant.
…ne-link-development
… removed redundant sections and optimized logic flow.
…ne-link-development
| title: 'Navigation/Link', | ||
| args: { | ||
| fill: 'solid', | ||
| href: '/dashboard', |
There was a problem hiding this comment.
That is hard to maintain (been there, done that). If the name of the story we're linking to changes, then the link breaks. Nowadays i usually use example.com
…update tests and stories
This pull request introduces a new standalone
Linkcomponent to the SL Design System, making it available as a web component and integrating it into the Angular package and Storybook documentation. The changes include the component's implementation, registration, styles, package setup, and usage examples, both in web components and Angular environments.New Link Component Implementation:
@sl-design-system/linkpackage, including itspackage.jsonand module exports, to provide a standalone link component for the design system. [1] [2]sl-linkweb component registration inregister.tsfor easy use in projects.sl-linkcomponent, supporting various variants (primary,secondary,success,info,warning,danger,inverted), fill modes (solid,outline,ghost), shapes, and accessibility/focus states.Documentation and Storybook Integration:
sl-linkcomponent, demonstrating its usage, variants, fill modes, icon positions, event handling, and color schemes.@sl-design-system/linkpackage into the Angular package dependencies and registered it for use in Angular Storybook stories. [1] [2]sl-linkusage within Angular, including examples for internal, external, and new tab links, and ensured proper icon registration. [1] [2]