Revert "feat(sbb-checkbox, sbb-radio-button): split into regular and …

…panel variants (#2552)"

This reverts commit 2ad13f4.

src/elements/card/card-badge/readme.md

@@ -1,6 +1,6 @@
 The `sbb-card-badge` can contain some information like prices or discounts,
-and can be used in [sbb-card](/docs/components-sbb-card-sbb-card--docs) or
-[sbb-selection-expansion-panel](/docs/components-sbb-selection-expansion-panel--docs).
+and can be used in [sbb-card](/docs/elements-sbb-card-sbb-card--docs) or
+[sbb-selection-panel](/docs/elements-sbb-selection-panel--docs).
 
 To achieve the correct spacing between elements inside the card badge, we recommend to use `span`-elements.
 All content parts are presented with a predefined gap in between.

src/elements/checkbox.ts

@@ -1,4 +1,2 @@
 export * from './checkbox/checkbox.js';
 export * from './checkbox/checkbox-group.js';
-export * from './checkbox/checkbox-panel.js';
-export * from './checkbox/common.js';

src/elements/checkbox/checkbox-group/checkbox-group.scss

@@ -23,21 +23,13 @@ $breakpoints: 'zero', 'micro', 'small', 'medium', 'large', 'wide', 'ultra';
   --sbb-checkbox-group-orientation: column;
   --sbb-checkbox-group-width: 100%;
   --sbb-checkbox-group-checkbox-width: 100%;
-
-  ::slotted(sbb-checkbox-panel) {
-    width: 100%;
-  }
 }
 
