@transferwise/components 0.0.0-experimental-0192429 → 0.0.0-experimental-385bb2a

package/src/item/Item.css

@@ -1,186 +0,0 @@
-.np-item {
-  padding: 16px;
-  padding: var(--size-16);
-  border-radius: 24px;
-  border-radius: var(--radius-large);
-  background-color: #ffffff;
-  background-color: var(--color-background-screen);
-  display: flex;
-  gap: 16px;
-  gap: var(--size-16);
-  align-items: center;
-  flex-direction: row;
-  cursor: pointer;
-}
-.np-item:hover {
-  background-color: var(--color-background-screen-hover);
-}
-.np-item:active {
-  background-color: var(--color-background-screen-active);
-}
-.np-item-media {
-  flex: 0 0 auto;
-  align-items: flex-start;
-}
-.np-item-title {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.np-item-additional-info {
-  color: #768e9c;
-  color: var(--color-content-tertiary);
-}
-.np-item-value {
-  flex: 0 0 auto;
-}
-.np-item-control {
-  flex: 0 0 auto;
-}
-.np-item-spotlight-active {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-}
-.np-item-spotlight-active:hover {
-  background-color: var(--color-background-neutral-hover);
-}
-.np-item-spotlight-active:active {
-  background-color: var(--color-background-neutral-active);
-}
-.np-item-spotlight-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)) {
-.np-item-spotlight-inactive {
-  background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
-}
-}
-.np-item-spotlight-inactive:hover {
-  background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
-}
-.np-item-spotlight-inactive:active {
-  background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
-}
-.np-item-prompt {
-  display: inline-flex;
-  padding-top: calc(8px / 2);
-  padding-top: calc(var(--padding-x-small) / 2);
-  padding-bottom: calc(8px / 2);
-  padding-bottom: calc(var(--padding-x-small) / 2);
-  padding-left: calc(8px - 1px);
-  padding-left: calc(var(--padding-x-small) - 1px);
-  padding-right: 8px;
-  padding-right: var(--padding-x-small);
-  border-radius: 10px;
-  border-radius: var(--radius-small);
-  word-break: break-word;
-  word-wrap: break-word;
-}
-.np-item-prompt .np-prompt-icon {
-  padding-right: calc(12px / 2);
-  padding-right: calc(var(--size-12) / 2);
-  padding-top: calc(4px - 1px);
-  padding-top: calc(var(--size-4) - 1px);
-  padding-bottom: calc(4px - 1px);
-  padding-bottom: calc(var(--size-4) - 1px);
-}
-.np-item-prompt .np-prompt-icon .tw-icon-tags,
-.np-item-prompt .np-prompt-icon .tw-icon-confetti {
-  color: var(--color-sentiment-positive-primary);
-}
-.np-item-prompt a {
-  text-underline-offset: calc(4px / 2);
-  text-underline-offset: calc(var(--size-4) / 2);
-}
-.np-item-prompt.np-prompt-interactive {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  cursor: pointer;
-  border: none;
-}
-.np-item-prompt.negative {
-  background-color: var(--color-sentiment-negative-secondary);
-  color: var(--color-sentiment-negative-primary);
-}
-.np-item-prompt.negative a {
-  color: var(--color-sentiment-negative-primary);
-}
-.np-item-prompt.negative a:hover {
-  color: var(--color-sentiment-negative-primary-hover);
-}
-.np-item-prompt.negative a:active {
-  color: var(--color-sentiment-negative-primary-active);
-}
-.np-prompt-interactive.np-item-prompt.negative:hover {
-  background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 95%, var(--color-sentiment-negative-primary));
-}
-.np-prompt-interactive.np-item-prompt.negative:active {
-  background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 90%, var(--color-sentiment-negative-primary));
-}
-.np-item-prompt.positive,
-.np-item-prompt.discount,
-.np-item-prompt.savings {
-  background-color: var(--color-sentiment-positive-secondary);
-  color: var(--color-sentiment-positive-primary);
-}
-.np-item-prompt.positive a,
-.np-item-prompt.discount a,
-.np-item-prompt.savings a {
-  color: var(--color-sentiment-positive-primary);
-}
-.np-item-prompt.positive a:hover,
-.np-item-prompt.discount a:hover,
-.np-item-prompt.savings a:hover {
-  color: var(--color-sentiment-positive-primary-hover);
-}
-.np-item-prompt.positive a:active,
-.np-item-prompt.discount a:active,
-.np-item-prompt.savings a:active {
-  color: var(--color-sentiment-positive-primary-active);
-}
-.np-prompt-interactive.np-item-prompt.positive:hover,
-.np-prompt-interactive.np-item-prompt.discount:hover,
-.np-prompt-interactive.np-item-prompt.savings:hover {
-  background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 95%, var(--color-sentiment-positive-primary));
-}
-.np-prompt-interactive.np-item-prompt.positive:active,
-.np-prompt-interactive.np-item-prompt.discount:active,
-.np-prompt-interactive.np-item-prompt.savings:active {
-  background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 90%, var(--color-sentiment-positive-primary));
-}
-.np-item-prompt.neutral {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.np-item-prompt.neutral a {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.np-prompt-interactive.np-item-prompt.neutral:hover {
-  background-color: var(--color-background-neutral-hover);
-}
-.np-prompt-interactive.np-item-prompt.neutral:active {
-  background-color: var(--color-background-neutral-active);
-}
-.np-item-prompt.warning {
-  background-color: var(--color-sentiment-warning-secondary);
-  color: var(--color-sentiment-warning-content);
-}
-.np-item-prompt.warning a {
-  color: var(--color-sentiment-warning-content);
-}
-.np-item-prompt.warning a:hover {
-  color: var(--color-sentiment-warning-content-hover);
-}
-.np-item-prompt.warning a:active {
-  color: var(--color-sentiment-warning-content-active);
-}
-.np-prompt-interactive.np-item-prompt.warning:hover {
-  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 90%, var(--color-sentiment-warning-primary));
-}
-.np-prompt-interactive.np-item-prompt.warning:active {
-  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 80%, var(--color-sentiment-warning-primary));
-}

