Add VRT storybook for a few static permutations

elastic · Sep 6, 2024 · 405e81e · 405e81e
1 parent 30109c7
commit 405e81e
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 8 deletions.
diff --git a/...ki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Grid_Styles_Compact.png b/...ki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Grid_Styles_Compact.png
diff --git a/...i/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Grid_Styles_Expanded.png b/...i/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Grid_Styles_Expanded.png
diff --git a/...nce/chrome_desktop_Tabular_Content_EuiDataGrid_Grid_Styles_Horizontal_Lines.png b/...nce/chrome_desktop_Tabular_Content_EuiDataGrid_Grid_Styles_Horizontal_Lines.png
diff --git a/...ki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Grid_Styles_Minimal.png b/...ki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Grid_Styles_Minimal.png
diff --git a/...oki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Grid_Styles_Compact.png b/...oki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Grid_Styles_Compact.png
diff --git a/...ki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Grid_Styles_Expanded.png b/...ki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Grid_Styles_Expanded.png
diff --git a/...ence/chrome_mobile_Tabular_Content_EuiDataGrid_Grid_Styles_Horizontal_Lines.png b/...ence/chrome_mobile_Tabular_Content_EuiDataGrid_Grid_Styles_Horizontal_Lines.png
diff --git a/...oki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Grid_Styles_Minimal.png b/...oki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Grid_Styles_Minimal.png
diff --git a/packages/eui/src/components/datagrid/data_grid_styles.stories.tsx b/packages/eui/src/components/datagrid/data_grid_styles.stories.tsx
@@ -26,6 +26,13 @@ const meta: Meta = {
 export default meta;
 type Story = StoryObj<EuiDataGridStyle>;
 
+const storyArgs = {
+  ...defaultStorybookArgs,
+  renderFooterCellValue: ({ columnId }: { columnId: string }) =>
+    columnId === 'account' ? '5 accounts' : null,
+  height: 400, // to more easily test sticky footers
+};
+
 export const Playground: Story = {
   parameters: {
     codeSnippet: {
@@ -50,14 +57,59 @@ export const Playground: Story = {
     },
   },
   render: (gridStyle: EuiDataGridStyle) => (
-    <StatefulDataGrid
-      {...defaultStorybookArgs}
-      gridStyle={gridStyle}
-      renderFooterCellValue={({ columnId }) =>
-        columnId === 'account' ? '5 accounts' : null
-      }
-      height={400}
-    />
+    <StatefulDataGrid {...storyArgs} gridStyle={gridStyle} />
   ),
 };
 enableFunctionToggleControls(Playground, ['onChange']);
+
+/**
+ * VRT only
+ */
+
+export const HorizontalLines: Story = {
+  tags: ['vrt-only'],
+  args: {
+    border: 'horizontal',
+    header: 'shade',
+    footer: 'shade',
+  },
+  render: (gridStyle) => (
+    <StatefulDataGrid {...storyArgs} gridStyle={gridStyle} />
+  ),
+};
+
+export const Minimal: Story = {
+  tags: ['vrt-only'],
+  args: {
+    border: 'none',
+    header: 'underline',
+    footer: 'overline',
+    rowHover: 'none',
+    stickyFooter: false,
+  },
+  render: (gridStyle) => (
+    <StatefulDataGrid {...storyArgs} gridStyle={gridStyle} height="auto" />
+  ),
+};
+
+export const Compact: Story = {
+  tags: ['vrt-only'],
+  args: {
+    fontSize: 's',
+    cellPadding: 's',
+  },
+  render: (gridStyle) => (
+    <StatefulDataGrid {...storyArgs} gridStyle={gridStyle} />
+  ),
+};
+
+export const Expanded: Story = {
+  tags: ['vrt-only'],
+  args: {
+    fontSize: 'l',
+    cellPadding: 'l',
+  },
+  render: (gridStyle) => (
+    <StatefulDataGrid {...storyArgs} gridStyle={gridStyle} />
+  ),
+};