@pictogrammers/components 0.3.1

package/pg/modification/modification.css

@@ -0,0 +1,311 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  color: #453C4F;
+}
+
+.invalid {
+  color: #721c24;
+  background-color: #f8d7da;
+  border-color: #f5c6cb;
+}
+
+h2 {
+  font-weight: normal;
+  font-size: 1.25rem;
+  margin: 0.5rem 0 0.5rem 0;
+}
+
+/* Individual Templates */
+
+[part="news"] {
+  display: grid;
+  grid-template-columns: 3.5rem 1fr;
+  grid-template-rows: 3.25rem auto;
+  padding: 0.25rem;
+}
+[part="news"] [part="avatar"] {
+  grid-column: 1;
+}
+[part="news"] [part="label"] {
+  grid-column: 1;
+  grid-row: 2;
+  text-align: center;
+  padding-right: 0.5rem;
+}
+[part="news"] [part="markdown"] {
+  grid-column: 2;
+  grid-row: 1 / span 2;
+  border: 1px solid #DDD;
+  padding: 0 1rem;
+  background: #fff;
+  border-radius: 0.25rem;
+}
+
+[part="iconCreated"],
+[part="iconRenamed"],
+[part="iconDeleted"],
+[part="iconAliasCreated"],
+[part="iconAliasDeleted"],
+[part="iconTagCreated"],
+[part="iconTagDeleted"],
+[part="iconAuthorModified"],
+[part="iconDeprecated"] {
+  display: grid;
+  grid-template-columns: 3.5rem 3.5rem 1fr auto auto;
+  padding: 0.25rem;
+}
+[part="iconCreated"] [part="avatar"],
+[part="iconModified"] [part="avatar"],
+[part="iconRenamed"] [part="avatar"],
+[part="iconDeleted"] [part="avatar"],
+[part="iconAliasCreated"] [part="avatar"],
+[part="iconAliasDeleted"] [part="avatar"],
+[part="iconTagCreated"] [part="avatar"],
+[part="iconTagDeleted"] [part="avatar"],
+[part="iconAuthorModified"] [part="avatar"],
+[part="iconDeprecated"] [part="avatar"] {
+  grid-column: 1;
+}
+[part="iconCreated"] [part="icon"],
+[part="iconModified"] [part="iconDataBefore"],
+[part="iconModified"] [part="iconDataAfter"],
+[part="iconRenamed"] [part="icon"],
+[part="iconDeleted"] [part="icon"],
+[part="iconAliasCreated"] [part="icon"],
+[part="iconAliasDeleted"] [part="icon"],
+[part="iconTagCreated"] [part="icon"],
+[part="iconTagDeleted"] [part="icon"],
+[part="iconAuthorModified"] [part="icon"],
+[part="iconDeprecated"] [part="icon"] {
+  grid-column: 2;
+  --pg-icon-width: 3rem;
+  --pg-icon-height: 3rem;
+  width: 3rem;
+  border: 1px solid #ddd;
+  background: #fff;
+  border-radius: 0.25rem;
+  align-self: flex-start;
+}
+[part="iconCreated"] [part="content"],
+[part="iconModified"] [part="content"],
+[part="iconRenamed"] [part="content"],
+[part="iconDeleted"] [part="content"],
+[part="iconAliasCreated"] [part="content"],
+[part="iconAliasDeleted"] [part="content"],
+[part="iconTagCreated"] [part="content"],
+[part="iconTagDeleted"] [part="content"],
+[part="iconAuthorModified"] [part="content"],
+[part="iconDeprecated"] [part="content"] {
+  grid-column: 3;
+  align-content: center;
+  display: flex;
+  align-items: center;
+}
+[part="iconCreated"] [part="content"] code,
+[part="iconModified"] [part="content"] code,
+[part="iconRenamed"] [part="content"] code,
+[part="iconDeleted"] [part="content"] code,
+[part="iconAliasCreated"] [part="content"] code,
+[part="iconAliasDeleted"] [part="content"] code,
+[part="iconTagCreated"] [part="content"] code,
+[part="iconTagDeleted"] [part="content"] code,
+[part="iconAuthorModified"] [part="content"] code,
+[part="iconDeprecated"] [part="content"] code {
+  display: inline-block;
+  background: rgba(0, 0, 0, 0.05);
+  padding: 0.125rem 0.25rem;
+  border-radius: 0.125rem;
+  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
+  border: 1px solid rgba(69, 60, 79, 0.2);
+  line-height: 1.125rem;
+}
+[part="iconCreated"] [part="issue"],
+[part="iconModified"] [part="issue"],
+[part="iconRenamed"] [part="issue"],
+[part="iconDeleted"] [part="issue"],
+[part="iconAliasCreated"] [part="issue"],
+[part="iconAliasDeleted"] [part="issue"],
+[part="iconTagCreated"] [part="issue"],
+[part="iconTagDeleted"] [part="issue"],
+[part="iconDescriptionModified"] [part="issue"],
+[part="iconAuthorModified"] [part="issue"],
+[part="iconDeprecated"] [part="issue"] {
+  grid-column: 4;
+  display: flex;
+  align-self: center;
+  text-decoration: none;
+  padding: 0.25rem 0.5rem;
+  border: 1px solid #453C4F;
+  color: #453C4F;
+  border-radius: 0.25rem;
+}
+[part="iconCreated"] [part="issue"]:hover,
+[part="iconModified"] [part="issue"]:hover,
+[part="iconRenamed"] [part="issue"]:hover,
+[part="iconDeleted"] [part="issue"]:hover,
+[part="iconAliasCreated"] [part="issue"]:hover,
+[part="iconAliasDeleted"] [part="issue"]:hover,
+[part="iconTagCreated"] [part="issue"]:hover,
+[part="iconTagDeleted"] [part="issue"]:hover,
+[part="iconDescriptionModified"] [part="issue"]:hover,
+[part="iconAuthorModified"] [part="issue"]:hover,
+[part="iconDeprecated"] [part="issue"]:hover {
+  background: #453C4F;
+  color: #fff;
+}
+.edit [part="iconCreated"] [part="edit"],
+.edit [part="iconModified"] [part="edit"],
+.edit [part="iconRenamed"] [part="edit"],
+.edit [part="iconDeleted"] [part="edit"],
+.edit [part="iconAliasCreated"] [part="edit"],
+.edit [part="iconAliasDeleted"] [part="edit"],
+.edit [part="iconTagCreated"] [part="edit"],
+.edit [part="iconTagDeleted"] [part="edit"],
+.edit [part="iconDescriptionModified"] [part="edit"],
+.edit [part="iconAuthorModified"] [part="edit"],
+.edit [part="iconDeprecated"] [part="edit"] {
+  display: flex;
+}
+[part="iconCreated"] [part="edit"],
+[part="iconModified"] [part="edit"],
+[part="iconRenamed"] [part="edit"],
+[part="iconDeleted"] [part="edit"],
+[part="iconAliasCreated"] [part="edit"],
+[part="iconAliasDeleted"] [part="edit"],
+[part="iconTagCreated"] [part="edit"],
+[part="iconTagDeleted"] [part="edit"],
+[part="iconDescriptionModified"] [part="edit"],
+[part="iconAuthorModified"] [part="edit"],
+[part="iconDeprecated"] [part="edit"] {
+  display: none;
+  grid-column: 5;
+  align-self: center;
+  padding: 0.25rem;
+  border: 0;
+  border-radius: 0.25rem;
+  margin-left: 0.5rem;
+  cursor: pointer;
+}
+[part="iconCreated"] [part="edit"]:hover,
+[part="iconModified"] [part="edit"]:hover,
+[part="iconRenamed"] [part="edit"]:hover,
+[part="iconDeleted"] [part="edit"]:hover,
+[part="iconAliasCreated"] [part="edit"]:hover,
+[part="iconAliasDeleted"] [part="edit"]:hover,
+[part="iconTagCreated"] [part="edit"]:hover,
+[part="iconTagDeleted"] [part="edit"]:hover,
+[part="iconDescriptionModified"] [part="edit"]:hover,
+[part="iconAuthorModified"] [part="edit"]:hover,
+[part="iconDeprecated"] [part="edit"]:hover {
+  background: #453C4F;
+  --pg-icon-color: #fff;
+}
+
+/* Individiual Tweaks */
+[part="iconCreated"] [part="icon"] {
+  background: #d1e7dd;
+  border-color: #badbcc;
+}
+
+[part="iconRenamed"] [part="icon"] {
+  background-color: #fff3cd;
+  border-color: #ffecb5;
+}
+
+[part="iconDeleted"] [part="icon"] {
+  background: #f5c6cb;
+  border-color: #d06e78;
+}
+
+[part="iconModified"] {
+  display: grid;
+  grid-template-columns: 3.5rem 3.5rem 3.5rem 1fr auto auto;
+  padding: 0.25rem;
+}
+[part="iconModified"] [part="iconDataBefore"] {
+  opacity: 0.4;
+}
+[part="iconModified"] [part="iconDataAfter"] {
+  grid-column: 3;
+}
+[part="iconModified"] [part="content"] {
+  grid-column: 4;
+}
+[part="iconModified"] [part="issue"] {
+  grid-column: 5;
+}
+[part="iconModified"] [part="edit"] {
+  grid-column: 6;
+}
+
+[part="iconAliasCreated"] [part="icon"],
+[part="iconAliasDeleted"] [part="icon"] {
+  background-color: #DDC6E7;
+  border-color: 1px solid #DBBDE5;
+}
+
+[part="iconTagCreated"] [part="icon"],
+[part="iconTagDeleted"] [part="icon"] {
+  background-color: #cff4fc;
+  border-color: #b6effb;
+}
+
+[part="iconDescriptionModified"] {
+  display: grid;
+  grid-template-columns: 3.5rem 3.5rem 1fr 0.5rem 1fr auto;
+  grid-template-rows: auto auto;
+  padding: 0.25rem;
+}
+[part="iconDescriptionModified"] [part="avatar"] {
+  grid-column: 1;
+  grid-row: 1 / span 2;
+}
+[part="iconDescriptionModified"] [part="icon"] {
+  grid-column: 2;
+  grid-row: 1 / span 2;
+  --pg-icon-width: 3rem;
+  --pg-icon-height: 3rem;
+  width: 3rem;
+  border: 1px solid #ddd;
+  background: #fff;
+  border-radius: 0.25rem;
+  align-self: flex-start;
+}
+[part="iconDescriptionModified"] [part="iconDescriptionBefore"] {
+  grid-column: 3;
+  grid-row: 1 / span 2;
+  border: 1px solid #DDD;
+  padding: 0 1rem;
+  background: #fff;
+  border-radius: 0.25rem;
+}
+[part="iconDescriptionModified"] [part="iconDescriptionAfter"] {
+  grid-column: 5;
+  grid-row: 1 / span 2;
+  border: 1px solid #DDD;
+  padding: 0 1rem;
+  background: #fff;
+  border-radius: 0.25rem;
+}
+[part="iconDescriptionModified"] [part="issue"] {
+  grid-column: 6;
+  grid-row: 1;
+  margin-left: 0.5rem;
+}
+[part="iconDescriptionModified"] [part="edit"] {
+  grid-column: 6;
+  grid-row: 2;
+  justify-content: center;
+  margin-top: 0.25rem;
+}
+
+.added,
+.created {
+  border-bottom: 3px solid #badbcc;
+}
+
+.removed,
+.deleted {
+  border-bottom: 3px solid #f5c6cb;
+}

