@pagopa/io-app-design-system 5.5.1 → 5.6.0

package/lib/commonjs/components/featureInfo/FeatureInfo.js

@@ -11,26 +11,44 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const DEFAULT_ICON_SIZE = 24;
 const DEFAULT_PICTOGRAM_SIZE = 48;
-const renderNode = body => {
-  if (typeof body === "string") {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BodySmall, {
-      testID: "infoScreenBody",
-      children: body
-    });
-  }
-  return body;
-};
 const FeatureInfo = ({
-  iconName,
-  pictogramName,
+  action,
   body,
-  action
+  iconName,
+  pictogramProps,
+  variant = "neutral"
 }) => {
   const theme = (0, _core.useIOTheme)();
 
   /* Already defined in the `BodySmall` component as a fallback value,
   but I keep it here to avoid possible future inconsistencies. */
   const accessibilityRole = action?.accessibilityRole ?? "link";
+  const variantMap = {
+    contrast: {
+      action: "white",
+      content: "white"
+    },
+    neutral: {
+      action: theme["interactiveElem-default"],
+      content: theme["textBody-tertiary"]
+    }
+  };
+  const {
+    action: actionColor,
+    content: contentColor
+  } = variantMap[variant];
+  const FeatureInfoContent = () => {
+    if (typeof body === "string") {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BodySmall, {
+        color: contentColor,
+        testID: "infoScreenBody",
+        children: body
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: body
+    });
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.HStack, {
     style: {
       alignItems: "center"
@@ -41,9 +59,9 @@ const FeatureInfo = ({
       name: iconName,
       size: DEFAULT_ICON_SIZE,
       color: theme["icon-decorative"]
-    }), pictogramName && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Pictogram, {
+    }), pictogramProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Pictogram, {
+      ...pictogramProps,
       allowFontScaling: true,
-      name: pictogramName,
       size: DEFAULT_PICTOGRAM_SIZE
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.VStack, {
       allowScaleSpacing: true,
@@ -51,10 +69,11 @@ const FeatureInfo = ({
       style: {
         flexShrink: 1
       },
-      children: [renderNode(body), action && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BodySmall, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(FeatureInfoContent, {}), action && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BodySmall, {
         asLink: true,
         weight: "Semibold",
         onPress: action.onPress,
+        color: actionColor,
         accessible: true,
         importantForAccessibility: "yes",
         accessibilityElementsHidden: false,

package/lib/commonjs/components/featureInfo/FeatureInfo.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_components","_core","_jsxRuntime","e","__esModule","default","DEFAULT_ICON_SIZE","DEFAULT_PICTOGRAM_SIZE","renderNode","body","jsx","BodySmall","testID","children","FeatureInfo","iconName","pictogramName","action","theme","useIOTheme","accessibilityRole","jsxs","HStack","style","alignItems","space","Icon","allowFontScaling","name","size","color","Pictogram","VStack","allowScaleSpacing","flexShrink","asLink","weight","onPress","accessible","importantForAccessibility","accessibilityElementsHidden","label","exports"],"sourceRoot":"../../../../src","sources":["components/featureInfo/FeatureInfo.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,WAAA,GAAAD,OAAA;AAWA,IAAAE,KAAA,GAAAF,OAAA;AAAwC,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AA2BxC,MAAMG,iBAAkC,GAAG,EAAE;AAC7C,MAAMC,sBAA4C,GAAG,EAAE;AAEvD,MAAMC,UAAU,GAAIC,IAA8B,IAAK;EACrD,IAAI,OAAOA,IAAI,KAAK,QAAQ,EAAE;IAC5B,oBAAO,IAAAP,WAAA,CAAAQ,GAAA,EAACV,WAAA,CAAAW,SAAS;MAACC,MAAM,EAAC,gBAAgB;MAAAC,QAAA,EAAEJ;IAAI,CAAY,CAAC;EAC9D;EAEA,OAAOA,IAAI;AACb,CAAC;AAEM,MAAMK,WAAW,GAAGA,CAAC;EAC1BC,QAAQ;EACRC,aAAa;EACbP,IAAI;EACJQ;AACgB,CAAC,KAAK;EACtB,MAAMC,KAAK,GAAG,IAAAC,gBAAU,EAAC,CAAC;;EAE1B;AACF;EACE,MAAMC,iBAAiB,GAAGH,MAAM,EAAEG,iBAAiB,IAAI,MAAM;EAE7D,oBACE,IAAAlB,WAAA,CAAAmB,IAAA,EAACrB,WAAA,CAAAsB,MAAM;IAACC,KAAK,EAAE;MAAEC,UAAU,EAAE;IAAS,CAAE;IAACC,KAAK,EAAE,EAAG;IAAAZ,QAAA,GAChDE,QAAQ,iBACP,IAAAb,WAAA,CAAAQ,GAAA,EAACV,WAAA,CAAA0B,IAAI;MACHC,gBAAgB;MAChBC,IAAI,EAAEb,QAAS;MACfc,IAAI,EAAEvB,iBAAkB;MACxBwB,KAAK,EAAEZ,KAAK,CAAC,iBAAiB;IAAE,CACjC,CACF,EACAF,aAAa,iBACZ,IAAAd,WAAA,CAAAQ,GAAA,EAACV,WAAA,CAAA+B,SAAS;MACRJ,gBAAgB;MAChBC,IAAI,EAAEZ,aAAc;MACpBa,IAAI,EAAEtB;IAAuB,CAC9B,CACF,eACD,IAAAL,WAAA,CAAAmB,IAAA,EAACrB,WAAA,CAAAgC,MAAM;MAACC,iBAAiB;MAACR,KAAK,EAAE,CAAE;MAACF,KAAK,EAAE;QAAEW,UAAU,EAAE;MAAE,CAAE;MAAArB,QAAA,GAC1DL,UAAU,CAACC,IAAI,CAAC,EAChBQ,MAAM,iBACL,IAAAf,WAAA,CAAAQ,GAAA,EAACV,WAAA,CAAAW,SAAS;QACRwB,MAAM;QACNC,MAAM,EAAC,UAAU;QACjBC,OAAO,EAAEpB,MAAM,CAACoB,OAAQ;QACxBC,UAAU;QACVC,yBAAyB,EAAE,KAAM;QACjCC,2BAA2B,EAAE,KAAM;QACnCpB,iBAAiB,EAAEA,iBAAkB;QAAAP,QAAA,EAEpCI,MAAM,CAACwB;MAAK,CACJ,CACZ;IAAA,CACK,CAAC;EAAA,CACH,CAAC;AAEb,CAAC;AAACC,OAAA,CAAA5B,WAAA,GAAAA,WAAA","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_components","_core","_jsxRuntime","e","__esModule","default","DEFAULT_ICON_SIZE","DEFAULT_PICTOGRAM_SIZE","FeatureInfo","action","body","iconName","pictogramProps","variant","theme","useIOTheme","accessibilityRole","variantMap","contrast","content","neutral","actionColor","contentColor","FeatureInfoContent","jsx","BodySmall","color","testID","children","Fragment","jsxs","HStack","style","alignItems","space","Icon","allowFontScaling","name","size","Pictogram","VStack","allowScaleSpacing","flexShrink","asLink","weight","onPress","accessible","importantForAccessibility","accessibilityElementsHidden","label","exports"],"sourceRoot":"../../../../src","sources":["components/featureInfo/FeatureInfo.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/featureInfo/FeatureInfo.js

@@ -3,29 +3,47 @@
 import React from "react";
 import { BodySmall, HStack, Icon, Pictogram, VStack } from "../../components";
 import { useIOTheme } from "../../core";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_ICON_SIZE = 24;
 const DEFAULT_PICTOGRAM_SIZE = 48;
-const renderNode = body => {
-  if (typeof body === "string") {
-    return /*#__PURE__*/_jsx(BodySmall, {
-      testID: "infoScreenBody",
-      children: body
-    });
-  }
-  return body;
-};
 export const FeatureInfo = ({
-  iconName,
-  pictogramName,
+  action,
   body,
-  action
+  iconName,
+  pictogramProps,
+  variant = "neutral"
 }) => {
   const theme = useIOTheme();
 
   /* Already defined in the `BodySmall` component as a fallback value,
   but I keep it here to avoid possible future inconsistencies. */
   const accessibilityRole = action?.accessibilityRole ?? "link";
+  const variantMap = {
+    contrast: {
+      action: "white",
+      content: "white"
+    },
+    neutral: {
+      action: theme["interactiveElem-default"],
+      content: theme["textBody-tertiary"]
+    }
+  };
+  const {
+    action: actionColor,
+    content: contentColor
+  } = variantMap[variant];
+  const FeatureInfoContent = () => {
+    if (typeof body === "string") {
+      return /*#__PURE__*/_jsx(BodySmall, {
+        color: contentColor,
+        testID: "infoScreenBody",
+        children: body
+      });
+    }
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: body
+    });
+  };
   return /*#__PURE__*/_jsxs(HStack, {
     style: {
       alignItems: "center"
@@ -36,9 +54,9 @@ export const FeatureInfo = ({
       name: iconName,
       size: DEFAULT_ICON_SIZE,
       color: theme["icon-decorative"]
-    }), pictogramName && /*#__PURE__*/_jsx(Pictogram, {
+    }), pictogramProps && /*#__PURE__*/_jsx(Pictogram, {
+      ...pictogramProps,
       allowFontScaling: true,
-      name: pictogramName,
       size: DEFAULT_PICTOGRAM_SIZE
     }), /*#__PURE__*/_jsxs(VStack, {
       allowScaleSpacing: true,
@@ -46,10 +64,11 @@ export const FeatureInfo = ({
       style: {
         flexShrink: 1
       },
-      children: [renderNode(body), action && /*#__PURE__*/_jsx(BodySmall, {
+      children: [/*#__PURE__*/_jsx(FeatureInfoContent, {}), action && /*#__PURE__*/_jsx(BodySmall, {
         asLink: true,
         weight: "Semibold",
         onPress: action.onPress,
+        color: actionColor,
         accessible: true,
         importantForAccessibility: "yes",
         accessibilityElementsHidden: false,

package/lib/module/components/featureInfo/FeatureInfo.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","BodySmall","HStack","Icon","Pictogram","VStack","useIOTheme","jsx","_jsx","jsxs","_jsxs","DEFAULT_ICON_SIZE","DEFAULT_PICTOGRAM_SIZE","renderNode","body","testID","children","FeatureInfo","iconName","pictogramName","action","theme","accessibilityRole","style","alignItems","space","allowFontScaling","name","size","color","allowScaleSpacing","flexShrink","asLink","weight","onPress","accessible","importantForAccessibility","accessibilityElementsHidden","label"],"sourceRoot":"../../../../src","sources":["components/featureInfo/FeatureInfo.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAqB,OAAO;AAExC,SACEC,SAAS,EACTC,MAAM,EAKNC,IAAI,EACJC,SAAS,EACTC,MAAM,QACD,kBAAkB;AACzB,SAASC,UAAU,QAAQ,YAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AA2BxC,MAAMC,iBAAkC,GAAG,EAAE;AAC7C,MAAMC,sBAA4C,GAAG,EAAE;AAEvD,MAAMC,UAAU,GAAIC,IAA8B,IAAK;EACrD,IAAI,OAAOA,IAAI,KAAK,QAAQ,EAAE;IAC5B,oBAAON,IAAA,CAACP,SAAS;MAACc,MAAM,EAAC,gBAAgB;MAAAC,QAAA,EAAEF;IAAI,CAAY,CAAC;EAC9D;EAEA,OAAOA,IAAI;AACb,CAAC;AAED,OAAO,MAAMG,WAAW,GAAGA,CAAC;EAC1BC,QAAQ;EACRC,aAAa;EACbL,IAAI;EACJM;AACgB,CAAC,KAAK;EACtB,MAAMC,KAAK,GAAGf,UAAU,CAAC,CAAC;;EAE1B;AACF;EACE,MAAMgB,iBAAiB,GAAGF,MAAM,EAAEE,iBAAiB,IAAI,MAAM;EAE7D,oBACEZ,KAAA,CAACR,MAAM;IAACqB,KAAK,EAAE;MAAEC,UAAU,EAAE;IAAS,CAAE;IAACC,KAAK,EAAE,EAAG;IAAAT,QAAA,GAChDE,QAAQ,iBACPV,IAAA,CAACL,IAAI;MACHuB,gBAAgB;MAChBC,IAAI,EAAET,QAAS;MACfU,IAAI,EAAEjB,iBAAkB;MACxBkB,KAAK,EAAER,KAAK,CAAC,iBAAiB;IAAE,CACjC,CACF,EACAF,aAAa,iBACZX,IAAA,CAACJ,SAAS;MACRsB,gBAAgB;MAChBC,IAAI,EAAER,aAAc;MACpBS,IAAI,EAAEhB;IAAuB,CAC9B,CACF,eACDF,KAAA,CAACL,MAAM;MAACyB,iBAAiB;MAACL,KAAK,EAAE,CAAE;MAACF,KAAK,EAAE;QAAEQ,UAAU,EAAE;MAAE,CAAE;MAAAf,QAAA,GAC1DH,UAAU,CAACC,IAAI,CAAC,EAChBM,MAAM,iBACLZ,IAAA,CAACP,SAAS;QACR+B,MAAM;QACNC,MAAM,EAAC,UAAU;QACjBC,OAAO,EAAEd,MAAM,CAACc,OAAQ;QACxBC,UAAU;QACVC,yBAAyB,EAAE,KAAM;QACjCC,2BAA2B,EAAE,KAAM;QACnCf,iBAAiB,EAAEA,iBAAkB;QAAAN,QAAA,EAEpCI,MAAM,CAACkB;MAAK,CACJ,CACZ;IAAA,CACK,CAAC;EAAA,CACH,CAAC;AAEb,CAAC","ignoreList":[]}
+{"version":3,"names":["React","BodySmall","HStack","Icon","Pictogram","VStack","useIOTheme","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","DEFAULT_ICON_SIZE","DEFAULT_PICTOGRAM_SIZE","FeatureInfo","action","body","iconName","pictogramProps","variant","theme","accessibilityRole","variantMap","contrast","content","neutral","actionColor","contentColor","FeatureInfoContent","color","testID","children","style","alignItems","space","allowFontScaling","name","size","allowScaleSpacing","flexShrink","asLink","weight","onPress","accessible","importantForAccessibility","accessibilityElementsHidden","label"],"sourceRoot":"../../../../src","sources":["components/featureInfo/FeatureInfo.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAqB,OAAO;AAExC,SACEC,SAAS,EACTC,MAAM,EAKNC,IAAI,EACJC,SAAS,EACTC,MAAM,QACD,kBAAkB;AACzB,SAAmBC,UAAU,QAAQ,YAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA;AA+BlD,MAAMC,iBAAkC,GAAG,EAAE;AAC7C,MAAMC,sBAA4C,GAAG,EAAE;AAEvD,OAAO,MAAMC,WAAW,GAAGA,CAAC;EAC1BC,MAAM;EACNC,IAAI;EACJC,QAAQ;EACRC,cAAc;EACdC,OAAO,GAAG;AACM,CAAC,KAAK;EACtB,MAAMC,KAAK,GAAGf,UAAU,CAAC,CAAC;;EAE1B;AACF;EACE,MAAMgB,iBAAiB,GAAGN,MAAM,EAAEM,iBAAiB,IAAI,MAAM;EAE7D,MAAMC,UAGL,GAAG;IACFC,QAAQ,EAAE;MACRR,MAAM,EAAE,OAAO;MACfS,OAAO,EAAE;IACX,CAAC;IACDC,OAAO,EAAE;MACPV,MAAM,EAAEK,KAAK,CAAC,yBAAyB,CAAC;MACxCI,OAAO,EAAEJ,KAAK,CAAC,mBAAmB;IACpC;EACF,CAAC;EAED,MAAM;IAAEL,MAAM,EAAEW,WAAW;IAAEF,OAAO,EAAEG;EAAa,CAAC,GAAGL,UAAU,CAACH,OAAO,CAAC;EAE1E,MAAMS,kBAAkB,GAAGA,CAAA,KAAM;IAC/B,IAAI,OAAOZ,IAAI,KAAK,QAAQ,EAAE;MAC5B,oBACET,IAAA,CAACP,SAAS;QAAC6B,KAAK,EAAEF,YAAa;QAACG,MAAM,EAAC,gBAAgB;QAAAC,QAAA,EACpDf;MAAI,CACI,CAAC;IAEhB;IAEA,oBAAOT,IAAA,CAAAE,SAAA;MAAAsB,QAAA,EAAGf;IAAI,CAAG,CAAC;EACpB,CAAC;EAED,oBACEL,KAAA,CAACV,MAAM;IAAC+B,KAAK,EAAE;MAAEC,UAAU,EAAE;IAAS,CAAE;IAACC,KAAK,EAAE,EAAG;IAAAH,QAAA,GAChDd,QAAQ,iBACPV,IAAA,CAACL,IAAI;MACHiC,gBAAgB;MAChBC,IAAI,EAAEnB,QAAS;MACfoB,IAAI,EAAEzB,iBAAkB;MACxBiB,KAAK,EAAET,KAAK,CAAC,iBAAiB;IAAE,CACjC,CACF,EACAF,cAAc,iBACbX,IAAA,CAACJ,SAAS;MAAA,GACJe,cAAc;MAClBiB,gBAAgB;MAChBE,IAAI,EAAExB;IAAuB,CAC9B,CACF,eACDF,KAAA,CAACP,MAAM;MAACkC,iBAAiB;MAACJ,KAAK,EAAE,CAAE;MAACF,KAAK,EAAE;QAAEO,UAAU,EAAE;MAAE,CAAE;MAAAR,QAAA,gBAC3DxB,IAAA,CAACqB,kBAAkB,IAAE,CAAC,EACrBb,MAAM,iBACLR,IAAA,CAACP,SAAS;QACRwC,MAAM;QACNC,MAAM,EAAC,UAAU;QACjBC,OAAO,EAAE3B,MAAM,CAAC2B,OAAQ;QACxBb,KAAK,EAAEH,WAAY;QACnBiB,UAAU;QACVC,yBAAyB,EAAE,KAAM;QACjCC,2BAA2B,EAAE,KAAM;QACnCxB,iBAAiB,EAAEA,iBAAkB;QAAAU,QAAA,EAEpChB,MAAM,CAAC+B;MAAK,CACJ,CACZ;IAAA,CACK,CAAC;EAAA,CACH,CAAC;AAEb,CAAC","ignoreList":[]}

package/lib/typescript/components/featureInfo/FeatureInfo.d.ts

@@ -1,8 +1,9 @@
 import React, { ReactNode } from "react";
 import { AccessibilityRole, GestureResponderEvent } from "react-native";
-import { IOIcons, IOPictograms } from "../../components";
+import { IOIcons, IOPictogramsProps } from "../../components";
 type PartialFeatureInfo = {
     body?: string | ReactNode;
+    variant?: "neutral" | "contrast";
 };
 type FeatureInfoActionProps = {
     action: {
@@ -15,12 +16,12 @@ type FeatureInfoActionProps = {
 };
 type FeatureInfoGraphicProps = {
     iconName?: never;
-    pictogramName: IOPictograms;
+    pictogramProps: Pick<IOPictogramsProps, "name" | "pictogramStyle">;
 } | {
     iconName: IOIcons;
-    pictogramName?: never;
+    pictogramProps?: never;
 };
 type FeatureInfoProps = FeatureInfoGraphicProps & PartialFeatureInfo & FeatureInfoActionProps;
-export declare const FeatureInfo: ({ iconName, pictogramName, body, action }: FeatureInfoProps) => React.JSX.Element;
+export declare const FeatureInfo: ({ action, body, iconName, pictogramProps, variant }: FeatureInfoProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=FeatureInfo.d.ts.map

package/lib/typescript/components/featureInfo/FeatureInfo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FeatureInfo.d.ts","sourceRoot":"","sources":["../../../../src/components/featureInfo/FeatureInfo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AACxE,OAAO,EAIL,OAAO,EAEP,YAAY,EAIb,MAAM,kBAAkB,CAAC;AAG1B,KAAK,kBAAkB,GAAG;IAExB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC3B,CAAC;AAEF,KAAK,sBAAsB,GACvB;IACE,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;QAChD,iBAAiB,CAAC,EAAE,OAAO,CAAC,iBAAiB,EAAE,QAAQ,GAAG,MAAM,CAAC,CAAC;KACnE,CAAC;CACH,GACD;IACE,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB,CAAC;AAEN,KAAK,uBAAuB,GACxB;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC;IAAC,aAAa,EAAE,YAAY,CAAA;CAAE,GACjD;IAAE,QAAQ,EAAE,OAAO,CAAC;IAAC,aAAa,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAEjD,KAAK,gBAAgB,GAAG,uBAAuB,GAC7C,kBAAkB,GAClB,sBAAsB,CAAC;AAazB,eAAO,MAAM,WAAW,GAAI,2CAKzB,gBAAgB,sBA0ClB,CAAC"}
+{"version":3,"file":"FeatureInfo.d.ts","sourceRoot":"","sources":["../../../../src/components/featureInfo/FeatureInfo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AACxE,OAAO,EAIL,OAAO,EAEP,iBAAiB,EAIlB,MAAM,kBAAkB,CAAC;AAG1B,KAAK,kBAAkB,GAAG;IAExB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;CAClC,CAAC;AAEF,KAAK,sBAAsB,GACvB;IACE,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;QAChD,iBAAiB,CAAC,EAAE,OAAO,CAAC,iBAAiB,EAAE,QAAQ,GAAG,MAAM,CAAC,CAAC;KACnE,CAAC;CACH,GACD;IACE,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB,CAAC;AAEN,KAAK,uBAAuB,GACxB;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,cAAc,EAAE,IAAI,CAAC,iBAAiB,EAAE,MAAM,GAAG,gBAAgB,CAAC,CAAC;CACpE,GACD;IAAE,QAAQ,EAAE,OAAO,CAAC;IAAC,cAAc,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAElD,KAAK,gBAAgB,GAAG,uBAAuB,GAC7C,kBAAkB,GAClB,sBAAsB,CAAC;AAKzB,eAAO,MAAM,WAAW,GAAI,qDAMzB,gBAAgB,sBAuElB,CAAC"}

package/lib/typescript/components/pictograms/Pictogram.d.ts

@@ -70,7 +70,7 @@ export declare const IOPictograms: {
 };
 export type IOPictograms = keyof typeof IOPictograms;
 export type IOPictogramSizeScale = 48 | 64 | 72 | 80 | 120 | 180;
-type IOPictogramsProps = {
+export type IOPictogramsProps = {
     name: IOPictograms;
     pictogramStyle?: "default" | "light-content" | "dark-content";
     size?: IOPictogramSizeScale | "100%";
@@ -92,5 +92,4 @@ export declare const IOPictogramsObject: {
     readonly flyingMessage: ({ size, colorValues, ...props }: SVGPictogramProps) => React.JSX.Element;
 };
 export type IOPictogramsObject = keyof typeof IOPictogramsObject;
-export {};
 //# sourceMappingURL=Pictogram.d.ts.map

package/lib/typescript/components/pictograms/Pictogram.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pictogram.d.ts","sourceRoot":"","sources":["../../../../src/components/pictograms/Pictogram.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAkHvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqExB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,YAAY,CAAC;AAErD,MAAM,MAAM,oBAAoB,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,CAAC;AAEjE,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,YAAY,CAAC;IAInB,cAAc,CAAC,EAAE,SAAS,GAAG,eAAe,GAAG,cAAc,CAAC;IAC9D,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;IACrC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AASF,eAAO,MAAM,SAAS,GAAI,4DAMvB,iBAAiB,sBAuCnB,CAAC;AAUF,MAAM,MAAM,iBAAiB,GAAG,OAAO,CACnC,OAAO,GACP,SAAS,GACT,WAAW,GACX,SAAS,GACT,MAAM,GACN,UAAU,GACV,MAAM,GACN,UAAU,GACV,UAAU,GACV,SAAS,GACT,KAAK,GACL,UAAU,GACV,aAAa,GACb,eAAe,GACf,iBAAiB,GACjB,eAAe,GACf,cAAc,GACd,SAAS,GACT,eAAe,GACf,cAAc,GACd,WAAW,GACX,cAAc,GACd,UAAU,GACV,cAAc,GACd,MAAM,GACN,SAAS,GACT,OAAO,GACP,QAAQ,GACR,YAAY,GACZ,UAAU,GACV,SAAS,GACT,YAAY,GACZ,cAAc,GACd,MAAM,GACN,KAAK,GACL,cAAc,GACd,MAAM,GACN,QAAQ,GACR,gBAAgB,GAChB,UAAU,GACV,UAAU,GACV,YAAY,GACZ,gBAAgB,EAClB,YAAY,CACb,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE;KAC7B,GAAG,IAAI,iBAAiB,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,iBAAiB,KAAK,GAAG,CAAC,OAAO;CA2CzE,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,4DAM5B,iBAAiB,sBAuCnB,CAAC;AAOF,eAAO,MAAM,kBAAkB;;;;;;;;CAQrB,CAAC;AAEX,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,kBAAkB,CAAC"}
+{"version":3,"file":"Pictogram.d.ts","sourceRoot":"","sources":["../../../../src/components/pictograms/Pictogram.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAkHvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqExB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,YAAY,CAAC;AAErD,MAAM,MAAM,oBAAoB,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,CAAC;AAEjE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,YAAY,CAAC;IAInB,cAAc,CAAC,EAAE,SAAS,GAAG,eAAe,GAAG,cAAc,CAAC;IAC9D,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;IACrC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AASF,eAAO,MAAM,SAAS,GAAI,4DAMvB,iBAAiB,sBAuCnB,CAAC;AAUF,MAAM,MAAM,iBAAiB,GAAG,OAAO,CACnC,OAAO,GACP,SAAS,GACT,WAAW,GACX,SAAS,GACT,MAAM,GACN,UAAU,GACV,MAAM,GACN,UAAU,GACV,UAAU,GACV,SAAS,GACT,KAAK,GACL,UAAU,GACV,aAAa,GACb,eAAe,GACf,iBAAiB,GACjB,eAAe,GACf,cAAc,GACd,SAAS,GACT,eAAe,GACf,cAAc,GACd,WAAW,GACX,cAAc,GACd,UAAU,GACV,cAAc,GACd,MAAM,GACN,SAAS,GACT,OAAO,GACP,QAAQ,GACR,YAAY,GACZ,UAAU,GACV,SAAS,GACT,YAAY,GACZ,cAAc,GACd,MAAM,GACN,KAAK,GACL,cAAc,GACd,MAAM,GACN,QAAQ,GACR,gBAAgB,GAChB,UAAU,GACV,UAAU,GACV,YAAY,GACZ,gBAAgB,EAClB,YAAY,CACb,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE;KAC7B,GAAG,IAAI,iBAAiB,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,iBAAiB,KAAK,GAAG,CAAC,OAAO;CA2CzE,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,4DAM5B,iBAAiB,sBAuCnB,CAAC;AAOF,eAAO,MAAM,kBAAkB;;;;;;;;CAQrB,CAAC;AAEX,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,kBAAkB,CAAC"}

package/lib/typescript/components/typography/IOText.d.ts

@@ -35,7 +35,7 @@ export type IOTextProps = IOTextBaseProps & IOTextExcludedProps;
  * can be used as links
  */
 export type TypographicStyleAsLinkProps = {
-    color?: never;
+    color?: IOColors;
     asLink: true;
     onPress: (event: GestureResponderEvent) => void;
     accessibilityRole?: Extract<AccessibilityRole, "button" | "link">;

package/lib/typescript/components/typography/IOText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IOText.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/IOText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAuB,MAAM,OAAO,CAAC;AACnE,OAAO,EACL,iBAAiB,EAEjB,qBAAqB,EACrB,IAAI,EACJ,SAAS,EACT,IAAI,EACL,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,QAAQ,EAAc,MAAM,YAAY,CAAC;AAElD,OAAO,EACL,YAAY,EACZ,YAAY,EAGb,MAAM,mBAAmB,CAAC;AAE3B;;;;GAIG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,SAAS,EACT,YAAY,GAAG,UAAU,GAAG,YAAY,GAAG,YAAY,GAAG,WAAW,CACtE,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,IAAI,CACtC,WAAW,EACX,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,GAAG,WAAW,CAC5E,GAAG;IAAE,SAAS,CAAC,EAAE,WAAW,CAAC;IAAC,KAAK,CAAC,EAAE,WAAW,CAAA;CAAE,GAAG;IACrD,KAAK,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;CAClC,CAAC;AAEF;;;GAGG;AACH,KAAK,eAAe,GAAG;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB,CAAC;AAEF,KAAK,mBAAmB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,OAAO,CAAC,CAAC;AAEtE,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG,mBAAmB,CAAC;AAEhE;;;GAGG;AACH,MAAM,MAAM,2BAA2B,GACnC;IACE,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,MAAM,EAAE,IAAI,CAAC;IACb,OAAO,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAChD,iBAAiB,CAAC,EAAE,OAAO,CAAC,iBAAiB,EAAE,QAAQ,GAAG,MAAM,CAAC,CAAC;CACnE,GACD;IAAE,KAAK,CAAC,EAAE,QAAQ,CAAC;IAAC,MAAM,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAezC;;;;;;GAMG;AACH,eAAO,MAAM,MAAM,oGAoElB,CAAC;AAEF,eAAO,MAAM,cAAc,4IAA2C,CAAC"}
+{"version":3,"file":"IOText.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/IOText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAuB,MAAM,OAAO,CAAC;AACnE,OAAO,EACL,iBAAiB,EAEjB,qBAAqB,EACrB,IAAI,EACJ,SAAS,EACT,IAAI,EACL,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,QAAQ,EAAc,MAAM,YAAY,CAAC;AAElD,OAAO,EACL,YAAY,EACZ,YAAY,EAGb,MAAM,mBAAmB,CAAC;AAE3B;;;;GAIG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,SAAS,EACT,YAAY,GAAG,UAAU,GAAG,YAAY,GAAG,YAAY,GAAG,WAAW,CACtE,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,IAAI,CACtC,WAAW,EACX,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,GAAG,WAAW,CAC5E,GAAG;IAAE,SAAS,CAAC,EAAE,WAAW,CAAC;IAAC,KAAK,CAAC,EAAE,WAAW,CAAA;CAAE,GAAG;IACrD,KAAK,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;CAClC,CAAC;AAEF;;;GAGG;AACH,KAAK,eAAe,GAAG;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB,CAAC;AAEF,KAAK,mBAAmB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,OAAO,CAAC,CAAC;AAEtE,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG,mBAAmB,CAAC;AAEhE;;;GAGG;AACH,MAAM,MAAM,2BAA2B,GACnC;IACE,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,MAAM,EAAE,IAAI,CAAC;IACb,OAAO,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAChD,iBAAiB,CAAC,EAAE,OAAO,CAAC,iBAAiB,EAAE,QAAQ,GAAG,MAAM,CAAC,CAAC;CACnE,GACD;IAAE,KAAK,CAAC,EAAE,QAAQ,CAAC;IAAC,MAAM,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAezC;;;;;;GAMG;AACH,eAAO,MAAM,MAAM,oGAoElB,CAAC;AAEF,eAAO,MAAM,cAAc,4IAA2C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "5.5.1",
+  "version": "5.6.0",
   "description": "The library defining the core components of the design system of @pagopa/io-app",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/featureInfo/FeatureInfo.tsx

@@ -6,16 +6,17 @@ import {
   IOIconSizeScale,
   IOIcons,
   IOPictogramSizeScale,
-  IOPictograms,
+  IOPictogramsProps,
   Icon,
   Pictogram,
   VStack
 } from "../../components";
-import { useIOTheme } from "../../core";
+import { IOColors, useIOTheme } from "../../core";
 
 type PartialFeatureInfo = {
   // Necessary to render main body with different formatting
   body?: string | ReactNode;
+  variant?: "neutral" | "contrast";
 };
 
 type FeatureInfoActionProps =
@@ -31,8 +32,11 @@ type FeatureInfoActionProps =
     };
 
 type FeatureInfoGraphicProps =
-  | { iconName?: never; pictogramName: IOPictograms }
-  | { iconName: IOIcons; pictogramName?: never };
+  | {
+      iconName?: never;
+      pictogramProps: Pick<IOPictogramsProps, "name" | "pictogramStyle">;
+    }
+  | { iconName: IOIcons; pictogramProps?: never };
 
 type FeatureInfoProps = FeatureInfoGraphicProps &
   PartialFeatureInfo &
@@ -41,19 +45,12 @@ type FeatureInfoProps = FeatureInfoGraphicProps &
 const DEFAULT_ICON_SIZE: IOIconSizeScale = 24;
 const DEFAULT_PICTOGRAM_SIZE: IOPictogramSizeScale = 48;
 
-const renderNode = (body: FeatureInfoProps["body"]) => {
-  if (typeof body === "string") {
-    return <BodySmall testID="infoScreenBody">{body}</BodySmall>;
-  }
-
-  return body;
-};
-
 export const FeatureInfo = ({
-  iconName,
-  pictogramName,
+  action,
   body,
-  action
+  iconName,
+  pictogramProps,
+  variant = "neutral"
 }: FeatureInfoProps) => {
   const theme = useIOTheme();
 
@@ -61,6 +58,34 @@ export const FeatureInfo = ({
   but I keep it here to avoid possible future inconsistencies. */
   const accessibilityRole = action?.accessibilityRole ?? "link";
 
+  const variantMap: Record<
+    NonNullable<FeatureInfoProps["variant"]>,
+    { action: IOColors; content: IOColors }
+  > = {
+    contrast: {
+      action: "white",
+      content: "white"
+    },
+    neutral: {
+      action: theme["interactiveElem-default"],
+      content: theme["textBody-tertiary"]
+    }
+  };
+
+  const { action: actionColor, content: contentColor } = variantMap[variant];
+
+  const FeatureInfoContent = () => {
+    if (typeof body === "string") {
+      return (
+        <BodySmall color={contentColor} testID="infoScreenBody">
+          {body}
+        </BodySmall>
+      );
+    }
+
+    return <>{body}</>;
+  };
+
   return (
     <HStack style={{ alignItems: "center" }} space={24}>
       {iconName && (
@@ -71,20 +96,21 @@ export const FeatureInfo = ({
           color={theme["icon-decorative"]}
         />
       )}
-      {pictogramName && (
+      {pictogramProps && (
         <Pictogram
+          {...pictogramProps}
           allowFontScaling
-          name={pictogramName}
           size={DEFAULT_PICTOGRAM_SIZE}
         />
       )}
       <VStack allowScaleSpacing space={4} style={{ flexShrink: 1 }}>
-        {renderNode(body)}
+        <FeatureInfoContent />
         {action && (
           <BodySmall
             asLink
             weight="Semibold"
             onPress={action.onPress}
+            color={actionColor}
             accessible
             importantForAccessibility={"yes"}
             accessibilityElementsHidden={false}

package/src/components/pictograms/Pictogram.tsx

@@ -189,7 +189,7 @@ export type IOPictograms = keyof typeof IOPictograms;
 
 export type IOPictogramSizeScale = 48 | 64 | 72 | 80 | 120 | 180;
 
-type IOPictogramsProps = {
+export type IOPictogramsProps = {
   name: IOPictograms;
   /* Not too happy about the API choice,
   but at least we have the same <StatusBar …>

package/src/components/typography/IOText.tsx

@@ -59,7 +59,7 @@ export type IOTextProps = IOTextBaseProps & IOTextExcludedProps;
  */
 export type TypographicStyleAsLinkProps =
   | {
-      color?: never;
+      color?: IOColors;
       asLink: true;
       onPress: (event: GestureResponderEvent) => void;
       accessibilityRole?: Extract<AccessibilityRole, "button" | "link">;