@sebgroup/green-core 3.17.0 → 3.17.1

package/components/table/table.stories.data.js

@@ -240,7 +240,7 @@ const Users = {
       (row) => String(row.status) === "Active"
     ).length;
     const activeRate = Math.round(activeCount / rows.length * 100);
-    const departments = new Set(rows.map((row) => row.department)).size;
+    const departments2 = new Set(rows.map((row) => row.department)).size;
     return html`
       <!-- tfoot: name row count -->
       <span slot="tfoot:name">${rows.length} Users</span>
@@ -256,7 +256,7 @@ const Users = {
 
       <!-- tfoot: department count -->
       <gds-badge slot="tfoot:department" variant="information" size="small">
-        ${departments} depts
+        ${departments2} depts
       </gds-badge>
 
       <!-- tfoot: amount sum -->
@@ -1095,9 +1095,488 @@ const ExpandableFinance = {
     `;
   }
 };
+const departments = [
+  "Engineering",
+  "Finance",
+  "Legal",
+  "Marketing",
+  "Operations",
+  "HR",
+  "Sales",
+  "Support",
+  "Design",
+  "Product"
+];
+const statuses = ["Active", "Inactive", "Pending", "Review", "Archived"];
+const currencies = ["SEK", "EUR", "USD", "NOK", "DKK"];
+const regions = [
+  "Stockholm",
+  "Gothenburg",
+  "Malmo",
+  "Oslo",
+  "Copenhagen",
+  "Helsinki",
+  "London",
+  "Berlin"
+];
+const priorities = ["Critical", "High", "Medium", "Low"];
+const generatePerformanceRows = (count) => Array.from({ length: count }, (_, i) => {
+  const id = i + 1;
+  const dept = departments[i % departments.length];
+  const statusVal = statuses[i % statuses.length];
+  const currency = currencies[i % currencies.length];
+  const region = regions[i % regions.length];
+  const priority = priorities[i % priorities.length];
+  const nameVal = `User ${id}`;
+  const accountVal = `5001 ${String(10 + i % 90).padStart(2, "0")} ${String(
+    100 + i
+  ).slice(-3)} ${String(10 + i % 90).padStart(2, "0")}`;
+  const joinedVal = `2024-${String(i % 12 + 1).padStart(2, "0")}-${String(i % 28 + 1).padStart(2, "0")}`;
+  const lastLoginVal = `2026-${String(i % 12 + 1).padStart(2, "0")}-${String(i % 28 + 1).padStart(2, "0")}`;
+  const managerVal = `Manager ${i % 20 + 1}`;
+  const teamVal = `Team ${String.fromCharCode(65 + i % 8)}`;
+  const buildingVal = `Building ${i % 5 + 1}`;
+  const projectVal = `Project ${String.fromCharCode(65 + i % 12)}-${Math.floor(i / 12) + 1}`;
+  const isSubRowType = i % 5 === 0;
+  const isFullContentType = i % 5 === 2;
+  const baseRow = {
+    id,
+    name: Slot(nameVal, ["avatar", "value"]),
+    email: Slot(`user${id}@example.com`, ["value", "copy-button"]),
+    department: dept,
+    status: Slot(statusVal, ["status"]),
+    region,
+    priority,
+    currency,
+    amount: Slot(Math.round(Math.random() * 5e5 + 1e3), [
+      "amount",
+      "currency"
+    ]),
+    balance: Math.round(Math.random() * 1e6),
+    score: Math.round(Math.random() * 100),
+    rating: (Math.random() * 5).toFixed(1),
+    tasks: Math.floor(Math.random() * 50),
+    completed: Math.floor(Math.random() * 40),
+    account: accountVal,
+    joined: joinedVal,
+    lastLogin: lastLoginVal,
+    manager: managerVal,
+    team: teamVal,
+    building: buildingVal,
+    floor: i % 10 + 1,
+    extension: 1e3 + i,
+    costCenter: `CC-${String(100 + i % 50)}`,
+    project: projectVal,
+    hours: Math.round(Math.random() * 160 + 20),
+    actions: Slot(void 0, ["main"])
+  };
+  if (isSubRowType) {
+    return {
+      ...baseRow,
+      isExpandable: true,
+      subRowCount: 2,
+      subRows: async () => {
+        return [
+          {
+            id: `${id}-r1`,
+            name: `${nameVal} - Sub A`,
+            email: `sub.a.${id}@example.com`,
+            department: dept,
+            status: statuses[(i + 1) % statuses.length],
+            region,
+            priority,
+            currency,
+            amount: id * 1234 % 1e5 + 500,
+            balance: id * 5678 % 2e5,
+            score: id * 91 % 100,
+            rating: (id * 13 % 50 / 10).toFixed(1),
+            tasks: id * 3 % 10,
+            completed: id * 2 % 10,
+            account: `${accountVal}-A`,
+            joined: joinedVal,
+            lastLogin: lastLoginVal,
+            manager: managerVal,
+            team: teamVal,
+            building: buildingVal,
+            floor: baseRow.floor,
+            extension: baseRow.extension + 1,
+            costCenter: baseRow.costCenter,
+            project: `${projectVal}-A`,
+            hours: id * 7 % 80 + 10,
+            actions: Slot(void 0, ["main"])
+          },
+          {
+            id: `${id}-r2`,
+            name: `${nameVal} - Sub B`,
+            email: `sub.b.${id}@example.com`,
+            department: dept,
+            status: statuses[(i + 2) % statuses.length],
+            region,
+            priority,
+            currency,
+            amount: id * 2345 % 1e5 + 500,
+            balance: id * 6789 % 2e5,
+            score: id * 47 % 100,
+            rating: (id * 17 % 50 / 10).toFixed(1),
+            tasks: id * 5 % 10,
+            completed: id * 4 % 10,
+            account: `${accountVal}-B`,
+            joined: joinedVal,
+            lastLogin: lastLoginVal,
+            manager: managerVal,
+            team: teamVal,
+            building: buildingVal,
+            floor: baseRow.floor,
+            extension: baseRow.extension + 2,
+            costCenter: baseRow.costCenter,
+            project: `${projectVal}-B`,
+            hours: id * 11 % 80 + 10,
+            actions: Slot(void 0, ["main"])
+          }
+        ];
+      }
+    };
+  }
+  if (isFullContentType) {
+    return {
+      ...baseRow,
+      isExpandable: true,
+      subRowCount: 1,
+      fullContent: async () => {
+        return true;
+      }
+    };
+  }
+  return {
+    ...baseRow,
+    isExpandable: false
+  };
+});
+const performanceCaches = {};
+const getPerformanceRows = (count) => {
+  if (!performanceCaches[count])
+    performanceCaches[count] = generatePerformanceRows(count);
+  return performanceCaches[count];
+};
+const performanceDataProvider = (rowCount) => async (request) => {
+  let data = getPerformanceRows(rowCount);
+  if (request.searchQuery) {
+    const q = request.searchQuery.toLowerCase();
+    data = data.filter(
+      (row) => Object.values(row).some((v) => v?.toString().toLowerCase().includes(q))
+    );
+  }
+  if (request.sortColumn && data.length > 0) {
+    const key = request.sortColumn;
+    data = [...data].sort((a, b) => {
+      const aVal = a[key]?.toString() ?? "";
+      const bVal = b[key]?.toString() ?? "";
+      return request.sortDirection === "asc" ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
+    });
+  }
+  const start = (request.page - 1) * request.rows;
+  return {
+    rows: data.slice(start, start + request.rows),
+    total: data.length
+  };
+};
+const Performance = {
+  Columns: [
+    {
+      key: "id",
+      label: "ID",
+      sortable: true,
+      width: "6ch",
+      sticky: "left"
+    },
+    {
+      key: "name",
+      label: "Name",
+      sortable: true,
+      width: "20ch",
+      sticky: "left"
+    },
+    {
+      key: "email",
+      label: "Email",
+      sortable: true,
+      width: "24ch",
+      justify: "space-between"
+    },
+    {
+      key: "department",
+      label: "Department",
+      sortable: true
+    },
+    {
+      key: "status",
+      label: "Status",
+      sortable: true
+    },
+    {
+      key: "region",
+      label: "Region",
+      sortable: true
+    },
+    {
+      key: "priority",
+      label: "Priority",
+      sortable: true
+    },
+    {
+      key: "currency",
+      label: "Currency",
+      sortable: true,
+      width: "10ch"
+    },
+    {
+      key: "amount",
+      label: "Amount",
+      sortable: true,
+      justify: "end"
+    },
+    {
+      key: "balance",
+      label: "Balance",
+      sortable: true,
+      justify: "end"
+    },
+    {
+      key: "score",
+      label: "Score",
+      sortable: true,
+      justify: "end",
+      width: "8ch"
+    },
+    {
+      key: "rating",
+      label: "Rating",
+      sortable: true,
+      justify: "end",
+      width: "8ch"
+    },
+    {
+      key: "tasks",
+      label: "Tasks",
+      sortable: true,
+      justify: "end",
+      width: "8ch"
+    },
+    {
+      key: "completed",
+      label: "Completed",
+      sortable: true,
+      justify: "end",
+      width: "10ch"
+    },
+    {
+      key: "account",
+      label: "Account",
+      sortable: true,
+      width: "20ch"
+    },
+    {
+      key: "joined",
+      label: "Joined",
+      sortable: true
+    },
+    {
+      key: "lastLogin",
+      label: "Last Login",
+      sortable: true
+    },
+    {
+      key: "manager",
+      label: "Manager",
+      sortable: true
+    },
+    {
+      key: "team",
+      label: "Team",
+      sortable: true,
+      width: "10ch"
+    },
+    {
+      key: "building",
+      label: "Building",
+      sortable: true,
+      width: "12ch"
+    },
+    {
+      key: "floor",
+      label: "Floor",
+      sortable: true,
+      justify: "end",
+      width: "8ch"
+    },
+    {
+      key: "extension",
+      label: "Ext.",
+      sortable: true,
+      justify: "end",
+      width: "8ch"
+    },
+    {
+      key: "costCenter",
+      label: "Cost Center",
+      sortable: true
+    },
+    {
+      key: "project",
+      label: "Project",
+      sortable: true
+    },
+    {
+      key: "hours",
+      label: "Hours",
+      sortable: false,
+      justify: "end",
+      sticky: "right"
+    },
+    {
+      key: "actions",
+      label: "Actions",
+      justify: "end",
+      sticky: "right",
+      sortable: true
+    }
+  ],
+  Data: performanceDataProvider,
+  SlotContent: (rows) => html`
+    ${rows.map(
+    (row) => html`
+        <gds-img
+          src="https://api.dicebear.com/9.x/notionists/svg?seed=${row.id}"
+          alt="${String(row.name)}"
+          slot="name:${row.id}:avatar"
+          width="xl"
+          height="xl"
+        ></gds-img>
+
+        <gds-button
+          slot="email:${row.id}:copy-button"
+          rank="tertiary"
+          size="small"
+        >
+          <gds-icon-copy></gds-icon-copy>
+        </gds-button>
+
+        <gds-badge
+          slot="status:${row.id}:status"
+          size="small"
+          variant="${String(row.status) === "Active" ? "positive" : String(row.status) === "Inactive" ? "negative" : String(row.status) === "Pending" ? "warning" : "information"}"
+        >
+          ${String(row.status)}
+        </gds-badge>
+
+        <gds-formatted-number
+          slot="amount:${row.id}:amount"
+          .value=${Number(row.amount)}
+        ></gds-formatted-number>
+        <gds-badge slot="amount:${row.id}:currency" size="small">
+          ${String(row.currency)}
+        </gds-badge>
+
+        <gds-context-menu slot="actions:${row.id}:main">
+          <gds-button slot="trigger" rank="tertiary" size="small">
+            <gds-icon-dot-grid-one-horizontal></gds-icon-dot-grid-one-horizontal>
+          </gds-button>
+          <gds-menu-item>View</gds-menu-item>
+          <gds-menu-item>Edit</gds-menu-item>
+        </gds-context-menu>
+
+        ${typeof row.fullContent === "function" ? row.id === 8 ? html`
+                <gds-table
+                  plain
+                  slot="expand:${row.id}:full"
+                  .columns=${Users.Columns}
+                  .data=${Users.Data}
+                  @gds-table-data-loaded=${(e) => e.stopPropagation()}
+                ></gds-table>
+              ` : html`
+                <gds-card
+                  slot="expand:${row.id}:full"
+                  variant="neutral-02-outlined"
+                >
+                  <gds-flex flex-direction="column" gap="m" padding="m">
+                    <gds-flex
+                      justify-content="space-between"
+                      align-items="center"
+                      flex-wrap="wrap"
+                      gap="s"
+                    >
+                      <gds-flex flex-direction="column" gap="2xs">
+                        <gds-text font="heading-xs">
+                          ${String(row.name)} - Extended Details
+                        </gds-text>
+                        <gds-text font="detail-s-book">
+                          ${String(row.department)} · ${String(row.region)} ·
+                          ${String(row.priority)} priority
+                        </gds-text>
+                      </gds-flex>
+                      <gds-badge
+                        variant="${String(row.status) === "Active" ? "positive" : String(row.status) === "Inactive" ? "negative" : String(row.status) === "Pending" ? "warning" : "information"}"
+                        size="small"
+                      >
+                        ${String(row.status)}
+                      </gds-badge>
+                    </gds-flex>
+
+                    <gds-grid columns="1; s{1}; m{2}; l{4}" gap="s">
+                      <gds-card variant="neutral-02-outlined" padding="s">
+                        <gds-flex flex-direction="column" gap="2xs">
+                          <gds-text font="detail-s-book">Manager</gds-text>
+                          <gds-text font="detail-s-bold">
+                            ${String(row.manager)}
+                          </gds-text>
+                        </gds-flex>
+                      </gds-card>
+                      <gds-card variant="neutral-02-outlined" padding="s">
+                        <gds-flex flex-direction="column" gap="2xs">
+                          <gds-text font="detail-s-book">Team</gds-text>
+                          <gds-text font="detail-s-bold">
+                            ${String(row.team)}
+                          </gds-text>
+                        </gds-flex>
+                      </gds-card>
+                      <gds-card variant="neutral-02-outlined" padding="s">
+                        <gds-flex flex-direction="column" gap="2xs">
+                          <gds-text font="detail-s-book">Cost Center</gds-text>
+                          <gds-text font="detail-s-bold">
+                            ${String(row.costCenter)}
+                          </gds-text>
+                        </gds-flex>
+                      </gds-card>
+                      <gds-card variant="neutral-02-outlined" padding="s">
+                        <gds-flex flex-direction="column" gap="2xs">
+                          <gds-text font="detail-s-book">Project</gds-text>
+                          <gds-text font="detail-s-bold">
+                            ${String(row.project)}
+                          </gds-text>
+                        </gds-flex>
+                      </gds-card>
+                    </gds-grid>
+
+                    <gds-flex gap="s" flex-wrap="wrap">
+                      <gds-button size="small">View profile</gds-button>
+                      <gds-button rank="secondary" size="small"
+                        >Edit</gds-button
+                      >
+                      <gds-button rank="tertiary" size="small"
+                        >Export</gds-button
+                      >
+                    </gds-flex>
+                  </gds-flex>
+                </gds-card>
+              ` : null}
+      `
+  )}
+  `
+};
 export {
   Actions,
   ExpandableFinance,
   Feedback,
+  Performance,
   Users
 };

