@zohodesk/components 1.1.0 → 1.2.0

package/es/Textarea/__tests__/Textarea.spec.js

@@ -1,171 +0,0 @@
-import React from 'react';
-import Textarea from '../Textarea';
-import renderer from 'react-test-renderer';
-describe('Textarea component', () => {
-  it('should display size xsmall', () => {
-    let ele = renderer.create( /*#__PURE__*/React.createElement(Textarea, {
-      maxLength: "100",
-      placeHolder: "Text Area",
-      resize: "vertical",
-      size: "xsmall",
-      variant: "default"
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should display size xsmall - primary', () => {
-    let ele = renderer.create( /*#__PURE__*/React.createElement(Textarea, {
-      maxLength: "100",
-      placeHolder: "Text Area",
-      resize: "vertical",
-      size: "xsmall",
-      variant: "primary"
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should display size small', () => {
-    let ele = renderer.create( /*#__PURE__*/React.createElement(Textarea, {
-      maxLength: "100",
-      placeHolder: "Text Area",
-      resize: "vertical",
-      size: "small",
-      variant: "default"
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should display size small - primary', () => {
-    let ele = renderer.create( /*#__PURE__*/React.createElement(Textarea, {
-      maxLength: "100",
-      placeHolder: "Text Area",
-      resize: "vertical",
-      size: "small",
-      variant: "primary"
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should display size medium', () => {
-    let ele = renderer.create( /*#__PURE__*/React.createElement(Textarea, {
-      maxLength: "100",
-      placeHolder: "Text Area",
-      resize: "vertical",
-      size: "medium",
-      variant: "default"
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should display size medium - primary', () => {
-    let ele = renderer.create( /*#__PURE__*/React.createElement(Textarea, {
-      maxLength: "100",
-      placeHolder: "Text Area",
-      resize: "vertical",
-      size: "medium",
-      variant: "primary"
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should display size large', () => {
-    let ele = renderer.create( /*#__PURE__*/React.createElement(Textarea, {
-      maxLength: "100",
-      placeHolder: "Text Area",
-      resize: "vertical",
-      size: "large",
-      variant: "default"
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should display size large - primary', () => {
-    let ele = renderer.create( /*#__PURE__*/React.createElement(Textarea, {
-      maxLength: "100",
-      placeHolder: "Text Area",
-      resize: "vertical",
-      size: "large",
-      variant: "primary"
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should text propertly entered', () => {
-    let renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(Textarea, {
-      maxLength: "100",
-      placeHolder: "Text Area",
-      resize: "vertical",
-      size: "large",
-      variant: "primary",
-      text: "Text Area Working"
-    }));
-    expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'TextareaComp').value.contains('Text Area Working')).toBe(true);
-  });
-  it('should placeHolder propertly entered', () => {
-    let renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(Textarea, {
-      maxLength: "100",
-      placeHolder: "Text Area",
-      resize: "vertical",
-      size: "large",
-      variant: "primary",
-      text: "Text Area Working"
-    }));
-    expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'TextareaComp').getAttribute('placeholder')).toMatch(/Text Area/);
-  });
-  it('Check border applied', () => {
-    let renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(Textarea, {
-      maxLength: "100",
-      placeHolder: "Text Area",
-      resize: "vertical",
-      size: "large",
-      variant: "primary",
-      text: "Text Area Working",
-      needBorder: true
-    }));
-    expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'TextareaComp').className).toMatch(/needBorder/);
-  });
-  it('Check border removed', () => {
-    let renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(Textarea, {
-      maxLength: "100",
-      placeHolder: "Text Area",
-      resize: "vertical",
-      size: "large",
-      variant: "primary",
-      text: "Text Area Working",
-      needBorder: false
-    }));
-    expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'TextareaComp').className).toMatch(/noBorder/);
-  }); // it('Check disabled works', () => {
-  //   let renderedDOM = TestUtils.renderIntoDocument(
-  //     <Textarea maxLength='100' placeHolder='Text Area' resize='vertical' size='large' variant='primary' text='Text Area Working' disabled needBorder={false} />
-  //   );
-  //   let pass = false;
-  //   let classNames = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'TextareaComp').classList;
-  //   Object.keys(classNames)
-  //     .map(className => {
-  //       if (classNames[className] == 'disabled') {
-  //         pass = true;
-  //       }
-  //     });
-  //   expect(
-  //     pass
-  //   ).toBe(true);
-  // });
-
-  it('Check check onchange works', () => {
-    let mockfn = jest.fn();
-    let renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(Textarea, {
-      maxLength: "100",
-      placeHolder: "Text Area",
-      resize: "vertical",
-      size: "large",
-      variant: "primary",
-      text: "Text Area Working",
-      needBorder: false,
-      onChange: mockfn
-    }));
-    let onChangeEle = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'TextareaComp');
-    TestUtils.Simulate.change(onChangeEle);
-    expect(mockfn.mock.calls.length).toBe(1);
-  });
-});

package/es/Textarea/__tests__/__snapshots__/Textarea.spec.js.snap

@@ -1,97 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Textarea component should display size large - primary 1`] = `
-<textarea
-  className="  container large primary needBorder resizeY     effect borderColor_default"
-  data-id="TextareaComp"
-  maxLength="100"
-  onBlur={[Function]}
-  onChange={[Function]}
-  onKeyDown={[Function]}
-  placeholder="Text Area"
-/>
-`;
-
-exports[`Textarea component should display size large 1`] = `
-<textarea
-  className="  container large default needBorder resizeY     effect borderColor_default"
-  data-id="TextareaComp"
-  maxLength="100"
-  onBlur={[Function]}
-  onChange={[Function]}
-  onKeyDown={[Function]}
-  placeholder="Text Area"
-/>
-`;
-
-exports[`Textarea component should display size medium - primary 1`] = `
-<textarea
-  className="  container medium primary needBorder resizeY     effect borderColor_default"
-  data-id="TextareaComp"
-  maxLength="100"
-  onBlur={[Function]}
-  onChange={[Function]}
-  onKeyDown={[Function]}
-  placeholder="Text Area"
-/>
-`;
-
-exports[`Textarea component should display size medium 1`] = `
-<textarea
-  className="  container medium default needBorder resizeY     effect borderColor_default"
-  data-id="TextareaComp"
-  maxLength="100"
-  onBlur={[Function]}
-  onChange={[Function]}
-  onKeyDown={[Function]}
-  placeholder="Text Area"
-/>
-`;
-
-exports[`Textarea component should display size small - primary 1`] = `
-<textarea
-  className="  container small primary needBorder resizeY     effect borderColor_default"
-  data-id="TextareaComp"
-  maxLength="100"
-  onBlur={[Function]}
-  onChange={[Function]}
-  onKeyDown={[Function]}
-  placeholder="Text Area"
-/>
-`;
-
-exports[`Textarea component should display size small 1`] = `
-<textarea
-  className="  container small default needBorder resizeY     effect borderColor_default"
-  data-id="TextareaComp"
-  maxLength="100"
-  onBlur={[Function]}
-  onChange={[Function]}
-  onKeyDown={[Function]}
-  placeholder="Text Area"
-/>
-`;
-
-exports[`Textarea component should display size xsmall - primary 1`] = `
-<textarea
-  className="  container xsmall primary needBorder resizeY     effect borderColor_default"
-  data-id="TextareaComp"
-  maxLength="100"
-  onBlur={[Function]}
-  onChange={[Function]}
-  onKeyDown={[Function]}
-  placeholder="Text Area"
-/>
-`;
-
-exports[`Textarea component should display size xsmall 1`] = `
-<textarea
-  className="  container xsmall default needBorder resizeY     effect borderColor_default"
-  data-id="TextareaComp"
-  maxLength="100"
-  onBlur={[Function]}
-  onChange={[Function]}
-  onKeyDown={[Function]}
-  placeholder="Text Area"
-/>
-`;

package/es/Tooltip/__tests__/Tooltip.spec.js

@@ -1,52 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import Tooltip from '../Tooltip';
-
-class SampleComponent extends React.Component {
-  constructor(props) {
-    super(props);
-    this.toolTipRef = /*#__PURE__*/React.createRef();
-    this.setToolTipRef = this.setToolTipRef.bind(this);
-  }
-
-  setToolTipRef(ref) {
-    this.toolTipRef = ref;
-  }
-
-  render() {
-    return /*#__PURE__*/React.createElement("div", {
-      onMouseOver: e => this.toolTipRef && this.toolTipRef.handleOver(e),
-      "data-id": "sampleComponent"
-    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
-      "data-title": "Register Account",
-      "data-id": "registeraccount"
-    }, "Register")), /*#__PURE__*/React.createElement(Tooltip, {
-      ref: this.setToolTipRef
-    }));
-  }
-
-}
-
-describe('Tooltip component conditions', () => {
-  it('Is HandleOver Executed', () => {
-    let sampleComponent = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(SampleComponent, null));
-    sampleComponent.toolTipRef.handleOver = jest.fn();
-    let component = TestUtils.findRenderedComponentsWithTestid(sampleComponent, 'sampleComponent');
-    TestUtils.Simulate.mouseOver(component);
-    expect(sampleComponent.toolTipRef.handleOver).toHaveBeenCalled();
-  });
-  it('Is reset Executed', () => {
-    let sampleComponent = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(SampleComponent, null));
-    sampleComponent.toolTipRef.reset = jest.fn();
-    let component = TestUtils.findRenderedComponentsWithTestid(sampleComponent, 'sampleComponent');
-    TestUtils.Simulate.mouseOver(component);
-    expect(sampleComponent.toolTipRef.reset).toHaveBeenCalled();
-  });
-  it('Is click & mouseUp Declared', () => {
-    let sampleComponent = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(SampleComponent, null));
-    let component = TestUtils.findRenderedComponentsWithTestid(sampleComponent, 'sampleComponent');
-    let registerComp = TestUtils.findRenderedComponentsWithTestid(sampleComponent, 'registeraccount');
-    TestUtils.Simulate.mouseOver(component);
-    expect(registerComp.click && registerComp.mouseUp).not.toBeNull();
-  });
-});

package/es/deprecated/AdvancedMultiSelect.module.css

@@ -1,127 +0,0 @@
-.wrapper {
-  position: relative;
-}
-.disabled, .readOnly {
-  cursor: not-allowed;
-}
-.container {
-  max-height: var(--zd_size120) ;
-  composes: oflowy from '../common/common.module.css';
-}
-.hasBorder {
-  transition: border var(--zd_transition2) linear 0s;
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-}
-.borderColor_transparent {
-  border-bottom-color: var(--zdt_advancedmultiselect_transparent_border);
-}
-.effect .borderColor_transparent:hover {
-  border-bottom-color: var(--zdt_advancedmultiselect_transparent_hover_border);
-}
-.effect .borderColor_transparent.active {
-  border-bottom-color: var(--zdt_advancedmultiselect_transparent_active_border);
-}
-.borderColor_default {
-  border-bottom-color: var(--zdt_advancedmultiselect_default_border);
-}
-.effect .borderColor_default:hover {
-  border-bottom-color: var(--zdt_advancedmultiselect_default_hover_border);
-}
-.effect .borderColor_default.active {
-  border-bottom-color: var(--zdt_advancedmultiselect_default_active_border);
-}
-.borderColor_dark {
-  border-bottom-color: var(--zdt_advancedmultiselect_dark_border);
-}
-.effect .borderColor_dark:hover {
-  border-bottom-color: var(--zdt_advancedmultiselect_dark_hover_border);
-}
-.effect .borderColor_dark.active {
-  border-bottom-color: var(--zdt_advancedmultiselect_dark_active_border);
-}
-[dir=ltr] .container.medium {
-  padding: 0 var(--zd_size34) var(--zd_size7) 0 ;
-}
-[dir=rtl] .container.medium {
-  padding: 0 0 var(--zd_size7) var(--zd_size34) ;
-}
-.container.xmedium {
-  min-height: var(--zd_size30) ;
-}
-[dir=ltr] .container.xmedium {
-  padding: 0 var(--zd_size34) var(--zd_size1) 0 ;
-}
-[dir=rtl] .container.xmedium {
-  padding: 0 0 var(--zd_size1) var(--zd_size34) ;
-}
-
-.delete {
-  position: absolute;
-  bottom: 0 ;
-  color: var(--zdt_advancedmultiselect_delete_text);
-  padding-bottom: var(--zd_size10) ;
-  cursor: pointer;
-  background-color: var(--zdt_advancedmultiselect_delete_bg);
-  border: 0;
-}
-
-[dir=ltr] .delete {
-  right: var(--zd_size15) ;
-}
-
-[dir=rtl] .delete {
-  left: var(--zd_size15) ;
-}
-
-.delete:hover {
-  color: var(--zdt_advancedmultiselect_delete_hover_text);
-}
-.transparentContainer .delete {
-  opacity: 0;
-  visibility: hidden;
-}
-.transparentContainer:hover .delete {
-  opacity: 1;
-  visibility: visible;
-}
-
-.box {
-  background: var(--zdt_advancedmultiselect_box_bg);
-}
-
-.small {
-  max-height: var(--zd_size200) ;
-}
-
-.medium {
-  max-height: var(--zd_size350) ;
-}
-
-.large {
-  max-height: var(--zd_size400) ;
-}
-
-.dropContainer {
-  display: inline-block;
-  max-width: 100% ;
-  margin-bottom: var(--zd_size5) ;
-}
-
-.dropPopup {
-  font-size: var(--zd_font_size13) ;
-}
-
-.dropPopup :global .toggleDropIcon {
-  color: var(--zdt_advancedmultiselect_droppopup_text);
-}
-
-.more {
-  font-size: var(--zd_font_size14) ;
-  color: var(--zdt_advancedmultiselect_more_text);
-  font-family: inherit;
-  cursor: pointer;
-  margin-top: var(--zd_size5) ;
-  background-color: var(--zdt_advancedmultiselect_delete_bg);
-  border: 0;
-}

package/es/deprecated/advancedMultiSelectVariableJson.js

@@ -1,80 +0,0 @@
-const componentAppearanceVariables = [{
-  "comment": "advanced multiselect",
-  "data": {
-    "zdt_advancedmultiselect_default_border": {
-      'light': ['var(--dot_inputLine)'],
-      'dark': ['var(--dot_inputLine)'],
-      'pureDark': ['var(--dot_inputLine)']
-    },
-    "zdt_advancedmultiselect_transparent_border": {
-      'light': ['var(--dot_mirror)'],
-      'dark': ['var(--dot_mirror)'],
-      'pureDark': ['var(--dot_mirror)']
-    },
-    "zdt_advancedmultiselect_dark_border": {
-      'light': ['var(--dot_mulledwine)'],
-      'dark': ['var(--dot_mulledwine)'],
-      'pureDark': ['var(--dot_mulledwine)']
-    },
-    "zdt_advancedmultiselect_default_hover_border": {
-      'light': ['var(--dot_inputLineHover)'],
-      'dark': ['var(--dot_inputLineHover)'],
-      'pureDark': ['var(--dot_inputLineHover)']
-    },
-    "zdt_advancedmultiselect_transparent_hover_border": {
-      'light': ['var(--dot_inputLineHover)'],
-      'dark': ['var(--dot_inputLineHover)'],
-      'pureDark': ['var(--dot_inputLineHover)']
-    },
-    "zdt_advancedmultiselect_dark_hover_border": {
-      'light': ['var(--dot_stardust)'],
-      'dark': ['var(--dot_stardust)'],
-      'pureDark': ['var(--dot_stardust)']
-    },
-    "zdt_advancedmultiselect_default_active_border": {
-      'light': ['var(--dot_inputLineFocus)'],
-      'dark': ['var(--dot_inputLineFocus)'],
-      'pureDark': ['var(--dot_inputLineFocus)']
-    },
-    "zdt_advancedmultiselect_transparent_active_border": {
-      'light': ['var(--dot_inputLineFocus)'],
-      'dark': ['var(--dot_inputLineFocus)'],
-      'pureDark': ['var(--dot_inputLineFocus)']
-    },
-    "zdt_advancedmultiselect_dark_active_border": {
-      'light': ['var(--dot_stardust)'],
-      'dark': ['var(--dot_stardust)'],
-      'pureDark': ['var(--dot_stardust)']
-    },
-    "zdt_advancedmultiselect_delete_text": {
-      'light': ['var(--dot_shuttleGrey)'],
-      'dark': ['var(--dot_cadetblue)'],
-      'pureDark': ['#999']
-    },
-    "zdt_advancedmultiselect_delete_hover_text": {
-      'light': ['var(--dot_black)'],
-      'dark': ['var(--dot_platinum)'],
-      'pureDark': ['var(--dot_platinum)']
-    },
-    "zdt_advancedmultiselect_delete_bg": {
-      'light': ['var(--dot_mirror)'],
-      'dark': ['var(--dot_mirror)'],
-      'pureDark': ['var(--dot_mirror)']
-    },
-    "zdt_advancedmultiselect_box_bg": {
-      'light': ['var(--dot_white)'],
-      'dark': ['var(--dot_ebonyclay)'],
-      'pureDark': ['#212121']
-    },
-    "zdt_advancedmultiselect_droppopup_text": {
-      'light': ['var(--dot_slateGrey)'],
-      'dark': ['var(--dot_oslogrey)'],
-      'pureDark': ['var(--dot_oslogrey)']
-    },
-    "zdt_advancedmultiselect_more_text": {
-      'light': ['var(--zdt_cta_primary_text)'],
-      'dark': ['var(--zdt_cta_primary_text)'],
-      'pureDark': ['var(--zdt_cta_primary_text)']
-    }
-  }
-}];

package/es/utils/__tests__/constructFullName.spec.js

@@ -1,9 +0,0 @@
-import { constructFullNameByPattern } from '../constructFullName';
-describe('constructFullName specification', () => {
-  it('firstname, lastname pattern', () => {
-    expect(constructFullNameByPattern('A', 'Vimalesan', ['FIRST_NAME', 'LAST_NAME'])).toEqual('A Vimalesan');
-  });
-  it('lastname firstname pattern', () => {
-    expect(constructFullNameByPattern('A', 'Vimalesan', ['LAST_NAME', 'FIRST_NAME'])).toEqual('Vimalesan A');
-  });
-});

package/es/utils/__tests__/debounce.spec.js

@@ -1,37 +0,0 @@
-import { debounce } from '../debounce';
-describe('debounce specification', () => {
-  beforeEach(() => {
-    jest.useFakeTimers();
-  });
-  it('should call immediate', () => {
-    const mockfn = jest.fn();
-    const dMockfn = debounce(mockfn, 1000, true);
-    dMockfn(); //expect(setTimeout).toHaveBeenCalledTimes(1);
-
-    expect(mockfn.mock.calls.length).toBe(1);
-  });
-  it('should call two times but it invoke multiple times', () => {
-    const mockfn = jest.fn();
-    const dMockfn = debounce(mockfn, 1000, true);
-    dMockfn();
-    dMockfn();
-    dMockfn();
-    dMockfn();
-    dMockfn();
-    setTimeout(() => {
-      expect(mockfn.mock.calls.length).toBe(2);
-    }, 1000);
-  });
-  it('should call one time but it invoke multiple times', () => {
-    const mockfn = jest.fn();
-    const dMockfn = debounce(mockfn, 1000);
-    dMockfn();
-    dMockfn();
-    dMockfn();
-    dMockfn();
-    dMockfn();
-    setTimeout(() => {
-      expect(mockfn.mock.calls.length).toBe(1);
-    }, 1000);
-  });
-});

package/es/utils/__tests__/getInitial.spec.js

@@ -1,23 +0,0 @@
-import { getInitial, getInitialByPattern } from '../getInitial';
-describe('getInitial specification', () => {
-  it('first name alone', () => {
-    expect(getInitial('vimalesan')).toEqual('V');
-  });
-  it('last name alone', () => {
-    expect(getInitial(null, 'vimalesan')).toEqual('VI');
-  });
-  it('first name and last name alone', () => {
-    expect(getInitial('vimalesan', 'a')).toEqual('VA');
-  });
-  it('last name with single character', () => {
-    expect(getInitial(null, 'v')).toEqual('V');
-  });
-});
-describe('getInitialByPattern specification', () => {
-  it('first name and last name pattern', () => {
-    expect(getInitialByPattern('vimalesan', 'a', ['FIRST_NAME', 'LAST_NAME'])).toEqual('VA');
-  });
-  it('last name and first name pattern', () => {
-    expect(getInitialByPattern('vimalesan', 'a', ['LAST_NAME', 'FIRST_NAME'])).toEqual('AV');
-  });
-});

package/es/utils/css/compileClassNames.js

@@ -1,28 +0,0 @@
-import { dataTypes, isDataTypeOf } from './utils';
-
-const collectClassNames = function (processedClassNameList) {
-  for (let index = 0; index < (arguments.length <= 1 ? 0 : arguments.length - 1); index++) {
-    let classInfo = index + 1 < 1 || arguments.length <= index + 1 ? undefined : arguments[index + 1];
-
-    if (!classInfo) {
-      continue;
-    } else if (isDataTypeOf(classInfo, dataTypes.object)) {
-      for (let property in classInfo) {
-        if (Object.hasOwnProperty.call(classInfo, property) && property !== 'undefined' && property !== 'null' && classInfo[property] && !processedClassNameList.includes(property)) {
-          processedClassNameList.push(property);
-        }
-      }
-    }
-  }
-};
-
-export default function compileClassNames() {
-  let resultClassNameList = [];
-
-  for (var _len = arguments.length, classinfoList = new Array(_len), _key = 0; _key < _len; _key++) {
-    classinfoList[_key] = arguments[_key];
-  }
-
-  collectClassNames(resultClassNameList, ...classinfoList);
-  return resultClassNameList.filter(a => a !== '').join(' ');
-}

package/es/utils/css/mergeStyle.js

@@ -1,57 +0,0 @@
-const REPLACER_SYMBOL = '$'; // $ startWith is used for replace the existing style.
-// all other will be append
-
-export default function mergeStyle(defaultStyle) {
-  let customStyle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  let additionalStyle = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-  // if(!Object.keys(defaultStyle).includes('base')) {
-  //   throw new Error(`STYLE CUSTOMIZATION RULE - Your style sheet should have "base" class name for customization`);
-  // }
-  return Object.keys(customStyle).reduce((res, next) => {
-    if (next.startsWith(REPLACER_SYMBOL)) {
-      let styleValue = customStyle[next];
-      let styleName = next.replace(REPLACER_SYMBOL, '');
-
-      if (!defaultStyle[styleName] && !additionalStyle.includes(styleName)) {
-        // return res;
-        throw new Error(`UNKNOWN CLASSNAME DETECTED - Given customStyle's key "${styleName}" is not available in that component style`);
-      }
-
-      if (additionalStyle.includes(styleName)) {
-        res[styleName] = styleValue;
-      } else {
-        let val = defaultStyle[styleName];
-        Object.keys(res).map(keyName => {
-          let styleKey = res[keyName];
-          let styleClasses = styleKey.split(' ');
-          let ind = styleClasses.indexOf(val);
-
-          if (ind !== -1) {
-            styleClasses[ind] = styleValue;
-            res[keyName] = styleClasses.join(' ');
-          }
-        });
-      }
-    } else if (defaultStyle[next]) {
-      let val = defaultStyle[next];
-      Object.keys(res).map(keyName => {
-        let styleKey = res[keyName];
-        let styleClasses = styleKey.split(' ');
-        let ind = styleClasses.indexOf(val);
-
-        if (ind !== -1) {
-          styleClasses[ind] = styleClasses[ind] + ' ' + customStyle[next];
-          res[keyName] = styleClasses.join(' ');
-        }
-      });
-    } else if (additionalStyle.includes(next)) {
-      res[next] = customStyle[next];
-    } else if (!defaultStyle[next] && !additionalStyle.includes(next)) {
-      // res[next] = customStyle[next];
-      throw new Error(`UNKNOWN CLASSNAME DETECTED - Given customStyle's key "${next}" is not available in that component style`);
-    }
-
-    return res;
-  }, { ...defaultStyle
-  });
-}