change(banner): added background gradient, share popup, metadata show…

… and hide #136
eea · Apr 1, 2022 · 2f5dcca · 2f5dcca
2 parents dbc3ace + 26254ff
commit 2f5dcca
Show file tree

Hide file tree

Showing 4 changed files with 228 additions and 55 deletions.
diff --git a/src/ui/Banner/Banner.jsx b/src/ui/Banner/Banner.jsx
@@ -4,29 +4,29 @@ import PropTypes from 'prop-types';
 
 Banner.propTypes = {
   title: PropTypes.string,
-  info: PropTypes.string,
   image: PropTypes.bool,
 };
 
 function Banner({ image_url, image, children }) {
   return (
     <div className="eea banner">
       <div
-        className="image"
+        className={image ? 'image' : ''}
         style={image ? { backgroundImage: `url(${image_url})` } : {}}
-      ></div>
-      <div className="gradient">
-        <Container>{children}</Container>
+      >
+        <div className="gradient">
+          <Container>{children}</Container>
+        </div>
       </div>
     </div>
   );
 }
 
-Banner.Action = function ({ id, title, icon, onClick, className }) {
+Banner.Action = function ({ id, title, icon, onClick, className, color }) {
   return (
     <div className="action">
       <Button className={className} basic inverted onClick={onClick}>
-        <Icon name={icon}></Icon>
+        <Icon className={icon} color={color}></Icon>
         <span className="mobile hidden">{title}</span>
       </Button>
     </div>
@@ -51,4 +51,9 @@ Banner.Content = ({ children, actions }) => {
 Banner.Title = ({ children }) => <p className="title">{children}</p>;
 Banner.Metadata = ({ children }) => <p className="metadata">{children}</p>;
 
+Banner.MetadataField = ({ hidden, type = 'text', label, value, title }) => {
+  if (hidden || !value) return '';
+  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
@@ -2,6 +2,7 @@ import React from 'react';
 import Banner from './Banner';
 // eslint-disable-next-line import/no-unresolved
 import imgUrl from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/banner.png';
+import { Popup } from 'semantic-ui-react';
 
 export default {
   title: 'Components/Page Header',
@@ -14,11 +15,11 @@ export default {
         type: { summary: 'string' },
       },
     },
-    info: {
-      description: 'banner secondary info',
+    metadata: {
+      description: 'banner metadata',
       table: {
         defaultValue: { summary: '""' },
-        type: { summary: 'string' },
+        type: { summary: 'object' },
       },
     },
     image: {
@@ -28,6 +29,20 @@ export default {
         type: { summary: 'boolean' },
       },
     },
+    hideShareButton: {
+      description: 'hide/show share button',
+      table: {
+        defaultValue: { summary: '""' },
+        type: { summary: 'boolean' },
+      },
+    },
+    hideDownloadButton: {
+      description: 'hide/show download button',
+      table: {
+        defaultValue: { summary: '""' },
+        type: { summary: 'boolean' },
+      },
+    },
   },
 };
 
@@ -36,28 +51,71 @@ const Template = (args) => (
     <Banner.Content
       actions={
         <>
-          <Banner.Action
-            icon="bookmark outline"
-            title="Bookmark"
-            className="bookmark"
-          />
-          <Banner.Action
-            icon="download"
-            title="Download"
-            className="download"
-          />
+          {' '}
+          {!args.hideShareButton && (
+            <Popup
+              className="share-popup"
+              trigger={
+                <Banner.Action
+                  icon="ri-share-fill"
+                  title="Share"
+                  className="share"
+                />
+              }
+              content={() => (
+                <>
+                  <p>Share to:</p>
+                  <div className="actions">
+                    <Banner.Action icon="ri-facebook-fill" />
+                    <Banner.Action icon="ri-twitter-fill" />
+                    <Banner.Action icon="ri-linkedin-fill" />
+                    <Banner.Action icon="blogger b" />
+                    <Banner.Action icon="ri-reddit-line" />
+                    <Banner.Action icon="stumbleupon circle" />
+                  </div>
+                </>
+              )}
+              position="top center"
+              basic
+            />
+          )}
+          {!args.hideDownloadButton && (
+            <Banner.Action
+              icon="ri-download-2-line"
+              title="Download"
+              className="download"
+            />
+          )}
         </>
       }
     >
       <Banner.Title>{args.title}</Banner.Title>
-      <Banner.Metadata>{args.info}</Banner.Metadata>
+      {args.metadata && (
+        <Banner.Metadata>
+          <>
+            {args.metadata.map((meta, index) => (
+              <Banner.MetadataField
+                {...meta}
+                key={index}
+              ></Banner.MetadataField>
+            ))}
+          </>
+        </Banner.Metadata>
+      )}
     </Banner.Content>
   </Banner>
 );
 
 export const Default = Template.bind({});
 Default.args = {
   title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-  info: 'Briefing | Published Date | Modified Date | 5 min read',
+  metadata: [
+    { hidden: false, value: 'Briefing', type: 'type' },
+    { hidden: false, value: 'Published Date', type: 'date' },
+    { hidden: false, value: 'Modified Date', type: 'date' },
+    { hidden: false, value: '5 min read', type: '' },
+  ],
   image: true,
+  hideShareButton: false,
+  hideDownloadButton: false,
 };
diff --git a/theme/themes/eea/extras/banner.less b/theme/themes/eea/extras/banner.less
@@ -7,11 +7,19 @@
       BANNER
 --------------------*/
 
+@font-face {
+  font-display: swap;
+  font-family: 'Archivo';
+  src: url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap')
+    format('truetype');
+}
+
 .eea.banner {
   width: 100%;
   color: @white;
   background: @bannerBackgroundColor;
   position: relative;
+  font-family: 'Archivo', sans-serif;
 
   .gradient {
     background: @backgroundGradient;
@@ -35,7 +43,10 @@
       .metadata {
         font-size: @mobileMetadataFontSize;
         line-height: @mobileMetadataLineHeight;
-        font-weight: @metadataFontWeight;
+
+        .field.type {
+          font-weight: @metadataTypeFontWeight;
+        }
 
         span.field:not(:last-child)::after {
           content: @metadataFieldDividerContent;
@@ -63,7 +74,7 @@
             i.icon {
               opacity: @bannerActionButtonIconOpacity;
               margin: @mobileBannerActionButtonMargin;
-              font-size: @mobileBannerActionButtonFontSize;
+              font-size: @mobileBannerActionButtonIconFontSize;
             }
           }
         }
@@ -74,52 +85,129 @@
     background-repeat: @imageBackgroundRepeat;
     background-size: @imageBackgroundSize;
     background-position: @imageBackgroundPosition;
-    position: absolute;
     width: 100%;
     height: 100%;
+
+    .gradient {
+      background-image: @backgroundGradientWithImage;
+
+      .content {
+        padding: @mobileContentPaddingWithImage;
+      }
+    }
   }
+
+
 }
 
-@media only screen and (min-width: @tabletBreakpoint) {
-  .eea.banner .gradient {
-    .content {
-      padding: @tabletContentPadding;
+/*Share Popup*/
 
-      .title {
-        font-size: @tabletTitleFontSize;
-        font-weight: @titleFontWeight;
-        margin: @tabletTitleMargin;
-        line-height: @tabletTitleLineHeight;
+.ui.popup.share-popup {
+  padding: @sharePopupPadding;
+  filter: @sharePopupFilter;
+
+  p {
+      font-size: @sharePopupFontSize;
+      font-weight: @sharePopupFontWeight;
+      line-height: @sharePopupLineHeight;
+  }
+
+  .actions {
+      flex-flow: column;
+      i.icon {
+          color: @sharePopupActionsIconColor;
       }
 
-      .metadata {
-        font-size: @tabletMetadataFontSize;
-        line-height: @tabletMetadataLineHeight;
+      .action {
+          display:flex;
+          justify-content:center
       }
 
-      .actions {
-        align-items: @tabletActionsAlignItems;
-        flex-direction: @tabletActionsFlexDirection;
+      .ui.button:not(.icon) > .icon:not(.button):not(.dropdown) {
+        margin: @sharePopupActionsIconMargin;
+      }
+  }
+
+}
 
-        .action .ui.basic.inverted.button i.icon {
-          margin: @tabletBannerActionButtonMargin;
-          font-size: @tabletBannerActionButtonFontSize;
+@media only screen and (min-width: @tabletBreakpoint) {
+  .eea.banner {
+    .gradient {
+      .content {
+        padding: @tabletContentPadding;
+
+        .title {
+          font-size: @tabletTitleFontSize;
+          font-weight: @titleFontWeight;
+          margin: @tabletTitleMargin;
+          line-height: @tabletTitleLineHeight;
+        }
+
+        .metadata {
+          font-size: @tabletMetadataFontSize;
+          line-height: @tabletMetadataLineHeight;
+        }
+
+        .actions {
+          align-items: @tabletActionsAlignItems;
+          flex-direction: @tabletActionsFlexDirection;
+
+          .action {
+            min-width:@tabletActionsActionMinWidth;
+
+            .ui.basic.inverted.button i.icon {
+                margin: @tabletBannerActionButtonMargin;
+                font-size: @tabletBannerActionButtonIconFontSize;
+                vertical-align: @bannerActionButtonIconVerticalAlign;
+            }
+          }
         }
       }
     }
+
+    .image .gradient .content {
+      padding: @tabletContentPaddingWithImage;
+    }
+  }
+
+  /*Share Popup*/
+  .ui.popup.share-popup {
+    min-width: @tabletSharePopupMinWidth;
+
+    .actions{
+        flex-flow: row;
+        display: flex;
+        justify-content: space-between;
+
+        .action {
+            display:inherit;
+        }
+    }
+
   }
 }
 
 @media only screen and (min-width: @computerBreakpoint) {
-  .eea.banner .gradient {
-    .content {
-      padding: @computerContentPadding;
+
+  .eea.banner {
+
+    .image {
+
+      .gradient .content {
+        padding: @computerContentPaddingWithImage;
+      }
+    }
+
+    .gradient .content {
+      padding: @computerContentPadding ;
 
       .title {
         font-size: @computerTitleFontSize;
         margin: @computerTitleMargin;
         line-height: @computerTitleLineHeight;
       }
     }
+
   }
+
 }