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

package/src/segmentedControl/SegmentedControl.story.tsx

@@ -1,55 +0,0 @@
-import { StoryFn } from '@storybook/react';
-import React from 'react';
-
-import SegmentedControl, { Segments } from './SegmentedControl';
-
-export default {
-  component: SegmentedControl,
-  title: 'Forms/SegmentedControl',
-};
-
-const segments: Segments = [
-  { id: 'CUPCAKE', label: 'Cupcakes', value: 'cupcakes' },
-  { id: 'SPONGECAKE', label: 'Sponge cake', value: 'spongecake' },
-  { id: 'CARROT_CAKE', label: 'Carrot cake', value: 'carrotcake' },
-];
-
-const segmentsWithControls: Segments = [
-  { id: 'CUPCAKE', label: 'Cupcakes', value: 'cupcakes', controls: 'aControlId' },
-  { id: 'SPONGECAKE', label: 'Sponge cake', value: 'spongecake', controls: 'aControlId' },
-  { id: 'CARROT_CAKE', label: 'Carrot cake', value: 'carrotcake', controls: 'aControlId' },
-];
-
-const Template: StoryFn = (args) => {
-  const [selectedValue, setSelectedValue] = React.useState(segments[0].value);
-
-  return (
-    <div className="p-a-2">
-      <SegmentedControl
-        name="aSegmentedControl"
-        defaultValue={selectedValue}
-        onChange={setSelectedValue}
-        {...(args.mode === 'view'
-          ? { segments: segmentsWithControls, mode: 'view', controls: 'aControlId' }
-          : { segments, mode: 'input' })}
-      />
-      <div className="m-a-2" id="aControlId">
-        <p>Selected value: {selectedValue}</p>
-      </div>
-    </div>
-  );
-};
-
-export const SegmentedControlDefault = {
-  render: Template,
-  args: {
-    mode: 'input',
-  },
-};
-
-export const SegmentedControlView = {
-  render: Template,
-  args: {
-    mode: 'view',
-  },
-};

package/src/segmentedControl/SegmentedControl.tsx

