NEW Add VersionedBadge for displaying versioning states in the CMS

client/src/boot/registerComponents.js

@@ -33,6 +33,7 @@ import Preview from 'components/Preview/Preview';
 import ReduxForm from 'containers/Form/Form';
 import UsedOnTable from 'components/UsedOnTable/UsedOnTable';
 import Loading from 'components/Loading/Loading';
+import VersionedBadge from 'components/VersionedBadge/VersionedBadge';
 import ViewModeToggle from 'components/ViewModeToggle/ViewModeToggle';
 import ResizeAware from 'components/ResizeAware/ResizeAware';
 import Tag from 'components/Tag/Tag';
@@ -80,6 +81,7 @@ export default () => {
     NotFoundComponent,
     UsedOnTable,
     Loading,
+    VersionedBadge,
     ViewModeToggle,
     ResizeAware,
     Tag,

client/src/components/VersionedBadge/README.md

@@ -0,0 +1,19 @@
+# Versioned Badge Component
+
+Badge component for displaying versioning states in a Bootstrap "badge" based style.
+
+## Example
+```js
+const props = {
+  status: 'draft',
+  message: 'Draft',
+  className: 'my-custom-class',
+};
+<VersionedBadge {...props} />
+```
+
+## Properties
+
+ * `status` (string): The status for the badge, takes versioning states e.g. `draft`, `modified`, `live`.
+ * `message` (string): The string to display in the badge. Usually would be "Draft", "Published", etc.
+ * `className` (string): Any extra classes to apply for the badge.

client/src/components/VersionedBadge/VersionedBadge.js

@@ -0,0 +1,53 @@
+import React, { PureComponent } from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import Badge from 'components/Badge/Badge';
+
+/**
+ * List of valid versioned statuses for a Badge
+ * @type {string[]}
+ */
+export const statuses = [
+  'draft',
+  'modified',
+  'live'
+];
+
+class VersionedBadge extends PureComponent {
+  render() {
+    const { status, className } = this.props;
+    if (!status) {
+      return null;
+    }
+
+    const compiledClassNames = classnames(
+      className,
+      'versioned-badge',
+      `versioned-badge--${status}`,
+    );
+
+    const props = {
+      ...this.props,
+      className: compiledClassNames,
+      status: 'default',
+      inverted: false,
+    };
+
+    return (
+      <Badge {...props} />
+    );
+  }
+}
+
+VersionedBadge.propTypes = {
+  message: PropTypes.node,
+  status: PropTypes.oneOf(statuses),
+  className: PropTypes.string,
+};
+
+VersionedBadge.defaultProps = {
+  status: 'default',
+  className: '',
+};
+
+export default VersionedBadge;

client/src/components/VersionedBadge/VersionedBadge.scss

@@ -0,0 +1,13 @@
+.versioned-badge {
+  padding-left: 0;
+  padding-right: 0;
+
+  &--draft,
+  &--modified {
+    color: $orange;
+  }
+
+  &--live {
+    color: $green;
+  }
+}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { storiesOf } from '@storybook/react';
+import VersionedBadge from 'components/VersionedBadge/VersionedBadge';
+
+storiesOf('Admin/Badges', module)
+  .add('Versioned badge', () => (
+    <div>
+      <p>My Page Name <VersionedBadge message="Draft" status="draft" /></p>
+      <p>Contact Us <VersionedBadge message="Modified" status="modified" /></p>
+      <p>About Us <VersionedBadge message="Live" status="live" /></p>
+    </div>
+  ));

client/src/styles/bundle.scss

@@ -65,6 +65,7 @@
 @import "../components/Toolbar/Toolbar";
 @import "../components/TreeDropdownField/TreeDropdownField";
 @import "../components/UsedOnTable/UsedOnTable";
+@import "../components/VersionedBadge/VersionedBadge";
 @import "../components/ViewModeToggle/ViewModeToggle";
 @import "../components/PopoverOptionSet/PopoverOptionSet";