@kitconcept/volto-light-theme 3.1.2 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (118) hide show
  1. package/.changelog.draft +11 -0
  2. package/CHANGELOG.md +3 -567
  3. package/build/messages/src/components/Anontools/Anontools.json +10 -0
  4. package/build/messages/src/components/Blocks/Button/schema.json +6 -0
  5. package/build/messages/src/components/Blocks/EventMetadata/View.json +30 -0
  6. package/build/messages/src/components/Blocks/Image/Edit.json +10 -0
  7. package/build/messages/src/components/Blocks/Image/ImageSidebar.json +18 -0
  8. package/build/messages/src/components/Blocks/Image/schema.json +10 -0
  9. package/build/messages/src/components/Blocks/Listing/ListingBody.json +26 -0
  10. package/build/messages/src/components/Blocks/Search/TopSideFacets.json +10 -0
  11. package/build/messages/src/components/Blocks/Search/components/SearchDetails.json +10 -0
  12. package/build/messages/src/components/Blocks/Search/components/SearchInput.json +6 -0
  13. package/build/messages/src/components/Blocks/Slider/DefaultBody.json +18 -0
  14. package/build/messages/src/components/Blocks/Slider/schema.json +14 -0
  15. package/build/messages/src/components/Blocks/schema.json +6 -0
  16. package/build/messages/src/components/Breadcrumbs/Breadcrumbs.json +10 -0
  17. package/build/messages/src/components/Footer/Footer.json +30 -0
  18. package/build/messages/src/components/Header/Header.json +6 -0
  19. package/build/messages/src/components/LanguageSelector/LanguageSelector.json +6 -0
  20. package/build/messages/src/components/Logo/Logo.json +10 -0
  21. package/build/messages/src/components/MobileNavigation/MobileNavigation.json +26 -0
  22. package/build/messages/src/components/Navigation/Navigation.json +10 -0
  23. package/build/messages/src/components/SearchWidget/IntranetSearchWidget.json +14 -0
  24. package/build/messages/src/components/SearchWidget/SearchWidget.json +10 -0
  25. package/build/messages/src/components/Theme/EventView.json +6 -0
  26. package/build/messages/src/components/Widgets/AlignWidget.json +22 -0
  27. package/build/messages/src/index.json +10 -0
  28. package/locales/de/LC_MESSAGES/volto.po +7 -7
  29. package/locales/en/LC_MESSAGES/volto.po +7 -7
  30. package/locales/es/LC_MESSAGES/volto.po +10 -9
  31. package/locales/eu/LC_MESSAGES/volto.po +10 -9
  32. package/locales/pt_BR/volto.po +7 -7
  33. package/locales/volto.pot +8 -8
  34. package/package.json +8 -26
  35. package/src/components/Blocks/Image/Edit.jsx +14 -14
  36. package/src/components/Blocks/Image/ImageSidebar.jsx +3 -3
  37. package/src/components/Blocks/Image/View.jsx +17 -17
  38. package/src/components/Footer/Footer.jsx +2 -2
  39. package/src/components/Header/Header.jsx +12 -12
  40. package/src/theme/_header.scss +1 -1
  41. package/.dockerignore +0 -1
  42. package/.editorconfig +0 -34
  43. package/.eslintignore +0 -6
  44. package/.eslintrc +0 -53
  45. package/.github/workflows/acceptance.yml +0 -98
  46. package/.github/workflows/changelog.yml +0 -43
  47. package/.github/workflows/code.yml +0 -16
  48. package/.github/workflows/deploy.yml +0 -105
  49. package/.github/workflows/unit.yml +0 -16
  50. package/.prettierignore +0 -3
  51. package/.prettierrc +0 -12
  52. package/.stylelintrc +0 -32
  53. package/.yarn/releases/yarn-3.2.3.cjs +0 -783
  54. package/.yarnrc.yml +0 -3
  55. package/Makefile +0 -174
  56. package/README.md +0 -453
  57. package/UPGRADE-GUIDE.md +0 -38
  58. package/acceptance/.gitkeep +0 -0
  59. package/acceptance/ci-a11y.yml +0 -31
  60. package/acceptance/ci.yml +0 -29
  61. package/acceptance/cypress/.gitkeep +0 -0
  62. package/acceptance/cypress/fixtures/broccoli.jpg +0 -0
  63. package/acceptance/cypress/fixtures/example.json +0 -5
  64. package/acceptance/cypress/fixtures/file.pdf +0 -0
  65. package/acceptance/cypress/fixtures/halfdome2022.jpg +0 -0
  66. package/acceptance/cypress/fixtures/image.png +0 -0
  67. package/acceptance/cypress/plugins/index.js +0 -17
  68. package/acceptance/cypress/support/commands.js +0 -23
  69. package/acceptance/cypress/support/e2e.js +0 -23
  70. package/acceptance/cypress/support/reset-fixture.js +0 -45
  71. package/acceptance/cypress/support/slate.js +0 -14
  72. package/acceptance/cypress/tests/.gitkeep +0 -0
  73. package/acceptance/cypress/tests/a11y/accordionBlock.cy.js +0 -30
  74. package/acceptance/cypress/tests/a11y/basic.cy.js +0 -26
  75. package/acceptance/cypress/tests/a11y/buttonBlock.cy.js +0 -18
  76. package/acceptance/cypress/tests/a11y/eventContenttype.cy.js +0 -18
  77. package/acceptance/cypress/tests/a11y/fileContenttype.cy.js +0 -18
  78. package/acceptance/cypress/tests/a11y/gridBlock.cy.js +0 -18
  79. package/acceptance/cypress/tests/a11y/gridImageBlock.cy.js +0 -18
  80. package/acceptance/cypress/tests/a11y/gridListingBlock.cy.js +0 -18
  81. package/acceptance/cypress/tests/a11y/gridTeaserBlock.cy.js +0 -18
  82. package/acceptance/cypress/tests/a11y/gridTextBlock.cy.js +0 -33
  83. package/acceptance/cypress/tests/a11y/headingBlock.cy.js +0 -18
  84. package/acceptance/cypress/tests/a11y/highlightBlock.cy.js +0 -18
  85. package/acceptance/cypress/tests/a11y/imageBlock.cy.js +0 -18
  86. package/acceptance/cypress/tests/a11y/imageContenttype.cy.js +0 -18
  87. package/acceptance/cypress/tests/a11y/introductionBlock.cy.js +0 -18
  88. package/acceptance/cypress/tests/a11y/linkContenttype.cy.js +0 -18
  89. package/acceptance/cypress/tests/a11y/listingBlock.cy.js +0 -31
  90. package/acceptance/cypress/tests/a11y/mapsBlock.cy.js +0 -27
  91. package/acceptance/cypress/tests/a11y/newsItemContenttype.cy.js +0 -27
  92. package/acceptance/cypress/tests/a11y/pageContent.cy.js +0 -27
  93. package/acceptance/cypress/tests/a11y/searchBlock.cy.js +0 -18
  94. package/acceptance/cypress/tests/a11y/separatorBlock.cy.js +0 -28
  95. package/acceptance/cypress/tests/a11y/tableBlock.cy.js +0 -26
  96. package/acceptance/cypress/tests/a11y/teaserBlock.cy.js +0 -18
  97. package/acceptance/cypress/tests/a11y/textBlock.cy.js +0 -18
  98. package/acceptance/cypress/tests/a11y/tocBlock.cy.js +0 -18
  99. package/acceptance/cypress/tests/a11y/videoBlock.cy.js +0 -27
  100. package/acceptance/cypress/tests/main/basic.cy.js +0 -71
  101. package/acceptance/cypress/tests/main/blocks-map.cy.js +0 -56
  102. package/acceptance/cypress/tests/main/blocks-table.cy.js +0 -127
  103. package/acceptance/cypress/tests/main/listing-grid.cy.js +0 -77
  104. package/acceptance/cypress/tests/main/nav.cy.js +0 -54
  105. package/acceptance/cypress/tests/main/site-action.cy.js +0 -16
  106. package/acceptance/cypress.config.js +0 -17
  107. package/acceptance/docker-compose-a11y.yml +0 -55
  108. package/acceptance/docker-compose.yml +0 -53
  109. package/acceptance/package.json +0 -5
  110. package/acceptance/yarn.lock +0 -2638
  111. package/devops/stacks/light-theme.kitconcept.io.yml +0 -66
  112. package/dockerfiles/Dockerfile +0 -32
  113. package/dockerfiles/Dockerfile.acceptance +0 -19
  114. package/dockerfiles/Dockerfile.dev +0 -24
  115. package/dockerfiles/docker-compose.yml +0 -56
  116. package/dockerfiles/helper.py +0 -132
  117. package/volto-light-theme.png +0 -0
  118. package/volto.config.js +0 -7
