-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: UIG-2910 - vl-table-next - introductie component
Storybook verbeterd, cypress uitgebreid & meta-data aangepast.
- Loading branch information
Showing
16 changed files
with
2,116 additions
and
16 deletions.
There are no files selected for viewing
37 changes: 37 additions & 0 deletions
37
apps/storybook-e2e/src/e2e/components/next/table/vl-table.stories.cy.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| const tableNextDefaultUrl = 'http://localhost:8080/iframe.html?id=components-next-table--table-default&viewMode=story'; | ||
| const tableNextJoinedRowTitlesUrl = 'http://localhost:8080/iframe.html?id=components-next-table--table-joined-row-titles&viewMode=story'; | ||
| const tableNextExpandableUrl = 'http://localhost:8080/iframe.html?id=components-next-table--table-expandable&viewMode=story'; | ||
| const tableNextExpandableCustomToggleDetailsColumnUrl = 'http://localhost:8080/iframe.html?id=components-next-table--table-expandable-custom-toggle-details-column&viewMode=story'; | ||
|
|
||
|
|
||
| describe('story - vl-table-next - default', () => { | ||
| it('should render', () => { | ||
| cy.visit(tableNextDefaultUrl); | ||
|
|
||
| cy.get('vl-table-next').find('table.vl-table-next'); | ||
| }); | ||
| }); | ||
|
|
||
| describe('story - vl-table-next - joined row titles', () => { | ||
| it('should render', () => { | ||
| cy.visit(tableNextJoinedRowTitlesUrl); | ||
|
|
||
| cy.get('vl-table-next').find('table.vl-table-next'); | ||
| }); | ||
| }); | ||
|
|
||
| describe('story - vl-table-next - expandable', () => { | ||
| it('should render', () => { | ||
| cy.visit(tableNextExpandableUrl); | ||
|
|
||
| cy.get('vl-table-next').find('table.vl-table-next'); | ||
| }); | ||
| }); | ||
|
|
||
| describe('story - vl-table-next - expandable custom toggle details column', () => { | ||
| it('should render', () => { | ||
| cy.visit(tableNextExpandableCustomToggleDetailsColumnUrl); | ||
|
|
||
| cy.get('vl-table-next').find('table.vl-table-next'); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
90 changes: 90 additions & 0 deletions
90
libs/components/src/next/table/stories/vl-table.stories-arg.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| import { CATEGORIES, TYPES } from '@domg-wc/common-storybook'; | ||
| import { ArgTypes } from '@storybook/web-components'; | ||
| import { tableDefaults } from '../vl-table.defaults'; | ||
|
|
||
| export const tableArgs = { | ||
| ...tableDefaults, | ||
| }; | ||
|
|
||
| export const tableArgTypes: ArgTypes<typeof tableArgs> = { | ||
| hover: { | ||
| name: 'hover', | ||
| description: | ||
| 'Attribuut wordt gebruikt om een rij te highlighten wanneer de gebruiker erover hovert met muiscursor.', | ||
| table: { | ||
| category: CATEGORIES.ATTRIBUTES, | ||
| type: { summary: TYPES.BOOLEAN }, | ||
| defaultValue: { summary: tableArgs.hover }, | ||
| }, | ||
| }, | ||
| matrix: { | ||
| name: 'matrix', | ||
| description: | ||
| 'Attribuut wordt gebruikt om data in 2 dimensies te tonen. Zowel de rijen als de kolommen krijgen een titel. Deze titels worden gescheiden door een dikke lijn.', | ||
| table: { | ||
| category: CATEGORIES.ATTRIBUTES, | ||
| type: { summary: TYPES.BOOLEAN }, | ||
| defaultValue: { summary: tableArgs.matrix }, | ||
| }, | ||
| }, | ||
| grid: { | ||
| name: 'grid', | ||
| description: 'Variant met een lijn tussen elke rij en kolom.', | ||
| table: { | ||
| category: CATEGORIES.ATTRIBUTES, | ||
| type: { summary: TYPES.BOOLEAN }, | ||
| defaultValue: { summary: tableArgs.grid }, | ||
| }, | ||
| }, | ||
| zebra: { | ||
| name: 'zebra', | ||
| description: | ||
| 'Variant waarin de rijen afwisselend een andere achtergrondkleur krijgen. Dit maakt de tabel makkelijker leesbaar. ' + | ||
| 'Deze zebra werkt niet voor tabellen met detail rijen, gebruik hiervoor uig-zebra.', | ||
| table: { | ||
| category: CATEGORIES.ATTRIBUTES, | ||
| type: { summary: TYPES.BOOLEAN }, | ||
| defaultValue: { summary: tableArgs.zebra }, | ||
| }, | ||
| }, | ||
| uigZebra: { | ||
| name: 'uig-zebra', | ||
| description: | ||
| 'Variant waarin de rijen afwisselend een andere achtergrondkleur krijgen. Dit maakt de tabel makkelijker leesbaar. Deze zebra werkt voor tabellen met en zonder detail rijen.', | ||
| table: { | ||
| category: CATEGORIES.ATTRIBUTES, | ||
| type: { summary: TYPES.BOOLEAN }, | ||
| defaultValue: { summary: tableArgs.uigZebra }, | ||
| }, | ||
| }, | ||
| collapsedM: { | ||
| name: 'collapsed-m', | ||
| description: | ||
| 'Vanaf een medium schermgrootte zullen de cellen van elke rij onder elkaar ipv naast elkaar getoond worden.', | ||
| table: { | ||
| category: CATEGORIES.ATTRIBUTES, | ||
| type: { summary: TYPES.BOOLEAN }, | ||
| defaultValue: { summary: tableArgs.collapsedM }, | ||
| }, | ||
| }, | ||
| collapsedS: { | ||
| name: 'collapsed-s', | ||
| description: | ||
| 'Vanaf een small schermgrootte zullen de cellen van elke rij onder elkaar ipv naast elkaar getoond worden.', | ||
| table: { | ||
| category: CATEGORIES.ATTRIBUTES, | ||
| type: { summary: TYPES.BOOLEAN }, | ||
| defaultValue: { summary: tableArgs.collapsedS }, | ||
| }, | ||
| }, | ||
| collapsedXS: { | ||
| name: 'collapsed-xs', | ||
| description: | ||
| 'Vanaf een extra small schermgrootte zullen de cellen van elke rij onder elkaar ipv naast elkaar getoond worden.', | ||
| table: { | ||
| category: CATEGORIES.ATTRIBUTES, | ||
| type: { summary: TYPES.BOOLEAN }, | ||
| defaultValue: { summary: tableArgs.collapsedXS }, | ||
| }, | ||
| }, | ||
| }; |
Oops, something went wrong.