@madie/madie-design-system 1.0.47 → 1.0.49

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.
Files changed (53) hide show
  1. package/.babelrc +2 -8
  2. package/.eslintrc.js +15 -15
  3. package/.storybook/main.js +39 -40
  4. package/.storybook/preview-head.html +3 -3
  5. package/.storybook/preview.js +2 -2
  6. package/README.md +0 -1
  7. package/components/AutoComplete/AutoComplete.jsx +56 -46
  8. package/components/AutoComplete/AutoComplete.stories.js +18 -7
  9. package/components/Breadcrumb/Breadcrumb.md +7 -7
  10. package/components/DateField/DateField.jsx +85 -0
  11. package/components/DateField/DateField.stories.jsx +25 -0
  12. package/components/MadieDeleteDialog/MadieDeleteDialog.stories.js +1 -1
  13. package/components/MadieDeleteDialog/index.jsx +1 -1
  14. package/components/Pagination/index.jsx +6 -8
  15. package/components/Popover/Popover.stories.js +7 -5
  16. package/components/Popover/index.js +2 -1
  17. package/components/RadioButton/RadioButton.jsx +29 -20
  18. package/components/RadioButton/RadioButton.stories.jsx +4 -4
  19. package/components/Select/Select.stories.js +76 -73
  20. package/components/Select/index.jsx +54 -43
  21. package/components/Tabs/Tab.js +24 -31
  22. package/components/Tabs/Tabs.stories.js +157 -42
  23. package/components/Tabs/index.js +22 -30
  24. package/components/TextArea/TextArea.stories.js +7 -3
  25. package/components/TextArea/index.jsx +64 -56
  26. package/components/TextField/TextField.stories.js +37 -34
  27. package/components/TextField/index.jsx +89 -77
  28. package/components/Toast/index.jsx +3 -1
  29. package/components/index.js +3 -1
  30. package/dist/browser.js +1 -1
  31. package/dist/index.js +1 -1
  32. package/dist/react/index.js +19 -19
  33. package/dist/react/index.js.LICENSE.txt +9 -0
  34. package/dist/react/index.js.map +1 -1
  35. package/index.js +9 -10
  36. package/jest/mediaFileTransformer.js +2 -2
  37. package/jest.config.js +7 -7
  38. package/lib/Chevron.jsx +22 -22
  39. package/lib/SvgComponents.jsx +384 -359
  40. package/package.json +3 -1
  41. package/storybook-static/602.f6d1ca28.iframe.bundle.js +103 -0
  42. package/storybook-static/{533.ce3f16be.iframe.bundle.js.map → 602.f6d1ca28.iframe.bundle.js.map} +1 -1
  43. package/storybook-static/iframe.html +1 -1
  44. package/storybook-static/main.04a59fc2.iframe.bundle.js +1 -0
  45. package/storybook-static/project.json +1 -1
  46. package/svgo.config.js +1 -1
  47. package/test/components/DateField.test.js +29 -0
  48. package/test-setup.js +4 -4
  49. package/webpack.config.js +116 -116
  50. package/webpack.config.react.js +69 -69
  51. package/storybook-static/533.ce3f16be.iframe.bundle.js +0 -103
  52. package/storybook-static/main.24906d7d.iframe.bundle.js +0 -1
  53. /package/storybook-static/{533.ce3f16be.iframe.bundle.js.LICENSE.txt → 602.f6d1ca28.iframe.bundle.js.LICENSE.txt} +0 -0
