npm - @pagopa/io-app-design-system - Versions diffs - 3.1.0 → 4.0.0 - Mend

@pagopa/io-app-design-system 3.1.0 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (228) hide show

package/src/components/modules/ModulePaymentNotice.tsx CHANGED Viewed

@@ -6,7 +6,7 @@ import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { Icon } from "../icons";
 import { HStack, VStack } from "../stack";
-import { H6, Label, LabelSmall } from "../typography";
+import { Body, H6, BodySmall } from "../typography";
 import { ModuleStatic } from "./ModuleStatic";
 import { PressableModuleBase } from "./PressableModuleBase";
@@ -93,22 +93,22 @@ const ModulePaymentNoticeContent = ({
     <HStack space={IOListItemVisualParams.iconMargin as IOSpacer}>
       <View style={{ flexGrow: 1, flexShrink: 1 }}>
         {title && (
-          <LabelSmall
+          <BodySmall
             numberOfLines={1}
             weight="Regular"
             color={theme["textBody-tertiary"]}
           >
             {title}
-          </LabelSmall>
+          </BodySmall>
         )}
         {subtitle && (
-          <Label
+          <Body
             color={theme["interactiveElem-default"]}
             numberOfLines={2}
             weight="Semibold"
           >
             {subtitle}
-          </Label>
+          </Body>
         )}
       </View>
       <View style={styles.endBlock}>

package/src/components/modules/ModuleSummary.tsx CHANGED Viewed

@@ -2,7 +2,7 @@ import React from "react";
 import { View } from "react-native";
 import { useIOTheme } from "../../core";
 import { IOIcons, Icon } from "../icons";
-import { H6, LabelSmall } from "../typography";
+import { H6, BodySmall } from "../typography";
 import {
   PressableModuleBase,
   PressableModuleBaseProps
@@ -28,9 +28,9 @@ export const ModuleSummary = ({
       <View style={{ flexGrow: 1, flexShrink: 1 }}>
         <H6 color={theme["textBody-default"]}>{label}</H6>
         {description && (
-          <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+          <BodySmall weight="Regular" color={theme["textBody-tertiary"]}>
             {description}
-          </LabelSmall>
+          </BodySmall>
         )}
       </View>
       <View style={{ marginLeft: 8 }}>

package/src/components/otpInput/BoxedInput.tsx CHANGED Viewed

@@ -2,7 +2,7 @@ import * as React from "react";
 import { useMemo } from "react";
 import { StyleSheet, View } from "react-native";
 import { IOColors } from "../../core";
-import { BaseTypography, H6 } from "../typography";
+import { H6, IOText } from "../typography";
 type Props = {
   status: "default" | "focus" | "error";
@@ -36,15 +36,16 @@ const styles = StyleSheet.create({
 // FIXME Replace this component with H3 once the legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const SecretValue = () => (
-  <BaseTypography
+  <IOText
     font="DMMono"
     weight="Semibold"
-    color="bluegreyDark"
-    fontStyle={{ fontSize: 22, lineHeight: 33 }}
+    color="grey-850"
+    size={22}
+    lineHeight={33}
     accessible={false}
   >
     {"•"}
-  </BaseTypography>
+  </IOText>
 );
 export const BoxedInput = ({ status, value, secret }: Props) => {

package/src/components/otpInput/OTPInput.tsx CHANGED Viewed

@@ -1,11 +1,18 @@
 import * as React from "react";
-import { AccessibilityInfo, NativeSyntheticEvent, Pressable, TextInput, TextInputKeyPressEventData, View } from "react-native";
+import {
+  AccessibilityInfo,
+  NativeSyntheticEvent,
+  Pressable,
+  TextInput,
+  TextInputKeyPressEventData,
+  View
+} from "react-native";
 import Animated from "react-native-reanimated";
 import { IOStyles } from "../../core/IOStyles";
-import { LabelSmall } from "../typography";
 import { triggerHaptic } from "../../functions";
-import { VSpacer } from "../spacer";
 import { useErrorShakeAnimation } from "../../utils/hooks/useErrorShakeAnimation";
+import { VSpacer } from "../spacer";
+import { BodySmall } from "../typography";
 import { BoxedInput } from "./BoxedInput";
 type Props = {
@@ -95,11 +102,15 @@ export const OTPInput = React.forwardRef<View, Props>(
       handleValidate(value);
     };
-    const handleKeyPress = ({ nativeEvent }: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
+    const handleKeyPress = ({
+      nativeEvent
+    }: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
       switch (nativeEvent.key) {
-        case 'Backspace':
+        case "Backspace":
           if (deleteButtonAccessibilityLabel && value.length > 0) {
-            AccessibilityInfo.announceForAccessibility(deleteButtonAccessibilityLabel);
+            AccessibilityInfo.announceForAccessibility(
+              deleteButtonAccessibilityLabel
+            );
           }
           break;
         default:
@@ -156,9 +167,13 @@ export const OTPInput = React.forwardRef<View, Props>(
         </Pressable>
         <VSpacer size={4} />
         {hasError && errorMessage && (
-          <LabelSmall color="error-850" style={{ textAlign: "center" }}>
+          <BodySmall
+            weight="Semibold"
+            color="error-850"
+            style={{ textAlign: "center" }}
+          >
             {errorMessage}
-          </LabelSmall>
+          </BodySmall>
         )}
       </Animated.View>
     );

package/src/components/tabs/TabItem.tsx CHANGED Viewed

@@ -20,7 +20,7 @@ import { useSpringPressProgressValue } from "../../utils/hooks/useSpringPressPro
 import { WithTestID } from "../../utils/types";
 import { IOIcons, Icon } from "../icons";
 import { HSpacer } from "../spacer";
-import { LabelSmall } from "../typography";
+import { BodySmall } from "../typography";
 type ColorMode = "light" | "dark";
@@ -257,9 +257,9 @@ const TabItem = ({
             <HSpacer size={4} />
           </>
         )}
-        <LabelSmall weight="Semibold" color={foregroundColor}>
+        <BodySmall weight="Semibold" color={foregroundColor}>
           {label}
-        </LabelSmall>
+        </BodySmall>
       </Animated.View>
     </Pressable>
   );

package/src/components/textInput/TextInputBase.tsx CHANGED Viewed

@@ -31,7 +31,7 @@ import { RNTextInputProps, getInputPropsByType } from "../../utils/textInput";
 import { InputType, WithTestID } from "../../utils/types";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons";
 import { HSpacer } from "../spacer";
-import { LabelSmall } from "../typography";
+import { BodySmall } from "../typography";
 type InputStatus = "initial" | "focused" | "disabled" | "error";
@@ -186,15 +186,15 @@ const HelperRow = ({
       }
     >
       {bottomMessage && (
-        <LabelSmall weight="Regular" color={bottomMessageColor}>
+        <BodySmall weight="Regular" color={bottomMessageColor}>
           {bottomMessage}
-        </LabelSmall>
+        </BodySmall>
       )}
       {counterLimit && (
-        <LabelSmall
+        <BodySmall
           weight="Regular"
           color="grey-700"
-        >{`${valueCount} / ${counterLimit}`}</LabelSmall>
+        >{`${valueCount} / ${counterLimit}`}</BodySmall>
       )}
     </View>
   );

package/src/components/typography/Body.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ import {
 } from "./IOText";
 type BodyStyleProps = TypographicStyleProps & {
-  weight?: Extract<IOFontWeight, "Regular" | "Semibold" | "Bold">;
+  weight?: Extract<IOFontWeight, "Regular" | "Semibold">;
 } & TypographicStyleAsLinkProps;
 export const bodyFontSize = 16;

package/src/components/typography/{LabelSmall.tsx → BodySmall.tsx} RENAMED Viewed

@@ -9,20 +9,17 @@ import {
   TypographicStyleProps
 } from "./IOText";
-type LabelSmallProps = TypographicStyleProps & {
-  weight?: Extract<IOFontWeight, "Regular" | "Semibold" | "Bold">;
+type BodySmallProps = TypographicStyleProps & {
+  weight?: Extract<IOFontWeight, "Regular" | "Semibold">;
 } & TypographicStyleAsLinkProps;
 const fontName: IOFontFamily = "Titillio";
-const fontWeight: IOFontWeight = "Semibold";
 const legacyFontName: IOFontFamily = "TitilliumSansPro";
-const legacyFontWeight: IOFontWeight = "Semibold";
 /**
- * `LabelSmall` typographic style
+ * `BodySmall` typographic style
  */
-export const LabelSmall = forwardRef<View, LabelSmallProps>(
+export const BodySmall = forwardRef<View, BodySmallProps>(
   (
     { weight: customWeight, color: customColor, asLink, ...props },
     ref?: ForwardedRef<View>
@@ -34,15 +31,11 @@ export const LabelSmall = forwardRef<View, LabelSmallProps>(
       ? theme["interactiveElem-default"]
       : theme["textBody-tertiary"];
-    const LabelSmallProps: IOTextProps = {
+    const BodySmallProps: IOTextProps = {
       ...props,
       dynamicTypeRamp: "footnote" /* iOS only */,
       font: isExperimental ? fontName : legacyFontName,
-      weight: customWeight
-        ? customWeight
-        : isExperimental
-        ? fontWeight
-        : legacyFontWeight,
+      weight: customWeight ?? "Regular",
       size: 14,
       lineHeight: 21,
       color: customColor ?? defaultColor,
@@ -55,7 +48,7 @@ export const LabelSmall = forwardRef<View, LabelSmallProps>(
     };
     return (
-      <IOText ref={ref} {...LabelSmallProps}>
+      <IOText ref={ref} {...BodySmallProps}>
         {props.children}
       </IOText>
     );

package/src/components/typography/ButtonText.tsx CHANGED Viewed

@@ -2,7 +2,7 @@ import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
 import { useIOExperimentalDesign } from "../../core";
 import { IOColors } from "../../core/IOColors";
-import { IOFontFamily, IOFontSize, IOFontWeight } from "../../utils/fonts";
+import { IOFontFamily, IOFontSize } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 export const buttonTextFontSize: IOFontSize = 16;
@@ -10,11 +10,9 @@ export const buttonTextFontSize: IOFontSize = 16;
 `AnimatedText` for color transition through Reanimated */
 const defaultColor: IOColors = "white";
 const fontName: IOFontFamily = "Titillio";
-const fontWeight: IOFontWeight = "Semibold";
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyFontName: IOFontFamily = "TitilliumSansPro";
-const legacyFontWeight: IOFontWeight = "Bold";
 /**
  * `ButtonText` typographic style
@@ -26,7 +24,7 @@ export const ButtonText = forwardRef<View, TypographicStyleProps>(
     const ButtonTextProps: IOTextProps = {
       ...props,
       font: isExperimental ? fontName : legacyFontName,
-      weight: isExperimental ? fontWeight : legacyFontWeight,
+      weight: "Semibold",
       size: buttonTextFontSize,
       lineHeight: 20,
       color: customColor ?? defaultColor

package/src/components/typography/H3.tsx CHANGED Viewed

@@ -1,26 +1,29 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { IOTheme, useIOExperimentalDesign, useIOTheme } from "../../core";
+import { useIOExperimentalDesign, useIOTheme } from "../../core";
 import { IOFontFamily, IOFontSize, IOFontWeight } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
-const defaultColor: keyof IOTheme = "textHeading-default";
+type H3StyleProps = TypographicStyleProps & {
+  weight?: Extract<IOFontWeight, "Semibold" | "Bold">;
+};
 /* Common typographic styles */
 export const h3FontSize: IOFontSize = 22;
 export const h3LineHeight = 33;
 const fontName: IOFontFamily = "Titillio";
-const fontWeight: IOFontWeight = "Semibold";
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyFontName: IOFontFamily = "TitilliumSansPro";
-const legacyFontWeight: IOFontWeight = "Semibold";
 /**
  * `H3` typographic style
  */
-export const H3 = forwardRef<View, TypographicStyleProps>(
-  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+export const H3 = forwardRef<View, H3StyleProps>(
+  (
+    { weight: customWeight, color: customColor, ...props },
+    ref?: ForwardedRef<View>
+  ) => {
     const theme = useIOTheme();
     const { isExperimental } = useIOExperimentalDesign();
@@ -28,10 +31,10 @@ export const H3 = forwardRef<View, TypographicStyleProps>(
       ...props,
       dynamicTypeRamp: "title2", // iOS only
       font: isExperimental ? fontName : legacyFontName,
-      weight: isExperimental ? fontWeight : legacyFontWeight,
+      weight: customWeight ?? "Semibold",
       size: h3FontSize,
       lineHeight: h3LineHeight,
-      color: customColor ?? theme[defaultColor]
+      color: customColor ?? theme["textHeading-default"]
     };
     return (

package/src/components/typography/H6.tsx CHANGED Viewed

@@ -1,19 +1,18 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
 import { IOTheme, useIOExperimentalDesign, useIOTheme } from "../../core";
-import { IOFontFamily, IOFontSize, IOFontWeight } from "../../utils/fonts";
+import { IOFontFamily, IOFontSize } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 const defaultColor: keyof IOTheme = "textHeading-default";
-export const h6FontSize: IOFontSize = 18;
+export const h6FontSize: IOFontSize = 16;
 export const h6LineHeight = 24;
 const fontName: IOFontFamily = "Titillio";
-const fontWeight: IOFontWeight = "Semibold";
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+const legacyFontSize: IOFontSize = 18;
 const legacyFontName: IOFontFamily = "TitilliumSansPro";
-const legacyFontWeight: IOFontWeight = "Semibold";
 /**
  * `H6` typographic style
@@ -27,9 +26,9 @@ export const H6 = forwardRef<View, TypographicStyleProps>(
       ...props,
       dynamicTypeRamp: "headline", // iOS only
       font: isExperimental ? fontName : legacyFontName,
-      size: h6FontSize,
+      size: isExperimental ? h6FontSize : legacyFontSize,
       lineHeight: h6LineHeight,
-      weight: isExperimental ? fontWeight : legacyFontWeight,
+      weight: "Semibold",
       color: customColor ?? theme[defaultColor]
     };

package/src/components/typography/LabelMini.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ import {
 } from "./IOText";
 type LabelMiniProps = TypographicStyleProps & {
-  weight?: Extract<IOFontWeight, "Regular" | "Semibold" | "Bold">;
+  weight?: Extract<IOFontWeight, "Regular" | "Semibold">;
 } & TypographicStyleAsLinkProps;
 const fontName: IOFontFamily = "Titillio";