Moved image component to components from styles (#474)

* Moved image component to components from styles

* Added right padding to cta heading

* Added style for hr element

* Fixed BEM issue

src/components/call-to-action/_call-to-action.scss

@@ -1,4 +1,8 @@
 .call-to-action {
   padding: 0.85rem 0;
   background: $cta-bg;
+
+  &__heading {
+    padding-right: 0.2rem;
+  }
 }

src/components/call-to-action/_macro.njk

@@ -4,8 +4,8 @@
         <div class="container">
             <div class="grid grid--flex grid--vertical-center grid--no-wrap@s">
                 <div class="grid__col col-auto u-flex-shrink@s">
-                    <h2 class="u-fs-r--b u-di">{{ params.headingText }}</h2> 
-                    <p class="u-di">{{ params.paragraphText }}</p>
+                    <h2 class="call-to-action__heading u-fs-r--b u-di">{{ params.headingText }}</h2> 
+                    <p class="call-to-action__text u-di">{{ params.paragraphText }}</p>
                 </div>
                 <div class="grid__col col-auto u-flex-no-grow u-mt-xs@xs@s">
                     {{ onsButton({

src/styles/images/examples/image/index.njk → src/components/images/examples/image/index.njk

@@ -1,4 +1,4 @@
-{% from "styles/images/_macro.njk" import onsImage %}
+{% from "components/images/_macro.njk" import onsImage %}
 {{ 
     onsImage({
         "url": '/patternlib-img/photo-1.jpg',

src/components/video/examples/video/index.njk

@@ -1,6 +1,6 @@
 {% from "components/video/_macro.njk" import onsVideo %}
 {{ 
     onsVideo({
-        "youtubeUrl": "https://www.youtube.com/watch?v=BiZk2pnSM6w"
+        "youtubeUrl": "https://www.youtube.com/embed?v=BiZk2pnSM6w"
     })
 }}

src/scss/base/_global.scss

@@ -23,6 +23,12 @@ img {
   height: auto;
 }
 
+hr {
+  border: 0;
+  border-top: 1px solid #ddd;
+  margin: 2rem 0 0;
+}
+
 a {
   color: $color-links;
   &:hover {

src/styles/images/index.njk

@@ -5,5 +5,5 @@ title: Images
 
 Documentation required
 {{
-    patternlibExample({"path": "styles/images/examples/image/index.njk"})
+    patternlibExample({"path": "components/images/examples/image/index.njk"})
 }}