contentoh-components-library 21.6.60 → 21.6.61

package/dist/components/organisms/ServicesNavigation/ui.js

@@ -0,0 +1,371 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "COLORS", {
+  enumerable: true,
+  get: function get() {
+    return _tokens.COLORS;
+  }
+});
+Object.defineProperty(exports, "FONTS", {
+  enumerable: true,
+  get: function get() {
+    return _tokens.FONTS;
+  }
+});
+exports.ServiceIcon = exports.PersonAvatar = exports.PendingDot = exports.FONT_STACK = void 0;
+Object.defineProperty(exports, "StatusChip", {
+  enumerable: true,
+  get: function get() {
+    return _StatusChip.StatusChip;
+  }
+});
+exports.serviceStatusProps = exports.serviceStatusColor = exports.primaryButtonSx = exports.pillButtonSx = exports.outlineButtonSx = exports.labelSx = exports.fieldSx = exports.captionSx = exports.TITLE_STACK = void 0;
+Object.defineProperty(exports, "statusColor", {
+  enumerable: true,
+  get: function get() {
+    return _tokens.statusColor;
+  }
+});
+Object.defineProperty(exports, "statusName", {
+  enumerable: true,
+  get: function get() {
+    return _tokens.statusName;
+  }
+});
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _material = require("@mui/material");
+
+var _ListAltOutlined = _interopRequireDefault(require("@mui/icons-material/ListAltOutlined"));
+
+var _LocalShippingOutlined = _interopRequireDefault(require("@mui/icons-material/LocalShippingOutlined"));
+
+var _ShoppingCartOutlined = _interopRequireDefault(require("@mui/icons-material/ShoppingCartOutlined"));
+
+var _ArticleOutlined = _interopRequireDefault(require("@mui/icons-material/ArticleOutlined"));
+
+var _TitleOutlined = _interopRequireDefault(require("@mui/icons-material/TitleOutlined"));
+
+var _TravelExploreOutlined = _interopRequireDefault(require("@mui/icons-material/TravelExploreOutlined"));
+
+var _TranslateOutlined = _interopRequireDefault(require("@mui/icons-material/TranslateOutlined"));
+
+var _ImageOutlined = _interopRequireDefault(require("@mui/icons-material/ImageOutlined"));
+
+var _PhotoCameraOutlined = _interopRequireDefault(require("@mui/icons-material/PhotoCameraOutlined"));
+
+var _AutoFixHighOutlined = _interopRequireDefault(require("@mui/icons-material/AutoFixHighOutlined"));
+
+var _AspectRatioOutlined = _interopRequireDefault(require("@mui/icons-material/AspectRatioOutlined"));
+
+var _DashboardCustomizeOutlined = _interopRequireDefault(require("@mui/icons-material/DashboardCustomizeOutlined"));
+
+var _WorkspacePremiumOutlined = _interopRequireDefault(require("@mui/icons-material/WorkspacePremiumOutlined"));
+
+var _MovieOutlined = _interopRequireDefault(require("@mui/icons-material/MovieOutlined"));
+
+var _ViewInArOutlined = _interopRequireDefault(require("@mui/icons-material/ViewInArOutlined"));
+
+var _StorefrontOutlined = _interopRequireDefault(require("@mui/icons-material/StorefrontOutlined"));
+
+var _WebOutlined = _interopRequireDefault(require("@mui/icons-material/WebOutlined"));
+
+var _InsertChartOutlined = _interopRequireDefault(require("@mui/icons-material/InsertChartOutlined"));
+
+var _VerifiedOutlined = _interopRequireDefault(require("@mui/icons-material/VerifiedOutlined"));
+
+var _FactCheckOutlined = _interopRequireDefault(require("@mui/icons-material/FactCheckOutlined"));
+
+var _PlaylistAddCheckOutlined = _interopRequireDefault(require("@mui/icons-material/PlaylistAddCheckOutlined"));
+
+var _PublishOutlined = _interopRequireDefault(require("@mui/icons-material/PublishOutlined"));
+
+var _SpaceDashboardOutlined = _interopRequireDefault(require("@mui/icons-material/SpaceDashboardOutlined"));
+
+var _InsertDriveFileOutlined = _interopRequireDefault(require("@mui/icons-material/InsertDriveFileOutlined"));
+
+var _EventRepeatOutlined = _interopRequireDefault(require("@mui/icons-material/EventRepeatOutlined"));
+
+var _BuildOutlined = _interopRequireDefault(require("@mui/icons-material/BuildOutlined"));
+
+var _GTranslateOutlined = _interopRequireDefault(require("@mui/icons-material/GTranslateOutlined"));
+
+var _AutoAwesomeOutlined = _interopRequireDefault(require("@mui/icons-material/AutoAwesomeOutlined"));
+
+var _ChairOutlined = _interopRequireDefault(require("@mui/icons-material/ChairOutlined"));
+
+var _RuleOutlined = _interopRequireDefault(require("@mui/icons-material/RuleOutlined"));
+
+var _ThumbsUpDownOutlined = _interopRequireDefault(require("@mui/icons-material/ThumbsUpDownOutlined"));
+
+var _FormatListBulletedOutlined = _interopRequireDefault(require("@mui/icons-material/FormatListBulletedOutlined"));
+
+var _EmojiEventsOutlined = _interopRequireDefault(require("@mui/icons-material/EmojiEventsOutlined"));
+
+var _ViewCarouselOutlined = _interopRequireDefault(require("@mui/icons-material/ViewCarouselOutlined"));
+
+var _ThreeDRotationOutlined = _interopRequireDefault(require("@mui/icons-material/ThreeDRotationOutlined"));
+
+var _ThreeSixtyOutlined = _interopRequireDefault(require("@mui/icons-material/ThreeSixtyOutlined"));
+
+var _MenuBookOutlined = _interopRequireDefault(require("@mui/icons-material/MenuBookOutlined"));
+
+var _CloudUploadOutlined = _interopRequireDefault(require("@mui/icons-material/CloudUploadOutlined"));
+
+var _CameraEnhanceOutlined = _interopRequireDefault(require("@mui/icons-material/CameraEnhanceOutlined"));
+
+var _PortraitOutlined = _interopRequireDefault(require("@mui/icons-material/PortraitOutlined"));
+
+var _WeekendOutlined = _interopRequireDefault(require("@mui/icons-material/WeekendOutlined"));
+
+var _HighQualityOutlined = _interopRequireDefault(require("@mui/icons-material/HighQualityOutlined"));
+
+var _ImageSearchOutlined = _interopRequireDefault(require("@mui/icons-material/ImageSearchOutlined"));
+
+var _HandymanOutlined = _interopRequireDefault(require("@mui/icons-material/HandymanOutlined"));
+
+var _tokens = require("../../pages/CreatorsProductEdition/sections/tokens");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _StatusChip = require("../../pages/CreatorsProductEdition/sections/StatusChip");
+
+/*
+  Colores, tipografía y la etiqueta de estatus son los de la edición de
+  Creators (CreatorsProductEdition), para que el prototipo se vea como ella.
+  Si la propuesta se aprueba, estas piezas deberían salir de la página a un
+  lugar compartido.
+*/
+
+/**
+ * Props de StatusChip para un servicio de la lista. Los de flujo simple del
+ * catálogo (casilla, avance) muestran su nombre y su color en lugar del código.
+ */
+var serviceStatusColor = function serviceStatusColor(service) {
+  return (service === null || service === void 0 ? void 0 : service.status_flow_type) === "simple" && service.status_color || (0, _tokens.statusColor)(service === null || service === void 0 ? void 0 : service.status);
+};
+
+exports.serviceStatusColor = serviceStatusColor;
+
+var serviceStatusProps = function serviceStatusProps(service) {
+  var _service$status_label, _service$status_color;
+
+  return (service === null || service === void 0 ? void 0 : service.status_flow_type) === "simple" ? {
+    status: service.status,
+    label: (_service$status_label = service.status_label) !== null && _service$status_label !== void 0 ? _service$status_label : service.status,
+    color: (_service$status_color = service.status_color) !== null && _service$status_color !== void 0 ? _service$status_color : undefined
+  } : {
+    status: service === null || service === void 0 ? void 0 : service.status
+  };
+};
+
+exports.serviceStatusProps = serviceStatusProps;
+var FONT_STACK = "".concat(_tokens.FONTS.Lato, ", \"Avenir Next\", sans-serif");
+exports.FONT_STACK = FONT_STACK;
+var TITLE_STACK = "".concat(_tokens.FONTS.Raleway, ", ").concat(_tokens.FONTS.Lato, ", sans-serif");
+exports.TITLE_STACK = TITLE_STACK;
+var ICONS = {
+  summary: _SpaceDashboardOutlined.default,
+  // Logística: mismas llaves que cat_service.icon_name.
+  pickup: _LocalShippingOutlined.default,
+  purchase: _ShoppingCartOutlined.default,
+  assembly: _HandymanOutlined.default,
+  datasheet: _ListAltOutlined.default,
+  description: _ArticleOutlined.default,
+  header: _TitleOutlined.default,
+  seo: _TravelExploreOutlined.default,
+  translation: _TranslateOutlined.default,
+  images: _ImageOutlined.default,
+  photo: _PhotoCameraOutlined.default,
+  edition: _AutoFixHighOutlined.default,
+  resize: _AspectRatioOutlined.default,
+  adaptations: _DashboardCustomizeOutlined.default,
+  premium: _WorkspacePremiumOutlined.default,
+  video: _MovieOutlined.default,
+  image360: _ThreeSixtyOutlined.default,
+  brandstore: _StorefrontOutlined.default,
+  aplus: _WebOutlined.default,
+  infographics: _InsertChartOutlined.default,
+  quality: _VerifiedOutlined.default,
+  audit: _FactCheckOutlined.default,
+  secodat: _PlaylistAddCheckOutlined.default,
+  upload: _PublishOutlined.default,
+  followUp: _EventRepeatOutlined.default,
+  maintenance: _BuildOutlined.default,
+  graphicTranslation: _GTranslateOutlined.default,
+  visualUpdate: _AutoAwesomeOutlined.default,
+  ambient: _ChairOutlined.default,
+  inputReview: _RuleOutlined.default,
+  clientReview: _ThumbsUpDownOutlined.default,
+  bullets: _FormatListBulletedOutlined.default,
+  specialPhoto: _CameraEnhanceOutlined.default,
+  modelPhoto: _PortraitOutlined.default,
+  premiumAmbient: _WeekendOutlined.default,
+  golden: _EmojiEventsOutlined.default,
+  banner: _ViewCarouselOutlined.default,
+  render: _ThreeDRotationOutlined.default,
+  arModel: _ViewInArOutlined.default,
+  manual: _MenuBookOutlined.default,
+  visualQuality: _HighQualityOutlined.default,
+  visualAudit: _ImageSearchOutlined.default,
+  gdsn: _CloudUploadOutlined.default,
+  visualMaintenance: _HandymanOutlined.default
+};
+
+var ServiceIcon = function ServiceIcon(_ref) {
+  var _ICONS$icon;
+
+  var icon = _ref.icon,
+      sx = _ref.sx;
+  var Icon = (_ICONS$icon = ICONS[icon]) !== null && _ICONS$icon !== void 0 ? _ICONS$icon : _InsertDriveFileOutlined.default;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+    sx: (0, _objectSpread2.default)({
+      fontSize: 18
+    }, sx)
+  });
+};
+/** Punto rosa: «te toca a ti». */
+
+
+exports.ServiceIcon = ServiceIcon;
+
+var PendingDot = function PendingDot(_ref2) {
+  var _ref2$size = _ref2.size,
+      size = _ref2$size === void 0 ? 8 : _ref2$size,
+      _ref2$withTooltip = _ref2.withTooltip,
+      withTooltip = _ref2$withTooltip === void 0 ? true : _ref2$withTooltip;
+  var dot = /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+    component: "span",
+    "aria-label": "Te toca a ti",
+    sx: {
+      width: size,
+      height: size,
+      borderRadius: "50%",
+      bgcolor: _tokens.COLORS.magenta_s2,
+      flexShrink: 0,
+      display: "inline-block"
+    }
+  });
+  return withTooltip ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+    title: "Te toca a ti",
+    arrow: true,
+    placement: "top",
+    children: dot
+  }) : dot;
+};
+/** Iniciales de una persona; la persona que está viendo lleva borde rosa. */
+
+
+exports.PendingDot = PendingDot;
+
+var PersonAvatar = function PersonAvatar(_ref3) {
+  var _user$name$, _user$name, _user$last_name$, _user$last_name;
+
+  var user = _ref3.user,
+      _ref3$isMe = _ref3.isMe,
+      isMe = _ref3$isMe === void 0 ? false : _ref3$isMe,
+      _ref3$size = _ref3.size,
+      size = _ref3$size === void 0 ? 26 : _ref3$size,
+      title = _ref3.title;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+    title: title !== null && title !== void 0 ? title : "",
+    arrow: true,
+    placement: "top",
+    disableHoverListener: !title,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
+      sx: {
+        width: size,
+        height: size,
+        fontSize: size * 0.42,
+        fontFamily: FONT_STACK,
+        fontWeight: 700,
+        bgcolor: user ? _tokens.COLORS.s2 : _tokens.COLORS.white,
+        color: user ? _tokens.COLORS.s5 : _tokens.COLORS.s3,
+        border: "2px solid ".concat(isMe ? _tokens.COLORS.magenta_s2 : _tokens.COLORS.white),
+        outline: user ? "none" : "1px dashed ".concat(_tokens.COLORS.s3),
+        outlineOffset: -3
+      },
+      children: user ? "".concat((_user$name$ = (_user$name = user.name) === null || _user$name === void 0 ? void 0 : _user$name[0]) !== null && _user$name$ !== void 0 ? _user$name$ : "").concat((_user$last_name$ = (_user$last_name = user.last_name) === null || _user$last_name === void 0 ? void 0 : _user$last_name[0]) !== null && _user$last_name$ !== void 0 ? _user$last_name$ : "").toUpperCase() : "?"
+    })
+  });
+};
+/** Botones redondeados de la plataforma (rosa lleno y contorno). */
+
+
+exports.PersonAvatar = PersonAvatar;
+var pillButtonSx = {
+  textTransform: "none",
+  borderRadius: "20px",
+  fontFamily: FONT_STACK,
+  fontSize: 13,
+  fontWeight: 700,
+  height: 32,
+  px: 2,
+  boxShadow: "none",
+  whiteSpace: "nowrap"
+};
+exports.pillButtonSx = pillButtonSx;
+var primaryButtonSx = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, pillButtonSx), {}, {
+  bgcolor: _tokens.COLORS.magenta_s2,
+  color: _tokens.COLORS.white,
+  "&:hover": {
+    bgcolor: _tokens.COLORS.secondary_magenta,
+    boxShadow: "none"
+  }
+});
+exports.primaryButtonSx = primaryButtonSx;
+var outlineButtonSx = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, pillButtonSx), {}, {
+  color: _tokens.COLORS.s5,
+  border: "1px solid ".concat(_tokens.COLORS.s3),
+  bgcolor: _tokens.COLORS.white,
+  "&:hover": {
+    bgcolor: _tokens.COLORS.s2,
+    borderColor: _tokens.COLORS.s3
+  },
+  "&.Mui-disabled": {
+    color: _tokens.COLORS.s3,
+    borderColor: _tokens.COLORS.s2
+  }
+});
+/** Campo de texto con el foco rosa de la plataforma. */
+
+exports.outlineButtonSx = outlineButtonSx;
+var fieldSx = {
+  "& .MuiOutlinedInput-root": {
+    borderRadius: "6px",
+    fontFamily: FONT_STACK,
+    fontSize: 14,
+    color: _tokens.COLORS.color_gray,
+    bgcolor: _tokens.COLORS.white,
+    "& fieldset": {
+      borderColor: _tokens.COLORS.s3
+    },
+    "&:hover fieldset": {
+      borderColor: _tokens.COLORS.s4
+    },
+    "&.Mui-focused fieldset": {
+      borderColor: _tokens.COLORS.magenta_s2
+    }
+  }
+};
+exports.fieldSx = fieldSx;
+var labelSx = {
+  fontFamily: FONT_STACK,
+  fontSize: 13,
+  fontWeight: 700,
+  color: _tokens.COLORS.s5,
+  mb: 0.5
+};
+exports.labelSx = labelSx;
+var captionSx = {
+  fontFamily: FONT_STACK,
+  fontSize: 12,
+  color: _tokens.COLORS.s4
+};
+exports.captionSx = captionSx;