Feat: uui-card-block-type (#689)

Co-authored-by: Niels Lyngsø <[email protected]>

Author: loivsen

package-lock.json

@@ -0,0 +1,31 @@
+# uui-card-block-type
+
+![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-card-block-type?logoColor=%231B264F)
+
+Umbraco style card-block-type component.
+
+## Installation
+
+### ES imports
+
+```zsh
+npm i @umbraco-ui/uui-card-block-type
+```
+
+Import the registration of `<uui-card-block-type>` via:
+
+```javascript
+import '@umbraco-ui/uui-card-block-type';
+```
+
+When looking to leverage the `UUICardBlockTypeElement` base class as a type and/or for extension purposes, do so via:
+
+```javascript
+import { UUICardBlockTypeElement } from '@umbraco-ui/uui-card-block-type';
+```
+
+## Usage
+
+```html
+<uui-card-block-type></uui-card-block-type>
+```

packages/uui-card-block-type/README.md

@@ -0,0 +1 @@
+export * from './uui-card-block-type.element';

packages/uui-card-block-type/lib/index.ts

@@ -0,0 +1,188 @@
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
+import { css, html, nothing } from 'lit';
+import { UUICardElement } from '@umbraco-ui/uui-card/lib';
+import { styleMap } from 'lit/directives/style-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+import { property } from 'lit/decorators.js';
+
+export type BlockTypeIcon = {
+  name?: string;
+  color?: string;
+};
+
+/**
+ * @element uui-card-block-type
+ */
+@defineElement('uui-card-block-type')
+export class UUICardBlockTypeElement extends UUICardElement {
+  /**
+   * Block type name
+   * @type {string}
+   * @attr name
+   * @default ''
+   */
+  @property({ type: String })
+  name = '';
+
+  /**
+   * Block type description
+   * @type {string}
+   * @attr description
+   * @default undefined
+   */
+  @property({ type: String })
+  description?: string;
+
+  @property({ type: String, attribute: 'background' })
+  background?: string;
+
+  render() {
+    return html`
+      <div
+        id="portrait"
+        style=${styleMap({ backgroundColor: this.background })}>
+        <slot></slot>
+      </div>
+      ${this.href ? this.#renderLink() : this.#renderButton()}
+
+      <slot name="tag"></slot>
+      <slot name="actions"></slot>
+    `;
+  }
+
+  #renderButton() {
+    return html`
+      <button
+        id="open-part"
+        tabindex=${this.disabled ? (nothing as any) : '0'}
+        @click=${this.handleOpenClick}
+        @keydown=${this.handleOpenKeydown}>
+        <strong>${this.name}</strong><small>${this.description}</small>
+      </button>
+    `;
+  }
+
+  #renderLink() {
+    return html`
+      <a
+        id="open-part"
+        tabindex=${this.disabled ? (nothing as any) : '0'}
+        href=${ifDefined(!this.disabled ? this.href : undefined)}
+        target=${ifDefined(this.target || undefined)}
+        rel=${ifDefined(
+          this.target === '_blank' ? 'noopener noreferrer' : undefined
+        )}>
+        <strong>${this.name}</strong><small>${this.description}</small>
+      </a>
+    `;
+  }
+
+  static styles = [
+    ...UUICardElement.styles,
+    css`
+      :host {
+        flex-direction: column;
+        justify-content: flex-start;
+      }
+
+      :host(:hover) #info {
+        color: var(--uui-color-interactive-emphasis);
+      }
+
+      #portrait {
+        background-color: var(--uui-color-surface-alt);
+        display: flex;
+        justify-content: center;
+        min-height: 150px;
+        max-height: 150px;
+      }
+
+      slot:not([name])::slotted(*) {
+        align-self: center;
+        font-size: var(--uui-size-8);
+        border-radius: var(--uui-border-radius);
+        object-fit: cover;
+        max-width: 100%;
+        max-height: 100%;
+      }
+
+      #open-part {
+        text-align: left;
+        background-color: var(--uui-color-surface);
+        cursor: pointer;
+        color: var(--uui-color-interactive);
+        border: none;
+        border-top: 1px solid var(--uui-color-divider);
+        border-radius: 0 0 var(--uui-border-radius) var(--uui-border-radius);
+        font-family: inherit;
+        font-size: var(--uui-type-small-size);
+        box-sizing: border-box;
+        padding: var(--uui-size-2) var(--uui-size-4);
+        display: flex;
+        flex-direction: column;
+        line-height: var(--uui-size-6);
+      }
+
+      :host([disabled]) #open-part {
+        pointer-events: none;
+        background: var(--uui-color-disabled);
+        color: var(--uui-color-contrast-disabled);
+      }
+
+      #open-part:hover strong {
+        text-decoration: underline;
+      }
+      #open-part:hover {
+        color: var(--uui-color-interactive-emphasis);
+      }
+
+      :host([image]:not([image=''])) #open-part {
+        transition: opacity 0.5s 0.5s;
+        opacity: 0;
+      }
+      slot[name='tag'] {
+        position: absolute;
+        top: var(--uui-size-4);
+        right: var(--uui-size-4);
+        display: flex;
+        justify-content: right;
+      }
+
+      slot[name='actions'] {
+        position: absolute;
+        top: var(--uui-size-4);
+        right: var(--uui-size-4);
+        display: flex;
+        justify-content: right;
+
+        opacity: 0;
+        transition: opacity 120ms;
+      }
+      :host(:focus) slot[name='actions'],
+      :host(:focus-within) slot[name='actions'],
+      :host(:hover) slot[name='actions'] {
+        opacity: 1;
+      }
+
+      :host(
+          [image]:not([image='']):hover,
+          [image]:not([image='']):focus,
+          [image]:not([image='']):focus-within,
+          [selected][image]:not([image='']),
+          [error][image]:not([image=''])
+        )
+        #open-part {
+        opacity: 1;
+        transition-duration: 120ms;
+        transition-delay: 0s;
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'uui-card-block-type': UUICardBlockTypeElement;
+  }
+}