@madie/madie-design-system 1.0.2 → 1.0.3

package/components/SanitizedContent/index.jsx

@@ -1,200 +1,200 @@
-import React from 'react';
-import xss from 'xss';
-import PropTypes from 'prop-types';
+import React from "react";
+import xss from "xss";
+import PropTypes from "prop-types";
 
 // Override the default allowed HTML tags
 const defaultAllowedTags = [
-  'a',
-  'abbr',
-  'address',
-  'article',
-  'aside',
-  'b',
-  'blockquote',
-  'br',
-  'button',
-  'caption',
-  'cite',
-  'code',
-  'col',
-  'colgroup',
-  'datalist',
-  'dd',
-  'del',
-  'details',
-  'dfn',
-  'dialog',
-  'div',
-  'dl',
-  'dt',
-  'em',
-  'fieldset',
-  'figcaption',
-  'figure',
-  'footer',
-  'form',
-  'h1',
-  'h2',
-  'h3',
-  'h4',
-  'h5',
-  'h6',
-  'header',
-  'hr',
-  'i',
-  'img',
-  'input',
-  'ins',
-  'kbd',
-  'label',
-  'legend',
-  'li',
-  'mark',
-  'meter',
-  'nav',
-  'ol',
-  'optgroup',
-  'option',
-  'output',
-  'p',
-  'picture',
-  'pre',
-  'progress',
-  'q',
-  'section',
-  'select',
-  'small',
-  'source',
-  'span',
-  'strong',
-  'sub',
-  'summary',
-  'sup',
-  'table',
-  'tbody',
-  'td',
-  'textarea',
-  'tfoot',
-  'th',
-  'thead',
-  'time',
-  'tr',
-  'ul',
-  'svg',
-  'use',
-  'polygon',
-  'circle',
-  'g',
-  'path',
+    "a",
+    "abbr",
+    "address",
+    "article",
+    "aside",
+    "b",
+    "blockquote",
+    "br",
+    "button",
+    "caption",
+    "cite",
+    "code",
+    "col",
+    "colgroup",
+    "datalist",
+    "dd",
+    "del",
+    "details",
+    "dfn",
+    "dialog",
+    "div",
+    "dl",
+    "dt",
+    "em",
+    "fieldset",
+    "figcaption",
+    "figure",
+    "footer",
+    "form",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "header",
+    "hr",
+    "i",
+    "img",
+    "input",
+    "ins",
+    "kbd",
+    "label",
+    "legend",
+    "li",
+    "mark",
+    "meter",
+    "nav",
+    "ol",
+    "optgroup",
+    "option",
+    "output",
+    "p",
+    "picture",
+    "pre",
+    "progress",
+    "q",
+    "section",
+    "select",
+    "small",
+    "source",
+    "span",
+    "strong",
+    "sub",
+    "summary",
+    "sup",
+    "table",
+    "tbody",
+    "td",
+    "textarea",
+    "tfoot",
+    "th",
+    "thead",
+    "time",
+    "tr",
+    "ul",
+    "svg",
+    "use",
+    "polygon",
+    "circle",
+    "g",
+    "path",
 ];
 
 // Override the default allowed HTML attributes for all tags
 const defaultAllowedAttributes = {
-  '*': [
-    'action',
-    'alt',
-    'aria-*',
-    'autocomplete',
-    'cite',
-    'class',
-    'cols',
-    'colspan',
-    'data-*',
-    'datetime',
-    'disabled',
-    'download',
-    'for',
-    'headers',
-    'height',
-    'hidden',
-    'href',
-    'hreflang',
-    'id',
-    'lang',
-    'list',
-    'max',
-    'maxlength',
-    'minlength',
-    'media',
-    'method',
-    'min',
-    'multiple',
-    'name',
-    'novalidate',
-    'open',
-    'pattern',
-    'placeholder',
-    'readonly',
-    'rel',
-    'required',
-    'reversed',
-    'rows',
-    'rowspan',
-    'sandbox',
-    'scope',
-    'scoped',
-    'selected',
-    'size',
-    'sizes',
-    'span',
-    'spellcheck',
-    'src',
-    'srcset',
-    'start',
-    'step',
-    'style',
-    'summary',
-    'tabindex',
-    'target',
-    'title',
-    'type',
-    'value',
-    'width',
-    'wrap',
-    'fill',
-    'stroke',
-    ' stroke-width',
-    'd',
-    'points',
-    'viewbox',
-    'x',
-    'y',
-    'cx',
-    'cy',
-    'r',
-    'xmlns',
-    'xmlns:xlink',
-    'xlink:href',
-    'version',
-    'preserveaspectratio',
-    'enable-background',
-  ],
+    "*": [
+        "action",
+        "alt",
+        "aria-*",
+        "autocomplete",
+        "cite",
+        "class",
+        "cols",
+        "colspan",
+        "data-*",
+        "datetime",
+        "disabled",
+        "download",
+        "for",
+        "headers",
+        "height",
+        "hidden",
+        "href",
+        "hreflang",
+        "id",
+        "lang",
+        "list",
+        "max",
+        "maxlength",
+        "minlength",
+        "media",
+        "method",
+        "min",
+        "multiple",
+        "name",
+        "novalidate",
+        "open",
+        "pattern",
+        "placeholder",
+        "readonly",
+        "rel",
+        "required",
+        "reversed",
+        "rows",
+        "rowspan",
+        "sandbox",
+        "scope",
+        "scoped",
+        "selected",
+        "size",
+        "sizes",
+        "span",
+        "spellcheck",
+        "src",
+        "srcset",
+        "start",
+        "step",
+        "style",
+        "summary",
+        "tabindex",
+        "target",
+        "title",
+        "type",
+        "value",
+        "width",
+        "wrap",
+        "fill",
+        "stroke",
+        " stroke-width",
+        "d",
+        "points",
+        "viewbox",
+        "x",
+        "y",
+        "cx",
+        "cy",
+        "r",
+        "xmlns",
+        "xmlns:xlink",
+        "xlink:href",
+        "version",
+        "preserveaspectratio",
+        "enable-background",
+    ],
 };
 
 const SanitizedContent = ({
-  html = '<div/>',
-  customClassName = null,
-  allowedTags = defaultAllowedTags,
-  allowedAttributes = defaultAllowedAttributes,
+    html = "<div/>",
+    customClassName = null,
+    allowedTags = defaultAllowedTags,
+    allowedAttributes = defaultAllowedAttributes,
 }) => {
-  const whiteList = allowedTags.reduce((map, tag) => {
-    map[tag] = allowedAttributes['*'];
-    return map;
-  }, {});
-  const sanitizedHTML = xss(html, { whiteList });
-  return (
-    <div
-      {...(customClassName && { className: customClassName })}
-      dangerouslySetInnerHTML={{ __html: sanitizedHTML }}
-    />
-  );
+    const whiteList = allowedTags.reduce((map, tag) => {
+        map[tag] = allowedAttributes["*"];
+        return map;
+    }, {});
+    const sanitizedHTML = xss(html, { whiteList });
+    return (
+        <div
+            {...(customClassName && { className: customClassName })}
+            dangerouslySetInnerHTML={{ __html: sanitizedHTML }}
+        />
+    );
 };
 
 SanitizedContent.propTypes = {
-  html: PropTypes.string,
-  customClassName: PropTypes.string,
-  allowedTags: PropTypes.array,
-  allowedAttributes: PropTypes.array,
+    html: PropTypes.string,
+    customClassName: PropTypes.string,
+    allowedTags: PropTypes.array,
+    allowedAttributes: PropTypes.array,
 };
 
 export default SanitizedContent;

