@pagopa/io-app-design-system 1.1.1 → 1.1.2

package/src/components/checkbox/AnimatedMessageCheckbox.tsx

@@ -0,0 +1,105 @@
+import React, { useEffect } from "react";
+import { StyleSheet, Pressable, PressableProps } from "react-native";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  interpolate,
+  withSpring,
+  withTiming,
+  Easing
+} from "react-native-reanimated";
+import { IOColors } from "../../core/IOColors";
+import { IOSpringValues } from "../../core/IOAnimations";
+import { AnimatedTick } from "../common/AnimatedTick";
+import {
+  IOSelectionTickVisualParams,
+  IOVisualCostants
+} from "../../core/IOStyles";
+import { IOSpacingScale } from "../../core/IOSpacing";
+
+type Props = {
+  checked?: boolean;
+};
+
+type AnimatedMessageCheckbox = Props & Pick<PressableProps, "onPress">;
+
+const internalSpacing: IOSpacingScale = 4;
+
+const styles = StyleSheet.create({
+  checkBoxWrapper: {
+    width: IOVisualCostants.avatarSizeSmall,
+    height: IOVisualCostants.avatarSizeSmall,
+    padding: internalSpacing
+  },
+  checkBoxCircle: {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    width: IOVisualCostants.avatarSizeSmall,
+    height: IOVisualCostants.avatarSizeSmall,
+    borderRadius: IOVisualCostants.avatarSizeSmall
+  }
+});
+
+/**
+ * Animated message checkbox used for the specific message
+ * list item (Select mode that enables related actions)
+ */
+export const AnimatedMessageCheckbox = ({
+  checked,
+  onPress
+}: AnimatedMessageCheckbox) => {
+  const isChecked = checked ?? true;
+
+  const circleAnimationProgress = useSharedValue(checked ? 1 : 0);
+  const tickAnimationProgress = useSharedValue(checked ? 1 : 0);
+
+  useEffect(() => {
+    // eslint-disable-next-line functional/immutable-data
+    circleAnimationProgress.value = withSpring(
+      checked ? 1 : 0,
+      IOSpringValues.selection
+    );
+    // eslint-disable-next-line functional/immutable-data
+    tickAnimationProgress.value = withTiming(checked ? 1 : 0, {
+      duration: 250,
+      easing: Easing.out(Easing.cubic)
+    });
+  }, [checked, circleAnimationProgress, tickAnimationProgress]);
+
+  const animatedCheckboxCircle = useAnimatedStyle(() => {
+    const scale = interpolate(circleAnimationProgress.value, [0, 1], [0.8, 1]);
+    const opacity = circleAnimationProgress.value;
+
+    return {
+      opacity,
+      transform: [{ scale }]
+    };
+  });
+
+  return (
+    <Pressable
+      testID="AnimatedMessageCheckboxInput"
+      onPress={onPress}
+      style={styles.checkBoxWrapper}
+    >
+      <Animated.View
+        style={[
+          styles.checkBoxCircle,
+          {
+            backgroundColor:
+              IOColors[IOSelectionTickVisualParams.bgColorOnState]
+          },
+          animatedCheckboxCircle
+        ]}
+      />
+      {isChecked && (
+        <AnimatedTick
+          progress={tickAnimationProgress}
+          strokeWidth={1.5}
+          stroke={IOColors[IOSelectionTickVisualParams.tickColor]}
+        />
+      )}
+    </Pressable>
+  );
+};

package/src/components/checkbox/index.tsx

@@ -1,2 +1,3 @@
 export * from "./CheckboxLabel";
 export * from "./AnimatedCheckbox";
+export * from "./AnimatedMessageCheckbox";

package/src/components/icons/Icon.tsx

@@ -144,8 +144,10 @@ import IconSystemSettingsiOS from "./svg/IconSystemSettingsiOS";
 import IconSystemToggleInstructions from "./svg/IconSystemToggleInstructions";
 import IconSystemAppsAndroid from "./svg/IconSystemAppsAndroid";
 import IconSystemNotificationsInstructions from "./svg/IconSystemNotificationsInstructions";
