Adding embargo label to home cards (#1043)

* Adding embargo label to home cards * Added missing cards Co-authored-by: Tolga Akin <akint@aap.com.au>
superdesk · Apr 30, 2020 · c1315b1 · c1315b1
1 parent 3258b12
commit c1315b1
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 7 deletions.
diff --git a/...wire/components/WireListItemEmbargoed.jsx → assets/components/ListItemEmbargoed.jsx b/...wire/components/WireListItemEmbargoed.jsx → assets/components/ListItemEmbargoed.jsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { gettext, fullDate, getEmbargo } from '../../utils';
+import { gettext, fullDate, getEmbargo } from 'utils';
+import classNames from 'classnames';
 
-export default class WireListItemEmbargoed extends React.Component {
+export default class ListItemEmbargoed extends React.Component {
     constructor(props) {
         super(props);
         this.state = {embargo: getEmbargo(props.item)};
@@ -29,13 +30,17 @@ export default class WireListItemEmbargoed extends React.Component {
         }
 
         return (
-            <span ref={(elem) => this.elem = elem} className="label label--red ml-4">{gettext('embargo')}</span>
+            <span
+                ref={(elem) => this.elem = elem}
+                className={classNames('label label--red ', {'ml-4': !this.props.isCard})}
+            >{gettext('embargo')}</span>
         );
     }
 }
 
-WireListItemEmbargoed.propTypes = {
+ListItemEmbargoed.propTypes = {
     item: PropTypes.shape({
         embargoed: PropTypes.string,
     }),
-};
+    isCard: PropTypes.bool
+};
diff --git a/assets/components/cards/render/CardBody.jsx b/assets/components/cards/render/CardBody.jsx
@@ -2,12 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { shortDate } from 'utils';
 import {shortText} from 'wire/utils';
+import ListItemEmbargoed from '../../ListItemEmbargoed';
 
 
 function CardBody({item, displayMeta, displayDescription, displaySource}) {
     return (<div className="card-body">
         <h4 className="card-title">{item.headline}</h4>
 
+        <ListItemEmbargoed item={item} isCard={true} />
+
         {displayDescription && <div className="wire-articles__item__text">
             <p className='card-text small'>{shortText(item, 40, true)}</p>
         </div>}

diff --git a/assets/components/cards/render/MediaGalleryCard.jsx b/assets/components/cards/render/MediaGalleryCard.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { shortDate } from 'utils';
 import { getPicture, getThumbnailRendition, getCaption } from 'wire/utils';
 import CardRow from './CardRow';
+import ListItemEmbargoed from '../../ListItemEmbargoed';
 
 const getMediaPanel = (item, picture, openItem, cardId) => {
 
@@ -20,6 +21,7 @@ const getMediaPanel = (item, picture, openItem, cardId) => {
                     </div>
                 </div>
                 <h4 className='card-title'>{item.headline}</h4>
+                <ListItemEmbargoed item={item} isCard={true} />
             </div>
         </div>
     </div>);

diff --git a/assets/components/cards/render/TextOnlyCard.jsx b/assets/components/cards/render/TextOnlyCard.jsx
@@ -4,12 +4,14 @@ import {wordCount} from 'utils';
 import CardRow from './CardRow';
 import CardFooter from './CardFooter';
 import {getPicture, shortText} from 'wire/utils';
+import ListItemEmbargoed from '../../ListItemEmbargoed';
 
 const getTextOnlyPanel = (item, openItem, picture, cardId) => (
     <div key={item._id} className='col-sm-6 col-md-4 col-lg-3 col-xxl-2 d-flex mb-4'>
         <div className='card card--home' onClick={() => openItem(item, cardId)}>
             <div className='card-body'>
                 <h4 className='card-title'>{item.headline}</h4>
+                <ListItemEmbargoed item={item} isCard={true} />
                 <div className='wire-articles__item__text'>
                     <p className='card-text small'>{shortText(item, 40, true)}</p>
                 </div>

diff --git a/assets/components/cards/render/TopNewsOneByOneCard.jsx b/assets/components/cards/render/TopNewsOneByOneCard.jsx
@@ -4,6 +4,7 @@ import {wordCount} from 'utils';
 import {getPicture, getThumbnailRendition, getCaption, shortText} from 'wire/utils';
 import CardRow from './CardRow';
 import CardMeta from './CardMeta';
+import ListItemEmbargoed from '../../ListItemEmbargoed';
 
 const getTopNewsPanel = (item, picture, openItem, cardId) => {
 
@@ -16,6 +17,7 @@ const getTopNewsPanel = (item, picture, openItem, cardId) => {
             <img className='card-img-top' src={imageUrl} alt={caption} />
             <div className='card-body'>
                 <h4 className='card-title'>{item.headline}</h4>
+                <ListItemEmbargoed item={item} isCard={true} />
                 <CardMeta
                     pictureAvailable={!!picture}
                     wordCount={wordCount(item)}

diff --git a/assets/components/cards/render/TopNewsTwoByTwoCard.jsx b/assets/components/cards/render/TopNewsTwoByTwoCard.jsx
@@ -6,6 +6,7 @@ import CardRow from './CardRow';
 import CardFooter from './CardFooter';
 import CardMeta from './CardMeta';
 import CardBody from './CardBody';
+import ListItemEmbargoed from '../../ListItemEmbargoed';
 
 const getTopNewsLeftPanel = (item, picture, openItem, cardId) => {
 
@@ -20,6 +21,7 @@ const getTopNewsLeftPanel = (item, picture, openItem, cardId) => {
             </div>}
             <div className='card-body'>
                 <h2 className='card-title'>{item.headline}</h2>
+                <ListItemEmbargoed item={item} isCard={true} />
                 <CardMeta
                     pictureAvailable={!!picture}
                     wordCount={wordCount(item)}

diff --git a/assets/wire/components/WireListItem.jsx b/assets/wire/components/WireListItem.jsx
@@ -9,8 +9,8 @@ import ActionButton from 'components/ActionButton';
 
 import ListItemPreviousVersions from './ListItemPreviousVersions';
 import WireListItemIcons from './WireListItemIcons';
-import WireListItemEmbargoed from './WireListItemEmbargoed';
 import ActionMenu from '../../components/ActionMenu';
+import ListItemEmbargoed from '../../components/ListItemEmbargoed';
 
 class WireListItem extends React.Component {
     constructor(props) {
@@ -101,7 +101,7 @@ class WireListItem extends React.Component {
                                     <span>{item.source}
                                         {' // '}<span>{this.wordCount}</span> {gettext('words')}
                                         {' // '}<time dateTime={fullDate(item.versioncreated)}>{fullDate(item.versioncreated)}</time>
-                                        <WireListItemEmbargoed item={item} />
+                                        <ListItemEmbargoed item={item} />
                                     </span>
                                 </div>
                             </div>