Replace transparent state by opaque state on Block component

Author: diegohaz

src/components/atoms/Block/index.js

@@ -5,13 +5,14 @@ import { ifProp } from 'styled-tools'
 
 const Block = styled.div`
   font-family: ${font('primary')};
-  background-color: ${ifProp('transparent', 'transparent', palette(0, true))};
+  background-color: ${ifProp('opaque', palette(0, true), 'transparent')};
   color: ${palette({ grayscale: 0 }, 1)};
 `
 
 Block.propTypes = {
   palette: PropTypes.string,
-  reverse: PropTypes.bool
+  reverse: PropTypes.bool,
+  opaque: PropTypes.bool
 }
 
 Block.defaultProps = {

src/components/atoms/Block/index.stories.js

@@ -17,13 +17,13 @@ storiesOf('Block', module)
       Officia aliqua reprehenderit fugiat occaecat quis non eiusmod.
     </Block>
   ))
-  .add('palette transparent', () => (
-    <Block palette="primary" transparent>
+  .add('palette opaque', () => (
+    <Block palette="primary" opaque>
       Officia aliqua reprehenderit fugiat occaecat quis non eiusmod.
     </Block>
   ))
-  .add('palette transparent reverse', () => (
-    <Block palette="primary" transparent reverse>
+  .add('palette opaque reverse', () => (
+    <Block palette="primary" opaque reverse>
       Officia aliqua reprehenderit fugiat occaecat quis non eiusmod.
     </Block>
   ))

src/components/molecules/Field/index.js

@@ -27,7 +27,7 @@ const Field = ({ error, name, invalid, label, type, ...props }) => {
       {label && <Label htmlFor={inputProps.id}>{label}</Label>}
       {renderInputFirst || <Input {...inputProps} />}
       {invalid && error &&
-        <Error id={`${name}Error`} role="alert" palette="danger" transparent>
+        <Error id={`${name}Error`} role="alert" palette="danger">
           {error}
         </Error>
       }

src/components/organisms/Header/index.js

@@ -20,7 +20,7 @@ const StyledIconLink = styled(IconLink)`
 
 const Header = (props) => {
   return (
-    <Wrapper reverse {...props}>
+    <Wrapper opaque reverse {...props}>
       <StyledIconLink to="/" icon="arc" height={100} />
       <PrimaryNavigation reverse />
     </Wrapper>

src/components/organisms/Hero/index.js

@@ -43,7 +43,7 @@ const StyledIconButton = styled(IconButton)`
 
 const Hero = (props) => {
   return (
-    <Wrapper reverse {...props}>
+    <Wrapper opaque reverse {...props}>
       <Logo />
       <Text>
         <strong>ARc</strong> is a <IconLink reverse icon="react" href="https://facebook.github.io/react/">React</IconLink> starter kit based on the <IconLink reverse icon="atomic-design" href="http://bradfrost.com/blog/post/atomic-web-design/">Atomic Design</IconLink> methodology. It&apos;s <strong>progressive</strong>, which means that you can start with the basic boilerplate and try the other features when you are comfortable.