MAT-5828 time field

Author: CeciliaLiu8

react/components/TimeField/TimeField.js

@@ -0,0 +1,101 @@
+import React from "react";
+import { TimePicker } from "@mui/x-date-pickers";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import InputLabel from "../InputLabel";
+import { kebabCase } from "lodash";
+import PropTypes from "prop-types";
+
+export const timeFieldStyle = {
+    width: "134px",
+    borderRadius: "3px",
+    height: 40,
+    border: "1px solid #B0B0B0",
+    marginTop: "8px",
+    "& .MuiOutlinedInput-notchedOutline": {
+        borderRadius: "3px",
+        "& legend": {
+            width: 0,
+        },
+    },
+    "& .MuiOutlinedInput-root": {
+        "&&": {
+            borderRadius: "3px",
+        },
+    },
+    "& .MuiInputBase-input": {
+        color: "#333333",
+        fontFamily: "Rubik",
+        fontSize: 14,
+        borderRadius: "3px",
+        padding: "9px",
+        Width: "170px",
+        "&::placeholder": {
+            opacity: 1,
+            color: "#717171",
+            fontFamily: "Rubik",
+            fontSize: 14,
+        },
+    },
+};
+
+const TimeField = ({
+    label,
+    value,
+    handleTimeChange,
+    disabled,
+    required,
+    error,
+}) => {
+    return (
+        <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <InputLabel
+                data-testid={`${kebabCase(label)}`}
+                style={{ marginBottom: 0, height: 16 }}
+                sx={[
+                    {
+                        backgroundColor: "transparent",
+                        textTransform: "none",
+                        height: 17,
+                        left: 0,
+                        right: 0,
+                        top: 0,
+                        fontFamily: "Rubik",
+                        fontStyle: "normal",
+                        fontWeight: 500,
+                        fontSize: 14,
+                        color: "#333333",
+                    },
+                ]}
+                required={required}
+                disabled={disabled}
+                error={error}
+            >
+                {`${label}`}
+            </InputLabel>
+            <TimePicker
+                sx={timeFieldStyle}
+                disableOpenPicker
+                disabled={disabled}
+                value={value ? value : null}
+                onChange={handleTimeChange}
+                slotProps={{
+                    textField: {
+                        id: "time",
+                    },
+                }}
+            />
+        </LocalizationProvider>
+    );
+};
+
+TimeField.propTypes = {
+    label: PropTypes.string.isRequired,
+    value: PropTypes.object,
+    handleTimeChange: PropTypes.func.isRequired,
+    disabled: PropTypes.bool,
+    required: PropTypes.bool,
+    error: PropTypes.string,
+};
+
+export default TimeField;

react/components/TimeField/TimeField.stories.js

@@ -0,0 +1,26 @@
+import React, { useState } from "react";
+import TimeField from "./TimeField";
+import { withKnobs } from "@storybook/addon-knobs";
+
+export default {
+    title: "TimeField",
+    component: TimeField,
+    decorators: [withKnobs],
+};
+export const TimeFieldComponent = (args) => {
+    const [value, setValue] = useState("");
+    const handleTimeChange = (newValue, v) => {
+        console.log("Time changed: newValue = ", newValue);
+        setValue(newValue);
+    };
+    return (
+        <div className="qpp-u-padding--16">
+            <TimeField
+                disabled={false}
+                label="Result Time"
+                handleTimeChange={handleTimeChange}
+                value={value}
+            />
+        </div>
+    );
+};

react/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@madie/madie-design-system",
-    "version": "1.0.51",
+    "version": "1.0.52",
     "description": "Shared style guide across the Madie program.",
     "main": "dist/index.js",
     "homepage": "https://github.com/MeasureAuthoringTool/madie-design-system",