+import IconArchive from "./svg/IconArchive";
 
 export const IOIcons = {
+  archive: IconArchive,
   spid: IconSpid,
   cie: IconCie /* io-cie */,
   qrCode: IconQrCode,

package/src/components/icons/svg/IconArchive.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconArchive = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M0 4c0-1.65685 1.34315-3 3-3h18c1.6569 0 3 1.34315 3 3v2c0 1.30622-.8348 2.41746-2 2.82929V18c0 2.7614-2.2386 5-5 5H7c-2.76142 0-5-2.2386-5-5V8.82929C.8348 8.41746 0 7.30622 0 6V4Zm4 5h16v9c0 1.6569-1.3431 3-3 3H7c-1.65685 0-3-1.3431-3-3V9Zm18-3c0 .55228-.4477 1-1 1H3c-.55228 0-1-.44771-1-1V4c0-.55228.44772-1 1-1h18c.5523 0 1 .44771 1 1v2ZM9 11c-.55229 0-1 .4477-1 1s.44771 1 1 1h6c.5523 0 1-.4477 1-1s-.4477-1-1-1H9Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconArchive;

package/src/components/icons/svg/originals/IconArchive.svg

@@ -0,0 +1,4 @@
+<svg fill="none"
+  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M0 4c0-1.65685 1.34315-3 3-3h18c1.6569 0 3 1.34315 3 3v2c0 1.30622-.8348 2.41746-2 2.82929V18c0 2.7614-2.2386 5-5 5H7c-2.76142 0-5-2.2386-5-5V8.82929C.8348 8.41746 0 7.30622 0 6V4Zm4 5h16v9c0 1.6569-1.3431 3-3 3H7c-1.65685 0-3-1.3431-3-3V9Zm18-3c0 .55228-.4477 1-1 1H3c-.55228 0-1-.44771-1-1V4c0-.55228.44772-1 1-1h18c.5523 0 1 .44771 1 1v2ZM9 11c-.55229 0-1 .4477-1 1s.44771 1 1 1h6c.5523 0 1-.4477 1-1s-.4477-1-1-1H9Z" fill="#0E0F13" />
+</svg>

package/src/components/layout/HeaderSecondLevel.tsx

@@ -0,0 +1,153 @@
+import * as React from "react";
+import { View, StyleSheet, Platform } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import Animated, {
+  interpolate,
+  interpolateColor,
+  useAnimatedStyle
+} from "react-native-reanimated";
+import { IOColors, hexToRgba } from "../../core/IOColors";
+
+import {
+  IOStyles,
+  IOVisualCostants,
+  iconBtnSizeSmall
+} from "../../core/IOStyles";
+import { HSpacer } from "../spacer";
+import type { IOSpacer } from "../../core/IOSpacing";
+import { WithTestID } from "../../utils/types";
+import IconButton from "../buttons/IconButton";
+import { makeFontStyleObject } from "../../utils/fonts";
+
+export type HeaderSecondLevel = WithTestID<{
+  scrollValues: ScrollValues;
+  title: string;
+  goBack: () => void;
+  backAccessibilityLabel: string;
+  // Accepted components: IconButton
+  // Don't use any components other than this, please.
+  firstAction?: React.ReactNode;
+  secondAction?: React.ReactNode;
+  thirdAction?: React.ReactNode;
+  // Visual attributes
+  transparent?: boolean;
+}>;
+
+type ScrollValues = {
+  contentOffsetY: Animated.SharedValue<number>;
+  triggerOffset: number;
+};
+
+const HEADER_BG_COLOR: IOColors = "white";
+const borderColorDisabled = hexToRgba(IOColors["grey-100"], 0);
+const headerTransparent = hexToRgba(IOColors[HEADER_BG_COLOR], 0);
+const titleHorizontalMargin: IOSpacer = 16;
+
+const styles = StyleSheet.create({
+  headerInner: {
+    paddingHorizontal: IOVisualCostants.appMarginDefault,
+    height: IOVisualCostants.headerHeight,
+    borderBottomWidth: 1,
+    flexGrow: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  headerTitle: {
+    ...makeFontStyleObject("Regular", false, "ReadexPro"),
+    fontSize: 14,
+    textAlign: "center",
+    flexGrow: 1,
+    flexShrink: 1,
+    marginHorizontal: titleHorizontalMargin
+  }
+});
+
+export const HeaderSecondLevel = ({
+  scrollValues,
+  goBack,
+  backAccessibilityLabel,
+  title,
+  firstAction,
+  secondAction,
+  thirdAction,
+  transparent = false,
+  testID
+}: HeaderSecondLevel) => {
+  const insets = useSafeAreaInsets();
+
+  const headerWrapperAnimatedStyle = useAnimatedStyle(() => ({
+    backgroundColor: transparent
+      ? interpolateColor(
+          scrollValues.contentOffsetY.value,
+          [0, scrollValues.triggerOffset],
+          [headerTransparent, IOColors[HEADER_BG_COLOR]]
+        )
+      : undefined,
+    borderColor: interpolateColor(
+      scrollValues.contentOffsetY.value,
+      [0, scrollValues.triggerOffset],
+      [borderColorDisabled, IOColors["grey-100"]]
+    )
+  }));
+
+  const titleAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: interpolate(
+      scrollValues.contentOffsetY.value,
+      [0, scrollValues.triggerOffset],
+      [0, 1]
+    )
+  }));
+
+  return (
+    <Animated.View
+      accessibilityRole="header"
+      testID={testID}
+      style={[
+        { marginTop: insets.top },
+        styles.headerInner,
+        transparent
+          ? { borderBottomWidth: 0 }
+          : { backgroundColor: IOColors[HEADER_BG_COLOR] },
+        headerWrapperAnimatedStyle
+      ]}
+    >
+      <IconButton
+        icon={Platform.OS === "ios" ? "backiOS" : "backAndroid"}
+        color="neutral"
+        onPress={goBack}
+        accessibilityLabel={backAccessibilityLabel}
+      />
+      <Animated.Text
+        numberOfLines={1}
+        style={[styles.headerTitle, titleAnimatedStyle]}
+      >
+        {title}
+      </Animated.Text>
+      <View style={[IOStyles.row, { flexShrink: 0 }]}>
+        {firstAction ? (
+          firstAction
+        ) : (
+          <HSpacer size={iconBtnSizeSmall as IOSpacer} />
+        )}
+        {secondAction && (
+          <>
+            {/* Ideally, with the "gap" flex property,
+              we can get rid of these ugly constructs */}
+            <HSpacer size={16} />
+            {secondAction}
+          </>
+        )}
+        {thirdAction && (
+          <>
+            {/* Same as above */}
+            <HSpacer size={16} />
+            {thirdAction}
+          </>
+        )}
+      </View>
+    </Animated.View>
+  );
+};
+
+export default HeaderSecondLevel;