@@ -1,175 +0,0 @@
-import classNames from 'classnames';
-import { createRef, useEffect, useRef, useState } from 'react';
-
-import Body from '../body';
-import { Typography } from '../common';
-
-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);
-
-const SegmentedControl = ({
-  name,
-  defaultValue,
-  mode = 'input',
-  segments,
-  onChange,
-}: SegmentedControlProps) => {
-  const [selectedValue, setSelectedValue] = useState(defaultValue || segments[0].value);
-  const [animate, setAnimate] = useState(false);
-
-  const segmentsRef = useRef<HTMLDivElement>(null);
-
-  if (segments.length > 3) {
-    throw new Error(
-      'SegmentedControl only supports up to 3 segments. Please refer to: https://wise.design/components/segmented-control',
-    );
-  }
-
-  const segmentsWithRefs = segments.map((segment) => ({
-    ...segment,
-    ref: createRef<HTMLLabelElement | HTMLButtonElement>(),
-  }));
-
-  const updateSegmentPosition = () => {
-    const selectedSegmentRef = segmentsWithRefs.find(
-      (segment) => segment.value === selectedValue,
-    )?.ref;
-
-    // We grab the active segments style object from the ref
-    // and set the css variables to the selected segments width and x position.
-    // This is so we can animate the highlight to the selected segment
-    if (selectedSegmentRef?.current && segmentsRef.current) {
-      const { style } = segmentsRef.current;
-      style.setProperty('--segment-highlight-width', `${selectedSegmentRef.current.offsetWidth}px`);
-      style.setProperty('--segment-highlight-x', `${selectedSegmentRef.current.offsetLeft}px`);
-    }
-  };
-
-  useEffect(() => {
-    updateSegmentPosition();
-
-    const handleWindowSizeChange = () => {
-      setAnimate(false);
-      updateSegmentPosition();
-    };
-
-    window.addEventListener('resize', handleWindowSizeChange);
-    return () => {
-      window.removeEventListener('resize', handleWindowSizeChange);
-    };
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [segmentsWithRefs, selectedValue]);
-
-  useEffect(() => {
-    onChange(selectedValue);
-  }, [onChange, selectedValue]);
-
-  return (
-    <div
-      ref={segmentsRef}
-      data-testid="segmented-control"
-      className={classNames('segmented-control', {
-        'segmented-control--input': mode === 'input',
-      })}
-    >
-      <div
-        className={classNames('segmented-control__segments', {
-          'segmented-control__segments--no-animate': !animate,
-        })}
-      >
-        {segmentsWithRefs.map((segment) =>
-          mode === 'input' ? (
-            <label
-              ref={segment.ref as React.RefObject<HTMLLabelElement>}
-              key={segment.id}
-              htmlFor={segment.id}
-              className={classNames('segmented-control__segment', {
-                'segmented-control__selected-segment': selectedValue === segment.value,
-              })}
-            >
-              <input
-                type="radio"
-                className="segmented-control__radio-input"
-                id={segment.id}
-                name={name}
-                value={segment.value}
-                checked={selectedValue === segment.value}
-                onChange={() => {
-                  setAnimate(true);
-                  setSelectedValue(segment.value);
-                }}
-              />
-              <Body
-                className="segmented-control__text"
-                as="span"
-                type={
-                  selectedValue === segment.value
-                    ? Typography.BODY_DEFAULT_BOLD
-                    : Typography.BODY_DEFAULT
-                }
-              >
-                {segment.label}
-              </Body>
-            </label>
-          ) : (
-            <button
-              ref={segment.ref as React.RefObject<HTMLButtonElement>}
-              key={segment.id}
-              type="button"
-              role="tab"
-              id={segment.id}
-              aria-controls={segment.controls}
-              aria-selected={selectedValue === segment.value}
-              className={classNames('segmented-control__segment', 'segmented-control__button', {
-                'segmented-control__selected-segment': selectedValue === segment.value,
-              })}
-              onClick={() => {
-                setAnimate(true);
-                setSelectedValue(segment.value);
-              }}
-            >
-              <Body
-                as="span"
-                className="segmented-control__text"
-                type={
-                  selectedValue === segment.value
-                    ? Typography.BODY_DEFAULT_BOLD
-                    : Typography.BODY_DEFAULT
-                }
-              >
-                {segment.label}
-              </Body>
-            </button>
-          ),
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default SegmentedControl;

package/src/segmentedControl/index.ts

@@ -1,2 +0,0 @@
-export * from './SegmentedControl';
-export { default } from './SegmentedControl';

package/src/snackbar/SnackbarContext.js

@@ -1,4 +0,0 @@
-import { createContext } from 'react';
-
-export const SnackbarContext = createContext();
-export const SnackbarConsumer = SnackbarContext.Consumer;

package/src/snackbar/SnackbarProvider.js

@@ -1,51 +0,0 @@
-import PropTypes from 'prop-types';
-import { Component } from 'react';
-
-import SnackbarPortal from './Snackbar';
-import { SnackbarContext } from './SnackbarContext';
-
-class SnackbarProvider extends Component {
-  constructor() {
-    super();
-    this.state = {
-      text: '',
-      timestamp: 0,
-    };
-  }
-
-  create = ({ action, text, theme }) => {
-    this.setState({ action, text, theme, timestamp: Date.now() });
-  };
-
-  render() {
-    const { action, text, theme, timestamp } = this.state;
-
-    return (
-      <SnackbarContext.Provider
-        value={{
-          createSnackbar: this.create,
-        }}
-      >
-        <SnackbarPortal
-          action={action}
-          text={text}
-          timestamp={timestamp}
-          timeout={this.props.timeout}
-          theme={theme}
-        />
-        {this.props.children}
-      </SnackbarContext.Provider>
-    );
-  }
-}
-
-SnackbarProvider.propTypes = {
-  children: PropTypes.node.isRequired,
-  timeout: PropTypes.number,
-};
-
-SnackbarProvider.defaultProps = {
-  timeout: 4500,
-};
-
-export default SnackbarProvider;