4 Examples: Add "Open in Codepen" button to examples that use Font Awesome for Icon (pull #1685)

1. Adds font awesome icon stylesheet to Codepen options. Now, if font awesome is used in an example going forward, the icons will appear as expected when the example is opened in codepen. 
2. Adds the Open In Codepen button to the two examples that use font awesome already: toolbar/toolbar.html and dialog-modal/datepicker-dialog.html.
3. Converts the treeview directory example to use font awesome icons for the folder and file icons and adds the "Open in Codepen" button to them: treeview/treeview-1/treeview-1a.html and treeview/treeview-1/treeview-1b.html

Author: spectranaut

.stylelintrc

@@ -7,7 +7,15 @@
         "ignoreMediaFeatureNames": [
           "forced-colors"
         ]
-      }
+      },
+    ],
+    "font-family-no-missing-generic-family-keyword": [
+      true,
+      {
+        "ignoreFontFamilies": [
+          "Font Awesome 5 Free"
+        ]
+      },
     ],
     "prettier/prettier": [true, {"singleQuote": false}]
   }

examples/dialog-modal/datepicker-dialog.html

@@ -41,7 +41,9 @@ <h1>Date Picker Dialog Example</h1>
       <li><a href="../combobox/combobox-datepicker.html">Date Picker Combobox</a>: An editable date input combobox that opens a dialog containing a calendar grid and buttons for navigating by month and year.</li>
     </ul>
   <section>
-    <h2 id="ex_label">Example</h2>
+    <div class="example-header">
+      <h2 id="ex_label">Example</h2>
+    </div>
     <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
     <div id="example">
 
@@ -641,7 +643,7 @@ <h3 id="rps_label_5">Date Picker Dialog: Date Grid</h3>
 
   <section>
     <h2>Javascript and CSS Source Code</h2>
-    <ul>
+    <ul id="css_js_files">
       <li>
         CSS:
         <a href="css/datepicker-dialog.css" type="text/css">datepicker-dialog.css</a>
@@ -659,7 +661,7 @@ <h2 id="sc1_label">HTML Source Code</h2>
     <pre><code id="source1"></code></pre>
     <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
     <script>
-      sourceCode.add('source1', 'example');
+      sourceCode.add('source1', 'example', 'ex_label', 'css_js_files');
       sourceCode.make();
     </script>
   </section>

examples/js/examples.js

@@ -415,7 +415,8 @@ function addOpenInCodePenForm(
     css_external:
       location.origin +
       '/examples/css/core.css;' +
-      'https://www.w3.org/StyleSheets/TR/2016/base.css',
+      'https://www.w3.org/StyleSheets/TR/2016/base.css;' +
+      'https://use.fontawesome.com/releases/v5.1.0/css/all.css',
     js_external: location.origin + 'examples/js/utils.js',
   };
 

examples/toolbar/toolbar.html

@@ -46,7 +46,9 @@ <h1>Toolbar Example</h1>
     This example also illustrates the <a href="../../#kbd_roving_tabindex">roving tabindex method</a> for managing focus within a component.
   </p>
   <section>
-    <h2 id="ex_label">Example</h2>
+    <div class="example-header">
+      <h2 id="ex_label">Example</h2>
+    </div>
     <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
     <div id="ex1">
       <div class="format" role="toolbar" aria-label="Text Formatting" aria-controls="textarea1">
@@ -954,7 +956,7 @@ <h3 id="rps_label_7">Spin Button (Font Size)</h3>
 
   <section>
     <h2>Javascript and CSS Source Code</h2>
-    <ul>
+    <ul id="css_js_files">
       <li>CSS: <a href="css/toolbar.css" type="text/css">toolbar.css</a></li>
       <li>CSS: <a href="css/menuButton.css" type="text/css">menuButton.css</a></li>
       <li>Javascript: <a href="js/FormatToolbar.js" type="text/javascript">FormatToolbar.js</a></li>
