@transferwise/components 0.0.0-experimental-6fa7ff3 → 0.0.0-experimental-1775875

package/src/button/Button.css

@@ -1,247 +1,23 @@
-:root {
-  --Button-background: var(--color-interactive-accent);
-  --Button-background-hover: var(--color-interactive-accent-hover);
-  --Button-background-active: var(--color-interactive-accent-active);
-  --Button-color: var(--color-interactive-control);
-  --Button-padding: var(--size-8) var(--size-12);
-  --Button-border-radius: var(--radius-full);
-  --Button-size-small-padding: 5px var(--size-12);
-  --Button-size-medium-padding: var(--size-8) var(--size-12);
-  --Button-size-large-padding: var(--size-12) var(--size-16);
-  --Button-avatar-border-color: var(--color-border-neutral);
-  --Button-transition-duration: 150ms;
-  --Button-transition-easing: ease-in-out;
-  --Button-secondary-background: var(--color-interactive-neutral);
-  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
-  --Button-secondary-background-active: var(--color-interactive-neutral-active);
-  --Button-secondary-color: var(--color-interactive-primary);
-  --Button-tertiary-background: var(--color-background-neutral);
-  --Button-tertiary-background-hover: var(--color-background-neutral-hover);
-  --Button-tertiary-background-active: var(--color-background-neutral-active);
-  --Button-tertiary-color: var(--color-content-primary);
-  --Button-minimal-background: transparent;
-  --Button-minimal-background-hover: var(--color-background-screen-hover);
-  --Button-minimal-background-active: var(--color-background-screen-active);
-  --Button-minimal-color: var(--color-interactive-primary);
-  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
-  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
-  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
-  --Button-primary-negative-color: var(--color-contrast);
-  --Button-primary-netative-avatar-border-color: rgba(255,255,255,0.2);
-  --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
-  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
-  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
-  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
-  --Button-secondary-netative-avatar-border-color: rgba(168,32,13,0.12157);
-}
-.np-theme-personal--dark .wds-Button {
-  --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
-}
-.np-theme-personal--forest-green .wds-Button {
-  --color-interactive-neutral: rgba(159,232,112,0.2);
-  --color-interactive-neutral-hover: rgba(205,255,173,0.2);
-  --color-interactive-neutral-active: rgba(236,255,224,0.2);
-  --color-sentiment-negative-secondary: rgba(255,196,194,0.2);
-  --color-sentiment-negative-secondary-hover: rgba(255,220,219,0.2);
-  --color-sentiment-negative-secondary-active: rgba(255,235,235,0.2);
-  --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
-  --Button-secondary-netative-avatar-border-color: rgba(14,15,12,0.12157);
-}
-.np-theme-personal--bright-green .wds-Button {
-  --color-contrast: #FFFFFF;
-  --Button-secondary-color: var(--color-interactive-control);
-  --Button-secondary-negative-color: var(--color-contrast);
-  --Button-secondary-netative-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
-}
-/* Button Styles */
-.wds-Button {
-  display: inline-flex;
-  flex: none;
-  width: auto;
-  align-items: center;
-  justify-content: center;
-  vertical-align: middle;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  white-space: nowrap;
-  word-wrap: break-word;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  background-color: #00a2dd;
-  background-color: var(--Button-background);
-  border: none;
-  border-radius: 9999px;
-  border-radius: var(--Button-border-radius);
-  color: var(--Button-color);
-  cursor: pointer;
-  padding: 8px 12px;
-  padding: var(--Button-padding);
-  transition: color, background-color 150ms ease-in-out;
-  transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
-}
-.wds-Button:focus {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-.wds-Button:hover {
-  background-color: #008fc9;
-  background-color: var(--Button-background-hover);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-.wds-Button:active {
-  background-color: #0081ba;
-  background-color: var(--Button-background-active);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-.wds-Button.wds-Button--disabled,
-.wds-Button:disabled {
-  mix-blend-mode: luminosity;
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-.wds-Button.wds-Button--disabled:hover,
-.wds-Button:disabled:hover,
-.wds-Button.wds-Button--disabled:active,
-.wds-Button:disabled:active {
-  background-color: #00a2dd;
-  background-color: var(--Button-background);
-}
-.wds-Button--secondary {
-  --Button-background: var(--Button-secondary-background);
-  --Button-background-hover: var(--Button-secondary-background-hover);
-  --Button-background-active: var(--Button-secondary-background-active);
-  --Button-color: var(--Button-secondary-color);
-}
-.wds-Button--tertiary {
-  --Button-background: var(--Button-tertiary-background);
-  --Button-background-hover: var(--Button-tertiary-background-hover);
-  --Button-background-active: var(--Button-tertiary-background-active);
-  --Button-color: var(--Button-tertiary-color);
-}
-.wds-Button--tertiary .wds-Button-icon--end {
-  color: var(--color-interactive-primary);
-}
-.wds-Button--minimal {
-  --Button-background: var(--Button-minimal-background);
-  --Button-background-hover: var(--Button-minimal-background-hover);
-  --Button-background-active: var(--Button-minimal-background-active);
-  --Button-color: var(--Button-minimal-color);
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  text-underline-offset: 3px;
-  text-decoration-thickness: 1px;
-}
-.wds-Button--minimal:hover,
-.wds-Button--minimal:hover:active {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-.wds-Button--negative.wds-Button--primary {
-  --Button-background: var(--Button-primary-negative-background);
-  --Button-background-hover: var(--Button-primary-negative-background-hover);
-  --Button-background-active: var(--Button-primary-negative-background-active);
-  --Button-color: var(--Button-primary-negative-color);
-  --Button-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
-}
-.wds-Button--negative.wds-Button--secondary {
-  --Button-background: var(--Button-secondary-negative-background);
-  --Button-background-hover: var(--Button-secondary-negative-background-hover);
-  --Button-background-active: var(--Button-secondary-negative-background-active);
-  --Button-color: var(--Button-secondary-negative-color);
-  --Button-avatar-border-color: var(--Button-secondary-netative-avatar-border-color);
-}
-.wds-Button--small {
-  --Button-padding: var(--Button-size-small-padding);
-}
-.wds-Button--small .wds-Button-icon--start {
-  margin-right: 4px;
-  margin-right: var(--size-4);
-}
-[dir="rtl"] .wds-Button--small .wds-Button-icon--start {
-  margin-right: 0;
-  margin-left: 4px;
-  margin-left: var(--size-4);
-}
-.wds-Button--medium {
-  --Button-padding: var(--Button-size-medium-padding);
-}
-.wds-Button--large {
-  --Button-padding: var(--Button-size-large-padding);
-}
-.wds-Button--block {
-  width: 100%;
-}
-.wds-Button-avatars {
-  display: inline-flex;
-  margin-right: 5px;
-  margin-left: calc(4px * -1);
-  margin-left: calc(var(--size-4) * -1);
-}
-[dir="rtl"] .wds-Button-avatars {
-  margin-right: 0;
-  margin-left: 5px;
-}
-.wds-Button-avatars .np-circle {
-  --circle-border-color: var(--Button-avatar-border-color);
-}
-.wds-Button-avatars .np-avatar-view .np-avatar-view-content {
-  color: var(--Button-color);
-}
-.wds-Button-icon {
-  display: inline-block;
-}
-.wds-Button-icon--start {
-  margin-right: 8px;
-  margin-right: var(--size-8);
-}
-[dir="rtl"] .wds-Button-icon--start {
-  margin-right: 0;
-  margin-left: 8px;
-  margin-left: var(--size-8);
-}
-.wds-Button-icon--end {
-  margin-left: 4px;
-  margin-left: var(--size-4);
-}
-[dir="rtl"] .wds-Button-icon--end {
-  margin-left: 0;
-  margin-right: 4px;
-  margin-right: var(--size-4);
-}
-.wds-Button-content {
+.np-btn {
   position: relative;
 }
-.wds-Button-content--loading .wds-Button-label,
-.wds-Button-content--loading .wds-Button-media,
-.wds-Button-content--loading .wds-Button-icon {
-  visibility: hidden;
-  opacity: 0;
-}
-.wds-Button-label {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-}
-.wds-Button-loader {
+.np-btn.np-btn-block > span.btn-loader {
   position: absolute;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
+  left: 24px;
+  left: var(--size-24);
+}
+[dir="rtl"] .np-btn.np-btn-block > span.btn-loader {
+  right: 24px;
+  right: var(--size-24);
+  left: auto;
+  left: initial;
 }
-.wds-Button-loader .process-circle {
-  stroke: var(--Button-color);
+.np-btn.np-btn-xs > span.btn-loader {
+  background-size: 16px 16px;
 }
-/* RTL Styles */
-[dir="rtl"] .wds-Button .tw-icon-chevron-right,[dir="rtl"] .wds-Button .tw-icon-arrow-right {
-  transform: rotate(180deg);
+.np-btn.np-btn-xs.btn-block > span.btn-loader {
+  top: 0;
 }
-[dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left {
-  transform: rotate(180deg);
+.np-btn.disabled[class] {
+  pointer-events: auto;
 }

package/src/button/Button.less

@@ -1,218 +1,24 @@
-@import './Button.vars.less';
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
 
-/* Button Styles */
-.wds-Button {
-  display: inline-flex;
-  flex: none;
-  width: auto;
-  align-items: center;
-  justify-content: center;
-  vertical-align: middle;
-  text-align: center;
-  text-decoration: none;
-  white-space: nowrap;
-  word-wrap: break-word;
-  appearance: none;
-  background-color: var(--Button-background);
-  border: none;
-  border-radius: var(--Button-border-radius);
-  color: var(--Button-color);
-  cursor: pointer;
-  padding: var(--Button-padding);
-  transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
+.np-btn {
+  position: relative;
 
-  &:focus {
-    text-decoration: none;
-  }
-
-  &:hover {
-    background-color: var(--Button-background-hover);
-    text-decoration: none;
-  }
-
-  &:active {
-    background-color: var(--Button-background-active);
-    text-decoration: none;
-  }
-
-  &.wds-Button--disabled,
-  &:disabled {
-    mix-blend-mode: luminosity;
-    opacity: 0.45;
-    cursor: not-allowed;
-
-    &:hover,
-    &:active {
-      background-color: var(--Button-background);
-    }
-  }
-
-  // Priority modifiers
-  &--secondary {
-    --Button-background: var(--Button-secondary-background);
-    --Button-background-hover: var(--Button-secondary-background-hover);
-    --Button-background-active: var(--Button-secondary-background-active);
-    --Button-color: var(--Button-secondary-color);
-  }
-
-  &--tertiary {
-    --Button-background: var(--Button-tertiary-background);
-    --Button-background-hover: var(--Button-tertiary-background-hover);
-    --Button-background-active: var(--Button-tertiary-background-active);
-    --Button-color: var(--Button-tertiary-color);
-
-    .wds-Button-icon--end {
-      color: var(--color-interactive-primary);
-    }
-  }
-
-  &--minimal {
-    --Button-background: var(--Button-minimal-background);
-    --Button-background-hover: var(--Button-minimal-background-hover);
-    --Button-background-active: var(--Button-minimal-background-active);
-    --Button-color: var(--Button-minimal-color);
-
-    text-decoration: underline;
-    text-underline-offset: 3px;
-    text-decoration-thickness: 1px;
-
-    &:hover,
-    &:hover:active {
-      text-decoration: underline;
-    }
-  }
-
-  // Negative styles
-  &--negative {
-
-    &.wds-Button--primary {
-      --Button-background: var(--Button-primary-negative-background);
-      --Button-background-hover: var(--Button-primary-negative-background-hover);
-      --Button-background-active: var(--Button-primary-negative-background-active);
-      --Button-color: var(--Button-primary-negative-color);
-      --Button-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
-    }
-
-    &.wds-Button--secondary {
-      --Button-background: var(--Button-secondary-negative-background);
-      --Button-background-hover: var(--Button-secondary-negative-background-hover);
-      --Button-background-active: var(--Button-secondary-negative-background-active);
-      --Button-color: var(--Button-secondary-negative-color);
-      --Button-avatar-border-color: var(--Button-secondary-netative-avatar-border-color);
-    }
-  }
-
-  // Size modifiers
-  &--small {
-    --Button-padding: var(--Button-size-small-padding);
-
-    .wds-Button-icon--start {
-      margin-right: var(--size-4);
-      :dir(rtl) & {
-        margin-right: 0;
-        margin-left: var(--size-4);
-      }
-    }
-  }
-
-  &--medium {
-    --Button-padding: var(--Button-size-medium-padding);
-  }
-
-  &--large {
-    --Button-padding: var(--Button-size-large-padding);
-  }
-
-  // Width mofidiers
-  &--block {
-    width: 100%;
-  }
-
-  &-avatars {
-    display: inline-flex;
-    margin-right: 5px;
-    margin-left: calc(var(--size-4) * -1);
-
-    :dir(rtl) & {
-      margin-right: 0;
-      margin-left: 5px;
-    }
-
-    .np-circle {
-      --circle-border-color: var(--Button-avatar-border-color);
-    }
-
-    .np-avatar-view .np-avatar-view-content {
-      color: var(--Button-color);
-    }
-  }
-
-  // Icon styles
-  &-icon {
-    display: inline-block;
-
-    &--start {
-      margin-right: var(--size-8);
-      :dir(rtl) & {
-        margin-right: 0;
-        margin-left: var(--size-8);
-      }
-    }
-
-    &--end {
-      margin-left: var(--size-4);
-      :dir(rtl) & {
-        margin-left: 0;
-        margin-right: var(--size-4);
-      }
-    }
-  }
-
-  &-content {
-    position: relative;
-
-    &--loading {
-      .wds-Button-label,
-      .wds-Button-media,
-      .wds-Button-icon {
-        visibility: hidden;
-        opacity: 0;
-      }
-    }
+  &.np-btn-block > span.btn-loader {
+    position: absolute;
+    .left(var(--size-24));
   }
 
-  &-label {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
+  &.np-btn-xs > span.btn-loader {
+    background-size: 16px 16px;
   }
 
-  &-loader {
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-
-    .process-circle {
-      stroke: var(--Button-color);
-    }
+  &.np-btn-xs.btn-block > span.btn-loader {
+    top: 0;
   }
-}
-
-/* RTL Styles */
-:dir(rtl) {
-  .wds-Button {
-    .tw-icon-chevron-right,
-    .tw-icon-arrow-right {
-      transform: rotate(180deg);
-    }
 
-    .tw-icon-chevron-left,
-    .tw-icon-arrow-left {
-      transform: rotate(180deg);
-    }
+  // we do not want pointer events disabled as that
+  // prevents the custom cursor to be shown
+  &.disabled[class] {
+    pointer-events: auto;
   }
 }