[Components] Add SegmentedControl

docs/segmentedControl.md

@@ -0,0 +1,44 @@
+# Segmented Control
+
+## Usage
+
+```jsx
+import { SegmentedControl } from 'radiance-ui';
+
+class SegmentedControlExample extends React.Component {
+  segmentItems = [
+    { id: 1, text: 'Option 1' },
+    { id: 2, text: 'Option 2' },
+    { id: 3, text: 'Option 3' },
+  ];
+
+  const onClick = segment => {
+    console.log(segment);
+  }
+
+  render() {
+    return <SegmentedControl initialActiveId={1} segmentItems={this.segmentItems} onClick={onClick} />;
+  }
+}
+```
+
+<!-- STORY -->
+
+### Proptypes
+
+| prop            | propType         | required | default | description                      |
+| --------------- | ---------------- | -------- | ------- | -------------------------------- |
+| initialActiveId | number           | no       | 1       | initial segment id to display    |
+| onClick         | number           | no       | -       | function to call on tab click    |
+| segmentItems    | array of objects | yes      | -       | see segmentItem properties below |
+
+#### `segmentItem` Proptypes
+
+| prop | propType | description              |
+| ---- | -------- | ------------------------ |
+| id   | number   | the segment indentifier  |
+| text | string   | the title of the segment |
+
+### Notes
+
+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.

src/shared-components/index.ts

@@ -24,6 +24,7 @@ export { default as OffClickWrapper } from './offClickWrapper';
 export { default as OptionButton } from './optionButton';
 export { default as ProgressBar } from './progressBar';
 export { default as RadioButton } from './radioButton';
+export { default as SegmentedControl } from './segmentedControl';
 export { default as Tabs } from './tabs';
 export { default as Toggle } from './toggle';
 export { default as Tooltip } from './tooltip';

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

