@pictogrammers/components 0.3.1

package/pg/avatar/avatar.spec.ts

@@ -0,0 +1,51 @@
+import { selectComponent, getAttributes } from '@pictogrammers/element';
+
+import './avatar';
+import PgAvatar from './avatar';
+
+import { User } from '../shared/models/user';
+
+const PG_AVATAR = 'pg-avatar';
+const AVATAR = 'iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAP+ElEQVR4AezY3U7CQBDF8aoI1I9aK7XiW2trFfUJ+maWvoNuMabsudmcOJnswl78w/3+MjNA8vg5dKbvsTX08DFVQffvdiW0gu42Y9tdBXT7ZpdDN6922V7X0FVrdwldvNil0LKZWkDzprc6r+1m0Nnz1Cl08mSX/DWCuDAOHAQwBEAAgwZZewwSQQCDAHFgyIBkxwLiwBAA2fIggCENknoLAhj8dESQmRSIefDO5MYQAxkIkAhCYBDrigDJoQgCAIChta4iSOWMx9AHcWN4D1IZEAKCnA7tg64AAhjqIIjg+XR48LcJD5IgCAOBGPwxD/9+8CCI4QCBBycwxKbDhBhH9aOQByl5jFDXFX/QNUF4jH9PRwQhEHgMiekI937wIKUBgcemIRBjavBgOgIEkcfgp0PhmPt/0BGEQeAx5KYj/PtBgCCCPkZQ0yEPsjIg+NAEhDJGBAEIIQzJb1YESCq/rvRBeAjECHo6dO8HguDjI4I+Bj8dAa4rANkMHQEAEAQGt6oUpsNjECcAQIhiQDxG+OuKBil4CMTwalV5u64QpMD0MfhVJTEdPoEUBkQLIt9HaHvz+VvW2u0wWqHpaMZ6q2Vtt4Dm9deUCIYkCIHww8udxcZVnQEcJzNOZsZ2vFgUiQoQUquqlSp4gCK6gFAJFVJUHihSW6motH1pH4pUCnHiZfbxEmeJl5gUygJJA0oJaUSQaBLaAkpiwMvYs+9L7LE9Hi/xEh6/fud+c3wzl5k5d5y5efhr8ISMx/fn79zlDlBFIbAs/OTdBXBdXoYLsTW4urgBX3311WZzy+twKbkKR75Yht2nEeDoPIVAajGUIE+ezsH169crLruyAVdSq9D/5bL0Gtv756iBeUzD6RCDiBDEU3H/8QU4HVhlG73oD7+xsVE09mefJlZh16msBFN/NIupx8Dw7y7w19ty/L1cRqAn30OA/jlsHmoQRxOQ5mO5U+KNXflE3IcQ7gz9MCVStSFYiYV1eOwdRBnKw4gxtg4iaB6nZ/cNMPp+MYb2IIL9xCsT10ogVIxR8NwHgRVoGJyFOoSpQxjRjlwLEN6V1Bo0D2VAf2QOUebVT0e1QZrKdO9rC5BY3NAEgzeL+5pvvZLhKCUwtAah1tY34EcnEOTwrISiu1UgTSr63lsLsLZxXVMM3kRyCeoPpBgKAmgNIu7p9+clFN0RROkXYwhBxBtcgPGmCEMMoRZjJILfs3UUmjqnoP5gGmqHFBhagghQdISiMYjg5O72Y1lYXN24dRh7voSmdjc0mb3QaA1A3aFpGUNTEHH3vzZDKP3zCKA9CAIowvV7JL1WEcTC8hoMnE/A7n433LNvBFpeuALf3DMCj/VNgPVfEYjNrhT9exc8c3mMScKw+KHRHoRGRwjqDs8gQOUg5724H3phBGqlPmfh9/gCfrB/EtrORCE0s1wRyBL+Ypr6UhLKNpwU9RhiENzg4v54fkk1xEzuGvx8YBJaXvwcWvaNQ0vbBLS0u6kONzSz2rG9Y/Bw7wT4ri4VYrSOyhhWGaMhXy2iVAziw8na54ba9imo7fBAbacXTJ0+DB87MPyzb9sn4Eo4pxrlrHcR9D0p2HZ4DlG2ANKIILSBK6sZz7zXN0QQ1BufpqHlJYIgAIQxT0GLxQMtVi80W1g+aDZ7Kdw/NLeNw/6PEnBmNIMYY2UxdjqCrAIU45AqEMIw+6DWFpQysaysAJgsATB2+sHY5oHfvh1WjXLfQAR0vWk2JRxDe5CuKysCCKrtvTC0tI5KE0EQhNBiQwC7H5ptAUV+qSZEauqYgqY2Nz1aZIwGJQY+8hAFMVSD0GTgxq91hMHkiIDJHs4XASM+Gm0YAhnNfnjooFcVyHh6BWoQU7f/qrYgDbzhLDuqEr6xwYtJaNk7RhidbCIIooVB2ANYsDDcuE08O2b1Yz6pRkRqUGIUqR4zIYpqkE4vTQfD2CwqZWQ5MXzOgDA7LEF4fDioCuWe/SGosYZg24GZmwdpEPTUGfGaGpxe5pNBGFYZgqWEkDFCPI7DpkKBES6FgYWlEKUiEA5BEQTP4IyBAZ/bkUcZ/N+08Od/+fI8TkkQ9PYobDuYUQ/SgCAiAGVng9eEb+iBboTYh3VOKjCUEJgSwinHEcQYYTkn9cQ/ZsqD+AnEZAsVxTBwDGwHA3FGYAcuYwZcvq6trZd7bfzzDdCbA6C3RUDviBGKJiB4qLu6Xh5jMrlEO/AON+20EUMEocRoxBQQJTDwOQUE72evJwQTkkMQH5iseRAnpoDAECIq50AUBLR8dFX4S4nTjSBh0ONr6F1xQqkmyE46uhKe3P3u7RC0tE9AsxmPlqzlMX55Mg2vjGQL+ltBC5sdk8rmW/haDwzHoN4elDDqHAjyhgDEn6PDXDYh8vLEIhRXDFOAYNsRpckVFJ+9n0iCHrEJJMFSoohBdgp69N2FkhC8O9rG8Jxikg5lbYGyU+G4kKnambLzYgbqrX7ECEGdM4IgSTGImUCEGDx8bjvGUHIra2Vfv+vjDOgtCOLgIFiXAIWBCBAK+vWH4pPB5jacjk4PTQcCyCmXJgYyUzWQDzw5qLP4oM6uHsSIINKhLcdwySkgOAaFz53zlj+4OT6alUEQghKgVAryl48XRWfkCOKmkz17gGOU3E/YqwgylV6GOrMXQYK0ZKkC8UsgMoRiOvBRgUEh3tDlbNnXvxhcRJAggkQRIb6JoWN1J+G2g7NbB+H3tZ+/UP63Ip1FkHYZpDgEpgGIO5UHsVUGYrCHv45BlQCJSyD9l7LC11eCcAzebYcUKPXDuVNsQ6vt2XM58dFFxySd1NmDJSH40ZO9ivuQ8SQHCSFIBJ5QAWIgEJUYcTn8+rRnsezrvzOW5SBKCCXK1kHw3rYYpB1BLD7ECHIMBYQ2IP8N5hDEJ4HUVgyCGF1xVhGMeGH479Tg8+lc+Z16738yoEMQnTOGG74ISE+Kx1EqB7ljeFa4YXa/GkYQLwMpBUE5w1UFeXNkVgKptSOIs0IQJQZPAUEYcfa88P08+y5udGuIQEphKFEqAaljDWWFb+Tc1AI0mj3QaA+UhKBCcG93AB7s88CDvZOYGx7smdjsgc3cUtML5a8QvHg2CbUSCJ1X7HojJQaxBMDgiBTBwK8VEFQCQRLw3BnxL+bdvTgdtjDo8DVKQ/DSUrfVIQjb0Ko7moXPYuIbN3favdBgZRcEb8SQIXZi0lm2PQg7bX7YiRO108zzQH1nPvya1WjxCL/nw/0BMJn9dF3KFasIRAmBcQQlBhaH6cV14fvRdQY4iBDipkD+cE68H/nQm4MGsw8abMGiEDz6OogwAYQJQD0PoXjs6/aPxEdjpnYPu4dBIF0xePxNdSB4fUqAkSCMfL8/Oyd8L+9PzIPOjCCOKE2GCKOX2hJI/YC6df9XJ+I0JY5iEMryV2vxn5V9oycC64Lv9UVske7ysSu3rigYMTUgO8wMJCJjKCCUGHcepv2SqIcGwwX7DwGEAET0ycDBeTg+ru625iMvR9hvPiKESmLU81wRZdIZ93h6Vfh9fnMiSpdB7NJlEAQRT8i/ZRAGQXEIXjfFMBr7EpBZFi9VmdxqwXKFIEIIGeRo7hTf0KrDHfudQ+J7ArxnjidwSSIUIQTPiZC4YT+Jrqj4wNo6mNomcbnyS3f5ZJC0GMSCII6IEOPewRRkV9T9vL94K0aHu3T+oRoD7zBuHaR2YA6OXJpXjXJmKge3uxhKkJYmgig5FT9+NQVzy+pe23IuyT6YQLdaceMaccNilYG44koIjA5x2y9mVX+cyXd1GafDT9PhZNORUgWBbR3ExBrMSnflZnKrFX2K/PTkIux6LUEoin3GXQei8OcPMhCZX1P9mosra2DE6TCaaTpwMioC4UuW8vD2+8fScOhSTnirWtndXT6cjhBORwynI6kWQgxiEjWE4b7kO8P0Q1eY8Iqx2h4d8OWv2AalpYpjGDiI+H1U7b08dxIRzOzcA5cqFy1VQgwliAlBSm10MQpOSf8sPHVScPdMo/afT4FRWqoCOB0RMPLLHwIQLTr6yQztyK20VHEMIQSvb1pKDCKeEgnl6ZOpW4rxzy9nwdg+BUa2I+c3mBChEOTW/KIc+wwxOvyFh7m9KdUQvG1CEDX/BesgNjAPxiMZ2PV6nB3xaL4BToxkCMPsIwy69FEY7pQff0t7kM5zKRnDEeNHVRVhbOMpQPjGrjzcwXOUu/vC4J9e1mwD/OmdSAGGwcEumxdC8H6q4YQsXVuHRwYD/Hyj8BC3cggZxIgglQEIUHD5Mrki8PypCKyuVW9arkRycJd1gvYZFr8QY0eXdiDDn87A9rYpOtewRWiZIgz1y5PWIAYeohiO4Prek4D6fePw1/eikF3ih8aVd96bhft7J/OHtj7ECCBGOH//m0OwOAQPQaq4ZOFSLH1ArrETIcwBWqLsUflMvDelBBBPhbIDM1sDMYjCaTH0z4FxfwrqLH6oa3PDd11ucHyYgNF4+bts0wurcPLzDDzzdz+YWsfA2OHhEHwqGIYCQoHRTd0sSHR2RUL4Yb8fdHsZRDAPceNUMIz0zUJQHIQ2ZFUjFLaE9aXpo5oWujQuXZHdOwGmPWNgenEU6veM4iP20igYW8dpEjq9dKJnwax5CHtEnoru0lPBMTD6DBV+v5pWN9TsmcDGN9O/hOFzUq3skdJJuRHAA7p2n4xgC9NEcIjuqkFoDKL831IM4hJ28OoNnywP5T/yH5A/8s+ysoKUjRWiM29HlEMIp0JZTf5Waw1+7xp8rRp8TZZeKvy1dFKRfFECcMQIwRVXD6EOQysQAhBlODTNLotTzghu6CI5o3KEoIDgGMnSEPyCYE+SIhie/HEcRTqpJK/ELdfq7CeKdjDDIpBqbXwxygxda+J1xYuFAAmsOAQ+qsZQpu9JFanYldhUvnRBmkBwDA6y4+j/27mD1OZhIIDCwjb/f/YurJQeI/eyk/YUtcii1LwOJU9FVsjiHSDzoRnIwh9nHqCPvqTzb15+AYHrqT4EYkAGohRDMEhlAIhR/lMeIsbwEHY9cfnCIJUBuLzcAeFfxWgg/J0IMWIQNXxu2lVQGEK8ipefIUaAaHAnAOKrtA3qHA+yLgKg1ITgjrmeShLEA3B5uQtCvAq/njxEfZBJNL59b5qXbtaTuBMOZArzCIziIRjjOHcCO11LNxAxZIkAzUsEEWN0cCdCDA/iAUrDrjGv970KfyfaQQCIGL5FgPLqIY55Jxii9PoOIGLQAgE/jTfM66PdiRijtA3qvNUEgSF2zetj3QmG+DuQwSMwyoH/7vAQDOIH7yGwdEPpYD0JiFL5rcMG4ofrAai0L18EBNTqThBEiUGOhQAoXd8JgBAgZvgCAlB6vROAIUD84AUCoQiI9uspADFDFQi+07Xv9eRBGgMwSicQDUCSTKD0dSdqg6T2EUovdyIubSBHHLBAab+eniA7lMYQTxBASfkS1u5OxH0Csf/OUiSfWXwAAAAASUVORK5CYII=';
+const DEFAULT_AVATAR = 'data:image/png;base64,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';
+
+describe('pg-avatar', () => {
+
+  beforeEach(() => {
+    var c = document.createElement(PG_AVATAR);
+    document.body.appendChild(c);
+  });
+
+  afterEach(() => {
+    while (document.body.firstChild) {
+      document.body.removeChild(document.body.firstChild);
+    }
+  });
+
+  it('should be registered', () => {
+    expect(customElements.get(PG_AVATAR)).toBeDefined();
+  });
+
+  it('should only expose known props', () => {
+    const props = getAttributes(PG_AVATAR)
+    expect(props.length).toBe(1);
+    expect(props).toContain('user');
+  });
+
+  it('should default avatar picture', () => {
+    const component = selectComponent<PgAvatar>(PG_AVATAR);
+    const { $img } = component;
+    expect($img.getAttribute('src')).toEqual(DEFAULT_AVATAR);
+  });
+
+  it('img should be set', async () => {
+    const component = selectComponent<PgAvatar>(PG_AVATAR);
+    const { $img } = component;
+    const user = new User();
+    const encoded = `data:image/png;base64,${AVATAR}`;
+    user.base64 = encoded;
+    component.user = user;
+    expect($img.getAttribute('src')).toEqual(encoded);
+  });
+
+});

