@pagopa/io-app-design-system 1.0.0-0

package/src/components/banner/Banner.tsx

@@ -0,0 +1,277 @@
+import React, { useCallback } from "react";
+import {
+    AccessibilityRole,
+    GestureResponderEvent,
+    Pressable,
+    StyleSheet,
+    View,
+    ViewStyle
+} from "react-native";
+import Animated, {
+    Extrapolate,
+    interpolate,
+    useAnimatedStyle,
+    useDerivedValue,
+    useSharedValue,
+    withSpring
+} from "react-native-reanimated";
+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 { VSpacer } from "../spacer";
+import { H6, LabelSmall } from "../typography";
+
+
+/* Styles */
+
+const colorTitle: IOColors = "blueIO-850";
+const colorContent: IOColors = "grey-700";
+const colorCloseButton: IconButton["color"] = "neutral";
+const sizePictogramBig: IOPictogramSizeScale = 80;
+const sizePictogramSmall: IOPictogramSizeScale = 64;
+const closeButtonDistanceFromEdge: number = 4;
+const closeButtonOpacity = 0.6;
+const sizeBigPadding = IOBannerBigSpacing;
+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
+    }
+});
+
+const dynamicContainerStyles = (
+    size: BaseBannerProps["size"],
+    color: BaseBannerProps["color"]
+): ViewStyle => ({
+    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;
+}>;
+
+/* Description only */
+type BannerPropsDescOnly = { title: never; content?: string };
+/* Title only */
+type BannerPropsTitleOnly = { title?: string; content: never };
+/* Title + Description */
+type BannerPropsTitleAndDesc = { title?: string; content?: string };
+
+type RequiredBannerProps =
+    | BannerPropsDescOnly
+    | BannerPropsTitleOnly
+    | BannerPropsTitleAndDesc;
+
+type BannerActionProps =
+    | {
+        action?: string;
+        onPress: (event: GestureResponderEvent) => void;
+        accessibilityRole?: never;
+    }
+    | {
+        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?: never;
+        labelClose?: never;
+    };
+
+export type Banner = BaseBannerProps &
+    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"
+];
+
+const mapBackgroundColor: Record<
+    NonNullable<BaseBannerProps["color"]>,
+    IOColors
+> = {
+    neutral: "grey-50",
+    turquoise: "turquoise-50"
+};
+
+export const Banner = ({
+    viewRef,
+    size,
+    color,
+    pictogramName,
+    title,
+    content,
+    action,
+    labelClose,
+    onPress,
+    onClose,
+    accessibilityHint,
+    accessibilityLabel,
+    testID
+}: Banner) => {
+    const isPressed: Animated.SharedValue<number> = useSharedValue(0);
+
+    // 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)
+    );
+
+    // 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
+        );
+
+        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 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
+                      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>
+            )}
+        </>
+    );
+
+    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>
+    );
+
+    return action ? <PressableButton /> : <StaticComponent />;
+};

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

