/* @flow */
import React from 'react';
import Box from 'grommet/components/Box';
import Heading from 'grommet/components/Heading';
import { BlockParagraph } from '../BlockParagraph';
import Swatch from './swatch';

export default function BlockColorSwatch(props: {
  color: ?{
    name: string,
    thumbColor: string,
    content: string
  }
}) {
  const { color } = props;
  if (!color) {
    return null;
  }
  return (
    <Box>
      <Swatch backgroundColor={color.thumbColor} />
      <Heading tag="h4" strong margin="none">
        {color.name}
      </Heading>
      {color.content &&
        <BlockParagraph content={color.content} />
      }
    </Box>
  );
}

@@ -492,16 +492,24 @@
 %3CHeading
+%0A       
  tag=%22h4
@@ -513,29 +513,91 @@
 %22h4%22
- strong margin=%22none%22
+%0A        strong%0A        margin=%22none%22%0A        style=%7B%7B paddingTop: '12px' %7D%7D%0A      
 %3E%0A  

Add padding to color swatch headline.