feat: add additional enum arrays for better TS support (#2639)

docs/migration/alpha-beta.md

@@ -43,6 +43,7 @@ The prop labelVariant for form-components (input, checkbox, ...) has been rename
 | 🔄 changed `db-accordion` title                                                                                | We replaced `title` with `headlinePlain` because there is already a html default `title`, which caused trouble                          | Rename `title` to `headlinePlain` or use the slot `headline`                                                                                                                                                                                              |
 | ❌ removed prop `areaPopup` from `db-navigation-item`                                                          | We no longer support opening sub-navigations from via prop.                                                                             | There is no alternative at the moment.                                                                                                                                                                                                                    |
 | 🔄 changed `db-header` slot names                                                                              | The slot names for "action" containers changed                                                                                          | 1. `callToAction` ➡ `primaryAction` <br/>2. `actionBar` ➡ `secondaryAction`                                                                                                                                                                             |
+| 🔄 renamed `size` & `variant` in `db-section`                                                                  | The properties `size` and `variant` in `db-section` were renamed to `spacing` & `width` to align it with other components               | Search for every `db-section` and replace `size` with `spacing` and `variant` with `width`                                                                                                                                                                |
 
 ### React
 

packages/components/src/components/accordion/model.ts

@@ -6,17 +6,23 @@ import {
 } from '../../shared/model';
 import { DBAccordionItemDefaultProps } from '../accordion-item/model';
 
+export const AccordionVariantList = ['card'] as const;
+export type AccordionVariantType = (typeof AccordionVariantList)[number];
+
+export const AccordionBehaviourList = ['multiple', 'single'] as const;
+export type AccordionBehaviourType = (typeof AccordionBehaviourList)[number];
+
 export interface DBAccordionDefaultProps {
 	/**
 	 * Defines the display of the accordion and the items:
 	 * "default": with a dividing line between the items
 	 * "card": w/o dividing line, but items are shown in the card variant
 	 */
-	variant?: 'card';
+	variant?: AccordionVariantType;
 	/**
 	 * To allow multiple items open at the same time or only 1 item
 	 */
-	behaviour?: 'multiple' | 'single';
+	behaviour?: AccordionBehaviourType;
 
 	/**
 	 * The index of items which should be open when loading the accordion

packages/components/src/components/badge/model.ts

@@ -6,18 +6,22 @@ import {
 	SizeProps
 } from '../../shared/model';
 
+export const BadgePlacementList = [
+	'inline',
+	'corner-top-left',
+	'corner-top-right',
+	'corner-center-left',
+	'corner-center-right',
+	'corner-bottom-left',
+	'corner-bottom-right'
+] as const;
+export type BadgePlacementType = (typeof BadgePlacementList)[number];
+
 export interface DBBadgeDefaultProps {
 	/**
 	 * The `placement` attributes `corner-*` values change the position to absolute and adds a transform based on the placement.
 	 */
-	placement?:
-		| 'inline'
-		| 'corner-top-left'
-		| 'corner-top-right'
-		| 'corner-center-left'
-		| 'corner-center-right'
-		| 'corner-bottom-left'
-		| 'corner-bottom-right';
+	placement?: BadgePlacementType;
 }
 
 export type DBBadgeProps = DBBadgeDefaultProps &

packages/components/src/components/button/model.ts

@@ -4,18 +4,24 @@ import {
 	GlobalProps,
 	GlobalState,
 	IconProps,
+	SizeProps,
+	SizeType,
 	WidthProps
 } from '../../shared/model';
 
-// TODO: 👇 Find a way to make react-docgen work without duplicating the types below
-enum buttonVariants {
-	'outlined' = 'outlined',
-	'brand' = 'brand',
-	'filled' = 'filled',
-	'ghost' = 'ghost'
-}
-export const buttonVariantsList = Object.values(buttonVariants);
-export type ButtonVariantsType = 'outlined' | 'brand' | 'filled' | 'ghost';
+export const ButtonVariantList = [
+	'outlined',
+	'brand',
+	'filled',
+	'ghost'
+] as const;
+export type ButtonVariantType = (typeof ButtonVariantList)[number];
+
+export const ButtonTypeList = ['button', 'reset', 'submit'] as const;
+export type ButtonTypeType = (typeof ButtonTypeList)[number];
+
+export const ButtonStateList = ['loading'] as const;
+export type ButtonStateType = (typeof ButtonStateList)[number];
 
 export type DBButtonDefaultProps = {
 	/**
@@ -51,7 +57,7 @@ export type DBButtonDefaultProps = {
 	/**
 	 * The type attribute specifies the [type of button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type).
 	 */
-	type?: 'button' | 'reset' | 'submit';
+	type?: ButtonTypeType;
 
 	/**
 	 * The value attribute specifies an initial [value for the button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value).
@@ -61,24 +67,20 @@ export type DBButtonDefaultProps = {
 	/**
 	 * Show loading progress inside button.
 	 */
-	state?: 'loading';
-
-	/**
-	 * The size of the button
-	 */
-	size?: 'small';
+	state?: ButtonStateType;
 
 	/**
 	 * Variant of the button. Use only 1 primary button on a page as CTA otherwise use one of the adaptive buttons.
 	 */
-	variant?: ButtonVariantsType | string;
+	variant?: ButtonVariantType | string;
 };
 
 export type DBButtonProps = DBButtonDefaultProps &
 	GlobalProps &
 	ClickEventProps<HTMLButtonElement> &
 	IconProps &
-	WidthProps;
+	WidthProps &
+	SizeProps;
 
 export type DBButtonDefaultState = {};
 

packages/components/src/components/card/model.ts

@@ -6,13 +6,19 @@ import {
 	SpacingProps
 } from '../../shared/model';
 
+export const CardBehaviourList = ['default', 'interactive'] as const;
+export type CardBehaviourType = (typeof CardBehaviourList)[number];
+
+export const CardElevationLevelList = ['1', '2', '3'] as const;
+export type CardElevationLevelType = (typeof CardElevationLevelList)[number];
+
 export type DBCardDefaultProps = {
 	/**
 	 * Makes the card interactive
 	 */
-	behaviour?: 'default' | 'interactive';
+	behaviour?: CardBehaviourType;
 
-	elevationLevel?: '1' | '2' | '3';
+	elevationLevel?: CardElevationLevelType;
 };
 
 export type DBCardProps = DBCardDefaultProps &

packages/components/src/components/divider/model.ts

@@ -1,8 +1,14 @@
 import { EmphasisProps, GlobalProps, GlobalState } from '../../shared/model';
 
+export const DividerMarginList = ['none', '_'] as const;
+export type DividerMarginType = (typeof DividerMarginList)[number];
+
+export const DividerVariantList = ['horizontal', 'vertical'] as const;
+export type DividerVariantType = (typeof DividerVariantList)[number];
+
 export type DBDividerDefaultProps = {
-	margin?: 'none' | '_';
-	variant?: 'horizontal' | 'vertical';
+	margin?: DividerMarginType;
+	variant?: DividerVariantType;
 };
 
 export type DBDividerProps = DBDividerDefaultProps &

packages/components/src/components/drawer/model.ts

@@ -4,21 +4,33 @@ import {
 	GlobalProps,
 	GlobalState,
 	InnerCloseButtonProps,
+	SpacingProps,
 	WidthProps
 } from '../../shared/model';
 
+export const DrawerBackdropList = [
+	'none',
+	'strong',
+	'weak',
+	'invisible'
+] as const;
+export type DrawerBackdropType = (typeof DrawerBackdropList)[number];
+
+export const DrawerDirectionList = ['left', 'right', 'up', 'down'] as const;
+export type DrawerDirectionType = (typeof DrawerDirectionList)[number];
+
 export interface DBDrawerDefaultProps {
 	/**
 	 * The backdrop attribute changes the opacity of the backdrop.
 	 * The backdrop 'none' will use `dialog.show()` instead of `dialog.showModal()`
 	 */
-	backdrop?: 'strong' | 'weak' | 'invisible' | 'none';
+	backdrop?: DrawerBackdropType;
 
 	/**
 	 * The direction attribute changes the position & animation of the drawer.
 	 * E.g. "left" slides from left screen border to the right.
 	 */
-	direction?: 'left' | 'right' | 'up' | 'down';
+	direction?: DrawerDirectionType;
 
 	/**
 	 * React specific to change the header of the drawer.
@@ -33,10 +45,6 @@ export interface DBDrawerDefaultProps {
 	 * The "end" depends on which direction you use.
 	 */
 	rounded?: boolean;
-	/**
-	 * The @dependabot recreate attribute changes the padding inside the drawer.
-	 */
-	spacing?: 'medium' | 'small' | 'large' | 'none';
 
 	/**
 	 * The withCloseButton attribute shows/hides the default close button.
@@ -48,7 +56,8 @@ export type DBDrawerProps = DBDrawerDefaultProps &
 	GlobalProps &
 	CloseEventProps &
 	InnerCloseButtonProps &
-	WidthProps;
+	WidthProps &
+	SpacingProps;
 
 export interface DBDrawerDefaultState {
 	handleDialogOpen: () => void;

packages/components/src/components/header/model.ts

@@ -1,4 +1,5 @@
 import {
+	ContainerWidthProps,
 	GlobalProps,
 	GlobalState,
 	InitializedState,
@@ -14,11 +15,6 @@ export interface DBHeaderDefaultProps {
 	secondaryAction?: unknown;
 	drawerOpen?: boolean;
 
-	/**
-	 * Set max width for header
-	 */
-	width?: 'full' | 'medium' | 'large';
-
 	/**
 	 * Forces the header to use mobile layout for desktop as well.
 	 * You should only use this setting if you really can't provide a smaller navigation.
@@ -35,7 +31,8 @@ export interface DBHeaderDefaultProps {
 
 export type DBHeaderProps = DBHeaderDefaultProps &
 	GlobalProps &
-	ToggleEventProps;
+	ToggleEventProps &
+	ContainerWidthProps;
 
 export interface DBHeaderDefaultState {
 	forcedToMobile?: boolean;

packages/components/src/components/icon/model.ts

@@ -1,8 +1,14 @@
 import { GlobalProps, GlobalState, IconProps } from '../../shared/model';
 
+export const IconVariantList = ['default', 'inverted', 'filled'] as const;
+export type IconVariantType = (typeof IconVariantList)[number];
+
+export const IconWeightList = ['16', '20', '24', '32', '48', '64'] as const;
+export type IconWeightType = (typeof IconWeightList)[number];
+
 export type DBIconDefaultProps = {
-	variant?: 'default' | 'inverted' | 'filled';
-	weight?: '16' | '20' | '24' | '32' | '48' | '64';
+	variant?: IconVariantType;
+	weight?: IconWeightType;
 };
 
 export type DBIconProps = DBIconDefaultProps & GlobalProps & IconProps;

packages/components/src/components/input/model.ts

@@ -17,6 +17,26 @@ import {
 	KeyValueType
 } from '../../shared/model';
 
+export const InputTypeList = [
+	'color',
+	'date',
+	'datetime-local',
+	'email',
+	'file', // TODO: move this to own component
+	'hidden',
+	'month',
+	'number',
+	'password',
+	'range', // TODO: move this to own component
+	'search',
+	'tel',
+	'text',
+	'time',
+	'url',
+	'week'
+] as const;
+export type InputTypeType = (typeof InputTypeList)[number];
+
 export type DBInputDefaultProps = {
 	dataList?: KeyValueType[];
 	dataListId?: string;
@@ -36,24 +56,7 @@ export type DBInputDefaultProps = {
 	/**
 	 * 	Type of form control
 	 */
-	type?:
-		| 'color'
-		| 'date'
-		| 'datetime-local'
-		| 'email'
-		| 'file' // TODO: move this to own component
-		| 'hidden'
-		| 'month'
-		| 'number'
-		| 'password'
-		| 'range' // TODO: move this to own component
-		| 'search'
-		| 'tel'
-		| 'text'
-		| 'time'
-		| 'url'
-		| 'week'
-		| string;
+	type?: InputTypeType | string;
 	step?: number | string;
 };
 

packages/components/src/components/link/model.ts

@@ -6,11 +6,20 @@ import {
 	LinkProps
 } from '../../shared/model';
 
+export const LinkVariantList = ['adaptive', 'brand', 'inline'] as const;
+export type LinkVariantType = (typeof LinkVariantList)[number];
+
+export const LinkSizeList = ['medium', 'small'] as const;
+export type LinkSizeType = (typeof LinkSizeList)[number];
+
+export const LinkContentList = ['external', 'internal'] as const;
+export type LinkContentType = (typeof LinkContentList)[number];
+
 export interface DBLinkDefaultProps {
-	content?: 'external' | 'internal';
+	content?: LinkContentType;
 	id?: string;
-	size?: 'medium' | 'small';
-	variant?: 'adaptive' | 'brand' | 'inline';
+	size?: LinkSizeType;
+	variant?: LinkVariantType;
 }
 
 export type DBLinkProps = DBLinkDefaultProps &