@madie/madie-design-system 1.0.15 → 1.0.16

package/components/ReadOnlyTextField/ReadOnlyTextField.stories.js

@@ -0,0 +1,99 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { withKnobs } from "@storybook/addon-knobs";
+import ReadOnlyTextField from "./index";
+import { FormHelperText } from "@mui/material";
+export default {
+    title: "ReadOnlyTextField",
+    component: ReadOnlyTextField,
+    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 Textfield = () => (
+    <Wrapper>
+        <ReadOnlyTextField
+            placeholder="Placeholder"
+            label="Text Label"
+            id="measureName"
+            inputProps={{ "data-testid": "measure-name-input" }}
+            data-testid="measure-name-text-field"
+            size="small"
+        />
+    </Wrapper>
+);
+
+export const WithHelperText = () => (
+    <Wrapper>
+        <ReadOnlyTextField
+            placeholder="Placeholder"
+            label="Text Label"
+            id="measureName"
+            inputProps={{ "data-testid": "measure-name-input" }}
+            data-testid="measure-name-text-field"
+            size="small"
+            helperText={
+                <FormHelperText data-testid={`helper-text`} error={false}>
+                    a descriptive message
+                </FormHelperText>
+            }
+        />
+    </Wrapper>
+);
+
+export const Disabled = () => (
+    <Wrapper>
+        <ReadOnlyTextField
+            placeholder="Placeholder"
+            label="Text Label"
+            id="measureName"
+            inputProps={{ "data-testid": "measure-name-input" }}
+            data-testid="measure-name-text-field"
+            size="small"
+            disabled
+            required
+        />
+    </Wrapper>
+);
+
+export const Required = () => (
+    <Wrapper>
+        <ReadOnlyTextField
+            placeholder="Placeholder"
+            required
+            label="Text Label"
+            id="measureName"
+            inputProps={{ "data-testid": "measure-name-input" }}
+            data-testid="measure-name-text-field"
+            size="small"
+        />
+    </Wrapper>
+);
+
+export const Error = () => (
+    <Wrapper>
+        <ReadOnlyTextField
+            placeholder="Placeholder"
+            error
+            required
+            label="Text Label"
+            id="measureName"
+            inputProps={{ "data-testid": "measure-name-input" }}
+            data-testid="measure-name-text-field"
+            size="small"
+            helperText={
+                <FormHelperText data-testid={`helper-text`} error={true}>
+                    An error message
+                </FormHelperText>
+            }
+        />
+    </Wrapper>
+);

package/components/ReadOnlyTextField/index.jsx

@@ -0,0 +1,76 @@
+import React from "react";
+import { FormControl, TextField as MUITextField } from "@mui/material";
+import InputLabel from "../InputLabel";
+import PropTypes from "prop-types";
+
+const ReadOnlyTextField = ({
+    id,
+    error = false,
+    helperText = undefined,
+    required = false,
+    disabled = false,
+    label,
+    ...rest
+}) => {
+    return (
+        <FormControl fullWidth error={error}>
+            <InputLabel
+                disabled={disabled}
+                shrink
+                required={required}
+                error={error}
+                htmlFor={id}
+            >
+                {label}
+            </InputLabel>
+            <MUITextField
+                sx={{
+                    height: 40, //there's a .13 coming from somewhere.
+                    border: "none",
+                    "& .MuiOutlinedInput-root": {
+                        "& > fieldset": {
+                            border: "none",
+                        },
+                    },
+                    // input base selector
+                    "& .MuiInputBase-input": {
+                        lineHeight: "19px",
+                        fontFamily: "Rubik",
+                        disableUnderline: true,
+                        fontSize: 16,
+                        padding: "9px 0px",
+                        "&::placeholder": {
+                            opacity: 0.6,
+                        },
+                        "&:focus": {
+                            border: "none",
+                            outline: "none",
+                            boxShadow: "none",
+                        },
+                    },
+                }}
+                InputProps={{
+                    readOnly: true,
+                }}
+                disableUnderline={true}
+                label={null}
+                error={error}
+                disabled={disabled}
+                id={id}
+                {...rest}
+            />
+            {helperText && helperText}
+        </FormControl>
+    );
+};
+
+ReadOnlyTextField.propTypes = {
+    id: PropTypes.string,
+    error: PropTypes.bool,
+    helperText: PropTypes.string,
+    required: PropTypes.bool,
+    disabled: PropTypes.bool,
+    placeholder: PropTypes.string, // expects placeholder objects of { name: value } and inserts into the render item function.
+    label: PropTypes.string,
+};
+export default ReadOnlyTextField;

package/components/index.js

@@ -13,6 +13,7 @@ import MadieDiscardDialog from "./MadieDiscardDialog";
 import MadieSpinner from "./MadieSpinner";
 import Modal from "./Modal";
 import { Pagination } from "./Pagination";
+import ReadOnlyTextField from "./ReadOnlyTextField";
 import Select from "./Select";
 import Spinner from "./UnwrappedSpinner";
 import TabPanel from "./Tabs/TabPanel";
@@ -125,6 +126,7 @@ export {
     MadieDiscardDialog,
     MadieSpinner,
     Pagination,
+    ReadOnlyTextField,
     Search,
     Select,
     Spinner,