docs: migrate Link docs to csf3

Author: Nikolai Lopin

src/components/Link/docs/Link.stories.mdx

@@ -0,0 +1,98 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import { onDarkBackground } from '../../../docs/parameters';
+import { Link } from '../Link';
+
+const meta: Meta = {
+    title: 'Components/Link',
+    component: Link,
+    argTypes: {
+        children: {
+            description: 'Content of the link',
+            table: {
+                type: {
+                    summary: 'ReactNode'
+                }
+            }
+        },
+        fontSize: {
+            options: [0, 1, 2, 3, 4],
+            defaultValue: 2,
+            control: 'select',
+            description: 'Font size of the link',
+            table: {
+                type: {
+                    summary: 'number | string'
+                }
+            }
+        },
+        target: {
+            description:
+                'Target of the link, see [MDN article](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes)',
+            table: {
+                type: {
+                    summary: '_self | _blank | _parent | _top'
+                }
+            }
+        },
+        href: {
+            description:
+                'Href of the link, see [MDN article](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes)',
+            table: {
+                type: {
+                    summary: 'string'
+                }
+            }
+        },
+        as: {
+            description: 'What html-tag to use',
+            table: {
+                defaultValue: {
+                    summary: 'a'
+                },
+                type: {
+                    summary: 'string | ReactComponent'
+                }
+            }
+        },
+        ref: {
+            description: 'Reference to the DOM element'
+        },
+        theme: {
+            table: {
+                disable: true
+            }
+        },
+        forwardedAs: {
+            table: {
+                disable: true
+            }
+        }
+    },
+    args: {
+        href: 'https://free-now.com/',
+        target: '_blank',
+        children: 'Go to FreeNow website'
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Link>;
+
+export const Default: Story = {};
+
+export const WithManualFontSize: Story = {
+    args: {
+        fontSize: 1
+    }
+};
+
+export const Inverted: Story = {
+    args: {
+        inverted: true
+    },
+    parameters: {
+        ...onDarkBackground
+    }
+};

src/components/Link/docs/Link.stories.tsx

@@ -0,0 +1,22 @@
+import { Primary, Stories, ArgTypes, Meta } from '@storybook/blocks';
+import { StyledSystemLinks } from '../../../docs/StyledSystemLinks';
+import * as LinkStories from './Link.stories';
+
+<Meta of={LinkStories} />
+
+# Link
+
+The Link component styles anchor tags with default blue styling and hover text decoration. Link is used for destinations, or moving from one page to another.
+
+-   Use links to navigate on and between pages and flows
+-   For interactions consider Buttons
+
+<Primary />
+
+## Properties
+
+<ArgTypes of={LinkStories} />
+
+<StyledSystemLinks component="Link" supportedProps={['margin', 'fontSize', 'textAlign']} />
+
+<Stories includePrimary={false} />