adds switch links and video times

diff --git a/docs/pages/switch.md b/docs/pages/switch.md
index cfb85721c137c5cb556f8b0393777431148b0596..816c935c9ef9104816e1d960d058ca160b7bb8db 100644 (file)
--- a/docs/pages/switch.md
+++ b/docs/pages/switch.md
@@ -23,13 +23,19 @@ Give the `<input>` a unique ID and point the `<label>` to it with the `for` attr
   <p>Make sure the HTML of the switch goes in the order you see above&mdash;<code>&lt;input&gt;</code>, then <code>&lt;label&gt;</code></p>
 </div>
 
+<div class="docs-video-codepen-container">
+  <a class="" data-open-video="0:18"><img src="https://www.elastic.co/static/images/svg/video-play-btn.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+
+  <a class="codepen-logo-link" href="https://codepen.io/ZURBFoundation/pen/aWGpGg?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
+
 ```html_example
 <div class="switch">
   <input class="switch-input" id="exampleSwitch" type="checkbox" name="exampleSwitch">
   <label class="switch-paddle" for="exampleSwitch">
     <span class="show-for-sr">Download Kittens</span>
   </label>
-</div> 
+</div>
 ```
 
 ---
@@ -38,6 +44,12 @@ Give the `<input>` a unique ID and point the `<label>` to it with the `for` attr
 
 You can also use `<input type="radio">` instead of `checkbox` to create a series of options.
 
+<div class="docs-video-codepen-container">
+  <a class="" data-open-video="1:48"><img src="https://www.elastic.co/static/images/svg/video-play-btn.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+
+  <a class="codepen-logo-link" href="https://codepen.io/ZURBFoundation/pen/GmdrYW?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
+
 ```html_example
 <div class="switch">
   <input class="switch-input" id="exampleRadioSwitch1" type="radio" checked name="testGroup">
@@ -52,7 +64,7 @@ You can also use `<input type="radio">` instead of `checkbox` to create a series
   <label class="switch-paddle" for="exampleRadioSwitch2">
     <span class="show-for-sr">Charmander</span>
   </label>
-</div> 
+</div>
 
 <div class="switch">
   <input class="switch-input" id="exampleRadioSwitch3" type="radio" name="testGroup">
@@ -67,6 +79,12 @@ You can also use `<input type="radio">` instead of `checkbox` to create a series
 
 Use the classes `.tiny`, `.small`, or `.large` to change the switch size.
 
+<div class="docs-video-codepen-container">
+  <a class="" data-open-video="2:08"><img src="https://www.elastic.co/static/images/svg/video-play-btn.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+
+  <a class="codepen-logo-link" href="https://codepen.io/ZURBFoundation/pen/mmLRgm?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
+
 ```html_example
 <div class="switch tiny">
   <input class="switch-input" id="tinySwitch" type="checkbox" name="exampleSwitch">
@@ -80,14 +98,14 @@ Use the classes `.tiny`, `.small`, or `.large` to change the switch size.
   <label class="switch-paddle" for="smallSwitch">
     <span class="show-for-sr">Small Portions Only</span>
   </label>
-</div> 
+</div>
 
 <div class="switch large">
   <input class="switch-input" id="largeSwitch" type="checkbox" name="exampleSwitch">
   <label class="switch-paddle" for="largeSwitch">
     <span class="show-for-sr">Show Large Elephants</span>
   </label>
-</div> 
+</div>
 ```
 
 ---
@@ -106,6 +124,12 @@ Active/inactive text goes inside of the switch's `<label>`.
   <p>Add <code>aria-hidden="true"</code> to these labels to prevent AT from reading them.</p>
 </div>
 
+<div class="docs-video-codepen-container">
+  <a class="" data-open-video="2:25"><img src="https://www.elastic.co/static/images/svg/video-play-btn.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+
+  <a class="codepen-logo-link" href="https://codepen.io/ZURBFoundation/pen/qmYRzb?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
+
 ```html_example
 <p>Do you like me?</p>
 <div class="switch large">

diff --git a/docs/partials/docs-video-codepen.html b/docs/partials/docs-video-codepen.html
new file mode 100644 (file)
index 0000000..a0cf255
--- /dev/null
+++ b/docs/partials/docs-video-codepen.html
@@ -0,0 +1,11 @@
+{{#ifequal type 'with-video'}}
+<div class="docs-video-codepen-container">
+  <a class="" data-open-video="{{video-time}}"><img src="https://www.elastic.co/static/images/svg/video-play-btn.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+
+  <a class="codepen-logo-link" href="{{codepen-link}}" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
+{{/ifequal}}
+
+{{#ifequal type 'codepen-only'}}
+<a class="codepen-logo-link" href="{{codepen-link}}" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
+{{/ifequal}}