@pagopa/io-app-design-system 1.41.0 → 2.0.0-0

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

@@ -1,8 +1,10 @@
 import React from "react";
 import * as TestRenderer from "react-test-renderer";
+import { Alert } from "react-native";
 import type { IOColors } from "../../../core/IOColors";
 import { IOFontWeight } from "../../../utils/fonts";
 import { Body } from "../Body";
+import { BodyMonospace } from "../BodyMonospace";
 import { ButtonText } from "../ButtonText";
 import { H1 } from "../H1";
 import { H2 } from "../H2";
@@ -12,8 +14,6 @@ import { H5 } from "../H5";
 import { H6 } from "../H6";
 import { Label } from "../Label";
 import { LabelSmall } from "../LabelSmall";
-import { LabelLink } from "../LabelLink";
-import { BodyMonospace } from "../BodyMonospace";
 import { calculateWeightColor } from "../common";
 
 describe("Test Typography Components", () => {
@@ -54,34 +54,6 @@ describe("Test Typography Components", () => {
     expect(h4Dblue).toMatchSnapshot();
     const h4white = TestRenderer.create(<H4 color={"white"}>Text</H4>).toJSON();
     expect(h4white).toMatchSnapshot();
-
-    // Regular weight
-    // with regular weight, default color is bluegreydark
-    const h4Regular = TestRenderer.create(
-      <H4 weight={"Regular"}>Text</H4>
-    ).toJSON();
-    expect(h4Regular).toMatchSnapshot();
-
-    const h4Regularbluegrey = TestRenderer.create(
-      <H4 weight={"Regular"} color={"bluegrey"}>
-        Text
-      </H4>
-    ).toJSON();
-    expect(h4Regularbluegrey).toMatchSnapshot();
-
-    const h4RegularbluegreyLight = TestRenderer.create(
-      <H4 weight={"Regular"} color={"bluegreyLight"}>
-        Text
-      </H4>
-    ).toJSON();
-    expect(h4RegularbluegreyLight).toMatchSnapshot();
-
-    const h4Regularwhite = TestRenderer.create(
-      <H4 weight={"Regular"} color={"white"}>
-        Text
-      </H4>
-    ).toJSON();
-    expect(h4Regularwhite).toMatchSnapshot();
   });
   it("H5 Snapshot", () => {
     // SemiBold weight, default
@@ -151,7 +123,11 @@ describe("Test Typography Components", () => {
     });
   });
   it("Link Snapshot", () => {
-    const link = TestRenderer.create(<LabelLink>Text</LabelLink>).toJSON();
+    const link = TestRenderer.create(
+      <Label asLink onPress={() => Alert.alert("Pressed")}>
+        Text
+      </Label>
+    ).toJSON();
     expect(link).toMatchSnapshot();
   });
   it("BodyMonospace Snapshot", () => {

package/src/components/typography/index.tsx

@@ -1,4 +1,5 @@
 export * from "./BaseTypography";
+export * from "./IOText";
 export * from "./Body";
 export * from "./Caption";
 export * from "./Chip";
@@ -14,12 +15,9 @@ export * from "./Hero";
 export * from "./Label";
 export * from "./LabelSmall";
 export * from "./LabelSmallAlt";
-export * from "./LabelLink";
+export * from "./LabelMini";
 export * from "./BodyMonospace";
 export * from "./common";
 export * from "./markdown/MdH1";
 export * from "./markdown/MdH2";
 export * from "./markdown/MdH3";
-export * from "./markdown/MdH4";
-export * from "./markdown/MdH5";
-export * from "./markdown/MdH6";

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

@@ -1,32 +1,30 @@
-import { IOColors, IOTheme } from "../../../core";
-import { FontFamily, IOFontWeight } from "../../../utils/fonts";
-import { ExternalTypographyProps, TypographyProps } from "../common";
-import { useTypographyFactory } from "../Factory";
-
-type AllowedColors = Extract<IOTheme, "textHeading-default"> | IOColors;
-type AllowedWeight = Extract<IOFontWeight, "Regular">;
-
-type MdH1Props = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-const fontSize = 20;
-const lineHeight = 24;
-const font: FontFamily = "ReadexPro";
-const defaultColor: AllowedColors = "black";
-const defaultWeight: AllowedWeight = "Regular";
+import React, { ForwardedRef, forwardRef } from "react";
+import { View } from "react-native";
+import { useIOExperimentalDesign, useIOTheme } from "../../../core";
+import { IOText, IOTextProps, TypographicStyleProps } from "../IOText";
 
 /**
  * `MdH1` typographic style
  */
-export const MdH1 = (props: MdH1Props) =>
-  useTypographyFactory<AllowedWeight, AllowedColors>({
-    ...props,
-    defaultWeight,
-    defaultColor,
-    font,
-    fontStyle: {
-      fontSize,
-      lineHeight
-    }
-  });
+
+export const MdH1 = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+    const theme = useIOTheme();
+    const { isExperimental } = useIOExperimentalDesign();
+
+    const MdH1Props: IOTextProps = {
+      ...props,
+      font: isExperimental ? "ReadexPro" : "TitilliumSansPro",
+      weight: isExperimental ? "Regular" : "Semibold",
+      size: 20,
+      lineHeight: 24,
+      color: customColor ?? theme["textHeading-tertiary"]
+    };
+
+    return (
+      <IOText ref={ref} {...MdH1Props}>
+        {props.children}
+      </IOText>
+    );
+  }
+);

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

@@ -1,34 +1,31 @@
-import { IOColors, IOTheme } from "../../../core";
-import { FontFamily, IOFontWeight } from "../../../utils/fonts";
-import { ExternalTypographyProps, TypographyProps } from "../common";
-import { useTypographyFactory } from "../Factory";
-
-type AllowedColors = Extract<IOTheme, "textHeading-default"> | IOColors;
-type AllowedWeight = Extract<IOFontWeight, "Regular">;
-
-type MdH2Props = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-/* We set 18 instead of 16 to diffrentiate from the H3 typographic style.
-It should be 16 with `SemiBold` font weight. */
-const fontSize = 18;
-const lineHeight = 24;
-const font: FontFamily = "ReadexPro";
-const defaultColor: AllowedColors = "black";
-const defaultWeight: AllowedWeight = "Regular";
+import React, { ForwardedRef, forwardRef } from "react";
+import { View } from "react-native";
+import { useIOExperimentalDesign, useIOTheme } from "../../../core";
+import { IOText, IOTextProps, TypographicStyleProps } from "../IOText";
 
 /**
  * `MdH2` typographic style
  */
-export const MdH2 = (props: MdH2Props) =>
-  useTypographyFactory<AllowedWeight, AllowedColors>({
-    ...props,
-    defaultWeight,
-    defaultColor,
-    font,
-    fontStyle: {
-      fontSize,
-      lineHeight
-    }
-  });
+export const MdH2 = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+    const theme = useIOTheme();
+    const { isExperimental } = useIOExperimentalDesign();
+
+    const MdH2Props: IOTextProps = {
+      ...props,
+      font: isExperimental ? "ReadexPro" : "TitilliumSansPro",
+      weight: isExperimental ? "Regular" : "Semibold",
+      /* We set 18 instead of 16 to diffrentiate from the H3 typographic style.
+It should be 16 with `SemiBold` font weight. */
+      size: 18,
+      lineHeight: 24,
+      color: customColor ?? theme["textHeading-tertiary"]
+    };
+
+    return (
+      <IOText ref={ref} {...MdH2Props}>
+        {props.children}
+      </IOText>
+    );
+  }
+);

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

