@kubex/zinc 1.1.97 → 1.1.98

package/src/components/thumbnail-group/thumbnail-group.scss

@@ -0,0 +1,87 @@
+@use "../../wc";
+
+:host {
+  @include wc.scrollbars;
+
+  display: block;
+  width: 100%;
+}
+
+.thumbnail-group__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--zn-spacing-small);
+  margin-bottom: var(--zn-spacing-x-small);
+}
+
+.thumbnail-group__caption {
+  @include wc.text-style(h1);
+
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.thumbnail-group__header-actions {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  gap: var(--zn-spacing-x-small);
+}
+
+.thumbnail-group__toggle {
+  @include wc.text-style(subheading);
+
+  padding: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  white-space: nowrap;
+
+  &:hover {
+    color: rgb(var(--zn-text));
+  }
+
+  &:focus-visible {
+    outline: var(--zn-focus-ring);
+    outline-offset: var(--zn-focus-ring-offset);
+    border-radius: var(--zn-border-radius-small);
+  }
+}
+
+/* Collapsed — one row, scrolled horizontally */
+
+.thumbnail-group__items {
+  display: grid;
+  gap: var(--zn-thumbnail-gap, var(--zn-spacing-small));
+  grid-auto-flow: column;
+  grid-auto-columns: var(--zn-thumbnail-width, 180px);
+  overflow-x: auto;
+  overflow-y: hidden;
+  // Keeps the scrollbar off the captions.
+  padding-bottom: var(--zn-spacing-2x-small);
+  scroll-snap-type: x proximity;
+  overscroll-behavior-x: contain;
+}
+
+/* Expanded — wrapping grid, no row restriction */
+
+.thumbnail-group--expanded .thumbnail-group__items {
+  grid-auto-flow: row;
+  grid-auto-columns: auto;
+  grid-template-columns: repeat(auto-fill, minmax(var(--zn-thumbnail-width, 180px), 1fr));
+  overflow: visible;
+  padding-bottom: 0;
+}
+
+// The slot has to disappear from the grid so the slotted thumbnails become the grid items.
+slot {
+  display: contents;
+}
+
+::slotted(*) {
+  scroll-snap-align: start;
+  min-width: 0;
+}

package/src/components/thumbnail-group/thumbnail-group.test.ts

@@ -0,0 +1,151 @@
+import '../../../dist/zn.min.js';
+import {expect, fixture, html, waitUntil} from '@open-wc/testing';
+import type ZnThumbnail from '../thumbnail/thumbnail.component';
+import type ZnThumbnailGroup from './thumbnail-group.component';
+
+const thumbnails = (count: number) =>
+  Array.from({length: count}, (_, i) => `<zn-thumbnail value="v${i}" caption="Item ${i}"></zn-thumbnail>`).join('');
+
+describe('<zn-thumbnail-group>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html`
+      <zn-thumbnail-group></zn-thumbnail-group>`);
+
+    expect(el).to.exist;
+  });
+
+  it('should render the caption', async () => {
+    const el = await fixture<ZnThumbnailGroup>(html`
+      <zn-thumbnail-group caption="Landscape"></zn-thumbnail-group>`);
+
+    expect(el.shadowRoot!.querySelector('.thumbnail-group__caption')!.textContent).to.contain('Landscape');
+  });
+
+  it('should not render the toggle when the thumbnails fit on one row', async () => {
+    const el = await fixture<ZnThumbnailGroup>(html`
+      <zn-thumbnail-group caption="Landscape" style="width: 800px;">
+        <zn-thumbnail caption="One"></zn-thumbnail>
+        <zn-thumbnail caption="Two"></zn-thumbnail>
+      </zn-thumbnail-group>`);
+
+    expect(el.shadowRoot!.querySelector('.thumbnail-group__toggle')).to.not.exist;
+  });
+
+  it('should render the toggle when the row overflows', async () => {
+    const el = await fixture<ZnThumbnailGroup>(
+      `<zn-thumbnail-group caption="Landscape" style="width: 400px;">${thumbnails(12)}</zn-thumbnail-group>`);
+
+    await waitUntil(() => el.shadowRoot!.querySelector('.thumbnail-group__toggle'));
+
+    const toggle = el.shadowRoot!.querySelector<HTMLButtonElement>('.thumbnail-group__toggle')!;
+    expect(toggle.textContent!.trim()).to.equal('Show All (12)');
+  });
+
+  it('should use the total attribute in the toggle label', async () => {
+    const el = await fixture<ZnThumbnailGroup>(html`
+      <zn-thumbnail-group caption="Landscape" total="79" style="width: 800px;">
+        <zn-thumbnail caption="One"></zn-thumbnail>
+      </zn-thumbnail-group>`);
+
+    const toggle = el.shadowRoot!.querySelector<HTMLButtonElement>('.thumbnail-group__toggle')!;
+    expect(toggle.textContent!.trim()).to.equal('Show All (79)');
+  });
+
+  it('should expand and collapse from the toggle', async () => {
+    const el = await fixture<ZnThumbnailGroup>(html`
+      <zn-thumbnail-group caption="Landscape" always-toggle>
+        <zn-thumbnail caption="One"></zn-thumbnail>
+      </zn-thumbnail-group>`);
+
+    const expanded: string[] = [];
+    el.addEventListener('zn-expand', () => expanded.push('expand'));
+    el.addEventListener('zn-collapse', () => expanded.push('collapse'));
+
+    el.shadowRoot!.querySelector<HTMLButtonElement>('.thumbnail-group__toggle')!.click();
+    await el.updateComplete;
+
+    expect(el.expanded).to.be.true;
+    expect(el.shadowRoot!.querySelector<HTMLButtonElement>('.thumbnail-group__toggle')!.textContent!.trim())
+      .to.equal('Show Less');
+
+    el.shadowRoot!.querySelector<HTMLButtonElement>('.thumbnail-group__toggle')!.click();
+    await el.updateComplete;
+
+    expect(el.expanded).to.be.false;
+    expect(expanded).to.deep.equal(['expand', 'collapse']);
+  });
+
+  it('should move selection between thumbnails when selectable', async () => {
+    const el = await fixture<ZnThumbnailGroup>(html`
+      <zn-thumbnail-group selectable>
+        <zn-thumbnail value="a" caption="A" selected></zn-thumbnail>
+        <zn-thumbnail value="b" caption="B"></zn-thumbnail>
+      </zn-thumbnail-group>`);
+
+    const [a, b] = Array.from(el.querySelectorAll<ZnThumbnail>('zn-thumbnail'));
+    expect(el.value).to.equal('a');
+
+    let changed = false;
+    el.addEventListener('zn-change', () => (changed = true));
+
+    b.shadowRoot!.querySelector<HTMLElement>('.thumbnail__link')!.click();
+    await el.updateComplete;
+
+    expect(el.value).to.equal('b');
+    expect(a.selected).to.be.false;
+    expect(b.selected).to.be.true;
+    expect(changed).to.be.true;
+  });
+
+  it('should mirror the shorthand attributes onto host custom properties', async () => {
+    const el = await fixture<ZnThumbnailGroup>(html`
+      <zn-thumbnail-group aspect-ratio="1 / 1" thumbnail-width="120px" gap="4px">
+        <zn-thumbnail caption="One"></zn-thumbnail>
+      </zn-thumbnail-group>`);
+
+    expect(el.style.getPropertyValue('--zn-thumbnail-aspect-ratio')).to.equal('1 / 1');
+    expect(el.style.getPropertyValue('--zn-thumbnail-width')).to.equal('120px');
+    expect(el.style.getPropertyValue('--zn-thumbnail-gap')).to.equal('4px');
+
+    // Thumbnails are light-DOM children, so they inherit the properties from the host.
+    const thumbnail = el.querySelector<ZnThumbnail>('zn-thumbnail')!;
+    const rect = thumbnail.shadowRoot!.querySelector<HTMLElement>('.thumbnail__media')!.getBoundingClientRect();
+    expect(rect.width).to.be.closeTo(120, 1);
+    expect(rect.height).to.be.closeTo(120, 1);
+  });
+
+  it('should not clear a custom property set inline by the consumer', async () => {
+    const el = await fixture<ZnThumbnailGroup>(html`
+      <zn-thumbnail-group style="--zn-thumbnail-width: 90px;">
+        <zn-thumbnail caption="One"></zn-thumbnail>
+      </zn-thumbnail-group>`);
+
+    expect(el.style.getPropertyValue('--zn-thumbnail-width')).to.equal('90px');
+  });
+
+  it('should clear a shorthand property once its attribute is removed', async () => {
+    const el = await fixture<ZnThumbnailGroup>(html`
+      <zn-thumbnail-group thumbnail-width="120px">
+        <zn-thumbnail caption="One"></zn-thumbnail>
+      </zn-thumbnail-group>`);
+
+    el.thumbnailWidth = '';
+    await el.updateComplete;
+
+    expect(el.style.getPropertyValue('--zn-thumbnail-width')).to.equal('');
+  });
+
+  it('should not manage selection when selectable is not set', async () => {
+    const el = await fixture<ZnThumbnailGroup>(html`
+      <zn-thumbnail-group>
+        <zn-thumbnail value="a" caption="A"></zn-thumbnail>
+      </zn-thumbnail-group>`);
+
+    const a = el.querySelector<ZnThumbnail>('zn-thumbnail')!;
+    a.shadowRoot!.querySelector<HTMLElement>('.thumbnail__link')!.click();
+    await el.updateComplete;
+
+    expect(a.selected).to.be.false;
+    expect(el.value).to.equal('');
+  });
+});

package/src/components/well/well.component.ts

@@ -14,6 +14,7 @@ import styles from './well.scss';
  * @since 1.0
  *
  * @slot - The default slot.
+ * @slot action - Content displayed on the right hand side of the well.
  */
 export default class ZnWell extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
@@ -21,9 +22,21 @@ export default class ZnWell extends ZincElement {
   @property() icon: string = '';
   @property({attribute: 'inline', type: Boolean, reflect: true}) inline: boolean;
 
+  /** Renders the default slot inside a `pre` element, preserving whitespace using a monospace font. */
+  @property({attribute: 'pre', type: Boolean, reflect: true}) pre: boolean;
+
+  /** Breaks long unbroken words, so they wrap instead of forcing the well wider. */
+  @property({attribute: 'break-long', type: Boolean, reflect: true}) breakLong: boolean;
+
   private readonly hasSlotController = new HasSlotController(this, '[default]', 'action');
 
   render() {
+    const contentClasses = classMap({
+      'well__content': true,
+      'well__content--pre': this.pre,
+      'well__content--break-long': this.breakLong,
+    });
+
     return html`
       <div class="${classMap({
         'well': true,
@@ -31,10 +44,15 @@ export default class ZnWell extends ZincElement {
       })}">
         ${this.icon ? html`
           <zn-icon src="${this.icon}" size="18"></zn-icon>` : ''}
