Auto translated status, add archived status and functionalise component

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/components/VersionedBadge/README.md

@@ -6,14 +6,12 @@ Badge component for displaying versioning states in a Bootstrap "badge" based st
 ```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.
+ * `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

@@ -1,7 +1,8 @@
-import React, { PureComponent } from 'react';
+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
@@ -10,44 +11,32 @@ import Badge from 'components/Badge/Badge';
 export const statuses = [
   'draft',
   'modified',
-  'live'
+  'live',
+  'archived',
 ];
 
-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} />
-    );
-  }
-}
+/**
+ * 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 = {
-  message: PropTypes.node,
-  status: PropTypes.oneOf(statuses),
+  status: PropTypes.oneOf(statuses).isRequired,
   className: PropTypes.string,
 };
 
-VersionedBadge.defaultProps = {
-  status: 'default',
-  className: '',
-};
-
 export default VersionedBadge;

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

@@ -6,8 +6,9 @@ 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>
+      <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>
   ));