refactor(pullquote):adjust to volto theming

eea · Feb 3, 2022 · fee4466 · fee4466
1 parent 5eec87f
commit fee4466
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 5 deletions.
diff --git a/src/customizations/components/theme/Pullquote/Pullquote.js b/src/customizations/components/theme/Pullquote/Pullquote.js
@@ -3,13 +3,13 @@ import { Icon } from 'semantic-ui-react';
 
 function Pullquote({ quote, source, quotePosition }) {
   return (
-    <blockquote className={`pullquote eea-pullquote-${quotePosition}`}>
+    <blockquote className={`eea pullquote ${quotePosition}`}>
       <Icon name="quote left"></Icon>
-      <div className="eea-pullquote-body">
-        <h4 className="eea-pullquote-quote">{quote}</h4>
-        <p className="eea-pullquote-author">{source}</p>
+      <div className="content">
+        <h4 className="quote">{quote}</h4>
+        <p className="author">{source}</p>
       </div>
-      <Icon className="eea-quote-right" name="quote right"></Icon>
+      <Icon className="quote right" name="quote right"></Icon>
     </blockquote>
   );
 }

diff --git a/src/semantic.less b/src/semantic.less
@@ -203,3 +203,7 @@
 & {
   @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/blockquote';
 }
+
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/pullquote';
+}
diff --git a/theme/theme.config b/theme/theme.config
@@ -78,6 +78,7 @@
 @custom      : 'eea';
 /* EEA Design system custom components */
 @blockquote  : 'eea';
+@pullquote   : 'eea';
 
 /*******************************
             Folders

diff --git a/theme/themes/eea/extras/pullquote.less b/theme/themes/eea/extras/pullquote.less
@@ -0,0 +1,46 @@
+@type: 'extra';
+@element: 'pullquote';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+            Pullquote
+*******************************/
+
+.eea.pullquote {
+    padding: @pullquotePadding;
+    margin: @pullquoteMobileMargin;
+        .content {
+            margin: @contentMargin;
+            .author {
+                text-align: @authorTextAlign;
+            }
+        }
+    i.icon {
+        font-size: @quoteIconSize;
+        color: @quoteIconColor;
+    }
+    .quote.right {
+        float: @quoteDownIconFloat;
+    }
+}
+
+@media only screen and (min-width: @tabletBreakpoint) {
+    .eea.pullquote {
+        .content {
+            margin: @pullquoteMargin;
+        }
+    }
+    .eea.pullquote.left {
+        width: @maxWidthOnFloat;
+        padding: @paddingLeftFloat;
+        float: @leftFloat;
+    }
+    .eea.pullquote.right {
+        width: @maxWidthOnFloat;
+        padding: @paddingRightFloat;
+        float: @rightFloat;
+    }
+}
+
+.loadUIOverrides();
diff --git a/theme/themes/eea/extras/pullquote.variables b/theme/themes/eea/extras/pullquote.variables
@@ -0,0 +1,25 @@
+/*******************************
+            Pullquote
+*******************************/
+
+/* Body */
+@pullquotePadding:      @relative10px 0 @relative50px;
+@pullquoteMobileMargin: 0;
+@pullquoteMargin:       0 2rem;
+@maxWidthOnFloat:       400px;
+@leftFloat:             left;
+@rightFloat:            right;
+@paddingLeftFloat:      0 1.5rem 1rem 0;
+@paddingRightFloat:     0 0 1rem 1.5rem;
+
+
+/* Content */
+@contentMargin: 0;
+
+/* Author */
+@authorTextAlign: right;
+
+/* Icon */
+@quoteIconSize:      2rem;
+@quoteIconColor:     @secondaryColor;
+@quoteDownIconFloat: right;