package/pg/modification/modification.html

@@ -0,0 +1 @@
+<div part="items"></div>

package/pg/modification/modification.spec.ts

@@ -0,0 +1,33 @@
+import { selectComponent, getAttributes } from '@pictogrammers/element';
+
+import './modification';
+import PgModification from './modification';
+
+const PG_MODIFICATION = 'pg-modification';
+
+describe('pg-modification', () => {
+
+  beforeEach(() => {
+    var c = document.createElement(PG_MODIFICATION);
+    document.body.appendChild(c);
+  });
+
+  afterEach(() => {
+    while (document.body.firstChild) {
+      document.body.removeChild(document.body.firstChild);
+    }
+  });
+
+  it('should be registered', () => {
+    expect(customElements.get(PG_MODIFICATION)).toBeDefined();
+  });
+
+  it('should only expose known props', () => {
+    const props = getAttributes(PG_MODIFICATION);
+    expect(props.length).toBe(3);
+    expect(props).toContain('modifications');
+    expect(props).toContain('edit');
+    expect(props).toContain('github');
+  });
+
+});

package/pg/modification/modification.ts

@@ -0,0 +1,201 @@
+import { Component, Prop, Part, node } from '@pictogrammers/element';
+
+import template from './modification.html';
+import style from './modification.css';
+
+import templateDate from './type/date.html';
+import templateNews from './type/news.html';
+import templateIconCreated from './type/iconCreated.html';
+import templateIconModified from './type/iconModified.html';
+import templateIconRenamed from './type/iconRenamed.html';
+import templateIconDeleted from './type/iconDeleted.html';
+import templateIconAliasCreated from './type/iconAliasCreated.html';
+import templateIconAliasDeleted from './type/iconAliasDeleted.html';
+import templateIconTagCreated from './type/iconTagCreated.html';
+import templateIconTagDeleted from './type/iconTagDeleted.html';
+import templateIconDescriptionModified from './type/iconDescriptionModified.html';
+import templateIconAuthorModified from './type/iconAuthorModified.html';
+import templateIconDeprecated from './type/iconDeprecated.html';
+
+import { Modification } from '../shared/models/modification';
+import { list, item } from '../shared/list';
+import { ModificationType } from '../shared/enums/modificationType';
+import { addTooltip, BOTTOM_END, BOTTOM_START } from '../tooltip';
+import { User } from '../shared/models/user';
+import { Icon } from '../shared/models/icon';
+
+const noIcon = 'M0 0h24v24H0V0zm2 2v20h20V2H2z';
+const editIcon = 'M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z';
+
+const mapTemplates = {
+  [ModificationType.News]: templateNews,
+  [ModificationType.IconCreated]: templateIconCreated,
+  [ModificationType.IconModified]: templateIconModified,
+  [ModificationType.IconRenamed]: templateIconRenamed,
+  [ModificationType.IconDeleted]: templateIconDeleted,
+  [ModificationType.IconAliasCreated]: templateIconAliasCreated,
+  [ModificationType.IconAliasDeleted]: templateIconAliasDeleted,
+  [ModificationType.IconTagCreated]: templateIconTagCreated,
+  [ModificationType.IconTagDeleted]: templateIconTagDeleted,
+  [ModificationType.IconDescriptionModified]: templateIconDescriptionModified,
+  [ModificationType.IconAuthorModified]: templateIconAuthorModified,
+  [ModificationType.IconDeprecated]: templateIconDeprecated,
+  [ModificationType.Date]: templateDate
+}
+
+const months = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+
+function dateToString(date: string) {
+  const d = new Date(date);
+  const month = months[d.getMonth()];
+  return `${month} ${d.getDate()}, ${d.getFullYear()}`;
+}
+
+function dateToUUID(date: string) {
+  const d = new Date(date);
+  const month = months[d.getMonth()];
+  return `${d.getFullYear()}-${month}-${d.getDate()}`;
+}
+
+function itemsInsertDates(modifications) {
+  const items: Modification[] = [];
+  let unique = '';
+  modifications.forEach((m, i) => {
+    const date = dateToString(m.date);
+    if (unique !== date) {
+      items.push(new Modification().from({
+        id: `date-${dateToUUID(m.date)}`,
+        modificationId: ModificationType.Date,
+        text: date,
+        user: new User(),
+        icon: new Icon()
+      } as any));
+      unique = date;
+    }
+    items.push(m);
+  });
+  return items;
+}
+
+@Component({
+  selector: 'pg-modification',
+  style,
+  template
+})
+export default class PgModification extends HTMLElement {
+  @Prop() modifications: Modification[] | null = null;
+  @Prop() edit: boolean = false;
+  // Ex: pictogrammers/repo
+  @Prop() github: string = '';
+
+  @Part() $items: HTMLDivElement;
+
+  render(changes) {
+    if (changes.modifications && this.modifications) {
+      list(
+        this.$items,
+        itemsInsertDates(this.modifications),
+        'id',
+        (modification: Modification) => {
+          if (modification.modificationId in mapTemplates) {
+            const n = node<HTMLDivElement>(mapTemplates[modification.modificationId], {
+              text: {
+                innerText: modification.text
+              },
+              markdown: {
+                text: modification.text
+              },
+              icon: {
+                path: modification.icon && modification.icon.data
+              },
+              iconName: {
+                innerText: modification.icon && modification.icon.name
+              },
+              iconNameBefore: {
+                innerText: modification.iconNameBefore
+              },
+              iconNameAfter: {
+                innerText: modification.iconNameAfter
+              },
+              iconDescriptionBefore: {
+                text: modification.iconDescriptionBefore
+              },
+              iconDescriptionAfter: {
+                text: modification.iconDescriptionAfter
+              },
+              iconDataBefore: {
+                path: modification.iconDataBefore
+              },
+              iconDataAfter: {
+                path: modification.iconDataAfter
+              },
+              avatar: {
+                user: modification.user as any
+              },
+              editIcon: {
+                path: editIcon
+              },
+              issue: {
+                style: modification.issue ? '' : 'display:none',
+                innerText: modification.issue ? `#${modification.issue}` : '',
+                href: `https://github.com/${this.github}/issues/${modification.issue}`
+              }
+            });
+            const issue = n.querySelector('[part="issue"]');
+            if (issue) {
+              addTooltip(issue, () => {
+                return `View on GitHub`;
+              }, BOTTOM_END);
+            }
+            const avatar = n.querySelector('[part="avatar"]');
+            if (avatar) {
+              addTooltip(avatar, () => {
+                return modification.user.name;
+              }, BOTTOM_START);
+            }
+            const edit = n.querySelector('[part="edit"]');
+            if (edit) {
+              edit.addEventListener('click', () => {
+                this.dispatchEvent(new CustomEvent('edit', {
+                  detail: {
+                    modification
+                  }
+                }));
+              });
+            }
+            return n;
+          }
+          const invalid = document.createElement('div');
+          invalid.classList.add('invalid');
+          invalid.innerText = `Error: Unsupported modificationId with text: "${modification.text}"`;
+          return invalid;
+        },
+        (modifiction, $item) => {
+
+        }
+      );
+    }
+    if (changes.edit) {
+      this.$items.classList.toggle('edit', this.edit);
+    }
+  }
+
+  addItem(modification: Modification) {
+    const div = document.createElement('div');
+
+    this.$items.appendChild(div);
+  }
+}

