@transferwise/components 0.0.0-experimental-35e180c → 0.0.0-experimental-6fd476f

package/build/main.css

@@ -2626,6 +2626,65 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   border-radius: 9999px !important;
   border-radius: var(--radius-full) !important;
 }
+.item {
+  padding: 16px;
+  border-radius: 16px;
+  border-radius: var(--radius-medium);
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  flex-direction: row;
+}
+.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-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;
+}
 .np-field-control {
   margin-top: 4px;
   margin-top: var(--size-4);

package/build/styles/item/Item.css

@@ -0,0 +1,59 @@
+.item {
+  padding: 16px;
+  border-radius: 16px;
+  border-radius: var(--radius-medium);
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  flex-direction: row;
+}
+.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-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/build/styles/main.css

@@ -2626,6 +2626,65 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   border-radius: 9999px !important;
   border-radius: var(--radius-full) !important;
 }
+.item {
+  padding: 16px;
+  border-radius: 16px;
+  border-radius: var(--radius-medium);
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  flex-direction: row;
+}
+.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-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;
+}
 .np-field-control {
   margin-top: 4px;
   margin-top: var(--size-4);

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

@@ -0,0 +1,3 @@
+import { ItemProps } from './Item.types';
+export declare const Item: ({ type, title, subtitle, additionalInfo, inverted, media, endValue, }: ItemProps) => import("react").JSX.Element;
+//# sourceMappingURL=Item.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../src/item/Item.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzC,eAAO,MAAM,IAAI,0EAQd,SAAS,gCAmEX,CAAC"}

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

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { Sentiment } from '../common';
+export type ItemTypes = 'NonInteractive' | 'Navigation' | 'Radio' | 'Checkbox' | 'Switch' | 'Button' | 'IconButton';
+export type EndValueProps = {
+    title?: string;
+    subtitle?: string;
+    inverted?: boolean;
+    sentiment?: Sentiment.POSITIVE | Sentiment.NEGATIVE;
+    strikethrough?: boolean;
+    bold?: boolean;
+};
+export interface ItemProps {
+    type: ItemTypes;
+    media?: {
+        value: ReactNode;
+    };
+    title: string;
+    subtitle?: string;
+    additionalInfo?: string;
+    inverted?: boolean;
+    endValue?: EndValueProps;
+}
+//# sourceMappingURL=Item.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Item.types.d.ts","sourceRoot":"","sources":["../../../src/item/Item.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEtC,MAAM,MAAM,SAAS,GACjB,gBAAgB,GAChB,YAAY,GACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,YAAY,CAAC;AAEjB,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,QAAQ,CAAC;IACpD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,SAAS,CAAC;IAEhB,KAAK,CAAC,EAAE;QAEN,KAAK,EAAE,SAAS,CAAC;KAClB,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,aAAa,CAAC;CAI1B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-35e180c",
+  "version": "0.0.0-experimental-6fd476f",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -91,9 +91,9 @@
     "rollup": "^4.18.1",
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
-    "@transferwise/less-config": "3.1.0",
     "@transferwise/neptune-css": "14.22.0",
-    "@wise/components-theming": "1.6.1"
+    "@wise/components-theming": "1.6.1",
+    "@transferwise/less-config": "3.1.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.13.1",

package/src/item/Item.css

@@ -0,0 +1,59 @@
+.item {
+  padding: 16px;
+  border-radius: 16px;
+  border-radius: var(--radius-medium);
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  flex-direction: row;
+}
+.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-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

@@ -0,0 +1,68 @@
+.item {
+    padding: 16px;
+    border-radius: var(--radius-medium);
+    background-color: var(--color-background-screen);
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    flex-direction: row;
+
+    &:disabled {
+        opacity: 0.45;
+        mix-blend-mode: luminosity;
+    }
+
+    &:hover {
+        background-color: var(--color-background-screen-hover);
+    }
+
+    &:active {
+        background-color: var(--color-background-screen-active);
+    }
+}
+
+.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

@@ -0,0 +1,212 @@
+import { Item } from './Item';
+import { Meta, StoryObj } from '@storybook/react';
+import AvatarView from '../avatarView';
+import { Sentiment } from '../common';
+import React from 'react';
+import { ItemProps } from './Item.types';
+
+type ItemStoryProps = Omit<ItemProps, 'media'> & {
+  mediaSize?: number;
+  media?: {
+    value: React.ReactElement;
+  };
+  endValueTitle?: string;
+  endValueSubtitle?: string;
+  endValueInverted?: boolean;
+  endValueStrikethrough?: boolean;
+  endValueSentiment?: Sentiment.NEGATIVE | Sentiment.POSITIVE | undefined;
+};
+
+export default {
+  component: Item,
+  title: 'Content/Item',
+  args: {
+    type: 'Navigation',
+    title: 'Title',
+    subtitle: 'Subtitle',
+    additionalInfo: 'Additional Info',
+    inverted: false,
+    media: {
+      value: <AvatarView profileName="H D" />,
+    },
+    mediaSize: 48,
+    endValueTitle: '427,386.39 JPY',
+    endValueSubtitle: '2197.06 GBP',
+    endValueInverted: false,
+    endValueStrikethrough: false,
+    endValueSentiment: undefined,
+  },
+} satisfies Meta<ItemStoryProps>;
+
+type Story = StoryObj<ItemStoryProps>;
+
+export const Playground: Story = {
+  parameters: {
+    controls: {
+      exclude: ['media', 'endValue'],
+    },
+  },
+  argTypes: {
+    type: {
+      control: 'radio',
+      options: ['NonInteractive', 'Navigation', 'Switch', 'Checkbox', 'Radio', 'IconButton'],
+      table: {
+        category: 'Type',
+      },
+    },
+    mediaSize: {
+      control: 'radio',
+      options: [0, 32, 40, 48, 56, 72],
+      defaultValue: 48,
+    },
+    title: {
+      control: 'text',
+      table: {
+        category: 'Start Value Controls',
+      },
+    },
+    subtitle: {
+      control: 'text',
+      table: {
+        category: 'Start Value Controls',
+      },
+    },
+    additionalInfo: {
+      control: 'text',
+      table: {
+        category: 'Start Value Controls',
+      },
+    },
+    inverted: {
+      control: 'boolean',
+      table: {
+        category: 'Start Value Controls',
+      },
+    },
+
+    endValueTitle: {
+      control: 'text',
+      table: {
+        category: 'End Value Controls',
+      },
+    },
+    endValueSubtitle: {
+      control: 'text',
+      table: {
+        category: 'End Value Controls',
+      },
+    },
+    endValueInverted: {
+      control: 'boolean',
+      table: {
+        category: 'End Value Controls',
+      },
+    },
+    endValueStrikethrough: {
+      control: 'boolean',
+      table: {
+        category: 'End Value Controls',
+      },
+    },
+    endValueSentiment: {
+      control: 'radio',
+      options: ['POSITIVE', 'NEGATIVE', 'none'],
+      defaultValue: 'none',
+      mapping: {
+        POSITIVE: Sentiment.POSITIVE,
+        NEGATIVE: Sentiment.NEGATIVE,
+        none: undefined,
+      },
+      table: {
+        category: 'End Value Controls',
+      },
+    },
+  },
+  render: (args) => {
+    const {
+      mediaSize,
+      media,
+      endValueTitle,
+      endValueSubtitle,
+      endValueInverted,
+      endValueStrikethrough,
+      endValueSentiment,
+      ...restProps
+    } = args;
+
+    return (
+      <Item
+        {...restProps}
+        media={
+          mediaSize === 0 || !media
+            ? undefined
+            : {
+                value: React.cloneElement(media.value, { size: mediaSize }),
+              }
+        }
+        endValue={{
+          title: endValueTitle,
+          subtitle: endValueSubtitle,
+          inverted: endValueInverted,
+          strikethrough: endValueStrikethrough,
+          sentiment: endValueSentiment,
+        }}
+      />
+    );
+  },
+};
+export const Variants: Story = {
+  render: () => (
+    <>
+      <Item type="NonInteractive" title="Title" />
+      <Item
+        media={{ value: <AvatarView size={48} profileName="H D" /> }}
+        type="Navigation"
+        title="Title"
+      />
+      <Item
+        type="Navigation"
+        title="Title"
+        subtitle="Subtitle"
+        media={{ value: <AvatarView size={32} profileName="H D" /> }}
+        endValue={{ title: '427,386.39 JPY', sentiment: Sentiment.NEGATIVE }}
+      />
+      <Item
+        type="Switch"
+        title="Title"
+        subtitle="Subtitle"
+        additionalInfo="Additional Info"
+        media={{ value: <AvatarView size={40} profileName="H D" /> }}
+        endValue={{
+          title: '427,386.39 JPY',
+          subtitle: '2197.06 GBP',
+          sentiment: Sentiment.POSITIVE,
+        }}
+      />
+      <Item
+        type="Checkbox"
+        title="Title Inverted"
+        subtitle="Subtitle"
+        additionalInfo="Additional Info"
+        inverted
+        media={{ value: <AvatarView size={48} profileName="H D" /> }}
+        endValue={{ title: 'Title Inverted', subtitle: 'Subtitle', inverted: true }}
+      />
+      <Item
+        type="Radio"
+        title="Title Inverted"
+        subtitle="Subtitle"
+        inverted
+        media={{ value: <AvatarView size={56} profileName="H D" /> }}
+        endValue={{ title: 'Title Inverted', inverted: true }}
+      />
+      <Item
+        type="IconButton"
+        title="Title Inverted"
+        inverted
+        media={{ value: <AvatarView size={72} profileName="H D" /> }}
+        endValue={{ subtitle: 'Subtitle Inverted', inverted: true }}
+      />
+    </>
+  ),
+};

package/src/item/Item.tsx

@@ -0,0 +1,88 @@
+import { ReactNode } from 'react';
+import RadioButton from '../common/RadioButton';
+import { Position, Sentiment, Typography } from '../common';
+import Button from '../button';
+import CheckboxButton from '../checkboxButton';
+import Chevron from '../chevron';
+import IconButton from '../iconButton';
+import Switch from '../switch';
+import { ItemProps } from './Item.types';
+import Body from '../body';
+import { InfoCircle } from '@transferwise/icons';
+
+export const Item = ({
+  type,
+  title,
+  subtitle,
+  additionalInfo,
+  inverted,
+  media,
+  endValue,
+}: ItemProps) => {
+  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 priority="minimal">
+            <InfoCircle />
+          </IconButton>
+        );
+      case 'NonInteractive':
+      default:
+        return <></>;
+    }
+  };
+
+  // clean up how classes are applied
+  return (
+    <div className="item">
+      {media && <div className="item-media">{media?.value}</div>}
+      <div className="startValue">
+        <Body
+          className={!inverted ? 'item-title' : ''}
+          type={!inverted ? Typography.BODY_LARGE_BOLD : Typography.BODY_DEFAULT}
+        >
+          {title}
+        </Body>
+        <Body
+          className={inverted ? 'item-title' : ''}
+          type={!inverted ? Typography.BODY_DEFAULT : Typography.BODY_LARGE_BOLD}
+        >
+          {subtitle}
+        </Body>
+        <Body className="item-additionalInfo" type={Typography.BODY_DEFAULT}>
+          {subtitle && additionalInfo}
+        </Body>
+      </div>
+      {endValue && (
+        <div
+          className={`endValue ${endValue.sentiment} ${endValue.strikethrough ? 'strikethrough' : ''}`}
+        >
+          <Body
+            className={!endValue.inverted ? 'item-title' : endValue.sentiment}
+            type={!endValue.inverted ? Typography.BODY_LARGE_BOLD : Typography.BODY_DEFAULT}
+          >
+            {endValue.title}
+          </Body>
+          <Body
+            className={endValue.inverted ? 'item-title' : endValue.sentiment}
+            type={!endValue.inverted ? Typography.BODY_DEFAULT : Typography.BODY_LARGE_BOLD}
+          >
+            {endValue.subtitle}
+          </Body>
+        </div>
+      )}
+      {type !== 'NonInteractive' && <div className="item-action">{returnType()}</div>}
+    </div>
+  );
+};

