@transferwise/components 0.0.0-experimental-4b7aba1 → 0.0.0-experimental-16e2eec

package/src/segmentedControl/SegmentedControl.less

@@ -1,99 +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;
-  justify-content: center;
-  align-items: center;
-  background: var(--color-background-neutral);
-  padding: var(--size-4);
-  border-radius: var(--size-24);
-  width: 100%;
-  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: "";
-  background: var(--color-background-screen);
-  width: var(--segment-highlight-width);
-  position: absolute;
-  top: var(--size-4);
-  bottom: var(--size-4);
-  left: var(--segment-highlight-x);
-  z-index: 0;
-  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;
-
-  min-width: 0;
-  align-items: center;
-  text-align: center;
-  vertical-align: middle;
-  padding: var(--size-8) var(--size-16);
-  margin: 0;
-  border-radius: var(--size-24);
-  z-index: 1;
-  cursor: pointer;
-  transition: font-weight 300ms, background 300ms;
-}
-
-.segmented-control__segment:hover {
-  background: var(--color-background-overlay);
-}
-
-.segmented-control__radio-input {
-  position: fixed;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.segmented-control__button {
-  background: none;
-  appearance: none;
-  border: none;
-  outline: none;
-  width: 100%;
-  height: 100%;
-  font: inherit;
-  padding: none;
-  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__selected-segment {
-  font-weight: var(--font-weight-bold);
-}
-
-.segmented-control__label-text {
-  word-wrap: break-word;
-  color: var(--color-interactive-primary);
-}

package/src/segmentedControl/SegmentedControl.spec.tsx

@@ -1,107 +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(`renders as expected when input`, () => {
-    expect(renderSegmentedControl().container).toMatchSnapshot();
-  });
-
-  it('renders as expected when set as a view', () => {
-    expect(
-      renderSegmentedControl({ mode: 'view', segments: defaultSegmentsWithControls }).container,
-    ).toMatchSnapshot();
-  });
-
-  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('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');
-  });
-});

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,150 +0,0 @@
-import classNames from 'classnames';
-import { createRef, useEffect, useRef, useState } from '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);
-
-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');
-  }
-
-  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);
-                }}
-              />
-              <div className="segmented-control__label-text">{segment.label}</div>
-            </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);
-              }}
-            >
-              {segment.label}
-            </button>
-          ),
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default SegmentedControl;

package/src/segmentedControl/__snapshots__/SegmentedControl.spec.tsx.snap

@@ -1,113 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SegmentedControl renders as expected when input 1`] = `
-<div>
-  <div
-    class="segmented-control segmented-control--input"
-    data-testid="segmented-control"
-    style="--segment-highlight-width: 0px; --segment-highlight-x: 0px;"
-  >
-    <div
-      class="segmented-control__segments segmented-control__segments--no-animate"
-    >
-      <label
-        class="segmented-control__segment segmented-control__selected-segment"
-        for="1"
-      >
-        <input
-          checked=""
-          class="segmented-control__radio-input"
-          id="1"
-          name="segmentedControl"
-          type="radio"
-          value="accounting"
-        />
-        <div
-          class="segmented-control__label-text"
-        >
-          Accounting
-        </div>
-      </label>
-      <label
-        class="segmented-control__segment"
-        for="2"
-      >
-        <input
-          class="segmented-control__radio-input"
-          id="2"
-          name="segmentedControl"
-          type="radio"
-          value="payroll"
-        />
-        <div
-          class="segmented-control__label-text"
-        >
-          Payroll
-        </div>
-      </label>
-      <label
-        class="segmented-control__segment"
-        for="3"
-      >
-        <input
-          class="segmented-control__radio-input"
-          id="3"
-          name="segmentedControl"
-          type="radio"
-          value="reporting"
-        />
-        <div
-          class="segmented-control__label-text"
-        >
-          Reporting
-        </div>
-      </label>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`SegmentedControl renders as expected when set as a view 1`] = `
-<div>
-  <div
-    class="segmented-control"
-    data-testid="segmented-control"
-    style="--segment-highlight-width: 0px; --segment-highlight-x: 0px;"
-  >
-    <div
-      class="segmented-control__segments segmented-control__segments--no-animate"
-    >
-      <button
-        aria-controls="aControlId0"
-        aria-selected="true"
-        class="segmented-control__segment segmented-control__button segmented-control__selected-segment"
-        id="1"
-        role="tab"
-        type="button"
-      >
-        Accounting
-      </button>
-      <button
-        aria-controls="aControlId1"
-        aria-selected="false"
-        class="segmented-control__segment segmented-control__button"
-        id="2"
-        role="tab"
-        type="button"
-      >
-        Payroll
-      </button>
-      <button
-        aria-controls="aControlId2"
-        aria-selected="false"
-        class="segmented-control__segment segmented-control__button"
-        id="3"
-        role="tab"
-        type="button"
-      >
-        Reporting
-      </button>
-    </div>
-  </div>
-</div>
-`;

package/src/segmentedControl/index.ts

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