package/pg/avatar/avatar.ts

@@ -0,0 +1,37 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './avatar.html';
+import style from './avatar.css';
+
+import { User } from '../shared/models/user';
+import { addTooltip } from '../tooltip/addTooltip';
+
+const noAvatar = 'data:image/png;base64,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';
+
+@Component({
+  selector: 'pg-avatar',
+  style,
+  template
+})
+export default class PgAvatar extends HTMLElement {
+  @Prop() user: User = new User();
+
+  @Part() $img: HTMLImageElement;
+  @Part() $sponsored: HTMLAnchorElement;
+
+  connectedCallback() {
+    addTooltip(this.$sponsored, () => {
+      return `Sponsor ${this.user.name} on GitHub`;
+    });
+  }
+
+  render(changes) {
+    if (changes.user) {
+      this.$img.src = this.user.base64 || noAvatar;
+      this.$sponsored.style.display = this.user.sponsored ? 'flex' : 'none';
+      if (this.user.sponsored) {
+        this.$sponsored.href = `https://github.com/sponsors/${this.user.github}`;
+      }
+    }
+  }
+}

package/pg/avatar/index.ts

@@ -0,0 +1,3 @@
+import PgAvatar from './avatar';
+
+export default PgAvatar;

package/pg/button/README.md

