[IOPLT-88] Creating Icons and Logos showcase

example/src/App.tsx

@@ -1,16 +1,30 @@
-import * as React from "react";
+import { IOStyles } from "@pagopa/io-app-design-system";
 import { NavigationContainer } from "@react-navigation/native";
+import * as Font from "expo-font";
+import * as React from "react";
 import { SafeAreaView } from "react-native";
 import "react-native-gesture-handler";
-import { IOStyles } from "@pagopa/io-app-design-system";
 import AppNavigator from "./navigation/navigator";
 
 export default function App() {
+  const [fontLoaded, setFontLoaded] = React.useState(false);
+
+  React.useEffect(() => {
+    Font.loadAsync({
+      "Titillium Web": require("../assets/fonts/TitilliumWeb/TitilliumWeb-Regular.ttf"),
+      "Readex Pro": require("../assets/fonts/ReadexPro/ReadexPro-Regular.ttf")
+    }).finally(() => setFontLoaded(true));
+  }, []);
+
   return (
     <SafeAreaView style={IOStyles.flex}>
-      <NavigationContainer>
-        <AppNavigator />
-      </NavigationContainer>
+      {fontLoaded ? (
+        <NavigationContainer>
+          <AppNavigator />
+        </NavigationContainer>
+      ) : (
+        <></>
+      )}
     </SafeAreaView>
   );
 }

example/src/components/ComponentViewerBox.tsx

@@ -0,0 +1,61 @@
+import { IOColors } from "@pagopa/io-app-design-system";
+import * as React from "react";
+import { StyleSheet, Text, View } from "react-native";
+
+const styles = StyleSheet.create({
+    componentWrapper: {
+        marginBottom: 24
+    },
+    lastItem: {
+        marginBottom: 0
+    },
+    labelWrapper: {
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        marginTop: 12
+    },
+    componentLabel: {
+        fontSize: 10
+    },
+    componenentLabelLight: {
+        color: IOColors.bluegrey
+    },
+    componenentLabelDark: {
+        color: IOColors.greyLight
+    }
+});
+
+type ComponentViewerBoxProps = {
+    name: string;
+    colorMode?: "dark" | "light";
+    last?: boolean;
+    children: React.ReactNode;
+};
+
+export const ComponentViewerBox = ({
+    name,
+    colorMode = "light",
+    last = false,
+    children
+}: ComponentViewerBoxProps) => (
+    <View style={last ? styles.lastItem : styles.componentWrapper}>
+        {children}
+        <View style={styles.labelWrapper}>
+            {name && (
+                <Text
+                    numberOfLines={1}
+                    ellipsizeMode="tail"
+                    style={[
+                        styles.componentLabel,
+                        colorMode === "light"
+                            ? styles.componenentLabelLight
+                            : styles.componenentLabelDark
+                    ]}
+                >
+                    {name}
+                </Text>
+            )}
+        </View>
+    </View>
+);

example/src/components/IconViewerBox.tsx

@@ -0,0 +1,132 @@
+import {
+    IOColors,
+    IOThemeContext
+} from "@pagopa/io-app-design-system";
+import React, { useContext } from "react";
+import { StyleSheet, Text, View } from "react-native";
+
+export const iconItemGutter = 8;
+
+const styles = StyleSheet.create({
+    iconWrapper: {
+        justifyContent: "flex-start",
+        marginBottom: 16,
+        paddingHorizontal: iconItemGutter / 2
+    },
+    iconWrapperSmall: {
+        width: `${100 / 6}%`
+    },
+    iconWrapperMedium: {
+        width: "20%"
+    },
+    iconWrapperLarge: {
+        width: "25%"
+    },
+    iconWrapperAuto: {
+        width: "auto"
+    },
+    nameWrapper: {
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        marginTop: 4
+    },
+    iconItem: {
+        overflow: "hidden",
+        position: "relative",
+        aspectRatio: 1,
+        borderRadius: 8,
+        padding: 16,
+        alignItems: "center",
+        justifyContent: "center",
+        borderWidth: 1
+    },
+    iconItemLarger: {
+        padding: 12
+    },
+    iconLabelSmall: {
+        fontSize: 8
+    },
+    iconLabelMedium: {
+        fontSize: 10
+    },
+    iconLabelLarge: {
+        fontSize: 11
+    },
+    signalDot: {
+        position: "absolute",
+        right: 4,
+        top: 4,
+        width: 4,
+        height: 4,
+        borderRadius: 4,
+        backgroundColor: IOColors["success-500"]
+    }
+});
+
+type IconViewerBoxProps = {
+    name: string;
+    image: React.ReactNode;
+    size?: "small" | "medium" | "large" | undefined;
+    withDot?: boolean;
+};
+
+const sizeMap = {
+    small: {
+        wrapper: styles.iconWrapperSmall,
+        item: styles.iconItemLarger,
+        label: styles.iconLabelSmall
+    },
+    medium: {
+        wrapper: styles.iconWrapperMedium,
+        item: null,
+        label: styles.iconLabelMedium
+    },
+    large: {
+        wrapper: styles.iconWrapperLarge,
+        item: styles.iconItemLarger,
+        label: styles.iconLabelLarge
+    }
+};
+
+export const IconViewerBox = ({
+    name,
+    image,
+    size,
+    withDot = false
+}: IconViewerBoxProps) => {
+    const theme = useContext(IOThemeContext);
+    return (
+        <View
+            style={[
+                styles.iconWrapper,
+                size ? sizeMap[size].wrapper : styles.iconWrapperAuto
+            ]}
+        >
+            <View
+                style={[
+                    styles.iconItem,
+                    size ? sizeMap[size].item : {},
+                    { borderColor: IOColors[theme["cardBorder-default"]] }
+                ]}
+            >
+                {withDot && <View style={styles.signalDot} />}
+                {image}
+            </View>
+            <View style={styles.nameWrapper}>
+                {name && (
+                    <Text
+                        numberOfLines={1}
+                        ellipsizeMode="tail"
+                        style={[
+                            { color: IOColors[theme["textBody-secondary"]] },
+                            size ? sizeMap[size].label : styles.iconLabelMedium
+                        ]}
+                    >
+                        {name}
+                    </Text>
+                )}
+            </View>
+        </View>
+    );
+};

