PR comments

content/altinn-studio/guides/contributing/_index.en.md

@@ -6,6 +6,6 @@ weight: 1000
 
 ## Contributing to Altinn Studio
 
-// TODO: Write about what contributing means and how to do it --> redirect to github contributing readme
+[See guide in Github!](https://github.com/Altinn/altinn-studio/blob/main/CONTRIBUTING.md)
 
 {{<children description="true" />}}

content/altinn-studio/guides/contributing/_index.nb.md

@@ -6,7 +6,7 @@ weight: 1000
 
 ## Bidra inn i Altinn Studio
 
-// TODO: Write about what contributing means and how to do it --> redirect to github contributing readme
+[Se guide på Github!](https://github.com/Altinn/altinn-studio/blob/main/CONTRIBUTING.md)
 
 {{<children description="true" />}}
 

content/altinn-studio/guides/contributing/add-new-component/_index.en.md

@@ -14,16 +14,23 @@ If new components are introduced to the Apps, either by the Apps team or by exte
 2. [Add an icon for the component](#2-add-an-icon-for-the-component)
 3. [Add the new component in the list of Studio components](#3-add-the-new-component-in-the-list-of-studio-components)
 4. [Ensure potential other component updates are supported*](#4-ensure-potential-other-component-updates-are-supported)
+5. [Implement any potential custom config needed to support the component](#5-implement-any-potential-custom-config-needed-to-support-the-component)
 
 _*Only relevant if running the schema generation script in step 1._
 
 ### 1. Get json schema for the new component
 In order to retrieve the json schemas that defines the component config there are different options:
 - Manually write the json schema based on the `config.ts` in the apps repo for the component.
-- Run the script in `frontend/scripts/`. The usage of the script is described in the README. In order for the script to work the component you wish to add must have been released by app-frontend.
+- Run the script in `frontend/scripts/` called `generate-json-schemas` for version 4 of app-frontend. The usage of the script is described in the README. In order for the script to work the component you wish to add must have been released by app-frontend.
 
 ### 2. Add an icon for the component
-Either create an SVG for the component yourself or outsource this task to the designers in Altinn Studio by reaching out to them in GitHub[Link] or in Slack[Link]. When an SVG is created for the icon convert the SVG to JSX, e.g. using this [tool](https://svg2jsx.com/). Create a new file in `libs/studio-icons/src/react/icons/[YOUR_COMPONENT_NAME]Icon.tsx` and use the same format as for the other icons in the folder. The icon file must be added to the index file in the same folder.
+When adding an icon there are different approaches given that;
+1. Any of the existing ones from [Aksel Icons](https://aksel.nav.no/ikoner) can be used:
+
+   Then you simply import the icon from `@studio/icons` in `formItemConfig.ts`.
+2. Or, if the component needs a new custom icon:
+
+   Then you can either create an SVG for the component yourself or outsource this task to the designers in Altinn Studio by reaching out to them [in Slack](https://altinn.slack.com/) or [create an issue in Altinn Studio Github repository](https://github.com/Altinn/altinn-studio/issues/new/choose). When an SVG is created for the icon, convert the SVG to JSX, e.g. using [this tool](https://svg2jsx.com/). Create a new file in `libs/studio-icons/src/react/icons/[YOUR_COMPONENT_NAME]Icon.tsx` and use the same format as for the other icons in the folder. The icon file must be added to the index file in the same folder.
 
 ### 3. Add the new component in the list of Studio components
 For providing fully support for a new component in Studio, there are a few things to do. The order is arbitrary. 
@@ -34,7 +41,6 @@ For providing fully support for a new component in Studio, there are a few thing
 - Adding the component to the components list in the file: `packages/ux-editor/src/data/formItemConfig.ts` by 
   - first adding it, alphabetically, to the `formItemConfigs` object, with the appropriate default configs and an icon,
   - then adding it to an appropriate list in the same file; **schemaComponents**, **advancedItems** or **textComponents**
-  // WHAT ABOUT **confOnScreenComponents** AND **paymentLayoutComponents** - SHOULD THEY BE MENTIONED HERE
 - Adding texts for the new component in `nb.json`:
   - A title on the format **ux_editor.component_title.[COMPONENT_TYPE]** 
   - If the component has any new properties that does not exist from before, these must also be added on the format **ux_editor.component_properties.[PROPERTY_NAME]**
@@ -43,4 +49,20 @@ For providing fully support for a new component in Studio, there are a few thing
 ### 4. Ensure potential other component updates are supported
 Check if the script updated any other component schema configs and ensure stable (unchanged?) support.
 - Ensure potential new added properties exists from before, or else add necessary texts for them
-- Ensure ...?
+
+### 5. Implement any potential custom config needed to support the component
+If the component has any properties that requires some special UI that is not delivered directly based on the type of the property (i.e. if it is string or an object etc.), implement support for this as a specific React component. The component can be utilized in the same way as the `grid`-property e.g. in `FormComponentConfig.tsx`.
+```javascript
+{grid && (
+    <div>
+      <Heading level={3} size='xxsmall'>
+        {t('ux_editor.component_properties.grid')}
+      </Heading>
+      <EditGrid
+        key={component.id}
+        component={component}
+        handleComponentChange={handleComponentUpdate}
+      />
+    </div>
+ )}
+```

content/altinn-studio/guides/contributing/add-new-component/_index.nb.md

@@ -13,23 +13,28 @@ Hvis nye komponenter blir introdusert i Appene, enten av Apps-teamet eller av ek
 2. [Legg til et ikon for komponenten](#2-legg-til-et-ikon-for-komponenten)
 3. [Legg til den nye komponenten i listen over Studio-komponenter](#3-legg-til-den-nye-komponenten-i-listen-over-studio-komponenter)
 4. [Sørg for at potensielle andre komponentoppdateringer støttes*](#4-sørg-for-at-potensielle-andre-komponentoppdateringer-støttes)
+5. [Implementer potensiell tilpasset konfigurasjon som trengs for å støtte komponenten](#5-implementer-potensiell-tilpasset-konfigurasjon-som-trengs-for-å-støtte-komponenten)
 
 _*Bare relevant hvis du kjører skjema genereringsskriptet i steg 1._
 
 
 ### 1. Få json-skjema for den nye komponenten
-
 For å hente json-skjemaene som definerer komponentkonfigurasjonen er det forskjellige alternativer:
 
 - Skriv json-skjemaet manuelt basert på `config.ts` i apps repo for komponenten.
-- Kjør skriptet i `frontend/scripts/`. Bruken av skriptet er beskrevet i README. For at skriptet skal fungere må komponenten du ønsker å legge til ha blitt utgitt av app-frontend.
+- Kjør skriptet, `generate-json-schemas`, i `frontend/scripts/` for versjon 4 av app-frontend. Bruken av skriptet er beskrevet i README. For at skriptet skal fungere må komponenten du ønsker å legge til ha blitt utgitt av app-frontend.
 
 ### 2. Legg til et ikon for komponenten
+Når du legger til et ikon, er det forskjellige tilnærminger gitt at;
+1. Noen av de eksisterende ikonene fra [Aksel Icons](https://aksel.nav.no/ikoner) kan brukes:
+
+   Da importerer du ikonet fra `@studio/icons` i `formItemConfig.ts`.
 
-Enten lag en SVG for komponenten selv eller deleger denne oppgaven til designerne i Altinn Studio ved å kontakte dem på GitHub[Lenke] eller på Slack[Lenke]. Når en SVG er laget for ikonet, konverter SVG-en til JSX, f.eks. ved å bruke [dette verktøyet](https://svg2jsx.com/). Lag en ny fil i `libs/studio-icons/src/react/icons/[YOUR_COMPONENT_NAME]Icon.tsx` og bruk samme format som for de andre ikonene i mappen. Ikonfilen må legges til i indeksfilen i samme mappe.
+2. Eller, hvis komponenten trenger et nytt tilpasset ikon:
+
+   Da kan du enten lage en SVG for komponenten selv eller deleger denne oppgaven til designerne i Altinn Studio ved å kontakte dem [i Slack](https://altinn.slack.com/) eller [opprette et issue i Altinn Studio Github repository](https://github.com/Altinn/altinn-studio/issues/new/choose). Når en SVG er opprettet for ikonet, konverter SVG til JSX, f.eks. ved å bruke [dette verktøyet](https://svg2jsx.com/). Opprett en ny fil i `libs/studio-icons/src/react/icons/[NAVNET_PÅ_DIN_KOMPONENT]Icon.tsx` og bruk samme format som for de andre ikonene i mappen. Ikonfilen må legges til indeksfilen i samme mappe.
 
 ### 3. Legg til den nye komponenten i listen over Studio-komponenter
-
 For å gi full støtte for en ny komponent i Studio, er det noen få ting å gjøre. Rekkefølgen er vilkårlig.
 
 - Legg til det nye skjemaet
@@ -45,8 +50,23 @@ deretter legge den til i en passende liste i samme fil; **schemaComponents**, **
   - Hvis komponenten har noen nye objekt egenskaper som ikke eksisterer fra før, må en beskrivelse også legges til i formatet **ux_editor.component_properties_description.[PROPERTY_NAME]**
 
 ### 4. Sørg for at potensielle andre komponentoppdateringer støttes
-
 Sjekk om skriptet oppdaterte andre komponentskjema konfigurasjoner og sørg for stabil (uendret?) støtte.
 
 - Sørg for at potensielt nye lagt til egenskaper eksisterer fra før, ellers legg til nødvendige tekster for dem
-- Sørg for ...?
+
+### 5. Implementer potensiell tilpasset konfigurasjon som trengs for å støtte komponenten
+Hvis komponenten har noen egenskaoer som krever spesielt grensesnitt utover det som leveres direkte basert på egenskapstypen (f.eks. om det er en streng eller et objekt el.), implementer støtte som en spesifikk React komponent. Komponenten kan tas i bruk på samme på som `grid`-egenskapen f.eks. i `FormComponentConfig.tsx`.
+```javascript
+{grid && (
+    <div>
+      <Heading level={3} size='xxsmall'>
+        {t('ux_editor.component_properties.grid')}
+      </Heading>
+      <EditGrid
+        key={component.id}
+        component={component}
+        handleComponentChange={handleComponentUpdate}
+      />
+    </div>
+ )}
+```

content/altinn-studio/guides/contributing/create-new-component/_index.en.md

@@ -4,4 +4,8 @@ description: Create a new component
 weight: 10
 ---
 
-## Create a new component in App-frontend
+## Create a new component in App-frontend
+
+{{%notice warning%}}
+This section will be elaborated soon.
+{{% /notice%}}

content/altinn-studio/guides/contributing/create-new-component/_index.nb.md

@@ -4,4 +4,8 @@ description: Opprett en ny komponent i app-frontend
 weight: 10
 ---
 
-## Opprett en ny komponent i app-frontend
+## Opprett en ny komponent i app-frontend
+
+{{%notice warning%}}
+Denne seksjonen vil bli utdypet snart.
+{{% /notice%}}