@pagopa/io-app-design-system 1.2.0 → 1.3.1

package/src/components/banner/Banner.tsx

@@ -1,29 +1,40 @@
 import React, { useCallback } from "react";
 import {
-    AccessibilityRole,
-    GestureResponderEvent,
-    Pressable,
-    StyleSheet,
-    View,
-    ViewStyle
+  AccessibilityRole,
+  GestureResponderEvent,
+  Pressable,
+  StyleSheet,
+  View,
+  ViewStyle
 } from "react-native";
 import Animated, {
-    Extrapolate,
-    interpolate,
-    useAnimatedStyle,
-    useDerivedValue,
-    useSharedValue,
-    withSpring
+  Extrapolate,
+  interpolate,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withSpring
 } from "react-native-reanimated";
-import { IOBannerBigSpacing, IOBannerRadius, IOBannerSmallHSpacing, IOBannerSmallVSpacing, IOScaleValues, IOSpringValues, IOStyles } from "../../core";
+import {
+  IOBannerBigSpacing,
+  IOBannerRadius,
+  IOBannerSmallHSpacing,
+  IOBannerSmallVSpacing,
+  IOScaleValues,
+  IOSpringValues,
+  IOStyles
+} from "../../core";
 import { IOColors } from "../../core/IOColors";
 import { WithTestID } from "../../utils/types";
 import { ButtonLink, IconButton } from "../buttons";
-import { IOPictogramSizeScale, IOPictogramsBleed, Pictogram } from "../pictograms";
+import {
+  IOPictogramSizeScale,
+  IOPictogramsBleed,
+  Pictogram
+} from "../pictograms";
 import { VSpacer } from "../spacer";
 import { H6, LabelSmall } from "../typography";
 
-
 /* Styles */
 
 const colorTitle: IOColors = "blueIO-850";
@@ -38,42 +49,42 @@ const sizeSmallHPadding = IOBannerSmallHSpacing;
 const sizeSmallVPadding = IOBannerSmallVSpacing;
 
 const styles = StyleSheet.create({
-    container: {
-        flexDirection: "row",
-        alignItems: "flex-start",
-        alignContent: "center",
-        borderRadius: IOBannerRadius
-    },
-    bleedPictogram: {
-        marginRight: -sizeBigPadding
-    },
-    closeIconButton: {
-        position: "absolute",
-        right: closeButtonDistanceFromEdge,
-        top: closeButtonDistanceFromEdge,
-        opacity: closeButtonOpacity
-    }
+  container: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    alignContent: "center",
+    borderRadius: IOBannerRadius
+  },
+  bleedPictogram: {
+    marginRight: -sizeBigPadding
+  },
+  closeIconButton: {
+    position: "absolute",
+    right: closeButtonDistanceFromEdge,
+    top: closeButtonDistanceFromEdge,
+    opacity: closeButtonOpacity
+  }
 });
 
 const dynamicContainerStyles = (
-    size: BaseBannerProps["size"],
-    color: BaseBannerProps["color"]
+  size: BaseBannerProps["size"],
+  color: BaseBannerProps["color"]
 ): ViewStyle => ({
-    backgroundColor: IOColors[mapBackgroundColor[color]],
-    paddingVertical: size === "big" ? sizeBigPadding : sizeSmallVPadding,
-    paddingHorizontal: size === "big" ? sizeBigPadding : sizeSmallHPadding
+  backgroundColor: IOColors[mapBackgroundColor[color]],
+  paddingVertical: size === "big" ? sizeBigPadding : sizeSmallVPadding,
+  paddingHorizontal: size === "big" ? sizeBigPadding : sizeSmallHPadding
 });
 
 /* Component Types */
 
 type BaseBannerProps = WithTestID<{
-    size: "big" | "small";
-    color: "neutral" | "turquoise";
-    pictogramName: IOPictogramsBleed;
-    viewRef: React.RefObject<View>;
-    // A11y related props
-    accessibilityLabel?: string;
-    accessibilityHint?: string;
+  size: "big" | "small";
+  color: "neutral" | "turquoise";
+  pictogramName: IOPictogramsBleed;
+  viewRef: React.RefObject<View>;
+  // A11y related props
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
 }>;
 
 /* Description only */
@@ -84,194 +95,194 @@ type BannerPropsTitleOnly = { title?: string; content: never };
 type BannerPropsTitleAndDesc = { title?: string; content?: string };
 
 type RequiredBannerProps =
-    | BannerPropsDescOnly
-    | BannerPropsTitleOnly
-    | BannerPropsTitleAndDesc;
+  | BannerPropsDescOnly
+  | BannerPropsTitleOnly
+  | BannerPropsTitleAndDesc;
 
 type BannerActionProps =
