✨ Created fallback version of app icon (#1197)

* ✨ Created fallback version of app icon

* Update src/molecules/ApplicationIcon/ApplicationIcon.utils.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* ✅ Created tests for fallback app icon

* refactor: Move application icon content to separate component

* refactor: Remove duplicate types

* test: Fixing tests

* test: Add test for name not found in application icon new

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: mariush2

.idea/vcs.xml

@@ -1,6 +1,10 @@
-import { Meta, StoryFn } from '@storybook/react-vite';
+import { faker } from '@faker-js/faker';
+import { Meta, StoryObj } from '@storybook/react-vite';
 
-import { ApplicationIcon, ApplicationIconProps } from './ApplicationIcon';
+import { ApplicationIcon } from './ApplicationIcon';
+import { VariantShowcase } from 'src/storybook/VariantShowcase';
+
+import { expect } from 'storybook/test';
 
 const meta: Meta<typeof ApplicationIcon> = {
   title: 'Molecules/ApplicationIcon',
@@ -40,6 +44,48 @@ const meta: Meta<typeof ApplicationIcon> = {
 
 export default meta;
 
-export const Example: StoryFn<ApplicationIconProps> = (args) => (
-  <ApplicationIcon {...args} />
-);
+type Story = StoryObj<typeof ApplicationIcon>;
+
+export const Default: Story = {};
+
+export const Fallback: Story = {
+  parameters: {
+    layout: 'centered',
+  },
+  render: (args) => (
+    <VariantShowcase
+      GenericComponent={ApplicationIcon}
+      otherProps={args}
+      rows={[
+        ...Array.from({ length: 5 })
+          .map(() => faker.book.title())
+          .map((name) => ({
+            label: name,
+            value: {
+              name,
+            },
+          })),
+      ]}
+    />
+  ),
+};
+
+export const TestFallback: Story = {
+  tags: ['test-only'],
+  args: {
+    name: 'some random app name',
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByText('SR')).toBeInTheDocument();
+  },
+};
+
+export const TestFallbackShort: Story = {
+  tags: ['test-only'],
+  args: {
+    name: 'some',
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByText('S')).toBeInTheDocument();
+  },
+};

src/molecules/ApplicationIcon/ApplicationIcon.stories.tsx

@@ -6,7 +6,6 @@ import {
   adca,
   bravos,
   dasha,
-  fallback,
   fluxMaps,
   forecastFormatter,
   fourDInsight,
@@ -132,17 +131,6 @@ test('Renders correct icon, even with wrong casing', () => {
   }
 });
 
-test("Renders fallback when name isn't found", () => {
-  render(
-    <ApplicationIcon name={'name not found' as ApplicationIconProps['name']} />
-  );
-
-  expect(screen.getByTestId('eds-icon-path')).toHaveAttribute(
-    'd',
-    fallback.svgPathData
-  );
-});
-
 test('Renders without shapes when iconOnly=true when single icon', () => {
   const { rerender } = render(<ApplicationIcon name="acquire" iconOnly />);
 
@@ -152,14 +140,6 @@ test('Renders without shapes when iconOnly=true when single icon', () => {
   }
 });
 
-test('Renders equinor logo as fallback when iconOnly=true', () => {
-  render(<ApplicationIcon name="hei" iconOnly />);
-
-  const path = screen.getByTestId('eds-icon-path');
-
-  expect(path).toHaveAttribute('d', fallback.svgPathData);
-});
-
 test('App icon with multiple icons renders correctly', () => {
   render(<ApplicationIcon name="bravos" />);
 

src/molecules/ApplicationIcon/ApplicationIcon.test.tsx

@@ -4,7 +4,7 @@ import { Acquire } from './Icons/Acquire';
 import { Adca } from './Icons/Adca';
 import { Bravos } from './Icons/Bravos';
 import { Dasha } from './Icons/Dasha';
-import { Fallback } from './Icons/Fallback';
+import { FluxMaps } from './Icons/FluxMaps';
 import { ForecastFormatter } from './Icons/ForecastFormatter';
 import { FourDInsight } from './Icons/FourDInsight';
 import { InPress } from './Icons/InPress';
@@ -18,7 +18,7 @@ import { Recap } from './Icons/Recap';
 import { Sam } from './Icons/Sam';
 import { SubsurfacePortal } from './Icons/SubsurfacePortal';
 import { AppIconProps } from './ApplicationIcon.types';
-import { FluxMaps } from 'src/molecules/ApplicationIcon/Icons/FluxMaps';
+import { Fallback } from './Fallback';
 
 export type ApplicationName =
   | 'adca'
@@ -100,6 +100,7 @@ export const ApplicationIcon = forwardRef<HTMLDivElement, ApplicationIconProps>(
           iconOnly={iconOnly}
           withHover={withHover}
           grayScale={grayScale}
+          name={name}
         />
       );
     return (

src/molecules/ApplicationIcon/ApplicationIcon.tsx

@@ -0,0 +1,94 @@
+import { ShapeProps } from 'src/molecules/ApplicationIcon/ApplicationIconBase/ApplicationIconBase';
+
+export function nameToAcronym(name: string): string {
+  const split = name.toUpperCase().split(' ');
+
+  if (split.length === 1) return name.toUpperCase()[0];
+
+  return `${split[0][0]}${split[1][0]}`;
+}
+
+export function nameToShapes(name: string) {
+  const availableShapes: ShapeProps[][] = [
+    [
+      {
+        top: -16,
+        left: -17,
+        rotation: 325,
+      },
+      {
+        top: 26,
+        left: 11,
+        rotation: 193,
+      },
+    ],
+    [
+      {
+        top: -31,
+        left: -17,
+        rotation: 343,
+      },
+      {
+        top: 42,
+        left: 32,
+        rotation: 182,
+      },
+    ],
+    [
+      {
+        top: -45,
+        left: -5,
+        rotation: 25,
+      },
+      {
+        top: 64,
+        left: -5,
+        rotation: 5,
+      },
+    ],
+    [
+      {
+        top: -16,
+        left: -31,
+        rotation: 339,
+      },
+      {
+        top: 52,
+        left: -5,
+        rotation: 220,
+      },
+    ],
+    [
+      {
+        top: -16,
+        left: -17,
+        rotation: 328,
+      },
+      {
+        top: 26,
+        left: 11,
+        rotation: 193,
+      },
+    ],
+    [
+      {
+        top: -25,
+        left: -20,
+        rotation: -5,
+      },
+      {
+        top: 12,
+        left: 45,
+        rotation: -70,
+      },
+    ],
+  ];
+
+  const index =
+    name
+      .split('')
+      .map((c) => c.charCodeAt(0))
+      .reduce((a, b) => a + b, 0) % availableShapes.length;
+
+  return availableShapes[index];
+}