@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").default;

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

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

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

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

var _orbitDesignTokens = require("@kiwicom/orbit-design-tokens");

var _mediaQuery = _interopRequireDefault(require("../utils/mediaQuery"));

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

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

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

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

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

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

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

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

const StyledBorder = _styledComponents.default.div.withConfig({
  displayName: "WizardStep__StyledBorder",
  componentId: "sc-v1tvdj-0"
})(["", ""], ({
  theme
}) => (0, _styledComponents.css)(["border-top:1px solid ", ";position:absolute;bottom:0px;width:100%;left:40px;"], theme.orbit.paletteCloudDark)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


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

const StyledContainer = _styledComponents.default.li.withConfig({
  displayName: "WizardStep__StyledContainer",
  componentId: "sc-v1tvdj-1"
})(["", ""], ({
  theme,
  isCompact,
  status
}) => (0, _styledComponents.css)(["position:relative;margin:-1px 0;", " ", ""], isCompact && (0, _styledComponents.css)(["button{border-radius:0;}", ""], status === "disabled" && (0, _styledComponents.css)(["background:", ";button{opacity:1;}"], theme.orbit.paletteCloudLight)), _mediaQuery.default.desktop((0, _styledComponents.css)(["&:hover{", "{transition:box-shadow ", " ease-in;box-shadow:", ";}}"], _WizardStepIcon.StyledStepIconContainer, theme.orbit.durationFast, status !== "disabled" && `0 0 0 6px ${(0, _orbitDesignTokens.convertHexToRgba)(theme.orbit.paletteProductNormal, 20)}`)))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


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

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


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

const StyledActiveMarker = _styledComponents.default.div.withConfig({
  displayName: "WizardStep__StyledActiveMarker",
  componentId: "sc-v1tvdj-3"
})(["", ""], ({
  theme
}) => (0, _styledComponents.css)(["position:absolute;top:1px;", ":0;bottom:1px;width:2px;border-top-", "-radius:", ";border-bottom-", "-radius:", ";background:", ";pointer-events:none;"], _rtl.left, _rtl.right, theme.orbit.borderRadiusNormal, _rtl.right, theme.orbit.borderRadiusNormal, theme.orbit.paletteProductNormal)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


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

const StyledProgressBar = _styledComponents.default.div.withConfig({
  displayName: "WizardStep__StyledProgressBar",
  componentId: "sc-v1tvdj-4"
})(["", ""], ({
  theme,
  status,
  nextStepStatus
}) => (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
};

const StyledLabel = _styledComponents.default.div.withConfig({
  displayName: "WizardStep__StyledLabel",
  componentId: "sc-v1tvdj-5"
})(["", ";"], ({
  theme,
  active
}) => (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
};

const StyledButtonWrapper = _styledComponents.default.div.withConfig({
  displayName: "WizardStep__StyledButtonWrapper",
  componentId: "sc-v1tvdj-6"
})(["", ""], ({
  theme,
  active
}) => (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
};

const WizardStep = ({
  dataTest,
  title,
  onClick
}) => {
  const theme = (0, _useTheme.default)();
  const {
    index,
    status,
    nextStepStatus,
    isCompact,
    isActive,
    onChangeStep,
    onClose
  } = React.useContext(_WizardContext.WizardStepContext);

  const handleClick = event => {
    if (onClick) onClick(event);
    if (onChangeStep) onChangeStep(index);
    onClose();
  };

  if (isCompact) {
    return /*#__PURE__*/React.createElement(StyledContainer, {
      "data-test": dataTest,
      isCompact: isCompact,
      status: status
    }, /*#__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), isActive && /*#__PURE__*/React.createElement(StyledActiveMarker, null), status !== "disabled" && /*#__PURE__*/React.createElement(StyledBorder, null));
  }

  const step = /*#__PURE__*/React.createElement(_Stack.default, {
    flex: true,
    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: event => {
      event.currentTarget.blur();
      handleClick(event);
    } // keep focus for people who are navigating with the keyboard
    ,
    onKeyDown: event => {
      if (event.key === "Enter") {
        handleClick(event);
      }
    }
  }, step))));
};

var _default = WizardStep;
exports.default = _default;

var _StyledDiv = (0, _styledComponents.default)("div").withConfig({
  displayName: "WizardStep___StyledDiv",
  componentId: "sc-v1tvdj-7"
})(["padding:", ";"], p => p.$_css);