From bd397c869e3f659d1a0efeb11d85bd48ccf47cb0 Mon Sep 17 00:00:00 2001
From: Pete Richards <peter.l.richards@nasa.gov>
Date: Mon, 30 Jan 2017 13:46:24 -0800
Subject: [PATCH] Add mct-example directive

---
 example/styleguide/bundle.js                  | 10 ++++++-
 .../styleguide/res/templates/controls.html    | 27 ++++--------------
 .../styleguide/res/templates/mct-example.html |  6 ++++
 example/styleguide/src/MCTExample.js          | 28 +++++++++++++++++++
 4 files changed, 49 insertions(+), 22 deletions(-)
 create mode 100644 example/styleguide/res/templates/mct-example.html
 create mode 100644 example/styleguide/src/MCTExample.js

diff --git a/example/styleguide/bundle.js b/example/styleguide/bundle.js
index af1ada711d..17d8a2c478 100644
--- a/example/styleguide/bundle.js
+++ b/example/styleguide/bundle.js
@@ -1,8 +1,10 @@
 define([
     "./src/ExampleStyleGuideModelProvider",
+    "./src/MCTExample",
     'legacyRegistry'
 ], function (
     ExampleStyleGuideModelProvider,
+    MCTExample,
     legacyRegistry
 ) {
     legacyRegistry.register("example/styleguide", {
@@ -61,6 +63,12 @@ define([
                     }
                 }
             ],
+            "directives": [
+                {
+                    "key": "mctExample",
+                    "implementation": MCTExample
+                }
+            ],
             "components": [
                 {
                     "provides": "modelService",
@@ -83,4 +91,4 @@ define([
             ]
         }
     });
-});
\ No newline at end of file
+});
diff --git a/example/styleguide/res/templates/controls.html b/example/styleguide/res/templates/controls.html
index 1ea27ecfb4..60fdacb256 100644
--- a/example/styleguide/res/templates/controls.html
+++ b/example/styleguide/res/templates/controls.html
@@ -33,21 +33,11 @@
                 <p>Use a standard button in locations where there's sufficient room and you must make it clear that the element is an interactive button element. Buttons can be displayed with only an icon, only text, or with icon and text combined.</p>
                 <p>Use an icon whenever possible to aid the user's recognition and recall. If both and icon and text are to be used, the text must be within a <code>span</code> with class <code>.title-label</code>.</p>
             </div>
-            <div class="col">
-                <h3>Markup</h3>
-                <pre>
-&lt;a class="s-button icon-pencil"&gt;&lt;/a&gt;
-&lt;a class="s-button"&gt;Edit&lt;/a&gt;
-&lt;a class="s-button icon-pencil"&gt;
-    &lt;span class="title-label"&gt;Edit&lt;/span&gt;
-&lt;/a&gt;</pre>
-                <h3>Examples</h3>
-                <a class="s-button icon-pencil"></a>
-                <a class="s-button">Edit</a>
-                <a class="s-button icon-pencil">
-                    <span class="title-label">Edit</span>
-                </a>
-            </div>
+<mct-example><a class="s-button icon-pencil"></a>
+<a class="s-button">Edit</a>
+<a class="s-button icon-pencil">
+    <span class="title-label">Edit</span>
+</a></mct-example>
         </div>
     </div>
 
@@ -157,10 +147,5 @@
         </div>
     </div>
 
+</div>
 
-
-
-
-
-
-</div>
\ No newline at end of file
diff --git a/example/styleguide/res/templates/mct-example.html b/example/styleguide/res/templates/mct-example.html
new file mode 100644
index 0000000000..ae83eff402
--- /dev/null
+++ b/example/styleguide/res/templates/mct-example.html
@@ -0,0 +1,6 @@
+<div class="col">
+   <h3>Markup</h3>
+   <pre><code></code></pre>
+   <h3>Example</h3>
+   <div></div>
+</div>
diff --git a/example/styleguide/src/MCTExample.js b/example/styleguide/src/MCTExample.js
new file mode 100644
index 0000000000..848161e49d
--- /dev/null
+++ b/example/styleguide/src/MCTExample.js
@@ -0,0 +1,28 @@
+define([
+    'text!../res/templates/mct-example.html'
+], function (
+    MCTExampleTemplate
+) {
+
+    function MCTExample() {
+        function link($scope, $element, $attrs, controller, $transclude) {
+            var codeEl = $element.find('code');
+            var exampleEl = $element.find('div');
+
+            $transclude(function (clone) {
+                exampleEl.append(clone);
+                codeEl.text(exampleEl.html());
+            });
+        }
+
+        return {
+            restrict: "E",
+            template: MCTExampleTemplate,
+            transclude: true,
+            link: link,
+            replace: true
+        };
+    }
+
+    return MCTExample;
+});