WIP: pagination docs

content/components/pagination/accessibility/a11y-colorblind/index.yml

@@ -0,0 +1,5 @@
+layout: example/page
+examples:
+  - template: ../example-code.md
+filter: deuteranopia
+alignment: inline

content/components/pagination/accessibility/a11y-grayscale/index.yml

@@ -0,0 +1,5 @@
+layout: example/page
+examples:
+  - template: ../example-code.md
+filter: grayscale
+alignment: inline

content/components/pagination/accessibility/a11y-keyboard/index.yml

@@ -0,0 +1,5 @@
+layout: example/page
+examples:
+  - template: ../example-code.md
+tabbing: true
+alignment: inline

content/components/pagination/accessibility/colorblind.md

@@ -0,0 +1,8 @@
+---
+layout: component/code-demo
+iframe: a11y-colorblind
+iframeFullwidth: true
+---
+## Colour impairment
+
+How the pagination is viewed with various colour blindnesses

content/components/pagination/accessibility/example-code.md

@@ -0,0 +1,35 @@
+<div>
+    <nav role="navigation" aria-label="Pagination Navigation" class="au-pagination ">
+            <ul class=" au-link-list au-link-list--inline">
+              <li class="au-pagination-control disabled ">
+                <a href="#" class="au-pagination-link au-pagination-controls-link disabled js-focus-me " aria-label="Go to previous page" text="Previous" aria-disabled="true">Previous
+                </a>
+              </li>
+              <li class="au-pagination-item active">
+                <a href="#" class="au-pagination-link active js-focus-me" id="1" aria-label="Page 1" aria-current="true">1
+                </a>
+              </li>
+              <li class="au-pagination-item ">
+                <a href="#" class="au-pagination-link js-focus-me" id="2" aria-label="Page 2" aria-current="false">2
+                </a>
+              </li>
+              <li class="au-pagination-item ">
+                <a href="#" class="au-pagination-link js-focus-me" id="3" aria-label="Page 3" aria-current="false">3
+                </a>
+              </li>
+              <li class="au-pagination-item">
+              <a class="au-pagination-link js-focus-me" href="#" aria-label="">
+              <span class="au-pagination-link--quick-jumper " aria-hidden="true">...</span>
+              </a>
+              </li>
+              <li class="au-pagination-item ">
+              <a href="#" class="au-pagination-link js-focus-me" id="10" aria-label="Page 10" aria-current="false">10
+              </a>
+              </li>
+              <li class="au-pagination-control">
+              <a href="#" class="au-pagination-link au-pagination-controls-link js-focus-me" aria-label="Go to next page" text="Next">Next
+              </a>
+              </li>
+            </ul>
+          </nav>
+      </div>

content/components/pagination/accessibility/grayscale.md

@@ -0,0 +1,8 @@
+---
+layout: component/code-demo
+iframe: a11y-grayscale
+iframeFullwidth: true
+---
+## Grayscale
+
+How the pagination is viewed with total colour blindness.

content/components/pagination/accessibility/index.yml

@@ -0,0 +1,21 @@
+layout: component/page
+pagetitle: Pagination accessibility
+
+header:
+  - /_shared/header.md
+
+component_nav:
+  - /components/_tabs.md
+
+sidebar:
+  - /components/search.md
+  - /components/sidebar.md
+
+main:
+  - colorblind.md
+  - grayscale.md
+  - keyboard.md
+  - screenreader.md
+
+footer:
+  - /_shared/footer.md

content/components/pagination/accessibility/keyboard.md

@@ -0,0 +1,8 @@
+---
+layout: component/code-demo
+iframe: a11y-keyboard
+iframeFullwidth: true
+---
+## Keyboard accessibility
+
+How keyboard navigation works with page alerts.

content/components/pagination/accessibility/screenreader.md

@@ -0,0 +1,15 @@
+---
+layout: component/screenreader
+heading: Screen readers
+speak: |
+
+  [Heading level 3] Alert title.
+
+  Alert Content [link] link.
+
+---
+
+
+How the page alerts demo is described by assistive technology.
+
+As read with macOS High Sierra VoiceOver.

content/components/pagination/code/index.yml

@@ -0,0 +1,20 @@
+layout: component/page
+pagetitle: TODO rationale
+
+header:
+  - /_shared/header.md
+
+component_nav:
+  - /components/_tabs.md
+
+sidebar:
+  - /components/search.md
+  - /components/sidebar.md
+
+main:
+  - react-usage.md
+  - react-props.md
+  - react-exports.md
+
+footer:
+  - /_shared/footer.md

content/components/pagination/code/react-exports.md

