commercetools UI Kit

The Typography system in the commercetools UI Kit is built upon a set of design tokens that define the visual foundation for text. These tokens are organized into four main categories:

• Font Families: The specific typeface stacks used across the UI.
• Font Sizes: The predefined scale for text dimensions.
• Font Weights: The thickness/boldness values for text.
• Line Heights: The vertical spacing between lines of text.

These tokens are part of the choiceGroupsByTheme.default configuration and are intended to ensure visual consistency across all UI components.

A PrimaryActionDropdown is a specialized dropdown component designed to handle multiple actions, where the first action can be triggered immediately without the user needing to open the dropdown menu.

Key behaviors:

• Primary Action: The first non-disabled <Option /> is rendered as the head of the dropdown and serves as the primary action.
• Disabled State: If all <Option /> components within the dropdown are disabled, the entire dropdown head will be disabled.

Choose the appropriate input type based on the number of options and the selection requirements:

• Use Checkbox when you have multiple options and allow multiple selections.
• Use Radio when you have multiple options but only allow a single selection.
• Use ToggleInput when you have exactly two states (on/off) for a single setting.

| Switch type  | Number of options | Selection |
| ------------- | ----------------- | --------- |
| `Checkbox`     | Multiple          | Multiple  |
| `Radio`       | Multiple          | Single    |
| `ToggleInput` | Two               | Single    |

To represent complex or nested prop types (like arrays or objects) in the generated Markdown table, use the following syntax notation in your documentation:

It is highly recommended to use JS Doc comments on each prop type to provide detailed information that will be rendered in the table.