chore: refactor the content slot to be the default slot in the card-c…

…ontrol component
swisspost · Mar 22, 2024 · db921d0 · db921d0
1 parent 88c0f4b
commit db921d0
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 15 deletions.
diff --git a/.changeset/two-shrimps-argue.md b/.changeset/two-shrimps-argue.md
@@ -3,4 +3,4 @@
 '@swisspost/design-system-components': minor
 ---
 
-Added the new named slot `content`, to allow the integration of custom HTML in the card-control component.
+Added the new default slot, to allow the integration of custom HTML in the card-control component.
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
@@ -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
@@ -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
@@ -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
@@ -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,
 };