@transferwise/components 46.39.0 → 46.41.0

package/build/types/upload/steps/uploadImageStep/uploadImageStep.d.ts

@@ -1,22 +1,18 @@
-export default UploadImageStep;
-declare class UploadImageStep extends PureComponent<any, any, any> {
-    constructor();
-    uploadInputRef: import("react").RefObject<any>;
+import { PureComponent } from 'react';
+export interface UploadImageStepProps {
+    fileDropped: (file: File) => void;
+    isComplete: boolean;
+    usAccept: string;
+    usButtonText: string;
+    usDisabled: boolean;
+    usHelpImage: React.ReactNode;
+    usLabel: string;
+    usPlaceholder: string;
+}
+export default class UploadImageStep extends PureComponent<UploadImageStepProps> {
+    uploadInputRef: import("react").RefObject<HTMLInputElement>;
     onManualUpload: () => void;
-    getImage: () => any;
+    getImage: () => number | true | Iterable<import("react").ReactNode> | import("react").JSX.Element;
     render(): import("react").JSX.Element;
 }
-declare namespace UploadImageStep {
-    namespace propTypes {
-        let fileDropped: any;
-        let isComplete: any;
-        let usAccept: any;
-        let usButtonText: any;
-        let usDisabled: any;
-        let usHelpImage: any;
-        let usLabel: any;
-        let usPlaceholder: any;
-    }
-}
-import { PureComponent } from 'react';
 //# sourceMappingURL=uploadImageStep.d.ts.map

package/build/types/upload/steps/uploadImageStep/uploadImageStep.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"uploadImageStep.d.ts","sourceRoot":"","sources":["../../../../../src/upload/steps/uploadImageStep/uploadImageStep.js"],"names":[],"mappings":";AAIA;IACE,cAGC;IADC,+CAAiC;IAGnC,2BAME;IAEF,oBAgBE;IAEF,sCA8BC;CACF;;;;;;;;;;;;;8BAjEwC,OAAO"}
+{"version":3,"file":"uploadImageStep.d.ts","sourceRoot":"","sources":["../../../../../src/upload/steps/uploadImageStep/uploadImageStep.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,aAAa,EAAE,MAAM,OAAO,CAAC;AAEjD,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,aAAa,CAAC,oBAAoB,CAAC;IAC9E,cAAc,8CAAiC;IAE/C,cAAc,aAMZ;IAEF,QAAQ,0FAgBN;IAEF,MAAM;CA+BP"}

package/build/types/upload/utils/asyncFileRead/asyncFileRead.d.ts

@@ -1,2 +1,2 @@
-export function asyncFileRead(file: any): Promise<any>;
+export declare function asyncFileRead(file: Blob): Promise<string>;
 //# sourceMappingURL=asyncFileRead.d.ts.map

package/build/types/upload/utils/asyncFileRead/asyncFileRead.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"asyncFileRead.d.ts","sourceRoot":"","sources":["../../../../../src/upload/utils/asyncFileRead/asyncFileRead.js"],"names":[],"mappings":"AAAO,uDAUH"}
+{"version":3,"file":"asyncFileRead.d.ts","sourceRoot":"","sources":["../../../../../src/upload/utils/asyncFileRead/asyncFileRead.ts"],"names":[],"mappings":"AAAA,wBAAsB,aAAa,CAAC,IAAI,EAAE,IAAI,mBAW7C"}

package/build/types/upload/utils/asyncFileRead/index.d.ts

@@ -1,2 +1,2 @@
-export { asyncFileRead } from "./asyncFileRead";
+export { asyncFileRead } from './asyncFileRead';
 //# sourceMappingURL=index.d.ts.map

package/build/types/upload/utils/asyncFileRead/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/upload/utils/asyncFileRead/index.js"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/upload/utils/asyncFileRead/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/build/types/upload/utils/getFileType/getFileType.d.ts

