diff --git a/packages/uui-icon-registry-essential/lib/UUIIconRegistryEssential.ts b/packages/uui-icon-registry-essential/lib/UUIIconRegistryEssential.ts index 352fb36af..d86d7a83a 100644 --- a/packages/uui-icon-registry-essential/lib/UUIIconRegistryEssential.ts +++ b/packages/uui-icon-registry-essential/lib/UUIIconRegistryEssential.ts @@ -17,6 +17,7 @@ import { iconFavorite, iconFolder, iconForbidden, + iconDrag, iconInfo, iconLink, iconLock, @@ -51,6 +52,7 @@ export class UUIIconRegistryEssential extends UUIIconRegistry { this.defineIcon('delete', iconDelete.strings[0]); this.defineIcon('document', iconDocument.strings[0]); this.defineIcon('download', iconDownload.strings[0]); + this.defineIcon('drag', iconDrag.strings[0]); this.defineIcon('edit', iconEdit.strings[0]); this.defineIcon('favorite', iconFavorite.strings[0]); this.defineIcon('folder', iconFolder.strings[0]); diff --git a/packages/uui-icon-registry-essential/lib/svgs/iconDrag.ts b/packages/uui-icon-registry-essential/lib/svgs/iconDrag.ts new file mode 100644 index 000000000..2469587c2 --- /dev/null +++ b/packages/uui-icon-registry-essential/lib/svgs/iconDrag.ts @@ -0,0 +1,3 @@ +import { svg } from 'lit'; + +export const iconDrag = svg``; diff --git a/packages/uui-icon-registry-essential/lib/svgs/index.ts b/packages/uui-icon-registry-essential/lib/svgs/index.ts index d55a08c18..3b01fdefb 100644 --- a/packages/uui-icon-registry-essential/lib/svgs/index.ts +++ b/packages/uui-icon-registry-essential/lib/svgs/index.ts @@ -9,6 +9,7 @@ export * from './iconColorPicker'; export * from './iconCopy'; export * from './iconDelete'; export * from './iconDocument'; +export * from './iconDrag'; export * from './iconDownload'; export * from './iconEdit'; export * from './iconFavorite'; diff --git a/packages/uui-symbol-drag/README.md b/packages/uui-symbol-drag/README.md new file mode 100644 index 000000000..c52bab05e --- /dev/null +++ b/packages/uui-symbol-drag/README.md @@ -0,0 +1,31 @@ +# uui-symbol-drag + +![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-symbol-drag?logoColor=%231B264F) + +Umbraco style drag-handle component. + +## Installation + +### ES imports + +```zsh +npm i @umbraco-ui/uui-symbol-drag +``` + +Import the registration of `` via: + +```javascript +import '@umbraco-ui/uui-symbol-drag'; +``` + +When looking to leverage the `UUIDragHandleElement` base class as a type and/or for extension purposes, do so via: + +```javascript +import { UUIDragHandleElement } from '@umbraco-ui/uui-symbol-drag'; +``` + +## Usage + +```html + +``` diff --git a/packages/uui-symbol-drag/lib/index.ts b/packages/uui-symbol-drag/lib/index.ts new file mode 100644 index 000000000..6a0ddd6cc --- /dev/null +++ b/packages/uui-symbol-drag/lib/index.ts @@ -0,0 +1 @@ +export * from './uui-symbol-drag.element'; diff --git a/packages/uui-symbol-drag/lib/uui-symbol-drag.element.ts b/packages/uui-symbol-drag/lib/uui-symbol-drag.element.ts new file mode 100644 index 000000000..7607719cb --- /dev/null +++ b/packages/uui-symbol-drag/lib/uui-symbol-drag.element.ts @@ -0,0 +1,33 @@ +import { LabelMixin } from '@umbraco-ui/uui-base/lib/mixins'; +import { defineElement } from '@umbraco-ui/uui-base/lib/registration'; +import { css, html, LitElement } from 'lit'; +import { ifDefined } from 'lit/directives/if-defined.js'; + +/** + * @element uui-symbol-drag + */ +@defineElement('uui-symbol-drag') +export class UUIDragHandleElement extends LabelMixin('', LitElement) { + render() { + return html``; + } + + static styles = [ + css` + :host { + cursor: grab; + } + :host:active { + cursor: grabbing; + } + `, + ]; +} + +declare global { + interface HTMLElementTagNameMap { + 'uui-symbol-drag': UUIDragHandleElement; + } +} diff --git a/packages/uui-symbol-drag/lib/uui-symbol-drag.story.ts b/packages/uui-symbol-drag/lib/uui-symbol-drag.story.ts new file mode 100644 index 000000000..05d5894dc --- /dev/null +++ b/packages/uui-symbol-drag/lib/uui-symbol-drag.story.ts @@ -0,0 +1,24 @@ +import type { Meta, StoryObj } from '@storybook/web-components'; + +import './uui-symbol-drag.element'; +import type { UUIDragHandleElement } from './uui-symbol-drag.element'; +import readme from '../README.md?raw'; + +const meta: Meta = { + id: 'uui-symbol-drag', + title: 'Symbols/Drag Handle', + component: 'uui-symbol-drag', + parameters: { + readme: { markdown: readme }, + docs: { + source: { + code: ``, + }, + }, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Overview: Story = {}; diff --git a/packages/uui-symbol-drag/lib/uui-symbol-drag.test.ts b/packages/uui-symbol-drag/lib/uui-symbol-drag.test.ts new file mode 100644 index 000000000..03c5a7177 --- /dev/null +++ b/packages/uui-symbol-drag/lib/uui-symbol-drag.test.ts @@ -0,0 +1,18 @@ +import { html, fixture, expect } from '@open-wc/testing'; +import { UUIDragHandleElement } from './uui-symbol-drag.element'; + +describe('UUIDragHandleElement', () => { + let element: UUIDragHandleElement; + + beforeEach(async () => { + element = await fixture(html` `); + }); + + it('is defined with its own instance', () => { + expect(element).to.be.instanceOf(UUIDragHandleElement); + }); + + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(); + }); +}); diff --git a/packages/uui-symbol-drag/package.json b/packages/uui-symbol-drag/package.json new file mode 100644 index 000000000..a24533960 --- /dev/null +++ b/packages/uui-symbol-drag/package.json @@ -0,0 +1,44 @@ +{ + "name": "@umbraco-ui/uui-symbol-drag", + "version": "0.0.0", + "license": "MIT", + "keywords": [ + "Umbraco", + "Custom elements", + "Web components", + "UI", + "Lit", + "Drag Handle" + ], + "description": "Umbraco UI drag-handle component", + "repository": { + "type": "git", + "url": "https://github.com/umbraco/Umbraco.UI.git", + "directory": "packages/uui-symbol-drag" + }, + "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": "1.14.0-rc.1" + }, + "scripts": { + "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js", + "clean": "tsc --build --clean && rimraf -g dist lib/*.js lib/**/*.js *.tgz lib/**/*.d.ts custom-elements.json", + "analyze": "web-component-analyzer **/*.element.ts --outFile custom-elements.json" + }, + "publishConfig": { + "access": "public" + }, + "homepage": "https://uui.umbraco.com/?path=/story/uui-symbol-drag" +} diff --git a/packages/uui-symbol-drag/rollup.config.js b/packages/uui-symbol-drag/rollup.config.js new file mode 100644 index 000000000..34524a90d --- /dev/null +++ b/packages/uui-symbol-drag/rollup.config.js @@ -0,0 +1,5 @@ +import { UUIProdConfig } from '../rollup-package.config.mjs'; + +export default UUIProdConfig({ + entryPoints: ['index'], +}); diff --git a/packages/uui-symbol-drag/tsconfig.json b/packages/uui-symbol-drag/tsconfig.json new file mode 100644 index 000000000..40d176776 --- /dev/null +++ b/packages/uui-symbol-drag/tsconfig.json @@ -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" + } + ] +} diff --git a/packages/uui/lib/index.ts b/packages/uui/lib/index.ts index aa3f630c3..f79063d4f 100644 --- a/packages/uui/lib/index.ts +++ b/packages/uui/lib/index.ts @@ -81,3 +81,5 @@ export * from '@umbraco-ui/uui-toast-notification-layout/lib'; export * from '@umbraco-ui/uui-toast-notification/lib'; export * from '@umbraco-ui/uui-toggle/lib'; export * from '@umbraco-ui/uui-visually-hidden/lib'; + +export * from '@umbraco-ui/uui-symbol-drag/lib';