@transferwise/components 0.0.0-experimental-a087360 → 0.0.0-experimental-5ac2a3c

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

@@ -6,19 +6,23 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
     class="np-flow-navigation d-flex align-items-center justify-content-center p-y-3 np-flow-navigation--border-bottom"
   >
     <div
-      class="np-flow-header d-flex flex-wrap align-items-center justify-content-between flex__item--12 np-flow-navigation__content p-x-3 np-flow-navigation--xs-max"
+      class="np-flow-header d-flex flex-wrap align-items-center np-flow-navigation__content p-x-3 np-flow-navigation--xs-max"
     >
-      <div>
-        BackButton
-      </div>
       <div
-        class="m-x-1"
-        data-testid="activeLabel-1"
+        class="np-flow-header__left flex__item--8"
       >
-        AnimatedLabel
+        <div>
+          BackButton
+          <div
+            class="m-x-1"
+            data-testid="activeLabel-0"
+          >
+            AnimatedLabel
+          </div>
+        </div>
       </div>
       <div
-        class="d-flex align-items-center"
+        class="align-items-center d-flex np-flow-header__right justify-content-end flex__item--4 "
       >
         <div
           class="tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
@@ -30,7 +34,7 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
           </div>
         </div>
         <span
-          class="m-x-1"
+          class="separator"
         />
         <button
           aria-label="Close"
@@ -118,16 +122,20 @@ exports[`FlowNavigation renders as expected 1`] = `
     class="np-flow-navigation d-flex align-items-center justify-content-center p-y-3 np-flow-navigation--border-bottom"
   >
     <div
-      class="np-flow-header d-flex flex-wrap align-items-center justify-content-between flex__item--12 np-flow-navigation__content p-x-3 np-flow-navigation--sm np-flow-navigation--lg"
+      class="np-flow-header d-flex flex-wrap align-items-center np-flow-navigation__content p-x-3 np-flow-navigation--sm np-flow-navigation--lg"
     >
-      <img
-        alt="logo"
-        height="24"
-        src="logo.svg"
-        width="138"
-      />
       <div
-        class="d-flex align-items-center order-2"
+        class="np-flow-header__left"
+      >
+        <img
+          alt="logo"
+          height="24"
+          src="logo.svg"
+          width="138"
+        />
+      </div>
+      <div
+        class="align-items-center d-flex np-flow-header__right justify-content-end order-2"
       >
         <div
           class="tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
@@ -139,7 +147,7 @@ exports[`FlowNavigation renders as expected 1`] = `
           </div>
         </div>
         <span
-          class="m-x-1"
+          class="separator"
         />
         <button
           aria-label="Close"

package/src/flowNavigation/animatedLabel/AnimatedLabel.css

@@ -1 +1 @@
-.np-animated-label{height:24px;overflow:hidden;padding-top:1px;position:relative}.np-animated-label>*{height:0;opacity:0;position:absolute;transform:translateX(-8px);transition:all .3s ease-in}.np-animated-label--in{height:auto;opacity:1;position:relative;top:auto;transform:translateX(0);transition:all .3s ease-in .3s}
+.np-animated-label{height:24px;overflow:hidden;padding-top:1px;position:relative}.np-animated-label>*{height:0;opacity:0;position:absolute;transform:translateX(-8px);transition:all .3s ease-in}.np-animated-label--in{height:auto;opacity:1;position:relative;top:auto;transform:translateX(0);transition:all .3s ease-in .3s}.np-animated-label--out{position:relative;top:-24px;transform:translateX(8px)}

package/src/flowNavigation/animatedLabel/AnimatedLabel.less

@@ -28,4 +28,10 @@
     transform: translateX(0);
     transition: all @transition-duration ease-in @transition-duration;
   }
+
+  &--out {
+    position: relative;
+    top: -@label-height;
+    transform: translateX(@slide-length);
+  }
 }

package/src/flowNavigation/animatedLabel/AnimatedLabel.spec.js

@@ -14,6 +14,12 @@ describe('AnimatedLabel', () => {
     expect(container).toMatchSnapshot();
   });
 
