From b7d0327ed784851c353d35797853486a1d21f961 Mon Sep 17 00:00:00 2001
From: oliverschuerch <oliver.schuerch@post.ch>
Date: Fri, 22 Mar 2024 11:03:25 +0100
Subject: [PATCH] chore: refactor the content slot to be the default slot in
 the card-control component

---
 .../post-card-control/post-card-control.tsx        |  6 +++---
 .../src/components/post-card-control/readme.md     |  8 ++++----
 .../components/card-control/card-control.docs.mdx  |  2 +-
 .../card-control/card-control.stories.ts           | 14 ++++++++------
 4 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/packages/components/src/components/post-card-control/post-card-control.tsx b/packages/components/src/components/post-card-control/post-card-control.tsx
index e97af3af90..d5a7a736e2 100644
--- a/packages/components/src/components/post-card-control/post-card-control.tsx
+++ b/packages/components/src/components/post-card-control/post-card-control.tsx
@@ -26,8 +26,8 @@ let cardControlIds = 0;
 /**
  * @class PostCardControl - representing a stencil component
  *
- * @slot content - Content to place in the named `description` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Block-level_contentt" target="_blank">block content</a>.<p className="alert alert-sm alert-warning">Even if it is generally possible, we do not recommend using interactive elements in this slot for accessibility reasons.</p>
- * @slot icon - Content to place in the named `icon` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content" target="_blank">inline content</a>.<br>It is only meant for <code>img</code> or <code>svg</code> elements and overrides the `icon` property.</p>
+ * @slot default - Content to place into the `default` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Block-level_contentt" target="_blank">block content</a>.<p className="alert alert-sm alert-warning">Even if it is generally possible, we do not recommend using interactive elements in this slot for accessibility reasons.</p>
+ * @slot icon - To insert a custom icon into the named `icon` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content" target="_blank">inline content</a>.<p className="alert alert-sm alert-info">It is only meant for <code>img</code> or <code>svg</code> elements and overrides the `icon` property.</p>
  */
 @Component({
   tag: 'post-card-control',
@@ -395,7 +395,7 @@ export class PostCardControl {
           </div>
 
           <div id={`${this.controlId}_content`} class="card-control--content">
-            <slot name="content"></slot>
+            <slot></slot>
           </div>
         </div>
       </Host>
diff --git a/packages/components/src/components/post-card-control/readme.md b/packages/components/src/components/post-card-control/readme.md
index b666f4b6a9..17d9e3a833 100644
--- a/packages/components/src/components/post-card-control/readme.md
+++ b/packages/components/src/components/post-card-control/readme.md
@@ -54,10 +54,10 @@ Type: `Promise<void>`
 
 ## Slots
 
-| Slot        | Description                                                                                                                                                                                                                                                                                                                                                      |
-| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `"content"` | Content to place in the named `description` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Block-level_contentt" target="_blank">block content</a>.<p className="alert alert-sm alert-warning">Even if it is generally possible, we do not recommend using interactive elements in this slot for accessibility reasons.</p> |
-| `"icon"`    | Content to place in the named `icon` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content" target="_blank">inline content</a>.<br>It is only meant for <code>img</code> or <code>svg</code> elements and overrides the `icon` property.</p>                                                                  |
+| Slot        | Description                                                                                                                                                                                                                                                                                                                                              |
+| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `"default"` | Content to place into the `default` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Block-level_contentt" target="_blank">block content</a>.<p className="alert alert-sm alert-warning">Even if it is generally possible, we do not recommend using interactive elements in this slot for accessibility reasons.</p> |
+| `"icon"`    | To insert a custom icon into the named `icon` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content" target="_blank">inline content</a>.<p className="alert alert-sm alert-info">It is only meant for <code>img</code> or <code>svg</code> elements and overrides the `icon` property.</p>            |
 
 
 ## Dependencies
diff --git a/packages/documentation/src/stories/components/card-control/card-control.docs.mdx b/packages/documentation/src/stories/components/card-control/card-control.docs.mdx
index 26ddfb2b06..1cccab4321 100644
--- a/packages/documentation/src/stories/components/card-control/card-control.docs.mdx
+++ b/packages/documentation/src/stories/components/card-control/card-control.docs.mdx
@@ -37,7 +37,7 @@ If this is not enough, you can also use the named `icon` slot and add your very
 
 ### Custom content
 
-If you need to add other content to the component, you can use the named slot `content` to do so.
+If you need to add other content to the component, you can use the default slot to do so.
 
 <div className="alert alert-md alert-warning">Even if it is generally possible, we do not recommend using interactive elements in this slot for accessibility reasons.</div>
 
diff --git a/packages/documentation/src/stories/components/card-control/card-control.stories.ts b/packages/documentation/src/stories/components/card-control/card-control.stories.ts
index 726f160e67..535849ec2a 100644
--- a/packages/documentation/src/stories/components/card-control/card-control.stories.ts
+++ b/packages/documentation/src/stories/components/card-control/card-control.stories.ts
@@ -24,8 +24,8 @@ const meta: MetaComponent = {
     'disabled': '',
     'validity': 'null',
     'icon': '',
+    'slots-default': '',
     'slots-icon': '',
-    'slots-content': '',
   },
   argTypes: {
     'type': {
@@ -54,12 +54,14 @@ const meta: MetaComponent = {
         },
       },
     },
-    'slots-icon': {
+    'slots-default': {
+      name: 'default',
       control: {
         type: 'text',
       },
     },
-    'slots-content': {
+    'slots-icon': {
+      name: 'icon',
       control: {
         type: 'text',
       },
@@ -80,7 +82,7 @@ export const Default: Story = {
   render: (args: Args) => {
     const [, updateArgs] = useArgs();
 
-    const content = html`<div slot="content">${unsafeHTML(args['slots-content'])}</div>`;
+    const content = html`${unsafeHTML(args['slots-default'])}`;
     const icon = html`<span slot="icon">${unsafeHTML(args['slots-icon'])}</span>`;
 
     return html`
@@ -98,7 +100,7 @@ export const Default: Story = {
         @input="${(e: any) => updateArgs({ checked: e.detail.state })}"
         @change="${(e: any) => updateArgs({ checked: e.detail.state })}"
       >
-        ${args['slots-content'] ? content : null} ${args['slots-icon'] ? icon : null}
+        ${args['slots-default'] ? content : null} ${args['slots-icon'] ? icon : null}
       </post-card-control>
     `;
   },
@@ -140,7 +142,7 @@ export const DarkBackground: Story = {
 
 export const CustomContent: Story = {
   args: {
-    'slots-content': '<ul class="mb-0"><li>List item</li><li>List item</li><li>List item</li></ul>',
+    'slots-default': '<ul class="mb-0"><li>List item</li><li>List item</li><li>List item</li></ul>',
   },
   render: Default.render,
 };