@transferwise/components 0.0.0-experimental-e8e1885 → 0.0.0-experimental-d06238a

package/src/item/Item.css

@@ -0,0 +1,183 @@
+.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);
+  gap: 16px;
+  gap: var(--size-16);
+  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-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-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

@@ -0,0 +1,177 @@
+.np-item {
+    padding: var(--size-16);
+    border-radius: var(--radius-large);
+    background-color: var(--color-background-screen);
+    gap: var(--size-16);
+    cursor: pointer;
+
+    &:hover {
+        background-color: var(--color-background-screen-hover);
+    }
+
+    &:active {
+        background-color: var(--color-background-screen-active);
+    }
+
+    &-media {
+
+        &-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);
+            }
+        }
+    }
+
+    &-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

@@ -0,0 +1,188 @@
+import Item, { Props as ItemProps } from './Item';
+import { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+import { Plus } from '@transferwise/icons';
+
+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: () => {
+    const [checked, setChecked] = useState(false);
+
+    return (
+      <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>
+          }
+          prompt={<Item.Prompt type="negative">You have done something wrong</Item.Prompt>}
+        />
+        <Item
+          media={<Item.AvatarView imgSrc="../avatar-square-dude.webp" selected />}
+          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>
+          }
+        />
+
+        <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}
+        />
+
+        <Item
+          title="Test title"
+          disabled
+          subtitle={lorem10}
+          additionalInfo={<Item.AdditionalInfo>{lorem20}</Item.AdditionalInfo>}
+          control={<Item.Button priority="secondary-neutral">as Button</Item.Button>}
+        />
+        <Item
+          title="Test title"
+          disabled
+          subtitle={lorem10}
+          additionalInfo={<Item.AdditionalInfo>{lorem20}</Item.AdditionalInfo>}
+          control={
+            <Item.IconButton>
+              <Plus />
+            </Item.IconButton>
+          }
+        />
+
+        <Item
+          title="Test title"
+          subtitle={lorem10}
+          additionalInfo={<Item.AdditionalInfo>{lorem20}</Item.AdditionalInfo>}
+          control={
+            <Item.Button
+              priority="secondary-neutral"
+              as="a"
+              target="dfdf"
+              aria-label="adsfasfd"
+              href="wise.com"
+            >
+              as Link
+            </Item.Button>
+          }
+        />
+
+        <Item
+          title="Test title"
+          subtitle={lorem10}
+          additionalInfo={<Item.AdditionalInfo>{lorem20}</Item.AdditionalInfo>}
+          control={<Item.Checkbox indeterminate />}
+        />
+
+        <Item
+          title="Test title"
+          subtitle={lorem10}
+          additionalInfo={<Item.AdditionalInfo>{lorem20}</Item.AdditionalInfo>}
+          control={
+            <Item.Switch
+              checked={checked}
+              onClick={() => {
+                setChecked(!checked);
+              }}
+            />
+          }
+        />
+      </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