Allow customization of panel backgroundColor (#85)

influxdata · Apr 11, 2019 · bba7377 · bba7377
1 parent f59994f
commit bba7377
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 39 deletions.
diff --git a/src/Components/Panel/Panel.scss b/src/Components/Panel/Panel.scss
@@ -5,14 +5,10 @@
    -----------------------------------------------------------------------------
 */
 
-$panel-background: $g3-castle;
-$panel-nested-background: $g4-onyx;
-
 .panel {
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  background-color: $panel-background;
   border-radius: $cf-radius;
 }
 
@@ -23,7 +19,6 @@ $panel-nested-background: $g4-onyx;
 }
 
 .panel--title {
-  color: $g12-forge;
   letter-spacing: 0.015em;
   margin: 0;
   line-height: 1em;
@@ -38,7 +33,6 @@ $panel-nested-background: $g4-onyx;
 .panel--footer {
   border-radius: 0 0 $cf-radius $cf-radius;
   background-color: rgba($g0-obsidian, 0.1);
-  color: $g9-mountain;
 }
 
 /*
@@ -108,14 +102,3 @@ $panel-nested-background: $g4-onyx;
   margin: $cf-marg-c 0;
 }
 
-//  Panels Nested inside Tabbed Pages
-//  ----------------------------------------------------------------------------
-.tabs--contents .panel,
-// TODO: Remove this .tabbed-page rule when the component is phased out
-.tabbed-page .panel {
-  background-color: $panel-nested-background;
-
-  .panel--footer {
-    background-color: mix($panel-nested-background, $g3-castle, 50%);
-  }
-}
diff --git a/src/Components/Panel/Panel.stories.tsx b/src/Components/Panel/Panel.stories.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react'
 import {storiesOf} from '@storybook/react'
 import {Panel} from './Panel'
-import {withKnobs, text, select} from '@storybook/addon-knobs'
-import {Gradients, ComponentSize} from '../../Types'
+import {withKnobs, text, select, color} from '@storybook/addon-knobs'
+import {Gradients, ComponentSize, InfluxColors} from '../../Types'
 import {mapEnumKeys} from '../../../.storybook/utils'
 
 const panelStories = storiesOf('Components|Panels', module).addDecorator(
@@ -16,6 +16,7 @@ panelStories.add('Panel Family', () => (
         select('gradient', {None: 'none', ...mapEnumKeys(Gradients)}, 'None')
       ]
     }
+    backgroundColor={color('backgroundColor', `${InfluxColors.Castle}`)}
     size={ComponentSize[select('size', mapEnumKeys(ComponentSize), 'Small')]}
   >
     <Panel.Header title={text('title', 'Steel Panel')} />

diff --git a/src/Components/Panel/Panel.tsx b/src/Components/Panel/Panel.tsx
@@ -5,7 +5,7 @@ import classnames from 'classnames'
 import chroma from 'chroma-js'
 
 // Types
-import {Gradients, ComponentSize} from '../../Types'
+import {Gradients, ComponentSize, InfluxColors} from '../../Types'
 
 // Constants
 import {getColorsFromGradient} from '../../Constants/colors'
@@ -21,8 +21,10 @@ import './Panel.scss'
 interface Props {
   /** Class name for custom styles */
   className?: string
-  /** Optional color theme of panel */
+  /** Optional gradient theme of panel, supercedes backgroundColor prop */
   gradient?: Gradients
+  /** Optional background color of panel */
+  backgroundColor: InfluxColors | string
   /** Controls header font size and padding of Panel */
   size: ComponentSize
   /** Test ID for Integration Tests */
@@ -33,6 +35,7 @@ export class Panel extends Component<Props> {
   public static defaultProps = {
     size: ComponentSize.Small,
     testID: 'panel',
+    backgroundColor: InfluxColors.Castle,
   }
 
   public static Header = PanelHeader
@@ -57,32 +60,32 @@ export class Panel extends Component<Props> {
     )
   }
 
-  private get useContrastText(): string | boolean {
-    const {gradient} = this.props
+  private get useContrastText(): string {
+    const {gradient, backgroundColor} = this.props
 
-    if (!gradient) {
-      return false
-    }
+    const mediumGrey = 0.34
 
-    const {start} = getColorsFromGradient(gradient)
+    if (gradient) {
+      const {start} = getColorsFromGradient(gradient)
+      return chroma(start).luminance() >= mediumGrey ? 'dark' : 'light'
+    }
 
-    const mediumGrey = 0.34
-    return chroma(start).luminance() >= mediumGrey ? 'dark' : 'light'
+    return chroma(backgroundColor).luminance() >= mediumGrey ? 'dark' : 'light'
   }
 
   private get style(): CSSProperties | undefined {
-    const {gradient} = this.props
+    const {gradient, backgroundColor} = this.props
 
-    if (!gradient) {
-      return
-    }
-
-    const colors = getColorsFromGradient(gradient)
+    if (gradient) {
+      const colors = getColorsFromGradient(gradient)
 
-    return {
-      background: `linear-gradient(45deg,  ${colors.start} 0%,${
-        colors.stop
-      } 100%)`,
+      return {
+        background: `linear-gradient(45deg,  ${colors.start} 0%,${
+          colors.stop
+        } 100%)`,
+      }
     }
+
+    return {backgroundColor}
   }
 }