Add topic tags to Simorgh with event tracking

HarryVerhoef commented 3 years ago

Is your feature request related to a problem? Please describe. Add topic tags onward journeys to articles, PGLs, MAPs and STYs, we already have a psammead-topic-tags component so we just need to be able to render it with the surrounding markup. When a user clicks on a topic they're taken to a topic page (which don't yet exist in Simorgh).

Example articles for testing:

Describe the solution you'd like

Take the topic tags data and render the them according to the designs: https://zpl.io/anwnkEv

Put the topic tags behind a toggle.

Add block-level view and click tracking. For tracking use CreationID: topics

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

Testing notes E2Es to be written Manual testing of the topic tags a11y testing:

Scenario: Landmark

Given I am a screenreader user
When I navigate to the topics component
Then the screenreader announces a ‘complementary’ landmark
And this is labelled by the h2 [Topics Label]”
And this is not inside the main landmark

Scenario: H2

Given I am a screenreader user
When I navigate to the topics component
Then the screenreader announces the H2 as “Related Topics”
in the language of the service
And this is the first element in the component
And there are no other h2’s in the component

Dev insight: Will Cypress tests be required or are unit tests sufficient? Will there be any potential regression? etc

[X] This feature is expected to need manual testing.

Checklist

[X] (BBC contributors only) This issue follows the repository use guidelines

Additional context Add any other context or screenshots about the feature request here.

Translations Context / explanation (do not translate this column!)	Label that is displayed for related topics tags
English (News) text - please translate this	Related topics
English (Sport) text
English context
Persian	موضوعات مرتبط
Igbo	Isiokwu ndị emetụtara
Pidgin	Topics Wey Dem Resemble
Yoruba	Àwọn Àkórí Tójọra
Urdu	متعلقہ عنوانات
Pashto	اړونده مطالب
Arabic	مواضيع ذات صلة
Thai	ข่าวที่เกี่ยวข้อง
Punjabi	ਸਬੰਧਿਤ ਵਿਸ਼ੇ
Afaan Oromoo	Mata dureewwan walitti dhiyaatan
Amharic	ተያያዥ ርዕሶች
Indonesian	Topik terkait
Tigrinya	ተዛማዲ ዛዕባታት
Korean	관련 토픽
Afrique	Sujets associés
Gahuza	Ibindi bisa n’ibi
Somali	Mowduucyada la xiriira
Swahili	Mada zinazohusiana
Azeri	Əlaqəli mövzular
Hausa	Labarai masu alaka
Vietnamese	Chủ đề liên quan
Kyrgyz	Тектеш темалар
Japanese	関連トピックス
Nepali	सम्बन्धित सामग्री
Uzbek (Cyrillic)	Алоқадор мавзулар
Uzbek (Latin)	Aloqador mavzular
Sinhala	සබැඳි විෂයයන්
Bengali	সম্পর্কিত বিষয়
UK China (Simp)	相关主题内容
UK China (Trad)	相關主題內容
Turkce	İlgili Konular
Burmese (Original)	ဆက္စပ္အေၾကာင္းအရာမ်ား
Burmese (Unicode)	ဆကျစပျ အကွောငျးအရာမြား
Cymru Fyw	Pynciau Cysylltiedig
Gujarati	સંબંધિત મુદ્દા
Marathi	संबंधित विषय
BBC News Mundo	Temas relacionados
Naidheachdan	Cuspairean Ceangailte
Portuguese	Tópicos relacionados
Russian	Темы
Serbian(Cyr)	Повезане теме
Serbian (Lat)	Povezane teme
Tamil	தொடர்புடைய தலைப்புகள்
Telugu	సంబంధిత అంశాలు
Ukrainian	Також на цю тему
Russian for the Ukrainian service	Темы
Hindi	मिलते-जुलते मुद्दे
Zhongwen (Simp)	相关主题内容
Zhongwen (Trad)	相關主題內容

JonBeeb commented 3 years ago

Added translations for 'Related topics'

JonBeeb commented 3 years ago

Added creationID for tracking.

jroebu14 commented 3 years ago

@HarryVerhoef I've setup a toggle called topicsTags on test and live. I've enabled it for all services on test and disabled it for all services on live

JonBeeb commented 3 years ago

Added missing translations for Cymru Fyw Uzbek (Latin) Russian for the Ukrainian service

Still waiting for Naidheachdan

JonBeeb commented 3 years ago

Added missing translation for Naidheachdan

bbc / simorgh

Add topic tags to Simorgh with event tracking #9170