Add extra robot info button

src/components/InfoButton/InfoButton.tsx

@@ -0,0 +1,38 @@
+import { info_circle } from "@equinor/eds-icons";
+import { Button, Icon } from "@equinor/eds-core-react";
+import { Popover } from "@equinor/eds-core-react";
+import { useRef, useState } from "react";
+
+Icon.add({ info_circle });
+
+interface InfoButtonProps {
+  title: string;
+  content: JSX.Element;
+}
+
+const InfoButton = ({ title, content }: InfoButtonProps): JSX.Element => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const anchorRef = useRef<HTMLButtonElement>(null);
+
+  const closePopover = () => setIsOpen(false);
+  const toggleOpen = () => setIsOpen(!isOpen);
+  return (
+    <>
+      <Button ref={anchorRef} variant="ghost_icon" onClick={toggleOpen}>
+        <Icon name="info_circle" size={24} color="primary" />
+      </Button>
+      <Popover
+        id="click-popover"
+        aria-expanded={isOpen}
+        anchorEl={anchorRef.current}
+        onClose={closePopover}
+        open={isOpen}
+      >
+        <Popover.Title>{title}</Popover.Title>
+        <Popover.Content>{content}</Popover.Content>
+      </Popover>
+    </>
+  );
+};
+
+export default InfoButton;

src/components/RobotOverview/RobotInfoButton.tsx

@@ -0,0 +1,42 @@
+import { Typography } from "@equinor/eds-core-react";
+import { Pose } from "models/pose";
+import { Robot } from "models/robot";
+import InfoButton from "../InfoButton/InfoButton";
+import styles from "./robotOverview.module.css";
+
+interface RobotInfoButtonProps {
+  robot: Robot;
+}
+
+interface RobotPoseInfoProps {
+  pose: Pose;
+}
+
+const RobotPoseInfo = ({ pose }: RobotPoseInfoProps): JSX.Element => {
+  return (
+    <div className={styles.infoContentWrapper}>
+      <div className={styles.poseWrapper}>
+        <Typography variant="body_short_bold">Position:</Typography>
+        <div className={styles.poseItem}>
+          <Typography>X: {pose.position.x}</Typography>
+          <Typography>Y: {pose.position.x}</Typography>
+          <Typography>Z: {pose.position.x}</Typography>
+        </div>
+        <Typography variant="body_short_bold">Orientation:</Typography>
+        <div className={styles.poseItem}>
+          <Typography>X: {pose.orientation.x}</Typography>
+          <Typography>Y: {pose.orientation.y}</Typography>
+          <Typography>Z: {pose.orientation.z}</Typography>
+          <Typography>W: {pose.orientation.w}</Typography>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const RobotInfoButton = ({ robot }: RobotInfoButtonProps): JSX.Element => {
+  const content = <RobotPoseInfo pose={robot.pose} />;
+  return <InfoButton title="Robot Info" content={content}></InfoButton>;
+};
+
+export default RobotInfoButton;

src/components/RobotOverview/RobotOverview.tsx

@@ -1,6 +1,7 @@
 import { Icon, Typography, Table } from "@equinor/eds-core-react";
 import { info_circle } from "@equinor/eds-icons";
 import { Robot } from "../../models/robot";
+import RobotInfoButton from "./RobotInfoButton";
 import styles from "./robotOverview.module.css";
 import RobotOverviewHeader from "./RobotOverviewHeader";
 
@@ -23,8 +24,8 @@ const RobotStatus: React.FC<RobotProps> = ({ robot }: RobotProps) => {
       <Table.Cell className={styles.tableBatteryCell} variant="numeric">
         {battery}
       </Table.Cell>
-      <Table.Cell className={styles.tableInfoCell} variant="icon">
-        <Icon name="info_circle" size={24} color="primary" />
+      <Table.Cell className={styles.tableInfoCell}>
+        <RobotInfoButton robot={robot} />
       </Table.Cell>
     </Table.Row>
   );
@@ -46,9 +47,7 @@ const RobotOverview: React.FC<RobotOverviewProps> = ({
         <Typography variant="h2">Robot Overview</Typography>
       </Table.Caption>
       <RobotOverviewHeader />
-      <Table.Body className={styles.tableBodyWrapper}>
-        {rows}
-      </Table.Body>
+      <Table.Body className={styles.tableBodyWrapper}>{rows}</Table.Body>
     </Table>
   );
 };

src/components/RobotOverview/robotOverview.module.css

@@ -72,3 +72,19 @@
 .label {
   margin-right: 24px;
 }
+
+.poseItem {
+  margin-left: 12px;
+  margin-bottom: 12px;
+}
+
+.poseWrapper  {
+  margin: 12px;
+}
+
+.infoContentWrapper {
+  width: 90%;
+  max-height: 146px;
+  overflow-y: auto;
+  margin: 12px;
+}