@pagopa/io-app-design-system 1.46.2 → 1.47.0

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

@@ -37,7 +37,7 @@ import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 import IconButton from "../buttons/IconButton";
 import { HSpacer } from "../spacer";
-import { ActionProp } from "./common";
+import { HeaderActionProps } from "./common";
 
 type ScrollValues = {
   contentOffsetY: SharedValue<number>;
@@ -85,23 +85,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 &

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";

package/src/core/IOColors.ts

@@ -276,6 +276,7 @@ export type IOTheme = {
   "icon-decorative": IOColors;
   // Layout
   "divider-default": IOColors;
+  "divider-bottomBar": IOColors;
   // Status
   errorIcon: IOColors;
   errorText: IOColors;
@@ -306,6 +307,7 @@ export const IOThemeLight: IOTheme = {
   "icon-decorative": "grey-300",
   // Layout
   "divider-default": "grey-200",
+  "divider-bottomBar": "grey-200",
   // Status
   errorIcon: "error-600",
   errorText: "error-600",
@@ -342,6 +344,7 @@ export const IOThemeDark: IOTheme = {
   "icon-default": "grey-450",
   // Layout
   "divider-default": "grey-850",
+  "divider-bottomBar": "grey-850",
   // Status
   errorIcon: "error-400",
   errorText: "error-400",

package/src/core/IOSpacing.ts

@@ -49,3 +49,17 @@ export const IOModuleIDPHSpacing: IOModuleIDPSpacing = 16;
 export const IOModuleIDPVSpacing: IOModuleIDPSpacing = 16;
 export const IOModuleIDPSavedVSpacing: IOModuleIDPSpacing = 24;
 export const IOListItemLogoMargin: IOModuleIDPSpacing = 8;
+
+/*
+░░░ SPACING CONSTANTS ░░░
+*/
+
+const spacingConstantKeys = ["screenEndMargin"] as const;
+
+export type IOSpacingConstants = {
+  [K in (typeof spacingConstantKeys)[number]]: IOSpacingScale;
+};
+
+export const IOSpacing = {
+  screenEndMargin: 32
+} as const satisfies IOSpacingConstants;

package/src/core/index.ts

@@ -4,6 +4,5 @@ export * from "./IOTransitions";
 export * from "./IOStyles";
 export * from "./IOShapes";
 export * from "./IOSpacing";
-export * from "./IOStyleVariables";
 export * from "./IODSExperimentalContextProvider";
 export * from "./IOThemeContextProvider";

package/lib/commonjs/core/IOStyleVariables.js

@@ -1,14 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.IOStyleVariables = void 0;
-/**
- * A collection of default style variables used within IO App.
- */
-const IOStyleVariables = {
-  switchWidth: 51
-};
-exports.IOStyleVariables = IOStyleVariables;
-//# sourceMappingURL=IOStyleVariables.js.map

package/lib/commonjs/core/IOStyleVariables.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["IOStyleVariables","switchWidth","exports"],"sourceRoot":"../../../src","sources":["core/IOStyleVariables.ts"],"mappings":";;;;;;AAAA;AACA;AACA;AACO,MAAMA,gBAAgB,GAAG;EAC9BC,WAAW,EAAE;AACf,CAAC;AAACC,OAAA,CAAAF,gBAAA,GAAAA,gBAAA"}

package/lib/module/core/IOStyleVariables.js

@@ -1,7 +0,0 @@
-/**
- * A collection of default style variables used within IO App.
- */
-export const IOStyleVariables = {
-  switchWidth: 51
-};
-//# sourceMappingURL=IOStyleVariables.js.map

package/lib/module/core/IOStyleVariables.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["IOStyleVariables","switchWidth"],"sourceRoot":"../../../src","sources":["core/IOStyleVariables.ts"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,MAAMA,gBAAgB,GAAG;EAC9BC,WAAW,EAAE;AACf,CAAC"}

package/lib/typescript/core/IOStyleVariables.d.ts

@@ -1,7 +0,0 @@
-/**
- * A collection of default style variables used within IO App.
- */
-export declare const IOStyleVariables: {
-    switchWidth: number;
-};
-//# sourceMappingURL=IOStyleVariables.d.ts.map

package/lib/typescript/core/IOStyleVariables.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"IOStyleVariables.d.ts","sourceRoot":"","sources":["../../../src/core/IOStyleVariables.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,gBAAgB;;CAE5B,CAAC"}

package/src/core/IOStyleVariables.ts

@@ -1,6 +0,0 @@
-/**
- * A collection of default style variables used within IO App.
- */
-export const IOStyleVariables = {
-  switchWidth: 51
-};