diff --git a/packages/storybook-test/stories/link/link.stories.tsx b/packages/storybook-test/stories/link/link.stories.tsx
index bf9c5fd6..4f29c9a9 100644
--- a/packages/storybook-test/stories/link/link.stories.tsx
+++ b/packages/storybook-test/stories/link/link.stories.tsx
@@ -4,6 +4,90 @@ import { Link } from '../../../components-react/link-react/src/css';
import { Paragraph } from '../../../components-react/paragraph-react/src/css';
import componentMarkdown from '../../../docs/link-docs/docs/component.md?raw';
import tokens from '../../../tokens/link-tokens/tokens.json';
+import '../../../components-css/link-css/src/test.scss';
+
+const ExampleImage = () => (
+
+);
const meta = {
argTypes: {
@@ -129,7 +213,7 @@ export const LinkInGermanParagraph: Story = {
};
export const ExtremelyLongLink: Story = {
- name: 'Link',
+ name: 'Link (Extreem lang)',
args: {
children:
'Supercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocious (opens in a new window)',
@@ -146,3 +230,93 @@ export const ExtremelyLongLink: Story = {
status: { type: [] },
},
};
+
+export const Hover: Story = {
+ name: 'Link:hover',
+ args: {
+ children: 'voorbeeldsite (opent in een nieuw venster)',
+ className: 'nl-link--hover',
+ href: 'https://example.com',
+ target: '_blank',
+ },
+ parameters: {
+ docs: {
+ description: {
+ story: 'Een link met :hover state.',
+ },
+ },
+ status: { type: [] },
+ },
+};
+
+export const Active: Story = {
+ name: 'Link:active',
+ args: {
+ children: 'voorbeeldsite (opent in een nieuw venster)',
+ className: 'nl-link--active',
+ href: 'https://example.com',
+ target: '_blank',
+ },
+ parameters: {
+ docs: {
+ description: {
+ story: 'Een link met :active state.',
+ },
+ },
+ status: { type: [] },
+ },
+};
+
+export const Current: Story = {
+ name: 'Link (current page)',
+ args: {
+ children: 'voorbeeldsite (opent in een nieuw venster)',
+ className: 'nl-link--current',
+ href: 'https://example.com',
+ target: '_blank',
+ },
+ parameters: {
+ docs: {
+ description: {
+ story: 'Een link met --current modifier.',
+ },
+ },
+ status: { type: [] },
+ },
+};
+
+export const InlineBoxContent: Story = {
+ name: 'Link (rondom image)',
+ args: {
+ children: ,
+ className: 'nl-link--inline-box-content',
+ href: 'https://example.com',
+ target: '_blank',
+ },
+ parameters: {
+ docs: {
+ description: {
+ story: 'Een link met een image erin en --inline-box-content modifier.',
+ },
+ },
+ status: { type: [] },
+ },
+};
+
+export const InlineBoxContentHover: Story = {
+ name: 'Link (rondom image):hover',
+ args: {
+ children: ,
+ className: 'nl-link--inline-box-content nl-link--hover',
+ href: 'https://example.com',
+ target: '_blank',
+ },
+ parameters: {
+ docs: {
+ description: {
+ story: 'Een link met een image erin, --inline-box-content modifier en :hover state.',
+ },
+ },
+ status: { type: [] },
+ },
+};