@pagopa/io-app-design-system 1.13.0 → 1.13.1

package/lib/commonjs/components/layout/HeaderFirstLevel.js

@@ -14,7 +14,8 @@ var _buttons = require("../buttons");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const HEADER_BG_COLOR = "white";
+const HEADER_BG_COLOR_LIGHT = "white";
+const HEADER_BG_COLOR_DARK = "bluegrey";
 const styles = _reactNative.StyleSheet.create({
   headerInner: {
     paddingHorizontal: _core.IOVisualCostants.appMarginDefault,
@@ -30,6 +31,7 @@ const HeaderFirstLevel = _ref => {
     title,
     type,
     testID,
+    backgroundColor = "light",
     firstAction,
     secondAction,
     thirdAction
@@ -38,7 +40,7 @@ const HeaderFirstLevel = _ref => {
   return /*#__PURE__*/React.createElement(_reactNative.View, {
     style: {
       paddingTop: insets.top,
-      backgroundColor: _core.IOColors[HEADER_BG_COLOR]
+      backgroundColor: backgroundColor === "light" ? _core.IOColors[HEADER_BG_COLOR_LIGHT] : _core.IOColors[HEADER_BG_COLOR_DARK]
     },
     accessibilityRole: "header",
     testID: testID
@@ -48,21 +50,22 @@ const HeaderFirstLevel = _ref => {
     style: {
       flexShrink: 1
     },
-    numberOfLines: 1
+    numberOfLines: 1,
+    color: backgroundColor === "dark" ? "white" : undefined
   }, title), /*#__PURE__*/React.createElement(_reactNative.View, {
     style: [_core.IOStyles.row, {
       flexShrink: 0
     }]
   }, type === "threeActions" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_buttons.IconButton, _extends({}, thirdAction, {
-    color: "neutral"
+    color: backgroundColor === "dark" ? "contrast" : "neutral"
   })), /*#__PURE__*/React.createElement(_spacer.HSpacer, {
     size: 16
   })), (type === "twoActions" || type === "threeActions") && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_buttons.IconButton, _extends({}, secondAction, {
-    color: "neutral"
+    color: backgroundColor === "dark" ? "contrast" : "neutral"
   })), /*#__PURE__*/React.createElement(_spacer.HSpacer, {
     size: 16
   })), type !== "base" && /*#__PURE__*/React.createElement(_buttons.IconButton, _extends({}, firstAction, {
-    color: "neutral"
+    color: backgroundColor === "dark" ? "contrast" : "neutral"
   })))));
 };
 exports.HeaderFirstLevel = HeaderFirstLevel;

