feat(pie-input): DSW-1586 add size property to input component (#1354)

* feat(pie-input): DSW-1586 add size property to input component

* feat(pie-storybook): DSW-1586 add storybook support for size prop

.changeset/eighty-pears-sip.md

@@ -0,0 +1,5 @@
+---
+"pie-storybook": minor
+---
+
+[Added] - Support for the new `size` prop in `pie-input`

.changeset/new-mayflies-wait.md

@@ -0,0 +1,5 @@
+---
+"@justeattakeaway/pie-input": minor
+---
+
+[Added] - `size` property to input component

apps/pie-storybook/stories/pie-input.stories.ts

@@ -6,7 +6,7 @@ import { useArgs as UseArgs } from '@storybook/preview-api';
 /* eslint-disable import/no-duplicates */
 import '@justeattakeaway/pie-input';
 import {
-    types, inputModes, statusTypes, InputProps as InputPropsBase,
+    types, inputModes, statusTypes, InputProps as InputPropsBase, sizes,
 } from '@justeattakeaway/pie-input';
 /* eslint-enable import/no-duplicates */
 
@@ -34,6 +34,7 @@ const defaultArgs: InputProps = {
     leadingSlot: 'None',
     trailingSlot: 'None',
     assistiveText: '',
+    size: 'medium',
 };
 
 const slotOptions = ['Icon (Placeholder)', 'Short text (#)', 'None'] as const;
@@ -188,6 +189,11 @@ const inputStoryMeta: InputStoryMeta = {
                 summary: undefined,
             },
         },
+        size: {
+            description: 'The size of the input field. Can be `small`, `medium`, or `large`. Defaults to `medium`.',
+            control: 'select',
+            options: sizes,
+        },
     },
     args: defaultArgs,
     parameters: {
@@ -219,6 +225,7 @@ const Template = ({
     assistiveText,
     status,
     step,
+    size,
 }: InputProps) => {
     const [, updateArgs] = UseArgs();
 
@@ -271,6 +278,7 @@ const Template = ({
             ?readonly="${readonly}"
             assistiveText="${ifDefined(assistiveText)}"
             status=${ifDefined(status)}
+            size="${ifDefined(size)}"
             @input="${onInput}"
             @change="${onChange}">
             ${renderLeadingOrTrailingSlot('leading', leadingSlot)}

packages/components/pie-input/README.md

@@ -92,6 +92,7 @@ import { PieInput } from '@justeattakeaway/pie-input/dist/react';
 | `step` | `number` | - | An optional amount that value should be incremented or decremented by when using the up and down arrows in the input. Only applies when type is `number`. |
 | `min` | `number` | - | The minimum value of the input. Only applies when type is `number`. If the value provided is lower, the input is invalid. |
 | `max` | `number` | - | The maximum value of the input. Only applies when type is `number`. If the value provided is higher, the input is invalid. |
+| `size` | `'small'`, `'medium'`, `'large'` | `medium` | The size of the input field. Can be `small`, `medium`, or `large`. Defaults to `medium`. |
 
 
 In your markup or JSX, you can then use these to set the properties for the `pie-input` component:

packages/components/pie-input/src/defs.ts

@@ -1,6 +1,8 @@
 export const types = ['text', 'number', 'password', 'url', 'email', 'tel'] as const;
 export const inputModes = ['none', 'text', 'tel', 'url', 'email', 'numeric', 'decimal', 'search'] as const;
 export const statusTypes = ['success', 'error'] as const;
+export const sizes = ['small', 'medium', 'large'] as const;
+
 export interface InputProps {
     /**
      * The type of HTML input to render.
@@ -96,6 +98,11 @@ export interface InputProps {
      * The maximum value of the input. Only applies when type is `number`. If the value provided is higher, the input is invalid.
      */
     max?: number;
+
+    /**
+     * The size of the input field. Can be `small`, `medium`, or `large`. Defaults to `medium`.
+     */
+    size?: typeof sizes[number];
 }
 
 // TODO - There is a ticket to add default prop values to our existing components. This might be replaced by the code added in that ticket.
@@ -107,12 +114,13 @@ type SubsetRequiredProperties<T, K extends keyof T> = Required<Pick<T, K>>;
 /**
  * The default values for the `InputProps` that are required (i.e. they have a fallback value in the component).
  */
-type DefaultInputPropValues = SubsetRequiredProperties<InputProps, 'type' | 'value'>;
+type DefaultInputPropValues = SubsetRequiredProperties<InputProps, 'type' | 'value' | 'size'>;
 
 /**
  * Default values for optional properties that have default fallback values in the component.
  */
 export const InputDefaultPropertyValues: DefaultInputPropValues = {
     type: 'text',
     value: '',
+    size: 'medium',
 };

packages/components/pie-input/src/index.ts

@@ -86,6 +86,9 @@ export class PieInput extends FormControlMixin(RtlMixin(LitElement)) implements
     @property({ type: Number })
     public max?: InputProps['max'];
 
+    @property({ type: String })
+    public size?: InputProps['size'] = InputDefaultPropertyValues.size;
+
     @query('input')
     private input?: HTMLInputElement;
 
@@ -173,10 +176,11 @@ export class PieInput extends FormControlMixin(RtlMixin(LitElement)) implements
             status,
             type,
             value,
+            size,
         } = this;
 
         return html`
-            <div>
+            <div data-test-id="pie-input-shell" size=${ifDefined(size)}>
                 <slot name="leading"></slot>
                 <input
                     type=${ifDefined(type)}

packages/components/pie-input/test/component/pie-input.spec.ts

@@ -8,6 +8,7 @@ import { statusTypes } from '../../src/defs.ts';
 
 const componentSelector = '[data-test-id="pie-input"]';
 const assistiveTextSelector = '[data-test-id="pie-input-assistive-text"]';
+const componentShellSelector = '[data-test-id="pie-input-shell"]';
 
 /**
  * Sets up form data extraction for testing form submissions. This function expects a form element
@@ -767,6 +768,34 @@ test.describe('PieInput - Component tests', () => {
                 expect(isValid).toBe(true);
             });
         });
+
+        test.describe('size', () => {
+            test('should default to medium size if no size prop provided', async ({ mount }) => {
+                // Arrange
+                const component = await mount(PieInput, {});
+
+                // Act
+                const inputShell = component.locator(componentShellSelector);
+
+                // Assert
+                expect(inputShell).toHaveAttribute('size', 'medium');
+            });
+
+            test('should apply the size prop to the HTML input rendered', async ({ mount }) => {
+                // Arrange
+                const component = await mount(PieInput, {
+                    props: {
+                        size: 'large',
+                    } as InputProps,
+                });
+
+                // Act
+                const inputShell = component.locator(componentShellSelector);
+
+                // Assert
+                expect(inputShell).toHaveAttribute('size', 'large');
+            });
+        });
     });
 
     test.describe('Events', () => {