DOC-1925: Add Skins and Icons examples to examples.adoc index page (#3046)

* DOC-1925: Add Skins and Icons examples to examples.adoc index page

* Fixed nav.adoc link and added entry to changelog

* Update changelog.md

* Apply suggestions from code review

Co-authored-by: Karl Kemister-Sheppard <[email protected]>

---------

Co-authored-by: Karl Kemister-Sheppard <[email protected]>

Author: Farzad Hayat

changelog.md

@@ -6,6 +6,10 @@ The format is loosely based on [Keep a Changelog](https://keepachangelog.com/en/
 
 ### Unreleased
 
+### 2024-01-18
+
+- DOC-1925: Add `Skins and Icons examples` to examples.adoc index page
+
 ### 2023-12-19
 
 - DOC-2220: add generation of `latest` and `6` documentation in parallel.

modules/ROOT/nav.adoc

@@ -225,7 +225,7 @@
 *** xref:distraction-free-demo.adoc[Distraction-free editor]
 ** xref:examples.adoc#integration-examples[Integration examples]
 *** xref:ie-template-creation.adoc[Template creation example]
-** Tiny Skins and Icon Packs
+** xref:examples.adoc#skins-and-icons-examples[Skins and Icons examples]
 *** xref:bootstrap-demo.adoc[Bootstrap Demo]
 *** xref:borderless-demo.adoc[Borderless Demo]
 *** xref:fabric-demo.adoc[Fabric Demo]

modules/ROOT/pages/examples.adoc

@@ -11,3 +11,8 @@ include::partial$index-pages/general-examples.adoc[]
 == Integration examples
 
 include::partial$index-pages/integration-examples.adoc[]
+
+[[skins-and-icons-examples]]
+== Skins and Icons examples
+
+include::partial$index-pages/skins-and-icons-examples.adoc[]

modules/ROOT/partials/index-pages/skins-and-icons-examples.adoc

@@ -0,0 +1,81 @@
+This table sets out {productname}'s range of pre-made skins and icon packs included in the {productname} documentation.
+
+[cols="1,1"]
+|===
+
+a|
+[.lead]
+xref:bootstrap-demo.adoc[Bootstrap Demo]
+
+Example form with colors, forms, and buttons to closely match the default Bootstrap framework UI.
+
+a|
+[.lead]
+xref:borderless-demo.adoc[Borderless Demo]
+
+Default TinyMCE skin without an outer border, ideal for "fullscreen" editing.
+
+a|
+[.lead]
+xref:fabric-demo.adoc[Fabric Demo]
+
+Microsoft design language-inspired Fabric skin with optional custom borders.
+
+a|
+[.lead]
+xref:fluent-demo.adoc[Fluent Demo]
+
+Microsoft design language-inspired Fluent skin with optional custom borders.
+
+a|
+[.lead]
+xref:jam-demo.adoc[Jam Icons Demo]
+
+Icons from JAM icon library used with the Small skin.
+
+a|
+[.lead]
+xref:material-classic-demo.adoc[Material Classic Demo]
+
+Example form with classical Material Design components and Material Classic skin.
+
+a|
+[.lead]
+xref:material-outline-demo.adoc[Material Outline Demo]
+
+Example form with outlined Material Design components and Material Outline skin.
+
+a|
+[.lead]
+xref:naked-demo.adoc[Naked Demo]
+
+Clean and simple text input experience with Naked skin, no outer or toolbar borders.
+
+a|
+[.lead]
+xref:outside-demo.adoc[Outside Demo]
+
+Clean text input with Outside skin, border around editable area, small icon pack.
+
+a|
+[.lead]
+xref:small-demo.adoc[Small Icons Demo]
+
+Smaller buttons using Small skin with smaller default icons.
+
+a|
+[.lead]
+xref:snow-demo.adoc[Snow Demo]
+
+Modern, lightweight editor with Snow skin, looks great with Thin icon pack.
+
+// Dummy table cell.
+// 1. Remove the inline comment markup pre-pending this
+//    element when the number of cells in the table is
+//    odd.
+// 2. Prepend the inline comment markup to this element
+//    when the number of cells in the table is even.
+a|
+
+|===
+