@@ -1,2 +1,2 @@
-export function getFileType(file: any, file64: any): any;
+export declare function getFileType(file: Blob, file64?: string): string;
 //# sourceMappingURL=getFileType.d.ts.map

package/build/types/upload/utils/getFileType/getFileType.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getFileType.d.ts","sourceRoot":"","sources":["../../../../../src/upload/utils/getFileType/getFileType.js"],"names":[],"mappings":"AAAO,yDAkBN"}
+{"version":3,"file":"getFileType.d.ts","sourceRoot":"","sources":["../../../../../src/upload/utils/getFileType/getFileType.ts"],"names":[],"mappings":"AAAA,wBAAgB,WAAW,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,MAAM,UAetD"}

package/build/types/upload/utils/getFileType/index.d.ts

@@ -1,2 +1,2 @@
-export { getFileType } from "./getFileType";
+export { getFileType } from './getFileType';
 //# sourceMappingURL=index.d.ts.map

package/build/types/upload/utils/getFileType/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/upload/utils/getFileType/index.js"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/upload/utils/getFileType/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/build/types/upload/utils/index.d.ts

@@ -1,8 +1,6 @@
-export { postData } from "./postData";
-export { asyncFileRead } from "./asyncFileRead";
-export { isSizeValid } from "./isSizeValid";
-export { isTypeValid } from "./isTypeValid";
-export { getFileType } from "./getFileType";
-export { getSupportedSpotMimeTypes } from "./getSupportedSpotMimeTypes";
-export { requestMedia } from "./requestMedia";
+export { postData } from './postData';
+export { asyncFileRead } from './asyncFileRead';
+export { isSizeValid } from './isSizeValid';
+export { isTypeValid } from './isTypeValid';
+export { getFileType } from './getFileType';
 //# sourceMappingURL=index.d.ts.map

package/build/types/upload/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/upload/utils/index.js"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/upload/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/build/types/upload/utils/isSizeValid/index.d.ts

@@ -1,2 +1,2 @@
-export { isSizeValid } from "./isSizeValid";
+export { isSizeValid } from './isSizeValid';
 //# sourceMappingURL=index.d.ts.map

package/build/types/upload/utils/isSizeValid/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/upload/utils/isSizeValid/index.js"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/upload/utils/isSizeValid/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/build/types/upload/utils/isSizeValid/isSizeValid.d.ts

@@ -1,2 +1,2 @@
-export function isSizeValid(file: any, maxSize: any): boolean;
+export declare function isSizeValid(file: Blob, maxSize: number): boolean;
 //# sourceMappingURL=isSizeValid.d.ts.map

package/build/types/upload/utils/isSizeValid/isSizeValid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"isSizeValid.d.ts","sourceRoot":"","sources":["../../../../../src/upload/utils/isSizeValid/isSizeValid.js"],"names":[],"mappings":"AAAO,8DAAwF"}
+{"version":3,"file":"isSizeValid.d.ts","sourceRoot":"","sources":["../../../../../src/upload/utils/isSizeValid/isSizeValid.ts"],"names":[],"mappings":"AAAA,wBAAgB,WAAW,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,WAEtD"}

package/build/types/upload/utils/isTypeValid/index.d.ts

@@ -1,2 +1,2 @@
-export { isTypeValid } from "./isTypeValid";
+export { isTypeValid } from './isTypeValid';
 //# sourceMappingURL=index.d.ts.map

package/build/types/upload/utils/isTypeValid/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/upload/utils/isTypeValid/index.js"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/upload/utils/isTypeValid/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/build/types/upload/utils/isTypeValid/isTypeValid.d.ts

@@ -1,2 +1,2 @@
-export function isTypeValid(file: any, rule: any, file64: any): any;
+export declare function isTypeValid(file: Blob, rule: string, file64?: string): boolean;
 //# sourceMappingURL=isTypeValid.d.ts.map

