IDS för designers
- Michaela Holmgren
- Andreas Olsson
Här följer en kortare guide för att börja utforska IDS och React och hur man skulle kunna bygga prototyper.
Börja med att besöka den här länken: https://codesandbox.io/s/s9zl9n
Du har nu öppnat en webbaserad utvecklingsmiljö som heter Code Sandbox. Därifrån kan man sätta upp olika typer av utvecklingsmiljöer för att snabbt bygga något enkelt med kod. När du öppnar länken ser det ut ungefär såhär:I den mittersta kolumnen finns din kod. Leta upp koden
<IDSButton>Primary button</IDSButton>på rad 21 och byt ut texten Primary button mot något valfritt, exempelvis Min knapp.Notera hur texten i den blåa knappen i kolumnen till höger ändras. Klappa dig själv på axeln, ta en ☕️och luta dig bakåt. Du har nu programmerat.
– Var det allt?
– Nej, givetvis inte. Men härifrån finns två sätt att gå– fippla runt själv eller läsa vidare.
🌳 Projektets struktur
I den högra vyn finns en liten mappstruktur som ser ut ungefär såhär:
📁 public
📁 src
📁 components
App.js
index.js
style.css
package.json
Innehållet för vårt projekt finns i mappen 📁 src, där man kan hålla koll på två saker:
App.js: Här finns själva innehållet. Det var i den här filen du gjorde justeringen tidigare
style.css: Här finns vår egna CSS. I den kan vi göra ändringar för att justera sådant som inte hanteras av IDS.
Komponenter i React
En stor fördel med i arbetet med React är hur komponenter hanteras. Det innebär att vi kan importera färdiga saker som någon annan har skrivit och använda i vår kod.
Öppna App.js och titta högst upp i filen. Det ser ut såhär:
import "./styles.css";
import {
IDSCol,
IDSRow,
IDSContainer,
IDSButton,
IDSButtonGroup
} from "@inera/ids-react";
import Header from "./components/Header";
import Footer from "./components/Footer";Mycket verkar handla om att importera saker. På första raden känner vi igen vår egna CSS; style.css. Den importeras för att ändringarna vi gör ska kuna visas på sidan.
Sedan följer ett antal importerade saker med prefixet IDS*. Detta är är komponenter som finns i IDS, som vi har importerat för att kunna använda.
Lägg till en komponent från IDS
Låt oss kika lite i IDS (för React). Om vi exempelvis klickar på Alert/Example i sidomenyn så hamnar vi på sidan för hur en Alert ser ut i IDS:
Klicka på Docs överst i huvudkolumnen för att visa dokumentationen för hur en Alert kan importeras och användas. Överst på den sidan får vi reda på att vi ska installera genom att skriva: import { IDSAlert } from '@inera/ids-react';
Det liknar ju den text vi har i vår kod, fast lite enklare. Skillnaden här är att man bara visar hur just IDSAlert ska importeras. Om man behöver fler komponenter behöver man skriva import { IDSAlert, IDSButton, IDSContainer } from '@inera/ids-react'; och så vidare. Därför kan du inte bara ta koden rakt av och klistra in, utan behöver lista ut vad du ska importera och sammanfoga med din befintliga kodsnutt för importer.
Hantera egna komponenter
Vår kod ovan har också följande snuttar: import Header from "./components/Header"; och import Footer from "./components/Footer";.
Detta är egna komponenter som har byggts för att göra koden lite mer hanterbar. Om man har ett specifikt element så kan man bryta ut det i en komponent för att göra koden lite enklare. Längre ner i vår App.js ser koden ut som följer:
export default function App() {
return (
<div className="ids">
<Header />
<IDSContainer>
<IDSRow>
<IDSCol>
<h1 className="ids-heading-1">Hello World!</h1>
<IDSButtonGroup>
<IDSButton>Min knapp</IDSButton>
<IDSButton secondary>Secondary button</IDSButton>
</IDSButtonGroup>
</IDSCol>
</IDSRow>
</IDSContainer>
<Footer />
</div>
);
}På rad 4 finns koden <Header /> och på rad 16 finns koden <Footer />. Dessa är egna komponenter för sidhuvud och sidfot.
Om du öppnar mappen 📁 components så ser du att det finns två filer i den mappen; Footer.js och Header.js. Om du öppnar dessa filer så ser du att koden för sidhuvud och sidfot är mer komplex än vad som syns i App.js. Av den anledningen är det smidigt att bryta ut kod till egna komponenter och hantera dem separat.
📋 Skapa en egen kopia
Nästa steg är att skapa en egen kopia, så att du kan spara den och arbeta vidare som det passar dig. Det man gör då är att skapa en fork, vilket innebär att man skapar en ny kopia av ett existerande repository.
Varje gång man sparar en ny version av sin kod kommer den nu att sparas “i ett nytt spår”, vilket gör att två parallella versioner kan existera samtidigt. Du kan helt enkelt arbeta vidare med en egen kopia.
För att skapa en kopia tryck på knappen Fork uppe till höger i Code Sandbox.
Du kommer nu att uppmanas att skapa ett konto eller logga in. Om du vill så kan du hoppa över detta steg och klicka på knappen Continue without an account längst nere i rutan. Du kan då arbeta vidare med din kod, men inte spara den. Annars är det rekommenderat att skapa ett konto, exempelvis via Google-login.
Du kommer nu att ha registrerat dig för ett gratis-konto, med vissa begränsningar (men som funkar för ändamålet). Nu kan du fortsätta att redigera din kod.
Om du vill visa din kod i webbläsaren så kan du kopiera den adressen som visas ovanför förhandsgranskningen (den högra kolumnen i gränssnittet).
🧽 Ta bort knappen “Open Sandbox”
Som du säkert noterat så visas en svart knapp längst nere i det högra hörnet när du förhandsgranskar. Det är en länk till Code Sandbox och har etiketten Open Sandbox. För att ta bort den kan du lägga in ett litet kodhack i din App.js, precis under raden export default function App() {
const removeWatermark = () => {
const ids = [];
const iframes = document.body.querySelectorAll('iframe');
for (const iframe of iframes) {
if (iframe.id.startsWith('sb__open-sandbox')) ids.push(iframe.id);
}
for (const id of ids) {
const node = document.createElement('div');
node.style.setProperty('display', 'none', 'important');
node.id = id;
document.getElementById(id).remove();
document.body.appendChild(node);
}
};
setTimeout(removeWatermark, 1000);Detta gör att knappen tas bort efter en sekund. Om man vill läsa mer om det så finns en diskussion (och detta lösningsförslag) på Github.