@kitconcept/volto-light-theme 1.0.0-rc.6 → 1.0.0-rc.8

package/.eslintrc

@@ -0,0 +1,48 @@
+{
+  "extends": ["react-app", "prettier", "plugin:jsx-a11y/recommended"],
+  "plugins": ["prettier", "react-hooks", "jsx-a11y"],
+  "env": {
+    "es6": true,
+    "browser": true,
+    "node": true,
+    "mocha": true,
+    "jasmine": true
+  },
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "legacyDecorators": true
+    }
+  },
+  "rules": {
+    "import/no-unresolved": 0,
+    "no-alert": 1,
+    "no-console": 1,
+    "no-debugger": 1,
+    "prettier/prettier": [
+      "error",
+      { "trailingComma": "all", "singleQuote": true }
+    ],
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "react/react-in-jsx-scope": "off"
+  },
+  "globals": {
+    "root": true,
+    "__DEVELOPMENT__": true,
+    "__CLIENT__": true,
+    "__SERVER__": true,
+    "__DISABLE_SSR__": true,
+    "__DEVTOOLS__": true,
+    "__DEBUG__": true,
+    "__SSR__": true,
+    "__SENTRY__": true,
+    "cy": true,
+    "Cypress": true,
+    "jest": true,
+    "socket": true,
+    "webpackIsomorphicTools": true
+  }
+}

package/CHANGELOG.md

@@ -8,6 +8,29 @@
 
 <!-- towncrier release notes start -->
 
