docs(storybook): handle the default slot

Author: iOvergaard

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

@@ -13,7 +13,7 @@ export default {
   id: 'uui-badge',
   args: {
     look: 'primary',
-    default: '1',
+    slot: '1',
     attention: false,
   },
   argTypes: {
@@ -29,22 +29,25 @@ export default {
       ],
       control: { type: 'select' },
     },
+    slot: {
+      control: { type: 'text' },
+    },
   },
 };
 
 const Template: Story = props => html` <uui-icon-registry-essential>
   <div
     style="position:relative; width:80px; height:80px; border: 2px dashed black;">
     <uui-badge .look=${props.look} ?attention=${props.attention}
-      >${props.default}</uui-badge
+      >${props.slot}</uui-badge
     >
   </div>
 </uui-icon-registry-essential>`;
 
 export const AAAOverview = Template.bind({});
 AAAOverview.args = {
   look: 'primary',
-  default: '1',
+  slot: '1',
   attention: false,
 };
 AAAOverview.storyName = 'Overview';
@@ -63,7 +66,7 @@ AAAOverview.parameters = {
 export const WithAttention = Template.bind({});
 WithAttention.args = {
   look: 'danger',
-  default: '!',
+  slot: '!',
   attention: true,
 };
 WithAttention.parameters = {
@@ -81,7 +84,7 @@ WithAttention.parameters = {
 export const WithText = Template.bind({});
 WithText.args = {
   look: 'positive',
-  default: 'Published',
+  slot: 'Published',
 };
 WithText.parameters = {
   docs: {
@@ -98,9 +101,12 @@ WithText.parameters = {
 export const WithIcon = Template.bind({});
 WithIcon.args = {
   look: 'positive',
-  default: html`<uui-icon name="favorite"></uui-icon>`,
+  slot: html`<uui-icon name="favorite"></uui-icon>`,
 };
 WithIcon.parameters = {
+  controls: {
+    exclude: ['slot'],
+  },
   docs: {
     source: {
       code: `
@@ -118,11 +124,11 @@ WithIcon.parameters = {
 
 export const OnButton: Story = props => html` <uui-button look="outline">
   Button label
-  <uui-badge .look=${props.look}>${props.default}</uui-badge>
+  <uui-badge .look=${props.look}>${props.slot}</uui-badge>
 </uui-button>`;
 OnButton.args = {
   look: 'danger',
-  default: '!',
+  slot: '!',
 };
 OnButton.parameters = {
   docs: {
@@ -143,14 +149,14 @@ export const Looks: Story = props => html`
       html`<div
         style="position:relative; display:inline-block; width:10px; height:10px; margin-right: 16px;">
         <uui-badge .look=${lookName} ?attention=${props.attention}
-          >${props.default}</uui-badge
+          >${props.slot}</uui-badge
         >
       </div>`
   )}
 `;
 Looks.args = {
   look: 'primary',
-  default: '!',
+  slot: '!',
 };
 
 let lookNamesDocsCode = '';