@pagopa/io-app-design-system 5.6.7 → 5.7.1

package/src/components/typography/README.md

@@ -2,11 +2,11 @@
 
 ## Handling font files
 
-The application uses the font _Titillium Sans Pro_. Fonts are handled differently than Android and iOS. To use the font, `TitilliumSansPro-Semibold` example, you must apply the following properties for Android:
+Fonts are handled differently than Android and iOS. To use the font, `Titillio-Semibold` example, you must apply the following properties for Android:
 
 ```css
 {
-  fontFamily: 'TitilliumSansPro-Semibold'
+  fontFamily: 'Titillio-Semibold'
 }
 ```
 
@@ -14,9 +14,18 @@ while in iOS the code to be applied is:
 
 ```css
 {
-  fontFamily: 'Titillium Sans Pro',
+  fontFamily: 'Titillio',
   fontWeight: '600',
 }
 ```
+The different font handling is managed by the `makeFontFamilyName` function. It's included in the [fonts.ts](../../utils/fonts.ts) file, which contains many other utility functions that simplify font management.
 
-To manage fonts and variants more easily, we have created utility functions within the file [fonts.ts](../../utils/fonts.ts).
+## `IOText`
+
+This library already offers a range of predefined typographic styles, such as `H1`, `H2`, and so on. However, there may be times when you need to add a specific typographic style with visual attributes that are not included in any of the predefined styles.
+
+In this case, you can define a custom typographic style using the `IOText` component, which is specifically designed to replace the native `Text` component.
+
+It has some useful features:
+- Built-in support for bold text, if set by the user (iOS only)
+- Based on the new `IOFontSize` scale

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

