@transferwise/components 0.0.0-experimental-53c607c → 0.0.0-experimental-b002e6f

package/src/button/__snapshots__/{LegacyButton.spec.tsx.snap → Button.spec.tsx.snap}

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`LegacyButton by default renders a medium button of type accent and priority primary 1`] = `
+exports[`Button by default renders a medium button of type accent and priority primary 1`] = `
 <div>
   <button
     aria-busy="false"
@@ -14,7 +14,7 @@ exports[`LegacyButton by default renders a medium button of type accent and prio
 </div>
 `;
 
-exports[`LegacyButton by default renders an anchor tag with button styles of type accent and priority primary 1`] = `
+exports[`Button by default renders an anchor tag with button styles of type accent and priority primary 1`] = `
 <div>
   <a
     aria-busy="false"
@@ -28,7 +28,7 @@ exports[`LegacyButton by default renders an anchor tag with button styles of typ
 </div>
 `;
 
-exports[`LegacyButton deprecated types renders danger as negative buttons with priority secondary and logs a warning 1`] = `
+exports[`Button deprecated types renders danger as negative buttons with priority secondary and logs a warning 1`] = `
 <div>
   <button
     aria-busy="false"
@@ -42,7 +42,7 @@ exports[`LegacyButton deprecated types renders danger as negative buttons with p
 </div>
 `;
 
-exports[`LegacyButton deprecated types renders link as accent buttons with priority tertiary and logs a warning 1`] = `
+exports[`Button deprecated types renders link as accent buttons with priority tertiary and logs a warning 1`] = `
 <div>
   <button
     aria-busy="false"
@@ -56,7 +56,7 @@ exports[`LegacyButton deprecated types renders link as accent buttons with prior
 </div>
 `;
 
-exports[`LegacyButton deprecated types renders pay as positive buttons and logs a warning 1`] = `
+exports[`Button deprecated types renders pay as positive buttons and logs a warning 1`] = `
 <div>
   <button
     aria-busy="false"
@@ -70,7 +70,7 @@ exports[`LegacyButton deprecated types renders pay as positive buttons and logs
 </div>
 `;
 
-exports[`LegacyButton deprecated types renders primary as accent buttons and logs a warning 1`] = `
+exports[`Button deprecated types renders primary as accent buttons and logs a warning 1`] = `
 <div>
   <button
     aria-busy="false"
@@ -84,7 +84,7 @@ exports[`LegacyButton deprecated types renders primary as accent buttons and log
 </div>
 `;
 
-exports[`LegacyButton other states renders as block if block is true 1`] = `
+exports[`Button other states renders as block if block is true 1`] = `
 <div>
   <button
     aria-busy="false"
@@ -98,7 +98,7 @@ exports[`LegacyButton other states renders as block if block is true 1`] = `
 </div>
 `;
 
-exports[`LegacyButton priorities defaults tertiary buttons to secondary for positive buttons 1`] = `
+exports[`Button priorities defaults tertiary buttons to secondary for positive buttons 1`] = `
 <div>
   <button
     aria-busy="false"
@@ -112,7 +112,7 @@ exports[`LegacyButton priorities defaults tertiary buttons to secondary for posi
 </div>
 `;
 
-exports[`LegacyButton priorities defaults tertiary buttons to secondary for positive buttons 2`] = `
+exports[`Button priorities defaults tertiary buttons to secondary for positive buttons 2`] = `
 <div>
   <button
     aria-busy="false"
@@ -126,7 +126,7 @@ exports[`LegacyButton priorities defaults tertiary buttons to secondary for posi
 </div>
 `;
 
-exports[`LegacyButton priorities renders primary buttons 1`] = `
+exports[`Button priorities renders primary buttons 1`] = `
 <div>
   <button
     aria-busy="false"
@@ -140,7 +140,7 @@ exports[`LegacyButton priorities renders primary buttons 1`] = `
 </div>
 `;
 
-exports[`LegacyButton priorities renders primary buttons 2`] = `
+exports[`Button priorities renders primary buttons 2`] = `
 <div>
   <button
     aria-busy="false"
@@ -154,7 +154,7 @@ exports[`LegacyButton priorities renders primary buttons 2`] = `
 </div>
 `;
 
-exports[`LegacyButton priorities renders primary buttons 3`] = `
+exports[`Button priorities renders primary buttons 3`] = `
 <div>
   <button
     aria-busy="false"
@@ -168,7 +168,7 @@ exports[`LegacyButton priorities renders primary buttons 3`] = `
 </div>
 `;
 
-exports[`LegacyButton priorities renders secondary buttons 1`] = `
+exports[`Button priorities renders secondary buttons 1`] = `
 <div>
   <button
     aria-busy="false"
@@ -182,7 +182,7 @@ exports[`LegacyButton priorities renders secondary buttons 1`] = `
 </div>
 `;
 
-exports[`LegacyButton priorities renders secondary buttons 2`] = `
+exports[`Button priorities renders secondary buttons 2`] = `
 <div>
   <button
     aria-busy="false"
@@ -196,7 +196,7 @@ exports[`LegacyButton priorities renders secondary buttons 2`] = `
 </div>
 `;
 
-exports[`LegacyButton priorities renders secondary buttons 3`] = `
+exports[`Button priorities renders secondary buttons 3`] = `
 <div>
   <button
     aria-busy="false"
@@ -210,7 +210,7 @@ exports[`LegacyButton priorities renders secondary buttons 3`] = `
 </div>
 `;
 
-exports[`LegacyButton priorities renders tertiary buttons 1`] = `
+exports[`Button priorities renders tertiary buttons 1`] = `
 <div>
   <button
     aria-busy="false"
@@ -224,7 +224,7 @@ exports[`LegacyButton priorities renders tertiary buttons 1`] = `
 </div>
 `;
 
-exports[`LegacyButton sizes renders large buttons 1`] = `
+exports[`Button sizes renders large buttons 1`] = `
 <div>
   <button
     aria-busy="false"
@@ -238,7 +238,7 @@ exports[`LegacyButton sizes renders large buttons 1`] = `
 </div>
 `;
 
-exports[`LegacyButton sizes renders medium buttons 1`] = `
+exports[`Button sizes renders medium buttons 1`] = `
 <div>
   <button
     aria-busy="false"
@@ -252,7 +252,7 @@ exports[`LegacyButton sizes renders medium buttons 1`] = `
 </div>
 `;
 
-exports[`LegacyButton sizes renders small buttons 1`] = `
+exports[`Button sizes renders small buttons 1`] = `
 <div>
   <button
     aria-busy="false"
@@ -266,7 +266,7 @@ exports[`LegacyButton sizes renders small buttons 1`] = `
 </div>
 `;
 
-exports[`LegacyButton types renders accent buttons 1`] = `
+exports[`Button types renders accent buttons 1`] = `
 <div>
   <button
     aria-busy="false"
@@ -280,7 +280,7 @@ exports[`LegacyButton types renders accent buttons 1`] = `
 </div>
 `;
 
-exports[`LegacyButton types renders negative buttons 1`] = `
+exports[`Button types renders negative buttons 1`] = `
 <div>
   <button
     aria-busy="false"
@@ -294,7 +294,7 @@ exports[`LegacyButton types renders negative buttons 1`] = `
 </div>
 `;
 
-exports[`LegacyButton types renders positive buttons 1`] = `
+exports[`Button types renders positive buttons 1`] = `
 <div>
   <button
     aria-busy="false"

package/src/button/index.ts

@@ -1,2 +1,3 @@
-export { default } from './Button.resolver';
-export type { ButtonProps } from './Button.resolver';
+export { default } from './Button';
+
+export type { Props as ButtonProps } from './Button';

package/src/common/action/Action.tsx

@@ -22,7 +22,7 @@ export function Action({ action, className, variant = 'button' }: Props) {
   if ('href' in action) {
     return (
       <Link
-        href={action.href ?? ''}
+        href={action.href}
         className={className}
         aria-label={action['aria-label']}
         target={action.target}

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/iconButton/IconButton.less

@@ -52,4 +52,4 @@
       background-color:~"var(@{bg-color}-active)";
     }
   }
-}
+}

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/Button.resolver';
+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>
   );
 };