LF-4747 Update stories

packages/webapp/src/stories/Tile/SensorKPITiles.stories.tsx

@@ -22,15 +22,16 @@ import { Status } from '../../components/StatusIndicatorPill';
 
 // type PropTypes = SensorReadingKPIprops | SensorKPIprops;
 
-type TemplateProps = Partial<BentoLayoutProps> & {
+type TemplateProps = {
   TileComponent: () => JSX.Element;
+  bento: boolean;
 };
 
-const Template = ({ TileComponent, layoutConfig }: TemplateProps) => {
-  return layoutConfig ? (
-    <BentoLayout layoutConfig={layoutConfig}>
-      {new Array(layoutConfig.maxColumns + 2).fill('').map(() => {
-        return <TileComponent />;
+const Template = ({ TileComponent, bento }: TemplateProps) => {
+  return bento ? (
+    <BentoLayout>
+      {new Array(5).fill('').map((_val, id) => {
+        return <TileComponent key={id} />;
       })}
     </BentoLayout>
   ) : (
@@ -55,10 +56,7 @@ const SensorReadingKPITile = () => {
 export const SensorReadingKPIBento: Story = {
   args: {
     TileComponent: SensorReadingKPITile,
-    layoutConfig: {
-      gapInPx: 8,
-      maxColumns: 3,
-    },
+    bento: true,
   },
 };
 
@@ -103,10 +101,7 @@ const SensorKPITile = () => {
 export const SensorKPIBento: Story = {
   args: {
     TileComponent: SensorKPITile,
-    layoutConfig: {
-      gapInPx: 8,
-      maxColumns: 3,
-    },
+    bento: true,
   },
 };
 
@@ -115,3 +110,58 @@ export const SensorKPIOne: Story = {
     TileComponent: SensorKPITile,
   },
 };
+
+const SensorKPITileManyParams = () => {
+  const props = {
+    sensor: {
+      id: 'AS4TG5',
+      status: {
+        status: Status.ONLINE,
+        pillText: 'Online',
+        tooltipText: 'Device has sent data in the last 12 hours',
+      },
+    },
+    discriminator: {
+      measurement: 'depth_elevation',
+      value: 50,
+      unit: 'cm',
+    },
+    measurements: [
+      {
+        measurement: 'Ambient Temperature',
+        value: 50,
+        unit: '°F',
+      },
+      {
+        measurement: 'Wind Speed',
+        value: 50,
+        unit: 'km/h',
+      },
+      {
+        measurement: 'Wind Direction',
+        value: 30,
+        unit: 'NE',
+      },
+      {
+        measurement: 'Humidity',
+        value: 50,
+        unit: '%',
+      },
+    ],
+  };
+
+  return <SensorKPI {...props} />;
+};
+
+export const SensorKPIManyParamsBento: Story = {
+  args: {
+    TileComponent: SensorKPITileManyParams,
+    bento: true,
+  },
+};
+
+export const SensorKPIManyParamsOne: Story = {
+  args: {
+    TileComponent: SensorKPITileManyParams,
+  },
+};