package/.yarnrc.yml DELETED
@@ -1,3 +0,0 @@
1
- nodeLinker: node-modules
2
-
3
- yarnPath: .yarn/releases/yarn-3.2.3.cjs
package/Makefile DELETED
@@ -1,174 +0,0 @@
1
- # Yeoman Volto App development
2
-
3
- ### Defensive settings for make:
4
- # https://tech.davis-hansson.com/p/make/
5
- SHELL:=bash
6
- .ONESHELL:
7
- .SHELLFLAGS:=-eu -o pipefail -c
8
- .SILENT:
9
- .DELETE_ON_ERROR:
10
- MAKEFLAGS+=--warn-undefined-variables
11
- MAKEFLAGS+=--no-builtin-rules
12
-
13
- CURRENT_DIR:=$(shell dirname $(realpath $(lastword $(MAKEFILE_LIST))))
14
-
15
- # Recipe snippets for reuse
16
-
17
- # We like colors
18
- # From: https://coderwall.com/p/izxssa/colored-makefile-for-golang-projects
19
- RED=`tput setaf 1`
20
- GREEN=`tput setaf 2`
21
- RESET=`tput sgr0`
22
- YELLOW=`tput setaf 3`
23
-
24
- PLONE_VERSION=6
25
- VOLTO_VERSION=17.15.5
26
-
27
- ADDON_NAME='@kitconcept/volto-light-theme'
28
- ADDON_PATH='volto-light-theme'
29
- COMPOSE_FILE=dockerfiles/docker-compose.yml
30
- ACCEPTANCE_COMPOSE=acceptance/docker-compose.yml
31
- ACCEPTANCE_COMPOSE_A11Y=acceptance/docker-compose-a11y.yml
32
- CMD=CURRENT_DIR=${CURRENT_DIR} ADDON_NAME=${ADDON_NAME} ADDON_PATH=${ADDON_PATH} VOLTO_VERSION=${VOLTO_VERSION} PLONE_VERSION=${PLONE_VERSION} docker compose
33
- DOCKER_COMPOSE=${CMD} -p ${ADDON_PATH} -f ${COMPOSE_FILE}
34
- DEV_COMPOSE=COMPOSE_PROFILES=dev ${DOCKER_COMPOSE}
35
- LIVE_COMPOSE=COMPOSE_PROFILES=dev ${DOCKER_COMPOSE}
36
- ACCEPTANCE=${CMD} -p ${ADDON_PATH}-acceptance -f ${ACCEPTANCE_COMPOSE}
37
- ACCEPTANCE_A11Y=${CMD} -p ${ADDON_PATH}-acceptance -f ${ACCEPTANCE_COMPOSE_A11Y}
38
-
39
- .PHONY: build-backend
40
- build-backend: ## Build
41
- @echo "$(GREEN)==> Build Backend Container $(RESET)"
42
- ${DEV_COMPOSE} build backend
43
-
44
- .PHONY: start-backend
45
- start-backend: ## Starts Docker backend
46
- @echo "$(GREEN)==> Start Docker-based Plone Backend $(RESET)"
47
- ${DEV_COMPOSE} up backend -d
48
-
49
- .PHONY: stop-backend
50
- stop-backend: ## Stop Docker backend
51
- @echo "$(GREEN)==> Stop Docker-based Plone Backend $(RESET)"
52
- ${DEV_COMPOSE} stop backend
53
-
54
- .PHONY: build-live
55
- build-live: ## Build Addon live
56
- @echo "$(GREEN)==> Build Addon development container $(RESET)"
57
- ${LIVE_COMPOSE} build addon-live
58
-
59
- .PHONY: build-addon
60
- build-addon: ## Build Addon dev
61
- @echo "$(GREEN)==> Build Addon development container $(RESET)"
62
- ${DEV_COMPOSE} build addon-dev
63
-
64
- .PHONY: start-dev
65
- start-dev: ## Starts Dev container
66
- @echo "$(GREEN)==> Start Addon Development container $(RESET)"
67
- ${DEV_COMPOSE} up addon-dev backend
68
-
69
- .PHONY: start-live
70
- start-live: ## Starts Dev container
71
- @echo "$(GREEN)==> Start Addon Development container $(RESET)"
72
- ${DEV_COMPOSE} up addon-live backend
73
-
74
- .PHONY: dev
75
- dev: ## Develop the addon
76
- @echo "$(GREEN)==> Start Development Environment $(RESET)"
77
- make build-backend
78
- make start-backend
79
- make build-addon
80
- make start-dev
81
-
82
- .PHONY: help
83
- help: ## Show this help.
84
- @echo -e "$$(grep -hE '^\S+:.*##' $(MAKEFILE_LIST) | sed -e 's/:.*##\s*/:/' -e 's/^\(.\+\):\(.*\)/\\x1b[36m\1\\x1b[m:\2/' | column -c2 -t -s :)"
85
-
86
- ## Setup the local environment
87
- .PHONY: install
88
- install: ## Install the local environment, Cypress, build acceptance containers
89
- yarn
90
- make install-acceptance
91
-
92
- # Dev Helpers
93
- .PHONY: i18n
94
- i18n: ## Sync i18n
95
- @echo "$(YELLOW)==> Do not forget to setup the local environment (make install) $(RESET)"
96
- yarn i18n
97
-
98
- .PHONY: format
99
- format: ## Format codebase
100
- ${DEV_COMPOSE} run --rm addon-dev lint:fix
101
- ${DEV_COMPOSE} run --rm addon-dev prettier:fix
102
- ${DEV_COMPOSE} run --rm addon-dev stylelint:fix
103
-
104
- .PHONY: lint
105
- lint: ## Lint Codebase
106
- ${DEV_COMPOSE} run --rm addon-dev lint
107
- ${DEV_COMPOSE} run --rm addon-dev prettier
108
- ${DEV_COMPOSE} run --rm addon-dev stylelint --allow-empty-input
109
-
110
- .PHONY: test
111
- test: ## Run unit tests
112
- ${DEV_COMPOSE} run --rm addon-dev test --watchAll
113
-
114
- .PHONY: test-ci
115
- test-ci: ## Run unit tests in CI
116
- ${DEV_COMPOSE} run -e CI=1 addon-dev test
117
-
118
- ## Acceptance
119
- .PHONY: install-acceptance
120
- install-acceptance: ## Install Cypress, build acceptance containers
121
- (cd acceptance && yarn)
122
- ${ACCEPTANCE} --profile dev --profile prod build
123
-
124
- .PHONY: start-test-acceptance-server
125
- start-test-acceptance-server: ## Start acceptance server (for use it in while developing)
126
- ${ACCEPTANCE} --profile dev up
127
-
128
- .PHONY: start-test-acceptance-server-prod
129
- start-test-acceptance-server-prod: ## Start acceptance server in prod (used by CI)
130
- ${ACCEPTANCE} --profile prod up -d
131
-
132
- .PHONY: test-acceptance
133
- test-acceptance: ## Start Cypress (for use it while developing)
134
- (cd acceptance && ./node_modules/.bin/cypress open --config specPattern='cypress/tests/main/**/*.{js,jsx,ts,tsx}')
135
-
136
- .PHONY: test-acceptance-headless
137
- test-acceptance-headless: ## Run cypress tests in CI
138
- (cd acceptance && ./node_modules/.bin/cypress run)
139
-
140
- .PHONY: stop-test-acceptance-server
141
- stop-test-acceptance-server: ## Stop acceptance server (for use it while finished developing)
142
- ${ACCEPTANCE} --profile dev down
143
-
144
- .PHONY: status-test-acceptance-server
145
- status-test-acceptance-server: ## Status of Acceptance Server (for use it while developing)
146
- ${ACCEPTANCE} ps
147
-
148
- .PHONY: start-test-acceptance-server-a11y
149
- start-test-acceptance-server-a11y: ## Start a11y acceptance server (for use it in while developing)
150
- ${ACCEPTANCE_A11Y} --profile dev up
151
-
152
- .PHONY: stop-test-acceptance-server-a11y
153
- stop-test-acceptance-server-a11y: ## Stop a11y acceptance server (for use it while finished developing)
154
- ${ACCEPTANCE_A11Y} --profile dev down
155
-
156
- .PHONY: test-acceptance-a11y
157
- test-acceptance-a11y: ## Start Cypress (for use it while developing)
158
- (cd acceptance && CYPRESS_a11y=1 ./node_modules/.bin/cypress open --config specPattern='cypress/tests/a11y/**/*.{js,jsx,ts,tsx}')
159
-
160
- .PHONY: debug-frontend
161
- debug-frontend: ## Run bash in the Frontend container (for debug infrastructure purposes)
162
- ${DEV_COMPOSE} run --entrypoint bash addon-dev
163
-
164
- .PHONY: pull-backend-image
165
- pull-backend-image: ## Pulls and updates the backend image (for use it while developing)
166
- docker pull ghcr.io/kitconcept/voltolighttheme:latest
167
-
168
- .PHONY: release
169
- release: ## Release a version of the add-on
170
- yarn release
171
-
172
- .PHONY: release-rc
173
- release-rc: ## Release a RC version of the add-on
174
- npx release-it --preRelease=rc
package/README.md DELETED
@@ -1,453 +0,0 @@
1
- # Volto Light Theme by kitconcept
2
-
3
- [![NPM](https://img.shields.io/npm/v/@kitconcept/volto-light-theme.svg)](https://www.npmjs.com/package/@kitconcept/volto-light-theme)
4
- [![Build Status](https://github.com/kitconcept/volto-light-theme/actions/workflows/code.yml/badge.svg)](https://github.com/kitconcept/volto-light-theme/actions)
5
- [![Build Status](https://github.com/kitconcept/volto-light-theme/actions/workflows/unit.yml/badge.svg)](https://github.com/kitconcept/volto-light-theme/actions)
6
- [![Build Status](https://github.com/kitconcept/volto-light-theme/actions/workflows/acceptance.yml/badge.svg)](https://github.com/kitconcept/volto-light-theme/actions)
7
-
8
- ![kitconcept GmbH](https://github.com/kitconcept/volto-blocks/raw/master/kitconcept.png)
9
-
10
- ## Vision
11
-
12
- The main vision of the Volto Light Theme is to serve as a foundation for kitconcept's future projects, following the release of Plone 6.
13
-
14
- It contains the feedback from the company's last years projects and the success stories in the UI/UX side.
15
-
16
- It aims to be future proof, so it has to be aligned with the upcoming Volto vision in terms of theming strategy decided by the Plone community.
17
-
18
- ![Volto-Light-Theme](https://github.com/kitconcept/volto-light-theme/raw/main/volto-light-theme.png)
19
-
20
- ## Requirements and specs
21
-
22
- ### It should not use any SemanticUI component or styling
23
-
24
- Volto will abandon SemanticUI as default design component system in the mid term, and we should be prepared for it.
25
-
26
- We will achieve that by not using any SemanticUI component, nor any related styling (`.ui.XXX`) in our upcoming themes.
27
-
28
- The Volto strategy is:
29
-
30
- - Provide a very basic and structural Vanilla components to build upon theming and CMSUI as well (`@plone/components`)
31
- - These components will be based in a headless component system [React Aria Components](https://react-spectrum.adobe.com/react-aria/components.html)
32
- - Volto projects can be themed using `@plone/components` as baseline or use a complete different design or component system of the developer/integrator choice. The presence of Volto's component registry system could help for adapting, if required.
33
-
34
- #### Volto components `customizations` use case
35
-
36
- If possible, we will switch to SemanticUI-less components when `@plone/components` is ready.
37
- Specially if the elements that we are customizing are clearly "theme" (eg. header/footer, etc).
38
- 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).
39
- When Volto will make the switch in the future, we should then adapt all the customizations to match the one in the Volto core.
40
- 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.
41
-
42
- ### It should use kitconcept's layout used in FZJ/DLR projects
43
-
44
- 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:
45
-
46
- - Narrow (text)
47
- - Default (blocks)
48
- - Layout (main screen elements like Header, Footer)
49
-
50
- The Layout sized elements snap to 1440px. The breakpoints are also different than default Volto.
51
-
52
- This new layout uses mixin's and CSS that can be found in `layout.less` in the theme folder.
53
-
54
- Since the new container queries spec is out, we will be introducing it to the current CSS in order to implement the complexities that the "inner container" (the one between the toolbar and the sidebar) width presents. Until now, we did complex calculations given into account if the size of the inner container depending if the toolbar, the sidebar, or both were presents. With container queries we can do that in a more sensible and easy way.
55
-
56
- ### Organization of the files
57
-
58
- We will start organising the files in the root of `theme` folder, to differentiate from a normal "SemanticUI" theme. Take a look at the current state. We will follow this convention:
59
-
60
- - One file per component/block
61
- - Use the Volto theme facility using the SCSS scape hatch provided so other add-ons can hook to it.
62
- - The styling is centralized in `main.scss`, the rest of the files are loaded from there.
63
-
64
- ## Why a headless component system?
65
-
66
- https://medium.com/@nirbenyair/headless-components-in-react-and-why-i-stopped-using-ui-libraries-a8208197c268
67
-
68
- ## Vertical spacing block model
69
-
70
- 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.
71
-
72
- The wrappers have the classnames `blocks-group-wrapper` and the name of the background color, eg. `grey`, defaulting to `transparent` if no `backgroundColor` property is set in the styling block wrapper in the block.
73
-
74
- **Disclaimer**: This might change in the near future, since we are developing a new integral Block Model for VLT and Volto.
75
-
76
- ### Vertical spacing rules
77
-
78
- These main rules spec applies to the theme:
79
-
80
- - On each change of color, a vertical padding (both `padding-bottom` and `padding-top`) of `80px` defined with the main variable `$color-block-change-vertical-spacing`.
81
- - The default bottom margin is defined with the main variable `$block-vertical-space` and set by default to `25px`.
82
- - [grid] Vertical spacing for grids should be `80px` for both top and bottom, even if the previous and next blocks are of the same color.
83
- - [grid+grid] When two grids happen side by side and are of the same color. It should be equal to the grid gap, so it's set to `@gutterWidth` and currently `1rem`. It has to be adjusted with a bit of negative margin to cancel the current inner padding in grid cells.
84
- - [grid+grid] Grids columns belonging to the same grid and same color in small mobile viewports. They should be closer to match the other adjacent ones, so they seem to belong to the same grid set.
85
- - [footer] The footer has a top vertical spacing of `80px`.
86
- - [teasers] The last teaser, except if the following is a button, does NOT have a line at the bottom.
87
- - [listing] The last listing, except if the following is a button, does NOT have a line at the bottom.
88
- - [listing] After two consecutive listings, the vertical spacing should be `200px`.
89
- - [text+button] If there's a text and a button, then the vertical spacing betweeen them is `60px`.
90
- - [image+separator-block] If after image comes a separator block, the vertical spacing between them is `40px`.
91
-
92
- ### Media queries vs container queries
93
-
94
- We use media queries when the styling it's generic enough to apply only to the View.
95
-
96
- We use container queries when do care explicitly about how the styling is being applied in edit mode as well and we want the content area to behave 1:1 with the view mode.
97
-
98
- Reason: The container queries allow us to abstract the width from the sidebar and toolbar in edit mode, showing the content area as it will be in that size, in view mode.
99
-
100
- **Remember**: The margins in responsive are being taken care with container queries in `layout.scss`. So everything related to that, goes like it works in there, with container queries. See implementations for details in case you need it.
101
-
102
- ## Specification
103
-
104
- `@kitconcept/volto-light-theme` works with the following Plone Blocks:
105
-
106
- - Grid-Block (https://www.npmjs.com/package/@kitconcept/volto-blocks-grid)
107
- - Teaser-Block (https://www.npmjs.com/package/@kitconcept/volto-blocks-grid)
108
- - Slider-Block (https://www.npmjs.com/package/@kitconcept/volto-slider-block)
109
- - Button-Block (https://www.npmjs.com/package/@kitconcept/volto-button-block)
110
- - Separator-Block (https://www.npmjs.com/package/@kitconcept/volto-separator-block)
111
- - Heading-Block (https://www.npmjs.com/package/@kitconcept/volto-heading-block)
112
- - Introduction-Block (https://www.npmjs.com/package/@kitconcept/volto-introduction-block)
113
- - Accordion-Block (https://www.npmjs.com/package/@eeacms/volto-accordion-block)
114
-
115
- and the following add-ons:
116
-
117
- - DSGVO-Banner (https://www.npmjs.com/package/@kitconcept/volto-dsgvo-banner)
118
-
119
- ## Installation
120
-
121
- It is recommended that your project or policy add-on `package.json` include the aforementioned add-ons.
122
-
123
- ```json
124
- "dependencies": {
125
- "@eeacms/volto-accordion-block": "^10.4.0",
126
- "@kitconcept/volto-button-block": "^2.3.1",
127
- "@kitconcept/volto-dsgvo-banner": "^1.3.0",
128
- "@kitconcept/volto-heading-block": "^2.4.0",
129
- "@kitconcept/volto-highlight-block": "^3.0.0",
130
- "@kitconcept/volto-introduction-block": "^1.0.0",
131
- "@kitconcept/volto-separator-block": "^4.0.0",
132
- "@kitconcept/volto-slider-block": "^6.0.0",
133
- "@kitconcept/volto-light-theme": "^2.0.0",
134
- }
135
- ```
136
-
137
- This theme won't install them for you, as they are declared as `peerDependencies`.
138
- This is because the theme won't have to force you to use any specific add-on version, and avoids package hoisting issues.
139
-
140
- In your project or policy add-on `package.json` you should declare all of them as Volto add-ons
141
-
142
- ```json
143
- "addons": [
144
- "@eeacms/volto-accordion-block",
145
- "@kitconcept/volto-button-block",
146
- "@kitconcept/volto-heading-block",
147
- "@kitconcept/volto-introduction-block",
148
- "@kitconcept/volto-highlight-block",
149
- "@kitconcept/volto-separator-block",
150
- "@kitconcept/volto-light-theme",
151
- "your_policy_addon_here"
152
- ],
153
- ```
154
-
155
- Make sure your policy add-on is the last one, as you would want that its configuration has priority over all the others. Make sure also that `@kitconcept/volto-light-theme` is the one before your policy add-on.
156
-
157
- Then, declare the theme in your project `package.json`:
158
-
159
- ```json
160
- "theme": "@kitconcept/volto-light-theme",
161
- ```
162
-
163
- Alternatively, you can also declare it in your project's `volto.config.js`:
164
-
165
- ```js
166
- const addons = [];
167
- const theme = '@kitconcept/volto-light-theme';
168
-
169
- module.exports = {
170
- addons,
171
- theme,
172
- };
173
- ```
174
-
175
- You can specify your project add-ons in `volto.config.js`, but sometimes is better to have them all in one place (in your policy add-on) for portability.
176
-
177
- ## Feature Flags
178
-
179
- ### Enable Fat Menu
180
-
181
- Since 2.0.0, the light theme has a fat menu (below the main site sections) triggered clickin on one of them.
182
- It's behind a feature flag, as opt-out:
183
-
184
- ```js
185
- config.settings.enableFatMenu = true;
186
- ```
187
-
188
- ### Show Site Label
189
-
190
- If you want to show a label on top of site you can pass label name to `siteLabel` property.
191
-
192
- ```js
193
- config.settings.siteLabel = 'Plone Intranet';
194
- ```
195
-
196
- If you wanted a translated label then you have to define a translation object in `defineMessages` function provided by react-intl.
197
-
198
- Here is the code snippets you have to add in your addon index.js file.
199
- If you don't have addon, you can also add in your config.js file in root of your frontend folder.
200
-
201
- ```js
202
- import { defineMessages } from 'react-intl';
203
-
204
- defineMessages({
205
- siteLabel: {
206
- id: 'siteLabel',
207
- defaultMessage: ' ',
208
- },
209
- });
210
-
211
- ```
212
- Then add the translation you want in your `locale` file.
213
-
214
- ### Show intranetHeader
215
-
216
- We have totally different header for intranet sites. If you want that, you can enable it by passing `intranetHeader` property.
217
-
218
- ```js
219
- config.settings.intranetHeader = true;
220
- ```
221
- ## Releases
222
-
223
- The releases follow a semantic versioning model.
224
-
225
- ### Definition of breaking change
226
-
227
- In general, the same rules as Volto releases applies.
228
- However, in VLT we add an extra exception: The vertical spacing is carefully curated and considered an important feature of the theme and because of that, changes and improvements in the vertical spacing are **NOT** considered breaking changes.
229
- They will be noted properly in the changelog.
230
-
231
- ## Upgrade Guide
232
-
233
- See a detailed upgrade guide in: https://github.com/kitconcept/volto-light-theme/blob/main/UPGRADE-GUIDE.md
234
-
235
- ## Development Setup
236
-
237
- This theme works under Volto 17 alpha 16 onwards.
238
- Compatibility with Volto 16 might be achieved, but it has to be at customization level in the
239
- specific project add-on.
240
- 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.
241
- See more information about the other dependencies in `peerDependencies` in `package.json`.
242
- It is possible to develop this add-on using docker containers and the provided convenience Makefile commands.
243
- Run `make help` to list the available commands.
244
-
245
- ````text
246
- build-backend Build
247
- start-backend Starts Docker backend
248
- stop-backend Stop Docker backend
249
- build-live Build Addon live
250
- build-addon Build Addon dev
251
- start-dev Starts Dev environent container
252
- start-live Starts Live environment container
253
- dev Develop the addon
254
- help Show this help.
255
- i18n Sync i18n
256
- format Format codebase
257
- lint Lint Codebase
258
- test Run unit tests
259
- test-ci Run unit tests in CI
260
- install-acceptance Install Cypress, build acceptance containers
261
- start-test-acceptance-server Start acceptance server (for use it in while developing)
262
- start-test-acceptance-server-prod Start acceptance server in prod (used by CI)
263
- test-acceptance Start Cypress (for use it while developing)
264
- test-acceptance-headless Run cypress tests in CI
265
- stop-test-acceptance-server Stop acceptance server (for use it while finished developing)
266
- status-test-acceptance-server Status of Acceptance Server (for use it while developing)
267
- debug-frontend Run bash in the Frontend container (for debug infrastructure purposes)
268
- pull-backend-image Pulls and updates the backend image (for use it while developing)
269
- ````
270
-
271
- ### Prerequisites
272
-
273
- - Docker
274
- - Node 18 (e.g. via nvm)
275
-
276
- ### Development Environment Setup
277
-
278
- Run once
279
-
280
- ```shell
281
- make dev
282
- ```
283
-
284
- which will build and launch the backend and frontend containers.
285
- There's no need to build them again after doing it the first time unless something has changed from the container setup.
286
-
287
- To make the local IDE play well with this setup, it is required to run `yarn` once to install the required packages (ESlint, Prettier, Stylelint).
288
-
289
- Run
290
-
291
- ```shell
292
- yarn
293
- ```
294
-
295
- ### Build the containers manually
296
-
297
- Run
298
-
299
- ```shell
300
- make build-backend
301
- make build-addon
302
- ```
303
-
304
- ## Run the containers
305
-
306
- Run
307
-
308
- ```shell
309
- make start-dev
310
- ```
311
-
312
- This will start both the frontend and backend for the dev environment containers.
313
-
314
-
315
- ### Stop Backend (Docker)
316
-
317
- After developing, the backend stops automatically. However, it can be stopped by running:
318
-
319
- Run
320
-
321
- ```shell
322
- make stop-backend
323
- ```
324
-
325
- ### Linting
326
-
327
- Run
328
-
329
- ```shell
330
- make lint
331
- ```
332
-
333
- ### Formatting
334
-
335
- Run
336
-
337
- ```shell
338
- make format
339
- ```
340
-
341
- ### i18n
342
-
343
- Run
344
-
345
- ```shell
346
- make i18n
347
- ```
348
-
349
- ### Unit tests
350
-
351
- Run
352
-
353
- ```shell
354
- make test
355
- ```
356
-
357
- ### Acceptance tests
358
-
359
- Run once
360
-
361
- ```shell
362
- make install-acceptance
363
- ```
364
-
365
- For starting the servers
366
-
367
- Run
368
-
369
- ```shell
370
- make start-test-acceptance-server
371
- ```
372
-
373
- The frontend is run in dev mode, so development while writing tests is possible.
374
-
375
- Run
376
-
377
- ```shell
378
- make test-acceptance
379
- ```
380
-
381
- To run Cypress tests afterward.
382
-
383
- When finished, don't forget to shutdown the backend server.
384
-
385
- ```shell
386
- make stop-test-acceptance-server
387
- ```
388
-
389
- ### Accessibility Acceptance tests
390
-
391
- Run once
392
-
393
- ```shell
394
- make install-acceptance
395
- ```
396
-
397
- For starting the servers
398
-
399
- Run
400
-
401
- ```shell
402
- make start-test-acceptance-server-a11y
403
- ```
404
-
405
- The frontend is run in dev mode, so development while writing tests is possible.
406
-
407
- Run
408
-
409
- ```shell
410
- make test-acceptance-a11y
411
- ```
412
-
413
- To run Cypress tests afterwards.
414
-
415
- When finished, don't forget to shutdown the backend server.
416
-
417
- ```shell
418
- make stop-test-acceptance-server-a11y
419
- ```
420
-
421
- ### Live mode
422
-
423
- There is an alternate Docker Compose configuration for running volto in live mode.
424
- This is not usually needed during development, but can be useful for debugging.
425
-
426
- To build the frontend for the live environment, run
427
-
428
- ```shell
429
- make build-live
430
- ```
431
-
432
- To start both the frontend and backend for the live environment, run
433
-
434
- ```shell
435
- make start-live
436
- ```
437
-
438
-
439
- ### Release
440
-
441
- Run
442
-
443
- ```shell
444
- make release
445
- ```
446
-
447
- For releasing a RC version
448
-
449
- Run
450
-
451
- ```shell
452
- make release-rc
453
- ```
package/UPGRADE-GUIDE.md DELETED
@@ -1,38 +0,0 @@
1
- # Upgrade Guide
2
-
3
- ## volto-light-theme 3.0.0
4
-
5
- ### Blocks background colors go full width
6
-
7
- The background colors previously used to snap to 1440px.
8
- From 3.0.0-alpha.0 this changed to be unconstrained by default, and expand to the end of the horizontal viewport.
9
-
10
- ### Upgraded support for volto-slider-block 6.0.0
11
-
12
- VLT upgraded the dependency on `@kitconcept/volto-slider-block` to use `6.0.0`.
13
-
14
- This is a drop-in replacement, so no action is required for the existing slider blocks you may have already in your sites.
15
- However, the CSS classes of the structural slider block elements changed in this version.
16
- The inner (visible objects) CSS classes remain unchanged.
17
- If you have customized them in your project, you may have to update them, although the structural class names are rarely customized aside from vertical spacing properties.
18
- They are mapped 1:1 with the previous ones, following this table correspondence:
19
-
20
- | Old className | New className |
21
- | --------------- | ---------------- |
22
- | slick-slider | slider-wrapper |
23
- | slick-list | slider-viewport |
24
- | slick-track | slider-container |
25
- | slick-slide | slider-slide |
26
- | slick-arrow | slider-button |
27
- | slick-prev | slider-button-prev |
28
- | slick-next | slider-slide-next |
29
- | slick-next | slider-slide-next |
30
- | slick-dots | slider-dots |
31
- | slick-dot | slider-dot |
32
-
33
- For more information, please check the https://github.com/kitconcept/volto-slider-block/blob/main/README.md [#288](https://github.com/kitconcept/volto-light-theme/pull/288)
34
-
35
- ### Language switcher shows the two letters abbreviation of the languages
36
-
37
- Volto default is to show the full name of the language in the language switcher.
38
- VLT now shows only the two letters abbreviation of the language.
File without changes