NEW Add versioning state modifier for Badge component

client/src/components/Badge/Badge.js

@@ -18,18 +18,19 @@ export const statuses = [
 
 class Badge extends PureComponent {
   render() {
-    const { status, inverted, className, message } = this.props;
+    const { status, inverted, stateBadge, className, message } = this.props;
     if (!status) {
       return null;
     }
 
-    const invertedClass = inverted ? `badge-${status}--inverted` : '';
-
     const compiledClassNames = classnames(
       className,
       'badge',
       `badge-${status}`,
-      invertedClass,
+      {
+        [`badge-${status}--inverted`]: inverted,
+        'badge--state': stateBadge,
+      }
     );
     return (
       <span className={compiledClassNames}>
@@ -44,12 +45,14 @@ Badge.propTypes = {
   status: PropTypes.oneOf(statuses),
   className: PropTypes.string,
   inverted: PropTypes.bool,
+  stateBadge: PropTypes.bool,
 };
 
 Badge.defaultProps = {
   status: 'default',
   className: 'badge-pill',
   inverted: false,
+  stateBadge: false,
 };
 
 export default Badge;

client/src/components/Badge/Badge.scss

@@ -19,3 +19,10 @@
     @include badge-variant-inverted($value);
   }
 }
+
+// Versioning state badges
+.badge--state {
+  background-color: transparent;
+  padding-left: 0;
+  padding-right: 0;
+}

client/src/components/Badge/README.md

@@ -8,6 +8,8 @@ const props = {
   status: 'success',
   message: 'The save was successful.',
   className: 'action__result',
+  inverted: false,
+  stateBadge: false,
 };
 <Badge {...props} />
 ```
@@ -18,3 +20,4 @@ const props = {
  * `message` (string): The string to display in the badge.
  * `className` (string): Any extra classes to apply for the badge.
  * `inverted` (boolean): If the colours should be inverted.
+ * `stateBadge` (boolean): For use in the context of versioning states (use with inverted).

client/src/components/Badge/tests/Badge-story.js

@@ -6,7 +6,6 @@ import JSXAddon from 'storybook-addon-jsx';
 
 import Badge, { statuses } from 'components/Badge/Badge';
 
-
 setAddon(JSXAddon);
 
 storiesOf('Admin/Badges', module)
@@ -18,5 +17,6 @@ storiesOf('Admin/Badges', module)
       status={select('status', statuses, 'default')}
       className={boolean('pill', true) ? 'badge-pill' : ''}
       inverted={boolean('inverted')}
+      stateBadge={boolean('stateBadge')}
     />
   ));