From b9e6e247831b60bd43340e1e0c6b92d39404fc5c Mon Sep 17 00:00:00 2001
From: apanizo <adolfo.panizo@gmail.com>
Date: Wed, 17 Oct 2018 17:24:30 +0200
Subject: [PATCH] Added colors to Heading component

---
 src/components/layout/Heading/index.jsx  |  4 ++-
 src/components/layout/Heading/index.scss | 36 ++++++++++++++++++++++++
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/src/components/layout/Heading/index.jsx b/src/components/layout/Heading/index.jsx
index 286e47e6..dd7de50d 100644
--- a/src/components/layout/Heading/index.jsx
+++ b/src/components/layout/Heading/index.jsx
@@ -11,6 +11,7 @@ type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4';
 type Props = {
   align?: 'left' | 'center' | 'right',
   margin?: 'sm' | 'md' | 'lg' | 'xl',
+  color?: 'soft' | 'medium' | 'dark' | 'white' | 'fancy' | 'primary' | 'secondary' | 'warning' | 'disabled',
   tag: HeadingTag,
   truncate?: boolean,
   children: React$Node,
@@ -19,7 +20,7 @@ type Props = {
 class Heading extends React.PureComponent<Props> {
   render() {
     const {
-      align, tag, truncate, margin, children, ...props
+      align, tag, truncate, margin, color, children, ...props
     } = this.props
 
     const className = cx(
@@ -27,6 +28,7 @@ class Heading extends React.PureComponent<Props> {
       align,
       tag,
       margin ? capitalize(margin, 'margin') : undefined,
+      color,
       { truncate },
     )
 
diff --git a/src/components/layout/Heading/index.scss b/src/components/layout/Heading/index.scss
index 1f5c5315..6c3f3fa6 100644
--- a/src/components/layout/Heading/index.scss
+++ b/src/components/layout/Heading/index.scss
@@ -63,3 +63,39 @@
 .marginXl {
   margin: 0 0 $xl 0;
 }
+
+.soft {
+  color: #888888;
+}
+
+.medium {
+  color: #686868;
+}
+
+.dark {
+  color: black;
+}
+
+.fancy {
+  color: $fancy;
+}
+
+.warning {
+  color: $warning;
+}
+
+.primary {
+  color: $fontColor;
+}
+
+.secondary {
+  color: $secondary;
+}
+
+.disabled {
+  color: $disabled;
+}
+
+.white {
+  color: white;
+}