Dobry den
ked pouzijem pre webpack setup aky mate na stranke

import { initAll } from  'govuk-frontend';
initAll();

tak nefunguju komponenty zavisle na js, napr govuk-accordion

Konfiguracia webpack je nasledovna

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const isDevelopment = process.env.NODE_ENV === 'development';


module.exports = {
  mode: 'development',
  entry: ['./src/index.js'],
  devtool: 'inline-source-map',
  devServer: {
    static: './dist',
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Output Management',
      template: './src/template.html',
      inject: 'body',
      hash: true
    }),
    new MiniCssExtractPlugin()
  ],
  output: {
    filename: '[name]bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.(s(a|c)ss)$/,
        use: [
          MiniCssExtractPlugin.loader, 
          'css-loader',"sass-loader"
         ],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },
    ],
  },
};

konzola ale nehlasi ziadnu chybu

Zdravím,

Mohol by som poprosiť o zapracovanie možnosti konfigurácie headeru do formy, že bude zobrazovať iba názov služby(úplne vľavo) a usera(úplne vpravo)? Ak sa pokúsim z momentálnych možností a nastavení headeru toto docieliť, dostanem sa maximálne k výsledku, že user nieje úplne vpravo ale viac-menej v strede (Po vymazaní navigation sa user posunie k názvu služby). Ďakujem.

Zvážil by som oddeliť premennú assetsPath pre logo a ikony.
Pri použití npm balíčka chcem meniť iba logo a ikony vlajok sú mi ukradnuté.
Ale pri definovaní assetsPath šablóna očakáva, že mám vo vlastných assetoch aj vlajky.

Ked pomer stran loga je iny ako defaultne pouzite logo "slovensko.sk", tak ostava obrovsky cierny space.

Tieto riadky

som overrideol nasledovne:

.idsk-header__logotype>* {
  width: auto;
  height: auto;
  max-height: 30px;
}

Navyse je potrebne zmazat tento riadok

Resp. jeho override vyzera nasledovne

.idsk-header__logo {
  width: auto;
}

Ahojte,

V README subore je neplatny link na metodicke usmernienie na budovanie Frontend sluzieb pomocou IDSK.

Je to tento link: https://idsk-preview.herokuapp.com/uvod/metodika-ucd

Mozete to prosim opravit?

Dakujem

Following my comment at #384 it would be nice to clarify what is the selected way of synchronization with the https://github.com/alphagov/govuk-frontend repository. This should be either in the readme file or the contribution guide. For example can issues in the src/govuk directory be fixed here?

Keď som IDSK použil ako npm balíček v projekte, tak mi pri kompilovaní šabĺony nenájde použitý govuk komponent.
Cesta by mala byť asi takto ../../../govuk/components/details/macro.njk

Menu button has hardcoded value for close in header web component:

Here:
https://github.com/id-sk/id-sk-frontend/blob/master/src/idsk/components/header-web/header-web.js#L287

It will be nice to set value dynamically.

Dobrý deň,

ID-SK používame v projekte pre obecný úrad Prešov. Problém je v tom, že nové sass vyhadzuje Deprecation Warning v prípade matematických operácií. Príklad:

V prípade importu celého balíčka all.scss trvá build nadmerne dlho kvoli kontrole.

