@kiwicom/orbit-components/lib/Wizard/WizardStep.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var React = _interopRequireWildcard(require("react"));

var _ButtonLink = _interopRequireDefault(require("../ButtonLink"));

var _Stack = _interopRequireDefault(require("../Stack"));

var _Text = _interopRequireDefault(require("../Text"));

var _useTheme = _interopRequireDefault(require("../hooks/useTheme"));

var _WizardStepIcon = _interopRequireDefault(require("./WizardStepIcon"));

var _WizardContext = require("./WizardContext");

var _defaultTheme = _interopRequireDefault(require("../defaultTheme"));

var _rtl = require("../utils/rtl");

var StyledContainer = _styledComponents.default.li.withConfig({
  displayName: "WizardStep__StyledContainer",
  componentId: "v9v0u-0"
})(["", ""], function (_ref) {
  var theme = _ref.theme,
      isCompact = _ref.isCompact,
      status = _ref.status;
  return isCompact && (0, _styledComponents.css)(["position:relative;button{border-radius:0;}", ";"], status === "disabled" && (0, _styledComponents.css)(["background:", ";button{opacity:1;}"], theme.orbit.paletteCloudLight));
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


StyledContainer.defaultProps = {
  theme: _defaultTheme.default
};

var StyledContent = _styledComponents.default.div.withConfig({
  displayName: "WizardStep__StyledContent",
  componentId: "v9v0u-1"
})(["position:relative;"]); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


StyledContent.defaultProps = {
  theme: _defaultTheme.default
};

var StyledActiveMarker = _styledComponents.default.div.withConfig({
  displayName: "WizardStep__StyledActiveMarker",
  componentId: "v9v0u-2"
})(["", ""], function (_ref2) {
  var theme = _ref2.theme;
  return (0, _styledComponents.css)(["position:absolute;top:0;", ":0;bottom:0;width:2px;background:", ";pointer-events:none;"], _rtl.left, theme.orbit.paletteProductNormal);
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


StyledActiveMarker.defaultProps = {
  theme: _defaultTheme.default
};

var StyledProgressBar = _styledComponents.default.div.withConfig({
  displayName: "WizardStep__StyledProgressBar",
  componentId: "v9v0u-3"
})(["", ""], function (_ref3) {
  var theme = _ref3.theme,
      status = _ref3.status,
      nextStepStatus = _ref3.nextStepStatus;
  return (0, _styledComponents.css)(["position:relative;&:before,&:after{content:\"\";display:block;position:absolute;top:", "px;width:50%;height:2px;}&:before{", ":0;background:", ";}&:after{", ":0;background:", ";}"], parseFloat(theme.orbit.heightIconSmall) / 2 - 1, _rtl.left, status === "disabled" ? theme.orbit.paletteCloudNormalHover : theme.orbit.paletteProductNormal, _rtl.right, status === "disabled" || nextStepStatus === "disabled" ? theme.orbit.paletteCloudNormalHover : theme.orbit.paletteProductNormal);
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


StyledProgressBar.defaultProps = {
  theme: _defaultTheme.default
};

var StyledLabel = _styledComponents.default.div.withConfig({
  displayName: "WizardStep__StyledLabel",
  componentId: "v9v0u-4"
})(["", ";"], function (_ref4) {
  var theme = _ref4.theme,
      active = _ref4.active;
  return (0, _styledComponents.css)(["display:block;span{display:block;color:", ";}", ""], theme.orbit.colorTextSecondary, active && (0, _styledComponents.css)(["span{font-weight:", ";color:", ";}"], theme.orbit.fontWeightMedium, theme.orbit.colorTextPrimary));
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


StyledLabel.defaultProps = {
  theme: _defaultTheme.default
};

var StyledButtonWrapper = _styledComponents.default.div.withConfig({
  displayName: "WizardStep__StyledButtonWrapper",
  componentId: "v9v0u-5"
})(["", ""], function (_ref5) {
  var theme = _ref5.theme,
      active = _ref5.active;
  return (0, _styledComponents.css)(["cursor:pointer;padding:0 ", ";", ""], theme.orbit.spaceXSmall, !active && (0, _styledComponents.css)(["&:hover,&:focus{", "{span{text-decoration:underline;color:", ";}}}"], StyledLabel, theme.orbit.colorTextPrimary));
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


StyledButtonWrapper.defaultProps = {
  theme: _defaultTheme.default
};

var _StyledDiv = (0, _styledComponents.default)("div").withConfig({
  displayName: "WizardStep___StyledDiv",
  componentId: "v9v0u-6"
})(["padding:", ";"], function (p) {
  return p._css;
});

var WizardStep = function WizardStep(_ref6) {
  var dataTest = _ref6.dataTest,
      title = _ref6.title,
      onClick = _ref6.onClick;
  var theme = (0, _useTheme.default)();

  var _React$useContext = React.useContext(_WizardContext.WizardStepContext),
      index = _React$useContext.index,
      status = _React$useContext.status,
      nextStepStatus = _React$useContext.nextStepStatus,
      isCompact = _React$useContext.isCompact,
      isActive = _React$useContext.isActive,
      onChangeStep = _React$useContext.onChangeStep;

  var handleClick = function handleClick(event) {
    if (onClick) onClick(event);
    if (onChangeStep) onChangeStep(index);
  };

  if (isCompact) {
    return /*#__PURE__*/React.createElement(StyledContainer, {
      "data-test": dataTest,
      isCompact: isCompact,
      status: status
    }, isActive && /*#__PURE__*/React.createElement(StyledActiveMarker, null), /*#__PURE__*/React.createElement(_ButtonLink.default, {
      disabled: status === "disabled",
      type: "secondary",
      fullWidth: true,
      iconLeft: /*#__PURE__*/React.createElement(_WizardStepIcon.default, null),
      ariaCurrent: isActive ? "step" : "false",
      onClick: handleClick
    }, status === "disabled" ? /*#__PURE__*/React.createElement(_Text.default, {
      as: "span",
      type: "secondary"
    }, title) : title));
  }

  var step = /*#__PURE__*/React.createElement(_Stack.default, {
    direction: "column",
    align: "center",
    spacing: "XSmall"
  }, /*#__PURE__*/React.createElement(_WizardStepIcon.default, null), /*#__PURE__*/React.createElement(_StyledDiv, {
    _css: theme.orbit.paddingBadge
  }, status === "disabled" ? /*#__PURE__*/React.createElement(_Text.default, {
    as: "div",
    type: "secondary",
    size: "small",
    align: "center"
  }, title) : /*#__PURE__*/React.createElement(StyledLabel, {
    active: isActive
  }, /*#__PURE__*/React.createElement(_Text.default, {
    as: "span",
    size: "small",
    align: "center"
  }, title))));
  return /*#__PURE__*/React.createElement(StyledContainer, {
    "data-test": dataTest,
    isCompact: isCompact,
    status: status
  }, /*#__PURE__*/React.createElement(StyledProgressBar, {
    status: status,
    nextStepStatus: nextStepStatus
  }), /*#__PURE__*/React.createElement(StyledContent, null, /*#__PURE__*/React.createElement(_Stack.default, {
    flex: true,
    direction: "column",
    align: "center"
  }, status === "disabled" ? step : /*#__PURE__*/React.createElement(StyledButtonWrapper, {
    active: isActive,
    role: "button",
    tabIndex: 0,
    "aria-current": isActive ? "step" : "false",
    onClick: function onClick(event) {
      event.currentTarget.blur();
      handleClick(event);
    } // keep focus for people who are navigating with the keyboard
    ,
    onKeyDown: function onKeyDown(event) {
      if (event.key === "Enter") {
        handleClick(event);
      }
    }
  }, step))));
};

var _default = WizardStep;
exports.default = _default;