@@ -976,7 +978,7 @@ <h2 id="sc1_label">HTML Source Code</h2>
       It renders the HTML in the preceding div with ID 'sc1'.
       -->
     <script>
-      sourceCode.add('sc1', 'ex1');
+      sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
       sourceCode.make();
     </script>
   </section>

examples/treeview/treeview-1/css/tree.css

@@ -6,7 +6,12 @@ ul[role="tree"] {
 }
 
 [role="treeitem"].doc::before {
-  content: url(../images/file.png);
+  font-family: "Font Awesome 5 Free";
+  content: "\f15c";
+  display: inline-block;
+  padding-right: 2px;
+  padding-left: 5px;
+  vertical-align: middle;
 }
 
 [role="treeitem"][aria-expanded="false"] > ul {
@@ -18,11 +23,21 @@ ul[role="tree"] {
 }
 
 [role="treeitem"][aria-expanded="false"] > span::before {
-  content: url(../images/closed.png);
+  font-family: "Font Awesome 5 Free";
+  content: "\f07b";
+  display: inline-block;
+  padding-right: 3px;
+  vertical-align: middle;
+  font-weight: 900;
 }
 
 [role="treeitem"][aria-expanded="true"] > span::before {
-  content: url(../images/open.png);
+  font-family: "Font Awesome 5 Free";
+  content: "\f07c";
+  display: inline-block;
+  padding-right: 3px;
+  vertical-align: middle;
+  font-weight: 900;
 }
 
 [role="treeitem"],

examples/treeview/treeview-1/images/closed.png

@@ -12,6 +12,8 @@
     <script src="../../js/app.js"></script>
 
     <link href="css/tree.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"
+          integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
 
     <script type="text/javascript" src="js/tree.js"></script>
     <script type="text/javascript" src="js/treeitem.js"></script>
@@ -49,7 +51,9 @@ <h1>File Directory Treeview Example Using Computed Properties</h1>
         <li><a href="../treeview-navigation.html">Navigation Treeview Example</a></li>
       </ul>
        <section>
-        <h2 id="start">Example</h2>
+         <div class="example-header">
+           <h2 id="start">Example</h2>
+         </div>
         <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep start" aria-label="Start of"></div>
         <div id="ex1">
          <h3 id="tree_label">
@@ -470,7 +474,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
 
      <section>
         <h2>Javascript and CSS Source Code</h2>
-        <ul>
+        <ul id="css_js_files">
           <li>
             CSS:
             <a href="css/tree.css" type="text/css">tree.css</a>
@@ -497,7 +501,7 @@ <h2 id="sc1_label">HTML Source Code</h2>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
 
         <script>
-          sourceCode.add('sc1', 'ex1');
+          sourceCode.add('sc1', 'ex1', 'start', 'css_js_files');
           sourceCode.make();
         </script>
       </section>

examples/treeview/treeview-1/images/file.png

@@ -43,7 +43,9 @@ <h1>File Directory Treeview Example Using Declared Properties</h1>
         <li><a href="../treeview-navigation.html">Navigation Treeview Example</a></li>
       </ul>
       <section>
-        <h2 id="start">Example</h2>
+        <div class="example-header">
+          <h2 id="start">Example</h2>
+        </div>
         <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep start" aria-label="Start of"></div>
         <div id="ex1">
         <h3 id="tree1">File Viewer</h3>
@@ -659,7 +661,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
 
      <section>
         <h2>Javascript and CSS Source Code</h2>
-        <ul>
+        <ul id="css_js_files">
           <li>
             CSS:
             <a href="css/tree.css" type="text/css">tree.css</a>
@@ -686,7 +688,7 @@ <h2 id="sc1_label">HTML Source Code</h2>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
 
         <script>
-          sourceCode.add('sc1', 'ex1');
+          sourceCode.add('sc1', 'ex1', 'start', 'css_js_files');
           sourceCode.make();
         </script>
       </section>