chore(138): use nlds candidate css

Author: hilhorstt

packages/editor/package.json

@@ -34,6 +34,8 @@
   },
   "dependencies": {
     "@lit/context": "1.1.6",
+    "@nl-design-system-candidate/button-css": "1.0.0",
+    "@nl-design-system-candidate/link-css": "2.0.3",
     "@nl-design-system-candidate/number-badge-css": "1.1.4",
     "@tabler/icons": "3.35.0",
     "@tiptap/core": "3.11.1",
@@ -55,7 +57,6 @@
     "@tiptap/extension-underline": "3.11.1",
     "@tiptap/extensions": "3.11.1",
     "@tiptap/pm": "3.11.1",
-    "@utrecht/web-component-library-stencil": "4.0.0",
     "lit": "3.3.1",
     "prosemirror-model": "1.25.4"
   },

packages/editor/src/components/toolbar/toolbar-image-upload/index.ts

@@ -1,7 +1,8 @@
 import type { Editor } from '@tiptap/core';
 import { consume } from '@lit/context';
+import buttonCss from '@nl-design-system-candidate/button-css/button.css?inline';
 import PhotoIcon from '@tabler/icons/outline/photo.svg?raw';
-import { html, LitElement } from 'lit';
+import { html, LitElement, unsafeCSS } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { map } from 'lit/directives/map.js';
 import { createRef, ref, type Ref } from 'lit/directives/ref.js';
