@madie/madie-design-system 2.0.0 → 2.0.2

package/components/Tabs/Tab.js

@@ -1,5 +1,4 @@
 import React from "react";
-import PropTypes from "prop-types";
 import { Tab as MuiTab } from "@mui/material";
 
 const typeA = {
@@ -14,6 +13,7 @@ const typeA = {
         boxShadow: "0px 0px 0px 4px #CBE4FF",
     },
 };
+
 const typeB = {
     color: "#515151",
     "&:hover": {
@@ -25,6 +25,7 @@ const typeB = {
         background: "#fff",
     },
 };
+
 const typeC = {
     color: "#333",
     background: "#EDEDED",
@@ -38,7 +39,20 @@ const typeC = {
     },
 };
 
-const Tab = ({ type, orientation, size, ...rest }) => {
+/**
+ * @param {{
+ *   type?: "A" | "B" | "C" | "D",
+ *   size?: "standard" | string,
+ *   orientation?: "horizontal" | "vertical",
+ *   [key: string]: any
+ * }} props
+ */
+const Tab = ({
+    type = "A",
+    size = "standard",
+    orientation = "horizontal",
+    ...rest
+}) => {
     const baseStyle = {
         height: size === "standard" ? "48px" : "60px",
         fontFamily: "Rubik, sans serif",
@@ -46,35 +60,25 @@ const Tab = ({ type, orientation, size, ...rest }) => {
         padding: size === "standard" ? "14.5px 24px" : "20.5px 24px",
         textTransform: "none",
         fontSize: "16px",
-        alignItems: orientation === "vertical" && "flex-start",
+        alignItems: orientation === "vertical" ? "flex-start" : undefined,
         "&.Mui-disabled": {
             background: "#DDDDDD",
             color: "#717171 !important",
         },
     };
-    const style = ((type) => {
-        if (type === "A") {
-            return { ...baseStyle, ...typeA };
-        }
-        if (type === "B" || type === "D") {
-            return { ...baseStyle, ...typeB };
-        }
-        if (type === "C") {
-            return { ...baseStyle, ...typeC };
-        }
-    })(type);
-    return <MuiTab tabIndex={0} sx={style} {...rest} />;
-};
 
-Tab.propTypes = {
-    orientation: PropTypes.string,
-    type: PropTypes.oneOf(["A", "B", "C", "D"]),
-    size: PropTypes.oneOf(["standard", "large"]),
-};
-Tab.defaultProps = {
-    type: "A",
-    size: "standard",
-    onChange: null,
+    const variantStyles =
+        type === "A"
+            ? typeA
+            : type === "B" || type === "D"
+              ? typeB
+              : type === "C"
+                ? typeC
+                : {};
+
+    const style = { ...baseStyle, ...variantStyles };
+
+    return <MuiTab tabIndex={0} sx={style} {...rest} />;
 };
 
 export default Tab;

package/components/Tabs/TabPanel.js

@@ -1,15 +1,25 @@
 import React from "react";
-import PropTypes from "prop-types";
 
+/**
+ * @param {{
+ *   children?: React.ReactNode,
+ *   value?: number,
+ *   id: string,
+ *   index?: number,
+ *   className?: string,
+ *   disabled?: boolean
+ * }} props
+ */
 export const TabPanel = ({
     children,
-    value,
+    value = 0,
+    index = 0,
     id,
-    index,
-    className,
-    disabled,
+    className = "",
+    disabled = false,
 }) => {
     const classes = ["qpp-c-tabs__panel", className].filter(Boolean).join(" ");
+
     return (
         <div
             role="tabpanel"
@@ -24,18 +34,4 @@ export const TabPanel = ({
     );
 };
 
-TabPanel.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    index: PropTypes.number.isRequired,
-    id: PropTypes.string,
-    value: PropTypes.number.isRequired,
-    disabled: PropTypes.bool,
-};
-
-TabPanel.defaultProps = {
-    index: 0,
-    value: 0,
-};
-
 export default TabPanel;

package/components/Tabs/Tabs.stories.js

@@ -2,7 +2,6 @@ import React, { useState } from "react";
 import "./tabs.scss";
 import Tabs from "./index";
 import Tab from "./Tab";
-import PropTypes from "prop-types";
 
 export default {
     title: "Tabs",
@@ -23,21 +22,18 @@ export default {
     },
 };
 
+/**
+ * @param {{
+ *   type: "A" | "B" | "C" | "D",
+ *   size: "standard" | "large",
+ *   orientation: "horizontal" | "vertical"
+ * }} props
+ */
 const Template = ({ type, size, orientation }) => {
     const [selected, setSelected] = useState(1);
+    const handleChange = (_, value) => setSelected(value);
 
-    const handleChange = (event, value) => {
-        setSelected(value);
-    };
-
-    const tabProps = {
-        type,
-        size,
-        orientation,
-    };
-
-    const tabsOrientation =
-        orientation === "vertical" ? "vertical" : "horizontal";
+    const tabProps = { type, size, orientation };
 
     return (
         <div
@@ -46,48 +42,16 @@ const Template = ({ type, size, orientation }) => {
                 width: orientation === "vertical" ? 200 : "fit-content",
             }}
         >
-            <Tabs
-                type={type}
-                size={size}
-                orientation={tabsOrientation}
-                value={selected}
-                onChange={handleChange}
-            >
-                <Tab
-                    {...tabProps}
-                    label="Item One"
-                    value={1}
-                    orientation={tabsOrientation}
-                />
-                <Tab
-                    {...tabProps}
-                    label="Item Two"
-                    value={2}
-                    orientation={tabsOrientation}
-                />
-                <Tab
-                    {...tabProps}
-                    label="Item Three"
-                    value={3}
-                    orientation={tabsOrientation}
-                />
-                <Tab
-                    {...tabProps}
-                    label="disabled"
-                    value={4}
-                    disabled
-                    orientation={tabsOrientation}
-                />
+            <Tabs {...tabProps} value={selected} onChange={handleChange}>
+                <Tab {...tabProps} label="Item One" value={1} />
+                <Tab {...tabProps} label="Item Two" value={2} />
+                <Tab {...tabProps} label="Item Three" value={3} />
+                <Tab {...tabProps} label="disabled" value={4} disabled />
             </Tabs>
         </div>
     );
 };
 
-Template.propTypes = {
-    type: PropTypes.string.isRequired,
-    size: PropTypes.string.isRequired,
-    orientation: PropTypes.oneOf(["horizontal", "vertical"]).isRequired,
-};
 export const InteractiveTabs = Template.bind({});
 InteractiveTabs.args = {
     type: "A",

package/components/Tabs/index.js

@@ -1,5 +1,4 @@
 import React from "react";
-import PropTypes from "prop-types";
 import { Tabs as MuiTabs } from "@mui/material";
 
 const typeA = {
@@ -63,7 +62,12 @@ const baseStyle = {
     },
 };
 
-const Tabs = ({ type, size, orientation, ...rest }) => {
+const Tabs = ({
+    type = "A",
+    size = "standard",
+    orientation = "horizontal",
+    ...rest
+}) => {
     let style = { ...baseStyle };
 
     switch (type) {
@@ -74,11 +78,10 @@ const Tabs = ({ type, size, orientation, ...rest }) => {
             style = { ...style, ...typeB };
             break;
         case "C":
-            if (orientation === "vertical") {
-                style = { ...style, ...typeC, ...typeCVerticalSelected };
-            } else {
-                style = { ...style, ...typeC };
-            }
+            style =
+                orientation === "vertical"
+                    ? { ...style, ...typeC, ...typeCVerticalSelected }
+                    : { ...style, ...typeC };
             break;
         case "D":
             style = { ...style, ...typeD };
@@ -92,25 +95,4 @@ const Tabs = ({ type, size, orientation, ...rest }) => {
     );
 };
 
-Tabs.propTypes = {
-    orientation: PropTypes.string,
-    type: PropTypes.oneOf(["A", "B", "C", "D"]),
-    size: PropTypes.oneOf(["standard", "large"]),
-    ariaLabel: PropTypes.string,
-    selected: PropTypes.string,
-    defaultSelectedId: PropTypes.string,
-    onChange: PropTypes.func,
-    children: PropTypes.oneOfType([PropTypes.node, PropTypes.array]),
-};
-
-Tabs.defaultProps = {
-    orientation: "horizontal",
-    type: "A",
-    size: "standard",
-    selected: null,
-    defaultSelectedId: null,
-    onChange: null,
-    children: null,
-};
-
 export default Tabs;

package/components/TextArea/TextArea.stories.js

@@ -1,5 +1,4 @@
 import React from "react";
-import PropTypes from "prop-types";
 import TextArea from "./index";
 import { FormHelperText } from "@mui/material";
 
@@ -25,11 +24,6 @@ const Wrapper = ({ children }) => (
     </div>
 );
 
-Wrapper.propTypes = {
-    className: PropTypes.string,
-    children: PropTypes.node,
-};
-
 const Template = (args) => (
     <Wrapper>
         <TextArea

package/components/TextArea/index.jsx

@@ -1,8 +1,7 @@
 import React from "react";
 import { FormControl, FormHelperText, TextareaAutosize } from "@mui/material";
 import InputLabel from "../InputLabel";
-import PropTypes from "prop-types";
-import { ReadOnlyTextField } from "../index";
+import ReadOnlyTextField from "../ReadOnlyTextField";
 
 const TextArea = ({
     id,
@@ -131,15 +130,4 @@ const TextArea = ({
     );
 };
 
-TextArea.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,
-    inputProps: PropTypes.any,
-    maxLength: PropTypes.number,
-};
 export default TextArea;

package/components/TextField/TextField.stories.js

@@ -1,5 +1,4 @@
 import React from "react";
-import PropTypes from "prop-types";
 import TextField from "./index";
 import { FormHelperText, IconButton, InputAdornment } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
@@ -30,11 +29,6 @@ const Wrapper = ({ children }) => (
     </div>
 );
 
-Wrapper.propTypes = {
-    className: PropTypes.string,
-    children: PropTypes.node,
-};
-
 const Template = (args) => (
     <Wrapper>
         <TextField

package/components/TextField/index.jsx

@@ -6,8 +6,7 @@ import {
 } from "@mui/material";
 import InputLabel from "../InputLabel";
 import MadieToolTip from "../MadieTooltip";
-import PropTypes from "prop-types";
-import { ReadOnlyTextField } from "../index";
+import ReadOnlyTextField from "../ReadOnlyTextField";
 
 const TextField = ({
     id,
@@ -204,18 +203,4 @@ const TextField = ({
     );
 };
 
-TextField.propTypes = {
-    id: PropTypes.string,
-    textFieldStyles: PropTypes.object,
-    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,
-    tooltipText: PropTypes.string,
-    inputProps: PropTypes.object,
-    labelColor: PropTypes.string,
-    maxLength: PropTypes.number,
-};
 export default TextField;

package/components/TimeField/TimeField.jsx

@@ -4,7 +4,6 @@ import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import InputLabel from "../InputLabel";
 import { kebabCase } from "lodash";
-import PropTypes from "prop-types";
 
 const timeFieldStyle = {
     width: "170px",
@@ -89,13 +88,4 @@ const TimeField = ({
     );
 };
 
-TimeField.propTypes = {
-    label: PropTypes.string.isRequired,
-    value: PropTypes.object,
-    handleTimeChange: PropTypes.func.isRequired,
-    disabled: PropTypes.bool,
-    required: PropTypes.bool,
-    error: PropTypes.string,
-};
-
 export default TimeField;

package/components/Toast/index.jsx

@@ -9,7 +9,6 @@ import { IconButton, Snackbar } from "@mui/material";
 import ClearIcon from "@mui/icons-material/Clear";
 
 import classNames from "classnames";
-import PropTypes from "prop-types";
 
 const Toast = ({
     toastType = "warning",
@@ -101,17 +100,4 @@ const Toast = ({
     );
 };
 
-Toast.propTypes = {
-    toastType: PropTypes.string,
-    open: PropTypes.bool,
-    message: PropTypes.node,
-    canClose: PropTypes.bool,
-    onClose: PropTypes.func,
-    autoHideDuration: PropTypes.number,
-    testId: PropTypes.string,
-    toastKey: PropTypes.string,
-    toastProps: PropTypes.object,
-    closeButtonProps: PropTypes.object,
-};
-
 export default Toast;

package/components/TruncateText/index.js

@@ -1,7 +1,6 @@
 import { IconButton } from "@mui/material";
 import React, { useState } from "react";
 import _ from "lodash";
-import PropTypes from "prop-types";
 
 const TruncateText = ({
     text,
@@ -42,11 +41,4 @@ const TruncateText = ({
     );
 };
 
-TruncateText.propTypes = {
-    text: PropTypes.string,
-    maxLength: PropTypes.number,
-    dataTestId: PropTypes.string,
-    fontSize: PropTypes.string,
-};
-
 export default TruncateText;

package/components/{index.js → index.mjs}

@@ -1,37 +1,40 @@
-import Accordion from "./Accordion";
-import AutoComplete from "./AutoComplete/AutoComplete";
-import Button, { TextButton } from "./Button";
-import DateField from "./DateField/DateField";
-import DateTimeField from "./DateTimeField/DateTimeField";
-import Instant from "./Instant";
-import InputLabel from "./InputLabel";
-import FormControlLabel from "./FormControlLabel";
-import MadieAlert from "./MadieAlert";
-import MadieDialog from "./MadieDialog";
-import MadieDiscardDialog from "./MadieDiscardDialog";
-import MadieDeleteDialog from "./MadieDeleteDialog";
-import MadieConfirmDialog from "./MadieConfirmDialog";
-import MadieSpinner from "./MadieSpinner";
-import MadieTooltip from "./MadieTooltip";
-import MadieTooltipIcon from "./MadieTooltipIcon";
-import Modal from "./Modal";
-import Popover from "./Popover";
-import { Pagination } from "./Pagination";
-import RadioButton from "./RadioButton/RadioButton";
-import ReadOnlyTextField from "./ReadOnlyTextField";
-import RichTextEditor from "./RichTextEditor";
-import Select from "./Select";
-import TabPanel from "./Tabs/TabPanel";
-import Tabs from "./Tabs/index";
-import Tab from "./Tabs/Tab";
-import TextField from "./TextField";
-import TimeField from "./TimeField/TimeField";
-import TextArea from "./TextArea";
-import Toast from "./Toast";
-import Search from "./Search";
-import NumberInput from "./NumberInput";
-import TruncateText from "./TruncateText/index";
+
+import Accordion from "./Accordion/index.jsx";
+import AutoComplete from "./AutoComplete/AutoComplete.jsx";
+import Button, { TextButton } from "./Button/index.js";
+import DateField from "./DateField/DateField.jsx";
+import DateTimeField from "./DateTimeField/DateTimeField.jsx";
+import DSLink from "./Link/index.js";
+import Instant from "./Instant/index.jsx";
+import InputLabel from "./InputLabel/index.jsx";
+import FormControlLabel from "./FormControlLabel/index.jsx";
+import MadieAlert from "./MadieAlert/index.jsx";
+import MadieDialog from "./MadieDialog/index.jsx";
+import MadieDiscardDialog from "./MadieDiscardDialog/index.jsx";
+import MadieDeleteDialog from "./MadieDeleteDialog/index.jsx";
+import MadieConfirmDialog from "./MadieConfirmDialog/index.jsx";
+import MadieSpinner from "./MadieSpinner/index.jsx";
+import MadieTooltip from "./MadieTooltip/index.jsx";
+import MadieTooltipIcon from "./MadieTooltipIcon/index.jsx";
+import Modal from "./Modal/index.jsx";
+import Popover from "./Popover/index.js";
+import { Pagination } from "./Pagination/index.jsx";
+import RadioButton from "./RadioButton/RadioButton.jsx";
+import ReadOnlyTextField from "./ReadOnlyTextField/index.jsx";
+import RichTextEditor from "./RichTextEditor/index.jsx";
+import Select from "./Select/index.jsx";
+import TabPanel from "./Tabs/TabPanel.js";
+import Tabs from "./Tabs/index.js";
+import Tab from "./Tabs/Tab.js";
+import TextField from "./TextField/index.jsx";
+import TimeField from "./TimeField/TimeField.jsx";
+import TextArea from "./TextArea/index.jsx";
+import Toast from "./Toast/index.jsx";
+import Search from "./Search/index.js";
+import NumberInput from "./NumberInput/index.jsx";
+import TruncateText from "./TruncateText/index.js";
 import theme from "../themes/actionCenterTheme.js";
+
 import {
     MyApplicationsIcon,
     UserSignInIcon,
@@ -120,6 +123,7 @@ export {
     Button,
     DateField,
     DateTimeField,
+    DSLink,
     FormControlLabel,
     InputLabel,
     Icons,