package/lib/commonjs/components/layout/HeaderFirstLevel.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_reactNativeSafeAreaContext","_core","_typography","_spacer","_buttons","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","HEADER_BG_COLOR","styles","StyleSheet","create","headerInner","paddingHorizontal","IOVisualCostants","appMarginDefault","height","headerHeight","width","flexDirection","alignItems","justifyContent","HeaderFirstLevel","_ref","title","type","testID","firstAction","secondAction","thirdAction","insets","useSafeAreaInsets","createElement","View","style","paddingTop","top","backgroundColor","IOColors","accessibilityRole","H3","flexShrink","numberOfLines","IOStyles","row","Fragment","IconButton","color","HSpacer","size","exports","_default"],"sourceRoot":"../../../../src","sources":["components/layout/HeaderFirstLevel.tsx"],"mappings":"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"}
+{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_reactNativeSafeAreaContext","_core","_typography","_spacer","_buttons","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","HEADER_BG_COLOR_LIGHT","HEADER_BG_COLOR_DARK","styles","StyleSheet","create","headerInner","paddingHorizontal","IOVisualCostants","appMarginDefault","height","headerHeight","width","flexDirection","alignItems","justifyContent","HeaderFirstLevel","_ref","title","type","testID","backgroundColor","firstAction","secondAction","thirdAction","insets","useSafeAreaInsets","createElement","View","style","paddingTop","top","IOColors","accessibilityRole","H3","flexShrink","numberOfLines","color","undefined","IOStyles","row","Fragment","IconButton","HSpacer","size","exports","_default"],"sourceRoot":"../../../../src","sources":["components/layout/HeaderFirstLevel.tsx"],"mappings":"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"}

package/lib/commonjs/components/loadingSpinner/LoadingSpinner.js

@@ -15,6 +15,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * It will be removed in the future.
  */
 
+const strokeMap = {
+  24: 3,
+  48: 6,
+  76: 9
+};
 const startRotationAnimation = (durationMs, rotationDegree) => {
   _reactNative.Animated.loop(_reactNative.Animated.timing(rotationDegree, {
     toValue: 360,
@@ -26,21 +31,28 @@ const startRotationAnimation = (durationMs, rotationDegree) => {
 const LoadingSpinner = _ref => {
   let {
     color = "blueIO-500",
-    stroke = 3,
     size = 24,
-    durationMs = 750
+    durationMs = 750,
+    accessibilityHint,
+    accessibilityLabel,
+    testID = "LoadingSpinnerTestID"
   } = _ref;
   const rotationDegree = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const stroke = strokeMap[size];
   (0, _react.useEffect)(() => {
     startRotationAnimation(durationMs, rotationDegree);
   }, [durationMs, rotationDegree]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: {
       width: size,
       height: size
     },
+    accessible: true,
     accessibilityRole: "progressbar",
-    testID: "LoadingSpinnerTestID"
+    accessibilityHint: accessibilityHint,
+    accessibilityLabel: accessibilityLabel,
+    importantForAccessibility: "no-hide-descendants",
+    testID: testID
   }, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
     testID: "LoadingSpinnerAnimatedTestID",
     style: {
@@ -88,7 +100,7 @@ const LoadingSpinner = _ref => {
     stroke: _core.IOColors[color],
     strokeLinecap: "round",
     d: `M ${stroke / 2} ${size / 2} A ${size / 2 - stroke / 2} ${size / 2 - stroke / 2} 0 0 1 ${stroke / 2} ${size / 2 - stroke / 4}`
-  }))))));
+  })))));
 };
 exports.LoadingSpinner = LoadingSpinner;
 //# sourceMappingURL=LoadingSpinner.js.map

package/lib/commonjs/components/loadingSpinner/LoadingSpinner.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeSvg","_core","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","startRotationAnimation","durationMs","rotationDegree","Animated","loop","timing","toValue","duration","easing","Easing","linear","useNativeDriver","start","LoadingSpinner","_ref","color","stroke","size","useRef","Value","current","useEffect","createElement","Fragment","View","style","width","height","accessibilityRole","testID","transform","rotateZ","interpolate","inputRange","outputRange","viewBox","fill","Defs","LinearGradient","id","Stop","offset","stopOpacity","stopColor","IOColors","G","strokeWidth","Path","d","strokeLinecap","exports"],"sourceRoot":"../../../../src","sources":["components/loadingSpinner/LoadingSpinner.tsx"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeSvg","_core","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","strokeMap","startRotationAnimation","durationMs","rotationDegree","Animated","loop","timing","toValue","duration","easing","Easing","linear","useNativeDriver","start","LoadingSpinner","_ref","color","size","accessibilityHint","accessibilityLabel","testID","useRef","Value","current","stroke","useEffect","createElement","View","style","width","height","accessible","accessibilityRole","importantForAccessibility","transform","rotateZ","interpolate","inputRange","outputRange","viewBox","fill","Defs","LinearGradient","id","Stop","offset","stopOpacity","stopColor","IOColors","G","strokeWidth","Path","d","strokeLinecap","exports"],"sourceRoot":"../../../../src","sources":["components/loadingSpinner/LoadingSpinner.tsx"],"mappings":"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"}

package/lib/module/components/layout/HeaderFirstLevel.js

@@ -6,7 +6,8 @@ import { IOStyles, IOVisualCostants, IOColors } from "../../core";
 import { H3 } from "../typography";
 import { HSpacer } from "../spacer";
 import { IconButton } from "../buttons";
