From e3a3de06450c35ca934ad10602e48cce7f9afe37 Mon Sep 17 00:00:00 2001 From: Simon Whatley Date: Thu, 15 Aug 2019 10:37:07 +0100 Subject: [PATCH 01/14] Add component files --- src/moj/components/_all.scss | 9 +++++---- src/moj/components/side-navigation/README.md | 0 src/moj/components/side-navigation/_side-navigation.scss | 3 +++ src/moj/components/side-navigation/macro.njk | 3 +++ src/moj/components/side-navigation/template.njk | 0 5 files changed, 11 insertions(+), 4 deletions(-) create mode 100644 src/moj/components/side-navigation/README.md create mode 100644 src/moj/components/side-navigation/_side-navigation.scss create mode 100644 src/moj/components/side-navigation/macro.njk create mode 100644 src/moj/components/side-navigation/template.njk diff --git a/src/moj/components/_all.scss b/src/moj/components/_all.scss index bda1cddd8..3bcf60ea3 100755 --- a/src/moj/components/_all.scss +++ b/src/moj/components/_all.scss @@ -1,3 +1,4 @@ +@import "action-bar/action-bar"; @import "add-another/add-another"; @import "badge/badge"; @import "banner/banner"; @@ -11,16 +12,16 @@ @import "multi-select/multi-select"; @import "notification-badge/notification-badge"; @import "organisation-switcher/organisation-switcher"; +@import "page-header-actions/page-header-actions"; @import "pagination/pagination"; @import "password-reveal/password-reveal"; @import "primary-navigation/primary-navigation"; @import "progress-bar/progress-bar"; @import "rich-text-editor/rich-text-editor"; -@import "timeline/timeline"; -@import "search/search"; @import "search-toggle/search-toggle"; +@import "search/search"; +@import "side-navigation/side-navigation"; @import "sortable-table/sortable-table"; @import "sub-navigation/sub-navigation"; @import "tag/tag"; -@import "page-header-actions/page-header-actions"; -@import "action-bar/action-bar"; +@import "timeline/timeline"; diff --git a/src/moj/components/side-navigation/README.md b/src/moj/components/side-navigation/README.md new file mode 100644 index 000000000..e69de29bb diff --git a/src/moj/components/side-navigation/_side-navigation.scss b/src/moj/components/side-navigation/_side-navigation.scss new file mode 100644 index 000000000..3d5408e14 --- /dev/null +++ b/src/moj/components/side-navigation/_side-navigation.scss @@ -0,0 +1,3 @@ +/* ========================================================================== + #SIDE NAVIGATION + ========================================================================== */ \ No newline at end of file diff --git a/src/moj/components/side-navigation/macro.njk b/src/moj/components/side-navigation/macro.njk new file mode 100644 index 000000000..c8e571657 --- /dev/null +++ b/src/moj/components/side-navigation/macro.njk @@ -0,0 +1,3 @@ +{% macro mojSideNavigation(params) %} + {%- include "./template.njk" -%} +{% endmacro %} \ No newline at end of file diff --git a/src/moj/components/side-navigation/template.njk b/src/moj/components/side-navigation/template.njk new file mode 100644 index 000000000..e69de29bb From b284171cfc9f10a36162bca4254ead023913fd85 Mon Sep 17 00:00:00 2001 From: Simon Whatley Date: Thu, 15 Aug 2019 10:37:16 +0100 Subject: [PATCH 02/14] Add example files --- .../components/side-navigation/index.html | 37 +++++++++++++++++++ app/views/index.html | 1 + app/views/layouts/base.html | 1 + 3 files changed, 39 insertions(+) create mode 100644 app/views/components/side-navigation/index.html diff --git a/app/views/components/side-navigation/index.html b/app/views/components/side-navigation/index.html new file mode 100644 index 000000000..dc1840269 --- /dev/null +++ b/app/views/components/side-navigation/index.html @@ -0,0 +1,37 @@ +{% extends "layouts/base.html" %} + +{% block body %} + +
+ +
+ + {{ govukBackLink({ + text: "Back", + href: "../" + }) }} + +

+ Components Side navigation +

+ + {{ mojSideNavigation({ + label: 'Side navigation', + items: [{ + text: 'Nav item 1', + href: '#1', + active: true + }, { + text: 'Nav item 2', + href: '#2' + }, { + text: 'Nav item 3', + href: '#3' + }] + }) }} + +
+ +
+ +{% endblock %} diff --git a/app/views/index.html b/app/views/index.html index 636460178..1ccaf9ec9 100755 --- a/app/views/index.html +++ b/app/views/index.html @@ -25,6 +25,7 @@