package/src/item/Item.types.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+import { Sentiment } from '../common';
+
+export type ItemTypes =
+  | 'NonInteractive'
+  | 'Navigation'
+  | 'Radio'
+  | 'Checkbox'
+  | 'Switch'
+  | 'Button'
+  | 'IconButton';
+
+export type EndValueProps = {
+  title?: string;
+  subtitle?: string;
+  inverted?: boolean;
+  sentiment?: Sentiment.POSITIVE | Sentiment.NEGATIVE;
+  strikethrough?: boolean;
+  bold?: boolean;
+};
+
+export interface ItemProps {
+  type: ItemTypes;
+  // as: NonInteractive | Interactive; // is this enough to handle Interaction
+  media?: {
+    // type?: 'Image' | 'Avatar';
+    value: ReactNode; // should we restrict sizes?? how to set default to 48
+  };
+  title: string;
+  subtitle?: string;
+  additionalInfo?: string;
+  inverted?: boolean;
+  endValue?: EndValueProps;
+  // prompt?: any; // a lot of work to do here. start with this?
+  // spotlight?: 'Active' | 'Inactive';
+  // children?: ReactNode;
+}
+
+// type NonInteractive = 'div' | 'span';
+// type Interactive = 'a' | 'button';

package/src/main.css

@@ -2626,6 +2626,65 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   border-radius: 9999px !important;
   border-radius: var(--radius-full) !important;
 }
+.item {
+  padding: 16px;
+  border-radius: 16px;
+  border-radius: var(--radius-medium);
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  flex-direction: row;
+}
+.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-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;
+}
 .np-field-control {
   margin-top: 4px;
   margin-top: var(--size-4);

package/src/main.less

@@ -38,6 +38,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";