Merge remote-tracking branch 'origin/dev' into bugfix/uui-box-align-slots-and-styling

# Conflicts:
#	packages/uui-box/lib/uui-box.element.ts

Author: nielslyngsoe

.storybook/preview.js

@@ -1,8 +1,10 @@
-import { setCustomElements } from '@storybook/web-components';
-import customElements from '../custom-elements.json';
 import '../packages/uui-css/lib/uui-css.css';
 import 'element-internals-polyfill';
 
+import { setCustomElements } from '@storybook/web-components';
+
+import customElements from '../custom-elements.json';
+
 const sort = (a, b) => {
   if (a[1].name === 'Overview') {
     return 0;
@@ -44,4 +46,32 @@ export const parameters = {
   },
 };
 
+WebComponentFormatter(customElements);
+
 setCustomElements(customElements);
+
+function WebComponentFormatter(customElements) {
+  for (let tag of customElements.tags || []) {
+    // Find all names of properties
+    const propertyNames = (tag.properties || []).map(p => p.name);
+
+    for (let slot of tag.slots || []) {
+      // Replace the name of the default slot so Storybook will show it
+      if (typeof slot.name === 'string' && slot.name.length === 0) {
+        slot.name = 'slot';
+      }
+
+      // If the slot has the same name as a property, then add the word 'slot' to the name
+      if (propertyNames.includes(slot.name)) {
+        slot.name = `${slot.name} slot`;
+      }
+
+      // Set type of slots
+      if (typeof slot.type === 'undefined' || slot.type.length === 0) {
+        slot.type = 'HTMLElement';
+      }
+    }
+  }
+
+  return customElements;
+}

packages/uui-avatar-group/lib/uui-avatar-group.element.ts

@@ -6,7 +6,7 @@ import { property, queryAssignedElements, state } from 'lit/decorators.js';
 /**
  * Group a set of avatars, set a limit to minimize the visual space.
  * @element uui-avatar-group
- * @slot for uui-avatar elements
+ * @slot - Insert the `<uui-avatar>` elements in the default slot
  */
 @defineElement('uui-avatar-group')
 export class UUIAvatarGroupElement extends LitElement {

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

@@ -1,11 +1,11 @@
-import { property, state } from 'lit/decorators.js';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
-import { LitElement, html, css } from 'lit';
+import { css, html, LitElement } from 'lit';
+import { property, state } from 'lit/decorators.js';
 
 /**
  *  Avatar for displaying users
  *  @element uui-avatar
- *  @slot For anything other than initials (no more than 2-3 characters)
+ *  @slot - For anything other than initials (no more than 2-3 characters)
  */
 @defineElement('uui-avatar')
 export class UUIAvatarElement extends LitElement {

packages/uui-avatar/lib/uui-avatar.story.ts

@@ -1,4 +1,4 @@
-import '@umbraco-ui/uui-avatar/lib';
+import '.';
 
 import { Story } from '@storybook/web-components';
 import { html } from 'lit-html';
@@ -11,6 +11,9 @@ export default {
     name: 'Umbraco HQ',
     fontSize: 12,
   },
+  argTypes: {
+    slot: { control: { type: 'text' } },
+  },
   // argTypes: {
   //   'img-src': { table: { disable: true } },
   //   'img-srcset': { table: { disable: true } },
@@ -94,11 +97,8 @@ Colors.parameters = {
 
 export const SlottedContent = Template.bind({});
 SlottedContent.args = { slot: 'overflow', name: '' };
-SlottedContent.argTypes = {
-  slot: { table: { category: 'slots' }, control: { type: 'text' } },
-};
 SlottedContent.parameters = {
-  controls: { include: ['slot', 'overflow'] },
+  controls: { include: ['overflow', 'slot'] },
   docs: {
     source: {
       code: `<uui-avatar overflow name="overflow name">overflow content</uui-avatar>`,
@@ -127,11 +127,8 @@ InlineWithText.parameters = {
 
 export const WithBadge = Template.bind({});
 WithBadge.args = { slot: html`<uui-badge>!</uui-badge>`, overflow: true };
-WithBadge.argTypes = {
-  slot: { table: { category: 'slots' }, control: { type: 'text' } },
-};
 WithBadge.parameters = {
-  controls: { include: ['slot', 'overflow', 'name'] },
+  controls: { include: ['overflow', 'name'] },
   docs: {
     source: {
       code: `<uui-avatar name="Umbraco HQ"><uui-badge>!</uui-badge></uui-avatar>`,

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

@@ -1,13 +1,12 @@
-import { LitElement, html, css } from 'lit';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
-import { property } from 'lit/decorators.js';
-
 import { InterfaceLookType } from '@umbraco-ui/uui-base/lib/types';
+import { css, html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
 
 /**
  *  A badge to notify that there is something that requires attention of the user. The badge is positioned with `position: absolute`. It will determine its position against the first ancestor with `position: relative`.
  *  @element uui-badge
- *  @slot - for badge contents
+ *  @slot - The slot for badge contents
  */
 @defineElement('uui-badge')
 export class UUIBadgeElement extends LitElement {

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

@@ -29,6 +29,9 @@ export default {
       ],
       control: { type: 'select' },
     },
+    slot: {
+      control: { type: 'text' },
+    },
   },
 };
 
@@ -101,6 +104,9 @@ WithIcon.args = {
   slot: html`<uui-icon name="favorite"></uui-icon>`,
 };
 WithIcon.parameters = {
+  controls: {
+    exclude: ['slot'],
+  },
   docs: {
     source: {
       code: `

packages/uui-base/lib/mixins/FormControlMixin.ts

@@ -1,5 +1,6 @@
 import { LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
+
 import { UUIFormControlEvent } from '../events';
 
 type Constructor<T = {}> = new (...args: any[]) => T;
@@ -115,7 +116,6 @@ export const FormControlMixin = <T extends Constructor<LitElement>>(
 
     /**
      * Apply validation rule for requiring a value of this form control.
-     * @type {boolean}
      * @attr
      * @default false
      */
@@ -124,27 +124,21 @@ export const FormControlMixin = <T extends Constructor<LitElement>>(
 
     /**
      * Required validation message.
-     * @type {boolean}
      * @attr
-     * @default
      */
     @property({ type: String, attribute: 'required-message' })
     requiredMessage = 'This field is required';
 
     /**
      * Apply custom error on this input.
-     * @type {boolean}
      * @attr
-     * @default false
      */
     @property({ type: Boolean, reflect: true })
     error = false;
 
     /**
      * Custom error message.
-     * @type {boolean}
      * @attr
-     * @default
      */
     @property({ type: String, attribute: 'error-message' })
     errorMessage = 'This field is invalid';

packages/uui-base/lib/mixins/LabelMixin.ts

@@ -22,7 +22,7 @@ export const LabelMixin = <T extends Constructor<LitElement>>(
   /**
    * Label mixin class containing the label functionality.
    *
-   * @slot default - area to place the label
+   * @slot - Override the default label
    */
   class LabelMixinClass extends superClass {
     /**

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

@@ -1,6 +1,4 @@
 import '.';
-import '@umbraco-ui/uui-button/lib';
-import '@umbraco-ui/uui-input/lib';
 
 import { Story } from '@storybook/web-components';
 import { html } from 'lit-html';

packages/uui-breadcrumbs/lib/uui-breadcrumb-item.element.ts

@@ -5,7 +5,7 @@ import { property } from 'lit/decorators.js';
 /**
  * A breadcrumb-item to be used with the breadcrumbs component.
  *  @element uui-breadcrumb-item
- *  @slot - to show display an element inside the breadcrumb
+ *  @slot - This slot displays elements inside the breadcrumb
  *  @csspart separator - change the content of the after element of this part to change the separator
  */
 @defineElement('uui-breadcrumb-item')