feat(web/input): description tooltip on fields

web/src/features/dev/debug/input.ts

@@ -8,7 +8,12 @@ export const debugInput = () => {
       data: {
         heading: 'Police locker',
         rows: [
-          { type: 'input', label: 'Locker number', placeholder: '420' },
+          {
+            type: 'input',
+            label: 'Locker number',
+            placeholder: '420',
+            description: 'Description that tells you what this input field does',
+          },
           { type: 'checkbox', label: 'Some checkbox' },
           { type: 'input', label: 'Locker PIN', password: true, icon: 'lock' },
           { type: 'checkbox', label: 'Some other checkbox', checked: true },
@@ -29,7 +34,13 @@ export const debugInput = () => {
             max: 10,
             icon: 'receipt',
           },
-          { type: 'slider', label: 'Slide bar', min: 10, max: 50, step: 2 },
+          {
+            type: 'slider',
+            label: 'Slide bar',
+            min: 10,
+            max: 50,
+            step: 2,
+          },
         ],
       },
     },

web/src/features/dialog/components/InfoTooltip.tsx

@@ -0,0 +1,23 @@
+import { Box, Tooltip } from '@chakra-ui/react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+const InfoTooltip: React.FC<{ description: string }> = ({ description }) => {
+  return (
+    <Tooltip label={description} placement="top" hasArrow arrowSize={4} maxW={220}>
+      <Box
+        borderRadius="full"
+        bg="whiteAlpha.200"
+        p={0.5}
+        w={18}
+        h={18}
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+      >
+        <FontAwesomeIcon icon="question" fixedWidth fontSize={10} />
+      </Box>
+    </Tooltip>
+  );
+};
+
+export default InfoTooltip;

web/src/features/dialog/components/Label.tsx

@@ -0,0 +1,13 @@
+import { HStack, Text } from '@chakra-ui/react';
+import InfoTooltip from './InfoTooltip';
+
+const Label: React.FC<{ label: string; description?: string }> = ({ label, description }) => {
+  return (
+    <HStack spacing={1}>
+      <Text>{label}</Text>
+      {description && <InfoTooltip description={description} />}
+    </HStack>
+  );
+};
+
+export default Label;

web/src/features/dialog/components/checkbox.tsx

@@ -1,6 +1,8 @@
-import { Box, Checkbox } from '@chakra-ui/react';
+import { Box, Checkbox, HStack, Text } from '@chakra-ui/react';
 import { useEffect } from 'react';
 import { ICheckbox } from '../../../interfaces/dialog';
+import InfoTooltip from './InfoTooltip';
+import Label from './Label';
 
 interface Props {
   row: ICheckbox;
@@ -20,7 +22,7 @@ const CheckboxField: React.FC<Props> = (props) => {
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => props.handleChange(e.target.checked, props.index)}
           defaultChecked={props.row.checked}
         >
-          {props.row.label}
+          <Label label={props.row.label} description={props.row.description} />
         </Checkbox>
       </Box>
     </>

web/src/features/dialog/components/input.tsx

@@ -1,7 +1,8 @@
-import { Box, InputGroup, InputLeftElement, InputRightElement, Text, Input } from '@chakra-ui/react';
+import { Box, InputGroup, InputLeftElement, InputRightElement, Input } from '@chakra-ui/react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useEffect } from 'react';
 import { IInput } from '../../../interfaces/dialog';
+import Label from './Label';
 
 interface Props {
   row: IInput;
@@ -19,7 +20,7 @@ const InputField: React.FC<Props> = (props) => {
   return (
     <>
       <Box mb={3} textAlign="left">
-        <Text>{props.row.label}</Text>
+        <Label label={props.row.label} description={props.row.description} />
         <InputGroup>
           {props.row.icon && (
             <InputLeftElement pointerEvents="none" children={<FontAwesomeIcon icon={props.row.icon} fixedWidth />} />

web/src/features/dialog/components/number.tsx

@@ -11,6 +11,7 @@ import {
 import { useEffect } from 'react';
 import { INumber } from '../../../interfaces/dialog';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Label from './Label';
 
 interface Props {
   row: INumber;
@@ -25,7 +26,7 @@ const NumberField: React.FC<Props> = (props) => {
 
   return (
     <Box mb={3}>
-      <Text>{props.row.label}</Text>
+      <Label label={props.row.label} description={props.row.description} />
       <NumberInput
         onChange={(val: string) => props.handleChange(+val, props.index)}
         defaultValue={props.row.default}

web/src/features/dialog/components/slider.tsx

@@ -1,6 +1,7 @@
 import { Box, Text, Slider, SliderTrack, SliderFilledTrack, SliderThumb, HStack, Tooltip } from '@chakra-ui/react';
 import { useEffect, useState } from 'react';
 import { ISlider } from '../../../interfaces/dialog';
+import Label from './Label';
 
 interface Props {
   row: ISlider;
@@ -18,7 +19,7 @@ const SliderField: React.FC<Props> = (props) => {
   return (
     <>
       <Box mb={3} key={`slider-${props.index}`}>
-        <Text>{props.row.label}</Text>
+        <Label label={props.row.label} description={props.row.description} />
         <Slider
           onChangeEnd={(val: number) => props.handleChange(val, props.index)}
           onChange={(val: number) => setSliderValue(val)}

web/src/interfaces/dialog.ts

@@ -8,6 +8,7 @@ export interface IInput {
   password?: boolean;
   icon?: IconProp;
   disabled?: boolean;
+  description?: string;
 }
 
 export interface ICheckbox {
@@ -15,6 +16,7 @@ export interface ICheckbox {
   label: string;
   checked?: boolean;
   disabled?: boolean;
+  description?: string;
 }
 
 export interface ISelect {
@@ -23,6 +25,7 @@ export interface ISelect {
   default?: string;
   options?: { value: string; label?: string }[];
   disabled?: boolean;
+  description?: string;
 }
 
 export interface INumber {
@@ -34,6 +37,7 @@ export interface INumber {
   min?: number;
   max?: number;
   disabled?: boolean;
+  description?: string;
 }
 
 export interface ISlider {
@@ -44,4 +48,5 @@ export interface ISlider {
   max?: number;
   step?: number;
   disabled?: boolean;
+  description?: string;
 }