@pagopa/io-app-design-system 1.0.0-9 → 1.1.1

package/src/components/typography/__test__/__snapshots__/typography.test.tsx.snap

@@ -130,30 +130,31 @@ exports[`Test Typography Components H2 Snapshot 1`] = `
 
 exports[`Test Typography Components H3 Snapshot 1`] = `
 <Text
-  color="bluegreyDark"
-  font="TitilliumWeb"
+  color="black"
+  defaultColor="black"
+  defaultWeight="Regular"
+  font="ReadexPro"
   fontStyle={
     {
-      "fontSize": 18,
-      "lineHeight": 22,
+      "fontSize": 22,
+      "lineHeight": 33,
     }
   }
   style={
     [
       {
-        "fontSize": 18,
-        "lineHeight": 22,
+        "fontSize": 22,
+        "lineHeight": 33,
       },
       {
-        "color": "#17324D",
-        "fontFamily": "Titillium Web",
+        "color": "#0E0F13",
+        "fontFamily": "Readex Pro",
         "fontStyle": "normal",
-        "fontWeight": "600",
+        "fontWeight": "400",
       },
     ]
   }
-  weight="SemiBold"
-  weightColorFactory={[Function]}
+  weight="Regular"
 >
   Text
 </Text>
@@ -162,29 +163,30 @@ exports[`Test Typography Components H3 Snapshot 1`] = `
 exports[`Test Typography Components H3 Snapshot 2`] = `
 <Text
   color="bluegreyLight"
-  font="TitilliumWeb"
+  defaultColor="black"
+  defaultWeight="Regular"
+  font="ReadexPro"
   fontStyle={
     {
-      "fontSize": 18,
-      "lineHeight": 22,
+      "fontSize": 22,
+      "lineHeight": 33,
     }
   }
   style={
     [
       {
-        "fontSize": 18,
-        "lineHeight": 22,
+        "fontSize": 22,
+        "lineHeight": 33,
       },
       {
         "color": "#CCD4DC",
-        "fontFamily": "Titillium Web",
+        "fontFamily": "Readex Pro",
         "fontStyle": "normal",
-        "fontWeight": "600",
+        "fontWeight": "400",
       },
     ]
   }
-  weight="SemiBold"
-  weightColorFactory={[Function]}
+  weight="Regular"
 >
   Text
 </Text>
@@ -193,29 +195,30 @@ exports[`Test Typography Components H3 Snapshot 2`] = `
 exports[`Test Typography Components H3 Snapshot 3`] = `
 <Text
   color="white"
-  font="TitilliumWeb"
+  defaultColor="black"
+  defaultWeight="Regular"
+  font="ReadexPro"
   fontStyle={
     {
-      "fontSize": 18,
-      "lineHeight": 22,
+      "fontSize": 22,
+      "lineHeight": 33,
     }
   }
   style={
     [
       {
-        "fontSize": 18,
-        "lineHeight": 22,
+        "fontSize": 22,
+        "lineHeight": 33,
       },
       {
         "color": "#FFFFFF",
-        "fontFamily": "Titillium Web",
+        "fontFamily": "Readex Pro",
         "fontStyle": "normal",
-        "fontWeight": "600",
+        "fontWeight": "400",
       },
     ]
   }
-  weight="SemiBold"
-  weightColorFactory={[Function]}
+  weight="Regular"
 >
   Text
 </Text>
@@ -224,29 +227,30 @@ exports[`Test Typography Components H3 Snapshot 3`] = `
 exports[`Test Typography Components H3 Snapshot 4`] = `
 <Text
   color="white"
-  font="TitilliumWeb"
+  defaultColor="black"
+  defaultWeight="Regular"
+  font="ReadexPro"
   fontStyle={
     {
-      "fontSize": 18,
-      "lineHeight": 22,
+      "fontSize": 22,
+      "lineHeight": 33,
     }
   }
   style={
     [
       {
-        "fontSize": 18,
-        "lineHeight": 22,
+        "fontSize": 22,
+        "lineHeight": 33,
       },
       {
         "color": "#FFFFFF",
-        "fontFamily": "Titillium Web",
+        "fontFamily": "Readex Pro",
         "fontStyle": "normal",
         "fontWeight": "700",
       },
     ]
   }
   weight="Bold"
-  weightColorFactory={[Function]}
 >
   Text
 </Text>
