Merge pull request #1222 from Infineon/1221-documentation-implement-s…

…tates-foundation-page

Documentation: implement States page to Foundations in Storybook

packages/components/src/components/overview-table/overview-table.tsx

@@ -479,6 +479,18 @@ export class OverviewTable {
                         </span>
                         <span>Provides a customized wrapper and theming for the standard date picker element, enhancing its appearance and user interaction</span>
                       </li>
+                      <li>
+                        <span>
+                          <ifx-icon class='check__icon' icon="check12"></ifx-icon>
+                        </span>
+                        <span>Cross browser compatibility</span>
+                      </li>
+                      <li>
+                        <span>
+                          <ifx-icon class='check__icon' icon="check12"></ifx-icon>
+                        </span>
+                        <span>Form integration</span>
+                      </li>
                       <li>
                         <span>
                           <ifx-icon class='check__icon' icon="check12"></ifx-icon>

packages/components/src/stories/foundations/BorderRadius.mdx

@@ -14,8 +14,6 @@ We use a 1px border radius for all rectangular objects in our design system.
 This includes buttons, text inputs, checkboxes, radio buttons, and other rectangular elements. 
 A 1px border radius creates a slight curve at the corners of these elements, which softens their appearance and helps creating a more friendly and approachable design. 
 
-<img src={BorderRadius1px} alt="Border Radius 1px" width="50%"/>   
-
 ## 9999px Border radius 
 <img src={BorderRadius9999px} alt="BorderRadius9999px" width="50%"/> 
 

packages/components/src/stories/foundations/Color.mdx

@@ -82,42 +82,42 @@ We use the concept of tokens to apply color in a consistent, reusable, and scala
 ### Background colors
 Our overall look should be light and bright. To achieve that we use:
 
-`$ifxColorBaseWhite`: This is our main background color.
-`$ifxColorEngineering-100`: If it is necessary to apply more section-structure. Especially for dashboard designs.
-`$ifxColorOcean-500`: This option is only recommended for marketing websites by highlighting messages/sections.
+- `$ifxColorBaseWhite`: This is our main background color.
+- `$ifxColorEngineering-100`: If it is necessary to apply more section-structure. Especially for dashboard designs.
+- `$ifxColorOcean-500`: This option is only recommended for marketing websites by highlighting messages/sections.
 
 ### Typography 
-- For default text we use `$ifxColorBaseBlack` as main color. On brand or dark colored backgrounds we recommend to use `$ifxColorBaseWhite`. 
-- For headlines you can use either `$ifxColorBaseBlack` or `$ifxColorOcean500`. For the homepage in the hero section we recommend to use `$ifxColorOcean500` as title/h1. 
+- For default text we use `$ifxColorBaseBlack` as main color. On brand or dark colored backgrounds we recommend to use `$ifxColorBaseWhite`.
+- For headlines you can use either `$ifxColorBaseBlack` or `$ifxColorOcean500`. For the homepage in the hero section we recommend to use `$ifxColorOcean500` as display/h1.
 - For interactive texts like inline-links use `$ifxColorOcean500`.
 
 ### Components 
-We use a set of engineering color variations to build the core fibres of many layouts and components. This core fibres can be: 
+We use a set of engineering color variations to build the core fibres of many layouts and components. This core fibres can be:
 
-- An engineering outline to shape the form of a toggle, text field etc. 
-- An engineering divider structuring content 
-- Engineering backgrounds/borders for tables, rows and columns
+- An engineering outline to shape the form of a toggle, text field etc.
+- An engineering divider structuring content.
+- Engineering backgrounds/borders for tables, rows and columns.
 
 ### Interactions 
-We use our brand colors to highlight interactive elements and their interaction states. 
+We use our brand colors to highlight interactive elements and their interaction states.
 
-`$ifxColorOcean500`: Default state 
-`$ifxColorOcean600`: Hover state 
-`$ifxColorOcean700`: Pressed state 
-`$ifxColorEngineering300`: Disabled state 
+- `$ifxColorOcean500`: Default state
+- `$ifxColorOcean600`: Hover state
+- `$ifxColorOcean700`: Pressed state
+- `$ifxColorEngineering300`: Disabled state
 
 ### Signal information 
-As in many user interfaces we also use signal colors to convey information quickly and effectively to the user.  
+As in many user interfaces we also use signal colors to convey information quickly and effectively to the user.
 
-`$ifxColorGreen500`: Used to indicate a successful action. 
-`$ifxColorOrange500`: To indicate a warning message. 
-`$ifxColorRed500`: To indicate an error message. The two shades `$ifxColorRed600` and `$ifxColorRed700` are used for destructive button states. 
+- `$ifxColorGreen500`: Used to indicate a successful action.
+- `$ifxColorOrange500`: To indicate a warning message.
+- `$ifxColorRed500`: To indicate an error message. The two shades `$ifxColorRed600` and `$ifxColorRed700` are used for destructive button states. 
 
 ### Interactive infographics 
-Sometimes it needs more colors to visualize complex infographics for example on dashboard user interfaces. In these cases we recommend to use these colors:
-`$ifxColorOcean100`, `$ifxColorOcean200`, `$ifxColorOcean300`, `$ifxColorOcean400` `$ifxColorBerry400`, `$ifxColorBerry500` `$ifxColorLawn400`, `$ifxColorLawn500`, `$ifxColorLawn600` `$ifxColorSun400`, `$ifxColorSun500` `$ifxColorSand400`, `$ifxColorSand500` 
+Sometimes it needs more colors to visualize complex infographics for example on dashboard user interfaces. In these cases we recommend to use these colors:<br/>
+`$ifxColorOcean100`, `$ifxColorOcean200`, `$ifxColorOcean300`, `$ifxColorOcean400`, `$ifxColorBerry400`, `$ifxColorBerry500`, `$ifxColorLawn400`, `$ifxColorLawn500`, `$ifxColorLawn600`, `$ifxColorSun400`, `$ifxColorSun500`, `$ifxColorSand400`, `$ifxColorSand500` 
 
-Preferred color should be:
+Preferred color should be:<br/>
 `$ifxColorOcean100`, `$ifxColorOcean200`, `$ifxColorOcean300`, `$ifxColorOcean400` for example for a 4-clustered pie chart. It is important to note that these colors are not intended for use in user interface components such as buttons, text, and background colors. 
 
 ## Accessibility 

packages/components/src/stories/foundations/Logo.mdx

@@ -14,9 +14,7 @@ Our default logo variant.
 <img src={LogoDefault} alt="Logo Default"/> 
 
 ### Chinese 
-The logo variant has two versions: portrait and landscape. 
-These versions are specifically designed to suit different layouts and orientations while maintaining consistency and clarity.  
-
+The logo variant has two versions: portrait and landscape. These versions are specifically designed to suit different layouts and orientations while maintaining consistency and clarity.  
 <img src={LogoChinese} alt="Logo Chinese"/>   
 
 ***

packages/components/src/stories/foundations/States.mdx

@@ -0,0 +1,57 @@
+import { Meta } from '@storybook/addon-docs';
+
+import DefaultState from '../../../public-storybook/images/states/state-default.png'; 
+import HoverState from '../../../public-storybook/images/states/state-hover.png';
+import PressedState from '../../../public-storybook/images/states/state-pressed.png'; 
+import ActiveState from '../../../public-storybook/images/states/state-active.png'; 
+import CheckedState from '../../../public-storybook/images/states/state-checked.png'; 
+import SelectedState from '../../../public-storybook/images/states/state-selected.png'; 
+import FocusState from '../../../public-storybook/images/states/state-focus.png'; 
+import DisabledState from '../../../public-storybook/images/states/state-disabled.png'; 
+import ErrorState from '../../../public-storybook/images/states/state-error.png'; 
+
+<Meta title="Foundations/States" />
+
+# States
+States are micro-interactions in UI elements, that add value to your product by giving the user a feedback and improve the user experience. States refer to the different forms an element can take, based on the context that it is being used in.
+
+> Some components may not feature all states mentioned here. For detailed information on the available states and options of a specific component, refer to the documentation page dedicated to that component.
+
+## Types
+
+### Default
+This is the standard state of a component when it is first rendered, representing its base appearance and functionality.
+<img width="50%" src={DefaultState} alt="Default State" />
+
+### Hover
+Activated when the user hovers their cursor over a component, indicating its interactive nature.
+<img width="50%" src={HoverState} alt="Hover State" />
+
+### Pressed
+Occurs when a component is clicked or tapped, providing immediate visual feedback to the user.
+<img width="50%" src={PressedState} alt="Pressed State" />
+
+### Active
+Triggered when a component is actively engaged by the user, such as when clicking on a button or input field.
+<img width="50%" src={ActiveState} alt="Active State" />
+
+### Checked
+Applied to checkboxes, radio buttons, or switch switches to indicate that the option has been selected or activated.
+<img width="50%" src={CheckedState} alt="Checked State" />
+
+### Selected
+Used to highlight items that have been chosen or are currently in focus within a group of selectable elements.
+<img width="50%" src={SelectedState} alt="Selected State" />
+
+### Keyboard focus
+Keyboard focus begins when a user interacts, illuminating an item as it's navigated through using a keyboard.
+<img width="50%" src={FocusState} alt="Focus State" />
+
+### Disabled
+Utilized to indicate that an element is present but currently inactive or unavailable for interaction.
+<img width="50%" src={DisabledState} alt="Disabled State" />
+
+### Error
+Utilized to alert users when something has gone wrong or when their input is invalid.
+<img width="50%" src={ErrorState} alt="Error State" />
+