@transferwise/components 0.0.0-experimental-4242b3a → 0.0.0-experimental-548b806

package/build/main.css

@@ -2682,6 +2682,17 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
+.wds-list-item.disabled {
+  filter: none;
+  opacity: 1;
+}
+.wds-list-item.disabled label {
+  cursor: not-allowed;
+}
+.wds-list-item.disabled .tw-icon-backslash-circle {
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
 .wds-list-item-spotlight-active {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);

package/build/styles/listItem/ListItem.css

@@ -62,6 +62,17 @@
   -webkit-text-decoration: none;
   text-decoration: none;
 }
+.wds-list-item.disabled {
+  filter: none;
+  opacity: 1;
+}
+.wds-list-item.disabled label {
+  cursor: not-allowed;
+}
+.wds-list-item.disabled .tw-icon-backslash-circle {
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
 .wds-list-item-spotlight-active {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);

package/build/styles/main.css

@@ -2682,6 +2682,17 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
+.wds-list-item.disabled {
+  filter: none;
+  opacity: 1;
+}
+.wds-list-item.disabled label {
+  cursor: not-allowed;
+}
+.wds-list-item.disabled .tw-icon-backslash-circle {
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
 .wds-list-item-spotlight-active {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);

package/build/types/listItem/ListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,SAAS,EAIV,MAAM,OAAO,CAAC;AAIf,OAAO,EAAc,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAC3E,OAAO,EAAY,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AACrE,OAAO,EAAE,uBAAuB,EAAc,MAAM,sBAAsB,CAAC;AAE3E,OAAO,EAAU,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAO/D,MAAM,MAAM,aAAa,GACrB,iBAAiB,GACjB,YAAY,GACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,aAAa,CAAC;AAElB,MAAM,MAAM,oBAAoB,GAC5B,uBAAuB,GAEvB,qBAAqB,GACrB,mBAAmB,GACnB,uBAAuB,CAAC;AAE5B,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,cAAc,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,eAAe,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACvD,GAAG,EAAE;QACH,KAAK,EAAE,MAAM,CAAC;QACd,cAAc,EAAE,MAAM,CAAC;QACvB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,CAAC,CAAC;CAC7C,CAAC;AAIF,eAAO,MAAM,eAAe,8CAA2C,CAAC;AAExE,eAAO,MAAM,QAAQ;6JAclB,KAAK;;;;;;;;;;;CA8GP,CAAC;AAqFF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,SAAS,EAIV,MAAM,OAAO,CAAC;AAIf,OAAO,EAAc,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAC3E,OAAO,EAAY,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AACrE,OAAO,EAAE,uBAAuB,EAAc,MAAM,sBAAsB,CAAC;AAE3E,OAAO,EAAU,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAO/D,MAAM,MAAM,aAAa,GACrB,iBAAiB,GACjB,YAAY,GACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,aAAa,CAAC;AAElB,MAAM,MAAM,oBAAoB,GAC5B,uBAAuB,GAEvB,qBAAqB,GACrB,mBAAmB,GACnB,uBAAuB,CAAC;AAE5B,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,cAAc,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,eAAe,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACvD,GAAG,EAAE;QACH,KAAK,EAAE,MAAM,CAAC;QACd,cAAc,EAAE,MAAM,CAAC;QACvB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,CAAC,CAAC;CAC7C,CAAC;AAIF,eAAO,MAAM,eAAe,8CAA2C,CAAC;AAExE,eAAO,MAAM,QAAQ;6JAclB,KAAK;;;;;;;;;;;CA+GP,CAAC;AAqFF,eAAe,QAAQ,CAAC"}

package/build/types/listItem/ListItemNavigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemNavigation.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItemNavigation.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAIrD,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,CAAC;AAEvF,eAAO,MAAM,UAAU,GAAuB,oBAA0B,uBAAuB,gCAe9F,CAAC"}
+{"version":3,"file":"ListItemNavigation.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItemNavigation.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAIrD,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,CAAC;AAEvF,eAAO,MAAM,UAAU,GAAuB,oBAA0B,uBAAuB,gCAkB9F,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-4242b3a",
+  "version": "0.0.0-experimental-548b806",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -91,10 +91,10 @@
     "rollup": "^4.41.1",
     "rollup-preserve-directives": "^1.1.3",
     "storybook": "^8.6.14",
-    "@transferwise/less-config": "3.1.2",
-    "@transferwise/neptune-css": "14.24.4",
     "@wise/components-theming": "1.6.3",
-    "@wise/wds-configs": "0.0.0"
+    "@wise/wds-configs": "0.0.0",
+    "@transferwise/less-config": "3.1.2",
+    "@transferwise/neptune-css": "14.24.4"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.22.0",

package/src/listItem/ListItem.css

@@ -62,6 +62,17 @@
   -webkit-text-decoration: none;
   text-decoration: none;
 }
+.wds-list-item.disabled {
+  filter: none;
+  opacity: 1;
+}
+.wds-list-item.disabled label {
+  cursor: not-allowed;
+}
+.wds-list-item.disabled .tw-icon-backslash-circle {
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
 .wds-list-item-spotlight-active {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);

package/src/listItem/ListItem.less

@@ -72,6 +72,19 @@
       }
     }
 
+    &.disabled {
+      filter: none;
+      opacity: 1;
+
+      label {
+        cursor: not-allowed;
+      }
+
+      .tw-icon-backslash-circle {
+        color: var(--color-content-tertiary);
+      }
+    }
+
     &-spotlight {
         &-active {
             background-color: var(--color-background-neutral);

package/src/listItem/ListItem.story.tsx

@@ -458,4 +458,125 @@ export const ButtonInteractivity: Story = {
   },
 };
 
+export const Disabled: Story = {
+  render: () => (
+    <div>
+      <ListItem
+        disabled
+        media={
+          <ListItem.AvatarView>
+            <MultiCurrency />
+          </ListItem.AvatarView>
+        }
+        title="Navigation"
+        subtitle={lorem5}
+        control={<ListItem.Navigation onClick={() => {}} />}
+      />
+      <ListItem
+        disabled
+        media={
+          <ListItem.AvatarView>
+            <MultiCurrency />
+          </ListItem.AvatarView>
+        }
+        title="Button secondary neutral"
+        subtitle={lorem5}
+        control={<ListItem.Button priority="secondary-neutral">Secondary Neutral</ListItem.Button>}
+      />
+      <ListItem
+        disabled
+        media={
+          <ListItem.AvatarView>
+            <MultiCurrency />
+          </ListItem.AvatarView>
+        }
+        title="Button primary"
+        subtitle={lorem5}
+        control={<ListItem.Button priority="primary">Primary</ListItem.Button>}
+      />
+      <ListItem
+        disabled
+        media={
+          <ListItem.AvatarView>
+            <MultiCurrency />
+          </ListItem.AvatarView>
+        }
+        title="Button tertiary"
+        subtitle={lorem5}
+        control={<ListItem.Button priority="tertiary">Tertiary</ListItem.Button>}
+      />
+      <ListItem
+        disabled
+        media={
+          <ListItem.AvatarView>
+            <MultiCurrency />
+          </ListItem.AvatarView>
+        }
+        title="Icon Button"
+        subtitle={lorem5}
+        control={
+          <ListItem.IconButton>
+            <Plus />
+          </ListItem.IconButton>
+        }
+      />
+      <ListItem
+        disabled
+        media={
+          <ListItem.AvatarView>
+            <MultiCurrency />
+          </ListItem.AvatarView>
+        }
+        title="Checkbox"
+        subtitle={lorem5}
+        control={<ListItem.Checkbox />}
+      />
+      <ListItem
+        disabled
+        media={
+          <ListItem.AvatarView>
+            <MultiCurrency />
+          </ListItem.AvatarView>
+        }
+        title="Checkbox checked"
+        subtitle={lorem5}
+        control={<ListItem.Checkbox checked />}
+      />
+      <ListItem
+        disabled
+        media={
+          <ListItem.AvatarView>
+            <MultiCurrency />
+          </ListItem.AvatarView>
+        }
+        title="Checkbox indeterminate"
+        subtitle={lorem5}
+        control={<ListItem.Checkbox indeterminate />}
+      />
+      <ListItem
+        disabled
+        media={
+          <ListItem.AvatarView>
+            <MultiCurrency />
+          </ListItem.AvatarView>
+        }
+        title="Switch on"
+        subtitle={lorem5}
+        control={<ListItem.Switch checked onClick={() => {}} />}
+      />
+      <ListItem
+        disabled
+        media={
+          <ListItem.AvatarView>
+            <MultiCurrency />
+          </ListItem.AvatarView>
+        }
+        title="Switch off"
+        subtitle={lorem5}
+        control={<ListItem.Switch onClick={() => {}} />}
+      />
+    </div>
+  ),
+};
+
 // add intaces with dark mode

package/src/listItem/ListItem.tsx

@@ -134,6 +134,7 @@ export const ListItem = ({
           {
             'wds-list-item-interactive':
               controlType !== 'non-interactive' &&
+              !disabled &&
               !(controlProps as ListItemButtonProps | ListItemIconButtonProps)
                 ?.partiallyInteractive,
           },

package/src/listItem/ListItemButton.tsx

@@ -6,7 +6,7 @@ export type ListItemButtonProps = Omit<NewButtonProps, 'v2' | 'size' | 'disabled
 };
 
 export const Button = ({
-  priority = 'secondary-neutral',
+  priority = 'secondary',
   partiallyInteractive,
   ...props
 }: ListItemButtonProps) => {

package/src/listItem/ListItemNavigation.tsx

@@ -8,7 +8,10 @@ export type ListItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href' | 'ta
 export const Navigation = function Navigation({ href = '#', ...props }: ListItemNavigationProps) {
   const { baseItemProps } = useItemControl('navigation', { href, ...props });
   const isLink = href !== '#';
-  const icon = baseItemProps.disabled ? <BackslashCircle size={24} /> : <ChevronRight size={24} />;
+  const icon = <ChevronRight size={24} />;
+
+  if (baseItemProps.disabled) return <BackslashCircle size={24} />;
+
   return isLink ? (
     <>{icon}</>
   ) : (

package/src/main.css

@@ -2682,6 +2682,17 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
+.wds-list-item.disabled {
+  filter: none;
+  opacity: 1;
+}
+.wds-list-item.disabled label {
+  cursor: not-allowed;
+}
+.wds-list-item.disabled .tw-icon-backslash-circle {
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
 .wds-list-item-spotlight-active {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);