refactor: Column to GridItem rename + docs update

equinor · Jun 25, 2024 · f1776cc · f1776cc
1 parent 37201c7
commit f1776cc
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 95 deletions.
diff --git a/...ple/app/data/DemoDataSource/recipes/plugins/responsive_grid/example/dashboard.recipe.json b/...ple/app/data/DemoDataSource/recipes/plugins/responsive_grid/example/dashboard.recipe.json
@@ -15,7 +15,7 @@
             "scope": "aNestedObjectWithCustomUI"
           },
           "size": {
-            "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnSize",
+            "type": "PLUGINS:dm-core-plugins/responsive_grid/GridItemSize",
             "sm": 12,
             "md": 4
           }
@@ -28,7 +28,7 @@
             "scope": "aNestedObjectWithCustomUI"
           },
           "size": {
-            "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnSize",
+            "type": "PLUGINS:dm-core-plugins/responsive_grid/GridItemSize",
             "sm": 12,
             "md": 4
           }
@@ -41,7 +41,7 @@
             "scope": "aNestedObjectWithCustomUI"
           },
           "size": {
-            "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnSize",
+            "type": "PLUGINS:dm-core-plugins/responsive_grid/GridItemSize",
             "sm": 12,
             "md": 4
           }

diff --git a/...lueprints/responsive_grid/ColumnItem.json → .../blueprints/responsive_grid/GridItem.json b/...lueprints/responsive_grid/ColumnItem.json → .../blueprints/responsive_grid/GridItem.json
@@ -21,7 +21,7 @@
     {
       "name": "size",
       "type": "CORE:BlueprintAttribute",
-      "attributeType": "./ColumnSize",
+      "attributeType": "./GridItemSize",
       "optional": true
     }
   ]

