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

package/.github/workflows/acceptance.yml

@@ -4,7 +4,7 @@ on: [push]
 env:
   ADDON_NAME: "@kitconcept/volto-light-theme"
   ADDON_PATH: "volto-light-theme"
-  VOLTO_VERSION: "17.0.0-alpha.17"
+  VOLTO_VERSION: "17.0.0-alpha.20"
 
 jobs:
 

package/.github/workflows/deploy.yml

@@ -11,7 +11,7 @@ on:
 env:
   ENVIRONMENT: "light-theme.kitconcept.io"
   IMAGE_NAME: "ghcr.io/kitconcept/voltolighttheme-frontend"
-  VOLTO_VERSION: "17.0.0-alpha.17"
+  VOLTO_VERSION: "17.0.0-alpha.20"
 
 jobs:
   meta:

package/CHANGELOG.md

@@ -8,6 +8,26 @@
 
 <!-- towncrier release notes start -->
 
+## 1.0.0-rc.9 (2023-07-19)
+
+### Breaking
+
+- Refactor existing customizations, removing the ones no longer needed (because they are present in Volto already) and using the new pattern in the others. Volto 17a20 is required in order to retain consistency. @sneridagh [#166](https://github.com/kitconcept/volto-light-theme/pull/166)
+
+### Bugfix
+
+- Fix NewsItemView as wella sd Link View @iFlameing [#127](https://github.com/kitconcept/volto-light-theme/pull/127)
+- Fix Image View in edit mode @iFlameing. [#154](https://github.com/kitconcept/volto-light-theme/pull/154)
+- Update volto-image-block @sneridagh [#159](https://github.com/kitconcept/volto-light-theme/pull/159)
+- Fix File View implementation @iFlameing [#162](https://github.com/kitconcept/volto-light-theme/pull/162)
+
+### Internal
+
+- Upgrade volto-image-block to fix the image upload @sneridagh [#149](https://github.com/kitconcept/volto-light-theme/pull/149)
+- Upgrade to Volto 17a20 @sneridagh [#163](https://github.com/kitconcept/volto-light-theme/pull/163)
+- Remove the `apiExpanders` existing locally in the package since it's already in Volto 17a20 @sneridagh [#164](https://github.com/kitconcept/volto-light-theme/pull/164)
+
+
 ## 1.0.0-rc.8 (2023-07-14)
 
 ### Bugfix

package/Makefile

@@ -22,7 +22,7 @@ RESET=`tput sgr0`
 YELLOW=`tput setaf 3`
 
 PLONE_VERSION=6
-VOLTO_VERSION=17.0.0-alpha.17
+VOLTO_VERSION=17.0.0-alpha.20
 
 ADDON_NAME='@kitconcept/volto-light-theme'
 ADDON_PATH='volto-light-theme'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "1.0.0-rc.8",
+  "version": "1.0.0-rc.9",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.js",
   "repository": {
@@ -25,7 +25,6 @@
     "access": "public"
   },
   "scripts": {
-    "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",
@@ -67,10 +66,10 @@
     "@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-image-block": "^1.0.3",
     "@kitconcept/volto-introduction-block": "^1.0.0",
     "@kitconcept/volto-separator-block": "^3.2.2",
     "@kitconcept/volto-slider-block": "^4.2.0",
-    "@plone/volto": "^17.0.0-alpha.17"
+    "@plone/volto": "^17.0.0-alpha.20"
   }
 }

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

@@ -0,0 +1,47 @@
+// See Customization for more info
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ConditionalLink, UniversalLink } from '@plone/volto/components';
+import { flattenToAppURL } from '@plone/volto/helpers';
+
+import { isInternalURL } from '@plone/volto/helpers/Url/Url';
+
+const DefaultTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
+  let link = null;
+  let href = linkHref?.[0]?.['@id'] || '';
+
+  if (isInternalURL(href)) {
+    link = (
+      <ConditionalLink to={flattenToAppURL(href)} condition={!isEditMode}>
+        {linkTitle || href}
+      </ConditionalLink>
+    );
+  } else if (href) {
+    link = <UniversalLink href={href}>{linkTitle || href}</UniversalLink>;
+  }
+
+  return (
+    <>
+      <div className="items">
+        {items.map((item) => (
+          <div className="listing-item" key={item['@id']}>
+            <ConditionalLink item={item} condition={!isEditMode}>
+              <div className="listing-body">
+                <h2>{item.title ? item.title : item.id}</h2>
+                <p>{item.description}</p>
+              </div>
+            </ConditionalLink>
+          </div>
+        ))}
+      </div>
+
+      {link && <div className="footer">{link}</div>}
+    </>
+  );
+};
+DefaultTemplate.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.any).isRequired,
+  linkMore: PropTypes.any,
+  isEditMode: PropTypes.bool,
+};
+export default DefaultTemplate;

package/src/components/Blocks/Search/components/SearchDetails.jsx

@@ -0,0 +1,33 @@
+/**
+ * OVERRIDE SearchDetails.jsx
+ * REASON: Special template for displaying this component, use h2 instead of h4
+ */
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  searchResults: {
+    id: 'Search results',
+    defaultMessage: 'Search results',
+  },
+  searchedFor: {
+    id: 'Searched for',
+    defaultMessage: 'Searched for',
+  },
+});
+
+const SearchDetails = ({ total, text }) => {
+  const intl = useIntl();
+  return (
+    <h2 className="search-details">
+      <nobr>
+        <span className="number">{total}</span>{' '}
+        <span className="label">
+          {intl.formatMessage(messages.searchResults)}
+        </span>
+      </nobr>
+    </h2>
+  );
+};
+
+export default SearchDetails;

