@oslokommune/punkt-react 13.2.4 → 13.3.1

package/src/components/preview/previewJson/link.json

@@ -0,0 +1,28 @@
+{
+  "name": "LinkPreview",
+  "type": "PktLink",
+  "spec": "link",
+  "previewProps": ["href", "iconName", "iconPosition", "external"],
+  "children": [
+    {
+      "name": "Innhold",
+      "type": "text"
+    }
+  ],
+  "preview": {
+    "type": "PktLink",
+    "props": {
+      "href": "#",
+      "target": "_self",
+      "iconName": "",
+      "iconPosition": "left",
+      "external": false
+    },
+    "children": [
+      {
+        "type": "text",
+        "children": "Dette er en lenke"
+      }
+    ]
+  }
+}

package/src/components/preview/previewJson/linkcard.json

@@ -0,0 +1,30 @@
+{
+  "name": "LinkCardPreview",
+  "type": "PktLinkCard",
+  "spec": "linkcard",
+  "previewProps": ["title", "skin", "iconName", "external"],
+  "children": [
+    {
+      "name": "Innhold",
+      "type": "text",
+      "defaults": "Dette er innholdet i kortet."
+    }
+  ],
+  "preview": {
+    "type": "PktLinkCard",
+    "props": {
+      "title": "Dette er en linkcard",
+      "href": "#",
+      "skin": "beige-outline",
+      "iconName": "chevron-right",
+      "openInNewTab": false,
+      "external": false
+    },
+    "children": [
+      {
+        "type": "text",
+        "children": "Dette er innholdet i kortet. Her kan du skrive hva du vil."
+      }
+    ]
+  }
+}

package/src/components/preview/previewJson/loader.json

@@ -0,0 +1,28 @@
+{
+  "name": "LoaderPreview",
+  "type": "PktLoader",
+  "spec": "loader",
+  "previewProps": ["message", "variant", "isLoading"],
+  "children": [
+    {
+      "name": "Innhold",
+      "type": "text",
+      "defaults": "Dette er innholdet som lastes inn."
+    }
+  ],
+  "preview": {
+    "type": "PktLoader",
+    "props": {
+      "message": "Laster innhold...",
+      "size": "large",
+      "variant": "rainbow",
+      "isLoading": true
+    },
+    "children": [
+      {
+        "type": "text",
+        "children": "Dette er innholdet som lastes inn. Det vil først vise seg når lastingen er fullført (isLoading er false)."
+      }
+    ]
+  }
+}

package/src/components/preview/previewJson/messagebox.json

@@ -0,0 +1,28 @@
+{
+  "name": "MessageboxPreview",
+  "type": "PktMessagebox",
+  "spec": "messagebox",
+  "previewProps": ["title", "skin", "compact", "closable"],
+  "children": [
+    {
+      "name": "Innhold",
+      "type": "text",
+      "defaults": "Dette er innholdet i meldingsboksen."
+    }
+  ],
+  "preview": {
+    "type": "PktMessagebox",
+    "props": {
+      "title": "Dette er en meldingsboks",
+      "skin": "beige",
+      "compact": false,
+      "closable": false
+    },
+    "children": [
+      {
+        "type": "text",
+        "children": "Dette er innholdet i meldingsboksen."
+      }
+    ]
+  }
+}

package/src/components/preview/previewJson/modal.json

