@transferwise/components 0.0.0-experimental-9e19bae → 0.0.0-experimental-b762045

package/src/button/__snapshots__/{LegacyButton.spec.tsx.snap → Button.spec.tsx.snap}

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`LegacyButton by default renders a medium button of type accent and priority primary 1`] = `
+exports[`Button by default renders a medium button of type accent and priority primary 1`] = `
 <div>
   <button
     aria-busy="false"
@@ -14,7 +14,7 @@ exports[`LegacyButton by default renders a medium button of type accent and prio
 </div>
 `;
 
-exports[`LegacyButton by default renders an anchor tag with button styles of type accent and priority primary 1`] = `
+exports[`Button by default renders an anchor tag with button styles of type accent and priority primary 1`] = `
 <div>
   <a
     aria-busy="false"
@@ -28,7 +28,7 @@ exports[`LegacyButton by default renders an anchor tag with button styles of typ
 </div>
 `;
 
-exports[`LegacyButton deprecated types renders danger as negative buttons with priority secondary and logs a warning 1`] = `
+exports[`Button deprecated types renders danger as negative buttons with priority secondary and logs a warning 1`] = `
 <div>
   <button
     aria-busy="false"
@@ -42,7 +42,7 @@ exports[`LegacyButton deprecated types renders danger as negative buttons with p
 </div>
 `;
 
-exports[`LegacyButton deprecated types renders link as accent buttons with priority tertiary and logs a warning 1`] = `
+exports[`Button deprecated types renders link as accent buttons with priority tertiary and logs a warning 1`] = `
 <div>
   <button
     aria-busy="false"
@@ -56,7 +56,7 @@ exports[`LegacyButton deprecated types renders link as accent buttons with prior
 </div>
 `;
 
-exports[`LegacyButton deprecated types renders pay as positive buttons and logs a warning 1`] = `
+exports[`Button deprecated types renders pay as positive buttons and logs a warning 1`] = `
 <div>
   <button
     aria-busy="false"
@@ -70,7 +70,7 @@ exports[`LegacyButton deprecated types renders pay as positive buttons and logs
 </div>
 `;
 
-exports[`LegacyButton deprecated types renders primary as accent buttons and logs a warning 1`] = `
+exports[`Button deprecated types renders primary as accent buttons and logs a warning 1`] = `
 <div>
   <button
     aria-busy="false"
@@ -84,7 +84,7 @@ exports[`LegacyButton deprecated types renders primary as accent buttons and log
 </div>
 `;
 
-exports[`LegacyButton other states renders as block if block is true 1`] = `
+exports[`Button other states renders as block if block is true 1`] = `
 <div>
   <button
     aria-busy="false"
@@ -98,7 +98,7 @@ exports[`LegacyButton other states renders as block if block is true 1`] = `
 </div>
 `;
 
-exports[`LegacyButton priorities defaults tertiary buttons to secondary for positive buttons 1`] = `
+exports[`Button priorities defaults tertiary buttons to secondary for positive buttons 1`] = `
 <div>
   <button
     aria-busy="false"
@@ -112,7 +112,7 @@ exports[`LegacyButton priorities defaults tertiary buttons to secondary for posi
 </div>
 `;
 
-exports[`LegacyButton priorities defaults tertiary buttons to secondary for positive buttons 2`] = `
+exports[`Button priorities defaults tertiary buttons to secondary for positive buttons 2`] = `
 <div>
   <button
     aria-busy="false"
@@ -126,7 +126,7 @@ exports[`LegacyButton priorities defaults tertiary buttons to secondary for posi
 </div>
 `;
 
-exports[`LegacyButton priorities renders primary buttons 1`] = `
+exports[`Button priorities renders primary buttons 1`] = `
 <div>
   <button
     aria-busy="false"
@@ -140,7 +140,7 @@ exports[`LegacyButton priorities renders primary buttons 1`] = `
 </div>
 `;
 
-exports[`LegacyButton priorities renders primary buttons 2`] = `
+exports[`Button priorities renders primary buttons 2`] = `
 <div>
   <button
     aria-busy="false"
@@ -154,7 +154,7 @@ exports[`LegacyButton priorities renders primary buttons 2`] = `
 </div>
 `;
 
-exports[`LegacyButton priorities renders primary buttons 3`] = `
+exports[`Button priorities renders primary buttons 3`] = `
 <div>
   <button
     aria-busy="false"
@@ -168,7 +168,7 @@ exports[`LegacyButton priorities renders primary buttons 3`] = `
 </div>
 `;
 
-exports[`LegacyButton priorities renders secondary buttons 1`] = `
+exports[`Button priorities renders secondary buttons 1`] = `
 <div>
   <button
     aria-busy="false"
@@ -182,7 +182,7 @@ exports[`LegacyButton priorities renders secondary buttons 1`] = `
 </div>
 `;
 
-exports[`LegacyButton priorities renders secondary buttons 2`] = `
+exports[`Button priorities renders secondary buttons 2`] = `
 <div>
   <button
     aria-busy="false"
@@ -196,7 +196,7 @@ exports[`LegacyButton priorities renders secondary buttons 2`] = `
 </div>
 `;
 
-exports[`LegacyButton priorities renders secondary buttons 3`] = `
+exports[`Button priorities renders secondary buttons 3`] = `
 <div>
   <button
     aria-busy="false"
@@ -210,7 +210,7 @@ exports[`LegacyButton priorities renders secondary buttons 3`] = `
 </div>
 `;
 
-exports[`LegacyButton priorities renders tertiary buttons 1`] = `
+exports[`Button priorities renders tertiary buttons 1`] = `
 <div>
   <button
     aria-busy="false"
@@ -224,7 +224,7 @@ exports[`LegacyButton priorities renders tertiary buttons 1`] = `
 </div>
 `;
 
-exports[`LegacyButton sizes renders large buttons 1`] = `
+exports[`Button sizes renders large buttons 1`] = `
 <div>
   <button
     aria-busy="false"
@@ -238,7 +238,7 @@ exports[`LegacyButton sizes renders large buttons 1`] = `
 </div>
 `;
 
-exports[`LegacyButton sizes renders medium buttons 1`] = `
+exports[`Button sizes renders medium buttons 1`] = `
 <div>
   <button
     aria-busy="false"
@@ -252,7 +252,7 @@ exports[`LegacyButton sizes renders medium buttons 1`] = `
 </div>
 `;
 
-exports[`LegacyButton sizes renders small buttons 1`] = `
+exports[`Button sizes renders small buttons 1`] = `
 <div>
   <button
     aria-busy="false"
@@ -266,7 +266,7 @@ exports[`LegacyButton sizes renders small buttons 1`] = `
 </div>
 `;
 
-exports[`LegacyButton types renders accent buttons 1`] = `
+exports[`Button types renders accent buttons 1`] = `
 <div>
   <button
     aria-busy="false"
@@ -280,7 +280,7 @@ exports[`LegacyButton types renders accent buttons 1`] = `
 </div>
 `;
 
-exports[`LegacyButton types renders negative buttons 1`] = `
+exports[`Button types renders negative buttons 1`] = `
 <div>
   <button
     aria-busy="false"
@@ -294,7 +294,7 @@ exports[`LegacyButton types renders negative buttons 1`] = `
 </div>
 `;
 
-exports[`LegacyButton types renders positive buttons 1`] = `
+exports[`Button types renders positive buttons 1`] = `
 <div>
   <button
     aria-busy="false"

package/src/button/index.ts

@@ -1,2 +1,3 @@
-export { default } from './Button.resolver';
-export type { ButtonProps } from './Button.resolver';
+export { default } from './Button';
+
+export type { Props as ButtonProps } from './Button';

package/src/circularButton/CircularButton.css

@@ -2,173 +2,32 @@
   display: inline-flex;
   flex-direction: column;
   align-items: center;
-  text-align: center;
   cursor: pointer;
-  position: relative;
 }
-.np-circular-btn .tw-icon {
-  position: absolute;
-  top: 16px;
-  top: var(--size-16);
-  pointer-events: none;
-  color: white;
-  transition: color 0.15s ease-in-out;
-  width: 100%;
-  left: 0;
-}
-[dir="rtl"] .np-circular-btn .tw-icon {
-  right: 0;
-  left: auto;
-  left: initial;
-}
-@media (max-width: 320px) {
-  .np-circular-btn .tw-icon {
-    top: 12px;
-    top: var(--size-12);
-  }
-}
-.np-circular-btn .tw-icon > svg {
-  margin: 0 auto;
-}
-.np-theme-personal .np-circular-btn {
-  /* stylelint-disable-next-line no-duplicate-selectors */
-}
-.np-theme-personal .np-circular-btn .tw-icon,
-.np-theme-personal .np-circular-btn .tw-icon:hover,
-.np-theme-personal .np-circular-btn .tw-icon:active {
-  color: var(--color-interactive-control);
-}
-.np-theme-personal .np-circular-btn.negative .tw-icon,
-.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled):not(:disabled):hover .tw-icon,
-.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled):not(:disabled):active .tw-icon {
-  color: var(--color-contrast) !important;
-}
-.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled):not(:disabled) .tw-icon {
-  color: var(--color-sentiment-negative) !important;
-}
-.np-circular-btn.accent .np-circular-btn__label {
-  color: #00a2dd;
-  color: var(--color-interactive-accent);
-}
-.np-circular-btn.accent:not(.disabled):not(:disabled):hover .np-circular-btn__label {
-  color: #008fc9;
-  color: var(--color-interactive-accent-hover);
-}
-.np-circular-btn.accent:active .np-circular-btn__label,
-.np-circular-btn.accent input[type="button"]:active ~ .np-circular-btn__label {
-  color: #0081ba;
-  color: var(--color-interactive-accent-active);
-}
-.np-circular-btn.accent.secondary .tw-icon {
-  color: #00a2dd;
-  color: var(--color-interactive-accent);
-}
-.np-circular-btn.accent.secondary:not(.disabled):not(:disabled):hover .tw-icon,
-.np-circular-btn.accent.secondary input[type="button"]:active + .tw-icon {
-  color: white;
-}
-.np-circular-btn.positive .np-circular-btn__label {
-  color: #2ead4b;
-  color: var(--color-interactive-positive);
-}
-.np-circular-btn.positive:not(.disabled):not(:disabled):hover .np-circular-btn__label {
-  color: #069939;
-  color: var(--color-interactive-positive-hover);
-}
-.np-circular-btn.positive:active .np-circular-btn__label,
-.np-circular-btn.positive input[type="button"]:active ~ .np-circular-btn__label {
-  color: #008b2b;
-  color: var(--color-interactive-positive-active);
-}
-.np-circular-btn.positive.secondary .tw-icon {
-  color: #2ead4b;
-  color: var(--color-interactive-positive);
-}
-.np-circular-btn.positive.secondary:not(.disabled):not(:disabled):hover .tw-icon,
-.np-circular-btn.positive.secondary input[type="button"]:active + .tw-icon {
-  color: white;
-}
-.np-circular-btn.negative .np-circular-btn__label {
-  color: #e74848;
-  color: var(--color-interactive-negative);
-}
-.np-circular-btn.negative:not(.disabled):not(:disabled):hover .np-circular-btn__label {
-  color: #d03238;
-  color: var(--color-interactive-negative-hover);
-}
-.np-circular-btn.negative:active .np-circular-btn__label,
-.np-circular-btn.negative input[type="button"]:active ~ .np-circular-btn__label {
-  color: #bf1e2c;
-  color: var(--color-interactive-negative-active);
-}
-.np-circular-btn.negative.secondary .tw-icon {
-  color: #e74848;
-  color: var(--color-interactive-negative);
-}
-.np-circular-btn.negative.secondary:not(.disabled):not(:disabled):hover .tw-icon,
-.np-circular-btn.negative.secondary input[type="button"]:active + .tw-icon {
-  color: white;
-}
-.np-theme-personal .np-circular-btn.accent .np-circular-btn__label {
+.np-circular-btn-primary-default .np-circular-btn-label,
+.np-circular-btn-secondary-default .np-circular-btn-label {
   color: var(--color-interactive-primary);
 }
-.np-theme-personal .np-circular-btn.accent:not(.disabled):not(:disabled):hover .np-circular-btn__label {
+.np-circular-btn-primary-default .np-circular-btn-label:not(.disabled):not(:disabled):hover,
+.np-circular-btn-secondary-default .np-circular-btn-label:not(.disabled):not(:disabled):hover {
   color: var(--color-interactive-primary-hover);
 }
-.np-theme-personal .np-circular-btn.accent:active .np-circular-btn__label,
-.np-theme-personal .np-circular-btn.accent input[type="button"]:active ~ .np-circular-btn__label {
+.np-circular-btn-primary-default .np-circular-btn-label:not(.disabled):not(:disabled):active,
+.np-circular-btn-secondary-default .np-circular-btn-label:not(.disabled):not(:disabled):active {
   color: var(--color-interactive-primary-active);
 }
-.np-theme-personal .np-circular-btn.accent.secondary .tw-icon {
-  color: var(--color-interactive-primary);
-}
-.np-theme-personal .np-circular-btn.accent.secondary:not(.disabled):not(:disabled):hover .tw-icon,
-.np-theme-personal .np-circular-btn.accent.secondary input[type="button"]:active + .tw-icon {
-  color: white;
-  color: var(--color-interactive-control);
-}
-.np-theme-personal .np-circular-btn.accent.secondary:active input[type="button"] + .tw-icon {
-  color: var(--color-interactive-control);
-}
-.np-theme-personal .np-circular-btn.positive .np-circular-btn__label {
-  color: var(--color-interactive-primary);
-}
-.np-theme-personal .np-circular-btn.positive:not(.disabled):not(:disabled):hover .np-circular-btn__label {
-  color: var(--color-interactive-primary-hover);
-}
-.np-theme-personal .np-circular-btn.positive:active .np-circular-btn__label,
-.np-theme-personal .np-circular-btn.positive input[type="button"]:active ~ .np-circular-btn__label {
-  color: var(--color-interactive-primary-active);
-}
-.np-theme-personal .np-circular-btn.positive.secondary .tw-icon {
-  color: var(--color-interactive-primary);
-}
-.np-theme-personal .np-circular-btn.positive.secondary:not(.disabled):not(:disabled):hover .tw-icon,
-.np-theme-personal .np-circular-btn.positive.secondary input[type="button"]:active + .tw-icon {
-  color: white;
-  color: var(--color-interactive-control);
-}
-.np-theme-personal .np-circular-btn.positive.secondary:active input[type="button"] + .tw-icon {
-  color: var(--color-interactive-control);
-}
-.np-theme-personal .np-circular-btn.negative .np-circular-btn__label {
-  color: var(--color-sentiment-negative);
-}
-.np-theme-personal .np-circular-btn.negative:not(.disabled):not(:disabled):hover .np-circular-btn__label {
-  color: var(--color-sentiment-negative-hover);
-}
-.np-theme-personal .np-circular-btn.negative:active .np-circular-btn__label,
-.np-theme-personal .np-circular-btn.negative input[type="button"]:active ~ .np-circular-btn__label {
-  color: var(--color-sentiment-negative-active);
+.np-circular-btn-primary-negative .np-circular-btn-label,
+.np-circular-btn-secondary-negative .np-circular-btn-label {
+  color: var(--color-sentiment-negative-primary);
 }
-.np-theme-personal .np-circular-btn.negative.secondary .tw-icon {
-  color: var(--color-sentiment-negative);
+.np-circular-btn-primary-negative .np-circular-btn-label:not(.disabled):not(:disabled):hover,
+.np-circular-btn-secondary-negative .np-circular-btn-label:not(.disabled):not(:disabled):hover {
+  color: var(--color-sentiment-negative-primary-hover);
 }
-.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled):not(:disabled):hover .tw-icon,
-.np-theme-personal .np-circular-btn.negative.secondary input[type="button"]:active + .tw-icon {
-  color: white;
-  color: var(--color-interactive-control);
+.np-circular-btn-primary-negative .np-circular-btn-label:not(.disabled):not(:disabled):active,
+.np-circular-btn-secondary-negative .np-circular-btn-label:not(.disabled):not(:disabled):active {
+  color: var(--color-sentiment-negative-primary-active);
 }
-.np-theme-personal .np-circular-btn.negative.secondary:active input[type="button"] + .tw-icon {
-  color: var(--color-interactive-control);
+.np-circular-btn-disabled {
+  cursor: not-allowed;
 }

package/src/circularButton/CircularButton.less

@@ -1,105 +1,36 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
-@import "./_button-label-states.less";
-
 .np-circular-btn {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
-  text-align: center;
   cursor: pointer;
-  position: relative;
-
-  .tw-icon {
-    position: absolute;
-    top: var(--size-16);
-    pointer-events: none;
-    color: white;
-    transition: color 0.15s ease-in-out;
-    width: 100%;
-    .left(0);
 
-    @media (--screen-400-zoom) {
-      top: var(--size-12);
-    }
-
-    > svg {
-      margin: 0 auto;
+  &-primary-default,
+  &-secondary-default {
+    .np-circular-btn-label {
+      color: var(--color-interactive-primary);
+      &:not(.disabled, :disabled):hover {
+        color: var(--color-interactive-primary-hover);
+      }
+      &:not(.disabled, :disabled):active {
+        color: var(--color-interactive-primary-active);
+      }
     }
   }
 
-  .np-theme-personal & {
-    /* stylelint-disable-next-line no-duplicate-selectors */
-    .tw-icon {
-      &,
-      &:hover,
-      &:active {
-        color: var(--color-interactive-control);
+  &-primary-negative,
+  &-secondary-negative {
+    .np-circular-btn-label {
+      color: var(--color-sentiment-negative-primary);
+      &:not(.disabled, :disabled):hover {
+        color: var(--color-sentiment-negative-primary-hover);
+      }
+      &:not(.disabled, :disabled):active {
+        color: var(--color-sentiment-negative-primary-active);
       }
-    }
-
-    &.negative .tw-icon,
-    &.negative.secondary:not(.disabled, :disabled):hover .tw-icon,
-    &.negative.secondary:not(.disabled, :disabled):active .tw-icon {
-      // TODO, this will need to be removed when we update our CSS architecture
-      color: var(--color-contrast) !important;
-    }
-
-    &.negative.secondary:not(.disabled, :disabled) .tw-icon {
-      // TODO, this will need to be removed when we update our CSS architecture
-      color: var(--color-sentiment-negative) !important;
     }
   }
-}
-
-.button-label-states(
-  np-circular-btn,
-  accent,
-  var(--color-interactive-accent),
-  var(--color-interactive-accent-hover),
-  var(--color-interactive-accent-active)
-);
-
-.button-label-states(
-  np-circular-btn,
-  positive,
-  var(--color-interactive-positive),
-  var(--color-interactive-positive-hover),
-  var(--color-interactive-positive-active)
-);
 
-.button-label-states(
-  np-circular-btn,
-  negative,
-  var(--color-interactive-negative),
-  var(--color-interactive-negative-hover),
-  var(--color-interactive-negative-active)
-);
-
-.np-theme-personal {
-  .button-label-states(
-    np-circular-btn,
-    accent,
-    var(--color-interactive-primary),
-    var(--color-interactive-primary-hover),
-    var(--color-interactive-primary-active),
-    true
-  );
-
-  .button-label-states(
-    np-circular-btn,
-    positive,
-    var(--color-interactive-primary),
-    var(--color-interactive-primary-hover),
-    var(--color-interactive-primary-active),
-    true
-  );
-
-  .button-label-states(
-    np-circular-btn,
-    negative,
-    var(--color-sentiment-negative),
-    var(--color-sentiment-negative-hover),
-    var(--color-sentiment-negative-active),
-    true
-  );
+  &-disabled {
+    cursor: not-allowed;
+  }
 }

package/src/circularButton/CircularButton.story.tsx

@@ -5,14 +5,16 @@ import { ControlType, Priority } from '../common';
 import { Meta, StoryObj } from '@storybook/react';
 import CircularButton from './CircularButton';
 import { storyConfig } from '../test-utils';
+import Title from '../title';
+import Body from '../body';
 
 export default {
   component: CircularButton,
   title: 'Actions/CircularButton',
+  tags: ['autodocs'],
   args: {
     children: 'Button text',
-    // Needs to be cast because we're mapping icon names to components
-    icon: 'Freeze' as unknown as React.ReactElement,
+    icon: <Icons.Freeze />,
   },
   argTypes: {
     icon: {
@@ -28,8 +30,8 @@ type Story = StoryObj<typeof CircularButton>;
 
 export const Basic: Story = {
   args: {
-    priority: Priority.PRIMARY,
-    type: ControlType.ACCENT,
+    priority: 'primary',
+    type: 'default',
     disabled: false,
   },
 };
@@ -41,26 +43,45 @@ export const All: Story = {
   render: (props) => {
     return (
       <>
-        <div className="m-b-2">
-          <div className="title-4 m-b-1">Accent</div>
-          <CircularButton {...props} priority={Priority.PRIMARY} type={ControlType.ACCENT} />
-          <CircularButton {...props} priority={Priority.SECONDARY} type={ControlType.ACCENT} />
-        </div>
-        <div className="m-b-2">
-          <div className="title-4 m-b-1">Positive</div>
-          <CircularButton {...props} priority={Priority.PRIMARY} type={ControlType.POSITIVE} />
-          <CircularButton {...props} priority={Priority.SECONDARY} type={ControlType.POSITIVE} />
-        </div>
-        <div className="m-b-2">
-          <div className="title-4 m-b-1">Negative</div>
-          <CircularButton {...props} priority={Priority.PRIMARY} type={ControlType.NEGATIVE} />
-          <CircularButton {...props} priority={Priority.SECONDARY} type={ControlType.NEGATIVE} />
-        </div>
-        <div className="m-b-2">
-          <div className="title-4 m-b-1">Disabled</div>
-          <CircularButton {...props} disabled />
-          <CircularButton {...props} priority={Priority.SECONDARY} disabled />
-        </div>
+        <Title type="title-subsection" className="m-y-2">
+          Default (Primary and secondary)
+        </Title>
+        <Body>
+          <CircularButton {...props} priority="primary" type="default" />
+          <CircularButton {...props} priority="secondary" type="default" />
+          <CircularButton {...props} priority="primary" type="default" disabled />
+          <CircularButton {...props} priority="secondary" type="default" disabled />
+        </Body>
+
+        <Title type="title-subsection" className="m-y-2">
+          Negative (Primary and secondary)
+        </Title>
+        <Body>
+          <CircularButton {...props} priority="primary" type="negative" />
+          <CircularButton {...props} priority="secondary" type="negative" />
+          <CircularButton {...props} priority="primary" type="negative" disabled />
+          <CircularButton {...props} priority="secondary" type="negative" disabled />
+        </Body>
+
+        <Title type="title-body" className="m-y-2">
+          Accent (Deprecated)
+        </Title>
+        <Body>
+          <CircularButton {...props} priority="primary" type="accent" />
+          <CircularButton {...props} priority="secondary" type="accent" />
+          <CircularButton {...props} priority="primary" type="accent" disabled />
+          <CircularButton {...props} priority="secondary" type="accent" disabled />
+        </Body>
+
+        <Title type="title-body" className="m-y-2">
+          Positive (Deprecated)
+        </Title>
+        <Body>
+          <CircularButton {...props} priority="primary" type="positive" />
+          <CircularButton {...props} priority="secondary" type="positive" />
+          <CircularButton {...props} priority="primary" type="positive" disabled />
+          <CircularButton {...props} priority="secondary" type="positive" disabled />
+        </Body>
       </>
     );
   },