@pictogrammers/components 0.3.1

package/pg/modification/README.md

@@ -0,0 +1,34 @@
+# `<pg-modification>`
+
+The `pg-modification` component takes an array of modifications and displays the values.
+
+```typescript
+import '@pictogrammers/components/pg/modification';
+import PgModification from '@pictogrammers/components/pg/modification';
+```
+
+```html
+<pg-modification></pg-modification>
+```
+
+## Attributes
+
+| Attributes | Tested   | Default | Description |
+| ---------- | -------- | ----------- |
+| modifications | &#x2705; | Set modification array |
+| edit | &#x2705; | `false` | Toggle edit mode |
+
+## Events
+
+| Attributes | Tested   | Description |
+| ---------- | -------- | ----------- |
+| issue      | &#x2705; | Issue number clicked. |
+| edit       | &#x2705; | Edit clicked. |
+
+## CSS Variables
+
+| CSS Variables       | Default   | Description |
+| ------------------- | --------- | ----------- |
+| `--pg-icon-color`  | `#453C4F` | Color       |
+| `--pg-icon-width`  | `1.5rem`  | Width       |
+| `--pg-icon-height` | `1.5rem`  | Height      |

package/pg/modification/__examples__/basic/basic.html

@@ -0,0 +1,8 @@
+<div class="example">
+  <div>
+    <button part="clear">Clear List</button>
+    <button part="single">Single Item</button>
+    <button part="editToggle">Toggle Edit Mode</button>
+  </div>
+  <pg-modification part="modification"></pg-nav>
+</div>

package/pg/modification/__examples__/basic/basic.ts

@@ -0,0 +1,63 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+import { Modification } from 'pg/shared/models/modification';
+import PgModification from '../../modification';
+
+import template from './basic.html';
+import { modifications } from './constants';
+
+@Component({
+  selector: 'x-pg-modification-basic',
+  template
+})
+export default class XPgModificationBasic extends HTMLElement {
+
+  @Part() $modification: PgModification;
+
+  @Part() $clear: HTMLButtonElement;
+  @Part() $single: HTMLButtonElement;
+  @Part() $editToggle: HTMLButtonElement;
+
+  connectedCallback() {
+    this.$modification.modifications = modifications;
+    this.$modification.addEventListener('edit', (e: CustomEvent) => {
+      console.log(e.detail);
+    });
+    this.$editToggle.addEventListener('click', () => {
+      this.$modification.edit = !this.$modification.edit;
+    });
+    this.$clear.addEventListener('click', () => {
+      this.$modification.modifications = [];
+    });
+    var increment = 0;
+    this.$single.addEventListener('click', () => {
+      increment++;
+      const existing = this.$modification.modifications as any;
+      this.$modification.modifications = [...existing, {
+          "id": "3e7a0e1b-b355-11e7-bf5c-94188269ec50" + increment,
+          "modificationId": "B4DEB3A8-A146-4086-9D7B-B67842A9CCB8",
+          "packageId": "38EF63D0-4744-11E4-B3CF-842B2B6CFE1B",
+          "iconNameBefore": null,
+          "iconNameAfter": null,
+          "iconDescriptionBefore": null,
+          "iconDescriptionAfter": null,
+          "iconDataBefore": null,
+          "iconDataAfter": null,
+          "text": "Example `"  + increment + `"`,
+          "date": "2020-10-20T16:07:15Z",
+          "user": {
+              "id": "c4ea5584-07e3-11e4-bf19-842b2b6cfe1b",
+              "name": "Austin Andrews",
+              "github": "templarian",
+              "twitter": "Templarian"
+          },
+          "icon": null,
+          "version": {
+              "major": 1,
+              "minor": 0,
+              "patch": 42
+          },
+          "issue": null
+      }];
+    });
+  }
+}

package/pg/modification/__examples__/basic/constants.ts

