init

Author: julczka

package-lock.json

@@ -0,0 +1,43 @@
+# uui-pagination
+
+![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-pagination?logoColor=%231B264F)
+
+Umbraco style pagination component.
+
+## 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></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);

packages/uui-pagination/lib/index.ts

@@ -0,0 +1,18 @@
+import { LitElement, html, css } from 'lit';
+
+/**
+ * @element uui-pagination
+ */
+export class UUIPaginationElement extends LitElement {
+  static styles = [
+    css`
+      :host {
+        /* Styles goes here */
+      }
+    `,
+  ];
+
+  render() {
+    return html` Markup goes here `;
+  }
+}

packages/uui-pagination/lib/uui-pagination.element.ts

@@ -0,0 +1,18 @@
+import { Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+import '@umbraco-ui/uui-pagination/lib/index';
+
+export default {
+  id: 'uui-pagination',
+  title: 'Pagination',
+  component: 'uui-pagination',
+  parameters: {
+    docs: {
+      source: {
+        code: `<uui-pagination></uui-pagination>`,
+      },
+    },
+  },
+};
+
+export const Overview: Story = () => html`<uui-pagination></uui-pagination>`;

packages/uui-pagination/lib/uui-pagination.story.ts

@@ -0,0 +1,15 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import { UUIPaginationElement } from './uui-pagination.element';
+import '.';
+
+describe('UUIPaginationElement', () => {
+  let element: UUIPaginationElement;
+
+  beforeEach(async () => {
+    element = await fixture(html` <uui-pagination></uui-pagination> `);
+  });
+
+  it('passes the a11y audit', async () => {
+    await expect(element).shadowDom.to.be.accessible();
+  });
+});

packages/uui-pagination/lib/uui-pagination.test.ts

@@ -0,0 +1,43 @@
+{
+  "name": "@umbraco-ui/uui-pagination",
+  "version": "0.0.0",
+  "license": "MIT",
+  "keywords": [
+    "Umbraco",
+    "Custom elements",
+    "Web components",
+    "UI",
+    "Lit",
+    "Pagination"
+  ],
+  "description": "Umbraco UI pagination component",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umbraco/Umbraco.UI.git",
+    "directory": "packages/uui-pagination"
+  },
+  "bugs": {
+    "url": "https://github.com/umbraco/Umbraco.UI/issues"
+  },
+  "main": "./dist/uui-pagination.min.js",
+  "module": "./lib/index.js",
+  "customElements": "custom-elements.json",
+  "files": [
+    "dist",
+    "lib/**/*.d.ts",
+    "lib/**/*.js",
+    "custom-elements.json"
+  ],
+  "dependencies": {
+    "@umbraco-ui/uui-base": "0.0.13"
+  },
+  "scripts": {
+    "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
+    "clean": "tsc --build --clean && rimraf dist lib/*.js lib/**/*.js custom-elements.json",
+    "analyze": "web-component-analyzer **/*.element.ts --outFile custom-elements.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://uui.umbraco.com/?path=/story/uui-pagination"
+}

packages/uui-pagination/package.json

@@ -0,0 +1,6 @@
+import { UUIProdConfig } from '../rollup-package.config';
+
+export default UUIProdConfig({
+  entryPoints: ['index', 'uui-pagination.element'],
+  bundle: 'index',
+});

packages/uui-pagination/rollup.config.js

@@ -0,0 +1,17 @@
+// Don't edit this file directly. It is generated by /scripts/generate-ts-config.js
+
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./lib",
+    "rootDir": "./lib",
+    "composite": true
+  },
+  "include": ["./**/*.ts"],
+  "exclude": ["./**/*.test.ts", "./**/*.story.ts"],
+  "references": [
+    {
+      "path": "../uui-base"
+    }
+  ]
+}