@transferwise/components 0.0.0-experimental-58ab0d7 → 0.0.0-experimental-4530892

package/src/definitionList/DefinitionList.story.tsx

@@ -1,19 +1,29 @@
 import { action } from '@storybook/addon-actions';
-import { select, text, boolean } from '@storybook/addon-knobs';
 
 import { Layout } from '../common';
 
-import DefinitionList from './DefinitionList';
+import DefinitionList, { type DefinitionListLayout } from './DefinitionList';
+import { lorem10 } from '../test-utils';
+import Section from '../section';
+import Header from '../header';
 
 export default {
   component: DefinitionList,
   title: 'Typography/DefinitionList',
 };
 
+const layouts: DefinitionListLayout[] = [
+  Layout.VERTICAL_TWO_COLUMN,
+  Layout.VERTICAL_ONE_COLUMN,
+  Layout.HORIZONTAL_JUSTIFIED,
+  Layout.HORIZONTAL_LEFT_ALIGNED,
+  Layout.HORIZONTAL_RIGHT_ALIGNED,
+];
+
 const definitions = [
   {
-    title: text('title', 'Editable title'),
-    value: text('value', 'Editable value'),
+    title: 'Definition List title',
+    value: 'Definition List value',
     key: 'first',
   },
   {
@@ -23,67 +33,57 @@ const definitions = [
   },
   {
     title: 'Long strings will wrap',
-    value: 'And values with long words will eventuallybreakontothenextline',
+    value: lorem10,
     key: 'third',
   },
 ];
 
 export const Basic = () => {
-  const muted = boolean('muted', false);
-  const layout = select(
-    'layout',
-    [
-      Layout.VERTICAL_TWO_COLUMN,
-      Layout.VERTICAL_ONE_COLUMN,
-      Layout.HORIZONTAL_JUSTIFIED,
-      Layout.HORIZONTAL_LEFT_ALIGNED,
-      Layout.HORIZONTAL_RIGHT_ALIGNED,
-    ],
-    Layout.HORIZONTAL_LEFT_ALIGNED,
-  );
-
-  return <DefinitionList layout={layout} muted={muted} definitions={definitions} />;
+  return layouts.map((layout) => (
+    <Section key={layout}>
+      <Header title={`Instace of: ${layout}`} />
+      <DefinitionList layout={layout} definitions={definitions} />
+    </Section>
+  ));
 };
 
 export const WithActionButtons = () => {
-  const muted = boolean('muted', false);
-  const layout = select(
-    'layout',
-    [
-      Layout.VERTICAL_TWO_COLUMN,
-      Layout.VERTICAL_ONE_COLUMN,
-      Layout.HORIZONTAL_JUSTIFIED,
-      Layout.HORIZONTAL_LEFT_ALIGNED,
-      Layout.HORIZONTAL_RIGHT_ALIGNED,
-    ],
-    Layout.HORIZONTAL_LEFT_ALIGNED,
-  );
-
   return (
-    <DefinitionList
-      layout={layout}
-      muted={muted}
-      definitions={[
-        ...definitions,
-        {
-          title: 'Action buttons are useful',
-          value: 'You can do all kinds of neat things with actions buttons!',
-          key: 'fourth',
-          action: {
-            label: 'Epic button',
-            onClick: action('Probably the best action event you have ever seen, in the world!'),
-          },
-        },
-        {
-          title: 'tiny',
-          value: 'tiny',
-          key: 'fifth',
-          action: {
-            label: 'Epic button',
-            onClick: action('Hello from the Tiny Button :)'),
-          },
-        },
-      ]}
-    />
+    <>
+      {layouts.map((layout) => (
+        <Section key={layout}>
+          <Header title={`Instace of: ${layout}`} />
+          <DefinitionList
+            key={layout}
+            layout={layout}
+            definitions={[
+              ...definitions,
+              {
+                title: 'Action buttons are useful',
+                value: lorem10,
+                key: 'fourth',
+                action: {
+                  label: 'Epic button',
+                  onClick: action(lorem10),
+                },
+              },
+              {
+                title: 'tiny',
+                value: 'tiny',
+                key: 'fifth',
+                action: {
+                  label: 'Epic button',
+                  onClick: action(lorem10),
+                },
+              },
+            ]}
+          />
+        </Section>
+      ))}
+    </>
   );
 };
+
+export const Muted = () => {
+  return <DefinitionList muted definitions={definitions} />;
+};

package/src/definitionList/DefinitionList.tsx

@@ -13,7 +13,7 @@ export interface DefinitionListDefinition {
   key: string;
 }
 
-type DefinitionListLayout =
+export type DefinitionListLayout =
   `${Layout.VERTICAL_TWO_COLUMN | Layout.VERTICAL_ONE_COLUMN | Layout.HORIZONTAL_JUSTIFIED | Layout.HORIZONTAL_LEFT_ALIGNED | Layout.HORIZONTAL_RIGHT_ALIGNED}`;
 
 export interface DefinitionListProps {

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

@@ -12,7 +12,7 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
         aria-disabled="false"
         aria-label="back to previous step"
         aria-live="off"
-        class="np-circle d-flex align-items-center justify-content-center np-icon-button np-icon-button-tertiary-default"
+        class="wds-Button np-circle d-flex align-items-center justify-content-center np-icon-button np-icon-button-tertiary-default"
         style="--circle-size: 40px; --circle-icon-size: 20px; --circle-font-size: 18px;"
         type="button"
       >

package/src/i18n/de.json

@@ -54,6 +54,7 @@
   "neptune.UploadButton.allFileTypes": "Alle Dateiformate",
   "neptune.UploadButton.dropFiles": "Datei zum Hochladen in dieses Feld ziehen",
   "neptune.UploadButton.instructions": "{fileTypes}, kleiner als {size} MB",
+  "neptune.UploadButton.maximumFiles": "Maximal {maxFiles} Dateien.",
   "neptune.UploadButton.uploadFile": "Datei hochladen",
   "neptune.UploadButton.uploadFiles": "Dateien hochladen",
   "neptune.UploadInput.deleteModalBody": "Wenn du diese Datei entfernst, wird sie aus unserem System gelöscht werden.",

package/src/i18n/it.json

@@ -54,6 +54,7 @@
   "neptune.UploadButton.allFileTypes": "Tutti i tipi di file",
   "neptune.UploadButton.dropFiles": "Rilascia file per iniziare a caricare",
   "neptune.UploadButton.instructions": "{fileTypes}, minore di {size}MB",
+  "neptune.UploadButton.maximumFiles": "Max {maxFiles} file.",
   "neptune.UploadButton.uploadFile": "Carica un file",
   "neptune.UploadButton.uploadFiles": "Carica i file",
   "neptune.UploadInput.deleteModalBody": "Rimuovere questo file lo cancellerà dal nostro sistema.",

package/src/i18n/ja.json

@@ -54,6 +54,7 @@
   "neptune.UploadButton.allFileTypes": "すべてのファイル種類",
   "neptune.UploadButton.dropFiles": "ファイルをドロップしてアップロードする",
   "neptune.UploadButton.instructions": "{fileTypes}、{size}MB以下",
+  "neptune.UploadButton.maximumFiles": "最大ファイル数：{maxFiles}個",
   "neptune.UploadButton.uploadFile": "ファイルをアップロードする",
   "neptune.UploadButton.uploadFiles": "ファイルをアップロードする",
   "neptune.UploadInput.deleteModalBody": "このファイルを削除すると、当社のシステムからも削除されます。",

package/src/i18n/pt.json

@@ -54,6 +54,7 @@
   "neptune.UploadButton.allFileTypes": "Todos os tipos de arquivos",
   "neptune.UploadButton.dropFiles": "Arraste o arquivo para iniciar o envio",
   "neptune.UploadButton.instructions": "{fileTypes}, com menos de {size}MB",
+  "neptune.UploadButton.maximumFiles": "Máximo de {maxFiles} arquivos.",
   "neptune.UploadButton.uploadFile": "Enviar arquivo",
   "neptune.UploadButton.uploadFiles": "Enviar arquivos",
   "neptune.UploadInput.deleteModalBody": "Se você remover este arquivo, ele será permanentemente excluído do nosso sistema.",

package/src/i18n/ru.json

@@ -54,6 +54,7 @@
   "neptune.UploadButton.allFileTypes": "Все типы файлов",
   "neptune.UploadButton.dropFiles": "Перетащите файл, чтобы начать загрузку",
   "neptune.UploadButton.instructions": "{fileTypes}, не превышающий {size} MB",
+  "neptune.UploadButton.maximumFiles": "Макс. количество файлов: {maxFiles}.",
   "neptune.UploadButton.uploadFile": "Загрузить файл",
   "neptune.UploadButton.uploadFiles": "Загрузить файлы",
   "neptune.UploadInput.deleteModalBody": "Удаление этого файла приведет к его удалению из нашей системы.",

package/src/i18n/th.json

@@ -54,6 +54,7 @@
   "neptune.UploadButton.allFileTypes": "ไฟล์ทุกประเภท",
   "neptune.UploadButton.dropFiles": "วางไฟล์เพื่อเริ่มการอัปโหลด",
   "neptune.UploadButton.instructions": "{fileTypes} น้อยกว่า {size} MB",
+  "neptune.UploadButton.maximumFiles": "สูงสุด {maxFiles} ไฟล์",
   "neptune.UploadButton.uploadFile": "อัปโหลดไฟล์",
   "neptune.UploadButton.uploadFiles": "อัปโหลดไฟล์",
   "neptune.UploadInput.deleteModalBody": "การลบไฟล์นี้จะลบออกจากระบบของเรา",

package/src/i18n/zh-HK.json

@@ -54,6 +54,7 @@
   "neptune.UploadButton.allFileTypes": "所有檔案類型",
   "neptune.UploadButton.dropFiles": "拖放檔案以開始上載",
   "neptune.UploadButton.instructions": "{fileTypes}，小於{size}MB",
+  "neptune.UploadButton.maximumFiles": "最多{maxFiles}個檔案。",
   "neptune.UploadButton.uploadFile": "上載檔案",
   "neptune.UploadButton.uploadFiles": "上載檔案",
   "neptune.UploadInput.deleteModalBody": "移除此檔案會把它從我們的系統中刪除。",

package/src/iconButton/IconButton.story.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-key */
 import { Meta, StoryObj } from '@storybook/react';
-import { ArrowLeft } from '@transferwise/icons';
+import { ArrowLeft, Cross, Defrost, Edit, Menu, Plus } from '@transferwise/icons';
 import IconButton, { Props } from './IconButton';
 import { action } from '@storybook/addon-actions';
 import Body from '../body';
@@ -24,7 +24,7 @@ const Template = ({ size, disabled }: Props) => {
         type="default"
         onClick={action('button click')}
       >
-        <ArrowLeft />
+        <Plus />
       </IconButton>
       <IconButton
         size={size}
@@ -34,7 +34,7 @@ const Template = ({ size, disabled }: Props) => {
         type="default"
         onClick={action('button click')}
       >
-        <ArrowLeft />
+        <Defrost />
       </IconButton>
       <IconButton
         size={size}
@@ -54,7 +54,7 @@ const Template = ({ size, disabled }: Props) => {
         type="default"
         onClick={action('button click')}
       >
-        <ArrowLeft />
+        <Menu />
       </IconButton>
       <IconButton
         size={size}
@@ -64,7 +64,7 @@ const Template = ({ size, disabled }: Props) => {
         type="negative"
         onClick={action('button click')}
       >
-        <ArrowLeft />
+        <Cross />
       </IconButton>
       <IconButton
         size={size}
@@ -74,7 +74,7 @@ const Template = ({ size, disabled }: Props) => {
         type="negative"
         onClick={action('button click')}
       >
-        <ArrowLeft />
+        <Edit />
       </IconButton>
     </>
   );

package/src/inputs/SelectInput.story.tsx

@@ -5,7 +5,7 @@ import { Flag } from '@wise/art';
 import { clsx } from 'clsx';
 import { useState } from 'react';
 
-import Button from '../button';
+import Button from '../button/Button';
 import { getMonthNames } from '../common/dateUtils';
 import Drawer from '../drawer';
 import { Field } from '../field/Field';

package/src/link/Link.tsx

@@ -1,14 +1,13 @@
 import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';
 import { clsx } from 'clsx';
+import { AnchorHTMLAttributes } from 'react';
 import { useIntl } from 'react-intl';
-import { PrimitiveAnchor } from '../primitives';
-import type { PrimitiveAnchorProps } from '../primitives';
 
 import { LinkLarge, LinkDefault } from '../common';
 
 import messages from './Link.messages';
 
-export type Props = PrimitiveAnchorProps & { type?: LinkLarge | LinkDefault };
+export type Props = AnchorHTMLAttributes<HTMLAnchorElement> & { type?: LinkLarge | LinkDefault };
 
 /**
  * Standard Link component with navigate away icon
@@ -25,30 +24,22 @@ const Link = ({
   onClick,
   ...props
 }: Props) => {
-  const { formatMessage } = useIntl();
   const isBlank = target === '_blank';
 
-  const classNames = clsx(
-    'np-link',
-    'd-inline-flex',
-    {
-      [`np-text-${type}`]: type,
-    },
-    className,
-  );
+  const { formatMessage } = useIntl();
 
   return (
-    <PrimitiveAnchor
+    <a
       href={href}
       target={target}
-      className={classNames}
+      className={clsx('np-link', type ? `np-text-${type}` : undefined, 'd-inline-flex', className)}
       aria-label={ariaLabel}
       rel={isBlank ? 'noreferrer' : undefined}
       onClick={onClick}
       {...props}
     >
       {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}
-    </PrimitiveAnchor>
+    </a>
   );
 };