Toolbar Refactor

src/view/components/microbit/__snapshots__/Microbit.spec.tsx.snap

@@ -2781,9 +2781,9 @@ Array [
           onMouseLeave={[Function]}
         >
           <button
-            aria-label="toolbar temperature-sensor"
+            aria-label="toolbar microbit-temperature-sensor"
             className="toolbar-button button"
-            id="toolbar-temperature-sensor-button"
+            id="toolbar-microbit-temperature-sensor-button"
             onClick={[Function]}
             role="button"
             style={
@@ -2848,9 +2848,9 @@ Array [
           onMouseLeave={[Function]}
         >
           <button
-            aria-label="toolbar light-sensor"
+            aria-label="toolbar microbit-light-sensor"
             className="toolbar-button button"
-            id="toolbar-light-sensor-button"
+            id="toolbar-microbit-light-sensor-button"
             onClick={[Function]}
             role="button"
             style={

src/view/components/toolbar/GenericSliderComponent.tsx

@@ -13,7 +13,7 @@ interface IProps {
 }
 export const GenericSliderComponent: React.FC<IProps> = props => {
     return (
-        <div className="GenericSliderComponent">
+        <div className="generic-slider-component">
             {props.axisProperties.sliderProps.map(
                 (sliderProperties: ISliderProps, index: number) => {
                     return (

src/view/components/toolbar/motion/Gesture.tsx → src/view/components/toolbar/Gesture.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
-import { CONSTANTS } from "../../../constants";
-import { Dropdown } from "../../Dropdown";
-import SensorButton from "../SensorButton";
+import { CONSTANTS } from "../../constants";
+import { Dropdown } from "../Dropdown";
+import SensorButton from "./SensorButton";
 
 const GESTURE_BUTTON_MESSAGE = "Send Gesture";
 interface IProps {

src/view/components/toolbar/InputSlider.tsx

@@ -22,7 +22,7 @@ class InputSlider extends React.Component<ISliderProps, any, any> {
     render() {
         const isInputDisabled = this.context === VIEW_STATE.PAUSE;
         return (
-            <div className="inputSlider">
+            <div className="input-slider">
                 <span>{this.props.axisLabel}</span>
                 <input
                     type="text"

src/view/components/toolbar/SensorModalUtils.tsx

@@ -3,13 +3,9 @@
 import * as React from "react";
 import { SENSOR_LIST } from "../../constants";
 import { ARROW_RIGHT_SVG } from "../../svgs/arrow_right_svg";
-import { TAG_INPUT_SVG } from "../../svgs/tag_input_svg";
-import { TAG_OUTPUT_SVG } from "../../svgs/tag_output_svg";
 import * as CLUE_MODAL from "./clue/ClueModalContent";
-import LightSensorBar from "./LightSensorBar";
+import * as CPX_MODAL from "./cpx/CpxModalContent";
 import * as MICROBIT_MODAL from "./microbit/MicrobitModalContent";
-import MotionSensorBar from "./motion/MotionSensorBar";
-import TemperatureSensorBar from "./TemperatureSensorBar";
 
 export const TRY_IT_MAKE_CODE = (
     <div className="link-parent">
@@ -65,8 +61,8 @@ export const CPX_TOOLBAR_ICON_ID = {
 };
 
 export const MICROBIT_TOOLBAR_ICON_ID = {
-    TEMPERATURE: "toolbar-temperature-sensor",
-    LIGHT: "toolbar-light-sensor",
+    TEMPERATURE: "toolbar-microbit-temperature-sensor",
+    LIGHT: "toolbar-microbit-light-sensor",
     ACCELEROMETER: "toolbar-accelerometer-sensor",
     LEDS: "toolbar-microbit-led",
     PUSH_BUTTON: "toolbar-microbit-a-b-push",
@@ -115,200 +111,24 @@ export const DEFAULT_MODAL_CONTENT: IModalContent = {
     id: "none",
 };
 
-export const GPIO_MODAL_CONTENT = (
-    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
-    sensorValues: { [key: string]: number }
-): IModalContent => {
-    return {
-        descriptionTitle: "toolbar-gpio.title",
-        tagInput: TAG_INPUT_SVG,
-        tagOutput: TAG_OUTPUT_SVG,
-        descriptionText: "toolbar-gpio.description",
-        tryItDescription: "toolbar-gpio.tryItDescription",
-        components: undefined,
-        id: "GPIO",
-    };
-};
-
-export const IR_MODAL_CONTENT = (
-    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
-    sensorValues: { [key: string]: number }
-): IModalContent => {
-    return {
-        descriptionTitle: "toolbar-ir-sensor.title",
-        tagInput: TAG_INPUT_SVG,
-        tagOutput: TAG_OUTPUT_SVG,
-        descriptionText: "toolbar-ir-sensor.description",
-        tryItDescription: "toolbar-ir-sensor.tryItDescription",
-        components: [TRY_IT_MAKE_CODE, FEATURE_REQUEST_ON_GITHUB],
-        id: "IR",
-    };
-};
-export const LIGHT_MODAL_CONTENT = (
-    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
-    sensorValues: { [key: string]: number }
-): IModalContent => {
-    return {
-        descriptionTitle: "toolbar-light-sensor.title",
-        tagInput: TAG_INPUT_SVG,
-        tagOutput: undefined,
-        descriptionText: "toolbar-light-sensor.description",
-        tryItDescription: "toolbar-light-sensor.tryItDescription",
-        components: [
-            <LightSensorBar
-                onUpdateValue={onUpdateValue}
-                value={sensorValues[SENSOR_LIST.LIGHT]}
-            />,
-        ],
-        id: "light_sensor",
-    };
-};
-export const MOTION_MODAL_CONTENT = (
-    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
-    sensorValues: { [key: string]: number }
-): IModalContent => {
-    const motionSensorValues = {
-        X: sensorValues[SENSOR_LIST.MOTION_X],
-        Y: sensorValues[SENSOR_LIST.MOTION_Y],
-        Z: sensorValues[SENSOR_LIST.MOTION_Z],
-    };
-    return {
-        descriptionTitle: "toolbar-motion-sensor.title",
-        tagInput: TAG_INPUT_SVG,
-        tagOutput: undefined,
-        descriptionText: "toolbar-motion-sensor.description",
-        tryItDescription: "toolbar-motion-sensor.tryItDescription",
-        components: [
-            <MotionSensorBar
-                onUpdateValue={onUpdateValue}
-                axisValues={motionSensorValues}
-            />,
-            TRY_IT_MAKE_CODE,
-            FEATURE_REQUEST_ON_GITHUB,
-        ],
-        id: "motion_sensor",
-    };
-};
-export const NEOP_MODAL_CONTENT = (
-    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
-    sensorValues: { [key: string]: number }
-): IModalContent => {
-    return {
-        descriptionTitle: "toolbar-neo-pixels.title",
-        tagInput: undefined,
-        tagOutput: TAG_OUTPUT_SVG,
-        descriptionText: "toolbar-neo-pixels.description",
-        tryItDescription: "toolbar-neo-pixels.tryItDescription",
-        components: undefined,
-        id: "neon_pixel",
-    };
-};
-export const PUSHB_MODAL_CONTENT = (
-    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
-    sensorValues: { [key: string]: number }
-): IModalContent => {
-    return {
-        descriptionTitle: "toolbar-a-b-push.title",
-        tagInput: TAG_INPUT_SVG,
-        tagOutput: undefined,
-        descriptionText: "toolbar-a-b-push.description",
-        tryItDescription: "toolbar-a-b-push.tryItDescription",
-        components: undefined,
-        id: "push_btn",
-    };
-};
-export const RED_LED_MODAL_CONTENT = (
-    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
-    sensorValues: { [key: string]: number }
-): IModalContent => {
-    return {
-        descriptionTitle: "toolbar-red-led.title",
-        tagInput: undefined,
-        tagOutput: TAG_OUTPUT_SVG,
-        descriptionText: "toolbar-red-led.description",
-        tryItDescription: "toolbar-red-led.tryItDescription",
-        components: undefined,
-        id: "red_LED",
-    };
-};
-export const SOUND_MODAL_CONTENT = (
-    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
-    sensorValues: { [key: string]: number }
-): IModalContent => {
-    return {
-        descriptionTitle: "toolbar-sound-sensor.title",
-        tagInput: TAG_INPUT_SVG,
-        tagOutput: undefined,
-        descriptionText: "toolbar-sound-sensor.description",
-        tryItDescription: "toolbar-sound-sensor.tryItDescription",
-        components: [TRY_IT_MAKE_CODE, FEATURE_REQUEST_ON_GITHUB],
-        id: "sound_sensor",
-    };
-};
-export const SWITCH_MODAL_CONTENT = (
-    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
-    sensorValues: { [key: string]: number }
-): IModalContent => {
-    return {
-        descriptionTitle: "toolbar-slider-switch.title",
-        tagInput: TAG_INPUT_SVG,
-        tagOutput: undefined,
-        descriptionText: "toolbar-slider-switch.description",
-        tryItDescription: "toolbar-slider-switch.tryItDescription",
-        components: undefined,
-        id: "slider_switch",
-    };
-};
-export const SPEAKER_MODAL_CONTENT = (
-    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
-    sensorValues: { [key: string]: number }
-): IModalContent => {
-    return {
-        descriptionTitle: "toolbar-speaker.title",
-        tagInput: undefined,
-        tagOutput: TAG_OUTPUT_SVG,
-        descriptionText: "toolbar-speaker.description",
-        tryItDescription: "toolbar-speaker.tryItDescription",
-        components: [FEATURE_REQUEST_ON_GITHUB],
-        id: "speaker",
-    };
-};
-export const TEMPERATURE_MODAL_CONTENT = (
-    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
-    sensorValues: { [key: string]: number }
-): IModalContent => {
-    return {
-        components: [
-            <TemperatureSensorBar
-                onUpdateSensor={onUpdateValue}
-                value={sensorValues[SENSOR_LIST.TEMPERATURE]}
-            />,
-        ],
-        descriptionText: "toolbar-temperature-sensor.description",
-        descriptionTitle: "toolbar-temperature-sensor.title",
-        id: "temperature",
-        tagInput: TAG_INPUT_SVG,
-        tagOutput: undefined,
-        tryItDescription: "toolbar-temperature-sensor.tryItDescription",
-    };
-};
-
 export const LABEL_TO_MODAL_CONTENT_CONSTRUCTOR = new Map([
-    [CPX_TOOLBAR_ICON_ID.GPIO, GPIO_MODAL_CONTENT],
-    [CPX_TOOLBAR_ICON_ID.IR, IR_MODAL_CONTENT],
-    [CPX_TOOLBAR_ICON_ID.LIGHT, LIGHT_MODAL_CONTENT],
-    [CPX_TOOLBAR_ICON_ID.MOTION, MOTION_MODAL_CONTENT],
-    [CPX_TOOLBAR_ICON_ID.NEO_PIXEL, NEOP_MODAL_CONTENT],
-    [CPX_TOOLBAR_ICON_ID.PUSH_BUTTON, PUSHB_MODAL_CONTENT],
-    [CPX_TOOLBAR_ICON_ID.RED_LED, RED_LED_MODAL_CONTENT],
-    [CPX_TOOLBAR_ICON_ID.SOUND, SOUND_MODAL_CONTENT],
-    [CPX_TOOLBAR_ICON_ID.SPEAKER, SPEAKER_MODAL_CONTENT],
-    [CPX_TOOLBAR_ICON_ID.SWITCH, SWITCH_MODAL_CONTENT],
-    [CPX_TOOLBAR_ICON_ID.TEMPERATURE, TEMPERATURE_MODAL_CONTENT],
+    [CPX_TOOLBAR_ICON_ID.GPIO, CPX_MODAL.GPIO_CONTENT],
+    [CPX_TOOLBAR_ICON_ID.IR, CPX_MODAL.IR_CONTENT],
+    [CPX_TOOLBAR_ICON_ID.LIGHT, CPX_MODAL.LIGHT_CONTENT],
+    [CPX_TOOLBAR_ICON_ID.MOTION, CPX_MODAL.MOTION_CONTENT],
+    [CPX_TOOLBAR_ICON_ID.NEO_PIXEL, CPX_MODAL.NEOP_CONTENT],
+    [CPX_TOOLBAR_ICON_ID.PUSH_BUTTON, CPX_MODAL.PUSHB_CONTENT],
+    [CPX_TOOLBAR_ICON_ID.RED_LED, CPX_MODAL.RED_LED_CONTENT],
+    [CPX_TOOLBAR_ICON_ID.SOUND, CPX_MODAL.SOUND_CONTENT],
+    [CPX_TOOLBAR_ICON_ID.SPEAKER, CPX_MODAL.SPEAKER_CONTENT],
+    [CPX_TOOLBAR_ICON_ID.SWITCH, CPX_MODAL.SWITCH_CONTENT],
+    [CPX_TOOLBAR_ICON_ID.TEMPERATURE, CPX_MODAL.TEMPERATURE_CONTENT],
     [
         MICROBIT_TOOLBAR_ICON_ID.ACCELEROMETER,
         MICROBIT_MODAL.ACCELEROMETER_CONTENT,
     ],
+    [MICROBIT_TOOLBAR_ICON_ID.TEMPERATURE, MICROBIT_MODAL.TEMPERATURE_CONTENT],
+    [MICROBIT_TOOLBAR_ICON_ID.LIGHT, MICROBIT_MODAL.LIGHT_CONTENT],
     [MICROBIT_TOOLBAR_ICON_ID.COMPASS, MICROBIT_MODAL.COMPASS_CONTENT],
     [MICROBIT_TOOLBAR_ICON_ID.LEDS, MICROBIT_MODAL.LED_CONTENT],
     [MICROBIT_TOOLBAR_ICON_ID.PUSH_BUTTON, MICROBIT_MODAL.BUTTON_CONTENT],