@pagopa/io-app-design-system 1.42.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/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;
+};

package/src/utils/fonts.ts

@@ -4,42 +4,57 @@
  * README file included in this repository.
  */
 
-import { Platform } from "react-native";
+import { Platform, TextStyle } from "react-native";
 
 /**
  * Choose the font name based on the platform
  */
-const fonts = {
+const fonts: Record<string, string> = {
   TitilliumSansPro: Platform.select({
     android: "TitilliumSansPro",
     web: "TitilliumSansPro",
-    ios: "Titillium Sans Pro"
+    ios: "Titillium Sans Pro",
+    default: "TitilliumSansPro"
   }),
   ReadexPro: Platform.select({
     android: "ReadexPro",
     web: "ReadexPro",
-    ios: "Readex Pro"
+    ios: "Readex Pro",
+    default: "ReadexPro"
   }),
   DMMono: Platform.select({
     android: "DMMono",
     web: "DMMono",
-    ios: "DM Mono"
+    ios: "DM Mono",
+    default: "DMMono"
   })
 };
 
 export type IOFontFamily = keyof typeof fonts;
 
+/*
+ * Font Sizes
+ */
+const fontSizes = [12, 14, 16, 20, 22, 26, 28, 32] as const;
+const fontSizesLegacy = [18, 28, 31, 35] as const;
+const allFontSizes = [...new Set([...fontSizes, ...fontSizesLegacy])];
+export type IOFontSize = (typeof allFontSizes)[number];
+
+/*
+ * Font Weights
+ */
+
 const weights = ["Light", "Regular", "Medium", "Semibold", "Bold"] as const;
 export type IOFontWeight = (typeof weights)[number];
 
 const weightValues = ["300", "400", "500", "600", "700"] as const;
-export type FontWeightValue = (typeof weightValues)[number];
+export type IOFontWeightNumeric = (typeof weightValues)[number];
 
 /**
  * Mapping between the nominal description of the weight (also the postfix used on Android) and the numeric value
  * used on iOS
  */
-export const fontWeights: Record<IOFontWeight, FontWeightValue> = {
+export const fontWeights: Record<IOFontWeight, IOFontWeightNumeric> = {
   Light: "300",
   Regular: "400",
   Medium: "500",
@@ -47,30 +62,26 @@ export const fontWeights: Record<IOFontWeight, FontWeightValue> = {
   Bold: "700"
 };
 
-export type FontFamily = keyof typeof fonts;
-export type FontWeight = keyof typeof fontWeights;
-
-/**
- * Mapping between the nominal description of the weight (also the postfix used on Android) and the numeric value
- * used on iOS
- */
-export const fontWeightsMap: Record<IOFontWeight, FontWeightValue> = {
-  Light: "300",
-  Regular: "400",
-  Medium: "500",
-  Semibold: "600",
-  Bold: "700"
+type FontStyleObject = {
+  fontSize: IOFontSize;
+  fontFamily: IOFontFamily;
+  fontWeight?: IOFontWeightNumeric;
+  lineHeight?: TextStyle["lineHeight"];
+  fontStyle?: TextStyle["fontStyle"];
+  boldEnabled?: boolean;
 };
 
-export enum FontStyle {
-  "normal" = "normal",
-  "italic" = "italic"
-}
-
-type FontStyleObject = {
-  fontFamily: string;
-  fontWeight?: FontWeightValue;
-  fontStyle?: FontStyle;
+/* Function that, given a certain weight, returns the next
+available `FontWeight` value. 
+For example, if I set it to `Regular`, the function 
+should return `Medium`, and so on. If I set it to the last `FontWeight`
+value, the function will return the same value.
+*/
+const getBolderFontWeight = (weight: IOFontWeight): IOFontWeight => {
+  const currentWeight = weights.indexOf(weight);
+  return currentWeight === weights.length - 1
+    ? weight
+    : weights[currentWeight + 1];
 };
 
 /**
@@ -80,42 +91,73 @@ type FontStyleObject = {
  * @param isItalic
  */
 export const makeFontFamilyName = (
-  font: FontFamily,
-  weight?: IOFontWeight,
-  isItalic: boolean = false
-): string =>
+  font: IOFontFamily,
+  weight: IOFontWeight = defaultWeight,
+  fontStyle: TextStyle["fontStyle"] = "normal"
+): IOFontFamily =>
   Platform.select({
     web: fonts[font],
-    android: `${fonts[font]}-${weight || "Regular"}${isItalic ? "Italic" : ""}`,
+    android: `${fonts[font]}-${weight || "Regular"}${
+      fontStyle === "italic" ? "Italic" : ""
+    }`,
     ios: fonts[font],
-    default: "undefined"
+    default: fonts[font]
   });
 
+/**
+ * Default `IOText` typography style
+ */
+const defaultFont: IOFontFamily = "TitilliumSansPro";
+const defaultWeight: IOFontWeight = "Regular";
+const defaultFontSize: IOFontSize = 16;
+
 /**
  * Return a {@link FontStyleObject} with the fields filled based on the platform (iOS or Android).
- * @param weight
- * @param isItalic
+ * @param size
  * @param font
+ * @param weight
+ * @param fontStyle
  */
+
 export const makeFontStyleObject = (
-  weight: IOFontWeight | undefined = undefined,
-  isItalic: boolean | undefined = false,
-  font: FontFamily | undefined = "TitilliumSansPro"
-): FontStyleObject =>
-  Platform.select({
+  size: IOFontSize = defaultFontSize,
+  font: IOFontFamily = defaultFont,
+  lineHeight: TextStyle["lineHeight"],
+  weight: IOFontWeight = defaultWeight,
+  fontStyle: TextStyle["fontStyle"] = "normal",
+  boldEnabled: boolean = false
+): FontStyleObject => {
+  /* If bold text is currently enabled, we select the next
+     available `IOFontWeight` value */
+  const dynamicWeight = boldEnabled ? getBolderFontWeight(weight) : weight;
+
+  return Platform.select({
     web: {
-      fontFamily: makeFontFamilyName(font, weight, isItalic),
-      fontWeight: weight !== undefined ? fontWeightsMap[weight] : weight,
-      fontStyle: isItalic ? FontStyle.italic : FontStyle.normal
+      fontSize: size,
+      fontFamily: makeFontFamilyName(font, dynamicWeight, fontStyle),
+      fontWeight: fontWeights[dynamicWeight],
+      lineHeight,
+      fontStyle
     },
+    // On Android other type attributes, like `fontWeight` or `fontStyle`
+    // are directly managed through the `fontFamily` name, so we dont' need to
+    // include them in the object.
     android: {
-      includeFontPadding: false,
-      fontFamily: makeFontFamilyName(font, weight, isItalic)
+      fontSize: size,
+      fontFamily: makeFontFamilyName(font, dynamicWeight, fontStyle),
+      lineHeight,
+      includeFontPadding: false
     },
     ios: {
-      fontFamily: makeFontFamilyName(font, weight, isItalic),
-      fontWeight: weight !== undefined ? fontWeightsMap[weight] : weight,
-      fontStyle: isItalic ? FontStyle.italic : FontStyle.normal
+      fontSize: size,
+      fontFamily: makeFontFamilyName(font, dynamicWeight, fontStyle),
+      fontWeight: fontWeights[dynamicWeight],
+      lineHeight,
+      fontStyle
     },
-    default: { fontFamily: "undefined" }
+    default: {
+      fontSize: size,
+      fontFamily: makeFontFamilyName(font, dynamicWeight, fontStyle)
+    }
   });
+};

package/lib/commonjs/components/typography/LabelHeader.js

@@ -1,44 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.labelHeaderLineHeight = exports.labelHeaderFontSize = exports.labelHeaderDefaultColor = exports.LabelHeader = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _core = require("../../core");
-var _Factory = require("./Factory");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const labelHeaderFontSize = 14;
-exports.labelHeaderFontSize = labelHeaderFontSize;
-const labelHeaderLineHeight = 18;
-exports.labelHeaderLineHeight = labelHeaderLineHeight;
-const labelHeaderDefaultColor = _core.IOThemeLight["textBody-default"];
-exports.labelHeaderDefaultColor = labelHeaderDefaultColor;
-const labelHeaderFontName = "ReadexPro";
-const labelHeaderDefaultWeight = "Regular";
-
-// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyLabelHeaderFontName = "TitilliumSansPro";
-const legacyLabelHeaderWeight = "Semibold";
-const legacyLabelHeaderLineHeight = 20;
-/**
- * `LabelHeader` typographic style
- */
-const LabelHeader = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
-  const {
-    isExperimental
-  } = (0, _core.useIOExperimentalDesign)();
-  // console.log("isExperimental", isExperimental);
-  return (0, _Factory.useTypographyFactory)({
-    ...props,
-    defaultWeight: isExperimental ? labelHeaderDefaultWeight : legacyLabelHeaderWeight,
-    defaultColor: labelHeaderDefaultColor,
-    font: isExperimental ? labelHeaderFontName : legacyLabelHeaderFontName,
-    fontStyle: {
-      fontSize: labelHeaderFontSize,
-      lineHeight: isExperimental ? labelHeaderLineHeight : legacyLabelHeaderLineHeight
-    }
-  }, ref);
-});
-exports.LabelHeader = LabelHeader;
-//# sourceMappingURL=LabelHeader.js.map