feat(components): add content slot to card-control component

swisspost · Mar 21, 2024 · 0ae0d78 · 0ae0d78
1 parent d1df2c6
commit 0ae0d78
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 16 deletions.
diff --git a/.changeset/two-shrimps-argue.md b/.changeset/two-shrimps-argue.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-components': minor
+---
+
+Added the new named slot `content`, 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.scss b/packages/components/src/components/post-card-control/post-card-control.scss
@@ -22,7 +22,8 @@
   --post-card-control-input-bg: #{post.$white};
 
   flex-basis: 100%;
-  display: flex;
+  display: grid;
+  grid-template: 'checkbox label icon' 'checkbox content icon' / min-content auto min-content;
   gap: 0 post.$size-mini;
   padding: post.$size-regular;
   background-color: var(--post-card-control-bg);
@@ -34,7 +35,7 @@
   transition: background-color 100ms linear, border-color 100ms linear;
 
   .card-control--input {
-    flex: 0 0 auto;
+    grid-area: checkbox;
     margin: post.$size-micro 0;
     background-color: var(--post-card-control-input-bg);
     border-color: var(--post-card-control-input-border-color) !important;
@@ -46,21 +47,28 @@
     &:focus-visible {
       box-shadow: none;
     }
+  }
 
-    ~ .card-control--label {
-      flex-grow: 2;
-      margin: post.$size-micro 0;
-      color: inherit !important;
-      pointer-events: none;
-    }
+  .card-control--label {
+    grid-area: label;
+    margin: post.$size-micro 0;
+    padding: 0;
+    color: inherit !important;
+    pointer-events: none;
+    transition-duration: 100ms;
   }
 
   .card-control--description {
+    grid-area: label;
     font-size: 0.75rem;
   }
 
+  .card-control--content {
+    grid-area: content;
+  }
+
   .card-control--icon {
-    flex: 0 0 auto;
+    grid-area: icon;
     width: post.$size-big;
     height: post.$size-big;
     pointer-events: none;

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,6 +26,7 @@ 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>
  */
 @Component({
@@ -367,6 +368,7 @@ export class PostCardControl {
             name={this.name}
             value={this.value}
             checked={this.checked}
+            aria-describedby={`${this.controlId}_label ${this.controlId}_content`}
             aria-disabled={this.disabled}
             aria-invalid={this.validity === 'false'}
             onClick={this.controlClickHandler}
@@ -377,7 +379,11 @@ export class PostCardControl {
             onKeyDown={this.controlKeyDownHandler}
           />
 
-          <label htmlFor={this.controlId} class="card-control--label form-check-label">
+          <label
+            id={`${this.controlId}_label`}
+            htmlFor={this.controlId}
+            class="card-control--label form-check-label"
+          >
             {this.label}
             {this.description ? (
               <div class="card-control--description">{this.description}</div>
@@ -387,6 +393,10 @@ export class PostCardControl {
           <div class="card-control--icon">
             <slot name="icon">{this.icon ? <post-icon name={this.icon}></post-icon> : null}</slot>
           </div>
+
+          <div id={`${this.controlId}_content`} class="card-control--content">
+            <slot name="content"></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,9 +54,10 @@ Type: `Promise<void>`
 
 ## Slots
 
-| Slot     | Description                                                                                                                                                                                                                                                                                     |
-| -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `"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                                                                                                                                                                                                                                                                                                                                                      |
+| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `"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>                                                                  |
 
 
 ## 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
@@ -18,7 +18,7 @@ The `<post-card-control>` element is part of the `@swisspost/design-system-compo
 
 ## Examples
 
-### On dark background
+### Dark backgrounds
 
 <Canvas of={CardControlStories.DarkBackground}/>
 
@@ -35,6 +35,14 @@ If this is not enough, you can also use the named `icon` slot and add your very
 
 <Canvas of={CardControlStories.CustomIcon} />
 
+### Custom content
+
+If you need to add other content to the component, you can use the named slot `content` 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>
+
+<Canvas of={CardControlStories.CustomContent} />
+
 ### Form Integration
 
 You can use the component directly in your forms, the control value will be available in the `FormData` of the surrounding `<form>` element, just as you are used to from native input elements.

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
@@ -25,6 +25,7 @@ const meta: MetaComponent = {
     'validity': 'null',
     'icon': '',
     'slots-icon': '',
+    'slots-content': '',
   },
   argTypes: {
     'type': {
@@ -53,6 +54,16 @@ const meta: MetaComponent = {
         },
       },
     },
+    'slots-icon': {
+      control: {
+        type: 'text',
+      },
+    },
+    'slots-content': {
+      control: {
+        type: 'text',
+      },
+    },
     'method-groupReset': {
       table: {
         disable: true,
@@ -69,7 +80,8 @@ export const Default: Story = {
   render: (args: Args) => {
     const [, updateArgs] = useArgs();
 
-    const icon = html`<span slot="icon">${unsafeHTML(args['slots-icon'])}</span> `;
+    const content = html`<div slot="content">${unsafeHTML(args['slots-content'])}</div>`;
+    const icon = html`<span slot="icon">${unsafeHTML(args['slots-icon'])}</span>`;
 
     return html`
       <post-card-control
@@ -86,7 +98,7 @@ export const Default: Story = {
         @input="${(e: any) => updateArgs({ checked: e.detail.state })}"
         @change="${(e: any) => updateArgs({ checked: e.detail.state })}"
       >
-        ${args['slots-icon'] ? icon : null}
+        ${args['slots-content'] ? content : null} ${args['slots-icon'] ? icon : null}
       </post-card-control>
     `;
   },
@@ -126,6 +138,13 @@ export const DarkBackground: Story = {
   render: Default.render,
 };
 
+export const CustomContent: Story = {
+  args: {
+    'slots-content': '<ul class="mb-0"><li>List item</li><li>List item</li><li>List item</li></ul>',
+  },
+  render: Default.render,
+};
+
 export const CustomIcon: Story = {
   args: {
     'slots-icon':