Merge pull request #6 from tildeio/price-in-list

Display package price in list view

Author: gitKrystan

src/css-classes.ts

@@ -58,6 +58,8 @@ export const CLASSES = {
     /** All Package/Park "limited" attribute elements */
     limited: 'epg_attributes-limited' as const,
   },
+  /** Elements related to package price. */
+  price: 'epg_price' as const,
   /**
    * @param perk
    * @param value A {@link PerkValue} or undefined. If undefined, the value is falsy.

src/index.css

@@ -42,6 +42,7 @@
     );
 }
 
-.epg_display-as-grid .epg_package-perk-list {
+.epg_display-as-grid .epg_columnheader .epg_package-perk-list,
+.epg_display-as-grid .epg_columnheader .epg_price {
   display: none;
 }

src/render/nodes.ts

@@ -85,6 +85,7 @@ function packageHeader(pkg: Package, display: DisplayOption) {
 
   if (display !== 'grid') {
     el.append(perkList(pkg));
+    el.append(packagePrice(pkg));
   }
 
   return el;
@@ -191,13 +192,19 @@ function perkValue(perk: Perk, pkg: Package) {
 function packageFooter(pkg: Package) {
   const el = createElement('div', `${CLASSES.cell} ${CLASSES.package}`, {
     role: 'gridcell',
+  });
+  el.ariaLabel = 'Package price';
+  el.append(packagePrice(pkg));
+  return el;
+}
+
+function packagePrice(pkg: Package) {
+  return createElement('div', CLASSES.price, {
     textContent: pkg.price.toLocaleString('en-US', {
       style: 'currency',
       currency: 'USD',
       minimumFractionDigits: 0,
       maximumFractionDigits: 0,
     }),
   });
-  el.ariaLabel = 'Package price';
-  return el;
 }