umbEditorSubHeader: move some example pieces to other directive examples to make it less overwhelming

src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subheader/umbeditorsubheader.directive.js

@@ -9,43 +9,23 @@ The sub header is sticky and will follow along down the page when scrolling.
 
 <h3>Markup example</h3>
 <pre>
-    <div ng-controller="Umbraco.Controller as vm">
+    <div ng-controller="MySection.Controller as vm">
 
-        <umb-editor-view>
+        <form name="mySectionForm" novalidate>
 
-            <umb-editor-container>
+            <umb-editor-view>
 
-                <umb-editor-sub-header>
+                <umb-editor-container>
 
-                    <umb-editor-sub-header-content-left>
+                    <umb-editor-sub-header>
+                        // sub header content here
+                    </umb-editor-sub-header>
 
-                        <umb-editor-sub-header-section>
-                            // content goes here
-                        </umb-editor-sub-header-section>
+                </umb-editor-container>
 
-                        <umb-editor-sub-header-section>
-                            // content goes here
-                        </umb-editor-sub-header-section>
+            </umb-editor-view>
 
-                    </umb-editor-sub-header-content-left>
-
-                    <umb-editor-sub-header-content-right>
-
-                        <umb-editor-sub-header-section>
-                            // content goes here
-                        </umb-editor-sub-header-section>
-
-                        <umb-editor-sub-header-section>
-                            // content goes here
-                        </umb-editor-sub-header-section>
-
-                    </umb-editor-sub-header-content-right>
-
-                </umb-editor-sub-header>
-
-            </umb-editor-container>
-
-        </umb-editor-view>
+        </form>
 
     </div>
 </pre>

src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subheader/umbeditorsubheadercontentleft.directive.js

@@ -7,7 +7,35 @@
 Use this directive to left align content in a sub header in the main editor window.
 
 <h3>Markup example</h3>
-For examples see: {@link umbraco.directives.directive:umbEditorSubHeader umbEditorSubHeader}
+<pre>
+    <div ng-controller="MySection.Controller as vm">
+
+        <form name="mySectionForm" novalidate>
+
+            <umb-editor-view>
+
+                <umb-editor-container>
+
+                    <umb-editor-sub-header>
+
+                        <umb-editor-sub-header-content-left>
+                            // left content here
+                        </umb-editor-sub-header-content-left>
+
+                        <umb-editor-sub-header-content-right>
+                            // right content here
+                        </umb-editor-sub-header-content-right>
+
+                    </umb-editor-sub-header>
+
+                </umb-editor-container>
+
+            </umb-editor-view>
+
+        </form>
+
+    </div>
+</pre>
 
 <h3>Use in combination with</h3>
 <ul>

src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subheader/umbeditorsubheadercontentright.directive.js

@@ -7,7 +7,35 @@
 Use this directive to rigt align content in a sub header in the main editor window.
 
 <h3>Markup example</h3>
-For examples see: {@link umbraco.directives.directive:umbEditorSubHeader umbEditorSubHeader}
+<pre>
+    <div ng-controller="MySection.Controller as vm">
+
+        <form name="mySectionForm" novalidate>
+
+            <umb-editor-view>
+
+                <umb-editor-container>
+
+                    <umb-editor-sub-header>
+
+                        <umb-editor-sub-header-content-left>
+                            // left content here
+                        </umb-editor-sub-header-content-left>
+
+                        <umb-editor-sub-header-content-right>
+                            // right content here
+                        </umb-editor-sub-header-content-right>
+
+                    </umb-editor-sub-header>
+
+                </umb-editor-container>
+
+            </umb-editor-view>
+
+        </form>
+
+    </div>
+</pre>
 
 <h3>Use in combination with</h3>
 <ul>

src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subheader/umbeditorsubheadersection.directive.js

@@ -7,7 +7,43 @@
 Use this directive to create sections, divided by borders, in a sub header in the main editor window.
 
 <h3>Markup example</h3>
-For examples see: {@link umbraco.directives.directive:umbEditorSubHeader umbEditorSubHeader}
+<pre>
+    <div ng-controller="MySection.Controller as vm">
+
+        <form name="mySectionForm" novalidate>
+
+            <umb-editor-view>
+
+                <umb-editor-container>
+
+                    <umb-editor-sub-header>
+
+                        <umb-editor-sub-header-content-right>
+
+                            <umb-editor-sub-header-section>
+                                // section content here
+                            </umb-editor-sub-header-section>
+
+                            <umb-editor-sub-header-section>
+                                // section content here
+                            </umb-editor-sub-header-section>
+
+                            <umb-editor-sub-header-section>
+                                // section content here
+                            </umb-editor-sub-header-section>
+
+                        </umb-editor-sub-header-content-right>
+
+                    </umb-editor-sub-header>
+
+                </umb-editor-container>
+
+            </umb-editor-view>
+
+        </form>
+
+    </div>
+</pre>
 
 <h3>Use in combination with</h3>
 <ul>