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

package/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap

@@ -461,3 +461,373 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
   </View>
 </View>
 `;
+
+exports[`Test Buttons Components IconButton Snapshot 1`] = `
+<View
+  accessibilityLabel="accessibilityLabel"
+  accessibilityRole="button"
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  hitSlop={8}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "alignSelf": "flex-start",
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "height": 24,
+          "width": 24,
+        },
+        {
+          "transform": [
+            {
+              "scale": undefined,
+            },
+          ],
+        },
+      ]
+    }
+  >
+    <RNSVGSvgView
+      accessibilityElementsHidden={true}
+      accessibilityLabel=""
+      accessible={false}
+      align="xMidYMid"
+      animatedProps={
+        {
+          "color": undefined,
+        }
+      }
+      bbHeight={24}
+      bbWidth={24}
+      color={4278927075}
+      focusable={false}
+      height={24}
+      importantForAccessibility="no-hide-descendants"
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        [
+          {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          {
+            "color": "#0B3EE3",
+          },
+          {
+            "flex": 0,
+            "height": 24,
+            "width": 24,
+          },
+        ]
+      }
+      tintColor={4278927075}
+      vbHeight={24}
+      vbWidth={24}
+      width={24}
+    >
+      <RNSVGGroup>
+        <RNSVGPath
+          clipRule={0}
+          d="M12 24c6.629 0 12-5.371 12-12S18.629 0 12 0C5.375 0 0 5.371 0 12s5.375 12 12 12Zm.033-10.97c-.997 0-1.818-.336-2.463-1.014-.646-.674-.968-1.51-.968-2.507 0-1.001.322-1.83.964-2.492.64-.662 1.458-.992 2.458-.992.997 0 1.81.334 2.435 1.017.625.678.94 1.51.94 2.511 0 .993-.315 1.822-.94 2.484-.625.657-1.43.992-2.426.992Zm-3.431 4.905c0-1.001.322-1.83.96-2.492.64-.662 1.458-.992 2.467-.992.996 0 1.809.335 2.43 1.017.625.682.94 1.515.94 2.512l-6.797-.045Z"
+          fill={
+            [
+              2,
+            ]
+          }
+          fillRule={0}
+          propList={
+            [
+              "fill",
+              "fillRule",
+            ]
+          }
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+</View>
+`;
+
+exports[`Test Buttons Components IconButtonContained Snapshot 1`] = `
+<View
+  accessibilityLabel="accessibilityLabel"
+  accessibilityRole="button"
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "alignSelf": "flex-start",
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "elevation": 0,
+          "justifyContent": "center",
+        },
+        {
+          "borderRadius": 48,
+          "height": 48,
+          "width": 48,
+        },
+        {
+          "backgroundColor": undefined,
+          "transform": [
+            {
+              "scale": undefined,
+            },
+          ],
+        },
+      ]
+    }
+  >
+    <RNSVGSvgView
+      accessibilityElementsHidden={true}
+      accessibilityLabel=""
+      accessible={false}
+      align="xMidYMid"
+      animatedProps={
+        {
+          "color": undefined,
+        }
+      }
+      bbHeight={24}
+      bbWidth={24}
+      color={4278927075}
+      focusable={false}
+      height={24}
+      importantForAccessibility="no-hide-descendants"
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        [
+          {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          {
+            "color": "#0B3EE3",
+          },
+          {
+            "flex": 0,
+            "height": 24,
+            "width": 24,
+          },
+        ]
+      }
+      tintColor={4278927075}
+      vbHeight={24}
+      vbWidth={24}
+      width={24}
+    >
+      <RNSVGGroup>
+        <RNSVGPath
+          clipRule={0}
+          d="M12 24c6.629 0 12-5.371 12-12S18.629 0 12 0C5.375 0 0 5.371 0 12s5.375 12 12 12Zm.033-10.97c-.997 0-1.818-.336-2.463-1.014-.646-.674-.968-1.51-.968-2.507 0-1.001.322-1.83.964-2.492.64-.662 1.458-.992 2.458-.992.997 0 1.81.334 2.435 1.017.625.678.94 1.51.94 2.511 0 .993-.315 1.822-.94 2.484-.625.657-1.43.992-2.426.992Zm-3.431 4.905c0-1.001.322-1.83.96-2.492.64-.662 1.458-.992 2.467-.992.996 0 1.809.335 2.43 1.017.625.682.94 1.515.94 2.512l-6.797-.045Z"
+          fill={
+            [
+              2,
+            ]
+          }
+          fillRule={0}
+          propList={
+            [
+              "fill",
+              "fillRule",
+            ]
+          }
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+</View>
+`;
+
+exports[`Test Buttons Components IconButtonSolid Snapshot 1`] = `
+<View
+  accessibilityLabel="accessibilityLabel"
+  accessibilityRole="button"
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "alignSelf": "flex-start",
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "elevation": 0,
+          "justifyContent": "center",
+        },
+        {
+          "borderRadius": 56,
+          "height": 56,
+          "width": 56,
+        },
+        {
+          "backgroundColor": undefined,
+          "transform": [
+            {
+              "scale": undefined,
+            },
+          ],
+        },
+        {
+          "backgroundColor": "#0B3EE3",
+        },
+      ]
+    }
+  >
+    <RNSVGSvgView
+      accessibilityElementsHidden={true}
+      accessibilityLabel=""
+      accessible={false}
+      align="xMidYMid"
+      bbHeight={24}
+      bbWidth={24}
+      color={4294967295}
+      focusable={false}
+      height={24}
+      importantForAccessibility="no-hide-descendants"
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        [
+          {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          {
+            "color": "#FFFFFF",
+          },
+          {
+            "flex": 0,
+            "height": 24,
+            "width": 24,
+          },
+        ]
+      }
+      tintColor={4294967295}
+      vbHeight={24}
+      vbWidth={24}
+      width={24}
+    >
+      <RNSVGGroup>
+        <RNSVGPath
+          clipRule={0}
+          d="M12 24c6.629 0 12-5.371 12-12S18.629 0 12 0C5.375 0 0 5.371 0 12s5.375 12 12 12Zm.033-10.97c-.997 0-1.818-.336-2.463-1.014-.646-.674-.968-1.51-.968-2.507 0-1.001.322-1.83.964-2.492.64-.662 1.458-.992 2.458-.992.997 0 1.81.334 2.435 1.017.625.678.94 1.51.94 2.511 0 .993-.315 1.822-.94 2.484-.625.657-1.43.992-2.426.992Zm-3.431 4.905c0-1.001.322-1.83.96-2.492.64-.662 1.458-.992 2.467-.992.996 0 1.809.335 2.43 1.017.625.682.94 1.515.94 2.512l-6.797-.045Z"
+          fill={
+            [
+              2,
+            ]
+          }
+          fillRule={0}
+          propList={
+            [
+              "fill",
+              "fillRule",
+            ]
+          }
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+</View>
+`;

package/src/components/buttons/__test__/button.test.tsx

@@ -5,6 +5,9 @@ import ButtonExtendedOutline from "../ButtonExtendedOutline";
 import ButtonLink from "../ButtonLink";
 import ButtonOutline from "../ButtonOutline";
 import ButtonSolid from "../ButtonSolid";
+import IconButton from "../IconButton";
+import IconButtonContained from "../IconButtonContained";
+import IconButtonSolid from "../IconButtonSolid";
 
 const onButtonPress = () => {
   Alert.alert("Alert", "Action triggered");
@@ -12,22 +15,74 @@ const onButtonPress = () => {
 
 describe("Test Buttons Components", () => {
   it("ButtonSolid Snapshot", () => {
-    const buttonSolid = TestRenderer.create(<ButtonSolid label={"label"} accessibilityLabel={"accessibilityLabel"} onPress={onButtonPress}></ButtonSolid>).toJSON();
+    const buttonSolid = TestRenderer.create(
+      <ButtonSolid
+        label={"label"}
+        accessibilityLabel={"accessibilityLabel"}
+        onPress={onButtonPress}
+      ></ButtonSolid>
+    ).toJSON();
     expect(buttonSolid).toMatchSnapshot();
   });
 
   it("ButtonLink Snapshot", () => {
-    const buttonLink = TestRenderer.create(<ButtonLink label={"label"} onPress={onButtonPress} ></ButtonLink>).toJSON();
+    const buttonLink = TestRenderer.create(
+      <ButtonLink label={"label"} onPress={onButtonPress}></ButtonLink>
+    ).toJSON();
     expect(buttonLink).toMatchSnapshot();
   });
 
   it("ButtonOutline Snapshot", () => {
-    const buttonOutline = TestRenderer.create(<ButtonOutline label={"label"} accessibilityLabel={"accessibilityLabel"} onPress={onButtonPress} ></ButtonOutline>).toJSON();
+    const buttonOutline = TestRenderer.create(
+      <ButtonOutline
+        label={"label"}
+        accessibilityLabel={"accessibilityLabel"}
+        onPress={onButtonPress}
+      ></ButtonOutline>
+    ).toJSON();
     expect(buttonOutline).toMatchSnapshot();
   });
 
   it("ButtonExtendedOutline Snapshot", () => {
-    const buttonExtendedOutline = TestRenderer.create(<ButtonExtendedOutline label={"label"} onPress={onButtonPress}></ButtonExtendedOutline>).toJSON();
+    const buttonExtendedOutline = TestRenderer.create(
+      <ButtonExtendedOutline
+        label={"label"}
+        onPress={onButtonPress}
+      ></ButtonExtendedOutline>
+    ).toJSON();
     expect(buttonExtendedOutline).toMatchSnapshot();
   });
+
+  it("IconButtonSolid Snapshot", () => {
+    const iconButtonSolid = TestRenderer.create(
+      <IconButtonSolid
+        onPress={onButtonPress}
+        icon={"spid"}
+        accessibilityLabel={"accessibilityLabel"}
+      ></IconButtonSolid>
+    ).toJSON();
+    expect(iconButtonSolid).toMatchSnapshot();
+  });
+
+  it("IconButton Snapshot", () => {
+    const iconButton = TestRenderer.create(
+      <IconButton
+        onPress={onButtonPress}
+        icon={"spid"}
+        accessibilityLabel={"accessibilityLabel"}
+      ></IconButton>
+    ).toJSON();
+    expect(iconButton).toMatchSnapshot();
+  });
+
+  it("IconButtonContained Snapshot", () => {
+    const iconButtonContained = TestRenderer.create(
+      <IconButtonContained
+        onPress={onButtonPress}
+        icon={"spid"}
+        accessibilityLabel={"accessibilityLabel"}
+      ></IconButtonContained>
+    ).toJSON();
+    expect(iconButtonContained).toMatchSnapshot();
+  });
 });

package/src/components/buttons/index.tsx

@@ -1,5 +1,7 @@
-export * from "./ButtonSolid";
+export * from "./ButtonExtendedOutline";
 export * from "./ButtonLink";
 export * from "./ButtonOutline";
-export * from "./ButtonExtendedOutline";
-export * from "./IconButton";
+export * from "./ButtonSolid";
+export * from "./IconButtonContained";
+export * from "./IconButtonSolid";
+export * from "./IconButton";

package/src/components/checkbox/AnimatedCheckbox.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 = {
@@ -85,7 +85,6 @@ export const AnimatedCheckbox = ({ checked, onPress, disabled }: OwnProps) => {
       onPress={onPress}
       style={styles.checkBoxWrapper}
     >
-      {/* ◀ REMOVE_LEGACY_COMPONENT: Remove the following conditions */}
       <View
         style={[
           styles.checkboxBorder,
@@ -105,7 +104,6 @@ export const AnimatedCheckbox = ({ checked, onPress, disabled }: OwnProps) => {
           animatedCheckboxSquare
         ]}
       />
-      {/* REMOVE_LEGACY_COMPONENT: End ▶ */}
       {isChecked && (
         <AnimatedTick
           progress={tickAnimationProgress}

package/src/components/icons/index.tsx

@@ -1,2 +1 @@
-export * from "./Icon";
-export { Icon, AnimatedIcon } from "../icons/Icon";
+export * from "./Icon";

package/src/components/index.tsx

@@ -1,18 +1,18 @@
-export * from "./pictograms";
-export * from "./icons";
-export * from "./checkbox";
-export * from "./radio";
-export * from "./switch";
-export * from "./spacer/Spacer";
-export * from "./divider/Divider";
-export * from "./contentWrapper/ContentWrapper";
-export * from "./typography";
-export * from "./spacer";
-export * from "./avatar";
 export * from "./accordion";
+export * from "./alert";
+export * from "./avatar";
 export * from "./badge";
+export * from "./banner";
 export * from "./buttons";
+export * from "./checkbox";
+export * from "./contentWrapper";
+export * from "./divider";
+export * from "./icons";
 export * from "./listitems";
+export * from "./logos";
+export * from "./pictograms";
+export * from "./radio";
+export * from "./spacer";
+export * from "./switch";
 export * from "./tag";
-export * from "./alert";
-export * from "./logos";
+export * from "./typography";

package/src/components/layout/GradientBottomActions.tsx

@@ -0,0 +1,119 @@
+import * as React from "react";
+import { View, StyleSheet, ViewStyle, StyleProp } from "react-native";
+import LinearGradient from "react-native-linear-gradient";
+import Animated from "react-native-reanimated";
+import { WithTestID } from "../../utils/types";
+import { IOColors, hexToRgba, IOSpacer, IOVisualCostants } from "../../core";
+import { VSpacer } from "../spacer";
+
+export type GradientBottomActions = WithTestID<{
+  transitionAnimStyle: Animated.AnimateStyle<StyleProp<ViewStyle>>;
+  dimensions: GradientBottomActionsDimensions;
+  // Accepted components: ButtonSolid, ButtonLink
+  // Don't use any components other than this, please.
+  primaryAction?: React.ReactNode;
+  secondaryAction?: React.ReactNode;
+  // Debug mode
+  debugMode?: boolean;
+}>;
+
+type GradientBottomActionsDimensions = {
+  bottomMargin: number;
+  extraBottomMargin: number;
+  gradientAreaHeight: number;
+  spaceBetweenActions: IOSpacer;
+  safeBackgroundHeight: number;
+};
+
+// Background color should be app main background (both light and dark themes)
+const HEADER_BG_COLOR: IOColors = "white";
+
+const styles = StyleSheet.create({
+  buttonContainer: {
+    paddingHorizontal: IOVisualCostants.appMarginDefault,
+    width: "100%",
+    flex: 1,
+    flexShrink: 0,
+    justifyContent: "flex-end"
+  },
+  gradientContainer: {
+    ...StyleSheet.absoluteFillObject
+  },
+  safeBackgroundBlock: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: IOColors[HEADER_BG_COLOR]
+  }
+});
+
+export const GradientBottomActions = ({
+  primaryAction,
+  secondaryAction,
+  dimensions,
+  transitionAnimStyle,
+  debugMode,
+  testID
+}: GradientBottomActions) => (
+  <View
+    style={{
+      width: "100%",
+      position: "absolute",
+      bottom: 0,
+      height: dimensions.gradientAreaHeight,
+      paddingBottom: dimensions.bottomMargin
+    }}
+    testID={testID}
+    pointerEvents="box-none"
+  >
+    <Animated.View
+      style={[
+        styles.gradientContainer,
+        debugMode && {
+          borderTopColor: IOColors["error-500"],
+          borderTopWidth: 1,
+          backgroundColor: hexToRgba(IOColors["error-500"], 0.5)
+        },
+        transitionAnimStyle
+      ]}
+      pointerEvents="none"
+    >
+      <LinearGradient
+        style={{ height: dimensions.gradientAreaHeight }}
+        // 100% opacity bg color fills at least 50% of the area
+        locations={[0, 0.5]}
+        colors={[
+          hexToRgba(IOColors[HEADER_BG_COLOR], 0),
+          IOColors[HEADER_BG_COLOR]
+        ]}
+      />
+    </Animated.View>
+
+    <View
+      style={[
+        styles.safeBackgroundBlock,
+        {
+          height: dimensions.safeBackgroundHeight
+        }
+      ]}
+    />
+    <View style={styles.buttonContainer} pointerEvents="box-none">
+      {primaryAction}
+
+      {secondaryAction && (
+        <View
+          style={{
+            alignSelf: "center",
+            marginBottom: dimensions.extraBottomMargin
+          }}
+        >
+          <VSpacer size={dimensions.spaceBetweenActions} />
+          {secondaryAction}
+        </View>
+      )}
+    </View>
+  </View>
+);
+
+export default GradientBottomActions;