grommet/es6/components/Stepper/StyledStepper.js

focus on the essential experience

import styled, { css } from 'styled-components';
import { focusStyle, normalizeColor, styledComponentsConfig } from '../../utils';
var getMetricSize = function getMetricSize(theme, size) {
  var _theme$global, _theme$global2;
  return ((_theme$global = theme.global) == null || (_theme$global = _theme$global.edgeSize) == null ? void 0 : _theme$global[size]) || ((_theme$global2 = theme.global) == null || (_theme$global2 = _theme$global2.size) == null ? void 0 : _theme$global2[size]) || size;
};
var getTextMetric = function getTextMetric(theme, size, metric) {
  var _theme$text, _theme$text2;
  return ((_theme$text = theme.text) == null || (_theme$text = _theme$text[size]) == null ? void 0 : _theme$text[metric]) || ((_theme$text2 = theme.text) == null || (_theme$text2 = _theme$text2.medium) == null ? void 0 : _theme$text2[metric]);
};
var getSubStepSizeToken = function getSubStepSizeToken(indicatorSize) {
  switch (indicatorSize) {
    case 'large':
      return 'small';
    case 'small':
      return 'xsmall';
    default:
      return 'small';
  }
};
var getConnectorColor = function getConnectorColor(stepStatus, theme) {
  var _theme$stepper;
  return normalizeColor(((_theme$stepper = theme.stepper) == null || (_theme$stepper = _theme$stepper[stepStatus]) == null || (_theme$stepper = _theme$stepper.connector) == null ? void 0 : _theme$stepper.color) || 'border', theme);
};
var StyledStepItem = styled.li.withConfig(styledComponentsConfig).withConfig({
  displayName: "StyledStepper__StyledStepItem",
  componentId: "sc-gmpe0p-0"
})(["display:flex;position:relative;", ""], function (props) {
  if (props.direction === 'vertical') {
    var _props$theme$global;
    return css(["flex-direction:column;align-items:flex-start;padding-bottom:", ";"], ((_props$theme$global = props.theme.global) == null || (_props$theme$global = _props$theme$global.edgeSize) == null ? void 0 : _props$theme$global.xxsmall) || '4px');
  }
  if (props.isSubStep) {
    // horizontal and sub-steps isn't supported
    return css(["flex-direction:row;align-items:center;flex:none;min-width:0;overflow:hidden;"]);
  }
  return css(["flex-direction:column;align-items:center;flex:1;min-width:0;overflow:hidden;"]);
});
var StyledStepButton = styled.button.withConfig(styledComponentsConfig).withConfig({
  displayName: "StyledStepper__StyledStepButton",
  componentId: "sc-gmpe0p-1"
})(["display:flex;background:none;border:none;padding:", ";cursor:", ";outline:none;", ""], function (props) {
  var _props$theme$global2;
  return ((_props$theme$global2 = props.theme.global) == null || (_props$theme$global2 = _props$theme$global2.edgeSize) == null ? void 0 : _props$theme$global2.xxsmall) || '4px';
}, function (props) {
  return props.isClickable ? 'pointer' : 'default';
}, function (props) {
  var _props$theme$global3, _props$theme$global4;
  return props.direction === 'vertical' ? css(["flex-direction:row;align-items:flex-start;gap:", ";text-align:left;"], (_props$theme$global3 = props.theme.global) == null || (_props$theme$global3 = _props$theme$global3.edgeSize) == null ? void 0 : _props$theme$global3.small) : css(["flex-direction:column;align-items:center;gap:", ";text-align:center;width:100%;"], (_props$theme$global4 = props.theme.global) == null || (_props$theme$global4 = _props$theme$global4.edgeSize) == null ? void 0 : _props$theme$global4.xxsmall);
});
var StyledStepContent = styled.span.withConfig(styledComponentsConfig).withConfig({
  displayName: "StyledStepper__StyledStepContent",
  componentId: "sc-gmpe0p-2"
})(["display:flex;flex-direction:column;", ""], function (props) {
  if (props.direction === 'vertical' && !props.isSubStep && !props.hasDescription) {
    var _props$theme$stepper;
    var indicatorSizeToken = ((_props$theme$stepper = props.theme.stepper) == null || (_props$theme$stepper = _props$theme$stepper.indicator) == null ? void 0 : _props$theme$stepper.size) || 'medium';
    var indicatorSize = getMetricSize(props.theme, indicatorSizeToken);
    var lineHeight = getTextMetric(props.theme, 'small', 'height');
    return css(["padding-top:calc((", " - ", ") / 2);"], indicatorSize, lineHeight);
  }
  return '';
});
var StyledIndicator = styled.span.withConfig(styledComponentsConfig).withConfig({
  displayName: "StyledStepper__StyledIndicator",
  componentId: "sc-gmpe0p-3"
})(["display:flex;align-items:center;justify-content:center;border-radius:50%;transition:transform 0.1s ease,background-color 0.15s ease,border-color 0.15s ease,color 0.15s ease;", " ", " ", ":focus-visible &{", "}", ""], function (props) {
  return function (_props$theme$stepper2, _props$theme$stepper3, _props$theme$global5) {
    var indicatorSizeToken = ((_props$theme$stepper2 = props.theme.stepper) == null || (_props$theme$stepper2 = _props$theme$stepper2.indicator) == null ? void 0 : _props$theme$stepper2.size) || 'medium';
    var parentSize = getMetricSize(props.theme, indicatorSizeToken);
    var subStepSize = getMetricSize(props.theme, getSubStepSizeToken(indicatorSizeToken));
    var size = props.isSubStep ? subStepSize : parentSize;
    var borderWidth = ((_props$theme$stepper3 = props.theme.stepper) == null || (_props$theme$stepper3 = _props$theme$stepper3.indicator) == null || (_props$theme$stepper3 = _props$theme$stepper3.border) == null ? void 0 : _props$theme$stepper3.width) || ((_props$theme$global5 = props.theme.global) == null || (_props$theme$global5 = _props$theme$global5.borderSize) == null ? void 0 : _props$theme$global5.small) || '2px';
    return css(["width:", ";height:", ";min-width:", ";min-height:", ";border:", " solid;"], size, size, size, size, borderWidth);
  }();
}, function (props) {
  var _theme$stepper2;
  var theme = props.theme;
  var stateTheme = ((_theme$stepper2 = theme.stepper) == null || (_theme$stepper2 = _theme$stepper2[props.effectiveState]) == null ? void 0 : _theme$stepper2.indicator) || {};
  return css(["background:", ";color:", ";border-color:", ";"], normalizeColor((stateTheme == null ? void 0 : stateTheme.background) || 'transparent', theme), normalizeColor((stateTheme == null ? void 0 : stateTheme.color) || 'text-weak', theme), normalizeColor((stateTheme == null ? void 0 : stateTheme.border) || 'border', theme));
}, StyledStepButton, focusStyle(), function (props) {
  var _theme$stepper3, _stateTheme$hover, _stateTheme$hover2, _stateTheme$hover3, _theme$stepper4, _theme$stepper5;
  if (!props.isClickable) return '';
  var theme = props.theme;
  var stateTheme = ((_theme$stepper3 = theme.stepper) == null || (_theme$stepper3 = _theme$stepper3[props.effectiveState]) == null ? void 0 : _theme$stepper3.indicator) || {};
  var backgroundColor = stateTheme != null && stateTheme.background ? normalizeColor(stateTheme.background, theme) : undefined;
  var borderColor = stateTheme != null && stateTheme.border ? normalizeColor(stateTheme.border, theme) : undefined;
  var color = stateTheme != null && stateTheme.color ? normalizeColor(stateTheme.color, theme) : undefined;
  var stateBackgroundHoverColor = stateTheme != null && (_stateTheme$hover = stateTheme.hover) != null && _stateTheme$hover.background ? normalizeColor(stateTheme.hover.background, theme) : undefined;
  var stateBorderHoverColor = stateTheme != null && (_stateTheme$hover2 = stateTheme.hover) != null && _stateTheme$hover2.border ? normalizeColor(stateTheme.hover.border, theme) : undefined;
  var stateColorHoverColor = stateTheme != null && (_stateTheme$hover3 = stateTheme.hover) != null && _stateTheme$hover3.color ? normalizeColor(stateTheme.hover.color, theme) : undefined;
  var defaultBackgroundHoverColor = backgroundColor ? "color-mix(in srgb, " + backgroundColor + " 80%, black)" : normalizeColor(((_theme$stepper4 = theme.stepper) == null || (_theme$stepper4 = _theme$stepper4.hover) == null ? void 0 : _theme$stepper4.background) || 'background-contrast', theme);
  var defaultBorderHoverColor = borderColor ? "color-mix(in srgb, " + borderColor + " 80%, black)" : normalizeColor(((_theme$stepper5 = theme.stepper) == null || (_theme$stepper5 = _theme$stepper5.hover) == null ? void 0 : _theme$stepper5.border) || 'text', theme);
  var defaultColorHoverColor = color ? "color-mix(in srgb, " + color + " 80%, black)" : normalizeColor('text-strong', theme);
  var hoverBackgroundColor = stateBackgroundHoverColor || defaultBackgroundHoverColor;
  var hoverBorderColor = stateBorderHoverColor || defaultBorderHoverColor;
  var hoverColor = stateColorHoverColor || defaultColorHoverColor;
  var hoverStyles = function () {
    return css(["background:", ";border-color:", ";color:", ";"], hoverBackgroundColor, hoverBorderColor, hoverColor);
  }();
  return css(["", ":not([aria-disabled]):active &{transform:scale(0.95);}", ":not([aria-disabled]):hover &{", "}"], StyledStepButton, StyledStepButton, hoverStyles);
});
var StyledConnector = styled.span.withConfig(styledComponentsConfig).withConfig({
  displayName: "StyledStepper__StyledConnector",
  componentId: "sc-gmpe0p-4"
})(["", " position:absolute;background:", ";"], function (props) {
  var _theme$stepper6, _theme$stepper7, _theme$global3, _theme$stepper8, _theme$global4, _theme$global5;
  var theme = props.theme;
  var indicatorSizeToken = ((_theme$stepper6 = theme.stepper) == null || (_theme$stepper6 = _theme$stepper6.indicator) == null ? void 0 : _theme$stepper6.size) || 'medium';
  var parentSize = getMetricSize(theme, indicatorSizeToken);
  var indicatorBorderWidth = getMetricSize(theme, ((_theme$stepper7 = theme.stepper) == null || (_theme$stepper7 = _theme$stepper7.indicator) == null || (_theme$stepper7 = _theme$stepper7.border) == null ? void 0 : _theme$stepper7.width) || '2px');
  var buttonPad = ((_theme$global3 = theme.global) == null || (_theme$global3 = _theme$global3.edgeSize) == null ? void 0 : _theme$global3.xxsmall) || '4px';
  var connectorThickness = ((_theme$stepper8 = theme.stepper) == null || (_theme$stepper8 = _theme$stepper8.connector) == null || (_theme$stepper8 = _theme$stepper8.stroke) == null ? void 0 : _theme$stepper8.width) || ((_theme$global4 = theme.global) == null || (_theme$global4 = _theme$global4.borderSize) == null ? void 0 : _theme$global4.small) || '2px';
  var connectorRadius = ((_theme$global5 = theme.global) == null || (_theme$global5 = _theme$global5.edgeSize) == null ? void 0 : _theme$global5.xsmall) || '4px';
  var connectorOffset = "calc(" + parentSize + " / 2 + " + buttonPad + ")";
  return css(["border-radius:", ";", ""], connectorRadius, props.direction === 'horizontal' ? css(["top:", ";left:calc(", "50% + ", ");right:calc(-50% + ", ");height:", ";"], connectorOffset, props.isBetween ? '-' : '', connectorOffset, connectorOffset, connectorThickness) : css(["left:calc( ", " + ", " - ", " / 2 );top:", ";bottom:0;width:", ";"], connectorOffset, indicatorBorderWidth, connectorThickness, props.isBetween ? 0 : "calc(" + parentSize + " + " + buttonPad + " * 3)", connectorThickness));
}, function (props) {
  return getConnectorColor(props.status, props.theme);
});
export { StyledStepItem, StyledStepButton, StyledStepContent, StyledIndicator, StyledConnector };