+## 1.0.0-rc.8 (2023-07-14)
+
+### Bugfix
+
+- Fix Image content type @iRohitSingh [#18](https://github.com/kitconcept/volto-light-theme/pull/18)
+- Fix a11y issues in EventView @steffenri [#147](https://github.com/kitconcept/volto-light-theme/pull/147)
+- Remove typo in fileview @steffenri [#148](https://github.com/kitconcept/volto-light-theme/pull/148)
+
+### Documentation
+
+- Documentation on local docker development - local ESlint working @sneridagh [#144](https://github.com/kitconcept/volto-light-theme/pull/144)
+
+
+## 1.0.0-rc.7 (2023-07-13)
+
+### Bugfix
+
+- Fix File content type @iRohitSingh [#17](https://github.com/kitconcept/volto-light-theme/pull/17)
+- Add idiomatic order CSS package @sneridagh
+  Fix margin in edit mode for all blocks @sneridagh [#142](https://github.com/kitconcept/volto-light-theme/pull/142)
+- Fix CSS for Accordion block. @danalvrz [#143](https://github.com/kitconcept/volto-light-theme/pull/143)
+
+
 ## 1.0.0-rc.6 (2023-07-12)
 
 ### Bugfix

package/Makefile

@@ -135,7 +135,6 @@ status-test-acceptance-server: ## Status of Acceptance Server (for use it while
 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
+.PHONY: pull-backend-image
+pull-backend-image:  ## Pulls and updates the backend image (for use it while developing)
+	docker pull ghcr.io/kitconcept/voltolighttheme:latest

package/README.md

@@ -98,11 +98,68 @@ These main rules spec applies to the theme:
 - Separator-Block (https://www.npmjs.com/package/@kitconcept/volto-separator-block)
 - Heading-Block (https://www.npmjs.com/package/@kitconcept/volto-heading-block)
 - Introduction-Block (https://www.npmjs.com/package/@kitconcept/volto-introduction-block)
+- Accordion-Block (https://www.npmjs.com/package/@eeacms/volto-accordion-block)
 
 and the following add-ons:
 
 - DSGVO-Banner (https://www.npmjs.com/package/@kitconcept/volto-dsgvo-banner)
 
+## Installation
+
+It is recommended that your project or policy add-on `package.json` include the aforementioned add-ons.
+
+```json
+  "dependencies": {
+    "@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-introduction-block": "1.0.0",
+    "@kitconcept/volto-light-theme": "1.0.0",
+    "@kitconcept/volto-separator-block": "3.2.0",
+  }
+```
+
+This theme won't install them for you, as they are declared as `peerDependencies`.
+This is because the theme won't have to force you to use any specific add-on version, and avoids package hoisting issues.
+
+In your project or policy add-on `package.json` you should declare all of them as Volto add-ons
+
+```json
+  "addons": [
+    "@eeacms/volto-accordion-block",
+    "@kitconcept/volto-button-block",
+    "@kitconcept/volto-heading-block",
+    "@kitconcept/volto-introduction-block",
+    "@kitconcept/volto-highlight-block",
+    "@kitconcept/volto-separator-block",
+    "@kitconcept/volto-light-theme",
+    "your_policy_addon_here"
+  ],
+```
+
+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.
+
+Then, declare the theme in your project `package.json`:
+
+```json
+  "theme": "@kitconcept/volto-light-theme",
+```
+
+Alternativelly, you can also declare it in your project's `volto.config.js`:
+
+```js
+const addons = [];
+const theme = '@kitconcept/volto-light-theme';
+
+module.exports = {
+  addons,
+  theme,
+};
+```
+
+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.
+
 ## Development Setup
 
 This theme works under Volto 17 alpha 16 onwards.
@@ -110,24 +167,147 @@ Compatibility with Volto 16 might be achieved, but it has to be at customization
 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`.
+It is possible to develop this add-on using docker containers and the provided convenience Makefile commands.
+Run `make help` to list the available commands.
+
+````text
+    build-backend                       Build
+    start-backend                       Starts Docker backend
+    stop-backend                        Stop Docker backend
+    build-live                          Build Addon live
+    build-addon                         Build Addon dev
+    start-dev                           Starts Dev container
+    dev                                 Develop the addon
+    help                                Show this help.
+    i18n                                Sync i18n
+    format                              Format codebase
+    lint                                Lint Codebase
+    test                                Run unit tests
+    test-ci                             Run unit tests in CI
+    install-acceptance                  Install Cypress, build acceptance containers
+    start-test-acceptance-server        Start acceptance server (for use it in while developing)
+    start-test-acceptance-server-prod   Start acceptance server in prod (used by CI)
+    test-acceptance                     Start Cypress (for use it while developing)
+    test-acceptance-headless            Run cypress tests in CI
+    stop-test-acceptance-server         Stop acceptance server (for use it while finished developing)
+    status-test-acceptance-server       Status of Acceptance Server (for use it while developing)
+    debug-frontend                      Run bash in the Frontend container (for debug infrastructure purposes)
+    pull-backend-image                  Pulls and updates the backend image (for use it while developing)
+````
 
 ### Prerequisites
 
 - Docker
 - Node 18 (e.g. via nvm)
 
-### Build a project
+### Development environment Setup
+
+Run once
+
+```shell
+make dev
+```
+
+which will build and launch the backend and frontend containers.
+There's no need to build them again after doing it the first time unless something has changed from the container setup.
+
+In order to make the local IDE play well with this setup, is it required to run once `yarn` to install locally the required packages (ESlint, Prettier, Stylelint).
 
 Run
 
-````
+```shell
+yarn
+```
+
+### Build the containers manually
+
+Run
+
+```shell
+make build-backend
+make build-addon
+```
+
+## Run the containers
+
+Run
+
+```shell
 make start-dev
-````
+```
+
+This will start both the frontend and backend containers.
 
 ### Stop Backend (Docker)
 
-Run:
+After developing, in order to stop the running backend, don't forget to run:
 
-````
-make stop-backend-docker
-````
+Run
+
+```shell
+make stop-backend
+```
+
+### Linting
+
+Run
+
+```shell
+make lint
+```
+
+### Formatting
+
+Run
+
+```shell
+make format
+```
+
+### i18n
+
+Run
+
+```shell
+make i18n
+```
+
+### Unit tests
+
+Run
+
+```shell
+make test
+```
+
+### Acceptance tests
+
+Run once
+
+```shell
+make install-acceptance
+```
+
+For starting the servers
+
+Run
+
+```shell
+make start-test-acceptance-server
+```
+
+The frontend is run in dev mode, so development while writing tests is possible.
+
+Run
+
+```shell
+make test-acceptance
+```
+
+To run Cypress tests afterwards.
+
+When finished, don't forget to shutdown the backend server.
+
+```shell
+make stop-test-acceptance-server
+```

package/dockerfiles/docker-compose.yml

@@ -14,8 +14,13 @@ services:
       - ${CURRENT_DIR}:/app/src/addons/${ADDON_PATH}/
     environment:
       RAZZLE_INTERNAL_API_PATH: http://backend:8080/Plone
-      RAZZLE_API_PATH: http://localhost:8080/Plone
+      # In case that you want to connect to and outside (non-docker) local instance
+      # coment the above, use the next line
+      # RAZZLE_INTERNAL_API_PATH: http://host.docker.internal:8080/Plone
+      RAZZLE_API_PATH: http://127.0.0.1:8080/Plone
       HOST: 0.0.0.0
+    depends_on:
+      - backend
     ports:
       - 3000:3000
       - 3001:3001

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "1.0.0-rc.6",
+  "version": "1.0.0-rc.8",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.js",
   "repository": {
@@ -33,10 +33,21 @@
   },
   "devDependencies": {
     "@plone/scripts": "^3.0.0",
+    "babel-eslint": "10.1.0",
+    "eslint": "6.8.0",
+    "eslint-config-prettier": "6.11.0",
+    "eslint-config-react-app": "5.2.1",
+    "eslint-plugin-flowtype": "4.7.0",
+    "eslint-plugin-import": "2.20.2",
+    "eslint-plugin-jsx-a11y": "6.2.3",
+    "eslint-plugin-prettier": "3.1.3",
+    "eslint-plugin-react": "7.20.0",
+    "eslint-plugin-react-hooks": "4.0.2",
     "postcss-scss": "4.0.6",
     "prettier": "2.0.5",
     "razzle-plugin-scss": "4.2.18",
     "release-it": "^16.1.0",
+    "stylelint-config-idiomatic-order": "8.1.0",
     "stylelint-config-prettier": "9.0.4",
     "stylelint-config-sass-guidelines": "9.0.1",
     "stylelint-prettier": "1.1.2"

package/src/components/Theme/EventView.jsx

@@ -224,21 +224,21 @@ const EventView = (props) => {
                             </div>
                           </Grid.Column>
                           <div className="event-button">
-                            <Button className="event-btn">
-                              <a
-                                className="ics-download"
-                                target="_blank"
-                                rel="noreferrer"
-                                href={`${expandToBackendURL(
-                                  content['@id'],
-                                )}/ics_view`}
-                              >
+                            <a
+                              className="ics-download"
+                              target="_blank"
+                              rel="noreferrer"
+                              href={`${expandToBackendURL(
+                                content['@id'],
+                              )}/ics_view`}
+                            >
+                              <Button className="event-btn">
                                 <FormattedMessage
                                   id="ICS-Download"
                                   defaultMessage="ICS Download"
                                 />
-                              </a>
-                            </Button>
+                              </Button>
+                            </a>
                           </div>
                         </Grid.Row>
                       </Grid>

package/src/customizations/volto/components/theme/View/FileView.jsx

@@ -0,0 +1,132 @@
+/**
+ * OVERRIDE FileView.jsx
+ * REASON: BFS theme
+ * DATE: 2023-07-11
+ * DEVELOPER: @iRohitSingh
+ */
+
+/**
+ * File view component.
+ * @module components/theme/View/FileView
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Container } from 'semantic-ui-react';
+
+import { flattenToAppURL } from '@plone/volto/helpers';
+
+/**
+ * File view component class.
+ * @function FileView
+ * @params {object} content Content object.
+ * @returns {string} Markup of the component.
+ */
+const FileView = ({ content }) => (
+  <Container className="view-wrapper">
+    <h1 className="documentFirstHeading">
+      {content.title}
+      {content.subtitle && ` - ${content.subtitle}`}
+    </h1>
+    <div className="file-detail">
+      {content.description && (
+        <p className="documentDescription">{content.description}</p>
+      )}
+      {content.file?.download && (
+        <>
+          <a href={flattenToAppURL(content.file.download)}>
+            {content.file.filename}
+          </a>{' '}
+          <span>
+            (
+            {(() => {
+              switch (content?.file['content-type']) {
+                case 'image/jpeg':
+                  return 'JPEG';
+                case 'image/png':
+                  return 'PNG';
+                case 'image/svg+xml':
+                  return 'SVG';
+                case 'image/gif':
+                  return 'GIF';
+                case 'application/pdf':
+                  return 'PDF';
+                case 'application/msexcel':
+                  return 'XLS';
+                case 'application/vnd.ms-excel':
+                  return 'XLS';
+                case 'application/msword':
+                  return 'DOC';
+                case 'application/mspowerpoint':
+                  return 'PPT';
+                case 'audio/mp4':
+                  return 'MP4';
+                case 'application/zip':
+                  return 'ZIP';
+                case 'video/webm':
+                  return 'WEBM';
+                case 'video/x-msvideo':
+                  return 'AVI';
+                case 'video/x-sgi-movie':
+                  return 'MOVIE';
+                case 'text/xml':
+                  return 'XML';
+                case 'text/plain':
+                  return 'TXT';
+                case 'text/calendar':
+                  return 'ICS';
+                case 'image/x-icon':
+                  return 'ICO';
+                case 'image/bmp':
+                  return 'BMP';
+                case 'audio/mpeg':
+                  return 'MP3';
+                case 'audio/wav':
+                  return 'WAV';
+                case 'application/json':
+                  return 'JSON';
+                case 'application/postscript':
+                  return 'PS';
+                case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
+                  return 'XLSX';
+                case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
+                  return 'DOCX';
+                case 'application/xml':
+                  return 'XML';
+                case 'application/mshelp':
+                  return 'HLP';
+                case 'application/gzip':
+                  return 'GZ';
+                default:
+                  return '';
+              }
+            })()}{' '}
+            /{' '}
+            {content.file?.size < 1000000
+              ? Math.round(content.file.size / 1000)
+              : Math.round(content.file.size / 1000000)}
+            {content.file?.size < 1000000 ? 'KB' : 'MB'})
+          </span>
+        </>
+      )}
+    </div>
+  </Container>
+);
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+FileView.propTypes = {
+  content: PropTypes.shape({
+    title: PropTypes.string,
+    description: PropTypes.string,
+    file: PropTypes.shape({
+      download: PropTypes.string,
+      filename: PropTypes.string,
+    }),
+  }).isRequired,
+};
+
+export default FileView;

package/src/theme/_breadcrumbs.scss

@@ -7,7 +7,7 @@ body.view-contentsview {
 }
 
 #main .breadcrumbs {
-  padding: 2em 0;
+  padding: 20px 0;
   background-color: $lightgrey;
 
   .breadcrumb {
@@ -26,6 +26,10 @@ body.view-contentsview {
 
     .home {
       margin-right: 0.5em;
+
+      svg {
+        margin-bottom: -4px;
+      }
     }
 
     .section {

package/src/theme/_content.scss

@@ -120,7 +120,61 @@
 }
 
 .contenttype-file {
-  .content-area a {
-    text-decoration: underline;
+  .content-area {
+    .documentFirstHeading {
+      max-width: var(--default-container-width) !important;
+      margin-right: auto;
+      margin-left: auto;
+    }
+    .file-detail {
+      max-width: var(--narrow-container-width) !important;
+      margin-right: auto;
+      margin-left: auto;
+      .documentDescription {
+        padding-top: 40px;
+        padding-bottom: 40px;
+        margin-bottom: 0;
+      }
+
+      a {
+        text-decoration: underline;
+      }
+      span {
+        color: #808080;
+      }
+    }
+  }
+}
+.contenttype-image {
+  .content-area {
+    max-width: var(--default-container-width) !important;
+    margin-right: auto;
+    margin-bottom: 0;
+    margin-left: auto;
+    .documentFirstHeading {
+      @media only screen and (max-width: 769px) {
+        margin-bottom: 60px;
+      }
+    }
+    figure {
+      img {
+        aspect-ratio: $aspect-ratio;
+      }
+      figcaption {
+        margin-top: 20px;
+        margin-bottom: 0;
+        .title {
+          margin-bottom: 5px;
+        }
+        .description div {
+          margin-bottom: 5px;
+        }
+        .credits {
+          padding-bottom: 20px;
+          margin-bottom: 0;
+          color: #0066cc;
+        }
+      }
+    }
   }
 }

package/src/theme/_layout.scss

@@ -44,6 +44,13 @@ $narrow-container-width: 620px !default;
   }
 }
 
+@mixin adjustMarginsToEditContainer($width) {
+  @container (max-width: #{$width + 2 * $spacing-medium}) {
+    margin-right: $spacing-medium;
+    margin-left: $spacing-medium;
+  }
+}
+
 // Container adjustments for dealing correctly with absoluted elements
 @mixin container-preference-order($zindex) {
   position: relative;
@@ -102,12 +109,16 @@ footer {
   @include layout-container-width();
 }
 
-.header-wrapper .header,
-.breadcrumbs .breadcrumb {
+.header-wrapper .header {
   @include layout-container-width();
   @include adjustMarginsToContainer($layout-container-width);
 }
 
+.breadcrumbs .breadcrumb {
+  @include default-container-width();
+  @include adjustMarginsToContainer($default-container-width);
+}
+
 // Content Layout Styling
 #page-document .blocks-group-wrapper {
   & > h2,
@@ -153,6 +164,7 @@ footer {
   & > .block.introduction .block-container,
   & > .block.teaser .teaser-item.default,
   & > .table-of-contents,
+  & > .accordion-block,
   & > .slate blockquote {
     @include default-container-width();
     @include adjustMarginsToContainer($default-container-width);
@@ -186,7 +198,7 @@ footer {
 #page-edit {
   [class*='block-editor-'] {
     @include layout-container-width();
-    @include adjustMarginsToContainer($layout-container-width);
+    @include adjustMarginsToEditContainer($layout-container-width);
   }
 }
 
@@ -205,7 +217,7 @@ footer {
   .block-editor-codeBlock,
   .block-editor-mermaidBlock {
     @include narrow-container-width();
-    @include adjustMarginsToContainer($narrow-container-width);
+    @include adjustMarginsToEditContainer($narrow-container-width);
   }
 
   .block-editor-title h1,
@@ -223,7 +235,7 @@ footer {
   .block-editor-teaser .teaser-item.default,
   .block-editor-toc {
     @include default-container-width();
-    @include adjustMarginsToContainer($default-container-width);
+    @include adjustMarginsToEditContainer($default-container-width);
   }
 
   .block-editor-slate,
@@ -232,7 +244,7 @@ footer {
   .block-editor-teaser,
   .block-editor-separator.has--align--left {
     @include layout-container-width();
-    @include adjustMarginsToContainer($layout-container-width);
+    @include adjustMarginsToEditContainer($layout-container-width);
   }
 }
 

package/src/theme/blocks/_accordion.scss

@@ -2,3 +2,54 @@
 .block.accordion [data-rbd-draggable-context-id] {
   margin-bottom: 2rem;
 }
+
+.accordion-block {
+  .ui.styled.accordion {
+    border-top: 1px solid $black;
+
+    &:last-child {
+      border-bottom: 1px solid $black;
+    }
+    .title.accordion-title {
+      padding: 20px 0 20px 0;
+      background-color: unset;
+
+      & > svg {
+        height: 50px !important;
+        fill: $grey !important;
+        transform: rotate(-90deg);
+      }
+
+      & > span {
+        @include introduction();
+        color: $darkGrey;
+      }
+
+      &.active > span {
+        color: $black;
+      }
+
+      &.active > svg {
+        fill: $black !important;
+        transform: rotate(180deg);
+      }
+    }
+
+    .block.listing {
+      &:first-child {
+        margin-top: 0;
+      }
+      .listing-item:last-child {
+        border-bottom: none !important;
+      }
+    }
+
+    .block:last-child {
+      margin-bottom: 0 !important;
+    }
+
+    .content {
+      padding: 0;
+    }
+  }
+}

package/src/theme/blocks/_grid.scss

@@ -129,6 +129,9 @@
   }
 
   .block.listing {
+    &.previous--has--same--backgroundColor:not(.has--headline) {
+      margin-top: 0;
+    }
     h2 {
       margin-bottom: 40px !important;
     }
@@ -144,7 +147,7 @@
 
   .block-editor-empty {
     padding: 0;
-    margin: 1rem 0.5rem 1rem 0.5rem !important;
+    margin: 0.5rem 0.5rem 0.5rem 0.5rem !important;
   }
 }
 

package/src/theme/blocks/_listing.scss

@@ -185,12 +185,13 @@
     }
   }
 
-  &.previous--is--same--block-type.previous--has--same--backgroundColor:not(.has--headline) {
+  &.previous--has--same--backgroundColor:not(.has--headline) {
     margin-top: 200px;
   }
 
-  p + &:not(.has--headline) {
-    margin-top: 80px;
+  .documentFirstHeading
+    + &.previous--has--same--backgroundColor:not(.has--headline) {
+    margin-top: 0;
   }
 }
 

package/.eslintrc.local.js

@@ -1,50 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const projectRootPath = __dirname;
-const packageJson = require(path.join(projectRootPath, 'package.json'));
-
-let voltoPath = './node_modules/@plone/volto';
-
-let configFile;
-if (fs.existsSync(`${this.projectRootPath}/tsconfig.json`))
-  configFile = `${this.projectRootPath}/tsconfig.json`;
-else if (fs.existsSync(`${this.projectRootPath}/jsconfig.json`))
-  configFile = `${this.projectRootPath}/jsconfig.json`;
-
-if (configFile) {
-  const jsConfig = require(configFile).compilerOptions;
-  const pathsConfig = jsConfig.paths;
-  if (pathsConfig['@plone/volto'])
-    voltoPath = `./${jsConfig.baseUrl}/${pathsConfig['@plone/volto'][0]}`;
-}
-
-const AddonConfigurationRegistry = require(`${voltoPath}/addon-registry.js`);
-const reg = new AddonConfigurationRegistry(__dirname);
-
-// Extends ESlint configuration for adding the aliases to `src` directories in Volto addons
-const addonAliases = Object.keys(reg.packages).map((o) => [
-  o,
-  reg.packages[o].modulePath,
-]);
-
-module.exports = {
-  extends: `${voltoPath}/.eslintrc`,
-  settings: {
-    'import/resolver': {
-      alias: {
-        map: [
-          ['@plone/volto', '@plone/volto/src'],
-          ['@plone/volto-slate', '@plone/volto/packages/volto-slate/src'],
-          ...addonAliases,
-          ['@package', `${__dirname}/src`],
-          ['@root', `${__dirname}/src`],
-          ['~', `${__dirname}/src`],
-        ],
-        extensions: ['.js', '.jsx', '.json'],
-      },
-      'babel-plugin-root-import': {
-        rootPathSuffix: 'src',
-      },
-    },
-  },
-};