feat(Dropdown): Single selection

CHANGELOG.md

@@ -19,6 +19,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Features
 - Add `on` and `mouseLeaveDelay` props to `Popup` component @mnajdova ([#622](https://github.com/stardust-ui/react/pull/622))
+- Add Dropdown Single Selection variant @silviuavram ([#584](https://github.com/stardust-ui/react/pull/584))
 
 ### Fixes
 - Fix unicode arrow characters to be RTL aware ([#690](https://github.com/stardust-ui/react/pull/690))

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

@@ -13,21 +13,17 @@ const inputItems = [
   '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 DropdownExample = () => (
+  <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.`,

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

@@ -0,0 +1,48 @@
+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',
+]
+
+const DropdownExample = () => (
+  <Dropdown
+    getA11yStatusMessage={getA11yStatusMessage}
+    getA11ySelectionMessage={{
+      onAdd: item => `${item} has been selected.`,
+    }}
+    placeholder="Select your hero"
+    items={inputItems}
+  />
+)
+
+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

@@ -4,10 +4,15 @@ import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
 const Types = () => (
   <ExampleSection title="Types">
+    <ComponentExample
+      title="Single Selection"
+      description="A dropdown with single selection."
+      examplePath="components/Dropdown/Types/DropdownExampleSingleSelection"
+    />
     <ComponentExample
       title="Multiple Search"
       description="A dropdown with multiple selection and search."
-      examplePath="components/Dropdown/Types/DropdownExampleMultipleSearch.shorthand"
+      examplePath="components/Dropdown/Types/DropdownExampleMultipleSearch"
     />
   </ExampleSection>
 )

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

@@ -12,23 +12,18 @@ const inputItems = [
   '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 DropdownExample = () => (
+  <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.`,

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

@@ -49,21 +49,17 @@ const inputItems = [
   },
 ]
 
-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 DropdownExample = () => (
+  <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.`,

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

@@ -13,22 +13,18 @@ const inputItems = [
   '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 DropdownExample = () => (
+  <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.`,

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

@@ -7,17 +7,17 @@ const 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"
+      examplePath="components/Dropdown/Variations/DropdownExampleMultipleSearchImageAndContent"
     />
     <ComponentExample
       title="Multiple Search Fluid"
       description="A multiple search dropdown that fits the width of the container."
-      examplePath="components/Dropdown/Variations/DropdownExampleMultipleSearchFluid.shorthand"
+      examplePath="components/Dropdown/Variations/DropdownExampleMultipleSearchFluid"
     />
     <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"
+      examplePath="components/Dropdown/Variations/DropdownExampleMultipleSearchToggleButton"
     />
   </ExampleSection>
 )