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

package/src/main.css

@@ -716,7 +716,7 @@ div.critical-comms .critical-comms-body {
 .np-btn.disabled[class] {
   pointer-events: auto;
 }
-:root {
+.wds-Button {
   --Button-background: var(--color-interactive-accent);
   --Button-background-hover: var(--color-interactive-accent-hover);
   --Button-background-active: var(--color-interactive-accent-active);
@@ -726,7 +726,6 @@ div.critical-comms .critical-comms-body {
   --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);
@@ -745,31 +744,15 @@ div.critical-comms .critical-comms-body {
   --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 {
@@ -787,16 +770,12 @@ div.critical-comms .critical-comms-body {
   -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 {
@@ -804,13 +783,11 @@ div.critical-comms .critical-comms-body {
   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;
@@ -825,7 +802,6 @@ div.critical-comms .critical-comms-body {
 .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 {
@@ -863,14 +839,12 @@ div.critical-comms .critical-comms-body {
   --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);
@@ -903,9 +877,6 @@ div.critical-comms .critical-comms-body {
   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);
 }
@@ -963,6 +934,27 @@ div.critical-comms .critical-comms-body {
 [dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left {
   transform: rotate(180deg);
 }
+/* Avatar border transparency */
+/* dark buttons get 20% transparency, light buttons get 12% */
+.wds-Button-avatars .np-circle {
+  --circle-border-color: color-mix(in srgb, var(--Button-color) 20%, transparent);
+}
+.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary.wds-Button--negative .wds-Button-avatars .np-circle,
+.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary .wds-Button-avatars .np-circle,
+.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--tertiary .wds-Button-avatars .np-circle,
+.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--minimal .wds-Button-avatars .np-circle {
+  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
+}
+.np-theme-personal--dark .wds-Button--primary .wds-Button-avatars .np-circle,
+.np-theme-personal--dark .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle,
+.np-theme-personal--forest-green .wds-Button--primary .wds-Button-avatars .np-circle,
+.np-theme-personal--forest-green .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle {
+  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
+}
+.np-theme-personal--bright-green .wds-Button--tertiary .wds-Button-avatars .np-circle,
+.np-theme-personal--bright-green .wds-Button--minimal .wds-Button-avatars .np-circle {
+  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
+}
 .np-card {
   overflow: hidden;
   transition-property: transform, box-shadow;
@@ -1442,34 +1434,175 @@ div.critical-comms .critical-comms-body {
   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-primary-default .np-circular-btn-label,
-.np-circular-btn-secondary-default .np-circular-btn-label {
+.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 {
   color: var(--color-interactive-primary);
 }
-.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 {
+.np-theme-personal .np-circular-btn.accent:not(.disabled):not(:disabled):hover .np-circular-btn__label {
   color: var(--color-interactive-primary-hover);
 }
-.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 {
+.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 {
   color: var(--color-interactive-primary-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.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-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.accent.secondary:active input[type="button"] + .tw-icon {
+  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.positive .np-circular-btn__label {
+  color: var(--color-interactive-primary);
 }
-.np-circular-btn-disabled {
-  cursor: not-allowed;
+.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-theme-personal .np-circular-btn.negative.secondary .tw-icon {
+  color: var(--color-sentiment-negative);
+}
+.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-theme-personal .np-circular-btn.negative.secondary:active input[type="button"] + .tw-icon {
+  color: var(--color-interactive-control);
 }
 .np-circle {
   border-radius: 9999px;

package/src/slidingPanel/SlidingPanel.spec.js

@@ -0,0 +1,56 @@
+import { shallow, mount } from 'enzyme';
+
+import SlidingPanel from './SlidingPanel';
+
+describe('SlidingPanel', () => {
+  let component;
+  const props = {
+    open: true,
+    position: 'left',
+    children: null,
+    className: undefined,
+    slidingPanelPositionFixed: false,
+    showSlidingPanelBorder: false,
+    testId: undefined,
+  };
+
+  it('renders with right props', () => {
+    component = mount(<SlidingPanel {...props} />);
+    expect(component.find(SlidingPanel)).toHaveLength(1);
+    expect(component.find(SlidingPanel).props()).toStrictEqual({ ...props });
+  });
+
+  it('renders CSSTransition with right props', () => {
+    component = shallow(<SlidingPanel {...props} />);
+
+    expect(cssTransition()).toHaveLength(1);
+
+    expect(cssTransition().props()).toEqual({
+      className: 'sliding-panel sliding-panel--open-left',
+      children: null,
+    });
+  });
+
+  it('adds fixed class', () => {
+    component = shallow(<SlidingPanel {...props} slidingPanelPositionFixed />);
+    expect(cssTransition().prop('className')).toBe(
+      'sliding-panel sliding-panel--open-left sliding-panel--fixed',
+    );
+  });
+
+  it('adds border classes if showSlidingPanelBorder is set to true', () => {
+    component = shallow(<SlidingPanel {...props} showSlidingPanelBorder />);
+    expect(cssTransition().prop('className')).toBe(
+      'sliding-panel sliding-panel--open-left sliding-panel--border-left',
+    );
+    component = shallow(<SlidingPanel {...props} showSlidingPanelBorder={false} position="left" />);
+    expect(cssTransition().prop('className')).toBe('sliding-panel sliding-panel--open-left');
+
+    component = shallow(<SlidingPanel {...props} showSlidingPanelBorder position="top" />);
+    expect(cssTransition().prop('className')).toBe(
+      'sliding-panel sliding-panel--open-top sliding-panel--border-top',
+    );
+  });
+
+  const cssTransition = () => component.find('div');
+});

package/src/slidingPanel/SlidingPanel.spec.tsx

@@ -1,69 +0,0 @@
-import { render, screen } from '../test-utils';
-import SlidingPanel, { SlidingPanelProps } from './SlidingPanel';
-
-describe('SlidingPanel', () => {
-  const initialProps: SlidingPanelProps = {
-    open: true,
-    children: <div data-testid="content">Content</div>,
-    testId: 'wrapper',
-  };
-
-  const customRender = (overrides: Partial<SlidingPanelProps> = {}) =>
-    render(<SlidingPanel {...initialProps} {...overrides} />);
-
-  describe('open', () => {
-    it('should respect open=false', () => {
-      customRender({ open: false });
-      expect(screen.queryByTestId('wrapper')).not.toBeInTheDocument();
-    });
-
-    it('should respect open=true', () => {
-      customRender();
-      expect(screen.getByTestId('wrapper')).toBeInTheDocument();
-    });
-  });
-
-  describe('position', () => {
-    it(`should default to 'left'`, () => {
-      customRender();
-      expect(screen.queryByTestId('wrapper')).toHaveClass(`sliding-panel--open-left`);
-    });
-
-    (['left', 'right', 'top', 'bottom'] as const).forEach((position) => {
-      describe(position, () => {
-        it(`should add the classname`, () => {
-          customRender({ position });
-          expect(screen.queryByTestId('wrapper')).toHaveClass(`sliding-panel--open-${position}`);
-        });
-
-        it(`should add the classname for 'showSlidingPanelBorder'`, () => {
-          customRender({ position, showSlidingPanelBorder: true });
-          expect(screen.queryByTestId('wrapper')).toHaveClass(`sliding-panel--border-${position}`);
-        });
-      });
-    });
-  });
-
-  it('should render children', () => {
-    customRender();
-    expect(screen.getByTestId('content')).toBeInTheDocument();
-  });
-
-  it('should respect className', () => {
-    const className = 'customClass';
-    customRender({ className });
-    expect(screen.getByTestId('wrapper')).toHaveClass(className);
-  });
-
-  describe('slidingPanelPositionFixed', () => {
-    it('should not be fixed by default', () => {
-      customRender();
-      expect(screen.getByTestId('wrapper')).not.toHaveClass('sliding-panel--fixed');
-    });
-
-    it('should respect slidingPanelPositionFixed=true', () => {
-      customRender({ slidingPanelPositionFixed: true });
-      expect(screen.getByTestId('wrapper')).toHaveClass('sliding-panel--fixed');
-    });
-  });
-});