@transferwise/components 0.0.0-experimental-c8ab32e → 0.0.0-experimental-d349b91

package/build/types/stepper/Stepper.d.ts

@@ -9,6 +9,10 @@ export interface StepperProps {
     activeStep?: number;
     className?: string;
 }
+/**
+ * This component is considered user-unfriendly and inaccessible on its own and will likely be made internal in the future. Please use `FlowNavigation` instead.
+ * @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants
+ */
 declare const Stepper: ({ steps, activeStep, className }: StepperProps) => React.JSX.Element | null;
 export default Stepper;
 //# sourceMappingURL=Stepper.d.ts.map

package/build/types/stepper/Stepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../src/stepper/Stepper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,MAAM,WAAW,IAAI;IACnB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAGD,QAAA,MAAM,OAAO,qCAA0C,YAAY,6BA8DlE,CAAC;AAGF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../src/stepper/Stepper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,MAAM,WAAW,IAAI;IACnB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,QAAA,MAAM,OAAO,qCAA0C,YAAY,6BAgElE,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-c8ab32e",
+  "version": "0.0.0-experimental-d349b91",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -93,12 +93,12 @@
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.0",
-    "@transferwise/neptune-css": "0.0.0-experimental-c8ab32e",
-    "@wise/components-theming": "1.4.0"
+    "@wise/components-theming": "1.4.0",
+    "@transferwise/neptune-css": "14.12.1"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",
-    "@transferwise/neptune-css": "0.0.0-experimental-c8ab32e",
+    "@transferwise/neptune-css": "^14.9.6",
     "@wise/art": "^2.7.0",
     "@wise/components-theming": "^1.0.0",
     "react": ">=18",