@@ -0,0 +1,288 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test Banner Components Banner Snapshot 1`] = `
+<View
+  accessibilityRole="button"
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "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]}
+>
+  <View
+    style={
+      [
+        {
+          "alignContent": "center",
+          "alignItems": "flex-start",
+          "borderRadius": 8,
+          "flexDirection": "row",
+        },
+        {
+          "backgroundColor": "#F4F5F8",
+          "paddingHorizontal": 16,
+          "paddingVertical": 16,
+        },
+        {
+          "transform": [
+            {
+              "scale": undefined,
+            },
+          ],
+        },
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "flex": 1,
+          },
+          {
+            "alignSelf": "center",
+          },
+        ]
+      }
+    >
+      <Text
+        color="blueIO-850"
+        defaultColor="black"
+        defaultWeight="Regular"
+        font="ReadexPro"
+        fontStyle={
+          {
+            "fontSize": 16,
+            "lineHeight": 20,
+          }
+        }
+        style={
+          [
+            {
+              "fontSize": 16,
+              "lineHeight": 20,
+            },
+            {
+              "color": "#031344",
+              "fontFamily": "Readex Pro",
+              "fontStyle": "normal",
+              "fontWeight": "600",
+            },
+          ]
+        }
+        weight="SemiBold"
+      >
+        Banner title
+      </Text>
+      <View
+        style={
+          {
+            "height": 4,
+          }
+        }
+      />
+      <View
+        pointerEvents="none"
+      >
+        <View
+          style={
+            {
+              "height": 4,
+            }
+          }
+        />
+        <View
+          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={
+            {
+              "bottom": 14,
+              "left": 24,
+              "right": 24,
+              "top": 14,
+            }
+          }
+          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,
+                  "flexDirection": "row",
+                  "justifyContent": "center",
+                  "textAlignVertical": "center",
+                },
+                false,
+                {},
+                {
+                  "transform": [
+                    {
+                      "scale": undefined,
+                    },
+                  ],
+                },
+              ]
+            }
+          >
+            <Text
+              ellipsizeMode="tail"
+              numberOfLines={1}
+              style={
+                [
+                  {
+                    "fontFamily": "Readex Pro",
+                    "fontSize": 16,
+                    "fontStyle": "normal",
+                    "fontWeight": "400",
+                  },
+                  {
+                    "color": "#0B3EE3",
+                  },
+                  {
+                    "color": undefined,
+                  },
+                ]
+              }
+            >
+              Action text
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        [
+          {
+            "marginRight": -16,
+          },
+          {
+            "alignSelf": "center",
+          },
+        ]
+      }
+    >
+      <RNSVGSvgView
+        align="xMidYMid"
+        bbHeight={80}
+        bbWidth={80}
+        focusable={false}
+        height={80}
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
+        style={
+          [
+            {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            {
+              "flex": 0,
+              "height": 80,
+              "width": 80,
+            },
+          ]
+        }
+        vbHeight={240}
+        vbWidth={240}
+        width={80}
+      >
+        <RNSVGGroup>
+          <RNSVGPath
+            clipRule={0}
+            d="M147.212 192.138c.852.489 1.722.687 2.557.688 1.688-.002 3.239-.8 4.178-1.531 7.01-3.154 96.182-35.614 99.267-36.674h.001l.189-.065-1.328-3.835-.574.197c-5.355 1.842-93.089 33.823-99.504 36.809-.155.077-.319.189-.457.301 0 0-.006.004-.015.011h-.001c-.157.12-1.433 1.085-2.287.591-1.146-.68-6.407-6.424 2.924-52.883 4.407-21.91 2.285-38.661-6.295-49.7966-10.504-13.6464-27.726-14.7298-33.383-15.0824l-.888-.0516c-3.536.0774-11.8661.7223-12.832 5.1851-.6467 2.9494 1.932 5.8989 8.503 9.5534-12.1766.4299-28.967 2.4593-35.0553 9.9833-.0776.1032-.1466.2063-.2069.3181-.6037 1.1179-1.1901 3.5084.3794 5.3917.4798.573 1.161 1.147 2.2752 1.557-2.1345 1.696-3.9916 3.899-3.8706 6.38.207 4.187 5.5364 5.984 7.287 6.569.1294.043.2587.078.3967.095.1811.026 1.7075.206 4.0963.206l-.0087.009c1.4315 0 3.1716-.066 5.1144-.271-.581 2.115-.8166 4.783.629 6.892 1.3194 1.935 3.6737 2.898 6.9248 2.898l.0087-.009c.8537 0 1.7678-.06 2.7509-.198 1.8857-.095 5.7711-.365 9.6731-1.091-3.196 15.023-15.1229 77.882 4.582 96.651 1.561 2.063 15.359 19.055 45.05 19.055v.008c15.574 0 65.53-14.678 90.374-28.642l-2-3.534C138 262 121 220.936 115.442 218.433c-.086-.12-.181-.232-.284-.326-19.07-17.837-5.227-85.166-3.106-94.877 2.869-.886 5.268-2.124 6.21-3.856l-3.579-1.934c-1 1.84-9.71 3.525-17.0745 3.903-3.0701.422-5.2432.069-5.9417-.945-.8383-1.215-.129-3.711.5702-5.31 3.7122-.764 7.786-2.086 11.701-4.33l-2.026-3.517c-9.8141 5.624-21.1456 4.764-22.7496 4.609-3.1218-1.083-4.2773-2.21-4.3118-2.855-.0756-1.499 3.5311-4.206 6.9223-5.792 3.4963-.397 8.28-1.458 14.887-3.5632l-1.2418-3.8609c-17.3595 5.5291-19.8 2.9924-19.9035 2.8807-.138-.1634-.0518-.5504.0259-.7653 6.5712-7.6702 29.8555-8.3581 36.8925-8.3839 1.285-.0086 2.38-.8857 2.664-2.1326.285-1.2726-.336-2.5624-1.517-3.13-10.487-5.0561-10.849-7.3434-10.849-7.3434.483-.9373 4.915-1.9433 8.779-2.0379l.724.0516.008.0004c5.757.3615 21.029 1.3204 30.408 13.4998 7.83 10.1639 9.693 25.8227 5.528 46.5287-10.391 51.726-3.295 55.841-.966 57.191Z"
+            fill={4278927075}
+            fillRule={0}
+            propList={
+              [
+                "fill",
+                "fillRule",
+              ]
+            }
+          />
+          <RNSVGPath
+            d="M89.9306 0C76.0999 0 64.8867 11.1786 64.8867 24.9668 64.8867 11.1786 53.6769 0 39.8462 0c-.2464 0-.4929.00332-.7393.00996C21.2631.52456 11.9649 21.5073 23.268 35.2822l32.1174 39.1467c4.9122 5.986 14.0938 5.986 19.006 0l32.1176-39.1467C117.809 21.5073 108.51.52457 90.6666.00996A27.44628 27.44628 0 0 0 89.9273 0h.0033Z"
+            fill={4289392367}
+            propList={
+              [
+                "fill",
+              ]
+            }
+          />
+          <RNSVGPath
+            clipRule={0}
+            d="M87.1816 7.87002c0-.72428.5872-1.31143 1.3115-1.31143 5.9448 0 10.2533 2.29037 13.0539 5.63291 2.77 3.3058 3.994 7.5532 3.994 11.4157 0 .7242-.587 1.3114-1.311 1.3114s-1.311-.5872-1.311-1.3114c0-3.3505-1.07-6.9716-3.3825-9.7312-2.2813-2.7228-5.8413-4.69455-11.0434-4.69455-.7243 0-1.3115-.58715-1.3115-1.31143Z"
+            fill={4278240714}
+            fillRule={0}
+            propList={
+              [
+                "fill",
+                "fillRule",
+              ]
+            }
+          />
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+  </View>
+</View>
+`;

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

@@ -0,0 +1,24 @@
+import React from "react";
+import { Alert, View } from "react-native";
+import * as TestRenderer from "react-test-renderer";
+import { Banner } from "../Banner";
+
+const viewRef = React.createRef<View>();
+const onLinkPress = () => {
+  Alert.alert("Alert", "Action triggered");
+};
+
+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();
+    expect(advice).toMatchSnapshot();
+  });
+});

package/src/components/banner/index.tsx

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

package/src/components/buttons/ButtonExtendedOutline.tsx

@@ -0,0 +1,106 @@
+import React, { useCallback } from "react";
+import {
+    GestureResponderEvent,
+    Pressable,
+    StyleSheet,
+    View
+} from "react-native";
+import Animated, {
+    Extrapolate,
+    interpolate,
+    useAnimatedStyle,
+    useDerivedValue,
+    useSharedValue,
+    withSpring
+} from "react-native-reanimated";
+import { IOIcons, Icon } from "../icons";
+import { H4, LabelSmall } from "../typography";
+import { IOScaleValues, IOSpringValues, IOColors, IOStyles } from "../../core";
+
+type Props = {
+    label: string;
+    description?: string;
+    onPress: (event: GestureResponderEvent) => void;
+    icon?: IOIcons;
+};
+
+const styles = StyleSheet.create({
+    button: {
+        flex: 1,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        paddingHorizontal: 16,
+        paddingVertical: 16,
+        borderRadius: 8,
+        borderColor: IOColors.bluegreyLight,
+        backgroundColor: IOColors.white,
+        borderStyle: "solid",
+        borderWidth: 1
+    }
+});
+
+export const ButtonExtendedOutline = ({
+    label,
+    description,
+    onPress,
+    icon = "info"
+}: Props) => {
+    const isPressed: Animated.SharedValue<number> = useSharedValue(0);
+
+    // Scaling transformation applied when the button is pressed
+    const animationScaleValue = IOScaleValues?.magnifiedButton?.pressedState;
+
+    const scaleTraversed = useDerivedValue(() =>
+        withSpring(isPressed.value, IOSpringValues.button)
+    );
+
+    // Interpolate animation values from `isPressed` values
+    const animatedStyle = useAnimatedStyle(() => {
+        const scale = interpolate(
+            scaleTraversed.value,
+            [0, 1],
+            [1, animationScaleValue],
+            Extrapolate.CLAMP
+        );
+
+        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]);
+
+    return (
+        <Pressable
+            onPress={onPress}
+            onPressIn={onPressIn}
+            onPressOut={onPressOut}
+            accessible={true}
+            accessibilityRole={"button"}
+        >
+            <Animated.View style={[styles.button, animatedStyle]}>
+                <View style={IOStyles.flex}>
+                    <H4>{label}</H4>
+                    {description && (
+                        <LabelSmall weight="Regular" color={"bluegreyDark"}>
+                            {description}
+                        </LabelSmall>
+                    )}
+                </View>
+                <View style={{ marginLeft: 8 }}>
+                    <Icon name={icon} color="blue" size={24} />
+                </View>
+            </Animated.View>
+        </Pressable>
+    );
+};
+
+export default ButtonExtendedOutline;