no display: flex for blockquote added from slate

eea · Mar 3, 2022 · 312a893 · 312a893
1 parent f524325
commit 312a893
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 6 deletions.
diff --git a/src/index.js b/src/index.js
@@ -1,4 +1,4 @@
-import BlockquoteElement from './ui/Blockquote/Blockquote';
+import { BlockquoteElement } from './ui/Blockquote/Blockquote';
 
 const applyConfig = (config) => {
   // Apply accordion block customization

diff --git a/src/ui/Blockquote/Blockquote.jsx b/src/ui/Blockquote/Blockquote.jsx
@@ -1,16 +1,23 @@
 import React from 'react';
+import cx from 'classnames';
 
-function Blockquote({ children, ...rest }) {
+function Blockquote({ children, className, ...rest }) {
   return (
-    <div className="eea blockquote" {...rest}>
+    <div className={cx('eea blockquote', className)} {...rest}>
       <blockquote className="quote">{children}</blockquote>
     </div>
   );
 }
 
+function BlockquoteElement(props) {
+  return <Blockquote className="blockquote-slate" {...props} />;
+}
+
 Blockquote.Content = ({ children, as: As, ...rest }) =>
   As ? <As {...rest}>{children}</As> : children;
 
 Blockquote.Meta = ({ children }) => <div className="meta">{children}</div>;
 
+export { BlockquoteElement };
+
 export default Blockquote;
diff --git a/theme/themes/eea/extras/blockquote.less b/theme/themes/eea/extras/blockquote.less
@@ -7,7 +7,8 @@
             Blockquote
 *******************************/
 
-.eea.blockquote {
+.eea.blockquote,
+.eea.blockquote-slate {
   border-left: @mobileBlockquoteBorderLeft;
 
   .quote {
@@ -19,6 +20,10 @@
     font-size: @mobileQuoteFontSize;
     font-weight: @quoteFontWeight;
 
+    strong, em, u, del {
+      display: contents;
+    }
+
     .meta {
       margin: @metaMargin;
       font-size: @mobileMetaFontSize;
@@ -28,8 +33,18 @@
   }
 }
 
+.eea.blockquote-slate {
+  .quote {
+    display: block;
+    flex-direction: unset;
+    gap: unset;
+    font-weight: @slateQuoteFontWeight;
+  }
+}
+
 @media only screen and (min-width: @tabletBreakpoint) {
-  .eea.blockquote {
+  .eea.blockquote,
+  .eea.blockquote-slate {
     border-left: @tabletBlockquoteBorderLeft;
     .quote {
       margin: @tabletQuoteMargin;
@@ -42,7 +57,8 @@
 }
 
 @media only screen and (min-width: @computerBreakpoint) {
-  .eea.blockquote .quote {
+  .eea.blockquote .quote,
+  .eea.blockquote-slate .quote {
     margin: @computerQuoteMargin;
     font-size: @computerQuoteFontSize;
     .meta {

diff --git a/theme/themes/eea/extras/blockquote.variables b/theme/themes/eea/extras/blockquote.variables
@@ -17,6 +17,7 @@
 @tabletQuoteFontSize   : @h6;
 @computerQuoteFontSize : @h5;
 @quoteFontWeight       : 700;
+@slateQuoteFontWeight  : 400;
 
 /* Meta */
 @metaMargin           : 0;