NEW Add VersionedBadge for displaying versioning states in the CMS

client/lang/src/en.json

@@ -26,5 +26,9 @@
     "Admin.VALIDATOR_MESSAGE_DATE": "{name} is not a proper date format.",
     "Admin.VALIDATOR_MESSAGE_ALPHANUMERIC": "{name} is not an alphanumeric value.",
     "Admin.VALIDATOR_MESSAGE_ALPHA": "{name} is not only letters.",
-    "Admin.VALIDATOR_MESSAGE_DEFAULT": "{name} is not a valid value."
+    "Admin.VALIDATOR_MESSAGE_DEFAULT": "{name} is not a valid value.",
+    "Admin.DRAFT": "Draft",
+    "Admin.MODIFIED": "Modified",
+    "Admin.LIVE": "Live",
+    "Admin.ARCHIVED": "Archived",
 }

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/bundles/bundle.js

@@ -56,6 +56,7 @@ require('expose-loader?BreadcrumbsActions!state/breadcrumbs/BreadcrumbsActions')
 require('expose-loader?RecordsActionTypes!state/records/RecordsActionTypes');
 require('expose-loader?UnsavedFormsActions!state/unsavedForms/UnsavedFormsActions');
 require('expose-loader?Badge!components/Badge/Badge');
+require('expose-loader?VersionedBadge!components/VersionedBadge/VersionedBadge');
 require('expose-loader?CheckboxSetField!components/CheckboxSetField/CheckboxSetField');
 require('expose-loader?Preview!components/Preview/Preview');
 require('expose-loader?ViewModeStates!state/viewMode/ViewModeStates');

client/src/components/VersionedBadge/README.md

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

client/src/components/VersionedBadge/VersionedBadge.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import Badge from 'components/Badge/Badge';
+import i18n from 'i18n';
+
+/**
+ * List of valid versioned statuses for a Badge
+ * @type {string[]}
+ */
+export const statuses = [
+  'draft',
+  'modified',
+  'live',
+  'archived',
+];
+
+/**
+ * Capitalise the first letter
+ * @param {string} str
+ * @returns {string}
+ */
+const toTitleCase = (str) => str.replace(/^\w/, c => c.toUpperCase());
+
+const VersionedBadge = ({ status, className }) => {
+  const props = {
+    className: classnames(className, 'versioned-badge', `versioned-badge--${status}`),
+    message: i18n._t(`ADMIN.${status.toUpperCase()}`, toTitleCase(status)),
+    status: 'default',
+  };
+
+  return (
+    <Badge {...props} />
+  );
+};
+
+VersionedBadge.propTypes = {
+  status: PropTypes.oneOf(statuses).isRequired,
+  className: PropTypes.string,
+};
+
+export default VersionedBadge;

client/src/components/VersionedBadge/VersionedBadge.scss

@@ -0,0 +1,20 @@
+.versioned-badge {
+  padding-left: 0;
+  padding-right: 0;
+
+  &--draft {
+    color: $state-draft;
+  }
+
+  &--modified {
+    color: $state-modified;
+  }
+
+  &--live {
+    color: $state-live;
+  }
+
+  &--archived {
+    color: $state-archived;
+  }
+}

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

@@ -0,0 +1,14 @@
+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 status="draft" /></p>
+      <p>Contact Us <VersionedBadge status="modified" /></p>
+      <p>About Us <VersionedBadge status="live" /></p>
+      <p>Old Page <VersionedBadge status="archived" /></p>
+    </div>
+  ));

client/src/styles/_variables.scss

@@ -27,6 +27,8 @@ $state-draft: #cf3f00;
 $state-draft-bg: #fff7f0;
 $state-modified: $state-draft;
 $state-modified-bg: #ff7f22;
+$state-archived: $gray-700;
+$state-live: $green;
 
 // Extra background colors
 $body-bg-dark: darken($body-bg, 2);

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";