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

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 ?? "Semibold",
+      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 ?? "Semibold",
+      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 ?? "Semibold",
+      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>
     );
   }
 );