-const HEADER_BG_COLOR = "white";
+const HEADER_BG_COLOR_LIGHT = "white";
+const HEADER_BG_COLOR_DARK = "bluegrey";
 const styles = StyleSheet.create({
   headerInner: {
     paddingHorizontal: IOVisualCostants.appMarginDefault,
@@ -22,6 +23,7 @@ export const HeaderFirstLevel = _ref => {
     title,
     type,
     testID,
+    backgroundColor = "light",
     firstAction,
     secondAction,
     thirdAction
@@ -30,7 +32,7 @@ export const HeaderFirstLevel = _ref => {
   return /*#__PURE__*/React.createElement(View, {
     style: {
       paddingTop: insets.top,
-      backgroundColor: IOColors[HEADER_BG_COLOR]
+      backgroundColor: backgroundColor === "light" ? IOColors[HEADER_BG_COLOR_LIGHT] : IOColors[HEADER_BG_COLOR_DARK]
     },
     accessibilityRole: "header",
     testID: testID
@@ -40,21 +42,22 @@ export const HeaderFirstLevel = _ref => {
     style: {
       flexShrink: 1
     },
-    numberOfLines: 1
+    numberOfLines: 1,
+    color: backgroundColor === "dark" ? "white" : undefined
   }, title), /*#__PURE__*/React.createElement(View, {
     style: [IOStyles.row, {
       flexShrink: 0
     }]
   }, type === "threeActions" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconButton, _extends({}, thirdAction, {
-    color: "neutral"
+    color: backgroundColor === "dark" ? "contrast" : "neutral"
   })), /*#__PURE__*/React.createElement(HSpacer, {
     size: 16
   })), (type === "twoActions" || type === "threeActions") && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconButton, _extends({}, secondAction, {
-    color: "neutral"
+    color: backgroundColor === "dark" ? "contrast" : "neutral"
   })), /*#__PURE__*/React.createElement(HSpacer, {
     size: 16
   })), type !== "base" && /*#__PURE__*/React.createElement(IconButton, _extends({}, firstAction, {
-    color: "neutral"
+    color: backgroundColor === "dark" ? "contrast" : "neutral"
   })))));
 };
 export default HeaderFirstLevel;

