@kiwicom/orbit-components/lib/Wizard/WizardStepIcon.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 _convertHexToRgba = _interopRequireDefault(require("@kiwicom/orbit-design-tokens/lib/convertHexToRgba"));

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

var _CheckCircle = _interopRequireDefault(require("../icons/CheckCircle"));

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

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

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

var centerMixin = (0, _styledComponents.css)(["position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);"]);

var StyledCircle = _styledComponents.default.div.withConfig({
  displayName: "WizardStepIcon__StyledCircle",
  componentId: "sc-1mlvzs1-0"
})(["", ""], function (_ref) {
  var theme = _ref.theme,
      width = _ref.width,
      height = _ref.height,
      status = _ref.status,
      active = _ref.active,
      hasGlow = _ref.hasGlow;
  return (0, _styledComponents.css)(["width:", "px;height:", "px;", ";background:", ";border-radius:50%;", " ", " ", ""], Math.round(width), Math.round(height), centerMixin, theme.orbit.paletteProductNormal, status === "completed" && (0, _styledComponents.css)(["background:", ";"], theme.orbit.paletteWhite), status === "disabled" && (0, _styledComponents.css)(["background:", ";"], theme.orbit.paletteCloudNormalHover), active && hasGlow && (0, _styledComponents.css)(["box-shadow:0 0 0 4px ", ";"], (0, _convertHexToRgba.default)(theme.orbit.paletteProductNormal, 20)));
});

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

var StyledTextContainer = _styledComponents.default.div.withConfig({
  displayName: "WizardStepIcon__StyledTextContainer",
  componentId: "sc-1mlvzs1-1"
})(["", ""], function (_ref2) {
  var width = _ref2.width,
      height = _ref2.height,
      checkboxWidth = _ref2.checkboxWidth,
      checkboxHeight = _ref2.checkboxHeight;
  return (0, _styledComponents.css)(["box-sizing:border-box;display:flex;justify-content:center;align-items:center;width:", "px;height:", "px;padding:", "px ", "px;"], width, height, Math.round((height - checkboxHeight) / 2), Math.round((width - checkboxWidth) / 2));
});

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

var _StyledDiv = (0, _styledComponents.default)("div").withConfig({
  displayName: "WizardStepIcon___StyledDiv",
  componentId: "sc-1mlvzs1-2"
})(["position:relative;"]);

var _StyledDiv2 = (0, _styledComponents.default)("div").withConfig({
  displayName: "WizardStepIcon___StyledDiv2",
  componentId: "sc-1mlvzs1-3"
})(["position:relative;svg{width:", "px;height:", "px;display:block;}"], function (p) {
  return p._css;
}, function (p) {
  return p._css2;
});

var WizardStepIcon = function WizardStepIcon(_ref3) {
  var width = _ref3.width,
      height = _ref3.height;

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

  var theme = (0, _useTheme.default)(); // account for additional inner spacing because of visual balance

  var checkboxWidth = width * (5 / 6);
  var checkboxHeight = height * (5 / 6);
  /**
   * We're explicitly rounding values in layout styles because browsers seem to
   * be rounding them inconsistently horizontally vs vertically.
   */

  return /*#__PURE__*/React.createElement(_StyledDiv, null, /*#__PURE__*/React.createElement(StyledCircle, {
    width: checkboxWidth,
    height: checkboxHeight,
    status: status,
    active: isActive,
    hasGlow: !isCompact
  }), /*#__PURE__*/React.createElement(_StyledDiv2, {
    _css: width,
    _css2: height
  }, status === "completed" ? /*#__PURE__*/React.createElement(_CheckCircle.default, {
    ariaLabel: "completed",
    size: "small",
    customColor: theme.orbit.paletteProductNormal
  }) : /*#__PURE__*/React.createElement(StyledTextContainer, {
    width: width,
    height: height,
    checkboxWidth: checkboxWidth,
    checkboxHeight: checkboxHeight
  }, /*#__PURE__*/React.createElement(_Text.default, {
    as: "div",
    type: status === "disabled" ? "primary" : "white",
    size: "small"
  }, typeof index === "number" ? index + 1 : null))));
};

var _default = WizardStepIcon;
exports.default = _default;