From 90112c50c8ade5ab17f407288fd740347c4f4357 Mon Sep 17 00:00:00 2001 From: LubosKat Date: Thu, 7 Jan 2021 10:00:56 +0100 Subject: [PATCH 01/65] in-page navigation skeleton --- .../komponenty/examples/inPageNavigation.njk | 18 +++++ app/views/komponenty/in-page-navigation.njk | 76 +++++++++++++++++++ config/idskContentStructure.json | 1 + src/idsk/all.js | 7 +- src/idsk/components/_all.scss | 1 + .../components/in-page-navigation/README.md | 15 ++++ .../_in-page-navigation.scss | 68 +++++++++++++++++ .../in-page-navigation/in-page-navigation.js | 46 +++++++++++ .../in-page-navigation.yaml | 66 ++++++++++++++++ .../components/in-page-navigation/macro.njk | 3 + .../in-page-navigation/template.njk | 17 +++++ 11 files changed, 317 insertions(+), 1 deletion(-) create mode 100644 app/views/komponenty/examples/inPageNavigation.njk create mode 100644 app/views/komponenty/in-page-navigation.njk create mode 100644 src/idsk/components/in-page-navigation/README.md create mode 100644 src/idsk/components/in-page-navigation/_in-page-navigation.scss create mode 100644 src/idsk/components/in-page-navigation/in-page-navigation.js create mode 100644 src/idsk/components/in-page-navigation/in-page-navigation.yaml create mode 100644 src/idsk/components/in-page-navigation/macro.njk create mode 100644 src/idsk/components/in-page-navigation/template.njk diff --git a/app/views/komponenty/examples/inPageNavigation.njk b/app/views/komponenty/examples/inPageNavigation.njk new file mode 100644 index 0000000000..f8a567851a --- /dev/null +++ b/app/views/komponenty/examples/inPageNavigation.njk @@ -0,0 +1,18 @@ +{% from "../../../../src/idsk/components/in-page-navigation/macro.njk" import idskInPageNavigation %} +{{ idskInPageNavigation({ + items: [ + { + text: "Úvod", + link: "#uvod", + active: true + }, + { + text: "Počet subjektov aktuálne", + link: "#pocet-subjektov-aktualne" + }, + { + text: "Odklad povinnej aktivácie", + link: "#odklad-povinnej-aktivacie" + } + ] +}) }} \ No newline at end of file diff --git a/app/views/komponenty/in-page-navigation.njk b/app/views/komponenty/in-page-navigation.njk new file mode 100644 index 0000000000..22f2abd417 --- /dev/null +++ b/app/views/komponenty/in-page-navigation.njk @@ -0,0 +1,76 @@ +{% extends "layout.njk" %} +{% from "breadcrumbs/macro.njk" import govukBreadcrumbs %} + +{% set pageName = "In-page navigation" %} + +{% block beforeContent %} + {{ govukBreadcrumbs({ + "items": [ + { text: 'ID-SK frontend', href: '/' + legacyQuery }, + { text: pageName } + ] + }) }} +{% endblock %} + +{% block content %} +
+ + In-page navigation +

{{pageName}}

+

POPIS

+ +
+
+ +

Obsah:

+ + +

Popis

+

+ Informacie o komponente +

+
+ +
+

Ukážka 1

+
+
+
+ {% set exampleComponentHtml %} + {% include "../komponenty/examples/inPageNavigation.njk" %} + {% endset %} + {{exampleComponentHtml | safe}} +
+
+
+ +

Ukážka 2

