Merge remote-tracking branch 'origin/development' into task/us217-upd…

…ate-color-config-for-navbar

cypress/e2e/home.cy.ts

@@ -18,9 +18,13 @@ describe('Home page tests', () => {
 
         cy.contains('Home');
         cy.contains('Useful Prompts');
+        cy.contains('Tech Providers');
         cy.contains('Themes');
         cy.contains('See All');
 
+        // There should be 3 Tech Providers.
+        cy.get('[data-testid="tech-provider-card"]').should('have.length', 3);
+
         // There should be 3 themes.
         cy.get('[data-testid="theme-card"]').should('have.length', 3);
 

package.json

@@ -82,7 +82,8 @@
         "react-numeric-input": "^2.2.3",
         "react-redux": "^8.1.3",
         "redux-persist": "^6.0.0",
-        "swr": "^2.2.4"
+        "swr": "^2.2.4",
+        "expo-linear-gradient": "~12.3.0"
     },
     "devDependencies": {
         "@babel/core": "^7.23.2",

src/components/WTR/Card/TechProviderCard.tsx

@@ -0,0 +1,106 @@
+import { LinearGradient } from 'expo-linear-gradient';
+import React from 'react';
+import {
+    Image,
+    ImageSourcePropType,
+    StyleSheet,
+    View,
+    ViewStyle,
+} from 'react-native';
+
+import {
+    shadow,
+    useColorConfig,
+    useColorStateConfig,
+} from '../../../lib/constants/Colors';
+import { useFonts } from '../../../lib/constants/Fonts';
+import { HapticFeedback, HapticForces } from '../../../lib/haptic/Hooks';
+import { useNavigation } from '../../../lib/utility/navigation/useNavigation';
+import { Routes } from '../../../routes/routes';
+import { TextTranslated } from '../../general/text/TextTranslated';
+import { IntractableView } from '../../general/views/IntractableView';
+
+type Props = {
+    name: string;
+    techProviderImage: ImageSourcePropType;
+    techProviderSlug: string;
+    style?: ViewStyle;
+};
+
+export function TechProviderCard({
+    name,
+    techProviderImage,
+    techProviderSlug,
+    style,
+}: Props) {
+    const colors = useColorConfig();
+    const colorStateConfig = useColorStateConfig();
+    const fonts = useFonts();
+    const navigation = useNavigation();
+
+    const styles = StyleSheet.create({
+        card: {
+            backgroundColor: colors.listItemBg,
+            display: 'flex',
+            flexDirection: 'column',
+            borderRadius: 12,
+            padding: 5,
+            marginBottom: 16,
+            marginHorizontal: 5,
+            height: 110,
+            ...shadow,
+            ...colorStateConfig.highContrastBorder,
+        },
+        circle: {
+            width: 75,
+            height: 75,
+            borderRadius: 50,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        title: {
+            ...fonts.h3,
+            color: colors.titleDefault,
+            fontWeight: 'bold',
+        },
+        contentContainer: {
+            justifyContent: 'center',
+        },
+        image: {
+            height: 50,
+            width: 50,
+        },
+        container: {
+            alignItems: 'center',
+        },
+    });
+
+    return (
+        <IntractableView
+            style={[styles.card, style]}
+            testID="tech-provider-card"
+            onPress={() => {
+                HapticFeedback(HapticForces.Light);
+                navigation.navigate(Routes.WindesheimTechRadarContent, {
+                    page: techProviderSlug,
+                });
+            }}
+        >
+            <View
+                style={styles.container}
+                testID={`tech-provider-${techProviderSlug}-button`}
+            >
+                <LinearGradient
+                    colors={colors.techProviderGradient}
+                    style={styles.circle}
+                >
+                    <Image source={techProviderImage} style={styles.image} />
+                </LinearGradient>
+
+                <View style={styles.contentContainer}>
+                    <TextTranslated style={styles.title} text={name} />
+                </View>
+            </View>
+        </IntractableView>
+    );
+}

src/components/WTR/TechProviderItems.ts

@@ -2,31 +2,31 @@
 import React from 'react';
 
 //@ts-ignore
-import AmazonLogo from '../../assets/images/WTR/TechProviders/amazon.svg';
+import AmazonLogo from '../../assets/images/WTR/TechProviders/amazon.png';
 //@ts-ignore
-import AppleLogo from '../../assets/images/WTR/TechProviders/apple.svg';
+import AppleLogo from '../../assets/images/WTR/TechProviders/apple.png';
 //@ts-ignore
-import CiscoLogo from '../../assets/images/WTR/TechProviders/cisco.svg';
+import CiscoLogo from '../../assets/images/WTR/TechProviders/cisco.png';
 //@ts-ignore
-import GoogleLogo from '../../assets/images/WTR/TechProviders/google.svg';
+import GoogleLogo from '../../assets/images/WTR/TechProviders/google.png';
 //@ts-ignore
-import HpLogo from '../../assets/images/WTR/TechProviders/hp.svg';
+import HpLogo from '../../assets/images/WTR/TechProviders/hp.png';
 //@ts-ignore
-import IbmLogo from '../../assets/images/WTR/TechProviders/ibm.svg';
+import IbmLogo from '../../assets/images/WTR/TechProviders/ibm.png';
 //@ts-ignore
-import IntelLogo from '../../assets/images/WTR/TechProviders/intel.svg';
+import IntelLogo from '../../assets/images/WTR/TechProviders/intel.png';
 //@ts-ignore
-import MetaLogo from '../../assets/images/WTR/TechProviders/meta.svg';
+import MetaLogo from '../../assets/images/WTR/TechProviders/meta.png';
 //@ts-ignore
-import MicrosoftLogo from '../../assets/images/WTR/TechProviders/microsoft.svg';
+import MicrosoftLogo from '../../assets/images/WTR/TechProviders/microsoft.png';
 //@ts-ignore
-import OpenAILogo from '../../assets/images/WTR/TechProviders/openai.svg';
+import OpenAILogo from '../../assets/images/WTR/TechProviders/openai.png';
 //@ts-ignore
-import OracleLogo from '../../assets/images/WTR/TechProviders/oracle.svg';
+import OracleLogo from '../../assets/images/WTR/TechProviders/oracle.png';
 //@ts-ignore
-import SalesForceLogo from '../../assets/images/WTR/TechProviders/salesforce.svg';
+import SalesForceLogo from '../../assets/images/WTR/TechProviders/salesforce.png';
 //@ts-ignore
-import SapLogo from '../../assets/images/WTR/TechProviders/sap.svg';
+import SapLogo from '../../assets/images/WTR/TechProviders/sap.png';
 
 export type TechProvider = {
     name: string;

src/components/WTR/TechProviders.tsx

@@ -1,77 +1,32 @@
 import React, { useEffect, useState } from 'react';
-import {
-    Platform,
-    Pressable,
-    ScrollView,
-    StyleSheet,
-    Text,
-    View,
-} from 'react-native';
-import FontAwesome5Icon from 'react-native-vector-icons/FontAwesome5';
+import { StyleSheet, View } from 'react-native';
 
+import { TechProviderCard } from './Card/TechProviderCard';
 import { TechProvider, techProviderItems } from './TechProviderItems';
-import {
-    useColorConfig,
-    useColorStateConfig,
-} from '../../lib/constants/Colors';
 import { useFonts } from '../../lib/constants/Fonts';
-import { HapticFeedback, HapticForces } from '../../lib/haptic/Hooks';
-import { useNavigation } from '../../lib/utility/navigation/useNavigation';
 import { Routes } from '../../routes/routes';
 import { TextTranslated } from '../general/text/TextTranslated';
 import { TitleWithSeeAll } from '../general/text/TitleWithSeeAll';
 
-export const TechProviders = ({ limit }: { limit?: number }) => {
-    const navigation = useNavigation();
-    const colors = useColorConfig();
-    const colorStateConfig = useColorStateConfig();
+type Props = { limit?: number };
+
+export const TechProviders = ({ limit }: Props) => {
     const fonts = useFonts();
     const [displayItems, setDisplayItems] = useState<TechProvider[]>([]);
     const isLimited = limit && limit > 0;
 
     const styles = StyleSheet.create({
-        button: {
-            alignItems: 'center',
-            borderRadius: 40,
-            flexDirection: 'row',
-            margin: 10,
-            marginTop: 0,
-            padding: Platform.OS !== 'web' ? 10 : 20,
-            maxHeight: 90,
-            overflow: 'hidden',
-            backgroundColor: colors.listItemBg,
-            ...colorStateConfig.highContrastBorder,
-        },
-        itemText: {
-            fontSize: 14,
-            fontWeight: 'bold',
-            textAlign: 'center',
-            flexWrap: 'wrap',
-            left: 50,
-            position: 'absolute',
-            ...fonts.description,
-        },
-        navButton: {
-            position: 'absolute',
-            right: 10,
-        },
         heading: {
             margin: 10,
             ...fonts.h1,
         },
         container: {
-            backgroundColor: colors.background,
-            maxHeight: limit ? 'auto' : 200,
+            display: 'flex',
+            flexDirection: 'row',
+            flexWrap: 'wrap',
         },
     });
 
-    const navigate = (provider: string) => () => {
-        HapticFeedback(HapticForces.Light);
-        navigation.navigate(Routes.WindesheimTechRadarContent, {
-            page: provider,
-        });
-    };
-
     useEffect(() => {
         let resultItems = [...techProviderItems];
         if (!limit || limit < 1) {
@@ -97,37 +52,18 @@ export const TechProviders = ({ limit }: { limit?: number }) => {
                 <TextTranslated style={styles.heading} text="Tech Providers" />
             )}
 
-            <ScrollView style={styles.container}>
+            <View style={styles.container}>
                 {displayItems.map((provider) => (
-                    <Pressable
-                        style={styles.button}
-                        onPress={navigate(provider.slug)}
-                        key={provider.slug}
-                        testID={`tech-provider-${provider.slug}-button`}
-                    >
-                        {Platform.OS !== 'web' ? (
-                            <provider.logo
-                                width="24"
-                                height="24"
-                                fill={colors.text}
-                            />
-                        ) : null}
-                        <Text
-                            testID="tech-provider-text"
-                            style={styles.itemText}
-                        >
-                            {provider.name}
-                        </Text>
-                        {/* at the end of the button place an arrow */}
-                        <FontAwesome5Icon
-                            name="arrow-right"
-                            size={24}
-                            color={colors.text}
-                            style={styles.navButton}
+                    <View key={provider.slug}>
+                        <TechProviderCard
+                            name={provider.name}
+                            // @ts-ignore
+                            techProviderImage={provider.logo}
+                            techProviderSlug={provider.slug}
                         />
-                    </Pressable>
+                    </View>
                 ))}
-            </ScrollView>
+            </View>
         </View>
     );
 };