@transferwise/components 0.0.0-experimental-2b935a9 → 0.0.0-experimental-8eba5d3

package/src/logo/Logo.story.tsx

@@ -1,14 +1,11 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import Logo, { LogoType } from '.';
+import Logo from '.';
 
 export default {
   component: Logo,
   title: 'Content/Logo',
-  render: (args) => {
-    const type = args.type as LogoType;
-    const inverse = args.inverse as boolean;
-
+  render: ({ inverse, type }) => {
     return (
       <div className={`${inverse ? 'bg--dark' : ''} p-a-3`}>
         <Logo type={type} inverse={inverse} />
@@ -22,7 +19,7 @@ type Story = StoryObj<typeof Logo>;
 
 export const Basic: Story = {
   args: {
-    type: LogoType.WISE,
+    type: 'WISE',
     inverse: false,
   },
 };

package/src/logo/{Logo.js → Logo.tsx}

@@ -1,7 +1,5 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 
-import { LogoType } from './logoTypes';
 import { ReactComponent as LogoFlagInverse } from './svg/flag-inverse.svg';
 import { ReactComponent as LogoFlagPlatformInverse } from './svg/flag-platform-white.svg';
 import { ReactComponent as LogoFlagPlatform } from './svg/flag-platform.svg';
@@ -24,44 +22,36 @@ const svgPaths = {
   WISE_FLAG_PLATFORM_INVERSE: LogoFlagPlatformInverse,
 };
 
-const Logo = ({ className, inverse, type }) => {
+export enum LogoType {
+  WISE = 'WISE',
+  WISE_BUSINESS = 'WISE_BUSINESS',
+  WISE_PLATFORM = 'WISE_PLATFORM',
+}
+
+export interface LogoProps {
+  /** Extra classes applied to Logo */
+  className?: string;
+  /** If true, will use dark colours for dark on light theme */
+  inverse?: boolean;
+  /** What type of logo to display */
+  type?: `${LogoType}`;
+}
+
+const labelByType = {
+  WISE: 'Wise',
+  WISE_BUSINESS: 'Wise Business',
+  WISE_PLATFORM: 'Wise Platform',
+} satisfies Record<`${LogoType}`, string>;
+
+export default function Logo({ className, inverse, type = 'WISE' }: LogoProps) {
   const LogoSm =
-    svgPaths[
-      `WISE_FLAG${type === LogoType.WISE_PLATFORM ? '_PLATFORM' : ''}${inverse ? '_INVERSE' : ''}`
-    ];
+    svgPaths[`WISE_FLAG${type === 'WISE_PLATFORM' ? '_PLATFORM' : ''}${inverse ? '_INVERSE' : ''}`];
   const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];
 
   return (
-    <span
-      aria-label={
-        type === LogoType.WISE
-          ? 'Wise'
-          : 'Wise Business' | (type === LogoType.WISE_PLATFORM)
-            ? 'Wise Platform'
-            : 'Wise Business'
-      }
-      role="img"
-      className={classNames(className, 'np-logo')}
-    >
+    <span aria-label={labelByType[type]} role="img" className={classNames(className, 'np-logo')}>
       <LogoSm className="np-logo-svg np-logo-svg--size-sm" />
       <LogoMd className="np-logo-svg np-logo-svg--size-md" />
     </span>
   );
-};
-
-Logo.propTypes = {
-  /** Extra classes applied to Logo */
-  className: PropTypes.string,
-  /** If true, will use dark colours for dark on light theme */
-  inverse: PropTypes.bool,
-  /** What type of logo to display */
-  type: PropTypes.oneOf(['WISE', 'WISE_BUSINESS', 'WISE_PLATFORM']),
-};
-
-Logo.defaultProps = {
-  className: undefined,
-  inverse: false,
-  type: LogoType.WISE,
-};
-
-export default Logo;
+}

package/src/logo/index.ts

@@ -0,0 +1 @@
+export { default, LogoType } from './Logo';

package/src/tile/{Tile.tsx → Tile.js}

@@ -1,26 +1,11 @@
 import classNames from 'classnames';
+import PropTypes from 'prop-types';
 
 import Body from '../body';
 import { Size, Typography } from '../common';
 import Title from '../title';
 
-export interface TileProps {
-  /** Classes to apply to the Tile container */
-  className?: string;
-  description?: React.ReactNode;
-  disabled?: boolean;
-  href?: string;
-  target?: React.HTMLAttributeAnchorTarget;
-  /** Accepts only Avatar and images */
-  media: React.ReactNode;
-  /** Function called onClick or onKeyDown */
-  onClick?: (event?: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
-  /** The size applied to Tile */
-  size?: `${Size.SMALL | Size.MEDIUM}`;
-  title: React.ReactNode;
-}
-
-export default function Tile({
+export const Tile = ({
   className,
   description,
   disabled,
@@ -28,10 +13,10 @@ export default function Tile({
   target,
   media,
   onClick,
-  size = 'md',
+  size,
   title,
-}: TileProps) {
-  const isSmall = size === 'sm';
+}) => {
+  const isSmall = size === Size.SMALL;
   const Element = href ? 'a' : 'button';
 
   return (
@@ -51,13 +36,13 @@ export default function Tile({
       )}
       href={href}
       target={target}
-      onClick={disabled ? undefined : onClick}
+      onClick={disabled ? null : onClick}
       onKeyDown={
         disabled
-          ? undefined
+          ? null
           : ({ key }) => {
               if (key === 'Enter' || key === ' ') {
-                onClick?.();
+                onClick();
               }
             }
       }
@@ -73,4 +58,30 @@ export default function Tile({
       ) : null}
     </Element>
   );
-}
+};
+
+Tile.propTypes = {
+  /** Classes to apply to the Tile container */
+  className: PropTypes.string,
+  description: PropTypes.node,
+  disabled: PropTypes.bool,
+  href: PropTypes.string,
+  target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
+  /** Accepts only Avatar and images */
+  media: PropTypes.node.isRequired,
+  /** Function called onClick or onKeyDown */
+  onClick: PropTypes.func,
+  /** The size applied to Tile */
+  size: PropTypes.oneOf(['sm', 'md']),
+  title: PropTypes.node.isRequired,
+};
+
+Tile.defaultProps = {
+  className: '',
+  description: null,
+  disabled: false,
+  size: Size.MEDIUM,
+  target: undefined,
+};
+
+export default Tile;

package/src/tile/{Tile.spec.tsx → Tile.spec.js}

@@ -9,7 +9,7 @@ describe(Tile, () => {
     description: 'Receive money from friends and family like a local',
     href: '#href',
     media: <svg data-testid="illustration" />,
-    onClick,
+    onClick: () => onClick(),
     title: 'Receive money',
   };
 

package/build/types/logo/logoTypes.d.ts

@@ -1,6 +0,0 @@
-export declare enum LogoType {
-    WISE = "WISE",
-    WISE_BUSINESS = "WISE_BUSINESS",
-    WISE_PLATFORM = "WISE_PLATFORM"
-}
-//# sourceMappingURL=logoTypes.d.ts.map

package/build/types/logo/logoTypes.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"logoTypes.d.ts","sourceRoot":"","sources":["../../../src/logo/logoTypes.ts"],"names":[],"mappings":"AACA,oBAAY,QAAQ;IAClB,IAAI,SAAS;IACb,aAAa,kBAAkB;IAC/B,aAAa,kBAAkB;CAChC"}

package/src/checkbox/index.js

@@ -1,3 +0,0 @@
-import Checkbox from './Checkbox';
-
-export default Checkbox;

package/src/definitionList/DefinitionList.js

@@ -1,100 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-
-import ActionButton from '../actionButton';
-import { Layout } from '../common';
-
-const isLayoutHorizontal = (layout) =>
-  [
-    Layout.HORIZONTAL_LEFT_ALIGNED,
-    Layout.HORIZONTAL_RIGHT_ALIGNED,
-    Layout.HORIZONTAL_JUSTIFIED,
-  ].includes(layout);
-
-const getAlignmentClasses = (layout, action) => {
-  let classes = ['d-flex'];
-
-  if (action) {
-    if (isLayoutHorizontal(layout)) {
-      classes.push('align-items-center');
-    } else {
-      classes.push('align-items-start');
-    }
-  }
-
-  if (layout === Layout.HORIZONTAL_RIGHT_ALIGNED) {
-    classes.push('text-sm-right tw-definition-list--right-aligned-desktop');
-  } else {
-    classes.push('justify-content-between');
-  }
-
-  if (layout === Layout.HORIZONTAL_JUSTIFIED) {
-    classes.push('text-sm-justify');
-  }
-
-  return classes;
-};
-
-const DefinitionList = ({ definitions, layout, muted }) => (
-  <dl
-    className={classNames('tw-definition-list d-flex ', {
-      'text-muted': muted,
-      'flex-column': layout === Layout.VERTICAL_ONE_COLUMN,
-      'tw-definition-list--columns flex-column flex-row--sm': layout === Layout.VERTICAL_TWO_COLUMN,
-      'tw-definition-list--horizontal flex-column': isLayoutHorizontal(layout),
-    })}
-  >
-    {definitions
-      .filter((definition) => definition)
-      .map(({ action, title, value, key }) => (
-        <div key={key} className="tw-definition-list__item">
-          <dt>{title}</dt>
-          <dd className={classNames(...getAlignmentClasses(layout, action))}>
-            <div>{value}</div>
-            {action ? (
-              <div
-                className={classNames(
-                  isLayoutHorizontal(layout) ? 'p-l-2' : 'p-x-2',
-                  'tw-definition-list__action',
-                )}
-              >
-                <ActionButton className="tw-definition-list__button" onClick={action.onClick}>
-                  {action.label}
-                </ActionButton>
-              </div>
-            ) : null}
-          </dd>
-        </div>
-      ))}
-  </dl>
-);
-
-DefinitionList.propTypes = {
-  definitions: PropTypes.arrayOf(
-    PropTypes.shape({
-      action: PropTypes.shape({
-        label: PropTypes.string.isRequired,
-        onClick: PropTypes.func,
-      }),
-      title: PropTypes.node.isRequired,
-      value: PropTypes.node.isRequired,
-      key: PropTypes.string.isRequired,
-    }),
-  ),
-  layout: PropTypes.oneOf([
-    'VERTICAL_TWO_COLUMN',
-    'VERTICAL_ONE_COLUMN',
-    'HORIZONTAL_JUSTIFIED',
-    'HORIZONTAL_LEFT_ALIGNED',
-    'HORIZONTAL_RIGHT_ALIGNED',
-  ]),
-  muted: PropTypes.bool,
-};
-
-DefinitionList.defaultProps = {
-  definitions: [],
-  layout: Layout.VERTICAL_TWO_COLUMN,
-  muted: false,
-};
-
-export default DefinitionList;

package/src/definitionList/index.js

@@ -1 +0,0 @@
-export { default } from './DefinitionList';

package/src/logo/index.js

@@ -1,2 +0,0 @@
-export { LogoType } from './logoTypes';
-export { default } from './Logo';

package/src/logo/logoTypes.ts

@@ -1,6 +0,0 @@
-// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
-export enum LogoType {
-  WISE = 'WISE',
-  WISE_BUSINESS = 'WISE_BUSINESS',
-  WISE_PLATFORM = 'WISE_PLATFORM',
-}