@pagopa/io-app-design-system 1.1.3 → 1.3.0

package/src/components/typography/H5.tsx

@@ -6,20 +6,20 @@ import { ExternalTypographyProps } from "./common";
 
 // these colors are allowed only when the weight is SemiBold
 type AllowedSemiBoldColors = Extract<
-    IOColors,
-    "bluegreyDark" | "bluegrey" | "bluegreyLight" | "blue" | "white" | "red"
+  IOColors,
+  "bluegreyDark" | "bluegrey" | "bluegreyLight" | "blue" | "white" | "red"
 >;
 
 // when the weight is bold, only the white color is allowed
 type AllowedRegularColors = Extract<
-    IOColors,
-    | "bluegreyDark"
-    | "bluegrey"
-    | "bluegreyLight"
-    | "blue"
-    | "white"
-    | "red"
-    | "grey"
+  IOColors,
+  | "bluegreyDark"
+  | "bluegrey"
+  | "bluegreyLight"
+  | "blue"
+  | "white"
+  | "red"
+  | "grey"
 >;
 
 // all the possible colors
@@ -30,14 +30,14 @@ type AllowedWeight = Extract<IOFontWeight, "SemiBold" | "Regular">;
 
 // these are the properties allowed only if weight is undefined or SemiBold
 type SemiBoldProps = {
-    weight?: Extract<IOFontWeight, "SemiBold">;
-    color?: AllowedSemiBoldColors;
+  weight?: Extract<IOFontWeight, "SemiBold">;
+  color?: AllowedSemiBoldColors;
 };
 
 // these are the properties allowed only if weight is Bold
 type RegularProps = {
-    weight: Extract<IOFontWeight, "Regular">;
-    color?: AllowedRegularColors;
+  weight: Extract<IOFontWeight, "Regular">;
+  color?: AllowedRegularColors;
 };
 
 type BoldKindProps = SemiBoldProps | RegularProps;
@@ -54,13 +54,13 @@ export const h5DefaultWeight: AllowedWeight = "SemiBold";
  * @param props
  * @constructor
  */
-export const H5: React.FC<OwnProps> = (props) => {
-    const fontName: FontFamily = "TitilliumWeb";
-    return useTypographyFactory<AllowedWeight, AllowedColors>({
-        ...props,
-        defaultWeight: h5DefaultWeight,
-        defaultColor: h5DefaultColor,
-        font: fontName,
-        fontStyle: { fontSize: h5FontSize }
-    });
-};
+export const H5: React.FC<OwnProps> = props => {
+  const fontName: FontFamily = "TitilliumWeb";
+  return useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight: h5DefaultWeight,
+    defaultColor: h5DefaultColor,
+    font: fontName,
+    fontStyle: { fontSize: h5FontSize }
+  });
+};

package/src/components/typography/H6.tsx

@@ -9,7 +9,7 @@ type AllowedColors = IOTheme["textBody-default"] | "blueIO-850";
 type AllowedWeight = Extract<IOFontWeight, "SemiBold" | "Regular">;
 
 type OwnProps = ExternalTypographyProps<
-    TypographyProps<AllowedWeight, AllowedColors>
+  TypographyProps<AllowedWeight, AllowedColors>
 >;
 
 export const h6FontSize = 16;
@@ -23,13 +23,13 @@ export const h6DefaultWeight: AllowedWeight = "Regular";
  * @param props
  * @constructor
  */
-export const H6: React.FC<OwnProps> = (props) => {
-    const fontName: FontFamily = "ReadexPro";
-    return useTypographyFactory<AllowedWeight, AllowedColors>({
-        ...props,
-        defaultWeight: h6DefaultWeight,
-        defaultColor: h6DefaultColor,
-        font: fontName,
-        fontStyle: { fontSize: h6FontSize, lineHeight: h6LineHeight }
-    });
+export const H6: React.FC<OwnProps> = props => {
+  const fontName: FontFamily = "ReadexPro";
+  return useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight: h6DefaultWeight,
+    defaultColor: h6DefaultColor,
+    font: fontName,
+    fontStyle: { fontSize: h6FontSize, lineHeight: h6LineHeight }
+  });
 };

package/src/components/typography/Label.tsx

