@madie/madie-design-system 1.0.44 → 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/Tabs/Tab.js

@@ -4,13 +4,15 @@ import { Tab as MuiTab } from "@mui/material";
 
 const typeA = {
     color: "#fff",
+    borderRadius: "4px 4px 0px 0px !important",
+    backgroundColor: "#003366",
     "&:hover":{
         background: "#001F3D"
     },
     "&:focus":{
         background: "#125496",
         boxShadow: "0px 0px 0px 4px #CBE4FF",
-    }
+    },
 };
 const typeB = {
     color: "#515151",
@@ -27,7 +29,7 @@ const typeC = {
     color: "#333",
     background: "#EDEDED",
     "&:hover":{
-        backround: "#FAFAFA",
+        background: "#FAFAFA",
         color: "#515151"
     },
     "&:focus":{
@@ -37,7 +39,7 @@ const typeC = {
 };
 
 
-const Tab = ({ type, size, ...rest }) => {
+const Tab = ({ type, orientation, size, ...rest }) => {
     const baseStyle = {
         height: size === 'standard' ? '48px' : '60px',
         fontFamily: "Rubik, sans serif",
@@ -45,10 +47,11 @@ const Tab = ({ type, size, ...rest }) => {
         padding: size === 'standard' ? "14.5px 24.5px" : "20.5px 24px",
         textTransform: "none",
         fontSize: "16px",
-        '&.Mui-disabled': {
+        alignItems: orientation === 'vertical' && "flex-start",
+        '& .Mui-disabled': {
             background: "#DDDDDD",
             color: "#717171"
-        }
+        },
     }
     const style = ((type) => {
         if (type === "A") {
@@ -71,6 +74,7 @@ const Tab = ({ type, size, ...rest }) => {
 };
 
 Tab.propTypes = {
+    orientation: PropTypes.string,
     type: PropTypes.oneOf(["A", "B", "C", "D"]),
     size: PropTypes.oneOf(["standard", "large"]),
 };

package/components/Tabs/Tabs.stories.js

@@ -79,6 +79,15 @@ export const TypeA = () => {
                     <Tab type="C" size="large" label="disabled" value={4} disabled/>
                 </Tabs>
             </div>
+            <div>
+                Vertical Standard: C
+                <Tabs type="C" value={selected} onChange={handleChange} orientation="vertical">
+                    <Tab type="C" size="standard" label="Item One" value={1} orientation="vertical"/>
+                    <Tab type="C" size="standard" label="Item Two" value={2} orientation="vertical"/>
+                    <Tab type="C" size="standard" label="Item Three"value={3} orientation="vertical"/>
+                    <Tab type="C" size="standard" label="disabled" value={4} disabled orientation="vertical"/>
+                </Tabs>
+            </div>
             <div style={{ width: "fit-content"}}>
                 Standard: D
                 <Tabs type="D" value={selected} onChange={handleChange}>

package/components/Tabs/index.js

@@ -3,8 +3,9 @@ import { Tabs as MuiTabs } from "@mui/material";
 import React from "react";
 
 const typeA = {
-    backgroundColor: "#003366",
-    borderRadius: "4px 4px 0px 0px !important",
+    "& .MuiTabs-flexContainer": {
+        columnGap: "4px !important",
+    },
     "& .MuiTabs-indicator": {
         display: "none !important"
       },
@@ -49,6 +50,7 @@ const Tabs = ({
         fontFamily: "Rubik, sans Sarif",
         fontWeight: 400,
         lineHeight: 19,
+        backgroundColor: "transparent",
         "& .Mui-selected": {
             outline: "none",
             fontWeight: 500,
@@ -78,6 +80,7 @@ const Tabs = ({
 }
 
 Tabs.propTypes = {
+    orientatin: PropTypes.string,
     type: PropTypes.oneOf(["A", "B", "C", "D"]),
     size: PropTypes.oneOf(["standard", "large"]),
     ariaLabel: PropTypes.string,
@@ -88,6 +91,7 @@ Tabs.propTypes = {
 };
 
 Tabs.defaultProps = {
+    orientation: "horizontal",
     type: "A",
     size: "standard",
     selected: null,

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,