CMS: Popular Topics grid component

cms/dynamic_content/blocks.py

@@ -13,6 +13,10 @@
 
 MINIMUM_ROWS_NUMBER_BLOCK_COUNT: int = 1
 MAXIMUM_ROWS_NUMBER_BLOCK_COUNT: int = 2
+
+POPULAR_TOPICS_BOTTOM_RIGHT_COLUMN_COUNT: int = 2
+POPULAR_TOPICS_HEADLINE_NUMBER_BLOCK_COUNT: int = 2
+
 METRIC_NUMBER_BLOCK_DATE_PREFIX_DEFAULT_TEXT = "Up to"
 
 
@@ -45,6 +49,46 @@ class Meta:
         icon = "table"
 
 
+class PopularTopicsHeadlineNumberBlockTypes(blocks.StreamBlock):
+    headline_number = HeadlineNumberComponent(help_text=help_texts.HEADLINE_BLOCK_FIELD)
+    trend_number = TrendNumberComponent(help_text=help_texts.TREND_BLOCK_FIELD)
+
+    class Meta:
+        icon = "bars"
+
+
+class PopularTopicsMetricNumberBlockTypes(blocks.StructBlock):
+    title = blocks.TextBlock(required=True, help_text=help_texts.TITLE_FIELD)
+    date_prefix = blocks.TextBlock(
+        required=True,
+        default=METRIC_NUMBER_BLOCK_DATE_PREFIX_DEFAULT_TEXT,
+        help_text=help_texts.HEADLINE_DATE_PREFIX,
+    )
+    headline_metrics = PopularTopicsHeadlineNumberBlockTypes(
+        required=True,
+        min_num=POPULAR_TOPICS_HEADLINE_NUMBER_BLOCK_COUNT,
+        max_num=POPULAR_TOPICS_HEADLINE_NUMBER_BLOCK_COUNT,
+        help_text=help_texts.POPULAR_TOPICS_METRIC_CARDS.format(
+            POPULAR_TOPICS_HEADLINE_NUMBER_BLOCK_COUNT
+        ),
+    )
+
+    class Meta:
+        icon = "table"
+
+
+class PopularTopicsRightColumnBottomRowBlockTypes(blocks.StreamBlock):
+    headline_metric_card = PopularTopicsMetricNumberBlockTypes(
+        required=True,
+        min_num=POPULAR_TOPICS_BOTTOM_RIGHT_COLUMN_COUNT,
+        max_num=POPULAR_TOPICS_BOTTOM_RIGHT_COLUMN_COUNT,
+        help_text=help_texts.POPULAR_TOPICS_HEADLINE_METRIC_CARDS,
+    )
+
+    class Meta:
+        icon = "table"
+
+
 class MetricNumberBlock(blocks.StreamBlock):
     column = MetricNumberBlockTypes()
 

cms/dynamic_content/cards.py

@@ -12,6 +12,7 @@
     HeadlineNumberBlockTypes,
     MetricNumberBlock,
     PageLinkChooserBlock,
+    PopularTopicsRightColumnBottomRowBlockTypes,
     RelatedLinkBlock,
     SourceLinkBlock,
 )
@@ -46,6 +47,9 @@
 
 MINIMUM_SEGMENTS_COUNT: int = 1
 
+POPULAR_TOPICS_SEGMENT_COUNT: int = 1
+POPULAR_TOPICS_RIGHT_COLUMN_BOTTOM_ROW_SEGMENT_COUNT: int = 2
+
 DEFAULT_SIMPLE_CHART_X_AXIS = "date"
 DEFAULT_SIMPLE_CHART_Y_AXIS = "metric"
 
@@ -191,7 +195,7 @@
         label="Tag manager event ID",
     )
     topic_page = PageLinkChooserBlock(
         page_type="topic.TopicPage",
         required=True,
         help_text=help_texts.TOPIC_PAGE_FIELD,
     )
@@ -575,6 +579,44 @@
     dual_category_chart_card = DualCategoryChartCard()
 
 
