@transferwise/components 46.0.2 → 46.0.4

package/build/types/chevron/Chevron.d.ts

@@ -1,17 +1,14 @@
-import * as React from 'react';
-
-export type ChevronOrientation = "top" | "bottom" | "left" | "right";
-
-export type ChevronSize = "xs" | "sm" | "md";
-
-export interface ChevronProps {
-    orientation?: ChevronOrientation;
-    size?: ChevronSize;
-    disabled?: boolean;
-    className?: string;
-}
-
-declare const Chevron: React.FC<ChevronProps>;
-
-export default Chevron;
-
+/// <reference types="react" />
+import { PositionTop, PositionBottom, PositionRight, PositionLeft, SizeExtraSmall, SizeSmall, SizeMedium } from '../common';
+export interface ChevronProps {
+    orientation?: PositionTop | PositionBottom | PositionLeft | PositionRight;
+    size?: SizeExtraSmall | SizeSmall | SizeMedium;
+    disabled?: boolean;
+    className?: string;
+}
+export interface ExtraSmallChevronProps {
+    className?: string;
+}
+declare const Chevron: ({ orientation, size, disabled, className, }: ChevronProps) => import("react").JSX.Element;
+export default Chevron;
+//# sourceMappingURL=Chevron.d.ts.map

package/build/types/chevron/Chevron.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chevron.d.ts","sourceRoot":"","sources":["../../../src/chevron/Chevron.js"],"names":[],"mappings":";AAmCA;;;;;gCAeC"}
+{"version":3,"file":"Chevron.d.ts","sourceRoot":"","sources":["../../../src/chevron/Chevron.tsx"],"names":[],"mappings":";AAIA,OAAO,EAGL,WAAW,EACX,cAAc,EACd,aAAa,EACb,YAAY,EACZ,cAAc,EACd,SAAS,EACT,UAAU,EACX,MAAM,WAAW,CAAC;AAQnB,MAAM,WAAW,YAAY;IAC3B,WAAW,CAAC,EAAE,WAAW,GAAG,cAAc,GAAG,YAAY,GAAG,aAAa,CAAC;IAC1E,IAAI,CAAC,EAAE,cAAc,GAAG,SAAS,GAAG,UAAU,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,sBAAsB;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAmBD,QAAA,MAAM,OAAO,gDAKV,YAAY,gCAed,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/build/types/chevron/index.d.ts

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

package/build/types/chevron/index.d.ts.map

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

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": "46.0.2",
+  "version": "46.0.4",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/avatar/Avatar.tsx

@@ -46,7 +46,7 @@ const Avatar: React.FC<AvatarProps> = ({
   backgroundColor = null,
   backgroundColorSeed = null,
   children = null,
-  className = null,
+  className,
   outlined = false,
   size: sizeFromProps = 48,
   theme = Theme.LIGHT,

package/src/card/Card.spec.js

@@ -3,8 +3,6 @@ import { render, screen, userEvent } from '../test-utils';
 
 import Card from '.';
 
-jest.mock('../chevron');
-
 describe('Card', () => {
   const defaultProps = {
     title: 'A Card',
@@ -103,14 +101,14 @@ describe('Card', () => {
     it('renders a chevron', () => {
       renderCard({ children: 'mock children' });
 
-      expect(screen.getByTestId('mock-chevron')).toHaveAttribute('orientation', Position.BOTTOM);
+      expect(screen.getByTestId('chevron-up-icon')).toHaveClass(Position.BOTTOM);
     });
 
     describe('when expanded', () => {
       it('flips chevron', () => {
         renderCard({ children: 'mock children', isExpanded: true });
 
-        expect(screen.getByTestId('mock-chevron')).toHaveAttribute('orientation', Position.TOP);
+        expect(screen.getByTestId('chevron-up-icon')).toHaveClass(Position.TOP);
       });
 
       it('renders children', () => {

package/src/chevron/Chevron.story.tsx

@@ -5,20 +5,6 @@ import Chevron from './Chevron';
 export default {
   component: Chevron,
   title: 'Other/Chevron',
-  argTypes: {
-    orientation: {
-      type: {
-        name: 'enum',
-        value: ['top', 'bottom', 'left', 'right'],
-      },
-    },
-    size: {
-      type: {
-        name: 'enum',
-        value: ['xs', 'sm', 'md'],
-      },
-    },
-  },
   tags: ['autodocs'],
 } satisfies Meta<typeof Chevron>;
 
@@ -29,4 +15,11 @@ export const Basic: Story = {
     orientation: 'top',
     size: 'md',
   },
+  render: (args) => {
+    return (
+      <span>
+        <Chevron {...args} />
+      </span>
+    );
+  },
 };

package/src/chevron/Chevron.tsx

@@ -0,0 +1,73 @@
+import { ChevronUp } from '@transferwise/icons';
+import { IconSize } from '@transferwise/icons/lib/types';
+import classNames from 'classnames';
+
+import {
+  Size,
+  Position,
+  PositionTop,
+  PositionBottom,
+  PositionRight,
+  PositionLeft,
+  SizeExtraSmall,
+  SizeSmall,
+  SizeMedium,
+} from '../common';
+
+const CONTAINER_SIZE = {
+  [Size.EXTRA_SMALL]: 10,
+  [Size.SMALL]: 16,
+  [Size.MEDIUM]: 24,
+};
+
+export interface ChevronProps {
+  orientation?: PositionTop | PositionBottom | PositionLeft | PositionRight;
+  size?: SizeExtraSmall | SizeSmall | SizeMedium;
+  disabled?: boolean;
+  className?: string;
+}
+
+export interface ExtraSmallChevronProps {
+  className?: string;
+}
+
+const ExtraSmallChevron = ({ className }: ExtraSmallChevronProps) => {
+  return (
+    <span
+      className={classNames('tw-icon', 'tw-icon-chevron', className)}
+      role="presentation"
+      aria-hidden
+    >
+      <svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor" focusable="false">
+        <path
+          fillRule="evenodd"
+          d="M4.9995 2.0865L0.0635004 6.7645L1.2745 7.9125L4.9995 4.3835L8.7245 7.9135L9.9355 6.7645L4.9995 2.0865Z"
+        />
+      </svg>
+    </span>
+  );
+};
+
+const Chevron = ({
+  orientation = Position.BOTTOM,
+  size = Size.SMALL,
+  disabled = false,
+  className,
+}: ChevronProps) => {
+  const classNameValue = classNames(
+    'tw-chevron',
+    { 'chevron-color': !disabled },
+    `${orientation}`.toLowerCase(),
+    className,
+  );
+
+  if (size === Size.EXTRA_SMALL) {
+    return <ExtraSmallChevron className={classNameValue} />;
+  }
+
+  const sizeValue = CONTAINER_SIZE[size] as IconSize;
+
+  return <ChevronUp className={classNameValue} size={sizeValue} />;
+};
+
+export default Chevron;

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/chevron/Chevron.js

@@ -1,67 +0,0 @@
-import { ChevronUp } from '@transferwise/icons';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-
-import { Size, Position } from '../common';
-
-const CONTAINER_SIZE = {
-  [Size.EXTRA_SMALL]: 10,
-  [Size.SMALL]: 16,
-  [Size.MEDIUM]: 24,
-};
-
-const ExtraSmallChevron = ({ className }) => (
-  <span
-    className={classNames('tw-icon', 'tw-icon-chevron', className)}
-    role="presentation"
-    aria-hidden
-  >
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor" focusable="false">
-      <path
-        fillRule="evenodd"
-        d="M4.9995 2.0865L0.0635004 6.7645L1.2745 7.9125L4.9995 4.3835L8.7245 7.9135L9.9355 6.7645L4.9995 2.0865Z"
-      />
-    </svg>
-  </span>
-);
-
-ExtraSmallChevron.propTypes = {
-  className: PropTypes.string,
-};
-
-ExtraSmallChevron.defaultProps = {
-  className: null,
-};
-
-const Chevron = ({ orientation, size, disabled, className }) => {
-  const classNameValue = classNames(
-    'tw-chevron',
-    { 'chevron-color': !disabled },
-    `${[orientation]}`.toLowerCase(),
-    className,
-  );
-
-  const sizeValue = CONTAINER_SIZE[size];
-
-  if (size === Size.EXTRA_SMALL) {
-    return <ExtraSmallChevron className={classNameValue} />;
-  }
-
-  return <ChevronUp className={classNameValue} size={sizeValue} />;
-};
-
-Chevron.propTypes = {
-  orientation: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
-  size: PropTypes.oneOf(['xs', 'sm', 'md']),
-  disabled: PropTypes.bool,
-  className: PropTypes.string,
-};
-
-Chevron.defaultProps = {
-  orientation: Position.BOTTOM,
-  size: Size.SMALL,
-  disabled: false,
-  className: null,
-};
-
-export default Chevron;

package/src/chevron/__mocks__/index.js

@@ -1,7 +0,0 @@
-export default function (props) {
-  return (
-    <span data-testid="mock-chevron" {...props}>
-      Mock Chevron
-    </span>
-  );
-}