package/pg/modification/type/date.html

@@ -0,0 +1 @@
+<h2 part="text"></h1>

package/pg/modification/type/iconAliasCreated.html

@@ -0,0 +1,13 @@
+<div part="iconAliasCreated">
+  <pg-avatar part="avatar"></pg-avatar>
+  <pg-icon part="icon"></pg-icon>
+  <span part="content">
+    <span>
+      <span class="added">Added</span> alias <code part="text"></code> to <code part="iconName"></code>.
+    </span>
+  </span>
+  <a part="issue"></a>
+  <button part="edit">
+    <pg-icon part="editIcon"></pg-icon>
+  </button>
+</div>

package/pg/modification/type/iconAliasDeleted.html

@@ -0,0 +1,13 @@
+<div part="iconAliasDeleted">
+  <pg-avatar part="avatar"></pg-avatar>
+  <pg-icon part="icon"></pg-icon>
+  <span part="content">
+    <span>
+      <span class="removed">Removed</span> alias <code part="text"></code> from <code part="iconName"></code>.
+    </span>
+  </span>
+  <a part="issue"></a>
+  <button part="edit">
+    <pg-icon part="editIcon"></pg-icon>
+  </button>
+</div>

package/pg/modification/type/iconAuthorModified.html

@@ -0,0 +1,13 @@
+<div part="iconAuthorModified">
+  <pg-avatar part="avatar"></pg-avatar>
+  <pg-icon part="icon"></pg-icon>
+  <span part="content">
+    <span>
+      Author modified.
+    </span>
+  </span>
+  <a part="issue"></a>
+  <button part="edit">
+    <pg-icon part="editIcon"></pg-icon>
+  </button>
+</div>

