Merge pull request #45 from hashicorp/chore-cards-integration

chore: 🤖 integrate cards component with projects list - icu 281

ui/core/app/styles/app.scss

@@ -21,19 +21,6 @@
 
 .projects-overview {
   margin: sizing.rems(l);
-
-  .projects {
-    display: flex;
-    padding: 20px 0;
-    flex-direction: row;
-    flex-wrap: wrap;
-
-    .project {
-      display: flex;
-      flex-direction: row;
-      padding: 10px 10px 10px 0;
-    }
-  }
 }
 
 .project-overview,

ui/core/app/templates/orgs/org/projects/index.hbs

@@ -1,4 +1,5 @@
 <Rose::Layout::Page class="projects-overview" as |page|>
+
   <page.header>
     <h2>{{t "resources.projects"}}</h2>
   </page.header>
@@ -8,17 +9,17 @@
   </page.actions>
 
   <page.body>
-    <ul class="projects">
+    <Rose::Cards as |cards|>
       {{#each @model as |project|}}
-        <li class="project">
-          <Rose::Card::Link @title={{project.name}}
-            @subtitle={{project.id}}
-            @description={{project.description}}
-            @route="orgs.org.projects.project"
-            @model={{project}}
-          />
-        </li>
+        <cards.link
+          @title={{project.name}}
+          @subtitle={{project.id}}
+          @description={{project.description}}
+          @route="orgs.org.projects.project"
+          @model={{project}}
+        />
       {{/each}}
-    </ul>
+    </Rose::Cards>
   </page.body>
+
 </Rose::Layout::Page>