create component WireLabel

dzonidoo · May 30, 2024 · 12ebf84 · 12ebf84
1 parent 3222e79
commit 12ebf84
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 3 deletions.
diff --git a/assets/agenda/utils.ts b/assets/agenda/utils.ts
@@ -1163,3 +1163,4 @@ export function formatAgendaDate(item: IAgendaItem, {localTimeZone = true, onlyD
 }
 
 export const isTopStory = (subj: ISubject) => subj.scheme === window.newsroom.client_config.agenda_top_story_scheme;
+export const wireLabel = (subj: ISubject) => subj.scheme === window.newsroom.client_config.wire_labels_scheme;
diff --git a/assets/globals.d.ts b/assets/globals.d.ts
@@ -51,6 +51,7 @@ interface IClientConfig {
     view_content_tooltip_email?: string;
     searchbar_threshold_value?: number;
     agenda_top_story_scheme?: string;
+    wire_labels_scheme?: string;
     coverage_status_filter?: {
         [key: string]: {
             enabled: boolean;

diff --git a/assets/styles/article-list.scss b/assets/styles/article-list.scss
@@ -325,6 +325,9 @@
     gap: var(--space--1);
     align-items: center;
     margin-block-end: 0;
+    .label + .label {
+        margin: 0;
+    }
 }
 .wire-articles__item-headline--indent {
     display: inline-block;

diff --git a/assets/styles/custom-variables.scss b/assets/styles/custom-variables.scss
@@ -672,6 +672,10 @@ $container-max-widths: (
 
     // COMPONENT: LABEL
     --color-top-story: var(--color-primary);
+    --label-color-bg-wire-latest: var(--color-warning);
+    --label-color-bg-wire-alert: var(--color-alert);
+    --label-color-bg-wire-advisory: var(--color-success);
+    --label-color-bg-wire-press-release: var(--color-info);
 }
 
 .line-shadow-end--light {

diff --git a/assets/styles/labels.scss b/assets/styles/labels.scss
@@ -88,6 +88,26 @@ $flex-align: (
             }
         }
     }
+    &.label-wire--latest {
+        background-color:  var(--label-color-bg-wire-latest);
+        border-color: var(--label-color-bg-wire-latest);
+        color: white;
+    }
+    &.label-wire--alert {
+        background-color:  var(--label-color-bg-wire-alert);
+        border-color: var(--label-color-bg-wire-alert);
+        color: white;
+    }
+    &.label-wire--advisory {
+        background-color:  var(--label-color-bg-wire-advisory);
+        border-color: var(--label-color-bg-wire-advisory);
+        color: white;
+    }
+    &.label-wire--press-release {
+        background-color:  var(--label-color-bg-press-release);
+        border-color: var(--label-color-bg-wire-press-release);
+        color: white;
+    }
 }
 
 .label--rounded {

diff --git a/assets/wire/components/WireLabel.tsx b/assets/wire/components/WireLabel.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import classNames from  'classnames';
+import {IArticle} from 'interfaces';
+import {wireLabel} from 'agenda/utils';
+
+interface IProps {
+    item: IArticle;
+}
+
+export default function WireLabel({item}: IProps) {
+    const classes = classNames('label label--fill label--rounded');
+
+    const subjectList = item.subject || [];
+    const wireItemSubjects = subjectList.filter(wireLabel);
+
+    return (
+        wireItemSubjects.length > 0 ? (
+            <div>
+                {wireItemSubjects.map(subject => (
+                    <span
+                        className={classes + ` label-wire--${subject.code}`}
+                        key={subject.name}
+                    >
+                        {subject.name}
+                    </span>
+                ))}
+            </div>
+        ) : null
+    );
+}
diff --git a/assets/wire/components/WireListItem.tsx b/assets/wire/components/WireListItem.tsx
@@ -28,6 +28,7 @@ import WireListItemDeleted from './WireListItemDeleted';
 import {Embargo} from './fields/Embargo';
 import {UrgencyItemBorder, UrgencyLabel} from './fields/UrgencyLabel';
 import {FieldComponents} from './fields';
+import WireLabel from './WireLabel';
 
 export const DEFAULT_META_FIELDS = ['source', 'charcount', 'versioncreated'];
 export const DEFAULT_COMPACT_META_FIELDS = ['versioncreated'];
@@ -225,8 +226,9 @@ class WireListItem extends React.Component<IProps, IState> {
                                         divider={false}
                                     />
                                 )}
-                                <Embargo item={item} />
+                                <Embargo item={item} isCard/>
                                 <UrgencyLabel item={item} listConfig={listConfig} filterGroupLabels={this.props.filterGroupLabels} />
+                                <WireLabel item={item}/>
                                 {item.es_highlight && item.es_highlight.headline ? <div
                                     dangerouslySetInnerHTML={({__html: item.es_highlight.headline && item.es_highlight.headline[0]})}
                                 /> : item.headline}

diff --git a/assets/wire/components/fields/UrgencyLabel.tsx b/assets/wire/components/fields/UrgencyLabel.tsx
@@ -51,7 +51,7 @@ export function UrgencyLabel ({item, listConfig, filterGroupLabels, alwaysShow =
 
     return (
         <span
-            className={'label label--orange2 label--rounded me-2'}
+            className={'label label--orange2 label--rounded'}
             style={{
                 color: urgencyHighlightColor,
                 backgroundColor: urgencyHighlightColor + '15', // color + alpha channel

diff --git a/design_app/src/assets/styles/theme_News-Pro.css b/design_app/src/assets/styles/theme_News-Pro.css
@@ -84,6 +84,12 @@
 
     /* COMPONENT: SEARCH RESULT PANEL (Tags list) */
     --search-result-tags-list-color-bg: var(--main-header-color-bg);
+
+    /* COMPONENT: WIRE ARTICLE (WireLabel) */
+    --label-color-bg-wire-latest: var(--color-warning);
+    --label-color-bg-wire-alert: var(--color-alert);
+    --label-color-bg-wire-advisory: var(--color-success);
+    --label-color-bg-wire-press-release: var(--color-info);
 }
 
 .navbar__logo img.navbar__logo-img--fr {
@@ -103,4 +109,4 @@
         margin-block-start: 0;
         max-width: 160px;
     }
-}
+}