@madie/madie-design-system 1.0.13 → 1.0.14

package/components/MadieDialog/index.jsx

@@ -15,26 +15,26 @@ import Button from "../Button";
 
 const MadieDialog = ({
     /*
-      Lets make a reusable component
-      form booleon determines layout
-      Dialog props: props to be passed to the Dialog itself
-      {
-        open: bool,
-        onClose: function on close,
-        onSubmit: function onSubmit,
-        showRequiredFieldMessage: functional
-      }
-      Children: React components to be inside
-      Action Props for cancel or continue:
-      {
-        variants listed in design system like cyan
-        className
-        type
-        data-testid,
-        onClick
-        disabled
-      }
-      */
+        Lets make a reusable component
+        form booleon determines layout
+        Dialog props: props to be passed to the Dialog itself
+        {
+            open: bool,
+            onClose: function on close,
+            onSubmit: function onSubmit,
+            showRequiredFieldMessage: functional
+        }
+        Children: React components to be inside
+        Action Props for cancel or continue:
+        {
+            variants listed in design system like cyan
+            className
+            type
+            data-testid,
+            onClick
+            disabled
+        }
+    */
     form,
     title,
     dialogProps,
@@ -108,7 +108,7 @@ const MadieDialog = ({
                         </div>
                     </Box>
                     <Divider />
-                    <DialogContent>
+                    <DialogContent sx={{ padding: '32px' }}>
                         {showRequiredFieldMessage && (
                             <Box
                                 sx={{
@@ -141,7 +141,7 @@ const MadieDialog = ({
 
                         {children}
                     </DialogContent>
-                    <Divider sx={{ marginTop: "10px" }} />
+                    <Divider />
                     <DialogActions
                         sx={{
                             padding: "16px",
@@ -205,8 +205,8 @@ const MadieDialog = ({
                         </div>
                     </Box>
                     <Divider />
-                    <DialogContent>{children}</DialogContent>
-                    <Divider sx={{ marginTop: "10px" }} />
+                    <DialogContent sx={{ padding: '32px'}}>{children}</DialogContent>
+                    <Divider />
                     <DialogActions
                         sx={{
                             padding: "16px",

package/components/Select/Select.stories.js

@@ -1,8 +1,8 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { withKnobs } from "@storybook/addon-knobs";
-import MUISelect from "./index";
-import { MenuItem, FormHelperText } from "@mui/material";
+import Select from "./index";
+import { MenuItem } from "@mui/material";
 
 export default {
     title: "Select",
@@ -25,9 +25,9 @@ const options = [
     { key: "key2", value: "value2", testId: "testid2", name: "name2" },
     { key: "key3", value: "value2", testId: "testid3", name: "name3" },
 ];
-export const Select = () => (
+export const SelectWithLabel = () => (
     <Wrapper>
-        <MUISelect
+        <Select
             defaultValue=""
             placeHolder={{ name: "placeholder", value: "" }}
             label="Text Label"
@@ -52,7 +52,7 @@ export const Select = () => (
 
 export const WithHelperText = () => (
     <Wrapper>
-        <MUISelect
+        <Select
             placeHolder={{ name: "placeholder", value: "" }}
             defaultValue=""
             label="Text Label"
@@ -60,12 +60,7 @@ export const WithHelperText = () => (
             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>
-            }
+            helperText="A descriptive message"
             options={options.map(({ key, value, testId, name }) => {
                 return (
                     <MenuItem
@@ -83,7 +78,7 @@ export const WithHelperText = () => (
 
 export const Disabled = () => (
     <Wrapper>
-        <MUISelect
+        <Select
             placeHolder={{ name: "placeholder", value: "" }}
             defaultValue=""
             label="Text Label"
@@ -109,7 +104,7 @@ export const Disabled = () => (
 
 export const Required = () => (
     <Wrapper>
-        <MUISelect
+        <Select
             required
             placeHolder={{ name: "placeholder", value: "" }}
             defaultValue=""
@@ -135,7 +130,7 @@ export const Required = () => (
 
 export const Error = () => (
     <Wrapper>
-        <MUISelect
+        <Select
             error
             placeHolder={{ name: "placeholder", value: "" }}
             defaultValue=""
@@ -144,11 +139,7 @@ export const Error = () => (
             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>
-            }
+            helperText="An error message"
             options={options.map(({ key, value, testId, name }) => {
                 return (
                     <MenuItem

package/components/Select/index.jsx

@@ -24,7 +24,6 @@ const Select = ({
     ],
     ...rest
 }) => {
-    // const classes = useStyles();
     const placehold = (
         <span style={{ opacity: 0.6 }}>
             {placeHolder?.name || "placeholder"}
@@ -73,7 +72,6 @@ const Select = ({
                 }}
                 displayEmpty
                 IconComponent={ExpandMoreIcon}
-                error={error}
                 disabled={disabled}
                 required={required}
                 id={id}
@@ -90,7 +88,7 @@ const Select = ({
             >
                 {options && options}
             </MUISelect>
-            {helperText && <FormHelperText>{helperText}</FormHelperText>}
+            {helperText && <FormHelperText data-testid={`helper-text`}>{helperText}</FormHelperText>}
         </FormControl>
     );
 };