+  it('renders aria-label if provided', () => {
+    render(<AnimatedLabel {...props} aria-label="hello" />);
+    const checkbox = screen.getByLabelText('hello');
+    expect(checkbox).toBeInTheDocument();
+  });
+
   it('renders only one label with class in', () => {
     const { container } = render(<AnimatedLabel {...props} />);
     expect(screen.getByText(props.labels[0])).toHaveClass('np-animated-label--in');
@@ -22,33 +28,41 @@ describe('AnimatedLabel', () => {
 
   it('renders only one label with class out', () => {
     const { container } = render(<AnimatedLabel {...props} />);
-    expect(screen.getByText(props.labels[1])).not.toHaveClass('np-animated-label--in');
-    expect(container.querySelectorAll('.np-animated-label--in')).toHaveLength(1);
+    expect(screen.getByText(props.labels[1])).toHaveClass('np-animated-label--out');
+    expect(container.querySelectorAll('.np-animated-label--out')).toHaveLength(1);
   });
 
   it('when activeLabel increase it switches class accordingly', () => {
     const { rerender } = render(<AnimatedLabel {...props} />);
     expect(screen.getByText(props.labels[0])).toHaveClass('np-animated-label--in');
-    expect(screen.getByText(props.labels[1])).not.toHaveClass('np-animated-label--in');
+    expect(screen.getByText(props.labels[1])).toHaveClass('np-animated-label--out');
+
+    expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--out');
     expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--in');
 
     rerender(<AnimatedLabel {...props} activeLabel={1} />);
 
+    expect(screen.getByText(props.labels[0])).not.toHaveClass('np-animated-label--out');
     expect(screen.getByText(props.labels[0])).not.toHaveClass('np-animated-label--in');
+
     expect(screen.getByText(props.labels[1])).toHaveClass('np-animated-label--in');
-    expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--in');
+    expect(screen.getByText(props.labels[2])).toHaveClass('np-animated-label--out');
   });
 
   it('when activeLabel decrease it switches class accordingly', () => {
     const { rerender } = render(<AnimatedLabel {...props} activeLabel={1} />);
-    expect(screen.getByText(props.labels[0])).not.toHaveClass('np-animated-label--in');
     expect(screen.getByText(props.labels[1])).toHaveClass('np-animated-label--in');
-    expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--in');
+    expect(screen.getByText(props.labels[2])).toHaveClass('np-animated-label--out');
+
+    expect(screen.getByText(props.labels[0])).not.toHaveClass('np-animated-label--out');
+    expect(screen.getByText(props.labels[0])).not.toHaveClass('np-animated-label--in');
 
     rerender(<AnimatedLabel {...props} activeLabel={0} />);
 
     expect(screen.getByText(props.labels[0])).toHaveClass('np-animated-label--in');
-    expect(screen.getByText(props.labels[1])).not.toHaveClass('np-animated-label--in');
+    expect(screen.getByText(props.labels[1])).toHaveClass('np-animated-label--out');
+
+    expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--out');
     expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--in');
   });
 });

package/src/flowNavigation/animatedLabel/AnimatedLabel.story.js

@@ -0,0 +1,22 @@
+import { select } from '@storybook/addon-knobs';
+
+import AnimatedLabel from './AnimatedLabel';
+
+export default {
+  component: AnimatedLabel,
+  title: 'Internal/AnimatedLabel',
+};
+
+export const Basic = () => {
+  const labels = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+  const activeLabel = select('active label', labels, 10);
+
+  return (
+    <div style={{ width: '120px' }} className="p-a-1">
+      <AnimatedLabel
+        labels={labels.map((element) => `label-${element}`)}
+        activeLabel={activeLabel}
+      />
+    </div>
+  );
+};

package/src/flowNavigation/animatedLabel/AnimatedLabel.tsx

@@ -1,32 +1,41 @@
 import classNames from 'classnames';
 import React from 'react';
 
-import Body from '../../body';
-import { Typography } from '../../common';
-
 export interface AnimatedLabelProps {
   activeLabel: number;
   className?: string;
   labels: React.ReactNode[];
+  'aria-label': string;
 }
 
-const AnimatedLabel = ({ activeLabel, className, labels }: AnimatedLabelProps) => {
+const AnimatedLabel = ({
+  activeLabel,
+  className,
+  labels,
+  'aria-label': ariaLabel,
+}: AnimatedLabelProps) => {
+  const numberLabels = labels.length - 1;
+
   return (
-    <Body type={Typography.BODY_LARGE_BOLD} className={classNames('np-animated-label', className)}>
+    <div
+      aria-label={ariaLabel}
+      className={classNames('np-animated-label', 'np-text-body-large-bold', className)}
+    >
       {labels.map((label, index) => {
         const nextLabel = index - 1;
         return (
           <div
             key={nextLabel}
-            className={classNames('text-xs-center', {
-              'np-animated-label--in text-ellipsis': index === activeLabel,
+            className={classNames('text-xs-left', {
+              'np-animated-label--in': index === activeLabel,
+              'np-animated-label--out': nextLabel === activeLabel && nextLabel !== numberLabels,
             })}
           >
             {label}
           </div>
         );
       })}
-    </Body>
+    </div>
   );
 };
 

package/src/flowNavigation/animatedLabel/__snapshots__/AnimatedLabel.spec.js.snap

@@ -3,20 +3,20 @@
 exports[`AnimatedLabel renders all labels 1`] = `
 <div>
   <div
-    class="np-text-body-large-bold np-animated-label"
+    class="np-animated-label np-text-body-large-bold"
   >
     <div
-      class="text-xs-center np-animated-label--in text-ellipsis"
+      class="text-xs-left np-animated-label--in"
     >
       label1
     </div>
     <div
-      class="text-xs-center"
+      class="text-xs-left np-animated-label--out"
     >
       label2
     </div>
     <div
-      class="text-xs-center"
+      class="text-xs-left"
     >
       label3
     </div>

package/src/flowNavigation/backButton/BackButton.js

@@ -2,23 +2,18 @@ import { ArrowLeft as ArrowLeftIcon } from '@transferwise/icons';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
-import Avatar, { AvatarType } from '../../avatar';
-
-const BackButton = ({ className, onClick, 'aria-label': ariaLabel }) => (
-  <Avatar type={AvatarType.ICON} size={40}>
-    <button
-      type="button"
-      aria-label={ariaLabel}
-      className={classNames('np-back-button', 'btn-unstyled', className)}
-      onClick={onClick}
-    >
-      <ArrowLeftIcon size={24} />
-    </button>
-  </Avatar>
+const BackButton = ({ label, className, onClick }) => (
+  <button
+    type="button"
+    className={classNames('np-back-button', 'align-items-center', 'btn-unstyled', className)}
+    onClick={onClick}
+  >
+    <ArrowLeftIcon size={24} />
+    {label}
+  </button>
 );
 
 BackButton.propTypes = {
-  'aria-label': PropTypes.string.isRequired,
   className: PropTypes.string,
   label: PropTypes.element,
   onClick: PropTypes.func,

package/src/flowNavigation/backButton/BackButton.spec.js

@@ -1,5 +1,5 @@
-import { render } from '../../test-utils';
-import messages from '../FlowNavigation.messages';
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
 
 import BackButton from '.';
 
@@ -7,7 +7,6 @@ const props = {
   label: <>label</>,
   className: 'className',
   onClick: jest.fn(),
-  'aria-label': messages.back.defaultMessage,
 };
 describe('BackButton', () => {
   it(`renders as expected`, () => {

package/src/flowNavigation/backButton/__snapshots__/BackButton.spec.js.snap

@@ -2,36 +2,29 @@
 
 exports[`BackButton renders as expected 1`] = `
 <div>
-  <div
-    class="tw-avatar tw-avatar--40 tw-avatar--icon"
+  <button
+    class="np-back-button align-items-center btn-unstyled className"
+    type="button"
   >
-    <div
-      class="tw-avatar__content"
+    <span
+      aria-hidden="true"
+      class="tw-icon tw-icon-arrow-left "
+      data-testid="arrow-left-icon"
+      role="presentation"
     >
-      <button
-        class="np-back-button btn-unstyled className"
-        type="button"
+      <svg
+        fill="currentColor"
+        focusable="false"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
       >
-        <span
-          aria-hidden="true"
-          class="tw-icon tw-icon-arrow-left "
-          data-testid="arrow-left-icon"
-          role="presentation"
-        >
-          <svg
-            fill="currentColor"
-            focusable="false"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-          >
-            <path
-              d="M22.286 11.316H4.629l7.114-7.114-1.2-1.2-8.572 8.571a.829.829 0 0 0 0 1.2l8.572 8.572 1.2-1.2-7.114-7.114h17.657v-1.715Z"
-            />
-          </svg>
-        </span>
-      </button>
-    </div>
-  </div>
+        <path
+          d="M22.286 11.316H4.629l7.114-7.114-1.2-1.2-8.572 8.571a.829.829 0 0 0 0 1.2l8.572 8.572 1.2-1.2-7.114-7.114h17.657v-1.715Z"
+        />
+      </svg>
+    </span>
+    label
+  </button>
 </div>
 `;

package/src/header/Header.css

@@ -1 +1 @@
-.np-header{align-items:flex-end;border-bottom:1px solid #0000001a;border-bottom:1px solid var(--color-border-neutral);display:flex;justify-content:space-between;margin-bottom:8px;margin-bottom:var(--size-8);max-width:100%;padding:8px 0;padding:var(--size-8) 0}.np-header__title{color:#5d7079;color:var(--color-content-secondary)}.np-theme-personal .np-header{-moz-column-gap:24px;column-gap:24px;-moz-column-gap:var(--size-24);column-gap:var(--size-24)}.np-theme-personal .np-header__button{margin-inline:-16px;margin-inline:calc(var(--size-16)*-1);margin-bottom:-4px;margin-bottom:calc(var(--size-4)*-1)}
+.np-header{align-items:flex-end;border-bottom:1px solid #0000001a;border-bottom:1px solid var(--color-border-neutral);display:flex;justify-content:space-between;margin-bottom:8px;margin-bottom:var(--size-8);max-width:100%;padding:8px 0;padding:var(--size-8) 0}.np-header__title{color:#5d7079;color:var(--color-content-secondary)}.np-theme-personal .np-header{-moz-column-gap:24px;column-gap:24px;-moz-column-gap:var(--size-24);column-gap:var(--size-24)}.np-theme-personal .np-header__button{margin-inline:-16px;margin-inline:calc(var(--size-16)*-1);margin-bottom:-4px;margin-bottom:calc(var(--size-4)*-1)}.np-header legend{border-bottom:none;padding:0}

package/src/header/Header.less

@@ -19,4 +19,9 @@
       margin-bottom: calc(var(--size-4) * -1);
     }
   }
+
+  legend {
+    padding: 0;
+    border-bottom: none;
+  }
 }

package/src/header/Header.tsx

@@ -25,7 +25,7 @@ export type HeaderProps = CommonProps & {
    *
    * @default "h5"
    */
-  as?: Heading;
+  as?: Heading | 'legend';
   title: string;
 };
 
@@ -66,12 +66,31 @@ const HeaderAction = ({ action }: { action: ButtonActionProps | LinkActionProps
  *
  */
 export const Header = ({ action, as = 'h5', title, className }: HeaderProps) => {
+  if (!action) {
+    return (
+      <Title
+        as={as}
+        type={Typography.TITLE_GROUP}
+        className={classNames('np-header', 'np-header__title', className)}
+      >
+        {title}
+      </Title>
+    );
+  }
+
+  if (as === 'legend') {
+    // eslint-disable-next-line no-console
+    console.warn(
+      'Legends should be the first child in a fieldset, and this is not possible when including an action',
+    );
+  }
+
   return (
     <div className={classNames('np-header', className)}>
       <Title as={as} type={Typography.TITLE_GROUP} className="np-header__title">
         {title}
       </Title>
-      {action && <HeaderAction action={action} />}
+      <HeaderAction action={action} />
     </div>
   );
 };