@transferwise/components 0.0.0-experimental-dad811d → 0.0.0-experimental-36cf7cb

package/src/card/Card.js

@@ -18,7 +18,6 @@ const Card = forwardRef((props, reference) => {
     children,
     onClick,
     icon,
-    badgeContentIcon,
     id,
     className,
     ...rest
@@ -41,7 +40,6 @@ const Card = forwardRef((props, reference) => {
         as={children ? 'button' : 'div'}
         className={classNames('np-card__button')}
         media={icon}
-        badgeContentIcon={badgeContentIcon}
         title={title}
         content={details}
         showMediaAtAllSizes
@@ -72,7 +70,6 @@ Card.propTypes = {
   details: PropTypes.node.isRequired,
   onClick: requiredIf(PropTypes.func, hasChildren),
   icon: PropTypes.node,
-  badgeContentIcon: PropTypes.node,
   children: PropTypes.node,
   id: PropTypes.string,
   className: PropTypes.string,

package/src/card/Card.story.js

@@ -2,8 +2,6 @@ import { select, text } from '@storybook/addon-knobs';
 import { FastFlag as FastFlagIcon } from '@transferwise/icons';
 import { useState } from 'react';
 
-import { StatusIcon, Sentiment } from '..';
-
 import Card from '.';
 
 export default {
@@ -20,11 +18,10 @@ const Template = (props) => {
   return (
     <Card
       as={elementType}
-      title={props.title || title}
+      title={title}
       details={details}
       isExpanded={props.isExpanded}
       icon={props.icon}
-      badgeContentIcon={props.badgeContentIcon}
       onClick={props.onClick}
     >
       {content}
@@ -51,7 +48,6 @@ export const Multiple = () => {
   return (
     <>
       <Template
-        title="Expanded Card"
         icon={<FastFlagIcon />}
         isExpanded={expandedCardIndex === 0}
         onClick={() => handleOnCardClick(0)}
@@ -61,18 +57,7 @@ export const Multiple = () => {
         isExpanded={expandedCardIndex === 1}
         onClick={() => handleOnCardClick(1)}
       />
-      <Template
-        icon={<FastFlagIcon />}
-        badgeContentIcon={<StatusIcon size="sm" sentiment={Sentiment.WARNING} />}
-        title="A card with badgeContentIcon"
-        isExpanded={expandedCardIndex === 2}
-        onClick={() => handleOnCardClick(2)}
-      />
-      <Template
-        title="A card without media"
-        isExpanded={expandedCardIndex === 3}
-        onClick={() => handleOnCardClick(3)}
-      />
+      <Template isExpanded={expandedCardIndex === 2} onClick={() => handleOnCardClick(2)} />
     </>
   );
 };

package/src/common/Option/Option.spec.js

@@ -68,13 +68,6 @@ describe('Option', () => {
     expect(circleContentIsElement(<Icon />)).toBe(true);
   });
 
-  it('has passed badgeContentIcon to render a badge with content icon', () => {
-    const Icon = () => <svg />;
-    component.setProps({ media: <Icon />, badgeContentIcon: <Icon /> });
-
-    expect(component.find('Badge').exists()).toBe(true);
-  });
-
   it('does not render the circle content with circle-inverse class when inverseMediaCircle is set to false', () => {
     expect(circleContentHasInverseClass()).toBe(true);
     component.setProps({ inverseMediaCircle: false });

package/src/common/Option/Option.tsx

@@ -1,15 +1,13 @@
 import classNames from 'classnames';
 import { MouseEvent, forwardRef, HTMLAttributes, ReactNode, ElementType } from 'react';
 
-import Avatar from '../../avatar';
-import Badge from '../../badge';
 import Body from '../../body';
 import { LinkProps } from '../commonProps';
+import { Typography } from '../propsValues/typography';
 
 export interface BaseOptionProps extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'content'> {
   'aria-label'?: string;
   media?: ReactNode;
-  badgeContentIcon?: ReactNode;
   name?: string;
   htmlFor?: string;
   title: ReactNode;
@@ -39,7 +37,6 @@ const Option = forwardRef<ReferenceType, OptionProps>(
   (
     {
       media = '',
-      badgeContentIcon = '',
       title,
       content,
       as: component,
@@ -74,11 +71,7 @@ const Option = forwardRef<ReferenceType, OptionProps>(
         <div className="media">
           {media && (
             <div className="media-left">
-              {badgeContentIcon ? (
-                <Badge badge={badgeContentIcon}>
-                  <Avatar type="icon">{media}</Avatar>
-                </Badge>
-              ) : showMediaCircle ? (
+              {showMediaCircle ? (
                 <div
                   className={classNames('circle circle-sm text-primary', {
                     'circle-inverse': inverseMediaCircle,

package/src/common/commonProps.ts

@@ -14,7 +14,7 @@ export type AriaLabelProperty = {
 
 export type LinkProps = {
   href: string;
-  target?: '_blank' | '_self' | '_parent' | '_top';
+  target?: React.HTMLAttributeAnchorTarget;
   onClick?: React.MouseEventHandler<HTMLElement>;
 };
 

package/src/dateInput/index.ts

@@ -1,3 +1,2 @@
-import DateInput from './DateInput';
-
-export default DateInput;
+export { default } from './DateInput';
+export type { DateInputProps } from './DateInput';

package/src/dateLookup/DateLookup.js

@@ -240,10 +240,20 @@ class DateLookup extends PureComponent {
   render() {
     const { selectedDate, open } = this.state;
 
-    const { size, placeholder, label, monthFormat, disabled, clearable, value } = this.props;
+    const {
+      size,
+      placeholder,
+      label,
+      'aria-labelledby': ariaLabelledBy,
+      monthFormat,
+      disabled,
+      clearable,
+      value,
+    } = this.props;
     return (
       <div // eslint-disable-line jsx-a11y/no-static-element-interactions
         ref={this.element}
+        aria-labelledby={ariaLabelledBy}
         className="input-group"
         onKeyDown={this.handleKeyDown}
       >
@@ -273,6 +283,7 @@ DateLookup.propTypes = {
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
   placeholder: PropTypes.string,
   label: PropTypes.string,
+  'aria-labelledby': PropTypes.string,
   monthFormat: PropTypes.oneOf(['long', 'short']),
   disabled: PropTypes.bool,
   onChange: PropTypes.func.isRequired,

package/src/dateLookup/DateLookup.testingLibrary.spec.js

@@ -32,12 +32,19 @@ describe('DateLookup (events)', () => {
       size: 'lg',
       placeholder: 'Asd..',
       label: 'label',
+      'aria-labelledby': 'prioritized-label',
       onChange: jest.fn(),
       onClick: jest.fn(),
       disabled: false,
       clearable: false,
     };
-    ({ container } = render(<DateLookup {...props} />));
+    ({ container } = render(
+      <>
+        {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+        <label id="prioritized-label">Prioritized label</label>
+        <DateLookup {...props} />
+      </>,
+    ));
   });
 
   afterEach(() => {
@@ -114,6 +121,10 @@ describe('DateLookup (events)', () => {
     expect(screen.getByRole('button', { name: /selected day/i })).toBeInTheDocument();
   });
 
+  it('supports custom `aria-labelledby` attribute', () => {
+    expect(screen.getByLabelText('Prioritized label')).toHaveClass('input-group');
+  });
+
   describe('when is clearable', () => {
     beforeEach(() => {
       props = { value: date, onChange: jest.fn(), clearable: true };

package/src/decision/Decision.css

@@ -1,93 +1,17 @@
 .np-decision .decision {
   display: flex;
 }
-.np-decision__tile--small + .np-decision__tile--small {
-  margin-left: 16px;
-  margin-left: var(--size-16);
-}
-[dir="rtl"] .np-decision__tile--small + .np-decision__tile--small {
-  margin-right: 16px;
-  margin-right: var(--size-16);
-  margin-left: 0;
-  margin-left: initial;
-}
-.np-decision.np-decision--grid .np-decision__tile--small {
-  margin-left: 0;
-  margin-bottom: 16px !important;
-  margin-bottom: var(--size-16) !important;
-}
-[dir="rtl"] .np-decision.np-decision--grid .np-decision__tile--small {
-  margin-right: 0;
-  margin-left: 0;
-  margin-left: initial;
-}
-.np-decision.np-decision--grid .np-decision__tile--small:not(:last-of-type) {
-  margin-right: 16px;
-  margin-right: var(--size-16);
-}
-[dir="rtl"] .np-decision.np-decision--grid .np-decision__tile--small:not(:last-of-type) {
-  margin-left: 16px;
-  margin-left: var(--size-16);
-  margin-right: 0;
-  margin-right: initial;
-}
-.np-decision__tile + .np-decision__tile {
-  margin-left: 24px;
-  margin-left: var(--size-24);
-}
-[dir="rtl"] .np-decision__tile + .np-decision__tile {
-  margin-right: 24px;
-  margin-right: var(--size-24);
-  margin-left: 0;
-  margin-left: initial;
-}
-.np-decision .np-text-title-subsection {
-  margin-bottom: 0;
-}
 .np-decision__tile--small .np-text-title-subsection {
   font-size: 1rem;
   font-size: var(--font-size-16);
   line-height: 1.2;
   line-height: var(--line-height-title);
-  margin-bottom: 0;
-}
-.np-decision.np-decision--grid .np-decision__tile {
-  margin-left: 0;
-  margin-bottom: 24px !important;
-  margin-bottom: var(--size-24) !important;
-}
-[dir="rtl"] .np-decision.np-decision--grid .np-decision__tile {
-  margin-right: 0;
-  margin-left: 0;
-  margin-left: initial;
-}
-.np-decision.np-decision--grid .np-decision__tile:not(:last-of-type) {
-  margin-right: 24px;
-  margin-right: var(--size-24);
-}
-[dir="rtl"] .np-decision.np-decision--grid .np-decision__tile:not(:last-of-type) {
-  margin-left: 24px;
-  margin-left: var(--size-24);
-  margin-right: 0;
-  margin-right: initial;
-}
-.np-decision.np-decision--grid .np-size-swapper {
-  margin-right: calc(0 - 24px);
-  margin-right: calc(0 - var(--size-24));
-}
-[dir="rtl"] .np-decision.np-decision--grid .np-size-swapper {
-  margin-left: calc(0 - 24px);
-  margin-left: calc(0 - var(--size-24));
-  margin-right: 0;
-  margin-right: initial;
 }
-.np-decision.np-decision--grid.np-decision--small .np-size-swapper {
-  margin-right: calc(0 - 16px);
-  margin-right: calc(0 - var(--size-16));
+.np-decision:not(.flex-column) {
+  gap: 24px;
+  gap: var(--size-24);
 }
-[dir="rtl"] .np-decision.np-decision--grid.np-decision--small .np-size-swapper {
-  margin-left: calc(0 - 16px);
-  margin-left: calc(0 - var(--size-16));
-  margin-right: 0;
-  margin-right: initial;
+.np-decision:not(.flex-column).np-decision--small {
+  gap: 16px;
+  gap: var(--size-16);
 }

package/src/decision/Decision.less

@@ -5,56 +5,18 @@
     display: flex;
   }
 
-  &__tile--small + &__tile--small {
-    .margin(left, var(--size-16));
-  }
-
-  &.np-decision--grid &__tile--small {
-    .margin(left, 0);
-
-    margin-bottom: var(--size-16) !important;
-
-    &:not(:last-of-type) {
-      .margin(right, var(--size-16));
-    }
-  }
-
-  &__tile + &__tile {
-    .margin(left, var(--size-24));
-  }
-
-  .np-text-title-subsection {
-    margin-bottom: 0;
-  }
-
   &__tile--small {
     .np-text-title-subsection {
       font-size: var(--font-size-16);
       line-height: var(--line-height-title);
-      margin-bottom: 0;
     }
   }
 
-  &.np-decision--grid &__tile {
-
-    .margin(left, 0);
-
-    margin-bottom: var(--size-24) !important;
-
-    &:not(:last-of-type) {
-      .margin(right, var(--size-24));
-    }
-  }
-
-  &.np-decision--grid {
-    .np-size-swapper {
-      .margin(right, calc(0 - var(--size-24)));
-    }
+  &:not(.flex-column) {
+    gap: var(--size-24);
 
     &.np-decision--small {
-      .np-size-swapper {
-        .margin(right, calc(0 - var(--size-16)));
-      }
+      gap: var(--size-16);
     }
   }
 }

package/src/decision/Decision.spec.js

@@ -3,16 +3,16 @@ import '@testing-library/jest-dom';
 
 import Avatar from '../avatar';
 import { Breakpoint, Size } from '../common';
-import { render, fireEvent } from '../test-utils';
+import { mockMatchMedia } from '../mocks';
+import { render, fireEvent, screen } from '../test-utils';
 
-import { Presentation, Type } from './decisionEnums';
-
-import Decision from '.';
+import Decision, { DecisionPresentation, DecisionType } from '.';
 
 jest.mock('lodash.throttle', () => jest.fn((fn) => fn));
+mockMatchMedia(jest);
 
 describe('Decision', () => {
-  const props = {
+  const commonProps = {
     options: [
       {
         media: {
@@ -25,112 +25,107 @@ describe('Decision', () => {
         onClick: jest.fn(),
       },
     ],
-    presentation: Presentation.LIST_BLOCK,
-    type: Type.NAVIGATION,
+    presentation: DecisionPresentation.LIST_BLOCK,
+    type: DecisionType.NAVIGATION,
   };
 
+  const initialInnerWidth = window.innerWidth;
   const resetClientWidth = (width) => {
-    Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
-      configurable: true,
-      value: width,
-    });
+    window.innerWidth = width;
   };
 
   afterAll(() => {
-    const originalClientWidth = Object.getOwnPropertyDescriptor(
-      HTMLElement.prototype,
-      'clientWidth',
-    );
-
-    Object.defineProperty(HTMLElement.prototype, 'clientWidth', originalClientWidth);
+    window.innerWidth = initialInnerWidth;
   });
 
-  let container;
   beforeEach(() => {
     resetClientWidth(Breakpoint.EXTRA_SMALL - 1);
   });
 
-  describe(`when presentation is ${Presentation.LIST_BLOCK}`, () => {
-    beforeEach(() => {
-      ({ container } = render(<Decision {...props} />));
-    });
+  describe(`when presentation is ${DecisionPresentation.LIST_BLOCK}`, () => {
+    const props = { ...commonProps };
 
     it('renders only Navigation Option before first breakpoint', () => {
-      expect(getNavigationOption()).toBeInTheDocument();
-      expect(getTile()).not.toBeInTheDocument();
+      const { container } = render(<Decision {...props} />);
+
+      expect(getNavigationOption(container)).toBeInTheDocument();
+      expect(getTile(container)).not.toBeInTheDocument();
     });
 
     it('renders only Tile after first breakpoint', () => {
       resetClientWidth(Breakpoint.SMALL);
-      fireEvent(window, new Event('resize'));
+      const { container } = render(<Decision {...props} />);
 
-      expect(getNavigationOption()).not.toBeInTheDocument();
-      expect(getTile()).toBeInTheDocument();
-      expect(getTile()).not.toHaveClass('np-tile--small');
+      expect(getNavigationOption(container)).not.toBeInTheDocument();
+      expect(getTile(container)).toBeInTheDocument();
+      expect(getTile(container)).not.toHaveClass('np-tile--small');
     });
   });
 
-  describe(`when presentation is ${Presentation.LIST_BLOCK_GRID}`, () => {
-    beforeEach(() => {
-      ({ container } = render(<Decision {...props} presentation={Presentation.LIST_BLOCK_GRID} />));
-    });
+  describe(`when presentation is ${DecisionPresentation.LIST_BLOCK_GRID}`, () => {
+    const props = { ...commonProps, presentation: DecisionPresentation.LIST_BLOCK_GRID };
 
     it('renders only Navigation Option before first breakpoint', () => {
-      expect(getNavigationOption()).toBeInTheDocument();
-      expect(getTile()).not.toBeInTheDocument();
+      const { container } = render(<Decision {...props} />);
+
+      expect(getNavigationOption(container)).toBeInTheDocument();
+      expect(getTile(container)).not.toBeInTheDocument();
     });
 
     it('renders only Tile after first breakpoint', () => {
       resetClientWidth(Breakpoint.SMALL);
-      fireEvent(window, new Event('resize'));
+      const { container } = render(<Decision {...props} />);
 
-      expect(getNavigationOption()).not.toBeInTheDocument();
-      expect(getTile()).toBeInTheDocument();
-      expect(getTile()).not.toHaveClass('np-tile--small');
+      expect(getNavigationOption(container)).not.toBeInTheDocument();
+      expect(getTile(container)).toBeInTheDocument();
+      expect(getTile(container)).not.toHaveClass('np-tile--small');
     });
 
     it('renders container as a grid', () => {
       resetClientWidth(Breakpoint.SMALL);
-      fireEvent(window, new Event('resize'));
+      const { container } = render(<Decision {...props} />);
 
-      expect(container.querySelector('.np-decision')).toHaveClass('np-decision--grid');
-      expect(container.querySelector('.np-size-swapper')).toHaveClass('flex-wrap');
+      const decisionElement = container.querySelector('.np-decision');
+      expect(decisionElement).toHaveClass('np-decision--grid');
+      expect(decisionElement).toHaveClass('flex-wrap');
     });
   });
 
-  describe(`when presentation is ${Presentation.LIST_BLOCK} and size is Small`, () => {
-    beforeEach(() => {
-      ({ container } = render(
-        <Decision {...props} presentation={Presentation.LIST_BLOCK} size={Size.SMALL} />,
-      ));
-    });
+  describe(`when presentation is ${DecisionPresentation.LIST_BLOCK} and size is Small`, () => {
+    const props = {
+      ...commonProps,
+      presentation: DecisionPresentation.LIST_BLOCK,
+      size: Size.SMALL,
+    };
 
     it('renders only Navigation Option before breakpoint', () => {
-      expect(getNavigationOption()).toBeInTheDocument();
-      expect(getTile()).not.toBeInTheDocument();
+      const { container } = render(<Decision {...props} />);
+
+      expect(getNavigationOption(container)).toBeInTheDocument();
+      expect(getTile(container)).not.toBeInTheDocument();
     });
 
     it('renders Small Tile after breakpoint', () => {
       resetClientWidth(Breakpoint.EXTRA_SMALL);
-      fireEvent(window, new Event('resize'));
+      const { container } = render(<Decision {...props} />);
 
-      expect(getNavigationOption()).not.toBeInTheDocument();
-      expect(getTile()).toBeInTheDocument();
-      expect(getTile()).toHaveClass('np-tile--small');
+      expect(getNavigationOption(container)).not.toBeInTheDocument();
+      expect(getTile(container)).toBeInTheDocument();
+      expect(getTile(container)).toHaveClass('np-tile--small');
     });
   });
 
-  describe(`when presentation is ${Presentation.LIST}`, () => {
-    beforeEach(() => {
-      ({ container } = render(<Decision {...props} presentation={Presentation.LIST} />));
-    });
+  describe(`when presentation is ${DecisionPresentation.LIST}`, () => {
+    const props = { ...commonProps, presentation: DecisionPresentation.LIST };
 
     it('renders Navigation Option before breakpoint', () => {
-      expect(getNavigationOption()).toBeInTheDocument();
-      expect(getTile()).not.toBeInTheDocument();
+      const { container } = render(<Decision {...props} />);
+
+      expect(getNavigationOption(container)).toBeInTheDocument();
+      expect(getTile(container)).not.toBeInTheDocument();
     });
   });
 
-  const getNavigationOption = () => container.querySelector('.np-navigation-option');
-  const getTile = () => container.querySelector('.np-tile');
+  const getNavigationOption = (container) => container.querySelector('.np-navigation-option');
+  const getTile = (container) => container.querySelector('.np-tile');
 });

package/src/decision/{Decision.story.js → Decision.story.tsx}

@@ -21,7 +21,7 @@ export const Basic = () => {
   const disabled = boolean('disabled', false);
   const showMediaCircleInList = boolean('showMediaCircleInList', true);
   const isContainerAligned = boolean('isContainerAligned', false);
-  const size = select('size', [Size.MEDIUM, Size.SMALL]);
+  const size = select('size', [Size.MEDIUM, Size.SMALL], Size.MEDIUM);
 
   return (
     <>
@@ -33,7 +33,7 @@ export const Basic = () => {
             href: '#href1',
             disabled,
             media: {
-              block: <Illustration name="globe" alt="" disableMargin />,
+              block: <Illustration name="globe" alt="" disablePadding />,
               list: (
                 <Avatar size="md" type="initials">
                   HM
@@ -49,7 +49,7 @@ export const Basic = () => {
             disabled,
             href: '#href2',
             media: {
-              block: <Illustration name="confetti" alt="" disableMargin />,
+              block: <Illustration name="confetti" alt="" disablePadding />,
               list: (
                 <Avatar size="md" type="initials">
                   HM
@@ -61,7 +61,7 @@ export const Basic = () => {
           {
             description: "I'm disabled and don't require an onClick or href.",
             media: {
-              block: <Illustration name="briefcase" alt="" disableMargin />,
+              block: <Illustration name="briefcase" alt="" disablePadding />,
               list: (
                 <img
                   src="https://wise.com/public-resources/assets/illustrations/business_account_web_small.svg"
@@ -91,7 +91,7 @@ export const grid = () => {
     DecisionPresentation.LIST_BLOCK_GRID,
   );
   const disabled = boolean('disabled', false);
-  const size = select('size', [Size.MEDIUM, Size.SMALL]);
+  const size = select('size', [Size.MEDIUM, Size.SMALL], Size.MEDIUM);
 
   return (
     <>