diff --git a/README.md b/README.md
index b795e8e..267e399 100644
--- a/README.md
+++ b/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 = [
```
+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.
diff --git a/src/components/picker/__tests__/nimble-picker.test.js b/src/components/picker/__tests__/nimble-picker.test.js
index 484ddfb..ac861ea 100644
--- a/src/components/picker/__tests__/nimble-picker.test.js
+++ b/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')
+})
diff --git a/stories/index.js b/stories/index.js
index 09fbc88..18c9f26 100644
--- a/stories/index.js
+++ b/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', () => (
+
+ ))
+
.add('Custom category icons', () => (