-        ${this.hasSlotController.test('[default]') ? html`
-          <div>
-            <slot></slot>
-          </div>` : ''}
+        ${this.hasSlotController.test('[default]')
+          ? (this.pre
+            ? html`
+              <pre class="${contentClasses}"><slot></slot></pre>`
+            : html`
+              <div class="${contentClasses}">
+                <slot></slot>
+              </div>`)
+          : ''}
         ${this.hasSlotController.test('action') ? html`
           <slot name="action" class="well__action"></slot>` : ''}
       </div>

package/src/components/well/well.scss

@@ -17,3 +17,27 @@
 .well--inline {
   display: inline-flex;
 }
+
+// Without this the content's max-content width becomes the well's minimum size,
+// so a single long unbroken string (a token, a URL) widens the whole well.
+.well__content {
+  min-width: 0;
+}
+
+.well__content--pre {
+  margin: 0;
+  font-family: var(--zn-font-mono, 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace);
+  white-space: pre;
+  overflow-x: auto;
+}
+
+.well__content--break-long {
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+// Long lines have to be allowed to wrap before they can be broken.
+.well__content--pre.well__content--break-long {
+  white-space: pre-wrap;
+  overflow-x: visible;
+}

package/src/components/well/well.test.ts

@@ -7,4 +7,47 @@ describe('<zn-well>', () => {
       <zn-well></zn-well> `);
     expect(el).to.exist;
   });
+
+  it('should render the default slot in a div by default', async () => {
+    const el = await fixture(html`
+      <zn-well>content</zn-well> `);
+    const content = el.shadowRoot!.querySelector('.well__content')!;
+    expect(content.tagName).to.equal('DIV');
+    expect(content.classList.contains('well__content--pre')).to.be.false;
+  });
+
+  it('should render the default slot in a pre when pre is set', async () => {
+    const el = await fixture(html`
+      <zn-well pre>content</zn-well> `);
+    const content = el.shadowRoot!.querySelector('.well__content')!;
+    expect(content.tagName).to.equal('PRE');
+    expect(getComputedStyle(content).whiteSpace).to.equal('pre');
+  });
+
+  it('should break long words when break-long is set', async () => {
+    const el = await fixture(html`
+      <zn-well break-long>content</zn-well> `);
+    const content = el.shadowRoot!.querySelector('.well__content')!;
+    expect(content.classList.contains('well__content--break-long')).to.be.true;
+    expect(getComputedStyle(content).overflowWrap).to.equal('anywhere');
+  });
+
+  it('should wrap preformatted content when pre and break-long are combined', async () => {
+    const el = await fixture(html`
+      <zn-well pre break-long>content</zn-well> `);
+    const content = el.shadowRoot!.querySelector('.well__content')!;
+    expect(content.tagName).to.equal('PRE');
+    expect(getComputedStyle(content).whiteSpace).to.equal('pre-wrap');
+    expect(getComputedStyle(content).overflowWrap).to.equal('anywhere');
+  });
+
+  it('should not let long unbroken content widen the well when break-long is set', async () => {
+    const token = 'a'.repeat(400);
+    const container = await fixture(html`
+      <div style="width: 300px">
+        <zn-well break-long>${token}</zn-well>
+      </div> `);
+    const el = container.querySelector('zn-well')!;
+    expect(el.getBoundingClientRect().width).to.be.at.most(300);
+  });
 });

package/src/zinc.ts

@@ -115,6 +115,8 @@ export { default as ThemeEditor } from './components/theme-editor';
 export { default as SlashMenu } from './components/slash-menu';
 export { default as SlashItem } from './components/slash-item';
 export { default as ScheduleBuilder } from './components/schedule-builder';
+export { default as Thumbnail } from './components/thumbnail';
+export { default as ThumbnailGroup } from './components/thumbnail-group';
 /* plop:component */
 
 // Base Component