diff --git a/.changeset/tidy-load-more-link.md b/.changeset/tidy-load-more-link.md new file mode 100644 index 0000000..d08054b --- /dev/null +++ b/.changeset/tidy-load-more-link.md @@ -0,0 +1,5 @@ +--- +'@neovici/cosmoz-queue': patch +--- + +Render Load more as a centered text link with a focus indicator around the control instead of the full table row. diff --git a/src/list/more/render-more.ts b/src/list/more/render-more.ts index f459c30..becaf47 100644 --- a/src/list/more/render-more.ts +++ b/src/list/more/render-more.ts @@ -17,10 +17,10 @@ export const renderLoadMore = ({ onMore?: () => void; }) => html` diff --git a/stories/load-more.stories.ts b/stories/load-more.stories.ts new file mode 100644 index 0000000..a92d5a3 --- /dev/null +++ b/stories/load-more.stories.ts @@ -0,0 +1,38 @@ +import type { Meta, StoryObj } from '@storybook/web-components'; +import i18next from 'i18next'; +import { html } from 'lit-html'; +import { expect, fn, userEvent } from 'storybook/test'; +import { renderLoadMore } from '../src/list/more/render-more'; + +const meta: Meta = { + title: 'List/Load more', + async beforeEach() { + await i18next.init({ lng: 'en', resources: {} }); + }, +}; + +export default meta; + +export const Link: StoryObj = { + args: { onMore: fn() }, + render: ({ onMore }) => html` +
+ ${renderLoadMore({ onMore })} +
+ `, + async play({ canvasElement, args }) { + const host = canvasElement.querySelector('cosmoz-button')!; + const button = host.shadowRoot!.querySelector('button')!; + const surface = getComputedStyle(button); + + expect(surface.backgroundColor).toBe('rgba(0, 0, 0, 0)'); + expect(surface.boxShadow).toBe('none'); + expect(host.getBoundingClientRect().width).toBeGreaterThan(24); + expect(host.getBoundingClientRect().width).toBeLessThan( + canvasElement.getBoundingClientRect().width / 2, + ); + + await userEvent.click(button); + expect(args.onMore).toHaveBeenCalledOnce(); + }, +};