@pagopa/io-app-design-system 1.0.0-9 → 1.0.0

package/src/components/radio/AnimatedRadio.tsx

@@ -1,16 +1,16 @@
 import React, { useEffect } from "react";
-import { StyleSheet, View, Pressable, PressableProps } from "react-native";
+import { Pressable, PressableProps, StyleSheet, View } from "react-native";
 import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
+  Easing,
   interpolate,
+  useAnimatedStyle,
+  useSharedValue,
   withSpring,
-  withTiming,
-  Easing
+  withTiming
 } from "react-native-reanimated";
-import { IOSelectionTickVisualParams } from "../../core/IOStyles";
 import { IOSpringValues } from "../../core/IOAnimations";
 import { IOColors } from "../../core/IOColors";
+import { IOSelectionTickVisualParams } from "../../core/IOStyles";
 import { AnimatedTick } from "../common/AnimatedTick";
 
 type Props = {
@@ -83,7 +83,6 @@ export const AnimatedRadio = ({ checked, onPress, disabled }: OwnProps) => {
       onPress={onPress}
       style={styles.radioWrapper}
     >
-      {/* ◀ REMOVE_LEGACY_COMPONENT: Remove the following conditions */}
       <View
         style={[
           styles.radioBorder,
@@ -103,7 +102,6 @@ export const AnimatedRadio = ({ checked, onPress, disabled }: OwnProps) => {
           animatedCheckboxSquare
         ]}
       />
-      {/* REMOVE_LEGACY_COMPONENT: End ▶ */}
       {isChecked && (
         <View>
           <AnimatedTick

package/src/components/radio/RadioGroup.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { View } from "react-native";
+import { Divider } from "../divider";
+import { IOIcons } from "../icons";
+import { ListItemRadio } from "../listitems/ListItemRadio";
+
+export type NewRadioItem<T> = {
+  id: T;
+  value: string;
+  description?: string;
+  icon?: IOIcons;
+  disabled?: boolean;
+};
+
+type Props<T> = {
+  items: ReadonlyArray<NewRadioItem<T>>;
+  selectedItem?: T;
+  onPress: (selected: T) => void;
+};
+
+/**
+ * A list of radio buttons.
+ * The management of the selection is demanded and derived by the `selectedItem` prop.
+ * The item with the `id` equal to the `selectedItem` is the active one.
+ */
+export const RadioGroup = <T,>({ items, selectedItem, onPress }: Props<T>) => (
+  <View>
+    {items.map((item, index) => (
+      <React.Fragment key={`radio_item_${item.id}`}>
+        <ListItemRadio
+          testID={`RadioItemTestID_${item.id}`}
+          value={item.value}
+          description={item.description}
+          icon={item.icon}
+          disabled={item.disabled}
+          onValueChange={() => onPress(item.id)}
+          selected={selectedItem === item.id}
+        />
+        {index < items.length - 1 && <Divider />}
+      </React.Fragment>
+    ))}
+  </View>
+);

package/src/components/radio/index.tsx

@@ -1 +1,2 @@
 export * from "./AnimatedRadio";
+export * from "./RadioGroup";

package/src/components/typography/H3.tsx

@@ -1,101 +1,35 @@
-import React from "react";
-import type { IOColors, IOTheme } from "../../core/IOColors";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
+import * as React from "react";
+import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
+import { IOColorsStatusForeground, IOTheme } from "../../core";
+import { ExternalTypographyProps, TypographyProps } from "./common";
 import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, RequiredTypographyProps } from "./common";
 
-// these colors are allowed only when the weight is SemiBold
-type AllowedSemiBoldColors = Extract<
-    IOColors,
-    | "bluegreyDark"
-    | "bluegreyLight"
-    | "white"
-    | "red"
-    | "blue"
-    | "bluegrey"
-    | "grey"
->;
+type AllowedColors = IOColorsStatusForeground | IOTheme["textHeading-default"];
+type AllowedWeight = Extract<IOFontWeight, "Bold" | "Regular">;
 
-// when the weight is bold, only the white color is allowed
-type AllowedBoldColors = Extract<
-    IOColors,
-    | "white"
-    | "bluegreyLight"
-    | "black"
-    | "bluegreyDark"
-    | "blue"
-    | "bluegrey"
-    | "grey-200"
+type OwnProps = ExternalTypographyProps<
+  TypographyProps<AllowedWeight, AllowedColors>
 >;
 
-// all the possible colors
-type AllowedColors =
-    | AllowedBoldColors
-    | AllowedSemiBoldColors
-    | IOTheme["textHeading-default"];
-
-// all the possible weight
-type AllowedWeight = Extract<IOFontWeight, "Bold" | "SemiBold">;
-
-// these are the properties allowed only if weight is undefined or SemiBold
-type SemiBoldProps = {
-    weight?: Extract<IOFontWeight, "SemiBold">;
-    color?: AllowedSemiBoldColors | IOTheme["textHeading-default"];
-};
-
-// these are the properties allowed only if weight is Bold
-type BoldProps = {
-    weight: Extract<IOFontWeight, "Bold">;
-    color?: AllowedBoldColors | IOTheme["textHeading-default"];
-};
-
-type BoldKindProps = SemiBoldProps | BoldProps;
-
-type OwnProps = ExternalTypographyProps<BoldKindProps>;
-
-export const h3FontSize = 18;
-export const h3LineHeight = 22;
-
-/**
- * A custom function to calculate the values if no weight or color is provided.
- * The choose of the default color depends on the weight, for this reason cannot be used
- * the default calculateWeightColor with fallback if undefined.
- * @param weight
- * @param color
- */
-export const calculateH3WeightColor = (
-    weight?: AllowedWeight,
-    color?: AllowedColors
-): RequiredTypographyProps<AllowedWeight, AllowedColors> => {
-    const newWeight = weight ?? "SemiBold";
-    const newColor =
-        color !== undefined
-            ? color
-            : newWeight === "SemiBold"
-                ? "bluegreyDark"
-                : "white";
-    return {
-        weight: newWeight,
-        color: newColor
-    };
-};
+/* Common typographic styles */
+export const h3FontSize = 22;
+export const h3LineHeight = 33;
+/* New typographic styles */
+const h3FontName: IOFontFamily = "ReadexPro";
+const h3DefaultColor: AllowedColors = "black";
+const h3DefaultWeight: AllowedWeight = "Regular";
 
 /**
- * Typography component to render `H3` text with font size {@link fontSize} and fontFamily {@link fontName}.
- * default values(if not defined) are weight: `SemiBold`, color: `bluegreyDark`
+ * Typography component to render `H2` text with font size {@link fontSize} and fontFamily {@link fontName}.
+ * default values(if not defined) are weight: `Bold`, color: `bluegreyDark`
  * @param props
  * @constructor
  */
-export const H3: React.FC<OwnProps> = (props) => {
-    const fontName: FontFamily = "TitilliumWeb";
-    const weightColorFactory = React.useCallback(
-        () => calculateH3WeightColor(props.weight, props.color),
-        [props.weight, props.color]
-    );
-    return useTypographyFactory<AllowedWeight, AllowedColors>({
-        ...props,
-        weightColorFactory,
-        font: fontName,
-        fontStyle: { fontSize: h3FontSize, lineHeight: h3LineHeight }
-    });
-};
+export const H3: React.FunctionComponent<OwnProps> = props =>
+  useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight: h3DefaultWeight,
+    defaultColor: h3DefaultColor,
+    font: h3FontName,
+    fontStyle: { fontSize: h3FontSize, lineHeight: h3LineHeight }
+  });

package/src/components/typography/Link.tsx

@@ -1,8 +1,8 @@
-import React from "react";
-import type { IOColors } from "../../core/IOColors";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
-import { useTypographyFactory } from "./Factory";
+import * as React from "react";
+import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
+import type { IOColors } from "../../core";
 import { ExternalTypographyProps, TypographyProps } from "./common";
+import { useTypographyFactory } from "./Factory";
 
 type AllowedColors = IOColors;
 type AllowedWeight = Extract<IOFontWeight, "SemiBold" | "Bold">;
@@ -10,40 +10,33 @@ type FontSize = "regular" | "small";
 type AllowedFontSize = { fontSize?: FontSize };
 
 type OwnProps = ExternalTypographyProps<
-    TypographyProps<AllowedWeight, AllowedColors>
+  TypographyProps<AllowedWeight, AllowedColors>
 > &
-    AllowedFontSize;
+  AllowedFontSize;
+
+const fontName: IOFontFamily = "TitilliumWeb";
+const fontSizeMapping: Record<FontSize, number> = { regular: 16, small: 14 };
 
 export const linkDefaultColor: AllowedColors = "blueIO-500";
 export const linkDefaultWeight: AllowedWeight = "Bold";
 
 /**
  * Typography component to render `Link` text with font size {@link fontSize} and fontFamily {@link fontName}.
- * default values(if not defined) are weight: `Bold/SemiBold`, color: `blue/blueIO-500`
+ * default values(if not defined) are weight: `SemiBold`, color: `blue`
  * @param props`
  * @constructor
  */
-export const Link: React.FC<OwnProps> = (props) => {
-    const fontName: FontFamily = "TitilliumWeb";
-    const fontSizeMapping: Record<FontSize, number> = { regular: 16, small: 14 };
-
-    const defaultWeight = linkDefaultWeight;
-    const defaultColor = linkDefaultColor;
-
-    const defaultFontSize = props.fontSize
+export const Link: React.FunctionComponent<OwnProps> = props =>
+  useTypographyFactory<AllowedWeight, AllowedColors>({
+    accessibilityRole: props.onPress ? "link" : undefined,
+    ...props,
+    defaultWeight: linkDefaultWeight,
+    defaultColor: linkDefaultColor,
+    font: fontName,
+    fontStyle: {
+      fontSize: props.fontSize
         ? fontSizeMapping[props.fontSize]
-        : fontSizeMapping.regular;
-    const defaultTextDecorationLine = "underline";
-
-    return useTypographyFactory<AllowedWeight, AllowedColors>({
-        accessibilityRole: props.onPress ? "link" : undefined,
-        ...props,
-        defaultWeight,
-        defaultColor,
-        font: fontName,
-        fontStyle: {
-            fontSize: defaultFontSize,
-            textDecorationLine: defaultTextDecorationLine
-        },
-    });
-};
+        : fontSizeMapping.regular,
+      textDecorationLine: "underline"
+    }
+  });

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

@@ -130,30 +130,31 @@ exports[`Test Typography Components H2 Snapshot 1`] = `
 
 exports[`Test Typography Components H3 Snapshot 1`] = `
 <Text
-  color="bluegreyDark"
-  font="TitilliumWeb"
+  color="black"
+  defaultColor="black"
+  defaultWeight="Regular"
+  font="ReadexPro"
   fontStyle={
     {
-      "fontSize": 18,
-      "lineHeight": 22,
+      "fontSize": 22,
+      "lineHeight": 33,
     }
   }
   style={
     [
       {
-        "fontSize": 18,
-        "lineHeight": 22,
+        "fontSize": 22,
+        "lineHeight": 33,
       },
       {
-        "color": "#17324D",
-        "fontFamily": "Titillium Web",
+        "color": "#0E0F13",
+        "fontFamily": "Readex Pro",
         "fontStyle": "normal",
-        "fontWeight": "600",
+        "fontWeight": "400",
       },
     ]
   }
-  weight="SemiBold"
-  weightColorFactory={[Function]}
+  weight="Regular"
 >
   Text
 </Text>
@@ -162,29 +163,30 @@ exports[`Test Typography Components H3 Snapshot 1`] = `
 exports[`Test Typography Components H3 Snapshot 2`] = `
 <Text
   color="bluegreyLight"
-  font="TitilliumWeb"
+  defaultColor="black"
+  defaultWeight="Regular"
+  font="ReadexPro"
   fontStyle={
     {
-      "fontSize": 18,
-      "lineHeight": 22,
+      "fontSize": 22,
+      "lineHeight": 33,
     }
   }
   style={
     [
       {
-        "fontSize": 18,
-        "lineHeight": 22,
+        "fontSize": 22,
+        "lineHeight": 33,
       },
       {
         "color": "#CCD4DC",
-        "fontFamily": "Titillium Web",
+        "fontFamily": "Readex Pro",
         "fontStyle": "normal",
-        "fontWeight": "600",
+        "fontWeight": "400",
       },
     ]
   }
-  weight="SemiBold"
-  weightColorFactory={[Function]}
+  weight="Regular"
 >
   Text
 </Text>
@@ -193,29 +195,30 @@ exports[`Test Typography Components H3 Snapshot 2`] = `
 exports[`Test Typography Components H3 Snapshot 3`] = `
 <Text
   color="white"
-  font="TitilliumWeb"
+  defaultColor="black"
+  defaultWeight="Regular"
+  font="ReadexPro"
   fontStyle={
     {
-      "fontSize": 18,
-      "lineHeight": 22,
+      "fontSize": 22,
+      "lineHeight": 33,
     }
   }
   style={
     [
       {
-        "fontSize": 18,
-        "lineHeight": 22,
+        "fontSize": 22,
+        "lineHeight": 33,
       },
       {
         "color": "#FFFFFF",
-        "fontFamily": "Titillium Web",
+        "fontFamily": "Readex Pro",
         "fontStyle": "normal",
-        "fontWeight": "600",
+        "fontWeight": "400",
       },
     ]
   }
-  weight="SemiBold"
-  weightColorFactory={[Function]}
+  weight="Regular"
 >
   Text
 </Text>
@@ -224,29 +227,30 @@ exports[`Test Typography Components H3 Snapshot 3`] = `
 exports[`Test Typography Components H3 Snapshot 4`] = `
 <Text
   color="white"
-  font="TitilliumWeb"
+  defaultColor="black"
+  defaultWeight="Regular"
+  font="ReadexPro"
   fontStyle={
     {
-      "fontSize": 18,
-      "lineHeight": 22,
+      "fontSize": 22,
+      "lineHeight": 33,
     }
   }
   style={
     [
       {
-        "fontSize": 18,
-        "lineHeight": 22,
+        "fontSize": 22,
+        "lineHeight": 33,
       },
       {
         "color": "#FFFFFF",
-        "fontFamily": "Titillium Web",
+        "fontFamily": "Readex Pro",
         "fontStyle": "normal",
         "fontWeight": "700",
       },
     ]
   }
   weight="Bold"
-  weightColorFactory={[Function]}
 >
   Text
 </Text>
@@ -254,30 +258,31 @@ exports[`Test Typography Components H3 Snapshot 4`] = `
 
 exports[`Test Typography Components H3 Snapshot 5`] = `
 <Text
-  color="white"
-  font="TitilliumWeb"
+  color="black"
+  defaultColor="black"
+  defaultWeight="Regular"
+  font="ReadexPro"
   fontStyle={
     {
-      "fontSize": 18,
-      "lineHeight": 22,
+      "fontSize": 22,
+      "lineHeight": 33,
     }
   }
   style={
     [
       {
-        "fontSize": 18,
-        "lineHeight": 22,
+        "fontSize": 22,
+        "lineHeight": 33,
       },
       {
-        "color": "#FFFFFF",
-        "fontFamily": "Titillium Web",
+        "color": "#0E0F13",
+        "fontFamily": "Readex Pro",
         "fontStyle": "normal",
         "fontWeight": "700",
       },
     ]
   }
   weight="Bold"
-  weightColorFactory={[Function]}
 >
   Text
 </Text>

package/src/core/IOColors.ts

@@ -404,8 +404,8 @@ Return the color value with RGBA format (RGB + Alpha transparency), starting fro
 @param opacity Opacity value that range from 0 to 1. Default value = 1.
  */
 /* Taken from this Gist: https://gist.github.com/danieliser/b4b24c9f772066bcf0a6 */
-export const hexToRgba = (hexCode: string, opacity: number = 1) => {
-  const hex = hexCode.replace("#", "");
+export const hexToRgba = (hexCode: ColorValue, opacity: number = 1) => {
+  const hex = hexCode.toString().replace("#", "");
 
   const r = parseInt(hex.substring(0, 2), 16);
   const g = parseInt(hex.substring(2, 4), 16);

package/src/core/IOSpacing.ts

@@ -5,7 +5,7 @@ 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
+  4, 6, 8, 12, 16, 20, 24, 28, 32, 40, 48, 56, 64, 72, 80
 ] as const;
 
 export type IOSpacingScale = (typeof IOSpacingScale)[number];
@@ -45,4 +45,4 @@ export type IOListItemIDPSpacing = Extract<IOSpacingScale, 8 | 16 | 24>;
 export const IOListItemIDPHSpacing: IOListItemIDPSpacing = 16 as const;
 export const IOListItemIDPVSpacing: IOListItemIDPSpacing = 16 as const;
 export const IOListItemIDPSavedVSpacing: IOListItemIDPSpacing = 24 as const;
-export const IOListItemLogoMargin: IOListItemIDPSpacing = 8 as const;
+export const IOListItemLogoMargin: IOListItemIDPSpacing = 8 as const;

package/src/core/IOStyles.ts

@@ -9,6 +9,8 @@ import { IOAppMargin, IOSpacer, IOSpacingScale } from "./IOSpacing";
 
 interface IOVisualCostants {
   appMarginDefault: IOAppMargin;
+  // Header
+  headerHeight: number;
   // Dimensions
   avatarSizeSmall: number;
   avatarSizeMedium: number;
@@ -16,6 +18,7 @@ interface IOVisualCostants {
 
 export const IOVisualCostants: IOVisualCostants = {
   appMarginDefault: 24,
+  headerHeight: 56,
   avatarSizeSmall: 44,
   avatarSizeMedium: 66
 };
@@ -88,6 +91,8 @@ const btnSizeLarge = 56;
 // NEW Design System
 const btnBorderRadius = 8;
 const btnSizeDefault = 48;
+export const buttonSolidHeight: number = btnSizeDefault;
+
 // TODO: Replace the number type with the new IOIconSizeScale
 const iconBtnSizeSmall: number = 24;
 
@@ -217,6 +222,7 @@ interface IOListItemVisualParams {
   paddingVertical: IOSpacingScale;
   paddingHorizontal: IOAppMargin;
   iconMargin: IOSpacingScale;
+  actionMargin: IOSpacingScale;
   iconSize: IOIconSizeScale;
   chevronSize: IOIconSizeScale;
 }
@@ -225,6 +231,7 @@ export const IOListItemVisualParams: IOListItemVisualParams = {
   paddingVertical: 12,
   paddingHorizontal: IOVisualCostants.appMarginDefault,
   iconMargin: 16,
+  actionMargin: 16,
   iconSize: 24,
   chevronSize: 24
 };
@@ -298,6 +305,7 @@ interface IOSelectionListItemVisualParams {
   paddingVertical: IOSpacingScale;
   paddingHorizontal: IOAppMargin;
   iconMargin: IOSpacingScale;
+  actionMargin: IOSpacer;
   iconSize: IOIconSizeScale;
   descriptionMargin: IOSpacer;
 }
@@ -308,6 +316,7 @@ export const IOSelectionListItemVisualParams: IOSelectionListItemVisualParams =
     paddingHorizontal: IOVisualCostants.appMarginDefault,
     iconMargin: 8,
     iconSize: 24,
+    actionMargin: 16,
     descriptionMargin: 4
   };
 

package/src/index.tsx

@@ -1,3 +1,4 @@
 export * from "./core";
 export * from "./components";
 export * from "./functions";
+export * from "./utils/types";

package/src/json-import.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Allow import of json files.
+ *
+ * Ex: import jsonFile from '../file.json`
+ *
+ * More @https://hackernoon.com/import-json-into-typescript-8d465beded79
+ */
+
+declare module "*.json" {
+    const value: any;
+    export default value;
+  }
+