@madie/madie-design-system 1.0.2 → 1.0.3

package/components/InputLabel/index.jsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { InputLabel as MUIInputLabel } from "@mui/material";
+import { makeStyles } from "@mui/styles";
+const useStyles = makeStyles({
+    asterisk: {
+        color: "#D92F2F",
+    },
+    root: {
+        "&&": {
+            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",
+        },
+    },
+    required: {
+        "&&": {
+            transform: "translateX(-12px) translateY(0px)",
+            "& .MuiInputLabel-asterisk": {
+                color: "#D92F2F",
+                marginRight: "3px !important", //this was hitting an mui bug.
+            },
+        },
+    },
+    error: {
+        "&&": {
+            color: "#D92F2F",
+        },
+    },
+    disabled: {
+        "&&": {
+            color: "rgba(0,0,0,0.6)",
+        },
+    },
+});
+const Label = (props) => {
+    const classes = useStyles();
+    return (
+        <MUIInputLabel
+            classes={{
+                root: classes.root,
+                required: classes.required,
+                error: classes.error,
+                disabled: classes.disabled,
+            }}
+            {...props}
+        />
+    );
+};
+export default Label;

package/components/Link/Link.stories.js

@@ -1,81 +1,82 @@
-import React from 'react';
-import DSLink from './index';
-import { withKnobs } from '@storybook/addon-knobs';
-import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import React from "react";
+import DSLink from "./index";
+import { withKnobs } from "@storybook/addon-knobs";
+import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 
 export default {
-  title: 'Link',
-  component: DSLink,
-  decorators: [withKnobs],
+    title: "Link",
+    component: DSLink,
+    decorators: [withKnobs],
 };
 
 export const LinkLabel = () => <DSLink href="#">Link Label</DSLink>;
 
 export const LinkColorVariants = () => (
-  <>
-    <div className=" qpp-dark-background qpp-u-padding--16">
-      <DSLink href="#" variant="white">
-        Link Label
-      </DSLink>
-    </div>
-    <p>
-      <DSLink href="#" variant="gray">
-        Link Label
-      </DSLink>
-    </p>
-  </>
+    <>
+        <div className=" qpp-dark-background qpp-u-padding--16">
+            <DSLink href="#" variant="white">
+                Link Label
+            </DSLink>
+        </div>
+        <p>
+            <DSLink href="#" variant="gray">
+                Link Label
+            </DSLink>
+        </p>
+    </>
 );
 
 export const inlineLinks = () => (
-  <div className="qpp-u-padding--16">
-    <p className="qpp-u-width--60">
-      Aenean lacinia <DSLink href="#">inline link</DSLink> nulla sed{' '}
-      <DSLink href="#">inline link</DSLink>. Integer posuere erat a ante
-      venenatis dapibus posuere velit aliquet. Integer posuere erat a ante
-      venenatis <DSLink href="#">inline link</DSLink> dapibus posuere velit
-      aliquet.
-    </p>
-  </div>
+    <div className="qpp-u-padding--16">
+        <p className="qpp-u-width--60">
+            Aenean lacinia <DSLink href="#">inline link</DSLink> nulla sed{" "}
+            <DSLink href="#">inline link</DSLink>. Integer posuere erat a ante
+            venenatis dapibus posuere velit aliquet. Integer posuere erat a ante
+            venenatis <DSLink href="#">inline link</DSLink> dapibus posuere
+            velit aliquet.
+        </p>
+    </div>
 );
 
 export const inlineLinksDarkBackground = () => (
-  <div className="qpp-dark-background qpp-u-padding--16">
-    Aenean lacinia{' '}
-    <DSLink href="#" variant="white">
-      inline link
-    </DSLink>{' '}
-    nulla sed{' '}
-    <DSLink href="#" variant="white">
-      inline link
-    </DSLink>
-    . Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
-    Integer posuere erat a ante venenatis{' '}
-    <DSLink href="#" variant="white">
-      inline link
-    </DSLink>{' '}
-    dapibus posuere velit aliquet.
-  </div>
+    <div className="qpp-dark-background qpp-u-padding--16">
+        Aenean lacinia{" "}
+        <DSLink href="#" variant="white">
+            inline link
+        </DSLink>{" "}
+        nulla sed{" "}
+        <DSLink href="#" variant="white">
+            inline link
+        </DSLink>
+        . Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
+        Integer posuere erat a ante venenatis{" "}
+        <DSLink href="#" variant="white">
+            inline link
+        </DSLink>{" "}
+        dapibus posuere velit aliquet.
+    </div>
 );
 
 export const linkWithIcon = () => {
-  const icon = <OpenInNewIcon classes={{ root: 'qpp-icon-mat' }} />;
-  return (
-    <div className="qpp-u-padding--16">
-      <DSLink href="#">
-        Standalone Link With Icon
-        {icon}
-      </DSLink>{' '}
-      <p className=" qpp-u-width--60">
-        Aenean lacinia{' '}
-        <DSLink href="#">
-          inline link
-          {icon}
-        </DSLink>{' '}
-        nulla sed <DSLink href="#">inline link {icon}</DSLink>. Integer posuere
-        erat a ante venenatis dapibus posuere velit aliquet. Integer posuere
-        erat a ante venenatis <DSLink href="#">inline link {icon}</DSLink>{' '}
-        dapibus posuere velit aliquet.
-      </p>
-    </div>
-  );
+    const icon = <OpenInNewIcon classes={{ root: "qpp-icon-mat" }} />;
+    return (
+        <div className="qpp-u-padding--16">
+            <DSLink href="#">
+                Standalone Link With Icon
+                {icon}
+            </DSLink>{" "}
+            <p className=" qpp-u-width--60">
+                Aenean lacinia{" "}
+                <DSLink href="#">
+                    inline link
+                    {icon}
+                </DSLink>{" "}
+                nulla sed <DSLink href="#">inline link {icon}</DSLink>. Integer
+                posuere erat a ante venenatis dapibus posuere velit aliquet.
+                Integer posuere erat a ante venenatis{" "}
+                <DSLink href="#">inline link {icon}</DSLink> dapibus posuere
+                velit aliquet.
+            </p>
+        </div>
+    );
 };

