@transferwise/components 46.52.3 → 46.53.0

package/build/types/tabs/Tabs.d.ts

@@ -1,30 +1,83 @@
-import * as React from 'react';
-
-export interface TabsTabs {
-    title: string;
-    content: React.ReactNode;
-    disabled: boolean;
-}
-
-export type TabsTransitionSpacing = "default" | "xs" | "sm" | "md" | "lg";
-
-export type TabsHeaderWidth = "auto" | "block";
-
-export interface TabsProps {
-    tabs: TabsTabs[];
-    selected: number;
-    name: string;
-    animatePanelsOnClick?: boolean;
-    changeTabOnSwipe?: boolean;
-    className?: string;
-    transitionSpacing?: TabsTransitionSpacing;
-    headerWidth?: TabsHeaderWidth;
-    id?: string;
-    onTabSelect: (...args: any[])=>any;
-}
-
-export default class Tabs extends React.Component<TabsProps, any> {
-    render(): JSX.Element;
-
-}
-
+import { Component } from 'react';
+import { Size, Width } from '../common';
+import { Swipe } from './utils';
+export interface TabItem {
+    title: string;
+    content: React.ReactNode;
+    disabled: boolean;
+}
+type TabsTransitionSpacing = 'default' | `${Size.EXTRA_SMALL | Size.SMALL | Size.MEDIUM | Size.LARGE}`;
+export interface TabsProps {
+    tabs: TabItem[];
+    selected: number;
+    name: string;
+    animatePanelsOnClick?: boolean;
+    changeTabOnSwipe?: boolean;
+    className?: string;
+    transitionSpacing?: TabsTransitionSpacing;
+    headerWidth?: `${Width}`;
+    id?: string;
+    onTabSelect: (index: number) => void;
+}
+interface TabsState {
+    start: Swipe | null;
+    translateX: number;
+    translateFrom: number;
+    translateTo: number;
+    translateLineX: string | null;
+    isAnimating: boolean;
+    isSwiping: boolean;
+    isScrolling: boolean;
+    lastSwipeVelocity: number;
+    fullWidthTabs: boolean;
+    currentSwipe: Swipe[];
+    selectedTabIndex: number;
+}
+export default class Tabs extends Component<TabsProps, TabsState> {
+    props: TabsProps & Required<Pick<TabsProps, keyof typeof Tabs.defaultProps>>;
+    static defaultProps: {
+        changeTabOnSwipe: true;
+        transitionSpacing: "default";
+        headerWidth: Width.BLOCK;
+    };
+    containerReference: import("react").RefObject<HTMLDivElement>;
+    constructor(props: Tabs['props']);
+    container: HTMLDivElement | null;
+    containerWidth: number;
+    tabRefs: (HTMLLIElement | null)[];
+    get filteredTabsLength(): number;
+    get MAX_INDEX(): number;
+    componentDidMount(): void;
+    componentDidUpdate(previousProps: TabsProps, previousState: TabsState): void;
+    componentWillUnmount(): void;
+    handleResize: () => void;
+    setContainerRefAndWidth: (node: HTMLDivElement | null) => void;
+    setContainerWidth: (node: HTMLDivElement | null) => void;
+    isTabDisabled: (index: number) => boolean;
+    getAllTabsWidth: () => number;
+    getDistanceToSelectedTab: (selectedTabIndex: number) => number;
+    setTabWidth: () => void;
+    getTabLineWidth: () => string;
+    getTabToSelect: (selected: number, start: Swipe, end: Swipe) => number;
+    swipedOverHalfOfContainer: (difference: number) => boolean;
+    calculateApplicableDragDifference: ({ currentSelected, nextSelected, start, end, }: {
+        currentSelected: number;
+        nextSelected: number;
+        start: Swipe;
+        end: Swipe;
+    }) => number | false;
+    switchTab: (index: number) => void;
+    getTabIndexWithoutDisabledTabs(index: number): number;
+    animateToTab: (index: number, instant?: boolean) => void;
+    animateLine: (index: number) => void;
+    animatePanel: (index: number, instant?: boolean) => void;
+    disableScroll: (event: Event) => void;
+    handleTabClick: (index: number) => () => void;
+    onKeyDown: (index: number) => (event: React.KeyboardEvent<HTMLLIElement>) => void;
+    handleTouchStart: React.TouchEventHandler<HTMLDivElement>;
+    handleTouchMove: React.TouchEventHandler<HTMLDivElement>;
+    handleTouchEnd: React.TouchEventHandler<HTMLDivElement>;
+    render(): import("react").JSX.Element;
+}
+export {};
+//# sourceMappingURL=Tabs.d.ts.map

