diff --git a/libs/ui/src/lib/table-responsive/table-responsive.component.stories.ts b/libs/ui/src/lib/table-responsive/table-responsive.component.stories.ts index d05c465d..dfa30dca 100644 --- a/libs/ui/src/lib/table-responsive/table-responsive.component.stories.ts +++ b/libs/ui/src/lib/table-responsive/table-responsive.component.stories.ts @@ -2,6 +2,9 @@ import { Meta, Story } from '@storybook/angular'; import notes from './table-responsive.component.md'; import { TableResponsiveComponent } from './table-responsive.component'; import { StatusBadgeSeverity } from '../status-badge/status-badge'; +import { concatMap, delay, from, of } from 'rxjs'; + +const withObservableTitlesDelay = 1000; const statuses: { severity: StatusBadgeSeverity; label: string }[] = [ { @@ -162,3 +165,40 @@ WithCustomHeaderAndBodyMobile.parameters = { defaultViewport: 'iphone12mini', }, }; + +const TemplateWithObservables: Story = ( + args: TableResponsiveComponent +) => ({ + props: { + ...args, + data: [ + { + who: 'Monkey', + what: 'see-do', + }, + { + who: 'Bear', + what: 'drink-drank-drunk', + }, + ], + headerLabels$: from([['Lunes', 'Viernes']]).pipe( + concatMap((item) => of(item).pipe(delay(withObservableTitlesDelay))) + ), + }, + /* template */ + template: ` + + `, +}); + +export const WithObservables = TemplateWithObservables.bind({}); +WithObservables.parameters = { + chromatic: { delay: withObservableTitlesDelay + 300 }, + layout: 'fullscreen', + backgrounds: { + default: 'light', + }, + viewport: { + defaultViewport: 'iphone12mini', + }, +};