package/components/Link/index.js

@@ -1,61 +1,61 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from "react";
+import PropTypes from "prop-types";
 
-const VARIANTS = ['white', 'gray'];
+const VARIANTS = ["white", "gray"];
 
 const DSLink = ({
-  className,
-  href,
-  download,
-  ariaLabel,
-  onClick,
-  children,
-  variant,
-  ...rest
+    className,
+    href,
+    download,
+    ariaLabel,
+    onClick,
+    children,
+    variant,
+    ...rest
 }) => {
-  let linkClass = 'qpp-c-link';
-  if (VARIANTS.includes(variant)) {
-    variant === 'gray'
-      ? (linkClass = linkClass.concat(' ', 'qpp-u-color--gray-60'))
-      : (linkClass = linkClass.concat(' ', `qpp-u-color--${variant}`));
-  }
+    let linkClass = "qpp-c-link";
+    if (VARIANTS.includes(variant)) {
+        variant === "gray"
+            ? (linkClass = linkClass.concat(" ", "qpp-u-color--gray-60"))
+            : (linkClass = linkClass.concat(" ", `qpp-u-color--${variant}`));
+    }
 
-  if (className) {
-    linkClass = linkClass.concat(' ', className);
-  }
+    if (className) {
+        linkClass = linkClass.concat(" ", className);
+    }
 
-  return (
-    <a
-      aria-label={ariaLabel}
-      className={linkClass || ''}
-      href={href}
-      download={download}
-      onClick={onClick}
-      {...rest}
-    >
-      {children}
-    </a>
-  );
+    return (
+        <a
+            aria-label={ariaLabel}
+            className={linkClass || ""}
+            href={href}
+            download={download}
+            onClick={onClick}
+            {...rest}
+        >
+            {children}
+        </a>
+    );
 };
 
 DSLink.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  href: PropTypes.string,
