Merge pull request #249 from MeasureAuthoringTool/feature/MAT-7151

Release 1.2.19 - MAT-7151 Number Input Component

.github/workflows/unit_test_coverage.yml

@@ -73,7 +73,8 @@ jobs:
           path: react/coverage/lcov.info
 
       - name: Upload code coverage to Codecov
-        uses: codecov/codecov-action@v3
+        uses: codecov/codecov-action@v4
         with:
           file: lcov.info
           fail_ci_if_error: true
+          token: ${{ secrets.CODECOV_TOKEN }} # required

react/components/NumberInput/NumberInput.stories.js

@@ -0,0 +1,88 @@
+import React from "react";
+import { withKnobs } from "@storybook/addon-knobs";
+import NumberInput from "./index";
+import PropTypes from "prop-types";
+
+export default {
+    title: "NumberInput",
+    component: NumberInput,
+    decorators: [withKnobs],
+};
+
+const Wrapper = ({ children }) => (
+    <div className="qpp-u-padding--16" style={{ width: 300 }}>
+        {children}
+    </div>
+);
+Wrapper.propTypes = {
+    className: PropTypes.string,
+    children: PropTypes.node,
+};
+
+export const BasicNumberInput = () => {
+    return (
+        <Wrapper>
+            <NumberInput
+                id="basic-number-input"
+                label="Demo number input"
+            />
+        </Wrapper>
+    )
+};
+
+export const NumberInputWithNoNegativeNumbers = () => {
+    return (
+        <Wrapper>
+            <NumberInput
+                id="basic-number-input"
+                label="Demo number input"
+                aria-label="Demo number input"
+                placeholder="Type a number…"
+                allowNegative={false}
+            />
+        </Wrapper>
+    )
+};
+
+export const NumberInputWithErrorAndHelperText = () => {
+    return (
+        <Wrapper>
+            <NumberInput
+                id="basic-number-input"
+                error={true}
+                label="Demo number input"
+                aria-label="Demo number input"
+                placeholder="Type a number…"
+                helperText={"Please Enter a valid integer"}
+            />
+        </Wrapper>
+    )
+};
+
+export const NumberInputDisabled = () => {
+    return (
+        <Wrapper>
+            <NumberInput
+                id="basic-number-input"
+                label="Demo number input"
+                aria-label="Demo number input"
+                placeholder="Type a number…"
+                disabled={true}
+            />
+        </Wrapper>
+    )
+};
+
+export const NumberInputWithTooltip = () => {
+    return (
+        <Wrapper>
+            <NumberInput
+                id="basic-number-input"
+                label="Demo number input"
+                aria-label="Demo number input"
+                placeholder="Type a number…"
+                tooltipText={"Provides information"}
+            />
+        </Wrapper>
+    )
+};

react/components/NumberInput/index.jsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import PropTypes from "prop-types";
+import TextField from "../TextField";
+
+export default function NumberInput({
+    id,
+    error = false,
+    helperText = undefined,
+    required = false,
+    disabled = false,
+    label,
+    tooltipText,
+    inputProps,
+    allowNegative = true,
+    ...rest
+}) {
+    const newInputProps = { ...inputProps } || {};
+    if (!newInputProps["data-testid"]) {
+        newInputProps["data-testid"] = `${id}-input`;
+    }
+    // if aria-describedBy is not provided, add it depending on helper-text and tooltip presence
+    if (!newInputProps["aria-describedby"]) {
+        let newDescribedBy = "";
+        if (helperText) {
+            newDescribedBy += `${id}-helper-text `;
+        }
+        if (tooltipText) {
+            newDescribedBy += `${id}-tooltip`;
+        }
+        if (newDescribedBy) {
+            newInputProps["aria-describedby"] = newDescribedBy;
+        }
+    }
+    newInputProps["type"] = "number";
+    if (!allowNegative) {
+        newInputProps["min"] = 0;
+    }
+    return (
+        <TextField
+            id={`integer-field-${id}`}
+            error={error}
+            helperText={helperText}
+            required={required}
+            disabled={disabled}
+            label={label}
+            tooltipText={tooltipText}
+            inputProps={newInputProps}
+            placeholder={`Enter ${label}`}
+            data-testid={`integer-field-${id}`}
+            onKeyDown={(e) => {
+                if (e.key === "e" || e.key === "E" || e.key === "+" || e.key === "-") {
+                    e.preventDefault();
+                }
+            }}
+            {...rest}
+        />
+    );
+}
+
+NumberInput.propTypes = {
+    id: PropTypes.string,
+    error: PropTypes.bool,
+    helperText: PropTypes.string,
+    required: PropTypes.bool,
+    disabled: PropTypes.bool,
+    label: PropTypes.string,
+    tooltipText: PropTypes.string,
+    inputProps: PropTypes.object,
+    allowNegative: PropTypes.bool,
+};

react/components/index.js

@@ -38,6 +38,7 @@ import Search from "./Search";
 import TextInput from "./TextInput";
 import Dropdown from "./Dropdown";
 import DSLink from "./Link";
+import NumberInput from "./NumberInput";
 import {
     MyApplicationsIcon,
     UserSignInIcon,
@@ -144,6 +145,7 @@ export {
     MadieSpinner,
     MadieTooltipIcon,
     MadieTooltip,
+    NumberInput,
     Pagination,
     Popover,
     RadioButton,