@kitconcept/volto-light-theme 6.0.0-alpha.9 → 6.0.1

package/src/components/StickyMenu/StickyMenu.tsx

@@ -0,0 +1,36 @@
+import { useLiveData } from '@kitconcept/volto-light-theme/helpers/useLiveData';
+import IconLinkList from '@kitconcept/volto-light-theme/primitives/IconLinkList';
+import type { StickyMenuSettings } from '../../types';
+import type { Content } from '@plone/types';
+
+const StickyMenu = ({ content }: { content: Content }) => {
+  const menuData = useLiveData<StickyMenuSettings['sticky_menu']>(
+    content,
+    'kitconcept.sticky_menu',
+    'sticky_menu',
+  );
+
+  const sticky_menu_color = useLiveData<
+    StickyMenuSettings['sticky_menu_color']
+  >(content, 'kitconcept.sticky_menu', 'sticky_menu_color');
+
+  const sticky_menu_foreground_color = useLiveData<
+    StickyMenuSettings['sticky_menu_foreground_color']
+  >(content, 'kitconcept.sticky_menu', 'sticky_menu_foreground_color');
+
+  return (
+    <div
+      className="sticky-menu"
+      style={
+        {
+          '--sticky-menu-color': sticky_menu_color,
+          '--sticky-menu-foreground-color': sticky_menu_foreground_color,
+        } as React.CSSProperties
+      }
+    >
+      <IconLinkList iconLinks={menuData} />
+    </div>
+  );
+};
+
+export default StickyMenu;

package/src/components/Summary/DefaultSummary.jsx

@@ -0,0 +1,16 @@
+const DefaultSummary = (props) => {
+  const { item, HeadingTag = 'h3' } = props;
+  return (
+    <>
+      {item?.head_title && <div className="headline">{item.head_title}</div>}
+      <HeadingTag className="title">
+        {item.title ? item.title : item.id}
+      </HeadingTag>
+      {!item.hide_description && (
+        <p className="description">{item.description}</p>
+      )}
+    </>
+  );
+};
+
+export default DefaultSummary;

package/src/components/Summary/EventSummary.jsx

@@ -0,0 +1,38 @@
+import {
+  parseDateFromCatalog,
+  formatDateRange,
+} from '@kitconcept/volto-light-theme/helpers/dates';
+import FormattedDate from '@plone/volto/components/theme/FormattedDate/FormattedDate';
+
+const EventSummary = (props) => {
+  const { item, HeadingTag = 'h3' } = props;
+  const start = parseDateFromCatalog(item.start);
+  const end = parseDateFromCatalog(item.end);
+  const headline = [
+    start && end ? (
+      <span className="day" key="day" suppressHydrationWarning>
+        {formatDateRange({ start, end, locale: item.Language })}
+      </span>
+    ) : start ? (
+      <FormattedDate key="day" date={start} />
+    ) : null,
+    item.head_title,
+  ]
+    .filter((x) => x)
+    .flatMap((x) => [' | ', x])
+    .slice(1);
+
+  return (
+    <>
+      {headline.length ? <div className="headline">{headline}</div> : null}
+      <HeadingTag className="title">
+        {item.title ? item.title : item.id}
+      </HeadingTag>
+      {!item.hide_description && (
+        <p className="description">{item.description}</p>
+      )}
+    </>
+  );
+};
+
+export default EventSummary;

package/src/components/Summary/FileSummary.jsx

@@ -0,0 +1,24 @@
+import FileType from '@kitconcept/volto-light-theme/helpers/Filetype';
+
+const FileSummary = (props) => {
+  const { item, HeadingTag = 'h3' } = props;
+
+  const headline = [item.getObjSize, FileType(item.mime_type), item.head_title]
+    .filter((x) => x)
+    .flatMap((x) => [' | ', x])
+    .slice(1);
+
+  return (
+    <>
+      {headline.length ? <div className="headline">{headline}</div> : null}
+      <HeadingTag className="title">
+        {item.title ? item.title : item.id}
+      </HeadingTag>
+      {!item.hide_description && (
+        <p className="description">{item.description}</p>
+      )}
+    </>
+  );
+};
+
+export default FileSummary;

package/src/components/Summary/NewsItemSummary.jsx

