Merge pull request #145 from umbraco/feature/uui-input-lock

uui-input-lock

Author: JesmoDev

package-lock.json

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

packages/uui-input-lock/README.md

@@ -0,0 +1 @@
+export * from './uui-input-lock.element';

packages/uui-input-lock/lib/index.ts

@@ -0,0 +1,77 @@
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
+import { css, html } from 'lit';
+import { UUIInputElement } from '@umbraco-ui/uui-input/lib';
+import {
+  iconLock,
+  iconUnlock,
+} from '@umbraco-ui/uui-icon-registry-essential/lib/svgs';
+import { property } from 'lit/decorators.js';
+
+/**
+ * @element uui-input-lock
+ * @extends uui-input
+ */
+@defineElement('uui-input-lock')
+export class UUIInputLockElement extends UUIInputElement {
+  static styles = [
+    ...UUIInputElement.styles,
+    css`
+      #lock {
+        height: 100%;
+
+        --uui-button-padding-top-factor: 0;
+        --uui-button-padding-bottom-factor: 0;
+        --uui-button-padding-left-factor: 0.75;
+        --uui-button-padding-right-factor: 0.75;
+        font-size: 12px;
+      }
+
+      :host([locked]) #input {
+        cursor: not-allowed;
+        opacity: 0.5;
+      }
+    `,
+  ];
+
+  /**
+   * Determine the inputs locked state.
+   * @type {boolean}
+   * @attr
+   * @default true
+   */
+  @property({ type: Boolean, reflect: true })
+  public locked: boolean = true;
+
+  constructor() {
+    super();
+    this.readonly = true;
+  }
+
+  _onLockToggle() {
+    this.readonly = this.locked = !this.locked;
+  }
+
+  renderIcon() {
+    return this.locked === true
+      ? html`<uui-icon name="lock" .fallback=${iconLock.strings[0]}></uui-icon>`
+      : html`<uui-icon
+          name="unlock"
+          .fallback=${iconUnlock.strings[0]}></uui-icon>`;
+  }
+
+  renderPrepend() {
+    return html`<uui-button
+      .disabled=${this.disabled}
+      @click=${this._onLockToggle}
+      compact
+      id="lock">
+      ${this.renderIcon()}
+    </uui-button>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'uui-input-lock': UUIInputLockElement;
+  }
+}

packages/uui-input-lock/lib/uui-input-lock.element.ts

@@ -0,0 +1,32 @@
+import '.';
+
+import { Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+export default {
+  id: 'uui-input-lock',
+  title: 'Inputs/Input Lock',
+  component: 'uui-input-lock',
+  args: {
+    value: '',
+    label: 'Label',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<uui-input-lock></uui-input-lock>`,
+      },
+    },
+  },
+};
+
+export const AAAOverview: Story = props =>
+  html`<uui-input-lock
+    .disabled=${props.disabled}
+    .error=${props.error}
+    .label=${props.label}
+    .name=${props.name}
+    .placeholder=${props.placeholder}
+    .value=${props.value}></uui-input-lock>`;
+
+AAAOverview.storyName = 'Overview';

packages/uui-input-lock/lib/uui-input-lock.story.ts

@@ -0,0 +1,45 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import { UUIInputLockElement } from './uui-input-lock.element';
+import '.';
+import { UUIInputElement } from '@umbraco-ui/uui-input/lib/';
+
+describe('UUIInputLockElement', () => {
+  let element: UUIInputLockElement;
+
+  beforeEach(async () => {
+    element = await fixture(
+      html` <uui-input-lock label="Input label"></uui-input-lock> `
+    );
+  });
+
+  it('is defined with its own instance', () => {
+    expect(element).to.be.instanceOf(UUIInputLockElement);
+  });
+
+  it('inherits from uui-input', () => {
+    expect(element).to.be.instanceOf(UUIInputElement);
+  });
+
+  it('passes the a11y audit', async () => {
+    // Only verify that the color contrast is good when its not locked.
+    element.locked = false;
+    await expect(element).shadowDom.to.be.accessible();
+  });
+
+  describe('properties', () => {
+    it('has a locked property', () => {
+      expect(element).to.have.property('name');
+    });
+  });
+
+  it('correctly toggles lock', async () => {
+    await expect(element.readonly).to.be.true;
+    const toggle = element.shadowRoot?.querySelector(
+      '#lock'
+    ) as HTMLButtonElement;
+    toggle.click();
+    await expect(element.readonly).to.be.false;
+    toggle.click();
+    await expect(element.readonly).to.be.true;
+  });
+});

packages/uui-input-lock/lib/uui-input-lock.test.ts

@@ -0,0 +1,44 @@
+{
+  "name": "@umbraco-ui/uui-input-lock",
+  "version": "0.0.0",
+  "license": "MIT",
+  "keywords": [
+    "Umbraco",
+    "Custom elements",
+    "Web components",
+    "UI",
+    "Lit",
+    "Input Lock"
+  ],
+  "description": "Umbraco UI input-lock component",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umbraco/Umbraco.UI.git",
+    "directory": "packages/uui-input-lock"
+  },
+  "bugs": {
+    "url": "https://github.com/umbraco/Umbraco.UI/issues"
+  },
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "type": "module",
+  "customElements": "custom-elements.json",
+  "files": [
+    "lib/**/*.d.ts",
+    "lib/**/*.js",
+    "custom-elements.json"
+  ],
+  "dependencies": {
+    "@umbraco-ui/uui-base": "0.0.17"
+  },
+  "scripts": {
+    "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
+    "clean": "tsc --build --clean && rimraf dist lib/*.js lib/**/*.js custom-elements.json",
+    "analyze": "web-component-analyzer **/*.element.ts --outFile custom-elements.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://uui.umbraco.com/?path=/story/uui-input-lock"
+}

packages/uui-input-lock/package.json

@@ -0,0 +1,5 @@
+import { UUIProdConfig } from '../rollup-package.config';
+
+export default UUIProdConfig({
+  entryPoints: ['index'],
+});

packages/uui-input-lock/rollup.config.js

@@ -0,0 +1,17 @@
+// Don't edit this file directly. It is generated by /scripts/generate-ts-config.js
+
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./lib",
+    "rootDir": "./lib",
+    "composite": true
+  },
+  "include": ["./**/*.ts"],
+  "exclude": ["./**/*.test.ts", "./**/*.story.ts"],
+  "references": [
+    {
+      "path": "../uui-base"
+    }
+  ]
+}

packages/uui-input-lock/tsconfig.json

@@ -9,6 +9,7 @@ import { property, state } from 'lit/decorators.js';
 
 /**
  * @element uui-input-password
+ * @extends uui-input
  */
 @defineElement('uui-input-password')
 export class UUIInputPasswordElement extends UUIInputElement {