From 4264f7ff985aa884d738bd30e5e18625e7a18d67 Mon Sep 17 00:00:00 2001
From: noa <noa.rave@wikimedia.de>
Date: Mon, 29 Jan 2024 11:47:22 +0100
Subject: [PATCH 1/7] Port the table component from Wikit to Mismatch Finder

---
 resources/js/Components/MismatchesTable.vue |   7 +-
 resources/js/Components/Table.vue           | 229 ++++++++++++++++++++
 resources/js/types/Breakpoint.ts            |  14 ++
 3 files changed, 246 insertions(+), 4 deletions(-)
 create mode 100644 resources/js/Components/Table.vue
 create mode 100644 resources/js/types/Breakpoint.ts

diff --git a/resources/js/Components/MismatchesTable.vue b/resources/js/Components/MismatchesTable.vue
index e3267b9f..fe3f5391 100644
--- a/resources/js/Components/MismatchesTable.vue
+++ b/resources/js/Components/MismatchesTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <wikit-table>
+  <Table>
     <thead>
       <tr>
         <th class="column-mismatch">
@@ -34,12 +34,11 @@
         :id="`mismatch-${mismatch.id}`"
       />
     </tbody>
-  </wikit-table>
+  </Table>
 </template>
 
 <script setup lang="ts">
-import { Table as WikitTable } from '@wmde/wikit-vue-components';
-
+import Table from './Table.vue';
 import MismatchRow from './MismatchRow.vue';
 
 import type { LabelledMismatch } from '../types/Mismatch';
