@pagopa/io-app-design-system 2.0.1 → 2.0.3

package/src/components/layout/FooterActions.tsx

@@ -0,0 +1,260 @@
+import * as React from "react";
+import { ComponentProps, Fragment, PropsWithChildren, useState } from "react";
+import {
+  ColorValue,
+  LayoutChangeEvent,
+  LayoutRectangle,
+  StyleSheet,
+  Text,
+  View,
+  ViewStyle
+} from "react-native";
+import Animated from "react-native-reanimated";
+import {
+  IOColors,
+  IOSpacer,
+  IOSpacing,
+  IOVisualCostants,
+  buttonSolidHeight,
+  hexToRgba,
+  useIOExperimentalDesign,
+  useIOTheme
+} from "../../core";
+import { WithTestID } from "../../utils/types";
+import { ButtonLink, ButtonOutline, ButtonSolid } from "../buttons";
+import { VSpacer } from "../spacer";
+import { useBottomMargins } from "./hooks/useBottomMargins";
+
+type FooterSingleButton = {
+  type: "SingleButton";
+  primary: Omit<ComponentProps<typeof ButtonSolid>, "fullWidth">;
+  secondary?: never;
+  tertiary?: never;
+};
+
+type FooterTwoButtons = {
+  type: "TwoButtons";
+  primary: Omit<ComponentProps<typeof ButtonSolid>, "fullWidth">;
+  secondary: Omit<ComponentProps<typeof ButtonLink>, "color">;
+  tertiary?: never;
+};
+
+type FooterThreeButtons = {
+  type: "ThreeButtons";
+  primary: Omit<ComponentProps<typeof ButtonSolid>, "fullWidth">;
+  secondary: Omit<ComponentProps<typeof ButtonOutline>, "fullWidth" | "color">;
+  tertiary: Omit<ComponentProps<typeof ButtonLink>, "color">;
+};
+
+export type FooterActionsMeasurements = {
+  // Height of the "Actions" block
+  actionBlockHeight: number;
+  /* Height of the safe bottom area. It includes:
+     - Margin between screen content
+       and actions (contentEndMargin)
+     - Actions block height
+     - Eventual safe area margin (bottomMargin)
+     This is the total bottom padding that needs
+     to be applied to the ScrollView.
+  */
+  safeBottomAreaHeight: number;
+};
+
+type FooterActions = FooterSingleButton | FooterTwoButtons | FooterThreeButtons;
+
+type FooterAnimatedStyles = {
+  /* Apply object returned by `useAnimatedStyle` to the main block */
+  mainBlock?: Animated.AnimateStyle<ViewStyle>;
+  /* Apply object returned by `useAnimatedStyle` to the background */
+  background?: Animated.AnimateStyle<ViewStyle>;
+};
+
+type FooterActionsProps = WithTestID<
+  PropsWithChildren<{
+    actions?: FooterActions;
+    onMeasure?: (measurements: FooterActionsMeasurements) => void;
+    animatedStyles?: FooterAnimatedStyles;
+    /* Make the background transparent */
+    transparent?: boolean;
+    /* Don't include safe area insets */
+    excludeSafeAreaMargins?: boolean;
+    /* Fixed at the bottom of the screen */
+    fixed?: boolean;
+    /* Show the following elements:
+       - Opaque red background to show the component boundaries
+       - Height of the component */
+    debugMode?: boolean;
+  }>
+>;
+
+/* Margin between ButtonSolid and ButtonOutline */
+const spaceBetweenActions: IOSpacer = 16;
+/* Margin between ButtonSolid and ButtonLink */
+const spaceBetweenActionAndLink: IOSpacer = 16;
+
+const styles = StyleSheet.create({
+  buttonContainer: {
+    paddingHorizontal: IOVisualCostants.appMarginDefault,
+    width: "100%",
+    flexShrink: 0
+  },
+  debugText: {
+    position: "absolute",
+    right: 8,
+    top: -16,
+    color: IOColors.black,
+    fontSize: 9,
+    opacity: 0.75
+  },
+  blockShadow: {
+    shadowColor: IOColors.black,
+    shadowOffset: {
+      width: 0,
+      height: -4
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 32
+  }
+});
+
+export const FooterActions = ({
+  actions,
+  excludeSafeAreaMargins = false,
+  animatedStyles,
+  fixed = true,
+  transparent = false,
+  onMeasure,
+  testID,
+  debugMode = false
+}: FooterActionsProps) => {
+  const theme = useIOTheme();
+  const { isExperimental } = useIOExperimentalDesign();
+
+  const { bottomMargin, extraBottomMargin } = useBottomMargins(
+    !!actions?.secondary,
+    excludeSafeAreaMargins
+  );
+
+  /* Total height of actions */
+  const [actionBlockHeight, setActionBlockHeight] =
+    useState<LayoutRectangle["height"]>(0);
+
+  /* Background color should be app main background
+     (both light and dark themes) */
+  const HEADER_BG_COLOR: ColorValue = IOColors[theme["appBackground-primary"]];
+  const TRANSPARENT_BG_COLOR: ColorValue = "transparent";
+  const BUTTONSOLID_HEIGHT = isExperimental ? buttonSolidHeight : 40;
+
+  /* Safe background block. Cover everything until it reaches
+     the half of the primary action button. It avoids
+     glitchy behavior underneath.  */
+  const safeBackgroundBlockHeight =
+    bottomMargin + actionBlockHeight - BUTTONSOLID_HEIGHT / 2;
+
+  const getActionBlockMeasurements = (event: LayoutChangeEvent) => {
+    const { height } = event.nativeEvent.layout;
+    setActionBlockHeight(height);
+    /* Height of the safe bottom area, applied to the ScrollView:
+       Actions + Content end margin */
+    const safeBottomAreaHeight =
+      bottomMargin + height + IOSpacing.screenEndMargin;
+    onMeasure?.({ actionBlockHeight: height, safeBottomAreaHeight });
+  };
+
+  return (
+    <Animated.View
+      style={[
+        {
+          width: "100%",
+          paddingBottom: bottomMargin
+        },
+        fixed
+          ? { position: "absolute", bottom: 0 }
+          : { marginTop: IOSpacing.screenEndMargin },
+        debugMode && {
+          backgroundColor: hexToRgba(IOColors["error-500"], 0.15)
+        },
+        animatedStyles?.mainBlock
+      ]}
+      testID={testID}
+    >
+      {/* Safe background block. It's added because when you swipe up
+          quickly, the content below is visible for about 100ms. Without this
+          block, the content scrolls underneath. */}
+      <Animated.View
+        style={[
+          {
+            ...(fixed && {
+              width: "100%",
+              height: safeBackgroundBlockHeight,
+              position: "absolute",
+              bottom: 0,
+              backgroundColor: transparent
+                ? TRANSPARENT_BG_COLOR
+                : HEADER_BG_COLOR
+            }),
+            ...(fixed ? styles.blockShadow : null)
+          },
+          animatedStyles?.background
+        ]}
+        pointerEvents="none"
+      />
+
+      <View
+        style={styles.buttonContainer}
+        onLayout={getActionBlockMeasurements}
+        pointerEvents="box-none"
+      >
+        {debugMode && (
+          <Text style={styles.debugText}>{`Height: ${actionBlockHeight}`}</Text>
+        )}
+
+        {renderActions(actions, extraBottomMargin)}
+      </View>
+    </Animated.View>
+  );
+};
+
+const renderActions = (
+  actions: FooterActions | undefined,
+  extraBottomMargin: number
+) => {
+  if (!actions) {
+    return null;
+  }
+  const {
+    type,
+    primary: primaryAction,
+    secondary: secondaryAction,
+    tertiary: tertiaryAction
+  } = actions;
+  return (
+    <Fragment>
+      {primaryAction && <ButtonSolid fullWidth {...primaryAction} />}
+      {type === "TwoButtons" && secondaryAction && (
+        <View style={{ alignSelf: "center", marginBottom: extraBottomMargin }}>
+          <VSpacer size={spaceBetweenActionAndLink} />
+          <ButtonLink color="primary" {...secondaryAction} />
+        </View>
+      )}
+      {type === "ThreeButtons" && (
+        <>
+          {secondaryAction && (
+            <>
+              <VSpacer size={spaceBetweenActions} />
+              <ButtonOutline fullWidth color="primary" {...secondaryAction} />
+            </>
+          )}
+          {tertiaryAction && (
+            <View
+              style={{ alignSelf: "center", marginBottom: extraBottomMargin }}
+            >
+              <VSpacer size={spaceBetweenActionAndLink} />
+              <ButtonLink color="primary" {...tertiaryAction} />
+            </View>
+          )}
+        </>
+      )}
+    </Fragment>
+  );
+};

package/src/components/layout/FooterActionsInline.tsx

@@ -0,0 +1,137 @@
+import * as React from "react";
+import { ComponentProps, PropsWithChildren } from "react";
+import { ColorValue, LayoutChangeEvent, StyleSheet, View } from "react-native";
+import {
+  IOColors,
+  IOSpacer,
+  IOSpacing,
+  IOSpacingScale,
+  IOVisualCostants,
+  useIOTheme,
+  useIOThemeContext
+} from "../../core";
+import { WithTestID } from "../../utils/types";
+import { ButtonOutline, ButtonSolid } from "../buttons";
+import { HSpacer } from "../spacer";
+import { useBottomMargins } from "./hooks/useBottomMargins";
+
+export type FooterActionsInlineMeasurements = {
+  /* Height of the safe bottom area. It includes:
+     - Margin between screen content
+       and actions (contentEndMargin)
+     - Actions block height
+     - Eventual safe area margin (bottomMargin)
+     This is the total bottom padding that needs
+     to be applied to the ScrollView.
+  */
+  safeBottomAreaHeight: number;
+};
+
+type FooterActionsInline = WithTestID<
+  PropsWithChildren<{
+    startAction: Omit<ComponentProps<typeof ButtonOutline>, "fullWidth">;
+    endAction: Omit<ComponentProps<typeof ButtonSolid>, "fullWidth">;
+    onMeasure?: (measurements: FooterActionsInlineMeasurements) => void;
+    /* Don't include safe area insets */
+    excludeSafeAreaMargins?: boolean;
+    /* Fixed at the bottom of the screen */
+    fixed?: boolean;
+  }>
+>;
+
+/* Margin between ButtonSolid and ButtonOutline */
+const spaceBetweenActions: IOSpacer = 16;
+
+const styles = StyleSheet.create({
+  buttonContainer: {
+    paddingHorizontal: IOVisualCostants.appMarginDefault,
+    width: "100%",
+    flexShrink: 0
+  },
+  buttonWrapper: {
+    flex: 1
+  },
+  blockShadow: {
+    shadowColor: IOColors.black,
+    shadowOffset: {
+      width: 0,
+      height: -4
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 32,
+    elevation: 10 // Prop supported on Android only
+  }
+});
+
+export const FooterActionsInline = ({
+  startAction,
+  endAction,
+  excludeSafeAreaMargins = false,
+  fixed = true,
+  onMeasure,
+  testID
+}: FooterActionsInline) => {
+  const theme = useIOTheme();
+  const { themeType } = useIOThemeContext();
+
+  const { bottomMargin } = useBottomMargins(false, excludeSafeAreaMargins);
+
+  /* Top padding applied above the actions */
+  const topSpacingValue: IOSpacingScale = 16;
+  const topSpacing = fixed ? topSpacingValue : 0;
+
+  /* Background color should be app main background
+     (both light and dark themes) */
+  const HEADER_BG_COLOR: ColorValue = IOColors[theme["appBackground-primary"]];
+
+  const getActionBlockMeasurements = (event: LayoutChangeEvent) => {
+    const { height } = event.nativeEvent.layout;
+    /* Height of the safe bottom area, applied to the ScrollView:
+       Actions + Screen end margin */
+    const safeBottomAreaHeight =
+      bottomMargin + height + IOSpacing.screenEndMargin;
+    onMeasure?.({ safeBottomAreaHeight });
+  };
+
+  return (
+    <View
+      style={[
+        {
+          width: "100%",
+          paddingBottom: bottomMargin
+        },
+        fixed
+          ? {
+              position: "absolute",
+              bottom: 0,
+              backgroundColor: HEADER_BG_COLOR
+            }
+          : { marginTop: IOSpacing.screenEndMargin },
+        /* Apply shadow only on light theme OR if fixed */
+        fixed || themeType === "light" ? styles.blockShadow : {},
+        /* Apply bottom border only on dark theme */
+        themeType === "dark" && {
+          borderTopColor: IOColors[theme["divider-bottomBar"]],
+          borderTopWidth: 1
+        }
+      ]}
+      testID={testID}
+    >
+      <View
+        style={[styles.buttonContainer, { paddingTop: topSpacing }]}
+        onLayout={getActionBlockMeasurements}
+        pointerEvents="box-none"
+      >
+        <View style={{ flexDirection: "row" }}>
+          <View style={styles.buttonWrapper}>
+            <ButtonOutline fullWidth {...startAction} />
+          </View>
+          <HSpacer size={spaceBetweenActions} />
+          <View style={styles.buttonWrapper}>
+            <ButtonSolid fullWidth {...endAction} />
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};

package/src/components/layout/FooterWithButtons.tsx

@@ -44,7 +44,9 @@ const verticalSpacing: IOSpacingScale = 16;
 /**
  * Implements a component that show buttons as sticky footer
  * It can include 1, 2 or 3 buttons. If they are 2, they can have the inlineHalf  or the inlineOneThird style
- * @deprecated This component is deprecated. Use `FooterActions` in the main `io-app` repo instead.
+ * @deprecated This component is deprecated. Use `FooterActions` or `FooterActionsInline` instead.
+ * `FooterActionsInline` is the official replacement for `FooterWithButtons`, but use it only
+ * if explicitly required.
  */
 export const FooterWithButtons = ({
   sticky = false,

package/src/components/layout/HeaderFirstLevel.tsx

@@ -23,7 +23,7 @@ import { WithTestID } from "../../utils/types";
 import { IconButton } from "../buttons";
 import { HSpacer } from "../spacer";
 import { H3 } from "../typography";
-import { ActionProp } from "./common";
+import { HeaderActionProps } from "./common";
 
 type CommonProps = WithTestID<{
   title: string;
@@ -41,23 +41,23 @@ interface Base extends CommonProps {
 
 interface OneAction extends CommonProps {
   type: "singleAction";
-  firstAction: ActionProp;
+  firstAction: HeaderActionProps;
   secondAction?: never;
   thirdAction?: never;
 }
 
 interface TwoActions extends CommonProps {
   type: "twoActions";
-  firstAction: ActionProp;
-  secondAction: ActionProp;
+  firstAction: HeaderActionProps;
+  secondAction: HeaderActionProps;
   thirdAction?: never;
 }
 
 interface ThreeActions extends CommonProps {
   type: "threeActions";
-  firstAction: ActionProp;
-  secondAction: ActionProp;
-  thirdAction: ActionProp;
+  firstAction: HeaderActionProps;
+  secondAction: HeaderActionProps;
+  thirdAction: HeaderActionProps;
 }
 
 export type HeaderFirstLevel = Base | OneAction | TwoActions | ThreeActions;

package/src/components/layout/HeaderSecondLevel.tsx

@@ -30,14 +30,15 @@ import {
   hexToRgba,
   iconBtnSizeSmall,
   useIOExperimentalDesign,
-  useIOTheme
+  useIOTheme,
+  useIOThemeContext
 } from "../../core";
 import type { IOSpacer, IOSpacingScale } from "../../core/IOSpacing";
 import { WithTestID } from "../../utils/types";
 import IconButton from "../buttons/IconButton";
 import { HSpacer } from "../spacer";
 import { IOText } from "../typography";
-import { ActionProp } from "./common";
+import { HeaderActionProps } from "./common";
 
 type ScrollValues = {
   contentOffsetY: SharedValue<number>;
@@ -85,23 +86,23 @@ interface Base extends CommonProps {
 
 interface OneAction extends CommonProps {
   type: "singleAction";
-  firstAction: ActionProp;
+  firstAction: HeaderActionProps;
   secondAction?: never;
   thirdAction?: never;
 }
 
 interface TwoActions extends CommonProps {
   type: "twoActions";
-  firstAction: ActionProp;
-  secondAction: ActionProp;
+  firstAction: HeaderActionProps;
+  secondAction: HeaderActionProps;
   thirdAction?: never;
 }
 
 interface ThreeActions extends CommonProps {
   type: "threeActions";
-  firstAction: ActionProp;
-  secondAction: ActionProp;
-  thirdAction: ActionProp;
+  firstAction: HeaderActionProps;
+  secondAction: HeaderActionProps;
+  thirdAction: HeaderActionProps;
 }
 
 export type HeaderSecondLevel = BackProps &
@@ -156,21 +157,26 @@ export const HeaderSecondLevel = ({
 
   const { isExperimental } = useIOExperimentalDesign();
   const theme = useIOTheme();
+  const { themeType } = useIOThemeContext();
   const insets = useSafeAreaInsets();
   const isTitleAccessible = React.useMemo(() => !!title.trim(), [title]);
   const paddingTop = useSharedValue(ignoreSafeAreaMargin ? 0 : insets.top);
 
   const AnimatedIOText = Animated.createAnimatedComponent(IOText);
 
+  const iconButtonColorDefault: ComponentProps<typeof IconButton>["color"] =
+    themeType === "dark" ? "contrast" : "neutral";
+
   const iconButtonColor: ComponentProps<typeof IconButton>["color"] =
-    variant === "neutral" ? "neutral" : "contrast";
+    variant === "contrast" ? "contrast" : iconButtonColorDefault;
+
   const titleColor: ColorValue =
     variant === "neutral"
       ? IOColors[theme["textHeading-default"]]
       : IOColors.white;
 
   /* Visual attributes when there are transitions between states */
-  const HEADER_DEFAULT_BG_COLOR: IOColors = "white";
+  const HEADER_DEFAULT_BG_COLOR: IOColors = theme["appBackground-primary"];
 
   const headerBgColorTransparentState = backgroundColor
     ? hexToRgba(backgroundColor, 0)
@@ -181,10 +187,12 @@ export const HeaderSecondLevel = ({
   const headerBgColorSolidState =
     backgroundColor ?? IOColors[HEADER_DEFAULT_BG_COLOR];
 
+  const borderColorDefault = IOColors[theme["divider-default"]];
+
   const borderColorTransparentState = backgroundColor
     ? hexToRgba(backgroundColor, 0)
-    : hexToRgba(IOColors["grey-100"], 0);
-  const borderColorSolidState = backgroundColor ?? IOColors["grey-100"];
+    : hexToRgba(borderColorDefault, 0);
+  const borderColorSolidState = backgroundColor ?? borderColorDefault;
 
   useLayoutEffect(() => {
     if (isTitleAccessible) {

package/src/components/layout/common.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { IconButton } from "../buttons";
 
-export type ActionProp = Pick<
+export type HeaderActionProps = Pick<
   React.ComponentProps<typeof IconButton>,
   "icon" | "onPress" | "accessibilityLabel" | "accessibilityHint" | "testID"
 >;

package/src/components/layout/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from "./useFooterActionsMeasurements";
+export * from "./useFooterActionsInlineMeasurements";

package/src/components/layout/hooks/useBottomMargins.ts

@@ -0,0 +1,30 @@
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { IOSpacingScale, IOVisualCostants } from "../../../core";
+
+/* Extra bottom margin for iPhone bottom handle because
+   ButtonLink doesn't have a fixed height */
+const extraSafeAreaMargin: IOSpacingScale = 8;
+
+export const useBottomMargins = (
+  withSecondaryAction: boolean = false,
+  excludeSafeAreaMargins: boolean = false
+) => {
+  const insets = useSafeAreaInsets();
+  const needSafeAreaMargin = insets.bottom !== 0;
+
+  /* Check if the iPhone bottom handle is present.
+     If not, or if you don't need safe area insets,
+     add a default margin to prevent the button
+     from sticking to the bottom. */
+  const bottomMargin =
+    !needSafeAreaMargin || excludeSafeAreaMargins
+      ? IOVisualCostants.appMarginDefault
+      : insets.bottom;
+
+  /* When the secondary action is visible, add extra margin
+     to avoid little space from iPhone bottom handle */
+  const extraBottomMargin =
+    withSecondaryAction && needSafeAreaMargin ? extraSafeAreaMargin : 0;
+
+  return { bottomMargin, extraBottomMargin };
+};

package/src/components/layout/hooks/useFooterActionsInlineMeasurements.ts

@@ -0,0 +1,38 @@
+import { useState } from "react";
+import { FooterActionsInlineMeasurements } from "../FooterActionsInline";
+
+type UseFooterActionsInlineMeasurementsProps = {
+  footerActionsInlineMeasurements: FooterActionsInlineMeasurements;
+  handleFooterActionsInlineMeasurements: (
+    values: FooterActionsInlineMeasurements
+  ) => void;
+};
+/**
+ * Custom hook to handle the `FooterActions` measurements
+ * @returns
+ *   - `footerActionsInlineMeasurements`
+ *      Object containing the `FooterActionsInline` measurements
+ *   - `handleFooterActionsInlineMeasurements`
+ *      Function to update the footer actions measurements
+ *      (to be applied to `onMeasure` prop of `FooterActionsInline`)
+ */
+export const useFooterActionsInlineMeasurements =
+  (): UseFooterActionsInlineMeasurementsProps => {
+    const [
+      footerActionsInlineMeasurements,
+      setFooterActionsInlineMeasurements
+    ] = useState<FooterActionsInlineMeasurements>({
+      safeBottomAreaHeight: 0
+    });
+
+    const handleFooterActionsInlineMeasurements = (
+      values: FooterActionsInlineMeasurements
+    ) => {
+      setFooterActionsInlineMeasurements(values);
+    };
+
+    return {
+      footerActionsInlineMeasurements,
+      handleFooterActionsInlineMeasurements
+    };
+  };

package/src/components/layout/hooks/useFooterActionsMeasurements.ts

@@ -0,0 +1,35 @@
+import { useState } from "react";
+import { FooterActionsMeasurements } from "../FooterActions";
+
+type UseFooterActionsMeasurementsProps = {
+  footerActionsMeasurements: FooterActionsMeasurements;
+  handleFooterActionsMeasurements: (values: FooterActionsMeasurements) => void;
+};
+/**
+ * Custom hook to handle the `FooterActions` measurements
+ * @returns
+ *   - `footerActionsMeasurements`
+ *      Object containing the `FooterActions` measurements
+ *   - `handleFooterActionsMeasurements`
+ *      Function to update the footer actions measurements
+ *      (to be applied to `onMeasure` prop of `FooterActions`)
+ */
+export const useFooterActionsMeasurements =
+  (): UseFooterActionsMeasurementsProps => {
+    const [footerActionsMeasurements, setFooterActionsMeasurements] =
+      useState<FooterActionsMeasurements>({
+        actionBlockHeight: 0,
+        safeBottomAreaHeight: 0
+      });
+
+    const handleFooterActionsMeasurements = (
+      values: FooterActionsMeasurements
+    ) => {
+      setFooterActionsMeasurements(values);
+    };
+
+    return {
+      footerActionsMeasurements,
+      handleFooterActionsMeasurements
+    };
+  };

package/src/components/layout/index.tsx

@@ -1,4 +1,6 @@
 export * from "./BlockButtons";
+export * from "./FooterActions";
+export * from "./FooterActionsInline";
 export * from "./FooterWithButtons";
 export * from "./ForceScrollDownView";
 export * from "./GradientBottomActions";
@@ -7,3 +9,4 @@ export * from "./HeaderFirstLevel";
 export * from "./HeaderSecondLevel";
 export * from "./ModalBSHeader";
 export * from "./common";
+export * from "./hooks";