Refactoring: use variables in scss, rem, indentationLevel, typing

Remove jest test for Table component
statisticsnorway · Jun 6, 2024 · 241c531 · 241c531
1 parent 2502002
commit 241c531
Show file tree

Hide file tree

Showing 8 changed files with 277 additions and 128 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,8 +11,8 @@
     "test:watch": "cross-env ENV=test jest --watch",
     "clean-test": "cross-env ENV=test jest --no-cache --updateSnapshot --coverage",
     "clear-tests": "jest --clear-cache -- -u",
-    "lint:js": "eslint src/**/*.jsx",
-    "lint:js:fix": "eslint --fix src/**/*.jsx",
+    "lint:js": "eslint src/**/*.(jsx|tsx)",
+    "lint:js:fix": "eslint --fix src/**/*.(jsx|tsx)",
     "lint:css": "stylelint src/components/**/*.scss",
     "lint:css:fix": "stylelint --fix src/components/**/*.scss",
     "deploy": "npm publish"
@@ -52,6 +52,7 @@
     "@rollup/plugin-node-resolve": "~15.2.3",
     "@rollup/plugin-replace": "~5.0.5",
     "@rollup/plugin-terser": "~0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
     "@storybook/addon-links": "~8.1.2",
     "@storybook/addon-webpack5-compiler-babel": "~3.0.3",
     "@storybook/react": "~8.0.5",
@@ -61,6 +62,7 @@
     "@testing-library/jest-dom": "~6.4.2",
     "@testing-library/react": "~15.0.2",
     "@testing-library/user-event": "~14.5.2",
+    "@typescript-eslint/parser": "^7.12.0",
     "babel-jest": "~29.7.0",
     "babel-loader": "~9.1.3",
     "babel-plugin-module-resolver": "~5.0.0",
@@ -93,8 +95,6 @@
     "webpack-cli": "~5.1.4"
   },
   "dependencies": {
-    "@rollup/plugin-typescript": "^11.1.6",
-    "@typescript-eslint/parser": "^7.10.0",
     "prismjs": "~1.29.0",
     "react-feather": "~2.0.10",
     "sass": "~1.75.0",

diff --git a/rollup.config.js b/rollup.config.js
@@ -5,7 +5,6 @@ import replace from '@rollup/plugin-replace';
 import scss from 'rollup-plugin-scss';
 import svgr from '@svgr/rollup';
 import terser from '@rollup/plugin-terser';
-import typescript from '@rollup/plugin-typescript';
 
 const NODE_ENV = process.env.ENV || 'development';
 
@@ -39,8 +38,5 @@ export default [{
 			extensions: ['js', '.jsx', '.tsx', '.ts'],
 		}),
 		terser(),
-		typescript({
-			jsx: "react"
-		}),
 	],
 }];
diff --git a/src/components/Table/README.md b/src/components/Table/README.md
@@ -105,4 +105,4 @@ Available props:
 | headers | string | id attributes that provide the headers for the cell |
 | scope | 'col', 'colgroup', 'row', or 'rowgroup' | Define the cells that the table cell element relates to |
 | align | 'left', 'center', or 'right' ||
-| level | '1', '2', or '3' | Add indentation to cell value |
+| indentationLevel | '1', '2', or '3' | Add indentation to cell value |
diff --git a/src/components/Table/_table.scss b/src/components/Table/_table.scss
@@ -1,3 +1,5 @@
+@use '../../style/variables' as variables;
+
 .ssb-table-wrapper {
   width: 100%;
   overflow-x: auto;
@@ -8,10 +10,10 @@
 
     width: 100%;
     border-collapse: collapse;
-    border: 1px solid $ssb-dark-5;
+    border: 1px solid variables.$ssb-dark-5;
 
     caption, th, td {
-      border: 1px solid $ssb-dark-5;
+      border: 1px solid variables.$ssb-dark-5;
     }
 
     caption, td {
@@ -36,15 +38,15 @@
         vertical-align: bottom;
 
         &.level1 {
-          padding-left: 1.75em;
+          padding-left: 1.75rem;
         }
 
         &.level2 {
-          padding-left: 2.50em;
+          padding-left: 2.50rem;
         }
 
         &.level3 {
-          padding-left: 3.25em;
+          padding-left: 3.25rem;
         }
       }
     }