package/src/components/Blocks/Search/components/SearchInput.jsx

@@ -0,0 +1,56 @@
+/**
+ * OVERRIDE SearchDetails.jsx
+ * REASON: Special template for displaying this component
+ */
+import React from 'react';
+import { Button, Input } from 'semantic-ui-react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Icon } from '@plone/volto/components';
+import loupeSVG from '@plone/volto/icons/zoom.svg';
+
+const messages = defineMessages({
+  search: {
+    id: 'Search',
+    defaultMessage: 'Search',
+  },
+});
+
+const SearchInput = (props) => {
+  const { data, searchText, setSearchText, isLive, onTriggerSearch } = props;
+  const intl = useIntl();
+
+  return (
+    <div className="search-input">
+      <Input
+        id={`${props.id}-searchtext`}
+        value={searchText}
+        placeholder={
+          data.searchInputPrompt || intl.formatMessage(messages.search)
+        }
+        fluid
+        onKeyPress={(event) => {
+          if (isLive || event.key === 'Enter') onTriggerSearch(searchText);
+        }}
+        onChange={(event, { value }) => {
+          setSearchText(value);
+          if (isLive) {
+            onTriggerSearch(value);
+          }
+        }}
+        aria-label="Search"
+      />
+      {isLive && (
+        <Button
+          basic
+          icon
+          className="search-input-live-icon-button"
+          aria-label="Search"
+        >
+          <Icon name={loupeSVG} />
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default SearchInput;

package/src/components/Theme/FileView.jsx

@@ -0,0 +1,65 @@
+/**
+ * File view component.
+ * @module components/theme/View/FileView
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Container as SemanticContainer } from 'semantic-ui-react';
+import { flattenToAppURL } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
+import FileType from '../../helpers/Filetype';
+
+/**
+ * File view component class.
+ * @function FileView
+ * @params {object} content Content object.
+ * @returns {string} Markup of the component.
+ */
+const FileView = ({ content }) => {
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+  return (
+    <Container id="page-document" className="view-wrapper fileitem-view">
+      <h1 className="documentFirstHeading">
+        {content.title}
+        {content.subtitle && ` - ${content.subtitle}`}
+      </h1>
+      {content.description && (
+        <p className="documentDescription">{content.description}</p>
+      )}
+      {content.file?.download && (
+        <p>
+          <a href={flattenToAppURL(content.file.download)}>
+            {content.file.filename}
+          </a>{' '}
+          <span>
+            ({FileType(content?.file['content-type'])}/{' '}
+            {content.file?.size < 1000000
+              ? Math.round(content.file.size / 1000)
+              : Math.round(content.file.size / 1000000)}
+            {content.file?.size < 1000000 ? 'KB' : 'MB'})
+          </span>
+        </p>
+      )}
+    </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/components/Theme/ImageView.jsx

@@ -0,0 +1,92 @@
+/**
+ * Image view component.
+ * @module components/theme/View/ImageView
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Container as SemanticContainer } from 'semantic-ui-react';
+
+import { flattenToAppURL } from '@plone/volto/helpers';
+
+// BEGIN CUSTOMIZATION
+import config from '@plone/volto/registry';
+import Caption from '@kitconcept/volto-image-block/components/Caption/Caption';
+
+// END CUSTOMIZATION
+
+/**
+ * Image view component class.
+ * @function ImageView
+ * @params {object} content Content object.
+ * @returns {string} Markup of the component.
+ */
+const ImageView = ({ content }) => {
+  const Image = config.getComponent('Image').component;
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+  return (
+    <Container id="page-document" className="view-wrapper image-view">
+      {/* BEGIN CUSTOMIZATION */}
+      <h1 className="documentFirstHeading">{content.title}</h1>
+      {content?.image?.download && (
+        <figure>
+          <Image
+            width={content.image?.width}
+            height={content.image?.height}
+            alt={content.alt_tag || ''}
+            src={content.image}
+            blurhash={content.blurhash}
+            blurhashOptions={{
+              // override default width 100%
+              style: {},
+            }}
+            style={{ maxWidth: '100%', height: 'auto' }}
+          />
+          <Caption
+            title={content.title}
+            description={content.description}
+            credit={content.credit?.data}
+            downloadFilename={content.title}
+            downloadHref={
+              content.allow_image_download &&
+              flattenToAppURL(
+                content.image.scales.fullscreen?.download ||
+                  content.image.download,
+              )
+            }
+          />
+        </figure>
+      )}
+      {/* END CUSTOMIZATION */}
+    </Container>
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+ImageView.propTypes = {
+  content: PropTypes.shape({
+    title: PropTypes.string,
+    description: PropTypes.string,
+    image: PropTypes.shape({
+      scales: PropTypes.shape({
+        preview: PropTypes.shape({
+          download: PropTypes.string,
+        }),
+      }),
+    }),
+    // BEGIN CUSTOMIZATION
+    allow_image_download: PropTypes.bool,
+    credit: PropTypes.shape({
+      data: PropTypes.string,
+    }),
+    alt_tag: PropTypes.string,
+    // END CUSTOMIZATION
+  }).isRequired,
+};
+
+export default ImageView;

package/src/components/Theme/NewsItemView.jsx

@@ -0,0 +1,56 @@
+/**
+ * NewsItemView view component.
+ * @module components/theme/View/NewsItemView
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
+import { FormattedDate } from '@plone/volto/components';
+import config from '@plone/volto/registry';
+import { Container as SemanticContainer } from 'semantic-ui-react';
+
+/**
+ * NewsItemView view component class.
+ * @function NewsItemView
+ * @params {object} content Content object.
+ * @returns {string} Markup of the component.
+ */
+const NewsItemView = ({ content }) => {
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+  return (
+    <Container id="page-document" className="view-wrapper newsitem-view">
+      <div className="dates">
+        {content?.effective ? (
+          <span className="day">
+            <FormattedDate date={content?.effective} />{' '}
+          </span>
+        ) : (
+          <span className="day">No date</span>
+        )}{' '}
+        {content?.head_title && (
+          <span className="headtitle">| {content?.head_title}</span>
+        )}
+      </div>
+      <RenderBlocks content={content} />
+    </Container>
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+NewsItemView.propTypes = {
+  content: PropTypes.shape({
+    title: PropTypes.string,
+    description: PropTypes.string,
+    text: PropTypes.shape({
+      data: PropTypes.string,
+    }),
+  }).isRequired,
+};
+
+export default NewsItemView;

package/src/customizations/volto/components/manage/Blocks/Listing/DefaultTemplate.jsx

@@ -1,47 +1,16 @@
-// Remove when https://github.com/plone/volto/pull/4848 is merged
-import React from 'react';
-import PropTypes from 'prop-types';
-import { ConditionalLink, UniversalLink } from '@plone/volto/components';
-import { flattenToAppURL } from '@plone/volto/helpers';
+/**
+ * OVERRIDE DefaultTemplate.jsx
+ * REASON: This was going to be removed when
+ * https://github.com/plone/volto/pull/4848 was merged.
+ * However, as per decission of the Volto Team, the team
+ * will explore changing the headings inside a listing to a
+ * better semantically structure, using no headings at all.
+ * So, decission by Víctor (19/07/2023) to freeze this for now in the theme
+ * still using h2 and change it (if appropiate) when the change is made.
+ * To override it, override the @kitconcept/volto-light-theme one instead of
+ * this one.
+ */
 
-import { isInternalURL } from '@plone/volto/helpers/Url/Url';
+import DefaultTemplate from '../../../../../../components/Blocks/Listing/DefaultTemplate';
 
-const DefaultTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
-  let link = null;
-  let href = linkHref?.[0]?.['@id'] || '';
-
-  if (isInternalURL(href)) {
-    link = (
-      <ConditionalLink to={flattenToAppURL(href)} condition={!isEditMode}>
-        {linkTitle || href}
-      </ConditionalLink>
-    );
-  } else if (href) {
-    link = <UniversalLink href={href}>{linkTitle || href}</UniversalLink>;
-  }
-
-  return (
-    <>
-      <div className="items">
-        {items.map((item) => (
-          <div className="listing-item" key={item['@id']}>
-            <ConditionalLink item={item} condition={!isEditMode}>
-              <div className="listing-body">
-                <h2>{item.title ? item.title : item.id}</h2>
-                <p>{item.description}</p>
-              </div>
-            </ConditionalLink>
-          </div>
-        ))}
-      </div>
-
-      {link && <div className="footer">{link}</div>}
-    </>
-  );
-};
-DefaultTemplate.propTypes = {
-  items: PropTypes.arrayOf(PropTypes.any).isRequired,
-  linkMore: PropTypes.any,
-  isEditMode: PropTypes.bool,
-};
 export default DefaultTemplate;

package/src/customizations/volto/components/manage/Blocks/Search/components/SearchDetails.jsx

@@ -2,32 +2,7 @@
  * OVERRIDE SearchDetails.jsx
  * REASON: Special template for displaying this component, use h2 instead of h4
  */
-import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
 
-const messages = defineMessages({
-  searchResults: {
-    id: 'Search results',
-    defaultMessage: 'Search results',
-  },
-  searchedFor: {
-    id: 'Searched for',
-    defaultMessage: 'Searched for',
-  },
-});
-
-const SearchDetails = ({ total, text }) => {
-  const intl = useIntl();
-  return (
-    <h2 className="search-details">
-      <nobr>
-        <span className="number">{total}</span>{' '}
-        <span className="label">
-          {intl.formatMessage(messages.searchResults)}
-        </span>
-      </nobr>
-    </h2>
-  );
-};
+import SearchDetails from '../../../../../../../components/Blocks/Search/components/SearchDetails';
 
 export default SearchDetails;

package/src/customizations/volto/components/manage/Blocks/Search/components/SearchInput.jsx

@@ -1,56 +1,8 @@
 /**
- * OVERRIDE SearchDetails.jsx
+ * OVERRIDE SearchInput.jsx
  * REASON: Special template for displaying this component
  */
-import React from 'react';
-import { Button, Input } from 'semantic-ui-react';
-import { defineMessages, useIntl } from 'react-intl';
-import { Icon } from '@plone/volto/components';
-import loupeSVG from '@plone/volto/icons/zoom.svg';
 
-const messages = defineMessages({
-  search: {
-    id: 'Search',
-    defaultMessage: 'Search',
-  },
-});
-
-const SearchInput = (props) => {
-  const { data, searchText, setSearchText, isLive, onTriggerSearch } = props;
-  const intl = useIntl();
-
-  return (
-    <div className="search-input">
-      <Input
-        id={`${props.id}-searchtext`}
-        value={searchText}
-        placeholder={
-          data.searchInputPrompt || intl.formatMessage(messages.search)
-        }
-        fluid
-        onKeyPress={(event) => {
-          if (isLive || event.key === 'Enter') onTriggerSearch(searchText);
-        }}
-        onChange={(event, { value }) => {
-          setSearchText(value);
-          if (isLive) {
-            onTriggerSearch(value);
-          }
-        }}
-        aria-label="Search"
-      />
-      {isLive && (
-        <Button
-          basic
-          icon
-          className="search-input-live-icon-button"
-          aria-label="Search"
-        >
-          <Icon name={loupeSVG} />
-        </Button>
-      )}
-    </div>
-  );
-};
+import SearchInput from '../../../../../../../components/Blocks/Search/components/SearchInput';
 
 export default SearchInput;