@@ -1,32 +1,29 @@
-import { IOColors, IOTheme } from "../../../core";
-import { FontFamily, IOFontWeight } from "../../../utils/fonts";
-import { ExternalTypographyProps, TypographyProps } from "../common";
-import { useTypographyFactory } from "../Factory";
-
-type AllowedColors = Extract<IOTheme, "textHeading-default"> | IOColors;
-type AllowedWeight = Extract<IOFontWeight, "Regular">;
-
-type MdH3Props = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-const fontSize = 16;
-const lineHeight = 24;
-const font: FontFamily = "ReadexPro";
-const defaultColor: AllowedColors = "black";
-const defaultWeight: AllowedWeight = "Regular";
+import React, { ForwardedRef, forwardRef } from "react";
+import { View } from "react-native";
+import { useIOExperimentalDesign, useIOTheme } from "../../../core";
+import { IOText, IOTextProps, TypographicStyleProps } from "../IOText";
 
 /**
  * `MdH3` typographic style
  */
-export const MdH3 = (props: MdH3Props) =>
-  useTypographyFactory<AllowedWeight, AllowedColors>({
-    ...props,
-    defaultWeight,
-    defaultColor,
-    font,
-    fontStyle: {
-      fontSize,
-      lineHeight
-    }
-  });
+export const MdH3 = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+    const theme = useIOTheme();
+    const { isExperimental } = useIOExperimentalDesign();
+
+    const MdH3Props: IOTextProps = {
+      ...props,
+      font: isExperimental ? "ReadexPro" : "TitilliumSansPro",
+      weight: isExperimental ? "Regular" : "Semibold",
+      size: 16,
+      lineHeight: 24,
+      color: customColor ?? theme["textHeading-tertiary"]
+    };
+
+    return (
+      <IOText ref={ref} {...MdH3Props}>
+        {props.children}
+      </IOText>
+    );
+  }
+);