example/src/components/LogoPaymentViewerBox.tsx

@@ -0,0 +1,95 @@
+import {
+    IOColors,
+    hexToRgba
+} from "@pagopa/io-app-design-system";
+import React from "react";
+import { ImageBackground, StyleSheet, Text, View } from "react-native";
+
+/* Fake Transparent BG */
+import FakeTransparentBg from "../utils/img/transparent-background-pattern.png";
+
+export const logoItemGutter = 8;
+
+const styles = StyleSheet.create({
+    logoWrapper: {
+        justifyContent: "flex-start",
+        marginBottom: 16,
+        paddingHorizontal: logoItemGutter / 2
+    },
+    logoWrapperMedium: {
+        width: "20%"
+    },
+    logoWrapperLarge: {
+        width: "25%"
+    },
+    fakeTransparentBg: {
+        position: "absolute",
+        width: "275%",
+        height: "275%",
+        opacity: 0.4
+    },
+    nameWrapper: {
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        marginTop: 4
+    },
+    logoItem: {
+        overflow: "hidden",
+        position: "relative",
+        borderRadius: 8,
+        aspectRatio: 1,
+        padding: 16,
+        alignItems: "center",
+        justifyContent: "center",
+        borderColor: hexToRgba(IOColors.black, 0.1),
+        borderWidth: 1
+    },
+    logoItemLarge: {
+        aspectRatio: 4 / 3
+    },
+    iconLabel: {
+        fontSize: 10,
+        color: IOColors.bluegrey
+    }
+});
+
+type LogoPaymentViewerBoxProps = {
+    name: string;
+    image: React.ReactNode;
+    size: "medium" | "large";
+};
+
+const sizeMap = {
+    medium: {
+        wrapper: styles.logoWrapperMedium,
+        item: null
+    },
+    large: {
+        wrapper: styles.logoWrapperLarge,
+        item: styles.logoItemLarge
+    }
+};
+
+export const LogoPaymentViewerBox = ({
+    name,
+    image,
+    size
+}: LogoPaymentViewerBoxProps) => (
+    <View style={[styles.logoWrapper, sizeMap[size].wrapper]}>
+        <View style={[styles.logoItem, sizeMap[size].item]}>
+            <ImageBackground
+                style={styles.fakeTransparentBg}
+                source={FakeTransparentBg}
+            />
+            {image}
+        </View>
+        <View style={styles.nameWrapper}>
+            {name && (
+                <Text numberOfLines={1} ellipsizeMode="tail" style={styles.iconLabel}>
+                    {name}
+                </Text>
+            )}
+        </View>
+    </View>
+);

example/src/components/Screen.tsx

@@ -0,0 +1,39 @@
+import { ContentWrapper, IOThemeContext } from "@pagopa/io-app-design-system";
+import React, { useContext } from "react";
+import { ScrollView, View } from "react-native";
+
+type Props = {
+    children: React.ReactNode;
+};
+
+export const Screen = ({
+    children,
+}: Props) => {
+    const theme = useContext(IOThemeContext);
+
+    return (
+        <ScrollView
+            style={{
+                backgroundColor: theme["appBackground-primary"]
+            }}
+        >
+            <ContentWrapper>{children}</ContentWrapper>
+        </ScrollView>
+    );
+};
+
+export const NoMarginScreen = ({
+    children,
+}: Props) => {
+    const theme = useContext(IOThemeContext);
+
+    return (
+        <ScrollView
+            style={{
+                backgroundColor: theme["appBackground-primary"]
+            }}
+        >
+            <View>{children}</View>
+        </ScrollView>
+    );
+};

example/src/images.d.ts

@@ -0,0 +1,6 @@
+declare module "*.png" {
+    import { ImageRequireSource } from "react-native";
+    const value: ImageRequireSource;
+    export = value;
+  }
+