contentoh-components-library 21.6.16 → 21.6.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.6.16",
+  "version": "21.6.18",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

package/src/components/atoms/InheritanceTag/InheritanceTag.stories.js

@@ -0,0 +1,39 @@
+import { InheritanceTag } from "./index";
+
+export default {
+  title: "Components/atoms/InheritanceTag",
+  label: "Inheritance Tag",
+  component: InheritanceTag,
+};
+
+const Template = (args) => <InheritanceTag {...args} />;
+
+export const Heredado = Template.bind({});
+Heredado.args = {
+  isVariant: true,
+  isOverridden: false,
+  parentUpc: "7501234567890",
+};
+
+export const Propio = Template.bind({});
+Propio.args = {
+  isVariant: true,
+  isOverridden: true,
+  parentUpc: "7501234567890",
+  onRestore: () => {},
+};
+
+// Un valor propio sin onRestore no ofrece la acción: se marca, pero no se puede
+// revertir desde ahí. Es el caso de las vistas de solo lectura.
+export const PropioSinAccion = Template.bind({});
+PropioSinAccion.args = {
+  isVariant: true,
+  isOverridden: true,
+};
+
+// En un producto que no es variante no se pinta nada.
+export const NoEsVariante = Template.bind({});
+NoEsVariante.args = {
+  isVariant: false,
+  isOverridden: true,
+};

package/src/components/atoms/InheritanceTag/index.js

@@ -0,0 +1,45 @@
+import { Container } from "./styles";
+
+/**
+ * Marca si el valor de un atributo viene del producto padre o es propio de la
+ * variante. Solo tiene sentido dentro de una variante: en un producto sin padre
+ * no se pinta nada, porque no hay de quién heredar.
+ *
+ * El estado "propio" es el que carga información —ese campo se separó del padre—
+ * así que es el que lleva acento y el que ofrece la acción de volver a heredar.
+ * "Heredado" es el caso normal y se mantiene discreto: si gritara en cada campo,
+ * la ficha entera se volvería ruido.
+ */
+export const InheritanceTag = ({
+  isVariant = false,
+  isOverridden = false,
+  parentUpc,
+  onRestore,
+  restoreLabel = "Volver a heredar",
+  className = "",
+}) => {
+  if (!isVariant) return null;
+
+  const state = isOverridden ? "own" : "inherited";
+
+  return (
+    <Container className={`inheritance-tag ${state} ${className}`}>
+      <span
+        className="tag-label"
+        title={
+          isOverridden
+            ? "Valor propio de esta variante. La propagación del producto padre no lo modifica."
+            : `Valor heredado${parentUpc ? ` del producto ${parentUpc}` : " del producto padre"}.`
+        }
+      >
+        {isOverridden ? "Propio" : "Heredado"}
+      </span>
+
+      {isOverridden && onRestore && (
+        <button type="button" className="tag-action" onClick={onRestore}>
+          {restoreLabel}
+        </button>
+      )}
+    </Container>
+  );
+};

package/src/components/atoms/InheritanceTag/styles.js

@@ -0,0 +1,56 @@
+import styled from "styled-components";
+import "../../../global-files/global-styles.css";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  width: fit-content;
+  height: 16px;
+
+  .tag-label {
+    border-radius: 3px;
+    padding: 2px 5px;
+    font-family: ${FontFamily.Raleway_500};
+    font-size: 10px;
+    line-height: 12px;
+    letter-spacing: -0.015em;
+    white-space: nowrap;
+    cursor: default;
+  }
+
+  /* Heredado: el caso normal. Discreto a propósito. */
+  &.inherited .tag-label {
+    background-color: ${GlobalColors.s2};
+    color: ${GlobalColors.gray};
+  }
+
+  /* Propio: la excepción que informa. Lleva el acento de marca. */
+  &.own .tag-label {
+    background-color: rgba(${GlobalColors.rgb_color_pink}, 0.12);
+    color: ${GlobalColors.original_magenta};
+  }
+
+  .tag-action {
+    border: none;
+    background: none;
+    padding: 0;
+    font-family: ${FontFamily.Raleway_500};
+    font-size: 10px;
+    line-height: 12px;
+    color: ${GlobalColors.s4};
+    text-decoration: underline;
+    cursor: pointer;
+
+    &:hover {
+      color: ${GlobalColors.original_magenta};
+    }
+
+    &:focus-visible {
+      outline: 1px solid ${GlobalColors.magenta_s2};
+      outline-offset: 2px;
+      border-radius: 2px;
+    }
+  }
+`;

package/src/components/atoms/VerticalSideMenuMainPage/styles.js

@@ -18,10 +18,17 @@ const logoToWhite = "grayscale(1) brightness(0) invert(1)";
   anterior, lo que ensancha el trazo de forma pareja sin desenfocarlo (blur 0).
   Va DESPUÉS de logoToWhite a propósito: antes del invert(1) estas sombras
   blancas se voltearían a negro.
+
+  El peso se dosifica con el alfa, no con el offset: a 0.15px el desplazamiento
+  ya es sub-pixel, así que reducirlo cae en el mismo píxel al rasterizar y no se
+  distingue. Medio blanco (0.5) deja el trazo a mitad de camino entre el
+  original y el engrosado opaco, conservando las cuatro cardinales.
 */
 const logoThicken = `
