From 0682a5a3e37d45b33ef09dca0ddbfe46c2c8dd99 Mon Sep 17 00:00:00 2001
From: Coteh <3276350+Coteh@users.noreply.github.com>
Date: Sat, 22 Aug 2020 02:05:07 -0400
Subject: [PATCH] Add knobs for remaining props in Table

---
 story/src/2-Table.stories.tsx | 28 +++++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/story/src/2-Table.stories.tsx b/story/src/2-Table.stories.tsx
index e6cda91cf..e726132e1 100644
--- a/story/src/2-Table.stories.tsx
+++ b/story/src/2-Table.stories.tsx
@@ -1,12 +1,28 @@
 import React from 'react';
 import { Table } from '../../frontend/src/component/ui/Table';
-import { array, number } from '@storybook/addon-knobs';
+import { array, number, text, select } from '@storybook/addon-knobs';
 
 export default {
   title: 'UI/Table',
   component: Table
 };
 
+function alignSelector(label: string) {
+  return select(
+    label,
+    {
+      center: 'center',
+      end: 'end',
+      justify: 'justify',
+      left: 'left',
+      'match-parent': 'match-parent',
+      right: 'right',
+      start: 'start'
+    },
+    'left'
+  );
+}
+
 export const table = () => {
   const headers = array('Header Columns', ['Long Link', 'Alias']);
   return (
@@ -15,6 +31,16 @@ export const table = () => {
       rows={new Array(number('Number of rows', 2))
         .fill(0)
         .map((_, i) => headers.map((_, j) => `data ${i}-${j}`))}
+      headerFontSize={`${number('Header Font Size (px)', 16)}px`}
+      widths={headers.map(
+        (_, i) => number(`Column ${i + 1} Width (%)`, 50) + '%'
+      )}
+      alignHeaders={headers.map((_, i) =>
+        alignSelector(`Column ${i + 1} Header Alignment (%)`)
+      )}
+      alignBodyColumns={headers.map((_, i) =>
+        alignSelector(`Column ${i + 1} Body Column Alignment (%)`)
+      )}
     />
   );
 };