@seamapi/react 2.7.0 → 2.8.1

package/src/lib/icons/InfoBlue.tsx

@@ -0,0 +1,36 @@
+/*
+ * Automatically generated by SVGR from assets/icons/*.svg.
+ * Do not edit this file or add other components to this directory.
+ */
+import type { SVGProps } from 'react'
+export function InfoBlueIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={16}
+      height={16}
+      fill='none'
+      {...props}
+    >
+      <mask
+        id='info-blue_svg__a'
+        width={16}
+        height={16}
+        x={0}
+        y={0}
+        maskUnits='userSpaceOnUse'
+        style={{
+          maskType: 'alpha',
+        }}
+      >
+        <path fill='#D9D9D9' d='M0 0h16v16H0z' />
+      </mask>
+      <g mask='url(#info-blue_svg__a)'>
+        <path
+          fill='#007AFC'
+          d='M7.333 11.333h1.334v-4H7.333zM8 6a.645.645 0 0 0 .475-.192.645.645 0 0 0 .192-.475.645.645 0 0 0-.192-.475A.645.645 0 0 0 8 4.667a.645.645 0 0 0-.475.191.645.645 0 0 0-.192.475c0 .19.064.348.192.475A.645.645 0 0 0 8 6m0 8.667a6.492 6.492 0 0 1-2.6-.525 6.732 6.732 0 0 1-2.117-1.425A6.733 6.733 0 0 1 1.858 10.6 6.492 6.492 0 0 1 1.333 8c0-.922.175-1.789.525-2.6a6.732 6.732 0 0 1 1.425-2.117c.6-.6 1.306-1.075 2.117-1.425A6.492 6.492 0 0 1 8 1.333c.922 0 1.789.175 2.6.525.811.35 1.517.825 2.117 1.425.6.6 1.075 1.306 1.425 2.117.35.811.525 1.678.525 2.6 0 .922-.175 1.789-.525 2.6a6.733 6.733 0 0 1-1.425 2.117c-.6.6-1.306 1.075-2.117 1.425a6.492 6.492 0 0 1-2.6.525'
+        />
+      </g>
+    </svg>
+  )
+}

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

@@ -1,7 +1,11 @@
-import type { DeviceModelV1 } from '@seamapi/types/devicedb'
+import type {
+  DeviceModelV1,
+  ManufacturerAnnotation,
+} from '@seamapi/types/devicedb'
 import classNames from 'classnames'
 
 import { ChevronRightIcon } from 'lib/icons/ChevronRight.js'
+import { InfoBlueIcon } from 'lib/icons/InfoBlue.js'
 import { HiddenDevicesOverlay } from 'lib/seam/components/SupportedDeviceTable/HiddenDevicesOverlay.js'
 import { ShowAllDevicesButton } from 'lib/seam/components/SupportedDeviceTable/ShowAllDevicesButton.js'
 import { SupportedDeviceRow } from 'lib/seam/components/SupportedDeviceTable/SupportedDeviceRow.js'
@@ -62,6 +66,12 @@ export function SupportedDeviceManufacturerSection({
         </h5>
         {canExpand && <ChevronRightIcon className='chevron' />}
       </div>
+      {manufacturer?.annotations.map((annotation, idx) => (
+        <ManufacturerAnnotationBox
+          key={[annotation.annotation_code, idx].join('_')}
+          annotation={annotation}
+        />
+      ))}
       <div className='seam-supported-device-table-content'>
         {visibleDevices.map((deviceModel) => (
           <SupportedDeviceRow
@@ -81,6 +91,19 @@ export function SupportedDeviceManufacturerSection({
   )
 }
 
+function ManufacturerAnnotationBox({
+  annotation,
+}: {
+  annotation: ManufacturerAnnotation
+}): JSX.Element {
+  return (
+    <div className='seam-manufacturer-annotation-box'>
+      <InfoBlueIcon />
+      <p className='seam-annotation'>{annotation.message}</p>
+    </div>
+  )
+}
+
 const t = {
   devices: 'Devices',
 }

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '2.7.0'
+const seamapiReactVersion = '2.8.1'
 
 export default seamapiReactVersion

package/src/styles/_colors.scss

@@ -8,6 +8,7 @@ $primary-8: color.scale($primary, $lightness: 92%);
 $primary-5: color.scale($primary, $lightness: 95%);
 $primary-dark: color.scale($primary, $lightness: -10%);
 $primary-dim: color.scale($primary-15, $lightness: -5%);
+$primary-transparent: color.adjust($primary, $alpha: 0.08 - 1);
 $text-default: #232b3a;
 $text-gray-1: #6e7179;
 $text-gray-2: #9da1a9;

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

@@ -1,6 +1,8 @@
 @use './colors';
 
+$row-height: 64px;
 $row-padding: 8px;
+$see-all-button-height: 30px;
 
 @mixin all {
   .seam-supported-device-table-content-wrap {
@@ -99,6 +101,37 @@ $row-padding: 8px;
   .seam-manufacturer-section {
     margin-bottom: 32px;
     position: relative;
+    display: flex;
+    padding: 8px 16px 16px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 10px;
+    align-self: stretch;
+
+    .seam-manufacturer-annotation-box {
+      display: flex;
+      padding: 8px;
+      align-items: center;
+      align-content: center;
+      gap: 0 8px;
+      align-self: stretch;
+      flex-wrap: wrap;
+      border-radius: 6px;
+      background-color: colors.$primary-transparent;
+
+      .seam-annotation {
+        display: flex;
+        align-items: flex-start;
+        align-content: flex-start;
+        gap: 2px;
+        flex: 1 0 0;
+        flex-wrap: wrap;
+        color: colors.$text-gray-1;
+        font-size: 14px;
+        line-height: 120%;
+      }
+    }
 
     .seam-header {
       display: flex;
@@ -129,7 +162,7 @@ $row-padding: 8px;
       cursor: pointer;
       background: colors.$white;
       display: flex;
-      height: 30px;
+      height: $see-all-button-height;
       padding: 5px 24px 4px 16px;
       align-items: center;
       gap: 2px;
@@ -142,6 +175,7 @@ $row-padding: 8px;
         0 1px 1px 0 rgb(16 27 37 / 10%),
         0 1px 8px 0 rgb(46 69 82 / 12%);
       position: absolute;
+      bottom: -($row-height - $see-all-button-height - $row-padding) / 2;
       left: 50%;
       transform: translate(-50%, -47px);
       z-index: 3;
@@ -158,7 +192,7 @@ $row-padding: 8px;
         #fff 86.98%
       );
       position: absolute;
-      height: 64px;
+      height: $row-height;
       width: 100%;
       bottom: 0;
       z-index: 2;
@@ -236,7 +270,7 @@ $row-padding: 8px;
     border-collapse: collapse;
 
     .seam-row {
-      height: 64px;
+      height: $row-height;
       border-bottom: 1px solid colors.$bg-b;
       display: flex;