Merge pull request #685 from equinor/feat/recap-app-icon

Feat/recap app icon
equinor · Aug 9, 2024 · b7dd17d · b7dd17d
2 parents 015ab45 + ce0e145
commit b7dd17d
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 86 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@equinor/amplify-component-lib",
-  "version": "8.4.5",
+  "version": "8.4.6",
   "description": "Frontend Typescript components for the Amplify team",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/src/molecules/ApplicationIcon/ApplicationIcon.constants.tsx b/src/molecules/ApplicationIcon/ApplicationIcon.constants.tsx
@@ -8,6 +8,7 @@ export const APP_ICONS = [
   'orca',
   'acquire',
   'pwex',
+  'recap',
   'ltg',
   'inpress',
   'equinor',

diff --git a/src/molecules/ApplicationIcon/ApplicationIcon.tsx b/src/molecules/ApplicationIcon/ApplicationIcon.tsx
@@ -14,22 +14,24 @@ import {
   orca,
   premo,
   pwex,
+  recap,
 } from './ApplicationIconData/ApplicationIconCollection';
 import { AllowedColors } from './ApplicationIcon.utils';
 import { ApplicationIconBase } from './ApplicationIconBase';
 
 export type ApplicationName =
   | 'amplify'
-  | 'embark'
   | 'bravos'
-  | 'inpress'
+  | 'embark'
   | 'premo'
+  | 'inpress'
   | 'dasha'
   | 'orca'
   | 'acquire'
   | 'pwex'
   | 'ltg'
-  | 'equinor';
+  | 'equinor'
+  | 'recap';
 
 interface ApplicationIconData {
   appName: string;
@@ -38,80 +40,88 @@ interface ApplicationIconData {
   color: AllowedColors;
 }
 
-const apps: ApplicationIconData[] = [
-  {
-    appName: 'amplify',
-    iconSvg: amplify.svgPathData,
-    rotationVariant: 1,
-    color: 'blue',
-  },
-  {
-    appName: 'bravos',
-    iconSvg: bravos.svgPathData,
-    rotationVariant: 2,
-    color: 'blue',
-  },
-  {
-    appName: 'embark',
-    iconSvg: embark.svgPathData,
-    rotationVariant: 2,
-    color: 'green',
-  },
-  {
-    appName: 'premo',
-    iconSvg: premo.svgPathData,
-    rotationVariant: 3,
-    color: 'purple',
-  },
-  {
-    appName: 'dasha',
-    iconSvg: dasha.svgPathData,
-    rotationVariant: 0,
-    color: 'red',
-  },
-  {
-    appName: 'acquire',
-    iconSvg: acquire.svgPathData,
-    rotationVariant: 1,
-    color: 'yellow',
-  },
-  {
-    appName: 'orca',
-    iconSvg: orca.svgPathData,
-    rotationVariant: 2,
-    color: 'magenta',
-  },
-  {
-    appName: 'pwex',
-    iconSvg: pwex.svgPathData,
-    rotationVariant: 3,
-    color: 'blue',
-  },
-  {
-    appName: 'ltg',
-    iconSvg: ltg.svgPathData,
-    rotationVariant: 0,
-    color: 'green',
-  },
+const apps: Record<ApplicationName | string, ApplicationIconData | undefined> =
   {
-    appName: 'inpress',
-    iconSvg: inpress.svgPathData,
-    rotationVariant: 1,
-    color: 'green',
-  },
-  {
-    appName: 'equinor',
-    iconSvg: equinor.svgPathData,
-    rotationVariant: 1,
-    color: 'purple',
-  },
-  {
-    appName: 'fallback',
-    iconSvg: fallback.svgPathData,
-    rotationVariant: 2,
-    color: 'blue',
-  },
-];
+    amplify: {
+      appName: 'amplify',
+      iconSvg: amplify.svgPathData,
+      rotationVariant: 1,
+      color: 'blue',
+    },
+    bravos: {
+      appName: 'bravos',
+      iconSvg: bravos.svgPathData,
+      rotationVariant: 2,
+      color: 'blue',
+    },
+    embark: {
+      appName: 'embark',
+      iconSvg: embark.svgPathData,
+      rotationVariant: 2,
+      color: 'green',
+    },
+    premo: {
+      appName: 'premo',
+      iconSvg: premo.svgPathData,
+      rotationVariant: 3,
+      color: 'purple',
+    },
+    dasha: {
+      appName: 'dasha',
+      iconSvg: dasha.svgPathData,
+      rotationVariant: 0,
+      color: 'red',
+    },
+    acquire: {
+      appName: 'acquire',
+      iconSvg: acquire.svgPathData,
+      rotationVariant: 1,
+      color: 'yellow',
+    },
+    orca: {
+      appName: 'orca',
+      iconSvg: orca.svgPathData,
+      rotationVariant: 2,
+      color: 'magenta',
+    },
+    pwex: {
+      appName: 'pwex',
+      iconSvg: pwex.svgPathData,
+      rotationVariant: 3,
+      color: 'blue',
+    },
+    ltg: {
+      appName: 'ltg',
+      iconSvg: ltg.svgPathData,
+      rotationVariant: 0,
+      color: 'green',
+    },
+    recap: {
+      appName: 'recap',
+      iconSvg: recap.svgPathData,
+      rotationVariant: 2,
+      color: 'red',
+    },
+    inpress: {
+      appName: 'inpress',
+      iconSvg: inpress.svgPathData,
+      rotationVariant: 1,
+      color: 'green',
+    },
+    equinor: {
+      appName: 'equinor',
+      iconSvg: equinor.svgPathData,
+      rotationVariant: 1,
+      color: 'purple',
+    },
+  };
+
+const FALLBACK_APP_ICON: ApplicationIconData = {
+  appName: 'fallback',
+  iconSvg: fallback.svgPathData,
+  rotationVariant: 2,
+  color: 'blue',
+} as const;
 
 export interface ApplicationIconProps {
   name: ApplicationName | string;
@@ -126,16 +136,11 @@ export const ApplicationIcon: FC<ApplicationIconProps> = ({
   animationState = 'none',
   iconOnly = false,
 }) => {
-  let appData = apps.find((app) => app.appName.includes(name.toLowerCase()));
+  let appData = apps[name];
 
   if (!appData) {
     // Set appData to the fallback icon data
-    appData = {
-      appName: 'fallback',
-      iconSvg: fallback.svgPathData,
-      rotationVariant: 1,
-      color: 'blue',
-    };
+    appData = FALLBACK_APP_ICON;
   }
 
   const { iconSvg } = appData;

diff --git a/src/molecules/ApplicationIcon/ApplicationIconData/ApplicationIconCollection.tsx b/src/molecules/ApplicationIcon/ApplicationIconData/ApplicationIconCollection.tsx
@@ -103,6 +103,14 @@ export const inpress: AppIconData = {
   ],
 };
 
+export const recap: AppIconData = {
+  name: 'inpress',
+  prefix: 'amplify',
+  svgPathData: [
+    'M336.629 68.8054C349.383 80.1431 350.532 99.6741 339.195 112.429L151.3 323.81L45.8054 205.129C34.4676 192.374 35.6165 172.843 48.3715 161.505C61.1264 150.167 80.6574 151.316 91.9952 164.071L151.3 230.789L293.005 71.3715C304.343 58.6165 323.874 57.4676 336.629 68.8054Z',
+  ],
+};
+
 export const equinor: AppIconData = {
   name: 'equinor',
   prefix: 'amplify',