@@ -5,13 +5,13 @@ import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
 
 type PartialAllowedColors = Extract<
-    IOColors,
-    "blue" | "bluegrey" | "bluegreyDark" | "white" | "red"
+  IOColors,
+  "blue" | "bluegrey" | "bluegreyDark" | "white" | "red"
 >;
 type AllowedColors = PartialAllowedColors | IOColorsStatusForeground;
 type AllowedWeight = Extract<IOFontWeight, "Bold" | "Regular" | "SemiBold">;
 type OwnProps = ExternalTypographyProps<
-    TypographyProps<AllowedWeight, AllowedColors>
+  TypographyProps<AllowedWeight, AllowedColors>
 >;
 
 /**
@@ -20,17 +20,17 @@ type OwnProps = ExternalTypographyProps<
  * @param props`
  * @constructor
  */
-export const Label: React.FC<OwnProps> = (props) => {
-    const fontName: FontFamily = "TitilliumWeb";
-    const fontSize = 16;
-    const labelDefaultWeight = "Bold";
-    const labelDefaultcolor = "blue";
+export const Label: React.FC<OwnProps> = props => {
+  const fontName: FontFamily = "TitilliumWeb";
+  const fontSize = 16;
+  const labelDefaultWeight = "Bold";
+  const labelDefaultcolor = "blue";
 
-    return useTypographyFactory<AllowedWeight, AllowedColors>({
-        ...props,
-        defaultWeight: labelDefaultWeight,
-        defaultColor: labelDefaultcolor,
-        font: fontName,
-        fontStyle: { fontSize }
-    });
-};
+  return useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight: labelDefaultWeight,
+    defaultColor: labelDefaultcolor,
+    font: fontName,
+    fontStyle: { fontSize }
+  });
+};

package/src/components/typography/LabelHeader.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
+import { IOTheme, IOThemeLight } from "../../core";
+import { useTypographyFactory } from "./Factory";
+import { ExternalTypographyProps, TypographyProps } from "./common";
+
+type AllowedColors =
+  | IOTheme["textBody-default"]
+  | "grey-650"
+  | "grey-850"
+  | "white"
+  | "black";
+type AllowedWeight = Extract<IOFontWeight, "Regular">;
+
+type OwnProps = ExternalTypographyProps<
+  TypographyProps<AllowedWeight, AllowedColors>
+>;
+
+/* Common typographic styles */
+export const labelHeaderFontSize = 14;
+export const labelHeaderLineHeight = 18;
+export const labelHeaderDefaultColor: AllowedColors =
+  IOThemeLight["textBody-default"];
+/* New typographic styles */
+const labelHeaderFontName: IOFontFamily = "ReadexPro";
+const labelHeaderDefaultWeight: AllowedWeight = "Regular";
+
+/**
+ * Typography component to render `LabelHeader` text with font size {@link fontSize} and fontFamily {@link fontName}.
+ * default values(if not defined) are weight: `Regular`, color: `bluegreyDark`
+ * @param props
+ * @constructor
+ */
+export const LabelHeader: React.FunctionComponent<OwnProps> = props =>
+  useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight: labelHeaderDefaultWeight,
+    defaultColor: labelHeaderDefaultColor,
+    font: labelHeaderFontName,
+    fontStyle: {
+      fontSize: labelHeaderFontSize,
+      lineHeight: labelHeaderLineHeight
+    }
+  });

package/src/components/typography/LabelSmall.tsx

@@ -5,24 +5,23 @@ import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
 
 type PartialAllowedColors = Extract<
-    IOColors,
-    | "blue"
-    | "bluegrey"
-    | "red"
-    | "white"
-    | "bluegreyDark"
-    | "grey-700"
-    | "grey-200"
+  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 OwnProps = ExternalTypographyProps<
-    TypographyProps<AllowedWeight, AllowedColors>
+  TypographyProps<AllowedWeight, AllowedColors>
 > &
-    AllowedFontSize;
-
+  AllowedFontSize;
 
 /**
  * Typography component to render `LabelSmall` text with font size {@link fontSize} and fontFamily {@link fontName}.
@@ -30,21 +29,21 @@ type OwnProps = ExternalTypographyProps<
  * @param props`
  * @constructor
  */