@@ -107,7 +109,7 @@
     }
 
     thead {
-      border-bottom: 2px solid $ssb-dark-5;
+      border-bottom: 2px solid variables.$ssb-dark-5;
 
       th[colspan] {
         text-align: center;
@@ -123,16 +125,16 @@
       tr {
         &:not(:first-child) {
           th, td {
-            border-top-color: $ssb-dark-2;
+            border-top-color: variables.$ssb-dark-2;
           }
         }
 
         &:nth-child(odd) {
-          background-color: $ssb-green-1;
+          background-color: variables.$ssb-green-1;
         }
 
         &:hover, &:nth-child(odd):hover {
-          background-color: $ssb-purple-1;
+          background-color: variables.$ssb-purple-1;
         }
       }
 
@@ -142,8 +144,8 @@
     }
 
     tfoot {
-      border-top: 1px solid $ssb-dark-5;
-      line-height: 1.5em;
+      border-top: 1px solid variables.$ssb-dark-5;
+      line-height: 1.5rem;
 
       td {
         word-wrap: break-word;
@@ -154,7 +156,7 @@
       font-size: xx-small;
 
       &:last-child {
-        padding-left: .25em;
+        padding-left: .25rem;
       }
     }
 

diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
@@ -4,20 +4,22 @@ interface TableElementProps {
 	className?: string,
   children:  ReactNode
 }
-interface TableCellProps extends TableElementProps {
+
+export interface TableProps extends TableElementProps {
+	caption?: string,
+	dataNoteRefs?: string,
+};
+
+interface TableCellProps {
+	className?: string,
 	type?: 'th' | 'td',
 	rowSpan?: number,
 	colSpan?: number,
 	headers?: string,
 	scope?: 'col' | 'colgroup' | 'row' | 'rowgroup',
 	align?: 'left' | 'center' | 'right',
-	level?: '1' | '2' | '3'
-	children: ReactNode | string | number
-};
-
-export interface TableProps extends TableElementProps {
-	caption?: string,
-	dataNoteRefs?: string,
+	indentationLevel?: '1' | '2' | '3'
+	children?: ReactNode | string | number,
 };
 
 export const TableHead = forwardRef<HTMLTableSectionElement, TableElementProps>(({ className, children }, ref) => <thead className={className} ref={ref}>{children}</thead>);
@@ -28,18 +30,17 @@ export const TableFooter = forwardRef<HTMLTableSectionElement, TableElementProps
 
 export const TableRow = forwardRef<HTMLTableRowElement, TableElementProps>(({ className, children }, ref) => <tr className={className} ref={ref}>{children}</tr>);
 
-export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(({ className, children, type, rowSpan, colSpan, scope, headers, align, level }, ref) => {
-	const tableCellProps = {
-    className: `${className ?? ''}${level ? ` level${level}`: ''}${align ? ` align-${align}` : ''}`,
+export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(({ className, children, type, rowSpan, colSpan, scope, headers, align, indentationLevel }, ref) => {
+	const tableCellProps: TableCellProps = {
+    className: `${className ?? ''}${indentationLevel ? ` level${indentationLevel}`: ''}${align ? ` align-${align}` : ''}`,
     rowSpan,
     colSpan,
     scope,
     headers,
-		ref
-  }
+  };
 
-  if (type === 'th') return <th {...tableCellProps}>{children}</th>
-  if (type === 'td') return <td {...tableCellProps}>{children}</td>
+  if (type === 'th') return <th {...tableCellProps} ref={ref}>{children}</th>
+  if (type === 'td') return <td {...tableCellProps} ref={ref}>{children}</td>
 });
 
 TableCell.defaultProps = {

diff --git a/src/components/Table/table.story.jsx b/src/components/Table/table.story.jsx
@@ -57,17 +57,17 @@ export const Statistics = () => (
 					<TableCell type="td" align="right">2 000</TableCell>
 				</TableRow>
 				<TableRow>
-					<TableCell type="th" level={1}>First level</TableCell>
+					<TableCell type="th" indentationLevel={1}>First level</TableCell>
 					<TableCell type="td" align="right">50</TableCell>
 					<TableCell type="td" align="right">100</TableCell>
 				</TableRow>
 				<TableRow>
-					<TableCell type="th" level={2}>Second level</TableCell>
+					<TableCell type="th" indentationLevel={2}>Second level</TableCell>
 					<TableCell type="td" align="right">200</TableCell>
 					<TableCell type="td" align="right">650</TableCell>
 				</TableRow>
 				<TableRow>
-					<TableCell type="th" level={3}>Third level</TableCell>
+					<TableCell type="th" indentationLevel={3}>Third level</TableCell>
 					<TableCell type="td" align="right">500</TableCell>
 					<TableCell type="td" align="right">200</TableCell>
 				</TableRow>

diff --git a/src/components/Table/table.test.jsx b/src/components/Table/table.test.jsx