Fixed styles, updated template with icon support, updated data to include a type property for icons.

Author: bdenham

src/_data/roadmap.yml

@@ -15,11 +15,14 @@ roadmap:
         status: inProgress
       - name: PayPal and Braintree updates
         status: inProgress
+        type: Extension
       - name: PHP 8.1 support
+        status: inProgress
       - name: PWA - Global theming/styling
         status: inProgress
       - name: PWA - Custom product attributes
         status: inProgress
+        type: Extension
       - name: PWA - Performance optimizations
         status: inProgress
       - name: PWA - Shopping and cart improvements
@@ -28,9 +31,12 @@ roadmap:
         status: inProgress
       - name: Vendor Bundled Extensions (VBEs) – Updates
         status: inProgress
+        type: Extension
   - name: Planned
     features:
       - name: Accelerated checkout powered by Bolt (extension)
+        status: Planned
+        type: Extension
       - name: Accessibility improvements for storefront/admin
         status: Planned
       - name: Framework updates (e.g. KnockoutJS, RequireJS, etc.)

src/_includes/roadmap.md

@@ -3,20 +3,20 @@
 {% assign roadmap = include.data.roadmap | where: "name", include.roadmap %}
 {% endif %}
 
-![Extension icon]({{ site.baseurl }}/common/images/Smock_Extension_18_N.svg) Indicates extensions available on the Commerce Marketplace.
+![Extension icon]({{ site.baseurl }}/common/images/Smock_Extension_18_N.svg) — Indicates extensions available on the Commerce Marketplace.
 
 <table class="roadmap-table">
   <tr class="roadmap-header">
-      {% for roadmap in roadmap %}
-      <th>{{roadmap.name}}</th>
-      {% endfor %}
+    {% for roadmap in roadmap %}
+    <th>{{roadmap.name}}</th>
+    {% endfor %}
   </tr>
   <tr>
     {% for roadmap in roadmap %}
     <td class="table-container">
       <table class="inner-table">
         {% for roadmapFeature in roadmap.features %}
-        <tr class="inner-row"><td class="inner-cell">{{ roadmapFeature.name }}</td></tr>
+        <tr class="inner-row"><td class="inner-cell">{{ roadmapFeature.name }}<span class="icon {{ roadmapFeature.type }}"></span></td></tr>
         {% endfor %}
       </table>
     </td>
@@ -34,18 +34,18 @@
  * Main Table
  */
 table.roadmap-table {
-  padding: 0.5em;
+  padding: 1rem;
   margin: 0;
-  border: 1 solid #ddd;
+  border: 1px solid #ddd;
 }
 
 /**
  * Inner Tables
  */
 table.roadmap-table tr td.table-container table.inner-table {
-  padding: 0.5em;
+  padding: 0.5rem;
   margin: 0;
-  border: 0 solid #ddd;
+  border: none;
 }
 
 /*****************/
@@ -58,9 +58,9 @@ table.roadmap-table tr td.table-container table.inner-table {
 table.roadmap-table tr.roadmap-header th {
   padding: .7rem;
   margin: 0;
-  border: 1 solid #ddd;
+  border-bottom: 1px solid #ddd;
   text-align: left;
-  background-color: #f5f5f5;
+  background-color: #f1f1f1;
   font-weight: bold;
   color: #333;
   font-size: 1rem;
@@ -76,18 +76,19 @@ table.roadmap-table tr.roadmap-header th {
  table.roadmap-table tr {
   padding: 0.7rem;
   margin-left: 1rem;
-  border: 0 solid #ddd;
   border-collapse: collapse;
 }
+table.roadmap-table tr:hover {
+  background-color: #fff;
+}
 
 /**
  * Inner Table Rows
  */
 table.roadmap-table tr td.table-container table.inner-table tr.inner-row {
   padding: 0.7rem;
   margin: 0;
-  border-bottom: 1 solid #ddd;
-  border-collapse: collapse;
+  border-bottom: 1px solid #ddd;
 }
 
 /***************/
@@ -100,32 +101,46 @@ table.roadmap-table tr td.table-container table.inner-table tr.inner-row {
  table.roadmap-table tr td.table-container {
   padding: 0;
   margin: 0;
-  border: 0 solid #ddd;
+  border: none;
   border-collapse: collapse;
+  min-height: 100%;
+}
+
+table.roadmap-table tr td.table-container {
+  border-right: 1px solid #ddd;
 }
 
 /**
  * Inner Table Cell
  */
 table.roadmap-table tr td.table-container table.inner-table tr.inner-row td.inner-cell {
-  padding: 0.7rem;
   margin: 0;
-  border: 0 solid #ddd;
+  padding: 0.8rem;
   border-collapse: collapse;
-  font-size: .9rem;
+  font-size: 1.1rem;
+  border: none;
 }
 
 /***************/
 /***— Icons —***/
 /***************/
 
-.extension::before {
-  content: '';
+.icon {
+  height: 18px;
+  font-size: 14px;
+  font-weight: 400;
+  padding: 5px 0;
+}
+
+.icon.Extension::before {
   display: inline-block;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  margin: 0 12px;
+  content: '';
+  background-image: url({{ site.baseurl }}/common/images/Smock_Extension_18_N.svg);
+  background-size: 16px 16px;
+  height: 16px;
+  width: 16px;
+  margin-left: 5px;
+  margin-bottom: -2px;
 }
 
 </style>