docs: add story for readonly mode

Author: madsrasmussen

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

@@ -36,7 +36,8 @@ const Template: Story = props => html`
     ?selectable=${props.selectable}
     ?selectOnly=${props.selectOnly}
     ?error=${props.error}
-    ?disabled=${props.disabled}>
+    ?disabled=${props.disabled}
+    ?readonly=${props.readonly}>
     <uui-tag size="s" slot="tag" color="positive">Published</uui-tag>
     <uui-action-bar slot="actions"
       ><uui-button label="delete"
@@ -201,6 +202,32 @@ Disabled.parameters = {
   },
 };
 
+export const Readonly: Story = props => html`
+  <uui-ref-node
+    ?readonly="${props.readonly}"
+    name="Rabbit Suit Product Page"
+    detail="path/to/nowhere">
+  </uui-ref-node>
+`;
+
+Readonly.args = {
+  readonly: true,
+};
+
+Readonly.parameters = {
+  docs: {
+    source: {
+      code: `
+<uui-ref-node
+  readonly
+  name="Rabbit Suit Product Page"
+  detail="path/to/nowhere">
+</uui-ref-node>
+    `,
+    },
+  },
+};
+
 const listOfNodeNames: string[] = ArrayOfUmbracoWords(10);
 export const Listed: Story = () => html`
   <uui-ref-list>