Skip to content

Commit

Permalink
feat: add additional enum arrays for better TS support
Browse files Browse the repository at this point in the history
  • Loading branch information
nmerget committed May 13, 2024
1 parent a5c6c81 commit e67fdd6
Show file tree
Hide file tree
Showing 27 changed files with 390 additions and 259 deletions.
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 property `size` & `variant` in `db-section` was renamed to `spacing` & `width` to align it with other components | Find 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

0 comments on commit e67fdd6

Please sign in to comment.