-  ariaLabel: PropTypes.string,
-  onClick: PropTypes.func,
-  download: PropTypes.bool,
-  variant: PropTypes.oneOf(VARIANTS),
+    children: PropTypes.node,
+    className: PropTypes.string,
+    href: PropTypes.string,
+    ariaLabel: PropTypes.string,
+    onClick: PropTypes.func,
+    download: PropTypes.bool,
+    variant: PropTypes.oneOf(VARIANTS),
 };
 
 DSLink.defaultProps = {
-  children: null,
-  className: '',
-  href: '',
-  ariaLabel: null,
-  onClick: () => null,
-  download: false,
-  variant: null,
+    children: null,
+    className: "",
+    href: "",
+    ariaLabel: null,
+    onClick: () => null,
+    download: false,
+    variant: null,
 };
 
 export default DSLink;

package/components/Modal/LegacyModal.jsx

@@ -1,72 +1,74 @@
-import React, { Component } from 'react';
-import { render } from 'react-dom';
-import ReactModal from 'react-modal';
-import { CloseXIcon } from '../../lib/SvgComponents.jsx';
-import SanitizedContent from '../SanitizedContent';
-import PropTypes from 'prop-types';
+import React, { Component } from "react";
+import { render } from "react-dom";
+import ReactModal from "react-modal";
+import { CloseXIcon } from "../../lib/SvgComponents.jsx";
+import SanitizedContent from "../SanitizedContent";
+import PropTypes from "prop-types";
 
 class Modal extends Component {
-  constructor() {
-    super();
+    constructor() {
+        super();
 
-    this.state = {
-      showModal: true,
-    };
+        this.state = {
+            showModal: true,
+        };
 
-    this.handleOpenModal = this.handleOpenModal.bind(this);
-    this.handleCloseModal = this.handleCloseModal.bind(this);
+        this.handleOpenModal = this.handleOpenModal.bind(this);
+        this.handleCloseModal = this.handleCloseModal.bind(this);
 
-    ReactModal.setAppElement('body > *:not(.ReactModalPortal)');
-  }
+        ReactModal.setAppElement("body > *:not(.ReactModalPortal)");
+    }
 
-  handleOpenModal() {
-    this.setState({ showModal: true });
-  }
+    handleOpenModal() {
+        this.setState({ showModal: true });
+    }
 
-  handleCloseModal() {
-    this.setState({ showModal: false });
-  }
+    handleCloseModal() {
+        this.setState({ showModal: false });
+    }
 
-  UNSAFE_componentWillReceiveProps(newProps) {
-    this.setState({
-      showModal: newProps.showModal,
-    });
-  }
+    UNSAFE_componentWillReceiveProps(newProps) {
+        this.setState({
+            showModal: newProps.showModal,
+        });
+    }
 
-  render() {
-    return (
-      <div>
-        <ReactModal
-          role="alertdialog"
-          contentLabel={this.props.contentLabel || 'Informational Modal Dialog'}
-          isOpen={this.state.showModal}
-          className="info-modal-content"
-          overlayClassName="info-modal-overlay"
-          onRequestClose={this.handleCloseModal}
-        >
-          <button
-            className="closeModal"
-            aria-label="Close modal"
-            onClick={this.handleCloseModal}
-          >
-            <svg className="close-icon" aria-hidden="true">
-              <CloseXIcon />
-            </svg>
-          </button>
-          <SanitizedContent html={this.props.content} />
-        </ReactModal>
-      </div>
-    );
-  }
+    render() {
+        return (
+            <div>
+                <ReactModal
+                    role="alertdialog"
+                    contentLabel={
+                        this.props.contentLabel || "Informational Modal Dialog"
+                    }
+                    isOpen={this.state.showModal}
+                    className="info-modal-content"
+                    overlayClassName="info-modal-overlay"
+                    onRequestClose={this.handleCloseModal}
+                >
+                    <button
+                        className="closeModal"
+                        aria-label="Close modal"
+                        onClick={this.handleCloseModal}
+                    >
+                        <svg className="close-icon" aria-hidden="true">
+                            <CloseXIcon />
+                        </svg>
+                    </button>
+                    <SanitizedContent html={this.props.content} />
+                </ReactModal>
+            </div>
+        );
+    }
 }
 
 const displayModal = ({ content, main }) => {
-  render(<Modal content={content} showModal={true} />, main);
+    render(<Modal content={content} showModal={true} />, main);
 };
 
 Modal.propTypes = {
-  contentLabel: PropTypes.string,
-  content: PropTypes.string,
+    contentLabel: PropTypes.string,
+    content: PropTypes.string,
 };
 
 export default displayModal;