package/src/item/Item.less

@@ -1,177 +0,0 @@
-.np-item {
-    padding: var(--size-16);
-    border-radius: var(--radius-large);
-    background-color: var(--color-background-screen);
-    display: flex;
-    gap: var(--size-16);
-    align-items: center;
-    flex-direction: row;
-    cursor: pointer;
-
-    &:hover {
-        background-color: var(--color-background-screen-hover);
-    }
-
-    &:active {
-        background-color: var(--color-background-screen-active);
-    }
-
-    &-media {
-        flex: 0 0 auto;
-        align-items: flex-start;
-    }
-
-    &-title {
-        color: var(--color-content-primary);
-    }
-
-    &-additional-info {
-        color: var(--color-content-tertiary);
-    }
-
-    &-value {
-        flex: 0 0 auto;
-    }
-    
-    &-control {
-        flex: 0 0 auto;
-    }
-
-    &-spotlight {
-        &-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);
-            }
-        }
-    }
-
-    &-prompt {
-        display: inline-flex;
-        padding-top: calc(var(--padding-x-small) / 2);
-        padding-bottom: calc(var(--padding-x-small) / 2);
-        padding-left: calc(var(--padding-x-small) - 1px);
-        padding-right: var(--padding-x-small);
-        border-radius: var(--radius-small);
-        word-break: break-word;
-        overflow-wrap: break-word;
-        
-        .np-prompt-icon {
-          padding-right: calc(var(--size-12) / 2);
-          padding-top: calc(var(--size-4) - 1px);
-          padding-bottom: calc(var(--size-4) - 1px);
-      
-          .tw-icon-tags,
-          .tw-icon-confetti {
-            color: var(--color-sentiment-positive-primary);
-          }
-        }
-      
-        a {
-          text-underline-offset: calc(var(--size-4) / 2); 
-        }
-      
-        &.np-prompt-interactive {
-          text-decoration: none;
-          cursor: pointer;
-          border: none;
-        }
-      
-        &.negative {
-          background-color: var(--color-sentiment-negative-secondary);
-          color: var(--color-sentiment-negative-primary);
-          a {
-            color: var(--color-sentiment-negative-primary);
-            &:hover {
-              color: var(--color-sentiment-negative-primary-hover);
-            }
-            &:active {
-              color: var(--color-sentiment-negative-primary-active);
-            }
-          }
-          .np-prompt-interactive& {
-            &:hover {
-              background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 95%, var(--color-sentiment-negative-primary));
-            }
-            &:active {
-              background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 90%, var(--color-sentiment-negative-primary));
-            }
-          }
-        }
-        &.positive,
-        &.discount,
-        &.savings {
-          background-color: var(--color-sentiment-positive-secondary);
-          color: var(--color-sentiment-positive-primary);
-          a {
-            color: var(--color-sentiment-positive-primary);
-            &:hover {
-              color: var(--color-sentiment-positive-primary-hover);
-            }
-            &:active {
-              color: var(--color-sentiment-positive-primary-active);
-            }
-          }
-          .np-prompt-interactive& {
-            &:hover {
-              background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 95%, var(--color-sentiment-positive-primary));
-            }
-            &:active {
-              background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 90%, var(--color-sentiment-positive-primary));
-            }
-          }
-        }
-        &.neutral {
-          background-color: var(--color-background-neutral);
-          color: var(--color-content-primary);
-          a {
-            color: var(--color-content-primary);
-          }
-          .np-prompt-interactive& {
-            &:hover {
-              background-color: var(--color-background-neutral-hover);
-            }
-            &:active {
-              background-color: var(--color-background-neutral-active);
-            }
-          }
-        }
-        &.warning {
-          background-color: var(--color-sentiment-warning-secondary);
-          color: var(--color-sentiment-warning-content);
-          a {
-            color: var(--color-sentiment-warning-content);
-            &:hover {
-              color: var(--color-sentiment-warning-content-hover);
-            }
-            &:active {
-              color: var(--color-sentiment-warning-content-active);
-            }
-          }
-          .np-prompt-interactive& {
-            &:hover {
-              background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 90%, var(--color-sentiment-warning-primary));
-            }
-            &:active {
-              background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 80%, var(--color-sentiment-warning-primary));
-            }
-          }
-        } 
-    }
-}