package/src/components/layout/index.tsx

@@ -1 +1,4 @@
+export * from "./GradientScrollView";
 export * from "./GradientBottomActions";
+export * from "./HeaderFirstLevel";
+export * from "./HeaderSecondLevel";

package/src/components/typography/CTA.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { IOTheme, IOThemeLight } from "../../core/IOColors";
+import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
+import { useTypographyFactory } from "./Factory";
+import { ExternalTypographyProps, TypographyProps } from "./common";
+
+type AllowedColors = IOTheme["textBody-default"] | "blueIO-850";
+type AllowedWeight = Extract<IOFontWeight, "SemiBold" | "Regular">;
+
+type OwnProps = ExternalTypographyProps<
+  TypographyProps<AllowedWeight, AllowedColors>
+>;
+
+/* Common typographic styles */
+const ctaFontSize = 16;
+const ctaLineHeight = 20;
+const ctaDefaultColor: AllowedColors = IOThemeLight["textBody-default"];
+/* New typographic styles */
+const ctaFontName: IOFontFamily = "ReadexPro";
+const ctaDefaultWeight: AllowedWeight = "Regular";
+
+/**
+ * Typography component to render `CTA` text with font size {@link ctaFontSize} and fontFamily {@link ctaFontName}.
+ * default values(if not defined) are weight: {@link ctaDefaultWeight}, color: {@link ctaDefaultColor}
+ * @param props
+ * @constructor
+ */
+export const CTA: React.FunctionComponent<OwnProps> = props =>
+  useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight: ctaDefaultWeight,
+    defaultColor: ctaDefaultColor,
+    font: ctaFontName,
+    fontStyle: { fontSize: ctaFontSize, lineHeight: ctaLineHeight }
+  });

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

