npm - @pagopa/io-app-design-system - Versions diffs - 5.0.0-1 → 5.0.0-3 - Mend

@pagopa/io-app-design-system 5.0.0-1 → 5.0.0-3

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 (265) hide show

package/src/components/alert/Alert.tsx CHANGED Viewed

@@ -5,7 +5,8 @@ import {
   NativeSyntheticEvent,
   Pressable,
   TextLayoutEventData,
-  View
+  View,
+  ViewStyle
 } from "react-native";
 import Animated from "react-native-reanimated";
 import { IOVisualCostants, useIOThemeContext } from "../../core";
@@ -18,7 +19,6 @@ import { WithTestID } from "../../utils/types";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons";
 import { HStack, VStack } from "../stack";
 import { Body, ButtonText } from "../typography";
-import { H4 } from "../typography/H4";
 const ICON_SIZE: IOIconSizeScale = 24;
@@ -26,7 +26,6 @@ const [padding, paddingFullWidth] = IOAlertSpacing;
 type AlertProps = WithTestID<{
   variant: "error" | "warning" | "info" | "success";
-  title?: string;
   content: string;
   fullWidth?: boolean;
   accessibilityLabel?: string;
@@ -111,7 +110,6 @@ export const Alert = forwardRef<View, AlertType>(
   (
     {
       variant,
-      title,
       content,
       action,
       onPress,
@@ -136,7 +134,7 @@ export const Alert = forwardRef<View, AlertType>(
       []
     );
-    const paddingDefaultVariant = {
+    const paddingDefaultVariant: ViewStyle = {
       padding,
       borderRadius: IOAlertRadius * dynamicFontScale * spacingScaleMultiplier,
       borderCurve: "continuous"
@@ -165,15 +163,14 @@ export const Alert = forwardRef<View, AlertType>(
       Tested on both Android and iOS. */}
         <View
           style={[
-            !title && isMultiline && { marginTop: -6 * dynamicFontScale },
-            isMultiline && { marginBottom: -4 * dynamicFontScale },
+            isMultiline && {
+              marginTop: -6 * dynamicFontScale,
+              marginBottom: -4 * dynamicFontScale
+            },
             { flex: 1 }
           ]}
         >
           <VStack space={8} allowScaleSpacing>
-            {title && (
-              <H4 color={mapVariantStates[variant].foreground}>{title}</H4>
-            )}
             <Body
               color={mapVariantStates[variant].foreground}
               weight={"Regular"}

package/src/components/badge/Badge.tsx CHANGED Viewed

@@ -13,28 +13,29 @@ import {
   IOBadgeVSpacing,
   IOColors,
   useIONewTypeface,
-  useIOTheme,
   useIOThemeContext
 } from "../../core";
 import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";
 import { IOText } from "../typography";
+/*
+NOTE FOR REFACTORING in the `io-app`:
+- default (legacy) -> removed
+- blue -> Deleted -> replaced with `default`
+- info -> removed -> highlight?
+- purple -> cgn
+- turquoise -> highlight
+- contrast -> removed
+- lightBlue -> default
+*/
 export type Badge = WithTestID<{
   outline?: boolean;
   text: string;
   allowFontScaling?: boolean;
-  variant:
-    | "default"
-    | "info"
-    | "warning"
-    | "error"
-    | "success"
-    | "purple"
-    | "lightBlue"
-    | "blue"
-    | "turquoise"
-    | "contrast";
+  variant: "default" | "warning" | "error" | "success" | "cgn" | "highlight";
 }>;
 type SolidVariantProps = {
@@ -76,7 +77,6 @@ export const Badge = ({
   variant,
   testID
 }: Badge) => {
-  const theme = useIOTheme();
   const { dynamicFontScale } = useIOFontDynamicScale();
   const { themeType } = useIOThemeContext();
   const { newTypefaceEnabled } = useIONewTypeface();
@@ -88,12 +88,8 @@ export const Badge = ({
     SolidVariantProps
   > = {
     default: {
-      foreground: "grey-700",
-      background: IOColors["grey-50"]
-    },
-    info: {
-      foreground: "info-850",
-      background: IOColors["info-100"]
+      foreground: "blueIO-850",
+      background: IOColors["blueIO-50"]
     },
     warning: {
       foreground: "warning-850",
@@ -107,25 +103,13 @@ export const Badge = ({
       foreground: "error-850",
       background: IOColors["error-100"]
     },
-    purple: {
+    cgn: {
       foreground: "hanPurple-500",
       background: IOColors["hanPurple-100"]
     },
-    lightBlue: {
-      foreground: "blueIO-850",
-      background: IOColors["blueIO-50"]
-    },
-    blue: {
-      foreground: "white",
-      background: IOColors[theme["interactiveElem-default"]]
-    },
-    turquoise: {
+    highlight: {
       foreground: "turquoise-850",
       background: IOColors["turquoise-50"]
-    },
-    contrast: {
-      foreground: "grey-700",
-      background: IOColors.white
     }
   };
@@ -134,12 +118,8 @@ export const Badge = ({
     SolidVariantProps
   > = {
     default: {
-      foreground: "grey-50",
-      background: hexToRgba(IOColors["grey-50"], bgOpacityDarkMode)
-    },
-    info: {
-      foreground: "info-400",
-      background: hexToRgba(IOColors["info-400"], bgOpacityDarkMode)
+      foreground: "blueIO-200",
+      background: hexToRgba(IOColors["blueIO-200"], bgOpacityDarkMode)
     },
     warning: {
       foreground: "warning-400",
@@ -153,25 +133,13 @@ export const Badge = ({
       foreground: "error-400",
       background: hexToRgba(IOColors["error-400"], bgOpacityDarkMode)
     },
-    purple: {
+    cgn: {
       foreground: "hanPurple-250",
       background: hexToRgba(IOColors["hanPurple-250"], bgOpacityDarkMode)
     },
-    lightBlue: {
-      foreground: "blueIO-200",
-      background: hexToRgba(IOColors["blueIO-600"], bgOpacityDarkMode)
-    },
-    blue: {
-      foreground: "white",
-      background: IOColors[theme["interactiveElem-default"]]
-    },
-    turquoise: {
+    highlight: {
       foreground: "turquoise-300",
       background: hexToRgba(IOColors["turquoise-300"], bgOpacityDarkMode)
-    },
-    contrast: {
-      foreground: "grey-700",
-      background: IOColors.white
     }
   };
@@ -180,10 +148,7 @@ export const Badge = ({
     OutlinedVariantProps
   > = {
     default: {
-      foreground: "grey-700"
-    },
-    info: {
-      foreground: "info-850"
+      foreground: "blueIO-850"
     },
     warning: {
       foreground: "warning-850"
@@ -194,20 +159,11 @@ export const Badge = ({
     error: {
       foreground: "error-850"
     },
-    purple: {
+    cgn: {
       foreground: "hanPurple-500"
     },
-    lightBlue: {
-      foreground: "blueIO-850"
-    },
-    blue: {
-      foreground: theme["interactiveElem-default"]
-    },
-    turquoise: {
+    highlight: {
       foreground: "turquoise-850"
-    },
-    contrast: {
-      foreground: "grey-850"
     }
   };
@@ -216,10 +172,7 @@ export const Badge = ({
     OutlinedVariantProps
   > = {
     default: {
-      foreground: "grey-100"
-    },
-    info: {
-      foreground: "info-400"
+      foreground: "blueIO-200"
     },
     warning: {
       foreground: "warning-400"
@@ -230,20 +183,11 @@ export const Badge = ({
     error: {
       foreground: "error-400"
     },
-    purple: {
+    cgn: {
       foreground: "hanPurple-250"
     },
-    lightBlue: {
-      foreground: "blueIO-150"
-    },
-    blue: {
-      foreground: theme["interactiveElem-default"]
-    },
-    turquoise: {
+    highlight: {
       foreground: "turquoise-300"
-    },
-    contrast: {
-      foreground: "grey-100"
     }
   };

package/src/components/badge/__test__/__snapshots__/badge.test.tsx.snap CHANGED Viewed

@@ -17,7 +17,7 @@ exports[`Test Badge Components - Experimental Enabled Badge Snapshot 1`] = `
         "paddingVertical": 4,
       },
       {
-        "backgroundColor": "#F4F5F8",
+        "backgroundColor": "#E7ECFC",
       },
     ]
   }
@@ -31,7 +31,7 @@ exports[`Test Badge Components - Experimental Enabled Badge Snapshot 1`] = `
       [
         {},
         {
-          "color": "#555C70",
+          "color": "#031344",
           "fontFamily": "Titillio",
           "fontSize": 12,
           "fontStyle": "normal",
@@ -69,7 +69,7 @@ exports[`Test Badge Components Badge Snapshot 1`] = `
         "paddingVertical": 4,
       },
       {
-        "backgroundColor": "#F4F5F8",
+        "backgroundColor": "#E7ECFC",
       },
     ]
   }
@@ -83,7 +83,7 @@ exports[`Test Badge Components Badge Snapshot 1`] = `
       [
         {},
         {
-          "color": "#555C70",
+          "color": "#031344",
           "fontFamily": "Titillio",
           "fontSize": 12,
           "fontStyle": "normal",

package/src/components/banner/Banner.tsx CHANGED Viewed

@@ -11,8 +11,6 @@ import Animated from "react-native-reanimated";
 import {
   IOBannerBigSpacing,
   IOBannerRadius,
-  IOBannerSmallHSpacing,
-  IOBannerSmallVSpacing,
   IOStyles,
   useIONewTypeface,
   useIOTheme,
@@ -31,24 +29,22 @@ import { VSpacer } from "../spacer";
 import { BodySmall, buttonTextFontSize, H6, IOText } from "../typography";
 /* Styles */
-const sizePictogramBig: IOPictogramSizeScale = 80;
-const sizePictogramSmall: IOPictogramSizeScale = 64;
+const sizePictogram: IOPictogramSizeScale = 80;
 const closeButtonDistanceFromEdge: number = 6;
 const closeButtonOpacity = 0.6;
-const sizeBigPadding = IOBannerBigSpacing;
-const sizeSmallHPadding = IOBannerSmallHSpacing;
-const sizeSmallVPadding = IOBannerSmallVSpacing;
+const bannerPadding = IOBannerBigSpacing;
 const styles = StyleSheet.create({
   container: {
     flexDirection: "row",
     alignItems: "flex-start",
     alignContent: "center",
+    padding: bannerPadding,
     borderRadius: IOBannerRadius,
     borderCurve: "continuous"
   },
   bleedPictogram: {
-    marginRight: -sizeBigPadding
+    marginRight: -bannerPadding
   },
   closeIconButton: {
     position: "absolute",
@@ -61,7 +57,6 @@ const styles = StyleSheet.create({
 /* Component Types */
 type BaseBannerProps = WithTestID<{
-  size: "big" | "small";
   color: "neutral" | "turquoise";
   pictogramName: IOPictogramsBleed;
   viewRef?: React.RefObject<View>;
@@ -137,7 +132,6 @@ const mapBackgroundColorDarkMode: Record<
 export const Banner = ({
   viewRef,
-  size,
   color,
   pictogramName,
   title,
@@ -167,9 +161,7 @@ export const Banner = ({
     backgroundColor:
       themeType === "dark"
         ? hexToRgba(IOColors[mapBackgroundColorDarkMode[color]], 0.1)
-        : IOColors[mapBackgroundColorLightMode[color]],
-    paddingVertical: size === "big" ? sizeBigPadding : sizeSmallVPadding,
-    paddingHorizontal: size === "big" ? sizeBigPadding : sizeSmallHPadding
+        : IOColors[mapBackgroundColorLightMode[color]]
   };
   /* Generates a complete fallbackAccessibilityLabel by concatenating the title, content, and action
@@ -232,10 +224,7 @@ export const Banner = ({
         )}
       </View>
       <View style={[styles.bleedPictogram, IOStyles.selfCenter]}>
-        <PictogramBleed
-          name={pictogramName}
-          size={size === "big" ? sizePictogramBig : sizePictogramSmall}
-        />
+        <PictogramBleed name={pictogramName} size={sizePictogram} />
       </View>
       {onClose && labelClose && (
         <View style={styles.closeIconButton}>

package/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap CHANGED Viewed

@@ -41,11 +41,10 @@ exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `
           "borderCurve": "continuous",
           "borderRadius": 8,
           "flexDirection": "row",
+          "padding": 16,
         },
         {
           "backgroundColor": "#F4F5F8",
-          "paddingHorizontal": 16,
-          "paddingVertical": 16,
         },
         {
           "transform": [
@@ -156,7 +155,6 @@ exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `
         align="xMidYMid"
         bbHeight={80}
         bbWidth={80}
-        color="#00C5CA"
         focusable={false}
         height={80}
         meetOrSlice={0}
@@ -175,7 +173,6 @@ exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `
             },
           ]
         }
-        tintColor="#00C5CA"
         vbHeight={240}
         vbWidth={240}
         width={80}
@@ -320,11 +317,10 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
           "borderCurve": "continuous",
           "borderRadius": 8,
           "flexDirection": "row",
+          "padding": 16,
         },
         {
           "backgroundColor": "#F4F5F8",
-          "paddingHorizontal": 16,
-          "paddingVertical": 16,
         },
         {
           "transform": [
@@ -435,7 +431,6 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
         align="xMidYMid"
         bbHeight={80}
         bbWidth={80}
-        color="#00C5CA"
         focusable={false}
         height={80}
         meetOrSlice={0}
@@ -454,7 +449,6 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
             },
           ]
         }
-        tintColor="#00C5CA"
         vbHeight={240}
         vbWidth={240}
         width={80}

package/src/components/banner/__test__/banner.test.tsx CHANGED Viewed

@@ -13,7 +13,6 @@ describe("Test Banner Components", () => {
     const advice = TestRenderer.create(
       <Banner
         color="neutral"
-        size="big"
         title="Banner title"
         pictogramName="charity"
         action="Action text"
@@ -30,7 +29,6 @@ describe("Test Banner Components - Experimental Enabled", () => {
     const advice = TestRendererWithExperimentalEnabledContextProvider(
       <Banner
         color="neutral"
-        size="big"
         title="Banner title"
         pictogramName="charity"
         action="Action text"

package/src/components/buttons/ButtonOutline.tsx CHANGED Viewed

@@ -105,19 +105,19 @@ const mapColorStates: Record<
   // Danger button
   danger: {
     border: {
-      default: IOColors.red,
-      pressed: IOColors.red,
-      disabled: IOColors.bluegreyLight
+      default: IOColors["error-600"],
+      pressed: IOColors["error-600"],
+      disabled: IOColors["grey-200"]
     },
     background: {
-      default: hexToRgba(IOColors.red, 0),
-      pressed: hexToRgba(IOColors.red, 0.15),
+      default: hexToRgba(IOColors["error-600"], 0),
+      pressed: hexToRgba(IOColors["error-600"], 0.15),
       disabled: "transparent"
     },
     label: {
-      default: IOColors.red,
-      pressed: IOColors.red,
-      disabled: IOColors.grey
+      default: IOColors["error-600"],
+      pressed: IOColors["error-600"],
+      disabled: IOColors["grey-450"]
     }
   }
 };

package/src/components/buttons/IconButton.tsx CHANGED Viewed

@@ -47,7 +47,7 @@ const mapColorStates: Record<NonNullable<IconButton["color"]>, ColorStates> = {
     icon: {
       default: IOColors.black,
       pressed: IOColors["grey-850"],
-      disabled: IOColors.grey
+      disabled: IOColors["grey-450"]
     }
   },
   // Contrast button

package/src/components/buttons/IconButtonContained.tsx CHANGED Viewed

@@ -63,13 +63,13 @@ const mapColorStates: Record<
   neutral: {
     background: {
       default: IOColors.white,
-      pressed: IOColors.greyUltraLight,
+      pressed: IOColors["grey-50"],
       disabled: "transparent"
     },
     icon: {
-      default: IOColors.bluegrey,
+      default: IOColors["grey-700"],
       pressed: IOColors.black,
-      disabled: IOColors.grey
+      disabled: IOColors["grey-450"]
     }
   },
   // Contrast button

package/src/components/icons/Icon.tsx CHANGED Viewed

@@ -132,12 +132,12 @@ import IconNavMessages from "./svg/IconNavMessages";
 import IconNavMessagesFocused from "./svg/IconNavMessagesFocused";
 import IconNavProfile from "./svg/IconNavProfile";
 import IconNavProfileFocused from "./svg/IconNavProfileFocused";
+import IconNavQrWallet from "./svg/IconNavQrWallet";
 import IconNavScan from "./svg/IconNavScan";
 import IconNavServices from "./svg/IconNavServices";
 import IconNavServicesFocused from "./svg/IconNavServicesFocused";
 import IconNavWallet from "./svg/IconNavWallet";
 import IconNavWalletFocused from "./svg/IconNavWalletFocused";
-import IconNavQrWallet from "./svg/IconNavQrWallet";
 import IconNotes from "./svg/IconNotes";
 import IconNotice from "./svg/IconNotice";
 import IconNoticeFilled from "./svg/IconNoticeFilled";
@@ -192,10 +192,12 @@ import IconSystemSettingsiOS from "./svg/IconSystemSettingsiOS";
 import IconSystemToggleInstructions from "./svg/IconSystemToggleInstructions";
 import IconTag from "./svg/IconTag";
 import IconTerms from "./svg/IconTerms";
+import IconTheme from "./svg/IconTheme";
 import IconTouch from "./svg/IconTouch";
 import IconTransactions from "./svg/IconTransactions";
 import IconTransactionsBoxed from "./svg/IconTransactionsBoxed";
 import IconTrashcan from "./svg/IconTrashcan";
+import IconTypeface from "./svg/IconTypeface";
 import IconWarningFilled from "./svg/IconWarningFilled";
 import IconWebsite from "./svg/IconWebsite";
 import LegIconCheckOff from "./svg/LegIconCheckOff";
@@ -358,6 +360,8 @@ export const IOIcons = {
   light: IconLight,
   lightFilled: IconLightFilled,
   code: IconCode,
+  theme: IconTheme,
+  typeface: IconTypeface,
   navMessages: IconNavMessages,
   navMessagesFocused: IconNavMessagesFocused,
   navWallet: IconNavWallet,
@@ -427,7 +431,7 @@ change its color values. It accepts `IOColors` values only.
 */
 export const Icon = ({
   name,
-  color = "bluegrey",
+  color = "grey-700",
   size = 24,
   accessible = false,
   accessibilityLabel = "",
@@ -471,7 +475,7 @@ type IOAnimatedIconsProps = {
 export const AnimatedIcon = ({
   name,
-  color = IOColors.bluegrey,
+  color = IOColors["grey-700"],
   size = 24,
   accessible = false,
   allowFontScaling = false,

package/src/components/icons/README.md CHANGED Viewed

@@ -105,7 +105,7 @@ export const IONavIcons = {
 You can add the recently added icon with the following declaration:
 ```jsx
 // Default size: 24×24px
-// Default color: Bluegrey
+// Default color: Grey-700
 <Icon name="spid">
 ```

package/src/components/icons/svg/IconTheme.tsx ADDED Viewed

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../types";
+const IconTheme = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0ZM22 12C22 17.5228 17.5228 22 12 22V2C17.5228 2 22 6.47715 22 12Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+export default IconTheme;

package/src/components/icons/svg/IconTypeface.tsx ADDED Viewed

@@ -0,0 +1,18 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../types";
+const IconTypeface = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      d="M22.56 18.8877C21.692 18.8877 21.1002 18.6115 20.7649 18.0986C19.7193 18.789 18.6541 19.1244 17.4902 19.1244C15.3597 19.1244 14.0972 17.9605 14.0972 16.0075C14.0972 14.1137 15.2019 13.1274 17.5691 12.9301L20.4887 12.6934V12.2002C20.4887 10.9969 19.7391 10.3262 18.4568 10.3262C17.431 10.3262 16.78 10.6813 16.4644 11.4506H14.0972C14.7087 9.61601 16.2869 8.59021 18.5752 8.59021C21.1594 8.59021 22.7376 10.0105 22.7376 12.3778V16.4021C22.7376 16.8952 22.9348 17.0925 23.428 17.0925H24.0001V18.8877H22.56ZM16.3066 15.9286C16.3066 16.8558 16.9378 17.3884 18.1412 17.3884C18.8908 17.3884 19.6207 17.132 20.4887 16.5993V14.2913L17.8847 14.528C16.7406 14.6266 16.3066 15.0409 16.3066 15.9286Z"
+      fill="currentColor"
+    />
+    <Path
+      d="M0 18.8877L4.912 5H8.16694L13.0789 18.8877H10.5736L9.44919 15.5736H3.5903L2.46586 18.8877H0ZM4.24128 13.6404H8.7982L6.50988 6.87406L4.24128 13.6404Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+export default IconTypeface;

package/src/components/icons/svg/originals/IconTheme.svg ADDED Viewed

	@@ -0,0 +1 @@
1	+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0ZM22 12C22 17.5228 17.5228 22 12 22V2C17.5228 2 22 6.47715 22 12Z" fill="#BBC2D6"/></svg>

package/src/components/icons/svg/originals/IconTypeface.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.56 18.8877C21.692 18.8877 21.1002 18.6115 20.7649 18.0986C19.7193 18.789 18.6541 19.1244 17.4902 19.1244C15.3597 19.1244 14.0972 17.9605 14.0972 16.0075C14.0972 14.1137 15.2019 13.1274 17.5691 12.9301L20.4887 12.6934V12.2002C20.4887 10.9969 19.7391 10.3262 18.4568 10.3262C17.431 10.3262 16.78 10.6813 16.4644 11.4506H14.0972C14.7087 9.61601 16.2869 8.59021 18.5752 8.59021C21.1594 8.59021 22.7376 10.0105 22.7376 12.3778V16.4021C22.7376 16.8952 22.9348 17.0925 23.428 17.0925H24.0001V18.8877H22.56ZM16.3066 15.9286C16.3066 16.8558 16.9378 17.3884 18.1412 17.3884C18.8908 17.3884 19.6207 17.132 20.4887 16.5993V14.2913L17.8847 14.528C16.7406 14.6266 16.3066 15.0409 16.3066 15.9286Z" fill="#BBC2D6"/><path d="M0 18.8877L4.912 5H8.16694L13.0789 18.8877H10.5736L9.44919 15.5736H3.5903L2.46586 18.8877H0ZM4.24128 13.6404H8.7982L6.50988 6.87406L4.24128 13.6404Z" fill="#BBC2D6"/></svg>