package/lib/module/components/layout/HeaderFirstLevel.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","StyleSheet","useSafeAreaInsets","IOStyles","IOVisualCostants","IOColors","H3","HSpacer","IconButton","HEADER_BG_COLOR","styles","create","headerInner","paddingHorizontal","appMarginDefault","height","headerHeight","width","flexDirection","alignItems","justifyContent","HeaderFirstLevel","_ref","title","type","testID","firstAction","secondAction","thirdAction","insets","createElement","style","paddingTop","top","backgroundColor","accessibilityRole","flexShrink","numberOfLines","row","Fragment","_extends","color","size"],"sourceRoot":"../../../../src","sources":["components/layout/HeaderFirstLevel.tsx"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,IAAI,EAAEC,UAAU,QAAQ,cAAc;AAC/C,SAASC,iBAAiB,QAAQ,gCAAgC;AAElE,SAASC,QAAQ,EAAEC,gBAAgB,EAAEC,QAAQ,QAAQ,YAAY;AACjE,SAASC,EAAE,QAAQ,eAAe;AAClC,SAASC,OAAO,QAAQ,WAAW;AACnC,SAASC,UAAU,QAAQ,YAAY;AAqCvC,MAAMC,eAAyB,GAAG,OAAO;AAEzC,MAAMC,MAAM,GAAGT,UAAU,CAACU,MAAM,CAAC;EAC/BC,WAAW,EAAE;IACXC,iBAAiB,EAAET,gBAAgB,CAACU,gBAAgB;IACpDC,MAAM,EAAEX,gBAAgB,CAACY,YAAY;IACrCC,KAAK,EAAE,MAAM;IACbC,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB;AACF,CAAC,CAAC;AAEF,OAAO,MAAMC,gBAAgB,GAAGC,IAAA,IAOR;EAAA,IAPS;IAC/BC,KAAK;IACLC,IAAI;IACJC,MAAM;IACNC,WAAW;IACXC,YAAY;IACZC;EACgB,CAAC,GAAAN,IAAA;EACjB,MAAMO,MAAM,GAAG3B,iBAAiB,CAAC,CAAC;EAElC,oBACEH,KAAA,CAAA+B,aAAA,CAAC9B,IAAI;IACH+B,KAAK,EAAE;MACLC,UAAU,EAAEH,MAAM,CAACI,GAAG;MACtBC,eAAe,EAAE7B,QAAQ,CAACI,eAAe;IAC3C,CAAE;IACF0B,iBAAiB,EAAC,QAAQ;IAC1BV,MAAM,EAAEA;EAAO,gBAEf1B,KAAA,CAAA+B,aAAA,CAAC9B,IAAI;IAAC+B,KAAK,EAAErB,MAAM,CAACE;EAAY,gBAC9Bb,KAAA,CAAA+B,aAAA,CAACxB,EAAE;IAACyB,KAAK,EAAE;MAAEK,UAAU,EAAE;IAAE,CAAE;IAACC,aAAa,EAAE;EAAE,GAC5Cd,KACC,CAAC,eACLxB,KAAA,CAAA+B,aAAA,CAAC9B,IAAI;IAAC+B,KAAK,EAAE,CAAC5B,QAAQ,CAACmC,GAAG,EAAE;MAAEF,UAAU,EAAE;IAAE,CAAC;EAAE,GAC5CZ,IAAI,KAAK,cAAc,iBACtBzB,KAAA,CAAA+B,aAAA,CAAA/B,KAAA,CAAAwC,QAAA,qBACExC,KAAA,CAAA+B,aAAA,CAACtB,UAAU,EAAAgC,QAAA,KAAKZ,WAAW;IAAEa,KAAK,EAAC;EAAS,EAAE,CAAC,eAG/C1C,KAAA,CAAA+B,aAAA,CAACvB,OAAO;IAACmC,IAAI,EAAE;EAAG,CAAE,CACpB,CACH,EACA,CAAClB,IAAI,KAAK,YAAY,IAAIA,IAAI,KAAK,cAAc,kBAChDzB,KAAA,CAAA+B,aAAA,CAAA/B,KAAA,CAAAwC,QAAA,qBACExC,KAAA,CAAA+B,aAAA,CAACtB,UAAU,EAAAgC,QAAA,KAAKb,YAAY;IAAEc,KAAK,EAAC;EAAS,EAAE,CAAC,eAEhD1C,KAAA,CAAA+B,aAAA,CAACvB,OAAO;IAACmC,IAAI,EAAE;EAAG,CAAE,CACpB,CACH,EACAlB,IAAI,KAAK,MAAM,iBAAIzB,KAAA,CAAA+B,aAAA,CAACtB,UAAU,EAAAgC,QAAA,KAAKd,WAAW;IAAEe,KAAK,EAAC;EAAS,EAAE,CAC9D,CACF,CACF,CAAC;AAEX,CAAC;AAED,eAAepB,gBAAgB"}
+{"version":3,"names":["React","View","StyleSheet","useSafeAreaInsets","IOStyles","IOVisualCostants","IOColors","H3","HSpacer","IconButton","HEADER_BG_COLOR_LIGHT","HEADER_BG_COLOR_DARK","styles","create","headerInner","paddingHorizontal","appMarginDefault","height","headerHeight","width","flexDirection","alignItems","justifyContent","HeaderFirstLevel","_ref","title","type","testID","backgroundColor","firstAction","secondAction","thirdAction","insets","createElement","style","paddingTop","top","accessibilityRole","flexShrink","numberOfLines","color","undefined","row","Fragment","_extends","size"],"sourceRoot":"../../../../src","sources":["components/layout/HeaderFirstLevel.tsx"],"mappings":"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"}

package/lib/module/components/loadingSpinner/LoadingSpinner.js

@@ -8,6 +8,11 @@ import { IOColors } from "../../core";
  * It will be removed in the future.
  */
 
+const strokeMap = {
+  24: 3,
+  48: 6,
+  76: 9
+};
 const startRotationAnimation = (durationMs, rotationDegree) => {
   Animated.loop(Animated.timing(rotationDegree, {
     toValue: 360,
@@ -19,21 +24,28 @@ const startRotationAnimation = (durationMs, rotationDegree) => {
 export const LoadingSpinner = _ref => {
   let {
     color = "blueIO-500",
-    stroke = 3,
     size = 24,
-    durationMs = 750
+    durationMs = 750,
+    accessibilityHint,
+    accessibilityLabel,
+    testID = "LoadingSpinnerTestID"
   } = _ref;
   const rotationDegree = useRef(new Animated.Value(0)).current;
+  const stroke = strokeMap[size];
   useEffect(() => {
     startRotationAnimation(durationMs, rotationDegree);
   }, [durationMs, rotationDegree]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+  return /*#__PURE__*/React.createElement(View, {
     style: {
       width: size,
       height: size
     },
+    accessible: true,
     accessibilityRole: "progressbar",
-    testID: "LoadingSpinnerTestID"
+    accessibilityHint: accessibilityHint,
+    accessibilityLabel: accessibilityLabel,
+    importantForAccessibility: "no-hide-descendants",
+    testID: testID
   }, /*#__PURE__*/React.createElement(Animated.View, {
     testID: "LoadingSpinnerAnimatedTestID",
     style: {
@@ -81,6 +93,6 @@ export const LoadingSpinner = _ref => {
     stroke: IOColors[color],
     strokeLinecap: "round",
     d: `M ${stroke / 2} ${size / 2} A ${size / 2 - stroke / 2} ${size / 2 - stroke / 2} 0 0 1 ${stroke / 2} ${size / 2 - stroke / 4}`
-  }))))));
+  })))));
 };
 //# sourceMappingURL=LoadingSpinner.js.map

