add tabular view decorator container to show scrollbar functionality

MAPC · Sep 27, 2023 · bf5c62c · bf5c62c
1 parent 61c05e1
commit bf5c62c
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 65 deletions.
diff --git a/README.md b/README.md
@@ -17,7 +17,7 @@ yarn storybook
 To create a new component, you must include:
 
 - `component.tsx` : code for component
-- `component.stories.ts` : meta data for component, and different stories to test the component
+- `component.stories.tsx` : meta data for component, and different stories to test the component (needs to be a tsx file for react storybook decorators)
 - (optional) `styling.css` : a file containing the styling for the component
 
 ## Testing

diff --git a/src/components/TabularView.tsx b/src/components/TabularView.tsx
@@ -50,14 +50,13 @@ const DataTabularContainerBodyDiv = styled.div`
   /* Handle */
   &::-webkit-scrollbar-thumb {
     background: #fbfffe;
-    margin: 0.1rem
-    border-radius: 4px;
+    margin: 0.1rem;
   }
 
   /* Handle on hover */
   &::-webkit-scrollbar-thumb:hover {
     background: #e2f4ff;
-    
+    border-radius: 2px;
   }
 `;
 
@@ -237,15 +236,13 @@ export const TabularView = ({ fields, data, searchTerm }: ViewProps) => {
   }
 
   return (
-    <div>
-      <DataTabularContainerDiv>
-        <DataTabularContainerTopDiv>
-          <DataTabularList>
-            <DataTabularListAlign>{generateTableHead()}</DataTabularListAlign>
-          </DataTabularList>
-        </DataTabularContainerTopDiv>
-        <DataTabularContainerBodyDiv> {dataElements} </DataTabularContainerBodyDiv>
-      </DataTabularContainerDiv>
-    </div>
+    <DataTabularContainerDiv>
+      <DataTabularContainerTopDiv>
+        <DataTabularList>
+          <DataTabularListAlign>{generateTableHead()}</DataTabularListAlign>
+        </DataTabularList>
+      </DataTabularContainerTopDiv>
+      <DataTabularContainerBodyDiv> {dataElements} </DataTabularContainerBodyDiv>
+    </DataTabularContainerDiv>
   );
 };
diff --git a/src/stories/TabularView.stories.ts b/src/stories/TabularView.stories.ts
diff --git a/tsconfig.json b/tsconfig.json
@@ -3,19 +3,14 @@
     "allowSyntheticDefaultImports": true,
     "declaration": true,
     "esModuleInterop": true,
-    "lib": [
-      "dom",
-      "es2015"
-    ],
+    "lib": ["dom", "es2015"],
     "moduleResolution": "node",
     "outDir": "./dist",
     "resolveJsonModule": true,
     "sourceMap": true,
     "strict": true,
     "target": "es2019",
-    "types": [
-      "@emotion/core"
-    ],
+    "types": ["@emotion/core"],
     "files": ["node_modules/@emotion/react/types/css-prop"],
     "jsx": "react-jsx",
     "jsxImportSource": "@emotion/react",
@@ -27,11 +22,6 @@
     "isolatedModules": true,
     "noEmit": true
   },
-  "include": [
-    "src"
-  ],
-  "exclude": [
-    "src/stories",
-    "src/assets"
-  ]
+  "include": ["src"],
+  "exclude": ["src/stories", "src/assets"]
 }