carbon-react 104.13.0 → 104.16.1

package/lib/__internal__/popover/index.d.ts

@@ -1 +1 @@
-export { default } from "./popover.component";
+export { default } from "./popover";

package/lib/__internal__/popover/popover.component.d.ts

@@ -1,16 +1,18 @@
 export default Popover;
-declare function Popover({ children, placement, disablePortal, reference, onFirstUpdate, modifiers, }: {
+declare function Popover({ children, placement, disablePortal, reference, onFirstUpdate, modifiers, disableBackgroundUI, }: {
     children: any;
     placement: any;
     disablePortal: any;
     reference: any;
     onFirstUpdate: any;
     modifiers: any;
+    disableBackgroundUI: any;
 }): any;
 declare namespace Popover {
     namespace propTypes {
         const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
         const placement: PropTypes.Requireable<string>;
+        const disableBackgroundUI: PropTypes.Requireable<boolean>;
         const modifiers: PropTypes.Requireable<any[]>;
         const onFirstUpdate: PropTypes.Requireable<(...args: any[]) => any>;
         const disablePortal: PropTypes.Requireable<boolean>;

package/lib/__internal__/popover/popover.component.js

@@ -15,6 +15,8 @@ var _core = require("@popperjs/core");
 
 var _useResizeObserver = _interopRequireDefault(require("../../hooks/__internal__/useResizeObserver"));
 
+var _popover = _interopRequireDefault(require("./popover.style"));
+
 var _carbonScopedTokensProvider = _interopRequireDefault(require("../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -29,7 +31,8 @@ const Popover = ({
   disablePortal,
   reference,
   onFirstUpdate,
-  modifiers
+  modifiers,
+  disableBackgroundUI
 }) => {
   const elementDOM = (0, _react.useRef)();
 
@@ -90,6 +93,10 @@ const Popover = ({
     };
   }, [disablePortal]);
 
+  if (disableBackgroundUI) {
+    content = /*#__PURE__*/_react.default.createElement(_popover.default, null, content);
+  }
+
   if (disablePortal) {
     return content;
   }
@@ -102,11 +109,13 @@ Popover.propTypes = {
   children: _propTypes.default.node.isRequired,
   // Placement of children in relation to the reference element
   placement: _propTypes.default.oneOf(["auto", "auto-start", "auto-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"]),
+  // Disables interaction with background UI
+  disableBackgroundUI: _propTypes.default.bool,
   // Optional modifiers array, for more information and object structure go to:
   // https://popper.js.org/docs/v2/constructors/#modifiers
   modifiers: _propTypes.default.array,
-  // Optional onFirstUpdate funcition, for more information go to:
-  // https://popper.js.org/docs/v2/constructors/#modifiers
+  // Optional onFirstUpdate function, for more information go to:
+  // https://popper.js.org/docs/v2/lifecycle/#hook-into-the-lifecycle
   onFirstUpdate: _propTypes.default.func,
   // When true, children are not rendered in portal
   disablePortal: _propTypes.default.bool,

package/lib/__internal__/popover/popover.d.ts

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { State } from "@popperjs/core";
+
+type PopoverModifier = {
+  name: string;
+  options?: Record<string, unknown>;
+  enabled?: boolean;
+};
+
+export interface PopoverPropTypes {
+  // Element to be positioned, has to be a single node and has to accept `ref` and `style` props
+  children: React.ReactNode;
+  // Placement of children in relation to the reference element
+  placement?:
+    | "auto"
+    | "auto-start"
+    | "auto-end"
+    | "top"
+    | "top-start"
+    | "top-end"
+    | "bottom"
+    | "bottom-start"
+    | "bottom-end"
+    | "right"
+    | "right-start"
+    | "right-end"
+    | "left"
+    | "left-start"
+    | "left-end";
+  // Disables interaction with background UI
+  disableBackgroundUI?: boolean;
+  // Optional modifiers array, for more information and object structure go to:
+  // https://popper.js.org/docs/v2/constructors/#modifiers
+  modifiers?: PopoverModifier[];
+  // Optional onFirstUpdate function, for more information go to:
+  // hhttps://popper.js.org/docs/v2/lifecycle/#hook-into-the-lifecycle
+  onFirstUpdate?: (state: State) => void;
+  // When true, children are not rendered in portal
+  disablePortal?: boolean;
+  // Reference element, children will be positioned in relation to this element - should be a ref
+  reference?: React.RefObject<HTMLElement>;
+}
+
+declare function Popover(props: PopoverPropTypes): JSX.Element;
+
+export default Popover;

package/lib/__internal__/popover/popover.style.d.ts

@@ -0,0 +1,2 @@
+export default StyledBackdrop;
+declare const StyledBackdrop: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/__internal__/popover/popover.style.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _base = _interopRequireDefault(require("../../style/themes/base"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const StyledBackdrop = _styledComponents.default.div`
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: ${({
+  theme
+}) => theme.zIndex.popover};
+  background: transparent;
+`;
+StyledBackdrop.defaultProps = {
+  theme: _base.default
+};
+var _default = StyledBackdrop;
+exports.default = _default;

package/lib/components/button-bar/button-bar.style.d.ts

@@ -1,5 +1,4 @@
 export default ButtonBar;
 declare const ButtonBar: import("styled-components").StyledComponent<"div", any, {
-    theme: any;
     size: any;
 }, never>;

package/lib/components/button-bar/button-bar.style.js

@@ -29,7 +29,6 @@ const ButtonBar = _styledComponents.default.div`
 `;
 
 function stylingForType({
-  theme,
   size
 }) {
   return (0, _styledComponents.css)`
@@ -50,7 +49,7 @@ function stylingForType({
 
     button {
       margin: 0;
-      border: 2px solid ${theme.colors.primary};
+      border: 2px solid var(--colorsActionMajor500);
 
       &:not(:last-of-type) {
         border-right-color: transparent;
@@ -61,20 +60,20 @@ function stylingForType({
       &:focus {
         position: relative;
         z-index: 2;
-        border-right-color: ${theme.colors.primary};
+        border-right-color: var(--colorsActionMajor500);
       }
       &:hover {
-        background-color: ${theme.colors.secondary};
-        border-color: ${theme.colors.secondary};
+        background-color: var(--colorsActionMajor600);
+        border-color: var(--colorsActionMajor600);
         & + button {
-          border-left-color: ${theme.colors.secondary};
+          border-left-color: var(--colorsActionMajor600);
         }
         & ${_icon.default} {
           color: white;
         }
       }
       & ${_icon.default} {
-        color: ${theme.colors.primary};
+        color: var(--colorsActionMajor500);
       }
     }
   `;

package/lib/components/decimal/decimal.component.d.ts

@@ -1,9 +1,9 @@
 export default Decimal;
 declare function Decimal({ align, defaultValue, precision, inputWidth, readOnly, onChange, onBlur, onKeyPress, id, name, allowEmptyValue, required, locale, value, ...rest }: {
     [x: string]: any;
-    align?: string | undefined;
+    align: any;
     defaultValue: any;
-    precision?: number | undefined;
+    precision: any;
     inputWidth: any;
     readOnly: any;
     onChange: any;
@@ -11,7 +11,7 @@ declare function Decimal({ align, defaultValue, precision, inputWidth, readOnly,
     onKeyPress: any;
     id: any;
     name: any;
-    allowEmptyValue?: boolean | undefined;
+    allowEmptyValue: any;
     required: any;
     locale: any;
     value: any;
@@ -77,5 +77,10 @@ declare namespace Decimal {
         /** Aria label for rendered help component */
         helpAriaLabel: PropTypes.Requireable<string>;
     };
+    namespace defaultProps {
+        const precision: number;
+        const allowEmptyValue: boolean;
+        const align: string;
+    }
 }
 import PropTypes from "prop-types";

package/lib/components/decimal/decimal.component.js

@@ -30,9 +30,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
 
 const Decimal = ({
-  align = "right",
+  align,
   defaultValue,
-  precision = 2,
+  precision,
   inputWidth,
   readOnly,
   onChange,
@@ -40,7 +40,7 @@ const Decimal = ({
   onKeyPress,
   id,
   name,
-  allowEmptyValue = false,
+  allowEmptyValue,
   required,
   locale,
   value,
@@ -309,5 +309,10 @@ Decimal.propTypes = {
   /** Aria label for rendered help component */
   helpAriaLabel: _propTypes.default.string
 };
+Decimal.defaultProps = {
+  precision: 2,
+  allowEmptyValue: false,
+  align: "right"
+};
 var _default = Decimal;
 exports.default = _default;

package/lib/components/dialog/dialog.style.js

@@ -87,6 +87,9 @@ const DialogStyle = _styledComponents.default.div`
   flex-direction: column;
   position: fixed;
   top: 50%;
+  z-index: ${({
+  theme
+}) => theme.zIndex.modal};
   max-height: ${({
   topMargin
 }) => `calc(100vh - ${topMargin}px)`};

package/lib/components/modal/modal.component.js

@@ -11,9 +11,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactTransitionGroup = require("react-transition-group");
 
-var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
+var _useScrollBlock = _interopRequireDefault(require("../../hooks/__internal__/useScrollBlock"));
+
+var _portal = _interopRequireDefault(require("../portal"));
 
-var _portal = _interopRequireDefault(require("../portal/portal.style"));
+var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
 
 var _modalManager = _interopRequireDefault(require("./__internal__/modal-manager"));
 
@@ -44,35 +46,30 @@ const Modal = ({
   const ref = (0, _react.useRef)();
   const listenerAdded = (0, _react.useRef)(false);
   const modalRegistered = (0, _react.useRef)(false);
-  const originalOverflow = (0, _react.useRef)(undefined);
   const [isAnimationComplete, setAnimationComplete] = (0, _react.useState)(false);
   const [triggerRefocusFlag, setTriggerRefocusFlag] = (0, _react.useState)(false);
-  const setOverflow = (0, _react.useCallback)(() => {
-    if (typeof originalOverflow.current === "undefined" && !enableBackgroundUI) {
-      originalOverflow.current = document.documentElement.style.overflow;
-      document.documentElement.style.overflow = "hidden";
-    }
-  }, [enableBackgroundUI]);
-  const unsetOverflow = (0, _react.useCallback)(() => {
-    if (typeof originalOverflow.current !== "undefined" && !enableBackgroundUI) {
-      document.documentElement.style.overflow = originalOverflow.current;
-      originalOverflow.current = undefined;
-    }
-  }, [enableBackgroundUI]);
+  const {
+    blockScroll,
+    allowScroll
+  } = (0, _useScrollBlock.default)();
   (0, _react.useEffect)(() => {
-    if (open) {
-      setOverflow();
+    if (enableBackgroundUI) {
+      return;
     }
 
-    if (!open) {
-      unsetOverflow();
+    if (open) {
+      blockScroll();
+    } else {
+      allowScroll();
     }
-  }, [open, setOverflow, unsetOverflow]);
+  }, [allowScroll, blockScroll, enableBackgroundUI, open]);
   (0, _react.useEffect)(() => {
     return () => {
-      unsetOverflow();
+      if (!enableBackgroundUI) {
+        allowScroll();
+      }
     };
-  }, [unsetOverflow]);
+  }, [allowScroll, enableBackgroundUI]);
   const closeModal = (0, _react.useCallback)(ev => {
     const isTopmost = _modalManager.default.isTopmost(ref.current);
 
@@ -143,7 +140,8 @@ const Modal = ({
   if (open) {
     background = !enableBackgroundUI ? /*#__PURE__*/_react.default.createElement(_modal.StyledModalBackground, {
       "data-element": "modal-background",
-      transitionName: "modal-background"
+      transitionName: "modal-background",
+      transitionTime: timeout
     }) : null;
     content = children;
   }
@@ -151,6 +149,7 @@ const Modal = ({
   return /*#__PURE__*/_react.default.createElement(_portal.default, null, /*#__PURE__*/_react.default.createElement(_modal.StyledModal, _extends({
     "data-state": open ? "open" : "closed",
     transitionName: "modal",
+    transitionTime: timeout,
     ref: ref
   }, rest), /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, null, background && /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
     key: "modal",
@@ -197,7 +196,7 @@ Modal.defaultProps = {
   onCancel: null,
   enableBackgroundUI: false,
   disableEscKey: false,
-  timeout: 500
+  timeout: 300
 };
 var _default = Modal;
 exports.default = _default;

package/lib/components/modal/modal.style.js

@@ -7,14 +7,15 @@ exports.StyledModalBackground = exports.StyledModal = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
+var _base = _interopRequireDefault(require("../../style/themes/base"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 const backgroundOpacity = "0.6";
-const backgroundAnimationLength = "300ms";
-const initialPosition = "50px";
-const animationLength = "300ms";
 const StyledModalBackground = _styledComponents.default.div`
   background-color: rgba(0, 20, 29, 0.6);
   bottom: 0;
@@ -25,7 +26,8 @@ const StyledModalBackground = _styledComponents.default.div`
   top: 0;
 
   ${({
-  transitionName
+  transitionName,
+  transitionTime
 }) => (0, _styledComponents.css)`
     &.${transitionName}-enter, .${transitionName}-appear {
       opacity: 0;
@@ -34,7 +36,7 @@ const StyledModalBackground = _styledComponents.default.div`
     &.${transitionName}-enter.${transitionName}-enter-active,
       &.${transitionName}-appear.${transitionName}-appear-active {
       opacity: ${backgroundOpacity};
-      transition: opacity ${backgroundAnimationLength} ease-out;
+      transition: opacity ${transitionTime}ms ease-out;
     }
 
     &.${transitionName}-exit {
@@ -43,37 +45,42 @@ const StyledModalBackground = _styledComponents.default.div`
 
     &.${transitionName}-exit.${transitionName}-exit-active {
       opacity: 0;
-      transition: opacity ${backgroundAnimationLength} 100ms ease-out;
+      transition: opacity ${transitionTime}ms 100ms ease-out;
     }
-  `}
+  `};
 `;
 exports.StyledModalBackground = StyledModalBackground;
 const StyledModal = _styledComponents.default.div`
+  position: absolute;
+  z-index: ${({
+  theme
+}) => theme.zIndex.modal};
+
   ${({
-  transitionName
+  transitionName,
+  transitionTime
 }) => (0, _styledComponents.css)`
     .${transitionName}-enter, .${transitionName}-appear {
       opacity: 0;
-      margin-top: ${initialPosition};
     }
 
     .${transitionName}-enter.${transitionName}-enter-active,
       .${transitionName}-appear.${transitionName}-appear-active {
       opacity: 1;
-      margin-top: 0;
-      transition: all ${animationLength} 100ms ease-out;
+      transition: all ${transitionTime}ms 100ms ease-out;
     }
 
     .${transitionName}-exit {
       opacity: 1;
-      margin-top: 0;
     }
 
     .${transitionName}-exit.${transitionName}-exit-active {
       opacity: 0;
-      margin-top: ${initialPosition};
-      transition: all ${animationLength} ease-out;
+      transition: all ${transitionTime}ms ease-out;
     }
   `}
 `;
-exports.StyledModal = StyledModal;
+exports.StyledModal = StyledModal;
+StyledModal.defaultProps = {
+  theme: _base.default
+};

package/lib/components/note/note.style.js

@@ -26,7 +26,6 @@ const StyledNoteContent = _styledComponents.default.div`
   width: 100%;
 
   ${({
-  theme,
   hasPreview
 }) => (0, _styledComponents.css)`
     &:not(:last-of-type) {
@@ -42,16 +41,16 @@ const StyledNoteContent = _styledComponents.default.div`
     div.public-DraftEditor-content {
       min-height: inherit;
       height: 100%;
-      background-color: ${theme.colors.white};
+      background-color: var(--colorsUtilityYang100);
       line-height: 21px;
     }
 
     &:last-of-type:not(:first-of-type) {
-      border-top: solid 1px ${theme.tile.separator};
+      border-top: solid 1px var(--colorsUtilityMajor050);
     }
 
     ${hasPreview && `
-      margin-top: ${2 * theme.spacing}px;
+      margin-top: var(--spacing200);
     `}
   `}
 `;
@@ -76,10 +75,9 @@ const StyledFooterContent = _styledComponents.default.div`
   font-weight: bold;
 
   ${({
-  theme,
   hasName
 }) => (0, _styledComponents.css)`
-    margin-top: ${2 * theme.spacing}px;
+    margin-top: var(--spacing200);
 
     ${hasName && (0, _styledComponents.css)`
       &:first-of-type {
@@ -88,29 +86,29 @@ const StyledFooterContent = _styledComponents.default.div`
 
       &:nth-of-type(2) {
         font-size: 12px;
-        color: ${theme.note.timeStamp};
-        margin-left: ${2 * theme.spacing}px;
+        color: var(--colorsUtilityYin065);
+        margin-left: var(--spacing200);
       }
 
       &:last-of-type:not(:nth-of-type(2)) {
         font-size: 12px;
-        color: ${theme.note.timeStamp};
+        color: var(--colorsUtilityYin065);
         cursor: pointer;
-        margin-left: ${3 * theme.spacing}px;
+        margin-left: var(--spacing300);
       }
     `}
 
     ${!hasName && (0, _styledComponents.css)`
       &:first-of-type {
         font-size: 12px;
-        color: ${theme.note.timeStamp};
+        color: var(--colorsUtilityYin065);
       }
 
       &:last-of-type:not(:first-of-type) {
         font-size: 12px;
-        color: ${theme.note.timeStamp};
+        color: var(--colorsUtilityYin065);
         cursor: pointer;
-        margin-left: ${3 * theme.spacing}px;
+        margin-left: var(--spacing300);
       }
     `}
   `}
@@ -118,19 +116,16 @@ const StyledFooterContent = _styledComponents.default.div`
 exports.StyledFooterContent = StyledFooterContent;
 const StyledFooter = _styledComponents.default.div`
   display: flex;
-  margin-bottom: ${({
-  theme
-}) => `${-theme.spacing}px;`}
+  margin-bottom: calc(-1 * var(--spacing100));
   flex-wrap: wrap;
 `;
 exports.StyledFooter = StyledFooter;
 const StyledNote = _styledComponents.default.div`
   ${({
-  theme,
   width
 }) => (0, _styledComponents.css)`
-    background-color: ${theme.colors.white};
-    border: 1px solid ${theme.tile.border};
+    background-color: var(--colorsUtilityYang100);
+    border: 1px solid var(--colorsUtilityMajor100);
     display: flex;
     flex-direction: column;
     padding: 24px;
@@ -155,19 +150,10 @@ const StyledNote = _styledComponents.default.div`
   ${_styledSystem.margin}
 `;
 exports.StyledNote = StyledNote;
-StyledNoteContent.defaultProps = {
-  theme: _base.default
-};
 StyledNote.propTypes = {
   padding: _propTypes.default.string,
   width: _propTypes.default.number
 };
 StyledNote.defaultProps = {
   theme: _base.default
-};
-StyledFooter.defaultProps = {
-  theme: _base.default
-};
-StyledFooterContent.defaultProps = {
-  theme: _base.default
 };

package/lib/components/profile/profile-test.stories.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DefaultStory = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _specialCharacters = _interopRequireWildcard(require("../../../.storybook/utils/argTypes/specialCharacters"));
+
+var _profile = _interopRequireDefault(require("./profile.component"));
+
+var _profile2 = require("./profile.config");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var _default = {
+  title: "Profile/Test",
+  parameters: {
+    info: {
+      disable: true
+    },
+    chromatic: {
+      disable: true
+    }
+  },
+  argTypes: {
+    size: {
+      control: {
+        type: "select",
+        options: _profile2.PROFILE_SIZES
+      }
+    },
+    emailSpecialCharacters: {
+      options: [..._specialCharacters.default.options, ..._specialCharacters.email.options],
+      mapping: { ..._specialCharacters.default.mapping,
+        ..._specialCharacters.email.mapping
+      }
+    },
+    nameSpecialCharacters: _specialCharacters.default
+  }
+};
+exports.default = _default;
+
+const DefaultStory = ({
+  email,
+  emailSpecialCharacters,
+  name,
+  nameSpecialCharacters,
+  ...args
+}) => /*#__PURE__*/_react.default.createElement(_profile.default, _extends({
+  email: email || emailSpecialCharacters,
+  name: name || nameSpecialCharacters
+}, args));
+
+exports.DefaultStory = DefaultStory;
+DefaultStory.story = {
+  name: "default",
+  args: {
+    email: "johnsmith@sage.com",
+    initials: "JS",
+    size: _profile2.PROFILE_SIZES[0],
+    name: "John Smith",
+    src: "",
+    emailSpecialCharacters: undefined,
+    nameSpecialCharacters: undefined
+  }
+};