@@ -0,0 +1,21 @@
+---
+layout: section
+---
+
+### Exports
+
+| Name       | Type    | Description
+|------------|---------|-----------------------------------------------------------------------------
+| `AUpagination` | default | The page alerts component
+
+### [md]node_modules import
+
+```jsx
+import AUpagination from '@gov.au/pagination';
+```
+
+### [md]pancake import
+
+```jsx
+import AUpagination from './pagination';
+```

content/components/pagination/code/react-props.md

@@ -0,0 +1,15 @@
+---
+layout: section
+---
+
+### Props
+
+| Prop name      | Type    | Description
+|----------------|--------------------------------------------------------------------------------------- | --- |
+| left           | boolean | Align pagination to the left
+| right          | boolean | Align pagination to the right
+| center         | boolean | Align pagination to the center
+| totalResults   | number  | Total amount of items in Pagination list
+| recordsPerPage | number  | Number of results that display per page
+
+All other props are spread into the component

content/components/pagination/code/react-usage.md

@@ -0,0 +1,12 @@
+---
+layout: section
+---
+
+## React Usage
+
+```jsx
+import AUpagination from '@gov.au/pagination';
+
+<AUPagination totalResults={ 100 } recordsPerPage={ 10 } center onChange={ this.onChanged } />	
+
+```

content/components/pagination/default.md

