Merge pull request #71 from umbraco/v0/feature-uui-pagination

Feature: uui-pagination

Author: madsrasmussen

README.md

@@ -41,6 +41,7 @@ If you want to develop a component or contribute to the repository go to ["Get s
 | [`uui` bundle package](https://github.com/umbraco/Umbraco.UI/tree/dev/packages/uui)                        | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui)                             |
 | [`<uui-caret>`](https://github.com/umbraco/Umbraco.UI/tree/dev/packages/uui-caret)                         | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-caret?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-caret)                 |
 | [`<uui-menu-item>`](https://github.com/umbraco/Umbraco.UI/tree/dev/packages/uui-menu-item)                 | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-menu-item?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-menu-item)         |
+| [`<uui-pagination>`](https://github.com/umbraco/Umbraco.UI/tree/dev/packages/uui-pagination)               | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-pagination?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-pagination)       |
 
 ## Get started
 

package-lock.json

@@ -3,110 +3,138 @@
 /* Color Properties */
 
 :root {
-
-  $deep-saffron:#F79C37;
+  $deep-saffron: #f79c37;
   --uui-color-deep-saffron: $deep-saffron;
   --uui-color-deep-saffron-light: color($deep-saffron lightness(+ 10%));
   --uui-color-deep-saffron-dark: color($deep-saffron blackness(+ 10%));
-  --uui-color-deep-saffron-dimmed: color($deep-saffron saturation(- 74%) blackness(+ 1%));
+  --uui-color-deep-saffron-dimmed: color(
+    $deep-saffron saturation(- 74%) blackness(+ 1%)
+  );
 
-  $sunglow:#FAD634;
+  $sunglow: #fad634;
   --uui-color-sunglow: $sunglow;
   --uui-color-sunglow-light: color($sunglow lightness(+ 10%));
   --uui-color-sunglow-dark: color($sunglow blackness(+ 10%));
   --uui-color-sunglow-dimmed: color($sunglow saturation(- 78%) blackness(+ 1%));
 
-  $spanish-pink:#F5C1BC;
+  $spanish-pink: #f5c1bc;
   --uui-color-spanish-pink: $spanish-pink;
   --uui-color-spanish-pink-light: color($spanish-pink lightness(+ 5%));
   --uui-color-spanish-pink-dark: color($spanish-pink blackness(+ 5%));
-  --uui-color-spanish-pink-dimmed: color($spanish-pink saturation(- 60%) blackness(+ 1%));
+  --uui-color-spanish-pink-dimmed: color(
+    $spanish-pink saturation(- 60%) blackness(+ 1%)
+  );
 
   $gunmetal: #162335;
   --uui-color-gunmetal: $gunmetal;
   --uui-color-gunmetal-light: color($gunmetal lightness(+ 8%));
   --uui-color-gunmetal-dark: color($gunmetal blackness(+ 8%));
-  --uui-color-gunmetal-dimmed: color($gunmetal saturation(- 50%) lightness(+ 6%));
+  --uui-color-gunmetal-dimmed: color(
+    $gunmetal saturation(- 50%) lightness(+ 6%)
+  );
 
-  $space-cadet: #1B264F;
+  $space-cadet: #1b264f;
   --uui-color-space-cadet: $space-cadet;
   --uui-color-space-cadet-light: color($space-cadet lightness(+ 8%));
   --uui-color-space-cadet-dark: color($space-cadet blackness(+ 8%));
-  --uui-color-space-cadet-dimmed: color($space-cadet saturation(- 30%) lightness(+ 30%));
+  --uui-color-space-cadet-dimmed: color(
+    $space-cadet saturation(- 30%) lightness(+ 30%)
+  );
 
-  $violet-blue: #3544B1;
+  $violet-blue: #3544b1;
   --uui-color-violet-blue: $violet-blue;
   --uui-color-violet-blue-light: color($violet-blue lightness(+ 8%));
   --uui-color-violet-blue-dark: color($violet-blue blackness(+ 8%));
-  --uui-color-violet-blue-dimmed: color($violet-blue saturation(- 30%) blackness(+ 22%));
+  --uui-color-violet-blue-dimmed: color(
+    $violet-blue saturation(- 30%) blackness(+ 22%)
+  );
 
-  $matisse: #2152A3;
+  $matisse: #2152a3;
   --uui-color-matisse: $matisse;
   --uui-color-matisse-light: color($matisse lightness(+ 8%));
   --uui-color-matisse-dark: color($matisse blackness(+ 8%));
-  --uui-color-matisse-dimmed: color($matisse saturation(- 30%) blackness(+ 22%));
+  --uui-color-matisse-dimmed: color(
+    $matisse saturation(- 30%) blackness(+ 22%)
+  );
 
-  $malibu: #3879FF;
+  $malibu: #3879ff;
   --uui-color-malibu: $malibu;
   --uui-color-malibu-light: color($malibu lightness(+ 8%));
   --uui-color-malibu-dark: color($malibu blackness(+ 8%));
   --uui-color-malibu-dimmed: color($malibu saturation(- 60%) blackness(+ 26%));
 
-  $outline-blue: #3879FF;
+  $outline-blue: #3879ff;
   --uui-color-outline-blue: $outline-blue;
   --uui-color-outline-blue-light: color($outline-blue lightness(+ 8%));
   --uui-color-outline-blue-dark: color($outline-blue blackness(+ 8%));
-  --uui-color-outline-blue-dimmed: color($outline-blue saturation(- 60%) blackness(+ 26%));
+  --uui-color-outline-blue-dimmed: color(
+    $outline-blue saturation(- 60%) blackness(+ 26%)
+  );
 
-  $maroon-flush: #D42054;
+  $maroon-flush: #d42054;
   --uui-color-maroon-flush: $maroon-flush;
   --uui-color-maroon-flush-light: color($maroon-flush lightness(+ 8%));
   --uui-color-maroon-flush-dark: color($maroon-flush blackness(+ 8%));
-  --uui-color-maroon-flush-dimmed: color($maroon-flush saturation(- 62%) blackness(+ 2%));
+  --uui-color-maroon-flush-dimmed: color(
+    $maroon-flush saturation(- 62%) blackness(+ 2%)
+  );
 
-  $jungle-green: #25aa60;/* A11Y acceptable color. Originally #2BC37C*/
+  $jungle-green: #25aa60; /* A11Y acceptable color. Originally #2BC37C*/
   --uui-color-jungle-green: $jungle-green;
   --uui-color-jungle-green-light: color($jungle-green lightness(+ 6%));
   --uui-color-jungle-green-dark: color($jungle-green blackness(+ 6%));
-  --uui-color-jungle-green-dimmed: color($jungle-green saturation(- 50%) blackness(+ 1%));
+  --uui-color-jungle-green-dimmed: color(
+    $jungle-green saturation(- 50%) blackness(+ 1%)
+  );
 
   /*TODO: color needs proper name*/
   $dark-green: #0b8152;
   --uui-color-dark-green: $dark-green;
   --uui-color-dark-green-light: color($dark-green lightness(+ 6%));
   --uui-color-dark-green-dark: color($dark-green blackness(+ 6%));
-  --uui-color-dark-green-dimmed: color($dark-green saturation(- 50%) blackness(+ 1%));
+  --uui-color-dark-green-dimmed: color(
+    $dark-green saturation(- 50%) blackness(+ 1%)
+  );
 
   $cocoa-black: #191715;
   --uui-color-cocoa-black: $cocoa-black;
   --uui-color-cocoa-black-light: color($cocoa-black lightness(+ 5%));
   --uui-color-cocoa-black-dark: color($cocoa-black blackness(+ 5%));
-  --uui-color-cocoa-black-dimmed: color($cocoa-black saturation(- 20%) lightness(+ 10%));
+  --uui-color-cocoa-black-dimmed: color(
+    $cocoa-black saturation(- 20%) lightness(+ 10%)
+  );
 
-  $dune-black: #2E2B29;
+  $dune-black: #2e2b29;
   --uui-color-dune-black: $dune-black;
   --uui-color-dune-black-light: color($dune-black lightness(+ 4%));
   --uui-color-dune-black-dark: color($dune-black blackness(+ 10%));
-  --uui-color-dune-black-dimmed: color($dune-black saturation(- 30%) lightness(+ 8%));
+  --uui-color-dune-black-dimmed: color(
+    $dune-black saturation(- 30%) lightness(+ 8%)
+  );
 
-  $cocoa-brown: #332A24;
+  $cocoa-brown: #332a24;
   --uui-color-cocoa-brown: $cocoa-brown;
   --uui-color-cocoa-brown-light: color($cocoa-brown lightness(+ 5%));
   --uui-color-cocoa-brown-dark: color($cocoa-brown blackness(+ 5%));
-  --uui-color-cocoa-brown-dimmed: color($cocoa-brown saturation(- 40%) blackness(+ 2%));
+  --uui-color-cocoa-brown-dimmed: color(
+    $cocoa-brown saturation(- 40%) blackness(+ 2%)
+  );
 
-  $chamoisee: #9D8057;
+  $chamoisee: #9d8057;
   --uui-color-chamoisee: $chamoisee;
   --uui-color-chamoisee-light: color($chamoisee lightness(+ 8%));
   --uui-color-chamoisee-dark: color($chamoisee blackness(+ 8%));
-  --uui-color-chamoisee-dimmed: color($chamoisee saturation(- 18%) blackness(+ 8%));
-
+  --uui-color-chamoisee-dimmed: color(
+    $chamoisee saturation(- 18%) blackness(+ 8%)
+  );
 
-  $timberwolf: #E2DAD4;
+  $timberwolf: #e2dad4;
   --uui-color-timberwolf: $timberwolf;
   --uui-color-timberwolf-light: color($timberwolf lightness(+ 8%));
   --uui-color-timberwolf-dark: color($timberwolf blackness(+ 8%));
-  --uui-color-timberwolf-dimmed: color($timberwolf saturation(- 82%) blackness(+ 6%));
+  --uui-color-timberwolf-dimmed: color(
+    $timberwolf saturation(- 82%) blackness(+ 6%)
+  );
 
   $gravel: #d8d7d9;
   --uui-color-gravel: $gravel;
@@ -120,7 +148,7 @@
   --uui-color-sand-dark: color($sand blackness(+ 8%));
   --uui-color-sand-dimmed: color($sand saturation(- 82%) blackness(+ 6%));
 
-  $white: #FEFEFE;
+  $white: #fefefe;
   --uui-color-white: $white;
   --uui-color-white-light: color($white lightness(+ 2%));
   --uui-color-white-dark: color($white blackness(+ 2%));
@@ -132,22 +160,25 @@
   --uui-color-black-dark: color($black blackness(+ 8%));
   --uui-color-black-dimmed: color($black saturation(- 100%) lightness(+ 12%));
 
-  $grey: #C4C4C4;
+  $grey: #c4c4c4;
   --uui-color-grey: $grey;
   --uui-color-grey-light: color($grey lightness(+ 10%));
   --uui-color-grey-dark: color($grey blackness(+ 10%));
   --uui-color-grey-dimmed: color($grey saturation(- 100%) blackness(+ 4%));
 
-  $dusty-grey: #9B9B9B;
+  $dusty-grey: #9b9b9b;
   --uui-color-dusty-grey: $dusty-grey;
   --uui-color-dusty-grey-light: color($dusty-grey lightness(+ 8%));
   --uui-color-dusty-grey-dark: color($dusty-grey blackness(+ 10%));
-  --uui-color-dusty-grey-dimmed: color($dusty-grey saturation(- 100%) lightness(+ 12%));
+  --uui-color-dusty-grey-dimmed: color(
+    $dusty-grey saturation(- 100%) lightness(+ 12%)
+  );
 
-  $mine-grey: #3E3E3E;
+  $mine-grey: #3e3e3e;
   --uui-color-mine-grey: $mine-grey;
   --uui-color-mine-grey-light: color($mine-grey lightness(+ 8%));
   --uui-color-mine-grey-dark: color($mine-grey blackness(+ 10%));
-  --uui-color-mine-grey-dimmed: color($mine-grey saturation(- 100%) lightness(+ 10%));
-
+  --uui-color-mine-grey-dimmed: color(
+    $mine-grey saturation(- 100%) lightness(+ 10%)
+  );
 }

packages/uui-css/lib/custom-properties/colors.css

@@ -0,0 +1,43 @@
+# uui-pagination
+
+![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-pagination?logoColor=%231B264F)
+
+Umbraco style pagination component. By implementing a resizeObserver it changes the number of visible buttons to fit the width of the container it sits in. Check this out in the [Storybook](https://uui.umbraco.com/?path=/story/uui-pagination--aaa-overview). Uses `<uui-button></uui-button>` and `<uui-button-group></uui-button-group>`.
+
+## Installation
+
+### ES imports
+
+```zsh
+npm i @umbraco-ui/uui-pagination
+```
+
+Import the registration of `<uui-pagination>` via:
+
+```javascript
+import '@umbraco-ui/uui-pagination/lib';
+```
+
+When looking to leverage the `UUIPaginationElement` base class as a type and/or for extension purposes, do so via:
+
+```javascript
+import { UUIPaginationElement } from '@umbraco-ui/uui-pagination/lib/uui-pagination.element';
+```
+
+### CDN
+
+The component is available via CDN. This means it can be added to your application without the need of any bundler configuration. Here is how to use it with jsDelivr.
+
+```html
+<!-- Latest Version -->
+<script src="https://cdn.jsdelivr.net/npm/@umbraco-ui/uui-pagination@latest/dist/uui-pagination.min.js"></script>
+
+<!-- Specific version -->
+<script src="https://cdn.jsdelivr.net/npm/@umbraco-ui/[email protected]/dist/uui-pagination.min.js"></script>
+```
+
+## Usage
+
+```html
+<uui-pagination total="100"></uui-pagination>
+```

packages/uui-pagination/README.md

@@ -0,0 +1,4 @@
+import { UUIPaginationElement } from './uui-pagination.element';
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
+
+defineElement('uui-pagination', UUIPaginationElement as any);