@transferwise/components 0.0.0-experimental-9d9138b → 0.0.0-experimental-1fc511d

package/build/types/item/ItemNavigation.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ItemNavigation.d.ts","sourceRoot":"","sources":["../../../src/item/ItemNavigation.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAIrD,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,CAAC,CAAC;AAExE,eAAO,MAAM,UAAU,gBAAoC,mBAAmB,gCAQ7E,CAAC"}

package/build/types/item/index.d.ts

@@ -1,5 +0,0 @@
-export type { Props as ItemProps } from './Item';
-export type { ItemAdditionalInfoProps } from './ItemAdditionalInfo';
-export type { ItemCheckboxProps } from './ItemCheckbox';
-export { default } from './Item';
-//# sourceMappingURL=index.d.ts.map

package/build/types/item/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/item/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,QAAQ,CAAC;AACjD,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AACpE,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC"}

package/src/item/Item.css

@@ -1,89 +0,0 @@
-.item {
-  padding: 16px;
-  border-radius: 24px;
-  border-radius: var(--radius-large);
-  background-color: #ffffff;
-  background-color: var(--color-background-screen);
-  display: flex;
-  gap: 16px;
-  align-items: center;
-  flex-direction: row;
-  cursor: pointer;
-}
-.item.NonInteractive {
-  cursor: default;
-}
-.item:disabled {
-  opacity: 0.45;
-  mix-blend-mode: luminosity;
-}
-.item:hover {
-  background-color: var(--color-background-screen-hover);
-}
-.item:active {
-  background-color: var(--color-background-screen-active);
-}
-.item.active {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-}
-.item.active:hover {
-  background-color: var(--color-background-neutral-hover);
-}
-.item.active:active {
-  background-color: var(--color-background-neutral-active);
-}
-.item.inactive {
-  background-color: rgba(134, 167, 189, 0.025);
-  border: 1px dashed rgba(0,0,0,0.10196);
-  border: 1px dashed var(--color-border-neutral);
-}
-@supports (color: color-mix(in lch, red, blue)) {
-.item.inactive {
-  background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
-}
-}
-.item.inactive:hover {
-  background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
-}
-.item.inactive:active {
-  background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
-}
-.item-media {
-  flex: 0 0 auto;
-  align-items: flex-start;
-}
-.startValue {
-  flex: 1;
-}
-.endValue {
-  flex: 1;
-  text-align: end;
-}
-.endValue.positive {
-  color: var(--color-sentiment-positive) !important;
-}
-.endValue.negative {
-  color: var(--color-sentiment-negative) !important;
-}
-.endValue.positive .item-title {
-  color: var(--color-sentiment-positive) !important;
-}
-.endValue.negative .item-title {
-  color: var(--color-sentiment-negative) !important;
-}
-.endValue.strikethrough {
-  -webkit-text-decoration: line-through;
-  text-decoration: line-through;
-}
-.item-title {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.item-additionalInfo {
-  color: #768e9c;
-  color: var(--color-content-tertiary);
-}
-.item-action {
-  flex: 0 0 auto;
-}

package/src/item/Item.less

@@ -1,95 +0,0 @@
-.item {
-    padding: 16px;
-    border-radius: var(--radius-large);
-    background-color: var(--color-background-screen);
-    display: flex;
-    gap: 16px;
-    align-items: center;
-    flex-direction: row;
-    cursor: pointer;
-    
-    &.NonInteractive {
-        cursor: default;
-    }
-
-    &:disabled {
-        opacity: 0.45;
-        mix-blend-mode: luminosity;
-    }
-
-    &:hover {
-        background-color: var(--color-background-screen-hover);
-    }
-
-    &:active {
-        background-color: var(--color-background-screen-active);
-    }
-    // spotlight - improve naming
-    &.active {
-        background-color: var(--color-background-neutral);
-
-        &:hover {
-            background-color: var(--color-background-neutral-hover);
-        }
-        &:active {
-            background-color: var(--color-background-neutral-active);
-        }
-    }
-    &.inactive {
-        background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
-        border: 1px dashed var(--color-border-neutral);
-        
-        &:hover {
-            background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
-        }
-        &:active {
-            background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
-        }
-    }
-}
-// all inverted logic can be way simpler
-.item-media {
-    flex: 0 0 auto;
-    align-items: flex-start;
-}
-
-.startValue {
-    flex: 1;
-}
-
-.endValue {
-    flex: 1;
-    text-align: end;
-
-    &.positive {
-        color: var(--color-sentiment-positive) !important;
-    }
-    &.negative {
-        color: var(--color-sentiment-negative) !important;
-    }
-}
-.endValue.positive {
-    .item-title {
-        color: var(--color-sentiment-positive) !important;
-    }
-}
-.endValue.negative {
-    .item-title {
-        color: var(--color-sentiment-negative) !important;
-    }
-}
-.endValue.strikethrough {
-    text-decoration: line-through;
-}
-
-.item-title {
-    color: var(--color-content-primary)
-}
-
-.item-additionalInfo {
-    color: var(--color-content-tertiary)
-}
-
-.item-action {
-    flex: 0 0 auto;
-}

package/src/item/Item.story.tsx

@@ -1,51 +0,0 @@
-import Item, { ButtonItem, Props as ItemProps } from './Item';
-import { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-import Button from '../button';
-
-export default {
-  component: Item,
-  title: 'Content/Item',
-} satisfies Meta<ItemProps>;
-
-type Story = StoryObj<ItemProps>;
-
-export const ItemRadio: Story = {
-  render: () => (
-    <div>
-      {/* Basic */}
-      {/* with additional info */}
-      {/* with prompt */}
-      {/* Disabled */}
-      {/* Spotlight */}
-      {/* Active */}
-      <ButtonItem
-        buttonProps={{
-          v2: true,
-          sentiment: 'negative',
-          priority: 'secondary',
-          onClick: () => console.log('Button clicked'),
-          buttonText: 'Submit',
-        }}
-        title="Title"
-        subtitle="Subtitle"
-      />
-    </div>
-  ),
-};
-
-export const ItemButton: Story = {
-  render: () => (
-    <div>
-      {/* Basic */}
-      {/* with additional info */}
-      {/* with prompt */}
-      {/* partially interactive */}
-      {/* Disabled */}
-      {/* Spotlight */}
-      {/* Active */}
-    </div>
-  ),
-};
-
-// add intaces with dark mode

package/src/item/Item.tsx

@@ -1,163 +0,0 @@
-import { createContext, ReactNode, useId, useMemo, useState } from 'react';
-import { Typography } from '../common';
-import Body from '../body';
-import { Image } from './ItemImage';
-import { AdditionalInfo } from './ItemAdditionalInfo';
-import { IconButton } from './ItemIconButton';
-import { Checkbox } from './ItemCheckbox';
-import { Navigation } from './ItemNavigation';
-import Button, { NewButtonProps as ButtonProps } from '../button';
-
-export type ItemTypes =
-  | 'none'
-  | 'navigation'
-  | 'radio'
-  | 'checkbox'
-  | 'switch'
-  | 'button'
-  | 'icon-button';
-
-export type Props = {
-  as?: 'li' | 'div' | 'span';
-  inverted?: boolean;
-  disabled?: boolean;
-  partialInteractivity?: boolean;
-  spotlight?: 'active' | 'inactive';
-  title: ReactNode;
-  subtitle?: ReactNode;
-  additionalInfo?: ReactNode;
-  valueTitle?: ReactNode;
-  valueSubtitle?: ReactNode;
-  media?: ReactNode;
-  control?: ReactNode;
-  prompt?: ReactNode;
-};
-
-export type ItemContextData = {
-  setControlType: (type: ItemTypes) => void;
-  ids?: {
-    label: string;
-    additionalInfo: string;
-    value: string;
-    control: string;
-    prompt: string;
-  };
-  props: Pick<Props, 'as' | 'disabled' | 'inverted'>;
-};
-
-// @ts-expect-error for now let's mock it with `null` value
-// but actually by default we should specify `setControlType('none')`
-export const ItemContext = createContext<ItemContextData>(null);
-
-export const Item = ({
-  as: View = 'li',
-  title,
-  subtitle,
-  additionalInfo,
-  prompt,
-  inverted,
-  media,
-  spotlight,
-  valueTitle,
-  valueSubtitle,
-  control,
-  disabled,
-}: Props) => {
-  /*
-  const returnType = (): ReactNode => {
-    switch (type) {
-      case 'Navigation':
-        return <Chevron orientation={Position.RIGHT} disabled />;
-      case 'Radio':
-        return <RadioButton name="Hello" checked />;
-      case 'Checkbox':
-        return <CheckboxButton name="Hello" checked />;
-      case 'Switch':
-        return <Switch onClick={() => console.log('clicked')} />;
-      case 'Button':
-        return <Button v2>Hello</Button>;
-      case 'IconButton':
-        return (
-          <IconButton size={40} priority="minimal">
-            <InfoCircle />
-          </IconButton>
-        );
-      case 'NonInteractive':
-      default:
-        return <></>;
-    }
-  };
-  */
-  const idPrefix = useId();
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [controlType, setControlType] = useState<ItemTypes>();
-  const ids = {
-    label: `${idPrefix}_label`,
-    value: `${idPrefix}_value`,
-    control: `${idPrefix}_control`,
-    prompt: `${idPrefix}_prompt`,
-    additionalInfo: `${idPrefix}_additional-info`,
-  };
-
-  const itemCtx = useMemo(
-    () => ({ setControlType, ids, props: { as: View, disabled, inverted } }),
-    [],
-  );
-
-  return (
-    <ItemContext.Provider value={itemCtx}>
-      <View className={`item ${inverted ? 'inverted' : ''} ${spotlight ?? ''}`}>
-        {media && <div className="item-media">{media}</div>}
-        <div className="startValue">
-          <Body
-            className={inverted ? '' : 'item-title'}
-            type={inverted ? Typography.BODY_DEFAULT : Typography.BODY_LARGE_BOLD}
-          >
-            {title}
-          </Body>
-          <Body
-            className={inverted ? 'item-title' : ''}
-            type={inverted ? Typography.BODY_LARGE_BOLD : Typography.BODY_DEFAULT}
-          >
-            {subtitle}
-          </Body>
-          {additionalInfo}
-          {prompt}
-        </div>
-        {(valueTitle || valueSubtitle) && (
-          <div id={ids.value} className="item-value">
-            <Body type={inverted ? Typography.BODY_DEFAULT : Typography.BODY_LARGE_BOLD}>
-              {valueTitle}
-            </Body>
-            <Body type={inverted ? Typography.BODY_LARGE_BOLD : Typography.BODY_DEFAULT}>
-              {valueSubtitle}
-            </Body>
-          </div>
-        )}
-        <Body className="item-action">{control}</Body>
-      </View>
-    </ItemContext.Provider>
-  );
-};
-
-export type ItemWithButtonProps = Omit<Props, 'control'> & {
-  buttonProps: ButtonProps & {
-    buttonText: string;
-  };
-};
-
-export const ButtonItem = ({ buttonProps, ...itemProps }: ItemWithButtonProps): JSX.Element => {
-  return (
-    <Item {...itemProps} control={<Button {...buttonProps}>{buttonProps.buttonText}</Button>} />
-  );
-};
-
-/* eslint-disable functional/immutable-data */
-Item.Image = Image;
-Item.AdditionalInfo = AdditionalInfo;
-Item.Checkbox = Checkbox;
-Item.IconButton = IconButton;
-Item.Navigation = Navigation;
-/* eslint-enable functional/immutable-data */
-
-export default Item;

package/src/item/ItemAdditionalInfo.tsx

@@ -1,14 +0,0 @@
-import { PropsWithChildren, ReactNode, useContext, useEffect } from 'react';
-import Item, { ItemContext, ItemContextData } from './Item';
-import Body from '../body';
-import { LinkProps } from '../link';
-
-export type ItemAdditionalInfoProps = PropsWithChildren<{
-  action: Pick<LinkProps, 'href' | 'onClick' | 'target'>;
-}>;
-
-export const AdditionalInfo = function ({ children, action }: ItemAdditionalInfoProps) {
-  const { ids, props: baseItemProps } = useContext<ItemContextData>(ItemContext);
-
-  return <Body id={ids?.additionalInfo}>{children}</Body>;
-};

package/src/item/ItemCheckbox.tsx

@@ -1,16 +0,0 @@
-import { useContext, useEffect } from 'react';
-import CheckboxButton from '../checkboxButton';
-import { CheckboxButtonProps } from '../checkboxButton/CheckboxButton';
-import { ItemContext, ItemContextData } from './Item';
-
-export type ItemCheckboxProps = Pick<CheckboxButtonProps, 'checked' | 'indeterminate' | 'onChange'>;
-
-export const Checkbox = function (props: ItemCheckboxProps) {
-  const { setControlType, props: baseItemProps } = useContext<ItemContextData>(ItemContext);
-
-  useEffect(() => {
-    setControlType('checkbox');
-  }, []);
-
-  return <CheckboxButton disabled={baseItemProps.disabled} {...props} />;
-};

package/src/item/ItemIconButton.tsx

@@ -1,15 +0,0 @@
-import { useContext, useEffect } from 'react';
-import { default as IconButtonComp, IconButtonProps } from '../iconButton';
-import { ItemContext, ItemContextData } from './Item';
-
-export type ItemIconButtonProps = Pick<IconButtonProps, 'onClick' | 'href' | 'target'>;
-
-export const IconButton = function (props: ItemIconButtonProps) {
-  const { setControlType } = useContext<ItemContextData>(ItemContext);
-
-  useEffect(() => {
-    setControlType('icon-button');
-  }, []);
-
-  return <IconButtonComp {...props} size={32} />;
-};

package/src/item/ItemImage.tsx

@@ -1,11 +0,0 @@
-import { useContext, useEffect } from 'react';
-import Item, { ItemContext, ItemContextData } from './Item';
-import { default as Img, ImageProps } from '../image/Image';
-
-export type ItemImageProps = Pick<ImageProps, 'src' | 'alt'>;
-
-export const Image = function (props: ItemImageProps) {
-  const { ids, props: baseItemProps } = useContext<ItemContextData>(ItemContext);
-
-  return <Img {...props} />;
-};

package/src/item/ItemNavigation.tsx

@@ -1,16 +0,0 @@
-import { ChevronRight, BillSplit as Disabled } from '@transferwise/icons';
-import { ButtonProps } from '../button/Button.types';
-import Item, { ItemContext, ItemContextData } from './Item';
-import { useContext, useEffect } from 'react';
-
-export type ItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href'>;
-
-export const Navigation = function Navigation({ onClick }: ItemNavigationProps) {
-  const { setControlType, props: baseItemProps } = useContext<ItemContextData>(ItemContext);
-
-  useEffect(() => {
-    setControlType('navigation');
-  }, []);
-
-  return baseItemProps?.disabled ? <Disabled size={24} /> : <ChevronRight size={24} />;
-};

package/src/item/index.ts

@@ -1,4 +0,0 @@
-export type { Props as ItemProps } from './Item';
-export type { ItemAdditionalInfoProps } from './ItemAdditionalInfo';
-export type { ItemCheckboxProps } from './ItemCheckbox';
-export { default } from './Item';

package/src/upload/Upload.events.spec.js

@@ -1,49 +0,0 @@
-import { shallow } from 'enzyme';
-
-import Upload from '.';
-
-const defaultLocale = 'en-GB';
-jest.mock('react-intl', () => ({
-  injectIntl: (Component) =>
-    function (props) {
-      return (
-        <Component {...props} intl={{ locale: defaultLocale, formatMessage: (id) => `${id}` }} />
-      );
-    },
-  defineMessages: (translations) => translations,
-}));
-
-describe('Upload (events)', () => {
-  let component;
-  const props = {
-    onCancel: jest.fn(),
-    onChange: jest.fn(),
-    onFailure: jest.fn(),
-    onStart: jest.fn(),
-    onSuccess: jest.fn(),
-  };
-
-  describe('on shallow', () => {
-    beforeEach(() => {
-      component = shallow(<Upload {...props} />).dive();
-      jest.restoreAllMocks();
-    });
-
-    it('increments dragCounter on dragenter', () => {
-      component.find('.droppable').simulate('dragenter', new Event('event'));
-      expect(component.instance().dragCounter).toStrictEqual(1);
-    });
-
-    it('decrements dragCounter on dragleave', () => {
-      component.find('.droppable').simulate('dragleave', new Event('event'));
-      expect(component.instance().dragCounter).toStrictEqual(-1);
-    });
-
-    it('reset dragCounter on drop', () => {
-      component.find('.droppable').simulate('dragenter', new Event('event'));
-      expect(component.instance().dragCounter).toStrictEqual(1);
-      component.find('.droppable').simulate('drop', new Event('event'));
-      expect(component.instance().dragCounter).toStrictEqual(0);
-    });
-  });
-});