Improve role mention appearance

packages/ui/src/common/components/MarkdownPreview/MarkdownPreview.tsx

@@ -6,8 +6,9 @@ import { Root } from 'react-markdown/lib/rehype-filter'
 import remarkGfm from 'remark-gfm'
 import styled from 'styled-components'
 
-import { Mention, MentionType } from '@/common/components/Mention'
+import { Mention } from '@/common/components/Mention'
 import { UserImage } from '@/common/components/UserImage/UserImage'
+import { MentionType } from '@/common/hooks/useMentions'
 
 import { ModeratedItem } from '../ModeratedItem'
 
@@ -92,11 +93,12 @@ const MarkdownImage = styled(UserImage)`
 `
 
 const mentionTypesMap: Record<string, MentionType> = {
- 'member-id': 'member',
- 'proposal-id': 'proposal',
- 'proposal-post-id': 'proposalDiscussionEntry',
- 'thread-id': 'forumThread',
- 'forum-post-id': 'forumPost',
- 'application-id': 'application',
- 'opening-id': 'opening',
+ 'member-id': MentionType.Member,
+ 'proposal-id': MentionType.Proposal,
+ 'proposal-post-id': MentionType.ProposalPost,
+ 'thread-id': MentionType.ForumThread,
+ 'forum-post-id': MentionType.ForumPost,
+ 'application-id': MentionType.Application,
+ 'opening-id': MentionType.Opening,
+ role: MentionType.Role,
 }

packages/ui/src/common/components/Mention/Mention.stories.tsx

@@ -1,59 +1,52 @@
-import { Meta, Story } from '@storybook/react'
+import { Meta } from '@storybook/react'
 import React from 'react'
 
+import { MentionType } from '@/common/hooks/useMentions'
 import { MockApolloProvider } from '@/mocks/components/storybook/MockApolloProvider'
 
 import { Mention, MentionProps } from './Mention'
 
 export default {
  title: 'Common/Mention',
  component: Mention,
-} as Meta
-
-const Template: Story<MentionProps> = (args) => (
- <MockApolloProvider members proposals workers workingGroups forum>
- <Mention {...args}>Mention</Mention>
- </MockApolloProvider>
-)
-
-export const Proposal = Template.bind({})
-Proposal.args = {
- type: 'proposal',
+ render: (args) => (
+ <MockApolloProvider members proposals workers workingGroups forum>
+ <Mention {...args}>Mention</Mention>
+ </MockApolloProvider>
+ ),
+} as Meta<MentionProps>
+
+export const Proposal = {
+ type: MentionType.Proposal,
  itemId: '1',
 }
 
-export const ProposalDiscussionEntry = Template.bind({})
-ProposalDiscussionEntry.args = {
- type: 'proposalDiscussionEntry',
+export const ProposalPost = {
+ type: MentionType.ProposalPost,
  itemId: '1',
 }
 
-export const ForumThread = Template.bind({})
-ForumThread.args = {
- type: 'forumThread',
+export const ForumThread = {
+ type: MentionType.ForumThread,
  itemId: '1',
 }
 
-export const ForumPost = Template.bind({})
-ForumPost.args = {
- type: 'forumPost',
+export const ForumPost = {
+ type: MentionType.ForumPost,
  itemId: '1',
 }
 
-export const Member = Template.bind({})
-Member.args = {
- type: 'member',
+export const Member = {
+ type: MentionType.Member,
  itemId: '1',
 }
 
-export const Opening = Template.bind({})
-Opening.args = {
- type: 'opening',
+export const Opening = {
+ type: MentionType.Opening,
  itemId: 'forumWorkingGroup-0',
 }
 
-export const Application = Template.bind({})
-Application.args = {
- type: 'application',
+export const Application = {
+ type: MentionType.Application,
  itemId: 'forumWorkingGroup-0',
 }