fix(Blockquote): same padding if no content is present

wfp · Dec 17, 2019 · 6375f82 · 6375f82
1 parent 85ae033
commit 6375f82
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 8 deletions.
diff --git a/src/components/Blockquote/Blockquote.js b/src/components/Blockquote/Blockquote.js
@@ -37,9 +37,9 @@ class Blockquote extends React.Component {
     this.setState({ open: !this.state.open });
   };
 
-  showInnerHtml = content => {
+  /*showInnerHtml = content => {
     return { __html: content };
-  };
+  };*/
 
   render() {
     const {
@@ -63,6 +63,7 @@ class Blockquote extends React.Component {
       'wfp--blockquote--toggleable': toggleable === true,
       'wfp--blockquote--light': light,
       'wfp--blockquote--code': code,
+      'wfp--blockquote--no-content': !children,
       'wfp--blockquote--error': kind === 'error' || error,
       'wfp--blockquote--warning': kind === 'warning' || warning,
       'wfp--blockquote--success': kind === 'success',
@@ -71,8 +72,7 @@ class Blockquote extends React.Component {
       'wfp--blockquote--open': this.state.open,
     });
 
-    const blockquoteContentClass = classNames({
-      'wfp--blockquote__content': true,
+    const blockquoteContentClass = classNames('wfp--blockquote__content', {
       [`${className}`]: className,
     });
 
@@ -115,12 +115,12 @@ class Blockquote extends React.Component {
             </div>
           )}
           {children}
-          {innerHtml && (
+          {/*innerHtml && (
             <div
               role="complementary"
               dangerouslySetInnerHTML={this.showInnerHtml(innerHtml)}
             />
-          )}
+          )*/}
         </div>
       </div>
     );

diff --git a/src/components/Blockquote/_blockquote.scss b/src/components/Blockquote/_blockquote.scss
@@ -28,6 +28,12 @@
     word-wrap: anywhere;
   }
 
+  .#{$prefix}--blockquote--no-content {
+    .#{$prefix}--blockquote__title {
+      margin-bottom: 0;
+    }
+  }
+
   .#{$prefix}--blockquote--with-icon {
     //padding-left: 4rem;
   }

diff --git a/src/documentation/Colours/ColourList-story.js b/src/documentation/Colours/ColourList-story.js
@@ -297,6 +297,8 @@ storiesOf('Design|Core', module)
           }}
           src={`${process.env.STORYBOOK_INTERNAL_ASSETS}internal/colors.png`}
         />
+        <h3>Primary Colours</h3>
+        <ul className="color--list">{colorList(brandColors)}</ul>
         <Color color="interactive-01" />
         <h4 className="wfp--story__sub-heading">
           Primary interactive colour, Primary buttons
@@ -458,8 +460,6 @@ storiesOf('Design|Core', module)
             </List>
           </div>
         </section>
-        <h3>Primary Colours</h3>
-        <ul className="color--list">{colorList(brandColors)}</ul>
         <h3>User Interface Colours</h3>
         <p>
           Neutral colours are used for non-interactive elements, backgrounds and