Merge pull request #408 from rhinogram/a-z

RHIN-10083: Adds A-Z sort component

src/less/dropdowns.less

@@ -495,3 +495,7 @@
   display: flex;
   align-items: center;
 }
+
+.dropdown-caret--diabled {
+  color: @global-color-gray-light;
+}

src/less/utilities/utilities-core.less

@@ -135,6 +135,17 @@
   font-size: @global-font-size-small !important;
 }
 
+.u-text-xsmall {
+  font-size: @global-font-size-xsmall !important;
+}
+
+.u-text-tiny {
+  font-size: @global-font-size-tiny !important;
+}
+
+.u-line-height-tiny {
+  line-height: @global-line-height-tiny !important;
+}
 
 //
 // Text Style

src/less/utilities/utilities-spacing.less

@@ -68,6 +68,22 @@
   margin-top: @global-whitespace-small !important;
 }
 
+.u-m-a-xsmall { margin: @global-whitespace-xsmall !important; }
+.u-m-t-xsmall { margin-top: @global-whitespace-xsmall !important; }
+.u-m-r-xsmall { margin-right: @global-whitespace-xsmall !important; }
+.u-m-b-xsmall { margin-bottom: @global-whitespace-xsmall !important; }
+.u-m-l-xsmall { margin-left: @global-whitespace-xsmall !important; }
+
+.u-m-x-xsmall {
+  margin-left: @global-whitespace-xsmall !important;
+  margin-right: @global-whitespace-xsmall !important;
+}
+
+.u-m-y-xsmall {
+  margin-bottom: @global-whitespace-xsmall !important;
+  margin-top: @global-whitespace-xsmall !important;
+}
+
 .u-m-a-large { margin: @global-whitespace-large !important; }
 .u-m-t-large { margin-top: @global-whitespace-large !important; }
 .u-m-r-large { margin-right: @global-whitespace-large !important; }
@@ -140,6 +156,21 @@
   padding-top: @global-whitespace-small !important;
 }
 
+.u-p-a-xsmall { padding: @global-whitespace-xsmall !important; }
+.u-p-t-xsmall { padding-top: @global-whitespace-xsmall !important; }
+.u-p-r-xsmall { padding-right: @global-whitespace-xsmall !important; }
+.u-p-b-xsmall { padding-bottom: @global-whitespace-xsmall !important; }
+.u-p-l-xsmall { padding-left: @global-whitespace-xsmall !important; }
+
+.u-p-x-xsmall {
+  padding-left: @global-whitespace-xsmall !important;
+  padding-right: @global-whitespace-xsmall !important;
+}
+
+.u-p-y-xsmall {
+  padding-bottom: @global-whitespace-xsmall !important;
+  padding-top: @global-whitespace-xsmall !important;
+}
 
 .u-p-a-large { padding: @global-whitespace-large !important; }
 .u-p-t-large { padding-top: @global-whitespace-large !important; }

src/less/variables.less

@@ -168,12 +168,14 @@
 @global-font-heading-color: inherit;
 @global-line-height-base: 1.42857143;
 @global-line-height-small: 1.2;
+@global-line-height-tiny: 1;
 @global-line-height-computed: @global-font-size-base * @global-line-height-base;
 @global-font-size-base: 1.6rem;
 @global-font-size-large: 2rem;
 @global-font-size-medium: 1.8rem;
 @global-font-size-small: 1.4rem;
 @global-font-size-xsmall: 1.2rem;
+@global-font-size-tiny: 1rem;
 @global-font-weight-normal: 400;
 @global-font-weight-bold: 700;
 

src/scripts/components/DropdownMultiSelectAdvanced.jsx

@@ -14,6 +14,7 @@ import Resource from './Resource';
 import ResourceGroup from './ResourceGroup';
 import ResourceIntro from './ResourceIntro';
 import UtilityInlineGrid from './UtilityInlineGrid';
