@pagopa/io-app-design-system 1.3.2 → 1.5.1

package/lib/typescript/stories/Link.stories.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import type { StoryObj } from "@storybook/react";
+declare const meta: {
+    title: string;
+    component: import("react").FunctionComponent<Omit<import("react-native").TextProps & import("react").RefAttributes<import("react-native").Text>, "style"> & import("../components").TypographyProps<"SemiBold" | "Bold", "white" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-450" | "grey-650" | "grey-700" | "grey-850" | "black" | "blueIO-850" | "blueIO-600" | "blueIO-500" | "blueIO-450" | "blueIO-200" | "blueIO-150" | "blueIO-100" | "blueIO-50" | "hanPurple-850" | "hanPurple-500" | "hanPurple-250" | "hanPurple-100" | "hanPurple-50" | "turquoise-850" | "turquoise-500" | "turquoise-450" | "turquoise-150" | "turquoise-100" | "turquoise-50" | "error-850" | "error-600" | "error-500" | "error-400" | "error-100" | "warning-850" | "warning-700" | "warning-500" | "warning-400" | "warning-100" | "success-850" | "success-700" | "success-500" | "success-400" | "success-100" | "info-850" | "info-700" | "info-500" | "info-400" | "info-100" | "cobalt" | "blueItalia-850" | "blueItalia-600" | "blueItalia-500" | "blueItalia-100" | "blueItalia-50" | "blue-600" | "blue-50" | "greyUltraLight" | "greyLight" | "bluegreyLight" | "grey" | "milderGray" | "bluegrey" | "bluegreyDark" | "noCieButton" | "blue" | "blueUltraLight" | "aqua" | "aquaUltraLight" | "antiqueFuchsia" | "yellow" | "orange" | "red" | "green" | "greenLight"> & {
+        style?: import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">> | import("react-native").RecursiveArray<import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">>>;
+    } & {
+        fontSize?: ("small" | "regular") | undefined;
+    }>;
+    parameters: {
+        layout: string;
+        actions: {
+            argTypesRegex: string;
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+//# sourceMappingURL=Link.stories.d.ts.map

package/lib/typescript/stories/Link.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Link.stories.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAMvD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;CAUmB,CAAC;AAE9B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC"}

package/lib/typescript/stories/Monospace.stories.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import type { StoryObj } from "@storybook/react";
+declare const meta: {
+    title: string;
+    component: import("react").FC<Omit<import("react-native").TextProps & import("react").RefAttributes<import("react-native").Text>, "style"> & import("../components").TypographyProps<"Regular" | "SemiBold" | "Bold", "bluegrey" | "bluegreyDark"> & {
+        style?: import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">> | import("react-native").RecursiveArray<import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">>>;
+    }>;
+    parameters: {
+        layout: string;
+        actions: {
+            argTypesRegex: string;
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+//# sourceMappingURL=Monospace.stories.d.ts.map

package/lib/typescript/stories/Monospace.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Monospace.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Monospace.stories.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAMvD,QAAA,MAAM,IAAI;;;;;;;;;;;;CAUwB,CAAC;AAEnC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC"}

package/lib/typescript/utils/accessibility.d.ts

@@ -0,0 +1,6 @@
+/**
+ * This function is used to get the text that will be read by the screen reader
+ * with the correct minus symbol pronunciation.
+ */
+export declare const getAccessibleAmountText: (amount?: string) => string | undefined;
+//# sourceMappingURL=accessibility.d.ts.map

package/lib/typescript/utils/accessibility.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accessibility.d.ts","sourceRoot":"","sources":["../../../src/utils/accessibility.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,eAAO,MAAM,uBAAuB,YAAa,MAAM,uBAQpD,CAAC"}

package/lib/typescript/utils/fonts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../../../src/utils/fonts.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,KAAK,CAAC;AAE9C,QAAA,MAAM,OAAO,mDAAoD,CAAC;AAClE,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpD,QAAA,MAAM,YAAY,uCAAwC,CAAC;AAC3D,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5D;;GAEG;AACH,QAAA,MAAM,KAAK;;;;CAaV,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,YAAY,EAAE,eAAe,CAK7D,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,KAAK,CAAC;AAC5C,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAElD;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,YAAY,EAAE,eAAe,CAKhE,CAAC;AAEF,oBAAY,SAAS;IACnB,QAAQ,WAAW;IACnB,QAAQ,WAAW;CACpB;AAED,KAAK,eAAe,GAAG;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,SACvB,UAAU,WACP,YAAY,aACX,OAAO,KAChB,MAKC,CAAC;AAEL;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,YACtB,YAAY,GAAG,SAAS,aACtB,OAAO,GAAG,SAAS,SACvB,UAAU,GAAG,SAAS,KAC3B,eAaC,CAAC"}
+{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../../../src/utils/fonts.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,KAAK,CAAC;AAE9C,QAAA,MAAM,OAAO,mDAAoD,CAAC;AAClE,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpD,QAAA,MAAM,YAAY,uCAAwC,CAAC;AAC3D,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5D;;GAEG;AACH,QAAA,MAAM,KAAK;;;;CAgBV,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,YAAY,EAAE,eAAe,CAK7D,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,KAAK,CAAC;AAC5C,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAElD;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,YAAY,EAAE,eAAe,CAKhE,CAAC;AAEF,oBAAY,SAAS;IACnB,QAAQ,WAAW;IACnB,QAAQ,WAAW;CACpB;AAED,KAAK,eAAe,GAAG;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,SACvB,UAAU,WACP,YAAY,aACX,OAAO,KAChB,MAMC,CAAC;AAEL;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,YACtB,YAAY,GAAG,SAAS,aACtB,OAAO,GAAG,SAAS,SACvB,UAAU,GAAG,SAAS,KAC3B,eAgBC,CAAC"}

package/lib/typescript/utils/object.d.ts

@@ -0,0 +1,5 @@
+import * as O from "fp-ts/Option";
+export declare const findFirstCaseInsensitive: <T>(obj: {
+    [key: string]: T;
+}) => (key: string) => O.Option<[string, T]>;
+//# sourceMappingURL=object.d.ts.map

package/lib/typescript/utils/object.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"object.d.ts","sourceRoot":"","sources":["../../../src/utils/object.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,CAAC,MAAM,cAAc,CAAC;AAGlC,eAAO,MAAM,wBAAwB;;YAE7B,MAAM,0BAKT,CAAC"}

package/lib/typescript/utils/textInput/index.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { TextInputBase } from "../../components/textInput/TextInputBase";
+import { InputType } from "../types";
+type InputProps = Pick<React.ComponentProps<typeof TextInputBase>, "textInputProps"> & {
+    valueFormat?: (value: string) => string;
+};
+export declare const getInputPropsByType: (type: InputType) => InputProps | undefined;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/utils/textInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/textInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,KAAK,UAAU,GAAG,IAAI,CACpB,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,EAC1C,gBAAgB,CACjB,GAAG;IACF,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,mBAAmB,SACxB,SAAS,KACd,UAAU,GAAG,SAef,CAAC"}

package/lib/typescript/utils/types.d.ts

@@ -25,5 +25,6 @@ type Without<T, U> = {
  * Ensure that the types T and U are mutually exclusive
  */
 export type XOR<T, U> = T | U extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U;
+export type InputType = "credit-card" | "default";
 export {};
 //# sourceMappingURL=types.d.ts.map

package/lib/typescript/utils/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/utils/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAE3D;;GAEG;AACH,MAAM,MAAM,MAAM,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEzC,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC;AAGvC,MAAM,MAAM,KAAK,GAAG;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,gBAAgB,GAAG,KAAK,CAAC;CACzC,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAE,CAAC;AAExD;;GAEG;AACH,KAAK,OAAO,CAAC,CAAC,EAAE,CAAC,IAAI;KAAG,CAAC,IAAI,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK;CAAE,CAAC;AAElE;;GAEG;AACH,MAAM,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,MAAM,GACxC,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GACzC,CAAC,GAAG,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/utils/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAE3D;;GAEG;AACH,MAAM,MAAM,MAAM,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEzC,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC;AAGvC,MAAM,MAAM,KAAK,GAAG;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,gBAAgB,GAAG,KAAK,CAAC;CACzC,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAE,CAAC;AAExD;;GAEG;AACH,KAAK,OAAO,CAAC,CAAC,EAAE,CAAC,IAAI;KAAG,CAAC,IAAI,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK;CAAE,CAAC;AAElE;;GAEG;AACH,MAAM,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,MAAM,GACxC,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GACzC,CAAC,GAAG,CAAC,CAAC;AAEV,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG,SAAS,CAAC"}

package/lib/typescript/utils/url.d.ts

@@ -0,0 +1,8 @@
+import { ImageURISource } from "react-native";
+/**
+ * type guard to check if a value is an ImageURISource
+ * @argument value the value to check, can be anything
+ * @returns boolean
+ */
+export declare const isImageUri: (value: unknown) => value is ImageURISource;
+//# sourceMappingURL=url.d.ts.map

package/lib/typescript/utils/url.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"url.d.ts","sourceRoot":"","sources":["../../../src/utils/url.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C;;;;GAIG;AACH,eAAO,MAAM,UAAU,UAAW,OAAO,4BACsB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "1.3.2",
+  "version": "1.5.1",
   "description": "test",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -34,7 +34,9 @@
     "prepack": "bob build",
     "release": "release-it",
     "example": "yarn --cwd example",
-    "bootstrap": "yarn example && yarn install"
+    "bootstrap": "yarn example && yarn install",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "keywords": [
     "react-native",
@@ -49,13 +51,25 @@
   },
   "homepage": "https://github.com/pagopa/io-app-design-system#readme",
   "devDependencies": {
+    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
     "@commitlint/config-conventional": "^17.0.2",
     "@evilmartians/lefthook": "^1.2.2",
     "@react-native-community/eslint-config": "^3.0.2",
     "@release-it/conventional-changelog": "^5.0.0",
+    "@storybook/addon-essentials": "^7.4.0",
+    "@storybook/addon-interactions": "^7.4.0",
+    "@storybook/addon-links": "^7.4.0",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/addon-react-native-web": "^0.0.21",
+    "@storybook/blocks": "^7.4.0",
+    "@storybook/react": "^7.4.0",
+    "@storybook/react-webpack5": "^7.4.0",
+    "@storybook/testing-library": "^0.2.0",
     "@types/jest": "^28.1.2",
     "@types/react": "~17.0.38",
     "@types/react-native": "0.70.0",
+    "babel-loader": "^9.1.3",
+    "babel-plugin-react-native-web": "^0.19.8",
     "commitlint": "^17.0.2",
     "del-cli": "^5.0.0",
     "eslint": "^8.4.1",
@@ -63,15 +77,21 @@
     "eslint-plugin-functional": "^5.0.8",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-storybook": "^0.6.13",
     "jest": "^29.5.0",
+    "metro-react-native-babel-preset": "^0.77.0",
     "pod-install": "^0.1.0",
     "prettier": "^2.0.5",
     "react": "18.2.0",
+    "react-dom": "^18.2.0",
     "react-native": "0.71.8",
     "react-native-builder-bob": "^0.20.0",
     "react-native-i18n": "^2.0.15",
+    "react-native-web": "^0.18.12",
+    "react-native-web-linear-gradient": "^1.1.2",
     "react-test-renderer": "^18.2.0",
     "release-it": "^15.0.0",
+    "storybook": "^7.4.0",
     "typescript": "^4.9.5"
   },
   "resolutions": {
@@ -80,12 +100,12 @@
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
+    "react-native-gesture-handler": "*",
     "react-native-haptic-feedback": "*",
     "react-native-linear-gradient": "*",
     "react-native-reanimated": "*",
-    "react-native-svg": "*",
     "react-native-safe-area-context": "*",
-    "react-native-gesture-handler": "*"
+    "react-native-svg": "*"
   },
   "engines": {
     "node": ">= 16.0.0"
@@ -149,6 +169,7 @@
     ]
   },
   "dependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@expo/vector-icons": "^13.0.0",
     "@pagopa/ts-commons": "^12.0.0",
     "@testing-library/jest-native": "^5.4.2",

package/src/components/accordion/AccordionItem.tsx

@@ -0,0 +1,165 @@
+import React, { useState } from "react";
+import {
+  Text,
+  View,
+  StyleSheet,
+  TouchableWithoutFeedback,
+  LayoutChangeEvent
+} from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  withSpring
+} from "react-native-reanimated";
+import LinearGradient from "react-native-linear-gradient";
+import { IOAccordionRadius, type IOSpacingScale } from "../../core";
+import { makeFontStyleObject } from "../../utils/fonts";
+import { IOColors, hexToRgba } from "../../core/IOColors";
+import { H6 } from "../typography";
+import { IOSpringValues } from "../../core/IOAnimations";
+import { Icon } from "../icons/Icon";
+
+export type AccordionItem = {
+  id: number;
+  title: string;
+  body: string | React.ReactNode;
+};
+
+type AccordionBody = {
+  children: React.ReactNode;
+  expanded: boolean;
+};
+
+const accordionBodySpacing: IOSpacingScale = 16;
+const accordionIconMargin: IOSpacingScale = 8;
+const accordionBorder: IOColors = "grey-200";
+const accordionBackground: IOColors = "white";
+
+/* The code below is a re-adaptation of Dima Portenko's code:
+https://github.com/dimaportenko/reanimated-collapsable-card-tutorial
+*/
+export const AccordionBody = ({ children, expanded }: AccordionBody) => {
+  const [height, setHeight] = useState(0);
+
+  const onLayout = (event: LayoutChangeEvent) => {
+    const { height: onLayoutHeight } = event.nativeEvent.layout;
+
+    if (onLayoutHeight > 0 && height !== onLayoutHeight) {
+      setHeight(onLayoutHeight);
+    }
+  };
+
+  const animatedHeightStyle = useAnimatedStyle(
+    () => ({
+      height: expanded
+        ? withSpring(height, IOSpringValues.accordion)
+        : withSpring(0, IOSpringValues.accordion)
+    }),
+    [expanded]
+  );
+
+  return (
+    <Animated.View
+      style={[animatedHeightStyle, styles.accordionCollapsableContainer]}
+    >
+      <View style={styles.accordionBodyContainer} onLayout={onLayout}>
+        {children}
+      </View>
+    </Animated.View>
+  );
+};
+
+export const AccordionItem = ({ title, body }: AccordionItem) => {
+  const [expanded, setExpanded] = useState(false);
+
+  const onItemPress = () => {
+    setExpanded(!expanded);
+  };
+
+  const animatedChevron = useAnimatedStyle(
+    () => ({
+      transform: [
+        {
+          rotate: expanded
+            ? withSpring(`180deg`, IOSpringValues.accordion)
+            : withSpring(`0deg`, IOSpringValues.accordion)
+        }
+      ]
+    }),
+    [expanded]
+  );
+
+  return (
+    <View style={styles.accordionWrapper}>
+      <TouchableWithoutFeedback
+        accessible={true}
+        accessibilityRole="button"
+        accessibilityState={{ expanded }}
+        onPress={onItemPress}
+      >
+        <View style={styles.textContainer}>
+          <View style={{ flexShrink: 1, marginRight: accordionIconMargin }}>
+            <H6 color="black">{title}</H6>
+          </View>
+          <Animated.View style={animatedChevron}>
+            <Icon name="chevronBottom" color="blueIO-500" />
+          </Animated.View>
+        </View>
+      </TouchableWithoutFeedback>
+
+      <AccordionBody expanded={expanded}>
+        {typeof body === "string" ? (
+          <Text style={styles.accordionBodyText}>{body}</Text>
+        ) : (
+          body
+        )}
+      </AccordionBody>
+      {/* This gradient adds a smooth end to the content. If it is missing,
+      the content will be cut sharply during the height transition. */}
+      <LinearGradient
+        style={{
+          height: accordionBodySpacing,
+          position: "absolute",
+          // Place at the bottom
+          bottom: 0,
+          // Avoid gradient overlaps with border radius
+          left: accordionBodySpacing,
+          right: accordionBodySpacing
+        }}
+        colors={[
+          hexToRgba(IOColors[accordionBackground], 0),
+          IOColors[accordionBackground]
+        ]}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  accordionWrapper: {
+    borderColor: IOColors[accordionBorder],
+    borderWidth: 1,
+    borderRadius: IOAccordionRadius,
+    backgroundColor: IOColors[accordionBackground]
+  },
+  accordionCollapsableContainer: {
+    overflow: "hidden"
+  },
+  accordionBodyContainer: {
+    position: "absolute",
+    padding: accordionBodySpacing,
+    paddingTop: 0
+  },
+  accordionBodyText: {
+    fontSize: 14,
+    lineHeight: 21,
+    color: IOColors["grey-700"],
+    ...makeFontStyleObject("Regular", undefined, "TitilliumWeb")
+  },
+  textContainer: {
+    padding: accordionBodySpacing,
+    flexGrow: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  }
+});

package/src/components/accordion/index.tsx

@@ -1,2 +1,2 @@
 export * from "./RawAccordion";
-export * from "./IOAccordion";
+export * from "./AccordionItem";

package/src/components/buttons/ButtonSolid.tsx

@@ -39,12 +39,28 @@ const styles = StyleSheet.create({
 });
 
 export type ButtonSolidProps = WithTestID<{
+  /**
+   * @default primary
+   */
   color?: ButtonSolidColor;
   label: string;
+  /**
+   * Renders a small variant of the button. This property applies to the legacy look only
+   * @default false
+   */
   small?: boolean;
+  /**
+   * @default false
+   */
   fullWidth?: boolean;
+  /**
+   * @default false
+   */
   disabled?: boolean;
   icon?: IOIcons;
+  /**
+   * @default start
+   */
   iconPosition?: "start" | "end";
   accessibilityLabel: string;
   accessibilityHint?: string;

package/src/components/common/LogoPaymentWithFallback.tsx

@@ -0,0 +1,60 @@
+import * as O from "fp-ts/lib/Option";
+import { pipe } from "fp-ts/lib/function";
+import * as React from "react";
+import { findFirstCaseInsensitive } from "../../utils/object";
+import { IOColors } from "../../core";
+import { IOIconSizeScale, Icon } from "../icons";
+import {
+  IOLogoPaymentExtType,
+  IOLogoPaymentType,
+  IOPaymentExtLogos,
+  IOPaymentLogos,
+  LogoPayment,
+  LogoPaymentExt
+} from "../logos";
+
+export type LogoPaymentWithFallback = {
+  brand?: string;
+  fallbackIconColor?: IOColors;
+  size?: IOIconSizeScale;
+  isExtended?: boolean;
+};
+export type LogoPaymentExtOrDefaultIconProps = {
+  cardIcon?: IOLogoPaymentExtType;
+  fallbackIconColor?: IOColors;
+  size?: IOIconSizeScale;
+};
+/**
+ * This component renders either
+ * - a LogoPayment/LogoPaymentExt component
+ * - a default credit card icon
+ * @param cardIcon: IOLogoPaymentType icon
+ * @param size: the size of the icon (standard is 24/48)
+ * @param fallbackIconColor: default icon color (standard is grey-700)
+ * @param isExtended: if true, renders a LogoPaymentExt component
+ * @returns a LogoPayment/LogopaymentExt component if the cardIcon is supported, a default credit card icon otherwise
+ */
+export const LogoPaymentWithFallback = ({
+  brand,
+  fallbackIconColor = "grey-700",
+  isExtended = false,
+  size = isExtended ? 48 : 24
+}: LogoPaymentWithFallback) => {
+  const logos = isExtended ? IOPaymentExtLogos : IOPaymentLogos;
+
+  return pipe(
+    brand,
+    O.fromNullable,
+    O.chain(findFirstCaseInsensitive(logos)),
+    O.map(([brand]) => brand),
+    O.fold(
+      () => <Icon name="creditCard" size={size} color={fallbackIconColor} />,
+      brand =>
+        isExtended ? (
+          <LogoPaymentExt name={brand as IOLogoPaymentExtType} size={size} />
+        ) : (
+          <LogoPayment name={brand as IOLogoPaymentType} size={size} />
+        )
+    )
+  );
+};

package/src/components/index.tsx

@@ -17,3 +17,5 @@ export * from "./switch";
 export * from "./tag";
 export * from "./tabs";
 export * from "./typography";
+export * from "./textInput";
+export * from "./layout";

package/src/components/layout/BlockButtons.tsx

@@ -0,0 +1,142 @@
+import * as React from "react";
+import { View, StyleSheet } from "react-native";
+import { HSpacer } from "../spacer/Spacer";
+import { ButtonOutline, ButtonSolid, ButtonSolidProps } from "../buttons";
+import { IOStyles } from "../../core";
+
+const styles = StyleSheet.create({
+  button: {
+    alignContent: "center",
+    justifyContent: "center",
+    flex: 1
+  },
+  buttonTwoThirds: {
+    alignContent: "center",
+    flex: 2
+  }
+});
+
+type CommonProps = Readonly<{
+  primary: BlockButtonProps;
+  accessible?: boolean;
+}>;
+
+export type BlockButtonProps = {
+  type: "Solid" | "Outline";
+  buttonProps: ButtonSolidProps;
+};
+
+/**
+ * | single button |
+ */
+export interface SingleButton extends CommonProps {
+  type: "SingleButton";
+}
+
+/**
+ * | left | right |
+ */
+export interface TwoButtonsInlineHalf extends CommonProps {
+  type: "TwoButtonsInlineHalf";
+  secondary: BlockButtonProps;
+}
+
+/**
+ * | left  |       right        |
+ */
+interface TwoButtonsInlineThird extends CommonProps {
+  type: "TwoButtonsInlineThird";
+  secondary: BlockButtonProps;
+}
+
+/**
+ * |      left       |  right  |
+ */
+interface TwoButtonsInlineThirdInverted extends CommonProps {
+  type: "TwoButtonsInlineThirdInverted";
+  secondary: BlockButtonProps;
+}
+
+/**
+ * |  left |  mid  | right |
+ */
+interface ThreeButtonsInLine extends CommonProps {
+  type: "ThreeButtonsInLine";
+  secondary: BlockButtonProps;
+  third: BlockButtonProps;
+}
+
+type Props =
+  | SingleButton
+  | TwoButtonsInlineHalf
+  | TwoButtonsInlineThird
+  | TwoButtonsInlineThirdInverted
+  | ThreeButtonsInLine;
+
+export type BlockButtonsProps = Props;
+
+/**
+ * Implements a component that show buttons on a line on 1, 2 or 3 buttons
+ */
+export const BlockButtons = (props: Props) => {
+  const renderRightButton = () => {
+    if (props.type === "SingleButton") {
+      return null;
+    }
+
+    const secondaryButtonStyle =
+      props.type === "TwoButtonsInlineThird"
+        ? styles.buttonTwoThirds
+        : styles.button;
+
+    return (
+      <React.Fragment>
+        <HSpacer size={16} />
+        {renderButton(props.secondary, secondaryButtonStyle)}
+      </React.Fragment>
+    );
+  };
+
+  const renderMidButton = () => {
+    if (props.type !== "ThreeButtonsInLine") {
+      return null;
+    }
+
+    return (
+      <React.Fragment>
+        <HSpacer size={16} />
+        {renderButton(props.third, styles.button)}
+      </React.Fragment>
+    );
+  };
+
+  const renderLeftButton = () => {
+    const primaryButtonStyle =
+      props.type === "TwoButtonsInlineThirdInverted"
+        ? styles.buttonTwoThirds
+        : styles.button;
+
+    return renderButton(props.primary, primaryButtonStyle);
+  };
+
+  const renderButton = (
+    props: BlockButtonProps,
+    style: React.ComponentProps<typeof View>["style"]
+  ) => (
+    <View style={style}>
+      {props.type === "Solid" ? (
+        <ButtonSolid {...props.buttonProps} />
+      ) : (
+        <ButtonOutline {...props.buttonProps} />
+      )}
+    </View>
+  );
+
+  return (
+    <View style={{ ...IOStyles.flex, ...IOStyles.row }}>
+      {renderLeftButton()}
+      {renderMidButton()}
+      {renderRightButton()}
+    </View>
+  );
+};

package/src/components/layout/FooterWithButtons.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+
+import { StyleSheet, View } from "react-native";
+import { IOStyles } from "../../core";
+import { BlockButtons, BlockButtonsProps } from "./BlockButtons";
+
+// TODO: Refactor with an unique component like `FooterTopShadow` after bonus vacanze
+const styles = StyleSheet.create({
+  container: {
+    overflow: "hidden",
+    width: "100%",
+    // This Magic number is an heritage of the app code-base, this component should be removed in favor of `GradientBottomAction`
+    marginTop: -50,
+    paddingTop: 50,
+    position: "absolute",
+    bottom: 0
+  }
+});
+
+/**
+ * Implements a component that show buttons as sticky footer
+ * It can include 1, 2 or 3 buttons. If they are 2, they can have the inlineHalf  or the inlineOneThird style
+ */
+export const FooterWithButtons = (props: BlockButtonsProps) => (
+  <View
+    style={styles.container}
+    accessible={props.accessible}
+    pointerEvents={"box-none"}
+    testID="FooterWithButtons"
+  >
+    <View style={IOStyles.footer}>
+      <BlockButtons {...props} />
+    </View>
+  </View>
+);
+
+export default FooterWithButtons;

package/src/components/layout/index.tsx

@@ -2,3 +2,4 @@ export * from "./GradientScrollView";
 export * from "./GradientBottomActions";
 export * from "./HeaderFirstLevel";
 export * from "./HeaderSecondLevel";
+export * from "./FooterWithButtons";