refactor(pullquote): introduce meta section, use remix icons, integra…

…te slate callouts #119
eea · Mar 25, 2022 · fd740c9 · fd740c9
2 parents c4d36ef + 9e0bb49
commit fd740c9
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 44 deletions.
diff --git a/src/ui/Pullquote/Pullquote.jsx b/src/ui/Pullquote/Pullquote.jsx
@@ -11,25 +11,34 @@ Pullquote.propTypes = {
 function Pullquote({ children, ...rest }) {
   return (
     <blockquote className={`eea pullquote ${rest.quotePosition}`}>
-      <Icon name="quote left"></Icon>
       <div className="content">{children}</div>
-      <Icon className="quote right" name="quote right"></Icon>
     </blockquote>
   );
 }
 
-Pullquote.Quote = ({ children, as: As, ...rest }) =>
-  As ? (
-    <As className="quote" {...rest}>
-      {children}
-    </As>
-  ) : (
-    <h4 className="quote">{children}</h4>
-  );
+Pullquote.Quote = ({ children, as: As, ...rest }) => (
+  <div className="quotes wrapper">
+    <Icon className="ri-double-quotes-l"></Icon>
+    {As ? (
+      <As className="quote" {...rest}>
+        {children}
+      </As>
+    ) : (
+      <p className="quote">{children}</p>
+    )}
+    <Icon className="ri-double-quotes-r"></Icon>
+  </div>
+);
 
 Pullquote.Author = ({ children, ...rest }) => (
   <p className="author" {...rest}>
     {children}
   </p>
 );
+
+Pullquote.Metadata = ({ children, ...rest }) => (
+  <p className="meta" {...rest}>
+    {children}
+  </p>
+);
 export default Pullquote;
diff --git a/src/ui/Pullquote/Pullquote.stories.jsx b/src/ui/Pullquote/Pullquote.stories.jsx
@@ -20,6 +20,13 @@ export default {
         defaultValue: { summary: '""' },
       },
     },