package/components/table/table.styles.js

@@ -338,6 +338,7 @@ const TableStyles = css`
     position: sticky;
     left: 0;
     z-index: 4;
+    user-select: none;
   }
 
   .cell-center {
@@ -633,11 +634,6 @@ const TableStyles = css`
     display: flex;
     align-items: center;
     gap: 10px;
-    transition: all 420ms;
-
-    @starting-style {
-      opacity: 0;
-    }
   }
 
   /* Wrapping utilities */
@@ -1162,36 +1158,6 @@ const TableStyles = css`
     }
   }
 
-  /* Scrollbar */
-  .data {
-    --_scrollbar-color-thumb: var(--gds-sys-color-content-neutral-02);
-    --_scrollbar-color-track: var(--gds-sys-color-l3-neutral-02);
-    --_scrollbar-width: var(--gds-sys-space-2xs);
-  }
-
-  @supports (scrollbar-width: auto) {
-    .data {
-      scrollbar-color: var(--_scrollbar-color-thumb) transparent;
-      scrollbar-width: var(--_scrollbar-width);
-    }
-  }
-
-  @supports selector(::-webkit-scrollbar) {
-    .data::-webkit-scrollbar {
-      width: var(--_scrollbar-width);
-      height: var(--_scrollbar-width);
-    }
-
-    .data::-webkit-scrollbar-track {
-      background: transparent;
-    }
-
-    .data::-webkit-scrollbar-thumb {
-      background: var(--_scrollbar-color-thumb);
-      border-radius: var(--gds-sys-radius-max);
-    }
-  }
-
   /* Reduced motion */
   @media (prefers-reduced-motion: reduce) {
     tbody tr,