feature/close-button (#339)

* Build close button files

* Update iconography adding example of .nsw-icon-button

src/components/close-button/_close-button.hbs

@@ -0,0 +1,4 @@
+<button class="nsw-icon-button" type="button">
+  {{>_icon }}
+  <span class="sr-only">{{sr}}</span>
+</button>

src/components/close-button/index.hbs

@@ -0,0 +1,40 @@
+---
+title: Close button
+width: narrow
+no-blank: true
+directory: close-button
+intro: A close button is a graphical element used to dismiss or close windows, dialogs, or other UI elements.
+meta-description: A close button is a graphical element used to dismiss or close windows, dialogs, or other UI elements.
+meta-index: true
+---
+
+<p>A close button is a <code>&lt;button&gt;</code> element with the class <code>.nsw-icon-button</code>. We use the 'close' material icon as the X icon. This icon is wrapped in a <code>&lt;span&gt;</code> with the attribute <code>aria-hidden="true"</code>, so screen readers don't read the X icon.</p>
+
+<p>The button also includes a <code>&lt;span&gt;</code> with the <code>.sr-only</code> class to tell screen readers what the button's purpose is.</p>
+
+{{#>_docs-example separated=true}}
+{{>_close-button code="close" sr="Close"}}
+{{/_docs-example}}
+
+<h3>Sizing</h3>
+<p>The NSW Design System displays icons at four sizes (20px, 24px, 30px, 36px) depending on their type, use and screen size:</p>
+
+{{#>_docs-example separated=true}}
+<div class="nsw-list nsw-list--8">
+  {{>_close-button code="close" sr="Close" size="20"}}
+  {{>_close-button code="close" sr="Close" size="24"}}
+  {{>_close-button code="close" sr="Close" size="30"}}
+  {{>_close-button code="close" sr="Close" size="36"}}
+</div>
+{{/_docs-example}}
+
+<h3>Accessibility</h3>
+<p>All components are responsive and meet WCAG 2.1 AA accessibility guidelines.</p>
+
+<p>Do:</p>
+<ul>
+  <li>Wrap icons within their interactive component</li>
+  <li>Specify if an icon is decorative and informative by assigning the appropriate property.</li>
+  <li>Use descriptive and meaningful titles for informative icons</li>
+</ul>
+

src/components/pagination/_pagination.scss

@@ -25,7 +25,6 @@
     padding: rem(4px);
     min-width: rem(30px);
     border-radius: var(--nsw-border-radius);
-    color: var(--nsw-brand-dark);
 
     &:hover {
       @include nsw-hover;

src/core/iconography/index.hbs

@@ -44,14 +44,16 @@ meta-index: true
 <p>Add an icon next to text to support the action.</p>
 
 {{#>_docs-example simple="true" separated="true"}}
-  <a class="nsw-link nsw-link--icon nsw-p-right-sm" href="#">
+<div class="nsw-list nsw-list--8">
+  <a class="nsw-link nsw-link--icon" href="#">
     <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">west</span>
     <span>Back <span class="sr-only">a page</span></span>
   </a>
   <a class="nsw-link nsw-link--icon" href="#">
     <span>Download PDF schedule</span>
     <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">download</span>
   </a>
+</div>
 {{/_docs-example}}
 
 <h3>Button Icons</h3>
@@ -64,6 +66,25 @@ meta-index: true
   </div>
 {{/_docs-example}}
 
+{{#>_docs-example simple="true" separated="true"}}
+<div class="nsw-list nsw-list--8">
+  <a class="nsw-icon-button">
+    {{>_icon code="home"}}
+    <span class="sr-only">Home</span>
+  </a>
+
+  <button class="nsw-icon-button" type="button">
+    {{>_icon code="search"}}
+    <span class="sr-only">Search</span>
+  </button>
+
+  <a class="nsw-icon-button" href="#" target="_blank" rel="noopener">
+    <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#1578f2" d="M32 16.098C32 7.207 24.837 0 16 0S0 7.207 0 16.098C0 24.133 5.851 30.793 13.5 32V20.751H9.437v-4.653H13.5v-3.547c0-4.035 2.389-6.263 6.043-6.263 1.751 0 3.582.314 3.582.314v3.962h-2.018c-1.988 0-2.607 1.241-2.607 2.514v3.02h4.438l-.709 4.653h-3.728V32c7.649-1.208 13.5-7.867 13.5-15.902z"/></svg>
+    <span class="sr-only">Facebook</span>
+  </a>
+</div>
+{{/_docs-example}}
+
 <h3>Component Icons</h3>
 <p>Add an icon to a component to represent interactivity or communicate a status. </p>