-    | {
-        action?: string;
-        onPress: (event: GestureResponderEvent) => void;
-        accessibilityRole?: never;
+  | {
+      action?: string;
+      onPress: (event: GestureResponderEvent) => void;
+      accessibilityRole?: never;
     }
-    | {
-        action?: never;
-        onPress?: never;
-        accessibilityRole?: AccessibilityRole;
+  | {
+      action?: never;
+      onPress?: never;
+      accessibilityRole?: AccessibilityRole;
     };
 
 // Banner will display a close button if this event is provided
 type BannerCloseProps =
-    | {
-        onClose?: (event: GestureResponderEvent) => void;
-        labelClose?: string;
+  | {
+      onClose?: (event: GestureResponderEvent) => void;
+      labelClose?: string;
     }
-    | {
-        onClose?: never;
-        labelClose?: never;
+  | {
+      onClose?: never;
+      labelClose?: never;
     };
 
 export type Banner = BaseBannerProps &
-    RequiredBannerProps &
-    BannerActionProps &
-    BannerCloseProps;
+  RequiredBannerProps &
+  BannerActionProps &
+  BannerCloseProps;
 
 // COMPONENT CONFIGURATION
 
 /* Used to generate automatically the colour variants
 in the Design System screen */
 export const bannerBackgroundColours: Array<BaseBannerProps["color"]> = [
-    "neutral",
-    "turquoise"
+  "neutral",
+  "turquoise"
 ];
 
 const mapBackgroundColor: Record<
-    NonNullable<BaseBannerProps["color"]>,
-    IOColors
+  NonNullable<BaseBannerProps["color"]>,
+  IOColors
 > = {
-    neutral: "grey-50",
-    turquoise: "turquoise-50"
+  neutral: "grey-50",
+  turquoise: "turquoise-50"
 };
 
 export const Banner = ({
-    viewRef,
-    size,
-    color,
-    pictogramName,
-    title,
-    content,
-    action,
-    labelClose,
-    onPress,
-    onClose,
-    accessibilityHint,
-    accessibilityLabel,
-    testID
+  viewRef,
+  size,
+  color,
+  pictogramName,
+  title,
+  content,
+  action,
+  labelClose,
+  onPress,
+  onClose,
+  accessibilityHint,
+  accessibilityLabel,
+  testID
 }: Banner) => {
-    const isPressed: Animated.SharedValue<number> = useSharedValue(0);
+  const isPressed: Animated.SharedValue<number> = useSharedValue(0);
 
-    // Scaling transformation applied when the button is pressed
-    const animationScaleValue = IOScaleValues?.magnifiedButton?.pressedState;
+  // Scaling transformation applied when the button is pressed
+  const animationScaleValue = IOScaleValues?.magnifiedButton?.pressedState;
 
-    // Using a spring-based animation for our interpolations
-    const progressPressed = useDerivedValue(() =>
-        withSpring(isPressed.value, IOSpringValues.button)
-    );
+  // Using a spring-based animation for our interpolations
+  const progressPressed = useDerivedValue(() =>
+    withSpring(isPressed.value, IOSpringValues.button)
+  );
 
-    // Interpolate animation values from `isPressed` values
-    const pressedAnimationStyle = useAnimatedStyle(() => {
-        // Link color states to the pressed states
+  // Interpolate animation values from `isPressed` values
+  const pressedAnimationStyle = useAnimatedStyle(() => {
+    // Link color states to the pressed states
 
-        // Scale down button slightly when pressed
-        const scale = interpolate(
-            progressPressed.value,
-            [0, 1],
-            [1, animationScaleValue],
-            Extrapolate.CLAMP
-        );
+    // Scale down button slightly when pressed
+    const scale = interpolate(
+      progressPressed.value,
+      [0, 1],
+      [1, animationScaleValue],
+      Extrapolate.CLAMP
+    );
 
-        return {
-            transform: [{ scale }]
-        };
-    });
+    return {
+      transform: [{ scale }]
+    };
+  });
 
-    const onPressIn = useCallback(() => {
-        // eslint-disable-next-line functional/immutable-data
-        isPressed.value = 1;
-    }, [isPressed]);
-    const onPressOut = useCallback(() => {
-        // eslint-disable-next-line functional/immutable-data
-        isPressed.value = 0;
-    }, [isPressed]);
+  const onPressIn = useCallback(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isPressed.value = 1;
+  }, [isPressed]);
+  const onPressOut = useCallback(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isPressed.value = 0;
+  }, [isPressed]);
 
-    const renderMainBlock = () => (
-        <>
-            <View style={[IOStyles.flex, IOStyles.selfCenter]}>
-                {title && (
-                    <>
-                        {/* Once we get 'gap' property, we can get rid of
+  const renderMainBlock = () => (
+    <>
+      <View style={[IOStyles.flex, IOStyles.selfCenter]}>
+        {title && (
+          <>
+            {/* Once we get 'gap' property, we can get rid of
           these <VSpacer> components */}
-                        <H6 weight="SemiBold" color={colorTitle}>
-                            {title}
-                        </H6>
-                        <VSpacer size={4} />
-                    </>
-                )}
-                {content && (
-                    <>
-                        <LabelSmall color={colorContent} weight={"Regular"}>
-                            {content}
-                        </LabelSmall>
-                        {action && <VSpacer size={8} />}
-                    </>
-                )}
-                {action && (
-                    /* Disable pointer events to avoid
+            <H6 weight="SemiBold" color={colorTitle}>
+              {title}
+            </H6>
+            <VSpacer size={4} />
+          </>
+        )}
+        {content && (
+          <>
+            <LabelSmall color={colorContent} weight={"Regular"}>
+              {content}
+            </LabelSmall>
+            {action && <VSpacer size={8} />}
+          </>
+        )}
+        {action && (
+          /* Disable pointer events to avoid
                       pressed state on the button */
-                    <View pointerEvents="none">
-                        <VSpacer size={4} />
-                        <ButtonLink color="primary" onPress={onPress} label={action} />
-                    </View>
-                )}
-            </View>
-            <View style={[styles.bleedPictogram, IOStyles.selfCenter]}>
-                <Pictogram
-                    name={pictogramName}
-                    size={size === "big" ? sizePictogramBig : sizePictogramSmall}
-                />
-            </View>
-            {onClose && labelClose && (
-                <View style={styles.closeIconButton}>
-                    <IconButton
-                        icon="closeSmall"
-                        color={colorCloseButton}
-                        onPress={onClose}
-                        accessibilityLabel={labelClose}
-                    />
-                </View>
-            )}
-        </>
-    );
+          <View pointerEvents="none">
+            <VSpacer size={4} />
+            <ButtonLink color="primary" onPress={onPress} label={action} />
+          </View>
+        )}
+      </View>
+      <View style={[styles.bleedPictogram, IOStyles.selfCenter]}>
+        <Pictogram
+          name={pictogramName}
+          size={size === "big" ? sizePictogramBig : sizePictogramSmall}
+        />
+      </View>
+      {onClose && labelClose && (
+        <View style={styles.closeIconButton}>
+          <IconButton
+            icon="closeSmall"
+            color={colorCloseButton}
+            onPress={onClose}
+            accessibilityLabel={labelClose}
+          />
+        </View>
+      )}
+    </>
+  );
 
