CEM-2507_Chair Highlight

src/Containers/Chair/Chair.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styled, { css, useTheme } from 'styled-components';
 import { Eye, EyeSlash } from '@styled-icons/bootstrap';
 
@@ -70,6 +70,8 @@ export interface IChair {
         chairIndex: number,
         selectedIndex: number,
     ) => void;
+
+
 }
 
 /**
@@ -86,9 +88,21 @@ export const Chair: React.FC<IChair> = ({
     tableIndex = -1,
     chairIndex = -1,
     selectedIndex = -1,
+
+
     onChairClick,
     ...props
-}) => {
+}):React.ReactElement => {
+    /**
+     * Use useState to change state of isFocusedActive and highlite
+     * the chair.
+     */
+    const [isFocusedActive, setIsFocusedActive] = useState(false);
+
+    onChairClick =() => {
+        setIsFocusedActive(true)
+    }
+
     /**
      * Returns a JSX.Element for the Chair with RoundChair styles
      * @returns {JSX.Element}
@@ -101,6 +115,8 @@ export const Chair: React.FC<IChair> = ({
                 isSeated={isSeated}
                 tableUse={tableUse}
                 isVisible={isVisible}
+                tabIndex={0}
+                isFocusedActive={isFocusedActive}
             >
                 {getChairText()}
             </RoundChair>
@@ -110,7 +126,6 @@ export const Chair: React.FC<IChair> = ({
     /**
      * Returns a JSX.Element for the Chair with the correct styles based on position
      * @returns {JSX.Element}
-     *
      */
     const getPositionChair: getPositionChairType = () => (
         <div {...props}>
@@ -120,6 +135,8 @@ export const Chair: React.FC<IChair> = ({
                 position={position}
                 tableUse={tableUse}
                 isVisible={isVisible}
+                tabIndex={0}
+                isFocusedActive={isFocusedActive}
             >
                 {getChairText()}
             </RectangleChair>
@@ -183,18 +200,18 @@ export const Chair: React.FC<IChair> = ({
         onChairClick(tableIndex, chairIndex, selectedIndex);
     };
 
-    if (tableUse === 'TableForEditCanvas') {
-        return (
-            <ChairWrapperForClick
-                onClick={onHandleClick}
-                onKeyPress={onHandleClick}
-                role="button"
-                tabIndex={0}
-            >
-                {isRound ? getRoundChair() : getPositionChair()}
-            </ChairWrapperForClick>
-        );
-    }
+
+    return (
+        <ChairWrapperForClick
+            onClick={onHandleClick}
+            onKeyPress={onHandleClick}
+            role="button"
+            tabIndex={0}
+        >
+            {isRound ? getRoundChair() : getPositionChair()}
+        </ChairWrapperForClick>
+    );
+
 
     return isRound ? getRoundChair() : getPositionChair();
 };
@@ -399,6 +416,7 @@ interface IBaseChair {
     isSeated: boolean;
     tableUse: tableUseTypes;
     isVisible: boolean;
+    isFocusedActive: boolean;
 }
 
 const BaseChair = styled.div<IBaseChair>`
@@ -422,6 +440,10 @@ const RoundChair = styled(BaseChair)<Pick<IChair, 'relativeSize'>>`
     relativeSize * BASE_BORDER_WIDTH_FOR_ROUND_CHAIR
 }px solid black;`;
     }}
+
+    box-shadow: ${({ isFocusedActive
+                   }) => (isFocusedActive &&
+            '0 0 0 2px')};
 `;
 
 const RectangleChair = styled(BaseChair)<
@@ -434,6 +456,10 @@ const RectangleChair = styled(BaseChair)<
             left: VerticalChairStyle,
             right: VerticalChairStyle,
         }[position])};
+
+      box-shadow: ${({ isFocusedActive
+                     }) => (isFocusedActive &&
+              '0 0 0 2px')};
 `;
 
 const RectangleChairText = styled.div<