package/build/types/tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/tabs/Tabs.js"],"names":[],"mappings":";AA4BA;IAIE,wBAcC;IAjBD,qDAAqD;IACrD,oBADW,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAChB;IAI/B;;;;;;;;;;;MAWC;IAGH,gBAAiB;IAEjB,uBAAmB;IAEnB,eAAa;IAEb,8BAEC;IAED,wBAEC;IAED,0BASC;IAED,iEAiCC;IAED,6BAIC;IAED,yBAME;IAEF,6CAGE;IAEF,uCAQE;IAEF,mCAIE;IAEF,2BAME;IAEF,yDAKE;IAEF,wBAeE;IAEF,8BAWE;IAMF,6DA4BE;IAEF,wDAAoF;IAEpF;;;;;yBAkBE;IAEF,gCAGE;IAEF,mDAEC;IAED,iDAIE;IAEF,kCAME;IAGF,sDAYE;IAEF,oCAME;IAEF,2CAEE;IAEF,gDAIE;IAEF,uCAYE;IAEF,sCAiDE;IAEF,qCAoCE;IAEF,sCAiKC;CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAhjB8C,OAAO;AAkjBtD;;;;;;;EAAiD;sBAhjBV,WAAW;qBAAX,WAAW"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/tabs/Tabs.tsx"],"names":[],"mappings":"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"}

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

@@ -1,2 +1,3 @@
-export { default } from "./Tabs";
+export { default } from './Tabs';
+export type { TabItem, TabsProps } from './Tabs';
 //# sourceMappingURL=index.d.ts.map

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

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

package/build/types/tabs/utils.d.ts

@@ -1,8 +1,13 @@
-export function getVelocity(coords: any): number;
-export function getSwipeVelocity(start: any, end: any): number;
-export function getSwipeDifference(start: any, end: any, axis?: string): number;
-export function swipedLeftToRight(start: any, end: any): boolean;
-export function swipedRightToLeft(start: any, end: any): boolean;
-export function swipeShouldChangeTab(start: any, end: any): boolean;
-export function getElasticDragDifference(difference: any): number;
+export interface Swipe {
+    x: number;
+    y: number;
+    time: number;
+}
+export declare const getSwipeVelocity: (start: Swipe, end: Swipe) => number;
+export declare const getSwipeDifference: (start: Swipe, end: Swipe, axis?: "x" | "y") => number;
+export declare const swipedLeftToRight: (start: Swipe, end: Swipe) => boolean;
+export declare const swipedRightToLeft: (start: Swipe, end: Swipe) => boolean;
+export declare const swipeShouldChangeTab: (start: Swipe, end: Swipe) => boolean;
+export declare function getVelocity(coords: Swipe[]): number;
+export declare const getElasticDragDifference: (difference: number) => number;
 //# sourceMappingURL=utils.d.ts.map

package/build/types/tabs/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/tabs/utils.js"],"names":[],"mappings":"AAgCA,iDAUC;AAnCM,+DAIN;AAEM,gFAEN;AAEM,iEAEN;AAEM,iEAEN;AAEM,oEAKN;AAmBM,kEACuE"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/tabs/utils.ts"],"names":[],"mappings":"AAOA,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,gBAAgB,UAAW,KAAK,OAAO,KAAK,WAIxD,CAAC;AAEF,eAAO,MAAM,kBAAkB,UAAW,KAAK,OAAO,KAAK,SAAQ,GAAG,GAAG,GAAG,WAE3E,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAAW,KAAK,OAAO,KAAK,YAEzD,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAAW,KAAK,OAAO,KAAK,YAEzD,CAAC;AAEF,eAAO,MAAM,oBAAoB,UAAW,KAAK,OAAO,KAAK,YAK5D,CAAC;AAEF,wBAAgB,WAAW,CAAC,MAAM,EAAE,KAAK,EAAE,UAU1C;AAOD,eAAO,MAAM,wBAAwB,eAAgB,MAAM,WACmB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.52.3",
+  "version": "46.53.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -92,8 +92,8 @@
     "rollup": "^4.18.1",
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
-    "@transferwise/neptune-css": "14.12.1",
     "@transferwise/less-config": "3.1.0",
