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

package/src/components/typography/IOText.tsx

@@ -0,0 +1,157 @@
+import React, { ComponentProps, forwardRef, useMemo } from "react";
+import {
+  ColorValue,
+  GestureResponderEvent,
+  Text,
+  TextStyle,
+  View
+} from "react-native";
+import { IOColors, useIOExperimentalDesign, useIOTheme } from "../../core";
+import { useBoldTextEnabled } from "../../utils/accessibility";
+import {
+  IOFontFamily,
+  IOFontSize,
+  IOFontWeight,
+  makeFontStyleObject
+} from "../../utils/fonts";
+
+/**
+ * We exclude all of the following props when we define a new
+ * typographic style in which all of these visual attributes
+ * are already defined.
+ */
+export type IOTextStyle = Omit<
+  TextStyle,
+  "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "fontStyle"
+>;
+
+export type TypographicStyleProps = Omit<
+  IOTextProps,
+  "style" | "font" | "size" | "weight" | "color" | "lineHeight" | "fontStyle"
+> & { textStyle?: IOTextStyle; style?: IOTextStyle } & {
+  color?: IOTextBaseProps["color"];
+};
+
+/**
+ * The specific properties needed to calculate the font style using {@link makeFontStyleObject} (these information
+ * cannot be included in the default StyleProp<TextStyle>
+ */
+type IOTextBaseProps = {
+  size?: IOFontSize;
+  weight?: IOFontWeight;
+  color?: IOColors;
+  font?: IOFontFamily;
+  lineHeight?: TextStyle["lineHeight"];
+  fontStyle?: TextStyle["fontStyle"];
+  textStyle?: IOTextStyle;
+  style?: IOTextStyle;
+};
+
+type IOTextExcludedProps = Omit<
+  ComponentProps<typeof Text>,
+  "allowFontScaling" | "maxFontSizeMultiplier" | "style"
+>;
+
+export type IOTextProps = IOTextBaseProps & IOTextExcludedProps;
+
+/**
+ * Extend `TypographicStyleProps` with extra props for styles that
+ * can be used as links
+ */
+export type TypographicStyleAsLinkProps =
+  | {
+      color?: never;
+      asLink: true;
+      onPress: (event: GestureResponderEvent) => void;
+    }
+  | { color?: IOColors; asLink?: false };
+
+/**
+ * Decorate the function {@link makeFontStyleObject} with the additional color calculation.
+ * @param color A value key from {@link IOColors}, transformed here in {@link ColorValue}
+ * @param args the args of the function {@link makeFontStyleObject}
+ */
+const calculateTextStyle = (
+  color: IOColors,
+  ...args: Parameters<typeof makeFontStyleObject>
+) => ({
+  ...makeFontStyleObject(...args),
+  color: IOColors[color]
+});
+
+/**
+ * `IOText` is the core Typography component used to render a text.
+ * It accepts all the default text style `StyleProp<TextStyle>` (excluding the ones already applied) in addition with {@link IOTextBaseProps}
+ * used to calculate at runtime the platform-dependent styles.
+ * @param props
+ * @constructor
+ */
+export const IOText = forwardRef<View, IOTextProps>(
+  (
+    {
+      color,
+      size,
+      font,
+      lineHeight,
+      weight,
+      fontStyle,
+      textStyle,
+      style,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const theme = useIOTheme();
+    const boldEnabled = useBoldTextEnabled();
+
+    const { isExperimental } = useIOExperimentalDesign();
+
+    const computedStyleObj = useMemo(
+      () =>
+        calculateTextStyle(
+          color ?? theme["textBody-default"],
+          size,
+          font,
+          lineHeight,
+          weight,
+          fontStyle,
+          boldEnabled
+        ),
+      [color, theme, size, font, lineHeight, weight, fontStyle, boldEnabled]
+    );
+
+    /* In some cases, for example when we use color transitions with
+    `reanimated` we need to manage chromatic values as `ColorValue`
+    or `string` (not `IOColors`). So we keep a way to override
+    the the `color' attribute without giving the ability to
+    override all other all other typographic attributes
+    through the `style' prop. */
+    const fontStyleObj = style?.color
+      ? [{ ...computedStyleObj, color: style?.color }]
+      : computedStyleObj;
+
+    /* Some typographic styles like `H5` have certain `TextStyle` properties
+     like `textTransform` or `letterSpacing` that we want to apply to the text.
+     We use the `textStyle` prop to pass these properties to the `IOText`
+     component and preserve the ability to define the `style` prop as well.
+     The `style` prop is the last one to be applied, so we can properly
+     override the `color` attribute.
+     */
+    const styleObj = style
+      ? [textStyle ?? {}, fontStyleObj ?? {}, style]
+      : [textStyle ?? {}, fontStyleObj ?? {}];
+
+    /* Accessible typography based on the `fontScale` parameter */
+    const accessibleFontSizeProps: ComponentProps<typeof Text> = {
+      allowFontScaling: isExperimental,
+      maxFontSizeMultiplier: 1.25
+    };
+
+    return (
+      <Text ref={ref} style={styleObj} {...props} {...accessibleFontSizeProps}>
+        {children}
+      </Text>
+    );
+  }
+);

package/src/components/typography/Label.tsx

@@ -1,58 +1,51 @@
-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,
-  IOColorsStatusForeground,
-  IOVisualCostants,
-  useIOExperimentalDesign
-} from "../../core";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
-import { useTypographyFactory } from "./Factory";
-import {
-  ExternalTypographyProps,
-  FontSize,
-  TypographyProps,
-  fontSizeMapping,
-  lineHeightMapping
-} from "./common";
-
-type PartialAllowedColors = Extract<IOColors, "black" | "white" | "grey-700">;
-type AllowedColors = PartialAllowedColors | IOColorsStatusForeground;
-type AllowedWeight = Extract<IOFontWeight, "Bold" | "Regular" | "Semibold">;
-type LabelProps = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
-> & { fontSize?: FontSize };
+  IOText,
+  IOTextProps,
+  TypographicStyleAsLinkProps,
+  TypographicStyleProps
+} from "./IOText";
 
