@transferwise/components 0.0.0-experimental-bab2370 → 0.0.0-experimental-a6e26d3

package/build/main.css

@@ -3166,6 +3166,8 @@ 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,6 +522,8 @@
   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,6 +3166,8 @@ 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/types/listItem/_stories/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/listItem/_stories/helpers.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,KAAK,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAErC;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,GAAI,QAAQ,KAAK,KAAG,KAuBvD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,SAExB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,GACzB,kBAAiB,MAAM,EAAO,MAC9B,iBAAgB,MAAM,EAAO;;;;;;CAG7B,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/listItem/_stories/helpers.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,KAAK,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAErC;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,GAAI,QAAQ,KAAK,KAAG,KAuBvD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,SAQxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,GACzB,kBAAiB,MAAM,EAAO,MAC9B,iBAAgB,MAAM,EAAO;;;;;;CAG7B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-bab2370",
+  "version": "0.0.0-experimental-a6e26d3",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/listItem/ListItem.css

@@ -522,6 +522,8 @@
   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,6 +6,7 @@
   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,15 +2,7 @@ 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,
-  Warning,
-  Home,
-  Globe,
-  People,
-  Link as LinkIcon,
-} from '@transferwise/icons';
+import { InfoCircle, Documents } from '@transferwise/icons';
 import { lorem10, lorem100, lorem20, lorem5 } from '../../test-utils';
 import Modal from '../../modal';
 import Link from '../../link';
@@ -31,7 +23,7 @@ import {
 
 export default {
   component: ListItem,
-  title: 'Content/ListItem/Common Scenarios',
+  title: 'Content/ListItem/common scenarios',
   tags: ['autodocs'],
   args: {
     title: lorem5,
@@ -234,112 +226,3 @@ 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} style={{ border: 'none' }}>
-              <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} style={{ border: 'none' }}>
-              <LinkIcon />
-            </ListItem.AvatarView>
-          }
-        />
-        <ListItem
-          title="Action required"
-          subtitle="Update your payment address"
-          media={
-            <ListItem.AvatarView size={32} style={{ border: 'none' }}>
-              <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} style={{ border: 'none' }}>
-              <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} style={{ border: 'none' }}>
-              <Globe />
-            </ListItem.AvatarView>
-          }
-        />
-        <ListItem
-          title="Let customers pay in a currency they trust"
-          media={
-            <ListItem.AvatarView size={32} style={{ border: 'none' }}>
-              <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/listItem/_stories/ListItem.story.tsx

@@ -92,7 +92,7 @@ type PreviewStoryArgs = ListItemProps & {
 };
 
 const previewArgGroup = {
-  category: 'Preview options',
+  category: 'Storybook Preview options',
   type: {
     summary: undefined,
   },

package/src/listItem/_stories/helpers.tsx

@@ -38,9 +38,15 @@ export const storySourceWithoutNoise = (config: Story): Story => {
  * In order to make preview controls work correctly, we have to refresh the render
  * by swapping the `key`. This is a workaround for the Storybook's limitation.
  */
-export const withoutKey: Decorator = (Story, { args }) => (
-  <Story key={args?.disabled ? 'disabled' : 'enabled'} />
-);
+export const withoutKey: Decorator = (Story, { args }) => {
+  const key = [
+    args.previewInteractivity,
+    args?.disabled ? 'disabled' : 'enabled',
+    args?.inverted ? 'desc' : 'asc',
+  ].join('-');
+
+  return <Story key={key} />;
+};
 
 /**
  * Not all stories need access to all controls as it causes unnecessary UI noise.

package/src/main.css

@@ -3166,6 +3166,8 @@ 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;