equinor · mariush2 · Feb 2, 2024 · Feb 2, 2024 · Feb 2, 2024 · Feb 2, 2024
@@ -1,6 +1,6 @@
 {
   "name": "@equinor/amplify-components",
-  "version": "5.11.11",
+  "version": "5.11.12",
   "description": "Frontend Typescript components for the Amplify team",
   "main": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",

@@ -17,12 +17,17 @@ const shapes: ShapeProps[] = [
   },
 ];
 
-const Acquire: FC<AppIconProps> = ({ size, iconOnly }) => {
+const Acquire: FC<AppIconProps> = ({
+  size,
+  iconOnly = false,
+  withHover = true,
+}) => {
   return (
     <ApplicationIconBase
       size={size}
       iconData={acquire}
       iconOnly={iconOnly}
+      withHover={withHover}
       shapes={shapes}
     />
   );

@@ -13,7 +13,7 @@ export default {
         '4dinsight',
         'acquire',
         'dasha',
-        'depth-conversion',
+        'orca',
         'recap',
         'portal',
         'pwex',

@@ -1,21 +1,23 @@
 import { IconData } from '@equinor/eds-icons';
 
-import { render, screen } from '../../../tests/test-utils';
 import ApplicationIcon, { ApplicationIconProps } from './ApplicationIcon';
 import {
   acquire,
   bravos,
   dasha,
-  depthConversion,
   fallback,
   fourDInsight,
   IconDataWithColor,
   inPress,
   loggingQualification,
+  orca,
   portal,
   pwex,
   recap,
 } from './ApplicationIconCollection';
+import { render, screen, userEvent } from 'src/tests/test-utils';
+
+import { expect, test } from 'vitest';
 
 const nameOptions: ApplicationIconProps['name'][] = [
   'acquire',
@@ -43,7 +45,7 @@ const icons: IconsDict = {
   portal: portal,
   'logging-qualification': loggingQualification,
   pwex: pwex,
-  orca: depthConversion,
+  orca: orca,
   inpress: inPress,
   bravos: bravos,
 };
@@ -131,5 +133,27 @@ test('Renders without shapes when iconOnly=true when single icon', async () => {
 test('Renders equinor logo as fallback when iconOnly=true', () => {
   render(<ApplicationIcon name="hei" iconOnly />);
 
-  expect(screen.getByTestId('logo')).toBeInTheDocument();
+  const path = screen.getByTestId('eds-icon-path');
+
+  expect(path).toHaveAttribute('d', fallback.svgPathData);
+});
+
+test('Shows hover effects when withHover=true', async () => {
+  render(<ApplicationIcon name="acquire" withHover />);
+  const user = userEvent.setup();
+
+  const applicationIcon = screen.getByTestId('application-icon');
+
+  await user.hover(applicationIcon);
+  expect(applicationIcon).toHaveStyleRule('cursor', 'pointer');
+});
+
+test("Doesn't hover effects when withHover=false", async () => {
+  render(<ApplicationIcon name="acquire" withHover={false} />);
+  const user = userEvent.setup();
+
+  const applicationIcon = screen.getByTestId('application-icon');
+
+  await user.hover(applicationIcon);
+  expect(applicationIcon).not.toHaveStyleRule('cursor');
 });
@@ -46,15 +46,29 @@ export interface ApplicationIconProps {
   name: ApplicationName | string;
   size?: 16 | 18 | 24 | 32 | 40 | 48 | number;
   iconOnly?: boolean;
+  withHover?: boolean;
 }
 
 const ApplicationIcon = forwardRef<HTMLDivElement, ApplicationIconProps>(
-  ({ name, size = 48, iconOnly = false }, ref) => {
+  ({ name, size = 48, iconOnly = false, withHover = false }, ref) => {
     const appData = apps.find((app) => app.appName === name.toLowerCase());
 
     if (appData === undefined)
-      return <Fallback size={size} ref={ref} iconOnly={iconOnly} />;
-    return <appData.component size={size} iconOnly={iconOnly} />;
+      return (
+        <Fallback
+          size={size}
+          ref={ref}
+          iconOnly={iconOnly}
+          withHover={withHover}
+        />
+      );
+    return (
+      <appData.component
+        size={size}
+        iconOnly={iconOnly}
+        withHover={withHover}
+      />
+    );
   }
 );
 

@@ -14,6 +14,7 @@ const { colors, elevation } = tokens;
 interface ContainerProps {
   $size: number;
   $iconOnly: boolean;
+  $withHover: boolean;
 }
 
 const Container = styled.div<ContainerProps>`
@@ -36,6 +37,9 @@ const Container = styled.div<ContainerProps>`
     z-index: 300;
     transform: scale(0.8);
   }
+  ${({ $withHover }) =>
+    $withHover &&
+    `
   cursor: pointer;
   &:hover {
     > svg {
@@ -50,6 +54,7 @@ const Container = styled.div<ContainerProps>`
       left: -93%;
     }
   }
+  `};
 `;
 
 export interface ShapeProps {
@@ -83,18 +88,25 @@ const Shape = styled.div<ShapeElementProps>`
 interface ApplicationIconBaseProps extends AppIconProps {
   iconData: IconData | IconDataWithColor[];
   shapes: ShapeProps[];
-  iconOnly?: boolean;
+  iconOnly: boolean;
+  withHover: boolean;
 }
 
 // Icon component from EDS can take whatever size we want in numbers, so casting size to any here is safe
 // Size type is specified on the other higher level components
 const ApplicationIconBase = forwardRef<
   HTMLDivElement,
   ApplicationIconBaseProps
->(({ size = 48 as any, iconData, shapes, iconOnly = false }, ref) => {
+>(({ size = 48 as any, iconData, shapes, iconOnly, withHover }, ref) => {
   if (iconOnly) {
     return (
-      <Container ref={ref} $size={size} $iconOnly={iconOnly}>
+      <Container
+        data-testid="application-icon"
+        ref={ref}
+        $size={size}
+        $iconOnly={iconOnly}
+        $withHover={withHover}
+      >
         {Array.isArray(iconData) ? (
           iconData.map((icon, index) => (
             <Icon
@@ -111,7 +123,13 @@ const ApplicationIconBase = forwardRef<
     );
   }
   return (
-    <Container ref={ref} $size={size} $iconOnly={iconOnly}>
+    <Container
+      data-testid="application-icon"
+      ref={ref}
+      $size={size}
+      $iconOnly={iconOnly}
+      $withHover={withHover}
+    >
       {Array.isArray(iconData) ? (
         iconData.map((icon, index) => (
           <Icon

@@ -76,7 +76,7 @@ export const loggingQualification: IconData = {
     'M11.5014 4.17649C11.7919 3.94117 12.2075 3.94117 12.4981 4.17649L13.9996 5.39254L15.672 6.69748C15.8903 6.86784 16.0172 7.12985 16.0156 7.40678L15.9995 10.1624L16.017 16.595C16.0178 16.8709 15.8909 17.1317 15.6733 17.3015L13.9996 18.6075L12.4981 19.8235C12.2075 20.0588 11.7919 20.0588 11.5014 19.8235L9.99982 18.6075L8.32609 17.3015C8.10853 17.1317 7.98167 16.8709 7.98243 16.595L7.99991 10.1624L7.9838 7.40678C7.98218 7.12985 8.10913 6.86784 8.32746 6.69748L9.99982 5.39254L11.5014 4.17649Z',
 };
 
-export const depthConversion: IconData = {
+export const orca: IconData = {
   name: 'depthConversion',
   prefix: 'amplify',
   height: '24',
@@ -86,12 +86,12 @@ export const depthConversion: IconData = {
 };
 
 export const fallback: IconData = {
-  name: 'fallback',
+  name: 'equinor-fallback',
   prefix: 'amplify',
   height: '24',
   width: '24',
   svgPathData:
-    'M9.09562 6.77051C9.09562 7.73323 8.31518 8.51367 7.35246 8.51367C6.38973 8.51367 5.60929 7.73323 5.60929 6.77051C5.60929 5.80778 6.38973 5.02734 7.35246 5.02734C8.31518 5.02734 9.09562 5.80778 9.09562 6.77051ZM5.02734 12C5.02734 13.8493 5.76196 15.6228 7.06959 16.9304C8.37721 18.238 10.1507 18.9727 12 18.9727C13.8493 18.9727 15.6228 18.238 16.9304 16.9304C18.238 15.6228 18.9727 13.8493 18.9727 12H16.8809C16.8809 13.2945 16.3666 14.536 15.4513 15.4513C14.5359 16.3666 13.2945 16.8809 12 16.8809C10.7055 16.8809 9.46405 16.3666 8.54871 15.4513C7.63337 14.5359 7.11914 13.2945 7.11914 12L5.02734 12ZM16.6494 8.51367C17.6121 8.51367 18.3926 7.73323 18.3926 6.77051C18.3926 5.80778 17.6121 5.02734 16.6494 5.02734C15.6867 5.02734 14.9062 5.80778 14.9062 6.77051C14.9062 7.73323 15.6867 8.51367 16.6494 8.51367Z',
+    'M6.12478 6.82667L6.12491 11.661C6.12478 11.8043 6.19663 11.9366 6.32074 12.0081L10.5097 14.4214C10.6874 14.5238 10.914 14.3955 10.9141 14.1904V9.35619C10.9143 9.21289 10.8379 9.08051 10.7136 9.00893L6.52484 6.59578C6.347 6.4934 6.12504 6.62164 6.12478 6.82667ZM19.027 3.05178L12.9963 6.52619C12.8177 6.62911 12.7075 6.8196 12.7078 7.02583V13.9857C12.7081 14.2811 13.0343 14.4656 13.2901 14.3182L19.321 10.844C19.4996 10.741 19.6029 10.5505 19.6026 10.3443L19.6028 3.38438C19.6025 3.08897 19.283 2.90447 19.027 3.05178ZM10.7542 17.8545L9.07822 18.8201C9.02863 18.8488 8.99797 18.9017 8.99797 18.9591L8.99784 20.8931C8.99784 20.9753 9.08875 21.0265 9.15981 20.9856L10.8358 20.0201C10.8855 19.9915 10.9143 19.9385 10.9141 19.8813V17.947C10.9141 17.865 10.8252 17.8137 10.7542 17.8545ZM9.77743 16.0699L7.2675 14.6175C7.19311 14.5745 7.10139 14.5745 7.02701 14.6175L4.51708 16.0699C4.41057 16.1315 4.41057 16.2852 4.51708 16.3469L7.02701 17.799C7.10139 17.8422 7.19311 17.8422 7.2675 17.799L9.77743 16.3469C9.88394 16.2852 9.88394 16.1315 9.77743 16.0699ZM13.8181 16.3317L14.9334 16.9769C14.9994 17.0152 15.0808 17.0152 15.1469 16.9769L16.2621 16.3317C16.3567 16.2768 16.3567 16.1401 16.2621 16.0853L15.1469 15.4401C15.0808 15.4019 14.9994 15.4019 14.9334 15.4401L13.8181 16.0853C13.7235 16.1401 13.7235 16.2768 13.8181 16.3317ZM12.9211 17.8846L14.0374 18.5277C14.1035 18.5658 14.1443 18.6364 14.1443 18.7128L14.143 20.0011C14.1429 20.1104 14.0245 20.1788 13.9297 20.1243L12.8134 19.4812C12.7473 19.4431 12.7079 19.3722 12.7079 19.2961L12.7078 18.0078C12.7078 17.8986 12.8263 17.8299 12.9211 17.8846Z',
 };
 
 export const bravos: IconDataWithColor[] = [

@@ -17,12 +17,17 @@ const shapes: ShapeProps[] = [
   },
 ];
 
-const Bravos: FC<AppIconProps> = ({ size, iconOnly }) => {
+const Bravos: FC<AppIconProps> = ({
+  size,
+  iconOnly = false,
+  withHover = true,
+}) => {
   return (
     <ApplicationIconBase
       size={size}
       iconData={bravos}
       iconOnly={iconOnly}
+      withHover={withHover}
       shapes={shapes}
     />
   );

@@ -18,12 +18,13 @@ const shapes: ShapeProps[] = [
 ];
 
 const Dasha = forwardRef<HTMLDivElement, AppIconProps>(
-  ({ size, iconOnly }, ref) => (
+  ({ size, iconOnly = false, withHover = true }, ref) => (
     <ApplicationIconBase
       size={size}
       iconData={dasha}
       shapes={shapes}
       iconOnly={iconOnly}
+      withHover={withHover}
       ref={ref}
     />
   )

@@ -1,6 +1,5 @@
 import { forwardRef } from 'react';
 
-import EquinorLogo from '../EquinorLogo';
 import { AppIconProps } from '../index';
 import ApplicationIconBase, { ShapeProps } from './ApplicationIconBase';
 import { fallback } from './ApplicationIconCollection';
@@ -9,7 +8,7 @@ const shapes: ShapeProps[] = [
   {
     top: -16,
     left: -17,
-    rotation: 355,
+    rotation: 325,
   },
   {
     top: 26,
@@ -19,15 +18,14 @@ const shapes: ShapeProps[] = [
 ];
 
 const Fallback = forwardRef<HTMLDivElement, AppIconProps>(
-  ({ size, iconOnly }, ref) => {
-    if (iconOnly) {
-      return <EquinorLogo size={size as any} color="white" />;
-    }
+  ({ size, iconOnly = false, withHover = true }, ref) => {
     return (
       <ApplicationIconBase
         ref={ref}
         size={size}
         iconData={fallback}
+        iconOnly={iconOnly}
+        withHover={withHover}
         shapes={shapes}
       />
     );

@@ -18,12 +18,13 @@ const shapes: ShapeProps[] = [
 ];
 
 const FourDInsight = forwardRef<HTMLDivElement, AppIconProps>(
-  ({ size, iconOnly }, ref) => (
+  ({ size, iconOnly = false, withHover = true }, ref) => (
     <ApplicationIconBase
       ref={ref}
       size={size}
       iconData={fourDInsight}
       iconOnly={iconOnly}
+      withHover={withHover}
       shapes={shapes}
     />
   )

@@ -18,12 +18,13 @@ const shapes: ShapeProps[] = [
 ];
 
 const InPress = forwardRef<HTMLDivElement, AppIconProps>(
-  ({ size, iconOnly }, ref) => (
+  ({ size, iconOnly = false, withHover = true }, ref) => (
     <ApplicationIconBase
       ref={ref}
       size={size}
       iconData={inPress}
       iconOnly={iconOnly}
+      withHover={withHover}
       shapes={shapes}
     />
   )

@@ -18,12 +18,13 @@ const shapes: ShapeProps[] = [
 ];
 
 const LoggingQualification = forwardRef<HTMLDivElement, AppIconProps>(
-  ({ size, iconOnly }, ref) => (
+  ({ size, iconOnly = false, withHover = true }, ref) => (
     <ApplicationIconBase
       ref={ref}
       size={size}
       iconData={loggingQualification}
       iconOnly={iconOnly}
+      withHover={withHover}
       shapes={shapes}
     />
   )

@@ -2,7 +2,7 @@ import { forwardRef } from 'react';
 
 import { AppIconProps } from '../index';
 import ApplicationIconBase, { ShapeProps } from './ApplicationIconBase';
-import { depthConversion } from './ApplicationIconCollection';
+import { orca } from './ApplicationIconCollection';
 
 const shapes: ShapeProps[] = [
   {
@@ -18,12 +18,13 @@ const shapes: ShapeProps[] = [
 ];
 
 const Orca = forwardRef<HTMLDivElement, AppIconProps>(
-  ({ size, iconOnly }, ref) => (
+  ({ size, iconOnly = false, withHover = true }, ref) => (
     <ApplicationIconBase
       size={size}
       iconOnly={iconOnly}
-      iconData={depthConversion}
+      iconData={orca}
       shapes={shapes}
+      withHover={withHover}
       ref={ref}
     />
   )

@@ -18,12 +18,13 @@ const shapes: ShapeProps[] = [
 ];
 
 const Portal = forwardRef<HTMLDivElement, AppIconProps>(
-  ({ size, iconOnly }, ref) => (
+  ({ size, iconOnly = false, withHover = true }, ref) => (
     <ApplicationIconBase
       ref={ref}
       size={size}
       iconOnly={iconOnly}
       iconData={portal}
+      withHover={withHover}
       shapes={shapes}
     />
   )

@@ -17,11 +17,16 @@ const shapes: ShapeProps[] = [
   },
 ];
 
-const Pwex: FC<AppIconProps> = ({ size, iconOnly }) => (
+const Pwex: FC<AppIconProps> = ({
+  size,
+  iconOnly = false,
+  withHover = true,
+}) => (
   <ApplicationIconBase
     size={size}
     iconData={pwex}
     iconOnly={iconOnly}
+    withHover={withHover}
     shapes={shapes}
   />
 );