Merge branch 'master' into 400-documentation-modal-update

packages/components/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v20.4.0 (Tue Aug 22 2023)
+
+#### 🚀 Enhancement
+
+- Documentation: icon [#395](https://github.com/Infineon/infineon-design-system-stencil/pull/395) ([@SergejLust](https://github.com/SergejLust) [@tishoyanchev](https://github.com/tishoyanchev))
+
+#### Authors: 2
+
+- [@SergejLust](https://github.com/SergejLust)
+- Tisho Yanchev ([@tishoyanchev](https://github.com/tishoyanchev))
+
+---
+
 # v20.3.0 (Fri Aug 18 2023)
 
 #### 🚀 Enhancement

packages/components/src/components/icon/Usage.mdx

@@ -0,0 +1,77 @@
+
+import { Meta } from '@storybook/blocks';
+
+import * as IconStories from './infineonIconStencil.stories';
+import IconColorAlignment from '../../../public-storybook/images/icon/icon-color-alignment.png';
+import IconAlignment from '../../../public-storybook/images/icon/icon-alignment.png';
+import IconSizes from '../../../public-storybook/images/icon/icon-sizes.png';
+import IconStructure from '../../../public-storybook/images/icon/icon-structure.png';
+import IconSizeAlignment from '../../../public-storybook/images/icon/icon-size-alignment.png';
+import IconVariants from '../../../public-storybook/images/icon/icon-variants.png';
+import IconTextColorBrand from '../../../public-storybook/images/icon/icon-text-color-brand.png';
+import IconTextColorDark from '../../../public-storybook/images/icon/icon-text-color-dark.png';
+import IconTextColorWhite from '../../../public-storybook/images/icon/icon-text-color-white.png';
+
+
+<Meta of={IconStories} /> 
+
+
+# Icon
+Icons play a crucial role in our design system, providing visual representation and enhancing user experiences. We primarily utilize the Nucleo icon library for our icons, ensuring consistency and a wide range of options.
+
+## Usage
+
+### When to use
+- Icons can be used alongside text to aid navigation and improve usability. They can represent different sections, categories, or actions, making it easier for users to identify and interact with them.
+- If you want to communicate actions, such as saving, deleting, editing, or sharing. By utilizing recognizable icons, users can quickly understand the purpose or functionality associated with a specific action.
+
+### When not to use
+- If an icon's meaning is unclear or open to interpretation, it is best to use descriptive text instead. Clarity and understanding should always take precedence over aesthetic considerations.
+- Avoid overcrowding interfaces with too many icons, as this can lead to visual clutter and confusion. Strive for a balanced composition that maintains a clean and intuitive design.
+
+## Size
+To ensure consistency and alignment, we utilize a 4px grid size for our icons. This grid aligns with the overall design system and facilitates seamless integration into our interfaces. We have established four fixed icon sizes: 12×12px, 16×16px, and 24×24px. Choose the appropriate size based on the context and surrounding elements.
+> Icons within our DDS components come with the right icon size out of the box!
+
+<img src={IconSizes} alt="Icon Sizes" />
+
+## Structure
+All our icon sizes include the icon itself and the surrounding area.
+<img src={IconStructure} alt="Icon Structure" width="50%"/>
+
+## Variants
+The DDS provides two different kinds of icons: outlined and filled.
+<img src={IconVariants} alt="Icon Variants" width="50%" />
+
+## Alignment with text
+
+### Size alignment
+Try to pair specific typographic styles with corresponding icon sizes. The body-03 and body-04 typographic style is well-suited for 16px icons, while larger typography, such as the heading-04, works best with 24px icons.
+<img src={IconSizeAlignment} alt="Icon Size Alignment" width="50%" />
+
+### Vertical alignment
+Icons should be vertically aligned with the accompanying text or other related elements. Centered aligned icons of adjacent text helps maintain visual harmony and improves readability.
+<img src={IconAlignment} alt="Icon Alignment" width="50%" />
+
+### Text color alignment
+Icons should be aligned with the text color they accompany. Ensure that icons adhere to the same color scheme as the surrounding text to create a unified and visually pleasing user experience.
+<img src={IconColorAlignment} alt="Icon Color Alignment" width="50%" />
+
+## Color
+
+### Dark font color
+The black font color is the default color for icons. We use this color in most cases on white or engineering-100 backgrounds.
+<img src={IconTextColorDark} alt="Icon Text Color Dark" width="50%" />
+
+### White font color
+We use the base white color on dark backgrounds.
+<img src={IconTextColorWhite} alt="Icon Text Color White" width="50%" />
+
+### Brand font color
+We use our brand color ocean-500 to highlight the content or actions connected with the icon. Use it on white or engineering-100 backgrounds.
+<img src={IconTextColorBrand} alt="Icon Text Color Brand" width="50%" />
+
+
+***
+Check out the Figma Icon Library: **[Icon Library](https://www.figma.com/file/yWwaLoqsWLWygDxXfvdym9/Infineon-DDS-%7C-Icons?type=design&node-id=6%3A6&mode=design&t=Zc0icFhkq4Jv0xSn-1)**
+***

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)**
+***