diff --git a/resources/js/Components/Table.vue b/resources/js/Components/Table.vue
new file mode 100644
index 00000000..1743d87d
--- /dev/null
+++ b/resources/js/Components/Table.vue
@@ -0,0 +1,229 @@
+<template>
+  <table
+    ref="Table"
+    :class="[
+      'wikit',
+      'wikit-Table',
+      `wikit-Table--linear-${breakpoint}`
+    ]"
+  >
+    <slot />
+  </table>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed, ref } from 'vue';
+import { Breakpoint, validateBreakpoint } from '../types/Breakpoint';
+
+/**
+ * Tables display categorical information organized across rows and columns in
+ * order to facilitate the comparative analysis of data.
+ *
+ * The WiKit table component provides a wrapper around the common HTML table
+ * elements such as `<thead>`, `<tbody>`, `<tr>`, `<th>` and `<td>`, to apply
+ * design system styles to tabular data.
+ *
+ * Adding a `data-header` attribute to the cells allows us to maintain the column
+ * headers and display them in the table's linearized form to provide additional
+ * context.
+ *
+ * **Example:**
+ *
+ * ```html
+ * <td data-header="Column Header">Content Here</td>
+ * ```
+ */
+	const Table = ref('Table');
+	const props = defineProps({
+		linearize: {
+			type: String as PropType<Breakpoint>,
+			default: Breakpoint.Tablet,
+			validator: (value: Breakpoint): boolean => {
+				return validateBreakpoint( value );
+			}
+		}
+	});
+
+	const breakpoint = computed<string>(() => {
+		return validateBreakpoint( props.linearize ) ? props.linearize : 'tablet';
+	});
+
+	defineExpose(Table);
+
+</script>
+
+<style lang="scss">
+@import "@wikimedia/codex-design-tokens/theme-wikimedia-ui";
+
+	@mixin linear-table {
+		/**
+		* Completely removes thead, modern screen readers will expose the
+		* generated content
+		*/
+		thead {
+			display: none;
+			visibility: hidden;
+		}
+
+		/**
+		* Make everything display flex for alignment
+		*/
+		tbody,
+		tr,
+		th,
+		td {
+			height: auto;
+			display: flex;
+			flex-direction: column;
+		}
+
+		td,
+		th {
+			flex-direction: row;
+			flex-basis: 60%;
+		}
+
+		/**
+		* Labeling
+		*
+		* Adding a data-header attribute to the cells
+		* lets us add text before the content to provide
+		* the missing context.
+		*
+		* Markup:
+		*   <td data-header="Column Header">Content Here</td>
+		*/
+		/* stylelint-disable selector-no-qualifying-type  */
+		th[data-header]::before,
+		td[data-header]::before {
+			content: attr(data-header);
+			display: block;
+			font-weight: 700;
+			flex-basis: 40%;
+
+			// Ensure headers stay exactly 40%
+			// even if values are wider than 60%
+			min-width: 40%;
+		}
+
+		th:not([data-header]) {
+			font-weight: 700;
+		}
+
+		// Hide empty cells
+		td:empty {
+			display: none;
+		}
+	}
+
+	.Table {
+		/**
+		* Layout
+		*/
+		// As the specificationn state that the table columns should gain their
+		// width from cell content (instead of just header content / width) we
+		// revert to using the default table layout algorithm. This is done in
+		// order to avoid changing the table's display proterty and thus
+		// oblitirating it's inehrit accesibility:
+		// See: https://www.tpgi.com/short-note-on-what-css-display-properties-do-to-table-semantics/
+		table-layout: auto;
+		width: 100%;
+
+		/**
+		* Borders
+		*/
+		border-collapse: collapse;
+
+		/**
+		* Colors
+		*/
+		background-color: #fff;
+		color: #202122;
+
+		/**
+		* Typography
+		*/
+		font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Lato,Helvetica,Arial,sans-serif;
+		font-size: 1em;
+		font-weight: 400;
+
+		tr {
+			/**
+			* Layout
+			*/
+
+			/**
+			* Borders
+			*/
+			border-bottom:1px #c8ccd1 solid;
+			border-radius: 0;
+		}
+
+		tbody tr:hover {
+			background-color: $background-color-interactive;
+			transition-duration: $transition-duration-medium;
+			transition-timing-function: $transition-timing-function-system;
+			transition-property: $transition-property-base;
+		}
+
+		th,
+		td {
+			/**
+			* Layout
+			*/
+			padding-inline: .75em;
+
+			/**
+			* Typography
+			*/
+			line-height: 20px;
+			text-align: start;
+			overflow-wrap: break-word;
+			hyphens: auto;
+		}
+
+		td {
+			/**
+			* Layout
+			*/
+			height: 48px;
+			padding-block: .5em;
+
+			/**
+			* Typography
+			*/
+			vertical-align: middle;
+		}
+
+		th {
+			/**
+			* Layout
+			*/
+			padding-block: .75em;
+
+			/**
+			* Typography
+			*/
+			font-weight: 700;
+			vertical-align: top;
+		}
+
+		&--linear-mobile {
+			@media (max-width: $max-width-breakpoint-mobile) {
+				@include linear-table;
+			}
+		}
+
+		&--linear-tablet {
+			@media (max-width: $max-width-breakpoint-tablet) {
+				@include linear-table;
+			}
+		}
+
+		&--linear-desktop {
+			@media (max-width: $max-width-breakpoint-desktop) {
+				@include linear-table;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/resources/js/types/Breakpoint.ts b/resources/js/types/Breakpoint.ts
new file mode 100644
index 00000000..bb015cfc
--- /dev/null
+++ b/resources/js/types/Breakpoint.ts
@@ -0,0 +1,14 @@
+enum Breakpoint {
+	Mobile = 'mobile',
+	Tablet = 'tablet',
+	Desktop = 'desktop'
+}
+
+function validateBreakpoint( breakpoint: string ): boolean {
+	return Object.values( Breakpoint ).includes( breakpoint as Breakpoint );
+}
+
+export {
+	Breakpoint,
+	validateBreakpoint,
+};
\ No newline at end of file

From a2b776f2fcf81c060bf73931e698eb972069495e Mon Sep 17 00:00:00 2001
From: noa <noa.rave@wikimedia.de>
Date: Mon, 29 Jan 2024 11:59:28 +0100
Subject: [PATCH 2/7] fix ref export and add test

---
 resources/js/Components/Table.vue  |  2 +-
 tests/Vue/Components/Table.spec.js | 24 ++++++++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 tests/Vue/Components/Table.spec.js

diff --git a/resources/js/Components/Table.vue b/resources/js/Components/Table.vue
index 1743d87d..0632a23c 100644
--- a/resources/js/Components/Table.vue
+++ b/resources/js/Components/Table.vue
@@ -48,7 +48,7 @@ import { Breakpoint, validateBreakpoint } from '../types/Breakpoint';
 		return validateBreakpoint( props.linearize ) ? props.linearize : 'tablet';
 	});
 
-	defineExpose(Table);
+	defineExpose({Table});
 
 </script>
 
diff --git a/tests/Vue/Components/Table.spec.js b/tests/Vue/Components/Table.spec.js
new file mode 100644
index 00000000..6960473e
--- /dev/null
+++ b/tests/Vue/Components/Table.spec.js
@@ -0,0 +1,24 @@
+import { mount } from '@vue/test-utils';
+import Table from '@/Components/Table.vue';
+import {Breakpoint} from '@/types/Breakpoint.ts';
+
+describe('Table.vue', () => {
+    it('accepts a linearize property', () => {
+        const wrapper = mount(Table, {
+            propsData: {
+                linearize: Breakpoint.Desktop
+            }
+        });
+
+        expect( wrapper.props().linearize ).toBe( Breakpoint.Desktop );
+		expect( wrapper.find( 'table' ).classes() ).toContain( 'wikit-Table--linear-desktop' );
+    });
+
+    it('ignores invalid breakpoint values', () => {
+        const wrapper = mount(Table, {
+            propsData: { linearize: 'nonsense' }
+        });
+
+        expect(wrapper.find('table').classes()).toContain('wikit-Table--linear-tablet');
+    });
+})
\ No newline at end of file

From cb8fbf4cb5cefbebfe7800352a48443c19a9d694 Mon Sep 17 00:00:00 2001
From: noa <noa.rave@wikimedia.de>
Date: Tue, 30 Jan 2024 08:49:18 +0100
Subject: [PATCH 3/7] Rename component and replace discrete values with tokens
 where possible

---
 resources/js/Components/MismatchesTable.vue   |  6 +++---
 .../{Table.vue => TableComponent.vue}         | 20 +++++++++----------
 .../{Table.spec.js => TableComponent.spec.js} |  6 +++---
 3 files changed, 16 insertions(+), 16 deletions(-)
 rename resources/js/Components/{Table.vue => TableComponent.vue} (90%)
 rename tests/Vue/Components/{Table.spec.js => TableComponent.spec.js} (80%)

diff --git a/resources/js/Components/MismatchesTable.vue b/resources/js/Components/MismatchesTable.vue
index fe3f5391..2a4d4dfb 100644
--- a/resources/js/Components/MismatchesTable.vue
+++ b/resources/js/Components/MismatchesTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <Table>
+  <TableComponent>
     <thead>
       <tr>
         <th class="column-mismatch">
@@ -34,11 +34,11 @@
         :id="`mismatch-${mismatch.id}`"
       />
     </tbody>
-  </Table>
+  </TableComponent>
 </template>
 
 <script setup lang="ts">
-import Table from './Table.vue';
+import TableComponent from './TableComponent.vue';
 import MismatchRow from './MismatchRow.vue';
 
 import type { LabelledMismatch } from '../types/Mismatch';
diff --git a/resources/js/Components/Table.vue b/resources/js/Components/TableComponent.vue
similarity index 90%
rename from resources/js/Components/Table.vue
rename to resources/js/Components/TableComponent.vue
index 0632a23c..236d54e5 100644
--- a/resources/js/Components/Table.vue
+++ b/resources/js/Components/TableComponent.vue
@@ -1,6 +1,6 @@
 <template>
   <table
-    ref="Table"
+    ref="TableComponent"
     :class="[
       'wikit',
       'wikit-Table',
@@ -19,7 +19,7 @@ import { Breakpoint, validateBreakpoint } from '../types/Breakpoint';
  * Tables display categorical information organized across rows and columns in
  * order to facilitate the comparative analysis of data.
  *
- * The WiKit table component provides a wrapper around the common HTML table
+ * The table component provides a wrapper around the common HTML table
  * elements such as `<thead>`, `<tbody>`, `<tr>`, `<th>` and `<td>`, to apply
  * design system styles to tabular data.
  *
@@ -33,7 +33,7 @@ import { Breakpoint, validateBreakpoint } from '../types/Breakpoint';
  * <td data-header="Column Header">Content Here</td>
  * ```
  */
-	const Table = ref('Table');
+	const TableComponent = ref('TableComponent');
 	const props = defineProps({
 		linearize: {
 			type: String as PropType<Breakpoint>,
@@ -48,7 +48,7 @@ import { Breakpoint, validateBreakpoint } from '../types/Breakpoint';
 		return validateBreakpoint( props.linearize ) ? props.linearize : 'tablet';
 	});
 
-	defineExpose({Table});
+	defineExpose({TableComponent});
 
 </script>
 
@@ -137,15 +137,15 @@ import { Breakpoint, validateBreakpoint } from '../types/Breakpoint';
 		/**
 		* Colors
 		*/
-		background-color: #fff;
-		color: #202122;
+		background-color: $background-color-base;
+		color: $color-base;
 
 		/**
 		* Typography
 		*/
-		font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Lato,Helvetica,Arial,sans-serif;
-		font-size: 1em;
-		font-weight: 400;
+		font-family: $font-family-system-sans;
+		font-size: $font-size-medium;
+		font-weight: $font-weight-normal;
 
 		tr {
 			/**
@@ -155,7 +155,7 @@ import { Breakpoint, validateBreakpoint } from '../types/Breakpoint';
 			/**
 			* Borders
 			*/
-			border-bottom:1px #c8ccd1 solid;
+			border-bottom: $border-width-base $border-color-subtle solid;
 			border-radius: 0;
 		}
 
diff --git a/tests/Vue/Components/Table.spec.js b/tests/Vue/Components/TableComponent.spec.js
similarity index 80%
rename from tests/Vue/Components/Table.spec.js
rename to tests/Vue/Components/TableComponent.spec.js
index 6960473e..6c30ad86 100644
--- a/tests/Vue/Components/Table.spec.js
+++ b/tests/Vue/Components/TableComponent.spec.js
@@ -1,10 +1,10 @@
 import { mount } from '@vue/test-utils';
-import Table from '@/Components/Table.vue';
+import TableComponent from '@/Components/TableComponent.vue';
 import {Breakpoint} from '@/types/Breakpoint.ts';
 
 describe('Table.vue', () => {
     it('accepts a linearize property', () => {
-        const wrapper = mount(Table, {
+        const wrapper = mount(TableComponent, {
             propsData: {
                 linearize: Breakpoint.Desktop
             }
@@ -15,7 +15,7 @@ describe('Table.vue', () => {
     });
 
     it('ignores invalid breakpoint values', () => {
-        const wrapper = mount(Table, {
+        const wrapper = mount(TableComponent, {
             propsData: { linearize: 'nonsense' }
         });
 

From 02e500196b60db456743e8e1aeb14997ee343f11 Mon Sep 17 00:00:00 2001
From: noa <noa.rave@wikimedia.de>
Date: Tue, 30 Jan 2024 08:49:54 +0100
Subject: [PATCH 4/7] two more tokens

---
 resources/js/Components/TableComponent.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/Components/TableComponent.vue b/resources/js/Components/TableComponent.vue
index 236d54e5..ea8b493b 100644
--- a/resources/js/Components/TableComponent.vue
+++ b/resources/js/Components/TableComponent.vue
@@ -98,7 +98,7 @@ import { Breakpoint, validateBreakpoint } from '../types/Breakpoint';
 		td[data-header]::before {
 			content: attr(data-header);
 			display: block;
-			font-weight: 700;
+			font-weight: $font-weight-bold;
 			flex-basis: 40%;
 
 			// Ensure headers stay exactly 40%
@@ -107,7 +107,7 @@ import { Breakpoint, validateBreakpoint } from '../types/Breakpoint';
 		}
 
 		th:not([data-header]) {
-			font-weight: 700;
+			font-weight: $font-weight-bold;
 		}
 
 		// Hide empty cells

From 6d3ae240c4106cb2469d483b72ed10469c06be49 Mon Sep 17 00:00:00 2001
From: noa <noa.rave@wikimedia.de>
Date: Tue, 30 Jan 2024 08:52:18 +0100
Subject: [PATCH 5/7] use correct component name in test and css selector

---
 resources/js/Components/TableComponent.vue  | 2 +-
 tests/Vue/Components/TableComponent.spec.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/Components/TableComponent.vue b/resources/js/Components/TableComponent.vue
index ea8b493b..b3442c37 100644
--- a/resources/js/Components/TableComponent.vue
+++ b/resources/js/Components/TableComponent.vue
@@ -116,7 +116,7 @@ import { Breakpoint, validateBreakpoint } from '../types/Breakpoint';
 		}
 	}
 
-	.Table {
+	.TableComponent {
 		/**
 		* Layout
 		*/
diff --git a/tests/Vue/Components/TableComponent.spec.js b/tests/Vue/Components/TableComponent.spec.js
index 6c30ad86..9dcadd81 100644
--- a/tests/Vue/Components/TableComponent.spec.js
+++ b/tests/Vue/Components/TableComponent.spec.js
@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils';
 import TableComponent from '@/Components/TableComponent.vue';
 import {Breakpoint} from '@/types/Breakpoint.ts';
 
-describe('Table.vue', () => {
+describe('TableComponent.vue', () => {
     it('accepts a linearize property', () => {
         const wrapper = mount(TableComponent, {
             propsData: {

From a0839b1cb85d63cae4094143bc8be5c43e798e1b Mon Sep 17 00:00:00 2001
From: noa <noa.rave@wikimedia.de>
Date: Tue, 30 Jan 2024 10:27:00 +0100
Subject: [PATCH 6/7] update class selector name

---
 resources/js/Components/TableComponent.vue  | 7 +++----
 tests/Vue/Components/TableComponent.spec.js | 4 ++--
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/resources/js/Components/TableComponent.vue b/resources/js/Components/TableComponent.vue
index b3442c37..f7a44287 100644
--- a/resources/js/Components/TableComponent.vue
+++ b/resources/js/Components/TableComponent.vue
@@ -2,9 +2,8 @@
   <table
     ref="TableComponent"
     :class="[
-      'wikit',
-      'wikit-Table',
-      `wikit-Table--linear-${breakpoint}`
+      'table-component',
+      `table-component--linear-${breakpoint}`
     ]"
   >
     <slot />
@@ -116,7 +115,7 @@ import { Breakpoint, validateBreakpoint } from '../types/Breakpoint';
 		}
 	}
 
-	.TableComponent {
+	.table-component {
 		/**
 		* Layout
 		*/
diff --git a/tests/Vue/Components/TableComponent.spec.js b/tests/Vue/Components/TableComponent.spec.js
index 9dcadd81..27395ac0 100644
--- a/tests/Vue/Components/TableComponent.spec.js
+++ b/tests/Vue/Components/TableComponent.spec.js
@@ -11,7 +11,7 @@ describe('TableComponent.vue', () => {
         });
 
         expect( wrapper.props().linearize ).toBe( Breakpoint.Desktop );
-		expect( wrapper.find( 'table' ).classes() ).toContain( 'wikit-Table--linear-desktop' );
+		expect( wrapper.find( 'table' ).classes() ).toContain( 'table-component--linear-desktop' );
     });
 
     it('ignores invalid breakpoint values', () => {
@@ -19,6 +19,6 @@ describe('TableComponent.vue', () => {
             propsData: { linearize: 'nonsense' }
         });
 
-        expect(wrapper.find('table').classes()).toContain('wikit-Table--linear-tablet');
+        expect(wrapper.find('table').classes()).toContain('table-component--linear-tablet');
     });
 })
\ No newline at end of file

From e6efe7285e984a1d801547aebb9cb398301cdd3a Mon Sep 17 00:00:00 2001
From: noa <noa.rave@wikimedia.de>
Date: Tue, 30 Jan 2024 10:40:47 +0100
Subject: [PATCH 7/7] make component tag kebab-case

---
 resources/js/Components/MismatchesTable.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/Components/MismatchesTable.vue b/resources/js/Components/MismatchesTable.vue
index 2a4d4dfb..71092424 100644
--- a/resources/js/Components/MismatchesTable.vue
+++ b/resources/js/Components/MismatchesTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <TableComponent>
+  <table-component>
     <thead>
       <tr>
         <th class="column-mismatch">
@@ -34,7 +34,7 @@
         :id="`mismatch-${mismatch.id}`"
       />
     </tbody>
-  </TableComponent>
+  </table-component>
 </template>
 
 <script setup lang="ts">