package/components/Search/Search.stories.js

@@ -1,21 +1,21 @@
-import React from 'react';
-import Search from './index';
-import { withKnobs } from '@storybook/addon-knobs';
+import React from "react";
+import Search from "./index";
+import { withKnobs } from "@storybook/addon-knobs";
 
 export default {
-  title: 'Search',
-  component: Search,
-  decorators: [withKnobs],
+    title: "Search",
+    component: Search,
+    decorators: [withKnobs],
 };
 
 export const ExampleSearch = () => (
-  <Search
-    id="Example id"
-    name="Example name"
-    placeholder="Example placeholder"
-    inputAriaLabel="Example input arial-label"
-    buttonAriaLabel="Example button arial-label"
-  />
+    <Search
+        id="Example id"
+        name="Example name"
+        placeholder="Example placeholder"
+        inputAriaLabel="Example input arial-label"
+        buttonAriaLabel="Example button arial-label"
+    />
 );
 
-ExampleSearch.storyName = 'example Search';
+ExampleSearch.storyName = "example Search";

package/components/Search/index.js

@@ -1,85 +1,85 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import SearchIcon from '@mui/icons-material/Search';
+import React from "react";
+import PropTypes from "prop-types";
+import SearchIcon from "@mui/icons-material/Search";
 
 const Search = ({
-  id,
-  name,
-  placeholder,
-  disableSearchBtn,
-  disabled,
-  inputValue,
-  onClick,
-  onChange,
-  inputAriaLabel,
-  buttonAriaLabel,
-  inputWidth,
+    id,
+    name,
+    placeholder,
+    disableSearchBtn,
+    disabled,
+    inputValue,
+    onClick,
+    onChange,
+    inputAriaLabel,
+    buttonAriaLabel,
+    inputWidth,
 }) => {
-  const inputStyle = {
-    width: inputWidth,
-  };
-  return (
-    <form role="search" className="qpp-c-search qpp-c-search--compact">
-      <label className="qpp-u-visually-hidden" htmlFor={id}>
-        Search
-      </label>
-      <div className="qpp-c-search__wrap">
-        <input
-          style={inputStyle}
-          className="qpp-c-text-input"
-          type="search"
-          id={id}
-          name={name}
-          placeholder={placeholder}
-          value={inputValue}
-          disabled={disabled}
-          onChange={onChange}
-          aria-label={inputAriaLabel}
-        />
+    const inputStyle = {
+        width: inputWidth,
+    };
+    return (
+        <form role="search" className="qpp-c-search qpp-c-search--compact">
+            <label className="qpp-u-visually-hidden" htmlFor={id}>
+                Search
+            </label>
+            <div className="qpp-c-search__wrap">
+                <input
+                    style={inputStyle}
+                    className="qpp-c-text-input"
+                    type="search"
+                    id={id}
+                    name={name}
+                    placeholder={placeholder}
+                    value={inputValue}
+                    disabled={disabled}
+                    onChange={onChange}
+                    aria-label={inputAriaLabel}
+                />
 
-        <button
-          data-testid="search-btn"
-          aria-label={buttonAriaLabel}
-          onClick={onClick}
-          disabled={disableSearchBtn}
-          id={`${id}-submit`}
-          type="submit"
-          className="qpp-c-search__submit qpp-c-button qpp-c-button--text"
-        >
-          <span className="qpp-u-visually-hidden">Search</span>
-          <SearchIcon classes={{ root: 'qpp-icon-mat' }} />
-        </button>
-      </div>
-    </form>
-  );
+                <button
+                    data-testid="search-btn"
+                    aria-label={buttonAriaLabel}
+                    onClick={onClick}
+                    disabled={disableSearchBtn}
+                    id={`${id}-submit`}
+                    type="submit"
+                    className="qpp-c-search__submit qpp-c-button qpp-c-button--text"
+                >
+                    <span className="qpp-u-visually-hidden">Search</span>
+                    <SearchIcon classes={{ root: "qpp-icon-mat" }} />
+                </button>
+            </div>
+        </form>
+    );
 };
 
 Search.propTypes = {
-  id: PropTypes.string,
-  name: PropTypes.string,
-  placeholder: PropTypes.string,
-  disableSearchBtn: PropTypes.bool,
-  disabled: PropTypes.bool,
-  inputValue: PropTypes.string,
-  onClick: PropTypes.func,
-  onChange: PropTypes.func,
-  inputAriaLabel: PropTypes.string,
-  buttonAriaLabel: PropTypes.string,
-  inputWidth: PropTypes.string,
+    id: PropTypes.string,
+    name: PropTypes.string,
+    placeholder: PropTypes.string,
+    disableSearchBtn: PropTypes.bool,
+    disabled: PropTypes.bool,
+    inputValue: PropTypes.string,
+    onClick: PropTypes.func,
+    onChange: PropTypes.func,
+    inputAriaLabel: PropTypes.string,
+    buttonAriaLabel: PropTypes.string,
+    inputWidth: PropTypes.string,
 };
 
 Search.defaultProps = {
-  id: 'search-input',
-  name: '',
-  placeholder: '',
-  disableSearchBtn: false,
-  disabled: false,
-  inputValue: '',
-  onClick: () => null,
-  onChange: () => null,
-  inputAriaLabel: '',
-  buttonAriaLabel: '',
-  inputWidth: 'auto',
+    id: "search-input",
+    name: "",
+    placeholder: "",
+    disableSearchBtn: false,
+    disabled: false,
+    inputValue: "",
+    onClick: () => null,
+    onChange: () => null,
+    inputAriaLabel: "",
+    buttonAriaLabel: "",
+    inputWidth: "auto",
 };
 
 export default Search;