CrateSidebar: Extract OwnersList component

Turbo87 · Turbo87 · commit 21e0f66d909b · 2021-11-09T20:22:44.000+01:00
diff --git a/app/components/crate-sidebar.hbs b/app/components/crate-sidebar.hbs
@@ -84,24 +84,7 @@
 
     <div>
       <h3>Owners</h3>
-
-      <ul local-class='owners' data-test-owners>
-        {{#each @crate.owner_team as |team|}}
-          <li>
-            <LinkTo @route={{team.kind}} @model={{team.login}} data-test-team-link={{team.login}}>
-              <UserAvatar @user={{team}} @size="medium-small" />
-            </LinkTo>
-          </li>
-        {{/each}}
-
-        {{#each @crate.owner_user as |user|}}
-          <li>
-            <LinkTo @route={{user.kind}} @model={{user.login}} data-test-user-link={{user.login}}>
-              <UserAvatar @user={{user}} @size="medium-small" />
-            </LinkTo>
-          </li>
-        {{/each}}
-      </ul>
+      <OwnersList @teams={{@crate.owner_team}} @users={{@crate.owner_user}} />
     </div>
   </div>
 
@@ -110,7 +93,7 @@
       {{#if @crate.categories}}
         <div>
           <h3>Categories</h3>
-          <ul>
+          <ul local-class="categories">
             {{#each @crate.categories as |category|}}
               <li><LinkTo @route="category" @model={{category.slug}}>{{category.category}}</LinkTo></li>
             {{/each}}
diff --git a/app/components/crate-sidebar.module.css b/app/components/crate-sidebar.module.css
@@ -10,7 +10,7 @@
             flex-direction: column;
         }
 
-        ul {
+        .categories {
             padding-left: 20px;
         }
     }
@@ -103,18 +103,6 @@
     }
 }
 
-ul.owners {
-    display: flex;
-    flex-wrap: wrap;
-    list-style: none;
-    padding: 0;
-    margin: 0;
-
-    li {
-        margin: 0 7px 7px 0;
-    }
-}
-
 .more-versions-link,
 .reverse-deps-link {
     composes: small from '../styles/shared/typography.module.css';
diff --git a/app/components/owners-list.hbs b/app/components/owners-list.hbs
@@ -0,0 +1,17 @@
+<ul local-class='owners' data-test-owners>
+  {{#each @teams as |team|}}
+    <li>
+      <LinkTo @route={{team.kind}} @model={{team.login}} data-test-team-link={{team.login}}>
+        <UserAvatar @user={{team}} @size="medium-small" />
+      </LinkTo>
+    </li>
+  {{/each}}
+
+  {{#each @users as |user|}}
+    <li>
+      <LinkTo @route={{user.kind}} @model={{user.login}} data-test-user-link={{user.login}}>
+        <UserAvatar @user={{user}} @size="medium-small" />
+      </LinkTo>
+    </li>
+  {{/each}}
+</ul>
diff --git a/app/components/owners-list.module.css b/app/components/owners-list.module.css
@@ -0,0 +1,11 @@
+.owners {
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    li {
+        margin: 0 7px 7px 0;
+    }
+}

Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@`
`10`	`10`	`flex-direction: column;`
`11`	`11`	`}`
`12`	`12`
`13`		`- ul {`
	`13`	`+ .categories {`
`14`	`14`	`padding-left: 20px;`
`15`	`15`	`}`
`16`	`16`	`}`
`@@ -103,18 +103,6 @@`
`103`	`103`	`}`
`104`	`104`	`}`
`105`	`105`
`106`		`-ul.owners {`
`107`		`- display: flex;`
`108`		`- flex-wrap: wrap;`
`109`		`- list-style: none;`
`110`		`- padding: 0;`
`111`		`- margin: 0;`
`112`		`-`
`113`		`- li {`
`114`		`- margin: 0 7px 7px 0;`
`115`		`- }`
`116`		`-}`
`117`		`-`
`118`	`106`	`.more-versions-link,`
`119`	`107`	`.reverse-deps-link {`
`120`	`108`	`composes: small from '../styles/shared/typography.module.css';`