Merge branch 'main' into dsw-1624-pie-webc-docs-for-consumers

.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

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<AssistiveTextProps, 'variant'>;
+export type DefaultProps = ComponentDefaultProps<AssistiveTextProps>;
 
 export const defaultProps: DefaultProps = {
     variant: 'default',

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<ButtonProps, 'size' | 'type' | 'variant' | 'iconPlacement' | 'disabled' | 'isLoading' | 'isFullWidth' | 'isResponsive'>;
+export type DefaultProps = ComponentDefaultProps<ButtonProps, 'size' | 'type' | 'variant' | 'iconPlacement' | 'disabled' | 'isFullWidth' | 'isLoading' | 'isResponsive'>;
 
 export const defaultProps: DefaultProps = {
     size: 'medium',

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<CardProps, 'tag' | 'variant' | 'disabled' | 'isDraggable'>;
+export type DefaultProps = ComponentDefaultProps<CardProps, 'disabled' | 'variant' | 'isDraggable' | 'tag'>;
 
 export const defaultProps: DefaultProps = {
-    tag: 'button',
-    variant: 'default',
     disabled: false,
+    variant: 'default',
     isDraggable: false,
+    tag: 'button',
 };

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<CheckboxProps, 'value' | 'required' | 'indeterminate' | 'checked' | 'defaultChecked' | 'status'>;
+export type DefaultProps = ComponentDefaultProps<CheckboxProps, keyof Omit<CheckboxProps, 'label' | 'name' | 'aria' | 'assistiveText'>>;
 
 export const defaultProps: DefaultProps = {
     // a default value for the html <input type="checkbox" /> 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',
 };

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<ChipProps, 'variant' | 'disabled' | 'isSelected' | 'isLoading' | 'isDismissible'>;
+export type DefaultProps = ComponentDefaultProps<ChipProps, keyof Omit<ChipProps, 'aria'>>;
 
 export const defaultProps: DefaultProps = {
     variant: 'default',

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<CookieBannerProps, 'hasPrimaryActionsOnly' | 'defaultPreferences' | 'locale' | 'cookieStatementLink' | 'cookieTechnologiesLink'>;
-
+export type DefaultProps = ComponentDefaultProps<CookieBannerProps>;

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<DividerProps, 'variant' | 'orientation'>;
+export type DefaultProps = ComponentDefaultProps<DividerProps>;
 
 export const defaultProps: DefaultProps = {
     variant: 'default',

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<IconButtonProps, 'size' | 'variant' | 'disabled' | 'disabled' | 'isLoading'>;
+export type DefaultProps = ComponentDefaultProps<IconButtonProps>;
 
 export const defaultProps: DefaultProps = {
     size: 'medium',

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<LinkProps, 'tag' | 'variant' | 'size' | 'underline' | 'iconPlacement' | 'isBold' | 'isStandalone' | 'hasVisited' | 'type'>;
+export type DefaultProps = ComponentDefaultProps<LinkProps, keyof Omit<LinkProps, 'aria' | 'href' | 'target' | 'rel'>>;
 
 export const defaultProps: DefaultProps = {
     tag: 'a',
     variant: 'default',
     size: 'medium',
     underline: 'default',
-    iconPlacement: 'leading',
     isBold: false,
     isStandalone: false,
     hasVisited: false,
+    iconPlacement: 'leading',
     type: 'submit',
 };

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<ModalProps, 'headingLevel'|'hasBackButton'|'hasStackedActions'|'isDismissible'|'isFooterPinned'|'isFullWidthBelowMid'|'isLoading'|'isOpen'|'position'|'size'>;
+export type DefaultProps = ComponentDefaultProps<ModalProps, keyof Omit<ModalProps, 'aria' | 'heading' | 'leadingAction' | 'supportingAction' | 'returnFocusAfterCloseSelector'>>;
 
 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',
 };

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', () => {

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<NotificationProps, 'isOpen' | 'variant' | 'position' | 'isDismissible' | 'isCompact' | 'headingLevel' | 'hideIcon' | 'hasStackedActions'>;
+export type DefaultProps = ComponentDefaultProps<NotificationProps, keyof Omit<NotificationProps, 'heading' | 'aria' | 'leadingAction' | 'supportingAction'>>;
 
 export const defaultProps: DefaultProps = {
-    isOpen: true,
     variant: 'neutral',
     position: 'inline-content',
     isDismissible: true,
     isCompact: false,
     headingLevel: 'h2',
     hideIcon: false,
+    isOpen: true,
     hasStackedActions: false,
 };

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<SpinnerProps, 'size' | 'variant'>;
+export type DefaultProps = ComponentDefaultProps<SpinnerProps, keyof Omit<SpinnerProps, 'aria'>>;
+
 export const defaultProps: DefaultProps = {
     size: 'medium',
     variant: 'brand',

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<SwitchProps, 'labelPlacement' | 'checked' | 'required' | 'value' | 'disabled'>;
+export type DefaultProps = ComponentDefaultProps<SwitchProps, keyof Omit<SwitchProps, 'aria' | 'label' | 'name'>>;
+
 export const defaultProps: DefaultProps = {
-    labelPlacement: 'leading',
     checked: false,
     required: false,
-    value: 'on',
     disabled: false,
+    value: 'on',
+    labelPlacement: 'leading',
 };

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<TagProps, 'variant' | 'size' | 'isStrong' | 'isDimmed'>;
+export type DefaultProps = ComponentDefaultProps<TagProps>;
 
 export const defaultProps: DefaultProps = {
     variant: 'neutral',
-    size: 'large',
     isStrong: false,
     isDimmed: false,
+    size: 'large',
 };

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<TextInputProps, 'type' | 'value' | 'size' | 'status'>;
+type DefaultProps = ComponentDefaultProps<TextInputProps, 'type' | 'value' | 'size' | 'status'>;
 
 /**
  * Default values for optional properties that have default fallback values in the component.

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<TextareaProps, 'size'>;
+type DefaultProps = ComponentDefaultProps<TextareaProps>;
 
 /**
  * Default values for optional properties that have default fallback values in the component.
  */
 export const defaultProps: DefaultProps = {
+    disabled: false,
     size: 'medium',
 };