Skip to content

Commit

Permalink
Prepare for release - Adapt to grid block (#119)
Browse files Browse the repository at this point in the history
Co-authored-by: Dante Álvarez <89805481+danalvrz@users.noreply.github.com>
  • Loading branch information
sneridagh and danalvrz authored Jun 29, 2023
1 parent 40fe4db commit 5da0541
Show file tree
Hide file tree
Showing 16 changed files with 3,289 additions and 294 deletions.
2 changes: 1 addition & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<!-- You should *NOT* be adding new change log entries to this file.
You should create a file in the news directory instead.
For helpful instructions, please see:
https://6.dev-docs.plone.org/volto/developer-guidelines/contributing.html#create-a-pull-request
https://6.docs.plone.org/contributing/index.html?highlight=towncrier#change-log-entry
-->

<!-- towncrier release notes start -->
2 changes: 1 addition & 1 deletion Makefile
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ RESET=`tput sgr0`
YELLOW=`tput setaf 3`

PLONE_VERSION=6
VOLTO_VERSION=17.0.0-alpha.4
VOLTO_VERSION=17.0.0-alpha.16

ADDON_NAME='@kitconcept/volto-light-theme'
ADDON_PATH='volto-light-theme'
Expand Down
94 changes: 43 additions & 51 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,11 @@
# volto-light-theme
# Volto Light Theme by kitconcept

[![NPM](https://img.shields.io/npm/v/@kitconcept/volto-light-theme.svg)](https://www.npmjs.com/package/@kitconcept/volto-light-theme)
[![Build Status](https://github.com/kitconcept/volto-light-theme/actions/workflows/code.yml/badge.svg)](https://github.com/kitconcept/volto-light-theme/actions)
[![Build Status](https://github.com/kitconcept/volto-light-theme/actions/workflows/unit.yml/badge.svg)](https://github.com/kitconcept/volto-light-theme/actions)
[![Build Status](https://github.com/kitconcept/volto-light-theme/actions/workflows/acceptance.yml/badge.svg)](https://github.com/kitconcept/volto-light-theme/actions)

![kitconcept GmbH](https://github.com/kitconcept/volto-blocks/raw/master/kitconcept.png)

## Vision

Expand Down Expand Up @@ -29,9 +36,10 @@ The Volto strategy is:

#### Volto components `customizations` use case

If possible, we will switch to SemanticUI-less (`Atom`) components in case of they exist. Specially if the elements that we are customizing are clearly "theme" (eg. header/footer, etc). In the case of other Volto customizations that are not clear part of the theme (eg. Search block), it's fine to stick using what the original is using (SemanticUI). When Volto will make the switch in the future, we should then adapt all the customizations to match the one in the Volto core.
If possible, we will switch to SemanticUI-less components in case of they exist. Specially if the elements that we are customizing are clearly "theme" (eg. header/footer, etc). In the case of other Volto customizations that are not clear part of the theme (eg. Search block), it's fine to stick using what the original is using (SemanticUI). When Volto will make the switch in the future, we should then adapt all the customizations to match the one in the Volto core.
The approach used is to use a proxy to a component of the `components` folder. This way it's easier to keep track of changes, and another add-on can customize again the light theme component, not the original Volto customization.

### It should use kitconcept's layout used in FZJ/DLR
### It should use kitconcept's layout used in FZJ/DLR projects

Since FZJ/DLR projects we've been trying a new concept in layout for Volto. This new layout uses three widths for the content elements:

Expand All @@ -53,56 +61,11 @@ We will start organising de files in the root of `theme` folder, to differentiat
- All less files loading are centralized in one main less file `custom.less` in this project, could be different in the future.
- Vanilla headless components are named under `atoms` folder.


## Why a headless component system?

https://medium.com/@nirbenyair/headless-components-in-react-and-why-i-stopped-using-ui-libraries-a8208197c268


## Development Setup

## Prerequisits

- Docker
- Node 16 (e.g. via nvm)
- yo (run "npm install -g yo")
- @plone/generator-volto (run "npm install -g @plone/generator-volto")
- Build project by running "make"

### Build a project

Run

````
make project
````

### Start Backend (Docker)

Run:

````
make start-backend-docker
````

### Start Frontend (Volto)

````
cd project
yarn start
````

## Block model

The block model we use in the light theme is following these rules:

- The vertical spacing between blocks is driven by `margin-bottom` alone.
- The block starts right at the very beginning of its container (no `margin-top`)

Some blocks, especially the textual ones, are exceptions to these rules and can have both `margin-top` and `margin-bottom`.
These take advantage of the vertical margin collapse to relate well with each other.

### Vertical spacing block model
## Vertical spacing block model

This theme has the concept of block "grouping" given two consecutive blocks with the same styling block wrapper property `backgroundColor`. You have to add this property to your blocks in your blocks code. This add-on customizes `RenderBlocks.jsx` component in order to do so.

Expand All @@ -126,16 +89,45 @@ These main rules spec applies to the theme:

## Specification

volto-light-theme works with the following Plone Blocks:
`@kitconcept/volto-light-theme` works with the following Plone Blocks:

- Grid-Block (https://www.npmjs.com/package/@kitconcept/volto-blocks-grid)
- Teaser-Block (https://www.npmjs.com/package/@kitconcept/volto-blocks-grid)
- Slider-Block (https://www.npmjs.com/package/@kitconcept/volto-slider-block)
- Button-Block (https://www.npmjs.com/package/@kitconcept/volto-button-block)
- Separator-Block (https://www.npmjs.com/package/@kitconcept/volto-separator-block)
- Heading-Block (https://www.npmjs.com/package/@kitconcept/volto-heading-block)
- Introduction-Block (not open source yet)
- Introduction-Block (https://www.npmjs.com/package/@kitconcept/volto-introduction-block)

and the following add-ons:

- DSGVO-Banner (https://www.npmjs.com/package/@kitconcept/volto-dsgvo-banner)

## Development Setup

This theme works under Volto 17 alpha 16 onwards.
Compatibility with Volto 16 might be achieved, but it has to be at customization level in the
specific project add-on.
This is mainly due to the `RenderBlocks` customization that is based in the one in 17 because of the Grid block in core and the autogrouping feature.
See more information about the other dependencies in `peerDependencies` in `package.json`.

### Prerequisites

- Docker
- Node 18 (e.g. via nvm)

### Build a project

Run

````
make start-dev
````

### Stop Backend (Docker)

Run:

````
make stop-backend-docker
````
4 changes: 2 additions & 2 deletions acceptance/docker-compose.yml
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ services:
args:
ADDON_NAME: "${ADDON_NAME}"
ADDON_PATH: "${ADDON_PATH}"
VOLTO_VERSION: ${VOLTO_VERSION:-16}
VOLTO_VERSION: ${VOLTO_VERSION:-17}
volumes:
- ${CURRENT_DIR}:/app/src/addons/${ADDON_PATH}/
environment:
Expand All @@ -30,7 +30,7 @@ services:
args:
ADDON_NAME: "${ADDON_NAME}"
ADDON_PATH: "${ADDON_PATH}"
VOLTO_VERSION: ${VOLTO_VERSION:-16}
VOLTO_VERSION: ${VOLTO_VERSION:-17}
environment:
RAZZLE_INTERNAL_API_PATH: http://backend-acceptance:55001/plone
RAZZLE_API_PATH: http://localhost:55001/plone
Expand Down
2 changes: 2 additions & 0 deletions news/119.feature
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
Prepare to release @sneridagh
Add support for core Grid block @sneridagh
34 changes: 29 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,28 +1,52 @@
{
"name": "@kitconcept/volto-light-theme",
"version": "0.1.0",
"description": "volto-light-theme: Volto add-on",
"description": "Volto Light Theme by kitconcept",
"main": "src/index.js",
"repository": {
"type": "git",
"url": "git+ssh://git@github.com/kitconcept/volto-light-theme.git"
},
"bugs": {
"url": "https://github.com/kitconcept/volto-light-theme/issues"
},
"homepage": "https://github.com/kitconcept/volto-light-theme#readme",
"author": "kitconcept, GmbH",
"license": "MIT",
"keywords": [
"volto-addon",
"volto",
"plone",
"react"
"react",
"light-theme",
"theme"
],
"scripts": {
"i18n": "rm -rf build/messages && NODE_ENV=production i18n --addon"
"i18n": "rm -rf build/messages && NODE_ENV=production i18n --addon",
"dry-release": "release-it --dry-run",
"release": "release-it",
"release-major-alpha": "release-it major --preRelease=alpha",
"release-alpha": "release-it --preRelease=alpha"
},
"devDependencies": {
"@plone/scripts": "^2.3.0",
"@plone/scripts": "^3.0.0",
"postcss-scss": "4.0.6",
"prettier": "2.0.5",
"razzle-plugin-scss": "4.2.18",
"release-it": "15.11.0",
"stylelint-config-prettier": "9.0.4",
"stylelint-config-sass-guidelines": "9.0.1",
"stylelint-prettier": "1.1.2"
},
"peerDependencies": {
"@plone/volto": "^16.20.0 || ^17.0.0-alpha.4"
"@eeacms/volto-accordion-block": "^9.0.0",
"@kitconcept/volto-button-block": "^2.1.0",
"@kitconcept/volto-dsgvo-banner": "^1.3.0",
"@kitconcept/volto-heading-block": "^2.2.0",
"@kitconcept/volto-image-block": "^1.0.1",
"@kitconcept/volto-introduction-block": "^1.0.0",
"@kitconcept/volto-separator-block": "^3.2.0",
"@kitconcept/volto-slider-block": "^4.2.0",
"@plone/volto": "^17.0.0-alpha.16"
}
}
3 changes: 0 additions & 3 deletions src/components/Header/Header.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,6 @@ const Header = (props) => {
<Link aria-label="register" to="/register">
<FormattedMessage id="Register" defaultMessage="Registration" />
</Link>
<Link aria-label="press" to="/press">
<FormattedMessage id="Press" defaultMessage="Press" />
</Link>
<Link aria-label="sitemap" to="/sitemap">
<FormattedMessage id="Sitemap" defaultMessage="Sitemap" />
</Link>
Expand Down
44 changes: 44 additions & 0 deletions src/customizations/volto/components/manage/Blocks/Grid/View.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
// TODO: Remove after this is merged: https://github.com/plone/volto/pull/4932
import { Grid } from 'semantic-ui-react';
import cx from 'classnames';
import { RenderBlocks } from '@plone/volto/components';
import { withBlockExtensions } from '@plone/volto/helpers';
import config from '@plone/volto/registry';

const GridBlockView = (props) => {
const { data, path, className } = props;
const metadata = props.metadata || props.properties;
const columns = data.blocks_layout.items;
const blocksConfig =
config.blocks.blocksConfig[data['@type']].blocksConfig ||
props.blocksConfig;
const location = {
pathname: path,
};
return (
<div
className={cx('block', data['@type'], className, {
one: columns?.length === 1,
two: columns?.length === 2,
three: columns?.length === 3,
four: columns?.length === 4,
})}
>
{data.headline && <h2 className="headline">{data.headline}</h2>}

<Grid stackable stretched columns={columns.length}>
<RenderBlocks
{...props}
blockWrapperTag={Grid.Column}
metadata={metadata}
content={data}
location={location}
blocksConfig={blocksConfig}
isContainer
/>
</Grid>
</div>
);
};

export default withBlockExtensions(GridBlockView);
Loading

0 comments on commit 5da0541

Please sign in to comment.