Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

NEW Add VersionedBadge for displaying versioning states in the CMS #861

Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion client/dist/js/bundle.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion client/dist/js/vendor.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion client/dist/styles/bundle.css

Large diffs are not rendered by default.

6 changes: 5 additions & 1 deletion client/lang/src/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
}
2 changes: 2 additions & 0 deletions client/src/boot/registerComponents.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -80,6 +81,7 @@ export default () => {
NotFoundComponent,
UsedOnTable,
Loading,
VersionedBadge,
ViewModeToggle,
ResizeAware,
Tag,
Expand Down
1 change: 1 addition & 0 deletions client/src/bundles/bundle.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
17 changes: 17 additions & 0 deletions client/src/components/VersionedBadge/README.md
Original file line number Diff line number Diff line change
@@ -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.
42 changes: 42 additions & 0 deletions client/src/components/VersionedBadge/VersionedBadge.js
Original file line number Diff line number Diff line change
@@ -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;
16 changes: 16 additions & 0 deletions client/src/components/VersionedBadge/VersionedBadge.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
.versioned-badge {
padding-left: 0;
padding-right: 0;

&--draft {
color: $state-draft;
}

&--modified {
color: $state-modified;
}

&--live {
color: $green;
maxime-rainville marked this conversation as resolved.
Show resolved Hide resolved
}
}
14 changes: 14 additions & 0 deletions client/src/components/VersionedBadge/tests/VersionedBadge-story.js
Original file line number Diff line number Diff line change
@@ -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>
));
1 change: 1 addition & 0 deletions client/src/styles/bundle.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down