diff --git a/.changeset/smooth-bugs-explode.md b/.changeset/smooth-bugs-explode.md new file mode 100644 index 0000000000..9a822cca5d --- /dev/null +++ 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 index 3657761313..b73f35a5b6 100644 --- 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 index 0f5d884884..b34c4f8282 100644 --- 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} > - - + ); } diff --git a/packages/components/src/components/post-togglebutton/readme.md b/packages/components/src/components/post-togglebutton/readme.md index 7a5198c2dc..4d3c6be785 100644 --- 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 index 69c8efda8a..f531c17ebb 100644 --- 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'; -# Toggle Button +# Button Toggle

A toggle button component to switch between two states and display different content based on the current state.

@@ -24,8 +24,14 @@ You can set the button to be toggled initially by using the `toggled` attribute. -### 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. - +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. + + diff --git a/packages/documentation/src/stories/components/togglebutton/togglebutton.stories.ts b/packages/documentation/src/stories/components/togglebutton/togglebutton.stories.ts index 361f3b911a..c32c98918b 100644 --- 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 = { 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 = { export default meta; function renderBadge(args: Args) { + const btnClasses = ['btn', args.variant, args.size].filter(c => c && c !== 'null').join(' '); return html` - - ${args.contentWhenUntoggled} - ${args.contentWhenToggled} + + ${args.contentWhenUntoggled} + ${args.contentWhenToggled} `; } -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 = {}; export const InitiallyToggled: StoryObj = { - render: args => html` ${renderBadge({ ...args, toggled: true })} `, + args: { + toggled: true, + }, }; -export const IconContent: StoryObj = { +export const ContentVisibility: StoryObj = { render: () => { return html` - - - + + Menu + + `; },