diff --git a/package-lock.json b/package-lock.json index 72bb9d4e4..268855ff8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4964,6 +4964,10 @@ "resolved": "packages/uui-combobox-list", "link": true }, + "node_modules/@umbraco-ui/uui-copy": { + "resolved": "packages/uui-copy", + "link": true + }, "node_modules/@umbraco-ui/uui-css": { "resolved": "packages/uui-css", "link": true @@ -24129,6 +24133,14 @@ "@umbraco-ui/uui-base": "1.12.2" } }, + "packages/uui-copy": { + "name": "@umbraco-ui/uui-copy", + "version": "0.0.0", + "license": "MIT", + "dependencies": { + "@umbraco-ui/uui-base": "1.12.2" + } + }, "packages/uui-css": { "name": "@umbraco-ui/uui-css", "version": "1.12.1", diff --git a/packages/uui-copy/README.md b/packages/uui-copy/README.md new file mode 100644 index 000000000..d8d052dc7 --- /dev/null +++ b/packages/uui-copy/README.md @@ -0,0 +1,31 @@ +# uui-copy + +![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-copy?logoColor=%231B264F) + +Umbraco style copy component. + +## Installation + +### ES imports + +```zsh +npm i @umbraco-ui/uui-copy +``` + +Import the registration of `` via: + +```javascript +import '@umbraco-ui/uui-copy'; +``` + +When looking to leverage the `UUICopyElement` base class as a type and/or for extension purposes, do so via: + +```javascript +import { UUICopyElement } from '@umbraco-ui/uui-copy'; +``` + +## Usage + +```html + +``` diff --git a/packages/uui-copy/lib/index.ts b/packages/uui-copy/lib/index.ts new file mode 100644 index 000000000..abf8d0993 --- /dev/null +++ b/packages/uui-copy/lib/index.ts @@ -0,0 +1 @@ +export * from './uui-copy.element'; diff --git a/packages/uui-copy/lib/uui-copy.element.ts b/packages/uui-copy/lib/uui-copy.element.ts new file mode 100644 index 000000000..d33800714 --- /dev/null +++ b/packages/uui-copy/lib/uui-copy.element.ts @@ -0,0 +1,28 @@ +import { defineElement } from '@umbraco-ui/uui-base/lib/registration'; +import { css, html, LitElement } from 'lit'; + +/** + * @element uui-copy + */ +@defineElement('uui-copy') +export class UUICopyElement extends LitElement { + static styles = [ + css` + :host { + /* Styles goes here */ + } + `, + ]; + + render(){ + return html` + Markup goes here + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'uui-copy': UUICopyElement; + } +} diff --git a/packages/uui-copy/lib/uui-copy.story.ts b/packages/uui-copy/lib/uui-copy.story.ts new file mode 100644 index 000000000..d8598b1ad --- /dev/null +++ b/packages/uui-copy/lib/uui-copy.story.ts @@ -0,0 +1,24 @@ +import type { Meta, StoryObj } from '@storybook/web-components'; + +import './uui-copy.element'; +import type { UUICopyElement } from './uui-copy.element'; +import readme from '../README.md?raw'; + +const meta: Meta = { + id: 'uui-copy', + title: 'Copy', + component: 'uui-copy', + parameters: { + readme: { markdown: readme }, + docs: { + source: { + code: ``, + }, + }, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Overview: Story = {}; diff --git a/packages/uui-copy/lib/uui-copy.test.ts b/packages/uui-copy/lib/uui-copy.test.ts new file mode 100644 index 000000000..cd83c94de --- /dev/null +++ b/packages/uui-copy/lib/uui-copy.test.ts @@ -0,0 +1,20 @@ +import { html, fixture, expect } from '@open-wc/testing'; +import { UUICopyElement } from './uui-copy.element'; + +describe('UUICopyElement', () => { + let element: UUICopyElement; + + beforeEach(async () => { + element = await fixture( + html` ` + ); + }); + + it('is defined with its own instance', () => { + expect(element).to.be.instanceOf(UUICopyElement); + }); + + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(); + }); +}); \ No newline at end of file diff --git a/packages/uui-copy/package.json b/packages/uui-copy/package.json new file mode 100644 index 000000000..c6ab21ceb --- /dev/null +++ b/packages/uui-copy/package.json @@ -0,0 +1,44 @@ +{ + "name": "@umbraco-ui/uui-copy", + "version": "0.0.0", + "license": "MIT", + "keywords": [ + "Umbraco", + "Custom elements", + "Web components", + "UI", + "Lit", + "Copy" + ], + "description": "Umbraco UI copy component", + "repository": { + "type": "git", + "url": "https://github.com/umbraco/Umbraco.UI.git", + "directory": "packages/uui-copy" + }, + "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.12.2" + }, + "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-copy" +} diff --git a/packages/uui-copy/rollup.config.js b/packages/uui-copy/rollup.config.js new file mode 100644 index 000000000..12891d16a --- /dev/null +++ b/packages/uui-copy/rollup.config.js @@ -0,0 +1,5 @@ +import { UUIProdConfig } from '../rollup-package.config.mjs'; + +export default UUIProdConfig({ + entryPoints: ['index'] +}); diff --git a/packages/uui-copy/tsconfig.json b/packages/uui-copy/tsconfig.json new file mode 100644 index 000000000..40d176776 --- /dev/null +++ b/packages/uui-copy/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 7a6290236..e4b10581d 100644 --- a/packages/uui/lib/index.ts +++ b/packages/uui/lib/index.ts @@ -80,3 +80,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-copy/lib/index.js'; \ No newline at end of file