@@ -0,0 +1,119 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SegmentedControl /> renders a regular segmented control 1`] = `
+.emotion-8 {
+  width: 100%;
+  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: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  position: relative;
+  border-radius: 80px;
+  background-color: #ededf0;
+  padding: 0.25rem;
+  border: 5px solid #ededf0;
+}
+
+.emotion-0 {
+  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;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  cursor: pointer;
+  margin: 0;
+  position: absolute;
+  border-radius: 80px;
+  width: 33.333333333333336%;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.22,1,0.36,1);
+  -webkit-transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
+  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
+  background-color: white;
+  color: #332e54;
+  font-weight: bold;
+  -webkit-transform: initial;
+  -ms-transform: initial;
+  transform: initial;
+}
+
+.emotion-2 {
+  background: transparent;
+  border: none;
+  color: #524D6E;
+  font-size: 1rem;
+  line-height: 1.75;
+  color: #706D87;
+  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;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  cursor: pointer;
+  margin: 0;
+  border-radius: 80px;
+  background-color: #ededf0;
+  width: 33.333333333333336%;
+}
+
+.emotion-2:focus {
+  outline: none;
+}
+
+<div
+  className="emotion-8 emotion-9"
+>
+  <div
+    className="emotion-0 emotion-1"
+    transform="initial"
+    width={33.333333333333336}
+  >
+    Tab 1
+  </div>
+  <button
+    className="emotion-2 emotion-3"
+    onClick={[Function]}
+    width={33.333333333333336}
+  >
+    Tab 1
+  </button>
+  <button
+    className="emotion-2 emotion-3"
+    onClick={[Function]}
+    width={33.333333333333336}
+  >
+    Tab 2
+  </button>
+  <button
+    className="emotion-2 emotion-3"
+    onClick={[Function]}
+    width={33.333333333333336}
+  >
+    Tab 3
+  </button>
+</div>
+`;

src/shared-components/segmentedControl/index.tsx

@@ -0,0 +1,69 @@
+import React, { useState, useRef, useEffect } from 'react';
+
+import { SegmentsContainer, SegmentItem, Indicator } from './style';
+import { SegmentedControlProps, SegmentItemType } from './types';
+
+const SegmentedControl: React.FC<SegmentedControlProps> = ({
+  segmentItems,
+  initialActiveId = 1,
+  onClick,
+}) => {
+  const initialActiveItem = segmentItems.find(
+    (item: SegmentItemType) => item.id === initialActiveId,
+  );
+  const initialActiveIndex = initialActiveItem
+    ? segmentItems.indexOf(initialActiveItem)
+    : 0;
+
+  const targetRef = useRef<HTMLDivElement>(null);
+  const [activeSegmentId, setActiveSegmentId] = useState(initialActiveId);
+  const [activeSegmentText, setActiveSegmentText] = useState(
+    initialActiveItem?.text,
+  );
+  const [activeSegmentIndex, setActiveSegmentIndex] = useState(
+    initialActiveIndex,
+  );
+  const [transform, setTransform] = useState('initial');
+  const [targetWidth, setTargetWidth] = useState(0);
+  const segmentWidth = 100 / segmentItems.length;
+
+  useEffect(() => {
+    if (targetRef.current) {
+      setTargetWidth(targetRef.current.offsetWidth);
+      setTransform(
+        `translate3d(${
+          targetRef.current.offsetWidth * activeSegmentIndex
+        }px, 0, 0)`,
+      );
+    }
+  }, [targetRef]);
+
+  const onSegmentClick = (segment: SegmentItemType) => {
+    const index = segmentItems.indexOf(segment);
+    setActiveSegmentId(segment.id);
+    setActiveSegmentText(segment.text);
+    setActiveSegmentIndex(index);
+    setTransform(`translate3d(${targetWidth * index}px, 0, 0)`);
+    return onClick ? onClick(segment) : null;
+  };
+
+  return (
+    <SegmentsContainer>
+      <Indicator width={segmentWidth} transform={transform} ref={targetRef}>
+        {activeSegmentText}
+      </Indicator>
+      {segmentItems.map((segment) => (
+        <SegmentItem
+          width={segmentWidth}
+          active={segment.id === activeSegmentId}
+          key={segment.id}
+          onClick={() => onSegmentClick(segment)}
+        >
+          {segment.text}
+        </SegmentItem>
+      ))}
+    </SegmentsContainer>
+  );
+};
+
+export default SegmentedControl;

src/shared-components/segmentedControl/style.ts

@@ -0,0 +1,65 @@
+import styled from '@emotion/styled';
+import { buttonReset } from 'src/utils/styles/buttonReset';
+
+import { COLORS, SPACER } from '../../constants';
+import { style as TYPOGRAPHY_STYLE } from '../typography';
+
+type SegmentItemProps = {
+  active: boolean;
+  key: number;
+  onClick: () => void;
+  width: number;
+};
+
+type IndicatorProps = {
+  width: number;
+  transform: string;
+};
+
+export const SegmentsContainer = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+  border-radius: 80px;
+  background-color: ${COLORS.purple10};
+  padding: ${SPACER.xsmall};
+  border: 5px solid ${COLORS.purple10};
+`;
+
+export const SegmentItem = styled.button<SegmentItemProps>`
+  ${buttonReset};
+  ${TYPOGRAPHY_STYLE.body};
+  color: ${COLORS.purple70};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  margin: 0;
+  border-radius: 80px;
+  background-color: ${COLORS.purple10};
+  width: ${({ width }) => `${width}%`};
+  &:focus {
+    outline: none;
+  }
+`;
+
+export const Indicator = styled.div<IndicatorProps>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  margin: 0;
+  position: absolute;
+  border-radius: 80px;
+  width: ${({ width }) => `${width}%`};
+  top: 0;
+  left: 0;
+  bottom: 0;
+  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
+  background-color: white;
+  color: ${COLORS.primary};
+  font-weight: bold;
+  transform: ${({ transform }) => transform};
+`;

src/shared-components/segmentedControl/test.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { shallow } from 'enzyme';
+
+import SegmentedControl from './index';
+
+const testSegmentedControl = {
+  segmentItems: [
+    { id: 1, text: 'Tab 1' },
+    { id: 2, text: 'Tab 2' },
+    { id: 3, text: 'Tab 3' },
+  ],
+};
+/* eslint-disable react/jsx-props-no-spreading */
+describe('<SegmentedControl />', () => {
+  test('renders a regular segmented control', () => {
+    const component = renderer.create(
+      <SegmentedControl {...testSegmentedControl} />,
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  test('calls onClick when button is clicked', () => {
+    const spy = jest.fn();
+    const buttonIndex = 2;
+
+    const component = shallow(
+      <SegmentedControl {...testSegmentedControl} onClick={spy} />,
+    );
+    const button = component.childAt(buttonIndex);
+
+    button.simulate('click');
+    expect(spy).toHaveBeenCalled();
+  });
+});

src/shared-components/segmentedControl/types.ts

@@ -0,0 +1,10 @@
+export type SegmentedControlProps = {
+  initialActiveId?: number;
+  segmentItems: SegmentItemType[];
+  onClick?: (segment: SegmentItemType) => void;
+};
+
+export type SegmentItemType = {
+  id: number;
+  text: string;
+};

stories/segmentedControl/defaultControl/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { css } from '@emotion/core';
+
+import { SegmentedControl } from 'src/shared-components';
+import { SegmentItemType } from 'src/shared-components/segmentedControl/types';
+
+type DefaultControlProps = {
+  width?: string;
+  segmentItems: SegmentItemType[];
+};
+
+const DefaultControl: React.FC<DefaultControlProps> = ({
+  width = '500px',
+  segmentItems,
+}) => {
+  return (
+    <div
+      css={css`
+        width: ${width};
+      `}
+    >
+      <SegmentedControl segmentItems={segmentItems} initialActiveId={1} />
+    </div>
+  );
+};
+
+export default DefaultControl;