...

Här samlar vi demo-komponenter som används i Komponentbibliotek. Vi lägger upp dem som undersidor här för att kunna återanvändas för flera varumärken.

JSFiddle är en extern tjänst som används för att skapa demo sidorna.

Gör så här

1. Skapa ett konto på jsfiddle.net
   

2. Skapa en fork (kopia) från https://jsfiddle.net/bergsvik/w5t3fc87/
   

3. Uppdatera namn på din Fiddle under Fiddle Meta spara och klicka på Set as base så att den senaste versionen går att komma åt utan att ange versionsnummer.
   

4. I Confluense gå in på sidan Boilerplate och klicka på Copy för att duplicera sidan. Döp om sidan.

5. Öppna Lägg in iframe macrot och uppdatera fyll i URL med rätt ID från jsfiddle.net komponenten.
   
   Exempelvis: om URL till JSFiddle är https://jsfiddle.net/bergsvik/w5t3fc87/ blir inbäddningslänken //jsfiddle.net/w5t3fc87/embedded/result,html,resources/ anpassa delen med result,html,resources om du exempelvis vill inkludera css eller js (JavaScript).Ta sidans ID från Confluense och lägg in i JSFiddle som hänvisning. Exempelvis i beskrivningen under Fiddle Meta. Lägg gärna med hela länken till Confluense sidan i kod-exemplets kommentar. Använd denna mall för kommentaren
   <!--
Link: https://inera.atlassian.net/wiki/spaces/USI/pages/CONFLUENCE_PAGE_ID/
   DNA: HTML|2c4ce95d-7bb0-43bb-a3e1-d4371522949d
-->

6. Använd Använd eventuellt macrot Include Page för att länka in jsFiddle sidan på komponenten (komponenternas) sidor för de olika varumärkena. Eller bädda in iframe direkt på komponenten.
   

   1. Komponentbibliotek 1177

   2. Komponentbibliotek Inera

...

Om du vill lägga in temaväljaren i jsFiddle för att växla mellan produktions-css på de olika sajterna så lägger du in denna länk under Resources: https://cdn.jsdelivr.net/gh/berra/loadstylesheet@master/css_theme_loader.jsAlternativt kan du exempelvis endast lägga in produktions-css för 1177 från den här länken:

För att koppla en JsFiddle till en stylesheet så lägg in denna kod under javascript fliken.

window.useStylesheet = "inera";

Lägga till ny sajt/tema

När vi behöver lägga till ett nytt tema till exemplen globalt så görs det i css_theme_loader på inera-core-css repot i listan som heter cssList. Objektets nyckel är det som används tillsammans med useStylesheet från jsfiddle.

umo: {
  name: "umo",
  path: "https://www.

...

umo.se/build/umo/

...

static/stylesheets/app.css

...

Resurser

...

",
  preload: "https://www.umo.se/build/umo/static/stylesheets/preload.css",
},

Resurser

På Bitbucket finns resurser dels css_theme_loader.js men också några andra statiska resurser som vi inte kommer åt antingen pga. cors problem (font ikoner 1177) eller att resurserna kräver auktorisering (css på rgswebb). Behöver du redigera något eller vill komplettera med resurser . Skapa antingen en fork från GitHub och uppdatera länkarna eller begär åtkomst för att publicera förändringar i loadstylesheet så skapa en pull request till inera-core-css repot.

För att leverera resurserna med rätt mimetype till jsfiddle använder vi jsdelivr.net https://raw.githack.com/ som är en gratis cdn tjänst som kan leverera statiska resurser från GitHub. Observera att filerna cachas runt 24 timmar. Så uppdateringar kommer inte slå igenom direkt. Läs mer om hur du kan länka in en specifik commit i jsdelivr dokumentationen. https://github.com/berra/loadstylesheet BitBucket.

Ladda in övriga typsnitt

Vi har font-resurser tillgängliga på Bitbucket under projektet gemensam-css. Vi kan därför använda dessa resurser genom tjänsten githack.

• Inter UI:
  https://bb.githack.com/ineraservices/css-gemensamt/raw/develop/static/fonts/interui/inter-ui.css

• Open sans:
  https://bb.githack.com/ineraservices/css-gemensamt/raw/develop/static/fonts/open-sans/open-sans.css

Komponenter