Merge pull request #413 from equinor/feature/export-application-icons

iconOnly prop for ApplicationIcon components

package.json

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

src/components/Icons/ApplicationIcon/Acquire.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 
-import { SvgIconProps } from '../index';
+import { AppIconProps } from '../index';
 import ApplicationIconBase, { ShapeProps } from './ApplicationIconBase';
 import { acquire } from './ApplicationIconCollection';
 
@@ -17,8 +17,15 @@ const shapes: ShapeProps[] = [
   },
 ];
 
-const Acquire: FC<SvgIconProps> = ({ size }) => {
-  return <ApplicationIconBase size={size} iconData={acquire} shapes={shapes} />;
+const Acquire: FC<AppIconProps> = ({ size, iconOnly }) => {
+  return (
+    <ApplicationIconBase
+      size={size}
+      iconData={acquire}
+      iconOnly={iconOnly}
+      shapes={shapes}
+    />
+  );
 };
 
 export default Acquire;

src/components/Icons/ApplicationIcon/ApplicationIcon.test.tsx

@@ -118,3 +118,18 @@ test("Renders fallback when name isn't found", () => {
     fallback.svgPathData
   );
 });
+
+test('Renders without shapes when iconOnly=true when single icon', async () => {
+  const { rerender } = render(<ApplicationIcon name="acquire" iconOnly />);
+
+  for (const name of nameOptions) {
+    rerender(<ApplicationIcon name={name} iconOnly />);
+    expect(screen.queryAllByTestId('shape').length).toBe(0);
+  }
+});
+
+test('Renders equinor logo as fallback when iconOnly=true', () => {
+  render(<ApplicationIcon name="hei" iconOnly />);
+
+  expect(screen.getByTestId('logo')).toBeInTheDocument();
+});

src/components/Icons/ApplicationIcon/ApplicationIcon.tsx

@@ -1,14 +1,14 @@
 import { FC, forwardRef } from 'react';
 
-import { SvgIconProps } from '../index';
+import { AppIconProps } from '../index';
 import Acquire from './Acquire';
 import Bravos from './Bravos';
 import Dasha from './Dasha';
-import DepthConversion from './DepthConversion';
 import Fallback from './Fallback';
 import FourDInsight from './FourDInsight';
 import InPress from './InPress';
 import LoggingQualification from './LoggingQualification';
+import Orca from './Orca';
 import Portal from './Portal';
 import Pwex from './Pwex';
 import Recap from './Recap';
@@ -25,16 +25,16 @@ export type ApplicationName =
   | 'inpress'
   | 'bravos';
 
