Merge pull request #399 from Infineon/397-documentation-link

Documentation: link

packages/components/src/components/link/Usage.mdx

@@ -0,0 +1,131 @@
+
+import { Meta } from '@storybook/blocks';
+
+import * as LinkStories from './link.stories';
+import LinkBold from '../../../public-storybook/images/link/link-bold.png';
+import LinkBoldStates from '../../../public-storybook/images/link/link-bold-states.png';
+import LinkTitle from '../../../public-storybook/images/link/link-title.png';
+import LinkTitleStates from '../../../public-storybook/images/link/link-title-states.png';
+import LinkMenu from '../../../public-storybook/images/link/link-menu.png';
+import LinkMenuStates from '../../../public-storybook/images/link/link-menu-states.png';
+import LinkInline from '../../../public-storybook/images/link/link-inline.png';
+import LinkInlineStates from '../../../public-storybook/images/link/link-inline-states.png';
+import LinkInlineError from '../../../public-storybook/images/link/link-inline-error.png';
+import LinkInlineErrorStates from '../../../public-storybook/images/link/link-inline-error-states.png';
+import LinkMouseInteraction from '../../../public-storybook/images/link/link-mouse-interaction.png';
+import LinkIconLeft from '../../../public-storybook/images/link/link-icon-left.png';
+import LinkIconRight from '../../../public-storybook/images/link/link-icon-right.png';
+import LinkIconPlacementLeft from '../../../public-storybook/images/link/link-icon-placement-left.png';
+import LinkIconPlacementRight from '../../../public-storybook/images/link/link-icon-placement-right.png';
+import LinkFontSizeAlignment from '../../../public-storybook/images/link/link-font-size-alignment.png';
+import LinkSizes from '../../../public-storybook/images/link/link-sizes.png';
+
+<Meta of={LinkStories} /> 
+
+
+# Link
+The link component allows users to navigate to another location, either within the same website or to an external website. They have different levels of importance or hierarchy depending on their placement within a page or interface.
+
+## Usage
+
+### When to use
+- To navigate to a different page
+- To navigate to a completely different site
+- To jump to an anchor element on the same page
+
+### When not to use
+- Users want to trigger an action. Use a button instead.
+
+## Types
+
+### Bold Link
+Bold links indicate tertiary actions. It is similar to the style of the tertiary button which has more spacing to achieve more button interaction in button groups.
+<img src={LinkBold} alt="Link Bold" width="50%" />
+
+#### States
+<img src={LinkBoldStates} alt="Link Bold States" />
+
+### Title Link
+Title links indicate the title of a section is interactive and can be clicked. They should always contain an internal link icon to the right of the title text.
+<img src={LinkTitle} alt="Link Title" width="50%" />
+
+#### States
+<img src={LinkTitleStates} alt="Link Title States" />
+
+### Menu Link
+<img src={LinkMenu} alt="Link Menu" width="50%" />
+
+#### States
+<img src={LinkMenuStates} alt="Link Menu States" />
+
+### Inline Link
+Inline links should assume the text properties of the content they are nested within.
+> Since inline links natively follow the text size and style of a text paragraph, there are no fixed sizes for the type of link.
+
+<img src={LinkInline} alt="Link Inline" width="50%" />
+
+#### States
+<img src={LinkInlineStates} alt="Link Inline States" />
+
+**Default**\
+Native underlined text style. Text color is $ocean-500.
+
+**Hover**\
+Text color is $ocean-600.
+
+**Pressed**\
+Text color is $ocean-700.
+
+**Focus**\
+Text color is $ocean-500. Text has a native browser outline of 1px outline width.
+
+### Inline Link Error
+<img src={LinkInlineError} alt="Link Inline Error" width="50%" />
+
+#### States
+<img src={LinkInlineErrorStates} alt="Link Inline Error States" />
+
+**Default**\
+Native underlined text style. Text color is $red-500.
+
+**Hover**\
+Text color is $red-600.
+
+**Pressed**\
+Text color is $red-700.
+
+**Focus**\
+Text color is $red-500. Text has a native browser outline of 1px outline width.
+
+## Icon placement
+
+### Icon left
+Links with functional or decorative icons should be placed to the left of a link.
+<img src={LinkIconLeft} alt="Link Icon Left" width="50%" />
+
+#### Example
+<img src={LinkIconPlacementLeft} alt="Link Icon Placement Left" />
+
+### Icon right
+Normally, links with right-aligned icons should be used as links with a right-arrow icon. This is used to make it clear to users that they are changing the page because they want to find out detailed information about a topic, for example.
+<img src={LinkIconRight} alt="Link Icon Right" width="50%" />
+
+#### Example
+<img src={LinkIconPlacementRight} alt="Link Icon Placement Right" />
+
+## Size
+There are four different link sizes that can be used flexibly: 14px, 16px, 18px and 20px.
+<img src={LinkSizes} alt="Link Size" />
+
+## Text size alignment
+The size of link text components should inherit the font size of the body copy preceding it.
+<img src={LinkFontSizeAlignment} alt="Link Font Size Alignment" width="50%" />
+
+## Mouse interaction
+All link variants are clickable together with the icons placed in front of or behind them. Only one target is defined as a link-url and cannot contain two separate ones. The click area corresponds to the height and width of the respective link size.
+<img src={LinkMouseInteraction} alt="Link Mouse Interaction" width="50%" />
+
+
+***
+Check out the Figma component: **[Link](https://www.figma.com/file/zPvPwPgb4EsYFXKC2nhzSG/Infineon-DDS-%7C-Main?type=design&node-id=2610-6235&mode=design&t=xVWOPkYnUvh53BSW-4)**
+***