@kitconcept/volto-light-theme 1.0.0-rc.3 → 1.0.0-rc.5

package/.github/workflows/acceptance.yml

@@ -0,0 +1,52 @@
+name: Acceptance tests
+on: [push]
+
+env:
+  ADDON_NAME: "@kitconcept/volto-light-theme"
+  ADDON_PATH: "volto-light-theme"
+  VOLTO_VERSION: "17.0.0-alpha.17"
+
+jobs:
+
+  acceptance:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Install Cypress
+        run: |
+          cd acceptance
+          yarn
+
+      - name: "Cypress: Acceptance tests"
+        uses: cypress-io/github-action@v5
+        env:
+          BABEL_ENV: production
+          CYPRESS_RETRIES: 2
+        with:
+          parallel: false
+          browser: chrome
+          working-directory: acceptance
+          spec: cypress/tests/*.js
+          install: false
+          start: |
+            docker compose -f ci.yml --profile prod up
+          wait-on: 'npx wait-on --httpTimeout 20000 http-get://localhost:55001/plone http://localhost:3000'
+
+      # Upload Cypress screenshots
+      - uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: cypress-screenshots-acceptance
+          path: acceptance/cypress/screenshots
+
+      # Upload Cypress videos
+      - uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: cypress-videos-acceptance
+          path: acceptance/cypress/videos

package/.github/workflows/deploy.yml

@@ -1,11 +1,17 @@
 name: Release and deploy
 on:
-  - push
+  workflow_run:
+    workflows: [Acceptance Tests]
+    types:
+      - completed
+    branches:
+      - main
+  workflow_dispatch:
 
 env:
   ENVIRONMENT: "light-theme.kitconcept.io"
   IMAGE_NAME: "ghcr.io/kitconcept/voltolighttheme-frontend"
-  VOLTO_VERSION: "17.0.0-alpha.16"
+  VOLTO_VERSION: "17.0.0-alpha.17"
 
 jobs:
   meta:

package/CHANGELOG.md

@@ -8,6 +8,29 @@
 
 <!-- towncrier release notes start -->
 
+## 1.0.0-rc.5 (2023-07-11)
+
+### Breaking
+
+- Move the container query polyfill to an add-on profile, disabled by default @sneridagh [#137](https://github.com/kitconcept/volto-light-theme/pull/137)
+
+### Feature
+
+- Upgrade to Volto 17a17 as baseline @sneridagh [#136](https://github.com/kitconcept/volto-light-theme/pull/136)
+- Add acceptance tests layer, update docker files and Makefile @sneridagh [#137](https://github.com/kitconcept/volto-light-theme/pull/137)
+
+### Bugfix
+
+- Check if the separator is present before enhancing it @sneridagh [#138](https://github.com/kitconcept/volto-light-theme/pull/138)
+
+
+## 1.0.0-rc.4 (2023-07-11)
+
+### Bugfix
+
+- Fix Teaser block CSS. @danalvrz [#134](https://github.com/kitconcept/volto-light-theme/pull/134)
+
+
 ## 1.0.0-rc.3 (2023-07-10)
 
 ### Breaking

package/Makefile

@@ -22,7 +22,7 @@ RESET=`tput sgr0`
 YELLOW=`tput setaf 3`
 
 PLONE_VERSION=6
-VOLTO_VERSION=17.0.0-alpha.16
+VOLTO_VERSION=17.0.0-alpha.17
 
 ADDON_NAME='@kitconcept/volto-light-theme'
 ADDON_PATH='volto-light-theme'
@@ -103,20 +103,20 @@ test-ci: ## Run unit tests in CI
 
 ## Acceptance
 .PHONY: install-acceptance
-install-acceptance: ## Install Cypress, build containers
+install-acceptance: ## Install Cypress, build acceptance containers
 	(cd acceptance && yarn)
 	${ACCEPTANCE} --profile dev --profile prod build
 
 .PHONY: start-test-acceptance-server
-start-test-acceptance-server: ## Start acceptance server
-	${ACCEPTANCE} --profile dev up -d
+start-test-acceptance-server: ## Start acceptance server (for use it in while developing)
+	${ACCEPTANCE} --profile dev up
 
 .PHONY: start-test-acceptance-server-prod
-start-test-acceptance-server-prod: ## Start acceptance server
+start-test-acceptance-server-prod: ## Start acceptance server in prod (used by CI)
 	${ACCEPTANCE} --profile prod up -d
 
 .PHONY: test-acceptance
-test-acceptance: ## Start Cypress
+test-acceptance: ## Start Cypress (for use it while developing)
 	(cd acceptance && ./node_modules/.bin/cypress open)
 
 .PHONY: test-acceptance-headless
@@ -124,13 +124,18 @@ test-acceptance-headless: ## Run cypress tests in CI
 	(cd acceptance && ./node_modules/.bin/cypress run)
 
 .PHONY: stop-test-acceptance-server
-stop-test-acceptance-server: ## Stop acceptance server
-	${ACCEPTANCE} down
+stop-test-acceptance-server: ## Stop acceptance server (for use it while finished developing)
+	${ACCEPTANCE} --profile dev down
 
 .PHONY: status-test-acceptance-server
-status-test-acceptance-server: ## Status of Acceptance Server
+status-test-acceptance-server: ## Status of Acceptance Server (for use it while developing)
 	${ACCEPTANCE} ps
 
 .PHONY: debug-frontend
-debug-frontend:  ## Run bash in the Frontend container
+debug-frontend:  ## Run bash in the Frontend container (for debug infrastructure purposes)
 	${DEV_COMPOSE} run --entrypoint bash addon-dev
+
+.PHONY: install-local
+install-local:  ## Installs essentials for developing locally (ESlint, prettier...) (for use it while developing)
+	yarn remove -A @plone/volto && yarn add @plone/volto && git co -- package.json yarn.lock
+	mv .eslintrc.local.js .eslintrc.js

package/acceptance/cypress/support/e2e.js

@@ -4,6 +4,10 @@ import './commands';
 import { setup, teardown } from './reset-fixture';
 
 beforeEach(function () {
+  cy.setCookie('confirm_cookies', '1');
+  cy.setCookie('confirm_tracking', '1');
+  cy.setCookie('confirm_facebook', '1');
+  cy.setCookie('confirm_youtube', '1');
   cy.log('Setting up API fixture');
   setup();
 });

package/acceptance/cypress/tests/basic.cy.js

@@ -6,6 +6,9 @@ import {
 context('Basic Acceptance Tests', () => {
   describe('Text Block Tests', () => {
     beforeEach(() => {
+      cy.intercept('GET', `/**/*?expand*`).as('content');
+      cy.intercept('GET', '/**/Document').as('schema');
+
       // given a logged in editor and a page in edit mode
       cy.autologin();
       cy.createContent({
@@ -14,6 +17,7 @@ context('Basic Acceptance Tests', () => {
         contentTitle: 'Document',
       });
       cy.visit('/');
+      cy.wait('@content');
     });
 
     it('As editor I can add a page with a text block', function () {
@@ -32,39 +36,35 @@ context('Basic Acceptance Tests', () => {
 
       getSelectedSlateEditor().contains('This is the text');
       cy.get('#toolbar-save').click();
+      cy.wait('@content');
       cy.url().should('eq', Cypress.config().baseUrl + '/my-page');
     });
 
     it('As editor I can add a link to a text block', function () {
-      cy.intercept('GET', '/**/document').as('content');
-      cy.visit('/document');
-      cy.wait('@content');
-
       cy.navigate('/document/edit');
+      cy.wait('@schema');
 
-      // when I create a link
-      getSlateEditorAndType(
-        '.slate-editor [contenteditable=true]',
-        'Colorless green ideas sleep furiously.',
-      ).setSelection('furiously');
+      cy.get('.block.inner.title .documentFirstHeading');
 
-      cy.clickSlateButton('Add link');
+      cy.log('when I create a link');
 
-      cy.get('.link-form-container input').type('https://google.com{enter}');
-      cy.get('#toolbar-save').click();
-      cy.url().should('eq', Cypress.config().baseUrl + '/document');
-      cy.waitForResourceToLoad('@navigation');
-      cy.waitForResourceToLoad('@breadcrumbs');
-      cy.waitForResourceToLoad('@actions');
-      cy.waitForResourceToLoad('@types');
-      cy.waitForResourceToLoad('document');
-
-      // then the page view should contain a link
-      cy.get('.ui.container p').contains(
+      cy.getSlateEditorAndType(
         'Colorless green ideas sleep furiously.',
+      ).setSlateSelection('furiously');
+      cy.clickSlateButton('Add link');
+      cy.get('.slate-toolbar .link-form-container input').type(
+        'https://google.com{enter}',
       );
-      cy.get('.ui.container p a')
-        .should('have.attr', 'href')
+
+      cy.get('#toolbar-save', { timeout: 10000 }).click();
+      cy.wait('@content');
+
+      cy.log('then the page view should contain a link');
+
+      cy.get('.container p').contains('Colorless green ideas sleep furiously.');
+      cy.get('.container p a')
+        .should('have.text', 'furiously')
+        .and('have.attr', 'href')
         .and('include', 'https://google.com');
     });
   });

package/acceptance/docker-compose.yml

@@ -15,9 +15,11 @@ services:
     environment:
       RAZZLE_INTERNAL_API_PATH: http://backend-acceptance:55001/plone
       RAZZLE_API_PATH: http://localhost:55001/plone
+      HOST: 0.0.0.0
     ports:
       - 3000:3000
       - 3001:3001
+    tty: true
     depends_on:
       - backend-acceptance
     profiles:
@@ -34,6 +36,7 @@ services:
     environment:
       RAZZLE_INTERNAL_API_PATH: http://backend-acceptance:55001/plone
       RAZZLE_API_PATH: http://localhost:55001/plone
+      HOST: 0.0.0.0
     ports:
       - 3000:3000
     depends_on:
@@ -42,14 +45,7 @@ services:
       - prod
 
   backend-acceptance:
-    image: plone/plone-backend:${PLONE_VERSION:-6}
-    command: ./bin/robot-server plone.app.robotframework.testing.VOLTO_ROBOT_TESTING
-    environment:
-      ZSERVER_HOST: 0.0.0.0
-      ZSERVER_PORT: 55001
-      ADDONS: 'plone.app.robotframework==2.0.0'
-      APPLY_PROFILES: plone.app.contenttypes:plone-content,plone.restapi:default,plone.volto:default-homepage
-      CONFIGURE_PACKAGES: plone.app.contenttypes,plone.restapi,plone.volto,plone.volto.cors
+    image: plone/server-acceptance:${PLONE_VERSION:-6}
     ports:
       - 55001:55001
     profiles:

package/dockerfiles/Dockerfile.acceptance

@@ -5,6 +5,12 @@ FROM plone/frontend-dev:${VOLTO_VERSION}
 ARG ADDON_NAME
 ARG ADDON_PATH
 
+# Copy helper.py as /setupAddon
+COPY dockerfiles/helper.py /setupAddon
+
+# Copy volto.config.js
+COPY --chown=node:node volto.config.js* /app/
+
 COPY --chown=node:node package.json /app/src/addons/${ADDON_PATH}/
 
 RUN <<EOT

package/dockerfiles/docker-compose.yml

@@ -9,12 +9,13 @@ 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:
       RAZZLE_INTERNAL_API_PATH: http://backend:8080/Plone
       RAZZLE_API_PATH: http://localhost:8080/Plone
+      HOST: 0.0.0.0
     ports:
       - 3000:3000
       - 3001:3001
@@ -29,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:8080/Plone
       RAZZLE_API_PATH: http://localhost:8080/Plone

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "1.0.0-rc.3",
+  "version": "1.0.0-rc.5",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.js",
   "repository": {
@@ -58,8 +58,8 @@
     "@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-separator-block": "^3.2.2",
     "@kitconcept/volto-slider-block": "^4.2.0",
-    "@plone/volto": "^17.0.0-alpha.16"
+    "@plone/volto": "^17.0.0-alpha.17"
   }
 }

package/src/components/Blocks/Listing/GridTemplate.jsx

@@ -40,10 +40,10 @@ const GridTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
                     componentName="PreviewImage"
                     item={item}
                     alt=""
-                    className="grid-item-image"
+                    className="item-image"
                   />
                 )}
-                <div className="grid-item">
+                <div className="item">
                   <div className="content">
                     {item?.head_title && (
                       <div className="headline">{item.head_title}</div>

package/src/index.js

@@ -35,6 +35,7 @@ defineMessages({
 
 const applyConfig = (config) => {
   config.settings.enableAutoBlockGroupingByBackgroundColor = true;
+  config.settings.navDepth = 3;
 
   // No required blocks (eg. Title)
   config.blocks.requiredBlocks = [];
@@ -49,7 +50,14 @@ const applyConfig = (config) => {
     ...config.settings.apiExpanders,
     {
       match: '',
-      GET_CONTENT: ['breadcrumbs', 'navigation', 'actions', 'types'],
+      GET_CONTENT: ['breadcrumbs', 'actions', 'types'],
+    },
+    {
+      match: '',
+      GET_CONTENT: ['navigation'],
+      querystring: {
+        'expand.navigation.depth': config.settings.navDepth,
+      },
     },
   ];
 
@@ -118,14 +126,6 @@ const applyConfig = (config) => {
 
   config.settings.slidingSearchAnimation = true;
 
-  config.settings.appExtras = [
-    ...config.settings.appExtras,
-    {
-      match: '',
-      component: ContainerQueriesPolyfill,
-    },
-  ];
-
   config.blocks.blocksConfig.accordion = {
     ...config.blocks.blocksConfig.accordion,
     mostUsed: true,
@@ -225,14 +225,17 @@ const applyConfig = (config) => {
     colors: BG_COLORS,
   };
 
-  config.blocks.blocksConfig.separator = {
-    ...config.blocks.blocksConfig.separator,
-    schemaEnhancer: composeSchema(
-      config.blocks.blocksConfig.separator.schemaEnhancer,
-      defaultStylingSchema,
-    ),
-    colors: BG_COLORS,
-  };
+  // Check if the separator is present before enhancing it
+  if (config.blocks.blocksConfig.separator.id) {
+    config.blocks.blocksConfig.separator = {
+      ...config.blocks.blocksConfig.separator,
+      schemaEnhancer: composeSchema(
+        config.blocks.blocksConfig.separator.schemaEnhancer,
+        defaultStylingSchema,
+      ),
+      colors: BG_COLORS,
+    };
+  }
 
   config.blocks.blocksConfig.listing = {
     ...config.blocks.blocksConfig.listing,
@@ -252,4 +255,16 @@ const applyConfig = (config) => {
   return config;
 };
 
+export const withContainerQueryPolyfill = (config) => {
+  config.settings.appExtras = [
+    ...config.settings.appExtras,
+    {
+      match: '',
+      component: ContainerQueriesPolyfill,
+    },
+  ];
+
+  return config;
+};
+
 export default applyConfig;

package/src/theme/_content.scss

@@ -30,3 +30,9 @@
     }
   }
 }
+
+.contenttype-file {
+  .content-area a {
+    text-decoration: underline;
+  }
+}

package/src/theme/_layout.scss

@@ -164,7 +164,7 @@ footer {
   & > .block.heading .heading-wrapper,
   & > .block.separator.has--align--full .line,
   & > .block.introduction .block-container,
-  & > .block.teaser .grid-teaser-item.default,
+  & > .block.teaser .teaser-item.default,
   & > .table-of-contents,
   & > .slate blockquote {
     @include default-container-width();
@@ -233,7 +233,7 @@ footer {
   .block-editor-separator.has--align--full .block.separator,
   .block-editor-separator .block.separator.has--align--full,
   .block.teaser.has--align--center,
-  .block-editor-teaser .grid-teaser-item.default,
+  .block-editor-teaser .teaser-item.default,
   .block-editor-toc {
     @include default-container-width();
     @include adjustMarginsToContainer($default-container-width);
@@ -301,10 +301,4 @@ body.has-toolbar.has-sidebar .block .ui.basic.button.delete-button {
   }
 }
 
-.contenttype-file {
-  a {
-    text-decoration: underline;
-  }
-}
-
 @import 'bgcolor-blocks-layout';

package/src/theme/blocks/_grid.scss

@@ -16,10 +16,10 @@
   .block.teaser {
     margin-bottom: 0;
     background-color: $lightgrey;
-    .grid-teaser-item {
+    .teaser-item {
       height: 100%;
 
-      .grid-image-wrapper {
+      .image-wrapper {
         margin: 0 0 40px 0 !important;
 
         img {
@@ -54,7 +54,7 @@
   .block-editor-teaser {
     padding: 0;
     margin: 0.5rem !important;
-    .grid-teaser-item {
+    .teaser-item {
       border: none !important;
     }
   }
@@ -128,10 +128,18 @@
     margin: 0.5rem !important;
   }
 
-  .listing {
+  .block.listing {
     h2 {
       margin-bottom: 40px !important;
     }
+    &.previous--is--same--block-type.previous--has--same--backgroundColor:not(.has--headline) {
+      margin-top: unset;
+    }
+    .listing-item,
+    .listing-item:last-child {
+      padding-bottom: 40px !important;
+      border-bottom: 1px solid $black !important;
+    }
   }
 
   .block-editor-empty {
@@ -144,7 +152,7 @@
 .block.gridBlock,
 .block-editor-gridBlock {
   .one {
-    .grid-teaser-item .content h2 {
+    .teaser-item .content h2 {
       margin-bottom: 40px !important;
       @include text-heading-h2();
     }
@@ -159,7 +167,7 @@
   .two,
   .three {
     .teaser {
-      .grid-teaser-item .content {
+      .teaser-item .content {
         h2 {
           margin-bottom: 20px !important;
           @include text-heading-h3();
@@ -187,8 +195,8 @@
 
   .four {
     .teaser {
-      .grid-teaser-item {
-        .grid-image-wrapper {
+      .teaser-item {
+        .image-wrapper {
           margin-bottom: 20px !important;
         }
         .content {
@@ -239,7 +247,7 @@
 #page-add .block-editor-gridBlock.has--backgroundColor--grey,
 #page-edit .block-editor-gridBlock.has--backgroundColor--grey {
   background-color: $lightgrey;
-  .grid-teaser-item {
+  .teaser-item {
     background: white;
   }
   .slate {

package/src/theme/blocks/_listing.scss

@@ -1,5 +1,6 @@
 // Listing Block
-.block.listing {
+.block.listing,
+.column > .block.listing {
   &.next--has--same--backgroundColor.next--is--same--block-type,
   &.next--is--__button {
     .listing-item:last-child {
@@ -13,7 +14,7 @@
     border-bottom: 1px solid $black;
     margin-bottom: 40px;
 
-    &:last-child:not(> .column) {
+    &:last-child {
       padding-bottom: 0 !important;
       border-bottom: none !important;
       margin-bottom: 0;
@@ -62,7 +63,7 @@
         aspect-ratio: $aspect-ratio;
       }
       h3 {
-        margin-bottom: 40px;
+        margin-bottom: 40px !important;
         color: $black;
         @include text-heading-h2();
       }
@@ -138,13 +139,13 @@
         }
       }
 
-      img.grid-item-image {
+      img.item-image {
         width: 100%;
         margin: 0;
         aspect-ratio: $aspect-ratio;
       }
 
-      .grid-item {
+      .item {
         margin-top: 40px;
       }
 

package/src/theme/blocks/_teaser.scss

@@ -8,13 +8,13 @@
   // We want the image to extend in all its container width
   height: 100%;
 
-  .grid-teaser-item.default {
+  .teaser-item.default {
     align-items: start;
     padding-bottom: 40px; // same as vertical spacing in margin-bottom
     border-bottom: 1px solid $black;
   }
 
-  .grid-image-wrapper {
+  .image-wrapper {
     width: 100%;
     img {
       object-position: center;
@@ -23,10 +23,10 @@
 
   &.has--align--left,
   &.has--align--right {
-    .grid-teaser-item.default {
+    .teaser-item.default {
       display: flex;
 
-      .grid-image-wrapper {
+      .image-wrapper {
         align-self: flex-start;
       }
 
@@ -37,10 +37,10 @@
   }
 
   &.has--align--left {
-    .grid-teaser-item.default {
+    .teaser-item.default {
       flex-direction: row;
 
-      .grid-image-wrapper {
+      .image-wrapper {
         margin-right: 20px;
 
         @media only screen and (max-width: $largest-mobile-screen) {
@@ -52,10 +52,10 @@
   }
 
   &.has--align--right {
-    .grid-teaser-item.default {
+    .teaser-item.default {
       flex-direction: row-reverse;
 
-      .grid-image-wrapper {
+      .image-wrapper {
         margin-left: 20px;
 
         @media only screen and (max-width: $largest-mobile-screen) {
@@ -67,13 +67,13 @@
   }
 
   &.has--align--center {
-    .grid-teaser-item.default {
+    .teaser-item.default {
       display: block;
       a {
         display: block;
       }
 
-      .grid-image-wrapper {
+      .image-wrapper {
         margin-bottom: 26px;
       }
     }
@@ -102,12 +102,12 @@
 
   &.is--last--of--block-type,
   &.next--has--different--backgroundColor {
-    .grid-teaser-item.default {
+    .teaser-item.default {
       padding-bottom: 0;
       border-bottom: none;
     }
     &.next--is--__button {
-      .grid-teaser-item.default {
+      .teaser-item.default {
         padding-bottom: 40px;
         border-bottom: 1px solid $black;
       }