+    metadata: {
+      description: 'quote metadata',
+      type: { name: 'string' },
+      table: {
+        defaultValue: { summary: '""' },
+      },
+    },
     content: {
       description: 'content that quote floats around',
       type: { name: 'string' },
@@ -47,6 +54,7 @@ export const Default = (args) => (
     <Pullquote quotePosition={args.quotePosition}>
       <Pullquote.Quote>{args.quote}</Pullquote.Quote>
       <Pullquote.Author>{args.source}</Pullquote.Author>
+      <Pullquote.Metadata>{args.metadata}</Pullquote.Metadata>
     </Pullquote>
     <p>{args.content}</p>
     <p>{args.content}</p>
@@ -58,8 +66,9 @@ export const Default = (args) => (
 
 Default.args = {
   quote:
-    'Europe has made considerable progress over recent decades in cleaning the air that we breathe, but air pollution remains a serious problem and continues to damage our health and the environment.',
-  source: 'President Juncker',
+    'Nulla viverra magna curabitur leo nisl scelerisque. Velit fusce sed sem ut. Molestie fermentum congue nunc cras posuere orci. Duis eu ultrices nisi, est a pellentesque eget tellus mauris. Amet, tortor quis pellentesque suspendisse convallis lacinia. Aliquam.',
+  source: 'Arthur Abbott',
+  metadata: 'EEA Analyst',
   content:
     'Cursus turpis massa tincidunt dui ut ornare lectus sit amet. Venenatis tellus in metus vulputate eu. Sagittis id consectetur purus ut. Ultricies mi eget mauris pharetra et ultrices. Eu lobortis elementum nibh tellus molestie nunc non blandit massa. Mattis pellentesque id nibh tortor id aliquet. Amet nisl purus in mollis nunc. Quisque non tellus orci ac auctor augue mauris. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget.',
   quotePosition: 'left',
@@ -70,6 +79,7 @@ export const Reversed = (args) => (
     <p>{args.content}</p>
     <Pullquote quotePosition={args.quotePosition}>
       <Pullquote.Author>{args.source}</Pullquote.Author>
+      <Pullquote.Metadata>{args.metadata}</Pullquote.Metadata>
       <Pullquote.Quote>{args.quote}</Pullquote.Quote>
     </Pullquote>
     <p>{args.content}</p>
@@ -82,8 +92,9 @@ export const Reversed = (args) => (
 
 Reversed.args = {
   quote:
-    'Europe has made considerable progress over recent decades in cleaning the air that we breathe, but air pollution remains a serious problem and continues to damage our health and the environment.',
-  source: 'President Juncker',
+    'Nulla viverra magna curabitur leo nisl scelerisque. Velit fusce sed sem ut. Molestie fermentum congue nunc cras posuere orci. Duis eu ultrices nisi, est a pellentesque eget tellus mauris. Amet, tortor quis pellentesque suspendisse convallis lacinia. Aliquam.',
+  source: 'Arthur Abbott',
+  metadata: 'EEA Analyst',
   content:
     'Cursus turpis massa tincidunt dui ut ornare lectus sit amet. Venenatis tellus in metus vulputate eu. Sagittis id consectetur purus ut. Ultricies mi eget mauris pharetra et ultrices. Eu lobortis elementum nibh tellus molestie nunc non blandit massa. Mattis pellentesque id nibh tortor id aliquet. Amet nisl purus in mollis nunc. Quisque non tellus orci ac auctor augue mauris. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget.',
   quotePosition: 'left',

diff --git a/theme/themes/eea/extras/blockquote.less b/theme/themes/eea/extras/blockquote.less
@@ -7,6 +7,17 @@
             Blockquote
 *******************************/
 
+blockquote.callout, p.callout {
+  border: @calloutBorder;
+  box-shadow: @calloutBoxShadow;
+  border-radius: @calloutBorderRadius;
+  padding-top: @calloutPadding;
+  padding-bottom: @calloutPadding;
+  border-left: @mobileBlockquoteBorderLeft;
+  color: @quoteColor;
+  font-size: @mobileQuoteFontSize;
+}
+
 .eea.blockquote {
   border-left: @mobileBlockquoteBorderLeft;
 
@@ -44,6 +55,11 @@
 }
 
 @media only screen and (min-width: @tabletBreakpoint) {
+  blockquote.callout, p.callout {
+    border-left: @tabletBlockquoteBorderLeft;
+    font-size: @tabletQuoteFontSize;
+  }
+
   .eea.blockquote {
     border-left: @tabletBlockquoteBorderLeft;
     .quote {
@@ -57,6 +73,10 @@
 }
 
 @media only screen and (min-width: @computerBreakpoint) {
+  blockquote.callout, p.callout {
+    font-size: @computerQuoteFontSize;
+  }
+
   .eea.blockquote .quote {
     margin: @computerQuoteMargin;
     font-size: @computerQuoteFontSize;

diff --git a/theme/themes/eea/extras/blockquote.variables b/theme/themes/eea/extras/blockquote.variables
@@ -27,3 +27,9 @@
 @tabletMetaFontSize   : @h6;
 @computerMetaFontSize : @h5;
 @metaAlignSelf        : start;
+
+/* Callout */
+@calloutBorder        : none;
+@calloutBoxShadow     : none;
+@calloutBorderRadius  : 0;
+@calloutPadding       : 0;
diff --git a/theme/themes/eea/extras/pullquote.less b/theme/themes/eea/extras/pullquote.less
@@ -9,40 +9,68 @@
 
 .eea.pullquote {
   padding: @pullquotePadding;
-  margin: @pullquoteMobileMargin;
+  margin: @pullquoteMargin;
   word-break: @contentWordBreak;
   hyphens: @contentWordBreakHyphens;
-  .content {
-    margin: @contentMargin;
-    .author {
-      text-align: @authorTextAlign;
+
+  .quotes.wrapper {
+    display: flex;
+
+    .quote {
+      padding: @mobileQuotePadding;
+    }
+
+    i.icon {
+      display: flex;
+      align-items: flex-end;
+      font-size: @mobileQuoteIconSize;
+      color: @quoteIconColor;
+    }
+
+    i.icomn:first-child {
+      align-self:flex-start
     }
+
+    i.icon:last-child {
+      align-self: flex-end;
+    } 
   }
-  i.icon {
-    font-size: @quoteIconSize;
-    color: @quoteIconColor;
+
+  .author {
+    color: @authorTextColor;
+    text-align: @authorTextAlign;
+    font-weight: @authorFontWeight;
+    font-size: @authorFontSize;
+    margin: @authorMargin;
   }
-  .quote.right {
-    float: @quoteDownIconFloat;
+
+  .meta {
+    text-align: @metaTextAlign;
+    font-weight: @metaFontWeight;
+    font-size: @metaFontSize;
   }
 }
 
 @media only screen and (min-width: @tabletBreakpoint) {
   .eea.pullquote {
-    .content {
-      margin: @pullquoteMargin;
+    .quotes.wrapper {
+      .quote {
+        padding :@tabletQuotePadding;
+      }
+
+      i.icon {
+        font-size: @tabletQuoteIconSize;
+      }
     }
   }
   .eea.pullquote.left {
     width: @maxWidthOnFloat;
-    padding: @paddingLeftFloat;
+    padding: @pullquoteFloatLeftPadding;
     float: left;
   }
   .eea.pullquote.right {
     width: @maxWidthOnFloat;
-    padding: @paddingRightFloat;
+    padding: @pullquoteFloatRightPadding;
     float: right;
   }
 }
-
-.loadUIOverrides();
diff --git a/theme/themes/eea/extras/pullquote.variables b/theme/themes/eea/extras/pullquote.variables
@@ -3,22 +3,32 @@
 *******************************/
 
 /* Body */
-@pullquotePadding       : @relative10px 0 @relative50px;
-@pullquoteMobileMargin  : 0;
-@pullquoteMargin        : 0 2rem;
-@maxWidthOnFloat        : 400px;
-@paddingLeftFloat       : 0 1.5rem 1rem 0;
-@paddingRightFloat      : 0 0 1rem 1.5rem;
-@contentWordBreak       : break-word;
-@contentWordBreakHyphens: manual;
+@pullquotePadding           : @largeGap 0;
+@pullquoteFloatLeftPadding  : @largeGap @largeGap @largeGap 0;
+@pullquoteFloatRightPadding : @largeGap 0 @largeGap @largeGap;
+@pullquoteMargin            : 0;
+@maxWidthOnFloat            : 50%;
+@contentWordBreak           : break-word;
+@contentWordBreakHyphens    : manual;
 
-/* Content */
-@contentMargin: 0;
+/* Quote paragraph */
+@mobileQuotePadding  : 0;
+@tabletQuotePadding  : 0.5rem 0 1rem;
 
 /* Author */
-@authorTextAlign: right;
+@authorTextColor     : @darkCyan;
+@authorTextAlign     : right;
+@authorFontWeight    : @bold;
+@authorFontSize      : 1.25rem;
+@authorMargin        : 0;
+
+/* Metadata */
+@metaTextAlign       : right;
+@metaFontWeight      : @normal;
+@metaFontSize        : 1rem;
 
 /* Icon */
-@quoteIconSize      : 2rem;
-@quoteIconColor     : @secondaryColor;
-@quoteDownIconFloat : right;
+@mobileQuoteIconSize : 2rem;
+@tabletQuoteIconSize : 3rem;
+@quoteIconColor      : @secondaryColor;
+@quoteDownIconFloat  : right;