[Components] Add SegmentedControl

src/shared-components/index.ts

@@ -20,6 +20,7 @@ export * from './offClickWrapper';
 export * from './optionButton';
 export * from './progressBar';
 export * from './radioButton';
+export * from './segmentedControl';
 export * from './tabs';
 export * from './toggle';
 export * from './tooltip';

src/shared-components/segmentedControl/__snapshots__/test.tsx.snap

@@ -0,0 +1,128 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SegmentedControl /> renders a regular segmented control 1`] = `
+.emotion-0 {
+  width: 100%;
+  height: 2.5rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  position: relative;
+  border-radius: 32px;
+  background-color: #EDEDF0;
+  padding: 0.25rem 0;
+}
+
+.emotion-2 {
+  background: transparent;
+  border: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  cursor: pointer;
+  margin: 0;
+  position: absolute;
+  border-radius: 32px;
+  width: 33.333333333333336%;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  background-color: white;
+  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+  color: #706D87;
+  font-size: 0.875rem;
+  line-height: 1.71;
+  color: #332E54;
+  font-weight: bold;
+  -webkit-transform: translate3d(0px, 0, 0);
+  -moz-transform: translate3d(0px, 0, 0);
+  -ms-transform: translate3d(0px, 0, 0);
+  transform: translate3d(0px, 0, 0);
+  border: 4px solid #EDEDF0;
+}
+
+.emotion-2:focus {
+  box-shadow: inset 0px 0px 0px 2px #332E54;
+  outline: none;
+}
+
+.emotion-4 {
+  background: transparent;
+  border: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  margin: 0 0.125rem;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  padding: 0.25rem;
+  color: #706D87;
+  font-size: 0.875rem;
+  line-height: 1.71;
+  color: #706D87;
+  border-radius: 32px;
+  background-color: #EDEDF0;
+  width: 33.333333333333336%;
+}
+
+.emotion-4:focus {
+  outline: none;
+  box-shadow: 0px 0px 0px 2px #332E54;
+  z-index: 3;
+}
+
+<div
+  class="emotion-0 emotion-1"
+>
+  <button
+    class="emotion-2 emotion-3"
+    transform="translate3d(0px, 0, 0)"
+  >
+    Tab 1
+  </button>
+  <button
+    class="emotion-4 emotion-5"
+    disabled=""
+  >
+    Tab 1
+  </button>
+  <button
+    class="emotion-4 emotion-5"
+  >
+    Tab 2
+  </button>
+  <button
+    class="emotion-4 emotion-5"
+  >
+    Tab 3
+  </button>
+</div>
+`;

src/shared-components/segmentedControl/index.tsx

@@ -0,0 +1,85 @@
+import React, { useState, useRef, useEffect } from 'react';
+
+import { SegmentsContainer, SegmentItem, Indicator } from './style';
+import { SegmentedControlProps, SegmentItemType } from './types';
+
+/**
+ * The width of the top-level container is set to 100%, so it will expand to fill its parent container.
+ *
+ * Set a non-percentage `width` on the parent element during implementation to avoid stretched-out layout or animation effects.
+ */
+export const SegmentedControl: React.FC<SegmentedControlProps> = ({
+  segmentItems,
+  initialActiveId = 1,
+  onClick,
+}) => {
+  const itemsCount = segmentItems.length;
+
+  if (itemsCount === 0) {
+    return null;
+  }
+
+  const initialActiveItem = segmentItems.find(
+    (item: SegmentItemType) => item.id === initialActiveId,
+  );
+
+  const initialActiveIndex = initialActiveItem
+    ? segmentItems.indexOf(initialActiveItem)
+    : 0;
+
+  const [activeSegmentText, setActiveSegmentText] = useState(() =>
+    initialActiveItem ? initialActiveItem.text : segmentItems[0].text,
+  );
+  const [activeSegmentIndex, setActiveSegmentIndex] =
+    useState(initialActiveIndex);
+  const targetRef = useRef<HTMLButtonElement>(null);
+  const [transform, setTransform] = useState('');
+  const [targetWidth, setTargetWidth] = useState(0);
+  const segmentWidth = 100 / itemsCount;
+
+  useEffect(() => {
+    if (targetRef.current) {
+      setTargetWidth(targetRef.current.offsetWidth);
+      setTransform(
+        `translate3d(${
+          targetRef.current.offsetWidth * activeSegmentIndex
+        }px, 0, 0)`,
+      );
+    }
+  }, [targetRef]);
+
+  const onSegmentClick = (segment: SegmentItemType, index: number) => {
+    setActiveSegmentText(segment.text);
+    setActiveSegmentIndex(index);
+    setTransform(`translate3d(${targetWidth * index}px, 0, 0)`);
+
+    if (onClick) {
+      onClick(segment);
+    }
+  };
+
+  return (
+    <SegmentsContainer>
+      <Indicator
+        segmentWidth={segmentWidth}
+        transform={transform}
+        ref={targetRef}
+      >
+        {activeSegmentText}
+      </Indicator>
+      {segmentItems.map((segment, index) => (
+        <SegmentItem
+          segmentWidth={segmentWidth}
+          active={index === activeSegmentIndex}
+          key={segment.id}
+          onClick={() => {
+            onSegmentClick(segment, index);
+          }}
+          disabled={index === activeSegmentIndex}
+        >
+          {segment.text}
+        </SegmentItem>
+      ))}
+    </SegmentsContainer>
+  );
+};

src/shared-components/segmentedControl/style.ts

@@ -0,0 +1,78 @@
+import styled from '@emotion/styled';
+import { buttonReset } from 'src/utils/styles/buttonReset';
+
+import { SPACER, Z_SCALE } from '../../constants';
+import { TYPOGRAPHY_STYLE } from '../typography';
+
+interface SegmentItemProps {
+  active: boolean;
+  onClick: () => void;
+  segmentWidth: number;
+}
+
+interface IndicatorProps {
+  segmentWidth: number;
+  transform: string;
+}
+
+export const SegmentsContainer = styled.div`
+  width: 100%;
+  height: ${SPACER.x2large};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  border-radius: ${({ theme }) => theme.BORDER_RADIUS.large};
+  background-color: ${({ theme }) => theme.COLORS.border};
+  padding: ${SPACER.xsmall} 0;
+`;
+
+export const SegmentItem = styled.button<SegmentItemProps>`
+  ${buttonReset};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 ${SPACER.x2small};
+  top: 0;
+  left: 0;
+  bottom: 0;
+  padding: ${SPACER.xsmall};
+  ${({ theme }) => TYPOGRAPHY_STYLE.caption(theme)};
+  color: ${({ theme }) => theme.COLORS.primaryTint2};
+  border-radius: ${({ theme }) => theme.BORDER_RADIUS.large};
+  background-color: ${({ theme }) => theme.COLORS.border};
+  width: ${({ segmentWidth }) => `${segmentWidth}%;`};
+
+  &:focus {
+    outline: none;
+    box-shadow: 0px 0px 0px 2px ${({ theme }) => theme.COLORS.primary};
+    z-index: ${Z_SCALE.e3};
+  }
+`;
+
+export const Indicator = styled.button<IndicatorProps>`
+  ${buttonReset};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  margin: 0;
+  position: absolute;
+  border-radius: ${({ theme }) => theme.BORDER_RADIUS.large};
+  width: ${({ segmentWidth }) => `${segmentWidth}%`};
+  top: 0;
+  left: 0;
+  bottom: 0;
+  background-color: white;
+  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+  ${({ theme }) => TYPOGRAPHY_STYLE.caption(theme)};
+  color: ${({ theme }) => theme.COLORS.primary};
+  font-weight: bold;
+  transform: ${({ transform }) => transform};
+  border: 4px solid ${({ theme }) => theme.COLORS.border};
+
+  &:focus {
+    box-shadow: ${({ theme }) => theme.BOX_SHADOWS.focusInner};
+    outline: none;
+  }
+`;

src/shared-components/segmentedControl/test.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { render, userEvent } from 'src/tests/testingLibraryHelpers';
+
+import { SegmentedControl } from './index';
+
+const testSegmentedControl = {
+  segmentItems: [
+    { id: 1, text: 'Tab 1' },
+    { id: 2, text: 'Tab 2' },
+    { id: 3, text: 'Tab 3' },
+  ],
+};
+
+describe('<SegmentedControl />', () => {
+  it('renders a regular segmented control', () => {
+    const { container } = render(
+      <SegmentedControl {...testSegmentedControl} />,
+    );
+
+    expect(container.firstElementChild).toMatchSnapshot();
+  });
+
+  it('calls onClick when button is clicked', () => {
+    const spy = jest.fn();
+
+    const { getByRole } = render(
+      <SegmentedControl {...testSegmentedControl} onClick={spy} />,
+    );
+
+    const button = getByRole('button', { name: 'Tab 3' });
+
+    userEvent.click(button);
+    expect(spy).toHaveBeenCalled();
+  });
+});

src/shared-components/segmentedControl/types.ts

@@ -0,0 +1,16 @@
+export interface SegmentedControlProps {
+  /**
+   * Initial segment id to display as active
+   */
+  initialActiveId?: number;
+  /**
+   * Callback invoked on `segmentItem` click
+   */
+  onClick?: (segment: SegmentItemType) => void;
+  segmentItems: SegmentItemType[];
+}
+
+export interface SegmentItemType {
+  id: number;
+  text: string;
+}

stories/field/index.stories.tsx

@@ -189,7 +189,6 @@ export const WithControls = () => (
   <FieldsContainer>
     <Field
       disabled={boolean('disabled', false)}
-      // @ts-expect-error: select + Field['message'] type compat issue
       messages={select('messages', messagesOptions, {})}
       messagesType={
         select('messagesType', messagesTypeOptions, 'error') as