package/build/types/upload/utils/isTypeValid/isTypeValid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"isTypeValid.d.ts","sourceRoot":"","sources":["../../../../../src/upload/utils/isTypeValid/isTypeValid.js"],"names":[],"mappings":"AAEO,oEAuBN"}
+{"version":3,"file":"isTypeValid.d.ts","sourceRoot":"","sources":["../../../../../src/upload/utils/isTypeValid/isTypeValid.ts"],"names":[],"mappings":"AAEA,wBAAgB,WAAW,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,WAgBpE"}

package/build/types/upload/utils/postData/index.d.ts

@@ -1,2 +1,2 @@
-export { postData } from "./postData";
+export { postData } from './postData';
 //# sourceMappingURL=index.d.ts.map

package/build/types/upload/utils/postData/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/upload/utils/postData/index.js"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/upload/utils/postData/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/build/types/upload/utils/postData/postData.d.ts

@@ -1,2 +1,12 @@
-export function postData(httpOptions: any, data?: {}, fetcher?: typeof fetch): Promise<Response>;
+export declare class ResponseError extends Error {
+    response: Response;
+    status: number;
+    constructor(response: Response, message?: string);
+}
+export interface PostDataHTTPOptions extends Omit<RequestInit, 'body'> {
+    url: string;
+    method?: 'POST' | 'PUT' | 'PATCH';
+}
+export type PostDataFetcher = (input: string, init: RequestInit) => Promise<Response>;
+export declare function postData({ url, method, ...httpOptions }: PostDataHTTPOptions, data: RequestInit['body'], fetcher?: PostDataFetcher): Promise<Response>;
 //# sourceMappingURL=postData.d.ts.map

