From d1a3288ef12fdebc47f8d7eaac44cea824321e8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andre=CC=81=20Rivet?=
 <marcandre.rivet@sociablelabs.com>
Date: Fri, 17 Apr 2020 15:39:04 -0400
Subject: [PATCH] Add style_table visual tests

---
 .../percy-storybook/TableStyle.percy.tsx      | 46 +++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 tests/visual/percy-storybook/TableStyle.percy.tsx

diff --git a/tests/visual/percy-storybook/TableStyle.percy.tsx b/tests/visual/percy-storybook/TableStyle.percy.tsx
new file mode 100644
index 000000000..8d320427c
--- /dev/null
+++ b/tests/visual/percy-storybook/TableStyle.percy.tsx
@@ -0,0 +1,46 @@
+import * as R from 'ramda';
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import DataTable from 'dash-table/dash/DataTable';
+
+const setProps = () => { };
+
+const data = [
+    { Date: 'July 12th, 2013 - July 25th, 2013', Rep: 1, Dem: 10, Ind: 2, Region: 'Northern New York State to the Southern Appalachian Mountains', 'Election Polling Organization': 'The New York Times' },
+    { Date: 'July 12th, 2013 - August 25th, 2013', Rep: -20, Dem: 20, Ind: 10924, Region: 'Canada', 'Election Polling Organization': 'Pew Research' },
+    { Date: 'July 12th, 2014 - August 25th, 2014', Rep: 3.512, Dem: 30, Ind: 3912, Region: 'Southern Vermont', 'Election Polling Organization': 'The Washington Post' }
+];
+
+const columns = R.map(
+    i => ({ name: i, id: i }),
+    ['Date', 'Rep', 'Dem', 'Ind', 'Region', 'Election Polling Organization']
+);
+
+const props = {
+    setProps,
+    id: 'table',
+    data,
+    columns
+};
+
+storiesOf('DashTable/TableStyle', module)
+    .add('minWidth 100%, fixed headers+1', () => (<DataTable
+        {...props}
+        fixed_columns={{ headers: true, data: 1 }}
+        style_table={{ minWidth: '100%' }}
+    />))
+    .add('minWidth 100%, fixed headers+1, style_cell', () => (<DataTable
+        {...props}
+        fixed_columns={{ headers: true, data: 1 }}
+        style_table={{ minWidth: '100%' }}
+        style_cell={{
+            // all three widths are needed
+            minWidth: '180px',
+            width: '180px',
+            maxWidth: '180px',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis'
+        }}
+    />));
+
+