@@ -254,30 +258,31 @@ exports[`Test Typography Components H3 Snapshot 4`] = `
 
 exports[`Test Typography Components H3 Snapshot 5`] = `
 <Text
-  color="white"
-  font="TitilliumWeb"
+  color="black"
+  defaultColor="black"
+  defaultWeight="Regular"
+  font="ReadexPro"
   fontStyle={
     {
-      "fontSize": 18,
-      "lineHeight": 22,
+      "fontSize": 22,
+      "lineHeight": 33,
     }
   }
   style={
     [
       {
-        "fontSize": 18,
-        "lineHeight": 22,
+        "fontSize": 22,
+        "lineHeight": 33,
       },
       {
-        "color": "#FFFFFF",
-        "fontFamily": "Titillium Web",
+        "color": "#0E0F13",
+        "fontFamily": "Readex Pro",
         "fontStyle": "normal",
         "fontWeight": "700",
       },
     ]
   }
   weight="Bold"
-  weightColorFactory={[Function]}
 >
   Text
 </Text>

package/src/core/IOColors.ts

@@ -404,8 +404,8 @@ Return the color value with RGBA format (RGB + Alpha transparency), starting fro
 @param opacity Opacity value that range from 0 to 1. Default value = 1.
  */
 /* Taken from this Gist: https://gist.github.com/danieliser/b4b24c9f772066bcf0a6 */