-interface IApplicationIconData {
+type ApplicationIconData = {
   appName: string;
-  component: FC<SvgIconProps>;
-}
-const apps: IApplicationIconData[] = [
+  component: FC<AppIconProps>;
+};
+const apps: ApplicationIconData[] = [
   { appName: 'portal', component: Portal },
   { appName: 'acquire', component: Acquire },
   { appName: '4dinsight', component: FourDInsight },
   { appName: 'dasha', component: Dasha },
-  { appName: 'orca', component: DepthConversion },
+  { appName: 'orca', component: Orca },
   { appName: 'logging-qualification', component: LoggingQualification },
   { appName: 'recap', component: Recap },
   { appName: 'pwex', component: Pwex },
@@ -44,15 +44,17 @@ const apps: IApplicationIconData[] = [
 
 export interface ApplicationIconProps {
   name: ApplicationName | string;
-  size?: 16 | 18 | 24 | 32 | 40 | 48;
+  size?: 16 | 18 | 24 | 32 | 40 | 48 | number;
+  iconOnly?: boolean;
 }
 
 const ApplicationIcon = forwardRef<HTMLDivElement, ApplicationIconProps>(
-  ({ name, size = 48 }, ref) => {
+  ({ name, size = 48, iconOnly = false }, ref) => {
     const appData = apps.find((app) => app.appName === name.toLowerCase());
 
-    if (appData === undefined) return <Fallback size={size} ref={ref} />;
-    return <appData.component size={size} />;
+    if (appData === undefined)
+      return <Fallback size={size} ref={ref} iconOnly={iconOnly} />;
+    return <appData.component size={size} iconOnly={iconOnly} />;
   }
 );
 

src/components/Icons/ApplicationIcon/ApplicationIconBase.tsx

@@ -4,7 +4,7 @@ import { Icon } from '@equinor/eds-core-react';
 import { IconData } from '@equinor/eds-icons';
 import { tokens } from '@equinor/eds-tokens';
 
-import { SvgIconProps } from '../index';
+import { AppIconProps } from '../index';
 import { IconDataWithColor } from './ApplicationIconCollection';
 
 import styled from 'styled-components';
@@ -13,6 +13,7 @@ const { colors, elevation } = tokens;
 
 interface ContainerProps {
   $size: number;
+  $iconOnly: boolean;
 }
 
 const Container = styled.div<ContainerProps>`
@@ -21,7 +22,7 @@ const Container = styled.div<ContainerProps>`
   justify-content: center;
   align-items: center;
   border-radius: 15%;
-  background: #004f55;
+  background: ${({ $iconOnly }) => ($iconOnly ? 'transparent' : '#004f55')};
   width: ${({ $size }) => `${$size}px`};
   height: ${({ $size }) => `${$size}px`};
   z-index: 100;
@@ -79,39 +80,63 @@ const Shape = styled.div<ShapeElementProps>`
   pointer-events: none;
 `;
 
-interface ApplicationIconBaseProps extends SvgIconProps {
+interface ApplicationIconBaseProps extends AppIconProps {
   iconData: IconData | IconDataWithColor[];
   shapes: ShapeProps[];
+  iconOnly?: 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, iconData, shapes }, ref) => (
-  <Container ref={ref} $size={size}>
-    {Array.isArray(iconData) ? (
-      iconData.map((icon, index) => (
-        <Icon
-          key={`icon-${index}`}
-          data={icon}
-          size={size}
-          color={icon.color}
+>(({ size = 48 as any, iconData, shapes, iconOnly = false }, ref) => {
+  if (iconOnly) {
+    return (
+      <Container ref={ref} $size={size} $iconOnly={iconOnly}>
+        {Array.isArray(iconData) ? (
+          iconData.map((icon, index) => (
+            <Icon
+              key={`icon-${index}`}
+              data={icon}
+              size={size}
+              color={icon.color}
+            />
+          ))
+        ) : (
+          <Icon data={iconData} size={size} color="#ffffff" />
+        )}
+      </Container>
+    );
+  }
+  return (
+    <Container ref={ref} $size={size} $iconOnly={iconOnly}>
+      {Array.isArray(iconData) ? (
+        iconData.map((icon, index) => (
+          <Icon
+            key={`icon-${index}`}
+            data={icon}
+            size={size}
+            color={icon.color}
+          />
+        ))
+      ) : (
+        <Icon data={iconData} size={size} color="#ffffff" />
+      )}
+      {shapes.map((shape, index) => (
+        <Shape
+          key={`shape-${index}`}
+          data-testid="shape"
+          $index={index}
+          $top={shape.top}
+          $left={shape.left}
+          $rotation={shape.rotation}
         />
-      ))
-    ) : (
-      <Icon data={iconData} size={size} color="#ffffff" />
-    )}
-    {shapes.map((shape, index) => (
-      <Shape
-        key={`shape-${index}`}
-        $index={index}
-        $top={shape.top}
-        $left={shape.left}
-        $rotation={shape.rotation}
-      />
-    ))}
-  </Container>
-));
+      ))}
+    </Container>
+  );
+});
 
 ApplicationIconBase.displayName = 'ApplicationIconBase';
 

src/components/Icons/ApplicationIcon/Bravos.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 
-import { SvgIconProps } from '../index';
+import { AppIconProps } from '../index';
 import ApplicationIconBase, { ShapeProps } from './ApplicationIconBase';
 import { bravos } from './ApplicationIconCollection';
 
@@ -17,8 +17,15 @@ const shapes: ShapeProps[] = [
   },
 ];
 
-const Bravos: FC<SvgIconProps> = ({ size }) => {
-  return <ApplicationIconBase size={size} iconData={bravos} shapes={shapes} />;
+const Bravos: FC<AppIconProps> = ({ size, iconOnly }) => {
+  return (
+    <ApplicationIconBase
+      size={size}
+      iconData={bravos}
+      iconOnly={iconOnly}
+      shapes={shapes}
+    />
+  );
 };
 
 export default Bravos;

src/components/Icons/ApplicationIcon/Dasha.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { SvgIconProps } from '../index';
+import { AppIconProps } from '../index';
 import ApplicationIconBase, { ShapeProps } from './ApplicationIconBase';
 import { dasha } from './ApplicationIconCollection';
 
@@ -17,9 +17,17 @@ const shapes: ShapeProps[] = [
   },
 ];
 
-const Dasha = forwardRef<HTMLDivElement, SvgIconProps>(({ size }, ref) => (
-  <ApplicationIconBase size={size} iconData={dasha} shapes={shapes} ref={ref} />
-));
+const Dasha = forwardRef<HTMLDivElement, AppIconProps>(
+  ({ size, iconOnly }, ref) => (
+    <ApplicationIconBase
+      size={size}
+      iconData={dasha}
+      shapes={shapes}
+      iconOnly={iconOnly}
+      ref={ref}
+    />
+  )
+);
 
 Dasha.displayName = 'Dasha';
 

src/components/Icons/ApplicationIcon/Fallback.tsx

@@ -1,6 +1,7 @@
 import { forwardRef } from 'react';
 
-import { SvgIconProps } from '../index';
+import EquinorLogo from '../EquinorLogo';
+import { AppIconProps } from '../index';
 import ApplicationIconBase, { ShapeProps } from './ApplicationIconBase';
 import { fallback } from './ApplicationIconCollection';
 
@@ -17,14 +18,21 @@ const shapes: ShapeProps[] = [
   },
 ];
 
-const Fallback = forwardRef<HTMLDivElement, SvgIconProps>(({ size }, ref) => (
-  <ApplicationIconBase
-    ref={ref}
-    size={size}
-    iconData={fallback}
-    shapes={shapes}
-  />
-));
+const Fallback = forwardRef<HTMLDivElement, AppIconProps>(
+  ({ size, iconOnly }, ref) => {
+    if (iconOnly) {
+      return <EquinorLogo size={size as any} color="white" />;
+    }
+    return (
+      <ApplicationIconBase
+        ref={ref}
+        size={size}
+        iconData={fallback}
+        shapes={shapes}
+      />
+    );
+  }
+);
 
 Fallback.displayName = 'Fallback';
 

src/components/Icons/ApplicationIcon/FourDInsight.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { SvgIconProps } from '../index';
+import { AppIconProps } from '../index';
 import ApplicationIconBase, { ShapeProps } from './ApplicationIconBase';
 import { fourDInsight } from './ApplicationIconCollection';
 
@@ -17,12 +17,13 @@ const shapes: ShapeProps[] = [
   },
 ];
 
