From ac9be580cbb3ffd3ed62907f26d9fecd7203048a Mon Sep 17 00:00:00 2001
From: maxwondercorn <gmartell@pobox.com>
Date: Mon, 1 Aug 2022 00:23:23 -0400
Subject: [PATCH 1/2] Document changes to sorting icons and icon component

---
 addon/mixins/table-header.js                  | 30 +++++++++++--------
 .../components/cookbook/client-side-table.hbs |  5 ++--
 .../components/cookbook/custom-row-table.hbs  |  7 ++---
 .../cookbook/horizontal-scrolling-table.hbs   |  5 ++--
 .../components/cookbook/occluded-table.hbs    |  9 +++---
 .../components/cookbook/paginated-table.hbs   |  5 ++--
 .../cookbook/table-actions-table.hbs          |  5 ++--
 .../dummy/app/components/fa-icon-wrapper.hbs  |  4 ++-
 .../dummy/app/components/responsive-table.hbs |  5 ++--
 .../dummy/app/components/scrolling-table.hbs  |  5 ++--
 tests/dummy/app/components/simple-table.hbs   |  6 ++--
 .../dummy/app/templates/columns/draggable.hbs |  1 +
 tests/dummy/app/templates/columns/grouped.hbs |  1 +
 .../dummy/app/templates/columns/resizable.hbs |  1 +
 .../app/templates/cookbook/client-side.hbs    |  1 +
 .../app/templates/cookbook/custom-row.hbs     |  1 +
 .../cookbook/horizontal-scrolling.hbs         |  1 +
 .../cookbook/occlusion-rendering.hbs          |  1 +
 .../app/templates/cookbook/pagination.hbs     |  1 +
 .../app/templates/cookbook/table-actions.hbs  |  1 +
 tests/dummy/app/templates/index.hbs           |  1 +
 tests/dummy/app/templates/responsive.hbs      |  1 +
 tests/dummy/app/templates/rows/expandable.hbs |  1 +
 tests/dummy/app/templates/rows/selectable.hbs |  1 +
 tests/dummy/app/templates/scrolling.hbs       |  1 +
 25 files changed, 56 insertions(+), 44 deletions(-)

