@madie/madie-design-system 1.0.45 → 1.0.46

package/components/RadioButton/RadioButton.jsx

@@ -0,0 +1,110 @@
+import React from "react";
+import {
+    FormControl,
+    FormHelperText,
+    FormControlLabel,
+    Radio,
+    RadioGroup,
+} from "@mui/material";
+import PropTypes from "prop-types";
+import InputLabel from "../InputLabel";
+
+const RadioButton = ({
+    id,
+    dataTestId,
+    options = [],
+    disabled = false,
+    label,
+    required = false,
+    error = false,
+    helperText,
+    ...rest
+}) => {
+    return (
+        <FormControl error={error} fullWidth>
+            <InputLabel
+                htmlFor={`${id}`}
+                id={`${id}-label`}
+                disabled={disabled}
+                required={required}
+                shrink
+                style={{marginBottom: 0, height: 16}} // force a height
+                sx={[
+                    {
+                        backgroundColor: "transparent",
+                        display: "flex",
+                        flexDirection: "row-reverse",
+                        alignSelf: "baseline",
+                        textTransform: "none",
+                        // force it outside the select box
+                        position: "initial",
+                        transform: "translateX(0px) translateY(0px)",
+                        fontFamily: "Rubik",
+                        fontWeight: 500,
+                        fontSize: 14,
+                        color: "#333",
+                        "& .MuiInputLabel-asterisk": {
+                            color: "#AE1C1C !important",
+                            marginRight: "3px !important", //this was
+                        },
+                    },
+                    required && {
+                        transform: "translateX(-12px) translateY(0px)",
+                        "& .MuiInputLabel-asterisk": {
+                            color: "#D92F2",
+                            marginRight: "3px !important", //this was
+                        },
+                    },
+                    disabled && {
+                        color: "rgba(0,0,0,0.6)",
+                    },
+                    error && {
+                        color: "#AE1C1C !important",
+                    },
+                ]}
+            >
+                {label}
+            </InputLabel>
+            {helperText && (<FormHelperText
+                tabIndex={0}
+                aria-live="polite"
+                id={`${id}-helper-text`}
+                data-testid={`${id}-helper-text`}
+                error={error}
+                sx={[{
+                    margin: "4px 0px 0px 0px",
+                    color: "#515151",
+                    lineHeight: 1
+                },
+                    error && {
+                        color: "#AE1C1C !important",
+                    },
+                ]}
+            >
+                {helperText}
+            </FormHelperText>)}
+            <RadioGroup
+                aria-labelledby={`${id}-radio-buttons-group`}
+                data-testid={`${id}-radio-buttons-group`}
+                {...rest}
+            >
+                {options.map((option, index) => (
+                    <FormControlLabel key={index} value={option.value} control={<Radio />} label={option.label} />
+                ))}
+            </RadioGroup>
+        </FormControl>
+    );
+};
+
+RadioButton.propTypes = {
+    id: PropTypes.string,
+    dataTestId: PropTypes.string,
+    required: PropTypes.bool,
+    disabled: PropTypes.bool,
+    error: PropTypes.bool,
+    label: PropTypes.string,
+    helperText: PropTypes.string,
+    options: PropTypes.arrayOf(PropTypes.any),
+};
+
+export default RadioButton;

package/components/RadioButton/RadioButton.stories.jsx

@@ -0,0 +1,59 @@
+import React, { useState } from "react";
+import RadioButton from "./RadioButton";
+
+export default {
+    title: "RadioButton",
+    component: RadioButton,
+};
+
+const options = [
+        { label: "option 1", value: true },
+        { label: "option 2", value: false},
+        { label: "options 3", value: "options 3"},
+    ];
+
+const TemplateRadioButton = (args) => {
+    const [value, setValue] = useState("test");
+    const handleChange = (id, selectedVal) => {
+        console.log("Handle change triggered", id, selectedVal);
+        setValue(selectedVal);
+    };
+    return (
+        <div className="qpp-u-padding--16">
+            <RadioButton
+                id="RadioButton"
+                dataTestId="v"
+                label="Radio Button"
+                options={options}
+                onChange={handleChange}
+                value={value}
+                {...args}
+            />
+        </div>
+    );
+};
+
+export const RadioButtonWithLabel = TemplateRadioButton.bind({});
+RadioButtonWithLabel.args = {};
+
+export const RadioButtonWithLabelDisabled = TemplateRadioButton.bind({});
+RadioButtonWithLabelDisabled.args = {
+    disabled: true,
+};
+
+export const RadioButtonWithHelperText = TemplateRadioButton.bind({});
+RadioButtonWithHelperText.args = {
+    helperText: "Helper text goes here",
+};
+
+export const RadioButtonRequired = TemplateRadioButton.bind({});
+RadioButtonRequired.args = {
+    required: true,
+};
+
+export const RadioButtonWithError = TemplateRadioButton.bind({});
+RadioButtonWithError.args = {
+    required: true,
+    helperText: "This field is required",
+    error: true,
+};

package/components/index.js

@@ -17,6 +17,7 @@ import MadieSpinner from "./MadieSpinner";
 import Modal from "./Modal";
 import Popover from "./Popover";
 import { Pagination } from "./Pagination";
+import RadioButton from "./RadioButton/RadioButton";
 import ReadOnlyTextField from "./ReadOnlyTextField";
 import Select from "./Select";
 import Spinner from "./UnwrappedSpinner";
@@ -136,6 +137,7 @@ export {
     MadieSpinner,
     Pagination,
     Popover,
+    RadioButton,
     ReadOnlyTextField,
     Search,
     Select,