refactor(banner): sync storybook and Volto component #275 from eea/sy…

…nc-page-banner-theme
eea · Jan 17, 2023 · 4331fb4 · 4331fb4
2 parents e173a0f + 17e592c
commit 4331fb4
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 33 deletions.
diff --git a/src/ui/Banner/Banner.jsx b/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;
diff --git a/src/ui/Banner/Banner.stories.jsx b/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,

diff --git a/theme/themes/eea/extras/banner.less b/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();
-
diff --git a/theme/themes/eea/extras/banner.variables b/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;