-    const PressableButton = () => (
-        <Pressable
-            ref={viewRef}
-            testID={testID}
-            onPress={onPress}
-            onPressIn={onPressIn}
-            onPressOut={onPressOut}
-            // A11y related props
-            accessible={true}
-            accessibilityLabel={accessibilityLabel}
-            accessibilityHint={accessibilityHint}
-            accessibilityRole={"button"}
-        >
-            <Animated.View
-                style={[
-                    styles.container,
-                    dynamicContainerStyles(size, color),
-                    pressedAnimationStyle
-                ]}
-            >
-                {renderMainBlock()}
-            </Animated.View>
-        </Pressable>
-    );
+  const PressableButton = () => (
+    <Pressable
+      ref={viewRef}
+      testID={testID}
+      onPress={onPress}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      // A11y related props
+      accessible={true}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      accessibilityRole={"button"}
+    >
+      <Animated.View
+        style={[
+          styles.container,
+          dynamicContainerStyles(size, color),
+          pressedAnimationStyle
+        ]}
+      >
+        {renderMainBlock()}
+      </Animated.View>
+    </Pressable>
+  );
 
-    const StaticComponent = () => (
-        <View
-            ref={viewRef}
-            testID={testID}
-            style={[styles.container, dynamicContainerStyles(size, color)]}
-            // A11y related props
-            accessible={false}
-            accessibilityHint={accessibilityHint}
-            accessibilityLabel={accessibilityLabel}
-            accessibilityRole={"text"}
-        >
-            {renderMainBlock()}
-        </View>
-    );
+  const StaticComponent = () => (
+    <View
+      ref={viewRef}
+      testID={testID}
+      style={[styles.container, dynamicContainerStyles(size, color)]}
+      // A11y related props
+      accessible={false}
+      accessibilityHint={accessibilityHint}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole={"text"}
+    >
+      {renderMainBlock()}
+    </View>
+  );
 
-    return action ? <PressableButton /> : <StaticComponent />;
+  return action ? <PressableButton /> : <StaticComponent />;
 };

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

@@ -10,15 +10,17 @@ const onLinkPress = () => {
 
 describe("Test Banner Components", () => {
   it("Banner Snapshot", () => {
-    const advice = TestRenderer.create(<Banner
-      viewRef={viewRef}
-      color="neutral"
-      size="big"
-      title="Banner title"
-      pictogramName="donation"
-      action="Action text"
-      onPress={onLinkPress}
-    />).toJSON();
+    const advice = TestRenderer.create(
+      <Banner
+        viewRef={viewRef}
+        color="neutral"
+        size="big"
+        title="Banner title"
+        pictogramName="donation"
+        action="Action text"
+        onPress={onLinkPress}
+      />
+    ).toJSON();
     expect(advice).toMatchSnapshot();
   });
 });

package/src/components/banner/index.tsx

@@ -1 +1 @@
-export * from "./Banner";
+export * from "./Banner";