@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 _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";
import mq from "../utils/mediaQuery";
import ButtonLink from "../ButtonLink";
import Stack from "../Stack";
import Text from "../Text";
import useTheme from "../hooks/useTheme";
import WizardStepIcon, { StyledStepIconContainer } from "./WizardStepIcon";
import { WizardStepContext } from "./WizardContext";
import defaultTheme from "../defaultTheme";
import { left, right } from "../utils/rtl";
import { resolveStepBorder } from "./helpers";
const StyledBorder = styled.div.withConfig({
  displayName: "WizardStep__StyledBorder",
  componentId: "sc-v1tvdj-0"
})(["", ""], ({
  theme
}) => 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
};
const StyledContainer = styled.li.withConfig({
  displayName: "WizardStep__StyledContainer",
  componentId: "sc-v1tvdj-1"
})(["", ""], ({
  theme,
  isCompact,
  status
}) => css(["position:relative;margin:-1px 0;", " ", ""], isCompact && css(["button{border-radius:0;}", ""], status === "disabled" && css(["background:", ";button{opacity:1;}"], theme.orbit.paletteCloudLight)), mq.desktop(css(["&:hover{", "{transition:box-shadow ", " ease-in;box-shadow:", ";}}"], StyledStepIconContainer, theme.orbit.durationFast, status !== "disabled" && `0 0 0 6px ${convertHexToRgba(theme.orbit.paletteProductNormal, 20)}`)))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

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

StyledActiveMarker.defaultProps = {
  theme: defaultTheme
};
const StyledProgressBar = styled.div.withConfig({
  displayName: "WizardStep__StyledProgressBar",
  componentId: "sc-v1tvdj-4"
})(["position:relative;", ";"], resolveStepBorder); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledProgressBar.defaultProps = {
  theme: defaultTheme
};
const StyledLabel = styled.div.withConfig({
  displayName: "WizardStep__StyledLabel",
  componentId: "sc-v1tvdj-5"
})(["", ";"], ({
  theme,
  active
}) => css(["display:block;span{display:block;color:", ";}", ""], theme.orbit.colorTextSecondary, active && 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
};
const StyledButtonWrapper = styled.div.withConfig({
  displayName: "WizardStep__StyledButtonWrapper",
  componentId: "sc-v1tvdj-6"
})(["", ""], ({
  theme,
  active
}) => css(["cursor:pointer;padding:0 ", ";", ""], theme.orbit.spaceXSmall, !active && 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
};

const WizardStep = ({
  dataTest,
  title,
  onClick
}) => {
  const theme = useTheme();
  const {
    index,
    status,
    isColumnOnDesktop,
    nextStepStatus,
    isCompact,
    isActive,
    onChangeStep,
    onClose,
    isLastStep
  } = React.useContext(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, {
      disabled: status === "disabled",
      type: "secondary",
      fullWidth: true,
      iconLeft: /*#__PURE__*/React.createElement(WizardStepIcon, null),
      ariaCurrent: isActive ? "step" : "false",
      onClick: handleClick
    }, status === "disabled" ? /*#__PURE__*/React.createElement(Text, {
      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, {
    flex: true,
    direction: isColumnOnDesktop ? "row" : "column",
    align: isColumnOnDesktop ? "start" : "center",
    spacing: "XSmall",
    spaceAfter: isColumnOnDesktop ? "large" : "none"
  }, /*#__PURE__*/React.createElement(WizardStepIcon, null), /*#__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(StyledLabel, {
    active: isActive
  }, /*#__PURE__*/React.createElement(Text, {
    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,
    index: index,
    isLastStep: isLastStep,
    nextStepStatus: nextStepStatus,
    isColumnOnDesktop: isColumnOnDesktop
  }), /*#__PURE__*/React.createElement(StyledContent, null, /*#__PURE__*/React.createElement(Stack, {
    flex: true,
    direction: "column",
    align: isColumnOnDesktop ? "start" : "center"
  }, status === "disabled" ? /*#__PURE__*/React.createElement(_StyledSpan, {
    $_css2: theme.orbit.spaceXSmall
  }, 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))));
};

export default WizardStep;

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

var _StyledSpan = styled("span").withConfig({
  displayName: "WizardStep___StyledSpan",
  componentId: "sc-v1tvdj-8"
})(["padding:0 ", ";"], p => p.$_css2);