import { jsx } from '@emotion/core';
import { Fragment } from 'react';
import _pt from 'prop-types';
import { Link } from 'gatsby';
import { stepNumberCss, stepNumberActiveCss, stepNumberDoneCss, labelCss, labelInactiveCss, labelActiveCss, baseCss, activeCss, linkCss } from './StepIndicatorStep.styles.esm.js';

function StepIndicatorStep(_ref) {
  var children = _ref.children,
      to = _ref.to,
      _ref$status = _ref.status,
      status = _ref$status === void 0 ? "DEFAULT" : _ref$status,
      onClick = _ref.onClick;
  var label = jsx(Fragment, null, jsx("span", {
    css: function css(theme) {
      return [stepNumberCss(theme), status === "ACTIVE" && stepNumberActiveCss(theme), status === "DONE" && stepNumberDoneCss(theme)];
    }
  }), jsx("span", {
    css: function css(theme) {
      return [labelCss(), status === "DEFAULT" && labelInactiveCss(theme), status === "DONE" && labelInactiveCss(theme), status === "ACTIVE" && labelActiveCss()];
    }
  }, children));
  return jsx("li", {
    css: function css(theme) {
      return [baseCss(theme), status === "ACTIVE" && activeCss(theme)];
    }
  }, to ? jsx(Link, {
    to: to,
    onClick: onClick,
    css: linkCss
  }, label) : label);
}
StepIndicatorStep.propTypes = {
  children: _pt.node,
  to: _pt.string,
  status: _pt.oneOf(["DEFAULT", "ACTIVE", "DONE"])
};
StepIndicatorStep.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "StepIndicatorStep",
  "props": {
    "status": {
      "defaultValue": {
        "value": "`DEFAULT`",
        "computed": false
      },
      "required": false,
      "tsType": {
        "name": "union",
        "raw": "`DEFAULT` | `ACTIVE` | `DONE`",
        "elements": [{
          "name": "literal",
          "value": "undefined"
        }, {
          "name": "literal",
          "value": "undefined"
        }, {
          "name": "literal",
          "value": "undefined"
        }]
      },
      "description": ""
    },
    "children": {
      "required": false,
      "tsType": {
        "name": "ReactReactNode",
        "raw": "React.ReactNode"
      },
      "description": ""
    },
    "to": {
      "required": false,
      "tsType": {
        "name": "string"
      },
      "description": ""
    },
    "onClick": {
      "required": false,
      "tsType": {
        "name": "GatsbyLinkProps[\"onClick\"]",
        "raw": "GatsbyLinkProps<any>[\"onClick\"]"
      },
      "description": ""
    }
  }
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/StepIndicator/StepIndicatorStep.tsx"] = {
    name: "StepIndicatorStep",
    docgenInfo: StepIndicatorStep.__docgenInfo,
    path: "src/components/StepIndicator/StepIndicatorStep.tsx"
  };
}

export { StepIndicatorStep };
//# sourceMappingURL=StepIndicatorStep.esm.js.map
