@urbanos/react-discovery-ui 2.1.43

package/lib/components/generic-elements/paginator/paginator.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./paginator.scss");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _arrowButton = _interopRequireDefault(require("../arrow-button"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var DISPLAY_SIZE = 7;
+// Half the display width minus the first/last element and the elipsis
+var MIDDLE_WIDTH = DISPLAY_SIZE / 2 - 2;
+var _default = exports.default = function _default(_ref) {
+  var className = _ref.className,
+    numberOfPages = _ref.numberOfPages,
+    currentPage = _ref.currentPage,
+    pageChangeCallback = _ref.pageChangeCallback;
+  var options = calculateOptions(numberOfPages, currentPage);
+  return /*#__PURE__*/React.createElement("paginator-element", {
+    "data-testid": "paginator",
+    class: className
+  }, /*#__PURE__*/React.createElement(_arrowButton.default, {
+    className: "pagination-box arrow",
+    disabled: currentPage === 1,
+    onClick: function onClick() {
+      return onLeftArrowClick(currentPage, pageChangeCallback);
+    },
+    innerClass: "left-arrow"
+  }), options.map(function (text, index) {
+    return createOption(index, text, currentPage, pageChangeCallback);
+  }), /*#__PURE__*/React.createElement(_arrowButton.default, {
+    className: "pagination-box arrow",
+    disabled: currentPage === numberOfPages,
+    onClick: function onClick() {
+      return onRightArrowClick(currentPage, numberOfPages, pageChangeCallback);
+    },
+    innerClass: "right-arrow"
+  }));
+};
+var createOption = function createOption(index, text, currentPage, pageChangeCallback) {
+  var isSelected = text === currentPage;
+  var isEllipsis = text === '...';
+  var typeClass = isEllipsis ? 'ellipsis' : 'page-number';
+  var selectedClass = isSelected ? 'selected' : '';
+  var onClick = isSelected || isEllipsis ? function () {} : function () {
+    return pageChangeCallback(text);
+  };
+  return /*#__PURE__*/React.createElement("button", {
+    key: "pagination-option-".concat(index),
+    disabled: isSelected,
+    className: "pagination-box option ".concat(typeClass, " ").concat(selectedClass),
+    onClick: onClick
+  }, text);
+};
+var onLeftArrowClick = function onLeftArrowClick(currentPage, pageChangeCallback) {
+  if (currentPage > 1) {
+    pageChangeCallback(currentPage - 1);
+  }
+};
+var onRightArrowClick = function onRightArrowClick(currentPage, numberOfPages, pageChangeCallback) {
+  if (currentPage < numberOfPages) {
+    pageChangeCallback(currentPage + 1);
+  }
+};
+var calculateOptions = function calculateOptions(numberOfPages, currentPage) {
+  var needsTrailingElipsis = numberOfPages > DISPLAY_SIZE && currentPage < numberOfPages - DISPLAY_SIZE / 2;
+  var needsLeadingElipsis = numberOfPages > DISPLAY_SIZE && currentPage > 1 + DISPLAY_SIZE / 2;
+  var middleStart, middleEnd;
+  if (needsLeadingElipsis && needsTrailingElipsis) {
+    middleStart = Math.ceil(currentPage - MIDDLE_WIDTH);
+    middleEnd = Math.ceil(currentPage + MIDDLE_WIDTH);
+  } else if (needsLeadingElipsis && !needsTrailingElipsis) {
+    middleStart = Math.floor(numberOfPages - DISPLAY_SIZE / 2);
+    middleEnd = numberOfPages;
+  } else if (!needsLeadingElipsis && needsTrailingElipsis) {
+    middleStart = 2;
+    middleEnd = DISPLAY_SIZE - 1;
+  } else {
+    middleStart = 2;
+    middleEnd = numberOfPages;
+  }
+  return (0, _lodash.default)([1, needsLeadingElipsis ? '...' : null, numberOfPages > 2 ? _lodash.default.range(middleStart, middleEnd) : null, needsTrailingElipsis ? '...' : null, numberOfPages > 1 ? numberOfPages : null]).flatten().compact().value();
+};

package/lib/components/generic-elements/paginator/paginator.scss

