Component refactor (#765)

assets/stylesheets/components/_home_new.scss

@@ -55,12 +55,13 @@
   }
 
   // Adds spacing to the top level content when a flag banner is not present.
-  .dwds > .stack > :not(.govuk-phase-banner) {
+  .dwds > .content-stack > :not(.govuk-phase-banner) {
     margin-block-start: var(--space);
   }
 }
 
 .new-home {
+
   article,
   section {
     display: inline;
@@ -81,4 +82,4 @@
       margin-bottom: 10px;
     }
   }
-}
+}

assets/stylesheets/components/_streamfield-content.scss

@@ -10,7 +10,8 @@
     @include govuk-font($size: 16, $weight: bold);
   }
 
-  p, li {
+  p,
+  li {
     @extend %govuk-body-m;
   }
 
@@ -29,30 +30,19 @@
   }
 
   table {
-       @extend .govuk-table;
+    @extend .govuk-table;
 
-       caption {
-         @extend .govuk-table__caption;
-       }
+    caption {
+      @extend .govuk-table__caption;
+    }
 
-       th {
-         @extend .govuk-table__header;
-       }
+    th {
+      @extend .govuk-table__header;
+    }
 
-       td {
-         @extend .govuk-table__cell;
-       }
-  }
-}
-
-.ws-streamfield-content__image {
-  margin: 0 0 govuk-spacing(3) 0;
-  padding: 0;
-  display: table;
-
-  img {
-    max-width: 100%;
-    height: auto;
+    td {
+      @extend .govuk-table__cell;
+    }
   }
 }
 
@@ -71,8 +61,10 @@
 
 .ws-streamfield-content__cta-link-container {
   padding-top: govuk-spacing(2);
-  a, a:visited {
+
+  a,
+  a:visited {
     color: $govuk-text-colour;
     padding: govuk-spacing(4);
   }
-}
+}

src/content/templates/content/navigation_page.html

@@ -4,7 +4,7 @@
 {% block body_classes %}dwds-body dwds-navigation-page{% endblock %}
 
 {% block page_title %}
-    <div class="with-sidebar-right flex-end">
+    <div class="content-sidebar-right flex-end">
         <h1>{{ page.title }}</h1>
         <div>
             {% include "feedback.html" with form_id="hr-v1" classes="" prefix="navigation-page" custom_submit_data_function="navigationFeedbackData" %}
@@ -13,17 +13,17 @@ <h1>{{ page.title }}</h1>
 {% endblock page_title %}
 
 {% block primary_content %}
-    <div class="grid grid-multiple-columns">
+    <div class="content-grid grid-cards">
         {% for block in page.primary_elements %}
-            {% include_block block %}
+            <div class="dwds-content-item-card">{% include_block block %}</div>
         {% endfor %}
     </div>
 {% endblock primary_content %}
 
 {% block secondary_content %}
-    <div class="stack">
+    <div class="content-stack">
         {% for block in page.secondary_elements %}
-            {% include_block block %}
+            <div class="dwds-content-item-card no-shadow">{% include_block block %}</div>
         {% endfor %}
     </div>
 {% endblock secondary_content %}

src/core/templates/dwds_content.html

@@ -11,7 +11,7 @@
     {% block main_content %}
         <div class="dwds {% block main_content_classes %}{% endblock main_content_classes %}"
              style="margin-bottom: var(--s2)">
-            <div class="stack">
+            <div class="content-stack large">
                 {% block pre_content %}
                 {% endblock pre_content %}
                 {% block page_title %}
@@ -20,10 +20,10 @@ <h1>{{ page.title }}</h1>
                 {% endblock page_title %}
                 {% block bookmark %}
                     {% if page %}
-                        {% bookmark_page_input user page %}
+                        <div>{% bookmark_page_input user page %}</div>
                     {% endif %}
                 {% endblock bookmark %}
-                <div class="with-sidebar-right">
+                <div class="content-sidebar-right">
                     <div class="primary-content">
                         {% block pre_primary_content %}
                         {% endblock pre_primary_content %}
