Stepper.jsx

import React, { Component } from 'react';
import styled from 'styled-components';

const orangeColor = '#FE6680';
const bubbleSize = 50;
const stepperwidth = 800;

const StepContainer = styled.div`
  width: ${stepperwidth}px;
  height: ${bubbleSize}px;
  position: absolute;
  display: flex;
  justify-content: space-between;
  font-family: sans-serif;
  align-items: center;
`;

const LineContainer = styled.div`
  width: ${stepperwidth - bubbleSize}px;
  height: ${bubbleSize}px;
  margin: 0 ${bubbleSize / 2}px;
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
`;

const Step = ({active, passed, ...props}) => (
  <div {...props}>
    <span>{props.index + 1}</span>
  </div>
);

const StyledStep = styled(Step)`
  height: ${({active}) => active ? bubbleSize : (bubbleSize - 10)}px;
  width: ${({active}) => active ? bubbleSize : (bubbleSize - 10)}px;
  border-radius: 50%;
  background-color: ${({passed}) => passed ? orangeColor : 'gray'};
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  transition: height 0.2s ease-in-out, width 0.2s ease-in-out, background-color 0.2s ease-in-out;
  span {
    color: white;
    transition: font-size 0.2s ease-in-out;
    font-size: ${({active}) => active ? 2 : 1.5}em;
  }
`;

const StyledLine = styled.div`
  background-color: ${(props) => props.active ? orangeColor : 'gray'};
  height: 4px;
  flex: 1 0 0;
`;

class App extends Component {
  state = {
    cubes: 5,
    current: 0,
  }

  add = () => {
    this.setState(({cubes}) => ({
      cubes: cubes + 1,
    }));
  }

  del = () => {
    this.setState(({cubes}) => ({
      cubes: !(cubes - 1) ? cubes : cubes - 1,
    }));
  }

  addStep = () => {
    this.setState(({current, cubes}) => ({
      current: !(cubes - current - 1) ? current : current + 1,
    }));
  }

  delStep = () => {
    this.setState(({current}) => ({
      current: !current ? current : current - 1,
    }));
  }

  render() {
    const {cubes, current} = this.state;
    return (
      <div>
        <div style={{ position: 'relative', height: '50px' }}>
          <LineContainer>
            {[...new Array(cubes - 1)]
              .map((a, i) => (<StyledLine key={`${a}-${i}`} active={(current - 1) >= i} />))}
          </LineContainer>
          <StepContainer>
            {[...new Array(cubes)]
              .map((a, i) => (<StyledStep key={`${a}-${i}`} index={i} active={current === i} passed={current >= i} />))}
          </StepContainer>
        </div>
        <br />
        <button onClick={this.add}>Add</button>
        <button onClick={this.del}>Del</button>
        <br />
        <button onClick={this.delStep}>{'<<<'}</button>
        <button onClick={this.addStep}>{'>>>'}</button>
      </div>
    );
  }
}

export default App;