Added cta component and examples (#451)

* Added cta component and examples - WIP

* Created variable for census purple

* Added theme to cta example

* Added color variable

* Added parameter for button text

* Updated cta to use h2 and p

src/components/button/_macro.njk

@@ -1,6 +1,14 @@
 {% macro onsButton(params) %}
-  <button
-      type="{{ params.type if params.type else ('button' if params.print else 'submit') }}"
+
+{% set tag = "a" if params.url else "button" %}
+
+  <{{ tag }}
+      {% if params.url %}
+        href="{{ params.url }}"
+        role="button"
+      {% else %}
+        type="{{ params.type if params.type else ('button' if params.print else 'submit') }}"
+      {% endif %}
       class="btn{% if params.classes %} {{ params.classes }}{% endif %}{% if params.disabled %} btn--disabled{% endif %}{% if params.print %} btn--print u-d-no js-print-btn{% endif %}"
       {% if params.id %}id="{{ params.id }}"{% endif %}
       {% if params.value %}value="{{ params.value }}"{% endif %}
@@ -9,5 +17,5 @@
       {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
       >
       <span class="btn__inner{% if params.innerClasses %} {{ params.innerClasses }}{% endif %}">{{- params.html | safe if params.html else params.text -}}</span>
-  </button>
+  </{{ tag }}>
 {% endmacro %}

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

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

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

@@ -0,0 +1,21 @@
+{% macro onsCallToAction(params) %}
+    {% from "components/button/_macro.njk" import onsButton %}
+    <div class="call-to-action">
+        <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>
+                </div>
+                <div class="grid__col col-auto u-flex-no-grow u-mt-xs@xs@s">
+                    {{ onsButton({
+                        "text": params.button.text,
+                        "url": params.button.url,
+                        "classes": "btn--small",
+                        "innerClasses": "icon--chevron-right-white"
+                    })}}
+                </div>
+            </div>
+        </div>
+    </div>
+{% endmacro %}

src/components/call-to-action/examples/call-to-action-census/index.njk

@@ -0,0 +1,16 @@
+---
+"theme": census
+---
+{% from "components/call-to-action/_macro.njk" import onsCallToAction %}
+{{-
+    onsCallToAction({
+        "headingText": "Ready to start your census survey?",
+        "paragraphText": "You'll need the access code from the letter we sent you.",
+        "button": {
+            "text": "Start survey",
+            "classes": 'btn--small',
+            "innerClasses": "icon--chevron-right-white",
+            "url": "#"
+        }
+    })
+}}

src/components/call-to-action/examples/call-to-action-default/index.njk

@@ -0,0 +1,13 @@
+{% from "components/call-to-action/_macro.njk" import onsCallToAction %}
+{{-
+    onsCallToAction({
+        "headingText": "Call to action heading.",
+        "paragraphText": "Descriptive text about call to action",
+        "button": {
+            "text": "Start",
+            "classes": 'btn--small',
+            "innerClasses": "icon--chevron-right-white",
+            "url": "#"
+        }
+    })
+}}

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

@@ -0,0 +1,16 @@
+---
+title: Call to action
+---
+{% from "views/partials/example/_macro.njk" import patternlibExample %}
+
+Documentation required
+
+## Call to action - default
+{{
+    patternlibExample({"path": "components/call-to-action/examples/call-to-action-default/index.njk"})
+}}
+
+## Call to action - census
+{{
+    patternlibExample({"path": "components/call-to-action/examples/call-to-action-census/index.njk"})
+}}

src/scss/utilities/_utilities.scss

@@ -2,6 +2,10 @@
   display: inline-block;
 }
 
+.u-di {
+  display: inline;
+}
+
 .u-db {
   display: block;
 }

src/scss/vars/_colors.scss

@@ -24,6 +24,7 @@ $color-yellow: #f0f762;
 
 // assignment
 $color-header: $color-astral-blue !default;
+$cta-bg: $color-grey-5 !default;
 $color-text: $color-black !default;
 $color-text-light: $color-grey-1 !default;
 $color-links: $color-blue !default;

src/styles/typography/icons/_icons.scss

@@ -9,3 +9,5 @@
 @include create-icon($name: external-link, $position: 'after');
 
 @include create-icon($name: lock, $height: 1.3rem, $transform: translateY(-0.15rem));
+
+@include create-icon($name: chevron-right-white, $height: 0.8rem, $position: 'after');

src/views/layouts/_example.njk

@@ -1,5 +1,6 @@
 {% extends "./_master.njk" %}
 {% set example = true %}
+
 {% block master_body %}
     <main class="patternlib-page__example">
         {% block main %}

src/views/layouts/_master.njk

@@ -6,6 +6,7 @@
     {% set page = {} %}
 {% endif %}
 
+
 {% if example %}
     {% set bodyClasses = bodyClasses + " patternlib-page--example" %}
     {% if page.theme %}