Merge branch 'v1/contrib' into feature/input-lock-border-inside-input

Author: nielslyngsoe

.eslintrc.js

@@ -27,6 +27,15 @@ module.exports = {
         'lit/prefer-nothing': 'error',
         'local-rules/uui-class-prefix': 'warn',
         'local-rules/prefer-static-styles-last': 'warn',
+        'no-restricted-syntax': [
+          'warn',
+          {
+            message:
+              'Elements should not be defined with customElement, use defineElement instead.',
+            selector:
+              'ClassDeclaration > Decorator[expression.callee.name="customElement"]',
+          },
+        ],
       },
       parserOptions: {
         project: './tsconfig.json',

package-lock.json

@@ -128,7 +128,7 @@
     "tsc-files": "1.1.4",
     "turbo": "1.10.15",
     "typescript": "5.2.2",
-    "vite": "5.0.4",
+    "vite": "5.0.5",
     "vite-tsconfig-paths": "4.2.0",
     "web-component-analyzer": "1.1.7"
   },

package.json

@@ -3,3 +3,4 @@ export * from './demandCustomElement';
 export * from './drag';
 export * from './math';
 export * from './findAncestorByAttributeValue';
+export * from './slotHasContent';

packages/uui-base/lib/utils/index.ts

@@ -0,0 +1,5 @@
+export function slotHasContent(target: EventTarget | null): boolean {
+  return target
+    ? (target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0
+    : false;
+}

packages/uui-base/lib/utils/slotHasContent.ts

@@ -32,8 +32,8 @@ export default {
 const Template: Story = props => {
   return html`
     <uui-box
-      .headline=${props.headline}
-      .headlineVariant=${props.headlineVariant}>
+      headline="${props.headline}"
+      headline-variant="${props.headlineVariant}">
       <p>Some content of this box, appended in the default slot.</p>
       <p>The headline is currently rendered as a ${props.headlineVariant}.</p>
     </uui-box>

packages/uui-box/lib/uui-box.story.ts

@@ -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;
+  }
+}