diff --git a/addon/mixins/table-header.js b/addon/mixins/table-header.js
index 0cbd81e9..1547341c 100644
--- a/addon/mixins/table-header.js
+++ b/addon/mixins/table-header.js
@@ -78,14 +78,13 @@ export default Mixin.create({
   resizeOnDrag: false,
 
   /**
-   * CSS classes to be applied to an `<i class="lt-sort-icon"></i>` tag that is
-   * inserted into the column's `<th>` element when the column is sortable but
-   * not yet sorted.
+   * Name of the icon that is inserted into the column's `<th>`
+   * element when the column is sortable but not yet sorted.
    *
-   * For instance, if you have installed `ember-font-awesome` or include the
-   * `font-awesome` assets manually (e.g. via a CDN), you can set
-   * `iconSortable` to `'sort'`, which would yield this markup:
-   * `<i class="lt-sort-icon sort"></i>`
+   * The name is passed to the component assigned to the
+   * iconComponent property when the table is rendered.
+   *
+   * The addon includes the Font Awesome icon `sort`.
    *
    * @property iconSortable
    * @type {String}
@@ -94,8 +93,10 @@ export default Mixin.create({
   iconSortable: '',
 
   /**
-   * See `iconSortable`.  CSS classes to apply to `<i class="lt-sort-icon"></i>`
-   * when the column is sorted ascending.
+   * See `iconSortable`. Icon name to use when the
+   * column is sorted ascending.
+   *
+   * The addon includes the Font Awesome icon `sort-up`.
    *
    * @property iconAscending
    * @type {String}
@@ -104,8 +105,10 @@ export default Mixin.create({
   iconAscending: '',
 
   /**
-   * See `iconSortable`.  CSS classes to apply to `<i class="lt-sort-icon"></i>`
-   * when the column is sorted descending.
+   * See `iconSortable`. Icon name to use when the
+   * column is sorted descending.
+   *
+   * The addon includes the Font Awesome icon `sort-down`.
    *
    * @property iconDescending
    * @type {String}
@@ -114,7 +117,10 @@ export default Mixin.create({
   iconDescending: '',
 
   /**
-   * Custom sorting component name to use instead of the default `<i class="lt-sort-icon"></i>` template.
+   * Name of custom component to render the sorting icons template. This component
+   * is required to render sorting icons. Duplicate the `fa-icon-wrapper` from the
+   * dummy app to use the included Font Awesome icons.
+   *
    * See `iconSortable`, `iconAsending`, or `iconDescending`.
    * @property iconComponent
    * @type {String}
diff --git a/tests/dummy/app/components/cookbook/client-side-table.hbs b/tests/dummy/app/components/cookbook/client-side-table.hbs
index 002c7651..c46777f4 100644
--- a/tests/dummy/app/components/cookbook/client-side-table.hbs
+++ b/tests/dummy/app/components/cookbook/client-side-table.hbs
@@ -1,9 +1,8 @@
 {{! BEGIN-SNIPPET client-side-table }}
 <LightTable @table={{this.table}} @height="65vh" as |t|>
   {{!
-    In order for `sort-up` and `sort-down` icons to work,
-    you need to have ember-font-awesome installed or manually include
-    the font-awesome assets, e.g. via a CDN.
+    See the simple table example on using sorting icons
+    and icon components.
   }}
 
   <t.head
diff --git a/tests/dummy/app/components/cookbook/custom-row-table.hbs b/tests/dummy/app/components/cookbook/custom-row-table.hbs
index 3023b47f..681825b4 100644
--- a/tests/dummy/app/components/cookbook/custom-row-table.hbs
+++ b/tests/dummy/app/components/cookbook/custom-row-table.hbs
@@ -1,11 +1,10 @@
 {{! BEGIN-SNIPPET custom-row-table }}
 <LightTable @table={{this.table}} @height="65vh" as |t|>
   {{!
-    In order for `sort-up` and `sort-down` icons to work,
-    you need to have ember-font-awesome installed or manually include
-    the font-awesome assets, e.g. via a CDN.
+    See the simple table example on using sorting icons
+    and icon components.
   }}
-
+  
   <t.head
     @onColumnClick={{this.onColumnClick}}
     @iconSortable="sort"
diff --git a/tests/dummy/app/components/cookbook/horizontal-scrolling-table.hbs b/tests/dummy/app/components/cookbook/horizontal-scrolling-table.hbs
index 71c72481..8b991051 100644
--- a/tests/dummy/app/components/cookbook/horizontal-scrolling-table.hbs
+++ b/tests/dummy/app/components/cookbook/horizontal-scrolling-table.hbs
@@ -1,9 +1,8 @@
 {{! BEGIN-SNIPPET horizontal-scrolling-table }}
 <LightTable @table={{this.table}} @height="65vh" as |t|>
   {{!
-    In order for `sort-up` and `sort-down` icons to work,
-    you need to have ember-font-awesome installed or manually include
-    the font-awesome assets, e.g. via a CDN.
+    See the simple table example on using sorting icons
+    and icon components.
   }}
 
   <t.head
diff --git a/tests/dummy/app/components/cookbook/occluded-table.hbs b/tests/dummy/app/components/cookbook/occluded-table.hbs
index 8d3757cb..7f1bf597 100644
--- a/tests/dummy/app/components/cookbook/occluded-table.hbs
+++ b/tests/dummy/app/components/cookbook/occluded-table.hbs
@@ -6,11 +6,10 @@
   @estimatedRowHeight={{50}}
 as |t|>
 
-  {{!--
-    In order for `sort-up` and `sort-down` icons to work,
-    you need to have ember-font-awesome installed or manually include
-    the font-awesome assets, e.g. via a CDN.
-  --}}
+  {{!
+    See the simple table example on using sorting icons
+    and icon components.
+  }}
 
   <t.head @fixed={{true}}/>
 
diff --git a/tests/dummy/app/components/cookbook/paginated-table.hbs b/tests/dummy/app/components/cookbook/paginated-table.hbs
index 4efa132b..c243dfba 100644
--- a/tests/dummy/app/components/cookbook/paginated-table.hbs
+++ b/tests/dummy/app/components/cookbook/paginated-table.hbs
@@ -1,9 +1,8 @@
 {{! BEGIN-SNIPPET paginated-table }}
 <LightTable @table={{this.table}} @height="65vh" as |t|>
   {{!
-    In order for `sort-up` and `sort-down` icons to work,
-    you need to have ember-font-awesome installed or manually include
-    the font-awesome assets, e.g. via a CDN.
+    See the simple table example on using sorting icons
+    and icon components.
   }}
 
   <t.head
diff --git a/tests/dummy/app/components/cookbook/table-actions-table.hbs b/tests/dummy/app/components/cookbook/table-actions-table.hbs
index b037cf56..d556f4a7 100644
--- a/tests/dummy/app/components/cookbook/table-actions-table.hbs
+++ b/tests/dummy/app/components/cookbook/table-actions-table.hbs
@@ -7,9 +7,8 @@
   }} as |t|
 >
   {{!
-    In order for `sort-up` and `sort-down` icons to work,
-    you need to have ember-font-awesome installed or manually include
-    the font-awesome assets, e.g. via a CDN.
+    See the simple table example on using sorting icons
+    and icon components.
   }}
 
   <t.head
diff --git a/tests/dummy/app/components/fa-icon-wrapper.hbs b/tests/dummy/app/components/fa-icon-wrapper.hbs
index 7770d066..5fd2d6c7 100644
--- a/tests/dummy/app/components/fa-icon-wrapper.hbs
+++ b/tests/dummy/app/components/fa-icon-wrapper.hbs
@@ -1 +1,3 @@
-<FaIcon @icon={{get @sortIcons @sortIconProperty}}/>
\ No newline at end of file
+{{! BEGIN-SNIPPET fa-icon-wrapper }}
+<FaIcon @icon={{get @sortIcons @sortIconProperty}}/>
+{{! END-SNIPPET }}
\ No newline at end of file
diff --git a/tests/dummy/app/components/responsive-table.hbs b/tests/dummy/app/components/responsive-table.hbs
index 85ef0d92..80d8cfb7 100644
--- a/tests/dummy/app/components/responsive-table.hbs
+++ b/tests/dummy/app/components/responsive-table.hbs
@@ -6,9 +6,8 @@
   @onAfterResponsiveChange={{this.onAfterResponsiveChange}} as |t|
 >
   {{!
-    In order for `sort-up` and `sort-down` icons to work,
-    you need to have ember-font-awesome installed or manually include
-    the font-awesome assets, e.g. via a CDN.
+    See the simple table example on using sorting icons
+    and icon components.
   }}
 
   <t.head
diff --git a/tests/dummy/app/components/scrolling-table.hbs b/tests/dummy/app/components/scrolling-table.hbs
index 42eb1874..01b02548 100644
--- a/tests/dummy/app/components/scrolling-table.hbs
+++ b/tests/dummy/app/components/scrolling-table.hbs
@@ -1,9 +1,8 @@
 {{! BEGIN-SNIPPET scrolling-table }}
 <LightTable @table={{this.table}} @height="65vh" as |t|>
   {{!
-    In order for `sort-up` and `sort-down` icons to work,
-    you need to have ember-font-awesome installed or manually include
-    the font-awesome assets, e.g. via a CDN.
+    See the simple table example on using sorting icons
+    and icon components.
   }}
 
   <t.head
diff --git a/tests/dummy/app/components/simple-table.hbs b/tests/dummy/app/components/simple-table.hbs
index 23687cb9..cc2de36d 100644
--- a/tests/dummy/app/components/simple-table.hbs
+++ b/tests/dummy/app/components/simple-table.hbs
@@ -1,11 +1,9 @@
 {{! BEGIN-SNIPPET simple-table }}
 <LightTable @table={{this.table}} @height="65vh" as |t|>
   {{!
-    In order for `sort-up` and `sort-down` icons to work,
-    you need to have ember-font-awesome installed or manually include
-    the font-awesome assets, e.g. via a CDN.
+    See the simple table example on using sorting icons
+    and icon components.
   }}
-
   <t.head
     @onColumnClick={{this.onColumnClick}}
     @iconSortable="sort"
diff --git a/tests/dummy/app/templates/columns/draggable.hbs b/tests/dummy/app/templates/columns/draggable.hbs
index ff8249e1..7967acbc 100644
--- a/tests/dummy/app/templates/columns/draggable.hbs
+++ b/tests/dummy/app/templates/columns/draggable.hbs
@@ -4,6 +4,7 @@
     "draggable-table.js"
     "base-table.js"
     "draggable-table.hbs"
+    "fa-icon-wrapper.hbs"
     "user-avatar.hbs"
     "table-loader.hbs"
 }}>
diff --git a/tests/dummy/app/templates/columns/grouped.hbs b/tests/dummy/app/templates/columns/grouped.hbs
index cd1ad30c..0b38c181 100644
--- a/tests/dummy/app/templates/columns/grouped.hbs
+++ b/tests/dummy/app/templates/columns/grouped.hbs
@@ -4,6 +4,7 @@
     "grouped-table.js"
     "base-table.js"
     "grouped-table.hbs"
+    "fa-icon-wrapper.hbs"
     "user-avatar.hbs"
     "table-loader.hbs"
 }}>
diff --git a/tests/dummy/app/templates/columns/resizable.hbs b/tests/dummy/app/templates/columns/resizable.hbs
index 71671715..459fa600 100644
--- a/tests/dummy/app/templates/columns/resizable.hbs
+++ b/tests/dummy/app/templates/columns/resizable.hbs
@@ -4,6 +4,7 @@
     "resizable-table.js"
     "base-table.js"
     "resizable-table.hbs"
+    "fa-icon-wrapper.hbs"
     "user-avatar.hbs"
     "table-loader.hbs"
 }}>
diff --git a/tests/dummy/app/templates/cookbook/client-side.hbs b/tests/dummy/app/templates/cookbook/client-side.hbs
index 7db43d18..e7e642f5 100644
--- a/tests/dummy/app/templates/cookbook/client-side.hbs
+++ b/tests/dummy/app/templates/cookbook/client-side.hbs
@@ -4,6 +4,7 @@
     "client-side-table.js"
     "base-table.js"
     "client-side-table.hbs"
+    "fa-icon-wrapper.hbs"
     "user-avatar.hbs"
     "table-loader.hbs"
 }}>
diff --git a/tests/dummy/app/templates/cookbook/custom-row.hbs b/tests/dummy/app/templates/cookbook/custom-row.hbs
index 11295b0f..4831db68 100644
--- a/tests/dummy/app/templates/cookbook/custom-row.hbs
+++ b/tests/dummy/app/templates/cookbook/custom-row.hbs
@@ -5,6 +5,7 @@
     "base-table.js"
     "custom-row-table.hbs"
     "colored-row.js"
+    "fa-icon-wrapper.hbs"
     "user-avatar.hbs"
     "table-loader.hbs"
 }}>
diff --git a/tests/dummy/app/templates/cookbook/horizontal-scrolling.hbs b/tests/dummy/app/templates/cookbook/horizontal-scrolling.hbs
index a3ec6b0f..0d19e9cc 100644
--- a/tests/dummy/app/templates/cookbook/horizontal-scrolling.hbs
+++ b/tests/dummy/app/templates/cookbook/horizontal-scrolling.hbs
@@ -4,6 +4,7 @@
     "horizontal-scrolling-table.js"
     "base-table.js"
     "horizontal-scrolling-table.hbs"
+    "fa-icon-wrapper.hbs"
     "user-avatar.hbs"
     "table-loader.hbs"
 }}>
diff --git a/tests/dummy/app/templates/cookbook/occlusion-rendering.hbs b/tests/dummy/app/templates/cookbook/occlusion-rendering.hbs
index b9849cfe..7d026a37 100644
--- a/tests/dummy/app/templates/cookbook/occlusion-rendering.hbs
+++ b/tests/dummy/app/templates/cookbook/occlusion-rendering.hbs
@@ -4,6 +4,7 @@
     "occluded-table.js"
     "base-table.js"
     "occluded-table.hbs"
+    "fa-icon-wrapper.hbs"
     "user-avatar.hbs"
     "table-loader.hbs"
   }}>
diff --git a/tests/dummy/app/templates/cookbook/pagination.hbs b/tests/dummy/app/templates/cookbook/pagination.hbs
index 1bdf9457..1a0515e1 100644
--- a/tests/dummy/app/templates/cookbook/pagination.hbs
+++ b/tests/dummy/app/templates/cookbook/pagination.hbs
@@ -4,6 +4,7 @@
     "paginated-table.js"
     "base-table.js"
     "paginated-table.hbs"
+    "fa-icon-wrapper.hbs"
     "user-avatar.hbs"
     "table-loader.hbs"
 }}>
diff --git a/tests/dummy/app/templates/cookbook/table-actions.hbs b/tests/dummy/app/templates/cookbook/table-actions.hbs
index 75ab44db..612b3fc2 100644
--- a/tests/dummy/app/templates/cookbook/table-actions.hbs
+++ b/tests/dummy/app/templates/cookbook/table-actions.hbs
@@ -5,6 +5,7 @@
     "base-table.js"
     "table-actions-table.hbs"
     "user-actions.hbs"
+    "fa-icon-wrapper.hbs"
     "user-avatar.hbs"
     "table-loader.hbs"
 }}>
diff --git a/tests/dummy/app/templates/index.hbs b/tests/dummy/app/templates/index.hbs
index f6bda345..ee0cea68 100644
--- a/tests/dummy/app/templates/index.hbs
+++ b/tests/dummy/app/templates/index.hbs
@@ -4,6 +4,7 @@
     "simple-table.js"
     "base-table.js"
     "simple-table.hbs"
+    "fa-icon-wrapper.hbs"
     "user-avatar.hbs"
     "table-loader.hbs"
   }}
diff --git a/tests/dummy/app/templates/responsive.hbs b/tests/dummy/app/templates/responsive.hbs
index c86c0b25..55441032 100644
--- a/tests/dummy/app/templates/responsive.hbs
+++ b/tests/dummy/app/templates/responsive.hbs
@@ -5,6 +5,7 @@
     "base-table.js"
     "responsive-table.hbs"
     "responsive-expanded-row.hbs"
+    "fa-icon-wrapper.hbs"
     "row-toggle.hbs"
     "user-avatar.hbs"
     "table-loader.hbs"
diff --git a/tests/dummy/app/templates/rows/expandable.hbs b/tests/dummy/app/templates/rows/expandable.hbs
index 10bc6d6c..14125adf 100644
--- a/tests/dummy/app/templates/rows/expandable.hbs
+++ b/tests/dummy/app/templates/rows/expandable.hbs
@@ -5,6 +5,7 @@
     "base-table.js"
     "expandable-table.hbs"
     "expanded-row.hbs"
+    "fa-icon-wrapper.hbs"
     "table-loader.hbs"
 }}>
   <Rows::ExpandableTable @model={{this.model}}/>
diff --git a/tests/dummy/app/templates/rows/selectable.hbs b/tests/dummy/app/templates/rows/selectable.hbs
index d2e087fd..a29156a4 100644
--- a/tests/dummy/app/templates/rows/selectable.hbs
+++ b/tests/dummy/app/templates/rows/selectable.hbs
@@ -4,6 +4,7 @@
     "selectable-table.js"
     "base-table.js"
     "selectable-table.hbs"
+    "fa-icon-wrapper.hbs"
     "user-avatar.hbs"
     "no-data.hbs"
     "table-loader.hbs"
diff --git a/tests/dummy/app/templates/scrolling.hbs b/tests/dummy/app/templates/scrolling.hbs
index 967dd754..e6e02022 100644
--- a/tests/dummy/app/templates/scrolling.hbs
+++ b/tests/dummy/app/templates/scrolling.hbs
@@ -4,6 +4,7 @@
     "scrolling-table.js"
     "base-table.js"
     "scrolling-table.hbs"
+    "fa-icon-wrapper.hbs"
     "user-avatar.hbs"
     "table-loader.hbs"
 }}>

From b527ba6b68cbea2ead52afef5b41e49155cb35f4 Mon Sep 17 00:00:00 2001
From: maxwondercorn <gmartell@pobox.com>
Date: Mon, 1 Aug 2022 18:06:56 -0400
Subject: [PATCH 2/2] Correct sorting icon/component comments

---
 tests/dummy/app/components/simple-table.hbs | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/tests/dummy/app/components/simple-table.hbs b/tests/dummy/app/components/simple-table.hbs
index cc2de36d..e67e0555 100644
--- a/tests/dummy/app/components/simple-table.hbs
+++ b/tests/dummy/app/components/simple-table.hbs
@@ -1,9 +1,18 @@
 {{! BEGIN-SNIPPET simple-table }}
 <LightTable @table={{this.table}} @height="65vh" as |t|>
   {{!
-    See the simple table example on using sorting icons
-    and icon components.
+    The `sort`, `sort-up` and `sort-down` Font Awesome icons are 
+    rendered by the `fa-icon-wrapper` component. The 
+    component uses the @fortawesome/ember-fontawesome addon.
+
+    The 'fa-icon-wrapper` component may be used with other
+    Font Awesome icons by installing the appropiate icon 
+    package.
+
+    Other icon systems can be used with a custom icon 
+    component. See the custom sort icon cookbook example.
   }}
+
   <t.head
     @onColumnClick={{this.onColumnClick}}
     @iconSortable="sort"