package/pg/modification/type/iconCreated.html

@@ -0,0 +1,13 @@
+<div part="iconCreated">
+  <pg-avatar part="avatar"></pg-avatar>
+  <pg-icon part="icon"></pg-icon>
+  <span part="content">
+    <span>
+      Icon <code part="iconName"></code> <span class="created">created</span>.
+    </span>
+  </span>
+  <a part="issue"></a>
+  <button part="edit">
+    <pg-icon part="editIcon"></pg-icon>
+  </button>
+</div>

package/pg/modification/type/iconDeleted.html

@@ -0,0 +1,13 @@
+<div part="iconDeleted">
+  <pg-avatar part="avatar"></pg-avatar>
+  <pg-icon part="icon"></pg-icon>
+  <span part="content">
+    <span>
+      Icon <code part="iconName"></code> <span class="deleted">deleted</span>.
+    </span>
+  </span>
+  <a part="issue"></a>
+  <button part="edit">
+    <pg-icon part="editIcon"></pg-icon>
+  </button>
+</div>

package/pg/modification/type/iconDeprecated.html

@@ -0,0 +1,13 @@
+<div part="iconDeprecated">
+  <pg-avatar part="avatar"></pg-avatar>
+  <pg-icon part="icon"></pg-icon>
+  <span part="content">
+    <span>
+      Deprecated. Warning this icon will be removed in a future release.
+    </span>
+  </span>
+  <a part="issue"></a>
+  <button part="edit">
+    <pg-icon part="editIcon"></pg-icon>
+  </button>
+</div>

