adds new stories for forcus state

Author: Welander1994

packages/uui-ref-node-data-type/lib/uui-ref-node-data-type.story.ts

@@ -4,6 +4,11 @@ import { html } from 'lit';
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { renderSlots, spread } from '../../../storyhelpers';
 
+const setFocus = () => {
+  const refElement = document.querySelectorAll('#refNode');
+  refElement[0].focus();
+};
+
 const meta: Meta = {
   id: 'uui-ref-node-data-type',
   component: 'uui-ref-node-data-type',
@@ -66,3 +71,11 @@ export const Readonly: Story = {
     readonly: true,
   },
 };
+
+export const Focus: Story = {
+  render: args =>
+    html`<uui-ref-node-document-type id="refNode" ${spread(args)}
+        >${renderSlots(args)}</uui-ref-node-document-type
+      >
+      <button @click=${() => setFocus()}>Set focus</button> `,
+};

packages/uui-ref-node-document-type/lib/uui-ref-node-document-type.story.ts

@@ -4,6 +4,11 @@ import { html } from 'lit';
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { renderSlots, spread } from '../../../storyhelpers';
 
+const setFocus = () => {
+  const refElement = document.querySelectorAll('#refNode');
+  refElement[0].focus();
+};
+
 const meta: Meta = {
   id: 'uui-ref-node-document-type',
   component: 'uui-ref-node-document-type',
@@ -13,9 +18,13 @@ const meta: Meta = {
     alias: 'productPage',
   },
   render: args =>
-    html`<uui-ref-node-document-type ${spread(args)}
+    html`<uui-ref-node-document-type
+      id="refNode"
+      ${spread(args)}
+      @open=${() => onOpen()}
       >${renderSlots(args)}</uui-ref-node-document-type
-    >`,
+    > `,
+
   decorators: [
     (Story: any) => html`<div style="max-width: 420px;">${Story()}</div>`,
   ],
@@ -66,3 +75,11 @@ export const Readonly: Story = {
     readonly: true,
   },
 };
+
+export const Focus: Story = {
+  render: args =>
+    html`<uui-ref-node-document-type id="refNode" ${spread(args)}
+        >${renderSlots(args)}</uui-ref-node-document-type
+      >
+      <button @click=${() => setFocus()}>Set focus</button> `,
+};

packages/uui-ref-node-form/lib/uui-ref-node-form.story.ts

@@ -4,6 +4,11 @@ import { html } from 'lit';
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { renderSlots, spread } from '../../../storyhelpers';
 
+const setFocus = () => {
+  const refElement = document.querySelectorAll('#refNode');
+  refElement[0].focus();
+};
+
 const meta: Meta = {
   id: 'uui-ref-node-form',
   component: 'uui-ref-node-form',
@@ -66,3 +71,11 @@ export const Readonly: Story = {
     readonly: true,
   },
 };
+
+export const Focus: Story = {
+  render: args =>
+    html`<uui-ref-node-document-type id="refNode" ${spread(args)}
+        >${renderSlots(args)}</uui-ref-node-document-type
+      >
+      <button @click=${() => setFocus()}>Set focus</button> `,
+};

packages/uui-ref-node-member/lib/uui-ref-node-member.story.ts

@@ -4,6 +4,11 @@ import { html } from 'lit';
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { renderSlots, spread } from '../../../storyhelpers';
 
+const setFocus = () => {
+  const refElement = document.querySelectorAll('#refNode');
+  refElement[0].focus();
+};
+
 const meta: Meta = {
   id: 'uui-ref-node-member',
   component: 'uui-ref-node-member',
@@ -66,3 +71,12 @@ export const Readonly: Story = {
     readonly: true,
   },
 };
+
+export const Focus: Story = {
+  render: args =>
+    html`<uui-ref-node-member id="refNode" ${spread(args)}
+      >${renderSlots(args)}</uui-ref-node-document-type
+    >
+      <button @click=${() => setFocus()}>Set focus</button>
+    `,
+};

packages/uui-ref-node-package/lib/uui-ref-node-package.story.ts

@@ -4,6 +4,11 @@ import { html } from 'lit';
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { renderSlots, spread } from '../../../storyhelpers';
 
+const setFocus = () => {
+  const refElement = document.querySelectorAll('#refNode');
+  refElement[0].focus();
+};
+
 const meta: Meta = {
   id: 'uui-ref-node-package',
   component: 'uui-ref-node-package',
@@ -67,3 +72,11 @@ export const Readonly: Story = {
     readonly: true,
   },
 };
+
+export const Focus: Story = {
+  render: args =>
+    html`<uui-ref-node-package id="refNode" ${spread(args)}
+        >${renderSlots(args)}</uui-ref-node-package
+      >
+      <button @click=${() => setFocus()}>Set focus</button> `,
+};

packages/uui-ref-node-user/lib/uui-ref-node-user.story.ts

@@ -4,6 +4,11 @@ import { html } from 'lit';
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { renderSlots, spread } from '../../../storyhelpers';
 
+const setFocus = () => {
+  const refElement = document.querySelectorAll('#refNode');
+  refElement[0].focus();
+};
+
 const meta: Meta = {
   id: 'uui-ref-node-user',
   component: 'uui-ref-node-user',
@@ -66,3 +71,12 @@ export const Readonly: Story = {
     readonly: true,
   },
 };
+
+export const Focus: Story = {
+  render: args =>
+    html`<uui-ref-node-user id="refNode" ${spread(args)}
+      >${renderSlots(args)}</uui-ref-node-package
+    >
+      <button @click=${() => setFocus()}>Set focus</button>
+    `,
+};

packages/uui-ref-node/lib/uui-ref-node.element.ts

@@ -163,6 +163,11 @@ export class UUIRefNodeElement extends UUIRefElement {
     `;
   }
 
+  public focus() {
+    const openPart = this.renderRoot.querySelector('#open-part') as HTMLElement;
+    openPart?.focus();
+  }
+
   #renderOpenPart() {
     if (this.readonly) {
       return html`${this.#renderContent()}`;
@@ -228,6 +233,10 @@ export class UUIRefNodeElement extends UUIRefElement {
         }
       }
 
+      .test {
+        border: red 10px;
+      }
+
       :host(:not([disabled])) #open-part:hover #icon {
         color: var(--uui-color-interactive-emphasis);
       }

packages/uui-ref-node/lib/uui-ref-node.story.ts

@@ -9,6 +9,12 @@ import '@umbraco-ui/uui-action-bar/lib';
 import '@umbraco-ui/uui-button/lib';
 import '@umbraco-ui/uui-icon/lib';
 
+const setFocus = () => {
+  const refElement = document.querySelectorAll('#refNode');
+  console.log(refElement[0]);
+  refElement[0].focus();
+};
+
 const meta: Meta = {
   id: 'uui-ref-node',
   component: 'uui-ref-node',
@@ -79,3 +85,12 @@ export const Readonly: Story = {
     readonly: true,
   },
 };
+
+export const Focus: Story = {
+  render: args =>
+    html`<uui-ref-node id="refNode" ${spread(args)}
+      >${renderSlots(args)}</uui-ref-node-package
+    >
+      <button @click=${() => setFocus()}>Set focus</button>
+    `,
+};