feat: EC pagination - INNO-1355 (#74)

src/ec/packages/ec-component-pagination/.npmignore

@@ -0,0 +1,5 @@
+__snapshots__
+docs
+*.story.js
+*.test.js
+**/*.md

src/ec/packages/ec-component-pagination/README.md

@@ -0,0 +1,83 @@
+# ECL Twig - EC Pagination component
+
+npm package: `@ecl-twig/ec-component-pagination`
+
+```shell
+npm install --save @ecl-twig/ec-component-pagination
+```
+
+## Parameters
+
+- "label" (string) (default: ''): for screen reader
+- "items" (array) (default: []):
+  - "type" (string) (default: ''): could be 'previous', 'current' or 'next'
+  - "label" (string) (default: ''): label used when the item is not a link
+  - "aria_label" (string) (default: '')
+  - "link" (object) (default: ''): object of type Link
+- "extra_classes" (optional) (string) (default: '')
+- "extra_attributes" (optional) (array) (default: [])
+  - "name" (string) Attribute name, eg. 'data-test'
+  - "value" (string) Attribute value, eg: 'data-test-1'
+
+## Example:
+
+<!-- prettier-ignore -->
+```twig
+{% include 'path/to/pagination.html.twig' with { 
+  label: 'Pagination', 
+  items: [ 
+    { 
+      type: 'previous', 
+      aria-label: 'Go to previous page', 
+      link: { 
+        link: { 
+          path: '/example#previous', 
+          label: 'Previous', 
+          icon_position: 'before', 
+        } 
+        icon: { 
+          path: 'path/to/icons.svg', 
+          type: 'ui', 
+          name: 'corner-arrow', 
+          size: 'xs', 
+          transform: 'rotate-270', 
+        }, 
+      }, 
+    }, 
+    { 
+      aria-label: 'Go to page 24', 
+      link: { 
+        link: { 
+          path: '/example#page-24', 
+          label: '24', 
+        }, 
+      }, 
+    }, 
+    ... 
+    { 
+      type: 'current', 
+      aria-label: 'Page 26', 
+      label: '26', 
+    }, 
+    ... 
+    { 
+      type: 'next', 
+      aria-label: 'Go to next page', 
+      link: { 
+        link: { 
+          path: '/example#next', 
+          label: 'Next', 
+          icon_position: 'after', 
+        } 
+        icon: { 
+          path: 'path/to/icons.svg', 
+          type: 'ui', 
+          name: 'corner-arrow', 
+          size: 'xs', 
+          transform: 'rotate-90', 
+        }, 
+      }, 
+    }, 
+  ], 
+} %}
+```