package/lib/module/components/loadingSpinner/LoadingSpinner.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useRef","View","Animated","Easing","Svg","Defs","G","LinearGradient","Path","Stop","IOColors","startRotationAnimation","durationMs","rotationDegree","loop","timing","toValue","duration","easing","linear","useNativeDriver","start","LoadingSpinner","_ref","color","stroke","size","Value","current","createElement","Fragment","style","width","height","accessibilityRole","testID","transform","rotateZ","interpolate","inputRange","outputRange","viewBox","fill","id","offset","stopOpacity","stopColor","strokeWidth","d","strokeLinecap"],"sourceRoot":"../../../../src","sources":["components/loadingSpinner/LoadingSpinner.tsx"],"mappings":"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"}
+{"version":3,"names":["React","useEffect","useRef","View","Animated","Easing","Svg","Defs","G","LinearGradient","Path","Stop","IOColors","strokeMap","startRotationAnimation","durationMs","rotationDegree","loop","timing","toValue","duration","easing","linear","useNativeDriver","start","LoadingSpinner","_ref","color","size","accessibilityHint","accessibilityLabel","testID","Value","current","stroke","createElement","style","width","height","accessible","accessibilityRole","importantForAccessibility","transform","rotateZ","interpolate","inputRange","outputRange","viewBox","fill","id","offset","stopOpacity","stopColor","strokeWidth","d","strokeLinecap"],"sourceRoot":"../../../../src","sources":["components/loadingSpinner/LoadingSpinner.tsx"],"mappings":"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"}

package/lib/typescript/components/layout/HeaderFirstLevel.d.ts

