Merge pull request #186 from Tripwire/fix/large-card

fix(LargeCard): document Gutter
Tripwire · Apr 30, 2018 · d6343b9 · d6343b9
2 parents cadfa6d + 2ade22f
commit d6343b9
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 6 deletions.
diff --git a/snaps/ref/LargeCardGutter-large-card-gutters-chrome.png b/snaps/ref/LargeCardGutter-large-card-gutters-chrome.png
diff --git a/src/components/native/LargeCard/LargeCardGutter.examples.md b/src/components/native/LargeCard/LargeCardGutter.examples.md
@@ -0,0 +1,16 @@
+#### Large Card Gutters
+
+```js
+<div style={{height: '150px'}}>
+  <LargeCard showCard>
+    {/* preferred - use a constant */}
+    <LargeCard.Gutter color={LargeCard.Gutter.STATE_COLOR_MAP.CRITICAL} />
+    <LargeCard.Gutter color={LargeCard.Gutter.STATE_COLOR_MAP.WARNING} />
+    <LargeCard.Gutter color={LargeCard.Gutter.STATE_COLOR_MAP.NORMAL} />
+    {/* not preferred - avoid picking your own colors */}
+    <LargeCard.Gutter color='salmon' />
+    <LargeCard.Gutter color='#efefef' />
+    <LargeCard.Gutter color='#abc' />
+  </LargeCard>
+</div>
+```
diff --git a/src/components/native/LargeCard/LargeCardGutter.jsx b/src/components/native/LargeCard/LargeCardGutter.jsx
@@ -1,22 +1,29 @@
 import Flexbox from 'flexbox-react'
 import React from 'react'
 import palette from '../../../palette'
+import PropTypes from 'prop-types'
 import filterAttributesFromProps from '../../../util/externalAttributeFilter'
 
+const STATE_COLOR_MAP = {
+  CRITICAL: 'critical',
+  WARNING: 'warning',
+  NORMAL: 'normal',
+  BLUE: 'blue' // @deprecated
+}
 const LargeCardGutter = (props) => {
   const externalAttributes = filterAttributesFromProps(props)
   let color = ''
   switch (props.color) {
-    case 'critical':
+    case STATE_COLOR_MAP.CRITICAL:
       color = palette.red
       break
-    case 'warning':
+    case STATE_COLOR_MAP.WARNING:
       color = palette.yellow
       break
-    case 'normal':
+    case STATE_COLOR_MAP.NORMAL:
       color = palette.blue
       break
-    case 'blue':
+    case STATE_COLOR_MAP.BLUE:
       color = palette.blue
       break
     default:
@@ -25,7 +32,7 @@ const LargeCardGutter = (props) => {
   return (
     <Flexbox
       {...externalAttributes}
-      className={`fullview__left_border ${props.className}`}
+      className={`fullview__left_border ${props.className || ''}`}
       width='9px'
       style={{ backgroundColor: color }} />
   )
@@ -36,7 +43,13 @@ LargeCardGutter.defaultProps = {
 }
 
 LargeCardGutter.propTypes = {
-
+  /** color of gutter. use `LargeCardGutter.STATE_COLOR_MAP` or any standard web color string  */
+  color: PropTypes.oneOf(
+    Object.values(STATE_COLOR_MAP).concat(
+      PropTypes.string
+    )
+  )
 }
+LargeCardGutter.STATE_COLOR_MAP = STATE_COLOR_MAP
 
 export default LargeCardGutter