Merge pull request #373 from Infineon/370-documentation-chip

Documnetation: chip

packages/components/src/components/chips/Usage.mdx

@@ -0,0 +1,135 @@
+
+import { Meta } from '@storybook/blocks';
+import * as ChipsStories from './chip.stories';
+import ChipAnatomy from '../../../public-storybook/images/chips/chip-anatomy.png';
+import ChipAffixAddStates from '../../../public-storybook/images/chips/chip-affix-add-states.png';
+import ChipAffixAdd from '../../../public-storybook/images/chips/chip-affix-add.png';
+import ChipAffixRemovableStates from '../../../public-storybook/images/chips/chip-affix-removable-states.png';
+import ChipAffixRemovable from '../../../public-storybook/images/chips/chip-affix-removable.png';
+import ChipDefaultStates from '../../../public-storybook/images/chips/chip-default-states.png';
+import ChipDefault from '../../../public-storybook/images/chips/chip-default.png';
+import ChipGroup from '../../../public-storybook/images/chips/chip-group.png';
+import ChipMouseInteraction from '../../../public-storybook/images/chips/chip-mouse-interaction.png';
+import ChipSizes from '../../../public-storybook/images/chips/chip-sizes.png';
+import DropdownChipVisibleLabelOptionHighlightStates from '../../../public-storybook/images/chips/dropdown-chip-visible-label-option-highlight-states.png';
+import DropdownChipVisibleLabelOptionHighlight from '../../../public-storybook/images/chips/dropdown-chip-visible-label-option-highlight.png';
+import DropdownChipVisibleLabelOptionStates from '../../../public-storybook/images/chips/dropdown-chip-visible-label-option-states.png';
+import DropdownChipVisibleLabelOption from '../../../public-storybook/images/chips/dropdown-chip-visible-label-option.png';
+import DropdownChipVisibleLabelStates from '../../../public-storybook/images/chips/dropdown-chip-visible-label-option-states.png';
+import DropdownChipVisibleLabel from '../../../public-storybook/images/chips/dropdown-chip-visible-label.png';
+import DropdownChipVisibleSingleOptionStates from '../../../public-storybook/images/chips/dropdown-chip-visible-single-option-states.png';
+import DropdownChipVisibleSingleOption from '../../../public-storybook/images/chips/dropdown-chip-visible-single-option.png';
+
+<Meta of={ChipsStories} />
+
+# Chip
+The chip component presents compact information in an easily consumable format. It allows users to quickly recognize and interact with various types of content, such as filters or categories.
+
+## Usage
+
+### When to use
+- If you want to filter and categorize content.
+
+### When not to use
+- If the content within the chip is dynamically changing or frequently updated.
+- If you need to display a large amount of complex data or detailed information. Use other components like tables of lists.
+
+## Anatomy
+<img src={ChipAnatomy} alt="Chip Anatomy" />
+**Chip Container (1)**\
+The entire chip, including its label, icons, and any additional styling, is contained within a visually distinct container.
+
+
+**Dropdown Icon (2)**\
+Indicates that there are additional options related to the chip. Clicking or tapping on the dropdown icon reveals a select list with different options to select.
+
+
+**Label Text (3)**\
+This is the primary text that describes the selected item(s).
+
+
+**Option Text (4)**\
+In some chip variants the selected option is also visible.
+
+
+**Number Indicator (5)**\
+Provides the information about how many selected options are inside the chip. It appears when more than two options were selected.
+
+
+**Dismiss Icon (6)**\
+The dismiss icon gives the opportunity to reset the users' selection with one click/tap and set the chip to its default state.
+
+
+## Variants
+
+### Default Chip
+Simple chip variant to filter correspondent content for example show different contacts filtered by country options.
+<img src={ChipDefault} alt="Chip Default" />
+
+#### States
+<img src={ChipDefaultStates} alt="Chip Default States" />
+
+### Affix Chip
+To add and remove specific options from a chip group for example registering to different topics with newsletter mails. It is possible to predefine some options as default. Further topic options can be selected with the add dropdown chip. Selected or already visible topics inside the chip group are not visible in the dropdown menu anymore. Also selected options can be removed by clicking the dismiss icon. By doing so dismissed options appear as visible options in the dropdown menu.
+#### Add
+<img src={ChipAffixAdd} alt="Chip Affx Add" />
+
+##### States
+<img src={ChipAffixAddStates} alt="Chip Affx Add States" />
+
+#### Remove
+<img src={ChipAffixRemovable} alt="Chip Affx Removeable" />
+
+##### States
+<img src={ChipAffixRemovableStates} alt="Chip Affx Removeable States" />
+
+### Dropdown Chip
+By clicking on the dropdown chip within a chip group, a select list is displayed. The list can either display single or multi select options. This gives you the possibility to filter content in more detail and thus reach the desired result more quickly.
+
+#### Visible Option
+This chip variant comes with a single select list. The selected option is visible inside the chip.
+<img src={DropdownChipVisibleSingleOption} alt="Chip Dropdown with visible option" />
+
+##### States
+<img src={DropdownChipVisibleSingleOptionStates} alt="Chip Dropdown with visible option states" />
+
+#### Visible Label
+This chip variant comes with a multi select list. The selected option is not visible inside the chip.
+<img src={DropdownChipVisibleLabel} alt="Chip Dropdown with visible label" />
+
+##### States
+<img src={DropdownChipVisibleLabelStates} alt="Chip Dropdown with visible label states" />
+
+#### Visible Label & Option
+This chip variant is available in two different appearances. 
+
+#####  Example A
+The simple one shows a maximum of only one option and is displayed with a thin outline. This variant can be used, for example, as a stand-alone chip variant to sort content by date by using a single select list. 
+<img src={DropdownChipVisibleLabelOption} alt="Chip Dropdown with visible label and option" />
+
+###### Example A States
+<img src={DropdownChipVisibleLabelOptionStates} alt="Chip Dropdown with visible label and option states" />
+
+#####  Example B
+The other variant offers much more in-depth filtering options and is displayed with a thicker outline. In addition, it is equipped with a dismiss icon to reset the selected options with one click. A maximum of two options are allowed in the visible area. Further options are displayed as numbers using a number indicator component.
+<img src={DropdownChipVisibleLabelOptionHighlight} alt="Chip Dropdown with visible label and option highlight" />
+
+###### Example B States
+<img src={DropdownChipVisibleLabelOptionHighlightStates} alt="Chip Dropdown with visible label and option highlight states" />
+
+## Chip Group
+In most cases, the chip component is used as a chip group, which also exists as a component.
+<img src={ChipGroup} alt="Chip Group" />
+
+## Size
+The are two available sizes: 28px and 36px.
+<img src={ChipSizes} alt="Chip Sizes" />
+
+## Mouse interaction
+Depending on which chip variant is used, there are different interactions. In the default state, each chip variant is completely clickable as a whole. The chip variants with a dismiss icon (active state) consist of two clickable areas. Firstly, clicking on the dismiss icon returns the entire chip component to the default state. Secondly, you can click on the remaining area of the chip component to display a select list and change your option selection.
+<img src={ChipMouseInteraction} alt="Chip Mouse Interaction" width="50%" />
+
+
+***
+Check out the Figma component: **[Chip](https://www.figma.com/file/zPvPwPgb4EsYFXKC2nhzSG/Infineon-DDS-%7C-Main?type=design&node-id=17762-11219&mode=design)**
+***