@@ -0,0 +1,40 @@
+import { parseDateFromCatalog } from '@kitconcept/volto-light-theme/helpers/dates';
+import FormattedDate from '@plone/volto/components/theme/FormattedDate/FormattedDate';
+
+const NewsItemSummary = (props) => {
+  const { item, HeadingTag = 'h3' } = props;
+
+  const effective = parseDateFromCatalog(item.effective);
+  const headline = [
+    effective ? (
+      <FormattedDate
+        key="day"
+        date={effective}
+        format={{
+          year: 'numeric',
+          month: 'long',
+          day: 'numeric',
+        }}
+        className="day"
+      />
+    ) : null,
+    item.head_title,
+  ]
+    .filter((x) => x)
+    .flatMap((x) => [' | ', x])
+    .slice(1);
+
+  return (
+    <>
+      {headline.length ? <div className="headline">{headline}</div> : null}
+      <HeadingTag className="title">
+        {item.title ? item.title : item.id}
+      </HeadingTag>
+      {!item.hide_description && (
+        <p className="description">{item.description}</p>
+      )}
+    </>
+  );
+};
+
+export default NewsItemSummary;

package/src/components/Tags/Tags.jsx

@@ -0,0 +1,46 @@
+import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import { Container as SemanticContainer } from 'semantic-ui-react';
+import config from '@plone/registry';
+
+const Tags = ({ content }) => {
+  const tags = content?.subjects || [];
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
+  if (!config.settings.showTags || !tags.length) return null;
+
+  return (
+    <Container className="default tags">
+      {tags.map((tag) => (
+        <Link className="ui label" to={`/search?Subject=${tag}`} key={tag}>
+          {tag}
+        </Link>
+      ))}
+    </Container>
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+Tags.propTypes = {
+  content: PropTypes.shape({
+    subjects: PropTypes.arrayOf(PropTypes.string),
+  }),
+};
+
+/**
+ * Default properties.
+ * @property {Object} defaultProps Default properties.
+ * @static
+ */
+Tags.defaultProps = {
+  content: {
+    subjects: [],
+  },
+};
+
+export default Tags;

package/src/components/Theme/EventView.jsx

@@ -10,9 +10,8 @@ import { flattenHTMLToAppURL } from '@plone/volto/helpers/Url/Url';
 import { Container as SemanticContainer } from 'semantic-ui-react';
 import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
 
-import FormattedDate from '@plone/volto/components/theme/FormattedDate/FormattedDate';
 import config from '@plone/volto/registry';
-import { FormattedMessage, injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl';
 
 const EventTextfieldView = ({ content }) => {
   const Image = config.getComponent({ name: 'Image' }).component;
@@ -53,37 +52,32 @@ const EventView = (props) => {
   const { content } = props;
   const Container =
     config.getComponent({ name: 'Container' }).component || SemanticContainer;
-  const dateOptions = {
+
+  const language = content.language?.token || 'default';
+  const start = content.start ? new Date(content.start) : null;
+  const end = content.end ? new Date(content.end) : null;
+  const isOpenEnd = !!content.open_end;
+
+  const formatter = new Intl.DateTimeFormat(language, {
     year: 'numeric',
     month: 'long',
     day: 'numeric',
-    hour: 'numeric',
-    minute: 'numeric',
-  };
+  });
+  const formattedDate =
+    !end || isOpenEnd
+      ? formatter.format(start)
+      : formatter.formatRange(start, end);
 
   return (
     <Container id="page-document" className="view-wrapper event-view">
       <div className="dates">
-        {content?.start ? (
-          <span className="day">
-            <FormattedDate date={content?.start} format={dateOptions} />{' '}
-            {props.intl.locale === 'de' ? ' Uhr' : ''}
-          </span>
-        ) : (
-          <span className="day">
-            <FormattedMessage id="No date" defaultMessage="No date" />
-          </span>
-        )}{' '}
-        &mdash;&nbsp;
-        {content?.end ? (
-          <span className="day">
-            <FormattedDate date={content?.end} format={dateOptions} />{' '}
-            {props.intl.locale === 'de' ? ' Uhr' : ''}
-          </span>
-        ) : (
-          <span className="day">
-            <FormattedMessage id="No date" defaultMessage="No date" />
+        {formattedDate ? (
+          <span className="day" suppressHydrationWarning>
+            {formattedDate}
           </span>
+        ) : null}{' '}
+        {content?.head_title && (
+          <span className="head-title"> {content?.head_title}</span>
         )}
       </div>
       {hasBlocksData(content) ? (

package/src/components/Theme/NewsItemView.jsx

@@ -3,12 +3,11 @@
  * @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/theme/FormattedDate/FormattedDate';
 import config from '@plone/volto/registry';
 import { Container as SemanticContainer } from 'semantic-ui-react';
+import FormattedDate from '@plone/volto/components/theme/FormattedDate/FormattedDate';
 
 /**
  * NewsItemView view component class.
@@ -22,13 +21,18 @@ const NewsItemView = ({ content }) => {
   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.effective ? (
+          <FormattedDate
+            key="day"
+            date={content.effective}
+            format={{
+              year: 'numeric',
+              month: 'long',
+              day: 'numeric',
+            }}
+            className="day"
+          />
+        ) : null}{' '}
         {content?.head_title && (
           <span className="head-title"> {content?.head_title}</span>
         )}

package/src/components/Theming/Theming.tsx

@@ -2,7 +2,7 @@ import Helmet from '@plone/volto/helpers/Helmet/Helmet';
 import type { Content } from '@plone/types';
 import { useSelector } from 'react-redux';
 import isEmpty from 'lodash/isEmpty';
-import config from '@plone/registry';
+import type { SiteThemeSettings } from '../../types';
 
 type FormState = {
   content: {
@@ -13,34 +13,37 @@ type FormState = {
   };
 };
 
-// TODO: Change when we have the final list of colors
-// and if they are nested in the serialization under a key
-function buildStyleTag(content: Content, colors: string[]) {
-  if (Array.isArray(colors)) {
-    return colors
-      .filter((color) => content[color])
-      .map((color) => {
-        return `--${color.replace(/_/g, '-')}: ${content[color]}; `;
-      })
-      .join('');
-  }
+function buildStyleTag(content: Partial<Content>, colors: SiteThemeSettings) {
+  const colorKeys = Object.keys(colors);
+  return colorKeys
+    .filter((color) => content[color])
+    .map((color) => {
+      return `--${color.replace(/_/g, '-')}: ${content[color]}; `;
+    })
+    .join('');
 }
 
-const Theming = ({ navRoot }) => {
-  const colorFields = config.settings.userDefinedControlPanelColors;
+const Theming = ({ content }: { content: Content }) => {
+  const colorSettings =
+    content?.['@components']?.inherit?.['voltolighttheme.theme']?.data;
   const formData = useSelector<FormState, Content>(
     (state) => state.form.global,
   );
 
-  const liveContent = navRoot ? (!isEmpty(formData) ? formData : navRoot) : {};
+  const liveContent = colorSettings
+    ? !isEmpty(formData)
+      ? formData
+      : colorSettings
+    : {};
 
   return (
     <>
       <Helmet>
         <style>
-          {`
+          {colorSettings &&
+            `
 :root {
-  ${buildStyleTag(liveContent, colorFields)}
+  ${buildStyleTag(liveContent, colorSettings)}
 }
                 `}
         </style>

package/src/components/Widgets/{BlockAlignmentWidget.tsx → BlockAlignment.tsx}

@@ -1,6 +1,9 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import ButtonsWidget, { type ButtonsWidgetProps } from './ButtonsWidget';
+import ButtonsWidget, {
+  type ActionInfo,
+  type ButtonsWidgetProps,
+} from './Buttons';
 import imageFitSVG from '@plone/volto/icons/image-fit.svg';
 import imageLeftSVG from '@plone/volto/icons/image-left.svg';
 import imageRightSVG from '@plone/volto/icons/image-right.svg';
@@ -21,7 +24,11 @@ const messages = defineMessages({
   },
 });
 
-export const defaultActionsInfo = ({ intl }: { intl: IntlShape }) => ({
+export const defaultActionsInfo = ({
+  intl,
+}: {
+  intl: IntlShape;
+}): Record<string, ActionInfo> => ({
   left: [imageLeftSVG, intl.formatMessage(messages.left)],
   right: [imageRightSVG, intl.formatMessage(messages.right)],
   center: [imageFitSVG, intl.formatMessage(messages.center)],

package/src/components/Widgets/{BlockWidthWidget.tsx → BlockWidth.tsx}

@@ -1,11 +1,14 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import ButtonsWidget, { type ButtonsWidgetProps } from './ButtonsWidget';
+import type { IntlShape } from 'react-intl';
+import ButtonsWidget, {
+  type ActionInfo,
+  type ButtonsWidgetProps,
+} from './Buttons';
 import imageFitSVG from '@plone/volto/icons/image-fit.svg';
 import imageNarrowSVG from '@plone/volto/icons/image-narrow.svg';
 import imageWideSVG from '@plone/volto/icons/image-wide.svg';
 import imageFullSVG from '@plone/volto/icons/image-full.svg';
-import type { IntlShape } from 'react-intl';
 
 const messages = defineMessages({
   narrow: {
@@ -26,7 +29,11 @@ const messages = defineMessages({
   },
 });
 
-export const defaultActionsInfo = ({ intl }: { intl: IntlShape }) => ({
+export const defaultActionsInfo = ({
+  intl,
+}: {
+  intl: IntlShape;
+}): Record<string, ActionInfo> => ({
   narrow: [imageNarrowSVG, intl.formatMessage(messages.narrow)],
   default: [imageFitSVG, intl.formatMessage(messages.default)],
   layout: [imageWideSVG, intl.formatMessage(messages.layout)],