GW-106 Add results info and refactor filters

nice-digital · Jun 14, 2018 · f8f03fa · f8f03fa
1 parent 5fccbfb
commit f8f03fa
Show file tree

Hide file tree

Showing 6 changed files with 145 additions and 64 deletions.
diff --git a/server/views/components/filters.njk b/server/views/components/filters.njk
@@ -2,6 +2,7 @@
 {% set title = "Filters" %}
 {% from "filter-group/filter-group.njk" import filterGroup %}
 {% from "filter-panel/filter-panel.njk" import filterPanel %}
+{% from "results-info/results-info.njk" import resultsInfo %}
 
 {% block body %}
 
@@ -10,7 +11,7 @@
 
 		<h2>Checkbox group in a filter panel</h2>
 
-		<div class="grid">
+		<div class="grid grid--loose">
 			<div data-g="12 sm:5 md:4 lg:3">
 
 				{% set filterGroupContent = {
@@ -29,7 +30,6 @@
 					{{ filterGroup(filterGroupContent) }}
 				{% endset %}
 
-
 				{% set filterPanelContent = {
 						title: "Filter",
 						body: filterPanelBody,
@@ -40,7 +40,14 @@
 
 			</div>
 			<div data-g="12 sm:7 md:8 lg:9">
-				Your list would go here
+
+				{% set resultsInfoContent = {
+						count: 99
+					} %}
+
+				{{ resultsInfo(resultsInfoContent) }}
+
+				Your results will go here...
 			</div>
 		</div>
 

diff --git a/src/components/_components.scss b/src/components/_components.scss
@@ -13,6 +13,7 @@
 'page-header/page-header',
 'panel/panel',
 'phase-banner/phase-banner',
+'results-info/results-info',
 'table/table',
 'tabs/tabs',
 'tag/tag';
diff --git a/src/components/filter-group/filter-group.njk b/src/components/filter-group/filter-group.njk
@@ -13,7 +13,7 @@
 		<div role="group" id="group-{{ filterGroup.id }}" aria-labelledby="group-title-{{ filterGroup.id }}" class="filter-group__options">
 			{% for option in filterGroup.options %}
 				<label for="filter_{{ filterGroup.id }}_{{option.id}}" class="filter-group__option">
-					<input id="filter_{{ filterGroup.id }}_{{option.id}}" type="checkbox" name="{{ filterGroup.id }}" value="{{option.id}}" {{ "checked=\"checked\"" if option.isSelected }} />
+					<input id="filter_{{ filterGroup.id }}_{{option.id}}" type="checkbox" name="{{ filterGroup.id }}" value="{{option.id}}" aria-controls="results-info-count" {{ "checked=\"checked\"" if option.isSelected }} />
 					{{option.label}}
 				</label>
 			{% endfor %}

diff --git a/src/components/filter-panel/_filter-panel.scss b/src/components/filter-panel/_filter-panel.scss
@@ -3,70 +3,70 @@
 ////
 
 .filter-panel {
-    margin: rem(0 0 $spacing-medium 0);
-
-    // Heading button to collapse/expand filter panel
-    &__heading {
-      @include font-size(1);
-      appearance: none;
-      background: $colour-nice-grey-2;
-      border: 0;
-      cursor: pointer;
-      display: block;
-      font-weight: bold;
-      padding: rem($spacing-small);
-      position: relative;
-      text-align: left;
-      width: 100%;
-
-      &:after {
-        @include nice-icon(chevron-up);
-        @include font-size(-1);
-        color: $colour-icons;
-        margin-top: - rem($spacing-small);
-        position: absolute;
-        right: rem($spacing-small);
-        top: 50%;
-      }
-
-      &[aria-expanded='false']:after {
-        content: nice-icon(chevron-down);
-      }
-
-      &:focus {
-        @include default-focus-style;
-      }
+  margin: rem(0 0 $spacing-medium 0);
+
+  // Heading button to collapse/expand filter panel
+  &__heading {
+    @include font-size(h5);
+    appearance: none;
+    background: $colour-nice-grey-2;
+    border: 0;
+    cursor: pointer;
+    display: block;
+    font-weight: bold;
+    padding: rem($spacing-small);
+    position: relative;
+    text-align: left;
+    width: 100%;
+
+    &:after {
+      @include nice-icon(chevron-up);
+      @include font-size(-1);
+      color: $colour-icons;
+      margin-top: - rem($spacing-small);
+      position: absolute;
+      right: rem($spacing-small);
+      top: 50%;
     }
-
-    &__body {
-      background: $colour-panel-default;
-      padding: rem($spacing-medium);
-
-      &[aria-hidden='true'] {
-        display: none;
-      }
+
+    &[aria-expanded='false']:after {
+      content: nice-icon(chevron-down);
     }
 
-    &__submit {
-        margin: rem($spacing-medium 0 0);
+    &:focus {
+      @include default-focus-style;
     }
-
-    @include mq($from: sm) {
-      &__heading {
-        background: none;
-        cursor: default;
-        margin-bottom: rem($spacing-small);
-        padding: 0;
-        pointer-events: none;
+  }
 
-        &:after {
-            display: none;
-        }
-      }
-
-      &__body {
-        background: none;
-        padding: 0;
+  &__body {
+    background: $colour-panel-default;
+    padding: rem($spacing-medium);
+
+    &[aria-hidden='true'] {
+      display: none;
+    }
+  }
+
+  &__submit {
+    margin: rem($spacing-medium 0 0);
+  }
+
+  @include mq($from: sm) {
+    &__heading {
+      background: none;
+      cursor: default;
+      margin-bottom: rem($spacing-medium);
+      padding: 0;
+      pointer-events: none;
+
+      &:after {
+        display: none;
       }
     }
-  }
+
+    &__body {
+      background: none;
+      padding: 0;
+    }
+  }
+}
diff --git a/src/components/results-info/_results-info.scss b/src/components/results-info/_results-info.scss
@@ -0,0 +1,48 @@
+////
+/// @group components
+////
+
+/// Results info shows at the top of a list of results and
+/// contains the count and sort options.
+.results-info {
+  @include clearfix;
+  margin: rem(0 0 $spacing-medium);
+
+  &__count {
+    @include font-size(h5);
+    font-weight: bold;
+    margin: rem(0 0 $spacing-small);
+  }
+
+  &__sort {
+    margin: 0;
+  }
+
+  &__filters {
+    clear: both;
+    list-style: none;
+    margin: 0;
+    padding-top: rem($spacing-small);
+  }
+
+  @include mq($from: sm) {
+    margin: rem(0 0 $spacing-medium);
+
+    &__count {
+      float: left;
+      margin: 0;
+      width: 50%;
+    }
+
+    &__sort {
+      float: right;
+      text-align: right;
+      width: 50%;
+    }
+
+    &__filter {
+      display: inline-block;
+      margin-right: rem($spacing-x-small);
+    }
+  }
+}
diff --git a/src/components/results-info/results-info.njk b/src/components/results-info/results-info.njk
@@ -0,0 +1,25 @@
+{% macro resultsInfo(resultsInfo) %}
+	<div class="results-info">
+        <h2 class="results-info__count" aria-live="assertive" id="results-info-count">Showing {{resultsInfo.count}} results</h2>
+        <p class="results-info__sort">
+            <span aria-hidden="true">Sort by: <span>
+            <a href="#"><span class="visually-hidden">Sort by </span>Date</a>
+            <span aria-label="or"> | </span>
+            <span>Title (active)</span>
+        </p>
+        <ul class="results-info__filters">
+            <li class="results-info__filter">
+                <span class="tag tag--outline">
+                    Type: Pathways
+                    <a href="#"><span class="icon icon--remove" aria-hidden="true"></span><span class="visually-hidden">Remove Type: Pathways filter</span></a>
+                </span>
+            </li>
+            <li class="results-info__filter">
+                <span class="tag tag--outline">
+                    Guidance programme: NICE guidelines
+                    <a href="#"><span class="icon icon--remove" aria-hidden="true"></span><span class="visually-hidden">Remove Guidance programme: NICE guidelines filter</span></a>
+                </span>
+            </li>
+        </ul>
+    </div>
+{% endmacro %}