feat: add new theme

src/stories/grid/GridViewList.stories.tsx

@@ -0,0 +1,123 @@
+import "../../styles/GridTheme.scss";
+import "../../styles/index.scss";
+import "@linzjs/lui/dist/scss/base.scss";
+
+import { Meta, StoryFn } from "@storybook/react";
+import { useMemo, useState } from "react";
+
+import "@linzjs/lui/dist/fonts";
+
+import {
+  ColDefT,
+  Grid,
+  GridCell,
+  GridContextProvider,
+  GridProps,
+  GridUpdatingContextProvider,
+  GridWrapper,
+} from "../..";
+
+export default {
+  title: "Components / Grids",
+  component: Grid,
+  // Storybook hangs otherwise
+  parameters: {
+    docs: {
+      source: {
+        type: "code",
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: 1024, height: 400, display: "flex", flexDirection: "column" }}>
+        <GridUpdatingContextProvider>
+          <GridContextProvider>
+            <Story />
+          </GridContextProvider>
+        </GridUpdatingContextProvider>
+      </div>
+    ),
+  ],
+} as Meta<typeof Grid>;
+
+interface ITestRow {
+  id: number;
+  position: string;
+  age: number;
+  height: string;
+  desc: string;
+  dd: string;
+}
+
+const GridReadOnlyTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
+  const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
+  const columnDefs: ColDefT<ITestRow>[] = useMemo(
+    () => [
+      GridCell({
+        field: "id",
+        headerName: "Id",
+        lockVisible: true,
+        resizable: false,
+        lockPosition: "left",
+        cellRenderer: (props) => {
+          return <a href={"#"}>{props.value}</a>;
+        },
+      }),
+      GridCell({
+        field: "position",
+        headerName: "Position",
+        resizable: false,
+        lockPosition: "left",
+        cellRendererParams: {
+          warning: (props) => props.value === "Tester" && "Testers are testing",
+          info: (props) => props.value === "Developer" && "Developers are awesome",
+        },
+      }),
+      GridCell({
+        field: "desc",
+        headerName: "Description",
+        resizable: false,
+        lockPosition: "left",
+      }),
+      GridCell({
+        field: "age",
+        headerName: "Age",
+        resizable: false,
+        lockPosition: "left",
+      }),
+      GridCell({
+        field: "height",
+        headerName: "Height",
+        resizable: false,
+        lockPosition: "left",
+      }),
+    ],
+    [],
+  );
+
+  const [rowData] = useState<ITestRow[]>([
+    { id: 1000, position: "Tester", age: 30, height: `6'4"`, desc: "Tests application", dd: "1" },
+    { id: 1001, position: "Developer", age: 12, height: `5'3"`, desc: "Develops application", dd: "2" },
+    { id: 1002, position: "Manager", age: 65, height: `5'9"`, desc: "Manages", dd: "3" },
+  ]);
+
+  return (
+    <GridWrapper maxHeight={400}>
+      <Grid
+        data-testid={"readonly"}
+        {...props}
+        selectable={false}
+        rowSelection={"single"}
+        externalSelectedItems={externalSelectedItems}
+        setExternalSelectedItems={setExternalSelectedItems}
+        columnDefs={columnDefs}
+        rowData={rowData}
+        sizeColumns={"fit"}
+        theme={"ag-theme-step-view-list-default"}
+        contextMenuSelectRow={false}
+      />
+    </GridWrapper>
+  );
+};
+export const ListViewGrid = GridReadOnlyTemplate.bind({});

src/styles/GridTheme.scss

@@ -56,8 +56,36 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
   )
 );
 
+%ag-header-common {
+
+  // fix alignment of cell content when grabber is present
+  .ag-header-cell-comp-wrapper {
+    justify-content: end;
+  }
+
+  .ag-header-cell {
+    font-size: 14px;
+    font-weight: 600;
+
+    // fix: Display descender line
+    padding: 0 11px;
+
+    .LuiIcon {
+      fill: lui.$surfie;
+    }
+  }
+
+  .ag-header .ag-header-cell[aria-colindex="1"] {
+    padding-left: 17px;
+    padding-right: 15px;
+  }
+}
+
 .ag-theme-step-default.theme-specific,
 .ag-theme-step-compact.theme-specific {
+
+  @extend %ag-header-common;
+
   .ag-text-area-input:focus {
     border-color: lui.$sea;
   }
@@ -66,11 +94,6 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     display: flex; // Fix that when you click below checkbox it doesn't process a click
   }
 
-  // fix alignment of cell content when grabber is present
-  .ag-header-cell-comp-wrapper {
-    justify-content: end;
-  }
-
   // Fix that when you click below checkbox it doesn't process a click
   .ag-cell-wrapper > *:not(.ag-cell-value, .ag-group-value) {
     height: auto;
@@ -80,29 +103,13 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     border-bottom: 1px solid lui.$dew;
   }
 
-  .ag-header-cell {
-    font-size: 14px;
-    font-weight: 600;
-
-    // fix: Display descender line
-    padding: 0 11px;
-
-    .LuiIcon {
-      fill: lui.$surfie;
-    }
-  }
-
   .ag-cell-label-container {
     padding: 8px 0;
 
     // Help ag-grid to calculate column height in react portal
     height: fit-content;
   }
 
-  .ag-header .ag-header-cell[aria-colindex="1"] {
-    padding-left: 17px;
-    padding-right: 15px;
-  }
 
   .ag-cell[aria-colindex="1"] {
     padding-left: lui.$unit-rg;
@@ -206,14 +213,14 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     height: 2px;
     background-color: transparent;
   }
-  
+
   .ag-row-highlight-above::after {
     top:-3px; // moves the top highlight to the position of the bottom highlight
     border-top: 2px dashed lui.$andrea;
   }
 
   .ag-row-highlight-above:first-of-type::after {
-    top:0px; // the first row highlight needs to in the normal position otherwise it is cut off by the top of the table
+    top:0; // the first row highlight needs to in the normal position otherwise it is cut off by the top of the table
   }
 
   .ag-row-highlight-below::after {
@@ -231,7 +238,7 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
   //   box-shadow: -4px 0px 15px -4px rgba(0, 0, 0, 0.1);
   //   right: -4px;
   // }
-  
+
   // div:after {
   //   box-shadow: 15px 0 15px -15px inset;
   //   right: -15px;
@@ -258,28 +265,7 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
 
 .ag-theme-step-view-list-default.theme-specific {
 
-  // fix alignment of cell content when grabber is present
-  .ag-header-cell-comp-wrapper {
-    justify-content: end;
-  }
-
-  .ag-header-cell {
-    font-size: 14px;
-    font-weight: 600;
-
-    // fix: Display descender line
-    padding: 0 11px;
-
-    .LuiIcon {
-      fill: lui.$surfie;
-    }
-  }
-
-  .ag-header .ag-header-cell[aria-colindex="1"] {
-    padding-left: 17px;
-    padding-right: 15px;
-  }
-
+  @extend %ag-header-common;
 
   .ag-header {
     background: lui.$iceberg;