@@ -0,0 +1,416 @@
+// - News
+// - IconAliasCreated
+// - IconAliasDeleted
+// - IconCreated
+// - IconDeleted
+// - IconModified
+// - IconRenamed
+// - IconTagCreated
+// - IconTagDeleted
+// - IconDescriptionModified
+// - IconAuthorModified
+// - WebfontPublished
+// - IconDeprecated
+// - IconWorkInProgress
+// - IconLive
+// - IconPublished
+export const modifications: any[] = [
+  {
+    "id": "3e7a0e1b-b355-11e7-bf5c-94188269ec50",
+    "modificationId": "B4DEB3A8-A146-4086-9D7B-B67842A9CCB8",
+    "packageId": "38EF63D0-4744-11E4-B3CF-842B2B6CFE1B",
+    "iconNameBefore": null,
+    "iconNameAfter": null,
+    "iconDescriptionBefore": null,
+    "iconDescriptionAfter": null,
+    "iconDataBefore": null,
+    "iconDataAfter": null,
+    "text": "Release `v1.0.42` with awesome updates.\n\n- Updates\n  - `markdown` Supported",
+    "date": "2020-10-20T16:07:15Z",
+    "user": {
+      "id": "c4ea5584-07e3-11e4-bf19-842b2b6cfe1b",
+      "name": "Austin Andrews",
+      "github": "templarian",
+      "twitter": "Templarian"
+    },
+    "icon": null,
+    "version": {
+      "major": 1,
+      "minor": 0,
+      "patch": 42
+    },
+    "issue": null
+  },
+  {
+    "id": "87fb6a41-b354-11e7-bf5c-94188269ec50",
+    "modificationId": "691c8829-b1e7-11e7-bf5c-94188269ec50",
+    "packageId": "38EF63D0-4744-11E4-B3CF-842B2B6CFE1B",
+    "iconNameBefore": null,
+    "iconNameAfter": null,
+    "iconDescriptionBefore": null,
+    "iconDescriptionAfter": null,
+    "iconDataBefore": null,
+    "iconDataAfter": null,
+    "text": "alias-created",
+    "date": "2017-10-17T16:02:09Z",
+    "user": {
+      "id": "c4ea5584-07e3-11e4-bf19-842b2b6cfe1b",
+      "name": "Austin Andrews",
+      "github": "templarian",
+      "twitter": "Templarian"
+    },
+    "icon": {
+      "id": "AB147073-9D20-4DA1-A108-3856FC1764C1",
+      "name": "icon-name",
+      "data": "M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z",
+      "user": {
+        "id": "79c44334-2d86-11e5-8ac4-842b2b6cfe1b",
+        "name": "First Last",
+        "github": "GitHubUser",
+        "twitter": "TwitterName"
+      }
+    },
+    "issue": 42
+  },
+  {
+    "id": "820b8714-b354-11e7-bf5c-94188269ec50",
+    "modificationId": "f1f70a76-b975-11e9-8ca0-94188269ec50",
+    "packageId": "38EF63D0-4744-11E4-B3CF-842B2B6CFE1B",
+    "iconNameBefore": null,
+    "iconNameAfter": null,
+    "iconDescriptionBefore": null,
+    "iconDescriptionAfter": null,
+    "iconDataBefore": null,
+    "iconDataAfter": null,
+    "text": "alias-deleted",
+    "date": "2017-10-17T16:01:59Z",
+    "user": {
+      "id": "c4ea5584-07e3-11e4-bf19-842b2b6cfe1b",
+      "name": "Austin Andrews",
+      "github": "templarian",
+      "twitter": "Templarian"
+    },
+    "icon": {
+      "id": "AB147073-9D20-4DA1-A108-3856FC1764C1",
+      "name": "icon-name",
+      "data": "M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z",
+      "user": {
+        "id": "79c44334-2d86-11e5-8ac4-842b2b6cfe1b",
+        "name": "First Last",
+        "github": "GitHubUser",
+        "twitter": "TwitterName"
+      }
+    },
+    "issue": 42
+  },
+  {
+    "id": "51b1b2cc-b354-11e7-bf5c-94188269ec50",
+    "modificationId": "AFFE875E-01BC-4A34-9BE3-27625A155B28",
+    "packageId": "38EF63D0-4744-11E4-B3CF-842B2B6CFE1B",
+    "iconNameBefore": null,
+    "iconNameAfter": null,
+    "iconDescriptionBefore": null,
+    "iconDescriptionAfter": null,
+    "iconDataAfter": null,
+    "iconDataBefore": null,
+    "text": null,
+    "date": "2017-10-17T16:00:38Z",
+    "user": {
+      "id": "c4ea5584-07e3-11e4-bf19-842b2b6cfe1b",
+      "name": "Austin Andrews",
+      "github": "templarian",
+      "twitter": "Templarian"
+    },
+    "icon": {
+      "id": "AB147073-9D20-4DA1-A108-3856FC1764C1",
+      "name": "icon-name",
+      "data": "M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z",
+      "user": {
+        "id": "79c44334-2d86-11e5-8ac4-842b2b6cfe1b",
+        "name": "First Last",
+        "github": "GitHubUser",
+        "twitter": "TwitterName"
+      }
+    },
+    "issue": 42
+  },
+  {
+    "id": "46e38abf-b353-11e7-bf5c-94188269ec50",
+    "modificationId": "B1CE1713-A18A-4E9D-9E26-D0B4E44A1FAC",
+    "packageId": "38EF63D0-4744-11E4-B3CF-842B2B6CFE1B",
+    "iconNameBefore": null,
+    "iconNameAfter": null,
+    "iconDescriptionBefore": null,
+    "iconDescriptionAfter": null,
+    "iconDataBefore": null,
+    "iconDataAfter": null,
+    "text": null,
+    "date": "2017-10-17T15:53:11Z",
+    "user": {
+      "id": "c4ea5584-07e3-11e4-bf19-842b2b6cfe1b",
+      "name": "Austin Andrews",
+      "github": "templarian",
+      "twitter": "Templarian"
+    },
+    "icon": {
+      "id": "AB147073-9D20-4DA1-A108-3856FC1764C1",
+      "name": "icon-name",
+      "data": "M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z",
+      "user": {
+        "id": "79c44334-2d86-11e5-8ac4-842b2b6cfe1b",
+        "name": "First Last",
+        "github": "GitHubUser",
+        "twitter": "TwitterName"
+      }
+    },
+    "issue": 42
+  },
+  {
+    "id": "19445be2-b353-11e7-bf5c-94188269ec50",
+    "modificationId": "1506F66B-CC2A-4575-A20A-DC138628977A",
+    "packageId": "38EF63D0-4744-11E4-B3CF-842B2B6CFE1B",
+    "iconNameBefore": null,
+    "iconNameAfter": null,
+    "iconDescriptionBefore": null,
+    "iconDescriptionAfter": null,
+    "iconDataBefore": "M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z",
+    "iconDataAfter": "M10 4A4 4 0 0 1 14 8A4 4 0 0 1 10 12A4 4 0 0 1 6 8A4 4 0 0 1 10 4M10 14C14.42 14 18 15.79 18 18V20H2V18C2 15.79 5.58 14 10 14M20 12V7H22V13H20M20 17V15H22V17H20Z",
+    "text": null,
+    "date": "2017-10-17T15:51:54Z",
+    "user": {
+      "id": "c4ea5584-07e3-11e4-bf19-842b2b6cfe1b",
+      "name": "Austin Andrews",
+      "github": "templarian",
+      "twitter": "Templarian"
+    },
+    "icon": {
+      "id": "AB147073-9D20-4DA1-A108-3856FC1764C1",
+      "name": "icon-name",
+      "data": "M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z",
+      "user": {
+        "id": "79c44334-2d86-11e5-8ac4-842b2b6cfe1b",
+        "name": "First Last",
+        "github": "GitHubUser",
+        "twitter": "TwitterName"
+      }
+    },
+    "issue": 42
+  },
+  {
+    "id": "f6100c55-b352-11e7-bf5c-94188269ec50",
+    "modificationId": "F7B6D49B-A86F-49AC-AF92-6B9D0DF6188B",
+    "packageId": "38EF63D0-4744-11E4-B3CF-842B2B6CFE1B",
+    "iconNameBefore": "old-name",
+    "iconNameAfter": "new-name",
+    "iconDescriptionBefore": null,
+    "iconDescriptionAfter": null,
+    "iconDataBefore": null,
+    "iconDataAfter": null,
+    "text": null,
+    "date": "2017-10-17T15:50:55Z",
+    "user": {
+      "id": "c4ea5584-07e3-11e4-bf19-842b2b6cfe1b",
+      "name": "Austin Andrews",
+      "github": "templarian",
+      "twitter": "Templarian"
+    },
+    "icon": {
+      "id": "AB147073-9D20-4DA1-A108-3856FC1764C1",
+      "name": "icon-name",
+      "data": "M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z",
+      "user": {
+        "id": "79c44334-2d86-11e5-8ac4-842b2b6cfe1b",
+        "name": "First Last",
+        "github": "GitHubUser",
+        "twitter": "TwitterName"
+      }
+    },
+    "issue": 42
+  },
+  {
+    "id": "ecb3dfda-b352-11e7-bf5c-94188269ec50",
+    "modificationId": "a185a9e8-c192-11e7-bf5c-94188269ec50",
+    "packageId": "38EF63D0-4744-11E4-B3CF-842B2B6CFE1B",
+    "iconNameBefore": null,
+    "iconNameAfter": null,
+    "iconDescriptionBefore": null,
+    "iconDescriptionAfter": null,
+    "iconDataBefore": null,
+    "iconDataAfter": null,
+    "text": "tag-created",
+    "date": "2017-10-16T15:50:39Z",
+    "user": {
+      "id": "c4ea5584-07e3-11e4-bf19-842b2b6cfe1b",
+      "name": "Austin Andrews",
+      "github": "templarian",
+      "twitter": "Templarian"
+    },
+    "icon": {
+      "id": "AB147073-9D20-4DA1-A108-3856FC1764C1",
+      "name": "icon-name",
+      "data": "M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z",
+      "user": {
+        "id": "79c44334-2d86-11e5-8ac4-842b2b6cfe1b",
+        "name": "First Last",
+        "github": "GitHubUser",
+        "twitter": "TwitterName"
+      }
+    },
+    "issue": 42
+  },
+  {
+    "id": "c6d9381b-b352-11e7-bf5c-94188269ec50",
+    "modificationId": "ffe6b5f6-b975-11e9-8ca0-94188269ec50",
+    "packageId": "38EF63D0-4744-11E4-B3CF-842B2B6CFE1B",
+    "iconNameBefore": null,
+    "iconNameAfter": null,
+    "iconDescriptionBefore": null,
+    "iconDescriptionAfter": null,
+    "iconDataBefore": null,
+    "iconDataAfter": null,
+    "text": "tag-deleted",
+    "date": "2017-10-16T15:49:36Z",
+    "user": {
+      "id": "c4ea5584-07e3-11e4-bf19-842b2b6cfe1b",
+      "name": "Austin Andrews",
+      "github": "templarian",
+      "twitter": "Templarian"
+    },
+    "icon": {
+      "id": "AB147073-9D20-4DA1-A108-3856FC1764C1",
+      "name": "icon-name",
+      "data": "M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z",
+      "user": {
+        "id": "79c44334-2d86-11e5-8ac4-842b2b6cfe1b",
+        "name": "First Last",
+        "github": "GitHubUser",
+        "twitter": "TwitterName"
+      }
+    },
+    "issue": 42
+  },
+  {
+    "id": "c2acb992-b352-11e7-bf5c-94188269ec50",
+    "modificationId": "3c638179-c4ca-11e8-9f27-94188269ec50",
+    "packageId": "38EF63D0-4744-11E4-B3CF-842B2B6CFE1B",
+    "iconNameBefore": null,
+    "iconNameAfter": null,
+    "iconDescriptionBefore": "Old Description",
+    "iconDescriptionAfter": "New Description",
+    "iconDataBefore": null,
+    "iconDataAfter": null,
+    "text": null,
+    "date": "2017-10-16T15:49:29Z",
+    "user": {
+      "id": "c4ea5584-07e3-11e4-bf19-842b2b6cfe1b",
+      "name": "Austin Andrews",
+      "github": "templarian",
+      "twitter": "Templarian"
+    },
+    "icon": {
+      "id": "AB147073-9D20-4DA1-A108-3856FC1764C1",
+      "name": "icon-name",
+      "data": "M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z",
+      "user": {
+        "id": "79c44334-2d86-11e5-8ac4-842b2b6cfe1b",
+        "name": "First Last",
+        "github": "GitHubUser",
+        "twitter": "TwitterName"
+      }
+    },
+    "issue": 42
+  },
+  {
+    "id": "c2acb992-b352-11e7-bf5c-94188269ec50",
+    "modificationId": "254591d0-b28e-11e9-8ca0-94188269ec50",
+    "packageId": "38EF63D0-4744-11E4-B3CF-842B2B6CFE1B",
+    "iconNameBefore": null,
+    "iconNameAfter": null,
+    "iconDescriptionBefore": null,
+    "iconDescriptionAfter": null,
+    "iconDataBefore": null,
+    "iconDataAfter": null,
+    "text": "c4ea5584-07e3-11e4-bf19-842b2b6cfe1b",
+    "date": "2017-10-16T15:49:29Z",
+    "user": {
+      "id": "c4ea5584-07e3-11e4-bf19-842b2b6cfe1b",
+      "name": "Austin Andrews",
+      "github": "templarian",
+      "twitter": "Templarian"
+    },
+    "icon": {
+      "id": "AB147073-9D20-4DA1-A108-3856FC1764C1",
+      "name": "icon-name",
+      "data": "M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z",
+      "user": {
+        "id": "79c44334-2d86-11e5-8ac4-842b2b6cfe1b",
+        "name": "First Last",
+        "github": "GitHubUser",
+        "twitter": "TwitterName"
+      }
+    },
+    "issue": 42
+  },
+  {
+    "id": "c2acb992-b352-11e7-bf5c-94188269ec50",
+    "modificationId": "f92f310f-bfed-11e9-8ca0-94188269ec50",
+    "packageId": "38EF63D0-4744-11E4-B3CF-842B2B6CFE1B",
+    "iconNameBefore": null,
+    "iconNameAfter": null,
+    "iconDescriptionBefore": null,
+    "iconDescriptionAfter": null,
+    "iconDataBefore": null,
+    "iconDataAfter": null,
+    "text": null,
+    "date": "2017-10-16T15:49:29Z",
+    "user": {
+      "id": "c4ea5584-07e3-11e4-bf19-842b2b6cfe1b",
+      "name": "Austin Andrews",
+      "github": "templarian",
+      "twitter": "Templarian"
+    },
+    "icon": {
+      "id": "AB147073-9D20-4DA1-A108-3856FC1764C1",
+      "name": "icon-name",
+      "data": "M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z",
+      "user": {
+        "id": "79c44334-2d86-11e5-8ac4-842b2b6cfe1b",
+        "name": "First Last",
+        "github": "GitHubUser",
+        "twitter": "TwitterName"
+      }
+    },
+    "issue": 42
+  },
+  {
+    "id": "c2acb992-b352-11e7-bf5c-94188269ec50",
+    "modificationId": "brokenf-bfed-11e9-8ca0-94188269ec50",
+    "packageId": "38EF63D0-4744-11E4-B3CF-842B2B6CFE1B",
+    "iconNameBefore": null,
+    "iconNameAfter": null,
+    "iconDescriptionBefore": null,
+    "iconDescriptionAfter": null,
+    "iconDataBefore": null,
+    "iconDataAfter": null,
+    "text": "invalid type, this modification id is supposed to break!",
+    "date": "2017-10-16T15:49:29Z",
+    "user": {
+      "id": "c4ea5584-07e3-11e4-bf19-842b2b6cfe1b",
+      "name": "Austin Andrews",
+      "github": "templarian",
+      "twitter": "Templarian"
+    },
+    "icon": {
+      "id": "AB147073-9D20-4DA1-A108-3856FC1764C1",
+      "name": "icon-name",
+      "data": "M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z",
+      "user": {
+        "id": "79c44334-2d86-11e5-8ac4-842b2b6cfe1b",
+        "name": "First Last",
+        "github": "GitHubUser",
+        "twitter": "TwitterName"
+      }
+    },
+    "issue": 42
+  }
+];

package/pg/modification/index.ts

@@ -0,0 +1,3 @@
+import PgModification from './modification';
+
+export default PgModification;