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

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

import _styled from "styled-components";
import * as React from "react";
import styled, { css } from "styled-components";
import ButtonLink from "../ButtonLink";
import Stack from "../Stack";
import Text from "../Text";
import useTheme from "../hooks/useTheme";
import WizardStepIcon from "./WizardStepIcon";
import { WizardStepContext } from "./WizardContext";
import defaultTheme from "../defaultTheme";
import { left, right } from "../utils/rtl";
var StyledContainer = styled.li.withConfig({
  displayName: "WizardStep__StyledContainer",
  componentId: "v9v0u-0"
})(["", ""], function (_ref) {
  var theme = _ref.theme,
      isCompact = _ref.isCompact,
      status = _ref.status;
  return isCompact && css(["position:relative;button{border-radius:0;}", ";"], status === "disabled" && css(["background:", ";button{opacity:1;}"], theme.orbit.paletteCloudLight));
});
StyledContainer.defaultProps = {
  theme: defaultTheme
};
var StyledActiveMarker = styled.div.withConfig({
  displayName: "WizardStep__StyledActiveMarker",
  componentId: "v9v0u-1"
})(["", ""], function (_ref2) {
  var theme = _ref2.theme;
  return css(["position:absolute;top:0;", ":0;bottom:0;width:2px;background:", ";pointer-events:none;"], left, theme.orbit.paletteProductNormal);
});
StyledActiveMarker.defaultProps = {
  theme: defaultTheme
};
var StyledProgressBar = styled.div.withConfig({
  displayName: "WizardStep__StyledProgressBar",
  componentId: "v9v0u-2"
})(["", ""], function (_ref3) {
  var theme = _ref3.theme,
      status = _ref3.status,
      nextStepStatus = _ref3.nextStepStatus,
      iconHeight = _ref3.iconHeight;
  return css(["position:relative;&:before,&:after{content:\"\";display:block;position:absolute;top:", "px;width:50%;height:2px;}&:before{", ":0;background:", ";}&:after{", ":0;background:", ";}"], parseFloat(iconHeight) / 2 - 1, left, status === "disabled" ? theme.orbit.paletteCloudNormalHover : theme.orbit.paletteProductNormal, right, status === "disabled" || nextStepStatus === "disabled" ? theme.orbit.paletteCloudNormalHover : theme.orbit.paletteProductNormal);
});
StyledProgressBar.defaultProps = {
  theme: defaultTheme
};
var StyledLink = styled.a.withConfig({
  displayName: "WizardStep__StyledLink",
  componentId: "v9v0u-3"
})(["", ";"], function (_ref4) {
  var theme = _ref4.theme,
      active = _ref4.active;
  return css(["display:block;text-decoration:none;span{display:block;}", ""], active ? css(["span{font-weight:", ";}"], theme.orbit.fontWeightMedium) : // appear interactive only if it's not active
  css(["cursor:pointer;span{color:", ";}&:hover,&:focus{span{color:", ";text-decoration:underline;}}"], theme.orbit.colorTextSecondary, theme.orbit.colorTextPrimary));
});
StyledLink.defaultProps = {
  theme: defaultTheme
};

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

var WizardStep = function WizardStep(_ref5) {
  var dataTest = _ref5.dataTest,
      title = _ref5.title,
      onClick = _ref5.onClick;
  var theme = useTheme();

  var _React$useContext = React.useContext(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);
  };

  var iconWidth = parseFloat(theme.orbit.widthIconSmall) + 3.2;
  var iconHeight = parseFloat(theme.orbit.heightIconSmall) + 3.2;

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

  return /*#__PURE__*/React.createElement(StyledContainer, {
    "data-test": dataTest,
    isCompact: isCompact,
    status: status
  }, /*#__PURE__*/React.createElement(StyledProgressBar, {
    status: status,
    nextStepStatus: nextStepStatus,
    iconHeight: iconHeight
  }), /*#__PURE__*/React.createElement(Stack, {
    direction: "column",
    align: "center",
    spacing: "condensed"
  }, /*#__PURE__*/React.createElement(WizardStepIcon, {
    width: iconWidth,
    height: iconHeight
  }), /*#__PURE__*/React.createElement(_StyledDiv, {
    _css: theme.orbit.paddingBadge
  }, status === "disabled" ? /*#__PURE__*/React.createElement(Text, {
    as: "div",
    type: "secondary",
    size: "small",
    align: "center"
  }, title) : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(StyledLink, {
    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);
      }
    }
  }, /*#__PURE__*/React.createElement(Text, {
    as: "span",
    size: "small",
    align: "center"
  }, title))))));
};

export default WizardStep;