feat(core/style): add html table

siemens · Sep 15, 2022 · 07d32ce · 07d32ce
1 parent f67e02c
commit 07d32ce
Show file tree

Hide file tree

Showing 15 changed files with 387 additions and 1 deletion.
diff --git a/packages/core/scss/components/_table.scss b/packages/core/scss/components/_table.scss
@@ -0,0 +1,27 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+@import 'mixins/fonts';
+
+.table {
+  @include text-default;
+
+  thead {
+    background-color: var(--theme-table-header-row--background);
+  }
+
+  th,
+  td {
+    border-bottom-color: var(--theme-table-data-row--border-color);
+  }
+}
+
+.table-striped > tbody > tr:nth-of-type(odd) > * {
+  --bs-table-accent-bg: var(--theme-table-data-row-alt--background);
+  color: inherit;
+}
diff --git a/packages/core/scss/ix.scss b/packages/core/scss/ix.scss
@@ -39,6 +39,7 @@
 @import './components/shadows';
 @import './components/forms';
 @import './components/input-group';
+@import './components/table';
 
 :root {
   --animate-duration: #{$default-time};

diff --git a/packages/core/src/components/html-table/test/basic/index.html b/packages/core/src/components/html-table/test/basic/index.html
@@ -0,0 +1,48 @@
+<!--
+SPDX-FileCopyrightText: 2022 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+    />
+    <title>Stencil Component Starter</title>
+  </head>
+  <body>
+    <table class="table">
+      <thead>
+        <tr>
+          <th scope="col">#</th>
+          <th scope="col">First</th>
+          <th scope="col">Last</th>
+          <th scope="col">Handle</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th scope="row">1</th>
+          <td>Mark</td>
+          <td>Otto</td>
+          <td>@mdo</td>
+        </tr>
+        <tr>
+          <th scope="row">2</th>
+          <td>Jacob</td>
+          <td>Thornton</td>
+          <td>@fat</td>
+        </tr>
+        <tr>
+          <th scope="row">3</th>
+          <td colspan="2">Larry the Bird</td>
+          <td>@twitter</td>
+        </tr>
+      </tbody>
+    </table>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>
diff --git a/packages/core/src/components/html-table/test/html-table.e2e.ts b/packages/core/src/components/html-table/test/html-table.e2e.ts
@@ -0,0 +1,23 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { expect } from '@playwright/test';
+import { regressionTest } from '@utils/test';
+
+regressionTest.describe('html-table', () => {
+  regressionTest('basic', async ({ page }) => {
+    await page.goto(`html-table/test/basic`);
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
+
+  regressionTest('striped', async ({ page }) => {
+    await page.goto(`html-table/test/striped`);
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
+});
diff --git a/...ble.e2e.ts-snapshots/html-table-basic-1-chromium---theme-classic-dark-linux.png b/...ble.e2e.ts-snapshots/html-table-basic-1-chromium---theme-classic-dark-linux.png
diff --git a/...le.e2e.ts-snapshots/html-table-basic-1-chromium---theme-classic-light-linux.png b/...le.e2e.ts-snapshots/html-table-basic-1-chromium---theme-classic-light-linux.png
diff --git a/...e.e2e.ts-snapshots/html-table-striped-1-chromium---theme-classic-dark-linux.png b/...e.e2e.ts-snapshots/html-table-striped-1-chromium---theme-classic-dark-linux.png
diff --git a/....e2e.ts-snapshots/html-table-striped-1-chromium---theme-classic-light-linux.png b/....e2e.ts-snapshots/html-table-striped-1-chromium---theme-classic-light-linux.png
diff --git a/packages/core/src/components/html-table/test/striped/index.html b/packages/core/src/components/html-table/test/striped/index.html
@@ -0,0 +1,48 @@
+<!--
+SPDX-FileCopyrightText: 2022 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+    />
+    <title>Stencil Component Starter</title>
+  </head>
+  <body>
+    <table class="table table-striped">
+      <thead>
+        <tr>
+          <th scope="col">#</th>
+          <th scope="col">First</th>
+          <th scope="col">Last</th>
+          <th scope="col">Handle</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th scope="row">1</th>
+          <td>Mark</td>
+          <td>Otto</td>
+          <td>@mdo</td>
+        </tr>
+        <tr>
+          <th scope="row">2</th>
+          <td>Jacob</td>
+          <td>Thornton</td>
+          <td>@fat</td>
+        </tr>
+        <tr>
+          <th scope="row">3</th>
+          <td colspan="2">Larry the Bird</td>
+          <td>@twitter</td>
+        </tr>
+      </tbody>
+    </table>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>
diff --git a/packages/core/src/components/my-component/my-component.tsx b/packages/core/src/components/my-component/my-component.tsx
@@ -16,6 +16,38 @@ import { Component, h, Host } from '@stencil/core';
 })
 export class MyComponent {
   render() {
-    return <Host></Host>;
+    return (
+      <Host>
+        <table class="table table-striped">
+          <thead>
+            <tr>
+              <th scope="col">#</th>
+              <th scope="col">First</th>
+              <th scope="col">Last</th>
+              <th scope="col">Handle</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <th scope="row">1</th>
+              <td>Mark</td>
+              <td>Otto</td>
+              <td>@mdo</td>
+            </tr>
+            <tr>
+              <th scope="row">2</th>
+              <td>Jacob</td>
+              <td>Thornton</td>
+              <td>@fat</td>
+            </tr>
+            <tr>
+              <th scope="row">3</th>
+              <td colSpan={2}>Larry the Bird</td>
+              <td>@twitter</td>
+            </tr>
+          </tbody>
+        </table>
+      </Host>
+    );
   }
 }
diff --git a/.../documentation/docs/auto-generated/previews/web-component/html-table-striped.md b/.../documentation/docs/auto-generated/previews/web-component/html-table-striped.md
@@ -0,0 +1,36 @@
+// SPDX-FileCopyrightText: 2022 Siemens AG
+  //
+  // SPDX-License-Identifier: MIT
+
+<!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/html-table-striped.html -->
+```html
+<table class="table table-striped">
+  <thead>
+    <tr>
+      <th scope="col">#</th>
+      <th scope="col">First</th>
+      <th scope="col">Last</th>
+      <th scope="col">Handle</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">1</th>
+      <td>Mark</td>
+      <td>Otto</td>
+      <td>@mdo</td>
+    </tr>
+    <tr>
+      <th scope="row">2</th>
+      <td>Jacob</td>
+      <td>Thornton</td>
+      <td>@fat</td>
+    </tr>
+    <tr>
+      <th scope="row">3</th>
+      <td colspan="2">Larry the Bird</td>
+      <td>@twitter</td>
+    </tr>
+  </tbody>
+</table>
+```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/html-table.md b/packages/documentation/docs/auto-generated/previews/web-component/html-table.md
@@ -0,0 +1,36 @@
+// SPDX-FileCopyrightText: 2022 Siemens AG
+  //
+  // SPDX-License-Identifier: MIT
+
+<!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/html-table.html -->
+```html
+<table class="table">
+  <thead>
+    <tr>
+      <th scope="col">#</th>
+      <th scope="col">First</th>
+      <th scope="col">Last</th>
+      <th scope="col">Handle</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">1</th>
+      <td>Mark</td>
+      <td>Otto</td>
+      <td>@mdo</td>
+    </tr>
+    <tr>
+      <th scope="row">2</th>
+      <td>Jacob</td>
+      <td>Thornton</td>
+      <td>@fat</td>
+    </tr>
+    <tr>
+      <th scope="row">3</th>
+      <td colspan="2">Larry the Bird</td>
+      <td>@twitter</td>
+    </tr>
+  </tbody>
+</table>
+```
diff --git a/packages/documentation/docs/controls/html-grid.md b/packages/documentation/docs/controls/html-grid.md
@@ -0,0 +1,23 @@
+import TabItem from '@theme/TabItem';
+import Preview from '@site/src/components/Preview';
+
+import SourceTable from './../auto-generated/previews/web-component/html-table.md'
+import SourceTableStriped from './../auto-generated/previews/web-component/html-table-striped.md'
+
+# HTML Table
+
+## Usage
+
+<Preview name="html-table" height="12rem">
+  <TabItem value="javascript">
+    <SourceTable />
+  </TabItem>
+</Preview>
+
+### Striped
+
+<Preview name="html-table-striped" height="12rem">
+  <TabItem value="javascript">
+    <SourceTableStriped />
+  </TabItem>
+</Preview>
diff --git a/packages/documentation/static/webcomponent-examples/html-table-striped.html b/packages/documentation/static/webcomponent-examples/html-table-striped.html
@@ -0,0 +1,56 @@
+<!--
+SPDX-FileCopyrightText: 2022 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Pill example</title>
+    <link rel="stylesheet" href="lib/ix-icons/dist/css/ix-icons.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
+    <link
+      rel="stylesheet"
+      href="lib/ix-brand-theme/dist/ix-brand-theme/ix-brand-theme.css"
+    />
+    <script type="module">
+      import { defineCustomElements } from './lib/ix/loader/index.js';
+      defineCustomElements();
+    </script>
+  </head>
+  <body class="theme-brand-dark">
+    <!-- Preview code -->
+    <table class="table table-striped">
+      <thead>
+        <tr>
+          <th scope="col">#</th>
+          <th scope="col">First</th>
+          <th scope="col">Last</th>
+          <th scope="col">Handle</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th scope="row">1</th>
+          <td>Mark</td>
+          <td>Otto</td>
+          <td>@mdo</td>
+        </tr>
+        <tr>
+          <th scope="row">2</th>
+          <td>Jacob</td>
+          <td>Thornton</td>
+          <td>@fat</td>
+        </tr>
+        <tr>
+          <th scope="row">3</th>
+          <td colspan="2">Larry the Bird</td>
+          <td>@twitter</td>
+        </tr>
+      </tbody>
+    </table>
+    <!-- Preview code -->
+    <script type="text/javascript" src="lib/utils/demo.js"></script>
+  </body>
+</html>