@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.144 → 2.0.0-next.145

package/src/components/checkbox-item/checkbox-item.css

@@ -16,36 +16,79 @@
   user-select: none;
   cursor: pointer;
 
+  &.has-description {
+    /* a second text line outgrows the fixed row; the hover surface follows */
+    height: auto;
+    min-height: var(--ui-components-checkbox-touch-target-size);
+  }
+
   &.disabled {
     cursor: not-allowed;
   }
 
-  .chevron-container,
-  .nested-spacer {
+  .chevron-container {
     display: flex;
     width: var(--global-size-spacing-touch-target-min);
-    height: var(--global-size-spacing-touch-target-min);
     min-width: var(--global-size-spacing-touch-target-min);
-    min-height: var(--global-size-spacing-touch-target-min);
-    padding: 0px;
+    height: var(--global-size-spacing-touch-target-min);
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
   }
 
+  .nested-spacer {
+    /* one indent step per level above 1; --checkbox-item-depth is set inline */
+    width: calc(
+      var(--checkbox-item-depth, 0) *
+        var(--ui-components-checkbox-nested-item-padding-left)
+    );
+    flex-shrink: 0;
+    align-self: stretch;
+  }
+
+  .chevron-button {
+    @mixin style style=flat visibleWrapperClass=.chevron-visible;
+    appearance: none;
+    border: none;
+    background: transparent;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: var(--on-flat-neutral-color);
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  .chevron-visible {
+    /* same visible box as obc-icon-button so the two align in one list */
+    width: var(--ui-components-icon-button-visual-target-size);
+    height: var(--ui-components-icon-button-visual-target-size);
+    border-radius: var(--ui-components-button-border-radius-top-left);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
   .chevron-icon {
     width: var(--global-size-spacing-icon-icon-size-regular);
     height: var(--global-size-spacing-icon-icon-size-regular);
-    color: var(--on-flat-neutral-color);
   }
 
   .checkbox-label-container {
     display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-width: 0; /* lets the label ellipsis instead of widening the row */
     padding: 0 var(--global-size-spacing-list-item-padding-vertical) 0 0;
     margin-left: calc(
       var(--global-size-spacing-list-item-padding-vertical) / -2
     );
-    align-items: center;
     flex-grow: 1;
   }
 
@@ -65,6 +108,18 @@
       color: var(--element-disabled-color);
     }
   }
+
+  .checkbox-description {
+    color: var(--element-active-color);
+    @mixin font-label;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    .disabled & {
+      color: var(--element-disabled-color);
+    }
+  }
 }
 
 .checkbox-item-container.hover-style-touch-target {
@@ -73,12 +128,6 @@
 
 .checkbox-item-container.hover-style-visual-target {
   @mixin style style=flat noClick visibleWrapperClass=.content-container;
-
-  .chevron-container,
-  .nested-spacer {
-    width: var(--ui-components-checkbox-nested-item-padding-left);
-    min-width: var(--ui-components-checkbox-nested-item-padding-left);
-  }
 }
 
 .content-container {
@@ -92,10 +141,7 @@
   box-shadow: none;
   border-radius: var(--ui-components-checkbox-list-item-border-radius);
 
-  .checkbox-item-container.hover-style-visual-target:not(.is-nested):not(
-      .is-level-1
-    ):not(.is-level-2)
-    & {
+  .checkbox-item-container.hover-style-visual-target:not(.is-nested) & {
     margin-left: calc(var(--ui-components-checkbox-padding-horizontal) * -1);
   }
 

package/src/components/checkbox-item/checkbox-item.spec.ts

@@ -0,0 +1,115 @@
+import {afterEach, describe, expect, it} from 'vitest';
+import './checkbox-item.js';
+import type {ObcCheckboxItem} from './checkbox-item.js';
+
+async function mount(setup: (el: ObcCheckboxItem) => void = () => {}) {
+  const el = document.createElement('obc-checkbox-item');
+  el.label = 'Label';
+  setup(el);
+  document.body.appendChild(el);
+  await el.updateComplete;
+  return el;
+}
+
+const sr = (el: ObcCheckboxItem) => el.shadowRoot!;
+
+afterEach(() => {
+  document.body.innerHTML = '';
+});
+
+describe('obc-checkbox-item level', () => {
+  it('level 0 renders neither chevron slot nor spacer', async () => {
+    const el = await mount();
+    expect(sr(el).querySelector('.chevron-container')).toBeNull();
+    expect(sr(el).querySelector('.nested-spacer')).toBeNull();
+  });
+
+  it('level 1 reserves the chevron slot without a button', async () => {
+    const el = await mount((e) => (e.level = 1));
+    expect(sr(el).querySelector('.chevron-container')).not.toBeNull();
+    expect(sr(el).querySelector('.chevron-button')).toBeNull();
+    expect(sr(el).querySelector('.nested-spacer')).toBeNull();
+  });
+
+  it('level 3 exposes depth 2 to CSS through the spacer', async () => {
+    const el = await mount((e) => (e.level = 3));
+    const spacer = sr(el).querySelector<HTMLElement>('.nested-spacer')!;
+    expect(spacer.style.getPropertyValue('--checkbox-item-depth')).toBe('2');
+  });
+
+  it('reflects level, expandable and expanded as attributes', async () => {
+    const el = await mount((e) => {
+      e.level = 2;
+      e.expandable = true;
+      e.expanded = true;
+    });
+    expect(el.getAttribute('level')).toBe('2');
+    expect(el.hasAttribute('expandable')).toBe(true);
+    expect(el.hasAttribute('expanded')).toBe(true);
+  });
+});
+
+describe('obc-checkbox-item expandable', () => {
+  it('renders a chevron button with aria-expanded', async () => {
+    const el = await mount((e) => {
+      e.level = 1;
+      e.expandable = true;
+    });
+    const btn = sr(el).querySelector<HTMLButtonElement>('.chevron-button')!;
+    expect(btn).not.toBeNull();
+    expect(btn.getAttribute('aria-expanded')).toBe('false');
+    expect(btn.getAttribute('aria-label')).toBe('Label');
+    expect(sr(el).querySelector('obi-chevron-right-google')).not.toBeNull();
+    el.expanded = true;
+    await el.updateComplete;
+    expect(btn.getAttribute('aria-expanded')).toBe('true');
+    expect(sr(el).querySelector('obi-chevron-down-google')).not.toBeNull();
+  });
+
+  it('expandable at level 0 still renders the chevron slot', async () => {
+    const el = await mount((e) => (e.expandable = true));
+    expect(sr(el).querySelector('.chevron-button')).not.toBeNull();
+  });
+
+  it('chevron click fires expand-toggle with the next value and no change', async () => {
+    const el = await mount((e) => {
+      e.level = 1;
+      e.expandable = true;
+    });
+    const toggles: boolean[] = [];
+    let changes = 0;
+    el.addEventListener('expand-toggle', (e) =>
+      toggles.push((e as CustomEvent<boolean>).detail)
+    );
+    el.addEventListener('change', () => changes++);
+    sr(el).querySelector<HTMLButtonElement>('.chevron-button')!.click();
+    expect(toggles).toEqual([true]);
+    expect(changes).toBe(0);
+    expect(el.expanded).toBe(false);
+    expect(el.status).toBe('unchecked');
+  });
+
+  it('row click still toggles the checkbox', async () => {
+    const el = await mount((e) => {
+      e.level = 1;
+      e.expandable = true;
+    });
+    let changes = 0;
+    el.addEventListener('change', () => changes++);
+    sr(el).querySelector<HTMLElement>('.checkbox-label')!.click();
+    expect(changes).toBe(1);
+    expect(el.status).toBe('checked');
+  });
+});
+
+describe('obc-checkbox-item description', () => {
+  it('renders the description only when non-empty', async () => {
+    const el = await mount();
+    expect(sr(el).querySelector('.checkbox-description')).toBeNull();
+    el.description = 'More detail';
+    await el.updateComplete;
+    expect(sr(el).querySelector('.checkbox-description')!.textContent).toBe(
+      'More detail'
+    );
+  });
+});

package/src/components/checkbox-item/checkbox-item.stories.ts

@@ -14,15 +14,18 @@ const statusVariants = [
   CheckboxStatus.mixed,
 ] as const;
 
-const renderStatusGroup = (opts: {
-  state: ObcCheckboxItemState;
+type RowOptions = {
   hoverStyle: ObcCheckboxItemHoverStyle;
-  disabled: boolean;
   label: string;
-  isNested: boolean;
-  isLevel1: boolean;
-  isLevel2: boolean;
-}) => html`
+  description: string;
+  level: number;
+  expandable: boolean;
+  expanded: boolean;
+};
+
+const renderStatusGroup = (
+  opts: RowOptions & {state: ObcCheckboxItemState; disabled: boolean}
+) => html`
   <div style="display:flex; justify-content:flex-start; width:100%;">
     <div style="display:flex; align-items:center; gap:24px; min-height:96px;">
       ${statusVariants.map(
@@ -33,9 +36,10 @@ const renderStatusGroup = (opts: {
             .hoverStyle=${opts.hoverStyle}
             .disabled=${opts.disabled}
             .label=${opts.label}
-            .isNested=${opts.isNested}
-            .isLevel1=${opts.isLevel1}
-            .isLevel2=${opts.isLevel2}
+            .description=${opts.description}
+            .level=${opts.level}
+            .expandable=${opts.expandable}
+            .expanded=${opts.expanded}
           ></obc-checkbox-item>`
       )}
     </div>
@@ -44,14 +48,7 @@ const renderStatusGroup = (opts: {
 
 const renderStateRow = (
   title: string,
-  opts: {
-    state: ObcCheckboxItemState;
-    hoverStyle: ObcCheckboxItemHoverStyle;
-    label: string;
-    isNested: boolean;
-    isLevel1: boolean;
-    isLevel2: boolean;
-  }
+  opts: RowOptions & {state: ObcCheckboxItemState}
 ) => html`
   <div style="display:flex; flex-direction:column; gap:8px; width:100%;">
     <div style="font-weight:600;">${title}</div>
@@ -62,13 +59,7 @@ const renderStateRow = (
   </div>
 `;
 
-const renderVariantRows = (opts: {
-  hoverStyle: ObcCheckboxItemHoverStyle;
-  label: string;
-  isNested: boolean;
-  isLevel1: boolean;
-  isLevel2: boolean;
-}) => html`
+const renderVariantRows = (opts: RowOptions) => html`
   <div style="display:flex; flex-direction:column; gap:20px; width:100%;">
     ${renderStateRow('Enabled', {
       ...opts,
@@ -88,7 +79,7 @@ const meta = {
   parameters: {
     layout: 'centered',
     actions: {
-      handles: ['change'],
+      handles: ['change', 'expand-toggle'],
     },
   },
   render: (args, context) => {
@@ -98,9 +89,10 @@ const meta = {
       .disabled=${args.disabled}
       .hoverStyle=${args.hoverStyle}
       .label=${args.label}
-      .isNested=${args.isNested}
-      .isLevel1=${args.isLevel1}
-      .isLevel2=${args.isLevel2}
+      .description=${args.description}
+      .level=${args.level}
+      .expandable=${args.expandable}
+      .expanded=${args.expanded}
     ></obc-checkbox-item>`;
 
     if (context.viewMode === 'docs') {
@@ -121,9 +113,10 @@ const meta = {
         .disabled=${args.disabled}
         .hoverStyle=${args.hoverStyle}
         .label=${args.label}
-        .isNested=${args.isNested}
-        .isLevel1=${args.isLevel1}
-        .isLevel2=${args.isLevel2}
+        .description=${args.description}
+        .level=${args.level}
+        .expandable=${args.expandable}
+        .expanded=${args.expanded}
       ></obc-checkbox-item>
     </div>`;
   },
@@ -151,84 +144,76 @@ const meta = {
       name: 'Label',
       control: {type: 'text'},
     },
+    description: {
+      name: 'Description',
+      control: {type: 'text'},
+    },
+    level: {
+      name: 'Level',
+      control: {type: 'number', min: 0, max: 4, step: 1},
+    },
+    expandable: {
+      name: 'Expandable',
+      control: {type: 'boolean'},
+    },
+    expanded: {
+      name: 'Expanded',
+      control: {type: 'boolean'},
+      if: {arg: 'expandable', truthy: true},
+    },
   },
 } satisfies Meta<ObcCheckboxItem>;
 
 export default meta;
 type Story = StoryObj<ObcCheckboxItem>;
 
+const defaultArgs = {
+  status: CheckboxStatus.unchecked,
+  state: ObcCheckboxItemState.enabled,
+  hoverStyle: ObcCheckboxItemHoverStyle.touchTarget,
+  label: 'Label',
+  description: '',
+  disabled: false,
+  level: 0,
+  expandable: false,
+  expanded: false,
+};
+
 export const Playground: Story = {
-  args: {
-    status: CheckboxStatus.unchecked,
-    state: ObcCheckboxItemState.enabled,
-    hoverStyle: ObcCheckboxItemHoverStyle.touchTarget,
-    label: 'Label',
-    disabled: false,
-    isNested: false,
-    isLevel1: false,
-    isLevel2: false,
-  },
+  args: defaultArgs,
 };
 
 export const Nested: Story = {
-  args: {
-    status: CheckboxStatus.unchecked,
-    state: ObcCheckboxItemState.enabled,
-    hoverStyle: ObcCheckboxItemHoverStyle.touchTarget,
-    label: 'Label',
-    disabled: false,
-    isNested: true,
-    isLevel1: false,
-    isLevel2: false,
-  },
-  render: (args) =>
-    renderVariantRows({
-      hoverStyle: args.hoverStyle,
-      label: args.label,
-      isNested: true,
-      isLevel1: false,
-      isLevel2: false,
-    }),
+  args: {...defaultArgs, level: 1},
+  render: (args) => renderVariantRows(args),
 };
 
-export const Level1: Story = {
-  args: {
-    status: CheckboxStatus.unchecked,
-    state: ObcCheckboxItemState.enabled,
-    hoverStyle: ObcCheckboxItemHoverStyle.touchTarget,
-    label: 'Label',
-    disabled: false,
-    isNested: true,
-    isLevel1: true,
-    isLevel2: false,
-  },
-  render: (args) =>
-    renderVariantRows({
-      hoverStyle: args.hoverStyle,
-      label: args.label,
-      isNested: true,
-      isLevel1: true,
-      isLevel2: false,
-    }),
+export const Expandable: Story = {
+  args: {...defaultArgs, level: 1, expandable: true},
+  render: (args) => html`
+    <div style="display:flex; flex-direction:column; gap:20px; width:100%;">
+      ${renderStateRow('Collapsed', {
+        ...args,
+        state: ObcCheckboxItemState.enabled,
+        expandable: true,
+        expanded: false,
+      })}
+      ${renderStateRow('Expanded', {
+        ...args,
+        state: ObcCheckboxItemState.enabled,
+        expandable: true,
+        expanded: true,
+      })}
+    </div>
+  `,
 };
 
 export const Level2: Story = {
-  args: {
-    status: CheckboxStatus.unchecked,
-    state: ObcCheckboxItemState.enabled,
-    hoverStyle: ObcCheckboxItemHoverStyle.touchTarget,
-    label: 'Label',
-    disabled: false,
-    isNested: true,
-    isLevel1: false,
-    isLevel2: true,
-  },
-  render: (args) =>
-    renderVariantRows({
-      hoverStyle: args.hoverStyle,
-      label: args.label,
-      isNested: true,
-      isLevel1: false,
-      isLevel2: true,
-    }),
+  args: {...defaultArgs, level: 2},
+  render: (args) => renderVariantRows(args),
+};
+
+export const WithDescription: Story = {
+  args: {...defaultArgs, description: 'Description'},
+  render: (args) => renderVariantRows(args),
 };