@zohodesk/dot 1.0.0-temp-38 → 1.0.0-temp-39

package/src/lookup/header/Search/docs/Search__default.docs.js

@@ -1,106 +1,106 @@
-/*** Libraries ***/
-import React, { Component } from 'react';
-import { Container } from '@zohodesk/components/lib/Layout';
-
-/*** Components ***/
-import Search from '../Search';
-
-export default class Search__default extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      searchStr: '',
-      value: 'All Fields',
-      selectedId: '1'
-    };
-    this.handleChange = this.handleChange.bind(this);
-    this.onSelect = this.onSelect.bind(this);
-  }
-
-  handleChange(value) {
-    this.setState({ searchStr: value });
-  }
-
-  onSelect(element, e) {
-    this.setState({
-      value: e.value,
-      selectedId: e.id
-    });
-  }
-
-  render() {
-    const { searchStr, value, selectedId } = this.state;
-    const Obj = [
-      { value: 'All Fields', id: '1' },
-      { needDivider: true },
-      { value: 'Conatct Name, Email, Phone', id: '2' },
-      { value: 'Account', id: '3' },
-      { value: 'Customer Place', id: '4' },
-      { value: 'Conatct ID', id: '5' }
-    ];
-    const style = { width: '280px', margin: '20px' },
-      boxStyle = {
-        border: '1px solid #e3e6eb',
-        padding: '15px 20px 25px',
-        marginBottom: '10px'
-      },
-      titleStyle = {
-        fontSize: '13px',
-        paddingBottom: '25px',
-        textTransform: 'upperCase'
-      };
-    return (
-      <div style={style}>
-        <div style={boxStyle}>
-          <div style={titleStyle}>Default</div>
-          <Search
-            placeHolder='Search'
-            onChange={this.handleChange}
-            onSearch={(e) => {
-              console.log(e);
-            }}
-            searchStr={searchStr}
-          />
-        </div>
-        <div style={boxStyle}>
-          <div style={titleStyle}>Search With Options</div>
-          <Container alignBox='row'>
-            <Search
-              placeHolder='Search'
-              onChange={this.handleChange}
-              onSearch={(e) => {
-                console.log(e);
-              }}
-              searchStr={searchStr}
-              isBoxed
-              options={Obj}
-              value={value}
-              selectedId={selectedId}
-              title={value}
-              onSelect={this.onSelect}
-            />
-          </Container>
-        </div>
-        <div style={boxStyle}>
-          <div style={titleStyle}>Search Icon With Box</div>
-          <Search
-            placeHolder='Search'
-            onChange={this.handleChange}
-            onSearch={(e) => {
-              console.log(e);
-            }}
-            searchStr={searchStr}
-            isBoxed
-            isSearchIconNeed
-          />
-        </div>
-      </div>
-    );
-  }
-}
-
-if (__DOCS__) {
-  Search__default.docs = {
-    componentGroup: 'Lookup'
-  };
-}
+/*** Libraries ***/
+import React, { Component } from 'react';
+import { Container } from '@zohodesk/components/lib/Layout';
+
+/*** Components ***/
+import Search from '../Search';
+
+export default class Search__default extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      searchStr: '',
+      value: 'All Fields',
+      selectedId: '1'
+    };
+    this.handleChange = this.handleChange.bind(this);
+    this.onSelect = this.onSelect.bind(this);
+  }
+
+  handleChange(value) {
+    this.setState({ searchStr: value });
+  }
+
+  onSelect(element, e) {
+    this.setState({
+      value: e.value,
+      selectedId: e.id
+    });
+  }
+
+  render() {
+    const { searchStr, value, selectedId } = this.state;
+    const Obj = [
+      { value: 'All Fields', id: '1' },
+      { needDivider: true },
+      { value: 'Conatct Name, Email, Phone', id: '2' },
+      { value: 'Account', id: '3' },
+      { value: 'Customer Place', id: '4' },
+      { value: 'Conatct ID', id: '5' }
+    ];
+    const style = { width: '280px', margin: '20px' },
+      boxStyle = {
+        border: '1px solid #e3e6eb',
+        padding: '15px 20px 25px',
+        marginBottom: '10px'
+      },
+      titleStyle = {
+        fontSize: '13px',
+        paddingBottom: '25px',
+        textTransform: 'upperCase'
+      };
+    return (
+      <div style={style}>
+        <div style={boxStyle}>
+          <div style={titleStyle}>Default</div>
+          <Search
+            placeHolder='Search'
+            onChange={this.handleChange}
+            onSearch={(e) => {
+              console.log(e);
+            }}
+            searchStr={searchStr}
+          />
+        </div>
+        <div style={boxStyle}>
+          <div style={titleStyle}>Search With Options</div>
+          <Container alignBox='row'>
+            <Search
+              placeHolder='Search'
+              onChange={this.handleChange}
+              onSearch={(e) => {
+                console.log(e);
+              }}
+              searchStr={searchStr}
+              isBoxed
+              options={Obj}
+              value={value}
+              selectedId={selectedId}
+              title={value}
+              onSelect={this.onSelect}
+            />
+          </Container>
+        </div>
+        <div style={boxStyle}>
+          <div style={titleStyle}>Search Icon With Box</div>
+          <Search
+            placeHolder='Search'
+            onChange={this.handleChange}
+            onSearch={(e) => {
+              console.log(e);
+            }}
+            searchStr={searchStr}
+            isBoxed
+            isSearchIconNeed
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+if (__DOCS__) {
+  Search__default.docs = {
+    componentGroup: 'Lookup'
+  };
+}

package/src/lookup/header/TicketHeader/TicketHeader.js

@@ -1,123 +1,123 @@
-/*** Libraries ***/
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-/*** Components ***/
-import Title from '../Title/Title';
-import Close from '../Close/Close';
-import Search from '../Search/Search';
-import ViewDropDown from '../ViewDropDown/ViewDropDown';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-
-/*** CSS ***/
-import commonStyle from '../lookupHeaderCommon.module.css';
-import commonResponsive from '../lookupHeaderCommonResponsive.module.css';
-import style from './TicketHeader.module.css';
-
-/* eslint-disable react/forbid-component-props */
-
-export default class TicketHeader extends Component {
-  render() {
-    let {
-      needSearch,
-      onLookupClose,
-      searchStr,
-      onSearchChange,
-      searchPlaceHolder,
-      title,
-      selectedViewId,
-      onSelectView,
-      allViews,
-      onSearch,
-      needOnTypeSearch,
-      getSearchBoxRef,
-      needViewsList,
-      i18nKeys
-    } = this.props;
-    let { menuEmptyMessage = 'No matches found' } = i18nKeys;
-    return (
-      <Container
-        align='vertical'
-        alignBox='row'
-        className={`${commonStyle.container} ${commonResponsive.container} ${style.container}`}
-        isCover={false}
-        wrap='wrap'
-      >
-        <div className={commonStyle.closeContainer}>
-          <Close onClose={onLookupClose} dataId='close' />
-        </div>
-        <Box flexible>
-          <Container
-            alignBox='column'
-            className={`${style.innerContainer}`}
-            isCover={false}
-            wrap='wrap'
-            dataId='lookupView'
-          >
-            <Box className={commonStyle.title}>
-              <Title text={title} />
-            </Box>
-            {needViewsList ? (
-              <Box className={`${style.dropdown}`} dataId='filterIdselected'>
-                <ViewDropDown
-                  dropBoxSize='small'
-                  emptyMessage={menuEmptyMessage}
-                  needSearch
-                  onChange={onSelectView}
-                  options={allViews}
-                  textField='displayLabel'
-                  selectedValue={selectedViewId}
-                  needCloseOnSelect
-                />
-              </Box>
-            ) : null}
-          </Container>
-        </Box>
-        {needSearch ? (
-          <Box
-            className={`${commonStyle.searchContainer} ${commonResponsive.searchContainer} ${style.searchContainer}`}
-          >
-            <Search
-              onSearch={onSearch}
-              searchStr={searchStr}
-              onChange={onSearchChange}
-              placeHolder={searchPlaceHolder}
-              dataId='search'
-              needOnTypeSearch={needOnTypeSearch}
-              getRef={getSearchBoxRef}
-            />
-          </Box>
-        ) : null}
-      </Container>
-    );
-  }
-}
-
-TicketHeader.propTypes = {
-  allViews: PropTypes.array,
-  getSearchBoxRef: PropTypes.func,
-  needOnTypeSearch: PropTypes.bool,
-  needSearch: PropTypes.bool,
-  needViewsList: PropTypes.bool,
-  onLookupClose: PropTypes.func,
-  onSearch: PropTypes.func,
-  onSearchChange: PropTypes.func,
-  onSelectView: PropTypes.func,
-  searchPlaceHolder: PropTypes.string,
-  searchStr: PropTypes.string,
-  selectedViewId: PropTypes.string,
-  title: PropTypes.string,
-  i18nKeys: PropTypes.shape({
-    menuEmptyMessage: PropTypes.string
-  })
-};
-
-TicketHeader.defaultProps = {
-  i18nKeys: {}
-};
-
-if (__DOCS__) {
-  TicketHeader.docs = {
-    componentGroup: 'Lookup'
-  };
-}
+/*** Libraries ***/
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+/*** Components ***/
+import Title from '../Title/Title';
+import Close from '../Close/Close';
+import Search from '../Search/Search';
+import ViewDropDown from '../ViewDropDown/ViewDropDown';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+
+/*** CSS ***/
+import commonStyle from '../lookupHeaderCommon.module.css';
+import commonResponsive from '../lookupHeaderCommonResponsive.module.css';
+import style from './TicketHeader.module.css';
+
+/* eslint-disable react/forbid-component-props */
+
+export default class TicketHeader extends Component {
+  render() {
+    let {
+      needSearch,
+      onLookupClose,
+      searchStr,
+      onSearchChange,
+      searchPlaceHolder,
+      title,
+      selectedViewId,
+      onSelectView,
+      allViews,
+      onSearch,
+      needOnTypeSearch,
+      getSearchBoxRef,
+      needViewsList,
+      i18nKeys
+    } = this.props;
+    let { menuEmptyMessage = 'No matches found' } = i18nKeys;
+    return (
+      <Container
+        align='vertical'
+        alignBox='row'
+        className={`${commonStyle.container} ${commonResponsive.container} ${style.container}`}
+        isCover={false}
+        wrap='wrap'
+      >
+        <div className={commonStyle.closeContainer}>
+          <Close onClose={onLookupClose} dataId='close' />
+        </div>
+        <Box flexible>
+          <Container
+            alignBox='column'
+            className={`${style.innerContainer}`}
+            isCover={false}
+            wrap='wrap'
+            dataId='lookupView'
+          >
+            <Box className={commonStyle.title}>
+              <Title text={title} />
+            </Box>
+            {needViewsList ? (
+              <Box className={`${style.dropdown}`} dataId='filterIdselected'>
+                <ViewDropDown
+                  dropBoxSize='small'
+                  emptyMessage={menuEmptyMessage}
+                  needSearch
+                  onChange={onSelectView}
+                  options={allViews}
+                  textField='displayLabel'
+                  selectedValue={selectedViewId}
+                  needCloseOnSelect
+                />
+              </Box>
+            ) : null}
+          </Container>
+        </Box>
+        {needSearch ? (
+          <Box
+            className={`${commonStyle.searchContainer} ${commonResponsive.searchContainer} ${style.searchContainer}`}
+          >
+            <Search
+              onSearch={onSearch}
+              searchStr={searchStr}
+              onChange={onSearchChange}
+              placeHolder={searchPlaceHolder}
+              dataId='search'
+              needOnTypeSearch={needOnTypeSearch}
+              getRef={getSearchBoxRef}
+            />
+          </Box>
+        ) : null}
+      </Container>
+    );
+  }
+}
+
+TicketHeader.propTypes = {
+  allViews: PropTypes.array,
+  getSearchBoxRef: PropTypes.func,
+  needOnTypeSearch: PropTypes.bool,
+  needSearch: PropTypes.bool,
+  needViewsList: PropTypes.bool,
+  onLookupClose: PropTypes.func,
+  onSearch: PropTypes.func,
+  onSearchChange: PropTypes.func,
+  onSelectView: PropTypes.func,
+  searchPlaceHolder: PropTypes.string,
+  searchStr: PropTypes.string,
+  selectedViewId: PropTypes.string,
+  title: PropTypes.string,
+  i18nKeys: PropTypes.shape({
+    menuEmptyMessage: PropTypes.string
+  })
+};
+
+TicketHeader.defaultProps = {
+  i18nKeys: {}
+};
+
+if (__DOCS__) {
+  TicketHeader.docs = {
+    componentGroup: 'Lookup'
+  };
+}

package/src/lookup/header/TicketHeader/TicketHeader.module.css

@@ -1,19 +1,19 @@
-.dropdown {
-  margin: 0 var(--zd_size8);
-}
-/* Responsive */
-.small .searchContainer {
-  text-align: left;
-}
-.small .searchContainer input {
-  border-bottom: 1px solid var(--zdt_lookupticketheader_border);
-  width: var(--zd_size193);
-}
-.small .innerContainer,
-.extraSmall .innerContainer {
-  flex-direction: column;
-  align-items: flex-start;
-}
-.extraSmall .container {
-  flex-direction: column;
-}
+.dropdown {
+  margin: 0 var(--zd_size8);
+}
+/* Responsive */
+.small .searchContainer {
+  text-align: left;
+}
+.small .searchContainer input {
+  border-bottom: 1px solid var(--zdt_lookupticketheader_border);
+  width: var(--zd_size193);
+}
+.small .innerContainer,
+.extraSmall .innerContainer {
+  flex-direction: column;
+  align-items: flex-start;
+}
+.extraSmall .container {
+  flex-direction: column;
+}

package/src/lookup/header/TicketHeader/docs/TicketHeader__default.docs.js

@@ -1,63 +1,63 @@
-/*** Libraries ***/
-import React, { Component } from 'react';
-
-/*** Componets ***/
-import TicketHeader from '../TicketHeader';
-
-export default class TicketHeader__default extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      searchStr: '',
-      selectedViewId: '1'
-    };
-    this.handleSearch = this.handleSearch.bind(this);
-    this.handleSelectView = this.handleSelectView.bind(this);
-  }
-
-  handleSearch(value) {
-    this.setState({
-      searchStr: value
-    });
-  }
-
-  handleSelectView(value) {
-    this.setState({
-      selectedViewId: value
-    });
-  }
-
-  render() {
-    let { searchStr, selectedViewId } = this.state;
-    let allViews = [
-      { displayLabel: 'All Tickets', id: '1' },
-      { displayLabel: 'Tickets for review', id: '2' },
-      { displayLabel: 'Customer Responded Tickets', id: '3' },
-      { displayLabel: 'Unassigned Open Tickets', id: '4' },
-      { displayLabel: 'Spam Tickets', id: '5' },
-      { displayLabel: 'SLA Violated Tickets', id: '6' },
-      { displayLabel: 'Overdue Tickets', id: '7' },
-      { displayLabel: 'My Tickets', id: '8' },
-      { displayLabel: 'My Open Tickets', id: '9' },
-      { displayLabel: 'My Overdue Tickets', id: '10' }
-    ];
-    return (
-      <TicketHeader
-        title='Select Ticket'
-        needSearch
-        searchStr={searchStr}
-        onSearchChange={this.handleSearch}
-        searchPlaceHolder='Search'
-        selectedViewId={selectedViewId}
-        onSelectView={this.handleSelectView}
-        allViews={allViews}
-      />
-    );
-  }
-}
-
-if (__DOCS__) {
-  TicketHeader__default.docs = {
-    componentGroup: 'Lookup'
-  };
-}
+/*** Libraries ***/
+import React, { Component } from 'react';
+
+/*** Componets ***/
+import TicketHeader from '../TicketHeader';
+
+export default class TicketHeader__default extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      searchStr: '',
+      selectedViewId: '1'
+    };
+    this.handleSearch = this.handleSearch.bind(this);
+    this.handleSelectView = this.handleSelectView.bind(this);
+  }
+
+  handleSearch(value) {
+    this.setState({
+      searchStr: value
+    });
+  }
+
+  handleSelectView(value) {
+    this.setState({
+      selectedViewId: value
+    });
+  }
+
+  render() {
+    let { searchStr, selectedViewId } = this.state;
+    let allViews = [
+      { displayLabel: 'All Tickets', id: '1' },
+      { displayLabel: 'Tickets for review', id: '2' },
+      { displayLabel: 'Customer Responded Tickets', id: '3' },
+      { displayLabel: 'Unassigned Open Tickets', id: '4' },
+      { displayLabel: 'Spam Tickets', id: '5' },
+      { displayLabel: 'SLA Violated Tickets', id: '6' },
+      { displayLabel: 'Overdue Tickets', id: '7' },
+      { displayLabel: 'My Tickets', id: '8' },
+      { displayLabel: 'My Open Tickets', id: '9' },
+      { displayLabel: 'My Overdue Tickets', id: '10' }
+    ];
+    return (
+      <TicketHeader
+        title='Select Ticket'
+        needSearch
+        searchStr={searchStr}
+        onSearchChange={this.handleSearch}
+        searchPlaceHolder='Search'
+        selectedViewId={selectedViewId}
+        onSelectView={this.handleSelectView}
+        allViews={allViews}
+      />
+    );
+  }
+}
+
+if (__DOCS__) {
+  TicketHeader__default.docs = {
+    componentGroup: 'Lookup'
+  };
+}

package/src/lookup/header/Title/LookupTitle.module.css

@@ -1,20 +1,20 @@
-.title {
-  font-size: var(--zd_font_size16);
-  font-family: var(--zd_semibold);
-  composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
-  vertical-align: middle;
-  word-break: break-all;
-}
-.bold {
-  font-family: var(--zd_semibold);
-}
-/* Palette */
-.default {
-  color: var(--zdt_lookuptitle_default_text);
-}
-.primary {
-  color: var(--zdt_lookuptitle_primary_text);
-}
-.danger {
-  color: var(--zdt_lookuptitle_danger_text);
-}
+.title {
+  font-size: var(--zd_font_size16);
+  font-family: var(--zd_semibold);
+  composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
+  vertical-align: middle;
+  word-break: break-all;
+}
+.bold {
+  font-family: var(--zd_semibold);
+}
+/* Palette */
+.default {
+  color: var(--zdt_lookuptitle_default_text);
+}
+.primary {
+  color: var(--zdt_lookuptitle_primary_text);
+}
+.danger {
+  color: var(--zdt_lookuptitle_danger_text);
+}