@@ -1,593 +1,51 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Test Typography Components Body Snapshot 1`] = `
-<Text
-  allowFontScaling={true}
-  dynamicTypeRamp="body"
-  maxFontSizeMultiplier={1.5}
-  style={
-    [
-      {},
-      {
-        "color": "#555C70",
-        "fontFamily": "Titillio",
-        "fontSize": 16,
-        "fontStyle": "normal",
-        "fontWeight": "400",
-        "lineHeight": 24,
-      },
-    ]
-  }
->
-  Text
-</Text>
-`;
+exports[`Test Typography Components Body Snapshot 1`] = `null`;
 
-exports[`Test Typography Components BodyMonospace Snapshot 1`] = `
-<Text
-  allowFontScaling={true}
-  dynamicTypeRamp="body"
-  maxFontSizeMultiplier={1.5}
-  style={
-    [
-      {
-        "letterSpacing": 0.5,
-      },
-      {
-        "color": "#555C70",
-        "fontFamily": "DM Mono",
-        "fontSize": 16,
-        "fontStyle": "normal",
-        "fontWeight": "500",
-        "lineHeight": 24,
-      },
-    ]
-  }
->
-  Text
-</Text>
-`;
+exports[`Test Typography Components BodyMonospace Snapshot 1`] = `null`;
 
-exports[`Test Typography Components BodySmall Snapshot 1`] = `
-<Text
-  allowFontScaling={true}
-  dynamicTypeRamp="footnote"
-  maxFontSizeMultiplier={1.5}
-  style={
-    [
-      {},
-      {
-        "color": "#555C70",
-        "fontFamily": "Titillio",
-        "fontSize": 14,
-        "fontStyle": "normal",
-        "fontWeight": "400",
-        "lineHeight": 21,
-      },
-    ]
-  }
->
-  Text
-</Text>
-`;
+exports[`Test Typography Components BodySmall Snapshot 1`] = `null`;
 
-exports[`Test Typography Components BodySmall Snapshot 2`] = `
-<Text
-  allowFontScaling={true}
-  dynamicTypeRamp="footnote"
-  maxFontSizeMultiplier={1.5}
-  style={
-    [
-      {},
-      {
-        "color": "#0B3EE3",
-        "fontFamily": "Titillio",
-        "fontSize": 14,
-        "fontStyle": "normal",
-        "fontWeight": "400",
-        "lineHeight": 21,
-      },
-    ]
-  }
->
-  Text
-</Text>
-`;
+exports[`Test Typography Components BodySmall Snapshot 2`] = `null`;
 
-exports[`Test Typography Components BodySmall Snapshot 3`] = `
-<Text
-  allowFontScaling={true}
-  dynamicTypeRamp="footnote"
-  maxFontSizeMultiplier={1.5}
-  style={
-    [
-      {},
-      {
-        "color": "#555C70",
-        "fontFamily": "Titillio",
-        "fontSize": 14,
-        "fontStyle": "normal",
-        "fontWeight": "400",
-        "lineHeight": 21,
-      },
-    ]
-  }
->
-  Text
-</Text>
-`;
+exports[`Test Typography Components BodySmall Snapshot 3`] = `null`;
 
-exports[`Test Typography Components BodySmall Snapshot 4`] = `
-<Text
-  allowFontScaling={true}
-  dynamicTypeRamp="footnote"
-  maxFontSizeMultiplier={1.5}
-  style={
-    [
-      {},
-      {
-        "color": "#D13333",
-        "fontFamily": "Titillio",
-        "fontSize": 14,
-        "fontStyle": "normal",
-        "fontWeight": "400",
-        "lineHeight": 21,
-      },
-    ]
-  }
->
-  Text
-</Text>
-`;
+exports[`Test Typography Components BodySmall Snapshot 4`] = `null`;
 
-exports[`Test Typography Components BodySmall Snapshot 5`] = `
-<Text
-  allowFontScaling={true}
-  dynamicTypeRamp="footnote"
-  maxFontSizeMultiplier={1.5}
-  style={
-    [
-      {},
-      {
-        "color": "#FFFFFF",
-        "fontFamily": "Titillio",
-        "fontSize": 14,
-        "fontStyle": "normal",
-        "fontWeight": "400",
-        "lineHeight": 21,
-      },
-    ]
-  }
->
-  Text
-</Text>
-`;
+exports[`Test Typography Components BodySmall Snapshot 5`] = `null`;
 
-exports[`Test Typography Components CTA Snapshot 1`] = `
-<Text
-  allowFontScaling={true}
-  maxFontSizeMultiplier={1.5}
-  style={
-    [
-      {},
-      {
-        "color": "#FFFFFF",
-        "fontFamily": "Titillio",
-        "fontSize": 16,
-        "fontStyle": "normal",
-        "fontWeight": "600",
-        "lineHeight": 20,
-      },
-    ]
-  }
->
-  Text
-</Text>
-`;
+exports[`Test Typography Components CTA Snapshot 1`] = `null`;
 
-exports[`Test Typography Components H1 Snapshot 1`] = `
-<Text
-  allowFontScaling={true}
-  dynamicTypeRamp="largeTitle"
-  maxFontSizeMultiplier={1.5}
-  style={
-    [
-      {},
-      {
-        "color": "#0E0F13",
-        "fontFamily": "Titillio",
-        "fontSize": 28,
-        "fontStyle": "normal",
-        "fontWeight": "600",
-        "lineHeight": 42,
-      },
-    ]
-  }
->
-  Text
-</Text>
-`;
+exports[`Test Typography Components H1 Snapshot 1`] = `null`;
 
-exports[`Test Typography Components H1 Snapshot 2`] = `
-<Text
-  allowFontScaling={true}
-  dynamicTypeRamp="largeTitle"
-  maxFontSizeMultiplier={1.5}
-  style={
-    [
-      {},
-      {
-        "color": "#FFFFFF",
-        "fontFamily": "Titillio",
-        "fontSize": 28,
-        "fontStyle": "normal",
-        "fontWeight": "600",
-        "lineHeight": 42,
-      },
-    ]
-  }
->
-  Text
-</Text>
-`;
+exports[`Test Typography Components H1 Snapshot 2`] = `null`;
 
-exports[`Test Typography Components H2 Snapshot 1`] = `
-<Text
-  allowFontScaling={true}
-  dynamicTypeRamp="title1"
-  maxFontSizeMultiplier={1.5}
-  style={
-    [
-      {},
-      {
-        "color": "#0E0F13",
-        "fontFamily": "Titillio",
-        "fontSize": 26,
-        "fontStyle": "normal",
-        "fontWeight": "600",
-        "lineHeight": 34,
-      },
-    ]
-  }
->
-  Text
-</Text>
-`;
+exports[`Test Typography Components H2 Snapshot 1`] = `null`;
 
-exports[`Test Typography Components H3 Snapshot 1`] = `
-<Text
-  allowFontScaling={true}
-  dynamicTypeRamp="title2"
-  maxFontSizeMultiplier={1.5}
-  style={
-    [
-      {},
-      {
-        "color": "#0E0F13",
-        "fontFamily": "Titillio",
-        "fontSize": 22,
-        "fontStyle": "normal",
-        "fontWeight": "600",
-        "lineHeight": 33,
-      },
-    ]
-  }
->
-  Text
-</Text>
-`;
+exports[`Test Typography Components H3 Snapshot 1`] = `null`;
 
-exports[`Test Typography Components H3 Snapshot 2`] = `
-<Text
-  allowFontScaling={true}
-  dynamicTypeRamp="title2"
-  maxFontSizeMultiplier={1.5}
-  style={
-    [
-      {},
-      {
-        "color": "#D2D6E3",
-        "fontFamily": "Titillio",
-        "fontSize": 22,
-        "fontStyle": "normal",
-        "fontWeight": "600",
-        "lineHeight": 33,
-      },
-    ]
-  }
->
-  Text
-</Text>
-`;
+exports[`Test Typography Components H3 Snapshot 2`] = `null`;
 
-exports[`Test Typography Components H3 Snapshot 3`] = `
-<Text
-  allowFontScaling={true}
-  dynamicTypeRamp="title2"
-  maxFontSizeMultiplier={1.5}
-  style={
-    [
-      {},
-      {
-        "color": "#FFFFFF",
-        "fontFamily": "Titillio",
-        "fontSize": 22,
-        "fontStyle": "normal",
-        "fontWeight": "600",
-        "lineHeight": 33,
-      },
-    ]
-  }
->
-  Text
-</Text>
-`;
+exports[`Test Typography Components H3 Snapshot 3`] = `null`;
 
-exports[`Test Typography Components H3 Snapshot 4`] = `
-<Text
-  allowFontScaling={true}
-  dynamicTypeRamp="title2"
-  maxFontSizeMultiplier={1.5}
-  style={
-    [
-      {},
-      {
-        "color": "#FFFFFF",
-        "fontFamily": "Titillio",
-        "fontSize": 22,
-        "fontStyle": "normal",
-        "fontWeight": "600",
-        "lineHeight": 33,
-      },
-    ]
-  }
->
-  Text
-</Text>
-`;
+exports[`Test Typography Components H3 Snapshot 4`] = `null`;
 
-exports[`Test Typography Components H3 Snapshot 5`] = `
-<Text
-  allowFontScaling={true}
-  dynamicTypeRamp="title2"
-  maxFontSizeMultiplier={1.5}
-  style={
-    [
-      {},
-      {
-        "color": "#0E0F13",
-        "fontFamily": "Titillio",
-        "fontSize": 22,
-        "fontStyle": "normal",
-        "fontWeight": "600",
-        "lineHeight": 33,
-      },
-    ]
-  }
->
-  Text
-</Text>
-`;
+exports[`Test Typography Components H3 Snapshot 5`] = `null`;
 
-exports[`Test Typography Components H4 Snapshot 1`] = `
-<Text
-  allowFontScaling={true}
-  dynamicTypeRamp="title3"
-  maxFontSizeMultiplier={1.5}
-  style={
-    [
-      {},
-      {
-        "color": "#0E0F13",
-        "fontFamily": "Titillio",
-        "fontSize": 20,
-        "fontStyle": "normal",
-        "fontWeight": "600",
-        "lineHeight": 24,
-      },
-    ]
-  }
->
-  Text
-</Text>
-`;
+exports[`Test Typography Components H4 Snapshot 1`] = `null`;
 
-exports[`Test Typography Components H4 Snapshot 2`] = `
-<Text
-  allowFontScaling={true}
-  dynamicTypeRamp="title3"
-  maxFontSizeMultiplier={1.5}
-  style={
-    [
-      {},
-      {
-        "color": "#0B3EE3",
-        "fontFamily": "Titillio",
-        "fontSize": 20,
-        "fontStyle": "normal",
-        "fontWeight": "600",
-        "lineHeight": 24,
-      },
-    ]
-  }
->
-  Text
-</Text>
-`;
+exports[`Test Typography Components H4 Snapshot 2`] = `null`;
 
-exports[`Test Typography Components H4 Snapshot 3`] = `
-<Text
-  allowFontScaling={true}
-  dynamicTypeRamp="title3"
-  maxFontSizeMultiplier={1.5}
-  style={
-    [
-      {},
-      {
-        "color": "#FFFFFF",
-        "fontFamily": "Titillio",
-        "fontSize": 20,
-        "fontStyle": "normal",
-        "fontWeight": "600",
-        "lineHeight": 24,
-      },
-    ]
-  }
->
-  Text
-</Text>
-`;
+exports[`Test Typography Components H4 Snapshot 3`] = `null`;
 
-exports[`Test Typography Components H5 Snapshot 1`] = `
-<Text
-  allowFontScaling={true}
-  dynamicTypeRamp="subheadline"
-  maxFontSizeMultiplier={1.5}
-  style={
-    [
-      {
-        "letterSpacing": 0.5,
-        "textTransform": "uppercase",
-      },
-      {
-        "color": "#0E0F13",
-        "fontFamily": "Titillio",
-        "fontSize": 14,
-        "fontStyle": "normal",
-        "fontWeight": "600",
-        "lineHeight": 16,
-      },
-    ]
-  }
->
-  Text
-</Text>
-`;
+exports[`Test Typography Components H5 Snapshot 1`] = `null`;
 
-exports[`Test Typography Components H5 Snapshot 2`] = `
-<Text
-  allowFontScaling={true}
-  dynamicTypeRamp="subheadline"
-  maxFontSizeMultiplier={1.5}
-  style={
-    [
-      {
-        "letterSpacing": 0.5,
-        "textTransform": "uppercase",
-      },
-      {
-        "color": "#555C70",
-        "fontFamily": "Titillio",
-        "fontSize": 14,
-        "fontStyle": "normal",
-        "fontWeight": "600",
-        "lineHeight": 16,
-      },
-    ]
-  }
->
-  Text
-</Text>
-`;
+exports[`Test Typography Components H5 Snapshot 2`] = `null`;
 
-exports[`Test Typography Components H5 Snapshot 3`] = `
-<Text
-  allowFontScaling={true}
-  dynamicTypeRamp="subheadline"
-  maxFontSizeMultiplier={1.5}
-  style={
-    [
-      {
-        "letterSpacing": 0.5,
-        "textTransform": "uppercase",
-      },
-      {
-        "color": "#0B3EE3",
-        "fontFamily": "Titillio",
-        "fontSize": 14,
-        "fontStyle": "normal",
-        "fontWeight": "600",
-        "lineHeight": 16,
-      },
-    ]
-  }
->
-  Text
-</Text>
-`;
+exports[`Test Typography Components H5 Snapshot 3`] = `null`;
 
-exports[`Test Typography Components H5 Snapshot 4`] = `
-<Text
-  allowFontScaling={true}
-  dynamicTypeRamp="subheadline"
-  maxFontSizeMultiplier={1.5}
-  style={
-    [
-      {
-        "letterSpacing": 0.5,
-        "textTransform": "uppercase",
-      },
-      {
-        "color": "#FFFFFF",
-        "fontFamily": "Titillio",
-        "fontSize": 14,
-        "fontStyle": "normal",
-        "fontWeight": "600",
-        "lineHeight": 16,
-      },
-    ]
-  }
->
-  Text
-</Text>
-`;
+exports[`Test Typography Components H5 Snapshot 4`] = `null`;
 
-exports[`Test Typography Components H6 Snapshot 1`] = `
-<Text
-  allowFontScaling={true}
-  dynamicTypeRamp="headline"
-  maxFontSizeMultiplier={1.5}
-  style={
-    [
-      {},
-      {
-        "color": "#0E0F13",
-        "fontFamily": "Titillio",
-        "fontSize": 16,
-        "fontStyle": "normal",
-        "fontWeight": "600",
-        "lineHeight": 24,
-      },
-    ]
-  }
->
-  Text
-</Text>
-`;
+exports[`Test Typography Components H6 Snapshot 1`] = `null`;
 
-exports[`Test Typography Components Link Snapshot 1`] = `
-<Text
-  accessibilityRole="link"
-  allowFontScaling={true}
-  dynamicTypeRamp="body"
-  maxFontSizeMultiplier={1.5}
-  onPress={[Function]}
-  style={
-    [
-      {
-        "textDecorationLine": "underline",
-      },
-      {
-        "color": "#0B3EE3",
-        "fontFamily": "Titillio",
-        "fontSize": 16,
-        "fontStyle": "normal",
-        "fontWeight": "400",
-        "lineHeight": 24,
-      },
-    ]
-  }
->
-  Text
-</Text>
-`;
+exports[`Test Typography Components Link Snapshot 1`] = `null`;

package/src/components/typography/markdown/MdH1.tsx

@@ -1,6 +1,6 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIONewTypeface, useIOTheme } from "../../../core";
+import { useIONewTypeface, useIOTheme } from "../../../context";
 import { IOText, IOTextProps, TypographicStyleProps } from "../IOText";
 
 /**

package/src/components/typography/markdown/MdH2.tsx

@@ -1,6 +1,6 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIONewTypeface, useIOTheme } from "../../../core";
+import { useIONewTypeface, useIOTheme } from "../../../context";
 import { IOText, IOTextProps, TypographicStyleProps } from "../IOText";
 
 /**

package/src/components/typography/markdown/MdH3.tsx

@@ -1,6 +1,6 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIONewTypeface, useIOTheme } from "../../../core";
+import { useIONewTypeface, useIOTheme } from "../../../context";
 import { IOText, IOTextProps, TypographicStyleProps } from "../IOText";
 
 /**

package/src/{core → context}/IOThemeContextProvider.tsx

@@ -6,7 +6,7 @@ import React, {
   useState
 } from "react";
 import { Appearance, ColorSchemeName } from "react-native";
-import { IOTheme, IOThemeDark, IOThemeLight } from "./IOColors";
+import { IOTheme, IOThemeDark, IOThemeLight } from "../core/IOColors";
 
 export const IOThemes = { light: IOThemeLight, dark: IOThemeDark };