@kitconcept/volto-light-theme 8.0.0-alpha.2 → 8.0.0-alpha.21

package/src/theme/main.scss

@@ -36,10 +36,15 @@
 @import 'blocks/eventMetadata';
 @import 'blocks/rss';
 @import 'blocks/eventSearch';
+@import 'blocks/error-boundary';
 @import 'sticky-menu';
+@import 'mobile-sticky-menu';
 @import 'card';
 @import 'insets';
 @import 'person';
+@import 'notfound';
+@import 'search-page';
+@import 'export_import';
 
 @import 'temp';
 

package/src/theme/notfound.scss

@@ -0,0 +1,27 @@
+.view-editview.is-anonymous,
+.view-unauthorized,
+.page-not-found {
+  .content-area {
+    @include default-container-width();
+    @include adjustMarginsToContainer($default-container-width);
+    .view-wrapper {
+      padding-top: $spacing-xlarge;
+      padding-bottom: $spacing-xlarge;
+    }
+    h1 {
+      margin-bottom: $spacing-large;
+      font-size: 48px;
+      font-weight: 700;
+      line-height: 56px;
+    }
+    p,
+    a {
+      font-size: 24px;
+      font-weight: 300;
+      line-height: 33px;
+    }
+    a {
+      color: $black;
+    }
+  }
+}

package/src/theme/person.scss

@@ -166,11 +166,17 @@ body .block.gridBlock .contained .person-teaser .card-inner {
   display: flex;
   align-items: center;
   margin-bottom: $spacing-small;
+  svg {
+    margin-right: 0.25em;
+  }
 }
 
 .summary-room-phone {
   display: flex;
   gap: $spacing-small;
+  svg {
+    margin-right: 0.25em;
+  }
 }
 
 // One person teaser in Grid, edit mode
@@ -214,7 +220,7 @@ body .block.gridBlock .contained .person-teaser .card-inner {
 
         img {
           width: 100%;
-          height: 100%;
+          height: 100% !important;
           object-fit: cover;
           object-position: center;
         }
@@ -325,24 +331,34 @@ body.person-squared-images,
     }
   }
 }