diff --git a/...lueprints/responsive_grid/ColumnSize.json → ...eprints/responsive_grid/GridItemSize.json b/...lueprints/responsive_grid/ColumnSize.json → ...eprints/responsive_grid/GridItemSize.json
@@ -1,5 +1,5 @@
 {
-  "name": "ColumnSize",
+  "name": "GridItemSize",
   "type": "dmss://system/SIMOS/Blueprint",
   "attributes": [
     {

diff --git a/packages/dm-core-plugins/docs/ResponsiveGridPlugin/Documentation.md b/packages/dm-core-plugins/docs/ResponsiveGridPlugin/Documentation.md
@@ -1,53 +1,48 @@
-Plugin based on [react-grid-system](https://www.npmjs.com/package/react-grid-system) npm package which is a Bootstrap-like responsive grid system.
+Plugin based on a basic Bootstrap-like responsive grid system.
 
 ### Passing views
 
-ResponsiveGridPlugin config takes a list of rows.
+ResponsiveGridPlugin config takes a list of views.
 
 ```json {3}
  "config": {
     "type": "PLUGINS:dm-core-plugins/responsive_grid/ResponsiveGridPluginConfig",
-    "rows": []
+    "views": []
  }
 ```
 
-A list of rows expects a column attribute which contains a list of `ColumnItems`. A ColumnItem expects a viewConfig and also allows you set what kind of width the column item should have based on various breakpoints.
+A grid expects a list of `GridItems`. A GridItem expects a viewConfig and also allows you set what kind of width the item should have based on various breakpoints.
 
 ```json {6}
  "config": {
     "type": "PLUGINS:dm-core-plugins/responsive_grid/ResponsiveGridPluginConfig",
-    "rows": [
+    "views": [
         {
-            "type": "PLUGINS:dm-core-plugins/responsive_grid/RowItem",
-            "columns": [
-                {
-                    "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnItem",
-                    "viewConfig": {},
-                    "size": {
-                        "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnSize",
-                        "sm": 12,
-                        "md": 4
-                    }
-                },
-                {
-                    "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnItem",
-                    "viewConfig": {},
-                    "size": {
-                        "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnSize",
-                        "sm": 12,
-                        "md": 4
-                    }
-                }
-            ]
+            "type": "PLUGINS:dm-core-plugins/responsive_grid/GridItem",
+            "viewConfig": {},
+            "size": {
+                "type": "PLUGINS:dm-core-plugins/responsive_grid/GridItemSize",
+                "sm": 12,
+                "md": 4
+            }
         },
+        {
+            "type": "PLUGINS:dm-core-plugins/responsive_grid/GridItem",
+            "viewConfig": {},
+            "size": {
+                "type": "PLUGINS:dm-core-plugins/responsive_grid/GridItemSize",
+                "sm": 12,
+                "md": 4
+            }
+        }
     ]
  }
 ```
 
 ### Sizing and breakpoints
 
 #### Breakpoints
-CSS breakpoints allow you to style the website and specify layout according to the device width it's being viewed on. This plugin uses react-grid-system default breakpoints.
+CSS breakpoints allow you to style the website and specify layout according to the device width it's being viewed on. This plugin uses these default breakpoints.
 
 | **size** | **pixels** |
 | -------- | ---------- |
@@ -77,4 +72,7 @@ In this example: on small devices the configured item would span 12 grid columns
     "xs": 12,
     "md": 4,
 }
-```
+```
+
+### Spacing
+Space items using the `spacing` attribute field. Pass numbers representing REM value. Default is 1 = 16px
diff --git a/packages/dm-core-plugins/docs/ResponsiveGridPlugin/Examples/Basic.json b/packages/dm-core-plugins/docs/ResponsiveGridPlugin/Examples/Basic.json
@@ -29,76 +29,66 @@
     "plugin": "@development-framework/dm-core-plugins/responsive_grid",
     "config": {
       "type": "PLUGINS:dm-core-plugins/responsive_grid/ResponsiveGridPluginConfig",
-      "rows": [
+      "views": [
         {
-          "type": "PLUGINS:dm-core-plugins/responsive_grid/RowItem",
-          "columns": [
-            {
-              "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnItem",
-              "viewConfig": {
-                "type": "CORE:InlineRecipeViewConfig",
-                "recipe": {
-                  "type": "CORE:UiRecipe",
-                  "name": "box",
-                  "plugin": "custom-box-plugin",
-                  "config": {
-                    "type": "PLUGINS:custom-box-plugin-blueprint",
-                    "content": "Item 1"
-                  }
-                }
-              },
-              "size": {
-                "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnSize",
-                "sm": 12,
-                "md": 4
+          "type": "PLUGINS:dm-core-plugins/responsive_grid/GridItem",
+          "viewConfig": {
+            "type": "CORE:InlineRecipeViewConfig",
+            "recipe": {
+              "type": "CORE:UiRecipe",
+              "name": "box",
+              "plugin": "custom-box-plugin",
+              "config": {
+                "type": "PLUGINS:custom-box-plugin-blueprint",
+                "content": "Item 1"
               }
-            },
-            {
-              "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnItem",
-              "viewConfig": {
-                "type": "CORE:InlineRecipeViewConfig",
-                "recipe": {
-                  "type": "CORE:UiRecipe",
-                  "name": "box",
-                  "plugin": "custom-box-plugin",
-                  "config": {
-                    "type": "PLUGINS:custom-box-plugin-blueprint",
-                    "content": "Item 2"
-                  }
-                }
-              },
-              "size": {
-                "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnSize",
-                "sm": 12,
-                "md": 4
+            }
+          },
+          "size": {
+            "type": "PLUGINS:dm-core-plugins/responsive_grid/GridItemSize",
+            "sm": 12,
+            "md": 4
+          }
+        },
+        {
+          "type": "PLUGINS:dm-core-plugins/responsive_grid/GridItem",
+          "viewConfig": {
+            "type": "CORE:InlineRecipeViewConfig",
+            "recipe": {
+              "type": "CORE:UiRecipe",
+              "name": "box",
+              "plugin": "custom-box-plugin",
+              "config": {
+                "type": "PLUGINS:custom-box-plugin-blueprint",
+                "content": "Item 2"
               }
             }
-          ]
+          },
+          "size": {
+            "type": "PLUGINS:dm-core-plugins/responsive_grid/GridItemSize",
+            "sm": 12,
+            "md": 4
+          }
         },
         {
-          "type": "PLUGINS:dm-core-plugins/responsive_grid/RowItem",
-          "columns": [
-            {
-              "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnItem",
-              "viewConfig": {
-                "type": "CORE:InlineRecipeViewConfig",
-                "recipe": {
-                  "type": "CORE:UiRecipe",
-                  "name": "box",
-                  "plugin": "custom-box-plugin",
-                  "config": {
-                    "type": "PLUGINS:custom-box-plugin-blueprint",
-                    "content": "Item 3"
-                  }
-                }
-              },
-              "size": {
-                "type": "PLUGINS:dm-core-plugins/responsive_grid/ColumnSize",
-                "sm": 12,
-                "md": 4
+          "type": "PLUGINS:dm-core-plugins/responsive_grid/GridItem",
+          "viewConfig": {
+            "type": "CORE:InlineRecipeViewConfig",
+            "recipe": {
+              "type": "CORE:UiRecipe",
+              "name": "box",
+              "plugin": "custom-box-plugin",
+              "config": {
+                "type": "PLUGINS:custom-box-plugin-blueprint",
+                "content": "Item 3"
               }
             }
-          ]
+          },
+          "size": {
+            "type": "PLUGINS:dm-core-plugins/responsive_grid/GridItemSize",
+            "sm": 12,
+            "md": 4
+          }
         }
       ]
     }