Creates ui components for subscribe

Author: andreamangano

assets/scss/5-components/_subscribe.scss …s/scss/5-components/_subscribe-form.scssassets/scss/5-components/_subscribe.scss renamed to assets/scss/5-components/_subscribe-form.scss assets/scss/5-components/_subscribe.scss renamed to assets/scss/5-components/_subscribe-form.scss

@@ -1,17 +1,7 @@
-.subscribe {
-  &__title {
-    margin: $space-base auto;
-    max-width: rem-calc(600);
-    text-align: center;
+.subscribe-form {
 
-    @include media-query('medium') {
-      margin: $space-medium auto;
-    }
-  }
-
-  &__box {
+  &__content {
     @include grid-row(false);
-    max-width: rem-calc(500);
   }
 
   &__input-field {
@@ -56,11 +46,4 @@
       display: block;
     }
   }
-
-  &__note {
-    color: neutral-color('high');
-    display: block;
-    margin-top: $space-small;
-    text-align: center;
-  }
-}
+}

assets/scss/6-layout/_subscribe.scss

@@ -0,0 +1,23 @@
+.subscribe {
+  &__title {
+    margin: $space-base auto;
+    max-width: rem-calc(600);
+    text-align: center;
+
+    @include media-query('medium') {
+      margin: $space-medium auto;
+    }
+  }
+
+  &__form {
+    margin: 0 auto;
+    max-width: rem-calc(500);
+  }
+
+  &__note {
+    color: neutral-color('high');
+    display: block;
+    margin-top: $space-small;
+    text-align: center;
+  }
+}

assets/scss/main.scss

@@ -16,8 +16,9 @@
 @import './5-components/separator';
 @import './5-components/faq';
 @import './5-components/faqs';
-@import './5-components/subscribe';
+@import './5-components/subscribe-form';
 
+@import './6-layout/subscribe';
 @import './6-layout/layout';
 @import './6-layout/footer';
 @import './6-layout/header';

views/docs/_subscribe-form.pug

@@ -0,0 +1,5 @@
++docs-section({
+    title: 'Subscribe form'})
+
+  +docs-block({})
+    include ../partials/_subscribe-form

views/docs/_subscribe.pug

@@ -0,0 +1,5 @@
++docs-section({
+    title: 'Subscribe'})
+
+  +docs-block({})
+    include ../partials/_subscribe

views/index.pug

@@ -11,30 +11,7 @@ block page
       +separator('email')
 
       .page-index__subscribe
-
-        .subscribe
-          h4.subscribe__title!=callToAction.label
-          form.subscribe__form(
-          method=subscribeForm.method
-          action=subscribeForm.action)
-
-            .subscribe__box
-              .subscribe__input-field
-                input.subscribe__input(
-                id=subscribeForm.email.fieldId
-                type="email"
-                name=subscribeForm.email.fieldName
-                placeholder=subscribeForm.email.label)
-
-              .subscribe__submit-field
-                button.subscribe__submit(type="submit")
-                  .subscribe__submit-icon
-                    +icon({name: 'subscribe'})
-                  .subscribe__submit-label!=subscribeForm.submit.label
-
-            small.subscribe__note!=subscribeForm.note
-              =" "
-              a(href=sampleLink.url)!=`<strong>${sampleLink.label}</strong>`
+        include partials/_subscribe
 
     section.page-index__faq
       +faqs({title: faq.title, entries: faq.entries})

views/partials/_subscribe-form.pug

@@ -0,0 +1,16 @@
+form.subscribe-form(
+  method=subscribeForm.method
+  action=subscribeForm.action)
+  .subscribe-form__content
+    .subscribe-form__input-field
+      input.subscribe-form__input(
+      id=subscribeForm.email.fieldId
+      type="email"
+      name=subscribeForm.email.fieldName
+      placeholder=subscribeForm.email.label)
+
+    .subscribe-form__submit-field
+      button.subscribe-form__submit(type="submit")
+        .subscribe-form__submit-icon
+          +icon({name: 'subscribe'})
+        .subscribe-form__submit-label!=subscribeForm.submit.label

views/partials/_subscribe.pug

@@ -0,0 +1,8 @@
+.subscribe
+  h4.subscribe__title!=callToAction.label
+  .subscribe__form
+    include _subscribe-form
+
+    small.subscribe__note!=subscribeForm.note
+      =" "
+      a(href=sampleLink.url)!=`<strong>${sampleLink.label}</strong>`