MOJ Frontend

  • Progress bar
  • Rich text editor
  • Search
    • +
  • Side navigation
  • Sortable table
  • Sub-navigation
  • Tag
    • diff --git a/app/views/layouts/base.html b/app/views/layouts/base.html index 32ad60fd3..0ef448a2d 100755 --- a/app/views/layouts/base.html +++ b/app/views/layouts/base.html @@ -36,6 +36,7 @@ {%- from "moj/components/primary-navigation/macro.njk" import mojPrimaryNavigation %} {%- from "moj/components/progress-bar/macro.njk" import mojProgressBar %} {%- from "moj/components/search/macro.njk" import mojSearch %} +{%- from "moj/components/side-navigation/macro.njk" import mojSideNavigation %} {%- from "moj/components/sub-navigation/macro.njk" import mojSubNavigation %} {%- from "moj/components/timeline/macro.njk" import mojTimeline %} {%- from "moj/components/page-header-actions/macro.njk" import mojPageHeaderActions %} From 7567dace8e67119cecf3b99e5991964279637d15 Mon Sep 17 00:00:00 2001 From: Simon Whatley Date: Thu, 15 Aug 2019 10:54:04 +0100 Subject: [PATCH 03/14] Update template and style --- .../side-navigation/_side-navigation.scss | 124 +++++++++++++++++- .../components/side-navigation/template.njk | 26 ++++ 2 files changed, 149 insertions(+), 1 deletion(-) diff --git a/src/moj/components/side-navigation/_side-navigation.scss b/src/moj/components/side-navigation/_side-navigation.scss index 3d5408e14..d60bb47c6 100644 --- a/src/moj/components/side-navigation/_side-navigation.scss +++ b/src/moj/components/side-navigation/_side-navigation.scss @@ -1,3 +1,125 @@ /* ========================================================================== #SIDE NAVIGATION - ========================================================================== */ \ No newline at end of file + ========================================================================== */ + +.moj-side-navigation { + @include govuk-font(16); + + @include govuk-media-query($until: tablet) { + display: flex; + overflow-x: scroll; + } + + @include govuk-media-query($from: tablet) { + display: block; + padding: govuk-spacing(4) 0 0; + } + +} + +.moj-side-navigation__title { + @include govuk-font($size: 19); + color: govuk-colour("dark-grey"); + font-weight: normal; + margin: 0; + padding: govuk-spacing(2); + padding-left: govuk-spacing(2) + 4px; + + @include govuk-media-query($until: tablet) { + display: none; + } + +} + +.moj-side-navigation__list { + list-style: none; + margin: 0; + padding: 0; + + @include govuk-media-query($until: tablet) { + display: flex; + margin: 0; + white-space: nowrap; + } + + @include govuk-media-query($from: tablet) { + margin-bottom: govuk-spacing(4); + } +} + +.moj-side-navigation__list-item { + + @include govuk-media-query($until: tablet) { + display: flex; + } + + a, + a:link, + a:visited { + background-color: inherit; + color: govuk-colour("blue"); + display: block; + text-decoration: none; + + @include govuk-media-query($until: tablet) { + border-bottom: 4px solid transparent; + padding: govuk-spacing(3); + padding-bottom: govuk-spacing(3) - 4px; // Compensate for 4px border + } + + @include govuk-media-query($from: tablet) { + background-color: inherit; + border-left: 4px solid transparent; + padding: govuk-spacing(2); + } + + + } + + a:hover { + border-color: govuk-colour("light-blue"); + } + + a:focus { + color: $govuk-focus-text-colour; + background-color: $govuk-focus-colour; + box-shadow: 0 -2px $govuk-focus-colour, 0 4px $govuk-focus-text-colour; + border-color: $govuk-focus-text-colour; + border-left-color: transparent; + position: relative; + } + +} + +.moj-side-navigation__list-item--selected { + + a:link, + a:visited { + border-color: govuk-colour("blue"); + color: govuk-colour("blue"); + font-weight: bold; + } + + a:focus { + color: $govuk-focus-text-colour; + background-color: $govuk-focus-colour; + box-shadow: 0 -2px $govuk-focus-colour, 0 4px $govuk-focus-text-colour; + border-color: $govuk-focus-text-colour; + border-left-color: transparent; + } + + @include govuk-media-query($from: tablet) { + a:link, + a:visited { + background-color: govuk-colour("light-grey"); + } + + a:focus { + color: $govuk-focus-text-colour; + background-color: $govuk-focus-colour; + border-color: transparent; + } + } + + +} diff --git a/src/moj/components/side-navigation/template.njk b/src/moj/components/side-navigation/template.njk index e69de29bb..2fa775ba1 100644 --- a/src/moj/components/side-navigation/template.njk +++ b/src/moj/components/side-navigation/template.njk @@ -0,0 +1,26 @@ + \ No newline at end of file From dbbcec55106a65b68c0ab6be5916d211df14be31 Mon Sep 17 00:00:00 2001 From: Simon Whatley Date: Thu, 15 Aug 2019 10:54:13 +0100 Subject: [PATCH 04/14] Update examples --- .../components/side-navigation/index.html | 41 +++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/app/views/components/side-navigation/index.html b/app/views/components/side-navigation/index.html index dc1840269..3b6118381 100644 --- a/app/views/components/side-navigation/index.html +++ b/app/views/components/side-navigation/index.html @@ -15,6 +15,8 @@

    Components Side navigation

    +

    Example 1

    + {{ mojSideNavigation({ label: 'Side navigation', items: [{ @@ -30,6 +32,45 @@

    }] }) }} +

    Example 2

    + + {{ mojSideNavigation({ + label: 'Side navigation', + sections: [ + { + heading: { + text: 'Section 1' + }, + items: [{ + text: 'Nav item 1.1', + href: '#1', + active: true + }, { + text: 'Nav item 1.2', + href: '#2' + }, { + text: 'Nav item 1.3', + href: '#3' + }] + }, + { + heading: { + text: 'Section 2' + }, + items: [{ + text: 'Nav item 2.1', + href: '#1' + }, { + text: 'Nav item 2.2', + href: '#2' + }, { + text: 'Nav item 2.3', + href: '#3' + }] + } + ] + }) }} + From 2de771fcc780e7413c8710b7929ba02910713658 Mon Sep 17 00:00:00 2001 From: Simon Whatley Date: Thu, 15 Aug 2019 11:03:19 +0100 Subject: [PATCH 05/14] Update styles --- src/moj/components/side-navigation/_side-navigation.scss | 4 ++-- src/moj/components/side-navigation/template.njk | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/moj/components/side-navigation/_side-navigation.scss b/src/moj/components/side-navigation/_side-navigation.scss index d60bb47c6..f9c287a0c 100644 --- a/src/moj/components/side-navigation/_side-navigation.scss +++ b/src/moj/components/side-navigation/_side-navigation.scss @@ -47,7 +47,7 @@ } } -.moj-side-navigation__list-item { +.moj-side-navigation__item { @include govuk-media-query($until: tablet) { display: flex; @@ -91,7 +91,7 @@ } -.moj-side-navigation__list-item--selected { +.moj-side-navigation__item--active { a:link, a:visited { diff --git a/src/moj/components/side-navigation/template.njk b/src/moj/components/side-navigation/template.njk index 2fa775ba1..6d2094dc3 100644 --- a/src/moj/components/side-navigation/template.njk +++ b/src/moj/components/side-navigation/template.njk @@ -4,8 +4,8 @@ {{ section.heading.html | safe if section.heading.html else section.heading.text }}
      {%- for item in section.items %} -
    • - +
    • + {{- item.html | safe if item.html else item.text -}}
      • @@ -15,8 +15,8 @@ {% else %}
        {%- for item in params.items %} -
      • - +
      • + {{- item.html | safe if item.html else item.text -}}
        • From 0c08b894c54af4200c0b6f8f7e8efaaff12fff4d Mon Sep 17 00:00:00 2001 From: Simon Whatley Date: Thu, 15 Aug 2019 11:03:29 +0100 Subject: [PATCH 06/14] Update example --- app/views/components/side-navigation/index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/app/views/components/side-navigation/index.html b/app/views/components/side-navigation/index.html index 3b6118381..3667409a8 100644 --- a/app/views/components/side-navigation/index.html +++ b/app/views/components/side-navigation/index.html @@ -43,14 +43,14 @@

        Example 2

        }, items: [{ text: 'Nav item 1.1', - href: '#1', + href: '#1.1', active: true }, { text: 'Nav item 1.2', - href: '#2' + href: '#1.2' }, { text: 'Nav item 1.3', - href: '#3' + href: '#1.3' }] }, { @@ -59,13 +59,13 @@

        Example 2

        }, items: [{ text: 'Nav item 2.1', - href: '#1' + href: '#2.1' }, { text: 'Nav item 2.2', - href: '#2' + href: '#2.2' }, { text: 'Nav item 2.3', - href: '#3' + href: '#2.3' }] } ] From d37bdde2168748818c6ea7069484aa9d6d105b88 Mon Sep 17 00:00:00 2001 From: Simon Whatley Date: Thu, 15 Aug 2019 11:18:41 +0100 Subject: [PATCH 07/14] Update template.njk --- src/moj/components/side-navigation/template.njk | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/moj/components/side-navigation/template.njk b/src/moj/components/side-navigation/template.njk index 6d2094dc3..d1b32dcc1 100644 --- a/src/moj/components/side-navigation/template.njk +++ b/src/moj/components/side-navigation/template.njk @@ -1,7 +1,9 @@