package/src/item/Item.story.tsx

@@ -1,93 +0,0 @@
-import Item, { Props as ItemProps } from './Item';
-import { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-import { lorem10, lorem20, lorem40 } from '../test-utils';
-
-export default {
-  component: Item,
-  title: 'Content/Item',
-} satisfies Meta<ItemProps>;
-
-type Story = StoryObj<ItemProps>;
-
-// TODO: delete this story later when we have more peace of the List Item puzzle
-export const TempPlayground: Story = {
-  render: () => (
-    <div>
-      <Item
-        title="Test title"
-        subtitle="Test subtitle"
-        additionalInfo={<Item.AdditionalInfo>{lorem10}</Item.AdditionalInfo>}
-      />
-      <Item
-        title="Test title"
-        subtitle={lorem10}
-        additionalInfo={<Item.AdditionalInfo>{lorem20}</Item.AdditionalInfo>}
-      />
-      <Item
-        title="Test title"
-        subtitle={lorem10}
-        valueTitle="100 GBP"
-        valueSubtitle="100 USD"
-        additionalInfo={<Item.AdditionalInfo>{lorem20}</Item.AdditionalInfo>}
-      />
-      <Item
-        title="Test title"
-        subtitle="Test subtitle"
-        additionalInfo={
-          <Item.AdditionalInfo
-            action={{ label: 'Learn more', href: 'https://wise.com', target: '_blank' }}
-          >
-            {lorem10}
-          </Item.AdditionalInfo>
-        }
-        prompt={<Item.Prompt type="negative">You have done something wrong</Item.Prompt>}
-      />
-      <Item
-        title="Test title"
-        additionalInfo={<Item.AdditionalInfo>{lorem10}</Item.AdditionalInfo>}
-        prompt={
-          <Item.Prompt
-            type="discount"
-            action={{
-              href: 'https://wise.com',
-              target: '_blank',
-              'aria-label': 'clickable prompt',
-            }}
-          >
-            The whole prompt is secretly clickable
-          </Item.Prompt>
-        }
-      />
-    </div>
-  ),
-};
-
-export const ItemRadio: Story = {
-  render: () => (
-    <div>
-      {/* Basic */}
-      {/* with additional info */}
-      {/* with prompt */}
-      {/* Disabled */}
-      {/* Spotlight */}
-      {/* Active */}
-    </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,165 +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 { clsx } from 'clsx';
-import Prompt from './prompt/Prompt';
-
-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 = undefined,
-  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();
-
-  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={clsx('np-item', `np-item-${controlType}`, {
-          [`np-item-spotlight-${spotlight}`]: !!spotlight,
-        })}
-        aria-describedby={[ids.additionalInfo].join(' ')}
-      >
-        {media && <div className="np-item-media">{media}</div>}
-
-        {/* Title + Subtitle + Values + Additional Info - Group */}
-        <div>
-          {/* Title + Subtitle + Values - Group */}
-          <div className="d-flex justify-content-between">
-            <span>
-              {/* @ts-expect-error div can have role and aria-lavel props */}
-              <Body
-                type={Typography.BODY_LARGE_BOLD}
-                className="np-item-title"
-                // for a11y this needs to be a header but for SEO it shouldn't be `h*` tag
-                // so we enable header semantics via `role` and `aria-level` attrs
-                role="heading"
-                aria-level="4"
-              >
-                {title}
-              </Body>
-              <Body className="np-item-subtitle">{subtitle}</Body>
-            </span>
-            {(valueTitle || valueSubtitle) && (
-              <span id={ids.value} className="np-item-value">
-                <Body type={Typography.BODY_LARGE_BOLD} className="np-item-title-value">
-                  {valueTitle}
-                </Body>
-                <Body className="np-item-subtitle-value">{valueSubtitle}</Body>
-              </span>
-            )}
-          </div>
-
-          {/* Additional Info and Prompt here */}
-          {Boolean(subtitle) && additionalInfo}
-        </div>
-        <Body className="np-item-control">{control}</Body>
-        {prompt}
-      </View>
-    </ItemContext.Provider>
-  );
-};
-
-/* eslint-disable functional/immutable-data */
-Item.Image = Image;
-Item.AdditionalInfo = AdditionalInfo;
-Item.Checkbox = Checkbox;
-Item.IconButton = IconButton;
-Item.Navigation = Navigation;
-Item.Prompt = Prompt;
-/* eslint-enable functional/immutable-data */
-
-export default Item;

package/src/item/ItemAdditionalInfo.tsx

@@ -1,31 +0,0 @@
-import { PropsWithChildren, useContext } from 'react';
-import { ItemContext, ItemContextData } from './Item';
-import Body from '../body';
-import Link, { LinkProps } from '../link';
-import { Typography } from '../common';
-
-export type ItemAdditionalInfoProps = PropsWithChildren<{
-  action?: Pick<LinkProps, 'href' | 'onClick' | 'target'> & { label?: string };
-}>;
-
-export const AdditionalInfo = function ({ children, action }: ItemAdditionalInfoProps) {
-  const { ids } = useContext<ItemContextData>(ItemContext);
-
-  return (
-    <Body
-      type={Typography.BODY_DEFAULT}
-      id={ids.additionalInfo}
-      className="np-item-additional-info"
-    >
-      {children}
-      {action ? (
-        <>
-          {' '}
-          <Link href={action.href} target={action.target} onClick={action.onClick}>
-            {action.label}
-          </Link>
-        </>
-      ) : null}
-    </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} />;
-};