@transferwise/components 0.0.0-experimental-c0ebd4f → 0.0.0-experimental-45bc861

package/src/item/Item.less

@@ -0,0 +1,69 @@
+.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;
+
+        &-image {
+            width: var(--item-media-image-size);
+            height: var(--item-media-image-size);
+        }
+    }
+
+    &-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);
+            }
+        }
+    }
+}

package/src/item/Item.story.tsx

@@ -0,0 +1,111 @@
+import Item, { Props as ItemProps } from './Item';
+import { Meta, StoryObj } from '@storybook/react';
+import { lorem10, lorem20, lorem40, lorem5 } from '../test-utils';
+import { Flag } from '@wise/art';
+
+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
+        media={
+          <Item.AvatarView badge={{ type: 'action' }}>
+            <Flag code="BBD" />
+          </Item.AvatarView>
+        }
+        title="Test title"
+        subtitle="Test subtitle"
+        additionalInfo={<Item.AdditionalInfo>{lorem10}</Item.AdditionalInfo>}
+      />
+      <Item
+        media={
+          <Item.AvatarLayout
+            avatars={[{ asset: <Flag code="BBD" /> }, { asset: <Flag code="MXN" /> }]}
+          />
+        }
+        title="Test title"
+        subtitle={lorem10}
+        additionalInfo={<Item.AdditionalInfo>{lorem20}</Item.AdditionalInfo>}
+      />
+      <Item
+        media={
+          <Item.AvatarLayout
+            size={72}
+            orientation="diagonal"
+            avatars={[{ asset: <Flag code="BBD" /> }, { asset: <Flag code="MXN" /> }]}
+          />
+        }
+        title="Test title"
+        subtitle={lorem10}
+        valueTitle="100 GBP"
+        valueSubtitle="100 USD"
+        additionalInfo={<Item.AdditionalInfo>{lorem20}</Item.AdditionalInfo>}
+      />
+      <Item
+        media={<Item.AvatarView profileType="BUSINESS" notification />}
+        title="Test title"
+        subtitle="Test subtitle"
+        additionalInfo={
+          <Item.AdditionalInfo
+            action={{ label: 'Learn more', href: 'https://wise.com', target: '_blank' }}
+          >
+            {lorem10}
+          </Item.AdditionalInfo>
+        }
+      />
+      <Item
+        media={<Item.AvatarView imgSrc="../avatar-square-dude.webp" selected />}
+        title="Test title"
+        additionalInfo={<Item.AdditionalInfo>{lorem10}</Item.AdditionalInfo>}
+      />
+
+      <Item
+        media={<Item.Image src="../apple-pay-logo.svg" />}
+        title="Accepting Apple Pay"
+        subtitle={lorem10}
+      />
+
+      <Item
+        media={<Item.Image src="../wise-card.svg" />}
+        title="Wise Business Card"
+        subtitle={lorem5}
+      />
+    </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

@@ -0,0 +1,165 @@
+import { createContext, ReactNode, useId, useMemo, useState } from 'react';
+import { Typography } from '../common';
+import Body from '../body';
+import { AdditionalInfo } from './ItemAdditionalInfo';
+import { IconButton } from './ItemIconButton';
+import { Checkbox } from './ItemCheckbox';
+import { Navigation } from './ItemNavigation';
+import { clsx } from 'clsx';
+import { AvatarLayout, AvatarView, Image } from './ItemMedia';
+
+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.AvatarView = AvatarView;
+Item.AvatarLayout = AvatarLayout;
+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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,15 @@
+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/ItemMedia.tsx

@@ -0,0 +1,44 @@
+import { default as AvatarViewComp, AvatarViewProps } from '../avatarView';
+import { default as AvatarLayoutComp, AvatarLayoutProps } from '../avatarLayout';
+import { default as ImageComp, ImageProps } from '../image/Image';
+import { clsx } from 'clsx';
+
+type SizeProp = { size?: 32 | 40 | 48 | 56 | 72 };
+
+export type ItemAvatarViewProps = Omit<AvatarViewProps, 'size' | 'interactive'> & SizeProp;
+
+export const AvatarView = ({ className, size = 48, ...props }: ItemAvatarViewProps) => {
+  return (
+    <AvatarViewComp {...props} size={size} className={clsx('np-item-avatar-view', className)} />
+  );
+};
+
+export type ItemAvatarLayoutProps = Omit<AvatarLayoutProps, 'size' | 'interactive'> & SizeProp;
+
+export const AvatarLayout = ({ className, size = 48, ...props }: ItemAvatarLayoutProps) => {
+  return (
+    <AvatarLayoutComp {...props} size={size} className={clsx('np-item-avatar-layout', className)} />
+  );
+};
+
+export type ItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' | 'alt'> &
+  SizeProp & {
+    alt?: string;
+  };
+
+/**
+ * TODO: mention that image is for rare cases not for DS illustrations, they discouraged
+ */
+export const Image = ({ alt = '', size = 48, ...props }: ItemImageProps) => {
+  return (
+    <div
+      className={clsx('np-item-media-image')}
+      style={{
+        // @ts-expect-error CSS custom props allowed
+        '--item-media-image-size': `${size}px`,
+      }}
+    >
+      <ImageComp {...props} alt={alt} />
+    </div>
+  );
+};

package/src/item/ItemNavigation.tsx

@@ -0,0 +1,16 @@
+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

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

package/src/main.css