+
+
+
+ +
+
+
+
+ +
+
+
+ +
+ +
+ +
+{% endblock %} \ No newline at end of file diff --git a/config/idskContentStructure.json b/config/idskContentStructure.json index 1fc74157af..1554c3fe14 100644 --- a/config/idskContentStructure.json +++ b/config/idskContentStructure.json @@ -39,6 +39,7 @@ "hlavicka-webove-sidla": "Hlavička pre webové sídla", "footer-extended": "Patička pre webové sídla a spätná väzba", "icony-a-obrazky": "Ikony a obrázky", + "in-page-navigation": "In-page navigácia", "karta": "Karta", "oznacenie-verzie-sluzby": "Označenie verzie služby", "rozcestnik": "Rozcestník", diff --git a/src/idsk/all.js b/src/idsk/all.js index 31fd847189..bdde5a4d46 100644 --- a/src/idsk/all.js +++ b/src/idsk/all.js @@ -5,6 +5,7 @@ import FooterExtended from "./components/footer-extended/footer-extended"; import CharacterCount from "./components/character-count/character-count"; import Crossroad from "./components/crossroad/crossroad"; import HeaderExtended from './components/header-extended/header-extended'; +import InPageNavigation from './components/in-page-navigation/in-page-navigation'; @@ -47,6 +48,9 @@ function initAll(options) { new HeaderExtended($headerExtended).init() }) + let $inPageNavigation = scope.querySelector('[data-module="idsk-in-page-navigation"]') + new InPageNavigation($inPageNavigation).init() + // Init all GOVUK components js initAllGOVUKjs(options); } @@ -57,5 +61,6 @@ export { CharacterCount, Crossroad, FooterExtended, - HeaderExtended + HeaderExtended, + InPageNavigation } \ No newline at end of file diff --git a/src/idsk/components/_all.scss b/src/idsk/components/_all.scss index 811cc2fba8..57aee45e55 100644 --- a/src/idsk/components/_all.scss +++ b/src/idsk/components/_all.scss @@ -6,4 +6,5 @@ @import "footer-extended/footer-extended"; @import "header/header"; @import "header-extended/header-extended"; +@import "in-page-navigation/in-page-navigation"; @import "warning-text/warning-text" diff --git a/src/idsk/components/in-page-navigation/README.md b/src/idsk/components/in-page-navigation/README.md new file mode 100644 index 0000000000..268c3bc047 --- /dev/null +++ b/src/idsk/components/in-page-navigation/README.md @@ -0,0 +1,15 @@ +# In-page navigation + +## Installation + +See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component. + +## Guidance and Examples + +Find out when to use the in-page navigation component in your service in the [GOV.UK Design System](https://idsk.gov.sk/komponenty/in-page-navigation). + +## Component options + +Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text. + +See [options table](https://idsk.gov.sk/komponenty/in-page-navigation) for details. \ No newline at end of file diff --git a/src/idsk/components/in-page-navigation/_in-page-navigation.scss b/src/idsk/components/in-page-navigation/_in-page-navigation.scss new file mode 100644 index 0000000000..6de8003a36 --- /dev/null +++ b/src/idsk/components/in-page-navigation/_in-page-navigation.scss @@ -0,0 +1,68 @@ +@import "../../../govuk/settings/all"; +@import "../../../govuk/tools/all"; +@import "../../../govuk/helpers/all"; + +@include govuk-exports("idsk/component/in-page-navigation") { + + $link-colour: #0065B3; + + .idsk-in-page-navigation { + @include govuk-font($size: 24); + + max-width: 270px; + } + + .idsk-in-page-navigation__title { + margin-bottom: 20px; + font-weight: bold; + } + .idsk-in-page-navigation__current-link { + display: none; + } + + .idsk-in-page-navigation__list { + @include govuk-clearfix; + + list-style-type: none; + margin: 0; + padding: 0; + + &-item { + color: $link-colour; + margin-bottom: 20px; + padding-left: 15px; + + &--active { + font-weight: bold; + position: relative; + + &::before { + @include govuk-shape-arrow($direction: right, $base: 10px, $display: inline-block); + + content: ""; + position: absolute; + top: 10px; + left: 0; + } + } + } + } + + .idsk-in-page-navigation__link { + @include govuk-link-common; + @include govuk-link-style-default; + + text-decoration: none; + } + + @include mq($until: desktop) { + + .idsk-in-page-navigation__title { + display: none; + } + .idsk-in-page-navigation__current-link { + display: block; + } + + } +} diff --git a/src/idsk/components/in-page-navigation/in-page-navigation.js b/src/idsk/components/in-page-navigation/in-page-navigation.js new file mode 100644 index 0000000000..eff8906d35 --- /dev/null +++ b/src/idsk/components/in-page-navigation/in-page-navigation.js @@ -0,0 +1,46 @@ +import '../../../govuk/vendor/polyfills/Function/prototype/bind' +import '../../../govuk/vendor/polyfills/Event' // addEventListener and event.target normaliziation + + +function InPageNavigation($module) { + this.$module = $module +} + +InPageNavigation.prototype.init = function () { + // Check for module + let $module = this.$module + if (!$module) { + return + } + + // Check for button + let $links = $module.querySelectorAll('.idsk-in-page-navigation__link') + if (!$links) { + return + } + + // Handle $link click events + $links.forEach($link => { + $link.addEventListener('click', this.handleClick.bind(this)) + }) +} + +/** +* An event handler for click event on $link - remove current active state and add them to the new one +* @param {object} event event +*/ +InPageNavigation.prototype.handleClick = function (event) { + + let $module = this.$module + let $link = event.target || event.srcElement + let $items = $module.querySelectorAll('.idsk-in-page-navigation__list-item') + let $currentLink = $module.querySelector('.idsk-in-page-navigation__current-link') + + $items.forEach($item => { + $item.classList.remove('idsk-in-page-navigation__list-item--active') + }) + $link.closest('li.idsk-in-page-navigation__list-item').classList.add('idsk-in-page-navigation__list-item--active') + $currentLink.innerText = $link.innerText; +} + +export default InPageNavigation diff --git a/src/idsk/components/in-page-navigation/in-page-navigation.yaml b/src/idsk/components/in-page-navigation/in-page-navigation.yaml new file mode 100644 index 0000000000..dde800459f --- /dev/null +++ b/src/idsk/components/in-page-navigation/in-page-navigation.yaml @@ -0,0 +1,66 @@ +params: +- name: items + type: array + required: true + description: Array of breadcrumbs item objects. + params: + - name: text + type: string + required: true + description: If `html` is set, this is not required. Text to use within the breadcrumbs item. If `html` is provided, the `text` argument will be ignored. + - name: html + type: string + required: true + description: If `text` is set, this is not required. HTML to use within the breadcrumbs item. If `html` is provided, the `text` argument will be ignored. + - name: href + type: string + required: false + description: Link for the breadcrumbs item. If not specified, breadcrumbs item is a normal list item. + - name: attributes + type: object + description: HTML attributes (for example data attributes) to add to the individual crumb. +- name: classes + type: string + required: false + description: Classes to add to the breadcrumbs container. +- name: attributes + type: object + required: false + description: HTML attributes (for example data attributes) to add to the breadcrumbs container. + +examples: +- name: default + data: + items: + - text: Úvod + link: #uvod + active: true + - text: Počet subjektov aktuálne + link: #pocet-subjektov-aktualne + - text: Odklad povinnej aktivácie + link: #odklad-povinnej-aktivacie + +- name: default-rozsireny + data: + items: + - text: Úvod + link: #uvod + active: true + - text: Počet subjektov aktuálne + link: #pocet-subjektov-aktualne + - text: Odklad povinnej aktivácie + link: #odklad-povinnej-aktivacie + - text: Povinná elektronická komunikácia so štátom sa o necelý mesiac dotkne už aj poľovníkov a cirkví + link: #povinna-elektronicka-komunikacia-so-statom-sa-o-necely-mesiac-dotkne-uz-aj-polovnikov-a-cirkvi + - text: Odklad povinnej aktivácie + link: #odklad-povinnej-aktivacie-1 + - text: Odklad povinnej aktivácie + link: #odklad-povinnej-aktivacie-2 + - text: Odklad povinnej aktivácie + link: #odklad-povinnej-aktivacie-3 + - text: Povinná elektronická komunikácia so štátom sa o necelý mesiac dotkne už aj poľovníkov a cirkví + link: #povinna-elektronicka-komunikacia-so-statom-sa-o-necely-mesiac-dotkne-uz-aj-polovnikov-a-cirkvi-1 + - text: Odklad povinnej aktivácie + link: #odklad-povinnej-aktivacie-4 + - text: Odklad povinnej aktivácie + link: #odklad-povinnej-aktivacie-5 \ No newline at end of file diff --git a/src/idsk/components/in-page-navigation/macro.njk b/src/idsk/components/in-page-navigation/macro.njk new file mode 100644 index 0000000000..487dd97932 --- /dev/null +++ b/src/idsk/components/in-page-navigation/macro.njk @@ -0,0 +1,3 @@ +{% macro idskInPageNavigation(params) %} + {%- include "./template.njk" -%} +{% endmacro %} diff --git a/src/idsk/components/in-page-navigation/template.njk b/src/idsk/components/in-page-navigation/template.njk new file mode 100644 index 0000000000..d93e64dcc5 --- /dev/null +++ b/src/idsk/components/in-page-navigation/template.njk @@ -0,0 +1,17 @@ +
+
Obsah
+
{{ params.items[0].text }}
+ +
From b6a18185e6315dbec6537eea1f09f315d6654145 Mon Sep 17 00:00:00 2001 From: LubosKat Date: Fri, 8 Jan 2021 16:34:15 +0100 Subject: [PATCH 02/65] added mobile version --- app/views/template.njk | 8 +- .../_in-page-navigation.scss | 84 +++++++++++++++++-- .../in-page-navigation/in-page-navigation.js | 30 +++++-- .../in-page-navigation.yaml | 26 +++--- .../in-page-navigation/template.njk | 6 +- 5 files changed, 123 insertions(+), 31 deletions(-) diff --git a/app/views/template.njk b/app/views/template.njk index c8e3c61336..c2caf97054 100644 --- a/app/views/template.njk +++ b/app/views/template.njk @@ -15,10 +15,10 @@ {% block headIcons %} - - - - + + + + {% endblock %} {% block head %}{% endblock %} diff --git a/src/idsk/components/in-page-navigation/_in-page-navigation.scss b/src/idsk/components/in-page-navigation/_in-page-navigation.scss index 6de8003a36..3ede459e32 100644 --- a/src/idsk/components/in-page-navigation/_in-page-navigation.scss +++ b/src/idsk/components/in-page-navigation/_in-page-navigation.scss @@ -4,8 +4,6 @@ @include govuk-exports("idsk/component/in-page-navigation") { - $link-colour: #0065B3; - .idsk-in-page-navigation { @include govuk-font($size: 24); @@ -16,7 +14,8 @@ margin-bottom: 20px; font-weight: bold; } - .idsk-in-page-navigation__current-link { + .idsk-in-page-navigation__link-panel, + .idsk-in-page-navigation__link-number { display: none; } @@ -28,7 +27,7 @@ padding: 0; &-item { - color: $link-colour; + color: govuk-colour("blue"); margin-bottom: 20px; padding-left: 15px; @@ -57,11 +56,84 @@ @include mq($until: desktop) { + .idsk-in-page-navigation { + max-width: 100%; + } + .idsk-in-page-navigation__title { display: none; } - .idsk-in-page-navigation__current-link { - display: block; + + .idsk-in-page-navigation__link-panel { + background: govuk-colour("dark-blue"); + cursor: pointer; + display: inline-block; + position: relative; + width: 100%; + + &-button { + @include govuk-font($size: 24); + + background: govuk-colour("dark-blue"); + border: none; + color: govuk-colour("white"); + font-weight: bold; + padding: 10px 50px 10px 15px; + text-align: left; + width: 100%; + background: govuk-colour("dark-blue"); + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + + &:focus { + @include govuk-focused-text; + } + } + + &::before { + border-style: solid; + border-width: 0.25em 0.25em 0 0; + color: govuk-colour("white"); + content: ""; + display: inline-block; + height: 0.45em; + right: 15px; + position: absolute; + top: 10px; + transform: rotate(135deg); + vertical-align: top; + width: 0.45em; + } + } + + .idsk-in-page-navigation__link { + text-decoration: underline; + + &-number { + display: inline-block; + text-decoration: underline; + } + &-number:focus { + text-decoration: none; + } + } + + .idsk-in-page-navigation__list { + border-bottom: 4px solid govuk-colour("dark-blue"); + padding-top: 15px; + max-height: 0; + transition: max-height 0.5s ease-out; + overflow: scroll; + } + + .idsk-in-page-navigation__list--expand { + max-height: 200px; + transition: max-height 0.5s ease-in; + } + + .idsk-in-page-navigation__list-item--active::before { + top: 5px; } } diff --git a/src/idsk/components/in-page-navigation/in-page-navigation.js b/src/idsk/components/in-page-navigation/in-page-navigation.js index eff8906d35..b6082fc3af 100644 --- a/src/idsk/components/in-page-navigation/in-page-navigation.js +++ b/src/idsk/components/in-page-navigation/in-page-navigation.js @@ -1,6 +1,6 @@ import '../../../govuk/vendor/polyfills/Function/prototype/bind' import '../../../govuk/vendor/polyfills/Event' // addEventListener and event.target normaliziation - +import { toggleClass } from '../../common' function InPageNavigation($module) { this.$module = $module @@ -21,26 +21,44 @@ InPageNavigation.prototype.init = function () { // Handle $link click events $links.forEach($link => { - $link.addEventListener('click', this.handleClick.bind(this)) + $link.addEventListener('click', this.handleClickLink.bind(this)) }) + + let $linkPanelButton = $module.querySelector('.idsk-in-page-navigation__link-panel') + if (!$linkPanelButton) { + return + } + $linkPanelButton.addEventListener('click', this.handleClickLinkPanel.bind(this)) + } /** -* An event handler for click event on $link - remove current active state and add them to the new one +* An event handler for click event on $link - add actual title to link panel * @param {object} event event */ -InPageNavigation.prototype.handleClick = function (event) { +InPageNavigation.prototype.handleClickLink = function (event) { let $module = this.$module let $link = event.target || event.srcElement let $items = $module.querySelectorAll('.idsk-in-page-navigation__list-item') - let $currentLink = $module.querySelector('.idsk-in-page-navigation__current-link') + let $linkPanelText = $module.querySelector('.idsk-in-page-navigation__link-panel-button') $items.forEach($item => { $item.classList.remove('idsk-in-page-navigation__list-item--active') }) $link.closest('li.idsk-in-page-navigation__list-item').classList.add('idsk-in-page-navigation__list-item--active') - $currentLink.innerText = $link.innerText; + $linkPanelText.innerText = $link.innerText; +} + +/** +* An event handler for click event on $linkPanel - collapse or expand in page navigation menu + * @param {object} event + */ +InPageNavigation.prototype.handleClickLinkPanel = function (event) { + + let $module = this.$module + let $list = $module.querySelector('.idsk-in-page-navigation__list') + toggleClass($list, 'idsk-in-page-navigation__list--expand') } export default InPageNavigation diff --git a/src/idsk/components/in-page-navigation/in-page-navigation.yaml b/src/idsk/components/in-page-navigation/in-page-navigation.yaml index dde800459f..59342783df 100644 --- a/src/idsk/components/in-page-navigation/in-page-navigation.yaml +++ b/src/idsk/components/in-page-navigation/in-page-navigation.yaml @@ -33,34 +33,34 @@ examples: data: items: - text: Úvod - link: #uvod + link: "#uvod" active: true - text: Počet subjektov aktuálne - link: #pocet-subjektov-aktualne + link: "#pocet-subjektov-aktualne" - text: Odklad povinnej aktivácie - link: #odklad-povinnej-aktivacie + link: "#odklad-povinnej-aktivacie" - name: default-rozsireny data: items: - text: Úvod - link: #uvod + link: "#uvod" active: true - text: Počet subjektov aktuálne - link: #pocet-subjektov-aktualne + link: "#pocet-subjektov-aktualne" - text: Odklad povinnej aktivácie - link: #odklad-povinnej-aktivacie + link: "#odklad-povinnej-aktivacie" - text: Povinná elektronická komunikácia so štátom sa o necelý mesiac dotkne už aj poľovníkov a cirkví - link: #povinna-elektronicka-komunikacia-so-statom-sa-o-necely-mesiac-dotkne-uz-aj-polovnikov-a-cirkvi + link: "#povinna-elektronicka-komunikacia-so-statom-sa-o-necely-mesiac-dotkne-uz-aj-polovnikov-a-cirkvi" - text: Odklad povinnej aktivácie - link: #odklad-povinnej-aktivacie-1 + link: "#odklad-povinnej-aktivacie-1" - text: Odklad povinnej aktivácie - link: #odklad-povinnej-aktivacie-2 + link: "#odklad-povinnej-aktivacie-2" - text: Odklad povinnej aktivácie - link: #odklad-povinnej-aktivacie-3 + link: "#odklad-povinnej-aktivacie-3" - text: Povinná elektronická komunikácia so štátom sa o necelý mesiac dotkne už aj poľovníkov a cirkví - link: #povinna-elektronicka-komunikacia-so-statom-sa-o-necely-mesiac-dotkne-uz-aj-polovnikov-a-cirkvi-1 + link: "#povinna-elektronicka-komunikacia-so-statom-sa-o-necely-mesiac-dotkne-uz-aj-polovnikov-a-cirkvi-1" - text: Odklad povinnej aktivácie - link: #odklad-povinnej-aktivacie-4 + link: "#odklad-povinnej-aktivacie-4" - text: Odklad povinnej aktivácie - link: #odklad-povinnej-aktivacie-5 \ No newline at end of file + link: "#odklad-povinnej-aktivacie-5" \ No newline at end of file diff --git a/src/idsk/components/in-page-navigation/template.njk b/src/idsk/components/in-page-navigation/template.njk index d93e64dcc5..2aa8bc8c9e 100644 --- a/src/idsk/components/in-page-navigation/template.njk +++ b/src/idsk/components/in-page-navigation/template.njk @@ -4,12 +4,14 @@ data-module="idsk-in-page-navigation" >
Obsah
-
{{ params.items[0].text }}
+
+ +