[#1951] Add userfeed frontend component

src/open_inwoner/components/templates/components/UserFeed/UserFeed.html

@@ -0,0 +1,58 @@
+{% load i18n icon_tags %}
+
+{# if userfeed data is true then show component #}
+<section class="userfeed">
+    <h2 class="h2 {# if userfeed true #}indicator{# endif #}">
+        {% trans "Aanvragen updates" %}
+    </h2>
+    <div class="userfeed__summary">
+        <ul class="userfeed__list">
+            <li class="userfeed__list-item">
+                <p class="userfeed__list-paragraph">
+                    Bij <span>{# num actions #}</span> aanvra(a)g(en) is uw actie nodig
+                </p>
+            </li>
+            <li class="userfeed__list-item">
+                <p class="userfeed__list-paragraph">
+                    Bij <span>{# num statuses #}</span> aanvra(a)g(en) is de status gewijzigd
+                </p>
+            </li>
+            <li class="userfeed__list-item">
+                <p class="userfeed__list-paragraph">
+                    Bij <span>{# num statuses #}</span> aanvra(a)g(en) is de status gewijzigd
+                </p>
+            </li>
+            <li class="userfeed__list-item">
+                <p class="userfeed__list-paragraph">
+                    Bij <span>{# num statuses #}</span> aanvra(a)g(en) is de status gewijzigd
+                </p>
+            </li>
+        </ul>
+    </div>
+    <div class="card-container card-container--columns-2">
+        <a href="{{ userfeedbackend }}" class="card {# if action-needed true #}card--status{# endif #}">
+            <div class="card__body card__body--tabled">
+                <p class="p tabled__value">Bijzondere bijstand aanvragen</p>
+                <h2 class="userfeed__heading">
+                    <span class="">Status gewijzigd naar &lsquo;<span class="status">Documenten nodig</span>&rsquo;</span>
+                </h2>
+                <span class="button button--icon-before button--transparent button--secondary">
+                {% icon icon="east" icon_position="after" primary=True outlined=True %}
+                </span>
+            </div>
+        </a>
+        {# Example of card without action status #}
+        <a href="{{ userfeedbackend }}" class="card">
+            <div class="card__body card__body--tabled">
+                <p class="p tabled__value">Bijzondere bijstand aanvragen</p>
+                <h2 class="userfeed__heading">
+                    <span class="">Status gewijzigd naar &lsquo;<span class="status">in behandeling</span>&rsquo;</span>
+                </h2>
+                <span class="button button--icon-before button--transparent button--secondary">
+                {% icon icon="east" icon_position="after" primary=True outlined=True %}
+                </span>
+            </div>
+        </a>
+    </div>
+</section>
+{# endif - if userfeed data is false then hide component #}

src/open_inwoner/scss/components/File/File.scss

@@ -1,7 +1,7 @@
 .file {
   &__container {
     &--recent {
-      border-left: var(--border-width-thin) solid var(--color-red);
+      border-left: var(--border-width-thin) solid var(--color-red-notification);
     }
   }
 
@@ -79,7 +79,7 @@
   }
 
   &__file--recent {
-    color: var(--color-red);
+    color: var(--color-red-notification);
     font-size: var(--font-size-body-extra-small);
     vertical-align: middle;
   }

src/open_inwoner/scss/components/Typography/H2.scss

@@ -23,6 +23,24 @@
   &.cms-plugin {
     margin-top: var(--gutter-width);
   }
+
+  &.indicator {
+    display: inline-block;
+    overflow: visible;
+    position: relative;
+
+    &:after {
+      content: '';
+      background-color: var(--color-red-notification);
+      border-radius: 100px;
+      display: inline-block;
+      height: 8px;
+      position: absolute;
+      right: -12px;
+      top: 6px;
+      width: 8px;
+    }
+  }
 }
 
 ///

src/open_inwoner/scss/components/UserFeed/UserFeed.scss

@@ -0,0 +1,91 @@
+.userfeed {
+  position: relative;
+
+  &__summary {
+    background-color: var(--color-white);
+    color: var(--color-red-notification);
+    display: block;
+    line-height: var(--font-line-height-body);
+    position: relative;
+  }
+
+  &__list {
+    column-gap: var(--spacing-medium);
+    list-style: none;
+    display: block;
+    flex-direction: row;
+    margin: 0;
+    padding: 0 0 var(--spacing-large) 0;
+
+    @media (min-width: 768px) {
+      display: flex;
+    }
+
+    &-item {
+      position: relative;
+      padding: 0;
+
+      &:after {
+        content: ' ';
+        position: absolute;
+        border-right: 1px solid var(--color-red-notification);
+        right: -4px;
+        top: 2px;
+        height: 16px;
+      }
+
+      &:first-child {
+        padding-left: 0;
+      }
+
+      &:last-child {
+        padding-right: 0;
+
+        &:after {
+          border-right: none;
+        }
+      }
+    }
+
+    &-paragraph {
+      font-size: var(--font-size-body-small);
+      margin: 0;
+      padding: 0;
+    }
+  }
+
+  &__heading {
+    color: var(--font-color-heading);
+    font-family: var(--font-family-heading);
+    font-size: var(--font-size-body);
+    line-height: var(--font-line-height-body);
+    padding: var(--spacing-large) 0 0 0;
+    margin: 0;
+  }
+
+  .card--status {
+    padding-top: 5px;
+    background-color: var(--color-danger-lightest);
+  }
+
+  .card__body {
+    background-color: #fff;
+    padding-right: var(--row-height);
+
+    .tabled__value {
+      color: var(--color-gray-dark);
+      font-size: var(--font-size-body-small);
+      margin: 0;
+      padding: 0;
+    }
+
+    span.button:last-child {
+      bottom: 20px;
+    }
+  }
+}
+
+/// Contextual
+.userfeed + h2 {
+  margin-top: var(--row-height);
+}

src/open_inwoner/scss/components/_index.scss

@@ -64,6 +64,8 @@
 @import './Notification/Notification.scss';
 @import './Notification/Notifications.scss';
 @import './Pagination/Pagination.scss';
+@import './Profile/personal-information';
+@import './Profile/personal-overview';
 @import './Plan/PlanContact.scss';
 @import './Plan/PlanCreate.scss';
 @import './Plan/PlanEdit.scss';
@@ -82,7 +84,6 @@
 @import './Social/Social.scss';
 @import './Spinner/Spinner.scss';
 @import './Status/StatusList.scss';
-@import './Status/Status.scss';
 @import './Step/StepIndicator.scss';
 @import './Sticky/Sticky.scss';
 @import './Table/Table.scss';
@@ -98,10 +99,9 @@
 @import './Typography/Link.scss';
 @import './Typography/LinkList.scss';
 @import './Typography/P.scss';
+@import './UserFeed/UserFeed.scss';
 @import './Video/Video.scss';
 @import './modal/modal';
 @import './Emoji/Emoji.scss';
-@import './Profile/personal-information';
-@import './Profile/personal-overview';
 @import './Profile/edit.scss';
 @import './WarningHeader/WarningHeader.scss';

src/open_inwoner/templates/pages/cases/status_inner.html

@@ -57,7 +57,7 @@ <h2 class="h2" id="documents-upload">{% trans "Document toevoegen" %}</h2>
 
             {#  Documents. #}
             {% if case.documents %}
-                <h2 class="h2" id="documents">{% trans 'Eerder toegevoegde documenten' %}{% if case.new_docs %}{% icon icon="fiber_manual_record" outlined=False extra_classes="file__file--recent" %}{% endif %}</h2>
+                <h2 class="h2 {% if case.new_docs %}indicator{% endif %}" id="documents">{% trans 'Eerder toegevoegde documenten' %}</h2>
                 {% case_document_list case.documents %}
             {% endif %}