-:host([data-has-panel]) {
+:host([data-has-selection-panel]) {
   --sbb-checkbox-group-width: 100%;
-
-  ::slotted(sbb-checkbox-panel) {
-    flex: auto;
-  }
 }
 
-:host([data-has-panel][orientation='vertical']) {
+:host([data-has-selection-panel][orientation='vertical']) {
   --sbb-checkbox-group-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
 }
 
@@ -46,14 +38,11 @@ $breakpoints: 'zero', 'micro', 'small', 'medium', 'large', 'wide', 'ultra';
     // horizontal-from overrides orientation vertical
     :host([orientation='vertical'][horizontal-from='#{$breakpoint}']) {
       @include horizontal-orientation;
-
-      // We need to unset the 100% width of the vertical mode if it starts to be horizontal
-      ::slotted(sbb-checkbox-panel) {
-        width: initial;
-      }
     }
 
-    :host([orientation='vertical'][horizontal-from='#{$breakpoint}']:not([data-has-panel])) {
+    :host(
+        [orientation='vertical'][horizontal-from='#{$breakpoint}']:not([data-has-selection-panel])
+      ) {
       --sbb-checkbox-group-width: max-content;
     }
   }

src/elements/checkbox/checkbox-group/checkbox-group.stories.ts

@@ -1,9 +1,9 @@
 import { withActions } from '@storybook/addon-actions/decorator';
 import type { InputType } from '@storybook/types';
-import type { ArgTypes, Args, Decorator, Meta, StoryObj } from '@storybook/web-components';
+import type { Meta, StoryObj, ArgTypes, Args, Decorator } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html, nothing } from 'lit';
-import { styleMap, type StyleInfo } from 'lit/directives/style-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
 
 import { sbbSpread } from '../../../storybook/helpers/spread.js';
 import type { SbbCheckboxElement } from '../checkbox.js';
@@ -12,40 +12,19 @@ import readme from './readme.md?raw';
 
 import './checkbox-group.js';
 import '../checkbox.js';
-import '../checkbox-panel.js';
 import '../../form-error.js';
-import '../../icon.js';
-import '../../card/card-badge.js';
 
 const longLabelText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim elit, ultricies in tincidunt
 quis, mattis eu quam. Nulla sit amet lorem fermentum, molestie nunc ut, hendrerit risus. Vestibulum rutrum elit et
 lacus sollicitudin, quis malesuada lorem vehicula. Suspendisse at augue quis tellus vulputate tempor. Vivamus urna
 velit, varius nec est ac, mollis efficitur lorem. Quisque non nisl eget massa interdum tempus. Praesent vel feugiat
 metus.`;
 
-const suffixStyle: Readonly<StyleInfo> = {
-  display: 'flex',
-  alignItems: 'center',
-};
-
-const cardBadge = (): TemplateResult => html`<sbb-card-badge>%</sbb-card-badge>`;
-
-const suffixAndSubtext = (): TemplateResult => html`
-  <span slot="subtext">Subtext</span>
-  <span slot="suffix" style="margin-inline-start: auto;">
-    <span style=${styleMap(suffixStyle)}>
-      <sbb-icon name="diamond-small" style="margin-inline: var(--sbb-spacing-fixed-2x);"></sbb-icon>
-      <span class="sbb-text-m sbb-text--bold">CHF 40.00</span>
-    </span>
-  </span>
-  ${cardBadge()}
-`;
-
 const checkboxes = (
   checked: boolean,
   disabledSingle: boolean,
   iconName: string,
-  iconPlacement: 'start' | 'end',
+  iconPlacement: string,
   label: string,
 ): TemplateResult => html`
   <sbb-checkbox
@@ -69,20 +48,6 @@ const checkboxes = (
   </sbb-checkbox>
 `;
 
-const checkboxPanels = (
-  checked: boolean,
-  disabledSingle: boolean,
-  label: string,
-): TemplateResult => html`
-  <sbb-checkbox-panel value="checkbox-1" ?checked=${checked}>
-    ${label} 1 ${suffixAndSubtext()}</sbb-checkbox-panel
-  >
-  <sbb-checkbox-panel value="checkbox-2" ?disabled=${disabledSingle}>
-    ${label} 2 ${suffixAndSubtext()}
-  </sbb-checkbox-panel>
-  <sbb-checkbox-panel value="checkbox-3"> ${label} 3 ${suffixAndSubtext()} </sbb-checkbox-panel>
-`;
-
 const DefaultTemplate = ({
   checked,
   disabledSingle,
@@ -96,12 +61,6 @@ const DefaultTemplate = ({
   </sbb-checkbox-group>
 `;
 
-const PanelTemplate = ({ checked, disabledSingle, label, ...args }: Args): TemplateResult => html`
-  <sbb-checkbox-group ${sbbSpread(args)}>
-    ${checkboxPanels(checked, disabledSingle, label)}
-  </sbb-checkbox-group>
-`;
-
 const ErrorMessageTemplate = ({
   checked,
   disabledSingle,
@@ -295,10 +254,6 @@ const basicArgTypes: ArgTypes = {
   label,
   checked,
   disabledSingle,
-};
-
-const checkboxArgTypes: ArgTypes = {
-  ...basicArgTypes,
   iconName,
   iconPlacement,
 };
@@ -312,16 +267,12 @@ const basicArgs: Args = {
   label: 'Label',
   checked: true,
   disabledSingle: false,
-};
-
-const checkboxArgs: Args = {
-  ...basicArgs,
   iconName: undefined,
   iconPlacement: undefined,
 };
 
-const checkboxArgsVertical = {
-  ...checkboxArgs,
+const basicArgsVertical = {
+  ...basicArgs,
   orientation: orientation.options![1],
 };
 
@@ -337,104 +288,86 @@ const iconEnd: Args = {
 
 export const horizontal: StoryObj = {
   render: DefaultTemplate,
-  argTypes: checkboxArgTypes,
-  args: { ...checkboxArgs },
+  argTypes: basicArgTypes,
+  args: { ...basicArgs },
 };
 
 export const vertical: StoryObj = {
   render: DefaultTemplate,
-  argTypes: checkboxArgTypes,
-  args: { ...checkboxArgsVertical },
+  argTypes: basicArgTypes,
+  args: { ...basicArgsVertical },
 };
 
 export const verticalToHorizontal: StoryObj = {
   render: DefaultTemplate,
-  argTypes: checkboxArgTypes,
-  args: { ...checkboxArgsVertical, 'horizontal-from': 'medium' },
+  argTypes: basicArgTypes,
+  args: { ...basicArgsVertical, 'horizontal-from': 'medium' },
 };
 
 export const horizontalSizeM: StoryObj = {
   render: DefaultTemplate,
-  argTypes: checkboxArgTypes,
-  args: { ...checkboxArgs, size: 'm' },
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, size: 'm' },
 };
 
 export const horizontalDisabled: StoryObj = {
   render: DefaultTemplate,
-  argTypes: checkboxArgTypes,
-  args: { ...checkboxArgs, disabled: true, disabledSingle: true },
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, disabled: true, disabledSingle: true },
 };
 
 export const verticalDisabled: StoryObj = {
   render: DefaultTemplate,
-  argTypes: checkboxArgTypes,
-  args: { ...checkboxArgsVertical, disabled: true, disabledSingle: true },
+  argTypes: basicArgTypes,
+  args: { ...basicArgsVertical, disabled: true, disabledSingle: true },
 };
 
 export const horizontalIconStart: StoryObj = {
   render: DefaultTemplate,
-  argTypes: checkboxArgTypes,
-  args: { ...checkboxArgs, ...iconStart },
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, ...iconStart },
 };
 
 export const verticalIconStart: StoryObj = {
   render: DefaultTemplate,
-  argTypes: checkboxArgTypes,
-  args: { ...checkboxArgsVertical, ...iconStart },
+  argTypes: basicArgTypes,
+  args: { ...basicArgsVertical, ...iconStart },
 };
 
 export const horizontalIconEnd: StoryObj = {
   render: DefaultTemplate,
-  argTypes: checkboxArgTypes,
-  args: { ...checkboxArgs, ...iconEnd },
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, ...iconEnd },
 };
 
 export const verticalIconEnd: StoryObj = {
   render: DefaultTemplate,
-  argTypes: checkboxArgTypes,
-  args: { ...checkboxArgsVertical, ...iconEnd },
+  argTypes: basicArgTypes,
+  args: { ...basicArgsVertical, ...iconEnd },
 };
 
 export const verticalIconEndLongLabel: StoryObj = {
   render: DefaultTemplate,
-  argTypes: checkboxArgTypes,
-  args: { ...checkboxArgsVertical, ...iconEnd, label: longLabelText },
+  argTypes: basicArgTypes,
+  args: { ...basicArgsVertical, ...iconEnd, label: longLabelText },
 };
 
 export const horizontalWithSbbFormError: StoryObj = {
   render: ErrorMessageTemplate,
-  argTypes: checkboxArgTypes,
-  args: { ...checkboxArgs, required: true },
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, required: true },
 };
 
 export const verticalWithSbbFormError: StoryObj = {
   render: ErrorMessageTemplate,
-  argTypes: checkboxArgTypes,
-  args: { ...checkboxArgsVertical, required: true },
+  argTypes: basicArgTypes,
+  args: { ...basicArgsVertical, required: true },
 };
 
 export const indeterminateGroup: StoryObj = {
   render: IndeterminateGroupTemplate,
-  argTypes: { ...checkboxArgTypes },
-  args: { ...checkboxArgsVertical, checked: undefined },
-};
-
-export const horizontalPanel: StoryObj = {
-  render: PanelTemplate,
-  argTypes: basicArgTypes,
-  args: { ...basicArgs },
-};
-
-export const verticalPanel: StoryObj = {
-  render: PanelTemplate,
-  argTypes: basicArgTypes,
-  args: { ...basicArgs, orientation: orientation.options![1] },
-};
-
-export const verticalToHorizontalPanel: StoryObj = {
-  render: PanelTemplate,
-  argTypes: checkboxArgTypes,
-  args: { ...basicArgs, orientation: orientation.options![1], 'horizontal-from': 'medium' },
+  argTypes: { ...basicArgTypes },
+  args: { ...basicArgsVertical, checked: undefined },
 };
 
 const meta: Meta = {

src/elements/checkbox/checkbox-group/checkbox-group.ts

@@ -1,14 +1,12 @@
 import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
-import { LitElement, html } from 'lit';
+import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
 import { getNextElementIndex, interactivityChecker, isArrowKeyPressed } from '../../core/a11y.js';
 import { SbbConnectedAbortController, SbbSlotStateController } from '../../core/controllers.js';
 import type { SbbHorizontalFrom, SbbOrientation } from '../../core/interfaces.js';
 import { SbbDisabledMixin } from '../../core/mixins.js';
-import type { SbbCheckboxPanelElement } from '../checkbox-panel.js';
-import type { SbbCheckboxElement } from '../checkbox.js';
-import type { SbbCheckboxSize } from '../common.js';
+import type { SbbCheckboxElement, SbbCheckboxSize } from '../checkbox.js';
 
 import style from './checkbox-group.scss?lit&inline';
 
@@ -37,11 +35,9 @@ export class SbbCheckboxGroupElement extends SbbDisabledMixin(LitElement) {
   public orientation: SbbOrientation = 'horizontal';
 
   /** List of contained checkbox elements. */
-  public get checkboxes(): (SbbCheckboxElement | SbbCheckboxPanelElement)[] {
-    return <(SbbCheckboxElement | SbbCheckboxPanelElement)[]>(
-      Array.from(this.querySelectorAll?.('sbb-checkbox, sbb-checkbox-panel') ?? []).filter(
-        (el) => el.closest('sbb-checkbox-group') === this,
-      )
+  public get checkboxes(): SbbCheckboxElement[] {
+    return Array.from(this.querySelectorAll?.('sbb-checkbox') ?? []).filter(
+      (el: SbbCheckboxElement) => el.closest('sbb-checkbox-group') === this,
     );
   }
 
@@ -56,10 +52,7 @@ export class SbbCheckboxGroupElement extends SbbDisabledMixin(LitElement) {
     super.connectedCallback();
     const signal = this._abort.signal;
     this.addEventListener('keydown', (e) => this._handleKeyDown(e), { signal });
-    this.toggleAttribute(
-      'data-has-panel',
-      !!this.querySelector?.('sbb-selection-expansion-panel, sbb-checkbox-panel'),
-    );
+    this.toggleAttribute('data-has-selection-panel', !!this.querySelector?.('sbb-selection-panel'));
   }
 
   protected override willUpdate(changedProperties: PropertyValues<this>): void {
@@ -77,25 +70,24 @@ export class SbbCheckboxGroupElement extends SbbDisabledMixin(LitElement) {
   }
 
   private _handleKeyDown(evt: KeyboardEvent): void {
-    const enabledCheckboxes: (SbbCheckboxElement | SbbCheckboxPanelElement)[] =
-      this.checkboxes.filter(
-        (checkbox: SbbCheckboxElement | SbbCheckboxPanelElement) =>
-          !checkbox.disabled && interactivityChecker.isVisible(checkbox as HTMLElement),
-      );
+    const enabledCheckboxes: SbbCheckboxElement[] = this.checkboxes.filter(
+      (checkbox: SbbCheckboxElement) =>
+        !checkbox.disabled && interactivityChecker.isVisible(checkbox),
+    );
 
     if (
       !enabledCheckboxes ||
       // don't trap nested handling
       ((evt.target as HTMLElement) !== this &&
         (evt.target as HTMLElement).parentElement !== this &&
-        (evt.target as HTMLElement).parentElement!.localName !== 'sbb-selection-expansion-panel')
+        (evt.target as HTMLElement).parentElement!.nodeName !== 'SBB-SELECTION-PANEL')
     ) {
       return;
     }
 
     if (isArrowKeyPressed(evt)) {
       const current: number = enabledCheckboxes.findIndex(
-        (e: SbbCheckboxElement | SbbCheckboxPanelElement) => e === evt.target,
+        (e: SbbCheckboxElement) => e === evt.target,
       );
       const nextIndex: number = getNextElementIndex(evt, current, enabledCheckboxes.length);
       enabledCheckboxes[nextIndex]?.focus();