Add badges to @-mentions picker

ts/components/CompositionInput.stories.tsx

@@ -13,12 +13,13 @@ import type { Props } from './CompositionInput';
 import { CompositionInput } from './CompositionInput';
 import { setupI18n } from '../util/setupI18n';
 import enMessages from '../../_locales/en/messages.json';
+import { StorybookThemeContext } from '../../.storybook/StorybookThemeContext';
 
 const i18n = setupI18n('en', enMessages);
 
 const story = storiesOf('Components/CompositionInput', module);
 
-const createProps = (overrideProps: Partial<Props> = {}): Props => ({
+const useProps = (overrideProps: Partial<Props> = {}): Props => ({
   i18n,
   conversationId: 'conversation-id',
   disabled: boolean('disabled', overrideProps.disabled || false),
@@ -28,6 +29,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   draftText: overrideProps.draftText || undefined,
   draftBodyRanges: overrideProps.draftBodyRanges || [],
   clearQuotedMessage: action('clearQuotedMessage'),
+  getPreferredBadge: () => undefined,
   getQuotedMessage: action('getQuotedMessage'),
   onPickEmoji: action('onPickEmoji'),
   large: boolean('large', overrideProps.large || false),
@@ -45,16 +47,17 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
     },
     overrideProps.skinTone || undefined
   ),
+  theme: React.useContext(StorybookThemeContext),
 });
 
 story.add('Default', () => {
-  const props = createProps();
+  const props = useProps();
 
   return <CompositionInput {...props} />;
 });
 
 story.add('Large', () => {
-  const props = createProps({
+  const props = useProps({
     large: true,
   });
 
@@ -62,7 +65,7 @@ story.add('Large', () => {
 });
 
 story.add('Disabled', () => {
-  const props = createProps({
+  const props = useProps({
     disabled: true,
   });
 
@@ -70,7 +73,7 @@ story.add('Disabled', () => {
 });
 
 story.add('Starting Text', () => {
-  const props = createProps({
+  const props = useProps({
     draftText: "here's some starting text",
   });
 
@@ -78,7 +81,7 @@ story.add('Starting Text', () => {
 });
 
 story.add('Multiline Text', () => {
-  const props = createProps({
+  const props = useProps({
     draftText: `here's some starting text
 and more on another line
 and yet another line
@@ -94,7 +97,7 @@ and we're done`,
 });
 
 story.add('Emojis', () => {
-  const props = createProps({
+  const props = useProps({
     draftText: `⁣😐😐😐😐😐😐😐
 😐😐😐😐😐😐😐
 😐😐😐😂⁣😐😐😐
@@ -106,7 +109,7 @@ story.add('Emojis', () => {
 });
 
 story.add('Mentions', () => {
-  const props = createProps({
+  const props = useProps({
     sortedGroupMembers: [
       getDefaultConversation({
         title: 'Kate Beaton',