Feat/multi dropdown component

CHANGELOG.md

@@ -32,6 +32,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Features
 - `Ref` components uses `forwardRef` API by default @layershifter ([#491](https://github.com/stardust-ui/react/pull/491))
 - Label Processed Teams icons moved to Stardust theme @kuzhelov ([#574](https://github.com/stardust-ui/react/pull/574))
+- Add `Dropdown` component @silviuavram ([#422](https://github.com/stardust-ui/react/pull/422))
 
 ### Documentation
 - Add `prettier` support throughout the docs @levithomason  ([#568](https://github.com/stardust-ui/react/pull/568))

docs/src/examples/components/Dropdown/Types/DropdownExampleMultipleSearch.shorthand.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react'
+import { Dropdown } from '@stardust-ui/react'
+
+const inputItems = [
+  'Bruce Wayne',
+  'Natasha Romanoff',
+  'Steven Strange',
+  'Alfred Pennyworth',
+  `Scarlett O'Hara`,
+  'Imperator Furiosa',
+  'Bruce Banner',
+  'Peter Parker',
+  'Selina Kyle',
+]
+
+class DropdownExample extends React.Component {
+  render() {
+    return (
+      <Dropdown
+        multiple
+        search
+        getA11ySelectionMessage={getA11ySelectionMessage}
+        getA11yStatusMessage={getA11yStatusMessage}
+        noResultsMessage="We couldn't find any matches."
+        placeholder="Start typing a name"
+        items={inputItems}
+      />
+    )
+  }
+}
+
+const getA11ySelectionMessage = {
+  onAdd: item => `${item} has been selected.`,
+  onRemove: item => `${item} has been removed.`,
+}
+
+const getA11yStatusMessage = ({
+  isOpen,
+  itemToString,
+  previousResultCount,
+  resultCount,
+  selectedItem,
+}) => {
+  if (!isOpen) {
+    return selectedItem ? itemToString(selectedItem) : ''
+  }
+  if (!resultCount) {
+    return 'No results are available.'
+  }
+  if (resultCount !== previousResultCount) {
+    return `${resultCount} result${
+      resultCount === 1 ? ' is' : 's are'
+    } available, use up and down arrow keys to navigate. Press Enter key to select.`
+  }
+  return ''
+}
+
+export default DropdownExample

docs/src/examples/components/Dropdown/Types/index.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react'
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Types = () => (
+  <ExampleSection title="Types">
+    <ComponentExample
+      title="Multiple Search"
+      description="A dropdown with multiple selection and search."
+      examplePath="components/Dropdown/Types/DropdownExampleMultipleSearch.shorthand"
+    />
+  </ExampleSection>
+)
+
+export default Types

docs/src/examples/components/Dropdown/Variations/DropdownExampleMultipleSearchFluid.shorthand.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react'
+import { Dropdown } from '@stardust-ui/react'
+
+const inputItems = [
+  'Bruce Wayne',
+  'Natasha Romanoff',
+  'Steven Strange',
+  'Alfred Pennyworth',
+  `Scarlett O'Hara`,
+  'Imperator Furiosa',
+  'Bruce Banner',
+  'Peter Parker',
+  'Selina Kyle',
+]
+
+class DropdownExample extends React.Component {
+  render() {
+    return (
+      <Dropdown
+        multiple
+        getA11ySelectionMessage={getA11ySelectionMessage}
+        getA11yStatusMessage={getA11yStatusMessage}
+        noResultsMessage="We couldn't find any matches."
+        search
+        fluid
+        placeholder="Start typing a name"
+        items={inputItems}
+      />
+    )
+  }
+}
+
+const getA11ySelectionMessage = {
+  onAdd: item => `${item} has been selected.`,
+  onRemove: item => `${item} has been removed.`,
+}
+
+const getA11yStatusMessage = ({
+  isOpen,
+  itemToString,
+  previousResultCount,
+  resultCount,
+  selectedItem,
+}) => {
+  if (!isOpen) {
+    return selectedItem ? itemToString(selectedItem) : ''
+  }
+  if (!resultCount) {
+    return 'No results are available.'
+  }
+  if (resultCount !== previousResultCount) {
+    return `${resultCount} result${
+      resultCount === 1 ? ' is' : 's are'
+    } available, use up and down arrow keys to navigate. Press Enter key to select.`
+  }
+  return ''
+}
+
+export default DropdownExample

docs/src/examples/components/Dropdown/Variations/DropdownExampleMultipleSearchImageAndContent.shorthand.tsx

@@ -0,0 +1,94 @@
+import * as React from 'react'
+import { Dropdown } from '@stardust-ui/react'
+
+const inputItems = [
+  {
+    header: 'Bruce Wayne',
+    image: 'public/images/avatar/small/matt.jpg',
+    content: 'Software Engineer',
+  },
+  {
+    header: 'Natasha Romanoff',
+    image: 'public/images/avatar/small/jenny.jpg',
+    content: 'UX Designer 2',
+  },
+  {
+    header: 'Steven Strange',
+    image: 'public/images/avatar/small/joe.jpg',
+    content: 'Principal Software Engineering Manager',
+  },
+  {
+    header: 'Alfred Pennyworth',
+    image: 'public/images/avatar/small/justen.jpg',
+    content: 'Technology Consultant',
+  },
+  {
+    header: `Scarlett O'Hara`,
+    image: 'public/images/avatar/small/laura.jpg',
+    content: 'Software Engineer 2',
+  },
+  {
+    header: 'Imperator Furiosa',
+    image: 'public/images/avatar/small/veronika.jpg',
+    content: 'Boss',
+  },
+  {
+    header: 'Bruce Banner',
+    image: 'public/images/avatar/small/chris.jpg',
+    content: 'Senior Computer Scientist',
+  },
+  {
+    header: 'Peter Parker',
+    image: 'public/images/avatar/small/daniel.jpg',
+    content: 'Partner Software Engineer',
+  },
+  {
+    header: 'Selina Kyle',
+    image: 'public/images/avatar/small/ade.jpg',
+    content: 'Graphic Designer',
+  },
+]
+
+class DropdownExample extends React.Component {
+  render() {
+    return (
+      <Dropdown
+        multiple
+        getA11yStatusMessage={getA11yStatusMessage}
+        search
+        getA11ySelectionMessage={getA11ySelectionMessage}
+        noResultsMessage="We couldn't find any matches."
+        placeholder="Start typing a name"
+        items={inputItems}
+      />
+    )
+  }
+}
+
+const getA11ySelectionMessage = {
+  onAdd: item => `${item.header} has been selected.`,
+  onRemove: item => `${item.header} has been removed.`,
+}
+
+const getA11yStatusMessage = ({
+  isOpen,
+  itemToString,
+  previousResultCount,
+  resultCount,
+  selectedItem,
+}) => {
+  if (!isOpen) {
+    return selectedItem ? itemToString(selectedItem) : ''
+  }
+  if (!resultCount) {
+    return 'No results are available.'
+  }
+  if (resultCount !== previousResultCount) {
+    return `${resultCount} result${
+      resultCount === 1 ? ' is' : 's are'
+    } available, use up and down arrow keys to navigate. Press Enter key to select.`
+  }
+  return ''
+}
+
+export default DropdownExample

docs/src/examples/components/Dropdown/Variations/DropdownExampleMultipleSearchToggleButton.shorthand.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react'
+import { Dropdown } from '@stardust-ui/react'
+
+const inputItems = [
+  'Bruce Wayne',
+  'Natasha Romanoff',
+  'Steven Strange',
+  'Alfred Pennyworth',
+  `Scarlett O'Hara`,
+  'Imperator Furiosa',
+  'Bruce Banner',
+  'Peter Parker',
+  'Selina Kyle',
+]
+
+class DropdownExample extends React.Component {
+  render() {
+    return (
+      <Dropdown
+        multiple
+        getA11yStatusMessage={getA11yStatusMessage}
+        getA11ySelectionMessage={getA11ySelectionMessage}
+        noResultsMessage="We couldn't find any matches."
+        search
+        placeholder="Start typing a name"
+        toggleButton
+        items={inputItems}
+      />
+    )
+  }
+}
+
+const getA11ySelectionMessage = {
+  onAdd: item => `${item} has been selected.`,
+  onRemove: item => `${item} has been removed.`,
+}
+
+const getA11yStatusMessage = ({
+  isOpen,
+  itemToString,
+  previousResultCount,
+  resultCount,
+  selectedItem,
+}) => {
+  if (!isOpen) {
+    return selectedItem ? itemToString(selectedItem) : ''
+  }
+  if (!resultCount) {
+    return 'No results are available.'
+  }
+  if (resultCount !== previousResultCount) {
+    return `${resultCount} result${
+      resultCount === 1 ? ' is' : 's are'
+    } available, use up and down arrow keys to navigate. Press Enter key to select.`
+  }
+  return ''
+}
+
+export default DropdownExample

docs/src/examples/components/Dropdown/Variations/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Variations = () => (
+  <ExampleSection title="Variations">
+    <ComponentExample
+      title="Multiple Search with Image and Content"
+      description="A multiple search dropdown which items have header, content and image."
+      examplePath="components/Dropdown/Variations/DropdownExampleMultipleSearchImageAndContent.shorthand"
+    />
+    <ComponentExample
+      title="Multiple Search Fluid"
+      description="A multiple search dropdown that fits the width of the container."
+      examplePath="components/Dropdown/Variations/DropdownExampleMultipleSearchFluid.shorthand"
+    />
+    <ComponentExample
+      title="Multiple Search with Toggle Button"
+      description="A multiple search dropdown with toggle button that shows/hides the items list."
+      examplePath="components/Dropdown/Variations/DropdownExampleMultipleSearchToggleButton.shorthand"
+    />
+  </ExampleSection>
+)
+
+export default Variations

docs/src/examples/components/Dropdown/index.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react'
+import Types from './Types'
+import Variations from './Variations'
+
+const DropdownExamples = () => (
+  <div>
+    <Types />
+    <Variations />
+  </div>
+)
+
+export default DropdownExamples

docs/src/examples/components/Input/Variations/InputExampleInputSlot.shorthand.tsx

@@ -36,13 +36,6 @@ const InputExampleInputSlot = () => (
         />
       }
     />
-
-    <Text content="Wrapped Input with custom element:" />
-    <Input
-      placeholder="Search..."
-      role="presentation"
-      input={<input placeholder="Placeholder Override..." role="checkbox" style={inputStyles} />}
-    />
   </Grid>
 )
 

package.json

@@ -60,6 +60,7 @@
   "dependencies": {
     "classnames": "^2.2.5",
     "color": "^3.1.0",
+    "downshift": "^3.0.0",
     "fela": "^6.1.7",
     "fela-plugin-fallback-value": "^5.0.17",
     "fela-plugin-placeholder-prefixer": "^5.0.18",