@transferwise/components 0.0.0-experimental-b2eafa7 → 0.0.0-experimental-b7402e7

package/src/snackbar/{Snackbar.js → Snackbar.tsx}

@@ -1,21 +1,36 @@
-import PropTypes from 'prop-types';
-import { Component, createRef, RefObject } from 'react';
+import { Component, createRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
 
 import ActionButton from '../actionButton';
 import Body from '../body';
-import { Theme } from '../common';
+import { Theme, ThemeDark, ThemeLight } from '../common';
 import { DirectionContext } from '../provider/direction';
 import withNextPortal from '../withNextPortal/withNextPortal';
 
 export const CSS_TRANSITION_DURATION = 400;
 
-export class Snackbar extends Component {
-  /** @type {RefObject<HTMLSpanElement>} */
-  bodyRef = createRef();
+export interface SnackbarProps {
+  action?: {
+    label: string;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  };
+  text: React.ReactNode;
+  theme?: ThemeLight | ThemeDark;
+  timeout: number;
+  timestamp: number;
+}
+
+interface SnackbarState extends Pick<SnackbarProps, 'action' | 'text' | 'theme'> {
+  visible: boolean;
+}
+
+export class Snackbar extends Component<SnackbarProps, SnackbarState> {
+  bodyRef = createRef<HTMLSpanElement>();
+  timeout = 0;
+  transitionTimeout = 0;
 
-  constructor() {
-    super();
+  constructor(props: SnackbarProps) {
+    super(props);
     this.state = {
       visible: false,
       text: '',
@@ -23,11 +38,11 @@ export class Snackbar extends Component {
   }
 
   componentWillUnmount() {
-    clearTimeout(this.timeout);
-    clearTimeout(this.transitionTimeout);
+    window.clearTimeout(this.timeout);
+    window.clearTimeout(this.transitionTimeout);
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
+  shouldComponentUpdate(nextProps: SnackbarProps, nextState: SnackbarState) {
     if (!nextProps.text) {
       return false;
     }
@@ -45,12 +60,12 @@ export class Snackbar extends Component {
   setLeaveTimeout = () => {
     const { timeout } = this.props;
 
-    this.timeout = setTimeout(() => {
+    this.timeout = window.setTimeout(() => {
       this.setState({ visible: false });
     }, timeout);
   };
 
-  componentDidUpdate(previousProps) {
+  componentDidUpdate(previousProps: SnackbarProps) {
     const { action, text, theme, timestamp } = this.props;
 
     if (!previousProps.text) {
@@ -58,11 +73,11 @@ export class Snackbar extends Component {
         this.setLeaveTimeout();
       });
     } else if (previousProps.timestamp !== timestamp) {
-      clearTimeout(this.timeout);
+      window.clearTimeout(this.timeout);
 
       if (this.state.visible) {
         this.setState({ visible: false }, () => {
-          this.transitionTimeout = setTimeout(() => {
+          this.transitionTimeout = window.setTimeout(() => {
             this.setState({ visible: true, action, text, theme });
             this.setLeaveTimeout();
           }, CSS_TRANSITION_DURATION);
@@ -75,7 +90,7 @@ export class Snackbar extends Component {
   }
 
   render() {
-    const { action, text, theme, visible } = this.state;
+    const { action, text, theme = Theme.LIGHT, visible } = this.state;
     const { timeout } = this.props;
 
     return (
@@ -112,20 +127,4 @@ export class Snackbar extends Component {
 
 Snackbar.contextType = DirectionContext;
 
-Snackbar.propTypes = {
-  action: PropTypes.shape({
-    label: PropTypes.string.isRequired,
-    onClick: PropTypes.func,
-  }),
-  text: PropTypes.node.isRequired,
-  theme: PropTypes.oneOf(['light', 'dark']),
-  timeout: PropTypes.number.isRequired,
-  timestamp: PropTypes.number.isRequired,
-};
-
-Snackbar.defaultProps = {
-  action: null,
-  theme: Theme.LIGHT,
-};
-
 export default withNextPortal(Snackbar);

package/src/snackbar/SnackbarContext.ts

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+
+import { SnackbarProps } from './Snackbar';
+
+export type SnackbarContextType = {
+  createSnackbar: (props: Omit<SnackbarProps, 'timeout' | 'timestamp'>) => void;
+};
+
+export const SnackbarContext = createContext<SnackbarContextType>({ createSnackbar: () => {} });
+
+export const SnackbarConsumer = SnackbarContext.Consumer;

package/src/snackbar/SnackbarProvider.tsx

@@ -0,0 +1,39 @@
+import { useMemo, useState } from 'react';
+
+import SnackbarPortal, { SnackbarProps } from './Snackbar';
+import { SnackbarContext } from './SnackbarContext';
+
+export interface SnackbarProviderProps {
+  timeout?: number;
+  children?: React.ReactNode;
+}
+
+export default function SnackbarProvider({ timeout = 4500, children }: SnackbarProviderProps) {
+  const [state, setState] = useState<Omit<SnackbarProps, 'timeout'>>({
+    text: '',
+    timestamp: 0,
+  });
+  const { action, text, theme, timestamp } = state;
+
+  return (
+    <SnackbarContext.Provider
+      value={useMemo(
+        () => ({
+          createSnackbar: ({ action, text, theme }) => {
+            setState({ action, text, theme, timestamp: Date.now() });
+          },
+        }),
+        [],
+      )}
+    >
+      <SnackbarPortal
+        action={action}
+        text={text}
+        timestamp={timestamp}
+        timeout={timeout}
+        theme={theme}
+      />
+      {children}
+    </SnackbarContext.Provider>
+  );
+}

package/src/ssr.spec.js

@@ -154,23 +154,6 @@ describe('Server side rendering', () => {
           label: 'Two',
         },
       ],
-      segments: [
-        {
-          id: '1',
-          value: 'accounting',
-          label: 'Accounting',
-        },
-        {
-          id: '2',
-          value: 'payroll',
-          label: 'Payroll',
-        },
-        {
-          id: '3',
-          value: 'reporting',
-          label: 'Reporting',
-        },
-      ],
     };
 
     // Override props in case of name collision.

package/src/withNextPortal/withNextPortal.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 
 export default function withNextPortalWrapper<T extends Record<string, any>>(
-  Component: React.FunctionComponent<T>,
+  Component: React.ComponentType<T>,
 ) {
   return function (props: T) {
     const [mounted, setMounted] = useState(false);

package/build/styles/segmentedControl/SegmentedControl.css

@@ -1,101 +0,0 @@
-.segmented-control {
-  box-sizing: border-box;
-  --segment-highlight-width: 0;
-  --segment-highlight-x: var(--size-4);
-}
-.segmented-control__segments {
-  display: inline-flex;
-  position: relative;
-  padding: 4px;
-  padding: var(--size-4);
-  width: 100%;
-  justify-content: center;
-  align-items: center;
-  background: rgba(134,167,189,0.10196);
-  background: var(--color-background-neutral);
-  border-radius: 24px;
-  border-radius: var(--size-24);
-  transition: outline 300ms;
-  outline: 2px solid transparent;
-}
-.segmented-control--input:has(:focus-visible) > .segmented-control__segments::after {
-  outline: 2px solid var(--color-interactive-primary);
-}
-.segmented-control__segments::after {
-  content: "";
-  position: absolute;
-  width: var(--segment-highlight-width);
-  top: 4px;
-  top: var(--size-4);
-  bottom: 4px;
-  bottom: var(--size-4);
-  left: var(--segment-highlight-x);
-  z-index: 0;
-  background: #ffffff;
-  background: var(--color-background-screen);
-  border-radius: 24px;
-  border-radius: var(--size-24);
-  transition: left 300ms;
-}
-.segmented-control__segments--no-animate::after {
-  transition: none !important;
-}
-.segmented-control__segment {
-  position: relative;
-  flex: 1 1 100%;
-  flex-flow: column;
-  padding: 8px 16px;
-  padding: var(--size-8) var(--size-16);
-  margin: 0 0 0 4px;
-  margin: 0 0 0 var(--size-4);
-  min-width: 0;
-  line-height: inherit;
-  align-items: center;
-  text-align: center;
-  vertical-align: middle;
-  border-radius: 24px;
-  border-radius: var(--size-24);
-  z-index: 1;
-  cursor: pointer;
-  transition: background 300ms;
-  color: var(--color-interactive-primary);
-}
-.segmented-control__segment:first-child {
-  margin-left: 0;
-}
-.segmented-control__segment:hover {
-  background: rgba(0,0,0,0.10196);
-  background: var(--color-background-overlay);
-}
-.segmented-control__radio-input {
-  position: fixed;
-  opacity: 0;
-  pointer-events: none;
-}
-.segmented-control__button {
-  width: 100%;
-  height: 100%;
-  background: none;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  border: none;
-  outline: none;
-  font: inherit;
-  outline: 2px solid transparent;
-}
-.segmented-control__button:focus {
-  outline-offset: 0px;
-}
-.segmented-control__button:focus-visible {
-  outline-color: var(--color-interactive-primary);
-}
-.segmented-control__selected-segment:hover {
-  background: transparent;
-}
-.segmented-control__text {
-  word-wrap: break-word;
-  word-break: break-word;
-  color: var(--color-interactive-primary);
-  transition: font-weight 300ms;
-}

package/build/types/segmentedControl/SegmentedControl.d.ts

@@ -1,31 +0,0 @@
-/// <reference types="react" />
-type SegmentBase = {
-    id: string;
-    label: string;
-    value: string;
-};
-type Segment = SegmentBase & {
-    controls?: never;
-};
-type SegmentWithControls = SegmentBase & {
-    controls: string;
-};
-export type Segments = Segment[] | SegmentWithControls[];
-type SegmentedControlPropsBase = {
-    name: string;
-    defaultValue: string;
-    mode: 'input' | 'view';
-    onChange: (value: string) => void;
-};
-type SegmentedControlViewProps = {
-    mode: 'view';
-    segments: SegmentWithControls[];
-};
-type SegmentedControlInputProps = {
-    mode: 'input';
-    segments: Segment[];
-};
-export type SegmentedControlProps = SegmentedControlPropsBase & (SegmentedControlViewProps | SegmentedControlInputProps);
-declare const SegmentedControl: ({ name, defaultValue, mode, segments, onChange, }: SegmentedControlProps) => import("react").JSX.Element;
-export default SegmentedControl;
-//# sourceMappingURL=SegmentedControl.d.ts.map

package/build/types/segmentedControl/SegmentedControl.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/segmentedControl/SegmentedControl.tsx"],"names":[],"mappings":";AAMA,KAAK,WAAW,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhE,KAAK,OAAO,GAAG,WAAW,GAAG;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAClD,KAAK,mBAAmB,GAAG,WAAW,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC;AAE9D,MAAM,MAAM,QAAQ,GAAG,OAAO,EAAE,GAAG,mBAAmB,EAAE,CAAC;AAEzD,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,mBAAmB,EAAE,CAAC;CACjC,CAAC;AAEF,KAAK,0BAA0B,GAAG;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,OAAO,EAAE,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,GAC3D,CAAC,yBAAyB,GAAG,0BAA0B,CAAC,CAAC;AAE3D,QAAA,MAAM,gBAAgB,sDAMnB,qBAAqB,gCAqIvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/build/types/segmentedControl/index.d.ts

@@ -1,3 +0,0 @@
-export * from './SegmentedControl';
-export { default } from './SegmentedControl';
-//# sourceMappingURL=index.d.ts.map

package/build/types/segmentedControl/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/segmentedControl/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC"}

package/src/segmentedControl/SegmentedControl.css

@@ -1,101 +0,0 @@
-.segmented-control {
-  box-sizing: border-box;
-  --segment-highlight-width: 0;
-  --segment-highlight-x: var(--size-4);
-}
-.segmented-control__segments {
-  display: inline-flex;
-  position: relative;
-  padding: 4px;
-  padding: var(--size-4);
-  width: 100%;
-  justify-content: center;
-  align-items: center;
-  background: rgba(134,167,189,0.10196);
-  background: var(--color-background-neutral);
-  border-radius: 24px;
-  border-radius: var(--size-24);
-  transition: outline 300ms;
-  outline: 2px solid transparent;
-}
-.segmented-control--input:has(:focus-visible) > .segmented-control__segments::after {
-  outline: 2px solid var(--color-interactive-primary);
-}
-.segmented-control__segments::after {
-  content: "";
-  position: absolute;
-  width: var(--segment-highlight-width);
-  top: 4px;
-  top: var(--size-4);
-  bottom: 4px;
-  bottom: var(--size-4);
-  left: var(--segment-highlight-x);
-  z-index: 0;
-  background: #ffffff;
-  background: var(--color-background-screen);
-  border-radius: 24px;
-  border-radius: var(--size-24);
-  transition: left 300ms;
-}
-.segmented-control__segments--no-animate::after {
-  transition: none !important;
-}
-.segmented-control__segment {
-  position: relative;
-  flex: 1 1 100%;
-  flex-flow: column;
-  padding: 8px 16px;
-  padding: var(--size-8) var(--size-16);
-  margin: 0 0 0 4px;
-  margin: 0 0 0 var(--size-4);
-  min-width: 0;
-  line-height: inherit;
-  align-items: center;
-  text-align: center;
-  vertical-align: middle;
-  border-radius: 24px;
-  border-radius: var(--size-24);
-  z-index: 1;
-  cursor: pointer;
-  transition: background 300ms;
-  color: var(--color-interactive-primary);
-}
-.segmented-control__segment:first-child {
-  margin-left: 0;
-}
-.segmented-control__segment:hover {
-  background: rgba(0,0,0,0.10196);
-  background: var(--color-background-overlay);
-}
-.segmented-control__radio-input {
-  position: fixed;
-  opacity: 0;
-  pointer-events: none;
-}
-.segmented-control__button {
-  width: 100%;
-  height: 100%;
-  background: none;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  border: none;
-  outline: none;
-  font: inherit;
-  outline: 2px solid transparent;
-}
-.segmented-control__button:focus {
-  outline-offset: 0px;
-}
-.segmented-control__button:focus-visible {
-  outline-color: var(--color-interactive-primary);
-}
-.segmented-control__selected-segment:hover {
-  background: transparent;
-}
-.segmented-control__text {
-  word-wrap: break-word;
-  word-break: break-word;
-  color: var(--color-interactive-primary);
-  transition: font-weight 300ms;
-}

package/src/segmentedControl/SegmentedControl.less

@@ -1,101 +0,0 @@
-.segmented-control {
-  box-sizing: border-box;
-  --segment-highlight-width: 0;
-  --segment-highlight-x: var(--size-4);
-}
-
-.segmented-control__segments {
-  display: inline-flex;
-  position: relative;
-  padding: var(--size-4);
-  width: 100%;
-  justify-content: center;
-  align-items: center;
-  background: var(--color-background-neutral);
-  border-radius: var(--size-24);  
-  transition: outline 300ms;
-  outline: 2px solid transparent;
-}
-
-.segmented-control--input:has(:focus-visible) > .segmented-control__segments::after {
-  outline: 2px solid var(--color-interactive-primary);
-}
-
-.segmented-control__segments::after {
-  content: "";
-  position: absolute;
-  width: var(--segment-highlight-width);
-  top: var(--size-4);
-  bottom: var(--size-4);
-  left: var(--segment-highlight-x);
-  z-index: 0;
-  background: var(--color-background-screen);
-  border-radius: var(--size-24);
-  transition: left 300ms;
-}
-
-.segmented-control__segments--no-animate::after {
-  transition: none !important;
-}
-
-.segmented-control__segment {
-  position: relative;
-  flex: 1 1 100%;
-  flex-flow: column;
-  padding: var(--size-8) var(--size-16);
-  margin: 0 0 0 var(--size-4);
-  min-width: 0;
-  line-height: inherit;
-  align-items: center;
-  text-align: center;
-  vertical-align: middle;
-  border-radius: var(--size-24);
-  z-index: 1;
-  cursor: pointer;
-  transition: background 300ms;
-  color: var(--color-interactive-primary);
-}
-
-.segmented-control__segment:first-child {
-  margin-left: 0;
-}
-
-.segmented-control__segment:hover {
-  background: var(--color-background-overlay);
-}
-
-.segmented-control__radio-input {
-  position: fixed;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.segmented-control__button {
-  width: 100%;
-  height: 100%;
-  background: none;
-  appearance: none;
-  border: none;
-  outline: none;
-  font: inherit;
-  outline: 2px solid transparent;
-}
-
-.segmented-control__button:focus {
-  outline-offset: 0px;
-}
-
-.segmented-control__button:focus-visible {
-  outline-color: var(--color-interactive-primary);
-}
-
-.segmented-control__selected-segment:hover {
-  background: transparent;
-}
-
-.segmented-control__text {
-  word-wrap: break-word;
-  word-break: break-word;
-  color: var(--color-interactive-primary);
-  transition: font-weight 300ms;
-}

package/src/segmentedControl/SegmentedControl.spec.tsx

@@ -1,106 +0,0 @@
-import '@testing-library/jest-dom';
-import { render, screen, userEvent } from '../test-utils';
-
-import SegmentedControl, { SegmentedControlProps } from './SegmentedControl';
-
-const defaultSegments = [
-  {
-    id: '1',
-    value: 'accounting',
-    label: 'Accounting',
-  },
-  {
-    id: '2',
-    value: 'payroll',
-    label: 'Payroll',
-  },
-  {
-    id: '3',
-    value: 'reporting',
-    label: 'Reporting',
-  },
-];
-
-const defaultSegmentsWithControls = defaultSegments.map((segment, index) => ({
-  ...segment,
-  controls: `aControlId${index}`,
-}));
-
-const onChange = jest.fn();
-
-const defaultProps: SegmentedControlProps = {
-  name: 'segmentedControl',
-  defaultValue: defaultSegments[0].value,
-  mode: 'input',
-  segments: defaultSegments,
-  onChange,
-};
-
-const renderSegmentedControl = (overrides: Partial<SegmentedControlProps> = {}) => {
-  return render(<SegmentedControl {...defaultProps} {...(overrides as SegmentedControlProps)} />);
-};
-
-describe('SegmentedControl', () => {
-  it('dynamically adds inline style props for animated segment overlay', () => {
-    renderSegmentedControl();
-
-    const segmentedControls = screen.getByTestId('segmented-control');
-
-    expect(segmentedControls).toHaveStyle(
-      '--segment-highlight-width: 0px; --segment-highlight-x: 0px;',
-    );
-  });
-
-  it('default value is selected', () => {
-    renderSegmentedControl({ mode: 'view', segments: defaultSegmentsWithControls });
-
-    const accountingTab = screen.getByRole('tab', { name: 'Accounting' });
-    expect(accountingTab).toHaveAttribute('aria-selected', 'true');
-  });
-
-  it('lets the user pick through the segments when it is set to input', () => {
-    renderSegmentedControl();
-
-    const payroll = screen.getByRole('radio', { name: 'Payroll' });
-    userEvent.click(payroll);
-
-    expect(onChange).toHaveBeenCalledWith('payroll');
-
-    const reporting = screen.getByRole('radio', { name: 'Reporting' });
-    userEvent.click(reporting);
-
-    expect(onChange).toHaveBeenCalledWith('reporting');
-  });
-
-  it('lets the user pick through the segments when it is set to view', () => {
-    renderSegmentedControl({ mode: 'view', segments: defaultSegmentsWithControls });
-
-    const payroll = screen.getByRole('tab', { name: 'Payroll' });
-    userEvent.click(payroll);
-
-    expect(onChange).toHaveBeenCalledWith('payroll');
-
-    const reporting = screen.getByRole('tab', { name: 'Reporting' });
-    userEvent.click(reporting);
-
-    expect(onChange).toHaveBeenCalledWith('reporting');
-  });
-
-  it('throws error if user tries to add too many segments', () => {
-    expect(() => {
-      renderSegmentedControl({
-        mode: 'input',
-        segments: [
-          ...defaultSegments,
-          {
-            id: '4',
-            value: 'anotherOne',
-            label: 'Another One',
-          },
-        ],
-      });
-    }).toThrow(
-      'SegmentedControl only supports up to 3 segments. Please refer to: https://wise.design/components/segmented-control',
-    );
-  });
-});