+import SortAZ from './SortAZ';
 
 class DropdownMultiSelectAdvanced extends Component {
   state = {
@@ -205,6 +206,9 @@ class DropdownMultiSelectAdvanced extends Component {
       interfaceLeft,
       blockGroup,
       dropdownWrapperClass,
+      handleSort,
+      sortDirection,
+      sortable,
     } = this.props;
     const { isViewAllItems, searchText } = this.state;
 
@@ -254,19 +258,27 @@ class DropdownMultiSelectAdvanced extends Component {
               )}
             </UtilityInlineGrid>
             {isViewAllItems && (
-            <Input
-              placeholder={searchTitle}
-              className="search__input"
-              onChange={this.handleSearch}
-              initialValue={searchText}
-              addon="left"
-              type="text"
-              name="preloadedMembers"
-              dataFeatureTag={searchTitle}
-              autoComplete="off"
-            >
-              <Icon icon="search" />
-            </Input>
+              <div className="u-flex u-flex-direction-row">
+                <Input
+                  placeholder={searchTitle}
+                  className="search__input"
+                  onChange={this.handleSearch}
+                  initialValue={searchText}
+                  addon="left"
+                  type="text"
+                  name="preloadedMembers"
+                  dataFeatureTag={searchTitle}
+                  autoComplete="off"
+                >
+                  <Icon icon="search" />
+                </Input>
+                {sortable && (
+                <SortAZ
+                  handleSort={handleSort}
+                  sortDirection={sortDirection}
+                />
+                )}
+              </div>
             )}
           </div>
         </div>
@@ -322,6 +334,9 @@ DropdownMultiSelectAdvanced.propTypes = {
   selectedItemsIds: PropTypes.array.isRequired,
   type: PropTypes.string,
   dropdownWrapperClass: PropTypes.string,
+  sortable: PropTypes.bool,
+  handleSort: PropTypes.func,
+  sortDirection: PropTypes.string,
 };
 
 DropdownMultiSelectAdvanced.defaultProps = {

src/scripts/components/SortAZ.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Icon from './Icon';
+import Button from './Button';
+
+const SortAZ = ({ handleSort, sortDirection, className }) => {
+  const disabledCaretClass = 'dropdown-caret--diabled ';
+
+  const caretUpClass = sortDirection === 'asc' ? disabledCaretClass : ''; // ascending
+  const caretDownClass = sortDirection === 'asc' ? '' : disabledCaretClass; // descending
+  return (
+    <Button type="reset" className={`u-text-xsmall u-flex u-p-a-small ${className || ''}`} onClick={handleSort}>
+      <span className="u-flex u-flex-direction-column u-p-a-xsmall">
+        <div className="u-text-tiny u-line-height-tiny ">A</div>
+        <div className="u-text-tiny u-line-height-tiny ">Z</div>
+      </span>
+      <span className="u-flex u-flex-direction-column u-flex-justify-center">
+        <Icon icon="caret-up" className={caretUpClass} size="small" />
+        <Icon icon="caret-down" className={caretDownClass} size="small" />
+      </span>
+    </Button>
+  );
+};
+
+SortAZ.propTypes = {
+  handleSort: PropTypes.func.isRequired,
+  sortDirection: PropTypes.string.isRequired,
+  className: PropTypes.string,
+};
+
+export default SortAZ;

src/scripts/docs/IconApp.jsx

@@ -17,6 +17,7 @@ const IconScope = {
 
 // Add new icons here
 const icons = [
+  'a-z',
   'add-circle',
   'add-emoji',
   'alert-triangle',

src/scripts/docs/examples/DropdownMultiSelectAdvanced.example.txt

@@ -3,6 +3,7 @@ class ComponentExample extends React.Component {
     selectedItems: {},
     selectedItemsIds: [],
     itemSearchLoading: false,
+    sortDirection: 'asc',
     items: {
           1: { id: 1, title: 'Ben Bruning', name: 'BB', profileImageUrl: '' },
           2: { id: 2, title: 'Blake Guilloud', name: 'BG', profileImageUrl: '' },
@@ -58,6 +59,12 @@ class ComponentExample extends React.Component {
     })
   }
 
+  handleSort = () => {
+    this.setState((prevState) => ({
+      sortDirection: prevState.sortDirection === 'asc' ? 'desc' : 'asc',
+    }));
+  }
+
   render() {
     let label = 'Contact(s)';
     if (this.state.selectedItemsIds.length > 0) {
@@ -79,6 +86,9 @@ class ComponentExample extends React.Component {
         filterName="Contacts"
         type="member"
         className={classes}
+        sortable
+        handleSort={this.handleSort}
+        sortDirection={this.state.sortDirection}
       />
     );
   }