@pictogrammers/components 0.3.1

package/pg/buttonLink/buttonLink.css

@@ -0,0 +1,91 @@
+:host {
+  display: flex;
+}
+
+[part="button"] {
+  display: inline-flex;
+  align-items: center;
+  align-content: center;
+  font-family: var(--pg-font-family);
+  font-size: 1rem;
+  line-height: 1.5rem;
+  text-decoration: none;
+}
+
+[part="button"] {
+  border: 1px solid var(--pg-button-border-color, #453C4F);
+  background-color: var(--pg-button-background-color, #fff);
+  color: var(--pg-button-color, #453C4F);
+  padding: var(--pg-button-padding, 0.25rem 0.5rem);
+  border-radius: 0.25rem;
+  outline: none;
+  --pg-icon-color: var(--pg-button-color, #453C4F);
+}
+
+[part="button"]:hover {
+  border: 1px solid var(--pg-button-hover-border-color, #453C4F);
+  background-color: var(--pg-button-hover-background-color, #453C4F);
+  color: var(--pg-hover-button-color, #fff);
+  --pg-icon-color: var(--pg-button-hover-color, #fff);
+}
+
+[part="button"]:active {
+  box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.5) inset;
+  position: relative;
+}
+
+[part="button"]:focus {
+  position: relative;
+}
+
+[part="button"]:active::before {
+  content: '';
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  bottom: -1px;
+  left: -1px;
+  border-radius: 0.25rem;
+  box-shadow: 0 0 0 3px var(--pg-search-focus-glow, rgb(79, 143, 249, 0.6));
+}
+[part="button"]:focus::before {
+  content: '';
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  bottom: -1px;
+  left: -1px;
+  border-radius: 0.25rem;
+  box-shadow: 0 0 0 3px var(--pg-search-focus-glow, rgb(79, 143, 249, 0.5));
+}
+
+[part="button"].start {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  margin-right: -1px;
+}
+
+[part="button"].center {
+  border-radius: 0;
+  margin-right: -1px;
+}
+
+[part="button"].end {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+[part="button"].active,
+[part="button"].active:hover {
+  box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.5) inset;
+  background-color: rgba(69, 60, 79, 0.1);
+  color: var(--pg-button-color, #453C4F);
+}
+
+[part="button"].block {
+  flex: 1;
+}
+
+::slotted(*) {
+  align-self: center;
+}

package/pg/buttonLink/buttonLink.html

@@ -0,0 +1,3 @@
+<a part="button">
+  <slot></slot>
+</a>

package/pg/buttonLink/buttonLink.ts

@@ -0,0 +1,46 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+
+import template from './buttonLink.html';
+import style from './buttonLink.css';
+
+@Component({
+  selector: 'pg-button-link',
+  style,
+  template
+})
+export default class PgButtonLink extends HTMLElement {
+  @Prop() href: string = '';
+  @Prop() active: string | boolean = false;
+  @Prop() block: string | boolean = false;
+  @Prop() start: string | boolean = false;
+  @Prop() center: string | boolean = false;
+  @Prop() end: string | boolean = false;
+
+  @Part() $button: HTMLAnchorElement;
+
+  connectedCallback() {
+    this.$button.addEventListener('click', (e) => this.dispatchEvent(new CustomEvent('click')));
+  }
+
+  render(changes) {
+    if (changes.href) {
+      this.$button.href = this.href;
+    }
+    const t = [true, 'true', ''];
+    if (changes.active) {
+      this.$button.classList.toggle('active', t.includes(this.active));
+    }
+    if (changes.start) {
+      this.$button.classList.toggle('start', t.includes(this.start));
+    }
+    if (changes.end) {
+      this.$button.classList.toggle('end', t.includes(this.end));
+    }
+    if (changes.center) {
+      this.$button.classList.toggle('center', t.includes(this.center));
+    }
+    if (changes.block) {
+      this.$button.classList.toggle('block', t.includes(this.block));
+    }
+  }
+}

package/pg/buttonLink/index.ts

@@ -0,0 +1,3 @@
+import PgButtonLink from './buttonLink';
+
+export default PgButtonLink;

package/pg/buttonToggle/README.md

@@ -0,0 +1,54 @@
+# `<pg-button-toggle>`
+
+The `pg-button-toggle` component is essentially just a button with swappable slotted content. Commonly used with icons, but using `span` elements will allow assigning text content.
+
+```typescript
+import '@pictogrammers/components/pg/buttonToggle';
+import PgButtonToggle from '@pictogrammers/components/pg/buttonToggle';
+```
+
+```html
+<pg-button-toggle>
+  <pg-icon slot="active" path="M...Z"></pg-icon>
+  <pg-icon slot="inactive" path="M...Z"></pg-icon>
+</pg-button-toggle>
+```
+
+| Slots       | Tested   | Description |
+| ----------- | -------- | ----------- |
+| default     | &#x2705; | Button contents. |
+
+| Attribute  | Tested   | Description |
+| ---------- | -------- | ----------- |
+| block      |          | block sizing |
+| active     |          | Depressed visual state. |
+| start      |          | Internal Only |
+| end        |          | Internal Only |
+| center     |          | Internal Only |
+
+| Events     | Tested   | Description |
+| ---------- | -------- | ----------- |
+| click      | &#x2705; | Standard click. |
+
+| CSS Variables       | Default   | Description |
+| ------------------- | --------- | ----------- |
+| `--pg-button-color` | `#453C4F` | Text color       |
+| `--pg-button-background-color` | `#fff` | Background color       |
+| `--pg-button-border-color` | `#453C4F`  | Border color       |
+| `--pg-button-hover-color` | `#fff`  | `:hover` Text color      |
+| `--pg-button-hover-background-color` | `#453C4F`  | `:hover` Background color      |
+| `--pg-button-hover-border-color` | `#453C4F`  | `:hover` Border color      |
+| `--pg-button-active-color` | `#fff`  | `active` Text color      |
+| `--pg-button-active-background-color` | `#453C4F`  | `active` Background color      |
+| `--pg-button-active-border-color` | `#453C4F`  | `active` Border color      |
+
+### Slots
+
+Special styling is applied for `pg-icon`.
+
+```html
+<pg-button-toggle>
+  <pg-icon slot="active" path="M...Z"></pg-icon>
+  <pg-icon slot="inactive" path="M...Z"></pg-icon>
+</pg-button-toggle>
+```

package/pg/buttonToggle/__examples__/basic/basic.html

@@ -0,0 +1,10 @@
+<div class="example">
+  <div>click to toggle state</div>
+  <pg-button-toggle part="button">
+    <pg-icon slot="inactive" path="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"></pg-icon>
+    <pg-icon slot="active" path="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"></pg-icon>
+  </pg-button-toggle>
+  <div>
+    <code>onclick: <code part="value"></code></code>
+  </div>
+</div>

package/pg/buttonToggle/__examples__/basic/basic.ts

@@ -0,0 +1,23 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+import PgButtonToggle from '../../buttonToggle';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-button-toggle-basic',
+  template
+})
+export default class XPgButtonToggleBasic extends HTMLElement {
+
+  @Part() $button: PgButtonToggle;
+  @Part() $value: HTMLSpanElement;
+
+  connectedCallback() {
+    this.$button.addEventListener('click', this.handleClick.bind(this));
+  }
+
+  handleClick(e) {
+    const { active } = e.detail;
+    this.$value.innerText = `${active}`;
+  }
+}

package/pg/buttonToggle/buttonToggle.css

@@ -0,0 +1,8 @@
+:host {
+  display: inline-flex;
+}
+
+::slotted(*) {
+  align-self: center;
+  display: flex;
+}

package/pg/buttonToggle/buttonToggle.html

@@ -0,0 +1,4 @@
+<pg-button part="button">
+  <slot part="expand" name="active"></slot>
+  <slot part="collapse" name="inactive"></slot>
+</pg-button>

package/pg/buttonToggle/buttonToggle.ts

@@ -0,0 +1,44 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+
+import '../button/button';
+import PgButton from '../button/button';
+
+import template from './buttonToggle.html';
+import style from './buttonToggle.css';
+
+const t = [true, 'true', ''];
+
+@Component({
+  selector: 'pg-button-toggle',
+  style,
+  template
+})
+export default class PgButtonToggle extends HTMLElement {
+  @Prop() active: string | boolean = false;
+
+  @Part() $button: PgButton;
+  @Part() $expand: HTMLSlotElement;
+  @Part() $collapse: HTMLSlotElement;
+
+  connectedCallback() {
+    this.$button.addEventListener('click', (e) => {
+      e.stopPropagation();
+      this.active = !t.includes(this.active);
+      this.dispatchEvent(
+        new CustomEvent('click', {
+          detail: {
+            active: this.active
+          }
+        })
+      )
+    });
+  }
+
+  render(changes) {
+    if (changes.active) {
+      this.$button.active = t.includes(this.active);
+      this.$expand.style.display = this.$button.active ? 'initial' : 'none';
+      this.$collapse.style.display = this.$button.active ? 'none' : 'initial';
+    }
+  }
+}

package/pg/buttonToggle/index.ts

@@ -0,0 +1,3 @@
+import PgButtonToggle from './buttonToggle';
+
+export default PgButtonToggle;

package/pg/card/README.md

@@ -0,0 +1,21 @@
+# `<pg-card>`
+
+The `pg-card` component is a presentational component for adding a shadow with rounded corners.
+
+```typescript
+import '@pictogrammers/components/pg/icon';
+import PgIcon from '@pictogrammers/components/pg/icon';
+```
+
+```html
+<pg-card>
+  Body
+</pg-card>
+```
+
+## CSS Variables
+
+| CSS Variables         | Default     | Description |
+| --------------------- | ----------- | ----------- |
+| `--pg-card-color`    | `'#453C4F'` | Color       |
+| `--pg-card-padding`  | `0`         | Padding       |

package/pg/card/__examples__/basic/basic.html

@@ -0,0 +1,5 @@
+<div class="example">
+  <pg-card>
+    <p>Content</p>
+  </pg-card>
+</div>

package/pg/card/__examples__/basic/basic.ts

@@ -0,0 +1,11 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-card-basic',
+  template
+})
+export default class XPgCardBasic extends HTMLElement {
+
+}

package/pg/card/card.css

@@ -0,0 +1,11 @@
+:host {
+  display: flex;
+  flex-direction: column;
+}
+
+[part="body"] {
+  padding: var(--pg-card-padding, 0);
+  border-radius: var(--pg-card-padding, 0.5rem);
+  background: var(--pg-card-background, #fff);
+  box-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.3);
+}

package/pg/card/card.html

@@ -0,0 +1,3 @@
+<div part="body">
+  <slot></slot>
+</div>

package/pg/card/card.spec.ts

@@ -0,0 +1,30 @@
+import { selectComponent, getAttributes } from '@pictogrammers/element';
+
+import './card';
+import PgCard from './card';
+
+const PG_CARD = 'pg-card';
+
+describe('pg-card', () => {
+
+  beforeEach(() => {
+    var c = document.createElement(PG_CARD);
+    document.body.appendChild(c);
+  });
+
+  afterEach(() => {
+    while (document.body.firstChild) {
+      document.body.removeChild(document.body.firstChild);
+    }
+  });
+
+  it('should be registered', () => {
+    expect(customElements.get(PG_CARD)).toBeDefined();
+  });
+
+  it('should only expose known props', () => {
+    const props = getAttributes(PG_CARD);
+    expect(props.length).toBe(0);
+  });
+
+});

package/pg/card/card.ts

@@ -0,0 +1,13 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './card.html';
+import style from './card.css';
+
+@Component({
+  selector: 'pg-card',
+  style,
+  template
+})
+export default class PgCard extends HTMLElement {
+
+}

package/pg/card/index.ts

@@ -0,0 +1,3 @@
+import PgCard from './card';
+
+export default PgCard;

package/pg/cardUser/README.md

@@ -0,0 +1,22 @@
+# `<pg-card-user>`
+
+The `pg-card-user` component lets one display a `User` type in a visual card.
+
+```typescript
+import '@pictogrammers/components/pg/cardUser';
+import PgIcon from '@pictogrammers/components/pg/cardUser';
+```
+
+```html
+<pg-card-user></pg-card-user>
+```
+
+## Attributes
+
+| Attributes | Tested   | Description |
+| ---------- | -------- | ----------- |
+| user       | &#x2705; | `User` |
+
+## CSS Variables
+
+See `pg-card`.

package/pg/cardUser/__examples__/basic/basic.html

@@ -0,0 +1,3 @@
+<div class="example">
+  <pg-card-user part="cardUser1"></pg-card-user>
+</div>

package/pg/cardUser/__examples__/basic/basic.ts

@@ -0,0 +1,30 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+import PgCardUser from '../../cardUser';
+import { AVATAR } from './constants';
+import { User } from '../../../shared/models/user';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-card-user-basic',
+  template
+})
+export default class XPgCardUserBasic extends HTMLElement {
+
+  @Part() $cardUser1: PgCardUser;
+
+  connectedCallback() {
+    this.$cardUser1.user = new User().from({
+      "id": "c4ea5584-07e3-11e4-bf19-842b2b6cfe1b",
+      "name": "Austin Andrews",
+      "description": "Hello, I am a developer that gets bored and makes icons, then websites for icons, then more icons. Open Source is pretty awesome.",
+      "base64": AVATAR,
+      "github": "Templarian",
+      "twitter": "Templarian",
+      "iconCount": 928,
+      "website": "http:\/\/templarian.com",
+      "sponsored": true,
+      "core": true
+    } as any);
+  }
+}

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

@@ -0,0 +1 @@
+export const AVATAR = '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';

package/pg/cardUser/cardUser.css

@@ -0,0 +1,67 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  font-family: var(--pg-font-family);
+}
+
+[part="user"] {
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+  grid-template-columns: 4rem 2rem 1.5rem 1fr auto;
+  padding: 0.5rem;
+}
+
+[part="avatar"] {
+  grid-column: 1;
+  grid-row: 1 / span 2;
+  align-self: center;
+}
+
+[part="name"] {
+  grid-column: 2 / span 3;
+  grid-row: 1;
+  white-space: nowrap;
+}
+
+[part="iconCount"] {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) inset;
+  border-radius: 0.25rem;
+  background: rgba(0, 0, 0, 0.05);
+  grid-column: 5;
+  grid-row: 1 / span 2;
+  padding: 0 0.5rem;
+  align-items: stretch;
+  justify-content: center;
+  color: #444;
+  margin-left: 0.5rem;
+}
+
+[part="iconCountValue"] {
+  font-weight: bold;
+}
+
+[part="github"] svg,
+[part="twitter"] svg {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+[part="github"] {
+  grid-row: 2;
+  grid-column: 2;
+  color: #333;
+}
+
+[part="twitter"] {
+  grid-row: 2;
+  grid-column: 3;
+  color: #333;
+}
+
+[part="github"]:hover,
+[part="twitter"]:hover {
+  color: #4f8ff9;
+}

package/pg/cardUser/cardUser.html

@@ -0,0 +1,23 @@
+<pg-card>
+  <div part="loading">
+    Loading...
+  </div>
+  <div part="user">
+    <pg-avatar part="avatar"></pg-avatar>
+    <div part="name"></div>
+    <div part="iconCount">
+      <div part="iconCountValue"></div>
+      <div part="iconCountLabel">Icons</div>
+    </div>
+    <a part="github">
+      <svg viewBox="0 0 24 24">
+        <path fill="currentColor" d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" />
+      </svg>
+    </a>
+    <a part="twitter">
+      <svg viewBox="0 0 24 24">
+        <path fill="currentColor" d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" />
+      </svg>
+    </a>
+  </div>
+</pg-card>

package/pg/cardUser/cardUser.spec.ts

@@ -0,0 +1,46 @@
+import { selectComponent, getAttributes } from '@pictogrammers/element';
+
+import './cardUser';
+import PgCardUser from './cardUser';
+
+const PG_CARD_USER = 'pg-card-user';
+
+describe('pg-card-user', () => {
+
+  beforeEach(() => {
+    var c = document.createElement(PG_CARD_USER);
+    document.body.appendChild(c);
+  });
+
+  afterEach(() => {
+    while (document.body.firstChild) {
+      document.body.removeChild(document.body.firstChild);
+    }
+  });
+
+  it('should be registered', () => {
+    expect(customElements.get(PG_CARD_USER)).toBeDefined();
+  });
+
+  it('should only expose known props', () => {
+    const props = getAttributes(PG_CARD_USER);
+    expect(props.length).toBe(1);
+    expect(props).toContain('user');
+  });
+
+  /*
+  it('should default path value', () => {
+    const component = selectComponent<PgIcon>(PG_CARD_USER);
+    const { $path } = component;
+    expect($path.getAttribute('d')).toEqual(DEFAULT_ICON);
+  });
+
+  it('path should be set', async () => {
+    const component = selectComponent<PgIcon>(PG_CARD_USER);
+    const { $path } = component;
+    await component.setAttribute('path', ICON);
+    expect($path.getAttribute('d')).toEqual(ICON);
+  });
+  */
+
+});

package/pg/cardUser/cardUser.ts

@@ -0,0 +1,53 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './cardUser.html';
+import style from './cardUser.css';
+
+import { addTooltip } from '../tooltip/addTooltip';
+import { User } from '../shared/models/user';
+import '../card/card';
+import '../avatar/avatar';
+import PgAvatar from '../avatar/avatar';
+
+@Component({
+  selector: 'pg-card-user',
+  style,
+  template
+})
+export default class PgCardUser extends HTMLElement {
+  @Prop() user: User | null = null;
+
+  @Part() $loading: HTMLDivElement;
+  @Part() $user: HTMLDivElement;
+  @Part() $name: HTMLDivElement;
+  @Part() $github: HTMLAnchorElement;
+  @Part() $twitter: HTMLAnchorElement;
+  @Part() $iconCountValue: HTMLDivElement;
+  @Part() $avatar: PgAvatar;
+
+  connectedCallback() {
+    addTooltip(this.$github, () => {
+      return `View ${this.user?.github} on GitHub`;
+    });
+    addTooltip(this.$twitter, () => {
+      return `View ${this.user?.twitter} on Twitter`;
+    });
+  }
+
+  render(changes) {
+    if (changes.user && this.user) {
+      this.$avatar.user = this.user;
+      this.$name.innerText = `${this.user.name}`;
+      this.$iconCountValue.innerText = `${this.user.iconCount}`;
+      this.$github.href = `https://github.com/${this.user.github}`;
+      this.$github.style.setProperty('display', this.user.github ? null : 'none');
+      this.$twitter.href = `https://github.com/${this.user.twitter}`;
+      this.$twitter.style.setProperty('display', this.user.twitter ? null : 'none');
+      this.$user.style.setProperty('display', null);
+      this.$loading.style.setProperty('display', 'none');
+    } else {
+      this.$user.style.setProperty('display', 'none');
+      this.$loading.style.setProperty('display', null);
+    }
+  }
+}

package/pg/cardUser/index.ts

@@ -0,0 +1,3 @@
+import PgCardUser from './cardUser';
+
+export default PgCardUser;