docs(storybook): document the label slot

Author: iOvergaard

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

@@ -15,7 +15,7 @@ const SPACE = ' ';
 
 /**
  *  @element uui-radio-group
- *  @slot for uui-radio elements
+ *  @slot default - slot for `<uui-radio>` elements or custom elements that extend from `UUIRadioElement`
  */
 @defineElement('uui-radio-group')
 export class UUIRadioGroupElement extends FormControlMixin(LitElement) {

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

@@ -1,19 +1,19 @@
-import { html, css, LitElement } from 'lit';
-import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
-import { query, property } from 'lit/decorators.js';
 import {
-  UUIHorizontalShakeKeyframes,
   UUIHorizontalShakeAnimationValue,
+  UUIHorizontalShakeKeyframes,
 } from '@umbraco-ui/uui-base/lib/animations';
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
+import { css, html, LitElement } from 'lit';
+import { property, query } from 'lit/decorators.js';
+
 import { UUIRadioEvent } from './UUIRadioEvent';
 
 /**
  *  @element uui-radio
  *  @description - a single radio, should never be use as a stand-alone. Must be wrapped in `<uui-radio-group></uui-radio-group>` element.
- *  @slot - for label
- * @cssprop --uui-radio-button-size - Sets the size of the radio button.
- * @fires change - on input change
- *
+ *  @slot default - slot to set the label if no `label` attribute is set.
+ *  @cssprop --uui-radio-button-size - Sets the size of the radio button.
+ *  @fires change - on input change
  */
 @defineElement('uui-radio')
 export class UUIRadioElement extends LitElement {

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

@@ -12,6 +12,9 @@ export default {
     checked: false,
     disabled: false,
   },
+  argTypes: {
+    default: { control: { type: 'text' } },
+  },
 };
 
 export const AAAOverview: Story = props =>
@@ -21,13 +24,21 @@ export const AAAOverview: Story = props =>
     .name=${props.name}
     ?disabled=${props.disabled}
     ?checked=${props.checked}
-    >Label</uui-radio
+    >${props.default}</uui-radio
   >`;
 AAAOverview.storyName = 'Overview';
 AAAOverview.parameters = {
   docs: {
     source: {
-      code: `Copy from GroupedOverview story`,
+      code: `<uui-radio-group name="Test">
+      <uui-radio value="Value 1" disabled>Option 1</uui-radio>
+      <uui-radio value="Value 2" label="Option 2"></uui-radio>
+      <uui-radio value="Value 3">Option 3</uui-radio>
+      <uui-radio value="Value 4" disabled>Option 4</uui-radio>
+      <uui-radio value="Value 5" checked>Option 5</uui-radio>
+      <uui-radio value="Value 6">Option 6</uui-radio>
+      <uui-radio value="Value 7" disabled>Option 7</uui-radio>
+    </uui-radio-group>`,
     },
   },
 };