feat: ✨ add sd-table and sd-table-cell

packages/components/.storybook/preview.js

@@ -159,6 +159,14 @@ const mocks = {
     '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#00358e" d="M21 2h-18c-0.552 0-1 0.448-1 1v0 18c0 0.552 0.448 1 1 1v0h18c0.552 0 1-0.448 1-1v0-18c0-0.552-0.448-1-1-1v0zM20 4v9.253l-1.627-1.627c-0.181-0.181-0.431-0.292-0.707-0.292s-0.526 0.112-0.707 0.292v0l-2.96 2.96-4.96-4.96c-0.181-0.181-0.431-0.292-0.707-0.292s-0.526 0.112-0.707 0.292v0l-3.627 3.627v-9.253zM4 16.080l4.333-4.333 8.253 8.253h-12.587zM19.413 20l-4-4 2.253-2.253 2.333 2.333v3.92z"/><path fill="#00358e" d="M16 8c0 1.105-0.895 2-2 2s-2-0.895-2-2c0-1.105 0.895-2 2-2s2 0.895 2 2z"/></svg>',
   '/icons/system/colored/arrow-right.svg':
     '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#00358e" d="M14.707 4.293c-0.183-0.196-0.443-0.318-0.732-0.318-0.552 0-1 0.448-1 1 0 0.289 0.122 0.549 0.318 0.731l0.001 0.001 5.293 5.293h-15.587c-0.552 0-1 0.448-1 1s0.448 1 1 1v0h15.587l-5.293 5.293c-0.181 0.181-0.292 0.431-0.292 0.707s0.112 0.526 0.292 0.707v0c0.181 0.181 0.431 0.292 0.707 0.292s0.526-0.112 0.707-0.292v0l7-7c0.181-0.181 0.292-0.431 0.292-0.707s-0.112-0.526-0.292-0.707v0z"></path></svg>',
+  '/icons/system/colored/sort-down.svg':
+    '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M21 6.33301H2.99995C2.44895 6.33401 2.00195 6.78101 2.00195 7.33301C2.00195 7.59001 2.09895 7.82401 2.25695 8.00101L2.25595 8.00001L11.256 18C11.44 18.204 11.705 18.331 11.999 18.331C12.293 18.331 12.559 18.204 12.742 18.001L12.743 18L21.743 8.00001C21.901 7.82401 21.998 7.59001 21.998 7.33301C21.998 6.78101 21.551 6.33401 21 6.33301ZM12 15.84L5.24695 8.33301H18.754L12 15.84Z"/></svg>',
+  '/icons/system/colored/sort-down-filled.svg':
+    '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M21 6.33301H2.99995C2.44895 6.33401 2.00195 6.78101 2.00195 7.33301C2.00195 7.59001 2.09895 7.82401 2.25695 8.00101L2.25595 8.00001L11.256 18C11.44 18.204 11.705 18.331 11.999 18.331C12.293 18.331 12.559 18.204 12.742 18.001L12.743 18L21.743 8.00001C21.901 7.82401 21.998 7.59001 21.998 7.33301C21.998 6.78101 21.551 6.33401 21 6.33301Z"/></svg>',
+  '/icons/system/colored/sort-up.svg':
+    '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12.743 5.99959C12.555 5.80459 12.291 5.68359 12 5.68359C11.709 5.68359 11.445 5.80459 11.257 5.99859L2.25695 15.9986C2.09895 16.1746 2.00195 16.4086 2.00195 16.6656C2.00195 17.2176 2.44895 17.6646 2.99995 17.6656H21C21.551 17.6646 21.998 17.2176 21.998 16.6656C21.998 16.4086 21.901 16.1746 21.743 15.9976L21.744 15.9986L12.743 5.99959ZM5.24695 15.6666L12 8.15959L18.753 15.6666H5.24695Z"/></svg>',
+  '/icons/system/colored/sort-up-filled.svg':
+    '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 5.68359C12.291 5.68359 12.555 5.80459 12.743 5.99959L21.744 15.9986L21.743 15.9976C21.901 16.1746 21.998 16.4086 21.998 16.6656C21.998 17.2176 21.551 17.6646 21 17.6656H2.99995C2.44895 17.6646 2.00195 17.2176 2.00195 16.6656C2.00195 16.4086 2.09895 16.1746 2.25695 15.9986L11.257 5.99859C11.445 5.80459 11.709 5.68359 12 5.68359Z"/></svg>',
 
   /**
    * Content icons

packages/components/src/docs/Migration/ui-table.mdx

@@ -0,0 +1,96 @@
+# Migration Guide: From `ui-table` to `sd-table` and `sd-table-cell`
+
+The new `sd-table` and `sd-table-cell` are designed to replace the `ui-table`. Rather than offering a complex component structure, they primarily focus on providing CSS styles for `<table>`, `<th>`, and `<td>` elements.
+
+As a result, tables no longer require the `ui-table` wrapper and instead can directly utilize the provided CSS classes.
+
+## 💾 Slots
+
+### ❌ Removed Slots
+
+The following slots have been removed from the new components:
+
+1. [default]
+
+<hr />
+
+## 🎨 CSS Classes
+
+### ✨ New CSS Classes
+
+#### [sd-table]
+
+The `sd-table` class is intended for use with the `<table>` element and effectively resets the table styles like padding and border.
+
+#### [sd-table-cell]
+
+The `sd-table-cell` class should be applied to both `<th>` and `<td>` elements. It introduces top and bottom borders to the cell and defines font size, text alignment and padding.
+
+#### [sd-table-cell--divider]
+
+This class adds a divider to the right side of the table cell.
+
+#### [sd-table-cell--bg-transparent]
+
+This class adds a transparent background color to the table cell.
+
+#### [sd-table-cell--bg-white]
+
+This class adds a white background color to the table cell.
+
+#### [sd-table-cell--bg-primary-100]
+
+This class adds a background color of primary-100 to the table cell.
+
+#### [sd-table-cell--bg-neutral-100]
+
+This class adds a background color of neutral-100 to the table cell.
+
+<hr />
+
+## ⚙️ Attributes
+
+### ❌ Removed Attributes
+
+Since the new [sd-table] and [sd-table-cell] are no longer components basically all attributes have been removed:
+
+1. [backgroundAlternating]
+2. [coloredHead]
+3. [columnLayout]
+4. [firstColumnAsHeader]
+5. [firstColumnFixed]
+6. [firstRowAsHeader]
+7. [light]
+
+<hr />
+
+## ✍️ CSS Variables
+
+### ❌ Removed CSS variables
+
+The following CSS variables have been removed from the new components:
+
+1. [--component-table-head-color]
+2. [--component-table-first-column-color]
+
+<hr />
+
+## 🦻 Event Listeners
+
+### ❌ Removed Event Listeners:
+
+The following event listeners have been removed from the new components:
+
+1. [onGridReady]
+
+<hr />
+
+## 🧪 Methods
+
+### ❌ Removed Methods:
+
+The following methods have been removed from the new components:
+
+1. [componentDidLoad]
+
+<hr />

packages/components/src/solid-styles.css

@@ -4,3 +4,5 @@
 @import './styles/paragraph/paragraph.css';
 @import './styles/mark/mark.css';
 @import './styles/interactive/interactive.css';
+@import './styles/table-cell/table-cell.css';
+@import './styles/table/table.css';

packages/components/src/styles/table-cell/table-cell.css

@@ -0,0 +1,21 @@
+.sd-table-cell {
+  @apply bg-transparent border-solid border-neutral-400 border-y-[1px] border-x-0 text-black text-sm text-left p-4;
+
+  &--divider {
+    @apply border-r-[1px];
+  }
+
+  &--bg {
+    &-white {
+      @apply bg-white;
+    }
+
+    &-primary-100 {
+      @apply bg-primary-100;
+    }
+
+    &-neutral-100 {
+      @apply bg-neutral-100;
+    }
+  }
+}

packages/components/src/styles/table-cell/table-cell.declaration.ts

@@ -0,0 +1,20 @@
+import type { Style } from '../../declaration';
+
+export default {
+  styleName: 'sd-table-cell',
+  summary: 'A table cell is a single cell inside a table, used to display discrete data elements.',
+  status: 'stable',
+  since: '1.13',
+  attributes: [
+    {
+      name: 'sd-table-cell--divider',
+      description: 'Displays a divider to the right.'
+    },
+    {
+      name: 'sd-table-cell--bg-...',
+      options: ['white', 'primary-100', 'neutral-100'],
+      description:
+        'Applies the selected background-color to the table cell. If not selected, a transparent background-color is used per default.'
+    }
+  ]
+} satisfies Style;

packages/components/src/styles/table-cell/table-cell.stories.ts

@@ -0,0 +1,208 @@
+import '../../solid-components';
+import { html } from 'lit-html';
+import { storybookDefaults, storybookHelpers, storybookTemplate } from '../../../scripts/storybook/helper';
+
+const { argTypes, parameters } = storybookDefaults('sd-table-cell');
+const { overrideArgs } = storybookHelpers('sd-table-cell');
+const { generateTemplate } = storybookTemplate('sd-table-cell');
+
+/**
+ * The `sd-table-cell` component offers basic styling for table cells.
+ * It is designed to be used in conjunction with the `sd-table` component.
+ */
+
+export default {
+  title: 'Styles/sd-table-cell',
+  component: 'sd-table-cell',
+  parameters: {
+    ...parameters
+  },
+  args: overrideArgs([
+    { type: 'slot', name: 'default', value: 'Lorem ipsum dolor sit amet.' },
+    { type: 'attribute', name: 'sd-table-cell--bg-...', value: 'transparent' }
+  ]),
+  argTypes
+};
+
+/**
+ * This shows sd-table-cell in its default state.
+ */
+
+export const Default = {
+  render: (args: any) => {
+    return generateTemplate({
+      options: { templateContent: '<table class="sd-table"><tr><td class="%CLASSES%">%SLOT%</td></tr></table>' },
+      args
+    });
+  }
+};
+
+/**
+ * These examples demonstrate the usage of sd-table-cell in various contexts.
+ * The examples are intended solely for illustrating how sd-table-cell can be used to style tables.
+ * The data generation and table sorting logic should not be used in production environments.
+ *
+ */
+
+export const Samples = {
+  parameters: {
+    controls: {
+      exclude: ['sd-table-cell--divider', 'sd-table-cell--bg-...']
+    }
+  },
+  render: (args: Record<string, any>) => {
+    // Initalize table data
+    const tableRowCount = 7;
+    const tableColumnCount = 5;
+    const headerData = Array.from({ length: tableColumnCount }, () => 'Header');
+    const tableData = Array.from({ length: tableRowCount }, () =>
+      Array.from({ length: tableColumnCount }, () => {
+        return args['default-slot'] ?? 'Lorem ipsum dolor sit amet.';
+      })
+    );
+
+    return html`
+      <style>
+        .story-wrapper {
+          display: inline-block;
+          max-width: 1200px;
+        }
+
+        .headline {
+          padding: 16px;
+          background: #e0e0e0;
+          text-align: left;
+          font-size: 14px;
+          font-weight: bold;
+          width: 100%;
+          box-sizing: border-box;
+        }
+
+        .disclaimer {
+          background-color: #f6f6f6;
+          padding: 16px;
+          text-align: left;
+          font-size: 14px;
+          color: #333;
+          width: 100%;
+          margin-bottom: 10px;
+          box-sizing: border-box;
+        }
+
+        .sample-table {
+          margin-top: 20px;
+          width: 100%;
+        }
+
+        .sd-table-cell.sortable {
+          padding: 0;
+        }
+
+        .sd-table-cell.sortable button {
+          display: inline-flex;
+          box-sizing: border-box;
+          height: 100%;
+          width: 100%;
+          margin: 0;
+          padding: 16px;
+          align-items: center;
+          justify-content: flex-start;
+          gap: 16px;
+          text-align: left;
+        }
+
+        div:not(:first-of-type).headline {
+          margin-top: 72px;
+        }
+      </style>
+      <div class="story-wrapper">
+        <div class="headline">Simple Table</div>
+        <table class="sd-table sample-table">
+          <thead>
+            ${(() => {
+              return html`<tr>
+                ${headerData.map(cellData => {
+                  return html`<th class="sd-table-cell sd-table-cell--bg-transparent">${cellData}</th>`;
+                })}
+              </tr>`;
+            })()}
+          </thead>
+          <tbody>
+            ${tableData.map(rowData => {
+              return html`<tr>
+                ${rowData.map(cellData => {
+                  return html`<td class="sd-table-cell sd-table-cell--bg-transparent">${cellData}</td>`;
+                })}
+              </tr>`;
+            })}
+          </tbody>
+        </table>
+        <div class="headline">Simple Table With Vertical Lines</div>
+        <table class="sd-table sample-table">
+          <thead>
+            ${(() => {
+              return html`<tr>
+                ${headerData.map((cellData, columnIndex) => {
+                  return html`<th
+                    class="sd-table-cell sd-table-cell--bg-transparent ${columnIndex + 1 < headerData.length
+                      ? 'sd-table-cell--divider'
+                      : ''}"
+                  >
+                    ${cellData}
+                  </th>`;
+                })}
+              </tr>`;
+            })()}
+          </thead>
+          <tbody>
+            ${tableData.map(rowData => {
+              return html`<tr>
+                ${rowData.map((cellData, columnIndex) => {
+                  return html`<td
+                    class="sd-table-cell sd-table-cell--bg-transparent ${columnIndex + 1 < headerData.length
+                      ? 'sd-table-cell--divider'
+                      : ''}"
+                  >
+                    ${cellData}
+                  </td>`;
+                })}
+              </tr>`;
+            })}
+          </tbody>
+        </table>
+        <div class="headline">Simple Table With Alternating Colors</div>
+        <table class="sd-table sample-table">
+          <thead>
+            ${(() => {
+              return html`<tr>
+                ${headerData.map(cellData => {
+                  return html`<th class="sd-table-cell sd-table-cell--bg-primary-100">${cellData}</th>`;
+                })}
+              </tr>`;
+            })()}
+          </thead>
+          <tbody>
+            ${tableData.map((rowData, rowIndex) => {
+              return html`<tr>
+                ${rowData.map(cellData => {
+                  return html`<td
+                    class="sd-table-cell ${rowIndex % 2 === 0
+                      ? 'sd-table-cell--bg-white'
+                      : 'sd-table-cell--bg-primary-100'}"
+                  >
+                    ${cellData}
+                  </td>`;
+                })}
+              </tr>`;
+            })}
+          </tbody>
+        </table>
+        <div class="headline">Simple Table, First Column Fixed</div>
+        <div class="disclaimer">This sample will be provided soon.</div>
+
+        <div class="headline">Multi Select Table</div>
+        <div class="disclaimer">This sample will be provided soon.</div>
+      </div>
+    `;
+  }
+};

packages/components/src/styles/table/table.css

@@ -0,0 +1,7 @@
+/* 
+* Remove inherited styles from table before applying our styles.
+*/
+.sd-table {
+  all: unset;
+  @apply table border-collapse border-spacing-0;
+}

packages/components/src/styles/table/table.declaration.ts

@@ -0,0 +1,9 @@
+import type { Style } from '../../declaration';
+
+export default {
+  styleName: 'sd-table',
+  summary: 'A table is organized structured content, used for scanning, comparing, and analyzing the data.',
+  status: 'stable',
+  since: '1.13',
+  attributes: []
+} satisfies Style;