@pagopa/io-app-design-system 1.9.2 → 1.10.0

package/src/components/typography/LabelLink.tsx

@@ -1,5 +1,5 @@
 import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
-import type { IOColors } from "../../core";
+import { useIOExperimentalDesign, type IOColors } from "../../core";
 import {
   ExternalTypographyProps,
   FontSize,
@@ -20,18 +20,22 @@ type LinkProps = ExternalTypographyProps<
 
 const fontName: IOFontFamily = "TitilliumWeb";
 
+export const linkLegacyDefaultColor: AllowedColors = "blue";
+
 export const linkDefaultColor: AllowedColors = "blueIO-500";
 export const linkDefaultWeight: AllowedWeight = "SemiBold";
 
 /**
  * `Link` typographic style
  */
-export const LabelLink = (props: LinkProps) =>
-  useTypographyFactory<AllowedWeight, AllowedColors>({
+export const LabelLink = (props: LinkProps) => {
+  const { isExperimental } = useIOExperimentalDesign();
+
+  return useTypographyFactory<AllowedWeight, AllowedColors>({
     accessibilityRole: props.onPress ? "link" : undefined,
     ...props,
     defaultWeight: linkDefaultWeight,
-    defaultColor: linkDefaultColor,
+    defaultColor: isExperimental ? linkDefaultColor : linkLegacyDefaultColor,
     font: fontName,
     fontStyle: {
       fontSize: props.fontSize
@@ -43,3 +47,4 @@ export const LabelLink = (props: LinkProps) =>
       textDecorationLine: "underline"
     }
   });
+};

package/src/components/typography/LabelSmall.tsx

@@ -1,7 +1,8 @@
+import { 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 { ExternalTypographyProps, FontType, TypographyProps } from "./common";
 
 type PartialAllowedColors = Extract<
   IOColors,
@@ -15,15 +16,17 @@ type PartialAllowedColors = Extract<
 >;
 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;
+  AllowedFontSize &
+  FontType;
 
-const fontName: FontFamily = "TitilliumWeb";
+const defaultFontName: FontFamily = "TitilliumWeb";
 const fontSizeMapping: Record<FontSize, number> = {
   regular: 14,
   small: 12
@@ -34,15 +37,19 @@ const labelDefaultcolor = "blue";
 /**
  * `LabelSmall` typographic style
  */
-export const LabelSmall = (props: LabelSmallProps) =>
-  useTypographyFactory<AllowedWeight, AllowedColors>({
+export const LabelSmall = (props: LabelSmallProps) => {
+  const { isExperimental } = useIOExperimentalDesign();
+
+  return useTypographyFactory<AllowedWeight, AllowedColors>({
     ...props,
     defaultWeight: labelDefaultWeight,
     defaultColor: labelDefaultcolor,
-    font: fontName,
+    font:
+      isExperimental && props.font !== undefined ? props.font : defaultFontName,
     fontStyle: {
       fontSize: props.fontSize
         ? fontSizeMapping[props.fontSize]
         : fontSizeMapping.regular
     }
   });
+};

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

@@ -966,8 +966,8 @@ exports[`Test Typography Components LabelSmall Snapshot 5`] = `
 
 exports[`Test Typography Components Link Snapshot 1`] = `
 <Text
-  color="blueIO-500"
-  defaultColor="blueIO-500"
+  color="blue"
+  defaultColor="blue"
   defaultWeight="SemiBold"
   font="TitilliumWeb"
   fontStyle={
@@ -985,7 +985,7 @@ exports[`Test Typography Components Link Snapshot 1`] = `
         "textDecorationLine": "underline",
       },
       {
-        "color": "#0B3EE3",
+        "color": "#0073E6",
         "fontFamily": "Titillium Web",
         "fontStyle": "normal",
         "fontWeight": "600",

package/src/components/typography/common.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { StyleProp, Text, TextStyle } from "react-native";
 import type { IOColors } from "../../core";
-import { IOFontWeight } from "../../utils/fonts";
+import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
 import { RequiredAll } from "../../utils/types";
 
 /**
@@ -20,6 +20,13 @@ export const lineHeightMapping: Record<FontSize, number> = {
   mini: 18
 };
 
+/**
+ * Define the font name values for the typography elements
+ */
+export type FontType = {
+  font?: IOFontFamily;
+};
+
 /**
  * The style exported for the typography elements, without the fields characterizing the font style
  */

package/src/core/IOColors.ts

@@ -290,6 +290,10 @@ export type IOTheme = {
   // Status
   errorIcon: IOColors;
   errorText: IOColors;
+  // Pictograms
+  "pictogram-hands": IOColors;
+  "pictogram-tint-main": IOColors;
+  "pictogram-tint-secondary": IOColors;
 };
 
 export const IOThemeLight: IOTheme = {
@@ -312,7 +316,11 @@ export const IOThemeLight: IOTheme = {
   "divider-default": "grey-200",
   // Status
   errorIcon: "error-500",
-  errorText: "error-850"
+  errorText: "error-850",
+  // Pictograms
+  "pictogram-hands": "blueIO-500",
+  "pictogram-tint-main": "turquoise-150",
+  "pictogram-tint-secondary": "turquoise-500"
 };
 
 export const IOThemeDark: IOTheme = {
@@ -336,7 +344,11 @@ export const IOThemeDark: IOTheme = {
   "divider-default": "grey-850",
   // Status
   errorIcon: "error-400",
-  errorText: "error-400"
+  errorText: "error-400",
+  // Pictograms
+  "pictogram-hands": "white",
+  "pictogram-tint-main": "turquoise-150",
+  "pictogram-tint-secondary": "turquoise-500"
 };
 
 export const themeStatusColorsLightMode = asIOThemeColors({

package/src/core/IOSpacing.ts

@@ -4,11 +4,22 @@ Every margin/padding used by different components
 should use a value defined in the following scale.
 */
 
-export const IOSpacingScale = [
-  4, 6, 8, 12, 16, 20, 24, 28, 32, 40, 48, 56, 64, 72, 80
-] as const;
-
-export type IOSpacingScale = (typeof IOSpacingScale)[number];
+export type IOSpacingScale =
+  | 4
+  | 6
+  | 8
+  | 12
+  | 16
+  | 20
+  | 24
+  | 28
+  | 32
+  | 40
+  | 48
+  | 56
+  | 64
+  | 72
+  | 80;
 
 // Values used in the new `<Spacer>` component
 export type IOSpacer = Extract<IOSpacingScale, 4 | 8 | 16 | 24 | 32 | 40 | 48>;

package/src/utils/fonts.ts

@@ -6,14 +6,6 @@
 
 import { Platform } from "react-native";
 
-export type IOFontFamily = keyof typeof fonts;
-
-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];
-
 /**
  * Choose the font name based on the platform
  */
@@ -35,6 +27,14 @@ const fonts = {
   })
 };
 
+export type IOFontFamily = keyof typeof fonts;
+
+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];
+
 /**
  * Mapping between the nominal description of the weight (also the postfix used on Android) and the numeric value
  * used on iOS