feat: add new <pl-button> component to make Button-like styles more reusable

Author: sghoweri

packages/uikit-workshop/src/scripts/lit-components/pl-button/pl-button.js

@@ -0,0 +1,98 @@
+import { LitElement, html, customElement } from 'lit-element';
+import { Slotify } from './slotify';
+import styles from './pl-button.scss?external';
+
+// This decorator defines the element.
+@customElement('pl-button')
+class Icon extends Slotify(LitElement) {
+  static get properties() {
+    return {
+      href: {
+        attribute: true,
+        type: String,
+      },
+      target: {
+        attribute: true,
+        type: String,
+      },
+      size: {
+        attribute: true,
+        type: String,
+      },
+      iconOnly: {
+        attribute: 'icon-only',
+        type: Boolean,
+        reflect: true,
+      },
+    };
+  }
+
+  createRenderRoot() {
+    return this;
+  }
+
+  connectedCallback() {
+    super.connectedCallback && super.connectedCallback();
+    styles.use();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback && super.disconnectedCallback();
+    styles.unuse();
+  }
+
+  innerTemplate() {
+    return html`
+      ${this.slotify('before')
+        ? html`
+            <span class="pl-c-button__icon">${this.slotify('before')}</span>
+          `
+        : ''}
+      ${this.slotify('default')
+        ? html`
+            <span
+              class="pl-c-button__text ${this.iconOnly ? 'is-vishidden' : ''}"
+              >${this.slotify('default')}</span
+            >
+          `
+        : ''}
+      ${this.slotify('after')
+        ? html`
+            <span class="pl-c-button__icon">${this.slotify('after')}</span>
+          `
+        : ''}
+    `;
+  }
+
+  // Render element DOM by returning a `lit-html` template.
+  render() {
+    const size = this.size || 'medium';
+    // const iconOnly = this.iconOnly !== false|| false;
+
+    return html`
+      ${this.href
+        ? html`
+            <a
+              class="pl-c-button pl-c-button--${size} ${this.iconOnly
+                ? 'pl-c-button--icon-only'
+                : ''}"
+              href="${this.href}"
+              target="${this.target ? this.target : 'self'}"
+            >
+              ${this.innerTemplate()}
+            </a>
+          `
+        : html`
+            <button
+              class="pl-c-button pl-c-button--${size} ${this.iconOnly
+                ? 'pl-c-button--icon-only'
+                : ''}"
+            >
+              ${this.innerTemplate()}
+            </button>
+          `}
+    `;
+  }
+}
+
+export { Icon };

packages/uikit-workshop/src/scripts/lit-components/pl-button/pl-button.scss

@@ -0,0 +1,85 @@
+:host {
+  width: 100%;
+}
+
+pl-button {
+  width: 100%;
+}
+
+.pl-c-button {
+  color: inherit;
+  text-decoration: none;
+  background: transparent;
+  border: 0;
+  appearance: none;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin: 0;
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+  cursor: pointer;
+  position: relative;
+  min-width: 30px;
+
+  &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity .1s ease;
+    background-color: currentColor;
+  }
+
+  // &:focus,
+  &:hover {
+    &:after {
+      opacity: 0.1;
+    }
+  }
+
+  &:active:hover {
+    &:after {
+      opacity: 0.2;
+    }
+  }
+
+  &:focus {
+    outline: 1px dotted;
+    outline-offset: -1px;
+
+    &:after {
+      opacity: 0.1;
+    }
+  }
+}
+
+.pl-c-button--medium {
+  padding: 0.65rem 1rem;
+
+  &.pl-c-button--icon-only {
+    padding: 0.65rem;
+  }
+}
+
+.pl-c-button--small {
+  padding: 0.5rem 1rem;
+
+  &.pl-c-button--icon-only {
+    padding: .5rem;
+  }
+}
+
+// Make sure the text and icon align to the opposite ends
+* + .pl-c-button__icon {
+  margin-right: 0.5rem;
+}
+
+.pl-c-button__icon + * {
+  margin-right: 0.5rem;
+}