[IOPLT-93] Creating showcase for advices, banners and alerts

example/src/components/FeatureInfo.tsx

@@ -0,0 +1,85 @@
+import {
+  HSpacer,
+  IOIconSizeScale,
+  IOIcons,
+  IOPictogramSizeScale,
+  IOPictograms,
+  IOStyles,
+  Icon,
+  LabelSmall,
+  Link,
+  Pictogram,
+  VSpacer
+} from "@pagopa/io-app-design-system";
+import React from "react";
+import { GestureResponderEvent, View } from "react-native";
+
+type PartialFeatureInfo = {
+  // Necessary to render main body with different formatting
+  body?: string | React.ReactNode;
+};
+
+type FeatureInfoActionProps =
+  | {
+      actionLabel?: string;
+      actionOnPress: (event: GestureResponderEvent) => void;
+    }
+  | {
+      actionLabel?: never;
+      actionOnPress?: never;
+    };
+
+type FeatureInfoGraphicProps =
+  | { iconName?: never; pictogramName: IOPictograms }
+  | { iconName: IOIcons; pictogramName?: never };
+
+type FeatureInfo = FeatureInfoGraphicProps &
+  PartialFeatureInfo &
+  FeatureInfoActionProps;
+
+const DEFAULT_ICON_SIZE: IOIconSizeScale = 24;
+const DEFAULT_PICTOGRAM_SIZE: IOPictogramSizeScale = 48;
+
+const renderNode = (body: FeatureInfo["body"]) => {
+  if (typeof body === "string") {
+    return (
+      <LabelSmall weight="Regular" color="grey-700" testID="infoScreenBody">
+        {body}
+      </LabelSmall>
+    );
+  }
+
+  return body;
+};
+
+export const FeatureInfo = ({
+  iconName,
+  pictogramName,
+  body,
+  actionLabel,
+  actionOnPress
+}: FeatureInfo) => (
+  <View style={[IOStyles.flex, IOStyles.row, IOStyles.alignCenter]}>
+    {iconName && (
+      <Icon name={iconName} size={DEFAULT_ICON_SIZE} color="grey-300" />
+    )}
+    {pictogramName && (
+      <Pictogram name={pictogramName} size={DEFAULT_PICTOGRAM_SIZE} />
+    )}
+    <HSpacer size={24} />
+    <View style={{ flexShrink: 1 }}>
+      {renderNode(body)}
+      {actionLabel && actionOnPress && (
+        <>
+          {/* Add "marginTop" equivalent if body text is present.
+          This verbose code could be deleted once we got "gap"
+          property support */}
+          {body && <VSpacer size={8} />}
+          <Link fontSize="small" onPress={actionOnPress}>
+            {actionLabel}
+          </Link>
+        </>
+      )}
+    </View>
+  </View>
+);

example/src/components/FullWidthComponent.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+
+type Props = {
+  children: React.ReactNode;
+};
+const contentPadding = 24;
+const styles = StyleSheet.create({
+  container: {
+    marginLeft: contentPadding * -1,
+    marginRight: contentPadding * -1
+  }
+});
+
+export const FullWidthComponent = ({ children }: Props) => (
+  <View style={styles.container}>{children}</View>
+);

example/src/navigation/navigator.tsx

@@ -3,6 +3,8 @@ import React from "react";
 import { Icons } from "../pages/Icons";
 import { Logos } from "../pages/Logos";
 
+import { DSAdvice } from "../pages/Advice";
+import { DSAlert } from "../pages/Alert";
 import MainScreen from "../pages/MainScreen";
 import { Pictograms } from "../pages/Pictograms";
 import { Typography } from "../pages/Typography";
@@ -16,21 +18,61 @@ const AppNavigator = () => (
     initialRouteName={APP_ROUTES.MAIN}
     screenOptions={{ headerShown: true }}
   >
-    <Stack.Screen name={APP_ROUTES.MAIN} component={MainScreen} options={{
-      headerTitle: "Design System",
-    }} />
-    <Stack.Screen name={APP_ROUTES.FOUNDATION.ICONS.route} component={Icons} options={{
-      headerTitle: APP_ROUTES.FOUNDATION.ICONS.title, headerBackTitleVisible: false
-    }} />
-    <Stack.Screen name={APP_ROUTES.FOUNDATION.LOGOS.route} component={Logos} options={{
-      headerTitle: APP_ROUTES.FOUNDATION.LOGOS.title, headerBackTitleVisible: false
-    }} />
-    <Stack.Screen name={APP_ROUTES.FOUNDATION.TYPOGRAPHY.route} component={Typography} options={{
-      headerTitle: APP_ROUTES.FOUNDATION.TYPOGRAPHY.title, headerBackTitleVisible: false
-    }} />
-    <Stack.Screen name={APP_ROUTES.FOUNDATION.PICTOGRAMS.route} component={Pictograms} options={{
-      headerTitle: APP_ROUTES.FOUNDATION.PICTOGRAMS.title, headerBackTitleVisible: false
-    }} />
+    <Stack.Screen
+      name={APP_ROUTES.MAIN}
+      component={MainScreen}
+      options={{
+        headerTitle: "Design System"
+      }}
+    />
+    <Stack.Screen
+      name={APP_ROUTES.FOUNDATION.ICONS.route}
+      component={Icons}
+      options={{
+        headerTitle: APP_ROUTES.FOUNDATION.ICONS.title,
+        headerBackTitleVisible: false
+      }}
+    />
+    <Stack.Screen
+      name={APP_ROUTES.FOUNDATION.LOGOS.route}
+      component={Logos}
+      options={{
+        headerTitle: APP_ROUTES.FOUNDATION.LOGOS.title,
+        headerBackTitleVisible: false
+      }}
+    />
+    <Stack.Screen
+      name={APP_ROUTES.FOUNDATION.TYPOGRAPHY.route}
+      component={Typography}
+      options={{
+        headerTitle: APP_ROUTES.FOUNDATION.TYPOGRAPHY.title,
+        headerBackTitleVisible: false
+      }}
+    />
+    <Stack.Screen
+      name={APP_ROUTES.FOUNDATION.PICTOGRAMS.route}
+      component={Pictograms}
+      options={{
+        headerTitle: APP_ROUTES.FOUNDATION.PICTOGRAMS.title,
+        headerBackTitleVisible: false
+      }}
+    />
+    <Stack.Screen
+      name={APP_ROUTES.COMPONENTS.ADVICE.route}
+      component={DSAdvice}
+      options={{
+        headerTitle: APP_ROUTES.COMPONENTS.ADVICE.title,
+        headerBackTitleVisible: false
+      }}
+    />
+    <Stack.Screen
+      name={APP_ROUTES.COMPONENTS.ALERT.route}
+      component={DSAlert}
+      options={{
+        headerTitle: APP_ROUTES.COMPONENTS.ALERT.title,
+        headerBackTitleVisible: false
+      }}
+    />
   </Stack.Navigator>
 );