@pagopa/io-app-design-system 4.3.0 → 4.4.1

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

@@ -2,9 +2,9 @@
 
 exports[`Test Typography Components Body Snapshot 1`] = `
 <Text
-  allowFontScaling={false}
+  allowFontScaling={true}
   dynamicTypeRamp="body"
-  maxFontSizeMultiplier={1.25}
+  maxFontSizeMultiplier={1.5}
   style={
     [
       {},
@@ -25,9 +25,9 @@ exports[`Test Typography Components Body Snapshot 1`] = `
 
 exports[`Test Typography Components BodyMonospace Snapshot 1`] = `
 <Text
-  allowFontScaling={false}
+  allowFontScaling={true}
   dynamicTypeRamp="body"
-  maxFontSizeMultiplier={1.25}
+  maxFontSizeMultiplier={1.5}
   style={
     [
       {
@@ -50,9 +50,9 @@ exports[`Test Typography Components BodyMonospace Snapshot 1`] = `
 
 exports[`Test Typography Components BodySmall Snapshot 1`] = `
 <Text
-  allowFontScaling={false}
+  allowFontScaling={true}
   dynamicTypeRamp="footnote"
-  maxFontSizeMultiplier={1.25}
+  maxFontSizeMultiplier={1.5}
   style={
     [
       {},
@@ -73,9 +73,9 @@ exports[`Test Typography Components BodySmall Snapshot 1`] = `
 
 exports[`Test Typography Components BodySmall Snapshot 2`] = `
 <Text
-  allowFontScaling={false}
+  allowFontScaling={true}
   dynamicTypeRamp="footnote"
-  maxFontSizeMultiplier={1.25}
+  maxFontSizeMultiplier={1.5}
   style={
     [
       {},
@@ -96,9 +96,9 @@ exports[`Test Typography Components BodySmall Snapshot 2`] = `
 
 exports[`Test Typography Components BodySmall Snapshot 3`] = `
 <Text
-  allowFontScaling={false}
+  allowFontScaling={true}
   dynamicTypeRamp="footnote"
-  maxFontSizeMultiplier={1.25}
+  maxFontSizeMultiplier={1.5}
   style={
     [
       {},
@@ -119,9 +119,9 @@ exports[`Test Typography Components BodySmall Snapshot 3`] = `
 
 exports[`Test Typography Components BodySmall Snapshot 4`] = `
 <Text
-  allowFontScaling={false}
+  allowFontScaling={true}
   dynamicTypeRamp="footnote"
-  maxFontSizeMultiplier={1.25}
+  maxFontSizeMultiplier={1.5}
   style={
     [
       {},
@@ -142,9 +142,9 @@ exports[`Test Typography Components BodySmall Snapshot 4`] = `
 
 exports[`Test Typography Components BodySmall Snapshot 5`] = `
 <Text
-  allowFontScaling={false}
+  allowFontScaling={true}
   dynamicTypeRamp="footnote"
-  maxFontSizeMultiplier={1.25}
+  maxFontSizeMultiplier={1.5}
   style={
     [
       {},
@@ -165,8 +165,8 @@ exports[`Test Typography Components BodySmall Snapshot 5`] = `
 
 exports[`Test Typography Components CTA Snapshot 1`] = `
 <Text
-  allowFontScaling={false}
-  maxFontSizeMultiplier={1.25}
+  allowFontScaling={true}
+  maxFontSizeMultiplier={1.5}
   style={
     [
       {},
@@ -187,9 +187,9 @@ exports[`Test Typography Components CTA Snapshot 1`] = `
 
 exports[`Test Typography Components H1 Snapshot 1`] = `
 <Text
-  allowFontScaling={false}
+  allowFontScaling={true}
   dynamicTypeRamp="largeTitle"
-  maxFontSizeMultiplier={1.25}
+  maxFontSizeMultiplier={1.5}
   style={
     [
       {},
@@ -210,9 +210,9 @@ exports[`Test Typography Components H1 Snapshot 1`] = `
 
 exports[`Test Typography Components H1 Snapshot 2`] = `
 <Text
-  allowFontScaling={false}
+  allowFontScaling={true}
   dynamicTypeRamp="largeTitle"
-  maxFontSizeMultiplier={1.25}
+  maxFontSizeMultiplier={1.5}
   style={
     [
       {},
@@ -233,9 +233,9 @@ exports[`Test Typography Components H1 Snapshot 2`] = `
 
 exports[`Test Typography Components H2 Snapshot 1`] = `
 <Text
-  allowFontScaling={false}
+  allowFontScaling={true}
   dynamicTypeRamp="title1"
-  maxFontSizeMultiplier={1.25}
+  maxFontSizeMultiplier={1.5}
   style={
     [
       {},
@@ -256,9 +256,9 @@ exports[`Test Typography Components H2 Snapshot 1`] = `
 
 exports[`Test Typography Components H3 Snapshot 1`] = `
 <Text
-  allowFontScaling={false}
+  allowFontScaling={true}
   dynamicTypeRamp="title2"
-  maxFontSizeMultiplier={1.25}
+  maxFontSizeMultiplier={1.5}
   style={
     [
       {},
@@ -279,9 +279,9 @@ exports[`Test Typography Components H3 Snapshot 1`] = `
 
 exports[`Test Typography Components H3 Snapshot 2`] = `
 <Text
-  allowFontScaling={false}
+  allowFontScaling={true}
   dynamicTypeRamp="title2"
-  maxFontSizeMultiplier={1.25}
+  maxFontSizeMultiplier={1.5}
   style={
     [
       {},
@@ -302,9 +302,9 @@ exports[`Test Typography Components H3 Snapshot 2`] = `
 
 exports[`Test Typography Components H3 Snapshot 3`] = `
 <Text
-  allowFontScaling={false}
+  allowFontScaling={true}
   dynamicTypeRamp="title2"
-  maxFontSizeMultiplier={1.25}
+  maxFontSizeMultiplier={1.5}
   style={
     [
       {},
@@ -325,9 +325,9 @@ exports[`Test Typography Components H3 Snapshot 3`] = `
 
 exports[`Test Typography Components H3 Snapshot 4`] = `
 <Text
-  allowFontScaling={false}
+  allowFontScaling={true}
   dynamicTypeRamp="title2"
-  maxFontSizeMultiplier={1.25}
+  maxFontSizeMultiplier={1.5}
   style={
     [
       {},
@@ -348,9 +348,9 @@ exports[`Test Typography Components H3 Snapshot 4`] = `
 
 exports[`Test Typography Components H3 Snapshot 5`] = `
 <Text
-  allowFontScaling={false}
+  allowFontScaling={true}
   dynamicTypeRamp="title2"
-  maxFontSizeMultiplier={1.25}
+  maxFontSizeMultiplier={1.5}
   style={
     [
       {},
@@ -371,9 +371,9 @@ exports[`Test Typography Components H3 Snapshot 5`] = `
 
 exports[`Test Typography Components H4 Snapshot 1`] = `
 <Text
-  allowFontScaling={false}
+  allowFontScaling={true}
   dynamicTypeRamp="title3"
-  maxFontSizeMultiplier={1.25}
+  maxFontSizeMultiplier={1.5}
   style={
     [
       {},
@@ -394,9 +394,9 @@ exports[`Test Typography Components H4 Snapshot 1`] = `
 
 exports[`Test Typography Components H4 Snapshot 2`] = `
 <Text
-  allowFontScaling={false}
+  allowFontScaling={true}
   dynamicTypeRamp="title3"
-  maxFontSizeMultiplier={1.25}
+  maxFontSizeMultiplier={1.5}
   style={
     [
       {},
@@ -417,9 +417,9 @@ exports[`Test Typography Components H4 Snapshot 2`] = `
 
 exports[`Test Typography Components H4 Snapshot 3`] = `
 <Text
-  allowFontScaling={false}
+  allowFontScaling={true}
   dynamicTypeRamp="title3"
-  maxFontSizeMultiplier={1.25}
+  maxFontSizeMultiplier={1.5}
   style={
     [
       {},
@@ -440,9 +440,9 @@ exports[`Test Typography Components H4 Snapshot 3`] = `
 
 exports[`Test Typography Components H5 Snapshot 1`] = `
 <Text
-  allowFontScaling={false}
+  allowFontScaling={true}
   dynamicTypeRamp="subheadline"
-  maxFontSizeMultiplier={1.25}
+  maxFontSizeMultiplier={1.5}
   style={
     [
       {
@@ -466,9 +466,9 @@ exports[`Test Typography Components H5 Snapshot 1`] = `
 
 exports[`Test Typography Components H5 Snapshot 2`] = `
 <Text
-  allowFontScaling={false}
+  allowFontScaling={true}
   dynamicTypeRamp="subheadline"
-  maxFontSizeMultiplier={1.25}
+  maxFontSizeMultiplier={1.5}
   style={
     [
       {
@@ -492,9 +492,9 @@ exports[`Test Typography Components H5 Snapshot 2`] = `
 
 exports[`Test Typography Components H5 Snapshot 3`] = `
 <Text
-  allowFontScaling={false}
+  allowFontScaling={true}
   dynamicTypeRamp="subheadline"
-  maxFontSizeMultiplier={1.25}
+  maxFontSizeMultiplier={1.5}
   style={
     [
       {
@@ -518,9 +518,9 @@ exports[`Test Typography Components H5 Snapshot 3`] = `
 
 exports[`Test Typography Components H5 Snapshot 4`] = `
 <Text
-  allowFontScaling={false}
+  allowFontScaling={true}
   dynamicTypeRamp="subheadline"
-  maxFontSizeMultiplier={1.25}
+  maxFontSizeMultiplier={1.5}
   style={
     [
       {
@@ -544,9 +544,9 @@ exports[`Test Typography Components H5 Snapshot 4`] = `
 
 exports[`Test Typography Components H6 Snapshot 1`] = `
 <Text
-  allowFontScaling={false}
+  allowFontScaling={true}
   dynamicTypeRamp="headline"
-  maxFontSizeMultiplier={1.25}
+  maxFontSizeMultiplier={1.5}
   style={
     [
       {},
@@ -568,9 +568,9 @@ exports[`Test Typography Components H6 Snapshot 1`] = `
 exports[`Test Typography Components Link Snapshot 1`] = `
 <Text
   accessibilityRole="link"
-  allowFontScaling={false}
+  allowFontScaling={true}
   dynamicTypeRamp="body"
-  maxFontSizeMultiplier={1.25}
+  maxFontSizeMultiplier={1.5}
   onPress={[Function]}
   style={
     [

package/src/utils/accessibility.ts

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
-import { AccessibilityInfo, Platform } from "react-native";
+import { AccessibilityInfo, Platform, useWindowDimensions } from "react-native";
+import { IOMaxFontSizeMultiplier } from "./fonts";
 
 /**
  * Query whether a bold text is currently enabled. The result is true
@@ -32,3 +33,30 @@ export const useBoldTextEnabled = () => {
 
   return boldTextEnabled;
 };
+
+/**
+ * Returns a font size multiplier based on the font scale of the device,
+ * but limited to the `IOMaxFontSizeMultiplier` value.
+ * @returns number
+ */
+export const useIOFontDynamicScale = (): {
+  dynamicFontScale: number;
+  spacingScaleMultiplier: number;
+  hugeFontEnabled: boolean;
+} => {
+  const { fontScale } = useWindowDimensions();
+
+  const hugeFontEnabled = fontScale >= 1.35;
+
+  const dynamicFontScale = Math.min(fontScale, IOMaxFontSizeMultiplier);
+  /* We make the spacing dynamic based on the font scale, but we multiply
+    this value to limit the amount of scaling applied to the spacing */
+  const spacingScaleMultiplier =
+    dynamicFontScale <= IOMaxFontSizeMultiplier ? 1 : 0.8;
+
+  return {
+    hugeFontEnabled,
+    dynamicFontScale,
+    spacingScaleMultiplier
+  };
+};

package/src/utils/fonts.ts

@@ -122,6 +122,7 @@ export const makeFontFamilyName = (
 const defaultFont: IOFontFamily = "TitilliumSansPro";
 const defaultWeight: IOFontWeight = "Regular";
 const defaultFontSize: IOFontSize = 16;
+export const IOMaxFontSizeMultiplier = 1.5;
 
 /**
  * Return a {@link FontStyleObject} with the fields filled based on the platform (iOS or Android).