@madie/madie-design-system 1.0.8 → 1.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -43,6 +43,12 @@ export const Danger = () => (
43
43
  </Container>
44
44
  );
45
45
 
46
+ export const DangerPrimary = () => (
47
+ <Container>
48
+ <Button variant="danger-primary">Button</Button>
49
+ </Container>
50
+ );
51
+
46
52
  export const Outline = () => (
47
53
  <Container className="qpp-u-fill--blue-80">
48
54
  <Button variant="outline">Button</Button>
@@ -1,7 +1,7 @@
1
1
  import React from "react";
2
2
  import PropTypes from "prop-types";
3
3
 
4
- const VARIANTS = ["secondary", "outline", "danger", "white"];
4
+ const VARIANTS = ["secondary", "outline", "cyan", "danger", "danger-primary", "white"];
5
5
  const SIZES = ["big"];
6
6
 
7
7
  const Button = ({
@@ -23,7 +23,7 @@ const useStyles = makeStyles({
23
23
  paddingBottom: 7.5,
24
24
  fontFamily: "Rubik",
25
25
  fontSize: 14,
26
- borderRadius: 3,
26
+ borderRadius: 3
27
27
  },
28
28
  },
29
29
  });
@@ -48,7 +48,7 @@ const Select = ({
48
48
  ...rest
49
49
  }) => {
50
50
  const classes = useStyles();
51
- const placehold = <span>{placeHolder?.name || "placeholder"}</span>;
51
+ const placehold = <span style={{ opacity: .6 }}>{placeHolder?.name || "placeholder"}</span>;
52
52
  return (
53
53
  <FormControl error={error} fullWidth>
54
54
  <InputLabel
@@ -28,7 +28,7 @@ const useStyles = makeStyles({
28
28
  borderRadius: 3,
29
29
  padding: "9px 14px",
30
30
  "&::placeholder": {
31
- opacity: 1,
31
+ opacity: .6,
32
32
  },
33
33
  },
34
34
  },
@@ -0,0 +1,49 @@
1
+ import React, { useState } from "react";
2
+ import { withKnobs } from "@storybook/addon-knobs";
3
+ import Toast from './index'
4
+
5
+ export default {
6
+ title: "Toast",
7
+ component: Toast,
8
+ decorators: [withKnobs],
9
+ };
10
+
11
+ export const SuccessToast = () => {
12
+ const [toastOpen, setToastOpen] = useState(false);
13
+ return (
14
+ <div style={{ height: '100vh', width: '100vw', backgroundColor: '#242424'}}>
15
+ <button onClick={() => setToastOpen(true)} style={{ position: 'absolute', top: '50%', left: 'calc(50% - 80px)'}}>
16
+ Simulate Success
17
+ </button>
18
+ <Toast
19
+ toastKey='toast-key'
20
+ testId="success-toast"
21
+ toastType='success'
22
+ open={toastOpen}
23
+ message='An action has successfully been completed'
24
+ onClose={() => setToastOpen(false)}
25
+ autoHideDuration={3000}
26
+ />
27
+ </div>
28
+ )
29
+ }
30
+
31
+ export const DangerToast = () => {
32
+ const [toastOpen, setToastOpen] = useState(false);
33
+ return (
34
+ <div style={{ height: '100vh', width: '100vw', backgroundColor: '#242424'}}>
35
+ <button onClick={() => setToastOpen(true)} style={{ position: 'absolute', top: '50%', left: 'calc(50% - 80px)'}}>
36
+ Simulate Danger
37
+ </button>
38
+ <Toast
39
+ toastKey='toast-key'
40
+ toastType='danger'
41
+ testId="danger-toast"
42
+ open={toastOpen}
43
+ message='Something has gone wrong. Please try again'
44
+ onClose={() => setToastOpen(false)}
45
+ autoHideDuration={3000}
46
+ />
47
+ </div>
48
+ )
49
+ }
@@ -0,0 +1,121 @@
1
+ import React from 'react';
2
+ import { IconButton, Snackbar } from '@mui/material';
3
+ import CloseIcon from '@mui/icons-material/Close';
4
+ import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
5
+ import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
6
+
7
+ const Toast = ({
8
+ open,
9
+ message,
10
+ toastType, // 'danger | success, more later when mockups come out
11
+ autoHideDuration,
12
+ onClose,
13
+ testId,
14
+ toastKey,
15
+ ...rest
16
+ }) => {
17
+ const dangerColor = '#D92F2F'
18
+ const successColor = '#4d7e23'
19
+ // we can map our colors and icons to make this reusable for multiple info types.
20
+ const colorMap = {
21
+ danger: dangerColor,
22
+ success: successColor
23
+ }
24
+ const iconMap = {
25
+ danger: ErrorOutlineIcon,
26
+ success: CheckCircleOutlineIcon
27
+ }
28
+ const selectedColor = colorMap[toastType];
29
+ const SelectedIcon = iconMap[toastType];
30
+
31
+ const Message = (
32
+ <div className='messageCont'>
33
+ <div>
34
+ <div className='errorCont'>
35
+ {SelectedIcon && (
36
+ <SelectedIcon
37
+ className='leftIcon'
38
+ />
39
+ )}
40
+ </div>
41
+ <p className='messageText' data-testid={testId}>
42
+ {message}
43
+ </p>
44
+ </div>
45
+ <div style={{display: 'block'}}>
46
+ <IconButton
47
+ className='icon-button'
48
+ aria-label="close"
49
+ color="inherit"
50
+ sx={{ p: 0}}
51
+ onClick={onClose}
52
+ >
53
+ <CloseIcon />
54
+ </IconButton>
55
+ </div>
56
+ </div>
57
+ )
58
+ return (
59
+ <Snackbar
60
+ key={toastKey ? toastKey : undefined}
61
+ anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
62
+ sx={{
63
+ overflow:'hidden',
64
+ color: selectedColor,
65
+ borderRadius: 1,
66
+ '& .MuiPaper-root': {
67
+ backgroundColor: '#fff',
68
+ padding: 0,
69
+ color: selectedColor
70
+ },
71
+ '& .MuiSvgIcon-root': {
72
+ color: '#242424'
73
+ },
74
+ '& .MuiSnackbarContent-message': {
75
+ padding: 0,
76
+ flexGrow: 1,
77
+ '.messageCont': {
78
+ display: 'flex',
79
+ flexDirection: 'row',
80
+ flexGrow: 1,
81
+ justifyContent: 'space-between',
82
+ 'div': {
83
+ display: 'flex',
84
+ '.messageText':{
85
+ m: 0,
86
+ p: 2.375,
87
+ fontFamily: 'Rubik',
88
+ fontWeight: 500,
89
+ fontSize: 14
90
+ },
91
+ '.errorCont':{
92
+ backgroundColor: selectedColor,
93
+ '.leftIcon':{
94
+ m: 2,
95
+ color: '#fff'
96
+ }
97
+ },
98
+ '.icon-button':{
99
+ m: 2,
100
+ '&. MuiSvgIcon-root': {
101
+ color: '#242424'
102
+ }
103
+ }
104
+ }
105
+ },
106
+ '& .MuiSvgIcon-root': {
107
+ color: '#242424'
108
+
109
+ }
110
+ }
111
+ }}
112
+
113
+ autoHideDuration={autoHideDuration}
114
+ open={open}
115
+ onClose={onClose}
116
+ message={message ? Message : undefined}
117
+ {...rest}
118
+ />)
119
+ }
120
+
121
+ export default Toast;
@@ -19,6 +19,7 @@ import TabPanel from "./Tabs/TabPanel";
19
19
  import Tabs from "./Tabs/index";
20
20
  import TextField from "./TextField";
21
21
  import Tooltip from "./Tooltip";
22
+ import Toast from './Toast';
22
23
  import Infotip from "./Infotip";
23
24
  import Search from "./Search";
24
25
  import TextInput from "./TextInput";
@@ -132,6 +133,7 @@ export {
132
133
  TextButton,
133
134
  TextInput,
134
135
  TextField,
136
+ Toast,
135
137
  Dropdown,
136
138
  Tooltip,
137
139
  DSLink,
@@ -1,38 +1,18 @@
1
1
  <?xml version="1.0" encoding="UTF-8"?>
2
- <coverage generated="1648742412068" clover="3.2.0">
3
- <project timestamp="1648742412068" name="All files">
4
- <metrics statements="14" coveredstatements="10" conditionals="8" coveredconditionals="2" methods="3" coveredmethods="1" elements="25" coveredelements="13" complexity="0" loc="14" ncloc="14" packages="3" files="3" classes="3"/>
5
- <package name="InputLabel">
6
- <metrics statements="4" coveredstatements="2" conditionals="0" coveredconditionals="0" methods="1" coveredmethods="0"/>
7
- <file name="index.jsx" path="/Users/matt.mcphillips/madie/madie-design-system/react/components/InputLabel/index.jsx">
8
- <metrics statements="4" coveredstatements="2" conditionals="0" coveredconditionals="0" methods="1" coveredmethods="0"/>
9
- <line num="4" count="1" type="stmt"/>
10
- <line num="44" count="1" type="stmt"/>
11
- <line num="45" count="0" type="stmt"/>
12
- <line num="46" count="0" type="stmt"/>
13
- </file>
14
- </package>
15
- <package name="MadieSpinner">
16
- <metrics statements="5" coveredstatements="5" conditionals="2" coveredconditionals="2" methods="1" coveredmethods="1"/>
17
- <file name="index.jsx" path="/Users/matt.mcphillips/madie/madie-design-system/react/components/MadieSpinner/index.jsx">
18
- <metrics statements="5" coveredstatements="5" conditionals="2" coveredconditionals="2" methods="1" coveredmethods="1"/>
19
- <line num="7" count="1" type="stmt"/>
20
- <line num="8" count="2" type="stmt"/>
21
- <line num="21" count="2" type="stmt"/>
22
- <line num="22" count="2" type="stmt"/>
23
- <line num="33" count="1" type="stmt"/>
24
- </file>
25
- </package>
26
- <package name="TextField">
27
- <metrics statements="5" coveredstatements="3" conditionals="6" coveredconditionals="0" methods="1" coveredmethods="0"/>
28
- <file name="index.jsx" path="/Users/matt.mcphillips/madie/madie-design-system/react/components/TextField/index.jsx">
29
- <metrics statements="5" coveredstatements="3" conditionals="6" coveredconditionals="0" methods="1" coveredmethods="0"/>
30
- <line num="7" count="1" type="stmt"/>
31
- <line num="37" count="1" type="stmt"/>
32
- <line num="46" count="0" type="stmt"/>
33
- <line num="47" count="0" type="stmt"/>
34
- <line num="71" count="1" type="stmt"/>
35
- </file>
36
- </package>
2
+ <coverage generated="1649362611284" clover="3.2.0">
3
+ <project timestamp="1649362611284" name="All files">
4
+ <metrics statements="9" coveredstatements="9" conditionals="6" coveredconditionals="4" methods="1" coveredmethods="1" elements="16" coveredelements="14" complexity="0" loc="9" ncloc="9" packages="1" files="1" classes="1"/>
5
+ <file name="index.jsx" path="/Users/matt.mcphillips/madie/madie-design-system/react/components/Toast/index.jsx">
6
+ <metrics statements="9" coveredstatements="9" conditionals="6" coveredconditionals="4" methods="1" coveredmethods="1"/>
7
+ <line num="7" count="1" type="stmt"/>
8
+ <line num="17" count="6" type="stmt"/>
9
+ <line num="18" count="6" type="stmt"/>
10
+ <line num="20" count="6" type="stmt"/>
11
+ <line num="24" count="6" type="stmt"/>
12
+ <line num="28" count="6" type="stmt"/>
13
+ <line num="29" count="6" type="stmt"/>
14
+ <line num="32" count="6" type="stmt"/>
15
+ <line num="58" count="6" type="stmt"/>
16
+ </file>
37
17
  </project>
38
18
  </coverage>
@@ -1,4 +1,2 @@
1
- {"/Users/matt.mcphillips/madie/madie-design-system/react/components/InputLabel/index.jsx": {"path":"/Users/matt.mcphillips/madie/madie-design-system/react/components/InputLabel/index.jsx","statementMap":{"0":{"start":{"line":4,"column":18},"end":{"line":43,"column":2}},"1":{"start":{"line":44,"column":14},"end":{"line":57,"column":1}},"2":{"start":{"line":45,"column":20},"end":{"line":45,"column":31}},"3":{"start":{"line":46,"column":4},"end":{"line":56,"column":6}}},"fnMap":{"0":{"name":"(anonymous_0)","decl":{"start":{"line":44,"column":14},"end":{"line":44,"column":15}},"loc":{"start":{"line":44,"column":25},"end":{"line":57,"column":1}},"line":44}},"branchMap":{},"s":{"0":1,"1":1,"2":0,"3":0},"f":{"0":0},"b":{},"_coverageSchema":"1a1c01bbd47fc00a2c39e90264f33305004495a9","hash":"3d4743e7c6bda9e57bbde0a9120716f3681ff921"}
2
- ,"/Users/matt.mcphillips/madie/madie-design-system/react/components/MadieSpinner/index.jsx": {"path":"/Users/matt.mcphillips/madie/madie-design-system/react/components/MadieSpinner/index.jsx","statementMap":{"0":{"start":{"line":7,"column":21},"end":{"line":31,"column":1}},"1":{"start":{"line":8,"column":22},"end":{"line":20,"column":6}},"2":{"start":{"line":21,"column":20},"end":{"line":21,"column":31}},"3":{"start":{"line":22,"column":4},"end":{"line":30,"column":7}},"4":{"start":{"line":33,"column":0},"end":{"line":35,"column":2}}},"fnMap":{"0":{"name":"(anonymous_0)","decl":{"start":{"line":7,"column":21},"end":{"line":7,"column":22}},"loc":{"start":{"line":7,"column":32},"end":{"line":31,"column":1}},"line":7}},"branchMap":{"0":{"loc":{"start":{"line":14,"column":40},"end":{"line":14,"column":79}},"type":"cond-expr","locations":[{"start":{"line":14,"column":58},"end":{"line":14,"column":73}},{"start":{"line":14,"column":76},"end":{"line":14,"column":79}}],"line":14}},"s":{"0":1,"1":2,"2":2,"3":2,"4":1},"f":{"0":2},"b":{"0":[1,1]},"_coverageSchema":"1a1c01bbd47fc00a2c39e90264f33305004495a9","hash":"2f68cb705a104710cba663fc82ac94c581e50ab7"}
3
- ,"/Users/matt.mcphillips/madie/madie-design-system/react/components/TextField/index.jsx": {"path":"/Users/matt.mcphillips/madie/madie-design-system/react/components/TextField/index.jsx","statementMap":{"0":{"start":{"line":7,"column":18},"end":{"line":36,"column":2}},"1":{"start":{"line":37,"column":18},"end":{"line":69,"column":1}},"2":{"start":{"line":46,"column":20},"end":{"line":46,"column":31}},"3":{"start":{"line":47,"column":4},"end":{"line":68,"column":6}},"4":{"start":{"line":71,"column":0},"end":{"line":79,"column":2}}},"fnMap":{"0":{"name":"(anonymous_0)","decl":{"start":{"line":37,"column":18},"end":{"line":37,"column":19}},"loc":{"start":{"line":45,"column":6},"end":{"line":69,"column":1}},"line":45}},"branchMap":{"0":{"loc":{"start":{"line":39,"column":4},"end":{"line":39,"column":17}},"type":"default-arg","locations":[{"start":{"line":39,"column":12},"end":{"line":39,"column":17}}],"line":39},"1":{"loc":{"start":{"line":40,"column":4},"end":{"line":40,"column":26}},"type":"default-arg","locations":[{"start":{"line":40,"column":17},"end":{"line":40,"column":26}}],"line":40},"2":{"loc":{"start":{"line":41,"column":4},"end":{"line":41,"column":20}},"type":"default-arg","locations":[{"start":{"line":41,"column":15},"end":{"line":41,"column":20}}],"line":41},"3":{"loc":{"start":{"line":42,"column":4},"end":{"line":42,"column":20}},"type":"default-arg","locations":[{"start":{"line":42,"column":15},"end":{"line":42,"column":20}}],"line":42},"4":{"loc":{"start":{"line":66,"column":13},"end":{"line":66,"column":37}},"type":"binary-expr","locations":[{"start":{"line":66,"column":13},"end":{"line":66,"column":23}},{"start":{"line":66,"column":27},"end":{"line":66,"column":37}}],"line":66}},"s":{"0":1,"1":1,"2":0,"3":0,"4":1},"f":{"0":0},"b":{"0":[0],"1":[0],"2":[0],"3":[0],"4":[0,0]},"_coverageSchema":"1a1c01bbd47fc00a2c39e90264f33305004495a9","hash":"6431a4c4abfb2d666cd6bbcc7ba52aed0d0cc51d"}
1
+ {"/Users/matt.mcphillips/madie/madie-design-system/react/components/Toast/index.jsx": {"path":"/Users/matt.mcphillips/madie/madie-design-system/react/components/Toast/index.jsx","statementMap":{"0":{"start":{"line":7,"column":14},"end":{"line":119,"column":1}},"1":{"start":{"line":17,"column":24},"end":{"line":17,"column":33}},"2":{"start":{"line":18,"column":25},"end":{"line":18,"column":34}},"3":{"start":{"line":20,"column":21},"end":{"line":23,"column":5}},"4":{"start":{"line":24,"column":20},"end":{"line":27,"column":5}},"5":{"start":{"line":28,"column":26},"end":{"line":28,"column":45}},"6":{"start":{"line":29,"column":25},"end":{"line":29,"column":43}},"7":{"start":{"line":32,"column":4},"end":{"line":56,"column":10}},"8":{"start":{"line":58,"column":4},"end":{"line":118,"column":9}}},"fnMap":{"0":{"name":"(anonymous_0)","decl":{"start":{"line":7,"column":14},"end":{"line":7,"column":15}},"loc":{"start":{"line":16,"column":6},"end":{"line":119,"column":1}},"line":16}},"branchMap":{"0":{"loc":{"start":{"line":35,"column":13},"end":{"line":39,"column":13}},"type":"binary-expr","locations":[{"start":{"line":35,"column":13},"end":{"line":35,"column":25}},{"start":{"line":36,"column":16},"end":{"line":38,"column":18}}],"line":35},"1":{"loc":{"start":{"line":60,"column":17},"end":{"line":60,"column":48}},"type":"cond-expr","locations":[{"start":{"line":60,"column":28},"end":{"line":60,"column":36}},{"start":{"line":60,"column":39},"end":{"line":60,"column":48}}],"line":60},"2":{"loc":{"start":{"line":116,"column":17},"end":{"line":116,"column":46}},"type":"cond-expr","locations":[{"start":{"line":116,"column":27},"end":{"line":116,"column":34}},{"start":{"line":116,"column":37},"end":{"line":116,"column":46}}],"line":116}},"s":{"0":1,"1":6,"2":6,"3":6,"4":6,"5":6,"6":6,"7":6,"8":6},"f":{"0":6},"b":{"0":[6,6],"1":[6,0],"2":[6,0]},"_coverageSchema":"1a1c01bbd47fc00a2c39e90264f33305004495a9","hash":"cff985a62b05381cbe68d5049f8b41d578588500"}
4
2
  }
@@ -23,30 +23,30 @@
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
- <span class="strong">71.42% </span>
26
+ <span class="strong">100% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>10/14</span>
28
+ <span class='fraction'>9/9</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
- <span class="strong">25% </span>
33
+ <span class="strong">66.66% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>2/8</span>
35
+ <span class='fraction'>4/6</span>
36
36
  </div>
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
- <span class="strong">33.33% </span>
40
+ <span class="strong">100% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>1/3</span>
42
+ <span class='fraction'>1/1</span>
43
43
  </div>
44
44
 
45
45
 
46
46
  <div class='fl pad1y space-right2'>
47
- <span class="strong">71.42% </span>
47
+ <span class="strong">100% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>10/14</span>
49
+ <span class='fraction'>9/9</span>
50
50
  </div>
51
51
 
52
52
 
@@ -61,7 +61,7 @@
61
61
  </div>
62
62
  </template>
63
63
  </div>
64
- <div class='status-line medium'></div>
64
+ <div class='status-line high'></div>
65
65
  <div class="pad1">
66
66
  <table class="coverage-summary">
67
67
  <thead>
@@ -79,48 +79,18 @@
79
79
  </tr>
80
80
  </thead>
81
81
  <tbody><tr>
82
- <td class="file medium" data-value="InputLabel"><a href="InputLabel/index.html">InputLabel</a></td>
83
- <td data-value="50" class="pic medium">
84
- <div class="chart"><div class="cover-fill" style="width: 50%"></div><div class="cover-empty" style="width: 50%"></div></div>
85
- </td>
86
- <td data-value="50" class="pct medium">50%</td>
87
- <td data-value="4" class="abs medium">2/4</td>
88
- <td data-value="100" class="pct high">100%</td>
89
- <td data-value="0" class="abs high">0/0</td>
90
- <td data-value="0" class="pct low">0%</td>
91
- <td data-value="1" class="abs low">0/1</td>
92
- <td data-value="50" class="pct medium">50%</td>
93
- <td data-value="4" class="abs medium">2/4</td>
94
- </tr>
95
-
96
- <tr>
97
- <td class="file high" data-value="MadieSpinner"><a href="MadieSpinner/index.html">MadieSpinner</a></td>
82
+ <td class="file high" data-value="index.jsx"><a href="index.jsx.html">index.jsx</a></td>
98
83
  <td data-value="100" class="pic high">
99
84
  <div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
100
85
  </td>
101
86
  <td data-value="100" class="pct high">100%</td>
102
- <td data-value="5" class="abs high">5/5</td>
103
- <td data-value="100" class="pct high">100%</td>
104
- <td data-value="2" class="abs high">2/2</td>
87
+ <td data-value="9" class="abs high">9/9</td>
88
+ <td data-value="66.66" class="pct medium">66.66%</td>
89
+ <td data-value="6" class="abs medium">4/6</td>
105
90
  <td data-value="100" class="pct high">100%</td>
106
91
  <td data-value="1" class="abs high">1/1</td>
107
92
  <td data-value="100" class="pct high">100%</td>
108
- <td data-value="5" class="abs high">5/5</td>
109
- </tr>
110
-
111
- <tr>
112
- <td class="file medium" data-value="TextField"><a href="TextField/index.html">TextField</a></td>
113
- <td data-value="60" class="pic medium">
114
- <div class="chart"><div class="cover-fill" style="width: 60%"></div><div class="cover-empty" style="width: 40%"></div></div>
115
- </td>
116
- <td data-value="60" class="pct medium">60%</td>
117
- <td data-value="5" class="abs medium">3/5</td>
118
- <td data-value="0" class="pct low">0%</td>
119
- <td data-value="6" class="abs low">0/6</td>
120
- <td data-value="0" class="pct low">0%</td>
121
- <td data-value="1" class="abs low">0/1</td>
122
- <td data-value="60" class="pct medium">60%</td>
123
- <td data-value="5" class="abs medium">3/5</td>
93
+ <td data-value="9" class="abs high">9/9</td>
124
94
  </tr>
125
95
 
126
96
  </tbody>
@@ -131,7 +101,7 @@
131
101
  <div class='footer quiet pad2 space-top1 center small'>
132
102
  Code coverage generated by
133
103
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
134
- at Thu Mar 31 2022 09:00:12 GMT-0700 (Pacific Daylight Time)
104
+ at Thu Apr 07 2022 13:16:51 GMT-0700 (Pacific Daylight Time)
135
105
  </div>
136
106
  <script src="prettify.js"></script>
137
107
  <script>