diff --git a/assets/agenda/utils.ts b/assets/agenda/utils.ts index 2c9b574c6..0606b9eb8 100644 --- 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 index e3b8d42f1..feb3a5ff0 100644 --- 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 index b504a3793..6055c74bb 100644 --- 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 index f68dd6015..ac74f7cdd 100644 --- 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 index 0d4e2eae9..f2248b979 100644 --- 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 new file mode 100644 index 000000000..af1f568d1 --- /dev/null +++ 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 ? ( +