volto 16.1 styling changes

CHANGELOG.md

@@ -4,6 +4,24 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [2.2.0](https://github.com/eea/volto-listing-block/compare/2.1.0...2.2.0) - 29 November 2022
+
+#### :bug: Bug Fixes
+
+- fix(labels): wrap labels within a parent div [David Ichim - [`dc78346`](https://github.com/eea/volto-listing-block/commit/dc7834662d77c760c6f4e7eb721caed2baa27d1a)]
+- fix(buttons): check for styles from item styling instead of block styles [David Ichim - [`d5e46cd`](https://github.com/eea/volto-listing-block/commit/d5e46cd596e170bc01d20e2f273eec65f4093813)]
+
+#### :nail_care: Enhancements
+
+- change(item): listing classes to resemble the card classes [David Ichim - [`33bb7ed`](https://github.com/eea/volto-listing-block/commit/33bb7ede253153352fa5ddc3e7fde928102158d2)]
+- change(item): date format to that of card data style [David Ichim - [`45fc3c1`](https://github.com/eea/volto-listing-block/commit/45fc3c101e04903f673e37803184b4acd328b0cf)]
+- change(label): color selection for archived now is applied when isExpired is set [David Ichim - [`00c7999`](https://github.com/eea/volto-listing-block/commit/00c7999c6c590603cdfd069d85fc87feb95f6fea)]
+- change(listing): removed override of volto-block-style [David Ichim - [`7102ea2`](https://github.com/eea/volto-listing-block/commit/7102ea22cbc3e55de0181bd2d34af1a0d3d17b80)]
+
+#### :hammer_and_wrench: Others
+
+- prettier fix and bump package version before release [David Ichim - [`40cdf1d`](https://github.com/eea/volto-listing-block/commit/40cdf1db7f7fae39a2d7bb1a16e31e3279b18846)]
+- upgrade to Volto 16.1.0 [David Ichim - [`c270071`](https://github.com/eea/volto-listing-block/commit/c27007146a7e65911c7bade36f29128c3659323f)]
 ### [2.1.0](https://github.com/eea/volto-listing-block/compare/2.0.1...2.1.0) - 22 November 2022
 
 #### :bug: Bug Fixes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-listing-block",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "@eeacms/volto-listing-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -18,13 +18,13 @@
   },
   "addons": [],
   "dependencies": {
+    "react-resize-detector": "7.1.2",
     "react-slick": "0.29.0",
-    "slick-carousel": "1.8.1",
-    "react-resize-detector": "7.1.2"
+    "slick-carousel": "1.8.1"
   },
   "devDependencies": {
-    "@plone/scripts": "*",
     "@cypress/code-coverage": "^3.10.0",
+    "@plone/scripts": "*",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "md5": "^2.3.0"
   },

src/blocks/Listing/index.js

@@ -28,9 +28,6 @@ const applyConfig = (config) => {
   const { listing } = config.blocks.blocksConfig;
 
   const blacklist = ['summary'];
-  // integration with volto-block-style
-  if (config.settings.integratesBlockStyles)
-    config.settings.integratesBlockStyles.push('listing');
 
   listing.schemaEnhancer = composeSchema(
     moveQueryToFieldset,

src/blocks/Listing/item-templates/ItemTemplates.jsx

@@ -1,6 +1,5 @@
 import cx from 'classnames';
 import { ConditionalLink, FormattedDate } from '@plone/volto/components';
-// import { buildStyleClassNamesFromData } from '@plone/volto/helpers';
 
 import { getVoltoStyles } from '@eeacms/volto-listing-block/schema-utils';
 
@@ -29,8 +28,9 @@ const BodyText = ({ item, hasDate, hasDescription }) => {
             format={{
               year: 'numeric',
               month: 'short',
-              day: 'numeric',
+              day: '2-digit',
             }}
+            locale={'en-gb'}
           />
         </p>
       )}

src/blocks/Listing/schema.js

@@ -59,7 +59,7 @@ const CallToActionSchema = ({ formData }) => {
                 formData?.['@type'] === 'listing' ? 'urlTemplate' : 'href',
               ]
             : []),
-        ], //
+        ],
         title: 'Default',
       },
     ],
@@ -93,8 +93,6 @@ const CallToActionSchema = ({ formData }) => {
 export const setCardModelSchema = (args) => {
   const { formData, schema } = args;
 
-  // console.log('setCardModelSchema', args);
-
   const itemModelSchema = schema.properties.itemModel.schema;
   itemModelSchema.fieldsets[0].fields = [
     ...itemModelSchema.fieldsets[0].fields,
@@ -159,8 +157,6 @@ export const setItemModelSchema = (args) => {
   const { formData, schema } = args;
   const itemModelSchema = schema.properties.itemModel.schema;
 
-  // console.log('setItemModelSchema', args);
-
   itemModelSchema.fieldsets[0].fields = [
     ...itemModelSchema.fieldsets[0].fields,
     'maxTitle',
@@ -234,10 +230,15 @@ export const setCardStylingSchema = ({ schema, intl }) => {
   const itemModelSchema = schema.properties.itemModel;
   const styleSchema = itemModelSchema.schema.properties.styles.schema;
   const fieldset = styleSchema.fieldsets.find(({ id }) => id === 'default');
-  fieldset.fields.push('theme', 'inverted', 'rounded', 'text');
+  fieldset.fields.push(
+    'theme:noprefix',
+    'inverted:bool',
+    'rounded:bool',
+    'text',
+  );
   styleSchema.properties = {
     ...styleSchema.properties,
-    theme: {
+    'theme:noprefix': {
       title: intl.formatMessage(messages.Theme),
       description: intl.formatMessage(messages.ThemeHelp),
       choices: [
@@ -247,12 +248,12 @@ export const setCardStylingSchema = ({ schema, intl }) => {
         ['tertiary', intl.formatMessage(messages.ThemeTertiary)],
       ],
     },
-    inverted: {
+    'inverted:bool': {
       title: intl.formatMessage(messages.Inverted),
       description: intl.formatMessage(messages.InvertedHelp),
       type: 'boolean',
     },
-    rounded: {
+    'rounded:bool': {
       title: intl.formatMessage(messages.Rounded),
       description: intl.formatMessage(messages.RoundedHelp),
       type: 'boolean',

src/components/UniversalCard/fragments/CardExtra.jsx

@@ -16,9 +16,9 @@ const CallToAction = ({ item, itemModel, styles }) => (
     as="a"
     href={getCallToAction(item, itemModel.callToAction)}
     className={
-      styles?.theme
-        ? styles.inverted
-          ? styles.theme + ' inverted'
+      itemModel?.styles['theme:noprefix']
+        ? itemModel?.styles['inverted:bool']
+          ? itemModel?.styles['theme:noprefix'] + ' inverted'
           : 'inverted'
         : 'tertiary inverted'
     }
@@ -40,7 +40,11 @@ const CardExtra = ({ item, itemModel = {}, ...rest }) => {
 
   return show ? (
     <UiCard.Content extra>
-      {showTags && <Tags item={item} itemModel={itemModel} {...rest} />}
+      {showTags && (
+        <div className={'tags labels'}>
+          <Tags item={item} itemModel={itemModel} {...rest} />
+        </div>
+      )}
       {showCallToAction && (
         <CallToAction item={item} itemModel={itemModel} {...rest} />
       )}

src/components/UniversalCard/fragments/CardImage.jsx

@@ -4,7 +4,6 @@ import { ConditionalLink } from '@plone/volto/components';
 import PreviewImage from '@eeacms/volto-listing-block/PreviewImage';
 
 const getLabel = (props) => {
-  // { text: 'new', side: 'left', color: 'green' }
   const { item, itemModel = {} } = props;
   const text = item.isNew ? 'New' : item.isExpired ? 'Archived' : null;
 
@@ -13,7 +12,7 @@ const getLabel = (props) => {
         text,
         side: 'left',
         // TODO: set the colors from css?
-        color: item.review_state === 'archived' ? 'yellow' : 'green',
+        color: item.isExpired ? 'yellow' : 'green',
       }
     : null;
 };

src/less/listing-cards.less

@@ -107,7 +107,7 @@ each(range(5), {
 }
 
 // listing theme styling alongside inverse options
-.listing-item:not(.has--rounded--true) {
+.listing-item:not(.rounded) {
   --image-max-width: 350px;
   --image-max-height: 210px;
 }
@@ -124,33 +124,28 @@ each(range(5), {
   height: var(--image-max-height, auto);
 }
 
-.has--rounded--true[class*='listing'] {
+.listing-item.rounded {
   --image-width: 176px !important;
   --image-height: 176px !important;
   --border-radius: 50%;
 }
 
-.has--theme--primary[class*='listing'] {
+.listing-item.primary {
   --text-color: var(--text-color--primary, #fff);
   --bg-color: var(--background-color, @primaryColor);
 }
 
-.has--theme--secondary[class*='listing'] {
+.listing-item.secondary {
   --text-color: var(--text-color--secondary, #fff);
   --bg-color: var(--background-color, @secondaryColor);
 }
 
-.has--theme--tertiary[class*='listing'] {
+.listing-item.tertiary {
   --text-color: var(--text-color--tertiary, #fff);
   --bg-color: var(--background-color, @tertiaryColor);
 }
 
-.has--inverted--:not(.has--theme--)[class*='listing'] {
-  --text-color: #fff;
-  --theme-padding: 32px 1.5rem;
-}
-
-.has--inverted--true[class*='listing'] {
+.listing-item.inverted {
   --text-color--primary: @primaryColor;
   --text-color--secondary: @secondaryColor;
   --text-color--tertiary: @tertiaryColor;
@@ -167,7 +162,7 @@ each(range(5), {
   flex: 1;
 }
 
-.listing-item:not(.has--rounded--true) {
+.listing-item:not(.rounded) {
   .listing-body {
     flex: 1;
   }