package/src/core/IOColors.ts

@@ -256,33 +256,39 @@ export type IOColorsExtra = keyof typeof IOColorsExtra;
 ░░░ THEME COLORS ░░░
 */
 
-export type IOTheme = {
+const themeKeys = [
   // General
-  "appBackground-primary": IOColors;
-  "appBackground-secondary": IOColors;
-  "appBackground-tertiary": IOColors;
-  "appBackground-accent": IOColors;
-  "interactiveElem-default": IOColors;
-  "interactiveElem-pressed": IOColors;
-  "listItem-pressed": IOColors;
+  "appBackground-primary",
+  "appBackground-secondary",
+  "appBackground-tertiary",
+  "appBackground-accent",
+  "interactiveElem-default",
+  "interactiveElem-pressed",
+  "listItem-pressed",
   // Typography
-  "textHeading-default": IOColors;
-  "textBody-default": IOColors;
-  "textBody-secondary": IOColors;
-  "textBody-tertiary": IOColors;
+  "textHeading-default",
+  "textHeading-secondary",
+  "textHeading-tertiary",
+  "textBody-default",
+  "textBody-secondary",
+  "textBody-tertiary",
   // Design System related
-  "cardBorder-default": IOColors;
-  "icon-default": IOColors;
-  "icon-decorative": IOColors;
+  "cardBorder-default",
+  "icon-default",
+  "icon-decorative",
   // Layout
-  "divider-default": IOColors;
+  "divider-default",
   // Status
-  errorIcon: IOColors;
-  errorText: IOColors;
+  "errorIcon",
+  "errorText",
   // Pictograms
-  "pictogram-hands": IOColors;
-  "pictogram-tint-main": IOColors;
-  "pictogram-tint-secondary": IOColors;
+  "pictogram-hands",
+  "pictogram-tint-main",
+  "pictogram-tint-secondary"
+] as const;
+
+export type IOTheme = {
+  [K in (typeof themeKeys)[number]]: IOColors;
 };
 
 export const IOThemeLight: IOTheme = {
@@ -296,6 +302,8 @@ export const IOThemeLight: IOTheme = {
   "listItem-pressed": "grey-50",
   // Typography
   "textHeading-default": "black",
+  "textHeading-secondary": "grey-850",
+  "textHeading-tertiary": "grey-700",
   "textBody-default": "black",
   "textBody-secondary": "grey-850",
   "textBody-tertiary": "grey-700",
@@ -332,6 +340,8 @@ export const IOThemeDark: IOTheme = {
   "listItem-pressed": "grey-850",
   // Typography
   "textHeading-default": "grey-200",
+  "textHeading-secondary": "grey-300",
+  "textHeading-tertiary": "grey-450",
   "textBody-default": "white",
   "textBody-secondary": "grey-100",
   "textBody-tertiary": "grey-450",

package/src/core/IOSpacing.ts

@@ -4,62 +4,48 @@ Every margin/padding used by different components
 should use a value defined in the following scale.
 */
 
-export type IOSpacingScale =
-  | 4
-  | 6
-  | 8
-  | 12
-  | 16
-  | 20
-  | 24
-  | 28
-  | 32
-  | 40
-  | 48
-  | 56
-  | 64
-  | 72
-  | 80
-  | 96;
+export const IOSpacingScale = [
+  4, 6, 8, 12, 16, 20, 24, 28, 32, 40, 48, 56, 64, 72, 80, 96
+] as const;
+export type IOSpacingScale = (typeof IOSpacingScale)[number];
 
-// Values used in the new `<Spacer>` component
-export type IOSpacer = Extract<
-  IOSpacingScale,
-  4 | 8 | 12 | 16 | 24 | 32 | 40 | 48
->;
-export const IOSpacer: ReadonlyArray<IOSpacer> = [
+// Values used in the new `<Spacer>` and `<Stack>` components
+export const IOSpacer = [
   4, 8, 12, 16, 24, 32, 40, 48
-] as const;
+] as const satisfies ReadonlyArray<IOSpacingScale>;
+export type IOSpacer = (typeof IOSpacer)[number];
 
 // Margin values used in the new `<ContentWrapper>` component
-export type IOAppMargin = Extract<IOSpacingScale, 8 | 16 | 24 | 32 | 48>;
-export const IOAppMargin: ReadonlyArray<IOAppMargin> = [
+export const IOAppMargin = [
   8, 16, 24, 32, 48
-] as const;
+] as const satisfies ReadonlyArray<IOSpacingScale>;
+export type IOAppMargin = (typeof IOAppMargin)[number];
 
 // Values used in the `<Alert>` component
-export type IOAlertSpacing = Extract<IOSpacingScale, 16 | 24>;
-export const IOAlertSpacing: ReadonlyArray<IOAlertSpacing> = [16, 24] as const;
+export const IOAlertSpacing = [
+  16, 24
+] as const satisfies ReadonlyArray<IOSpacingScale>;
+export type IOAlertSpacing = (typeof IOAlertSpacing)[number];
 
 // Values used in the `<Banner>` component
 export type IOBannerSpacing = Extract<IOSpacingScale, 12 | 16>;
-export const IOBannerBigSpacing: IOBannerSpacing = 16 as const;
-export const IOBannerSmallHSpacing: IOBannerSpacing = 16 as const;
-export const IOBannerSmallVSpacing: IOBannerSpacing = 12 as const;
+export const IOBannerBigSpacing: IOBannerSpacing = 16;
+export const IOBannerSmallHSpacing: IOBannerSpacing = 16;
+export const IOBannerSmallVSpacing: IOBannerSpacing = 12;
 
 // Values used in the `<Tag>` component
 export type IOTagSpacing = Extract<IOSpacingScale, 6 | 8>;
-export const IOTagHSpacing: IOTagSpacing = 8 as const;
-export const IOTagVSpacing: IOTagSpacing = 6 as const;
+export const IOTagHSpacing: IOTagSpacing = 8;
+export const IOTagVSpacing: IOTagSpacing = 6;
 
 // Values used in the `<Badge>` component
 export type IOBadgeSpacing = Extract<IOSpacingScale, 4 | 8>;
-export const IOBadgeHSpacing: IOBadgeSpacing = 8 as const;
-export const IOBadgeVSpacing: IOBadgeSpacing = 4 as const;
+export const IOBadgeHSpacing: IOBadgeSpacing = 8;
+export const IOBadgeVSpacing: IOBadgeSpacing = 4;
 
 // Values used in the `<ModuleIDP>` component
 export type IOModuleIDPSpacing = Extract<IOSpacingScale, 8 | 16 | 24>;
-export const IOModuleIDPHSpacing: IOModuleIDPSpacing = 16 as const;
-export const IOModuleIDPVSpacing: IOModuleIDPSpacing = 16 as const;
-export const IOModuleIDPSavedVSpacing: IOModuleIDPSpacing = 24 as const;
-export const IOListItemLogoMargin: IOModuleIDPSpacing = 8 as const;
+export const IOModuleIDPHSpacing: IOModuleIDPSpacing = 16;
+export const IOModuleIDPVSpacing: IOModuleIDPSpacing = 16;
+export const IOModuleIDPSavedVSpacing: IOModuleIDPSpacing = 24;
+export const IOListItemLogoMargin: IOModuleIDPSpacing = 8;

package/src/core/IOStyles.ts

@@ -1,5 +1,4 @@
-import { Platform, StyleSheet, Text } from "react-native";
-import { ComponentProps } from "react";
+import { Platform, StyleSheet } from "react-native";
 import { IOIconSizeScale } from "../components/icons";
 import { IOColors } from "./IOColors";
 import { IOModuleIDPRadius } from "./IOShapes";
@@ -19,8 +18,6 @@ interface IOVisualCostants {
   appMarginDefault: IOAppMargin;
   // Header
   headerHeight: number;
-  // Typography
-  maxFontSizeMultiplier: ComponentProps<typeof Text>["maxFontSizeMultiplier"];
   // Dimensions
   avatarSizeSmall: number;
   avatarSizeMedium: number;
@@ -35,7 +32,6 @@ interface IOVisualCostants {
 export const IOVisualCostants: IOVisualCostants = {
   appMarginDefault: 24,
   headerHeight: 56,
-  maxFontSizeMultiplier: 1.25,
   avatarSizeSmall: 44,
   avatarSizeMedium: 66,
   avatarRadiusSizeSmall: 8,

package/src/utils/accessibility.ts

@@ -1,6 +1,8 @@
 import { pipe } from "fp-ts/lib/function";
 import * as O from "fp-ts/lib/Option";
 import I18n from "i18n-js";
+import { useEffect, useState } from "react";
+import { AccessibilityInfo } from "react-native";
 
 /**
  * This function is used to get the text that will be read by the screen reader
@@ -15,3 +17,32 @@ export const getAccessibleAmountText = (amount?: string) =>
     ),
     O.getOrElseW(() => undefined)
   );
+
+/**
+ * Query whether a bold text is currently enabled. The result is true
+ * when bold text is enabled and false otherwise.
+ */
+export const useBoldTextEnabled = () => {
+  const [boldTextEnabled, setBoldTextEnabled] = useState(false);
+
+  useEffect(() => {
+    const boldTextChangedSubscription = AccessibilityInfo.addEventListener(
+      "boldTextChanged",
+      isBoldTextEnabled => {
+        setBoldTextEnabled(isBoldTextEnabled);
+      }
+    );
+
+    AccessibilityInfo.isBoldTextEnabled()
+      .then(isBoldTextEnabled => {
+        setBoldTextEnabled(isBoldTextEnabled);
+      })
+      .catch(_ => false);
+
+    return () => {
+      boldTextChangedSubscription.remove();
+    };
+  }, []);
+
+  return boldTextEnabled;
+};