modification for generating IDSK package and displaying IDSK components

README.md

@@ -1,122 +1,29 @@
-GOV.UK Frontend ·
-[![Build Status](https://travis-ci.org/alphagov/govuk-frontend.svg?branch=master)](https://travis-ci.org/alphagov/govuk-frontend)
-[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+ID-SK Frontend
 =====================
 
-GOV.UK Frontend contains the code you need to start building a user interface
-for government platforms and services.
+ID-SK   frontend je knižnica komponentov, ktorá výchadza z open source knižnice gov.uk Frontend a pridáva k nej nové komponenty.
 
-See live examples of GOV.UK Frontend components, and guidance on when to use
-them in your service, in the [GOV.UK Design
-System](https://design-system.service.gov.uk/).
+Pozrite si funkčné príklady použitia komponentov v [Dizajn manuále ID-SK](https://idsk-elements.herokuapp.com).
 
-## Contact the team
+[//]: # (# Kontakt na tím)
 
-GOV.UK Frontend is maintained by a team at Government Digital Service. If you want to know more about GOV.UK Frontend, please email the [Design System
-team](mailto:[email protected]) or get in touch with them on [Slack](https://ukgovernmentdigital.slack.com/messages/govuk-design-system).
+[//]: # (GOV.UK Frontend is maintained by a team at Government Digital Service. If you want to know more about GOV.UK Frontend, please email the [Design System)
+[//]: # (team](mailto:[email protected]) or get in touch with them on [Slack](https://ukgovernmentdigital.slack.com/messages/govuk-design-system).)
 
-## Quick start
+## Ako pracovať s týmto repozitárom
 
-There are 2 ways to start using GOV.UK Frontend in your app.
+S týmto repozitárom je možné pracovať viacerými spôsobmi:
 
-Once installed, you will be able to use the code from the examples in the
-[GOV.UK Design System](https://design-system.service.gov.uk/)
-in your service.
+### 1. Použitie statického js/css vo vašom projekte
 
-### 1. Install with npm (recommended)
+Najnovší build js/css sa nachádza v adresári `/dist`. Na použitie na vašom projekte stačí skopírovať obsah adresára `/dist` do public adresára vášho projektu a nalinkovať js a css súbor. [Zobraziť viac podrobnosti (v angličtine).](docs/installation/installing-from-dist.md).
 
-We recommend [installing GOV.UK Frontend using node package manager
-(npm)](docs/installation/installing-with-npm.md).
+### 2. Použitie sass build vo vašom projekte
 
-### 2. Install by using compiled files
+Najnovší sass build spolu s js sa nachádza v adresári `/package`. Na použitie na vašom webovom sídle alebo aplikácii stačí skopírovať obsah adresára `/package` do ľubovolného adresára a zaradiť to do buildovania assetov podľa vášho výberu. [Zobraziť viac podrobností (v angličtine).](docs/installation/installing-with-npm.md)
 
-You can also [download the compiled and minified assets (CSS, JavaScript) from
-GitHub](docs/installation/installing-from-dist.md).
+## Licencia
 
-## Browser support
-
-GOV.UK Frontend will allow you to build services that comply with the [guidance
-in the Service Manual][service-manual-browsers].
-
-Currently, GOV.UK Frontend officially supports the following browsers:
-
-| Operating system | Browser                                | Support     |
-|----------------- |----------------------------------------|-------------|
-| Windows          | Internet Explorer 8-10                 | functional  |
-| Windows          | Internet Explorer 11                   | compliant   |
-| Windows          | Edge (latest 2 versions)               | compliant   |
-| Windows          | Google Chrome (latest 2 versions)      | compliant   |
-| Windows          | Mozilla Firefox (latest 2 versions)    | compliant   |
-| macOS            | Safari 9+                              | compliant   |
-| macOS            | Google Chrome (latest 2 versions)      | compliant   |
-| macOS            | Mozilla Firefox (latest 2 versions)    | compliant   |
-| iOS              | Safari for iOS 9.3+                    | compliant   |
-| iOS              | Google Chrome (latest 2 versions)      | compliant   |
-| Android          | Google Chrome (latest 2 versions)      | compliant   |
-| Android          | Samsung Internet (latest 2 versions)   | compliant   |
-
-‘Compliant’ means that the components must look as good and function as well as
-they do in other modern browsers.
-
-'Functional' means the components may not look perfect in the given browser, but
-must still be usable without errors and without 'looking broken'.
-
-If you are including GOV.UK Frontend as part of a stylesheet that you are
-generating in your application's build pipeline, you will need to [generate and
-include a separate stylesheet in order to support Internet Explorer
-8](docs/installation/supporting-internet-explorer-8.md).
-
-[service-manual-browsers]: https://www.gov.uk/service-manual/technology/designing-for-different-browsers-and-devices#browsers-to-test-in
-
-## Assistive technology support
-
-GOV.UK Frontend will allow you to build services that comply with the [guidance
-in the Service Manual][service-manual-assistive-technologies].
-
-Currently, GOV.UK Frontend officially supports the following assistive technologies:
-
-| Software                 | Version        | Type               | Browser                   |
-|--------------------------|----------------|--------------------|---------------------------|
-| JAWS                     | 15 or later    | screen reader      | Internet Explorer 11      |
-| ZoomText                 | 10.11 or later | screen magnifier   | Internet Explorer 11      |
-| Dragon NaturallySpeaking | 11 or later    | speech recognition | Internet Explorer 11      |
-| NVDA                     | 2016 or later  | screen reader      | Firefox (latest versions) |
-| VoiceOver                | 7.0 or later   | screen reader      | Safari on iOS10 and OS X  |
-
-In addition, we test that all content is accessible with keyboard only.
-
-We aim to support [users who adjust or override the colours of websites they visit][how-users-change-colours-on-websites]. We test this by [changing colours in Firefox][changing-colours-in-firefox], by [enabling 'High Contrast' mode in Windows][enabling-high-contrast-mode-in-windows] and by using the [High Contrast plugin for Chrome][high-contrast-plugin-for-chrome].
-
-[service-manual-assistive-technologies]: https://www.gov.uk/service-manual/technology/testing-with-assistive-technologies#what-to-test
-
-[changing-colours-in-firefox]:
-https://support.mozilla.org/en-US/kb/change-fonts-and-colors-websites-use
-
-[enabling-high-contrast-mode-in-windows]:
-https://support.microsoft.com/en-gb/help/13862/windows-use-high-contrast-mode
-
-[high-contrast-plugin-for-chrome]: https://chrome.google.com/webstore/detail/high-contrast/djcfdncoelnlbldjfhinnjlhdjlikmph?hl=en-US
-
-[how-users-change-colours-on-websites]:
-https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/
-
-## Getting updates
-
-To be notified when there’s a new release, you can either:
-
-- [watch the govuk-frontend Github repository](https://help.github.com/en/articles/watching-and-unwatching-repositories)
-- join the [#govuk-design-system channel on cross-government Slack](https://ukgovernmentdigital.slack.com/app_redirect?channel=govuk-design-system)
-
-Find out how to [update with npm](https://github.com/alphagov/govuk-frontend/blob/master/docs/installation/updating-with-npm.md).
-
-## Licence
-
-Unless stated otherwise, the codebase is released under the MIT License. This
-covers both the codebase and any sample code in the documentation. The
-documentation is © Crown copyright and available under the terms of the
-Open Government 3.0 licence.
-
-## Contribution guidelines
-
-If you want to help us build GOV.UK Frontend, view our [contribution
-guidelines](CONTRIBUTING.md).
+Ak nie je uvedené inak, kódy sú publikované s MIT License. Toto zahŕňa kódy aj ukážky kódov v dokumentácii.
+Pôvodná gov.uk dokumentácia je licencovaná pod © Crown copyright a dostupná podľa podmienok definovaných v
+Open Government 3.0 licence.

app.json

@@ -1,5 +1,5 @@
 {
-  "name": "govuk-frontend",
+  "name": "idsk-frontend",
   "scripts": {
   },
   "env": {

app/app.js

@@ -92,11 +92,13 @@ module.exports = (options) => {
   // Index page - render the component list template
   app.get('/', async function (req, res) {
     const components = fileHelper.allComponents
+    const idskComponents = fileHelper.allIdskComponents
     const examples = await readdir(path.resolve(configPaths.examples))
     const fullPageExamples = fileHelper.fullPageExamples()
 
     res.render('index', {
       componentsDirectory: components,
+      idskComponentsDirectory: idskComponents,
       examplesDirectory: examples,
       fullPageExamples: fullPageExamples
     })
@@ -109,6 +111,13 @@ module.exports = (options) => {
     next()
   })
 
+  // Whenever the route includes a :component parameter, read the component data
+  // from its YAML file
+  app.param('custom_component', function (req, res, next, componentName) {
+    res.locals.idskComponentData = fileHelper.getIdskComponentData(componentName)
+    next()
+  })
+
   // All components view
   app.get('/components/all', function (req, res, next) {
     const components = fileHelper.allComponents
@@ -146,6 +155,53 @@ module.exports = (options) => {
     })
   })
 
+  // Component 'README' page
+  app.get('/custom-components/:custom_component', function (req, res, next) {
+    // make variables available to nunjucks template
+    res.locals.componentPath = req.params.custom_component
+
+    res.render('custom_component', function (error, html) {
+      if (error) {
+        next(error)
+      } else {
+        res.send(html)
+      }
+    })
+  })
+
+  // Component example preview
+  app.get('/components/_custom/:custom_component/:example*?/preview', function (req, res, next) {
+    // Find the data for the specified example (or the default example)
+    let componentName = req.params.custom_component
+    let requestedExampleName = req.params.example || 'default'
+
+    let previewLayout = res.locals.idskComponentData.previewLayout || 'layout'
+
+    let exampleConfig = res.locals.idskComponentData.examples.find(
+      example => example.name.replace(/ /g, '-') === requestedExampleName
+    )
+
+    if (!exampleConfig) {
+      next()
+    }
+
+    // Construct and evaluate the component with the data for this example
+    let macroName = helperFunctions.componentNameToMacroName(componentName)
+    let macroParameters = JSON.stringify(exampleConfig.data, null, '\t')
+
+    res.locals.componentView = env.renderString(
+      `{% from '_custom/${componentName}/macro.njk' import ${macroName} %}
+      {{ ${macroName}(${macroParameters}) }}`
+    )
+
+    let bodyClasses = ''
+    if (req.query.iframe) {
+      bodyClasses = 'app-iframe-in-component-preview'
+    }
+
+    res.render('component-preview', { bodyClasses, previewLayout })
+  })
+
   // Component example preview
   app.get('/components/:component/:example*?/preview', function (req, res, next) {
     // Find the data for the specified example (or the default example)
@@ -179,11 +235,44 @@ module.exports = (options) => {
     res.render('component-preview', { bodyClasses, previewLayout })
   })
 
+  // Component example preview
+  app.get('/custom-components/:custom_component/:example*?/preview', function (req, res, next) {
+    // Find the data for the specified example (or the default example)
+    let componentName = req.params.custom_component
+    let requestedExampleName = req.params.example || 'default'
+
+    let previewLayout = res.locals.idskComponentData.previewLayout || 'layout'
+
+    let exampleConfig = res.locals.idskComponentData.examples.find(
+      example => example.name.replace(/ /g, '-') === requestedExampleName
+    )
+
+    if (!exampleConfig) {
+      next()
+    }
+
+    // Construct and evaluate the component with the data for this example
+    let macroName = helperFunctions.componentNameToMacroName(componentName)
+    let macroParameters = JSON.stringify(exampleConfig.data, null, '\t')
+
+    res.locals.componentView = env.renderString(
+      `{% from '_custom/${componentName}/macro.njk' import ${macroName} %}
+      {{ ${macroName}(${macroParameters}) }}`
+    )
+
+    let bodyClasses = ''
+    if (req.query.iframe) {
+      bodyClasses = 'app-iframe-in-component-preview'
+    }
+
+    res.render('component-preview', { bodyClasses, previewLayout })
+  })
+
   // Example view
-  app.get('/examples/:example', function (req, res, next) {
+  app.get('/examples/:example/:action?', function (req, res, next) {
     // Passing a random number used for the links so that they will be unique and not display as "visited"
     const randomPageHash = (Math.random() * 1000000).toFixed()
-    res.render(`${req.params.example}/index`, { randomPageHash }, function (error, html) {
+    res.render(`${req.params.example}/${req.params.action || 'index'}`, { randomPageHash }, function (error, html) {
       if (error) {
         next(error)
       } else {

app/app.test.js

@@ -59,7 +59,8 @@ describe(`http://localhost:${PORT}`, () => {
         const componentsList = $('li a[href^="/components/"]').get()
         // Since we have an 'all' component link that renders the default example of all
         // components, there will always be one more expected link.
-        const expectedComponentLinks = lib.allComponents.length + 1
+        //const expectedComponentLinks = lib.allComponents.length + 1
+        const expectedComponentLinks = lib.allComponents.length
         expect(componentsList.length).toEqual(expectedComponentLinks)
         done(err)
       })

app/views/layouts/component.njk

@@ -11,13 +11,14 @@
 {% set componentNameHuman = componentName | replace("-", " ") %}
 
 {% set htmlMarkup %}
+    {{ componentName }}
   {% include componentName +"/"+ componentName +".njk" ignore missing %}
 {% endset %}
 
 {% block beforeContent %}
   {{ govukBreadcrumbs({
     "items": [
-    { text: 'GOV.UK Frontend', href: '/' + legacyQuery },
+    { text: 'ID-SK frontend', href: '/' + legacyQuery },
     { text: componentNameHuman | capitalize }
     ]
   }) }}
@@ -33,6 +34,6 @@
   </div>
 
   {% block examples %}
-    {{ showExamples(componentName, componentNameHuman, componentData,legacyQuery) }}
+    {{ showExamples(componentName, componentNameHuman, componentData, legacyQuery) }}
   {% endblock %}
 {% endblock %}

app/views/layouts/custom_component.njk

@@ -0,0 +1,45 @@
+{% from "breadcrumbs/macro.njk" import govukBreadcrumbs %}
+{% from "macros/showExamples.njk" import showExamples %}
+
+{% extends "full-width.njk" %}
+
+{% set bodyClasses %}
+  language-markup
+{% endset %}
+
+{% set componentName = componentPath %}
+{% set componentNameHuman = componentName | replace("-", " ") %}
+
+{% set htmlMarkup %}
+  {% include componentName +"/"+ componentName +".njk" ignore missing %}
+{% endset %}
+
+{% block beforeContent %}
+  {{ govukBreadcrumbs({
+    "items": [
+    { text: 'ID-SK Frontend', href: '/' + legacyQuery },
+    { text: componentNameHuman | capitalize }
+    ]
+  }) }}
+{% endblock %}
+
+{% block content %}
+  <div class="govuk-width-container">
+    <h1 class="govuk-heading-xl">
+      {% block componentName %}
+        {{ componentNameHuman | capitalize }}
+      {% endblock %}
+      idsk
+    </h1>
+
+    {% if idskComponentData.description %}
+      <div class="govuk-inset-text">
+        {{ idskComponentData.description | safe }}
+      </div>
+    {% endif %}
+  </div>
+
+  {% block examples %}
+    {{ showExamples(componentName, componentNameHuman, idskComponentData, legacyQuery) }}
+  {% endblock %}
+{% endblock %}

app/views/layouts/index.njk

@@ -2,18 +2,29 @@
 
 {% block content %}
   <h1 class="govuk-heading-xl">
-    GOV.UK Frontend
+    ID-SK Frontend
   </h1>
 
   <div class="govuk-grid-row">
 
     <div class="govuk-grid-column-one-third">
-      <h2 class="govuk-heading-m">Components</h2>
+      <h2 class="govuk-heading-m">ID-SK components</h2>
+
+        <ul class="govuk-list">
+          {% for componentName in idskComponentsDirectory | sort %}
+              {% if componentName != '_partials' %}
+                  <li><a href="/custom-components/{{ componentName }}" class="govuk-link">{{ componentName | replace("-", " ") | capitalize }}</a></li>
+              {% endif %}
+          {% endfor %}
+        </ul>
+
+      <h2 class="govuk-heading-m">gov.uk components</h2>
 
       <ul class="govuk-list">
-        <li><a href="/components/all{{ legacyQuery }}" class="govuk-link">All</a></li>
         {% for componentName in componentsDirectory | sort %}
-          <li><a href="/components/{{ componentName }}{{ legacyQuery }}" class="govuk-link">{{ componentName | replace("-", " ") | capitalize }}</a></li>
+          {% if componentName != 'idsk' and componentName != 'custom' %}
+            <li><a href="/components/{{ componentName }}" class="govuk-link">{{ componentName | replace("-", " ") | capitalize }}</a></li>
+          {% endif %}
         {% endfor %}
       </ul>
     </div>
@@ -24,6 +35,7 @@
       <ul class="govuk-list">
       {% for exampleName in examplesDirectory | sort %}
         <li><a href="/examples/{{ exampleName }}{{ legacyQuery }}" class="govuk-link">{{ exampleName | replace("-", " ") | capitalize }}</a></li>
+        <!--li><a href="/examples/{{ exampleName }}/index" class="govuk-link">{{ exampleName | replace("-", " ") | capitalize }}</a></li-->
       {% endfor %}
       </ul>
     </div>