@madie/madie-design-system 1.2.31 → 1.2.32

package/.babelrc

@@ -1,4 +1,4 @@
 {
     "presets": ["@babel/preset-react", "@babel/preset-env"],
-    "plugins": ["transform-es2015-modules-umd", "transform-class-properties"]
+    "plugins": ["@babel/plugin-transform-modules-umd", "@babel/plugin-transform-class-properties"]
 }

package/.storybook/.babelrc

@@ -1,4 +1,4 @@
 {
     "presets": ["@babel/preset-react", "@babel/preset-env"],
-    "plugins": ["transform-class-properties"]
+    "plugins": ["@babel/plugin-transform-class-properties"]
 }

package/.storybook/main.js

@@ -1,11 +1,9 @@
 module.exports = {
-    core: {
-        builder: "webpack5",
-    },
     stories: [
-        "../components/**/*.stories.@(js|jsx|mdx)",
-        "../lib/**/*.stories.@(js|jsx|mdx)",
+        "../components/**/*.@(mdx|stories.@(js|jsx))",
+        "../lib/**/*.@(mdx|stories.@(js|jsx))"
     ],
+
     addons: [
         "@storybook/addon-actions",
         "@storybook/addon-links",
@@ -16,7 +14,9 @@ module.exports = {
         "@storybook/addon-backgrounds",
         "@storybook/addon-viewport",
         "@storybook/addon-postcss",
+        "@storybook/addon-webpack5-compiler-babel"
     ],
+
     webpackFinal: async (config) => {
         // do mutation to the config
 
@@ -42,4 +42,15 @@ module.exports = {
 
         return config;
     },
+
+    framework: {
+        name: "@storybook/react-webpack5",
+        options: {}
+    },
+
+    docs: {},
+
+    typescript: {
+        reactDocgen: "react-docgen-typescript"
+    }
 };

package/.storybook/preview.js

@@ -3,3 +3,4 @@ import "../../react/styles/_main.scss";
 export const parameters = {
     layout: "fullscreen",
 };
+export const tags = ["autodocs"];

package/components/TextField/TextField.stories.js

@@ -2,7 +2,9 @@ import React from "react";
 import PropTypes from "prop-types";
 import { withKnobs } from "@storybook/addon-knobs";
 import TextField from "./index";
-import { FormHelperText } from "@mui/material";
+import { FormHelperText, IconButton, InputAdornment } from "@mui/material";
+import SearchIcon from "@mui/icons-material/Search";
+import ClearIcon from "@mui/icons-material/Clear";
 export default {
     title: "TextField",
     component: TextField,
@@ -18,6 +20,7 @@ Wrapper.propTypes = {
     className: PropTypes.string,
     children: PropTypes.node,
 };
+
 export const Textfield = () => (
     <Wrapper>
         <TextField
@@ -152,3 +155,35 @@ export const VariedHeights = () => (
         </div>
     </div>
 );
+
+export const WithLeftAndRightIcon = () => (
+    <Wrapper>
+        <TextField
+            id="search"
+            tw="w-full"
+            label="Search"
+            placeholder="Search"
+            inputProps={{
+                "data-testid": "test-case-list-search-input",
+            }}
+            data-testid="test-case-list-search"
+            slotProps={{
+                input: {
+                    startAdornment: (
+                        <InputAdornment position="start">
+                            <SearchIcon />
+                        </InputAdornment>
+                    ),
+                    endAdornment: (
+                        <InputAdornment position="end">
+                            <IconButton onClick="">
+                                <ClearIcon />
+                            </IconButton>
+                        </InputAdornment>
+                    ),
+                },
+            }}
+            name="test-case-list-search"
+        />
+    </Wrapper>
+);

package/coverage/clover.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<coverage generated="1726059836699" clover="3.2.0">
-  <project timestamp="1726059836700" name="All files">
+<coverage generated="1726509703160" clover="3.2.0">
+  <project timestamp="1726509703160" name="All files">
     <metrics statements="396" coveredstatements="382" conditionals="318" coveredconditionals="274" methods="114" coveredmethods="107" elements="828" coveredelements="763" complexity="0" loc="396" ncloc="396" packages="26" files="36" classes="36"/>
     <package name="react">
       <metrics statements="3" coveredstatements="1" conditionals="0" coveredconditionals="0" methods="2" coveredmethods="0"/>

package/coverage/lcov-report/index.html

@@ -57,7 +57,7 @@
         <template id="filterTemplate">
             <div class="quiet">
                 Filter:
-                <input oninput="onInput()" type="search" id="fileSearch">
+                <input type="search" id="fileSearch">
             </div>
         </template>
     </div>
@@ -476,7 +476,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-09-11T13:03:56.661Z
+                at 2024-09-16T18:01:43.118Z
             </div>
         <script src="prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/Accordion/index.html

@@ -57,7 +57,7 @@
         <template id="filterTemplate">
             <div class="quiet">
                 Filter:
-                <input oninput="onInput()" type="search" id="fileSearch">
+                <input type="search" id="fileSearch">
             </div>
         </template>
     </div>
@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-09-11T13:03:56.661Z
+                at 2024-09-16T18:01:43.118Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/Accordion/index.jsx.html

@@ -57,7 +57,7 @@
         <template id="filterTemplate">
             <div class="quiet">
                 Filter:
-                <input oninput="onInput()" type="search" id="fileSearch">
+                <input type="search" id="fileSearch">
             </div>
         </template>
     </div>
@@ -355,7 +355,7 @@ export default Accordion;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-09-11T13:03:56.661Z
+                at 2024-09-16T18:01:43.118Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/Button/index.html

@@ -57,7 +57,7 @@
         <template id="filterTemplate">
             <div class="quiet">
                 Filter:
-                <input oninput="onInput()" type="search" id="fileSearch">
+                <input type="search" id="fileSearch">
             </div>
         </template>
     </div>
@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-09-11T13:03:56.661Z
+                at 2024-09-16T18:01:43.118Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/Button/index.js.html

@@ -57,7 +57,7 @@
         <template id="filterTemplate">
             <div class="quiet">
                 Filter:
-                <input oninput="onInput()" type="search" id="fileSearch">
+                <input type="search" id="fileSearch">
             </div>
         </template>
     </div>
@@ -370,7 +370,7 @@ export default Button;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-09-11T13:03:56.661Z
+                at 2024-09-16T18:01:43.118Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/DateField/DateField.jsx.html

@@ -57,7 +57,7 @@
         <template id="filterTemplate">
             <div class="quiet">
                 Filter:
-                <input oninput="onInput()" type="search" id="fileSearch">
+                <input type="search" id="fileSearch">
             </div>
         </template>
     </div>
@@ -541,7 +541,7 @@ export default DateField;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-09-11T13:03:56.661Z
+                at 2024-09-16T18:01:43.118Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/DateField/index.html

@@ -57,7 +57,7 @@
         <template id="filterTemplate">
             <div class="quiet">
                 Filter:
-                <input oninput="onInput()" type="search" id="fileSearch">
+                <input type="search" id="fileSearch">
             </div>
         </template>
     </div>
@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-09-11T13:03:56.661Z
+                at 2024-09-16T18:01:43.118Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/DateTimeField/DateTimeField.jsx.html

@@ -57,7 +57,7 @@
         <template id="filterTemplate">
             <div class="quiet">
                 Filter:
-                <input oninput="onInput()" type="search" id="fileSearch">
+                <input type="search" id="fileSearch">
             </div>
         </template>
     </div>
@@ -337,7 +337,7 @@ export default DateTimeField;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-09-11T13:03:56.661Z
+                at 2024-09-16T18:01:43.118Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/DateTimeField/index.html

@@ -57,7 +57,7 @@
         <template id="filterTemplate">
             <div class="quiet">
                 Filter:
-                <input oninput="onInput()" type="search" id="fileSearch">
+                <input type="search" id="fileSearch">
             </div>
         </template>
     </div>
@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-09-11T13:03:56.661Z
+                at 2024-09-16T18:01:43.118Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/Error/Collapsible.jsx.html

@@ -57,7 +57,7 @@
         <template id="filterTemplate">
             <div class="quiet">
                 Filter:
-                <input oninput="onInput()" type="search" id="fileSearch">
+                <input type="search" id="fileSearch">
             </div>
         </template>
     </div>
@@ -349,7 +349,7 @@ export default Collapsible;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-09-11T13:03:56.661Z
+                at 2024-09-16T18:01:43.118Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/Error/ErrorUI.jsx.html

@@ -57,7 +57,7 @@
         <template id="filterTemplate">
             <div class="quiet">
                 Filter:
-                <input oninput="onInput()" type="search" id="fileSearch">
+                <input type="search" id="fileSearch">
             </div>
         </template>
     </div>
@@ -163,7 +163,7 @@ export default ErrorUI;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-09-11T13:03:56.661Z
+                at 2024-09-16T18:01:43.118Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/Error/error.js.html

@@ -57,7 +57,7 @@
         <template id="filterTemplate">
             <div class="quiet">
                 Filter:
-                <input oninput="onInput()" type="search" id="fileSearch">
+                <input type="search" id="fileSearch">
             </div>
         </template>
     </div>
@@ -148,7 +148,7 @@ export default class ErrorPage {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-09-11T13:03:56.661Z
+                at 2024-09-16T18:01:43.118Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/Error/index.html

@@ -57,7 +57,7 @@
         <template id="filterTemplate">
             <div class="quiet">
                 Filter:
-                <input oninput="onInput()" type="search" id="fileSearch">
+                <input type="search" id="fileSearch">
             </div>
         </template>
     </div>
@@ -131,7 +131,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-09-11T13:03:56.661Z
+                at 2024-09-16T18:01:43.118Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/Footer/FooterUI.jsx.html

@@ -57,7 +57,7 @@
         <template id="filterTemplate">
             <div class="quiet">
                 Filter:
-                <input oninput="onInput()" type="search" id="fileSearch">
+                <input type="search" id="fileSearch">
             </div>
         </template>
     </div>
@@ -481,7 +481,7 @@ export default FooterUI;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-09-11T13:03:56.661Z
+                at 2024-09-16T18:01:43.118Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/Footer/LegacyFooterUI.jsx.html

@@ -57,7 +57,7 @@
         <template id="filterTemplate">
             <div class="quiet">
                 Filter:
-                <input oninput="onInput()" type="search" id="fileSearch">
+                <input type="search" id="fileSearch">
             </div>
         </template>
     </div>
@@ -682,7 +682,7 @@ export default LegacyFooterUI;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-09-11T13:03:56.661Z
+                at 2024-09-16T18:01:43.118Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/Footer/footer.js.html

@@ -57,7 +57,7 @@
         <template id="filterTemplate">
             <div class="quiet">
                 Filter:
-                <input oninput="onInput()" type="search" id="fileSearch">
+                <input type="search" id="fileSearch">
             </div>
         </template>
     </div>
@@ -160,7 +160,7 @@ export default class Footer {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-09-11T13:03:56.661Z
+                at 2024-09-16T18:01:43.118Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/Footer/index.html

@@ -57,7 +57,7 @@
         <template id="filterTemplate">
             <div class="quiet">
                 Filter:
-                <input oninput="onInput()" type="search" id="fileSearch">
+                <input type="search" id="fileSearch">
             </div>
         </template>
     </div>
@@ -131,7 +131,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-09-11T13:03:56.661Z
+                at 2024-09-16T18:01:43.118Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/Infotip/Infotip.jsx.html

@@ -57,7 +57,7 @@
         <template id="filterTemplate">
             <div class="quiet">
                 Filter:
-                <input oninput="onInput()" type="search" id="fileSearch">
+                <input type="search" id="fileSearch">
             </div>
         </template>
     </div>
@@ -295,7 +295,7 @@ export default Infotip;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-09-11T13:03:56.661Z
+                at 2024-09-16T18:01:43.118Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/Infotip/InfotipIcon.jsx.html

@@ -57,7 +57,7 @@
         <template id="filterTemplate">
             <div class="quiet">
                 Filter:
-                <input oninput="onInput()" type="search" id="fileSearch">
+                <input type="search" id="fileSearch">
             </div>
         </template>
     </div>
@@ -193,7 +193,7 @@ InfotipIcon.defaultProps = {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-09-11T13:03:56.661Z
+                at 2024-09-16T18:01:43.118Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/Infotip/index.html

@@ -57,7 +57,7 @@
         <template id="filterTemplate">
             <div class="quiet">
                 Filter:
-                <input oninput="onInput()" type="search" id="fileSearch">
+                <input type="search" id="fileSearch">
             </div>
         </template>
     </div>
@@ -131,7 +131,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-09-11T13:03:56.661Z
+                at 2024-09-16T18:01:43.118Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/Infotip/index.js.html

@@ -57,7 +57,7 @@
         <template id="filterTemplate">
             <div class="quiet">
                 Filter:
-                <input oninput="onInput()" type="search" id="fileSearch">
+                <input type="search" id="fileSearch">
             </div>
         </template>
     </div>
@@ -79,7 +79,7 @@ export default Infotip;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-09-11T13:03:56.661Z
+                at 2024-09-16T18:01:43.118Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/InputLabel/index.html

@@ -57,7 +57,7 @@
         <template id="filterTemplate">
             <div class="quiet">
                 Filter:
-                <input oninput="onInput()" type="search" id="fileSearch">
+                <input type="search" id="fileSearch">
             </div>
         </template>
     </div>
@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-09-11T13:03:56.661Z
+                at 2024-09-16T18:01:43.118Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/InputLabel/index.jsx.html

@@ -57,7 +57,7 @@
         <template id="filterTemplate">
             <div class="quiet">
                 Filter:
-                <input oninput="onInput()" type="search" id="fileSearch">
+                <input type="search" id="fileSearch">
             </div>
         </template>
     </div>
@@ -229,7 +229,7 @@ export default Label;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-09-11T13:03:56.661Z
+                at 2024-09-16T18:01:43.118Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/MadieAlert/index.html

@@ -57,7 +57,7 @@
         <template id="filterTemplate">
             <div class="quiet">
                 Filter:
-                <input oninput="onInput()" type="search" id="fileSearch">
+                <input type="search" id="fileSearch">
             </div>
         </template>
     </div>
@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-09-11T13:03:56.661Z
+                at 2024-09-16T18:01:43.118Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/MadieAlert/index.jsx.html

@@ -57,7 +57,7 @@
         <template id="filterTemplate">
             <div class="quiet">
                 Filter:
-                <input oninput="onInput()" type="search" id="fileSearch">
+                <input type="search" id="fileSearch">
             </div>
         </template>
     </div>
@@ -550,7 +550,7 @@ export default MadieAlert;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-09-11T13:03:56.661Z
+                at 2024-09-16T18:01:43.118Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/MadieDeleteDialog/index.html

@@ -57,7 +57,7 @@
         <template id="filterTemplate">
             <div class="quiet">
                 Filter:
-                <input oninput="onInput()" type="search" id="fileSearch">
+                <input type="search" id="fileSearch">
             </div>
         </template>
     </div>
@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-09-11T13:03:56.661Z
+                at 2024-09-16T18:01:43.118Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/MadieDeleteDialog/index.jsx.html

@@ -57,7 +57,7 @@
         <template id="filterTemplate">
             <div class="quiet">
                 Filter:
-                <input oninput="onInput()" type="search" id="fileSearch">
+                <input type="search" id="fileSearch">
             </div>
         </template>
     </div>
@@ -232,7 +232,7 @@ export default MadieDeleteDialog;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-09-11T13:03:56.661Z
+                at 2024-09-16T18:01:43.118Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>