@@ -3,6 +3,7 @@ import { WithTestID } from "../../utils/types";
 import { ActionProp } from "./common";
 type CommonProps = WithTestID<{
     title: string;
+    backgroundColor?: "light" | "dark";
 }>;
 interface Base extends CommonProps {
     type: "base";
@@ -29,6 +30,6 @@ interface ThreeActions extends CommonProps {
     thirdAction: ActionProp;
 }
 export type HeaderFirstLevel = Base | OneAction | TwoActions | ThreeActions;
-export declare const HeaderFirstLevel: ({ title, type, testID, firstAction, secondAction, thirdAction }: HeaderFirstLevel) => React.JSX.Element;
+export declare const HeaderFirstLevel: ({ title, type, testID, backgroundColor, firstAction, secondAction, thirdAction }: HeaderFirstLevel) => React.JSX.Element;
 export default HeaderFirstLevel;
 //# sourceMappingURL=HeaderFirstLevel.d.ts.map

package/lib/typescript/components/layout/HeaderFirstLevel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderFirstLevel.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/HeaderFirstLevel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAK/C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,KAAK,WAAW,GAAG,UAAU,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAEH,UAAU,IAAK,SAAQ,WAAW;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB;AAED,UAAU,SAAU,SAAQ,WAAW;IACrC,IAAI,EAAE,cAAc,CAAC;IACrB,WAAW,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB;AAED,UAAU,UAAW,SAAQ,WAAW;IACtC,IAAI,EAAE,YAAY,CAAC;IACnB,WAAW,EAAE,UAAU,CAAC;IACxB,YAAY,EAAE,UAAU,CAAC;IACzB,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB;AAED,UAAU,YAAa,SAAQ,WAAW;IACxC,IAAI,EAAE,cAAc,CAAC;IACrB,WAAW,EAAE,UAAU,CAAC;IACxB,YAAY,EAAE,UAAU,CAAC;IACzB,WAAW,EAAE,UAAU,CAAC;CACzB;AAED,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,SAAS,GAAG,UAAU,GAAG,YAAY,CAAC;AAe5E,eAAO,MAAM,gBAAgB,oEAO1B,gBAAgB,sBAqClB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"HeaderFirstLevel.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/HeaderFirstLevel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAK/C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,KAAK,WAAW,GAAG,UAAU,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IAEd,eAAe,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CACpC,CAAC,CAAC;AAEH,UAAU,IAAK,SAAQ,WAAW;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB;AAED,UAAU,SAAU,SAAQ,WAAW;IACrC,IAAI,EAAE,cAAc,CAAC;IACrB,WAAW,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB;AAED,UAAU,UAAW,SAAQ,WAAW;IACtC,IAAI,EAAE,YAAY,CAAC;IACnB,WAAW,EAAE,UAAU,CAAC;IACxB,YAAY,EAAE,UAAU,CAAC;IACzB,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB;AAED,UAAU,YAAa,SAAQ,WAAW;IACxC,IAAI,EAAE,cAAc,CAAC;IACrB,WAAW,EAAE,UAAU,CAAC;IACxB,YAAY,EAAE,UAAU,CAAC;IACzB,WAAW,EAAE,UAAU,CAAC;CACzB;AAED,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,SAAS,GAAG,UAAU,GAAG,YAAY,CAAC;AAgB5E,eAAO,MAAM,gBAAgB,qFAQ1B,gBAAgB,sBAuDlB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/typescript/components/loadingSpinner/LoadingSpinner.d.ts

@@ -1,17 +1,17 @@
 import React from "react";
 import { WithTestID } from "../../utils/types";
 import { IOColors } from "../../core";
-type Props = WithTestID<{
+export type LoadingSpinner = WithTestID<{
     color?: IOColors;
-    stroke?: number;
     size?: IOLoadingSpinnerSizeScale;
     durationMs?: number;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
 }>;
 /**
  * Size scale, 76 is kept for backward compatibility with the old design system but 48 is enough for the new one.
  * It will be removed in the future.
  */
 export type IOLoadingSpinnerSizeScale = 24 | 48 | 76;
-export declare const LoadingSpinner: ({ color, stroke, size, durationMs }: Props) => React.ReactElement;
-export {};
+export declare const LoadingSpinner: ({ color, size, durationMs, accessibilityHint, accessibilityLabel, testID }: LoadingSpinner) => React.ReactElement;
 //# sourceMappingURL=LoadingSpinner.d.ts.map

package/lib/typescript/components/loadingSpinner/LoadingSpinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingSpinner.d.ts","sourceRoot":"","sources":["../../../../src/components/loadingSpinner/LoadingSpinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAGjD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,KAAK,KAAK,GAAG,UAAU,CAAC;IACtB,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,yBAAyB,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC,CAAC;AAEH;;;GAGG;AACH,MAAM,MAAM,yBAAyB,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAgBrD,eAAO,MAAM,cAAc,wCAKxB,KAAK,KAAG,MAAM,YAkFhB,CAAC"}
+{"version":3,"file":"LoadingSpinner.d.ts","sourceRoot":"","sources":["../../../../src/components/loadingSpinner/LoadingSpinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAGjD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,MAAM,cAAc,GAAG,UAAU,CAAC;IACtC,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,IAAI,CAAC,EAAE,yBAAyB,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC,CAAC;AAEH;;;GAGG;AACH,MAAM,MAAM,yBAAyB,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAsBrD,eAAO,MAAM,cAAc,+EAOxB,cAAc,KAAG,MAAM,YA6EzB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "1.13.0",
+  "version": "1.13.1",
   "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/layout/HeaderFirstLevel.tsx

@@ -10,6 +10,8 @@ import { ActionProp } from "./common";
 
 type CommonProps = WithTestID<{
   title: string;
+  // This Prop will be removed once all the screens on the first level routing will be refactored
+  backgroundColor?: "light" | "dark";
 }>;
 
 interface Base extends CommonProps {
@@ -42,7 +44,8 @@ interface ThreeActions extends CommonProps {
 
 export type HeaderFirstLevel = Base | OneAction | TwoActions | ThreeActions;
 
-const HEADER_BG_COLOR: IOColors = "white";
+const HEADER_BG_COLOR_LIGHT: IOColors = "white";
+const HEADER_BG_COLOR_DARK: IOColors = "bluegrey";
 
 const styles = StyleSheet.create({
   headerInner: {
@@ -59,6 +62,7 @@ export const HeaderFirstLevel = ({
   title,
   type,
   testID,
+  backgroundColor = "light",
   firstAction,
   secondAction,
   thirdAction
@@ -69,19 +73,29 @@ export const HeaderFirstLevel = ({
     <View
       style={{
         paddingTop: insets.top,
-        backgroundColor: IOColors[HEADER_BG_COLOR]
+        backgroundColor:
+          backgroundColor === "light"
+            ? IOColors[HEADER_BG_COLOR_LIGHT]
+            : IOColors[HEADER_BG_COLOR_DARK]
       }}
       accessibilityRole="header"
       testID={testID}
     >
       <View style={styles.headerInner}>
-        <H3 style={{ flexShrink: 1 }} numberOfLines={1}>
+        <H3
+          style={{ flexShrink: 1 }}
+          numberOfLines={1}
+          color={backgroundColor === "dark" ? "white" : undefined}
+        >
           {title}
         </H3>
         <View style={[IOStyles.row, { flexShrink: 0 }]}>
           {type === "threeActions" && (
             <>
-              <IconButton {...thirdAction} color="neutral" />
+              <IconButton
+                {...thirdAction}
+                color={backgroundColor === "dark" ? "contrast" : "neutral"}
+              />
               {/* Ideally, with the "gap" flex property,
               we can get rid of these ugly constructs */}
               <HSpacer size={16} />
@@ -89,12 +103,20 @@ export const HeaderFirstLevel = ({
           )}
           {(type === "twoActions" || type === "threeActions") && (
             <>
-              <IconButton {...secondAction} color="neutral" />
+              <IconButton
+                {...secondAction}
+                color={backgroundColor === "dark" ? "contrast" : "neutral"}
+              />
               {/* Same as above */}
               <HSpacer size={16} />
             </>
           )}
-          {type !== "base" && <IconButton {...firstAction} color="neutral" />}
+          {type !== "base" && (
+            <IconButton
+              {...firstAction}
+              color={backgroundColor === "dark" ? "contrast" : "neutral"}
+            />
+          )}
         </View>
       </View>
     </View>

package/src/components/loadingSpinner/LoadingSpinner.tsx

@@ -4,11 +4,12 @@ import Svg, { Defs, G, LinearGradient, Path, Stop } from "react-native-svg";
 import { WithTestID } from "../../utils/types";
 import { IOColors } from "../../core";
 
-type Props = WithTestID<{
+export type LoadingSpinner = WithTestID<{
   color?: IOColors;
-  stroke?: number;
   size?: IOLoadingSpinnerSizeScale;
   durationMs?: number;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
 }>;
 
 /**
@@ -17,6 +18,12 @@ type Props = WithTestID<{
  */
 export type IOLoadingSpinnerSizeScale = 24 | 48 | 76;
 
+const strokeMap: Record<NonNullable<LoadingSpinner["size"]>, number> = {
+  24: 3,
+  48: 6,
+  76: 9
+};
+
 const startRotationAnimation = (
   durationMs: number,
   rotationDegree: Animated.Value
@@ -33,89 +40,86 @@ const startRotationAnimation = (
 
 export const LoadingSpinner = ({
   color = "blueIO-500",
-  stroke = 3,
   size = 24,
-  durationMs = 750
-}: Props): React.ReactElement => {
+  durationMs = 750,
+  accessibilityHint,
+  accessibilityLabel,
+  testID = "LoadingSpinnerTestID"
+}: LoadingSpinner): React.ReactElement => {
   const rotationDegree = useRef(new Animated.Value(0)).current;
+  const stroke: number = strokeMap[size];
 
   useEffect(() => {
     startRotationAnimation(durationMs, rotationDegree);
   }, [durationMs, rotationDegree]);
 
   return (
-    <>
-      <View
-        style={{ width: size, height: size }}
-        accessibilityRole="progressbar"
-        testID={"LoadingSpinnerTestID"}
+    <View
+      style={{ width: size, height: size }}
+      accessible={true}
+      accessibilityRole="progressbar"
+      accessibilityHint={accessibilityHint}
+      accessibilityLabel={accessibilityLabel}
+      importantForAccessibility={"no-hide-descendants"}
+      testID={testID}
+    >
+      <Animated.View
+        testID={"LoadingSpinnerAnimatedTestID"}
+        style={{
+          transform: [
+            {
+              rotateZ: rotationDegree.interpolate({
+                inputRange: [0, 360],
+                outputRange: ["0deg", "360deg"]
+              })
+            }
+          ]
+        }}
       >
-        <Animated.View
-          testID={"LoadingSpinnerAnimatedTestID"}
-          style={{
-            transform: [
-              {
-                rotateZ: rotationDegree.interpolate({
-                  inputRange: [0, 360],
-                  outputRange: ["0deg", "360deg"]
-                })
-              }
-            ]
-          }}
-        >
-          {/* Thanks to Ben Ilegbodu for the article on how to
+        {/* Thanks to Ben Ilegbodu for the article on how to
           create a a SVG gradient loading spinner. Below is
-          a parameterized version of his  version of his code.
+          a parameterized version of his code.
           Source: https://www.benmvp.com/blog/how-to-create-circle-svg-gradient-loading-spinner/ */}
-          <Svg
-            width={size}
-            height={size}
-            viewBox={`0 0 ${size} ${size}`}
-            fill="none"
-          >
-            <Defs>
-              <LinearGradient id="spinner-secondHalf">
-                <Stop offset="0%" stopOpacity="0" stopColor={IOColors[color]} />
-                <Stop
-                  offset="100%"
-                  stopOpacity="1"
-                  stopColor={IOColors[color]}
-                />
-              </LinearGradient>
-              <LinearGradient id="spinner-firstHalf">
-                <Stop offset="0%" stopOpacity="1" stopColor={IOColors[color]} />
-                <Stop
-                  offset="100%"
-                  stopOpacity="1"
-                  stopColor={IOColors[color]}
-                />
-              </LinearGradient>
-            </Defs>
+        <Svg
+          width={size}
+          height={size}
+          viewBox={`0 0 ${size} ${size}`}
+          fill="none"
+        >
+          <Defs>
+            <LinearGradient id="spinner-secondHalf">
+              <Stop offset="0%" stopOpacity="0" stopColor={IOColors[color]} />
+              <Stop offset="100%" stopOpacity="1" stopColor={IOColors[color]} />
+            </LinearGradient>
+            <LinearGradient id="spinner-firstHalf">
+              <Stop offset="0%" stopOpacity="1" stopColor={IOColors[color]} />
+              <Stop offset="100%" stopOpacity="1" stopColor={IOColors[color]} />
+            </LinearGradient>
+          </Defs>
 
-            <G strokeWidth={stroke}>
-              <Path
-                stroke="url(#spinner-secondHalf)"
-                d={`M ${stroke / 2} ${size / 2} A ${size / 2 - stroke / 2} ${
-                  size / 2 - stroke / 2
-                } 0 0 1 ${size - stroke / 2} ${size / 2}`}
-              />
-              <Path
-                stroke="url(#spinner-firstHalf)"
-                d={`M ${size - stroke / 2} ${size / 2} A ${
-                  size / 2 - stroke / 2
-                } ${size / 2 - stroke / 2} 0 0 1 ${stroke / 2} ${size / 2}`}
-              />
-              <Path
-                stroke={IOColors[color]}
-                strokeLinecap="round"
-                d={`M ${stroke / 2} ${size / 2} A ${size / 2 - stroke / 2} ${
-                  size / 2 - stroke / 2
-                } 0 0 1 ${stroke / 2} ${size / 2 - stroke / 4}`}
-              />
-            </G>
-          </Svg>
-        </Animated.View>
-      </View>
-    </>
+          <G strokeWidth={stroke}>
+            <Path
+              stroke="url(#spinner-secondHalf)"
+              d={`M ${stroke / 2} ${size / 2} A ${size / 2 - stroke / 2} ${
+                size / 2 - stroke / 2
+              } 0 0 1 ${size - stroke / 2} ${size / 2}`}
+            />
+            <Path
+              stroke="url(#spinner-firstHalf)"
+              d={`M ${size - stroke / 2} ${size / 2} A ${
+                size / 2 - stroke / 2
+              } ${size / 2 - stroke / 2} 0 0 1 ${stroke / 2} ${size / 2}`}
+            />
+            <Path
+              stroke={IOColors[color]}
+              strokeLinecap="round"
+              d={`M ${stroke / 2} ${size / 2} A ${size / 2 - stroke / 2} ${
+                size / 2 - stroke / 2
+              } 0 0 1 ${stroke / 2} ${size / 2 - stroke / 4}`}
+            />
+          </G>
+        </Svg>
+      </Animated.View>
+    </View>
   );
 };