Use "oo-molecules-project-users" element

src/elements/_molecules/oo-molecules-project-users/index.ts

@@ -46,6 +46,9 @@ export default class extends OOElement {
 
 		return html`
 		<style>
+			:host {
+				display: block;
+			}
 			div {
 				display: flex;
 			}

src/elements/oo-project-summary/index.test.ts

@@ -33,7 +33,7 @@ describe(`<${ELEMENT}></${ELEMENT}>`, () => {
 		const [slotFooterAssigned] = slotFooter.assignedNodes()
 
 		Array.prototype.forEach.call(slotFooterAssigned.childNodes, item => {
-			const userName = item.parentElement.querySelector('oo-atoms-user-name').getAttribute('data-iam')
+			const userName = item.parentElement.querySelector('oo-molecules-project-users').getAttribute('data-assignee')
 			expect(userName).to.be('test')
 		})
 	})

src/elements/oo-project-summary/index.ts

@@ -6,7 +6,7 @@ import define from '../../lib/define'
 import markdown from '../oo-markdown'
 import projectEditor from '../oo-project-editor'
 import message from '../_atoms/oo-atoms-message'
-import userName from '../_atoms/oo-atoms-user-name'
+import users from '../_molecules/oo-molecules-project-users'
 import datetime from '../_atoms/oo-atoms-datetime'
 import modal from '../oo-modal'
 import projectStatus from '../oo-project-status'
@@ -16,7 +16,7 @@ import {template as tagsTemplate} from '../../lib/tags'
 
 define('oo-markdown', markdown)
 define('oo-atoms-message', message)
-define('oo-atoms-user-name', userName)
+define('oo-molecules-project-users', users)
 define('oo-atoms-datetime', datetime)
 define('oo-project-status', projectStatus)
 define('oo-project-editor', projectEditor)
@@ -31,6 +31,7 @@ const projectTitle = weakMap<string>()
 const projectBody = weakMap<string>()
 const projectTags = weakMap<Array<string>>()
 const projectAuthor = weakMap<string>()
+const projectAssignee = weakMap<string>()
 const projectCreated = weakMap<number>()
 const stateProjectUpdated = weakMap<boolean>()
 const stateOpenEditor = weakMap<boolean>()
@@ -59,6 +60,7 @@ export default class extends OOElement {
 		const body = projectBody.get(this)
 		const tags = projectTags.get(this)
 		const author = projectAuthor.get(this)
+		const assignee = projectAssignee.get(this)
 		const editor = stateOpenEditor.get(this)
 		const projectUpdated = stateProjectUpdated.get(this)
 		const isPostOwner = store.uid === author
@@ -110,7 +112,7 @@ export default class extends OOElement {
 			oo-project-status {
 				margin-bottom: 0.5rem;
 			}
-			oo-atoms-user-name {
+			oo-molecules-project-users {
 				margin-bottom: 1rem;
 			}
 			oo-project-editor {
@@ -168,7 +170,7 @@ export default class extends OOElement {
 					${tagsTemplate(tags)}
 				</section>
 				<footer slot=footer>
-					<oo-atoms-user-name data-iam$='${author}' data-size=small></oo-atoms-user-name>
+					<oo-molecules-project-users data-author$='${author}' data-assignee$='${assignee}'></oo-molecules-project-users>
 					<oo-atoms-datetime data-unixtime$='${created}'></oo-atoms-datetime>
 				</footer>
 			</oo-atoms-message>
@@ -239,6 +241,7 @@ export default class extends OOElement {
 			projectBody.set(this, mapedExtensions.get('body'))
 			projectTags.set(this, mapedExtensions.get('tags') || [])
 			projectAuthor.set(this, mapedExtensions.get('author'))
+			projectAssignee.set(this, mapedExtensions.get('assignee'))
 			stateProjectUpdated.delete(this)
 		} else {
 			projectBody.delete(this)

src/elements/oo-projects/index.ts

@@ -10,7 +10,7 @@ import weakMap from '../../lib/weak-map'
 import markdown from '../oo-markdown'
 import message from '../_atoms/oo-atoms-message'
 import button from '../_atoms/oo-atoms-button'
-import userName from '../_atoms/oo-atoms-user-name'
+import users from '../_molecules/oo-molecules-project-users'
 import empty from '../oo-empty'
 import toMap from '../../lib/extensions-to-map'
 import {template as tagsTemplate} from '../../lib/tags'
@@ -19,7 +19,7 @@ import {href} from '../../lib/href'
 define('oo-markdown', markdown)
 define('oo-atoms-message', message)
 define('oo-atoms-button', button)
-define('oo-atoms-user-name', userName)
+define('oo-molecules-project-users', users)
 define('oo-empty', empty)
 define('oo-project-status', projectStatus)
 
@@ -153,6 +153,7 @@ export default class extends OOElement {
 				const title = exts.has('title') ? exts.get('title') : ''
 				const body = exts.has('body') ? exts.get('body') : ''
 				const offerer = exts.has('author') ? exts.get('author') : ''
+				const assignee = exts.has('assignee') ? exts.get('assignee') : ''
 				const tags = exts.has('tags') ? exts.get('tags') : []
 				const titleHTML = title ? html`<h1>${title}</h1>` : html``
 				return html`
@@ -169,7 +170,7 @@ export default class extends OOElement {
 						</aside>
 					</section>
 					<footer slot=footer>
-						<oo-atoms-user-name data-iam$='${offerer}' data-size=small></oo-atoms-user-name>
+						<oo-molecules-project-users data-author$='${offerer}' data-assignee$='${assignee}'></oo-molecules-project-users>
 					</footer>
 				</oo-atoms-message>
 				`