@transferwise/components 0.0.0-experimental-dd495d2 → 0.0.0-experimental-3776330

package/src/segmentedControl/SegmentedControl.css

@@ -0,0 +1,103 @@
+.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: font-weight 300ms, 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__selected-segment {
+  font-weight: 700;
+  font-weight: var(--font-weight-bold);
+}
+.segmented-control__label-text {
+  word-wrap: break-word;
+  color: var(--color-interactive-primary);
+}

package/src/segmentedControl/SegmentedControl.less

@@ -0,0 +1,103 @@
+.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: font-weight 300ms, 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__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

@@ -0,0 +1,106 @@
+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',
+    );
+  });
+});

package/src/segmentedControl/SegmentedControl.story.tsx

@@ -0,0 +1,55 @@
+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

@@ -0,0 +1,152 @@
+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. 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);
+                }}
+              />
+              <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/index.ts

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

package/src/ssr.spec.js

@@ -154,6 +154,23 @@ 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.