Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 6 commits into from
May 14, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions docs/migration/alpha-beta.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
10 changes: 8 additions & 2 deletions packages/components/src/components/accordion/model.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
20 changes: 12 additions & 8 deletions packages/components/src/components/badge/model.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 &
Expand Down
38 changes: 20 additions & 18 deletions packages/components/src/components/button/model.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
/**
Expand Down Expand Up @@ -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).
Expand All @@ -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 = {};

Expand Down
10 changes: 8 additions & 2 deletions packages/components/src/components/card/model.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 &
Expand Down
10 changes: 8 additions & 2 deletions packages/components/src/components/divider/model.ts
Original file line number Diff line number Diff line change
@@ -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 &
Expand Down
23 changes: 16 additions & 7 deletions packages/components/src/components/drawer/model.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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.
Expand All @@ -48,7 +56,8 @@ export type DBDrawerProps = DBDrawerDefaultProps &
GlobalProps &
CloseEventProps &
InnerCloseButtonProps &
WidthProps;
WidthProps &
SpacingProps;

export interface DBDrawerDefaultState {
handleDialogOpen: () => void;
Expand Down
9 changes: 3 additions & 6 deletions packages/components/src/components/header/model.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import {
ContainerWidthProps,
GlobalProps,
GlobalState,
InitializedState,
Expand All @@ -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.
Expand All @@ -35,7 +31,8 @@ export interface DBHeaderDefaultProps {

export type DBHeaderProps = DBHeaderDefaultProps &
GlobalProps &
ToggleEventProps;
ToggleEventProps &
ContainerWidthProps;

export interface DBHeaderDefaultState {
forcedToMobile?: boolean;
Expand Down
10 changes: 8 additions & 2 deletions packages/components/src/components/icon/model.ts
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
39 changes: 21 additions & 18 deletions packages/components/src/components/input/model.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
};

Expand Down
15 changes: 12 additions & 3 deletions packages/components/src/components/link/model.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 &
Expand Down
Loading
Loading