package/src/dateInput/DateInput.story.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 
-import { DateInput, Field } from '..';
+import { DateInput } from '..';
 
 const meta = {
   component: DateInput,
@@ -17,9 +17,4 @@ export const Basic = {
   args: {
     onChange: fn(),
   },
-  render: (args) => (
-    <Field label="Date of date">
-      <DateInput {...args} />
-    </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/field/Field.spec.tsx

@@ -14,11 +14,11 @@ describe('Field', () => {
       </Field>,
     );
 
-    expect(screen.getByLabelText(/Phone number/)).toBeInTheDocument();
+    expect(screen.getByLabelText('Phone number')).toBeInTheDocument();
     expect(screen.getByRole('textbox')).not.toHaveAttribute('aria-describedby');
   });
 
-  it.skip('should render help text if provided', () => {
+  it('should render help text if provided', () => {
     render(
       <Field label="Phone number" hint="This is help text">
         <Input />
@@ -50,8 +50,7 @@ describe('Field', () => {
     );
 
     expect(screen.getByRole('textbox', { description: 'This is error text' })).toBeInTheDocument();
-    // screen.debug();
-    // expect(screen.queryByText('This is help text')).not.toBeInTheDocument();
+    expect(screen.queryByText('This is help text')).not.toBeInTheDocument();
   });
 
   it('avoids triggering button within label inadvertently', async () => {

package/src/field/Field.story.tsx

@@ -13,17 +13,9 @@ export default {
 export const Basic = () => {
   const [value, setValue] = useState<string | undefined>('This is some text');
   return (
-    <>
-      <Field label="Phone number" required>
-        <Input value={value} onChange={({ target }) => setValue(target.value)} />
-      </Field>
-      <Field label="Phone number">
-        <Input value={value} onChange={({ target }) => setValue(target.value)} />
-      </Field>
-      <Field label="Phone number" description="Please provide you primary phone number">
-        <Input value={value} onChange={({ target }) => setValue(target.value)} />
-      </Field>
-    </>
+    <Field label="Phone number">
+      <Input value={value} onChange={({ target }) => setValue(target.value)} />
+    </Field>
   );
 };
 
@@ -40,33 +32,7 @@ export const WithStatusMessages = () => {
       <Field label="Phone number" sentiment={Sentiment.NEGATIVE} message="This is a required field">
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>
-      <Field label="Phone number (this)" message="This is a helpful message (this)">
-        <Input value={value} onChange={({ target }) => setValue(target.value)} />
-      </Field>
-      {/* instance with deprecated `hint` prop */}
-      <Field
-        label="Phone number"
-        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>
-      {/* instance with deprecated `error` & `hint` props */}
-      <Field
-        label="Phone number"
-        hint="This is a helpful message"
-        error="Validation error, please take a look"
-      >
-        <Input value={value} onChange={({ target }) => setValue(target.value)} />
-      </Field>
-      {/* instance with deprecated `error` & `hint` props */}
-      <Field
-        label="Phone number"
-        description="This is a helpful message"
-        sentiment={Sentiment.NEGATIVE}
-        message="Validation error, please take a look"
-      >
+      <Field label="Phone number" message="This is a helpful message">
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>
     </div>

package/src/field/Field.tests.story.tsx

@@ -3,7 +3,6 @@ import { useState } from 'react';
 import { Input } from '../inputs/Input';
 import { Field } from './Field';
 import { Sentiment } from '../common';
-import InlineAlert from '../inlineAlert/InlineAlert';
 
 export default {
   component: Field,
@@ -16,9 +15,8 @@ export const WithHelpAndErrorOnBlur = () => {
   return (
     <Field
       label="Phone number"
-      sentiment={error ? Sentiment.NEGATIVE : undefined}
-      message={error}
-      description="Please include country code"
+      sentiment={error ? Sentiment.NEGATIVE : Sentiment.NEUTRAL}
+      message={error || 'Please include country code'}
     >
       <Input
         value={value}

package/src/field/Field.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { ReactNode, useId } from 'react';
+import { useId } from 'react';
 
 import { Sentiment } from '../common';
 import InlineAlert from '../inlineAlert/InlineAlert';
@@ -9,18 +9,16 @@ import {
   InputIdContextProvider,
   InputInvalidProvider,
 } from '../inputs/contexts';
-import { Label } from '../label';
+import { Label } from '../label/Label';
 
 export type FieldProps = {
   /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */
   id?: string | null;
   /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */
   label?: React.ReactNode;
-  required?: boolean;
-  /** @deprecated use `description` prop instead */
+  /** @deprecated use `message` and `type={Sentiment.NEUTRAL}` prop instead */
   hint?: React.ReactNode;
   message?: React.ReactNode;
-  description?: React.ReactNode;
   /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */
   error?: React.ReactNode;
   sentiment?: `${Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.POSITIVE | Sentiment.WARNING}`;
@@ -31,26 +29,20 @@ export type FieldProps = {
 export const Field = ({
   id,
   label,
-  required = false,
   message: propMessage,
-  description: propDescription,
   sentiment: propType = Sentiment.NEUTRAL,
   className,
   children,
   ...props
 }: FieldProps) => {
   const sentiment = props.error ? Sentiment.NEGATIVE : propType;
-  const message = propMessage || props.error || props.hint;
+  const message = props.error || props.hint || propMessage;
   const hasError = sentiment === Sentiment.NEGATIVE;
-  const hasInfo: boolean = sentiment === Sentiment.NEUTRAL && (!!props.hint || !!message);
-  const description: ReactNode = propDescription || (hasInfo && (props.hint || message));
-
-  console.log('hasInfo', hasInfo, 'description', description);
 
   const labelId = useId();
 
   const fallbackInputId = useId();
-  const inputId = id !== null ? (id ?? fallbackInputId) : undefined;
+  const inputId = id !== null ? id ?? fallbackInputId : undefined;
 
   const descriptionId = useId();
 
@@ -66,22 +58,21 @@ export const Field = ({
                   'has-success': sentiment === Sentiment.POSITIVE,
                   'has-warning': sentiment === Sentiment.WARNING,
                   'has-error': hasError,
-                  'has-info': hasInfo,
+                  'has-info': sentiment === Sentiment.NEUTRAL,
                 },
                 className,
               )}
             >
               {label != null ? (
                 <Label id={labelId} htmlFor={inputId}>
-                  {required ? label : <Label.Optional>{label}</Label.Optional>}
-                  {description && <Label.Description>{description}</Label.Description>}
+                  {label}
                   {children}
                 </Label>
               ) : (
                 children
               )}
 
-              {message && !hasInfo && (
+              {message && (
                 <InlineAlert type={sentiment} id={descriptionId}>
                   {message}
                 </InlineAlert>

package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap

@@ -71,7 +71,7 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
               style="width: 50%;"
             />
           </div>
-          <ul
+          <ol
             class="tw-stepper-steps p-t-1 m-b-0"
           >
             <li
@@ -107,7 +107,7 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
                 label-2
               </span>
             </li>
-          </ul>
+          </ol>
         </div>
       </div>
     </div>
@@ -187,7 +187,7 @@ exports[`FlowNavigation renders as expected 1`] = `
               style="width: 0%;"
             />
           </div>
-          <ul
+          <ol
             class="tw-stepper-steps p-t-1 m-b-0"
           >
             <li
@@ -223,7 +223,7 @@ exports[`FlowNavigation renders as expected 1`] = `
                 label-2
               </span>
             </li>
-          </ul>
+          </ol>
         </div>
       </div>
     </div>

package/src/i18n/en.json

@@ -18,7 +18,6 @@
   "neptune.DateLookup.year": "year",
   "neptune.FlowNavigation.back": "back to previous step",
   "neptune.Info.ariaLabel": "More information",
-  "neptune.Label.optional": "(Optional)",
   "neptune.Link.opensInNewTab": "(opens in new tab)",
   "neptune.MoneyInput.Select.placeholder": "Select an option...",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Select an option...",
@@ -56,6 +55,5 @@
   "neptune.UploadItem.uploaded": "Uploaded",
   "neptune.UploadItem.uploadedFile": "Uploaded file",
   "neptune.UploadItem.uploading": "Uploading...",
-  "neptune.UploadItem.uploadingFailed": "Uploading failed",
-  "neptune.aria.Label.optional": "This field is optional"
+  "neptune.UploadItem.uploadingFailed": "Uploading failed"
 }

package/src/i18n/zh-HK.json

@@ -23,6 +23,8 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "選擇其中一項…",
   "neptune.Select.searchPlaceholder": "搜尋…",
   "neptune.SelectInput.noResultsFound": "找不到任何結果",
+  "neptune.SelectOption.action.label": "選擇",
+  "neptune.SelectOption.selected.action.label": "更改已選選項",
   "neptune.Summary.statusDone": "已完成事項",
   "neptune.Summary.statusNotDone": "未完成事項",
   "neptune.Summary.statusPending": "待處理事項",

package/src/index.ts

@@ -44,7 +44,7 @@ export type {
 } from './inputs/SelectInput';
 export type { TextAreaProps } from './inputs/TextArea';
 export type { InstructionsListProps } from './instructionsList';
-export type { LabelProps, LabelOptionalProps, LabelDescriptionProps } from './label/Label';
+export type { LabelProps } from './label/Label';
 export type { LoaderProps } from './loader';
 export type { MarkdownProps } from './markdown';
 export type { ModalProps } from './modal';

package/src/inlineAlert/InlineAlert.story.tsx

@@ -5,8 +5,6 @@ import { Sentiment } from '../common';
 import { Input } from '../inputs/Input';
 
 import InlineAlert, { InlineAlertProps } from './InlineAlert';
-import { Label } from '../label';
-import { lorem40 } from '../test-utils';
 
 export default {
   component: InlineAlert,
@@ -68,31 +66,36 @@ export const Basic = () => {
         this manually.
       </p>
       <div className={`form-group ${typeClass}`}>
-        <Label className="control-label" htmlFor="id0">
+        <label className="control-label" htmlFor="id0">
           Toggleable
-        </Label>
+        </label>
         <Input id="id0" value="Neptune is cool" />
         <InlineAlert type={type}>{message}</InlineAlert>
       </div>
       <div className="form-group has-error">
-        <Label className="control-label" htmlFor="id1">
+        <label className="control-label" htmlFor="id1">
           Negative
-        </Label>
+        </label>
         <Input id="id1" value="Neptune is cool" />
         <InlineAlert type="negative">{message}</InlineAlert>
       </div>
       <div className="form-group has-success">
-        <Label className="control-label" htmlFor="id2">
+        <label className="control-label" htmlFor="id2">
           Positive
-        </Label>
+        </label>
         <Input id="id2" value="Neptune is cool" />
-        <InlineAlert type="positive">{lorem40}</InlineAlert>
+        <InlineAlert type="positive">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+          ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        </InlineAlert>
       </div>
       <div className="form-group has-neutral">
-        <Label className="control-label" htmlFor="id3">
+        <label className="control-label" htmlFor="id3">
           Neutral
-        </Label>
+        </label>
         <Input id="id3" value="Neptune is cool" />
+        <InlineAlert type="neutral">{message}</InlineAlert>
       </div>
       <div className="form-group">
         <label className="control-label" htmlFor="id4">

package/src/inputs/InputGroup.spec.tsx

@@ -26,6 +26,6 @@ describe('InputGroup', () => {
         </InputGroup>
       </Field>,
     );
-    expect(screen.getByLabelText(/Search…/)).toHaveRole('textbox');
+    expect(screen.getByLabelText('Search…')).toHaveRole('textbox');
   });
 });

package/src/inputs/SearchInput.spec.tsx

@@ -11,6 +11,6 @@ describe('SearchInput', () => {
         <SearchInput />
       </Field>,
     );
-    expect(screen.getByLabelText(/Search…/)).toHaveRole('searchbox');
+    expect(screen.getByLabelText('Search…')).toHaveRole('searchbox');
   });
 });

package/src/inputs/SelectInput.spec.tsx

@@ -214,6 +214,6 @@ describe('SelectInput', () => {
         <SelectInput items={[{ type: 'option', value: 'USD' }]} value="USD" />
       </Field>,
     );
-    expect(screen.getByLabelText(/Currency/)).toHaveAttribute('aria-haspopup');
+    expect(screen.getByLabelText('Currency')).toHaveAttribute('aria-haspopup');
   });
 });

package/src/label/Label.story.tsx

@@ -1,53 +1,37 @@
 import { useState } from 'react';
 
+import Info from '../info/Info';
 import { Input } from '../inputs/Input';
 import { Label } from './Label';
-import InlineAlert from '../inlineAlert/InlineAlert';
-import { lorem10 } from '../test-utils';
 
 export default {
   component: Label,
   title: 'Label',
-  tags: ['autodocs'],
 };
 
 export const Basic = () => {
   const [value, setValue] = useState<string | undefined>('This is some text');
   return (
-    <>
-      <Label className="m-b-2">
-        Phone number
-        <Input value={value} id="input" onChange={({ target }) => setValue(target.value)} />
-      </Label>
-
-      <Label className="m-b-2">
-        <Label.Optional>Phone number</Label.Optional>
-        <Input value={value} id="input" onChange={({ target }) => setValue(target.value)} />
-      </Label>
-
-      <Label className="m-b-2">
-        <Label.Optional>Phone number</Label.Optional>
-        <Label.Description>This an field Description</Label.Description>
-        <Input value={value} id="input" onChange={({ target }) => setValue(target.value)} />
-      </Label>
-
-      <Label htmlFor="phone-number-1">
-        <Label.Optional>Phone number</Label.Optional>
-        <Label.Description>This an field Description</Label.Description>
-      </Label>
-      <Input
-        id="phone-number-1"
-        className="m-b-2"
-        value={value}
-        onChange={({ target }) => setValue(target.value)}
-      />
+    <Label>
+      Phone number
+      <Input value={value} id="input" onChange={({ target }) => setValue(target.value)} />
+    </Label>
+  );
+};
 
-      {/* Instance of legacy and deprecated way of doing labels for visual testing */}
-      <label className="control-label" htmlFor="phone-number-1">
-        Phone number
-      </label>
-      <Input id="phone-number-1" value={value} onChange={({ target }) => setValue(target.value)} />
-      <InlineAlert>{lorem10}</InlineAlert>
-    </>
+export const WithInfo = () => {
+  const [value, setValue] = useState<string | undefined>('This is some text');
+  return (
+    <Label>
+      <span className="d-flex">
+        Phone number{' '}
+        <Info
+          content="This is some help in popover"
+          aria-label="The aria label"
+          className="m-l-1"
+        />
+      </span>
+      <Input value={value} id="input" onChange={({ target }) => setValue(target.value)} />
+    </Label>
   );
 };

package/src/label/Label.tsx

@@ -1,9 +1,4 @@
 import classNames from 'classnames';
-import Body from '../body';
-import { useIntl } from 'react-intl';
-import messages from './Label.messages';
-import { CommonProps } from '../common';
-import { PropsWithChildren } from 'react';
 
 export type LabelProps = {
   id?: string;
@@ -12,49 +7,14 @@ export type LabelProps = {
   children?: React.ReactNode;
 };
 
-const Label = ({ id, htmlFor, className, children }: LabelProps) => {
+export const Label = ({ id, htmlFor, className, children }: LabelProps) => {
   return (
     <label
       id={id}
       htmlFor={htmlFor}
-      className={classNames(
-        'control-label d-flex flex-column m-b-0',
-        'np-text-body-default-bold',
-        'text-primary',
-        className,
-      )}
+      className={classNames('control-label d-flex flex-column gap-y-1 m-b-0', className)}
     >
       {children}
     </label>
   );
 };
-
-export type LabelOptionalProps = PropsWithChildren<CommonProps>;
-
-const Optional = ({ children, className }: LabelOptionalProps) => {
-  const { formatMessage } = useIntl();
-  return (
-    <div>
-      {children}
-      <Body
-        as="span"
-        aria-label={formatMessage(messages.optionalAriaLabel)}
-        className={classNames('text-secondary', 'm-l-1', className)}
-      >
-        {formatMessage(messages.optionalLabel)}
-      </Body>
-    </div>
-  );
-};
-
-export type LabelDescriptionProps = PropsWithChildren<CommonProps>;
-
-const Description = ({ children, className }: LabelDescriptionProps) =>
-  children ? (
-    <Body className={classNames('text-secondary', 'm-b-1', className)}>{children}</Body>
-  ) : null;
-
-Label.Optional = Optional;
-Label.Description = Description;
-
-export { Label };

package/src/radioGroup/RadioGroup.rtl.spec.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '../test-utils';
+import { render, screen } from '@testing-library/react';
 
 import RadioGroup from '.';
 import { Field } from '../field/Field';

package/src/select/Select.rtl.spec.tsx

@@ -12,6 +12,6 @@ describe('Select', () => {
         <Select options={options} selected={options[0]} onChange={() => {}} />
       </Field>,
     );
-    expect(screen.getByLabelText(/Currency/)).toHaveTextContent('USD');
+    expect(screen.getByLabelText('Currency')).toHaveTextContent('USD');
   });
 });

package/src/stepper/Stepper.less

@@ -79,7 +79,7 @@
 
 .progress-bar {
   .float(left);
-  
+
   -webkit-backface-visibility: hidden;
   height: 100%;
   background-color: var(--color-interactive-primary);
@@ -87,7 +87,7 @@
   border-bottom-left-radius: 1px;
   transition: width 0.6s ease-in-out;
   will-change: width;
-  
+
   &::after {
     .float(right);
 

package/src/stepper/Stepper.story.tsx

@@ -0,0 +1,49 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import Stepper from './Stepper';
+
+const STEPS = [
+  {
+    label: 'One',
+    onClick: fn(),
+  },
+  {
+    label: 'Two',
+    hoverLabel: (
+      <>
+        <div>
+          <strong>Diana Jaramillo</strong>
+        </div>
+        dianajarm123@gmail.com
+      </>
+    ),
+    onClick: fn(),
+  },
+  { label: 'Recipient', onClick: fn() },
+  { label: 'Smellification', onClick: fn() },
+  { label: 'Battle', onClick: fn() },
+];
+
+export default {
+  component: Stepper,
+  title: 'Navigation/Stepper',
+  argTypes: {
+    activeStep: {
+      control: 'radio',
+      options: [...Array(STEPS.length).keys()],
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Stepper>;
+
+type Story = StoryObj<typeof Stepper>;
+
+export const Basic: Story = {
+  render: ({ activeStep, steps }) => {
+    return <Stepper activeStep={activeStep} steps={steps} />;
+  },
+  args: {
+    activeStep: 2,
+    steps: STEPS,
+  },
+};