BREAKING CHANGE: Change 'border' attribute to 'standalone' (#714)

* change border to standalone and add missing attr JSDocs

* fix stories

* remove random s from uui-ref-node.story.ts

---------

Co-authored-by: Niels Lyngsø <[email protected]>

Author: JesmoDev

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

@@ -81,22 +81,25 @@ CustomIcon.parameters = {
   },
 };
 
-export const Border: Story = () => html`
+export const Standalone: Story = () => html`
   <div style="max-width: 420px;">
-    <uui-ref-node-data-type border name="TextField" alias="Umbraco.TextField">
+    <uui-ref-node-data-type
+      standalone
+      name="TextField"
+      alias="Umbraco.TextField">
       <uui-action-bar slot="actions">
         <uui-button label="Remove">Remove</uui-button>
       </uui-action-bar>
     </uui-ref-node-data-type>
   </div>
 `;
 
-Border.parameters = {
+Standalone.parameters = {
   docs: {
     source: {
       code: `
 <uui-ref-node-data-type
-  border
+  standalone
   name="TextField"
   alias="Umbraco.TextField">
   <uui-action-bar slot="actions">

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

@@ -81,22 +81,25 @@ CustomIcon.parameters = {
   },
 };
 
-export const Border: Story = () => html`
+export const Standalone: Story = () => html`
   <div style="max-width: 420px;">
-    <uui-ref-node-document-type border name="Product Page" alias="productPage">
+    <uui-ref-node-document-type
+      standalone
+      name="Product Page"
+      alias="productPage">
       <uui-action-bar slot="actions">
         <uui-button label="Remove">Remove</uui-button>
       </uui-action-bar>
     </uui-ref-node-document-type>
   </div>
 `;
 
-Border.parameters = {
+Standalone.parameters = {
   docs: {
     source: {
       code: `
 <uui-ref-node-document-type
-  border
+  standalone
   name="Product Page"
   alias="productPage">
   <uui-action-bar slot="actions">

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

@@ -82,10 +82,10 @@ CustomIcon.parameters = {
   },
 };
 
-export const Border: Story = () => html`
+export const Standalone: Story = () => html`
   <div style="max-width: 420px;">
     <uui-ref-node-form
-      border
+      standalone
       name="Newsletter Signup"
       detail="Signup for newsletter">
       <uui-action-bar slot="actions">
@@ -95,12 +95,12 @@ export const Border: Story = () => html`
   </div>
 `;
 
-Border.parameters = {
+Standalone.parameters = {
   docs: {
     source: {
       code: `
 <uui-ref-node-form
-  border
+  standalone
   name="Newsletter Signup"
   detail="Signup for newsletter">
   <uui-action-bar slot="actions">

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

@@ -83,10 +83,10 @@ CustomIcon.parameters = {
   },
 };
 
-export const Border: Story = () => html`
+export const Standalone: Story = () => html`
   <div style="max-width: 420px;">
     <uui-ref-node-member
-      border
+      standalone
       name="Arnold Vitz"
       group-name="Visitor, Registered-Member">
       <uui-action-bar slot="actions">
@@ -96,12 +96,12 @@ export const Border: Story = () => html`
   </div>
 `;
 
-Border.parameters = {
+Standalone.parameters = {
   docs: {
     source: {
       code: `
 <uui-ref-node-member
-  border
+  standalone
   name="Arnold Vitz"
   group-name="Visitor, Registered-Member">
   <uui-action-bar slot="actions">

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

@@ -93,10 +93,10 @@ CustomIcon.parameters = {
   },
 };
 
-export const Border: Story = () => html`
+export const Standalone: Story = () => html`
   <div style="max-width: 420px;">
     <uui-ref-node-package
-      border
+      standalone
       name="Umbraco Starter Kit"
       version="1.1"
       author="Umbraco HQ">
@@ -110,12 +110,12 @@ export const Border: Story = () => html`
   </div>
 `;
 
-Border.parameters = {
+Standalone.parameters = {
   docs: {
     source: {
       code: `
 <uui-ref-node-package
-  border
+  standalone
   name="Umbraco Starter Kit"
   version="1.1"
   author="Umbraco HQ">

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

@@ -81,10 +81,10 @@ CustomIcon.parameters = {
   },
 };
 
-export const Border: Story = () => html`
+export const Standalone: Story = () => html`
   <div style="max-width: 420px;">
     <uui-ref-node-user
-      border
+      standalone
       name="Arnold Edits"
       group-name="Editor, Translator">
       <uui-action-bar slot="actions">
@@ -94,12 +94,12 @@ export const Border: Story = () => html`
   </div>
 `;
 
-Border.parameters = {
+Standalone.parameters = {
   docs: {
     source: {
       code: `
 <uui-ref-node-user
-  border
+  standalone
   name="Arnold Edits"
   group-name="Editor, Translator"
   <uui-action-bar slot="actions">

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

@@ -91,8 +91,11 @@ CustomIcon.parameters = {
   },
 };
 
-export const Border: Story = () => html`
-  <uui-ref-node border name="Rabbit Suit Product Page" detail="path/to/nowhere">
+export const Standalone: Story = () => html`
+  <uui-ref-node
+    standalone
+    name="Rabbit Suit Product Page"
+    detail="path/to/nowhere">
     <uui-tag size="s" slot="tag" color="positive">Published</uui-tag>
     <uui-action-bar slot="actions">
       <uui-button type="button" label="Delete"
@@ -102,12 +105,12 @@ export const Border: Story = () => html`
   </uui-ref-node>
 `;
 
-Border.parameters = {
+Standalone.parameters = {
   docs: {
     source: {
       code: `
 <uui-ref-node
-  border
+  standalone
   name="Rabbit Suit Product Page"
   detail="path/to/nowhere">
   <uui-tag size="s" slot="tag" color="positive" >Published</uui-tag>

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

@@ -13,6 +13,9 @@ import { UUIRefEvent } from './UUIRefEvent';
  *  @fires {UUISelectableEvent} selected - fires when the ref is selected
  *  @fires {UUISelectableEvent} deselected - fires when the ref is deselected
  *  @description - Base ref component to be extended by specific ref elements. Does not have a tag.
+ *  @attr {boolean} [disabled=false] - Set to true to disable
+ *  @attr {boolean} [error=false] - Set to true to display error state
+ *  @attr {boolean} [standalone=false] - Set to true to make element stand out
  */
 
 @defineElement('uui-ref')
@@ -76,7 +79,7 @@ export class UUIRefElement extends SelectOnlyMixin(
           inset 0 0 2px 0 var(--uui-color-danger);
       }
 
-      :host([border]) {
+      :host([standalone]) {
         border: 1px solid var(--uui-color-border);
       }
 
@@ -179,15 +182,15 @@ export class UUIRefElement extends SelectOnlyMixin(
         opacity: 1;
       }
 
-      :host([border]:not([disabled]):hover) {
+      :host([standalone]:not([disabled]):hover) {
         border-color: var(--uui-color-border-emphasis);
       }
 
       :host([disabled]) #open-part {
         cursor: default;
       }
 
-      :host([border][disabled]) {
+      :host([standalone][disabled]) {
         border-color: var(--uui-color-disabled-standalone);
       }