adopted-ember-addons · maxwondercorn · Aug 1, 2022 · Aug 1, 2022
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1 +1,3 @@
-<FaIcon @icon={{get @sortIcons @sortIconProperty}}/>
+{{! BEGIN-SNIPPET fa-icon-wrapper }}
+<FaIcon @icon={{get @sortIcons @sortIconProperty}}/>
+{{! END-SNIPPET }}
diff --git 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
@@ -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
@@ -1,9 +1,16 @@
 {{! 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.
+    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

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -4,6 +4,7 @@
     "scrolling-table.js"
     "base-table.js"
     "scrolling-table.hbs"
+    "fa-icon-wrapper.hbs"
     "user-avatar.hbs"
     "table-loader.hbs"
 }}>