From f1776cc6b8bdfb394dd4b30a324f77a03ccabc09 Mon Sep 17 00:00:00 2001 From: Andrea Vesterhus Date: Tue, 25 Jun 2024 16:07:00 +0200 Subject: [PATCH] refactor: Column to GridItem rename + docs update --- .../example/dashboard.recipe.json | 6 +- .../{ColumnItem.json => GridItem.json} | 2 +- .../{ColumnSize.json => GridItemSize.json} | 2 +- .../ResponsiveGridPlugin/Documentation.md | 54 ++++----- .../ResponsiveGridPlugin/Examples/Basic.json | 114 ++++++++---------- 5 files changed, 83 insertions(+), 95 deletions(-) rename packages/dm-core-plugins/blueprints/responsive_grid/{ColumnItem.json => GridItem.json} (93%) rename packages/dm-core-plugins/blueprints/responsive_grid/{ColumnSize.json => GridItemSize.json} (97%) diff --git a/example/app/data/DemoDataSource/recipes/plugins/responsive_grid/example/dashboard.recipe.json b/example/app/data/DemoDataSource/recipes/plugins/responsive_grid/example/dashboard.recipe.json index 2f64bc4e1..fb3c35077 100644 --- a/example/app/data/DemoDataSource/recipes/plugins/responsive_grid/example/dashboard.recipe.json +++ b/example/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/packages/dm-core-plugins/blueprints/responsive_grid/ColumnItem.json b/packages/dm-core-plugins/blueprints/responsive_grid/GridItem.json similarity index 93% rename from packages/dm-core-plugins/blueprints/responsive_grid/ColumnItem.json rename to packages/dm-core-plugins/blueprints/responsive_grid/GridItem.json index 6cee13a4d..f9389515e 100644 --- a/packages/dm-core-plugins/blueprints/responsive_grid/ColumnItem.json +++ b/packages/dm-core-plugins/blueprints/responsive_grid/GridItem.json @@ -21,7 +21,7 @@ { "name": "size", "type": "CORE:BlueprintAttribute", - "attributeType": "./ColumnSize", + "attributeType": "./GridItemSize", "optional": true } ] diff --git a/packages/dm-core-plugins/blueprints/responsive_grid/ColumnSize.json b/packages/dm-core-plugins/blueprints/responsive_grid/GridItemSize.json similarity index 97% rename from packages/dm-core-plugins/blueprints/responsive_grid/ColumnSize.json rename to packages/dm-core-plugins/blueprints/responsive_grid/GridItemSize.json index 8c8ad1e0e..92cea8d2a 100644 --- a/packages/dm-core-plugins/blueprints/responsive_grid/ColumnSize.json +++ b/packages/dm-core-plugins/blueprints/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 index 74b58579c..cb047b1db 100644 --- a/packages/dm-core-plugins/docs/ResponsiveGridPlugin/Documentation.md +++ b/packages/dm-core-plugins/docs/ResponsiveGridPlugin/Documentation.md @@ -1,45 +1,40 @@ -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 + } + } ] } ``` @@ -47,7 +42,7 @@ A list of rows expects a column attribute which contains a list of `ColumnItems` ### 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, } -``` \ No newline at end of file +``` + +### Spacing +Space items using the `spacing` attribute field. Pass numbers representing REM value. Default is 1 = 16px \ No newline at end of file diff --git a/packages/dm-core-plugins/docs/ResponsiveGridPlugin/Examples/Basic.json b/packages/dm-core-plugins/docs/ResponsiveGridPlugin/Examples/Basic.json index 6c7e54d23..2b7af421c 100644 --- 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 + } } ] }