diff --git a/.changeset/curly-mirrors-cross.md b/.changeset/curly-mirrors-cross.md new file mode 100644 index 0000000000..0af966211d --- /dev/null +++ b/.changeset/curly-mirrors-cross.md @@ -0,0 +1,22 @@ +--- +"@justeattakeaway/pie-webc-core": minor +"@justeattakeaway/pie-assistive-text": patch +"@justeattakeaway/pie-cookie-banner": patch +"@justeattakeaway/pie-notification": patch +"@justeattakeaway/pie-icon-button": patch +"@justeattakeaway/pie-checkbox": patch +"@justeattakeaway/pie-textarea": patch +"@justeattakeaway/pie-divider": patch +"@justeattakeaway/pie-spinner": patch +"@justeattakeaway/pie-button": patch +"@justeattakeaway/pie-switch": patch +"@justeattakeaway/pie-modal": patch +"@justeattakeaway/pie-card": patch +"@justeattakeaway/pie-chip": patch +"@justeattakeaway/pie-link": patch +"@justeattakeaway/pie-tag": patch +--- + +[Changed] - Update default props generic helper type to include all props by default +[Changed] - Naming of generic type +[Added] - JSDoc comment diff --git a/packages/components/pie-assistive-text/src/defs.ts b/packages/components/pie-assistive-text/src/defs.ts index 559c6d7754..3c49d15f74 100644 --- a/packages/components/pie-assistive-text/src/defs.ts +++ b/packages/components/pie-assistive-text/src/defs.ts @@ -1,4 +1,4 @@ -import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core'; +import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core'; export const variants = ['default', 'error', 'success'] as const; @@ -9,7 +9,7 @@ export interface AssistiveTextProps { variant?: typeof variants[number]; } -export type DefaultProps = ComponentDefaultPropsGeneric; +export type DefaultProps = ComponentDefaultProps; export const defaultProps: DefaultProps = { variant: 'default', diff --git a/packages/components/pie-button/src/defs.ts b/packages/components/pie-button/src/defs.ts index e736cf1b2e..8bd31ae702 100644 --- a/packages/components/pie-button/src/defs.ts +++ b/packages/components/pie-button/src/defs.ts @@ -1,4 +1,4 @@ -import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core'; +import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core'; export const sizes = ['xsmall', 'small-productive', 'small-expressive', 'medium', 'large'] as const; export const responsiveSizes = ['productive', 'expressive'] as const; @@ -101,7 +101,7 @@ export interface ButtonProps { responsiveSize?: typeof responsiveSizes[number]; } -export type DefaultProps = ComponentDefaultPropsGeneric; +export type DefaultProps = ComponentDefaultProps; export const defaultProps: DefaultProps = { size: 'medium', diff --git a/packages/components/pie-card/src/defs.ts b/packages/components/pie-card/src/defs.ts index 56c7aff2c7..cf65c26151 100644 --- a/packages/components/pie-card/src/defs.ts +++ b/packages/components/pie-card/src/defs.ts @@ -1,4 +1,4 @@ -import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core'; +import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core'; export const variants = ['default', 'outline', 'inverse', 'outline-inverse'] as const; export const tags = ['a', 'button'] as const; @@ -51,7 +51,7 @@ export interface CardProps { /** * What HTML element the card should be such as `a` or `button`. */ - tag?: typeof tags[number]; + tag?: typeof tags[number]; /** * Sets the padding of the card. Can be either a single value or two values @@ -61,11 +61,11 @@ export interface CardProps { padding?: PaddingValue | `${PaddingValue},${PaddingValue}`; } -export type DefaultProps = ComponentDefaultPropsGeneric; +export type DefaultProps = ComponentDefaultProps; export const defaultProps: DefaultProps = { - tag: 'button', - variant: 'default', disabled: false, + variant: 'default', isDraggable: false, + tag: 'button', }; diff --git a/packages/components/pie-checkbox/src/defs.ts b/packages/components/pie-checkbox/src/defs.ts index 3823a0a127..ca16f9bc1c 100644 --- a/packages/components/pie-checkbox/src/defs.ts +++ b/packages/components/pie-checkbox/src/defs.ts @@ -1,4 +1,4 @@ -import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core'; +import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core'; export const statusTypes = ['default', 'success', 'error'] as const; @@ -64,15 +64,16 @@ export interface CheckboxProps { status?: typeof statusTypes[number]; } -export type DefaultProps = ComponentDefaultPropsGeneric; +export type DefaultProps = ComponentDefaultProps>; export const defaultProps: DefaultProps = { // a default value for the html value attribute. // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value value: 'on', - required: false, + disabled: false, defaultChecked: false, - indeterminate: false, checked: false, + indeterminate: false, + required: false, status: 'default', }; diff --git a/packages/components/pie-chip/src/defs.ts b/packages/components/pie-chip/src/defs.ts index 92b84cb0a9..307989c247 100644 --- a/packages/components/pie-chip/src/defs.ts +++ b/packages/components/pie-chip/src/defs.ts @@ -1,4 +1,4 @@ -import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core'; +import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core'; export const variants = ['default', 'outline', 'ghost'] as const; @@ -43,7 +43,7 @@ export interface ChipProps { export const ON_CHIP_CLOSE_EVENT = 'pie-chip-close'; -export type DefaultProps = ComponentDefaultPropsGeneric; +export type DefaultProps = ComponentDefaultProps>; export const defaultProps: DefaultProps = { variant: 'default', diff --git a/packages/components/pie-cookie-banner/src/defs.ts b/packages/components/pie-cookie-banner/src/defs.ts index 7f2846076f..ddba5e863c 100644 --- a/packages/components/pie-cookie-banner/src/defs.ts +++ b/packages/components/pie-cookie-banner/src/defs.ts @@ -1,4 +1,4 @@ -import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core'; +import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core'; import { TemplateResult, @@ -143,5 +143,4 @@ export interface CustomTagEnhancers { [key: string]: (tagContent: string) => TemplateResult; } -export type DefaultProps = ComponentDefaultPropsGeneric; - +export type DefaultProps = ComponentDefaultProps; diff --git a/packages/components/pie-divider/src/defs.ts b/packages/components/pie-divider/src/defs.ts index b5b7ea675a..32da8afaf3 100644 --- a/packages/components/pie-divider/src/defs.ts +++ b/packages/components/pie-divider/src/defs.ts @@ -1,20 +1,20 @@ -import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core'; +import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core'; export const variants = ['default', 'inverse'] as const; export const orientations = ['horizontal', 'vertical'] as const; export interface DividerProps { /** - * What style variant the divider should be such as default or vertical. + * What style variant the divider should be such as default or inverse. */ variant?: typeof variants[number]; /** - * What orientation the divider should be such as horizontal or inverse. + * What orientation the divider should be such as horizontal or vertical. */ orientation?: typeof orientations[number]; } -export type DefaultProps = ComponentDefaultPropsGeneric; +export type DefaultProps = ComponentDefaultProps; export const defaultProps: DefaultProps = { variant: 'default', diff --git a/packages/components/pie-icon-button/src/defs.ts b/packages/components/pie-icon-button/src/defs.ts index b29b89e9b4..fed0194919 100644 --- a/packages/components/pie-icon-button/src/defs.ts +++ b/packages/components/pie-icon-button/src/defs.ts @@ -1,4 +1,4 @@ -import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core'; +import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core'; export const sizes = ['xsmall', 'small', 'medium', 'large'] as const; export const variants = ['primary', 'secondary', 'outline', 'ghost', @@ -27,7 +27,7 @@ export interface IconButtonProps { isLoading?: boolean; } -export type DefaultProps = ComponentDefaultPropsGeneric; +export type DefaultProps = ComponentDefaultProps; export const defaultProps: DefaultProps = { size: 'medium', diff --git a/packages/components/pie-link/src/defs.ts b/packages/components/pie-link/src/defs.ts index 41ffbb6de9..da68dcca78 100644 --- a/packages/components/pie-link/src/defs.ts +++ b/packages/components/pie-link/src/defs.ts @@ -1,4 +1,4 @@ -import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core'; +import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core'; export const variants = ['default', 'high-visibility', 'inverse'] as const; export const sizes = ['small', 'medium'] as const; @@ -68,16 +68,16 @@ export interface LinkProps { type?: typeof buttonTypes[number]; } -export type DefaultProps = ComponentDefaultPropsGeneric; +export type DefaultProps = ComponentDefaultProps>; export const defaultProps: DefaultProps = { tag: 'a', variant: 'default', size: 'medium', underline: 'default', - iconPlacement: 'leading', isBold: false, isStandalone: false, hasVisited: false, + iconPlacement: 'leading', type: 'submit', }; diff --git a/packages/components/pie-modal/src/defs.ts b/packages/components/pie-modal/src/defs.ts index 20ff83ef08..80cd9515bd 100644 --- a/packages/components/pie-modal/src/defs.ts +++ b/packages/components/pie-modal/src/defs.ts @@ -1,4 +1,4 @@ -import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core'; +import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core'; import { Variant } from '@justeattakeaway/pie-button/src/defs.ts'; @@ -93,6 +93,11 @@ export type ModalProps = { */ leadingAction?: ActionProps; + /** + * The supporting action configuration for the modal. + */ + supportingAction?: ActionProps; + /* * The position of the modal; this controls where it will appear on the page. */ @@ -107,11 +112,6 @@ export type ModalProps = { * The size of the modal; this controls how wide it will appear on the page. */ size?: typeof sizes[number]; - - /** - * The supporting action configuration for the modal. - */ - supportingAction?: ActionProps; }; /** @@ -151,17 +151,17 @@ export const ON_MODAL_SUPPORTING_ACTION_CLICK = 'pie-modal-supporting-action-cli export type ModalActionType = 'leading' | 'supporting'; -export type DefaultProps = ComponentDefaultPropsGeneric; +export type DefaultProps = ComponentDefaultProps>; export const defaultProps: DefaultProps = { - headingLevel: 'h2', hasBackButton: false, hasStackedActions: false, + headingLevel: 'h2', + isOpen: false, isDismissible: false, isFooterPinned: true, isFullWidthBelowMid: false, isLoading: false, - isOpen: false, position: 'center', size: 'medium', }; diff --git a/packages/components/pie-modal/test/visual/pie-modal.spec.ts b/packages/components/pie-modal/test/visual/pie-modal.spec.ts index a680600c84..6c3073168a 100644 --- a/packages/components/pie-modal/test/visual/pie-modal.spec.ts +++ b/packages/components/pie-modal/test/visual/pie-modal.spec.ts @@ -409,7 +409,7 @@ test.describe('Prop: `supportingAction`', () => { const modal = page.locator(componentFooterSelector); await expect.soft(modal).not.toBeVisible(); - await percySnapshot(page, 'Modal displays footer'); + await percySnapshot(page, 'Modal hides footer if there is no leadingAction'); }); test.describe('when prop is provided but the optional child properties of `supportingAction` are not provided', () => { diff --git a/packages/components/pie-notification/src/defs.ts b/packages/components/pie-notification/src/defs.ts index c7cf99a5cb..4cc144ff0c 100644 --- a/packages/components/pie-notification/src/defs.ts +++ b/packages/components/pie-notification/src/defs.ts @@ -1,4 +1,4 @@ -import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core'; +import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core'; export const variants = ['neutral', 'neutral-alternative', 'info', 'success', 'warning', 'error'] as const; export const headingLevels = ['h2', 'h3', 'h4', 'h5', 'h6'] as const; @@ -116,15 +116,15 @@ export const ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT = `${componentSelector}- */ export const ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT = `${componentSelector}-supporting-action-click`; -export type DefaultProps = ComponentDefaultPropsGeneric; +export type DefaultProps = ComponentDefaultProps>; export const defaultProps: DefaultProps = { - isOpen: true, variant: 'neutral', position: 'inline-content', isDismissible: true, isCompact: false, headingLevel: 'h2', hideIcon: false, + isOpen: true, hasStackedActions: false, }; diff --git a/packages/components/pie-spinner/src/defs.ts b/packages/components/pie-spinner/src/defs.ts index 7827ce1679..afd06a0b96 100644 --- a/packages/components/pie-spinner/src/defs.ts +++ b/packages/components/pie-spinner/src/defs.ts @@ -1,4 +1,4 @@ -import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core'; +import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core'; export const sizes = ['xsmall', 'small', 'medium', 'large', 'xlarge'] as const; export const variants = ['brand', 'secondary', 'inverse'] as const; @@ -22,7 +22,8 @@ export interface SpinnerProps { variant?: typeof variants[number]; } -export type DefaultProps = ComponentDefaultPropsGeneric; +export type DefaultProps = ComponentDefaultProps>; + export const defaultProps: DefaultProps = { size: 'medium', variant: 'brand', diff --git a/packages/components/pie-switch/src/defs.ts b/packages/components/pie-switch/src/defs.ts index fef648dacd..57fae96821 100644 --- a/packages/components/pie-switch/src/defs.ts +++ b/packages/components/pie-switch/src/defs.ts @@ -1,4 +1,4 @@ -import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core'; +import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core'; export const labelPlacements = ['leading', 'trailing'] as const; @@ -51,11 +51,12 @@ export interface SwitchProps { */ export const ON_SWITCH_CHANGED_EVENT = 'change'; -export type DefaultProps = ComponentDefaultPropsGeneric; +export type DefaultProps = ComponentDefaultProps>; + export const defaultProps: DefaultProps = { - labelPlacement: 'leading', checked: false, required: false, - value: 'on', disabled: false, + value: 'on', + labelPlacement: 'leading', }; diff --git a/packages/components/pie-tag/src/defs.ts b/packages/components/pie-tag/src/defs.ts index 8749cd2a2e..a8bc8f1b86 100644 --- a/packages/components/pie-tag/src/defs.ts +++ b/packages/components/pie-tag/src/defs.ts @@ -1,4 +1,4 @@ -import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core'; +import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core'; export const variants = ['neutral-alternative', 'neutral', 'outline', 'ghost', 'blue', 'green', 'yellow', 'red', 'brand'] as const; export const sizes = ['small', 'large'] as const; @@ -25,11 +25,11 @@ export interface TagProps { size?: typeof sizes[number]; } -export type DefaultProps = ComponentDefaultPropsGeneric; +export type DefaultProps = ComponentDefaultProps; export const defaultProps: DefaultProps = { variant: 'neutral', - size: 'large', isStrong: false, isDimmed: false, + size: 'large', }; diff --git a/packages/components/pie-text-input/src/defs.ts b/packages/components/pie-text-input/src/defs.ts index 454724616d..f9bb041581 100644 --- a/packages/components/pie-text-input/src/defs.ts +++ b/packages/components/pie-text-input/src/defs.ts @@ -1,4 +1,4 @@ -import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core'; +import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core'; export const types = ['text', 'number', 'password', 'url', 'email', 'tel'] as const; export const inputModes = ['none', 'text', 'tel', 'url', 'email', 'numeric', 'decimal', 'search'] as const; @@ -115,7 +115,7 @@ export interface TextInputProps { /** * The default values for the `TextInputProps` that are required (i.e. they have a fallback value in the component). */ -type DefaultProps = ComponentDefaultPropsGeneric; +type DefaultProps = ComponentDefaultProps; /** * Default values for optional properties that have default fallback values in the component. diff --git a/packages/components/pie-textarea/src/defs.ts b/packages/components/pie-textarea/src/defs.ts index 2f4176ad3c..7ad3842ac6 100644 --- a/packages/components/pie-textarea/src/defs.ts +++ b/packages/components/pie-textarea/src/defs.ts @@ -1,4 +1,4 @@ -import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core'; +import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core'; export const sizes = ['small', 'medium', 'large'] as const; @@ -17,11 +17,12 @@ export interface TextareaProps { /** * The default values for the `TextareaProps` that are required (i.e. they have a fallback value in the component). */ -type DefaultProps = ComponentDefaultPropsGeneric; +type DefaultProps = ComponentDefaultProps; /** * Default values for optional properties that have default fallback values in the component. */ export const defaultProps: DefaultProps = { + disabled: false, size: 'medium', }; diff --git a/packages/components/pie-webc-core/src/types/component-default-props-generic.ts b/packages/components/pie-webc-core/src/types/component-default-props-generic.ts index 784daf616c..3533ad4ea7 100644 --- a/packages/components/pie-webc-core/src/types/component-default-props-generic.ts +++ b/packages/components/pie-webc-core/src/types/component-default-props-generic.ts @@ -1 +1,31 @@ -export type ComponentDefaultPropsGeneric = Readonly>>; +/** + * This type should be used when defining the default props for a component. + * It is a generic type that takes two type parameters: + * - `T` is the type of the props object that the default props are being defined for. + * - `K` is the type of the keys in `T` that should be required in the default props. + * By default, `K` is set to be all the keys in `T`. This means that all the keys in `T` will be required in the default props. + * You can override this by specifying a subset of the keys in `T` that should be required in the default props. + * + * @example ```tsx + * interface MyComponentProps { + * a: string; + * b?: number; + * c: boolean; + * } + * const allProps: ComponentDefaultProps = { + * a: 'default value', + * b: 42, + * c: true, + * }; + * + * const pickProps: ComponentDefaultProps = { + * a: 'default value', + * }; + * + * const omitProps: ComponentDefaultProps> = { + * b: 42, + * c: true, + * }; + * ``` + */ +export type ComponentDefaultProps = Readonly>>;