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

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

import _styled2 from "styled-components";
import _styled from "styled-components";
import * as React from "react";
import styled, { css } from "styled-components";
import convertHexToRgba from "@kiwicom/orbit-design-tokens/lib/convertHexToRgba";
import Text from "../Text";
import CheckCircle from "../icons/CheckCircle";
import useTheme from "../hooks/useTheme";
import defaultTheme from "../defaultTheme";
import { WizardStepContext } from "./WizardContext";
var centerMixin = css(["position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);"]);
var StyledCircle = styled.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 css(["width:", "px;height:", "px;", ";background:", ";border-radius:50%;", " ", " ", ""], Math.round(width), Math.round(height), centerMixin, theme.orbit.paletteProductNormal, status === "completed" && css(["background:", ";"], theme.orbit.paletteWhite), status === "disabled" && css(["background:", ";"], theme.orbit.paletteCloudNormalHover), active && hasGlow && css(["box-shadow:0 0 0 4px ", ";"], convertHexToRgba(theme.orbit.paletteProductNormal, 20)));
});
StyledCircle.defaultProps = {
  theme: defaultTheme
};
var StyledTextContainer = styled.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 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
};

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

var _StyledDiv2 = styled("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(WizardStepContext),
      index = _React$useContext.index,
      status = _React$useContext.status,
      isCompact = _React$useContext.isCompact,
      isActive = _React$useContext.isActive;

  var theme = useTheme(); // 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, {
    ariaLabel: "completed",
    size: "small",
    customColor: theme.orbit.paletteProductNormal
  }) : /*#__PURE__*/React.createElement(StyledTextContainer, {
    width: width,
    height: height,
    checkboxWidth: checkboxWidth,
    checkboxHeight: checkboxHeight
  }, /*#__PURE__*/React.createElement(Text, {
    as: "div",
    type: status === "disabled" ? "primary" : "white",
    size: "small"
  }, typeof index === "number" ? index + 1 : null))));
};

export default WizardStepIcon;