-const font: FontFamily = "TitilliumSansPro";
-const labelDefaultWeight = "Bold";
-const labelDefaultcolor = "black";
+type LabelProps = TypographicStyleProps & {
+  weight?: Extract<IOFontWeight, "Regular" | "Semibold" | "Bold">;
+} & TypographicStyleAsLinkProps;
 
 /**
- * `Label` typographic style
+ * `LabelSmall` typographic style
  */
-export const Label = React.forwardRef<View, LabelProps>(
-  ({ fontSize, ...props }, ref) => {
-    const { isExperimental } = useIOExperimentalDesign();
+export const Label = forwardRef<View, LabelProps>(
+  (
+    { weight: customWeight, color: customColor, asLink, ...props },
+    ref?: ForwardedRef<View>
+  ) => {
+    const theme = useIOTheme();
+
+    const defaultColor = asLink
+      ? theme["interactiveElem-default"]
+      : theme["textBody-tertiary"];
+
+    const LabelProps: IOTextProps = {
+      ...props,
+      font: "TitilliumSansPro",
+      weight: customWeight ?? "Bold",
+      size: 16,
+      lineHeight: 24,
+      color: customColor ?? defaultColor,
+      ...(asLink
+        ? {
+            accessibilityRole: "link",
+            textStyle: { textDecorationLine: "underline" }
+          }
+        : {})
+    };
 
-    return useTypographyFactory<AllowedWeight, AllowedColors>(
-      {
-        ...props,
-        allowFontScaling: isExperimental,
-        maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-        dynamicTypeRamp: "footnote" /* iOS only */,
-        defaultWeight: labelDefaultWeight,
-        defaultColor: labelDefaultcolor,
-        font,
-        fontStyle: {
-          fontSize: fontSize
-            ? fontSizeMapping[fontSize]
-            : fontSizeMapping.regular,
-          lineHeight: fontSize
-            ? lineHeightMapping[fontSize]
-            : lineHeightMapping.regular
-        }
-      },
-      ref
+    return (
+      <IOText ref={ref} {...LabelProps}>
+        {props.children}
+      </IOText>
     );
   }
 );

package/src/components/typography/LabelMini.tsx

@@ -0,0 +1,52 @@
+import React, { ForwardedRef, forwardRef } from "react";
+import { View } from "react-native";
+import { useIOTheme } from "../../core";
+import { IOFontWeight } from "../../utils/fonts";
+import {
+  IOText,
+  IOTextProps,
+  TypographicStyleAsLinkProps,
+  TypographicStyleProps
+} from "./IOText";
+
+type LabelMiniProps = TypographicStyleProps & {
+  weight?: Extract<IOFontWeight, "Regular" | "Semibold" | "Bold">;
+} & TypographicStyleAsLinkProps;
+
+/**
+ * `LabelMini` typographic style
+ */
+export const LabelMini = forwardRef<View, LabelMiniProps>(
+  (
+    { weight: customWeight, color: customColor, asLink, ...props },
+    ref?: ForwardedRef<View>
+  ) => {
+    const theme = useIOTheme();
+
+    const defaultColor = asLink
+      ? theme["interactiveElem-default"]
+      : theme["textBody-tertiary"];
+
+    const LabelMiniProps: IOTextProps = {
+      ...props,
+      dynamicTypeRamp: "footnote" /* iOS only */,
+      font: "TitilliumSansPro",
+      weight: customWeight ?? "Bold",
+      size: 12,
+      lineHeight: 18,
+      color: customColor ?? defaultColor,
+      ...(asLink
+        ? {
+            accessibilityRole: "link",
+            textStyle: { textDecorationLine: "underline" }
+          }
+        : {})
+    };
+
+    return (
+      <IOText ref={ref} {...LabelMiniProps}>
+        {props.children}
+      </IOText>
+    );
+  }
+);

package/src/components/typography/LabelSmall.tsx

@@ -1,74 +1,52 @@
-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,
-  | "blue"
-  | "bluegrey"
-  | "red"
-  | "white"
-  | "bluegreyDark"
-  | "grey-700"
-  | "grey-200"
->;
-type AllowedColors = PartialAllowedColors | IOTheme["textBody-tertiary"];
-type AllowedWeight = Extract<IOFontWeight, "Bold" | "Regular" | "Semibold">;
-
-type FontSize = "regular" | "small";
-type AllowedFontSize = { fontSize?: FontSize };
-
-type LabelSmallProps = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
-> &
-  AllowedFontSize;
-
-const font: FontFamily = "TitilliumSansPro";
-const fontSizeMapping: Record<FontSize, number> = {
-  regular: 14,
-  small: 12
-};
-const lineHeightMapping: Record<FontSize, number> = {
-  regular: 21,
-  small: 18
-};
-const labelDefaultWeight = "Bold";
-const labelDefaultcolor = "blue";
+type LabelSmallProps = TypographicStyleProps & {
+  weight?: Extract<IOFontWeight, "Regular" | "Semibold" | "Bold">;
+} & TypographicStyleAsLinkProps;
 
 /**
  * `LabelSmall` typographic style
  */
-export const LabelSmall = React.forwardRef<View, LabelSmallProps>(
-  (props, ref) => {
-    const { isExperimental } = useIOExperimentalDesign();
+export const LabelSmall = forwardRef<View, LabelSmallProps>(
+  (
+    { weight: customWeight, color: customColor, asLink, ...props },
+    ref?: ForwardedRef<View>
+  ) => {
+    const theme = useIOTheme();
+
+    const defaultColor = asLink
+      ? theme["interactiveElem-default"]
+      : theme["textBody-tertiary"];
+
+    const LabelSmallProps: IOTextProps = {
+      ...props,
+      dynamicTypeRamp: "footnote" /* iOS only */,
+      font: "TitilliumSansPro",
+      weight: customWeight ?? "Bold",
+      size: 14,
+      lineHeight: 21,
+      color: customColor ?? defaultColor,
+      ...(asLink
+        ? {
+            accessibilityRole: "link",
+            textStyle: { textDecorationLine: "underline" }
+          }
+        : {})
+    };
 
-    return useTypographyFactory<AllowedWeight, AllowedColors>(
-      {
-        ...props,
-        allowFontScaling: isExperimental,
-        maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-        dynamicTypeRamp: "footnote" /* iOS only */,
-        defaultWeight: labelDefaultWeight,
-        defaultColor: labelDefaultcolor,
-        font,
-        fontStyle: {
-          fontSize: props.fontSize
-            ? fontSizeMapping[props.fontSize]
-            : fontSizeMapping.regular,
-          lineHeight: props.fontSize
-            ? lineHeightMapping[props.fontSize]
-            : lineHeightMapping.regular
-        }
-      },
-      ref
+    return (
+      <IOText ref={ref} {...LabelSmallProps}>
+        {props.children}
+      </IOText>
     );
   }
 );

package/src/components/typography/LabelSmallAlt.tsx

@@ -1,61 +1,41 @@
-import React from "react";
+import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { IOVisualCostants, useIOExperimentalDesign } from "../../core";
-import type { IOColors, IOTheme } from "../../core/IOColors";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
-import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+import { useIOExperimentalDesign, useIOTheme } from "../../core";
+import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
+import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
-type PartialAllowedColors = Extract<
-  IOColors,
-  | "blue"
-  | "bluegrey"
-  | "red"
-  | "white"
-  | "bluegreyDark"
-  | "grey-700"
-  | "grey-200"
->;
-type AllowedColors = PartialAllowedColors | IOTheme["textBody-tertiary"];
-type AllowedWeight = Extract<IOFontWeight, "Bold" | "Regular" | "Semibold">;
-
-type LabelSmallAltProps = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-const labelFontSize = 14;
-const labelLineHeight = 21;
-const fontName: FontFamily = "ReadexPro";
-const defaultColor: AllowedColors = "black";
-const defaultWeight: AllowedWeight = "Regular";
+const fontSize = 14;
+const lineHeight = 21;
+const fontName: IOFontFamily = "ReadexPro";
+const fontWeight: IOFontWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyLabelFontSize = 16;
-const legacyFontName: FontFamily = "TitilliumSansPro";
-const legacyDefaultWeight: AllowedWeight = "Semibold";
+const legacyFontSize = 16;
+const legacyFontName: IOFontFamily = "TitilliumSansPro";
+const legacyFontWeight: IOFontWeight = "Semibold";
 
 /**
  * `LabelSmallAlt` typographic style. It's referenced as `LabelSmallReadex` in the design projects.
  */
-export const LabelSmallAlt = React.forwardRef<View, LabelSmallAltProps>(
-  (props, ref) => {
+export const LabelSmallAlt = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+    const theme = useIOTheme();
     const { isExperimental } = useIOExperimentalDesign();
 
-    return useTypographyFactory<AllowedWeight, AllowedColors>(
-      {
-        ...props,
-        allowFontScaling: isExperimental,
-        maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-        dynamicTypeRamp: "footnote" /* iOS only */,
-        defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
-        defaultColor,
-        font: isExperimental ? fontName : legacyFontName,
-        fontStyle: {
-          fontSize: isExperimental ? labelFontSize : legacyLabelFontSize,
-          lineHeight: labelLineHeight
-        }
-      },
-      ref
+    const LabelSmallAltProps: IOTextProps = {
+      ...props,
+      dynamicTypeRamp: "footnote" /* iOS only */,
+      font: isExperimental ? fontName : legacyFontName,
+      weight: isExperimental ? fontWeight : legacyFontWeight,
+      size: isExperimental ? fontSize : legacyFontSize,
+      lineHeight,
+      color: customColor ?? theme["textBody-tertiary"]
+    };
+
+    return (
+      <IOText ref={ref} {...LabelSmallAltProps}>
+        {props.children}
+      </IOText>
     );
   }
 );