V dokumentácii medzi príkladmi headera (https://idsk.gov.sk/custom-components/header) je príklad Header full width with user.
Keď si pozriem komponent na mobile, linky sa zroluju do menu buttona, ale nefunguje otváranie / zatváranie tohto menu, takže na mobile mi len zmiznú všetky linky.

Dobry den,
kedy by sme mohli ocakavat Release notesy ku verzii 2.8.0 ?
Dakujem
Bartos

Pri tomto fonte som narazil na viacero problemov.

1. Nie je sucastou tohto repozitaru, i ked (S)CSS ho referencuje v ramci struktury tohto repozitaru.
2. Nenasiel som zmienku, odkial si je mozne tento font stiahnut v pozadovanom formate. Nakoniec som skoncil s tym, ze som si ho stiahol priamo z idsk.gov.sk.
3. Neexistuje SCSS premenna, ktora by tento font dokazala vylucit z CSS. Skusal som si spravit jednoduchu webstranku (hlavicka, omrvinky, obrazok, cca. 1 obrazovka textu a paticka) a bol som celkom nemilo prekvapeny z toho, ze cela webstranka ma 195 kB a z toho je cca. 150 kB len font Source Sans Pro Regular + Bold.

Reopen, kedze @adriKosa zatvoril povodny issue #162 bez vyriesenia problemu.

Z https://idsk.gov.sk sa nedá preklikať na github.com repozitáre.

Očakával som to tu https://idsk.gov.sk/uvod/ako-zacat-s-vyvojom

Velkost tlacidla pre navrat na zaciatok stranky v rozsirenej paticke neberie do uvahy zmenu velkosti fontu medzi tabletom a desktopom co ma za nasledok, ze pri tablete a mobile je toto tlacidlo 5px nad patickou.

Ukazka:

Oprava:

@include govuk-media-query($until: tablet) {
	.idsk-footer-extended-up-button-div {
		height: 40px;
	}
}

Existuje niekde implementácia Cookie Banner-u tak ako je to napríklad na https://idsk.gov.sk/ ?

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch @id-sk/[email protected] for the project I'm working on.

we had problem with importing the scss files correrly

Here is the diff that solved my problem:

diff --git a/node_modules/@id-sk/frontend/idsk/components/header-extended/_header-extended.scss b/node_modules/@id-sk/frontend/idsk/components/header-extended/_header-extended.scss
index e61867e..8d13f26 100644
--- a/node_modules/@id-sk/frontend/idsk/components/header-extended/_header-extended.scss
+++ b/node_modules/@id-sk/frontend/idsk/components/header-extended/_header-extended.scss
@@ -1,5 +1,5 @@
 @import "../../base";
-@import "./node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
+@import "@fortawesome/fontawesome-free/scss/fontawesome.scss";
 
 @include govuk-exports("idsk/component/header-extended") {
   $idsk-header-background: govuk-colour("white") !default;

This issue body was partially generated by patch-package.

I was about to file a new issue when I saw the comment in the issue template that states:

Just to let you know, the GOV.UK Design System team are assisting with urgent Brexit-related work being undertaken by GDS between 13 and 26 August.

During this time, we will not be able to review your issue. Sorry about that.  

You’re welcome to raise it anyway, and we will get back to you as quickly as we can. 

Thank you!

I believe this do not apply to this repository and thus should be changed.

V aktualnej verzii sa objavili nove farby, ako napriklad zlta #FFDF0F, ktora oznacuje aktivne polia a vyuziva sa aj v dalsich momentoch. V zmysle bodu 6 principov v zmysle tohto dizajn manualu https://idsk.gov.sk/uvod/principy#pristupnost o Pristupnosti by mali farby splnat kontrastne podmienky pre ludi, ktori nevidia plne spektrum farieb.

Odporucam pri akejkolvek zmene farieb testovat
https://webaim.org/resources/contrastchecker/?fcolor=FFDF0F&bcolor=FFFFFF

Dobrý deň, prosim Vás mohli by ste pridať ukážku, alebo mi pomôcť v tomto vlákne, že ako správne sprístupniť cesty k assetom ?

Nedokážem sa pohnúť už 2 mesiace z errorov, ktoré prišli od verzie 2.8.0 a stále pretrvávajú. Nikde nie je žiadna ukážka, že ako ich správne importovať. Podľa mňa tento návod je už neaktuálny a nedostačujúci.

Postupujem takto:

$idsk-assets-path: '../../../node_modules/@id-sk/frontend/idsk/assets/';
@import '@id-sk/frontend/idsk/all';

No stojím na tomto errore :
Can't resolve '../../../node_modules/@id-sk/frontend/idsk/assets/images/govuk-crest.png'

govuk-crest,png sa nachádza v @id-sk/frontend/govuk/assets/images/ a nie v @idsk/frontend/idsk/assets/images/.. Ako ďalej postupovať?

@LubosKat

Ako priklad uvediem homepage pre webove sidlo
https://idsk.gov.sk/vzory/homepage

Focus na button Vyhladavania v intro-blocku - zlty background a biela ikonka, kontrast 1.33, fail
.idsk-blue-banner .govuk-link- detto pri focus stave, kontrast 1.33, fail
Linky v kartickach su modre s underline, hover je cierny s underline.. tiez mi pride farebny rozdiel pri tychto stavoch maly a mali by byt nejako odlisene - bud hrubsi underline, aelbo bodkovany.. whatever

Vsetky dropdown navigacie - ci uz hlavna navigacia, alebo jazyky, (vid napr. tu https://idsk.gov.sk/komponenty/hlavicka-webove-sidla) sa nedaju zavriet klavesou ESC ak chce uzivatel zo submenu odist, musi ho cely preklikat. Otvaranie submenu ma byt na poziadanie a malo by sa aj na poziadanie vediet zavriet - vid Bootstrap dorpdown

V dokumentacii sa pise:

Komponent populárny obsah má tri základné variácie pozadia: bez pozadia (so zarovnaním vpravo), so šedým a s modrým pozadím (so zarovnaním vľavo za pomoci odrážok).

https://idsk.gov.sk/komponenty/intro-block

V prikladoch je vsak variant bez pozadia zarovnany vlavo. Kde je pravda?

Bolo by fajn prelozit "Open all" a "Close all" pre komponent Accordion.

Na https://vakcinacia.nczisk.sk/ sa s tym popasovali svojsky (svojim vlastnym overrideom).

One would expect to find the link to the repo in the footer or main menu.

Pokial obrazok presiahne viewport, tak na mobile preteka + sa vytvori (zrejme nezelany) horizontalny scrollbar.

https://idsk-elements.herokuapp.com/vzory/stranky-dokoncenia-procesu

Tested on:

• Safari, iOS 13.4.1
• Safari 13.1, macOS
• Chrom 81.0.4044.122, macOS

V priečinku tools sa nachadzajú dôležité funkcie na importovanie fontov a images. Vidím tam 2 problémy:

1. V tools/all.scss sa neimportuje _image-url.scss v ktorom je zadefinovaná funkcia idsk-image-url.
2. Súbor tools/all.scss sa nikde nepoužíva (používa sa iba font-url.scss v overrides/_font-faces.scss)

Práve kvôli tomu vzniknú problémy s css-loader - napr. Can't resolve image '...' in '...' pretože funkcia idsk-image-url neexistuje.

https://idsk.gov.sk/komponenty/typografia#typography-lead-paragraph

Toto je len request pre lepsiu orientanciu v novo vydanych releasoch...

Vedeli by sme prosim pouzit hyperlinky v release notes priamo na web idsk.gov.sk ku konkretnym novo pridanym komponentom/vzorom ?

Idealne ich aj pomenovat po slovensky, tak ako sa ocitnu na stranke idsk.gov.sk.

Diky

Dnes som narazil na nasledujuci problem pri formulari e-hranica. Na Androidoch vyuziva Google Chrome svoj vlastny tmavy rezim, ktory sam invertuje farby (forced dark mode), bez moznosti toto spravanie vypnut, vysledkom coho je kontrast limitne sa bliziaci k jednej (cierny text na takmer ciernom pozadi). Je mi jasne, ze toto nie je problem id-sk ako takeho (kedze si to robi prehliadac sam), ale kedze sa jedna o majoritny prehliadac na majoritnej mobilnej platforme, tak by bolo dobre to vyriesit. Toto spravanie sa da v desktopovom Google Chrome nasimulovat povolenim chrome://flags/#enable-force-dark.

V úvode GitHub stránky je uvedený nefunknčný link na živé príklady jednotlivých komponentov (https://idsk-elements.herokuapp.com/) ten by mal už byť https://idsk.gov.sk/

Ku komponentu "oci vypalujuci" zlty banner https://id-sk-dev.herokuapp.com/komponenty/stitok-varovanie-info prebehla nejaka diskusia a testing?

Alebo to bol niekoho spasonosny napad, aby sa dala dat "VYRAZNA" informacia 😄 A potom vznikne este "VYRAZNEJSIA INFORMACIA" a dalsie a dalsie?

Zrejme duplikat uz existujucej komponenty https://id-sk-dev.herokuapp.com/components/warning-text

V anglickej mutacii stahujete udaje o vykonanych ag testov aj pocte zachytenych ag testmi z udsjuov o pcr testov. Hodnoti su rovnake uz dost dlho. <!--
Just to let you know, the GOV.UK Design System team are assisting with urgent Brexit-related work being undertaken by GDS between 13 and 26 August.

During this time, we will not be able to review your issue. Sorry about that.

You’re welcome to raise it anyway, and we will get back to you as quickly as we can.

Thank you!
-->

Pri prechadzani stranky TABulatorom je problem vyjst z headeru. Aplikujete Tab trap na header na desktopovej verzi. Nechcete sa uz vykaslat na vymyslanie kolesa a postavit to uz na nejakom normalnom frameworku, ktory ma pristupnost uz vyriesenu? Bootstrap napriklad?

vid video: posledna polozka v navigacii je naozaj posledna. Mozte trieskat do TABu kolko len chcete
https://user-images.githubusercontent.com/4980919/157689430-f59a1afb-0cba-43d8-b2d8-7376d9c2a5f8.mov

zdroj: https://idsk.gov.sk/vzory/vzor-navigacie-na-stranke

V mobilenj aplikacii sa vyhladavanie prekryva s nazvami kotiev, cim je pole s vyhladavanim nepristupne. Ak by tam vyhladavanie nebolo, budu nedostupne prve polozky v samotnej navigacii.

Desktop navigacia ma vertikalne menu riesene pomocou position: sticky;, co je krasne, ale treba mysliet aj na to, ze navigacia moze byt dlhsia, rozlisenie zobrazovacieho zariadenia mensie a uzivatel sa ku spodnym polozkam menu nedostane inak, iba skrolovanim velmi dlhej stranky. Bolo by fajn zabezpecit skrolovanie spolu s obsahom a ked tak urobit ho sticky na spodnu stranu stranky. Alebo skrolovat v menu.. it's up to you, ale toto aktualne riesenie nie je dokonale.

A este detail - neverim tomu, ze hover v navigacii je koser s pristupnostou - farba medzi klasickou linkou a hover je minimalna.

Pri pouzivani https://github.com/id-sk/id-sk-frontend/blob/master/dist/idsk-frontend.min.css robia problem linky na assets, konkretne su napr. nalinkovane fonty /assets/fonts, pricom v mojom pripade mam tieto subory na inej URL.

Fajn by bolo zmenit na relativne referencovanie.

Obrazky a videa ked sa includenu napr. v
<div class="govuk-grid-row"> <div class="govuk-grid-column-full">
tak pretekaju cez container.

Moj fix ako genericky override, mozno dirty, neodvazil som sa s tym hrat priamo v repe:
video, img { width: 100%; }

V /dist/ adresari zrejme chyba cely folder ./assets/images/header-web/. Zaroven assety su linkovane absolutnou cestou v CSS, co sposobuje problemy pri inom umiestneni ako v root-e. Konkretne napr.:

• /assets/images/header-web/navigation-arrow.svg
• /assets/images/header-web/navigation-arrow-mobile.svg

ale aj x dalsich, treba to cele popozerat.

Pri spracovavani feedbacku cez footer komponent by sa mala v javascripte pri zostavovani poziadavky cez mailto: protokol pouzit funkcia encodeURIComponent na spravne zakodovanie specialnych znakov, napr. \n ... teraz sa naformatovana sprava na stranke prenesie do emailoveho klienta bez zalomeni riadkov. Pouzivam minifikovanu verziu, tak neviem presne, kde sa to pouziva, ale mala by sa tato logika uplatnit vsade, kde sa zostavuje url.

Dobrý deň,

nedavno zmizol spacing medzi vertikálne poziciovanými radio buttonmi, a teda sú takto poziciované radio buttony nalepené na seba. Bol to zámer alebo to je len bug?

Ukážka - Prepínače umiestnené pod sebou

Ďakujem

The default assets path assume there is directory with assets at /assets/.

For example /assets/images/loupe.svg .
This is declared in @id-sk/frontend/idsk/components/search-results/search-results.scss
as background-image: idsk-image-url("loupe.svg");. The idsk-image-urlfunction by default employs the $idsk-assets-path property. As a result changing this property to ../node_modules/@id-sk/frontend/idsk/assets/ allow a user to avoid the need to copy all the assets .... except it does not.

This cause another problem, for example 'govuk-crest.png'. This asset is used on two files:

./node_modules/@id-sk/frontend/govuk/components/footer/_footer.scss:    background-image: govuk-image-url("govuk-crest.png");
./node_modules/@id-sk/frontend/idsk/components/footer/_footer.scss:    background-image: idsk-image-url("govuk-crest.png");

While the first use can be fixed by $govuk-assets-path: "../node_modules/@id-sk/frontend/govuk/assets/" the second one can't.

The reason is that the govuk-crest.pngis not in the idsk asset file. This effectively force users to create an asset directory and copy all assets there.

A solution would be to employ the govuk function for resources from govuk and only employ idsk functions for assets in the isdk asset directory.

Another solution would be to copy all default resrouces from govuk to idsk here in the repository.

This does not apply only to images, but to all assets in general.

Preklep v hlavičke
Oficiálna stránka verejnej správy SR -> po rozbalení, hneď prvý nadpis "Doména gov.sk je oficálna" má byť "oficiálna"

https://www.google.com/search?q=%22Dom%C3%A9na+gov.sk+je+ofic%C3%A1lna%22&rlz=1C5CHFA_enSK1009SK1009&oq=%22Dom%C3%A9na+gov.sk+je+ofic%C3%A1lna%22&aqs=chrome..69i57j33i160l4.5503j0j7&sourceid=chrome&ie=UTF-8

Dobry den
Pravdepodobne je zla cesta v subore @id-sk\frontend\idsk\components\header-extended_header-extended.scss

namiesto
@import "./node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
by malo byt
@import "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";

pretoze pri prvom zapise vyhadzuje chybu pri kompilovani sass suboru v ktorom je nalinkovane idsk csss

Error: Can't find stylesheet to import.
?
5 │ @import "./node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss"
;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

?
node_modules@id-sk\frontend\idsk\components\header-extended_header-extended.
scss 5:9 @import
node_modules@id-sk\frontend\idsk\components_all.scss 13:9
@import
node_modules@id-sk\frontend\idsk\all.scss 12:9
@import
scss\main.scss 1:10
root stylesheet

On mobile devices, eg. Safari browser when scrolled down and header is sticky, language menu flows randomly:

You can't have position fixed (language list) inside position sticky (header).

Again, please enable PRs so public can help improve state services.

Neexistuje, resp. nenasiel som selector pre nastylovanie generickeho HTML contentu - napr. vystup z WYSIWYG editora alebo transformacia markdown-u do HTML.

V ramci novych elementoch chybaju zmysluplne popisy, resp. usmernenia, v akych situaciach sa jednotlive komponenty maju pouzivat. Predbezne su publishnute tu:

https://id-sk-dev.herokuapp.com/komponenty/hlavicka-webove-sidla
Pri tomto by bolo fajn sa zamerat aj na povodnu hlavicku a vyspecifikovat, kedy sa ma ta pouzivat (resp. nema).

https://id-sk-dev.herokuapp.com/komponenty/footer-extended
Tu je nieco, bolo by fajn, keby toho bolo viac. Plus je v tom nejaky preklep - dvojbodka?

https://id-sk-dev.herokuapp.com/komponenty/karta
"Karty sa používaju na rôzne veci" 😄

https://id-sk-dev.herokuapp.com/komponenty/rozcestnik
"Rozcestník sa používa na navigáciu" ...

https://id-sk-dev.herokuapp.com/komponenty/stitok-varovanie-info
"POPIS"

Je tento import v _header-extended.scss v poriadku ?

@import "./node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";

Podozrivý je trochu aj ten fort namiesto font, v každom prípade nič z toho nie je spomenuté v dependencies package.json.

Pri pokuse použiť 2.2.0 verziu dostanem chybu:

ERROR in ./node_modules/@id-sk/frontend/idsk/all.scss (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/dist/cjs.js??ref--13-3!./node_modules/@id-sk/frontend/idsk/all.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
╷
5 │ @import "./node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules@id-sk\frontend\idsk\components\header-extended_header-extended.scss 5:9 @import
node_modules@id-sk\frontend\idsk\components_all.scss 8:9 @import