+    "@transferwise/neptune-css": "14.13.0",
     "@wise/components-theming": "1.5.0"
   },
   "peerDependencies": {

package/src/dateInput/DateInput.tests.story.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within, fn } from '@storybook/test';
 
-import { DateInput, DateMode, Info, InlineAlert, Title, Typography } from '..';
+import { DateInput, Field } from '..';
 import { lorem10, storyConfig } from '../test-utils';
 
 import Provider from '../provider/Provider';
@@ -38,45 +38,10 @@ export const WithLabel = {
     onChange: fn(),
   },
   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>
-      </>
+      <Field label="Date of Delivery">
+        <DateInput {...args} />
+      </Field>
     );
   },
 } satisfies Story;
@@ -84,10 +49,9 @@ export const WithLabel = {
 export const InputError = {
   ...Basic,
   render: (args) => (
-    <div className="form-group has-error">
+    <Field sentiment="negative" message={lorem10}>
       <DateInput {...args} value={new Date('2010-04-05')} />
-      <InlineAlert type="error">{lorem10}</InlineAlert>
-    </div>
+    </Field>
   ),
 } satisfies Story;
 

package/src/dateLookup/DateLookup.rtl.spec.tsx

@@ -28,7 +28,7 @@ describe('DateLookup', () => {
       </Field>,
     );
     // TODO: Replace with `.toHaveAttribute('aria-haspopup')`
-    expect(screen.getByLabelText('Date of birth')).toHaveTextContent(
+    expect(screen.getByLabelText(/Date of birth/)).toHaveTextContent(
       initialValue.getFullYear().toString(),
     );
   });

package/src/dateLookup/dateTrigger/DateTrigger.css

@@ -4,18 +4,10 @@
   white-space: nowrap;
   width: 100%;
 }
-.np-date-trigger .control-label {
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
-}
 .np-theme-personal .np-date-trigger {
   padding-left: 16px;
   padding-left: var(--size-16);
 }
-.np-theme-personal .np-date-trigger .control-label + span {
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
-}
 .clear-btn {
   transition: color 0.15s ease-in-out;
   color: #c9cbce;

package/src/dateLookup/dateTrigger/DateTrigger.less

@@ -7,16 +7,8 @@
   white-space: nowrap;
   width: 100%;
 
-  .control-label {
-    font-weight: var(--font-weight-regular);
-  }
-
   .np-theme-personal & {
     padding-left: var(--size-16);
-
-    .control-label + span {
-      font-weight: var(--font-weight-regular);
-    }
   }
 }
 

package/src/dateLookup/dateTrigger/DateTrigger.spec.js

@@ -119,5 +119,5 @@ describe('DateTrigger', () => {
   const button = () => component.find('.np-date-trigger');
   const clearButton = () => component.find('.clear-btn');
   const chevron = () => component.find(Chevron);
-  const label = () => component.find('.control-label');
+  const label = () => component.find('.np-date-trigger-label');
 });

package/src/dateLookup/dateTrigger/DateTrigger.tsx

@@ -2,12 +2,13 @@ import { formatDate } from '@transferwise/formatting';
 import { useIntl } from 'react-intl';
 
 import Chevron from '../../chevron';
