gistfile1.txt

import * as React from 'react';
import { createStyles, makeStyles, Theme } from '@material-ui/core';
import { Trans } from 'react-i18next';

import FanStep from '../FanStep';
import FanStepLabel from '../FanStepLabel';

import FanStepper from '.';

export default {
  title: 'Stepper',
};

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    stepTitle: {
      fontSize: 21,
      fontWeight: 700,
      marginTop: 20,
      color: theme.palette.primary.main,
      textAlign: 'center',

      [theme.breakpoints.up('md')]: {
        display: 'none',
      },
    },
  }),
);

export const WithoutProps: React.FunctionComponent = () => {
  const classes = useStyles();
  const steps = [
    <Trans key={1}>Логин</Trans>,
    <Trans key={2}>Персональные данные</Trans>,
    <Trans key={3}>Дополнительное</Trans>,
    <Trans key={4}>Готово</Trans>,
  ];
  const currentTitle = steps[1];

  return (
    <>
      <FanStepper activeStep={1}>
        {steps &&
          steps.map((label, i) => (
            <FanStep key={i}>
              <FanStepLabel>{label}</FanStepLabel>
            </FanStep>
          ))}
      </FanStepper>
      {currentTitle ? (
        <p className={classes.stepTitle}>{currentTitle}</p>
      ) : null}
    </>
  );
};

WithoutProps.story = {
  name: 'without props',
};