@madie/madie-design-system 1.0.7 → 1.0.8

package/components/MadieSpinner/MadieSpinner.stories.js

@@ -0,0 +1,29 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { withKnobs } from "@storybook/addon-knobs";
+import MadieSpinner from "./index";
+
+export default {
+    title: "MadieSpinner",
+    component: MadieSpinner,
+    decorators: [withKnobs],
+};
+
+const Wrapper = ({ children }) => (
+    <div className="qpp-u-padding--16" style={{ width: 300 }}>
+        {children}
+    </div>
+);
+
+Wrapper.propTypes = {
+    className: PropTypes.string,
+    children: PropTypes.node,
+};
+
+export const ExampleSpinner = () => (
+    <Wrapper>
+        <MadieSpinner />
+    </Wrapper>
+)
+
+ExampleSpinner.storyName = "example Madie Spinner";

package/components/MadieSpinner/index.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { CircularProgress } from '@mui/material';
+import { makeStyles } from "@mui/styles";
+import PropTypes from "prop-types";
+
+// To change the spinner size you have to pass style props for height and width.
+const MadieSpinner = (props) => {
+    const useStyles = makeStyles({
+        svg: {
+            backgroundColor: 'transparent',
+            borderRadius: '100%',
+            // box shadow is our track. It needs to match the thickness of the svg element to look like it
+            // if we get a thickness value, we update our box shadow
+            boxShadow: `inset 0 0 0px ${props.thickness ? props.thickness : '7'}px #DDDDDD`,
+        },
+        circle: {
+            color: '#209FA6',
+            strokeLinecap: 'round',
+        }
+    });
+    const classes = useStyles();
+    return (
+    <CircularProgress
+        aria-label="loading-spinner"
+        classes={classes}
+        thickness={7}
+        style={{ height: 50, width: 50 }}
+        // Props overwrite whatever they want.
+        {...props}
+    />)
+}
+
+MadieSpinner.propTypes = {
+    thickness: PropTypes.number
+};
+
+export default MadieSpinner;

package/components/index.js

@@ -9,6 +9,7 @@ import Footer from "./Footer/FooterUI";
 import Header from "./Header/HeaderUI";
 import InputLabel from "./InputLabel";
 import FormControlLabel from "./FormControlLabel";
+import MadieSpinner from './MadieSpinner';
 import Modal from "./Modal";
 import { Pagination } from "./Pagination";
 import SideNav from "./SideNav/UI/SideNavUI";
@@ -120,6 +121,7 @@ export {
     Icons,
     Infotip,
     Modal,
+    MadieSpinner,
     Pagination,
     Search,
     Select,