@transferwise/components 0.0.0-experimental-1eb29c0 → 0.0.0-experimental-9adbb01

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

@@ -15,6 +15,21 @@ declare namespace _default {
         const defaultMessage_2: string;
         export { defaultMessage_2 as defaultMessage };
     }
+    namespace dayPlaceholder {
+        const id_3: string;
+        export { id_3 as id };
+        const defaultMessage_3: string;
+        export { defaultMessage_3 as defaultMessage };
+        export const description: string;
+    }
+    namespace yearPlaceholder {
+        const id_4: string;
+        export { id_4 as id };
+        const defaultMessage_4: string;
+        export { defaultMessage_4 as defaultMessage };
+        const description_1: string;
+        export { description_1 as description };
+    }
 }
 export default _default;
 //# sourceMappingURL=DateInput.messages.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-1eb29c0",
+  "version": "0.0.0-experimental-9adbb01",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/dateInput/DateInput.js

@@ -64,9 +64,9 @@ const DateInput = ({
   monthLabel = monthLabel || formatMessage(messages.monthLabel);
   yearLabel = yearLabel || formatMessage(messages.yearLabel);
   placeholders = {
-    day: placeholders?.day || 'DD',
+    day: placeholders?.day || formatMessage(messages.dayPlaceholder),
     month: placeholders?.month || formatMessage(messages.monthLabel),
-    year: placeholders?.year || 'YYYY',
+    year: placeholders?.year || formatMessage(messages.yearPlaceholder),
   };
 
   const getDateAsString = (date) => {

package/src/dateInput/DateInput.messages.js

@@ -13,4 +13,14 @@ export default defineMessages({
     id: 'neptune.DateInput.year.label',
     defaultMessage: 'Year',
   },
+  dayPlaceholder: {
+    id: 'neptune.DateInput.day.placeholder',
+    defaultMessage: 'DD',
+    description: 'Placeholder for 2-digit day values within an input.',
+  },
+  yearPlaceholder: {
+    id: 'neptune.DateInput.year.placeholder',
+    defaultMessage: 'YYYY',
+    description: 'Placeholder for 4-digit year values within an input.',
+  },
 });

package/src/dateInput/DateInput.spec.js

@@ -60,6 +60,16 @@ jest.mock('./DateInput.messages', () => ({
     id: 'neptune.DateInput.year.label',
     defaultMessage: 'Year',
   },
+  dayPlaceholder: {
+    id: 'neptune.DateInput.day.placeholder',
+    defaultMessage: 'DD',
+    description: 'Placeholder for 2-digit day values within an input.',
+  },
+  yearPlaceholder: {
+    id: 'neptune.DateInput.year.placeholder',
+    defaultMessage: 'YYYY',
+    description: 'Placeholder for 4-digit year values within an input.',
+  },
 }));
 
 jest.mock('react-intl');

package/src/i18n/en.json

@@ -4,8 +4,10 @@
   "neptune.ClearButton.ariaLabel": "Clear",
   "neptune.CloseButton.ariaLabel": "Close",
   "neptune.DateInput.day.label": "Day",
+  "neptune.DateInput.day.placeholder": "DD",
   "neptune.DateInput.month.label": "Month",
   "neptune.DateInput.year.label": "Year",
+  "neptune.DateInput.year.placeholder": "YYYY",
   "neptune.DateLookup.day": "day",
   "neptune.DateLookup.goTo20YearView": "Go to 20 year view",
   "neptune.DateLookup.month": "month",

package/src/moneyInput/MoneyInput.js

@@ -361,7 +361,7 @@ class MoneyInput extends Component {
               renderValue={(currency, withinTrigger) => {
                 return (
                   <SelectInputOptionContent
-                    title={currency.label}
+                    title={withinTrigger ? currency.currency.toUpperCase() : currency.label}
                     note={withinTrigger ? undefined : currency.note}
                     icon={<Flag code={currency.currency} intrinsicSize={24} />}
                   />

package/src/moneyInput/MoneyInput.story.tsx

@@ -3,8 +3,6 @@ import { within, userEvent } from '@storybook/testing-library';
 import { Lock } from '@transferwise/icons';
 import React from 'react';
 
-import Drawer from '../drawer';
-
 import MoneyInput from '.';
 
 export default {
@@ -82,6 +80,17 @@ const exampleCurrency = {
   },
 } as const;
 
+const exampleBalanceCurrency = {
+  eur: {
+    ...exampleCurrency.eur,
+    label: '123.45 EUR',
+  },
+  gbp: {
+    ...exampleCurrency.gbp,
+    label: '12.34 GBP',
+  },
+} as const;
+
 export const SingleCurrency: Story = {
   args: {
     currencies: [],
@@ -117,6 +126,20 @@ export const MultipleCurrencies: Story = {
   },
 };
 
+export const BalanceCurrencies: Story = {
+  args: {
+    currencies: [
+      {
+        header: 'Balance currencies',
+      },
+      exampleBalanceCurrency.eur,
+      exampleBalanceCurrency.gbp,
+    ],
+    selectedCurrency: exampleBalanceCurrency.eur,
+    searchPlaceholder: 'Type a currency / country',
+  },
+};
+
 export const OpenedInput: Story = {
   ...MultipleCurrencies,
   play: ({ canvasElement }) => {