Steps

import { Steps } from 'nr1';

<Steps defaultValue="monitor-workflows">
  <StepsItem label="Add your data" value="add-data" checked>
    Connect your data to New Relic and gain insights in 5 minutes.
  </StepsItem>
  <StepsItem label="Explore your data" value="explore-data" checked>
    Traverse your entire stack in one place.
  </StepsItem>
  <StepsItem label="Monitor critical workflows" value="monitor-workflows">
    <Stack
      directionType={Stack.DIRECTION_TYPE.VERTICAL}
      gapType={Stack.GAP_TYPE.LARGE}
    >
      <StackItem>
        Detect outages and poor performance before your users notice.
      </StackItem>
      <StackItem>
        <Button sizeType={Button.SIZE_TYPE.SMALL}>Learn more</Button>
      </StackItem>
    </Stack>
  </StepsItem>
  <StepsItem label="Configure an alert" value="configure-alert">
    Configure an alert and we'll tell you when to worry.
  </StepsItem>
  <StepsItem label="Query your data" value="query-data">
    Write your first query in our powerful New Relic Query Language (NRQL).
  </StepsItem>
  <StepsItem label="Set up a dashboard" value="setup-dashboard">
    Create and share dashboards that matter to you and your team.
  </StepsItem>
</Steps>;

function render() {
  const STEP_IDS = {
    ACCOUNT: 'ACCOUNT',
    CONDITIONS: 'CONDITIONS',
  };
  const CONDITIONS = [
    'Critical Throughput (web)',
    'Critical Error rate',
    'Critical Response time (web)',
    'Critical Background throughput',
  ];
  const CONDITIONS_DESCRIPTION =
    'Recommendations based on the number of similar entities using this condition.';
  class ConditionCreationSteps extends React.PureComponent {
    constructor() {
      super(...arguments);
      this.state = {
        activeStep: STEP_IDS.CONDITIONS,
        conditions: [],
        invalid: undefined,
      };
      this._onClickNext = this._onClickNext.bind(this);
    }
    _onChangeCondition(evt, condition) {
      const { checked } = evt.target;
      if (checked) {
        return this.setState((state) => ({
          conditions: [...state.conditions, condition],
        }));
      }
      this.setState((state) => ({
        conditions: state.conditions.filter((curr) => curr !== condition),
      }));
    }
    _onClickNext() {
      const { conditions } = this.state;
      const conditionsStepCompleted = conditions.length > 0;
      if (conditionsStepCompleted) {
        return this.setState({
          activeStep: STEP_IDS.ACCOUNT,
          invalid: null,
        });
      }
      this.setState({ invalid: 'Select at least one condition' });
    }
    renderConditions() {
      const { invalid, activeStep, conditions } = this.state;
      const showSummary = activeStep !== STEP_IDS.CONDITIONS;
      if (showSummary) {
        return (
          <ul>
            {conditions.map((condition, index) => (
              <li key={index}>{condition}</li>
            ))}
          </ul>
        );
      }
      return (
        <Stack
          directionType={Stack.DIRECTION_TYPE.VERTICAL}
          gapType={Stack.GAP_TYPE.LARGE}
        >
          <StackItem>
            <CheckboxGroup
              invalid={invalid}
              description={CONDITIONS_DESCRIPTION}
            >
              {CONDITIONS.map((condition, index) => (
                <Checkbox
                  key={index}
                  label={condition}
                  checked={conditions.includes(condition)}
                  onChange={(evt) => this._onChangeCondition(evt, condition)}
                />
              ))}
            </CheckboxGroup>
          </StackItem>
          <StackItem>
            <Button
              sizeType={Button.SIZE_TYPE.SMALL}
              spacingType={[
                Button.SPACING_TYPE.NONE,
                Button.SPACING_TYPE.NONE,
                Button.SPACING_TYPE.LARGE,
              ]}
              type={Button.TYPE.PRIMARY}
              onClick={this._onClickNext}
            >
              Next
            </Button>
          </StackItem>
        </Stack>
      );
    }
    render() {
      const { activeStep, conditions } = this.state;
      const conditionsStepCompleted = conditions.length > 0;
      return (
        <Steps
          defaultValue="conditions"
          value={activeStep}
          onChange={(evt, value) => this.setState({ activeStep: value })}
        >
          <StepsItem
            label="Create recommended conditions"
            value={STEP_IDS.CONDITIONS}
            checked={conditionsStepCompleted}
            expanded
          >
            {this.renderConditions()}
          </StepsItem>
          <StepsItem
            label="Select an account"
            value={STEP_IDS.ACCOUNT}
            disabled={
              !conditionsStepCompleted || activeStep === STEP_IDS.CONDITIONS
            }
          >
            <Dropdown title="Select an account">
              <DropdownItem>Example Account 1</DropdownItem>
              <DropdownItem>Example Account 2</DropdownItem>
              <DropdownItem>Example Account 3</DropdownItem>
            </Dropdown>
          </StepsItem>
        </Steps>
      );
    }
  }
  return <ConditionCreationSteps />;
}