@@ -0,0 +1,65 @@
+{
+  "name": "ModalPreview",
+  "type": "PktModal",
+  "spec": "div",
+  "children": [
+    {
+      "name": "Button",
+      "type": "PktButton",
+      "spec": "button",
+      "children": [
+        {
+          "type": "text",
+          "name": "Innhold"
+        }
+      ]
+    },
+    {
+      "name": "Modal",
+      "type": "PktModal",
+      "spec": "modal",
+      "children": [
+        {
+          "type": "text",
+          "name": "Innhold"
+        }
+      ]
+    }
+  ],
+  "previewProps": [],
+  "preview": {
+    "type": "div",
+    "props": {},
+    "children": [
+      {
+        "type": "PktButton",
+        "props": {
+          "skin": "primary",
+          "size": "medium",
+          "onClick": "openModal"
+        },
+        "children": [
+          {
+            "type": "text",
+            "children": "Åpne modal"
+          }
+        ]
+      },
+      {
+        "type": "PktModal",
+        "props": {
+          "headingText": "Dette er en modal",
+          "size": "medium",
+          "variant": "dialog",
+          "closeOnBackdropClick": true
+        },
+        "children": [
+          {
+            "type": "text",
+            "children": "Her er innholdet i modalen."
+          }
+        ]
+      }
+    ]
+  }
+}

package/src/components/preview/previewJson/progressbar.json

@@ -0,0 +1,16 @@
+{
+  "name": "ProgressbarPreview",
+  "type": "PktProgressbar",
+  "spec": "progressbar",
+  "previewProps": ["title", "valueCurrent", "skin"],
+  "preview": {
+    "type": "PktProgressbar",
+    "props": {
+      "title": "Fremdrift",
+      "valueMin": 0,
+      "valueMax": 100,
+      "valueCurrent": 40,
+      "statusType": "percentage"
+    }
+  }
+}

package/src/components/preview/previewJson/radiobutton.json

@@ -0,0 +1,21 @@
+{
+  "name": "RadiobuttonPreview",
+  "type": "PktRadioButton",
+  "spec": "radiobutton",
+  "previewProps": ["label", "checkHelptext", "checked", "hasTile"],
+  "preview": {
+    "type": "PktRadioButton",
+    "props": {
+      "id": "radio-1",
+      "name": "gruppe1",
+      "label": "Velg dette alternativet",
+      "checked": false,
+      "defaultChecked": false,
+      "hasTile": false,
+      "disabled": false,
+      "checkHelptext": "Dette er hjelpetekst for radioknappen.",
+      "value": "alternativ1",
+      "hasError": false
+    }
+  }
+}

package/src/components/preview/previewJson/searchinput.json

@@ -0,0 +1,20 @@
+{
+  "name": "SearchinputPreview",
+  "type": "PktSearchInput",
+  "spec": "searchinput",
+  "previewProps": ["label", "appearance", "disabled"],
+  "preview": {
+    "type": "PktSearchInput",
+    "props": {
+      "appearance": "global",
+      "placeholder": "Søk...",
+      "label": "Søk i byer",
+      "value": "Oslo",
+      "action": "",
+      "suggestions": [
+        { "title": "Oslo", "text": "Hovedstaden i Norge", "href": "https://oslo.kommune.no" },
+        { "title": "Bergen", "text": "Vestlandets hovedstad", "href": "https://bergen.kommune.no" }
+      ]
+    }
+  }
+}

package/src/components/preview/previewJson/select.json

@@ -0,0 +1,73 @@
+{
+  "name": "SelectPreview",
+  "type": "PktSelect",
+  "spec": "select",
+  "previewProps": ["label", "helptext", "requiredTag", "optionalTag", "hasError", "disabled"],
+  "children": [
+    {
+      "name": "Valg",
+      "type": "option",
+      "spec": "option",
+      "props": {
+        "value": { "type": "string" },
+        "selected": { "type": "boolean", "required": false },
+        "disabled": { "type": "boolean", "required": false }
+      },
+      "children": [
+        {
+          "name": "Tekst",
+          "type": "text"
+        }
+      ]
+    }
+  ],
+  "preview": {
+    "type": "PktSelect",
+    "props": {
+      "label": "Velg et alternativ",
+      "name": "valg",
+      "id": "select-1",
+      "helptext": "Dette er hjelpetekst."
+    },
+    "children": [
+      {
+        "type": "option",
+        "props": {
+          "value": "a"
+        },
+        "children": [
+          {
+            "type": "text",
+            "children": "Alternativ A"
+          }
+        ]
+      },
+      {
+        "type": "option",
+        "props": {
+          "value": "b",
+          "selected": true
+        },
+        "children": [
+          {
+            "type": "text",
+            "children": "Alternativ B"
+          }
+        ]
+      },
+      {
+        "type": "option",
+        "props": {
+          "value": "c",
+          "disabled": true
+        },
+        "children": [
+          {
+            "type": "text",
+            "children": "Alternativ C"
+          }
+        ]
+      }
+    ]
+  }
+}