@@ -0,0 +1,51 @@
+# `<pg-button>`
+
+The `pg-button` component is essentially just a styled button, but it also allows special rendering for `pg-button-group` and `pg-icon`.
+
+```typescript
+import '@pictogrammers/components/pg/button';
+import PgButton from '@pictogrammers/components/pg/button';
+```
+
+```html
+<pg-button>Click Me!</pg-button>
+```
+
+| 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>
+  <pg-icon path="M...Z"></pg-icon>
+  Hello!
+</pg-button>
+```

package/pg/button/__examples__/basic/basic.html

@@ -0,0 +1,11 @@
+<div class="example">
+  <div class="example-flex">
+    <pg-button>Example Button</pg-button>
+    <pg-button><pg-icon path="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"></pg-icon></pg-button>
+    <pg-button>
+      <pg-icon path="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"></pg-icon>
+      With Icon
+    </pg-button>
+  </div>
+  <pg-button block>Block Button</pg-button>
+</div>

package/pg/button/__examples__/basic/basic.ts

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

package/pg/button/__examples__/states/states.html

@@ -0,0 +1,8 @@
+<h4>Active</h4>
+<pg-button active part="active">Button</pg-button>
+<h4>Start</h4>
+<pg-button start>Button</pg-button>
+<h4>Center</h4>
+<pg-button center>Button</pg-button>
+<h4>End</h4>
+<pg-button end>Button</pg-button>

package/pg/button/__examples__/states/states.ts

@@ -0,0 +1,20 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+import PgButton from '../../button';
+
+import template from './states.html';
+
+@Component({
+  selector: 'x-pg-button-states',
+  template
+})
+export default class XPgButtonStates extends HTMLElement {
+  @Part() $active: PgButton;
+
+  connectedCallback() {
+    this.$active.addEventListener('click', this.handleActive.bind(this));
+  }
+
+  handleActive() {
+    this.$active.active = !this.$active.active;
+  }
+}

package/pg/button/button.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;
+  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-button-hover-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 {
+  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"].active:hover {
+  box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.5) inset;
+  background-color: var(--pg-button-color, #453C4F);
+  color: var(--pg-button-hover-color, #fff);
+}
+
+[part="button"].block {
+  flex: 1;
+}
+
+::slotted {
+  align-self: center;
+}

package/pg/button/button.html

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

package/pg/button/button.ts

@@ -0,0 +1,45 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+
+import template from './button.html';
+import style from './button.css';
+
+@Component({
+  selector: 'pg-button',
+  style,
+  template
+})
+export default class PgButton extends HTMLElement {
+  @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: HTMLButtonElement;
+
+  connectedCallback() {
+    this.$button.addEventListener('click', (e) => {
+      e.stopPropagation();
+      this.dispatchEvent(new CustomEvent('click'));
+    });
+  }
+
+  render(changes) {
+    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/button/index.ts

@@ -0,0 +1,3 @@
+import PgButton from './button';
+
+export default PgButton;

package/pg/buttonGroup/README.md

@@ -0,0 +1,28 @@
+# `<pg-button-group>`
+
+The `pg-button-group` wraps the `pg-button` component.
+
+```typescript
+import '@pictogrammers/components/pg/buttonGroup';
+import PgButtonGroup from '@pictogrammers/components/pg/buttonGroup';
+```
+
+```html
+<pg-button-group>
+  <pg-button active>Hello</pg-button>
+  <pg-button>World</pg-button>
+</pg-button-group>
+```
+
+### Slots
+
+Special styling is applied for `pg-button`.
+
+```html
+<pg-button-group>
+  <pg-button>
+    <pg-icon path="M...Z"></pg-icon>
+    With Icons
+  </pg-button>
+</pg-button-group>
+```

package/pg/buttonGroup/__examples__/basic/basic.html

@@ -0,0 +1,12 @@
+<div class="example example-flex">
+  <pg-button-group>
+    <pg-button><pg-icon path="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"></pg-icon></pg-button>
+    <pg-button>
+      <pg-icon path="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"></pg-icon>
+      With Icon
+    </pg-button>
+    <pg-button active>
+      active
+    </pg-button>
+  </pg-button-group>
+</div>

package/pg/buttonGroup/__examples__/basic/basic.ts

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

package/pg/buttonGroup/buttonGroup.css

@@ -0,0 +1,4 @@
+:host {
+  display: inline-flex;
+  flex-direction: row;
+}

package/pg/buttonGroup/buttonGroup.html

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

package/pg/buttonGroup/buttonGroup.spec.ts

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

package/pg/buttonGroup/buttonGroup.ts

@@ -0,0 +1,50 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+
+import template from './buttonGroup.html';
+import style from './buttonGroup.css';
+import PgButton from '../button/button';
+import PgButtonLink from '../buttonLink/buttonLink';
+
+const PG_BUTTON = 'PG-BUTTON';
+const PG_BUTTON_LINK = 'PG-BUTTON-LINK';
+
+function isButton(ele: PgButton | PgButtonLink) {
+  return ele.tagName === PG_BUTTON || ele.tagName === PG_BUTTON_LINK;
+}
+
+@Component({
+  selector: 'pg-button-group',
+  style,
+  template
+})
+export default class PgButtonGroup extends HTMLElement {
+  @Part() $slot: HTMLSlotElement;
+
+  connectedCallback() {
+    this.$slot.addEventListener('slotchange', this.handleSlotChange.bind(this))
+  }
+
+  handleSlotChange(e) {
+    const elements = this.$slot.assignedElements();
+    if (elements.length !== 0) {
+      const first  = elements[0] as PgButton;
+      if (isButton(first)) {
+        first.start = true;
+      }
+      const last = elements[elements.length - 1] as PgButton;
+      if (isButton(last)) {
+        last.end = true;
+      }
+      for (let i = 0; i < elements.length; i++) {
+        const element = elements[i] as PgButton;
+        if (isButton(element)) {
+          element.center = !element.start && !element.end;
+        }
+      }
+    }
+  }
+
+  render(changes) {
+
+  }
+}

package/pg/buttonGroup/index.ts

@@ -0,0 +1,3 @@
+import PgButtonGroup from './buttonGroup';
+
+export default PgButtonGroup;

package/pg/buttonLink/README.md

@@ -0,0 +1,51 @@
+# `<pg-button>`
+
+The `pg-button-link` component is essentially just a styled anchor, but it also allows special rendering for `pg-button-group` and `pg-icon`.
+
+```typescript
+import '@pictogrammers/components/pg/buttonLink';
+import PgButtonLink from '@pictogrammers/components/pg/buttonLink';
+```
+
+```html
+<pg-button-link>Click Me!</pg-button-link>
+```
+
+| 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-link>
+  <pg-icon path="M...Z"></pg-icon>
+  Hello!
+</pg-button-link>
+```

package/pg/buttonLink/__examples__/basic/basic.html

@@ -0,0 +1,17 @@
+<div class="example">
+  <div class="example-flex">
+    <pg-button-link href="#test">Example Button Link</pg-button-link>
+    <pg-button-link href="#test">
+      <pg-icon
+        path="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z">
+      </pg-icon>
+    </pg-button-link>
+    <pg-button-link href="#test">
+      <pg-icon
+        path="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z">
+      </pg-icon>
+      With Icon
+    </pg-button-link>
+  </div>
+  <pg-button-link href="#test" block>Block Button Link</pg-button-link>
+</div>

package/pg/buttonLink/__examples__/basic/basic.ts

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