@transferwise/components 46.40.0 → 46.41.0

package/build/main.css

@@ -4208,14 +4208,16 @@ html:not([dir="rtl"]) .np-navigation-option {
     height: var(--size-32);
   }
 }
-.status-circle.negative {
+.status-circle.negative,
+.status-circle.error {
   background-color: var(--color-sentiment-negative);
 }
 .status-circle.neutral {
   background-color: #5d7079;
   background-color: var(--color-content-secondary);
 }
-.status-circle.positive {
+.status-circle.positive,
+.status-circle.success {
   background-color: var(--color-sentiment-positive);
 }
 .tw-stepper {

package/build/styles/main.css

@@ -4208,14 +4208,16 @@ html:not([dir="rtl"]) .np-navigation-option {
     height: var(--size-32);
   }
 }
-.status-circle.negative {
+.status-circle.negative,
+.status-circle.error {
   background-color: var(--color-sentiment-negative);
 }
 .status-circle.neutral {
   background-color: #5d7079;
   background-color: var(--color-content-secondary);
 }
-.status-circle.positive {
+.status-circle.positive,
+.status-circle.success {
   background-color: var(--color-sentiment-positive);
 }
 .tw-stepper {

package/build/styles/statusIcon/StatusIcon.css

@@ -66,13 +66,15 @@
     height: var(--size-32);
   }
 }
-.status-circle.negative {
+.status-circle.negative,
+.status-circle.error {
   background-color: var(--color-sentiment-negative);
 }
 .status-circle.neutral {
   background-color: #5d7079;
   background-color: var(--color-content-secondary);
 }
-.status-circle.positive {
+.status-circle.positive,
+.status-circle.success {
   background-color: var(--color-sentiment-positive);
 }

package/build/types/dateInput/DateInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/dateInput/DateInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAgD,gBAAgB,EAAE,MAAM,IAAI,CAAC;AACpF,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAQ,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAM1F,MAAM,WAAW,cAAc;IAC7B,kFAAkF;IAClF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;IAClD,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,GAAG,WAAW,EAAE,CAAC;IAC/B,IAAI,CAAC,EAAE,GAAG,QAAQ,EAAE,CAAC;IACrB,YAAY,CAAC,EAAE;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;CACxD;AAED,QAAA,MAAM,SAAS,wPAmBZ,cAAc,gCA6ShB,CAAC;AA8BF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/dateInput/DateInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAsD,gBAAgB,EAAE,MAAM,IAAI,CAAC;AAC1F,OAAO,EACL,QAAQ,EACR,WAAW,EAEX,SAAS,EACT,UAAU,EACV,SAAS,EAEV,MAAM,WAAW,CAAC;AAMnB,MAAM,WAAW,cAAc;IAC7B,kFAAkF;IAClF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;IAClD,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,GAAG,WAAW,EAAE,CAAC;IAC/B,IAAI,CAAC,EAAE,GAAG,QAAQ,EAAE,CAAC;IACrB,YAAY,CAAC,EAAE;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;CACxD;AAED,QAAA,MAAM,SAAS,wPAmBZ,cAAc,gCAkShB,CAAC;AA8BF,eAAe,SAAS,CAAC"}

package/build/types/field/Field.d.ts

@@ -1,11 +1,16 @@
+import { Sentiment } from '../common';
 export type FieldProps = {
     /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */
     id?: string | null;
     label: React.ReactNode;
+    /** @deprecated use `message` and `type={Sentiment.NEUTRAL}` prop instead */
     hint?: React.ReactNode;
+    message?: React.ReactNode;
+    /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */
     error?: React.ReactNode;
+    sentiment?: `${Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.POSITIVE | Sentiment.WARNING}`;
     className?: string;
     children?: React.ReactNode;
 };
-export declare const Field: ({ id, label, hint, error, className, children }: FieldProps) => import("react").JSX.Element;
+export declare const Field: ({ id, label, message: propMessage, sentiment: propType, className, children, ...props }: FieldProps) => import("react").JSX.Element;
 //# sourceMappingURL=Field.d.ts.map

package/build/types/field/Field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../src/field/Field.tsx"],"names":[],"mappings":"AAaA,MAAM,MAAM,UAAU,GAAG;IACvB,6IAA6I;IAC7I,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,KAAK,oDAAqD,UAAU,gCA8ChF,CAAC"}
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../src/field/Field.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAUtC,MAAM,MAAM,UAAU,GAAG;IACvB,6IAA6I;IAC7I,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6EAA6E;IAC7E,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC;IACjG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,KAAK,4FAQf,UAAU,gCA4CZ,CAAC"}

package/build/types/inlineAlert/InlineAlert.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { Sentiment } from '../common';
 export interface InlineAlertProps {
     id?: string;
@@ -6,5 +6,5 @@ export interface InlineAlertProps {
     className?: string;
     children: ReactNode;
 }
-export default function InlineAlert({ id, type, className, children, }: InlineAlertProps): import("react").JSX.Element;
+export default function InlineAlert({ id, type, className, children, }: InlineAlertProps): React.JSX.Element;
 //# sourceMappingURL=InlineAlert.d.ts.map

package/build/types/inlineAlert/InlineAlert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InlineAlert.d.ts","sourceRoot":"","sources":["../../../src/inlineAlert/InlineAlert.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEtC,MAAM,WAAW,gBAAgB;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,GAAG,SAAS,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,EAAE,EACF,IAAgB,EAChB,SAAS,EACT,QAAQ,GACT,EAAE,gBAAgB,+BAYlB"}
+{"version":3,"file":"InlineAlert.d.ts","sourceRoot":"","sources":["../../../src/inlineAlert/InlineAlert.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,SAAS,EAAQ,MAAM,WAAW,CAAC;AAG5C,MAAM,WAAW,gBAAgB;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,GAAG,SAAS,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,EAAE,EACF,IAAgB,EAChB,SAAS,EACT,QAAQ,GACT,EAAE,gBAAgB,qBAmBlB"}

package/package.json

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

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'] });