@pagopa/io-app-design-system 1.42.0 → 2.0.0-1

package/src/components/textInput/TextInputBase.tsx

@@ -26,7 +26,7 @@ import {
   useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
-import { makeFontStyleObject } from "../../utils/fonts";
+import { IOFontSize, makeFontStyleObject } from "../../utils/fonts";
 import { RNTextInputProps, getInputPropsByType } from "../../utils/textInput";
 import { InputType, WithTestID } from "../../utils/types";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons";
@@ -62,7 +62,7 @@ const inputPaddingVertical: IOSpacingScale = 8;
 const inputRadius: number = 8;
 const inputTransitionDuration: number = 250;
 const inputLabelScaleFactor: number = 0.75; /* 16pt becomes 12pt */
-const inputLabelFontSize: number = 16;
+const inputLabelFontSize: IOFontSize = 16;
 const inputDisabledOpacity: number = 0.5;
 const inputRightElementMargin: IOSpacingScale = 8;
 const iconColor: IOColors = "grey-300";
@@ -99,7 +99,6 @@ const styles = StyleSheet.create({
     Android where the text input scrolls, if the user apply some
     gestures on it with keyboard open */
     paddingVertical: 0,
-    fontSize: 16,
     marginTop: inputMarginTop,
     height: "100%",
     /* Slightly move the input on the left on Android
@@ -107,11 +106,21 @@ const styles = StyleSheet.create({
     ...(Platform.OS === "android" && { marginLeft: -4 })
   },
   textInputStyleFont: {
-    ...makeFontStyleObject("Regular", false, "ReadexPro")
+    ...makeFontStyleObject(
+      inputLabelFontSize,
+      "ReadexPro",
+      undefined,
+      "Regular"
+    )
   },
   // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
   textInputStyleLegacyFont: {
-    ...makeFontStyleObject("Semibold", false, "TitilliumSansPro")
+    ...makeFontStyleObject(
+      inputLabelFontSize,
+      "TitilliumSansPro",
+      undefined,
+      "Semibold"
+    )
   },
   textInputLabelWrapper: {
     position: "absolute",
@@ -122,9 +131,13 @@ const styles = StyleSheet.create({
     justifyContent: "center"
   },
   textInputLabel: {
-    ...makeFontStyleObject("Regular", false, "TitilliumSansPro"),
-    color: inputLabelColor,
-    fontSize: inputLabelFontSize
+    ...makeFontStyleObject(
+      inputLabelFontSize,
+      "TitilliumSansPro",
+      undefined,
+      "Regular"
+    ),
+    color: inputLabelColor
   }
 });
 

package/src/components/typography/BaseTypography.tsx

@@ -1,8 +1,9 @@
 import React, { useMemo } from "react";
-import { StyleProp, Text, TextStyle, View } from "react-native";
+import { Text, TextStyle, View } from "react-native";
 import { IOColors } from "../../core/IOColors";
 import {
   IOFontFamily,
+  IOFontSize,
   IOFontWeight,
   makeFontStyleObject
 } from "../../utils/fonts";
@@ -19,7 +20,7 @@ type BaseTypographyProps = {
 };
 
 type OwnProps = BaseTypographyProps & {
-  fontStyle?: StyleProp<TextStyle>;
+  fontStyle?: TextStyle;
 } & React.ComponentPropsWithRef<typeof Text>;
 
 /**
@@ -41,13 +42,21 @@ const calculateTextStyle = (
  * used to calculate at runtime the platform-dependent styles.
  * This component shouldn't be used in the application but only to compose others `Typography elements`.
  * @param props
+ * @deprecated Use {@link IOText} instead
  * @constructor
  */
 export const BaseTypography = React.forwardRef<View, OwnProps>((props, ref) => {
   const fontStyle = useMemo(
     () =>
-      calculateTextStyle(props.color, props.weight, props.isItalic, props.font),
-    [props.color, props.weight, props.isItalic, props.font]
+      calculateTextStyle(
+        props.color,
+        props.fontStyle?.fontSize as IOFontSize,
+        props.font,
+        props.fontStyle?.lineHeight,
+        props.weight,
+        props.isItalic ? "italic" : "normal"
+      ),
+    [props.color, props.fontStyle, props.font, props.weight, props.isItalic]
   );
 
   const style = props.style

package/src/components/typography/Body.tsx

@@ -1,50 +1,55 @@
-import React from "react";
+import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
+import { useIOTheme } from "../../core";
+import { IOFontWeight } from "../../utils/fonts";
 import {
-  IOColors,
-  IOTheme,
-  IOVisualCostants,
-  useIOExperimentalDesign
-} from "../../core";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
-import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+  IOText,
+  IOTextProps,
+  TypographicStyleAsLinkProps,
+  TypographicStyleProps
+} from "./IOText";
 
-type PartialAllowedColors = Extract<
-  IOColors,
-  "bluegreyDark" | "white" | "blue" | "bluegrey" | "bluegreyLight"
->;
-type AllowedColors = PartialAllowedColors | IOTheme["textBody-default"];
-type AllowedWeight = IOFontWeight | "Regular" | "Semibold";
-
-type BodyProps = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-const fontName: FontFamily = "TitilliumSansPro";
+type BodyStyleProps = TypographicStyleProps & {
+  weight?: Extract<IOFontWeight, "Regular" | "Semibold" | "Bold">;
+} & TypographicStyleAsLinkProps;
 
 export const bodyFontSize = 16;
 export const bodyLineHeight = 24;
-export const bodyDefaultColor: AllowedColors = "bluegrey";
-export const bodyDefaultWeight: AllowedWeight = "Regular";
 
 /**
  * `Body` typographic style
  */
-export const Body = React.forwardRef<View, BodyProps>((props, ref) => {
-  const { isExperimental } = useIOExperimentalDesign();
+export const Body = forwardRef<View, BodyStyleProps>(
+  (
+    { weight: customWeight, color: customColor, asLink, ...props },
+    ref?: ForwardedRef<View>
+  ) => {
+    const theme = useIOTheme();
 
-  return useTypographyFactory<AllowedWeight, AllowedColors>(
-    {
+    const defaultColor = asLink
+      ? theme["interactiveElem-default"]
+      : theme["textBody-tertiary"];
+
+    const BodyProps: IOTextProps = {
       ...props,
-      allowFontScaling: isExperimental,
-      maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-      dynamicTypeRamp: "body" /* iOS only */,
-      defaultWeight: bodyDefaultWeight,
-      defaultColor: bodyDefaultColor,
-      font: fontName,
-      fontStyle: { fontSize: bodyFontSize, lineHeight: bodyLineHeight }
-    },
-    ref
-  );
-});
+      dynamicTypeRamp: "body", // iOS only
+      font: "TitilliumSansPro",
+      weight: customWeight ?? "Regular",
+      size: bodyFontSize,
+      lineHeight: bodyLineHeight,
+      color: customColor ?? defaultColor,
+      ...(asLink
+        ? {
+            accessibilityRole: "link",
+            textStyle: { textDecorationLine: "underline" }
+          }
+        : {})
+    };
+
+    return (
+      <IOText ref={ref} {...BodyProps}>
+        {props.children}
+      </IOText>
+    );
+  }
+);

package/src/components/typography/BodyMonospace.tsx

@@ -1,46 +1,33 @@
-import React from "react";
+import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import {
-  IOVisualCostants,
-  useIOExperimentalDesign,
-  type IOColors
-} from "../../core";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
-import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
-
-type AllowedColors = Extract<IOColors, "bluegreyDark" | "bluegrey">;
-type AllowedWeight = Extract<IOFontWeight, "Medium">;
-
-type BodyMonospaceProps = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-const fontName: FontFamily = "DMMono";
-const fontSize = 16;
-const lineHeight = 24;
-const monospaceDefaultWeight = "Medium";
-const monospaceDefaultcolor = "bluegrey";
+import { useIOTheme } from "../../core";
+import { bodyFontSize, bodyLineHeight } from "./Body";
+import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
 /**
  * `BodyMonospace` typographic style
  */
-export const BodyMonospace = React.forwardRef<View, BodyMonospaceProps>(
-  (props, ref) => {
-    const { isExperimental } = useIOExperimentalDesign();
+export const BodyMonospace = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+    const theme = useIOTheme();
+
+    const BodyProps: IOTextProps = {
+      ...props,
+      dynamicTypeRamp: "body", // iOS only
+      font: "DMMono",
+      weight: "Medium",
+      size: bodyFontSize,
+      lineHeight: bodyLineHeight,
+      color: customColor ?? theme["textBody-tertiary"],
+      textStyle: {
+        letterSpacing: 0.5
+      }
+    };
 
-    return useTypographyFactory<AllowedWeight, AllowedColors>(
-      {
-        ...props,
-        allowFontScaling: isExperimental,
-        maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-        dynamicTypeRamp: "body" /* iOS only */,
-        defaultWeight: monospaceDefaultWeight,
-        defaultColor: monospaceDefaultcolor,
-        font: fontName,
-        fontStyle: { fontSize, lineHeight }
-      },
-      ref
+    return (
+      <IOText ref={ref} {...BodyProps}>
+        {props.children}
+      </IOText>
     );
   }
 );

package/src/components/typography/ButtonText.tsx

@@ -1,51 +1,41 @@
-import React from "react";
+import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
+import { useIOExperimentalDesign } from "../../core";
 import { IOColors } from "../../core/IOColors";
-import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
-import { IOVisualCostants, useIOExperimentalDesign } from "../../core";
-import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+import { IOFontFamily, IOFontSize, IOFontWeight } from "../../utils/fonts";
+import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
-export type ButtonTextAllowedColors = IOColors;
-type AllowedWeight = Extract<IOFontWeight, "Semibold" | "Regular" | "Bold">;
-
-type ButtonTextProps = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, ButtonTextAllowedColors>
->;
-
-export const buttonTextFontSize = 16;
+export const buttonTextFontSize: IOFontSize = 16;
 /* Needed to render `ButtonOutline` and`ButtonLink` because they use
 `AnimatedText` for color transition through Reanimated */
-const buttonTextDefaultColor: ButtonTextAllowedColors = "white";
-const buttonTextFontName: IOFontFamily = "ReadexPro";
-const buttonTextDefaultWeight: AllowedWeight = "Regular";
+const defaultColor: IOColors = "white";
+const fontName: IOFontFamily = "ReadexPro";
+const fontWeight: IOFontWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyTextFontName: IOFontFamily = "TitilliumSansPro";
-const legacyTextDefaultWeight: AllowedWeight = "Bold";
+const legacyFontName: IOFontFamily = "TitilliumSansPro";
+const legacyFontWeight: IOFontWeight = "Bold";
 
 /**
  * `ButtonText` typographic style
  */
-export const ButtonText = React.forwardRef<View, ButtonTextProps>(
-  (props, ref) => {
+export const ButtonText = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
     const { isExperimental } = useIOExperimentalDesign();
 
-    return useTypographyFactory<AllowedWeight, ButtonTextAllowedColors>(
-      {
-        ...props,
-        allowFontScaling: isExperimental,
-        maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-        defaultWeight: isExperimental
-          ? buttonTextDefaultWeight
-          : legacyTextDefaultWeight,
-        defaultColor: buttonTextDefaultColor,
-        font: isExperimental ? buttonTextFontName : legacyTextFontName,
-        fontStyle: {
-          fontSize: buttonTextFontSize
-        }
-      },
-      ref
+    const ButtonTextProps: IOTextProps = {
+      ...props,
+      font: isExperimental ? fontName : legacyFontName,
+      weight: isExperimental ? fontWeight : legacyFontWeight,
+      size: buttonTextFontSize,
+      lineHeight: 20,
+      color: customColor ?? defaultColor
+    };
+
+    return (
+      <IOText ref={ref} {...ButtonTextProps}>
+        {props.children}
+      </IOText>
     );
   }
 );

package/src/components/typography/Caption.tsx

@@ -1,45 +1,43 @@
-import React from "react";
+import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { IOTheme, IOVisualCostants, useIOExperimentalDesign } from "../../core";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
-import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+import { IOTheme, useIOExperimentalDesign, useIOTheme } from "../../core";
+import { IOFontFamily, IOFontSize, IOFontWeight } from "../../utils/fonts";
+import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
-type AllowedColors = IOTheme["textHeading-default"];
-type AllowedWeight = Extract<IOFontWeight, "Regular">;
+const defaultColor: keyof IOTheme = "textBody-default";
 
-type CaptionProps = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-export const captionFontSize = 12;
-const font: FontFamily = "ReadexPro";
-const defaultColor: AllowedColors = "black";
-const defaultWeight: AllowedWeight = "Regular";
+export const captionFontSize: IOFontSize = 12;
+const fontName: IOFontFamily = "ReadexPro";
+const fontWeight: IOFontWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyFont: FontFamily = "TitilliumSansPro";
+const legacyFontName: IOFontFamily = "TitilliumSansPro";
 
 /**
  * `Caption` typographic style
  */
-export const Caption = React.forwardRef<View, CaptionProps>((props, ref) => {
-  const { isExperimental } = useIOExperimentalDesign();
+export const Caption = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+    const theme = useIOTheme();
+    const { isExperimental } = useIOExperimentalDesign();
 
-  return useTypographyFactory<AllowedWeight, AllowedColors>(
-    {
+    const CaptionProps: IOTextProps = {
       ...props,
-      allowFontScaling: isExperimental,
-      maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-      dynamicTypeRamp: "caption1" /* iOS only */,
-      defaultWeight,
-      defaultColor,
-      font: isExperimental ? font : legacyFont,
-      fontStyle: {
-        fontSize: captionFontSize,
-        textTransform: "uppercase"
+      dynamicTypeRamp: "caption1", // iOS only
+      font: isExperimental ? fontName : legacyFontName,
+      size: captionFontSize,
+      weight: fontWeight,
+      color: customColor ?? theme[defaultColor],
+      textStyle: {
+        textTransform: "uppercase",
+        letterSpacing: 0.5
       }
-    },
-    ref
-  );
-});
+    };
+
+    return (
+      <IOText ref={ref} {...CaptionProps}>
+        {props.children}
+      </IOText>
+    );
+  }
+);

package/src/components/typography/Chip.tsx

@@ -1,45 +1,33 @@
-import React from "react";
+import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import {
-  IOColors,
-  IOVisualCostants,
-  useIOExperimentalDesign
-} from "../../core";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
-import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
-
-type AllowedColors = IOColors;
-type AllowedWeight = Extract<IOFontWeight, "Semibold" | "Regular">;
-
-type ChipProps = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-const chipFontSize = 12;
-const font: FontFamily = "ReadexPro";
-const defaultColor: AllowedColors = "black";
-const defaultWeight: AllowedWeight = "Regular";
+import { useIOExperimentalDesign, useIOTheme } from "../../core";
+import { IOFontFamily } from "../../utils/fonts";
+import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
+const fontName: IOFontFamily = "ReadexPro";
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyFont: FontFamily = "TitilliumSansPro";
+const legacyFontName: IOFontFamily = "TitilliumSansPro";
 /**
  * `Chip` typographic style
  */
-export const Chip = React.forwardRef<View, ChipProps>((props, ref) => {
-  const { isExperimental } = useIOExperimentalDesign();
+export const Chip = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+    const theme = useIOTheme();
+    const { isExperimental } = useIOExperimentalDesign();
 
-  return useTypographyFactory<AllowedWeight, AllowedColors>(
-    {
+    const ChipProps: IOTextProps = {
       ...props,
-      allowFontScaling: isExperimental,
-      maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-      dynamicTypeRamp: "caption2" /* iOS only */,
-      defaultWeight,
-      defaultColor,
-      font: isExperimental ? font : legacyFont,
-      fontStyle: { fontSize: chipFontSize }
-    },
-    ref
-  );
-});
+      dynamicTypeRamp: "caption2", // iOS only
+      font: isExperimental ? fontName : legacyFontName,
+      weight: "Regular",
+      size: 12,
+      color: customColor ?? theme["textBody-default"]
+    };
+
+    return (
+      <IOText ref={ref} {...ChipProps}>
+        {props.children}
+      </IOText>
+    );
+  }
+);

package/src/components/typography/Factory.tsx

@@ -71,6 +71,7 @@ function isDefaultFactoryProps<WeightPropsType, ColorsPropsType>(
  * The default values can be calculated specifying some fallback values using {@link DefaultArgumentProps}
  * or with a factory function to define some custom behaviour using {@link DefaultFactoryProps}
  * @param props
+ * @deprecated Use `IOText` instead. Or use the new typographic styles that use it.
  */
 export function useTypographyFactory<
   WeightPropsType extends IOFontWeight,

package/src/components/typography/H1.tsx

@@ -1,49 +1,44 @@
-import React from "react";
+import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { IOTheme, IOVisualCostants, useIOExperimentalDesign } from "../../core";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
-import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+import { IOTheme, useIOExperimentalDesign, useIOTheme } from "../../core";
+import { IOFontFamily, IOFontSize, IOFontWeight } from "../../utils/fonts";
+import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
-type AllowedColors = IOTheme["textHeading-default"];
-type AllowedWeight = Extract<IOFontWeight, "Regular" | "Semibold">;
+const defaultColor: keyof IOTheme = "textHeading-default";
 
-type H1Props = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-export const h1FontSize = 28;
+export const h1FontSize: IOFontSize = 28;
 export const h1LineHeight = 42;
-const fontName: FontFamily = "ReadexPro";
-const defaultColor: AllowedColors = "black";
-const defaultWeight: AllowedWeight = "Regular";
+const fontName: IOFontFamily = "ReadexPro";
+const fontWeight: IOFontWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyFont: FontFamily = "TitilliumSansPro";
-const legacyDefaultWeight: AllowedWeight = "Semibold";
-const legacyH1FontSize = 31;
+const legacyH1FontSize: IOFontSize = 31;
 const legacyH1LineHeight = 43;
+const legacyFontName: IOFontFamily = "TitilliumSansPro";
+const legacyFontWeight: IOFontWeight = "Semibold";
 
 /**
  * `H1` typographic style
  */
-export const H1 = React.forwardRef<View, H1Props>((props, ref) => {
-  const { isExperimental } = useIOExperimentalDesign();
+export const H1 = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+    const theme = useIOTheme();
+    const { isExperimental } = useIOExperimentalDesign();
 
-  return useTypographyFactory<AllowedWeight, AllowedColors>(
-    {
+    const H1Props: IOTextProps = {
       ...props,
-      allowFontScaling: isExperimental,
-      maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-      dynamicTypeRamp: "largeTitle" /* iOS only */,
-      defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
-      defaultColor,
-      font: isExperimental ? fontName : legacyFont,
-      fontStyle: {
-        fontSize: isExperimental ? h1FontSize : legacyH1FontSize,
-        lineHeight: isExperimental ? h1LineHeight : legacyH1LineHeight
-      }
-    },
-    ref
-  );
-});
+      dynamicTypeRamp: "largeTitle", // iOS only
+      font: isExperimental ? fontName : legacyFontName,
+      weight: isExperimental ? fontWeight : legacyFontWeight,
+      size: isExperimental ? h1FontSize : legacyH1FontSize,
+      lineHeight: isExperimental ? h1LineHeight : legacyH1LineHeight,
+      color: customColor ?? theme[defaultColor]
+    };
+
+    return (
+      <IOText ref={ref} {...H1Props}>
+        {props.children}
+      </IOText>
+    );
+  }
+);