Add BatteryStatusView component

package.json

@@ -5,6 +5,7 @@
     "dependencies": {
         "@equinor/eds-core-react": "^0.14.3",
         "@equinor/eds-icons": "^0.8.0",
+        "@equinor/eds-tokens": "^0.7.0",
         "@testing-library/jest-dom": "^5.15.1",
         "@testing-library/react": "^11.2.7",
         "@testing-library/user-event": "^12.8.3",

src/components/InfoButton/InfoButton.tsx

@@ -3,6 +3,8 @@ import { Button, Icon } from '@equinor/eds-core-react'
 import { Popover } from '@equinor/eds-core-react'
 import { useRef, useState } from 'react'
 
+import { tokens } from '@equinor/eds-tokens'
+
 Icon.add({ info_circle })
 
 interface InfoButtonProps {
@@ -19,7 +21,7 @@ const InfoButton = ({ title, content }: InfoButtonProps): JSX.Element => {
     return (
         <>
             <Button ref={anchorRef} variant="ghost_icon" onClick={toggleOpen}>
-                <Icon name="info_circle" size={24} color="primary" />
+                <Icon name="info_circle" size={24} color={tokens.colors.interactive.primary__resting.hex} />
             </Button>
             <Popover
                 id="click-popover"

src/components/RobotOverview/BatteryStatusView.tsx

@@ -0,0 +1,46 @@
+import {Battery, BatteryStatus} from 'models/battery'
+import { battery, battery_charging, battery_alert,  battery_unknown } from '@equinor/eds-icons'
+import styles from './robotOverview.module.css'
+import { tokens } from '@equinor/eds-tokens'
+
+import { Icon, Typography } from '@equinor/eds-core-react'
+
+Icon.add( {battery, battery_charging, battery_unknown, battery_alert} )
+
+export interface BatteryStatusViewProps {
+    battery: Battery
+}
+
+const BatteryStatusView = ({ battery } : BatteryStatusViewProps) : JSX.Element => {
+    let battery_icon
+    let icon_color : string = tokens.colors.interactive.primary__resting.hex
+    let battery_value : string = `${battery.value}%`
+
+
+
+    if (!(battery.value))
+        battery_value = "---%"
+
+    if (battery.status === BatteryStatus.Normal){
+        battery_icon = "battery"
+    }
+    else if (battery.status === BatteryStatus.Charging){
+        battery_icon = "battery_charging"
+    }
+    else if (battery.status === BatteryStatus.Critical){
+        battery_icon = "battery_alert"
+        icon_color = tokens.colors.interactive.danger__resting.hex
+    }
+    else if (battery.status === BatteryStatus.Error){
+        battery_icon = "battery_unknown"
+    }
+
+    return (
+        <div className={styles.batteryStatus}>
+            <Typography>{battery_value}</Typography>
+            <Icon name={battery_icon} color={icon_color} size={24} />
+        </div>
+    )
+}
+
+export default BatteryStatusView

src/components/RobotOverview/RobotOverview.tsx

@@ -1,11 +1,13 @@
 import { Icon, Typography, Table } from '@equinor/eds-core-react'
 import { info_circle } from '@equinor/eds-icons'
 import { Robot, RobotStatus } from 'models/robot'
+import { Battery } from 'models/battery'
 import RobotInfoButton from './RobotInfoButton'
 import styles from './robotOverview.module.css'
 import RobotOverviewHeader from './RobotOverviewHeader'
 
 import RobotStatusView from './RobotStatusView'
+import BatteryStatusView from './BatteryStatusView'
 
 Icon.add({ info_circle })
 
@@ -17,7 +19,7 @@ const RobotStatusRow = ({ robot }: RobotProps): JSX.Element => {
     const name: string = robot.robotInfo.name
     const type: string = robot.robotInfo.type
     const status: RobotStatus = robot.status
-    const battery: number = robot.battery
+    const battery: Battery = robot.battery
     return (
         <Table.Row className={styles.tableRowWrapper}>
             <Table.Cell className={styles.tableNameCell}>{name}</Table.Cell>
@@ -28,7 +30,7 @@ const RobotStatusRow = ({ robot }: RobotProps): JSX.Element => {
                 </div>
             </Table.Cell>
             <Table.Cell className={styles.tableBatteryCell} variant="numeric">
-                {battery}
+                <BatteryStatusView battery={battery}/>
             </Table.Cell>
             <Table.Cell className={styles.tableInfoCell}>
                 <RobotInfoButton robot={robot} />

src/components/RobotOverview/robotOverview.module.css

@@ -61,9 +61,11 @@
     overflow-x: hidden;
 }
 
-.tableInfoCell {
-    width: 10%;
-    overflow-x: hidden;
+.batteryStatus {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    margin-right: 20%;
 }
 
 .activeTableHeaderCell {

src/models/battery.ts

@@ -0,0 +1,15 @@
+export enum BatteryStatus {
+    Normal = 'Normal',
+    Critical = 'Critical',
+    Charging = 'Charging',
+    Error = 'Error',
+}
+
+export class Battery {
+    status: BatteryStatus = BatteryStatus.Normal
+    value?: number
+    constructor(status: BatteryStatus, value?: number) {
+        this.status = status
+        this.value = value
+    }
+}

src/models/robot.ts

@@ -1,3 +1,4 @@
+import { Battery, BatteryStatus } from './battery'
 import { Pose, defaultPose } from './pose'
 
 export enum RobotStatus {
@@ -13,16 +14,11 @@ export interface RobotInfo {
 
 export class Robot {
     robotInfo: RobotInfo
-    battery: number = 100
+    battery: Battery
     pose: Pose = defaultPose
     status: RobotStatus = RobotStatus.Available
 
-    constructor(
-        robotInfo: RobotInfo,
-        battery: number,
-        pose: Pose,
-        status: RobotStatus
-    ) {
+    constructor(robotInfo: RobotInfo, battery: Battery, pose: Pose, status: RobotStatus) {
         this.robotInfo = robotInfo
         this.battery = battery
         this.pose = pose
@@ -46,12 +42,12 @@ const turtleRobotInfo: RobotInfo = {
 }
 
 export const defaultRobots: { [name: string]: Robot } = {
-    taurob: new Robot(taurobRobotInfo, 100, defaultPose, RobotStatus.Available),
+    taurob: new Robot(taurobRobotInfo, new Battery(BatteryStatus.Charging, 100), defaultPose, RobotStatus.Available),
     exRobotics: new Robot(
         exRobotInfo,
-        59,
+        new Battery(BatteryStatus.Normal, 59),
         defaultPose,
         RobotStatus.MissionInProgress
     ),
-    turtle: new Robot(turtleRobotInfo, 0, defaultPose, RobotStatus.Offline),
+    turtle: new Robot(turtleRobotInfo, new Battery(BatteryStatus.Error), defaultPose, RobotStatus.Offline),
 }