-  drop-shadow(0.15px 0 0 #fff) drop-shadow(-0.15px 0 0 #fff)
-  drop-shadow(0 0.15px 0 #fff) drop-shadow(0 -0.15px 0 #fff)
+  drop-shadow(0.15px 0 0 rgba(255, 255, 255, 0.5))
+  drop-shadow(-0.15px 0 0 rgba(255, 255, 255, 0.5))
+  drop-shadow(0 0.15px 0 rgba(255, 255, 255, 0.5))
+  drop-shadow(0 -0.15px 0 rgba(255, 255, 255, 0.5))
 `;
 
 export const Container = styled.div`
@@ -47,7 +54,7 @@ export const Container = styled.div`
       el ancho es lo que decide si se ven parejos: 26px de alto dan ~156px,
       cerca de los ~167px del logotipo superior a 22px.
     */
-    height: 26px;
+    height: 29px;
     align-self: center;
     flex-shrink: 0;
     opacity: 0.9;

package/src/components/molecules/TagAndInputv2/index.js

@@ -1,6 +1,7 @@
 import { Container } from "./styles";
 import { GeneralInputv2 } from "../../atoms/GeneralInputv2";
 import { ScreenHeaderv2 } from "../../atoms/ScreenHeaderv2";
+import { InheritanceTag } from "../../atoms/InheritanceTag";
 
 export const TagAndInputv2 = ({
   inputType,
@@ -33,6 +34,10 @@ export const TagAndInputv2 = ({
   showTooltip,
   auditClass,
   showMissingChars,
+  isVariant,
+  isOverridden,
+  parentUpc,
+  onRestoreInheritance,
 }) => {
   return (
     <Container
@@ -55,6 +60,16 @@ export const TagAndInputv2 = ({
             description={description}
             showMissingChars={showMissingChars}
           />
+          <InheritanceTag
+            isVariant={isVariant}
+            isOverridden={isOverridden}
+            parentUpc={parentUpc}
+            onRestore={
+              onRestoreInheritance
+                ? () => onRestoreInheritance(inputId)
+                : undefined
+            }
+          />
         </div>
       )}
       <GeneralInputv2

package/src/components/molecules/TagAndInputv2/styles.js

@@ -4,6 +4,19 @@ import { FontFamily, GlobalColors } from "../../../global-files/variables";
 export const Container = styled.div`
   .title-container {
     position: relative;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    /* El nombre del atributo manda; el chip se acomoda a su lado sin
+       empujarlo ni robarle ancho cuando el texto es largo. */
+    & > :first-child {
+      min-width: 0;
+    }
+    .inheritance-tag {
+      flex-shrink: 0;
+    }
+
     .tooltip {
       display: none;
       position: absolute;

package/src/components/organisms/InputGroupv2/index.js

@@ -21,6 +21,8 @@ export const InputGroupv2 = ({
   activeRetailer,
   setUpdatedBoxData,
   showMissingChars,
+  variant,
+  onRestoreInheritance,
 }) => {
   const inputTypeValue = (type) => {
     switch (type) {
@@ -144,6 +146,10 @@ export const InputGroupv2 = ({
                       : ""
                   }
                   showMissingChars={showMissingChars}
+                  isVariant={variant?.isVariant}
+                  isOverridden={dataInputs[input]?.isOverridden}
+                  parentUpc={variant?.parent?.upc}
+                  onRestoreInheritance={onRestoreInheritance}
                 />
               </>
             ) : (
@@ -252,6 +258,10 @@ export const InputGroupv2 = ({
                       : ""
                   }
                   showMissingChars={showMissingChars}
+                  isVariant={variant?.isVariant}
+                  isOverridden={dataInputs[input]?.isOverridden}
+                  parentUpc={variant?.parent?.upc}
+                  onRestoreInheritance={onRestoreInheritance}
                 />
               </>
             ) : (

package/src/index.js

@@ -11,6 +11,7 @@ export * from "./components/atoms/GeneralButton/index";
 export * from "./components/atoms/GeneralInput/index";
 export * from "./components/atoms/GeneralTextBox/index";
 export * from "./components/atoms/GradientPanel/index";
+export * from "./components/atoms/InheritanceTag/index";
 export * from "./components/atoms/Loading/index";
 export * from "./components/atoms/LogoImage/index";
 export * from "./components/atoms/PriorityFlag/index";