-export const hexToRgba = (hexCode: string, opacity: number = 1) => {
-  const hex = hexCode.replace("#", "");
+export const hexToRgba = (hexCode: ColorValue, opacity: number = 1) => {
+  const hex = hexCode.toString().replace("#", "");
 
   const r = parseInt(hex.substring(0, 2), 16);
   const g = parseInt(hex.substring(2, 4), 16);

package/src/core/IOSpacing.ts

@@ -5,7 +5,7 @@ should use a value defined in the following scale.
 */
 
 export const IOSpacingScale = [
-  4, 6, 8, 12, 16, 20, 24, 28, 32, 40, 48, 56, 64, 72
+  4, 6, 8, 12, 16, 20, 24, 28, 32, 40, 48, 56, 64, 72, 80
 ] as const;
 
 export type IOSpacingScale = (typeof IOSpacingScale)[number];
@@ -45,4 +45,4 @@ export type IOListItemIDPSpacing = Extract<IOSpacingScale, 8 | 16 | 24>;
 export const IOListItemIDPHSpacing: IOListItemIDPSpacing = 16 as const;
 export const IOListItemIDPVSpacing: IOListItemIDPSpacing = 16 as const;
 export const IOListItemIDPSavedVSpacing: IOListItemIDPSpacing = 24 as const;
-export const IOListItemLogoMargin: IOListItemIDPSpacing = 8 as const;
+export const IOListItemLogoMargin: IOListItemIDPSpacing = 8 as const;

package/src/core/IOStyles.ts

@@ -9,6 +9,8 @@ import { IOAppMargin, IOSpacer, IOSpacingScale } from "./IOSpacing";
 
 interface IOVisualCostants {
   appMarginDefault: IOAppMargin;
+  // Header
+  headerHeight: number;
   // Dimensions
   avatarSizeSmall: number;
   avatarSizeMedium: number;
@@ -16,6 +18,7 @@ interface IOVisualCostants {
 
 export const IOVisualCostants: IOVisualCostants = {
   appMarginDefault: 24,
+  headerHeight: 56,
   avatarSizeSmall: 44,
   avatarSizeMedium: 66
 };
@@ -88,6 +91,8 @@ const btnSizeLarge = 56;
 // NEW Design System
 const btnBorderRadius = 8;
 const btnSizeDefault = 48;
+export const buttonSolidHeight: number = btnSizeDefault;
+
 // TODO: Replace the number type with the new IOIconSizeScale
 const iconBtnSizeSmall: number = 24;
 
@@ -217,6 +222,7 @@ interface IOListItemVisualParams {
   paddingVertical: IOSpacingScale;
   paddingHorizontal: IOAppMargin;
   iconMargin: IOSpacingScale;
+  actionMargin: IOSpacingScale;
   iconSize: IOIconSizeScale;
   chevronSize: IOIconSizeScale;
 }
@@ -225,6 +231,7 @@ export const IOListItemVisualParams: IOListItemVisualParams = {
   paddingVertical: 12,
   paddingHorizontal: IOVisualCostants.appMarginDefault,
   iconMargin: 16,
+  actionMargin: 16,
   iconSize: 24,
   chevronSize: 24
 };
@@ -298,6 +305,7 @@ interface IOSelectionListItemVisualParams {
   paddingVertical: IOSpacingScale;
   paddingHorizontal: IOAppMargin;
   iconMargin: IOSpacingScale;
+  actionMargin: IOSpacer;
   iconSize: IOIconSizeScale;
   descriptionMargin: IOSpacer;
 }
@@ -308,6 +316,7 @@ export const IOSelectionListItemVisualParams: IOSelectionListItemVisualParams =
     paddingHorizontal: IOVisualCostants.appMarginDefault,
     iconMargin: 8,
     iconSize: 24,
+    actionMargin: 16,
     descriptionMargin: 4
   };
 

package/src/index.tsx

@@ -1,3 +1,6 @@
-export * from "./core";
 export * from "./components";
+export * from "./core";
 export * from "./functions";
+export * from "./utils/fonts";
+export * from "./utils/types";
+

package/src/json-import.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Allow import of json files.
+ *
+ * Ex: import jsonFile from '../file.json`
+ *
+ * More @https://hackernoon.com/import-json-into-typescript-8d465beded79
+ */
+
+declare module "*.json" {
+    const value: any;
+    export default value;
+  }
+  

package/lib/commonjs/components/icons/svg/LegIconChevronLeft.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNativeSvg","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","LegIconChevronLeft","_ref","size","style","props","createElement","Svg","width","height","viewBox","Path","d","fill","_default","exports"],"sourceRoot":"../../../../../src","sources":["components/icons/svg/LegIconChevronLeft.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,eAAA,GAAAD,OAAA;AAA6C,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,SAAA,IAAAA,QAAA,GAAAC,MAAA,CAAAC,MAAA,GAAAD,MAAA,CAAAC,MAAA,CAAAC,IAAA,eAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,GAAAF,SAAA,CAAAD,CAAA,YAAAI,GAAA,IAAAD,MAAA,QAAAP,MAAA,CAAAS,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAJ,MAAA,EAAAC,GAAA,KAAAL,MAAA,CAAAK,GAAA,IAAAD,MAAA,CAAAC,GAAA,gBAAAL,MAAA,YAAAJ,QAAA,CAAAa,KAAA,OAAAP,SAAA;AAG7C,MAAMQ,kBAAkB,GAAGC,IAAA;EAAA,IAAC;IAAEC,IAAI;IAAEC,KAAK;IAAE,GAAGC;EAAoB,CAAC,GAAAH,IAAA;EAAA,oBACjEtB,MAAA,CAAAM,OAAA,CAAAoB,aAAA,CAACvB,eAAA,CAAAwB,GAAG,EAAApB,QAAA;IAACqB,KAAK,EAAEL,IAAK;IAACM,MAAM,EAAEN,IAAK;IAACO,OAAO,EAAC,WAAW;IAACN,KAAK,EAAEA;EAAM,GAAKC,KAAK,gBACzEzB,MAAA,CAAAM,OAAA,CAAAoB,aAAA,CAACvB,eAAA,CAAA4B,IAAI;IACHC,CAAC,EAAC,4NAA4N;IAC9NC,IAAI,EAAC;EAAc,CACpB,CACE,CAAC;AAAA,CACP;AAAC,IAAAC,QAAA,GAEab,kBAAkB;AAAAc,OAAA,CAAA7B,OAAA,GAAA4B,QAAA"}

package/lib/commonjs/components/icons/svg/LegIconSearch.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNativeSvg","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","LegIconSearch","_ref","size","style","props","createElement","Svg","width","height","viewBox","Path","fillRule","clipRule","d","fill","_default","exports"],"sourceRoot":"../../../../../src","sources":["components/icons/svg/LegIconSearch.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,eAAA,GAAAD,OAAA;AAA6C,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,SAAA,IAAAA,QAAA,GAAAC,MAAA,CAAAC,MAAA,GAAAD,MAAA,CAAAC,MAAA,CAAAC,IAAA,eAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,GAAAF,SAAA,CAAAD,CAAA,YAAAI,GAAA,IAAAD,MAAA,QAAAP,MAAA,CAAAS,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAJ,MAAA,EAAAC,GAAA,KAAAL,MAAA,CAAAK,GAAA,IAAAD,MAAA,CAAAC,GAAA,gBAAAL,MAAA,YAAAJ,QAAA,CAAAa,KAAA,OAAAP,SAAA;AAG7C,MAAMQ,aAAa,GAAGC,IAAA;EAAA,IAAC;IAAEC,IAAI;IAAEC,KAAK;IAAE,GAAGC;EAAoB,CAAC,GAAAH,IAAA;EAAA,oBAC5DtB,MAAA,CAAAM,OAAA,CAAAoB,aAAA,CAACvB,eAAA,CAAAwB,GAAG,EAAApB,QAAA;IAACqB,KAAK,EAAEL,IAAK;IAACM,MAAM,EAAEN,IAAK;IAACO,OAAO,EAAC,WAAW;IAACN,KAAK,EAAEA;EAAM,GAAKC,KAAK,gBACzEzB,MAAA,CAAAM,OAAA,CAAAoB,aAAA,CAACvB,eAAA,CAAA4B,IAAI;IACHC,QAAQ,EAAC,SAAS;IAClBC,QAAQ,EAAC,SAAS;IAClBC,CAAC,EAAC,iLAAiL;IACnLC,IAAI,EAAC;EAAc,CACpB,CAAC,eACFnC,MAAA,CAAAM,OAAA,CAAAoB,aAAA,CAACvB,eAAA,CAAA4B,IAAI;IACHC,QAAQ,EAAC,SAAS;IAClBC,QAAQ,EAAC,SAAS;IAClBC,CAAC,EAAC,iLAAiL;IACnLC,IAAI,EAAC;EAAc,CACpB,CACE,CAAC;AAAA,CACP;AAAC,IAAAC,QAAA,GAEaf,aAAa;AAAAgB,OAAA,CAAA/B,OAAA,GAAA8B,QAAA"}

package/lib/module/components/icons/svg/LegIconChevronLeft.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","Svg","Path","LegIconChevronLeft","_ref","size","style","props","createElement","_extends","width","height","viewBox","d","fill"],"sourceRoot":"../../../../../src","sources":["components/icons/svg/LegIconChevronLeft.tsx"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,GAAG,EAAEC,IAAI,QAAQ,kBAAkB;AAG5C,MAAMC,kBAAkB,GAAGC,IAAA;EAAA,IAAC;IAAEC,IAAI;IAAEC,KAAK;IAAE,GAAGC;EAAoB,CAAC,GAAAH,IAAA;EAAA,oBACjEJ,KAAA,CAAAQ,aAAA,CAACP,GAAG,EAAAQ,QAAA;IAACC,KAAK,EAAEL,IAAK;IAACM,MAAM,EAAEN,IAAK;IAACO,OAAO,EAAC,WAAW;IAACN,KAAK,EAAEA;EAAM,GAAKC,KAAK,gBACzEP,KAAA,CAAAQ,aAAA,CAACN,IAAI;IACHW,CAAC,EAAC,4NAA4N;IAC9NC,IAAI,EAAC;EAAc,CACpB,CACE,CAAC;AAAA,CACP;AAED,eAAeX,kBAAkB"}

package/lib/module/components/icons/svg/LegIconSearch.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","Svg","Path","LegIconSearch","_ref","size","style","props","createElement","_extends","width","height","viewBox","fillRule","clipRule","d","fill"],"sourceRoot":"../../../../../src","sources":["components/icons/svg/LegIconSearch.tsx"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,GAAG,EAAEC,IAAI,QAAQ,kBAAkB;AAG5C,MAAMC,aAAa,GAAGC,IAAA;EAAA,IAAC;IAAEC,IAAI;IAAEC,KAAK;IAAE,GAAGC;EAAoB,CAAC,GAAAH,IAAA;EAAA,oBAC5DJ,KAAA,CAAAQ,aAAA,CAACP,GAAG,EAAAQ,QAAA;IAACC,KAAK,EAAEL,IAAK;IAACM,MAAM,EAAEN,IAAK;IAACO,OAAO,EAAC,WAAW;IAACN,KAAK,EAAEA;EAAM,GAAKC,KAAK,gBACzEP,KAAA,CAAAQ,aAAA,CAACN,IAAI;IACHW,QAAQ,EAAC,SAAS;IAClBC,QAAQ,EAAC,SAAS;IAClBC,CAAC,EAAC,iLAAiL;IACnLC,IAAI,EAAC;EAAc,CACpB,CAAC,eACFhB,KAAA,CAAAQ,aAAA,CAACN,IAAI;IACHW,QAAQ,EAAC,SAAS;IAClBC,QAAQ,EAAC,SAAS;IAClBC,CAAC,EAAC,iLAAiL;IACnLC,IAAI,EAAC;EAAc,CACpB,CACE,CAAC;AAAA,CACP;AAED,eAAeb,aAAa"}

package/lib/typescript/components/icons/svg/IconCompleted.d.ts

@@ -1,5 +0,0 @@
-import React from "react";
-import { SVGIconProps } from "../Icon";
-declare const IconCompleted: ({ size, style, ...props }: SVGIconProps) => React.JSX.Element;
-export default IconCompleted;
-//# sourceMappingURL=IconCompleted.d.ts.map

package/lib/typescript/components/icons/svg/IconCompleted.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"IconCompleted.d.ts","sourceRoot":"","sources":["../../../../../src/components/icons/svg/IconCompleted.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,QAAA,MAAM,aAAa,8BAA+B,YAAY,sBAS7D,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/typescript/components/icons/svg/LegIconChevronLeft.d.ts

@@ -1,5 +0,0 @@
-import React from "react";
-import { SVGIconProps } from "../Icon";
-declare const LegIconChevronLeft: ({ size, style, ...props }: SVGIconProps) => React.JSX.Element;
-export default LegIconChevronLeft;
-//# sourceMappingURL=LegIconChevronLeft.d.ts.map

package/lib/typescript/components/icons/svg/LegIconChevronLeft.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LegIconChevronLeft.d.ts","sourceRoot":"","sources":["../../../../../src/components/icons/svg/LegIconChevronLeft.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,QAAA,MAAM,kBAAkB,8BAA+B,YAAY,sBAOlE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/lib/typescript/components/icons/svg/LegIconSearch.d.ts

@@ -1,5 +0,0 @@
-import React from "react";
-import { SVGIconProps } from "../Icon";
-declare const LegIconSearch: ({ size, style, ...props }: SVGIconProps) => React.JSX.Element;
-export default LegIconSearch;
-//# sourceMappingURL=LegIconSearch.d.ts.map

package/lib/typescript/components/icons/svg/LegIconSearch.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LegIconSearch.d.ts","sourceRoot":"","sources":["../../../../../src/components/icons/svg/LegIconSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,QAAA,MAAM,aAAa,8BAA+B,YAAY,sBAe7D,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/src/components/icons/svg/LegIconChevronLeft.tsx

@@ -1,14 +0,0 @@
-import React from "react";
-import { Svg, Path } from "react-native-svg";
-import { SVGIconProps } from "../Icon";
-
-const LegIconChevronLeft = ({ size, style, ...props }: SVGIconProps) => (
-  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
-    <Path
-      d="M9.675 4.293c-.401-.36-1.031-.388-1.467-.083l-.105.083-7.778 7a.928.928 0 0 0-.092 1.32l.092.094 7.778 7a1.2 1.2 0 0 0 1.572 0c.4-.36.43-.928.092-1.32l-.092-.094L2.683 12l6.992-6.293c.4-.36.43-.928.092-1.32l-.092-.094Z"
-      fill="currentColor"
-    />
-  </Svg>
-);
-
-export default LegIconChevronLeft;

package/src/components/icons/svg/LegIconSearch.tsx

@@ -1,22 +0,0 @@
-import React from "react";
-import { Svg, Path } from "react-native-svg";
-import { SVGIconProps } from "../Icon";
-
-const LegIconSearch = ({ size, style, ...props }: SVGIconProps) => (
-  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
-    <Path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M9.766 3.45a6.75 6.75 0 1 0 4.094 12.117l4.349 4.348.085.075a.9.9 0 0 0 1.188-1.347l-4.349-4.349A6.75 6.75 0 0 0 9.766 3.45Zm0 1.8a4.95 4.95 0 1 1 0 9.9 4.95 4.95 0 0 1 0-9.9Z"
-      fill="currentColor"
-    />
-    <Path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M9.766 3.45a6.75 6.75 0 1 0 4.094 12.117l4.349 4.348.085.075a.9.9 0 0 0 1.188-1.347l-4.349-4.349A6.75 6.75 0 0 0 9.766 3.45Zm0 1.8a4.95 4.95 0 1 1 0 9.9 4.95 4.95 0 0 1 0-9.9Z"
-      fill="currentColor"
-    />
-  </Svg>
-);
-
-export default LegIconSearch;