package/build/types/upload/utils/postData/postData.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"postData.d.ts","sourceRoot":"","sources":["../../../../../src/upload/utils/postData/postData.js"],"names":[],"mappings":"AAAO,iGAiBD"}
+{"version":3,"file":"postData.d.ts","sourceRoot":"","sources":["../../../../../src/upload/utils/postData/postData.ts"],"names":[],"mappings":"AAAA,qBAAa,aAAc,SAAQ,KAAK;IACtC,QAAQ,EAAE,QAAQ,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;gBAEH,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAC,EAAE,MAAM;CAMjD;AAED,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC;IACpE,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,CAAC;CACnC;AAED,MAAM,MAAM,eAAe,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAC;AAEtF,wBAAsB,QAAQ,CAC5B,EAAE,GAAG,EAAE,MAAe,EAAE,GAAG,WAAW,EAAE,EAAE,mBAAmB,EAC7D,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,EACzB,OAAO,GAAE,eAAuB,qBAajC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.39.0",
+  "version": "46.41.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -92,8 +92,8 @@
     "react-intl": "^6.6.6",
     "rollup": "^4.17.2",
     "storybook": "^8.1.10",
-    "@transferwise/neptune-css": "14.10.0",
     "@transferwise/less-config": "3.1.0",
+    "@transferwise/neptune-css": "14.11.0",
     "@wise/components-theming": "1.3.0"
   },
   "peerDependencies": {

package/src/dateInput/DateInput.spec.tsx

@@ -0,0 +1,220 @@
+import { screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { DateInput, DateInputProps, Field } from '..';
+import { mockMatchMedia, mockResizeObserver, render } from '../test-utils';
+
+describe('Date Input Component', () => {
+  const props: DateInputProps = { onChange: jest.fn() };
+
+  beforeEach(() => {
+    mockMatchMedia();
+    mockResizeObserver();
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  describe('when initialised without a model', () => {
+    it('sets day field to empty', () => {
+      render(<DateInput {...props} />);
+      const dayInput = screen.getByRole('textbox', { name: /day/i });
+      expect(dayInput).toHaveValue('');
+    });
+
+    it('sets month field to empty', () => {
+      render(<DateInput {...props} />);
+      const monthSelect = screen.getByRole('button', { name: /month/i });
+      expect(monthSelect).toHaveValue('');
+    });
+
+    it('sets year field to empty', () => {
+      render(<DateInput {...props} />);
+      const yearInput = screen.getByRole('textbox', { name: /year/i });
+      expect(yearInput).toHaveValue('');
+    });
+  });
+
+  describe('when initialised with a model', () => {
+    it('sets values correctly with a valid Date instance', () => {
+      render(<DateInput {...props} value="1971-08-01" />);
+      expect(screen.getByRole('textbox', { name: /day/i })).toHaveValue('1');
+      expect(screen.getByRole('button', { name: /month/i })).toHaveTextContent('August');
+      expect(screen.getByRole('textbox', { name: /year/i })).toHaveValue('1971');
+    });
+
+    it('sets values correctly with a valid short ISO8601 string', () => {
+      render(<DateInput {...props} value="1990-08-22" />);
+      expect(screen.getByRole('textbox', { name: /day/i })).toHaveValue('22');
+      expect(screen.getByRole('button', { name: /month/i })).toHaveTextContent('August');
+      expect(screen.getByRole('textbox', { name: /year/i })).toHaveValue('1990');
+    });
+
+    it('sets values correctly with a valid short ISO8601 string with year and month only', () => {
+      render(<DateInput {...props} value="1990-08" />);
+      expect(screen.getByRole('textbox', { name: /day/i })).toHaveValue('');
+      expect(screen.getByRole('button', { name: /month/i })).toHaveTextContent('August');
+      expect(screen.getByRole('textbox', { name: /year/i })).toHaveValue('1990');
+    });
+
+    it('sets values correctly with a valid long ISO8601 string', () => {
+      render(<DateInput {...props} value="1990-02-28T00:00:00.000Z" />);
+      expect(screen.getByRole('textbox', { name: /day/i })).toHaveValue('28');
+      expect(screen.getByRole('button', { name: /month/i })).toHaveTextContent('February');
+      expect(screen.getByRole('textbox', { name: /year/i })).toHaveValue('1990');
+    });
+
+    it('sets values to disabled when disabled is set to true', () => {
+      render(<DateInput {...props} disabled />);
+      expect(screen.getByRole('textbox', { name: /day/i })).toBeDisabled();
+      expect(screen.getByRole('button', { name: /month/i })).toBeDisabled();
+      expect(screen.getByRole('textbox', { name: /year/i })).toBeDisabled();
+    });
+
+    it("doesn't set values to disabled when disabled is set to false", () => {
+      render(<DateInput {...props} />);
+      expect(screen.getByRole('textbox', { name: /day/i })).toBeEnabled();
+      expect(screen.getByRole('button', { name: /month/i })).toBeEnabled();
+      expect(screen.getByRole('textbox', { name: /year/i })).toBeEnabled();
+    });
+  });
+
+  describe('when initialised', () => {
+    it(`doesn't call the onChange callback without an initial value`, () => {
+      render(<DateInput {...props} />);
+      expect(props.onChange).not.toHaveBeenCalled();
+    });
+
+    it(`doesn't call the onChange callback with an initial value`, () => {
+      render(<DateInput {...props} value="1990-08-08" />);
+      expect(props.onChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('when interacting', () => {
+    it('calls the onChange callback with null when changing the day but nothing else is filled out', async () => {
+      render(<DateInput {...props} />);
+      await userEvent.type(screen.getByRole('textbox', { name: /day/i }), '4');
+      expect(props.onChange).toHaveBeenCalledWith(null);
+    });
+
+    it('calls the onChange callback with null when changing the month but nothing else is filled out', async () => {
+      render(<DateInput {...props} />);
+      const monthSelect = screen.getByLabelText(/month/i);
+      await userEvent.click(monthSelect);
+      await userEvent.click(screen.getByRole('option', { name: /January/ }));
+      expect(props.onChange).toHaveBeenCalledWith(null);
+    });
+
+    it('calls the onChange callback with null when changing the year but nothing else is filled out', async () => {
+      render(<DateInput {...props} />);
+      await userEvent.type(screen.getByRole('textbox', { name: /day/i }), '4444');
+      expect(props.onChange).toHaveBeenCalledWith(null);
+    });
+
+    it('calls the onChange callback with the correct value when changing the day', async () => {
+      render(<DateInput {...props} value="2022-12-1" />);
+      const dayInput = screen.getByRole('textbox', { name: /day/i });
+      // add 8 to the 1 that's already there
+      await userEvent.type(dayInput, '8');
+      expect(props.onChange).toHaveBeenCalledWith('2022-12-18');
+    });
+
+    it('calls the onChange callback with the correct value when changing the month', async () => {
+      render(<DateInput {...props} value="2022-12-1" />);
+      const monthSelect = screen.getByRole('button', { name: /month/i });
+      await userEvent.click(monthSelect);
+      await userEvent.click(screen.getByRole('option', { name: /January/ }));
+      expect(props.onChange).toHaveBeenCalledWith('2022-01-01');
+    });
+
+    it('calls the onChange callback with the correct value when changing the year', async () => {
+      render(<DateInput {...props} value="0122-12-1" />);
+      const yearInput = screen.getByRole('textbox', { name: /year/i });
+      // 0122 ends up being 122 in the box when it's supplied as the starting value
+      await userEvent.type(yearInput, '2');
+      expect(props.onChange).toHaveBeenCalledWith('1222-12-01');
+    });
+
+    it('calls the onChange callback with the null when not having a 4 digit year', async () => {
+      render(<DateInput {...props} />);
+      const yearInput = screen.getByRole('textbox', { name: /year/i });
+      await userEvent.type(yearInput, '123');
+      expect(props.onChange).toHaveBeenCalledWith(null);
+    });
+
+    it('calls the onChange callback with the null when changing the day to a day that is higher than max value', async () => {
+      render(<DateInput {...props} value="2022-11-3" />);
+      const dayInput = screen.getByRole('textbox', { name: /day/i });
+      // add 1 to the 3 that's already there
+      await userEvent.type(dayInput, '1');
+      expect(props.onChange).toHaveBeenCalledWith(null);
+    });
+
+    it('does not overflow very high day values to the next month', async () => {
+      render(<DateInput {...props} value="2022-11-6" />);
+      const dayInput = screen.getByRole('textbox', { name: /day/i });
+      // add 6 to the 6 that's already there
+      await userEvent.type(dayInput, '6');
+      expect(props.onChange).toHaveBeenCalledWith(null);
+    });
+
+    it('only pastes in first 6 digits of a long number for year', async () => {
+      render(<DateInput {...props} value="2010-01-01" />);
+      const yearInput = screen.getByRole('textbox', { name: /year/i });
+      yearInput.focus();
+      await userEvent.type(yearInput, '{backspace}{backspace}{backspace}{backspace}');
+      await userEvent.paste('12345678');
+      expect(props.onChange).toHaveBeenCalledWith('123456-01-01');
+    });
+
+    it('only pastes in first 2 digits of a long number for day', async () => {
+      render(<DateInput {...props} value="2010-01-01" />);
+      const yearInput = screen.getByRole('textbox', { name: /day/i });
+      yearInput.focus();
+      await userEvent.type(yearInput, '{backspace}{backspace}');
+      await userEvent.paste('123456');
+      expect(props.onChange).toHaveBeenCalledWith('2010-01-12');
+    });
+  });
+
+  describe('when switching from day input to year input', () => {
+    it('does not call onBlur nor onFocus', () => {
+      const onFocus = jest.fn();
+      const onBlur = jest.fn();
+
+      render(<DateInput {...props} />);
+      const dayInput = screen.getByRole('textbox', { name: /day/i });
+      const yearInput = screen.getByRole('textbox', { name: /year/i });
+      fireEvent.focus(dayInput);
+      fireEvent.blur(dayInput);
+      fireEvent.focus(yearInput);
+      expect(onFocus).not.toHaveBeenCalled();
+      expect(onBlur).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('when selectProps is provided', () => {
+    it('renders Select component with expected props', () => {
+      render(
+        <DateInput
+          selectProps={{
+            id: 'mock-id',
+          }}
+          {...props}
+        />,
+      );
+      const monthSelect = screen.getByRole('button', { name: /month/i });
+      expect(monthSelect).toHaveAttribute('id', 'mock-id');
+    });
+  });
+
+  it('supports `Field` for labeling', () => {
+    render(
+      <Field label="Date of birth">
+        <DateInput onChange={() => {}} />
+      </Field>,
+    );
+    expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Date of birth/);
+  });
+});

package/src/dateInput/DateInput.story.tsx

@@ -1,19 +1,11 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/test';
+import { fn } from '@storybook/test';
 
-import { DateInput, DateMode, Info, InlineAlert, Title, Typography } from '..';
-import { lorem10, storyConfig } from '../test-utils';
+import { DateInput } from '..';
 
 const meta = {
   component: DateInput,
   title: 'Forms/DateInput',
-  args: {
-    dayLabel: 'Day input',
-    dayAutoComplete: 'bday-day',
-    monthLabel: 'Month select',
-    yearLabel: 'Year input',
-    yearAutoComplete: 'bday-year',
-  },
   tags: ['autodocs'],
 } satisfies Meta<typeof DateInput>;
 
@@ -23,71 +15,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Basic = {
   args: {
-    onChange: () => {},
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole('button'));
-  },
-} satisfies Story;
-
-export const WithLabel = {
-  args: {
-    onChange: () => {},
-  },
-  render: (args) => {
-    const id1 = 'date-input-group-label-1';
-    const label = 'Date of Birth';
-    return (
-      <>
-        <Title type={Typography.TITLE_SUBSECTION}>
-          label (as <code>div</code> element) is linked with <code>DateInput</code> via{' '}
-          <code>aria-labelledby</code> prop
-        </Title>
-        <div className="control-label" id={id1}>
-          Date of Delivery
-        </div>
-        <DateInput {...args} aria-labelledby={id1} />
-
-        <br />
-
-        <Title type={Typography.TITLE_SUBSECTION}>
-          label (as <code>div</code> element) is detached but <code>DateInput</code> has same label
-          via <code>aria-label</code> attribute
-        </Title>
-        <div className="control-label">
-          {label}{' '}
-          <Info aria-label="Fast transfer hint" title="Fast transfer hint" content={lorem10} />
-        </div>
-        <DateInput {...args} aria-label={label} />
-
-        <br />
-
-        <Title type={Typography.TITLE_SUBSECTION}>
-          <code>DateInput</code> wrapped in <code>fieldset</code> + using <code>legend</code> as
-          label (rare use case)
-        </Title>
-        <fieldset>
-          <legend className="control-label">
-            Expiry Date for Credit Card (example of MONTH_YEAR mode)
-          </legend>
-          <DateInput {...args} mode={DateMode.MONTH_YEAR} />
-        </fieldset>
-      </>
-    );
+    onChange: fn(),
   },
 } satisfies Story;
-
-export const BasicMobile = storyConfig(Basic, { variants: ['mobile'] });
-
-export const InputError = {
-  ...Basic,
-  render: (args) => (
-    <div className="form-group has-error">
-      <DateInput {...args} />
-      <InlineAlert type="error">{lorem10}</InlineAlert>
-    </div>
-  ),
-} satisfies Story;
-
-export const InputErrorMobile = storyConfig(InputError, { variants: ['mobile'] });