@transferwise/components 46.105.2 → 46.105.3

package/build/main.css

@@ -3166,8 +3166,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   width: 100%;
   border-radius: 16px;
   border-radius: var(--radius-medium);
-  background-color: #ffffff;
-  background-color: var(--color-background-screen);
   position: relative;
   padding: 12px 0;
   padding: var(--size-12) 0;

package/build/styles/listItem/ListItem.css

@@ -522,8 +522,6 @@
   width: 100%;
   border-radius: 16px;
   border-radius: var(--radius-medium);
-  background-color: #ffffff;
-  background-color: var(--color-background-screen);
   position: relative;
   padding: 12px 0;
   padding: var(--size-12) 0;

package/build/styles/main.css

@@ -3166,8 +3166,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   width: 100%;
   border-radius: 16px;
   border-radius: var(--radius-medium);
-  background-color: #ffffff;
-  background-color: var(--color-background-screen);
   position: relative;
   padding: 12px 0;
   padding: var(--size-12) 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.105.2",
+  "version": "46.105.3",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/listItem/ListItem.css

@@ -522,8 +522,6 @@
   width: 100%;
   border-radius: 16px;
   border-radius: var(--radius-medium);
-  background-color: #ffffff;
-  background-color: var(--color-background-screen);
   position: relative;
   padding: 12px 0;
   padding: var(--size-12) 0;

package/src/listItem/ListItem.less

@@ -6,7 +6,6 @@
   list-style: none;
   width: 100%;
   border-radius: var(--radius-medium);
-  background-color: var(--color-background-screen);
   position: relative;
   padding: var(--size-12) 0;
   container-type: inline-size;

package/src/listItem/_stories/ListItem.scenarios.story.tsx

@@ -2,7 +2,15 @@ import { useState } from 'react';
 import { Title, Subtitle, Description, Stories } from '@storybook/addon-docs/blocks';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { action } from 'storybook/actions';
-import { InfoCircle, Documents } from '@transferwise/icons';
+import {
+  InfoCircle,
+  Documents,
+  Warning,
+  Home,
+  Globe,
+  People,
+  Link as LinkIcon,
+} from '@transferwise/icons';
 import { lorem10, lorem100, lorem20, lorem5 } from '../../test-utils';
 import Modal from '../../modal';
 import Link from '../../link';
@@ -23,7 +31,7 @@ import {
 
 export default {
   component: ListItem,
-  title: 'Content/ListItem/common scenarios',
+  title: 'Content/ListItem/Common Scenarios',
   tags: ['autodocs'],
   args: {
     title: lorem5,
@@ -226,3 +234,112 @@ export const CopyAndPasteWithSnackbar: Story = storySourceWithoutNoise({
     );
   },
 });
+
+export const Summary: Story = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: 'shown',
+      },
+    },
+    backgrounds: {
+      default: 'light',
+      values: [
+        { name: 'light', value: '#f8f9fa' },
+        { name: 'dark', value: '#343a40' },
+      ],
+    },
+  },
+  render: () => {
+    const listItems = (
+      <List>
+        <ListItem
+          title="System maintenance"
+          subtitle="Scheduled downtime notification"
+          media={
+            <ListItem.AvatarView size={32}>
+              <Warning />
+            </ListItem.AvatarView>
+          }
+          control={
+            <ListItem.IconButton partiallyInteractive>
+              <InfoCircle />
+            </ListItem.IconButton>
+          }
+        />
+        <ListItem
+          title="One link, one QR code, many uses"
+          subtitle="Quick Pay is a unique link and QR code for your business to get paid online and in person."
+          media={
+            <ListItem.AvatarView size={32}>
+              <LinkIcon />
+            </ListItem.AvatarView>
+          }
+        />
+        <ListItem
+          title="Action required"
+          subtitle="Update your payment address"
+          media={
+            <ListItem.AvatarView size={32}>
+              <Home />
+            </ListItem.AvatarView>
+          }
+          additionalInfo={
+            <ListItem.AdditionalInfo
+              action={{ label: 'Change Address', onClick: () => console.log('hello') }}
+            />
+          }
+        />
+        <ListItem
+          title="Action required"
+          subtitle="Update your payment address"
+          media={
+            <ListItem.AvatarView size={32}>
+              <Home />
+            </ListItem.AvatarView>
+          }
+          additionalInfo={
+            <ListItem.AdditionalInfo
+              action={{ label: 'Change Address', onClick: () => console.log('hello') }}
+            />
+          }
+          control={
+            <ListItem.IconButton partiallyInteractive>
+              <InfoCircle />
+            </ListItem.IconButton>
+          }
+        />
+        <ListItem
+          title="Receive money from around the world"
+          media={
+            <ListItem.AvatarView size={32}>
+              <Globe />
+            </ListItem.AvatarView>
+          }
+        />
+        <ListItem
+          title="Let customers pay in a currency they trust"
+          media={
+            <ListItem.AvatarView size={32}>
+              <People />
+            </ListItem.AvatarView>
+          }
+        />
+      </List>
+    );
+    return (
+      <>
+        <div style={{ padding: '24px', width: '450px' }}>{listItems}</div>
+        <div
+          style={{
+            padding: '24px',
+            width: '450px',
+            backgroundColor: 'var(--color-background-neutral)',
+          }}
+        >
+          {listItems}
+        </div>
+      </>
+    );
+  },
+};

package/src/main.css

@@ -3166,8 +3166,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   width: 100%;
   border-radius: 16px;
   border-radius: var(--radius-medium);
-  background-color: #ffffff;
-  background-color: var(--color-background-screen);
   position: relative;
   padding: 12px 0;
   padding: var(--size-12) 0;