feat: Prefix interface types with UUI (#716)

* prefix interface types with UUI

* Update packages/uui-badge/lib/uui-badge.element.ts

---------

Co-authored-by: Jacob Overgaard <[email protected]>

Author: JesmoDev

packages/uui-badge/lib/uui-badge.element.ts

@@ -2,8 +2,8 @@ import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import type {
-  InterfaceColor,
-  InterfaceLook,
+  UUIInterfaceColor,
+  UUIInterfaceLook,
 } from '@umbraco-ui/uui-base/lib/types';
 
 /**
@@ -21,7 +21,7 @@ export class UUIBadgeElement extends LitElement {
    * @default "default"
    */
   @property({ reflect: true })
-  color: InterfaceColor = 'default';
+  color: UUIInterfaceColor = 'default';
 
   /**
    * Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green "confirm" button.
@@ -30,7 +30,7 @@ export class UUIBadgeElement extends LitElement {
    * @default "default"
    */
   @property({ reflect: true })
-  look: InterfaceLook = 'primary';
+  look: UUIInterfaceLook = 'primary';
 
   /**
    * Bring attention to this badge by applying a bounce animation.

packages/uui-base/lib/types/InterfaceColor.ts

@@ -1,8 +1,13 @@
-export const InterfaceColorValues: Readonly<InterfaceColor[]> = [
+export const UUIInterfaceColorValues: Readonly<UUIInterfaceColor[]> = [
   'default',
   'positive',
   'warning',
   'danger',
 ] as const;
 
-export type InterfaceColor = '' | 'default' | 'positive' | 'warning' | 'danger';
+export type UUIInterfaceColor =
+  | ''
+  | 'default'
+  | 'positive'
+  | 'warning'
+  | 'danger';

packages/uui-base/lib/types/InterfaceHeading.ts

@@ -1,4 +1,4 @@
-export const InterfaceHeadingValues: Readonly<InterfaceHeading[]> = [
+export const UUIInterfaceHeadingValues: Readonly<UUIInterfaceHeading[]> = [
   'h1',
   'h2',
   'h3',
@@ -7,4 +7,4 @@ export const InterfaceHeadingValues: Readonly<InterfaceHeading[]> = [
   'h6',
 ] as const;
 
-export type InterfaceHeading = '' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type UUIInterfaceHeading = '' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

packages/uui-base/lib/types/InterfaceLook.ts

@@ -1,12 +1,12 @@
-export const InterfaceLookValues: Readonly<InterfaceLook[]> = [
+export const UUIInterfaceLookValues: Readonly<UUIInterfaceLook[]> = [
   'default',
   'primary',
   'secondary',
   'outline',
   'placeholder',
 ] as const;
 
-export type InterfaceLook =
+export type UUIInterfaceLook =
   | ''
   | 'default'
   | 'primary'

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

@@ -2,7 +2,7 @@ import { LitElement, css } from 'lit';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { property, state } from 'lit/decorators.js';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
-import type { InterfaceHeading } from '@umbraco-ui/uui-base/lib';
+import type { UUIInterfaceHeading } from '@umbraco-ui/uui-base/lib';
 import { StaticValue, html, literal, unsafeStatic } from 'lit/static-html.js';
 
 function slotHasContent(target: EventTarget | null): boolean {
@@ -41,7 +41,7 @@ export class UUIBoxElement extends LitElement {
    * @default "h5"
    */
   @property({ attribute: 'headline-variant' })
-  set headlineVariant(value: InterfaceHeading) {
+  set headlineVariant(value: UUIInterfaceHeading) {
     if (!value) {
       this._headlineVariantTag = literal`h5`;
     } else {

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

@@ -1,7 +1,7 @@
 import { expect, fixture, html } from '@open-wc/testing';
 
 import { UUIBoxElement } from './uui-box.element';
-import { InterfaceHeadingValues } from '@umbraco-ui/uui-base/lib/types';
+import { UUIInterfaceHeadingValues } from '@umbraco-ui/uui-base/lib/types';
 
 describe('UUIBox', () => {
   let element: UUIBoxElement;
@@ -16,7 +16,7 @@ describe('UUIBox', () => {
   });
 
   it('passes the a11y audit', async () => {
-    for (const headlineVariant of InterfaceHeadingValues) {
+    for (const headlineVariant of UUIInterfaceHeadingValues) {
       element = await fixture(
         html` <uui-box
           headline="headline"

packages/uui-button/lib/uui-button.element.ts

@@ -16,7 +16,10 @@ import {
 import { css, html, LitElement, nothing, TemplateResult } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { InterfaceColor, InterfaceLook } from '@umbraco-ui/uui-base/lib/types';
+import {
+  UUIInterfaceColor,
+  UUIInterfaceLook,
+} from '@umbraco-ui/uui-base/lib/types';
 
 export type UUIButtonState = undefined | 'waiting' | 'success' | 'failed';
 
@@ -74,7 +77,7 @@ export class UUIButtonElement extends FormControlMixin(
    * @default "default"
    */
   @property({ reflect: true })
-  look: InterfaceLook = 'default';
+  look: UUIInterfaceLook = 'default';
 
   /**
    * Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green "confirm" button.
@@ -83,7 +86,7 @@ export class UUIButtonElement extends FormControlMixin(
    * @default "default"
    */
   @property({ reflect: true })
-  color: InterfaceColor = 'default';
+  color: UUIInterfaceColor = 'default';
 
   /**
    * Makes the left and right padding of the button narrower.

packages/uui-button/lib/uui-button.test.ts

@@ -6,8 +6,8 @@ import {
   oneEvent,
 } from '@open-wc/testing';
 import {
-  InterfaceColorValues,
-  InterfaceLookValues,
+  UUIInterfaceColorValues,
+  UUIInterfaceLookValues,
 } from '@umbraco-ui/uui-base/lib/types';
 
 import { UUIButtonElement } from './uui-button.element';
@@ -41,8 +41,8 @@ describe('UuiButton', () => {
   });
 
   it('passes the a11y audit', async () => {
-    for (const color of InterfaceColorValues) {
-      for (const look of InterfaceLookValues) {
+    for (const color of UUIInterfaceColorValues) {
+      for (const look of UUIInterfaceLookValues) {
         for (const disabled of [true, false]) {
           element = await fixture(
             html` <uui-button

packages/uui-tag/lib/uui-tag.element.ts

@@ -1,7 +1,10 @@
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
-import { InterfaceColor, InterfaceLook } from '@umbraco-ui/uui-base/lib/types';
+import {
+  UUIInterfaceColor,
+  UUIInterfaceLook,
+} from '@umbraco-ui/uui-base/lib/types';
 
 /**
  *
@@ -20,7 +23,7 @@ export class UUITagElement extends LitElement {
    * @default "default"
    */
   @property({ reflect: true })
-  color: InterfaceColor = 'default';
+  color: UUIInterfaceColor = 'default';
 
   /**
    * Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green "confirm" button.
@@ -29,7 +32,7 @@ export class UUITagElement extends LitElement {
    * @default "default"
    */
   @property({ reflect: true })
-  look: InterfaceLook = 'primary';
+  look: UUIInterfaceLook = 'primary';
 
   render() {
     return html`<slot></slot>`;