-export const LabelSmall: React.FC<OwnProps> = (props) => {
-    const fontName: FontFamily = "TitilliumWeb";
-    const fontSizeMapping: Record<FontSize, number> = { regular: 14, small: 12 };
-    const labelDefaultWeight = "Bold";
-    const labelDefaultcolor = "blue";
+export const LabelSmall: React.FC<OwnProps> = props => {
+  const fontName: FontFamily = "TitilliumWeb";
+  const fontSizeMapping: Record<FontSize, number> = { regular: 14, small: 12 };
+  const labelDefaultWeight = "Bold";
+  const labelDefaultcolor = "blue";
 
-    return useTypographyFactory<AllowedWeight, AllowedColors>({
-        ...props,
-        defaultWeight: labelDefaultWeight,
-        defaultColor:labelDefaultcolor,
-        font: fontName,
-        fontStyle: {
-            fontSize: props.fontSize
-                ? fontSizeMapping[props.fontSize]
-                : fontSizeMapping.regular
-        }
-    });
-};
+  return useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight: labelDefaultWeight,
+    defaultColor: labelDefaultcolor,
+    font: fontName,
+    fontStyle: {
+      fontSize: props.fontSize
+        ? fontSizeMapping[props.fontSize]
+        : fontSizeMapping.regular
+    }
+  });
+};

package/src/components/typography/Monospace.tsx

@@ -8,7 +8,7 @@ type AllowedColors = Extract<IOColors, "bluegreyDark" | "bluegrey">;
 type AllowedWeight = Extract<IOFontWeight, "Regular" | "SemiBold" | "Bold">;
 
 type OwnProps = ExternalTypographyProps<
-    TypographyProps<AllowedWeight, AllowedColors>
+  TypographyProps<AllowedWeight, AllowedColors>
 >;
 
 /**
@@ -17,18 +17,18 @@ type OwnProps = ExternalTypographyProps<
  * @param props`
  * @constructor
  */
-export const Monospace: React.FC<OwnProps> = (props) => {
-    const fontName: FontFamily = "RobotoMono";
-    const fontSize = 16;
+export const Monospace: React.FC<OwnProps> = props => {
+  const fontName: FontFamily = "RobotoMono";
+  const fontSize = 16;
 
-    const monospaceDefaultWeight = "Regular";
-    const monospaceDefaultcolor = "bluegrey";
+  const monospaceDefaultWeight = "Regular";
+  const monospaceDefaultcolor = "bluegrey";
 
-    return useTypographyFactory<AllowedWeight, AllowedColors>({
-        ...props,
-        defaultWeight: monospaceDefaultWeight,
-        defaultColor: monospaceDefaultcolor,
-        font: fontName,
-        fontStyle: { fontSize }
-    });
-};
+  return useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight: monospaceDefaultWeight,
+    defaultColor: monospaceDefaultcolor,
+    font: fontName,
+    fontStyle: { fontSize }
+  });
+};

package/src/components/typography/common.tsx

@@ -8,18 +8,18 @@ import { RequiredAll } from "../../utils/types";
  * The style exported for the typography elements, without the fields characterizing the font style
  */
 type TypographyStyle = StyleProp<
-    Omit<
-        TextStyle,
-        "color" | "fontFamily" | "fontStyle" | "fontWeight" | "fontSize"
-    >
+  Omit<
+    TextStyle,
+    "color" | "fontFamily" | "fontStyle" | "fontWeight" | "fontSize"
+  >
 >;
 
 /**
  * Define a generic type for props used by all the typography leaf components
  */
 export type TypographyProps<WeightPropsType, ColorsPropsType> = {
-    weight?: WeightPropsType;
-    color?: ColorsPropsType;
+  weight?: WeightPropsType;
+  color?: ColorsPropsType;
 };
 
 // Define a standard type, using IOFontWeight and IOColors
