feat(styles): improved for PR

swisspost · Nov 12, 2024 · 5b79f22 · 5b79f22
1 parent c785f69
commit 5b79f22
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 24 deletions.
diff --git a/packages/components/src/components/post-togglebutton/post-togglebutton.tsx b/packages/components/src/components/post-togglebutton/post-togglebutton.tsx
@@ -2,7 +2,6 @@ import { Component, Host, h, Prop } from '@stencil/core';
 import { version } from '@root/package.json';
 
 /**
- * @slot default - Slot to set button to untoggled
  * @slot toggled - Slot for content displayed when the button is in the "on" state.
  * @slot untoggled - Slot for content displayed when the button is in the "off" state.
  */
@@ -39,7 +38,12 @@ export class PostTogglebutton {
         onClick={this.handleClick}
         onKeyDown={this.handleKeydown}
       >
-        {this.toggled ? <slot name="toggled"></slot> : <slot name="untoggled"></slot>}
+        <span hidden={this.toggled}>
+          <slot name="untoggled" />
+        </span>
+        <span hidden={!this.toggled}>
+          <slot name="toggled" />
+        </span>
       </Host>
     );
   }

diff --git a/packages/components/src/components/post-togglebutton/readme.md b/packages/components/src/components/post-togglebutton/readme.md
@@ -16,7 +16,6 @@
 
 | Slot          | Description                                                       |
 | ------------- | ----------------------------------------------------------------- |
-| `"default"`   | Slot to set button to untoggled                                   |
 | `"toggled"`   | Slot for content displayed when the button is in the "on" state.  |
 | `"untoggled"` | Slot for content displayed when the button is in the "off" state. |
 

diff --git a/packages/documentation/src/stories/components/togglebutton/togglebutton.snapshot.stories.ts b/packages/documentation/src/stories/components/togglebutton/togglebutton.snapshot.stories.ts
@@ -1,8 +1,8 @@
 import type { StoryObj } from '@storybook/web-components';
-import toggleButtonMeta from './togglebutton.stories';
+import meta from './togglebutton.stories';
 import { html } from 'lit';
 
-const { id, ...metaWithoutId } = toggleButtonMeta;
+const { id, ...metaWithoutId } = meta;
 
 export default {
   ...metaWithoutId,
@@ -27,7 +27,7 @@ export const ToggleButton: Story = {
               SIZES.map(size =>
                 TOGGLED.map(
                   isToggled => html`
-                    ${toggleButtonMeta.render({
+                    ${meta.render({
                       variant: btn,
                       size: size || 'null',
                       toggled: isToggled,

diff --git a/packages/documentation/src/stories/components/togglebutton/togglebutton.stories.ts b/packages/documentation/src/stories/components/togglebutton/togglebutton.stories.ts
@@ -2,6 +2,7 @@ import { type Args, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { MetaComponent } from '@root/types';
 import { spread } from '@open-wc/lit-helpers';
+import buttonMeta from '../buttons/button/button.stories';
 
 export interface PostTogglebuttonProps {
   type?: 'button' | 'submit' | 'reset';
@@ -12,7 +13,7 @@ export interface PostTogglebuttonProps {
   contentWhenUntoggled?: string;
 }
 
-const toggleButtonMeta: MetaComponent<PostTogglebuttonProps> = {
+const meta: MetaComponent<PostTogglebuttonProps> = {
   id: '1a6f47c2-5e8a-45a0-b1c3-9f7e2b834c24',
   title: 'Components/Toggle Button',
   tags: ['package:WebComponents'],
@@ -24,7 +25,6 @@ const toggleButtonMeta: MetaComponent<PostTogglebuttonProps> = {
   args: {
     contentWhenToggled: 'Toggled',
     contentWhenUntoggled: 'Untoggled',
-    type: 'button',
     variant: 'btn-primary',
     size: 'null',
     toggled: false,
@@ -47,29 +47,16 @@ const toggleButtonMeta: MetaComponent<PostTogglebuttonProps> = {
       },
     },
     size: {
-      name: 'Size',
+      ...buttonMeta.argTypes?.size,
       description:
         'Sets the size of the component.' +
         '<span className="mt-8 alert alert-info alert-sm">' +
         'For more options, please see the ' +
         '<a href="/?path=/docs/eb78afcb-ce92-4990-94b6-6536d5ec6af4--docs">button documentation</a>' +
         '.</span>',
-      control: {
-        type: 'select',
-        labels: {
-          'btn-sm': 'Small',
-          'btn-rg': 'Regular',
-          'null': 'Medium',
-          'btn-lg': 'Large',
-        },
-      },
-      options: ['btn-sm', 'btn-rg', 'null', 'btn-lg'],
-      table: {
-        category: 'General',
-      },
     },
     variant: {
-      ...toggleButtonMeta.argTypes?.variant,
+      ...buttonMeta.argTypes?.variant,
       description:
         'Defines a style variant.' +
         '<span className="mt-8 alert alert-info alert-sm">' +
@@ -80,7 +67,7 @@ const toggleButtonMeta: MetaComponent<PostTogglebuttonProps> = {
   },
 };
 
-export default toggleButtonMeta;
+export default meta;
 
 function renderBadge(args: Args) {
   return html`