package/src/components/preview/previewJson/steps.json

@@ -0,0 +1,72 @@
+{
+  "name": "StepsPreview",
+  "type": "PktStepper",
+  "spec": "steps",
+  "previewProps": ["orientation", "hideNonActiveStepsContent"],
+  "children": [
+    {
+      "name": "Step",
+      "type": "PktStep",
+      "spec": "stepItem",
+      "defaults": {
+        "title": "Steg $n",
+        "status": "incomplete"
+      },
+      "children": [
+        {
+          "type": "text",
+          "content": "Dette er innholdet for steg $n"
+        }
+      ]
+    }
+  ],
+  "preview": {
+    "type": "PktStepper",
+    "props": {
+      "activeStep": 1,
+      "hideNonActiveStepsContent": false,
+      "orientation": "vertical"
+    },
+    "children": [
+      {
+        "type": "PktStep",
+        "props": {
+          "title": "Steg 1",
+          "status": "completed"
+        },
+        "children": [
+          {
+            "type": "text",
+            "children": "Dette er innholdet for steg 1"
+          }
+        ]
+      },
+      {
+        "type": "PktStep",
+        "props": {
+          "title": "Steg 2",
+          "status": "current"
+        },
+        "children": [
+          {
+            "type": "text",
+            "children": "Dette er innholdet for steg 2"
+          }
+        ]
+      },
+      {
+        "type": "PktStep",
+        "props": {
+          "title": "Steg 3",
+          "status": "incomplete"
+        },
+        "children": [
+          {
+            "type": "text",
+            "children": "Dette er innholdet for steg 3"
+          }
+        ]
+      }
+    ]
+  }
+}

package/src/components/preview/previewJson/table.json

