import React, { PropTypes } from 'react';
import Heading from 'grommet/components/Heading';
import Quote from 'grommet/components/Quote';
import Label from 'grommet/components/Label';
import Anchor from 'grommet/components/Anchor';
import Paragraph from 'grommet/components/Paragraph';
import Box from 'grommet/components/Box';
import unescape from 'unescape';

export default function BlockQuote({
  content,
  source,
  colorIndex,
  borderSize,
  label,
  linkUrl,
  linkText,
}) {
  const color = colorIndex || 'brand';
  const size = borderSize || 'medium';
  const unescapedContent = unescape(content || '');
  return (
    <Quote
      style={{ width: 'inherit' }}
      size={size}
      borderColorIndex={color}
      pad="large"
    >
      <Box pad="small">
        {label &&
          <Label margin="small" uppercase size="small" style={{ fontWeight: 700 }}>
            {label}
          </Label>
        }
        <Heading tag="h3">
          {unescapedContent}
        </Heading>
        {source &&
          <Paragraph className="grommetux-quote__credit">
            <strong>{source}</strong>
          </Paragraph>
        }
        {linkUrl && linkText &&
          <Anchor label={linkText} path={linkUrl} />
        }
      </Box>
    </Quote>
  );
}

BlockQuote.propTypes = {
  content: PropTypes.string,
  source: PropTypes.string,
  colorIndex: PropTypes.string,
  borderSize: PropTypes.string,
  label: PropTypes.string,
  linkUrl: PropTypes.string,
  linkText: PropTypes.string,
};

@@ -513,13 +513,16 @@
 %7C%7C '
-brand
+accent-3
 ';%0A 
@@ -727,48 +727,174 @@
     
+credit=%7B%0A        source && %3CBox 
 pad=%22
-larg
+non
 e%22
+%3E
 %0A    
-%3E%0A
       %3C
-Box pad=%22small%22
+Label uppercase margin=%22small%22%3E%0A            %7Bsource%7D%0A          %3C/Label%3E%0A        %3C/Box%3E%0A      %7D%0A    %3E%0A      %3CBox
 %3E%0A  
@@ -1055,54 +1055,40 @@
    %3C
-Heading tag=%22h3%22%3E%0A          %7BunescapedContent%7D
+Box pad=%7B%7B vertical: 'small' %7D%7D%3E
 %0A   
@@ -1096,133 +1096,73 @@
     
+  
 %3C
-/
 Heading
-%3E%0A        %7Bsource &&%0A          %3CParagraph className=%22grommetux-quote__credit%22%3E%0A            %3Cstrong%3E%7Bsource%7D%3C/strong%3E
+ tag=%22h2%22 margin=%22none%22%3E%0A            %7BunescapedContent%7D
 %0A   
@@ -1170,25 +1170,23 @@
       %3C/
-Paragraph
+Heading
 %3E%0A      
@@ -1179,33 +1179,38 @@
 eading%3E%0A        
-%7D
+%3C/Box%3E
 %0A        %7BlinkUr

Update Quote block styling.