@@ -13,7 +14,7 @@ import imageUploadDialogStyles from './styles.ts';
 
 @customElement('clippy-toolbar-image-upload')
 export class ToolbarImageUpload extends LitElement {
-  static override readonly styles = [imageUploadDialogStyles];
+  static override readonly styles = [imageUploadDialogStyles, unsafeCSS(buttonCss)];
 
   readonly #dialogRef: Ref<HTMLDialogElement> = createRef();
   readonly #inputRef: Ref<HTMLInputElement> = createRef();
@@ -130,7 +131,7 @@ export class ToolbarImageUpload extends LitElement {
               </div>
             </li>`,
         )}
-        <button @click=${this.#insertImages}>Invoegen</button>
+        <button class="nl-button nl-button--primary" @click=${this.#insertImages}>Invoegen</button>
       </dialog>
     `;
   }

packages/editor/src/components/toolbar/toolbar-link/index.ts

@@ -1,11 +1,12 @@
 import type { Editor } from '@tiptap/core';
+import buttonCss from '@nl-design-system-candidate/button-css/button.css?inline';
 import LinkIcon from '@tabler/icons/outline/link.svg?raw';
-import { html, LitElement } from 'lit';
+import { html, LitElement, unsafeCSS } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { createRef, ref, type Ref } from 'lit/directives/ref.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
-import { editor } from '@/decorators/TipTapDecorator.ts';
 import './../toolbar-button';
+import { editor } from '@/decorators/TipTapDecorator.ts';
 
 const tag = 'clippy-toolbar-link';
 
@@ -17,7 +18,7 @@ declare global {
 
 @customElement(tag)
 export class ToolbarLink extends LitElement {
-  static override readonly styles = [];
+  static override readonly styles = [unsafeCSS(buttonCss)];
 
   readonly #dialogRef: Ref<HTMLDialogElement> = createRef();
   readonly #inputRef: Ref<HTMLInputElement> = createRef();
@@ -72,9 +73,13 @@ export class ToolbarLink extends LitElement {
           <label>Link to:<input value=${this.previousUrl} ${ref(this.#inputRef)} type="text" /></label>
         </div>
         <div>
-          <button @click=${() => this.#dialogRef.value?.close()}>Sluiten</button>
-          <button @click=${this.#unsetLink}>Verwijder link</button>
-          <button @click=${this.#updateLink}>Link toevoegen</button>
+          <button class="nl-button nl-button--secondary " @click=${() => this.#dialogRef.value?.close()}>
+            Sluiten
+          </button>
+          <button class="nl-button nl-button--secondary nl-button--negative" @click=${this.#unsetLink}>
+            Verwijder link
+          </button>
+          <button class="nl-button nl-button--primary" @click=${this.#updateLink}>Link toevoegen</button>
         </div>
       </dialog>
     `;

packages/editor/src/components/validations/drawer/validation-list-item/index.ts

@@ -1,7 +1,9 @@
+import buttonCss from '@nl-design-system-candidate/button-css/button.css?inline';
+import linkCss from '@nl-design-system-candidate/link-css/link.css?inline';
 import AlertCircleIcon from '@tabler/icons/outline/alert-circle.svg?raw';
 import AlertTriangleIcon from '@tabler/icons/outline/alert-triangle.svg?raw';
 import InfoCircleIcon from '@tabler/icons/outline/info-circle.svg?raw';
-import { LitElement, html } from 'lit';
+import { LitElement, html, unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import type { ValidationSeverity } from '@/types/validation.ts';
@@ -10,7 +12,7 @@ import validationListItemStyles from './styles.ts';
 
 @customElement('clippy-validation-list-item')
 export class ClippyValidationItem extends LitElement {
-  static override readonly styles = [validationListItemStyles];
+  static override readonly styles = [validationListItemStyles, unsafeCSS(linkCss), unsafeCSS(buttonCss)];
 
   @property({ type: String }) key: string = '';
   @property({ type: Number }) pos: number = 0;
@@ -51,14 +53,14 @@ export class ClippyValidationItem extends LitElement {
         <slot name="tip-html" class="clippy-dialog__list-item-tip"></slot>
         ${this.href
           ? html`
-              <div class="clippy-dialog__list-item-link">
-                <utrecht-link href="${this.href}" target="_blank"> Uitgebreide toelichting </utrecht-link>
-              </div>
-            `
+            <div class="clippy-dialog__list-item-link">
+              <a class="nl-link" href="${this.href}" target="_blank"> Uitgebreide toelichting </anl-link>
+            </div>
+          `
           : null}
         <div class="clippy-dialog__list-item-actions">
-          <utrecht-button disabled="true">Negeren</utrecht-button>
-          <utrecht-button appearance="secondary-action-button" @click=${this.#focusNode}>Aanpassen</utrecht-button>
+          <button class="nl-button nl-button--disabled" disabled="disabled">Negeren</button>
+          <button class="nl-button nl-button--secondary" @click=${this.#focusNode}>Aanpassen</button>
         </div>
       </li>
     `;

packages/editor/src/index.ts

@@ -4,7 +4,6 @@ import './components/toolbar';
 import './components/validations/gutter';
 import './components/validations/drawer';
 import './components/bubble-menu';
-import { defineCustomElements } from '@utrecht/web-component-library-stencil/loader';
 import { LitElement, html } from 'lit';
 import { customElement, property, queryAssignedElements } from 'lit/decorators.js';
 import type { ValidationResult } from '@/types/validation.ts';
@@ -15,8 +14,6 @@ import editorStyles from './styles';
 
 const EDITOR_ID = 'editor';
 
-defineCustomElements();
-
 const sanitizeTopHeadingLevel = (number: number): number => {
   if (!Number.isNaN(number) && number >= 1 && number <= 6) {
     return number;

packages/editor/test/editor-wrapper.ts

@@ -1,12 +1,9 @@
 import type { Editor } from '@tiptap/core';
 import { ContextProvider, Context } from '@lit/context';
-import { defineCustomElements } from '@utrecht/web-component-library-stencil/loader';
 import { html, LitElement, type TemplateResult } from 'lit';
 import { tiptapContext } from '../src/context/tiptapContext';
 import { createTestEditor } from './createTestEditor';
 
-defineCustomElements();
-
 export class EditorTestWrapper extends LitElement {
   static override readonly properties = {
     editor: { attribute: false },