-// person with Four columns
+
+// person with Four columns (edit mode and view mode)
+.block.gridBlock .four.grid-items .person-teaser .card-summary,
+.ui.stackable.stretched.four.column.grid .card-summary {
+  .summary-extra-info {
+    &.email {
+      min-width: 0;
+
+      a {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+}
+
+// Additional styles for view mode only
 .ui.stackable.stretched.four.column.grid {
   .card-summary {
     display: grid;
+
     .summary-extra-info {
       gap: 5px;
-      &.email {
-        min-width: 0;
-
-        a {
-          display: block;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-      }
     }
   }
+
   .block.listing,
   .block.search {
     .listing-item.person-listing .card-summary {

package/src/theme/sticky-menu.scss

@@ -10,7 +10,7 @@ body.cms-ui .sticky-menu {
   transform: translateY(-50%);
   transition: all 0.2s linear;
 
-  @media (min-height: 920px) {
+  @media (min-height: 969px) {
     top: 373px;
     transform: none;
   }
@@ -21,7 +21,9 @@ body.cms-ui .sticky-menu {
     flex-direction: column;
     padding: 0;
     margin: 0;
+    gap: 1px;
     list-style: none;
+    text-align: center;
 
     li a {
       display: flex;
@@ -34,24 +36,24 @@ body.cms-ui .sticky-menu {
       font-size: 10px;
       font-style: normal;
       font-weight: 700;
-      line-height: 18px; /* 180% */
+      line-height: 12px;
       text-transform: capitalize;
     }
 
     li {
       display: flex;
-      height: 93px;
+      min-height: 97px;
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      margin-bottom: 2px;
+      padding: 5px 10px;
       background: var(--sticky-menu-color, #555);
       color: var(--sticky-menu-foreground-color, #fff);
       font-family: Inter;
       font-size: 10px;
       font-style: normal;
       font-weight: 700;
-      line-height: 18px; /* 180% */
+      line-height: 12px;
       text-transform: capitalize;
     }
 

package/src/types.d.ts

@@ -81,6 +81,7 @@ export type StickyMenuSettings = {
   sticky_menu: Array<iconLink>;
   sticky_menu_color: string;
   sticky_menu_foreground_color: string;
+  enable_mobile_sticky_menu: boolean;
 };
 
 export type PloneGobrSocialMediaSettings = {

package/vitest.config.mjs

@@ -10,6 +10,10 @@ export default defineConfig({
       // Alias for absolute imports
       '@kitconcept/volto-light-theme': path.resolve(__dirname, './src'),
       '@kitconcept/volto-light-theme/': path.resolve(__dirname, './src/'),
+      'semantic-ui-react': path.resolve(
+        __dirname,
+        './src/__mocks__/semantic-ui-react.ts',
+      ),
     },
   },
   server: {

package/razzle.extend.js

@@ -1,38 +0,0 @@
-const plugins = (defaultPlugins) => {
-  const newPlugins = defaultPlugins.filter((plugin) => plugin !== 'scss');
-  newPlugins.push({
-    name: 'scss',
-    options: {
-      sass: {
-        dev: {
-          sassOptions: {
-            includePaths: ['node_modules'],
-            outputStyle: 'expanded',
-            sourceMap: true,
-            silenceDeprecations: ['legacy-js-api', 'mixed-decls', 'import'],
-            quietDeps: true,
-          },
-        },
-        prod: {
-          sassOptions: {
-            includePaths: ['node_modules'],
-            outputStyle: 'expanded',
-            sourceMap: true,
-            silenceDeprecations: ['legacy-js-api', 'mixed-decls', 'import'],
-            quietDeps: true,
-          },
-        },
-      },
-    },
-  });
-  return newPlugins;
-};
-
-const modify = (config, { target, dev }, webpack) => {
-  return config;
-};
-
-module.exports = {
-  plugins,
-  modify,
-};

package/src/components/Blocks/schema.js

@@ -1,44 +0,0 @@
-import { addStyling } from '@plone/volto/helpers/Extensions/withBlockSchemaEnhancer';
-import { defineMessages } from 'react-intl';
-import config from '@plone/volto/registry';
-
-const messages = defineMessages({
-  backgroundColor: {
-    id: 'Background color',
-    defaultMessage: 'Background color',
-  },
-});
-
-export const defaultStylingSchema = ({ schema, formData, intl }) => {
-  const themes =
-    config.blocks?.blocksConfig?.[formData['@type']]?.themes ||
-    config.blocks.themes;
-
-  const defaultTheme =
-    config.blocks?.blocksConfig?.[formData['@type']]?.defaultTheme ||
-    // The default color is the first color in the themes list
-    config.blocks.themes?.[0].name;
-
-  addStyling({ schema, intl });
-
-  const stylingIndex = schema.fieldsets.findIndex(
-    (item) => item.id === 'styling',
-  );
-  schema.fieldsets[stylingIndex].fields = [
-    ...schema.fieldsets[stylingIndex].fields,
-    'theme',
-  ];
-  schema.properties.theme = {
-    widget: 'color_picker',
-    title: intl.formatMessage(messages.backgroundColor),
-    themes,
-    default: defaultTheme,
-  };
-
-  return schema;
-};
-
-export const removeStylingSchema = ({ schema, formData, intl }) => {
-  schema.fieldsets = schema.fieldsets.filter((item) => item.id !== 'styling');
-  return schema;
-};

package/src/components/Breadcrumbs/Breadcrumbs.jsx

@@ -1,118 +0,0 @@
-// SemanticUI-free pre-@plone/components
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-import { Link } from 'react-router-dom';
-import { defineMessages, injectIntl } from 'react-intl';
-import { Container } from '@plone/components';
-
-import Icon from '@plone/volto/components/theme/Icon/Icon';
-import { getBreadcrumbs } from '@plone/volto/actions/breadcrumbs/breadcrumbs';
-import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
-import { hasApiExpander } from '@plone/volto/helpers/Utils/Utils';
-
-import homeSVG from '@plone/volto/icons/home.svg';
-
-const messages = defineMessages({
-  home: {
-    id: 'Home',
-    defaultMessage: 'Home',
-  },
-  breadcrumbs: {
-    id: 'Breadcrumbs',
-    defaultMessage: 'Breadcrumbs',
-  },
-});
-
-/**
- * Breadcrumbs container class.
- */
-export class BreadcrumbsComponent extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    getBreadcrumbs: PropTypes.func.isRequired,
-    pathname: PropTypes.string.isRequired,
-    root: PropTypes.string,
-    items: PropTypes.arrayOf(
-      PropTypes.shape({
-        title: PropTypes.string,
-        url: PropTypes.string,
-      }),
-    ).isRequired,
-  };
-
-  componentDidMount() {
-    if (!hasApiExpander('breadcrumbs', getBaseUrl(this.props.pathname))) {
-      this.props.getBreadcrumbs(getBaseUrl(this.props.pathname));
-    }
-  }
-
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.pathname !== this.props.pathname) {
-      if (!hasApiExpander('breadcrumbs', getBaseUrl(this.props.pathname))) {
-        this.props.getBreadcrumbs(getBaseUrl(nextProps.pathname));
-      }
-    }
-  }
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      <div
-        role="navigation"
-        aria-label={this.props.intl.formatMessage(messages.breadcrumbs)}
-        className="breadcrumbs"
-      >
-        <Container layout>
-          <div className="breadcrumb">
-            <Link
-              to={this.props.root || '/'}
-              className="home"
-              title={this.props.intl.formatMessage(messages.home)}
-            >
-              <Icon name={homeSVG} size="25px" />
-            </Link>
-            {this.props.items.map((item, index, items) => [
-              <div className="divider" key={`divider-${item.url}`} />,
-              index < items.length - 1 ? (
-                <Link key={item.url} to={item.url} className="section">
-                  {item.title}
-                </Link>
-              ) : (
-                <div className="section active" key={item.url}>
-                  {item.title}
-                </div>
-              ),
-            ])}
-          </div>
-        </Container>
-      </div>
-    );
-  }
-}
-
-export default compose(
-  injectIntl,
-  connect(
-    (state) => ({
-      items: state.breadcrumbs.items,
-      root: state.breadcrumbs.root,
-    }),
-    { getBreadcrumbs },
-  ),
-)(BreadcrumbsComponent);

package/src/components/Widgets/AlignWidget.tsx

@@ -1,84 +0,0 @@
-import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
-import ButtonsWidget, {
-  type ActionInfo,
-  type ButtonsWidgetProps,
-} from './Buttons';
-import imageLeftSVG from '@plone/volto/icons/image-left.svg';
-import imageRightSVG from '@plone/volto/icons/image-right.svg';
-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({
-  left: {
-    id: 'Left',
-    defaultMessage: 'Left',
-  },
-  right: {
-    id: 'Right',
-    defaultMessage: 'Right',
-  },
-  center: {
-    id: 'Center',
-    defaultMessage: 'Center',
-  },
-  narrow: {
-    id: 'Narrow',
-    defaultMessage: 'Narrow',
-  },
-  wide: {
-    id: 'Wide',
-    defaultMessage: 'Wide',
-  },
-  full: {
-    id: 'Full',
-    defaultMessage: 'Full',
-  },
-});
-
-export const defaultActionsInfo = ({
-  intl,
-}: {
-  intl: IntlShape;
-}): Record<string, ActionInfo> => ({
-  left: [imageLeftSVG, intl.formatMessage(messages.left)],
-  center: [imageFitSVG, intl.formatMessage(messages.center)],
-  right: [imageRightSVG, intl.formatMessage(messages.right)],
-  narrow: [imageNarrowSVG, intl.formatMessage(messages.narrow)],
-  wide: [imageWideSVG, intl.formatMessage(messages.wide)],
-  full: [imageFullSVG, intl.formatMessage(messages.full)],
-});
-
-type AlignWidgetProps = ButtonsWidgetProps & {
-  defaultAction?: string;
-};
-
-const AlignWidget = (props: AlignWidgetProps) => {
-  const intl = useIntl();
-
-  const {
-    actions = ['left', 'center', 'right', 'full'],
-    actionsInfoMap,
-    default: defaultValue,
-    defaultAction,
-  } = props;
-
-  const actionsInfo = {
-    ...defaultActionsInfo({ intl }),
-    ...actionsInfoMap,
-  };
-
-  return (
-    <ButtonsWidget
-      {...props}
-      actions={actions}
-      actionsInfoMap={actionsInfo}
-      default={defaultValue ?? defaultAction ?? 'center'}
-    />
-  );
-};
-
-export default AlignWidget;

package/src/components/Widgets/BlockAlignment.tsx

@@ -1,88 +0,0 @@
-import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
-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';
-import type { IntlShape } from 'react-intl';
-import type { StyleDefinition } from '@plone/types';
-
-const messages = defineMessages({
-  left: {
-    id: 'Left',
-    defaultMessage: 'Left',
-  },
-  right: {
-    id: 'Right',
-    defaultMessage: 'Right',
-  },
-  center: {
-    id: 'Center',
-    defaultMessage: 'Center',
-  },
-});
-
-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)],
-});
-
-const DEFAULT_ACTIONS: StyleDefinition[] = [
-  {
-    style: {
-      '--block-alignment': 'var(--align-left)',
-    },
-    name: 'left',
-    label: 'Left',
-  },
-  {
-    style: {
-      '--block-alignment': 'var(--align-center)',
-    },
-    name: 'center',
-    label: 'Center',
-  },
-  {
-    style: {
-      '--block-alignment': 'var(--align-right)',
-    },
-    name: 'right',
-    label: 'Right',
-  },
-];
-
-const BlockAlignmentWidget = (props: ButtonsWidgetProps) => {
-  const intl = useIntl();
-
-  const { actions = DEFAULT_ACTIONS, actionsInfoMap, filterActions } = props;
-  const filteredActions =
-    filterActions && filterActions.length > 0
-      ? actions.filter((action) => {
-          const actionName = typeof action === 'string' ? action : action.name;
-          return filterActions.includes(actionName);
-        })
-      : actions;
-
-  const actionsInfo = {
-    ...defaultActionsInfo({ intl }),
-    ...actionsInfoMap,
-  };
-
-  return (
-    <ButtonsWidget
-      {...props}
-      actions={filteredActions}
-      actionsInfoMap={actionsInfo}
-    />
-  );
-};
-
-export default BlockAlignmentWidget;

package/src/components/Widgets/BlockWidth.tsx

@@ -1,101 +0,0 @@
-import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
-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 { StyleDefinition } from '@plone/types';
-
-const messages = defineMessages({
-  narrow: {
-    id: 'Narrow',
-    defaultMessage: 'Narrow',
-  },
-  default: {
-    id: 'Default',
-    defaultMessage: 'Default',
-  },
-  layout: {
-    id: 'Layout',
-    defaultMessage: 'Layout',
-  },
-  full: {
-    id: 'Full',
-    defaultMessage: 'Full',
-  },
-});
-
-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)],
-  full: [imageFullSVG, intl.formatMessage(messages.full)],
-});
-
-const DEFAULT_ACTIONS: StyleDefinition[] = [
-  {
-    style: {
-      '--block-width': 'var(--narrow-container-width)',
-    },
-    name: 'narrow',
-    label: 'Narrow',
-  },
-  {
-    style: {
-      '--block-width': 'var(--default-container-width)',
-    },
-    name: 'default',
-    label: 'Default',
-  },
-  {
-    style: {
-      '--block-width': 'var(--layout-container-width)',
-    },
-    name: 'layout',
-    label: 'Layout',
-  },
-  {
-    style: {
-      '--block-width': 'unset',
-    },
-    name: 'full',
-    label: 'Full',
-  },
-];
-
-const BlockWidthWidget = (props: ButtonsWidgetProps) => {
-  const intl = useIntl();
-
-  const { actions = DEFAULT_ACTIONS, actionsInfoMap, filterActions } = props;
-  const filteredActions =
-    filterActions && filterActions.length > 0
-      ? actions.filter((action) => {
-          const actionName = typeof action === 'string' ? action : action.name;
-          return filterActions.includes(actionName);
-        })
-      : actions;
-
-  const actionsInfo = {
-    ...defaultActionsInfo({ intl }),
-    ...actionsInfoMap,
-  };
-
-  return (
-    <ButtonsWidget
-      {...props}
-      actions={filteredActions}
-      actionsInfoMap={actionsInfo}
-    />
-  );
-};
-
-export default BlockWidthWidget;