feat(components): update the post-togglebutton

swisspost · Dec 12, 2024 · 4d636e3 · 4d636e3
1 parent 9759691
commit 4d636e3
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 38 deletions.
diff --git a/.changeset/smooth-bugs-explode.md b/.changeset/smooth-bugs-explode.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-components': major
+'@swisspost/design-system-documentation': patch
+---
+
+Updated the `post-togglebutton` component to offer greater flexibility. You can now control the visibility of elements within the `post-togglebutton` using the `data-showwhen="toggled"` and `data-showwhen="untoggled"` attributes. Any content without a `data-showwhen` attribute will always be visible, regardless of the toggle state.
diff --git a/packages/components/src/components/post-togglebutton/post-togglebutton.scss b/packages/components/src/components/post-togglebutton/post-togglebutton.scss
@@ -1,3 +1,15 @@
 :host {
   cursor: pointer;
 }
+
+:host([aria-pressed="true"]) {
+  ::slotted([data-showwhen="untoggled"]) {
+    display: none;
+  }
+}
+
+:host([aria-pressed="false"]) {
+  ::slotted([data-showwhen="toggled"]) {
+    display: none;
+  }
+}
diff --git a/packages/components/src/components/post-togglebutton/post-togglebutton.tsx b/packages/components/src/components/post-togglebutton/post-togglebutton.tsx
@@ -1,9 +1,9 @@
-import { Component, Host, h, Prop } from '@stencil/core';
+import { Component, Host, h, Prop, Watch } from '@stencil/core';
 import { version } from '@root/package.json';
+import { checkType } from '@/utils';
 
 /**
- * @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.
+ * @slot default - Slot for the content of the button.
  */
 
 @Component({
@@ -15,7 +15,20 @@ export class PostTogglebutton {
   /**
    * If `true`, the button is in the "on" state, otherwise it is in the "off" state.
    */
-  @Prop({ reflect: true, mutable: true }) toggled: boolean = false;
+  @Prop({ mutable: true }) toggled: boolean = false;
+
+  @Watch('toggled')
+  validateToggled(value = this.toggled) {
+    checkType(
+      value,
+      'boolean',
+      'The "toggled" property of the post-togglebutton must be a boolean.',
+    );
+  }
+
+  componentWillLoad() {
+    this.validateToggled();
+  }
 
   private handleClick = () => {
     this.toggled = !this.toggled;
@@ -38,12 +51,7 @@ export class PostTogglebutton {
         onClick={this.handleClick}
         onKeyDown={this.handleKeydown}
       >
-        <span hidden={this.toggled}>
-          <slot name="untoggled" />
-        </span>
-        <span hidden={!this.toggled}>
-          <slot name="toggled" />
-        </span>
+        <slot />
       </Host>
     );
   }

diff --git a/packages/components/src/components/post-togglebutton/readme.md b/packages/components/src/components/post-togglebutton/readme.md
@@ -14,10 +14,9 @@
 
 ## Slots
 
-| Slot          | Description                                                       |
-| ------------- | ----------------------------------------------------------------- |
-| `"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. |
+| Slot        | Description                         |
+| ----------- | ----------------------------------- |
+| `"default"` | Slot for the content of the button. |
 
 
 ----------------------------------------------

diff --git a/packages/documentation/src/stories/components/togglebutton/togglebutton.docs.mdx b/packages/documentation/src/stories/components/togglebutton/togglebutton.docs.mdx
@@ -3,7 +3,7 @@ import * as toggleButtonStories from './togglebutton.stories';
 
 <Meta of={toggleButtonStories} />
 
-# Toggle Button
+# Button Toggle
 
 <p className="lead">A toggle button component to switch between two states and display different content based on the current state.</p>
 
@@ -24,8 +24,14 @@ You can set the button to be toggled initially by using the `toggled` attribute.
 
 <Canvas of={toggleButtonStories.InitiallyToggled} />
 
-### Icon content
+### Content Visibility
 
-You can also add an icon to the content (for a toggle menu, for example).
+The toggle button can contain any text or inline element.
 
-<Canvas of={toggleButtonStories.IconContent} />
+You can control the visibility of an element based on the state of the toggle button using the `data-showwhen` attribute.
+
+- If the element has a `data-showwhen="toggled"` attribute, it will be visible when the button is toggled on.
+- If the element has a `data-showwhen="untoggled"` attribute, it will be visible when the button is toggled off.
+- If the element **does not** have a `data-showwhen` attribute, it will always be visible, regardless of the button's state.
+
+<Canvas of={toggleButtonStories.ContentVisibility} />
diff --git a/packages/documentation/src/stories/components/togglebutton/togglebutton.stories.ts b/packages/documentation/src/stories/components/togglebutton/togglebutton.stories.ts
@@ -1,11 +1,9 @@
 import { type Args, StoryObj } from '@storybook/web-components';
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { MetaComponent } from '@root/types';
-import { spread } from '@open-wc/lit-helpers';
 import buttonMeta from '../button/button.stories';
 
 export interface PostTogglebuttonProps {
-  type?: 'button' | 'submit' | 'reset';
   toggled?: boolean;
   variant?: string;
   size?: string;
@@ -15,7 +13,7 @@ export interface PostTogglebuttonProps {
 
 const meta: MetaComponent<PostTogglebuttonProps> = {
   id: '1a6f47c2-5e8a-45a0-b1c3-9f7e2b834c24',
-  title: 'Components/Toggle Button',
+  title: 'Components/Button Toggle',
   tags: ['package:WebComponents'],
   render: renderBadge,
   component: 'post-togglebutton',
@@ -70,34 +68,30 @@ const meta: MetaComponent<PostTogglebuttonProps> = {
 export default meta;
 
 function renderBadge(args: Args) {
+  const btnClasses = ['btn', args.variant, args.size].filter(c => c && c !== 'null').join(' ');
   return html`
-    <post-togglebutton ${spread(createProps(args))}>
-      <span slot="untoggled">${args.contentWhenUntoggled}</span>
-      <span slot="toggled">${args.contentWhenToggled}</span>
+    <post-togglebutton class=${btnClasses} toggled=${args.toggled || nothing}>
+      <span data-showwhen="untoggled">${args.contentWhenUntoggled}</span>
+      <span data-showwhen="toggled">${args.contentWhenToggled}</span>
     </post-togglebutton>
   `;
 }
 
-function createProps(args: Args) {
-  return {
-    class: ['btn', args.variant, args.size].filter(c => c && c !== 'null').join(' '),
-    type: args.type,
-    ...(args.toggled && { toggled: true }),
-  };
-}
-
 export const Default: StoryObj<PostTogglebuttonProps> = {};
 
 export const InitiallyToggled: StoryObj<PostTogglebuttonProps> = {
-  render: args => html` ${renderBadge({ ...args, toggled: true })} `,
+  args: {
+    toggled: true,
+  },
 };
 
-export const IconContent: StoryObj<PostTogglebuttonProps> = {
+export const ContentVisibility: StoryObj<PostTogglebuttonProps> = {
   render: () => {
     return html`
-      <post-togglebutton class="btn btn-icon btn-primary">
-        <span slot="untoggled"><post-icon name="2070"></post-icon></span>
-        <span slot="toggled"><post-icon name="2043"></post-icon></span>
+      <post-togglebutton class="btn btn-primary">
+        Menu
+        <span data-showwhen="untoggled"><post-icon name="2070"></post-icon></span>
+        <span data-showwhen="toggled"><post-icon name="2043"></post-icon></span>
       </post-togglebutton>
     `;
   },