@@ -2585,6 +2585,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
+  -webkit-hyphens: auto;
+          hyphens: auto;
   margin-bottom: 0;
   margin-bottom: initial;
   font-size: 1.375rem;
@@ -2596,36 +2598,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   height: 72px !important;
   height: var(--size-72) !important;
 }
-@supports (hyphenate-limit-chars: 1) {
-  .np-form-control--size-lg {
-    -webkit-hyphens: auto;
-            hyphens: auto;
-    hyphenate-limit-chars: 7 3;
-  }
-  @media (min-width: 768px) {
-    .np-form-control--size-lg {
-      hyphenate-limit-chars: 8 3;
-    }
-  }
-  @media (min-width: 992px) {
-    .np-form-control--size-lg {
-      hyphenate-limit-chars: 10 4 3;
-    }
-  }
-}
-@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
-  .np-form-control--size-lg {
-    -webkit-hyphens: auto;
-            hyphens: auto;
-    -webkit-hyphenate-limit-before: 3;
-    -webkit-hyphenate-limit-after: 3;
-  }
-  @media (min-width: 992px) {
-    .np-form-control--size-lg {
-      -webkit-hyphenate-limit-before: 4;
-    }
-  }
-}
 .np-form-control--size-lg + p,
 .np-form-control--size-lg + ul:not(.list-unstyled),
 .np-form-control--size-lg + ol:not(.list-unstyled) {
@@ -2648,6 +2620,74 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   border-radius: 9999px !important;
   border-radius: var(--radius-full) !important;
 }
+.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-media-image {
+  width: var(--item-media-image-size);
+  height: var(--item-media-image-size);
+}
+.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-field-control {
   margin-top: 4px;
   margin-top: var(--size-4);
@@ -4051,6 +4091,8 @@ html:not([dir="rtl"]) .np-navigation-option {
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
+  -webkit-hyphens: auto;
+          hyphens: auto;
   margin-bottom: 0;
   margin-bottom: initial;
   font-weight: 600;
@@ -4060,36 +4102,6 @@ html:not([dir="rtl"]) .np-navigation-option {
   letter-spacing: -0.02em;
   line-height: 122%;
 }
-@supports (hyphenate-limit-chars: 1) {
-  .np-popover__container.np-bottom-sheet .np-popover__title {
-    -webkit-hyphens: auto;
-            hyphens: auto;
-    hyphenate-limit-chars: 7 3;
-  }
-  @media (min-width: 768px) {
-    .np-popover__container.np-bottom-sheet .np-popover__title {
-      hyphenate-limit-chars: 8 3;
-    }
-  }
-  @media (min-width: 992px) {
-    .np-popover__container.np-bottom-sheet .np-popover__title {
-      hyphenate-limit-chars: 10 4 3;
-    }
-  }
-}
-@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
-  .np-popover__container.np-bottom-sheet .np-popover__title {
-    -webkit-hyphens: auto;
-            hyphens: auto;
-    -webkit-hyphenate-limit-before: 3;
-    -webkit-hyphenate-limit-after: 3;
-  }
-  @media (min-width: 992px) {
-    .np-popover__container.np-bottom-sheet .np-popover__title {
-      -webkit-hyphenate-limit-before: 4;
-    }
-  }
-}
 .np-popover__container.np-bottom-sheet .np-popover__title + p,
 .np-popover__container.np-bottom-sheet .np-popover__title + ul:not(.list-unstyled),
 .np-popover__container.np-bottom-sheet .np-popover__title + ol:not(.list-unstyled) {

package/src/main.less

@@ -39,6 +39,7 @@
 @import "./image/Image.less";
 @import "./info/Info.less";
 @import "./inputs/Input.less";
+@import "./item/Item.less";
 @import "./field/Field.less";
 @import "./inputs/InputGroup.less";
 @import "./inputs/SelectInput.less";

package/src/popover/Popover.css

@@ -24,6 +24,8 @@
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
+  -webkit-hyphens: auto;
+          hyphens: auto;
   margin-bottom: 0;
   margin-bottom: initial;
   font-weight: 600;
@@ -32,34 +34,6 @@
   font-size: var(--font-size-26);
   letter-spacing: -0.02em;
   line-height: 122%;
-}@supports (hyphenate-limit-chars: 1) {
-  .np-popover__container.np-bottom-sheet .np-popover__title {
-    -webkit-hyphens: auto;
-            hyphens: auto;
-    hyphenate-limit-chars: 7 3;
-  }
-  @media (min-width: 768px) {
-    .np-popover__container.np-bottom-sheet .np-popover__title {
-      hyphenate-limit-chars: 8 3;
-    }
-  }
-  @media (min-width: 992px) {
-    .np-popover__container.np-bottom-sheet .np-popover__title {
-      hyphenate-limit-chars: 10 4 3;
-    }
-  }
-}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
-  .np-popover__container.np-bottom-sheet .np-popover__title {
-    -webkit-hyphens: auto;
-            hyphens: auto;
-    -webkit-hyphenate-limit-before: 3;
-    -webkit-hyphenate-limit-after: 3;
-  }
-  @media (min-width: 992px) {
-    .np-popover__container.np-bottom-sheet .np-popover__title {
-      -webkit-hyphenate-limit-before: 4;
-    }
-  }
 }.np-popover__container.np-bottom-sheet .np-popover__title + p,
 .np-popover__container.np-bottom-sheet .np-popover__title + ul:not(.list-unstyled),
 .np-popover__container.np-bottom-sheet .np-popover__title + ol:not(.list-unstyled) {