@@ -1,3 +1,55 @@
-We're currently discussing whether or not our community will benefit from a
-navigation component. Join the conversation in our
-[community forum](https://community.digital.gov.au/t/pagination/118).
+---
+layout: component/code-demo
+iframe: examples/example-default
+iframeFullwidth: true
+code:
+  - HTML: |
+
+      <div>
+        <nav role="navigation" aria-label="Pagination Navigation" class="au-pagination ">
+            <ul class=" au-link-list au-link-list--inline">
+                <li class="au-pagination-control disabled ">
+                  <a href="#" class="au-pagination-link au-pagination-controls-link disabled " aria-label="Go to previous page" text="Previous" aria-disabled="true">Previous
+                  </a>
+                </li>
+                <li class="au-pagination-item active">
+                  <a href="#" class="au-pagination-link active" id="1" aria-label="Page 1" aria-current="true">1
+                  </a>
+                </li>
+                <li class="au-pagination-item ">
+                  <a href="#" class="au-pagination-link " id="2" aria-label="Page 2" aria-current="false">2
+                  </a>
+                </li>
+                <li class="au-pagination-item ">
+                  <a href="#" class="au-pagination-link " id="3" aria-label="Page 3" aria-current="false">3
+                  </a>
+                </li>
+                <li class="au-pagination-item">
+                <a class="au-pagination-link " href="#" aria-label="">
+                <span class="au-pagination-link--quick-jumper " aria-hidden="true">...</span>
+                </a>
+                </li>
+                <li class="au-pagination-item ">
+                <a href="#" class="au-pagination-link " id="10" aria-label="Page 10" aria-current="false">10
+                </a>
+                </li>
+                <li class="au-pagination-control">
+                <a href="#" class="au-pagination-link au-pagination-controls-link" aria-label="Go to next page" text="Next">Next
+                </a>
+                </li>
+            </ul>
+          </nav>
+      </div>
+
+
+  - React: |
+
+      import AUpagination from '@gov.au/pagination';
+
+      <AUPagination totalResults={ 100 } recordsPerPage={ 10 } center onChange={ this.onChanged } />	
+
+
+---
+## Default
+
+Pagination allows users to navigate through multiple pages of content. The first and last pagaination items are always visible to the user. Users can either select an individual page from the pagination list, or use the `Previous` and `Next` keys to navigate through the pagination items sequentially . The ellipsis can also be used to display ether the next 5 pages or the previous 5 pages in the list. 

content/components/pagination/discussion/community-intro.md

@@ -0,0 +1,8 @@
+---
+layout: component/discussion-callout
+btntext: Community
+btnurl: https://community.digital.gov.au/t/
+btntype: secondary
+---
+
+Our components are a collaborative effort, we welcome constructive conversation and contribution.

content/components/pagination/discussion/github-intro.md

@@ -0,0 +1,8 @@
+---
+layout: component/discussion-callout
+btntext: GitHub
+btnurl: https://github.com/govau/design-system-components/tree/master/packages/
+btntype: secondary
+---
+
+ Found an issue? Interested in contributing code? We'd love your feedback over at our GitHub repository.

content/components/pagination/discussion/index.yml

@@ -0,0 +1,19 @@
+layout: component/page
+pagetitle: TODO discussion
+
+header:
+  - /_shared/header.md
+
+component_nav:
+  - /components/_tabs.md
+
+sidebar:
+  - /components/search.md
+  - /components/sidebar.md
+
+main:
+  - community-intro.md
+  - github-intro.md
+
+footer:
+  - /_shared/footer.md

content/components/pagination/examples/example-default/example-code.md

@@ -0,0 +1,35 @@
+  <div>
+    <nav role="navigation" aria-label="Pagination Navigation" class="au-pagination ">
+            <ul class=" au-link-list au-link-list--inline">
+              <li class="au-pagination-control disabled ">
+                <a href="#" class="au-pagination-link au-pagination-controls-link disabled " aria-label="Go to previous page" text="Previous" aria-disabled="true">Previous
+                </a>
+              </li>
+              <li class="au-pagination-item active">
+                <a href="#" class="au-pagination-link active" id="1" aria-label="Page 1" aria-current="true">1
+                </a>
+              </li>
+              <li class="au-pagination-item ">
+                <a href="#" class="au-pagination-link " id="2" aria-label="Page 2" aria-current="false">2
+                </a>
+              </li>
+              <li class="au-pagination-item ">
+                <a href="#" class="au-pagination-link " id="3" aria-label="Page 3" aria-current="false">3
+                </a>
+              </li>
+              <li class="au-pagination-item">
+              <a class="au-pagination-link " href="#" aria-label="">
+              <span class="au-pagination-link--quick-jumper " aria-hidden="true">...</span>
+              </a>
+              </li>
+              <li class="au-pagination-item ">
+              <a href="#" class="au-pagination-link " id="10" aria-label="Page 10" aria-current="false">10
+              </a>
+              </li>
+              <li class="au-pagination-control">
+              <a href="#" class="au-pagination-link au-pagination-controls-link" aria-label="Go to next page" text="Next">Next
+              </a>
+              </li>
+            </ul>
+          </nav>
+      </div>

content/components/pagination/examples/example-default/index.yml

@@ -0,0 +1,4 @@
+layout: example/page
+examples:
+  - template: example-code.md
+

content/components/pagination/index.yml

@@ -4,6 +4,9 @@ pagetitle: Pagination overview
 header:
   - /_shared/header.md
 
+component_nav:
+  - /components/_tabs.md
+
 sidebar:
   - /components/search.md
   - /components/sidebar.md

content/components/pagination/live/example-default/example-code.md

@@ -0,0 +1,35 @@
+  <div>
+     <nav role="navigation" aria-label="Pagination Navigation" class="au-pagination ">
+            <ul class=" au-link-list au-link-list--inline">
+              <li class="au-pagination-control disabled ">
+                <a href="#" class="au-pagination-link au-pagination-controls-link disabled " aria-label="Go to previous page" text="Previous" aria-disabled="true">Previous
+                </a>
+              </li>
+              <li class="au-pagination-item active">
+                <a href="#" class="au-pagination-link active" id="1" aria-label="Page 1" aria-current="true">1
+                </a>
+              </li>
+              <li class="au-pagination-item ">
+                <a href="#" class="au-pagination-link " id="2" aria-label="Page 2" aria-current="false">2
+                </a>
+              </li>
+              <li class="au-pagination-item ">
+                <a href="#" class="au-pagination-link " id="3" aria-label="Page 3" aria-current="false">3
+                </a>
+              </li>
+              <li class="au-pagination-item">
+              <a class="au-pagination-link " href="#" aria-label="">
+              <span class="au-pagination-link--quick-jumper " aria-hidden="true">...</span>
+              </a>
+              </li>
+              <li class="au-pagination-item ">
+              <a href="#" class="au-pagination-link " id="10" aria-label="Page 10" aria-current="false">10
+              </a>
+              </li>
+              <li class="au-pagination-control">
+              <a href="#" class="au-pagination-link au-pagination-controls-link" aria-label="Go to next page" text="Next">Next
+              </a>
+              </li>
+            </ul>
+          </nav>
+      </div>

content/components/pagination/live/example-default/index.yml

@@ -0,0 +1,5 @@
+layout: example/page
+examples:
+  - template: example-code.md
+  - template: example-dark.md
+    style: dark

content/components/pagination/live/index.yml

@@ -0,0 +1,5 @@
+layout: example/page
+pagetitle: TODO live demo
+examples:
+  - template: ../accessibility/example-code.md
+livedemo: true

content/components/pagination/rationale/first-last-items.md

@@ -0,0 +1,8 @@
+---
+layout: component/rationale.js
+heading: First and last pagination items always visible
+---
+
+By design the first and last items in the pagination list will always be visible where applicable.
+
+Showing the last item in the pagination list enables the end user to know the limit of the pagination and how many pages of results are present. Showing both the first and last items upfront provides the user with a quick way to navigate to either of these options with needing to use the `Previous` and `Next` keys.