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

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;

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

@@ -1,132 +1,10 @@
 /**
  * OVERRIDE FileView.jsx
- * REASON: BFS theme
+ * REASON: Adding size of file.
  * 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}iRohitSingh</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,
-};
+import FileView from '../../../../../components/Theme/FileView';
 
 export default FileView;

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

@@ -0,0 +1,10 @@
+/**
+ * OVERRIDE ImageView.jsx
+ * REASON: Using custom component to render Image and Caption.
+ * DATE: 2023-07-19
+ * DEVELOPER: @IFlameing
+ */
+
+import ImageView from '../../../../../components/Theme/ImageView';
+
+export default ImageView;

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

@@ -1,57 +1,10 @@
 /**
  * OVERRIDE NewsItemView.jsx
- * REASON: BFS theme
+ * REASON: Adding dates and headtitle above the title of page.
  * DATE: 2023-07-04
  * DEVELOPER: @IFlameing
  */
 
-/**
- * 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';
-
-/**
- * NewsItemView view component class.
- * @function NewsItemView
- * @params {object} content Content object.
- * @returns {string} Markup of the component.
- */
-const NewsItemView = ({ content }) => {
-  return (
-    <div id="page-document" className="ui container viewwrapper event-view">
-      <div className="dates">
-        {content?.effective ? (
-          <span className="day">
-            <FormattedDate date={content?.effective} />{' '}
-          </span>
-        ) : (
-          <span className="day">No date</span>
-        )}{' '}
-        <span className="headtitle">| {content?.head_title}</span>
-      </div>
-      <RenderBlocks content={content} />
-    </div>
-  );
-};
-
-/**
- * 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,
-};
+import NewsItemView from '../../../../../components/Theme/NewsItemView';
 
 export default NewsItemView;

package/src/helpers/Filetype.js

@@ -0,0 +1,64 @@
+const Filetype = (mime_type) => {
+  switch (mime_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 '';
+  }
+};
+
+export default Filetype;

package/src/index.js

@@ -47,21 +47,6 @@ const applyConfig = (config) => {
     component: Container,
   });
 
-  config.settings.apiExpanders = [
-    ...config.settings.apiExpanders,
-    {
-      match: '',
-      GET_CONTENT: ['breadcrumbs', 'actions', 'types'],
-    },
-    {
-      match: '',
-      GET_CONTENT: ['navigation'],
-      querystring: {
-        'expand.navigation.depth': config.settings.navDepth,
-      },
-    },
-  ];
-
   // Register custom StyleWrapper ClassNames
   config.settings.styleClassNameExtenders = [
     ({ block, content, data, classNames }) => {