@@ -0,0 +1,130 @@
+{
+  "name": "TablePreview",
+  "type": "PktTable",
+  "spec": "table",
+  "previewProps": ["compact", "skin", "responsiveView"],
+  "children": [
+    {
+      "name": "Header",
+      "type": "PktTableHeader",
+      "spec": "table-header",
+      "children": [
+        {
+          "name": "HeaderCell",
+          "type": "PktTableHeaderCell",
+          "spec": "table-header-cell",
+          "defaults": {
+            "children": "Kolonne $n"
+          }
+        }
+      ]
+    },
+    {
+      "name": "Body",
+      "type": "PktTableBody",
+      "spec": "table-body",
+      "children": [
+        {
+          "name": "Row",
+          "type": "PktTableRow",
+          "spec": "table-row",
+          "children": [
+            {
+              "name": "DataCell",
+              "type": "PktTableDataCell",
+              "spec": "table-data-cell",
+              "defaults": {
+                "children": "Rad $row, celle $col"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "preview": {
+    "type": "PktTable",
+    "props": {
+      "compact": false,
+      "skin": "basic",
+      "responsiveView": true
+    },
+    "children": [
+      {
+        "type": "PktTableHeader",
+        "props": {},
+        "children": [
+          {
+            "type": "PktTableRow",
+            "props": {},
+            "children": [
+              {
+                "type": "PktTableHeaderCell",
+                "props": {},
+                "children": "Navn"
+              },
+              {
+                "type": "PktTableHeaderCell",
+                "props": {},
+                "children": "Alder"
+              },
+              {
+                "type": "PktTableHeaderCell",
+                "props": {},
+                "children": "By"
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "type": "PktTableBody",
+        "props": {},
+        "children": [
+          {
+            "type": "PktTableRow",
+            "props": {},
+            "children": [
+              {
+                "type": "PktTableDataCell",
+                "props": {},
+                "children": "Ola Nordmann"
+              },
+              {
+                "type": "PktTableDataCell",
+                "props": {},
+                "children": "35"
+              },
+              {
+                "type": "PktTableDataCell",
+                "props": {},
+                "children": "Oslo"
+              }
+            ]
+          },
+          {
+            "type": "PktTableRow",
+            "props": {},
+            "children": [
+              {
+                "type": "PktTableDataCell",
+                "props": {},
+                "children": "Kari Nordmann"
+              },
+              {
+                "type": "PktTableDataCell",
+                "props": {},
+                "children": "32"
+              },
+              {
+                "type": "PktTableDataCell",
+                "props": {},
+                "children": "Bergen"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+}

package/src/components/preview/previewJson/tabs.json

@@ -0,0 +1,33 @@
+{
+  "name": "TabsPreview",
+  "type": "PktTabs",
+  "spec": "tabs",
+  "previewProps": ["tabs"],
+  "preview": {
+    "type": "PktTabs",
+    "props": {
+      "tabs": [
+        {
+          "text": "Tab 1",
+          "href": "#tab1",
+          "active": true,
+          "tag": {
+            "skin": "blue",
+            "text": "Ny"
+          },
+          "icon": "user"
+        },
+        {
+          "text": "Tab 2",
+          "href": "#tab2",
+          "active": false
+        },
+        {
+          "text": "Tab 3",
+          "href": "#tab3",
+          "active": false
+        }
+      ]
+    }
+  }
+}

package/src/components/preview/previewJson/tag.json

@@ -0,0 +1,26 @@
+{
+  "name": "TagPreview",
+  "type": "PktTag",
+  "spec": "tag",
+  "rerender": true,
+  "previewProps": ["size", "iconName", "skin", "closeTag"],
+  "children": [
+    {
+      "name": "Tekst",
+      "type": "text",
+      "defaults": "Dette er en tag"
+    }
+  ],
+  "preview": {
+    "type": "PktTag",
+    "props": {
+      "closeTag": true
+    },
+    "children": [
+      {
+        "type": "text",
+        "children": "Dette er en tag"
+      }
+    ]
+  }
+}

package/src/components/preview/previewJson/textarea.json

@@ -0,0 +1,18 @@
+{
+  "name": "TextareaPreview",
+  "type": "PktTextarea",
+  "spec": "textarea",
+  "previewProps": ["label", "helptext", "requiredTag", "hasError", "disabled", "counter"],
+  "preview": {
+    "type": "PktTextarea",
+    "props": {
+      "label": "Fyll inn teksten din",
+      "name": "kommentar",
+      "placeholder": "Skriv inn kommentar",
+      "helptext": "Dette er hjelpetekst.",
+      "rows": 4,
+      "id": "textarea-1",
+      "useWrapper": true
+    }
+  }
+}

package/src/components/preview/previewJson/textinput.json

@@ -0,0 +1,18 @@
+{
+  "name": "TextinputPreview",
+  "type": "PktTextinput",
+  "spec": "textinput",
+  "previewProps": ["label", "helptext", "type", "requiredTag", "disabled", "counter"],
+  "preview": {
+    "type": "PktTextinput",
+    "props": {
+      "label": "Fornavn",
+      "name": "fornavn",
+      "placeholder": "Skriv inn fornavn",
+      "helptext": "Dette er hjelpetekst.",
+      "type": "text",
+      "id": "textinput-1",
+      "useWrapper": true
+    }
+  }
+}

package/src/components/searchinput/SearchInput.tsx

@@ -74,7 +74,6 @@ export const PktSearchInput = forwardRef<HTMLInputElement, ISearchInput | ISearc
       fullwidth ? 'pkt-searchinput--fullwidth' : ''
     }`
 
-    const LabelElement = label ? 'label' : 'div'
     let WrapperElement
     if (action) {
       WrapperElement = (children: ReactNode) => (