package/components/TextField/index.jsx CHANGED
@@ -18,103 +18,115 @@ const TextField = ({
18
18
  }) => {
19
19
  return (
20
20
  <FormControl fullWidth error={error}>
21
- <div style={{ width: 1, display: "flex", flexDirection: "column", flexGrow: 1}}/>
21
+ <div
22
+ style={{
23
+ width: 1,
24
+ display: "flex",
25
+ flexDirection: "column",
26
+ flexGrow: 1,
27
+ }}
28
+ />
22
29
  <InputLabel
23
30
  disabled={disabled}
24
31
  shrink
25
32
  required={required}
26
33
  error={error}
27
34
  htmlFor={id}
28
- style={{marginBottom: 0, height: 16}} // force a heignt
35
+ style={{ marginBottom: 0, height: 16 }} // force a heignt
29
36
  sx={[
30
- {
31
- backgroundColor: "transparent",
32
- display: "flex",
33
- flexDirection: "row-reverse",
34
- alignSelf: "baseline",
35
- textTransform: "none",
36
- // force it outside the select box
37
- position: "initial",
38
- transform: "translateX(0px) translateY(0px)",
39
- fontFamily: "Rubik",
40
- fontWeight: 500,
41
- fontSize: 14,
42
- color: "#333",
43
- "& .MuiInputLabel-asterisk": {
44
- color: "#AE1C1C !important",
45
- marginRight: "3px !important", //this was
37
+ {
38
+ backgroundColor: "transparent",
39
+ display: "flex",
40
+ flexDirection: "row-reverse",
41
+ alignSelf: "baseline",
42
+ textTransform: "none",
43
+ // force it outside the select box
44
+ position: "initial",
45
+ transform: "translateX(0px) translateY(0px)",
46
+ fontFamily: "Rubik",
47
+ fontWeight: 500,
48
+ fontSize: 14,
49
+ color: "#333",
50
+ "& .MuiInputLabel-asterisk": {
51
+ color: "#AE1C1C !important",
52
+ marginRight: "3px !important", //this was
53
+ },
54
+ },
55
+ required && {
56
+ transform: "translateX(-12px) translateY(0px)",
57
+ "& .MuiInputLabel-asterisk": {
58
+ color: "#D92F2",
59
+ marginRight: "3px !important", //this was
60
+ },
61
+ },
62
+ disabled && {
63
+ color: "rgba(0,0,0,0.6)",
46
64
  },
47
- },
48
- required && {
49
- transform: "translateX(-12px) translateY(0px)",
50
- "& .MuiInputLabel-asterisk": {
51
- color: "#D92F2",
52
- marginRight: "3px !important", //this was
65
+ error && {
66
+ color: "#AE1C1C !important",
53
67
  },
54
- },
55
- disabled && {
56
- color: "rgba(0,0,0,0.6)",
57
- },
58
- error && {
59
- color: "#AE1C1C !important",
60
- },
61
- ]}
68
+ ]}
62
69
  >
63
70
  {label}
64
71
  </InputLabel>
65
- { helperText && (<FormHelperText
66
- tabIndex={0}
67
- aria-live="polite"
68
- id={`${id}-helper-text`}
69
- data-testid={`${id}-helper-text`}
70
- sx={[{
71
- margin: "4px 0px 0px 0px",
72
- color: "#515151",
73
- lineHeight: 1
74
- },
75
- error && {
76
- color: "#AE1C1C !important",
77
- },
78
- ]}
79
- >
80
- {helperText}
81
- </FormHelperText>)}
72
+ {helperText && (
73
+ <FormHelperText
74
+ tabIndex={0}
75
+ aria-live="polite"
76
+ id={`${id}-helper-text`}
77
+ data-testid={`${id}-helper-text`}
78
+ sx={[
79
+ {
80
+ margin: "4px 0px 0px 0px",
81
+ color: "#515151",
82
+ lineHeight: 1,
83
+ },
84
+ error && {
85
+ color: "#AE1C1C !important",
86
+ },
87
+ ]}
88
+ >
89
+ {helperText}
90
+ </FormHelperText>
91
+ )}
82
92
  <MUITextField
83
- sx={[{
84
- borderRadius: "3px",
85
- height: 40, //there's a .13 coming from somewhere.
86
- border: "1px solid #DDDDDD",
87
- marginTop: "8px",
88
- // remove weird line break from legend
89
- "& .MuiOutlinedInput-notchedOutline": {
93
+ sx={[
94
+ {
90
95
  borderRadius: "3px",
91
- "& legend": {
92
- width: 0,
96
+ height: 40, //there's a .13 coming from somewhere.
97
+ border: "1px solid #DDDDDD",
98
+ marginTop: "8px",
99
+ // remove weird line break from legend
100
+ "& .MuiOutlinedInput-notchedOutline": {
101
+ borderRadius: "3px",
102
+ "& legend": {
103
+ width: 0,
104
+ },
93
105
  },
94
- },
95
- "& .MuiOutlinedInput-root": {
96
- "&&": {
106
+ "& .MuiOutlinedInput-root": {
107
+ "&&": {
108
+ borderRadius: "3px",
109
+ },
110
+ },
111
+ // input base selector
112
+ "& .MuiInputBase-input": {
113
+ color: "#333",
114
+ fontFamily: "Rubik",
115
+ fontSize: 14,
97
116
  borderRadius: "3px",
117
+ padding: "9px 14px",
118
+ "&::placeholder": {
119
+ opacity: 1,
120
+ color: "#717171",
121
+ },
98
122
  },
99
123
  },
100
- // input base selector
101
- "& .MuiInputBase-input": {
102
- color: "#333",
103
- fontFamily: "Rubik",
104
- fontSize: 14,
105
- borderRadius: "3px",
106
- padding: "9px 14px",
107
- "&::placeholder": {
108
- opacity: 1,
109
- color: "#717171"
124
+ error && {
125
+ "& .MuiOutlinedInput-notchedOutline": {
126
+ borderColor: "#AE1C1C !important",
110
127
  },
111
128
  },
112
- },
113
- error && {
114
- "& .MuiOutlinedInput-notchedOutline": {
115
- borderColor: "#AE1C1C !important",
116
- },
117
- }]}
129
+ ]}
118
130
  label={null}
119
131
  error={error}
120
132
  disabled={disabled}
package/components/Toast/index.jsx CHANGED
@@ -46,7 +46,9 @@ const Toast = ({
46
46
  message={
47
47
  <div className={toastClass} {...toastProps}>
48
48
  <Icon className={iconClass} />
49
- <div id="message" data-testid={testId}>{message}</div>
49
+ <div id="message" data-testid={testId}>
50
+ {message}
51
+ </div>
50
52
  {canClose && (
51
53
  <IconButton
52
54
  onClick={onClose}
package/components/index.js CHANGED
@@ -5,6 +5,7 @@ import Breadcrumb from "./Breadcrumb";
5
5
  import Button, { TextButton } from "./Button";
6
6
  import CalloutBox from "./CalloutBox";
7
7
  import Card from "./Card";
8
+ import DateField from "./DateField/DateField";
8
9
  import FlashNotification from "./FlashNotification/FlashNotificationUI";
9
10
  import Footer from "./Footer/FooterUI";
10
11
  import InputLabel from "./InputLabel";
@@ -25,7 +26,7 @@ import TabPanel from "./Tabs/TabPanel";
25
26
  import Tabs from "./Tabs/index";
26
27
  import Tab from "./Tabs/Tab";
27
28
  import TextField from "./TextField";
28
- import TextArea from './TextArea';
29
+ import TextArea from "./TextArea";
29
30
  import Tooltip from "./Tooltip";
30
31
  import Toast from "./Toast";
31
32
  import Infotip from "./Infotip";
@@ -123,6 +124,7 @@ export {
123
124
  Button,
124
125
  CalloutBox,
125
126
  Card,
127
+ DateField,
126
128
  FlashNotification,
127
129
  Footer,
128
130
  FormControlLabel,