@@ -33,15 +33,15 @@ type DefaultTypographyProps = TypographyProps<IOFontWeight, IOColors>;
  * @param color the optional color value
  */
 export function calculateWeightColor<WeightPropsType, ColorsPropsType>(
-    defaultWeight: WeightPropsType,
-    defaultColor: ColorsPropsType,
-    weight?: WeightPropsType,
-    color?: ColorsPropsType
+  defaultWeight: WeightPropsType,
+  defaultColor: ColorsPropsType,
+  weight?: WeightPropsType,
+  color?: ColorsPropsType
 ): RequiredTypographyProps<WeightPropsType, ColorsPropsType> {
-    return {
-        weight: weight ?? defaultWeight,
-        color: color ?? defaultColor
-    };
+  return {
+    weight: weight ?? defaultWeight,
+    color: color ?? defaultColor
+  };
 }
 
 /**
@@ -49,12 +49,12 @@ export function calculateWeightColor<WeightPropsType, ColorsPropsType>(
  * In addition to the {@link DefaultTypographyProps} all the {@link Text} props are allowed (`style` excluded)
  */
 export type ExternalTypographyProps<T> = T extends DefaultTypographyProps
-    ? Omit<React.ComponentPropsWithRef<typeof Text>, "style"> &
-    T & { style?: TypographyStyle }
-    : never;
+  ? Omit<React.ComponentPropsWithRef<typeof Text>, "style"> &
+      T & { style?: TypographyStyle }
+  : never;
 
 /**
-* Define mandatory all the keys of {@link TypographyProps}
-*/
+ * Define mandatory all the keys of {@link TypographyProps}
+ */
 export type RequiredTypographyProps<WeightPropsType, ColorsPropsType> =
-    RequiredAll<TypographyProps<WeightPropsType, ColorsPropsType>>;
+  RequiredAll<TypographyProps<WeightPropsType, ColorsPropsType>>;

package/src/components/typography/index.tsx

@@ -13,4 +13,3 @@ export * from "./LabelSmall";
 export * from "./Link";
 export * from "./Monospace";
 export * from "./common";
-

package/src/index.tsx

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

package/src/json-import.d.ts

@@ -7,7 +7,6 @@
  */
 
 declare module "*.json" {
-    const value: any;
-    export default value;
-  }
-  
+  const value: any;
+  export default value;
+}

package/src/utils/dates.ts

@@ -15,4 +15,4 @@ export const toAndroidCacheTimestamp = () =>
   localeDateFormat(
     new Date(),
     I18n.t("global.dateFormats.shortFormat").replace(/\//g, "")
-  );
+  );

package/src/utils/hooks/useSpringPressProgressValue.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+import Animated, {
+  useDerivedValue,
+  useSharedValue,
+  withSpring
+} from "react-native-reanimated";
+import { IOSpringValues } from "../../core";
+
+export const useSpringPressProgressValue = (
+  springValue = IOSpringValues.button
+) => {
+  const isPressed: Animated.SharedValue<number> = useSharedValue(0);
+
+  const progress = useDerivedValue(() =>
+    withSpring(isPressed.value, springValue)
+  );
+
+  const onPressIn = React.useCallback(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isPressed.value = 1;
+  }, [isPressed]);
+  const onPressOut = React.useCallback(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isPressed.value = 0;
+  }, [isPressed]);
+
+  return { onPressIn, onPressOut, progress };
+};

package/src/utils/image.ts

@@ -13,26 +13,26 @@ import { toAndroidCacheTimestamp } from "./dates";
  * if the platform is Android and the source contains an URI. The same source otherwise.
  */
 export const addCacheTimestampToUri = (source: ImageURISource) => {
-    const UriSource = T.type({
-      uri: T.string
-    });
-  
-    return pipe(
-      Platform.OS === "android",
-      B.fold(
-        () => source,
-        () =>
-          pipe(
-            source,
-            UriSource.decode,
-            E.fold(
-              () => source,
-              () => ({
-                ...source,
-                uri: `${source.uri}?ts=${toAndroidCacheTimestamp()}`
-              })
-            )
+  const UriSource = T.type({
+    uri: T.string
+  });
+
+  return pipe(
+    Platform.OS === "android",
+    B.fold(
+      () => source,
+      () =>
+        pipe(
+          source,
+          UriSource.decode,
+          E.fold(
+            () => source,
+            () => ({
+              ...source,
+              uri: `${source.uri}?ts=${toAndroidCacheTimestamp()}`
+            })
           )
-      )
-    );
-  };
+        )
+    )
+  );
+};