@@ -0,0 +1,38 @@
+@import '../../../styles/mixins.scss';
+@import '../../../styles/variables.scss';
+
+paginator-element {
+  /*@include flex-row();*/
+
+  .pagination-box {
+    /* @include flex-column();*/
+    height: 2.875rem;
+    width: 2.875rem;
+    border: 1px solid #D2D4D6;
+    background-color: white;
+    margin: 0px 2px;
+  }
+
+  .page-number,
+  .arrow {
+    &:hover:not(.selected):not(.disabled) {
+      background-color: rgba(235, 237, 240, 0.4);
+      color: $light-blue;
+      cursor: pointer;
+    }
+  }
+
+  .right-arrow svg {
+    transform: rotate(180deg);
+  }
+
+  .right-arrow,
+  .left-arrow {
+    height: .9rem;
+  }
+
+  .selected {
+    font-weight: bold;
+    background-color: #f7f7f7;
+  }
+}

package/lib/components/generic-elements/paginator/paginator.test.js

@@ -0,0 +1,140 @@
+import Paginator from './paginator'
+import ArrowButton from '../arrow-button'
+import { shallow } from 'enzyme'
+
+describe('Paginator', () => {
+  test('sets the text of the option to 1 when number of pages is 1', () => {
+    const subject = shallow(<Paginator currentPage={1} numberOfPages={1} />)
+
+    expect(subject.find('.option').text()).toEqual('1')
+  })
+
+  test('sets the text of the options correctly when number of pages is 7', () => {
+    const expected = ['1', '2', '3', '4', '5', '6', '7']
+
+    const subject = shallow(<Paginator currentPage={1} numberOfPages={7} />)
+
+    expect(subject.find('.option').map(it => it.text())).toEqual(expected)
+  })
+
+  test('sets the text of the options correctly when current page is 4 with more 8 total pages', () => {
+    const expected = ['1', '2', '3', '4', '5', '...', '8']
+
+    const subject = shallow(<Paginator currentPage={4} numberOfPages={8} />)
+
+    expect(subject.find('.option').map(it => it.text())).toEqual(expected)
+  })
+
+  test('sets the text of the options correctly when current page is 1 with more 8 total pages', () => {
+    const expected = ['1', '2', '3', '4', '5', '...', '8']
+
+    const subject = shallow(<Paginator currentPage={1} numberOfPages={8} />)
+
+    expect(subject.find('.option').map(it => it.text())).toEqual(expected)
+  })
+
+  test('sets the text of the options correctly when current page is 11 with 14 total pages', () => {
+    const expected = ['1', '...', '10', '11', '12', '13', '14']
+
+    const subject = shallow(<Paginator currentPage={11} numberOfPages={14} />)
+
+    expect(subject.find('.option').map(it => it.text())).toEqual(expected)
+  })
+
+  test('sets the text of the options correctly when current page is 14 with 14 total pages', () => {
+    const expected = ['1', '...', '10', '11', '12', '13', '14']
+
+    const subject = shallow(<Paginator currentPage={14} numberOfPages={14} />)
+
+    expect(subject.find('.option').map(it => it.text())).toEqual(expected)
+  })
+
+  test('sets the text of the options correctly when current page is 6 with 20 total pages', () => {
+    const expected = ['1', '...', '5', '6', '7', '...', '20']
+
+    const subject = shallow(<Paginator currentPage={6} numberOfPages={20} />)
+
+    expect(subject.find('.option').map(it => it.text())).toEqual(expected)
+  })
+
+  test('sets the text of the options correctly when current page is 1 with 3 total pages', () => {
+    const expected = ['1', '2', '3']
+
+    const subject = shallow(<Paginator currentPage={1} numberOfPages={3} />)
+
+    expect(subject.find('.option').map(it => it.text())).toEqual(expected)
+  })
+
+  describe('clicking behavior', () => {
+    let subject, pageChangeCallback
+
+    beforeEach(() => {
+      pageChangeCallback = jest.fn()
+      subject = shallow(<Paginator currentPage={1} numberOfPages={15} pageChangeCallback={pageChangeCallback} />)
+    })
+
+    test('clicking a page number invokes the pageChangeCallback with the page number clicked', () => {
+      const thirdPage = subject.find('.page-number').at(2)
+
+      thirdPage.simulate('click')
+
+      expect(pageChangeCallback).toHaveBeenCalledWith(3)
+    })
+
+    test('clicking the existing page number does nothing', () => {
+      const selectedPage = subject.find('.selected').at(0)
+
+      selectedPage.simulate('click')
+
+      expect(pageChangeCallback).not.toHaveBeenCalled()
+    })
+
+    test('clicking an ellipsis does nothing', () => {
+      const ellipsisElement = subject.find('.ellipsis').at(0)
+
+      ellipsisElement.simulate('click')
+
+      expect(pageChangeCallback).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('arrow functionality', () => {
+    let pageChangeCallback
+
+    beforeEach(() => {
+      pageChangeCallback = jest.fn()
+    })
+
+    test('clicking the left arrow when on the first page does nothing', () => {
+      const subject = shallow(<Paginator currentPage={1} numberOfPages={15} pageChangeCallback={pageChangeCallback} />)
+
+      subject.find(ArrowButton).at(0).props().onClick()
+
+      expect(pageChangeCallback).not.toHaveBeenCalled()
+    })
+
+    test('clicking the right arrow when on the last page does nothing', () => {
+      const subject = shallow(<Paginator currentPage={15} numberOfPages={15} pageChangeCallback={pageChangeCallback} />)
+
+      subject.find(ArrowButton).at(1).props().onClick()
+
+      expect(pageChangeCallback).not.toHaveBeenCalled()
+    })
+
+    test('clicking the left arrow invokes the pageChangeCallback with the previous page', () => {
+      const subject = shallow(<Paginator currentPage={4} numberOfPages={15} pageChangeCallback={pageChangeCallback} />)
+
+      subject.find(ArrowButton).at(0).props().onClick()
+
+      expect(pageChangeCallback).toHaveBeenCalledWith(3)
+    })
+
+    test('clicking the right arrow invokes the pageChangeCallback with the next page', () => {
+      const subject = shallow(<Paginator currentPage={4} numberOfPages={15} pageChangeCallback={pageChangeCallback} />)
+
+      subject.find(ArrowButton).at(1).props().onClick()
+
+      expect(pageChangeCallback).toHaveBeenCalledWith(5)
+    })
+  })
+})

package/lib/components/generic-elements/plus-icon/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactSvgInline = _interopRequireDefault(require("react-svg-inline"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var folderSVG = "<svg height=\"100\" width=\"100\" fill=\"#999\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" preserveAspectRatio=\"none\"><defs><path d=\"M51.95 48V21.85q0-.8-.55-1.45-.6-.55-1.45-.55t-1.4.55q-.65.65-.65 1.45V48H21.75q-.85 0-1.4.6-.6.6-.6 1.45t.6 1.4q.55.6 1.4.6H47.9V78.2q0 .85.65 1.4.55.65 1.4.65.85 0 1.45-.65.55-.55.55-1.4V52.05H78.1q.85 0 1.45-.6.6-.55.6-1.4 0-.85-.6-1.45T78.1 48H51.95z\" id=\"folderSVG-a\"/></defs><use xlink:href=\"#folderSVG-a\"/></svg>";
+var _default = exports.default = function _default(_ref) {
+  var className = _ref.className;
+  return /*#__PURE__*/React.createElement("span", {
+    className: className
+  }, /*#__PURE__*/React.createElement(_reactSvgInline.default, {
+    className: "plus-icon",
+    svg: folderSVG,
+    height: "1.6rem",
+    width: "1.6rem",
+    accessibilityDesc: "Plus Icon"
+  }));
+};

package/lib/components/generic-elements/save-indicator/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _saveIndicator = _interopRequireDefault(require("./save-indicator"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _saveIndicator.default;

package/lib/components/generic-elements/save-indicator/save-indicator.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+require("./save-indicator.scss");
+var _CheckCircle = _interopRequireDefault(require("@material-ui/icons/CheckCircle"));
+var _Error = _interopRequireDefault(require("@material-ui/icons/Error"));
+var _loadingElement = _interopRequireDefault(require("../loading-element"));
+var _shareLink = _interopRequireDefault(require("../share-link"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var SaveIndicator = function SaveIndicator(_ref) {
+  var saving = _ref.saving,
+    success = _ref.success,
+    failure = _ref.failure,
+    linkUrl = _ref.linkUrl;
+  if (saving) {
+    return /*#__PURE__*/_react.default.createElement("save-indicator", null, /*#__PURE__*/_react.default.createElement(_loadingElement.default, {
+      className: "icon"
+    }), /*#__PURE__*/_react.default.createElement("p", null, "Your visualization is being saved"));
+  }
+  if (success) {
+    return /*#__PURE__*/_react.default.createElement("save-indicator", null, /*#__PURE__*/_react.default.createElement(_CheckCircle.default, {
+      className: "success icon"
+    }), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("p", null, "Your visualization has saved"), linkUrl && /*#__PURE__*/_react.default.createElement(_shareLink.default, {
+      linkUrl: linkUrl,
+      className: "link-button"
+    })));
+  }
+  if (failure) {
+    return /*#__PURE__*/_react.default.createElement("save-indicator", null, /*#__PURE__*/_react.default.createElement(_Error.default, {
+      className: "failure icon"
+    }), /*#__PURE__*/_react.default.createElement("p", null, "Your visualization failed to save"));
+  }
+  return /*#__PURE__*/_react.default.createElement("save-indicator", null);
+};
+var _default = exports.default = SaveIndicator;

package/lib/components/generic-elements/save-indicator/save-indicator.scss

@@ -0,0 +1,31 @@
+@import "../../../styles/variables.scss";
+@import "../../../styles/mixins.scss";
+
+save-indicator {
+  @include custom-element();
+
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  white-space: nowrap;
+  margin-top: 10px;
+
+  .success {
+    color: #158655;
+  }
+
+  .failure {
+    color: #B80000;
+  }
+
+  .icon {
+    width: 1.5rem;
+    margin-right: 1rem;
+    line-height: 0;
+    align-self: start;
+  }
+
+  p {
+    margin: 0
+  }
+}

package/lib/components/generic-elements/save-indicator/save-indicator.test.js

@@ -0,0 +1,89 @@
+import { shallow } from 'enzyme'
+import SaveIndicator from './'
+import LoadingElement from '../loading-element'
+import ErrorIcon from '@material-ui/icons/Error'
+import CheckCircleIcon from '@material-ui/icons/CheckCircle'
+import ShareLink from '../share-link'
+
+describe('SaveIndicator', () => {
+  let subject
+
+  describe('when no state is indicated', () => {
+    it('returns empty', () => {
+      subject = shallow(<SaveIndicator />)
+
+      expect(subject.text()).toEqual('')
+    })
+  })
+
+  describe('when saving is in progress', () => {
+    beforeEach(() => {
+      subject = shallow(<SaveIndicator saving />)
+    })
+
+    it('displays the loading element', () => {
+      expect(subject.find(LoadingElement).length).toBe(1)
+    })
+
+    it('displays correct text', () => {
+      expect(subject.text()).toContain('Your visualization is being saved')
+    })
+  })
+
+  describe('when saving is not in progress', () => {
+    describe('and save failed', () => {
+      beforeEach(() => {
+        subject = shallow(<SaveIndicator failure />)
+      })
+
+      it('does not display the loading element', () => {
+        expect(subject.find(LoadingElement).length).toBe(0)
+      })
+
+      it('displays a failure icon', () => {
+        expect(subject.find(ErrorIcon).length).toBe(1)
+      })
+
+      it('displays correct text', () => {
+        expect(subject.text()).toContain('Your visualization failed to save')
+      })
+    })
+
+    describe('and save succeeded with a link url', () => {
+      const linkUrl = 'path/to/visualization'
+
+      beforeEach(() => {
+        subject = shallow(<SaveIndicator success linkUrl={linkUrl} />)
+      })
+
+      it('does not display the loading element', () => {
+        expect(subject.find(LoadingElement).length).toBe(0)
+      })
+
+      it('displays a success icon', () => {
+        expect(subject.find(CheckCircleIcon).length).toBe(1)
+      })
+
+      it('displays correct text', () => {
+        expect(subject.text()).toContain('Your visualization has saved')
+      })
+
+      it('displays a shareable link for the saved visualziation', () => {
+        const link = subject.find(ShareLink)
+
+        expect(link.length).toBe(1)
+        expect(link.props().linkUrl).toBe(linkUrl)
+      })
+    })
+
+    describe('and save succeeded with no link path', () => {
+      beforeEach(() => {
+        subject = shallow(<SaveIndicator success />)
+      })
+
+      it('does not display a shareable link', () => {
+        expect(subject.find(ShareLink).length).toBe(0)
+      })
+    })
+  })
+})

package/lib/components/generic-elements/search/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _search = _interopRequireDefault(require("./search"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _search.default;

package/lib/components/generic-elements/search/search.js

@@ -0,0 +1,93 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./search.scss");
+var _react = require("react");
+var _Search = _interopRequireDefault(require("@material-ui/icons/Search"));
+var _Clear = _interopRequireDefault(require("@material-ui/icons/Clear"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+var ENTER = 13;
+var _default = exports.default = /*#__PURE__*/function (_Component) {
+  function _default(props) {
+    var _this;
+    _classCallCheck(this, _default);
+    _this = _callSuper(this, _default, [props]);
+    _this.state = {
+      searchText: props.defaultText || ''
+    };
+    _this.onChange = _this.onChange.bind(_this);
+    _this.onKeyUp = _this.onKeyUp.bind(_this);
+    _this.onClearClicked = _this.onClearClicked.bind(_this);
+    _this.searchBox = /*#__PURE__*/(0, _react.createRef)();
+    return _this;
+  }
+  _inherits(_default, _Component);
+  return _createClass(_default, [{
+    key: "render",
+    value: function render() {
+      var clearButtonDisableClass = this.state.searchText ? '' : 'disabled';
+      return /*#__PURE__*/React.createElement("search-box", {
+        class: this.props.className
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "search"
+      }, /*#__PURE__*/React.createElement(_Search.default, null)), /*#__PURE__*/React.createElement("input", {
+        "data-testid": "search",
+        "aria-label": this.props.placeholder,
+        ref: this.searchBox,
+        type: "text",
+        value: this.state.searchText,
+        onKeyUp: this.onKeyUp,
+        onChange: this.onChange,
+        placeholder: this.props.placeholder,
+        className: "search-bar"
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "clear ".concat(clearButtonDisableClass)
+      }, /*#__PURE__*/React.createElement(_Clear.default, {
+        className: "clear-icon",
+        onClick: this.onClearClicked
+      })));
+    }
+  }, {
+    key: "onChange",
+    value: function onChange(event) {
+      this.setState({
+        searchText: event.target.value
+      });
+    }
+  }, {
+    key: "onKeyUp",
+    value: function onKeyUp(event) {
+      if (event.keyCode === ENTER) {
+        this.props.callback(this.state.searchText);
+      }
+    }
+  }, {
+    key: "onClearClicked",
+    value: function onClearClicked() {
+      this.setState({
+        searchText: ''
+      });
+
+      // Shallow rendering does not play nice with refs
+      if (this.searchBox.current) {
+        this.searchBox.current.focus();
+      }
+    }
+  }]);
+}(_react.Component);

package/lib/components/generic-elements/search/search.scss

@@ -0,0 +1,90 @@
+@import '../../../styles/variables.scss';
+@import '../../../styles/mixins.scss';
+
+search-box {
+  @include custom-element();
+  position: relative;
+
+  $input-padding: 3.5rem;
+  color: $dark-grey;
+
+  &:hover {
+    color: black;
+  }
+
+  .search-bar {
+    height: 100%;
+    width: calc(100% - (#{$input-padding} * 2));
+    padding: 0 $input-padding;
+    background-color:#edf1f5;
+    box-shadow: 0 1px 4px 0 rgba(0,0,0,0.1);
+    border-radius: 20px;
+    border: 1px solid $light-grey;
+
+    &:hover {
+      border: 1px solid $medium-grey;
+    }
+    &:focus {
+      outline: none;
+    }
+  }
+  .search .MuiSvgIcon-root  {
+    margin: 0 0 0 1rem;
+  }
+  .clear, .search {
+    @include flex-column();
+    position: absolute;
+    height: 100%;
+    width: $input-padding;
+    top: 1px;
+  }
+
+  .clear {
+    pointer-events: none;
+    border: none;
+    right: -1px;
+  }
+
+  .search {
+    left: 0;
+
+  }
+
+  .clear-icon {
+    @include flex-column();
+    cursor: pointer;
+    font-size: 1.25rem;
+    height: 1.75rem;
+    width: 1.75rem;
+    pointer-events: initial;
+
+    &:hover {
+      background-color: $light-grey;
+      border-radius: 50%;
+    }
+  }
+  @media only screen and (max-width: 600px) {
+
+    .search {
+      box-shadow:none;
+    }
+  
+
+  
+    search-box.search {
+      margin-top:10px;
+    }
+  
+    search-box .search-bar {
+      box-shadow:none;
+      border-radius:6px;
+      font-size:13px;
+    }
+  
+  }
+}
+  .disabled {
+    display: none;
+  }
+
+