-import { Size, Position, SizeSmall, SizeMedium, SizeLarge } from '../../common';
+import { Size, Position, SizeSmall, SizeMedium, SizeLarge, Typography } from '../../common';
 import { CloseButton } from '../../common/closeButton/CloseButton';
 
 import messages from './DateTrigger.messages';
 import { useContext } from 'react';
 import { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';
+import Body from '../../body';
 
 interface DateTriggerProps {
   selectedDate: Date | null;
@@ -45,15 +46,19 @@ const DateTrigger: React.FC<DateTriggerProps> = ({
         type="button"
         onClick={onClick}
       >
-        {label && <span className="control-label small m-r-1">{label}</span>}
+        {label && (
+          <Body as="span" className="np-date-trigger-label m-r-1">
+            {label}
+          </Body>
+        )}
         {selectedDate ? (
-          <span className="font-weight-normal">
+          <Body as="span" type={Typography.BODY_LARGE}>
             {formatDate(selectedDate, locale, {
               day: 'numeric',
               month: monthFormat,
               year: 'numeric',
             })}
-          </span>
+          </Body>
         ) : (
           <span
             className="form-control-placeholder visible-xs-inline visible-sm-inline

package/src/field/Field.css

@@ -0,0 +1,4 @@
+.np-field-control {
+  margin-top: 4px;
+  margin-top: var(--size-4);
+}

package/src/field/Field.less

@@ -0,0 +1,5 @@
+.np-field {
+  &-control {
+      margin-top: var(--size-4);
+  }
+}

package/src/field/Field.spec.tsx

@@ -14,7 +14,7 @@ describe('Field', () => {
       </Field>,
     );
 
-    expect(screen.getByLabelText('Phone number')).toBeInTheDocument();
+    expect(screen.getByLabelText(/Phone number/)).toBeInTheDocument();
     expect(screen.getByRole('textbox')).not.toHaveAttribute('aria-describedby');
   });
 
@@ -25,7 +25,7 @@ describe('Field', () => {
       </Field>,
     );
 
-    const textbox = screen.getByRole('textbox', { description: 'This is help text' });
+    const textbox = screen.getByRole('textbox', { description: /This is help text/ });
     expect(textbox).toBeInTheDocument();
     expect(textbox).not.toBeInvalid();
   });
@@ -42,15 +42,51 @@ describe('Field', () => {
     expect(textbox).toBeInvalid();
   });
 
-  it('should prefer error text over help text if both are provided', () => {
+  it('should shows error text and help text when both are provided', () => {
     render(
       <Field label="Phone number" error="This is error text" hint="This is help text">
         <Input />
       </Field>,
     );
 
-    expect(screen.getByRole('textbox', { description: 'This is error text' })).toBeInTheDocument();
-    expect(screen.queryByText('This is help text')).not.toBeInTheDocument();
+    expect(screen.getByRole('textbox', { description: /This is error text/ })).toBeInTheDocument();
+    expect(screen.getByText('This is help text')).toBeInTheDocument();
+    expect(screen.getByLabelText(/Phone number/)).toHaveAttribute('aria-describedby');
+  });
+
+  it('should shows message and description when both are provided', () => {
+    render(
+      <Field
+        label="Phone number"
+        description="This is help text"
+        sentiment="negative"
+        message="This is error text"
+      >
+        <Input />
+      </Field>,
+    );
+
+    expect(screen.getByRole('textbox', { description: /This is error text/ })).toBeInTheDocument();
+    expect(screen.getByText('This is help text')).toBeInTheDocument();
+    expect(screen.getByLabelText(/Phone number/)).toHaveAttribute('aria-describedby');
+  });
+
+  it('should show or hide (Optional) suffix depending on required prop', () => {
+    render(
+      <Field label="Phone number" description="This is help text">
+        <Input />
+      </Field>,
+    );
+
+    expect(screen.getByText('(Optional)')).toBeInTheDocument();
+
+    render(
+      <Field label="Phone number" description="This is help text" required>
+        <Input />
+      </Field>,
+    );
+
+    expect(screen.getByLabelText('Phone number')).toBeInTheDocument();
   });
 
   it('avoids triggering button within label inadvertently', async () => {

package/src/field/Field.story.tsx

@@ -3,6 +3,12 @@ import { useState } from 'react';
 import { Input } from '../inputs/Input';
 import { Field } from './Field';
 import { Sentiment } from '../common';
+import DateInput from '../dateInput';
+import { fn } from '@storybook/test';
+import { lorem10, lorem40 } from '../test-utils';
+import { TextArea } from '../inputs/TextArea';
+import { SearchInput } from '../inputs/SearchInput';
+import Info from '../info';
 
 export default {
   component: Field,
@@ -13,9 +19,66 @@ export default {
 export const Basic = () => {
   const [value, setValue] = useState<string | undefined>('This is some text');
   return (
-    <Field label="Phone number">
-      <Input value={value} onChange={({ target }) => setValue(target.value)} />
-    </Field>
+    <div className="row">
+      <div className="col-md-8 col-md-offset-2">
+        <Field label="Required Text Input" required>
+          <Input value={value} onChange={({ target }) => setValue(target.value)} />
+        </Field>
+        <Field label="Text Input">
+          <Input value={value} onChange={({ target }) => setValue(target.value)} />
+        </Field>
+        <Field label="Text Input with Description" description="This a field Description">
+          <Input value={value} onChange={({ target }) => setValue(target.value)} />
+        </Field>
+        <Field
+          label="Text Input with Validation Error"
+          description="This a field Description"
+          sentiment={Sentiment.NEGATIVE}
+          message="Validation error, please take a look"
+        >
+          <Input value={value} onChange={({ target }) => setValue(target.value)} />
+        </Field>
+
+        <Field label="Date Of Birth">
+          <DateInput onChange={fn} />
+        </Field>
+
+        <Field label="Date Of Birth with Description" description={lorem10}>
+          <DateInput onChange={fn} />
+        </Field>
+
+        <Field label="Search business">
+          <SearchInput />
+        </Field>
+
+        <Field label="Textarea">
+          <TextArea />
+        </Field>
+
+        <Field label="Textarea with Description" description="This a TextArea Description">
+          <TextArea />
+        </Field>
+
+        <Field
+          label="Textarea with Validation Error"
+          description="This a TextArea Description"
+          message={lorem10}
+          sentiment="negative"
+        >
+          <TextArea />
+        </Field>
+
+        <Field
+          label={
+            <>
+              Label with Suffix <Info content={lorem40} />
+            </>
+          }
+        >
+          <TextArea />
+        </Field>
+      </div>
+    </div>
   );
 };
 
@@ -23,16 +86,51 @@ export const WithStatusMessages = () => {
   const [value, setValue] = useState<string | undefined>('This is some text');
   return (
     <div>
-      <Field label="Phone number" sentiment={Sentiment.POSITIVE} message="Positive message">
+      <Field
+        label="Text Input with Positive Message"
+        sentiment={Sentiment.POSITIVE}
+        message="Positive message"
+      >
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>
-      <Field label="Phone number" sentiment={Sentiment.WARNING} message="Warning message">
+
+      <Field
+        label="Text Input with Warning Message"
+        sentiment={Sentiment.WARNING}
+        message="Warning message"
+      >
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>
-      <Field label="Phone number" sentiment={Sentiment.NEGATIVE} message="This is a required field">
+
+      <Field
+        label="Text Input with Validation Error"
+        sentiment={Sentiment.NEGATIVE}
+        message="This is a required field"
+      >
+        <Input value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+
+      {/* instance with deprecated `hint` prop */}
+      <Field
+        label="Text Input with deprecated `hint` prop"
+        hint="This is a helpful message"
+        sentiment={Sentiment.NEGATIVE}
+        message="Validation error, please take a look"
+      >
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>
-      <Field label="Phone number" message="This is a helpful message">
+
+      {/* instance with deprecated `error` & `hint` props */}
+      <Field
+        label="Text Input with deprecated `error` & `hint` props"
+        hint="This is a helpful message"
+        error="Validation error, please take a look"
+      >
+        <Input value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+
+      {/* instance of info via `message` property, this is rare case (e.g MoneyInput) */}
+      <Field label="Text Input with Info under the field" message="This is a helpful message">
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>
     </div>