package/pg/modification/type/iconDescriptionModified.html

@@ -0,0 +1,10 @@
+<div part="iconDescriptionModified">
+  <pg-avatar part="avatar"></pg-avatar>
+  <pg-icon part="icon"></pg-icon>
+  <pg-markdown part="iconDescriptionBefore"></pg-markdown>
+  <pg-markdown part="iconDescriptionAfter"></pg-markdown>
+  <a part="issue"></a>
+  <button part="edit">
+    <pg-icon part="editIcon"></pg-icon>
+  </button>
+</div>

package/pg/modification/type/iconModified.html

@@ -0,0 +1,14 @@
+<div part="iconModified">
+  <pg-avatar part="avatar"></pg-avatar>
+  <pg-icon part="iconDataBefore"></pg-icon>
+  <pg-icon part="iconDataAfter"></pg-icon>
+  <span part="content">
+    <span>
+      Icon <code part="iconName"></code> modified.
+    </span>
+  </span>
+  <a part="issue"></a>
+  <button part="edit">
+    <pg-icon part="editIcon"></pg-icon>
+  </button>
+</div>

package/pg/modification/type/iconRenamed.html

@@ -0,0 +1,13 @@
+<div part="iconRenamed">
+  <pg-avatar part="avatar"></pg-avatar>
+  <pg-icon part="icon"></pg-icon>
+  <span part="content">
+    <span>
+      Icon <code part="iconNameBefore"></code> renamed to <code part="iconNameAfter"></code>.
+    </span>
+  </span>
+  <a part="issue"></a>
+  <button part="edit">
+    <pg-icon part="editIcon"></pg-icon>
+  </button>
+</div>