feature/pagination (#301)

* Added .disabled styles and updated guidance and code examples for the pagination component
* Changed Pink to Fuschia

src/components/pagination/_guidance.hbs

@@ -4,15 +4,17 @@ layout: blank-layout.hbs
 ---
 
 <h2>Usage</h2>
-<p>Pagination allows users to see total number of pages, which page they are viewing, and how to navigate to other pages. </p>
-<p>Use pagination to separate large lists of content, such as search results, into smaller lists that are easier to interact with. Showing content on several pages prevents your content from becoming too long and overwhelming. </p>
+<p>Pagination allows users to see total number of pages, which page they are viewing, and how to navigate to other pages.</p>
+<p>Use pagination to separate large lists of content, such as search results, into smaller lists that are easier to interact with. Showing content on several pages prevents your content from becoming too long and overwhelming.</p>
 <p>Consider using pagination when a listing exceeds 10 results. Letting the user know on which page a particular piece of information is available makes it easier for them to find it again.  </p>
 
 <h2>How this component works</h2>
 <p><strong>Placement</strong></p>
 <p>Pagination is placed at the bottom of the content list to give users visibility and flexibility to move throughout the pages.  </p>
 <p><strong>Controls</strong></p>
-<p>The next and back controls allow users to easily move forward and backward through the pages and selecting a page number takes a user to that page. The first and last page number should always show and a user’s current page is always highlighted.  </p>
+<p>The next and back controls allow users to easily move forward and backward through the pages and selecting a page number takes a user to that page. The first and last page number should always show and a user’s current page is always highlighted.</p>
+<p><strong>Disabled and active states</strong></p>
+<p>Pagination links are customizable for different circumstances. Use <code>.disabled</code> for links that appear un-clickable and <code>.active</code> to indicate the current page.</p>
 
 <h2>Accessibility</h2>
 <p>All components are responsive and meet WCAG 2.1 AA accessibility guidelines.</p>

src/components/pagination/_pagination.hbs

@@ -1,17 +1,16 @@
 <nav class="nsw-pagination" aria-label="Pagination">
   <ul>
     <li>
-      <a class="nsw-icon-button" href="#">
+      <a class="nsw-icon-button{{#if disabled}} disabled{{/if}}" href="#">
         <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">keyboard_arrow_left</span>
-        <span class="sr-only">Back</span>
+        <span class="sr-only">Previous</span>
       </a>  
     </li>
-    <li><a href="#"><span class="sr-only">Page </span>1</a></li>
-    <li><a href="#"><span class="sr-only">Page </span>2</a></li>
-    <li><a class="active" href="#"><span class="sr-only">Page </span>3</a></li>
-    <li><a href="#"><span class="sr-only">Page </span>4</a></li>
+    {{#each list}}
+    <li><a{{#if-equals ../active this}} class="active"{{/if-equals}} href="#"><span class="sr-only">Page </span>{{this}}</a></li>
+    {{/each}}
     <li><span>&hellip;</span></li>
-    <li><a href="#"><span class="sr-only">Page </span>12</a></li>
+    <li><a href="#"><span class="sr-only">Page </span>12</a></li>  
     <li>
       <a class="nsw-icon-button" href="#">
         <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">keyboard_arrow_right</span>

src/components/pagination/_pagination.scss

@@ -57,6 +57,12 @@
       .nsw-section--invert & {    
         color: var(--nsw-text-light);
       }
-    }    
+    }
+
+    &.disabled,
+    .disabled > & {
+      pointer-events: none;
+      opacity: 0.4;
+    }
   }
 }

src/components/pagination/blank.hbs

@@ -2,8 +2,12 @@
 title: Pagination
 width: narrow
 page: true
+model:
+  pagination: ../../components/pagination/json/pagination.json
 ---
 
 {{#>_layout-container}}
-{{>_pagination}}
+{{>_pagination model.pagination active="5"}}
+
+{{>_pagination model.pagination disabled="true" active="1"}}
 {{/_layout-container}}

src/components/pagination/index.hbs

@@ -8,6 +8,15 @@ figma: https://www.figma.com/file/PVrERKnckLTlJSPk12gbtS/NSW-Digital-Design-Syst
 react: https://digitalnsw.github.io/nsw-design-system-react/?path=/docs/navigation-pagination--pagination
 meta-description: Pagination breaks down large amounts of content across a series of pages.
 meta-index: true
+model:
+  pagination: ../../components/pagination/json/pagination.json
 ---
 
-{{#>_docs-example}}{{>_pagination}}{{/_docs-example}}
+{{#>_docs-example}}
+{{>_pagination model.pagination}}
+{{/_docs-example}}
+
+<h3>Disabled and active states</h3>
+{{#>_docs-example}}
+{{>_pagination model.pagination disabled="true" active="1"}}
+{{/_docs-example}}

src/components/pagination/json/pagination-states.json

@@ -0,0 +1,23 @@
+{
+  "list": [
+    {
+      "text": "Information",
+      "color": "info"
+    },
+    {
+      "text": "Success",
+      "color": "success"
+    },
+    {
+      "text": "Warning",
+      "color": "warning"
+    },
+    {
+      "text": "Error",
+      "color": "error"
+    },
+    {
+      "text": "Neutral"
+    }
+  ]
+}

src/components/pagination/json/pagination.json

@@ -0,0 +1,3 @@
+{
+  "list": [1, 2, 3, 4, 5, 6, 7, 8]
+}

src/core/colour/json/palettes.json

@@ -20,10 +20,10 @@
     "purple-02": "#8055f1",
     "purple-03": "#cebfff",
     "purple-04": "#e6e1fd",
-    "pink-01": "#65004d",
-    "pink-02": "#d912ae",
-    "pink-03": "#f4b5e6",
-    "pink-04": "#fddef2",
+    "fuschia-01": "#65004d",
+    "fuschia-02": "#d912ae",
+    "fuschia-03": "#f4b5e6",
+    "fuschia-04": "#fddef2",
     "red-01": "#630019",
     "red-02": "#d7153a",
     "red-03": "#ffb8c1",

src/docs/content/design/theming.hbs

@@ -46,8 +46,8 @@ meta-index: true
   <div style="background: var(--nsw-palette-purple-01);">
     Purple 01<br/><br/>#441170
   </div>
-  <div style="background: var(--nsw-palette-pink-01);">
-    Pink 01<br/><br/>#65004D
+  <div style="background: var(--nsw-palette-fuschia-01);">
+    Fuschia 01<br/><br/>#65004D
   </div>
   <div style="background: var(--nsw-palette-red-01);">
     Red 01<br/><br/>#630019
@@ -81,8 +81,8 @@ meta-index: true
   <div style="background:var(--nsw-palette-purple-02);">
     Purple 02<br/><br/>#8055F1
   </div>
-  <div style="background:var(--nsw-palette-pink-02);">
-    Pink 02<br/><br/>#D912AE
+  <div style="background:var(--nsw-palette-fuschia-02);">
+    Fuschia 02<br/><br/>#D912AE
   </div>
   <div style="background:var(--nsw-palette-red-02);">
     Red 02<br/><br/>#D7153A
@@ -116,8 +116,8 @@ meta-index: true
   <div class="nsw-text--dark" style="background:var(--nsw-palette-purple-03);">
     Purple 03<br/><br/>#CEBFFF
   </div>
-  <div class="nsw-text--dark" style="background:var(--nsw-palette-pink-03);">
-    Pink 03<br/><br/>#F4B5E6
+  <div class="nsw-text--dark" style="background:var(--nsw-palette-fuschia-03);">
+    Fuschia 03<br/><br/>#F4B5E6
   </div>
   <div class="nsw-text--dark" style="background:var(--nsw-palette-red-03);">
     Red 03<br/><br/>#FFB8C1
@@ -151,8 +151,8 @@ meta-index: true
   <div class="nsw-text--dark" style="background:var(--nsw-palette-purple-04);">
     Purple 04<br/><br/>#E6E1FD
   </div>
-  <div class="nsw-text--dark" style="background:var(--nsw-palette-pink-04);">
-    Pink 04<br/><br/>#FDDEF2
+  <div class="nsw-text--dark" style="background:var(--nsw-palette-fuschia-04);">
+    Fuschia 04<br/><br/>#FDDEF2
   </div>
   <div class="nsw-text--dark" style="background:var(--nsw-palette-red-04);">
     Red 04<br/><br/>#FFE6EA

src/docs/content/develop/theming.hbs

@@ -120,8 +120,8 @@ meta-index: true
 {{#>_docs-example hidden="true" open="true" code="language-css"}}
 :root {
   --nsw-brand-dark: var(--nsw-palette-purple-01);
-  --nsw-brand-light: var(--nsw-palette-pink-04);
-  --nsw-brand-accent: var(--nsw-palette-pink-02);
+  --nsw-brand-light: var(--nsw-palette-fuschia-04);
+  --nsw-brand-accent: var(--nsw-palette-fuschia-02);
   --nsw-brand-supplementary: var(--nsw-palette-purple-02);
 }
 {{/_docs-example}}

src/docs/content/methods/data-visualisation.hbs

@@ -111,7 +111,7 @@ Chart.defaults.backgroundColor = [
   nswStyles.getPropertyValue('--nsw-palette-green-02'),
   nswStyles.getPropertyValue('--nsw-palette-purple-02'),
   nswStyles.getPropertyValue('--nsw-palette-orange-02'),
-  nswStyles.getPropertyValue('--nsw-palette-pink-02'),
+  nswStyles.getPropertyValue('--nsw-palette-fuschia-02'),
 ];
 Chart.defaults.font.family = "'Public Sans'";
 Chart.defaults.font.size = 14;
@@ -166,7 +166,7 @@ Chart.defaults.backgroundColor = [
   nswStyles.getPropertyValue('--nsw-palette-green-02'),
   nswStyles.getPropertyValue('--nsw-palette-purple-02'),
   nswStyles.getPropertyValue('--nsw-palette-orange-02'),
-  nswStyles.getPropertyValue('--nsw-palette-pink-02'),
+  nswStyles.getPropertyValue('--nsw-palette-fuschia-02'),
 ];
 Chart.defaults.font.family = "'Public Sans'";
 Chart.defaults.font.size = 14;

src/global/scss/settings/_palette.scss

@@ -49,15 +49,15 @@
   --nsw-palette-purple-03-rgb: 206, 191, 255;
   --nsw-palette-purple-04-rgb: 230, 225, 253;
 
-  --nsw-palette-pink-01: #65004d;
-  --nsw-palette-pink-02: #d912ae;
-  --nsw-palette-pink-03: #f4b5e6;
-  --nsw-palette-pink-04: #fddef2;
-
-  --nsw-palette-pink-01-rgb: 101, 0, 77;
-  --nsw-palette-pink-02-rgb: 217, 18, 174;
-  --nsw-palette-pink-03-rgb: 244, 181, 230;
-  --nsw-palette-pink-04-rgb: 253, 222, 242;
+  --nsw-palette-fuschia-01: #65004d;
+  --nsw-palette-fuschia-02: #d912ae;
+  --nsw-palette-fuschia-03: #f4b5e6;
+  --nsw-palette-fuschia-04: #fddef2;
+
+  --nsw-palette-fuschia-01-rgb: 101, 0, 77;
+  --nsw-palette-fuschia-02-rgb: 217, 18, 174;
+  --nsw-palette-fuschia-03-rgb: 244, 181, 230;
+  --nsw-palette-fuschia-04-rgb: 253, 222, 242;
 
   --nsw-palette-red-01: #630019;
   --nsw-palette-red-02: #d7153a;

src/templates/theming/full-page.hbs

@@ -16,8 +16,8 @@ model:
 <style type="text/css">
   :root {
     --nsw-brand-dark: var(--nsw-palette-purple-01);
-    --nsw-brand-light: var(--nsw-palette-pink-04);
-    --nsw-brand-accent: var(--nsw-palette-pink-02);
+    --nsw-brand-light: var(--nsw-palette-fuschia-04);
+    --nsw-brand-accent: var(--nsw-palette-fuschia-02);
     --nsw-brand-supplementary: var(--nsw-palette-purple-02);
   }
 </style>
@@ -43,8 +43,8 @@ model:
           <p>Full brand colour palette updated to new theme and applied to full page/site. This includes global elements (header, navigation, footer etc) but excludes masthead.</p>
           <ul>
             <li>Brand dark: Purple 01</li>
-            <li>Brand light: Pink 04</li>
-            <li>Brand accent: Pink 02</li>
+            <li>Brand light: Fuschia 04</li>
+            <li>Brand accent: Fuschia 02</li>
             <li>Brand supplementary: Purple 02</li>
           </ul>
         </div>