@eeacms/volto-eea-design-system 1.0.0-alpha.10 → 1.0.0-alpha.11

package/CHANGELOG.md

@@ -4,7 +4,38 @@ 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).
 
-### [1.0.0-alpha.10](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.9...1.0.0-alpha.10) - 12 January 2023
+### [1.0.0-alpha.11](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.10...1.0.0-alpha.11) - 17 January 2023
+
+#### :rocket: New Features
+
+- feat(docusaurus): Header and footer elements section #277 [ichim-david - [`0df271c`](https://github.com/eea/volto-eea-design-system/commit/0df271c4c79bd8a24750cfe44d69f32cb04a1b63)]
+
+#### :bug: Bug Fixes
+
+- fix(banner): storybook date input and simplified gradient opacity [David Ichim - [`7674d76`](https://github.com/eea/volto-eea-design-system/commit/7674d767bb770342828d6bea6953ce45b823943f)]
+- fix(banner): re-added title class on banner title [David Ichim - [`6d15799`](https://github.com/eea/volto-eea-design-system/commit/6d157994934c3da9af4e3dd37844f910bddf8377)]
+
+#### :nail_care: Enhancements
+
+- refactor(banner): sync storybook and Volto component #275 from eea/sync-page-banner-theme [ichim-david - [`4331fb4`](https://github.com/eea/volto-eea-design-system/commit/4331fb4a6d5744e7d7d6a001bca91265a22587fd)]
+- change(banner): removed margin from title [David Ichim - [`17e592c`](https://github.com/eea/volto-eea-design-system/commit/17e592c4f3fd16a78069af50574e2ac608166a0f)]
+- refactor(banner): sync storybook and Volto component [nileshgulia1 - [`c9087cc`](https://github.com/eea/volto-eea-design-system/commit/c9087cc8edc3fb27e0b96b509354861ec306f22a)]
+
+#### :house: Documentation changes
+
+- docs(footer): updates on header elements [Dora Anastasiou - [`b41c550`](https://github.com/eea/volto-eea-design-system/commit/b41c550475dc5a2eefcad5d75439601d079613e2)]
+- docs(footer): add elements anatomy [Dora Anastasiou - [`d9f0872`](https://github.com/eea/volto-eea-design-system/commit/d9f0872f93a6f7572f798b2c001d3af00eb282e3)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.0.0-alpha.11 [Alin Voinea - [`07e8f85`](https://github.com/eea/volto-eea-design-system/commit/07e8f858b0bdeaa6a348c0bfc2b785f26017e1ea)]
+- renamed image elements as requested in review [David Ichim - [`8541fb6`](https://github.com/eea/volto-eea-design-system/commit/8541fb6739d3c935ed8d44a220114546b2aef682)]
+- update(gradient): use 8deg angle [nileshgulia1 - [`6fd597d`](https://github.com/eea/volto-eea-design-system/commit/6fd597d8d7a83fdf8a27939e4c69dfc3975b6a81)]
+- update(gradiant): make it 0deg [nileshgulia1 - [`1bb2696`](https://github.com/eea/volto-eea-design-system/commit/1bb2696375eef233b509e27d9d464b8343421430)]
+- remove(banner-gradiant): image gradiant in favour of text [nileshgulia1 - [`1b58520`](https://github.com/eea/volto-eea-design-system/commit/1b58520490be5e17ea4ce6fc98329d467dad3960)]
+- remove(comment) referencing old verison of title [nileshgulia1 - [`4226d42`](https://github.com/eea/volto-eea-design-system/commit/4226d42e34b119e057cf4e9878b6a99172cb976a)]
+- add(banner): banner title css [nileshgulia1 - [`d003247`](https://github.com/eea/volto-eea-design-system/commit/d0032474d2b57eb63a4b50a882ced2ee743a48e6)]
+### [1.0.0-alpha.10](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.9...1.0.0-alpha.10) - 13 January 2023
 
 #### :bug: Bug Fixes
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "1.0.0-alpha.10",
+  "version": "1.0.0-alpha.11",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/ui/Banner/Banner.jsx

@@ -1,22 +1,68 @@
 import React from 'react';
 import { Container, Icon, Button, Grid } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
+import { formatDate } from '@plone/volto/helpers/Utils/Date';
+import config from '@plone/volto/registry';
 
 Banner.propTypes = {
   title: PropTypes.string,
   image: PropTypes.bool,
 };
 
-function Banner({ image_url, image, children }) {
+const socialPlatforms = {
+  facebook: {
+    shareLink: (url) => `https://facebook.com/sharer.php?u=${url}`,
+  },
+  twitter: {
+    shareLink: (url) => `https://www.twitter.com/share?url=${url}`,
+  },
+  linkedin: {
+    shareLink: (url) =>
+      `https://www.linkedin.com/sharing/share-offsite/?url=${url}`,
+  },
+  reddit: {
+    shareLink: (url, title) => `https://reddit.com/submit?url=${url}`,
+  },
+};
+
+export const getImageSource = (image) => {
+  if (image?.download) return image.download;
+  if (image?.encoding)
+    return `data:${image['content-type']};${image['encoding']},${image['data']}`;
+  return null;
+};
+
+export const sharePage = (url, platform) => {
+  if (!socialPlatforms[platform]) return;
+  const link = document.createElement('a');
+  link.setAttribute('href', socialPlatforms[platform].shareLink(url));
+  link.setAttribute('target', '_blank');
+  link.setAttribute('rel', 'noreferrer');
+  link.click();
+};
+
+function Banner({ image, metadata, properties, children, ...rest }) {
+  if (image) {
+    //extract Lead image from page content.
+    const content = metadata || properties;
+    const imageUrl = getImageSource(content['image']) ?? image;
+    return (
+      <div className="eea banner">
+        <div
+          className={imageUrl ? 'image' : ''}
+          style={imageUrl ? { backgroundImage: `url(${imageUrl})` } : {}}
+        >
+          <div className="gradient">
+            <Container>{children}</Container>
+          </div>
+        </div>
+      </div>
+    );
+  }
   return (
     <div className="eea banner">
-      <div
-        className={image ? 'image' : ''}
-        style={image ? { backgroundImage: `url(${image_url})` } : {}}
-      >
-        <div className="gradient">
-          <Container>{children}</Container>
-        </div>
+      <div className="gradient">
+        <Container>{children}</Container>
       </div>
     </div>
   );
@@ -48,18 +94,31 @@ Banner.Content = ({ children, actions }) => {
   );
 };
 
-Banner.Title = ({ children }) => <p className="title">{children}</p>;
+Banner.Title = ({ children }) => {
+  return <h1 className="documentFirstHeading title">{children}</h1>;
+};
 Banner.Subtitle = ({ children }) => <p className="subtitle">{children}</p>;
 Banner.Metadata = ({ children }) => <p className="metadata">{children}</p>;
 
 Banner.MetadataField = ({ hidden, type = 'text', label, value, title }) => {
+  const locale = config.settings.dateLocale || 'en-gb';
   if (hidden || !value) return '';
-  return (
-    <span className={`field ${type}`}>
-      {label && <>{label}: </>}
-      {value}
-    </span>
-  );
+  if (type === 'date' && value)
+    return (
+      <span className={`field ${type}`} title={title?.replace('{}', value)}>
+        {label}{' '}
+        {formatDate({
+          date: value,
+          format: {
+            year: 'numeric',
+            month: 'short',
+            day: '2-digit',
+          },
+          locale: locale,
+        })}
+      </span>
+    );
+  return <span className={`field ${type}`}>{value}</span>;
 };
 
 export default Banner;

package/src/ui/Banner/Banner.stories.jsx

@@ -74,7 +74,7 @@ export default {
 };
 
 const Template = (args) => (
-  <Banner {...args} image_url={args.image ? imgUrl : null}>
+  <Banner {...args} image={args.image ? imgUrl : null}>
     <Banner.Content
       actions={
         <>
@@ -143,8 +143,8 @@ Default.args = {
   subtitle: 'Lorem ipsum dolor',
   metadata: [
     { hidden: false, value: 'Briefing', type: 'type' },
-    { hidden: false, value: 'Published Date', type: 'date' },
-    { hidden: false, value: 'Modified Date', type: 'date' },
+    { hidden: false, label: 'Published', value: '25 Nov 2022', type: 'date' },
+    { hidden: false, label: 'Modified', value: '29 Nov 2022', type: 'date' },
     { hidden: false, value: '5 min read', type: '' },
   ],
   image: true,

package/theme/themes/eea/extras/banner.less

@@ -91,13 +91,20 @@
     background-size: @imageBackgroundSize;
 
     .gradient {
-      background-image: @backgroundGradientWithImage;
-
       .content {
         padding: @mobileContentPaddingWithImage;
       }
     }
   }
+
+  .documentFirstHeading {
+    border-bottom: @titleBorderBottom;
+    margin-bottom: @titleMarginBottom;
+
+    &::before {
+      content: @titleBorderBottom;
+    }
+  }
 }
 
 /*Share Popup*/
@@ -218,4 +225,3 @@
 }
 
 .loadUIOverrides();
-

package/theme/themes/eea/extras/banner.variables

@@ -10,8 +10,7 @@
 @imageBackgroundPosition : center;
 
 /* Gradient */
-@backgroundGradient           : linear-gradient(8deg, #0c1b28b3 32%, rgba(0, 36, 78, 0) 80%);
-@backgroundGradientWithImage  : linear-gradient(0deg, rgb(20, 33, 44, 90%) 24%, rgba(0, 36, 78, 0) 80%);
+@backgroundGradient           : linear-gradient(8deg,rgba(12,27,40, 0.7) 32%,rgba(0,36,78,0) 80%);
 @backgroundGradientOpacity    : 1;
 
 /* Content */
@@ -26,15 +25,18 @@
 /* Title */
 @titleFontWeight           : @bold;
 @titleMaxWidth             : 100%;
-@mobileTitleFontSize       : 1.25rem;
-@tabletTitleFontSize       : 2.25rem;
-@computerTitleFontSize     : 3rem;
-@mobileTitleLineHeight     : 1.375rem;
-@tabletTitleLineHeight     : 2.75rem;
-@computerTitleLineHeight   : 3.5rem;
-@mobileTitleMargin         : 0 0 0.5rem 0;
-@tabletTitleMargin         : 0 0 0.813rem 0;
-@computerTitleMargin       : 0 0 1.125rem 0;
+@titleMarginBottom         : 0;
+@titleBorderBottom         : none;
+@mobileTitleFontSize       : @mobileH1;
+@tabletTitleFontSize       : @h2;
+@computerTitleFontSize     : @h1;
+@mobileTitleLineHeight     : @headerLineHeight;
+@tabletTitleLineHeight     : @headerLineHeight;
+@computerTitleLineHeight   : @headerLineHeight;
+@mobileTitleMargin         : 0 0 0 0;
+@tabletTitleMargin         : 0 0 0 0;
+@computerTitleMargin       : 0 0 0 0;
+
 
 /* Subtitle */
 @subtitleFontWeight        : @bold;
@@ -85,4 +87,4 @@
 @sharePopupLineHeight: 1rem;
 // Actions
 @sharePopupActionsIconColor: @pineGreen;
-@sharePopupActionsIconMargin: 0;
+@sharePopupActionsIconMargin: 0;