106 change led usage of width and height props (#108)

* Added height prop and set style.height to use it

* Updated LED tests

Author: NatLeung96

src/ui/widgets/LED/led.test.tsx

@@ -82,6 +82,18 @@ describe("width property is used", (): void => {
     // so whatever is input has 5 subtracted from it, this makes it
     // look more like CS-Studio
     expect(renderedLed.props.style.width).toBe("5px");
+    expect(renderedLed.props.style.height).toBe("15px");
+  });
+});
+
+describe("height property is used", (): void => {
+  it("height changes the size of the LED", (): void => {
+    const renderedLed = renderLed({ ...DEFAULT_PROPS, height: 10 });
+
+    // Width in CS-Studio doesn't quite match width in the browser,
+    // so whatever is input has 5 subtracted from it, this makes it
+    // look more like CS-Studio
+    expect(renderedLed.props.style.width).toBe("15px");
     expect(renderedLed.props.style.height).toBe("5px");
   });
 });

src/ui/widgets/LED/led.tsx

@@ -19,6 +19,7 @@ import { WIDGET_DEFAULT_SIZES } from "../EmbeddedDisplay/bobParser";
  */
 export const LedProps = {
   width: FloatPropOpt,
+  height: FloatPropOpt,
   onColor: ColorPropOpt,
   offColor: ColorPropOpt,
   lineColor: ColorPropOpt,
@@ -41,6 +42,7 @@ export const LedComponent = (props: LedComponentProps): JSX.Element => {
     offColor = Color.fromRgba(60, 100, 60),
     lineColor = Color.fromRgba(50, 50, 50, 178),
     width = WIDGET_DEFAULT_SIZES["led"][0],
+    height = WIDGET_DEFAULT_SIZES["led"][1],
     alarmSensitive = false,
     bit = -1
   } = props;
@@ -64,7 +66,7 @@ export const LedComponent = (props: LedComponentProps): JSX.Element => {
   // make sizes similar to size in CS-Studio, five taken
   // away from default in css file too
   style.width = `${width - 5}px`;
-  style.height = `${width - 5}px`;
+  style.height = `${height - 5}px`;
 
   let className = classes.Led;
   if (alarmSensitive) {