CMS: Popular Topics grid component

Author: tushortz

cms/dynamic_content/blocks.py

@@ -13,6 +13,10 @@
 
 MINIMUM_ROWS_NUMBER_BLOCK_COUNT: int = 1
 MAXIMUM_ROWS_NUMBER_BLOCK_COUNT: int = 2
+
+MINIMUM_POPULAR_TOPICS_HEADLINE_NUMBER_BLOCK_COUNT: int = 2
+MAXIMUM_POPULAR_TOPICS_HEADLINE_NUMBER_BLOCK_COUNT: int = 2
+
 METRIC_NUMBER_BLOCK_DATE_PREFIX_DEFAULT_TEXT = "Up to"
 
 
@@ -45,6 +49,26 @@ class Meta:
         icon = "table"
 
 
+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,
+    )
+    rows = HeadlineNumberBlockTypes(
+        required=True,
+        min_num=MINIMUM_POPULAR_TOPICS_HEADLINE_NUMBER_BLOCK_COUNT,
+        max_num=MAXIMUM_POPULAR_TOPICS_HEADLINE_NUMBER_BLOCK_COUNT,
+        help_text=help_texts.POPULAR_TOPICS_NUMBERS_ROW_FIELD.format(
+            MAXIMUM_POPULAR_TOPICS_HEADLINE_NUMBER_BLOCK_COUNT
+        ),
+    )
+
+    class Meta:
+        icon = "table"
+
+
 class MetricNumberBlock(blocks.StreamBlock):
     column = MetricNumberBlockTypes()
 

cms/dynamic_content/cards.py

@@ -12,6 +12,7 @@
     HeadlineNumberBlockTypes,
     MetricNumberBlock,
     PageLinkChooserBlock,
+    PopularTopicsMetricNumberBlockTypes,
     RelatedLinkBlock,
     SourceLinkBlock,
 )
@@ -46,6 +47,15 @@
 
 MINIMUM_SEGMENTS_COUNT: int = 1
 
+MINIMUM_POPULAR_TOPICS_FIRST_COLUMN_COUNT: int = 1
+MAXIMUM_POPULAR_TOPICS_FIRST_COLUMN_COUNT: int = 1
+
+MINIMUM_POPULAR_TOPICS_TOP_RIGHT_CHART_COUNT: int = 1
+MAXIMUM_POPULAR_TOPICS_TOP_RIGHT_CHART_COUNT: int = 1
+
+MINIMUM_POPULAR_TOPICS_BOTTOM_ROW_COLUMNS_COUNT: int = 1
+MAXIMUM_POPULAR_TOPICS_BOTTOM_ROW_COLUMNS_COUNT: int = 1
+
 DEFAULT_SIMPLE_CHART_X_AXIS = "date"
 DEFAULT_SIMPLE_CHART_Y_AXIS = "metric"
 
@@ -490,6 +500,49 @@ class ChartRowBlockTypes(blocks.StreamBlock):
     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 = ChartCard()
+
+    class Meta:
+        icon = "standalone_chart"
+
+
+class PopularTopicsRightColumnBottomRowBlockTypes(blocks.StreamBlock):
+    headline_metric_card = PopularTopicsMetricNumberBlockTypes()
+
+    class Meta:
+        icon = "table"
+
+
+class PopularTopicsCard(blocks.StructBlock):
+    left_column = PopularTopicsLeftColumnBlockTypes(
+        min_num=MINIMUM_POPULAR_TOPICS_FIRST_COLUMN_COUNT,
+        max_num=MAXIMUM_POPULAR_TOPICS_FIRST_COLUMN_COUNT,
+        help_text=help_texts.POPULAR_TOPICS_LEFT_COLUMN,
+    )
+    right_column_top_row = PopularTopicsRightColumnTopRowBlockTypes(
+        min_num=MINIMUM_POPULAR_TOPICS_TOP_RIGHT_CHART_COUNT,
+        max_num=MAXIMUM_POPULAR_TOPICS_TOP_RIGHT_CHART_COUNT,
+        help_text=help_texts.POPULAR_TOPICS_RIGHT_COLUMN_TOP_ROW,
+    )
+    right_column_bottom_row = PopularTopicsRightColumnBottomRowBlockTypes(
+        min_num=MINIMUM_POPULAR_TOPICS_BOTTOM_ROW_COLUMNS_COUNT,
+        max_num=MAXIMUM_POPULAR_TOPICS_BOTTOM_ROW_COLUMNS_COUNT,
+        help_text=help_texts.POPULAR_TOPICS_RIGHT_COLUMN_BOTTOM_ROW,
+    )
+
+    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,28 @@
 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.
+Exactly one chart style card must be added here.
+"""
+
+POPULAR_TOPICS_RIGHT_COLUMN_BOTTOM_ROW: str = """
+This will be used to display the two headline metric cards with trend data in the bottom right 
+row of the second column.
+"""
+
+POPULAR_TOPICS_NUMBERS_ROW_FIELD: str = """
+This row only allows {} columns to be added within this component.
+Each columns can be used to add a number block. 
+This can be a headline number or a trend number.
+The two column block will be rendered on the bottom right 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

@@ -18,6 +18,7 @@ class ContentCards(StreamBlock):
     text_card = cards.TextCard()
     chart_row_card = cards.ChartRowCard()
     headline_numbers_row_card = cards.HeadlineNumbersRowCard()
+    popular_topics_card = cards.PopularTopicsCard()
     global_filter_card = GlobalFilterCard(
         help_text=help_texts.GLOBAL_FILTER_COMPONENT,
     )
@@ -40,6 +41,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):