fix

.gitignore

@@ -8,3 +8,5 @@ npm-debug.log
 styleguide
 gh-pages
 .idea
+build/*
+

index.css

@@ -38,6 +38,7 @@
 @import "src/modules/dot";
 @import "src/modules/dropdown";
 @import "src/modules/entrypoint";
+@import "src/modules/errorpage";
 @import "src/modules/footer";
 @import "src/modules/hamburger";
 @import "src/modules/header";

src/components/prose/index.css

@@ -28,7 +28,11 @@
   @extend .u-text-r-xxs;
 }
 
+.Prose > a,
 .Prose p > a {
+  @extend .u-text-r-xs;
+  @extend .u-lineHeight-xl;
+
   color: var(--Prose-color-link);
 }
 

src/modules/errorpage/errorpage.config.json

@@ -0,0 +1,25 @@
+{
+  "title": "Error page",
+  "default": "404",
+  "hidden": true,
+  "variants": [
+    {
+      "name": "404",
+      "context": {
+        "title": "404",
+        "subtitle": "Pagina non trovata",
+        "text": "Oops! La pagina che cerchi non è stata trovata, <a href=\"javascript:history.back();\" title=\"Torna alla pagina precedente\">torna indietro</a> o utilizza il menu per continuare la navigazione.",
+        "button": "Torna alla Home"
+      }
+    },
+    {
+      "name": "403",
+      "context": {
+        "title": "403",
+        "subtitle": "Accesso negato",
+        "text": "Non disponi delle autorizzazioni per accedere a questa pagina, <a href=\"javascript:history.back();\" title=\"Torna alla pagina precedente\">torna indietro</a> o utilizza il menu per continuare la navigazione.",
+        "button": "Torna alla Home"
+      }
+    }
+  ]
+}

src/modules/errorpage/errorpage.tmpl

@@ -0,0 +1,6 @@
+<div class="ErrorPage u-textCenter u-text-xxs u-text-md-xs u-text-lg-s">
+    <h1 class="ErrorPage-title">{{ title }}</h1>
+    <h2 class="ErrorPage-subtitle">{{ subtitle }}</h2>
+    <p class="Prose u-margin-r-all">{{ text }}</p>
+    <a class="Button Button--default u-margin-r-all" href="#">{{ button }}</a>
+</div>

src/modules/errorpage/index.css

@@ -0,0 +1,19 @@
+.ErrorPage {
+  margin-bottom: 4em;
+  margin-top: 2em;
+}
+
+.ErrorPage-title {
+  @extend .u-lineHeight-s;
+  @extend .u-color-50;
+
+  font-size: 11.2em;
+  font-weight: 400;
+}
+
+.ErrorPage-subtitle {
+  @extend .u-lineHeight-s;
+  @extend .u-color-50;
+
+  font-size: 3.3em;
+}

src/templates/layout/_layout--servizio.tmpl

@@ -0,0 +1,68 @@
+<section>
+  <p class="u-md-hidden u-lg-hidden u-padding-r-all u-text-m u-background-grey-20">
+    <span class="Icon-list u-text-r-xl u-alignMiddle u-padding-r-right" aria-hidden="true"></span>
+    <a href="#subnav" class="js-scrollTo u-text-r-s u-textClean u-color-grey-50 u-alignMiddle">
+      Esplora contenuti correlati
+    </a>
+  </p>
+
+  <div class="u-layout-wide u-layoutCenter u-layout-withGutter u-padding-r-bottom u-padding-r-top">
+    {% render '@breadcrumb' %}
+  </div>
+
+  <div class="u-layout-wide u-layoutCenter u-layout-withGutter u-padding-r-top u-padding-bottom-xxl">
+
+    <h1 class="u-text-h2">
+      Nome del servizio
+    </h1>
+
+    <div class="Grid Grid--withGutter">
+      <div class="Grid-cell u-md-size8of12 u-lg-size8of12">
+        <article class="Prose u-layout-prose">
+          <p>
+            Una breve descrizione del servizio. {{ __TEXTS__[0] }}
+          </p>
+          <p>
+            Questo servizio serve per:
+          </p>
+          <ul>
+            <li>fare qualcosa</li>
+            <li>verificare lo stato della propria pratica</li>
+          </ul>
+          <h2 class="u-text-h3">A chi è rivolto</h2>
+          <p>
+            {{ __LONG_TEXTS__[1] }}
+          </p>
+          <h2 class="u-text-h3">Come funziona</h2>
+          <p>
+            {{ __LONG_TEXTS__[2] }}
+          </p>
+          <h2 class="u-text-h3">Prima di iniziare</h2>
+          <p>
+            Accertati di aver già...
+            <ul>
+              <li>azione 1</li>
+              <li>azione 2</li>
+              <li>azione 3</li>
+            </ul>
+          </p>
+          <p>
+            <button type="button" class="Button Button--default u-text-r-xs">Accedi al servizio</button>
+          </p>
+        </article>
+      </div>
+
+      <aside class="Grid-cell u-md-size4of12 u-lg-size4of12">
+        <div class="u-cf u-padding-bottom-xxl u-hidden u-md-block u-lg-block">
+          <button type="button" class="Button Button--default u-text-r-xs">Accedi al servizio</button>
+        </div>
+        <h3 class="u-text-h4">Altri servizi</h3>
+        <div class="u-sizeFull" id="subnav">
+          {% render '@linklist--padded' %}
+        </div>
+        <a href="#" title="torna all'inizio del contenuto" class="u-hiddenVisually">torna all'inizio del contenuto</a>
+      </aside>
+    </div>
+
+  </div>
+</section>

src/templates/page/_page--bottom.tmpl

@@ -0,0 +1,7 @@
+<div class="u-background-grey-80 u-hiddenPrint">
+    <div class="u-layout-wide u-layoutCenter u-layout-r-withGutter">
+        {% render '@footer' %}
+    </div>
+</div>
+
+{% render '@scrolltop' %}

src/templates/page/_page--content.tmpl

@@ -28,13 +28,5 @@
     </div>
   </div>
 
-  <div class="u-background-grey-80 u-hiddenPrint">
-    <div class="u-layout-wide u-layoutCenter u-layout-r-withGutter">
-    {% render '@footer' %}
-    </div>
-  </div>
-
-  {% render '@scrolltop' %}
-  {% render '@cookiebar' %}
-
+  {% render '@page--bottom' %}
 </div>

src/templates/page/_page--top.tmpl

@@ -0,0 +1,3 @@
+{% render '@cookiebar' %}
+{% render '@header', { menu: false, megamenu: false, isFixed: true }, true %}
+{% render '@offcanvas', { showOpenButton: false }, true %}

src/templates/page/page--Error_403.tmpl

@@ -0,0 +1,12 @@
+{% render '@page--top' %}
+
+<div id="main" role="main">
+
+    <div class="Grid">
+        <div class="Grid-cell Grid-cell--center u-size10of12 u-sm-size8of12 u-md-size5of12 u-lg-size4of12">
+            {% render '@errorpage--403' %}
+        </div>
+    </div>
+
+    {% render '@page--bottom' %}
+</div>

src/templates/page/page--Error_404.tmpl

@@ -0,0 +1,12 @@
+{% render '@page--top' %}
+
+<div id="main" role="main">
+
+    <div class="Grid">
+        <div class="Grid-cell Grid-cell--center u-size10of12 u-sm-size8of12 u-md-size5of12 u-lg-size4of12">
+            {% render '@errorpage--404' %}
+        </div>
+    </div>
+
+    {% render '@page--bottom' %}
+</div>

src/templates/page/page--landing.tmpl

@@ -1,5 +1,4 @@
-{% render '@header', { menu: true, megamenu: false, isFixed: true }, true %}
-{% render '@offcanvas', { showOpenButton: false }, true %}
+{% render '@page--top' %}
 
 <div id="main">
   <div class="u-layout-wide u-layoutCenter u-layout-withGutter u-padding-r-bottom u-padding-r-top">
@@ -8,13 +7,6 @@
 
   {% render '@layout--landing' %}
 
-  <div class="u-background-grey-80 u-hiddenPrint">
-    <div class="u-layout-wide u-layoutCenter u-layout-r-withGutter">
-    {% render '@footer' %}
-    </div>
-  </div>
-
-  {% render '@scrolltop' %}
-  {% render '@cookiebar' %}
+  {% render '@page--bottom' %}
 
 </div>

src/templates/page/page--megamenu.tmpl

@@ -1,3 +1,4 @@
+{% render '@cookiebar' %}
 {% render '@header', { menu: true, megamenu: true, clone: true, hideOnDesktop: true }, true %}
 {% render '@offcanvas', { showOpenButton: false }, true %}
 {% render '@page--content' %}

src/templates/page/page--menu.tmpl

@@ -1,3 +1,4 @@
+{% render '@cookiebar' %}
 {% render '@header', { menu: true, megamenu: false, isFixed: true }, true %}
 {% render '@offcanvas', { showOpenButton: false }, true %}
 {% render '@page--content' %}

src/templates/page/page--section.tmpl

@@ -1,16 +1,8 @@
+{% render '@cookiebar' %}
 {% render '@header', {isFixed: true}, true %}
 {% render '@offcanvas', { showOpenButton: false }, true %}
 
 <div id="main">
   {% render '@layout--section' %}
-
-  <div class="u-background-grey-80 u-hiddenPrint">
-    <div class="u-layout-wide u-layoutCenter u-layout-r-withGutter">
-    {% render '@footer' %}
-    </div>
-  </div>
-
-  {% render '@scrolltop' %}
-  {% render '@cookiebar' %}
-
+  {% render '@page--bottom' %}
 </div>

src/templates/page/page--servizio.tmpl

@@ -0,0 +1,8 @@
+{% render '@cookiebar' %}
+{% render '@header', {isFixed: true}, true %}
+{% render '@offcanvas', { showOpenButton: false }, true %}
+
+<main role="main" id="main">
+  {% render '@layout--servizio' %}
+  {% render '@page--bottom' %}
+</main>

src/templates/page/page.tmpl

@@ -1,3 +1,2 @@
-{% render '@header', { menu: false, megamenu: false, isFixed: true }, true %}
-{% render '@offcanvas', { showOpenButton: false }, true %}
+{% render '@page--top' %}
 {% render '@page--content' %}

theme/config-styleguide.js

@@ -0,0 +1,52 @@
+const CONFIG = {}
+
+/*
+ *  Whitelist: use this array of RegEx to include ONLY specific components
+ *  or modules into the final build.
+ *
+ *  __Example, to include just header + search form + offcanvas:
+ *
+ *   CONFIG.includes = [
+ *          '(.*)base(.*)',
+ *          '(.*)button(.*)',
+ *          '(.*)components(.*)',
+ *          '(.*)theme(.*)',
+ *          '(.*)utils(.*)',
+ *          '(.*)icons(.*)',
+ *          '(.*)hamburger(.*)',
+ *          '(.*)offcanvas(.*)',
+ *          '(.*)linklist(.*)',
+ *          '(.*)treeview(.*)',
+ *          '(.*)skiplinks(.*)',
+ *          '(.*)form(.*)',
+ *          '(.*)header(.*)'
+ *         ]
+ *
+ * @see index.css for possible values
+ *
+ */
+CONFIG.includes = [
+  '(.*)theme(.*)',
+  '(.*)utils(.*)',
+  '(.*)offcanvas(.*)',
+  '(.*)header(.*)',
+  '(.*)treeview(.*)',
+  '(.*)linklist(.*)',
+  '(.*)accordion(.*)',
+  '(.*)skiplinks(.*)'
+]
+
+/*
+ *  Blacklist: use this array of RegEx to exclude specific omponents
+ *  or modules from the final build.
+ *
+ *    ie. to exclude all global CSS:
+ *
+ *      CONFIG.excludes = [ '(.*)base(.*)', '(.*)normalize(.*)' ]
+ *
+ * @see index.css for possible values
+ *
+ */
+CONFIG.excludes = []
+
+module.exports = CONFIG