@@ -32,6 +32,38 @@ exports[`Test Typography Components Body Snapshot 1`] = `
 </Text>
 `;
 
+exports[`Test Typography Components CTA Snapshot 1`] = `
+<Text
+  color="black"
+  defaultColor="black"
+  defaultWeight="Regular"
+  font="ReadexPro"
+  fontStyle={
+    {
+      "fontSize": 16,
+      "lineHeight": 20,
+    }
+  }
+  style={
+    [
+      {
+        "fontSize": 16,
+        "lineHeight": 20,
+      },
+      {
+        "color": "#0E0F13",
+        "fontFamily": "Readex Pro",
+        "fontStyle": "normal",
+        "fontWeight": "400",
+      },
+    ]
+  }
+  weight="Regular"
+>
+  Text
+</Text>
+`;
+
 exports[`Test Typography Components H1 Snapshot 1`] = `
 <Text
   color="bluegreyDark"

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

@@ -1,9 +1,9 @@
 import React from "react";
 import * as TestRenderer from "react-test-renderer";
-import { IOFontWeight } from "../../../utils/fonts";
 import type { IOColors } from "../../../core/IOColors";
+import { IOFontWeight } from "../../../utils/fonts";
 import { Body } from "../Body";
-import { calculateWeightColor } from "../common";
+import { CTA } from "../CTA";
 import { H1 } from "../H1";
 import { H2 } from "../H2";
 import { H3 } from "../H3";
@@ -14,6 +14,7 @@ import { Label } from "../Label";
 import { LabelSmall } from "../LabelSmall";
 import { Link } from "../Link";
 import { Monospace } from "../Monospace";
+import { calculateWeightColor } from "../common";
 
 describe("Test Typography Components", () => {
   it("H1 Snapshot", () => {
@@ -144,6 +145,10 @@ describe("Test Typography Components", () => {
     const bodyDefault = TestRenderer.create(<Body>Text</Body>).toJSON();
     expect(bodyDefault).toMatchSnapshot();
   });
+  it("CTA Snapshot", () => {
+    const cta = TestRenderer.create(<CTA>Text</CTA>).toJSON();
+    expect(cta).toMatchSnapshot();
+  });
   it("LabelSmall Snapshot", () => {
     const labelSmallDefault = TestRenderer.create(
       <LabelSmall>Text</LabelSmall>

package/src/components/typography/index.tsx

@@ -1,6 +1,6 @@
 export * from "./BaseTypography";
 export * from "./Body";
-export * from "./common";
+export * from "./CTA";
 export * from "./Factory";
 export * from "./H1";
 export * from "./H2";
@@ -12,5 +12,5 @@ export * from "./Label";
 export * from "./LabelSmall";
 export * from "./Link";
 export * from "./Monospace";
-
+export * from "./common";
 

package/src/core/IOStyles.ts

@@ -94,7 +94,7 @@ const btnSizeDefault = 48;
 export const buttonSolidHeight: number = btnSizeDefault;
 
 // TODO: Replace the number type with the new IOIconSizeScale
-const iconBtnSizeSmall: number = 24;
+export const iconBtnSizeSmall: number = 24;
 
 export const IOButtonLegacyStyles = StyleSheet.create({
   /* BaseButton, used in the: