test: add docs and test for customCategory

README.md

@@ -246,7 +246,8 @@ const customEmojis = [
     text: '',
     emoticons: [],
     keywords: ['github'],
-    imageUrl: 'https://github.githubassets.com/images/icons/emoji/octocat.png'
+    imageUrl: 'https://github.githubassets.com/images/icons/emoji/octocat.png',
+    customCategory: 'GitHub'
   },
   {
     name: 'Test Flag',
@@ -266,6 +267,9 @@ const customEmojis = [
 <Picker custom={customEmojis} />
 ```
 
+The `customCategory` string is optional. If you include it, then the custom emoji will be shown in whatever
+categories you define. If you don't include it, then there will just be one category called "Custom."
+
 ## Not Found
 You can provide a custom Not Found object which will allow the appearance of the not found search results to change. In this case, we change the default 'sleuth_or_spy' emoji to Octocat when our search finds no results.
 

src/components/picker/__tests__/nimble-picker.test.js

@@ -57,7 +57,40 @@ test('with custom emoji and tooltip', () => {
     autoFocus: true,
     custom,
   })
+  expect(subject.categories.length).toEqual(11)
+  expect(subject.categories[10].name).toEqual('Custom')
   subject.handleSearch(
     new NimbleEmojiIndex(subject.data).search('custom_', { custom }),
   )
 })
+
+test('with custom categories', () => {
+  const custom = [
+    {
+      id: 'custom_name',
+      name: 'custom_name',
+      short_names: ['custom_name'],
+      text: '',
+      emoticons: [],
+      keywords: ['custom_name'],
+      imageUrl: 'https://example.com/emoji',
+      custom: true,
+      customCategory: 'Category 1',
+    },
+    {
+      id: 'custom_name2',
+      name: 'custom_name2',
+      short_names: ['custom_name2'],
+      text: '',
+      emoticons: [],
+      keywords: ['custom_name2'],
+      imageUrl: 'https://example.com/emoji',
+      custom: true,
+      customCategory: 'Category 2',
+    },
+  ]
+  const subject = render({ custom })
+  expect(subject.categories.length).toEqual(12)
+  expect(subject.categories[10].name).toEqual('Category 1')
+  expect(subject.categories[11].name).toEqual('Category 2')
+})

stories/index.js

@@ -22,7 +22,6 @@ const CUSTOM_EMOJIS = [
     short_names: ['octocat'],
     keywords: ['github'],
     imageUrl: 'https://github.githubassets.com/images/icons/emoji/octocat.png',
-    customCategory: 'GitHub',
   },
   {
     name: 'Squirrel',
@@ -32,6 +31,12 @@ const CUSTOM_EMOJIS = [
   },
 ]
 
+const CUSTOM_EMOJIS_WITH_CATEGORIES = CUSTOM_EMOJIS.map(emoji => {
+  return Object.assign({}, emoji, {
+    customCategory: emoji.name === 'Squirrel' ? 'Mammals' : 'Mollusks'
+  })
+})
+
 storiesOf('Picker', module)
   .addDecorator(withKnobs)
   .add('Default', () => (
@@ -63,6 +68,12 @@ storiesOf('Picker', module)
     />
   ))
 
+  .add('Custom categories', () => (
+    <Picker
+      custom={CUSTOM_EMOJIS_WITH_CATEGORIES}
+    />
+  ))
+
   .add('Custom category icons', () => (
     <Picker
       custom={CUSTOM_EMOJIS}