@seamapi/react 1.24.0 → 1.26.0

package/src/styles/_supported-device-table.scss

@@ -92,6 +92,102 @@ $row-padding: 8px;
     }
   }
 
+  .seam-brand-section {
+    margin-bottom: 32px;
+    position: relative;
+
+    .seam-header {
+      display: flex;
+      align-items: center;
+      height: 64px;
+
+      .seam-brand-image {
+        width: 48px;
+        height: 48px;
+        padding: 0 8px;
+        box-sizing: content-box;
+        margin-right: 8px;
+      }
+
+      .seam-brand-name {
+        font-size: 21px;
+        line-height: 132%;
+        flex: 1;
+      }
+
+      .chevron {
+        transform: rotate(90deg);
+        margin-right: 24px;
+      }
+    }
+
+    .show-all-devices-button {
+      cursor: pointer;
+      background: colors.$white;
+      display: flex;
+      height: 30px;
+      padding: 4px 24px;
+      align-items: center;
+      gap: 10px;
+      font-size: 14px;
+      line-height: 115%;
+      color: colors.$text-gray-1;
+      border-radius: 30px;
+      border: 0;
+      box-shadow: 0 1px 1px 0 rgb(16 27 37 / 10%),
+        0 1px 8px 0 rgb(46 69 82 / 12%);
+      position: absolute;
+      left: 50%;
+      transform: translate(-50%, -47px);
+      z-index: 3;
+
+      svg {
+        transform: rotate(90deg);
+      }
+    }
+
+    .hidden-devices-overlay {
+      background: linear-gradient(
+        180deg,
+        rgb(255 255 255 / 0%) 10.17%,
+        #fff 86.98%
+      );
+      position: absolute;
+      height: 64px;
+      width: 100%;
+      bottom: 0;
+      z-index: 2;
+    }
+
+    &.can-expand {
+      .seam-header {
+        cursor: pointer;
+
+        &:hover {
+          background: colors.$bg-aa;
+        }
+      }
+    }
+
+    &.expanded {
+      margin-bottom: 96px; // 32px  (usual margin) + 64px (empty row)
+
+      .seam-header {
+        .chevron {
+          transform: rotate(270deg);
+        }
+      }
+
+      .show-all-devices-button {
+        transform: translate(-50%, 16px);
+
+        svg {
+          transform: rotate(270deg);
+        }
+      }
+    }
+  }
+
   .seam-supported-device-table-content-state-block {
     width: 100%;
     background-color: colors.$bg-a;
@@ -134,85 +230,129 @@ $row-padding: 8px;
     table-layout: auto;
     border-collapse: collapse;
 
-    th,
-    td {
-      white-space: nowrap;
-      padding: 0 8px;
-    }
+    .seam-row {
+      height: 64px;
+      border-bottom: 1px solid colors.$bg-b;
+      display: flex;
 
-    thead {
-      width: 100%;
-      height: 50px;
-      background: colors.$bg-a;
-      overflow: hidden;
+      &:first-child {
+        border-top: 1px solid colors.$bg-b;
+      }
 
-      tr {
-        border-radius: 8px;
+      .seam-col {
+        display: flex;
+        padding: 8px;
       }
 
-      th {
-        vertical-align: middle;
-        text-align: left;
-        font-size: 16px;
-        font-weight: 600;
+      &.filter-result-row {
+        .seam-model-name {
+          display: flex;
+          align-items: center;
+
+          .seam-brand-image {
+            width: 32px;
+            margin-right: 4px;
+          }
+        }
       }
     }
 
-    tbody {
-      tr {
-        height: 60px;
-        border-bottom: 1px solid colors.$bg-b;
-      }
+    .seam-status-pill {
+      display: inline-flex;
+      padding: 4px 8px;
+      border-radius: 16px;
 
-      td {
-        vertical-align: middle;
+      & span {
+        font-size: 11px;
+        line-height: 134%;
+        letter-spacing: 0.55px;
       }
-    }
 
-    tr {
-      th:first-of-type,
-      td:first-of-type {
-        padding-left: $row-padding;
+      &.status-green {
+        background-color: colors.$pill-green-bg;
+        color: colors.$pill-green-text;
       }
 
-      th:last-of-type,
-      td:last-of-type {
-        padding-right: $row-padding;
+      &.status-blue {
+        background-color: colors.$pill-blue-bg;
+        color: colors.$pill-blue-text;
       }
-    }
 
-    .seam-status-pill {
-      display: inline-flex;
-      padding: 4px 8px;
-      border-radius: 90px;
-      background-color: colors.$status-green;
+      &.status-unknown {
+        color: colors.$text-gray-1;
+        font-size: 12px;
+        line-height: 118%;
+      }
 
-      & span {
-        color: white;
-        font-size: 14px;
+      &:not(.status-unknown) {
         font-weight: 600;
-        line-height: 1;
       }
+    }
 
-      &.status-green {
-        background-color: colors.$status-green;
+    .seam-device-image-col {
+      align-items: center;
+
+      .seam-image-box {
+        width: 48px;
+        height: 48px;
+
+        img {
+          width: 100%;
+        }
       }
+    }
+
+    .seam-model-col {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: center;
+      gap: 2px;
 
-      &.status-orange {
-        background-color: colors.$status-orange;
+      .seam-model-name {
+        font-size: 14px;
       }
 
-      &.status-red {
-        background-color: colors.$status-red;
+      .seam-model-id {
+        color: colors.$text-gray-2;
+        font-size: 12px;
+
+        .seam-dot-divider {
+          margin: 0 4px;
+          color: colors.$text-gray-3;
+        }
       }
 
-      &.status-blue {
-        background-color: colors.$primary;
+      @media only screen and (width >= 450px) {
+        .seam-model-name {
+          font-size: 16px;
+        }
+
+        .seam-model-id {
+          font-size: 14px;
+        }
       }
 
-      &.status-gray {
-        background-color: colors.$bg-d;
+      @media only screen and (width >= 700px) {
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+
+        .seam-model-name {
+          flex: 0 0 75%;
+        }
+
+        .seam-model-id {
+          font-size: 16px;
+        }
       }
     }
+
+    .seam-status-col {
+      width: 70px;
+      text-align: center;
+      align-items: center;
+    }
   }
 }

package/src/styles/_tables.scss

@@ -111,7 +111,7 @@
     }
 
     &.seam-selected {
-      background: #fff;
+      background: colors.$white;
       border: 1px solid colors.$text-gray-3;
     }
   }

package/lib/seam/components/SupportedDeviceTable/SupportedDeviceHeader.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare function SupportedDeviceHeader(): JSX.Element;

package/lib/seam/components/SupportedDeviceTable/SupportedDeviceHeader.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function SupportedDeviceHeader() {
-    return (_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", {}), _jsx("th", { children: t.category }), _jsx("th", { children: t.modelName }), _jsx("th", { children: t.manufacturerModelId }), _jsx("th", { children: t.connectionType }), _jsx("th", { children: t.status })] }) }));
-}
-const t = {
-    category: 'Category',
-    modelName: 'Model Name',
-    manufacturerModelId: 'Manufacturer Model ID',
-    connectionType: 'Connection Type',
-    status: 'Status',
-};
-//# sourceMappingURL=SupportedDeviceHeader.js.map

package/lib/seam/components/SupportedDeviceTable/SupportedDeviceHeader.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SupportedDeviceHeader.js","sourceRoot":"","sources":["../../../../src/lib/seam/components/SupportedDeviceTable/SupportedDeviceHeader.tsx"],"names":[],"mappings":";AAAA,MAAM,UAAU,qBAAqB;IACnC,OAAO,CACL,0BACE,yBACE,cAAM,EACN,uBAAK,CAAC,CAAC,QAAQ,GAAM,EACrB,uBAAK,CAAC,CAAC,SAAS,GAAM,EACtB,uBAAK,CAAC,CAAC,mBAAmB,GAAM,EAChC,uBAAK,CAAC,CAAC,cAAc,GAAM,EAC3B,uBAAK,CAAC,CAAC,MAAM,GAAM,IAChB,GACC,CACT,CAAA;AACH,CAAC;AAED,MAAM,CAAC,GAAG;IACR,QAAQ,EAAE,UAAU;IACpB,SAAS,EAAE,YAAY;IACvB,mBAAmB,EAAE,uBAAuB;IAC5C,cAAc,EAAE,iBAAiB;IACjC,MAAM,EAAE,QAAQ;CACjB,CAAA"}

package/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceHeader.tsx

@@ -1,22 +0,0 @@
-export function SupportedDeviceHeader(): JSX.Element {
-  return (
-    <thead>
-      <tr>
-        <th />
-        <th>{t.category}</th>
-        <th>{t.modelName}</th>
-        <th>{t.manufacturerModelId}</th>
-        <th>{t.connectionType}</th>
-        <th>{t.status}</th>
-      </tr>
-    </thead>
-  )
-}
-
-const t = {
-  category: 'Category',
-  modelName: 'Model Name',
-  manufacturerModelId: 'Manufacturer Model ID',
-  connectionType: 'Connection Type',
-  status: 'Status',
-}