@@ -47,3 +47,9 @@ <h1>{{ page.title }}</h1>
             </div>
         </div>
     {% endblock main_content %}
+
+
+    {% block scripts %}
+        {{ block.super }}
+        <script src='{% static "dwds/elements/ribbon.js" %}'></script>
+    {% endblock scripts %}

src/dw_design_system/dwds/components/__init__.py

@@ -1,7 +1,6 @@
-from .cta_card import CTACardBlock
+from .cta_card import CTACardBlock, NavigationCardBlock
 from .engagement_card import EngagementCardBlock
 from .link_list import CustomPageLinkListBlock, TaggedPageListBlock
-from .navigation_card import NavigationCardBlock
 
 
 __all__ = [

src/dw_design_system/dwds/components/banner.html

@@ -0,0 +1,11 @@
+<div class="content-main{% if alert %} warning {% else %} highlight {% endif %}">
+    <div class="content-body content-stack">
+        {% if link %}
+            <p role="alert">
+                <a href="{{ link }}">{{ text }}</a>
+            </p>
+        {% else %}
+            <p role="alert">{{ text }}</p>
+        {% endif %}
+    </div>
+</div>

src/dw_design_system/dwds/components/box.html

@@ -0,0 +1 @@
+<div class="box dwds-box">{{ excerpt }}</div>

src/dw_design_system/dwds/components/box.scss

@@ -0,0 +1,3 @@
+.dwds-box {
+    background-color: pink;
+}

src/dw_design_system/dwds/components/comment_section.html

@@ -0,0 +1,8 @@
+{% load static %}
+
+<div class="dwds-comment-section">
+    <img class="comment-icon"
+         src="{% static '/images/dwds/icons/comment_icon.svg' %}"
+         alt="Comment bubble icon.">
+    {{ comment_count }} Comment{{ comment_count|pluralize }}
+</div>

src/dw_design_system/dwds/components/comment_section.scss

@@ -0,0 +1,5 @@
+.dwds-comment-section {
+    .comment-icon {
+        vertical-align: text-bottom;
+    }
+}

src/dw_design_system/dwds/components/content_list.html

@@ -0,0 +1,23 @@
+{% load cards %}
+
+<div class="dwds-content-list {% if as_card_grid %}as-card-grid{% endif %} content-item">
+    <div class="content-main {% if highlight %}highlight{% endif %}">
+        <div class="content-body content-body-space-padding content-stack large">
+            <h2>{{ title }}</h2>
+            {% if as_card_grid %}
+                <div class="content-grid grid-cards">
+                    {% for content_item in content_items %}
+                        <div class="dwds-content-item-card">{% page_to_engagement content_item %}</div>
+                    {% endfor %}
+                </div>
+            {% else %}
+                {% for content_item in content_items %}
+                    {% page_to_engagement content_item %}
+                {% endfor %}
+            {% endif %}
+            {% if link_url and link_text %}
+                {% include "dwds/components/link_action.html" with link_url=link_url link_text=link_text right=True %}
+            {% endif %}
+        </div>
+    </div>
+</div>

src/dw_design_system/dwds/components/content_list.scss

@@ -0,0 +1,32 @@
+.dwds-content-list {
+    > .content-main {
+        --content-main-padding: 0;
+    }
+
+    .content-item {
+        .content-custom-sidebar {
+            --sidebar-gap: var(--s1);
+
+            .content-main {
+                --content-main-padding: 0;
+            }
+
+            .content-image {
+                height: fit-content;
+                border-radius: 6px;
+            }
+        }
+    }
+}
+
+.dwds-content-list.as-card-grid {
+    .content-item {
+        .content-custom-sidebar {
+            --sidebar-gap: 0;
+
+            .content-main {
+                --content-main-padding: var(--s0);
+            }
+        }
+    }
+}

src/dw_design_system/dwds/components/cta.html

@@ -0,0 +1,6 @@
+<div class="content-main {% if highlight %}highlight{% endif %}">
+    <div class="content-body content-stack">
+        {% include 'dwds/elements/navigational_link.html' with url=url text=title %}
+        {% if description %}<p>{{ description }}</p>{% endif %}
+    </div>
+</div>