+class PopularTopicsLeftColumnBlockTypes(blocks.StreamBlock):
+    weather_health_alert_card = WeatherHealthAlertsCard()
+    chart_card_with_description = ChartWithDescriptionCard()
+
+    class Meta:
+        icon = "standalone_chart"
+
+
+class PopularTopicsRightColumnTopRowBlockTypes(blocks.StreamBlock):
+    chart_card = SimplifiedChartWithLink()
+
+    class Meta:
+        icon = "standalone_chart"
+
+
+class PopularTopicsCard(blocks.StructBlock):
+    left_column = PopularTopicsLeftColumnBlockTypes(
+        min_num=POPULAR_TOPICS_SEGMENT_COUNT,
+        max_num=POPULAR_TOPICS_SEGMENT_COUNT,
+        help_text=help_texts.POPULAR_TOPICS_LEFT_COLUMN,
+    )
+    right_column_top_row = PopularTopicsRightColumnTopRowBlockTypes(
+        min_num=POPULAR_TOPICS_SEGMENT_COUNT,
+        max_num=POPULAR_TOPICS_SEGMENT_COUNT,
+        help_text=help_texts.POPULAR_TOPICS_RIGHT_COLUMN_TOP_ROW,
+    )
+    right_column_bottom_row = PopularTopicsRightColumnBottomRowBlockTypes(
+        min_num=POPULAR_TOPICS_RIGHT_COLUMN_BOTTOM_ROW_SEGMENT_COUNT,
+        max_num=POPULAR_TOPICS_RIGHT_COLUMN_BOTTOM_ROW_SEGMENT_COUNT,
+        help_text=help_texts.POPULAR_TOPICS_RIGHT_COLUMN_BOTTOM_ROW.format(
+            POPULAR_TOPICS_RIGHT_COLUMN_BOTTOM_ROW_SEGMENT_COUNT
+        ),
+    )
+
+    class Meta:
+        icon = "standalone_chart"
+
+
 class ChartRowCard(blocks.StructBlock):
     columns = ChartRowBlockTypes(
         min_num=MINIMUM_COLUMNS_CHART_COLUMNS_COUNT,

cms/dynamic_content/help_texts.py

@@ -4,6 +4,31 @@
 So by moving 1 column component above the other, that component will be rendered in the column left of the other. 
 """
 
+POPULAR_TOPICS_LEFT_COLUMN: str = """
+This will be used to display a full height card on the left column.
+Choose either a weather health alerts card or a chart card with description.
+"""
+
+POPULAR_TOPICS_RIGHT_COLUMN_TOP_ROW: str = """
+This will be used to display a chart card in the top row of the second (right) column.
+"""
+
+POPULAR_TOPICS_RIGHT_COLUMN_BOTTOM_ROW: str = """
+This will require {} headline metrics cards which will be displayed from left to right  
+with each card occupying and sharing half of the bottom row right column of the 
+popular topics component.
+"""
+
+POPULAR_TOPICS_METRIC_CARDS: str = """
+This block only allows {} headline number blocks to be added.
+It can be used to add headline number and trend number.
+"""
+
+POPULAR_TOPICS_HEADLINE_METRIC_CARDS: str = """
+Each card will be displayed from left to right and will share and occupy half 
+of the bottom row right column of the popular topics component.
+"""
+
 HEADLINE_COLUMNS_IN_CHART_CARD: str = """
 Add up to {} headline or trend number column components within this space.
 Note that these figures will be displayed within the card, and above the chart itself.

cms/dynamic_content/sections.py

@@ -40,6 +40,7 @@ class ContentCardsSectionWithLink(StreamBlock):
     chart_card_section = cards.ChartCardSection()
     headline_numbers_row_card = cards.HeadlineNumbersRowCard()
     weather_health_alert_card = cards.WeatherHealthAlertsCard()
+    popular_topics_card = cards.PopularTopicsCard()
 
 
 class Section(StructBlock):