@transferwise/components 0.0.0-experimental-909e802 → 0.0.0-experimental-e3cd380

package/build/main.css

@@ -27152,7 +27152,6 @@ a[data-toggle="tooltip"] {
 /* Button Styles */
 
 .wds-Button {
-  background: yellow !important;
   display: inline-flex;
   flex: none;
   width: auto;

package/build/styles/button/Button.css

@@ -46,7 +46,6 @@
 }
 /* Button Styles */
 .wds-Button {
-  background: yellow !important;
   display: inline-flex;
   flex: none;
   width: auto;

package/build/styles/main.css

@@ -27152,7 +27152,6 @@ a[data-toggle="tooltip"] {
 /* Button Styles */
 
 .wds-Button {
-  background: yellow !important;
   display: inline-flex;
   flex: none;
   width: auto;

package/package.json

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

package/src/button/Button.css

@@ -46,7 +46,6 @@
 }
 /* Button Styles */
 .wds-Button {
-  background: yellow !important;
   display: inline-flex;
   flex: none;
   width: auto;

package/src/button/Button.less

@@ -1,8 +1,7 @@
-@import "./Button.vars.less";
+@import './Button.vars.less';
 
 /* Button Styles */
 .wds-Button {
-  background: yellow !important;
   display: inline-flex;
   flex: none;
   width: auto;
@@ -18,9 +17,7 @@
   border-radius: var(--Button-border-radius);
   color: var(--Button-color);
   cursor: pointer;
-  transition:
-    color,
-    background-color var(--Button-transition-duration) var(--Button-transition-easing);
+  transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
 
   &,
   &:hover,
@@ -93,7 +90,7 @@
     &:hover,
     &:active,
     &:focus {
-      .wds-Button-labelText {
+      .wds-Button-labelText{
         text-decoration: underline;
         text-underline-offset: 3px;
         text-decoration-thickness: 1px;
@@ -128,15 +125,15 @@
   &--medium {
     padding: var(--Button-medium-padding);
 
-    &:has(.wds-Button-avatars) {
+    &:has(.wds-Button-avatars){
       padding-inline-start: var(--size-8);
     }
 
-    &:has(.wds-Button-icon--end) {
+    &:has(.wds-Button-icon--end){
       padding-inline-end: var(--size-8);
     }
 
-    .wds-Button-icon--start {
+    .wds-Button-icon--start{
       margin-inline-end: var(--Button-label-gap);
     }
   }
@@ -144,15 +141,17 @@
   &--small {
     padding: var(--Button-small-padding);
 
-    &:has(.wds-Button-icon--start) {
+    &:has(.wds-Button-icon--start){
       padding-inline-start: var(--size-8);
     }
 
-    &:has(.wds-Button-icon--end) {
+    &:has(.wds-Button-icon--end){
       padding-inline-end: var(--size-8);
     }
   }
 
+
+
   // Width modifiers
   &--block {
     width: 100%;
@@ -170,11 +169,11 @@
   &-icon {
     display: inline-block;
 
-    &--md {
+    &--md{
       --Button-iconSize: 18px;
     }
 
-    &--sm {
+    &--sm{
       --Button-iconSize: 16px;
     }
 
@@ -226,12 +225,7 @@
     .wds-Button--secondary &,
     .wds-Button--secondary-neutral &,
     .wds-Button--tertiary & {
-      .np-theme-personal:not(
-          .np-theme-personal--dark,
-          .np-theme-personal--forest-green,
-          .np-theme-personal--bright-green
-        )
-        & {
+      .np-theme-personal:not(.np-theme-personal--dark, .np-theme-personal--forest-green, .np-theme-personal--bright-green) & {
         --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
       }
     }
@@ -251,6 +245,7 @@
   }
 }
 
+
 :dir(rtl) {
   .wds-Button {
     .tw-icon-chevron-right,

package/src/listItem/_stories/ListItemTest.story.tsx

@@ -0,0 +1,65 @@
+import List from '../../list';
+
+import { ListItem, type ListItemProps } from '../ListItem';
+import {
+  InfoCircle,
+  Documents,
+  Warning,
+  Home,
+  Globe,
+  People,
+  Link as LinkIcon,
+} from '@transferwise/icons';
+
+export default {
+  title: 'Aidan',
+};
+
+export const Testing = {
+  render: () => {
+    return (
+      <div
+        style={{
+          display: 'flex',
+          gap: 'var(--size-4)',
+          flexDirection: 'row',
+        }}
+      >
+        <div
+          style={{
+            flex: 1,
+          }}
+        >
+          <div
+            style={{
+              border: '1px solid var(--color-border-neutral)',
+              borderRadius: 'var(--radius-medium)',
+              padding: 'var(--size-16)',
+              display: 'flex',
+              justifyContent: 'center',
+            }}
+          >
+            <ListItem
+              title="System maintenance"
+              subtitle="Scheduled downtime"
+              inverted
+              control={
+                <ListItem.IconButton partiallyInteractive>
+                  <InfoCircle />
+                </ListItem.IconButton>
+              }
+            />
+          </div>
+        </div>
+
+        <div
+          style={{
+            flex: 1,
+          }}
+        >
+          <span>a</span>
+        </div>
+      </div>
+    );
+  },
+};

package/src/main.css

@@ -27152,7 +27152,6 @@ a[data-toggle="tooltip"] {
 /* Button Styles */
 
 .wds-Button {
-  background: yellow !important;
   display: inline-flex;
   flex: none;
   width: auto;