@transferwise/components 0.0.0-experimental-f304e2c → 0.0.0-experimental-2fa5e3f

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,31 +1,37 @@
+import { useState } from 'react';
+
+import Info from '../info/Info';
+import { Input } from '../inputs/Input';
 import { Label } from './Label';
 
 export default {
   component: Label,
   title: 'Label',
-  tags: ['autodocs'],
 };
 
 export const Basic = () => {
+  const [value, setValue] = useState<string | undefined>('This is some text');
   return (
-    <>
-      <p>
-        Avoid using <code>Label</code> component directly (unless for some custom use cases), for
-        form control labels and descriptions / info messages, please use <code>Field</code>{' '}
-        component
-        <pre>{'<Field label={..} description={..} required={..}>'}</pre>
-      </p>
-
-      <Label className="m-b-2">Text Input</Label>
-
-      <Label className="m-b-2">
-        <Label.Optional>Text Input</Label.Optional>
-      </Label>
+    <Label>
+      Phone number
+      <Input value={value} id="input" onChange={({ target }) => setValue(target.value)} />
+    </Label>
+  );
+};
 
-      <Label className="m-b-2">
-        <Label.Optional>Text Input with Description</Label.Optional>
-        <Label.Description>This a field Description</Label.Description>
-      </Label>
-    </>
+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 { clsx } from 'clsx';
-import messages from './Label.messages';
-import { useIntl } from 'react-intl';
-import Body from '../body';
-import { CommonProps } from '../common';
-import { PropsWithChildren } from 'react';
 
 export type LabelProps = {
   id?: string;
@@ -12,45 +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={clsx(
-        'np-label d-flex flex-column m-b-0 np-text-body-default-bold text-primary',
-        className,
-      )}
+      className={clsx('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={clsx('text-secondary', 'm-l-1', className)}
-      >
-        {formatMessage(messages.optionalLabel)}
-      </Body>
-    </div>
-  );
-};
-
-export type LabelDescriptionProps = PropsWithChildren<CommonProps>;
-
-const Description = ({ children, className }: LabelDescriptionProps) =>
-  children ? <Body className={clsx('text-secondary', className)}>{children}</Body> : null;
-
-Label.Optional = Optional;
-Label.Description = Description;
-
-export { Label };

package/src/main.css

@@ -1719,10 +1719,18 @@ button.np-option {
   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;
@@ -2377,10 +2385,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   border-radius: 9999px !important;
   border-radius: var(--radius-full) !important;
 }
-.np-field-control {
-  margin-top: 4px;
-  margin-top: var(--size-4);
-}
 .np-input-group {
   display: inline-grid;
   width: 100%;

package/src/main.less

@@ -32,7 +32,6 @@
 @import "./image/Image.less";
 @import "./info/Info.less";
 @import "./inputs/Input.less";
-@import "./field/Field.less";
 @import "./inputs/InputGroup.less";
 @import "./inputs/SelectInput.less";
 @import "./inputs/TextArea.less";

package/src/moneyInput/MoneyInput.story.tsx

@@ -4,6 +4,8 @@ import { Lock } from '@transferwise/icons';
 import { useState } from 'react';
 
 import MoneyInput, { CurrencyOptionItem } from '.';
+import Provider from '../provider/Provider';
+import translations from '../i18n';
 
 export default {
   component: MoneyInput,

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/switch/Switch.spec.tsx

@@ -89,6 +89,6 @@ describe('Switch', () => {
         <Switch checked onClick={props.onClick} />
       </Field>,
     );
-    expect(screen.getByLabelText(/Dark mode/)).toHaveAttribute('role', 'switch');
+    expect(screen.getByLabelText('Dark mode')).toHaveAttribute('role', 'switch');
   });
 });

package/build/label/Label.messages.js

@@ -1,15 +0,0 @@
-'use strict';
-
-var reactIntl = require('react-intl');
-
-var messages = reactIntl.defineMessages({
-  optionalLabel: {
-    id: "neptune.Label.optional"
-  },
-  optionalAriaLabel: {
-    id: "neptune.aria.Label.optional"
-  }
-});
-
-module.exports = messages;
-//# sourceMappingURL=Label.messages.js.map

package/build/label/Label.messages.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Label.messages.js","sources":["../../src/label/Label.messages.tsx"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  optionalLabel: {\n    id: 'neptune.Label.optional',\n    defaultMessage: '(Optional)',\n  },\n  optionalAriaLabel: {\n    id: 'neptune.aria.Label.optional',\n    defaultMessage: 'This field is optional',\n  },\n});\n"],"names":["defineMessages","optionalLabel","id","optionalAriaLabel"],"mappings":";;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,aAAa,EAAE;IACbC,EAAE,EAAA,wBAAA;GAEH;AACDC,EAAAA,iBAAiB,EAAE;IACjBD,EAAE,EAAA,6BAAA;AAEH,GAAA;AACF,CAAA,CAAC;;;;"}

package/build/label/Label.messages.mjs

@@ -1,13 +0,0 @@
-import { defineMessages } from 'react-intl';
-
-var messages = defineMessages({
-  optionalLabel: {
-    id: "neptune.Label.optional"
-  },
-  optionalAriaLabel: {
-    id: "neptune.aria.Label.optional"
-  }
-});
-
-export { messages as default };
-//# sourceMappingURL=Label.messages.mjs.map

package/build/label/Label.messages.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Label.messages.mjs","sources":["../../src/label/Label.messages.tsx"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  optionalLabel: {\n    id: 'neptune.Label.optional',\n    defaultMessage: '(Optional)',\n  },\n  optionalAriaLabel: {\n    id: 'neptune.aria.Label.optional',\n    defaultMessage: 'This field is optional',\n  },\n});\n"],"names":["defineMessages","optionalLabel","id","optionalAriaLabel"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,aAAa,EAAE;IACbC,EAAE,EAAA,wBAAA;GAEH;AACDC,EAAAA,iBAAiB,EAAE;IACjBD,EAAE,EAAA,6BAAA;AAEH,GAAA;AACF,CAAA,CAAC;;;;"}

package/build/styles/field/Field.css

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

package/build/types/label/Label.messages.d.ts

@@ -1,12 +0,0 @@
-declare const _default: {
-    optionalLabel: {
-        id: string;
-        defaultMessage: string;
-    };
-    optionalAriaLabel: {
-        id: string;
-        defaultMessage: string;
-    };
-};
-export default _default;
-//# sourceMappingURL=Label.messages.d.ts.map

package/build/types/label/Label.messages.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Label.messages.d.ts","sourceRoot":"","sources":["../../../src/label/Label.messages.tsx"],"names":[],"mappings":";;;;;;;;;;AAEA,wBASG"}

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

@@ -1,3 +0,0 @@
-export { Label } from './Label';
-export type { LabelProps, LabelOptionalProps, LabelDescriptionProps } from './Label';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/label/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC"}

package/src/field/Field.css

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

package/src/field/Field.less

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

package/src/label/Label.messages.tsx

@@ -1,12 +0,0 @@
-import { defineMessages } from 'react-intl';
-
-export default defineMessages({
-  optionalLabel: {
-    id: 'neptune.Label.optional',
-    defaultMessage: '(Optional)',
-  },
-  optionalAriaLabel: {
-    id: 'neptune.aria.Label.optional',
-    defaultMessage: 'This field is optional',
-  },
-});

package/src/label/index.ts

@@ -1,2 +0,0 @@
-export { Label } from './Label';
-export type { LabelProps, LabelOptionalProps, LabelDescriptionProps } from './Label';