-const FourDInsight = forwardRef<HTMLDivElement, SvgIconProps>(
-  ({ size }, ref) => (
+const FourDInsight = forwardRef<HTMLDivElement, AppIconProps>(
+  ({ size, iconOnly }, ref) => (
     <ApplicationIconBase
       ref={ref}
       size={size}
       iconData={fourDInsight}
+      iconOnly={iconOnly}
       shapes={shapes}
     />
   )

src/components/Icons/ApplicationIcon/InPress.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { SvgIconProps } from '../index';
+import { AppIconProps } from '../index';
 import ApplicationIconBase, { ShapeProps } from './ApplicationIconBase';
 import { inPress } from './ApplicationIconCollection';
 
@@ -17,14 +17,17 @@ const shapes: ShapeProps[] = [
   },
 ];
 
-const InPress = forwardRef<HTMLDivElement, SvgIconProps>(({ size }, ref) => (
-  <ApplicationIconBase
-    ref={ref}
-    size={size}
-    iconData={inPress}
-    shapes={shapes}
-  />
-));
+const InPress = forwardRef<HTMLDivElement, AppIconProps>(
+  ({ size, iconOnly }, ref) => (
+    <ApplicationIconBase
+      ref={ref}
+      size={size}
+      iconData={inPress}
+      iconOnly={iconOnly}
+      shapes={shapes}
+    />
+  )
+);
 
 InPress.displayName = 'InPress';