@oslokommune/punkt-react 2.0.0 → 2.0.2

package/CHANGELOG.md

@@ -3,12 +3,42 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.2](https://github.com/oslokommune/punkt/compare/v2.0.1...v2.0.2) (2023-03-07)
+
+
+### Bug Fixes
+
+* **react:** Rett feil dependencies i React-pakken ([#698](https://github.com/oslokommune/punkt/issues/698)) ([0fc3093](https://github.com/oslokommune/punkt/commit/0fc309338bb511e119e2982cd04ef8a0a9fae09a))
+
+
+
+## [2.0.1](https://github.com/oslokommune/punkt/compare/v2.0.0...v2.0.1) (2023-03-07)
+
+
+### Bug Fixes
+
+* Endre flat-button i alert ([#697](https://github.com/oslokommune/punkt/issues/697)) ([c98aa2a](https://github.com/oslokommune/punkt/commit/c98aa2aa647a8c200013e2770ba5b0e7d17c7a26))
+
+
+
 ## [2.0.0](https://github.com/oslokommune/punkt/compare/v1.0.2...v2.0.0) (2023-03-07)
 
 
 ### ⚠ BREAKING CHANGES
 
 * #595 Button (#696)
+Buttons har fått ny styling og buttonskins har gått fra 5 til 3:
+
+- Primary: Ny styling
+- Secondary: Ny styling
+- Tertiary: **breaking** har fått stylingen til flat-button
+
+- Flat: **breaking** fjernet
+- Primary-confirm: **breaking** fjernet
+
+**Migrering**:
+- Endre Flat til Tertiary
+- Endre gammel Tertiary til Secondary (du kan overstyre fargen selv)
 
 ### Features
 

package/dist/punkt-react.es.js

@@ -680,7 +680,15 @@ const Ce = Y.Fragment, s = Y.jsx, T = Y.jsxs, N = ({
 }) => {
   const x = [c, "pkt-header"].filter(Boolean).join(" ");
   return /* @__PURE__ */ T("header", { id: "pkt-header", className: x, "aria-label": "Topp", children: [
-    /* @__PURE__ */ s("div", { className: "pkt-header__logo", children: /* @__PURE__ */ s("a", { "aria-label": "Tilbake til forside", className: "pkt-header__logo-link", href: p, children: /* @__PURE__ */ s(N, { name: "oslologo", className: "pkt-header__logo-svg", viewBox: "0 0 60 31", "aria-hidden": "true" }) }) }),
+    /* @__PURE__ */ s("div", { className: "pkt-header__logo", children: /* @__PURE__ */ s("a", { "aria-label": "Tilbake til forside", className: "pkt-header__logo-link", href: p, children: /* @__PURE__ */ s(
+      N,
+      {
+        name: "oslologo",
+        className: "pkt-header__logo-svg",
+        viewBox: "0 0 60 31",
+        "aria-hidden": "true"
+      }
+    ) }) }),
     /* @__PURE__ */ T("div", { className: "pkt-header__actions", children: [
       u && f && /* @__PURE__ */ T(
         "button",
@@ -700,14 +708,30 @@ const Ce = Y.Fragment, s = Y.jsx, T = Y.jsxs, N = ({
         /* @__PURE__ */ s("span", { className: "pkt-header__action-text", children: /* @__PURE__ */ s("span", { className: "pkt-btn__text pkt-header__action-textrow text-row-inline truncate-text", children: v }) }),
         /* @__PURE__ */ s("span", { className: "pkt-header__action-icon pkt-show-phablet-up", children: /* @__PURE__ */ s(N, { name: "user" }) })
       ] }),
-      y && u && /* @__PURE__ */ T("button", { className: "pkt-btn pkt-btn--flat pkt-btn--icon-right", "aria-label": "Logg ut", onClick: m, children: [
-        /* @__PURE__ */ s(N, { className: "pkt-btn__icon pkt-show-tablet-up", name: "exit" }),
-        /* @__PURE__ */ s("span", { className: "pkt-btn__text", children: "Logg ut" })
-      ] }),
-      y && !u && /* @__PURE__ */ T("button", { className: "pkt-btn pkt-btn--flat pkt-btn--icon-right", "aria-label": "Logg inn", onClick: _, children: [
-        /* @__PURE__ */ s(N, { className: "pkt-btn__icon", name: "user" }),
-        /* @__PURE__ */ s("span", { className: "pkt-btn__text", children: "Logg inn" })
-      ] })
+      y && u && /* @__PURE__ */ T(
+        "button",
+        {
+          className: "pkt-btn pkt-btn--tertiary pkt-btn--icon-right",
+          "aria-label": "Logg ut",
+          onClick: m,
+          children: [
+            /* @__PURE__ */ s(N, { className: "pkt-btn__icon pkt-show-tablet-up", name: "exit" }),
+            /* @__PURE__ */ s("span", { className: "pkt-btn__text", children: "Logg ut" })
+          ]
+        }
+      ),
+      y && !u && /* @__PURE__ */ T(
+        "button",
+        {
+          className: "pkt-btn pkt-btn--tertiary pkt-btn--icon-right",
+          "aria-label": "Logg inn",
+          onClick: _,
+          children: [
+            /* @__PURE__ */ s(N, { className: "pkt-btn__icon", name: "user" }),
+            /* @__PURE__ */ s("span", { className: "pkt-btn__text", children: "Logg inn" })
+          ]
+        }
+      )
     ] })
   ] });
 }, mr = re.forwardRef(

package/dist/punkt-react.umd.js

@@ -24,7 +24,7 @@ Check the render method of \``+e+"`."}return""}}function kr(e){{if(e!==void 0){v
 
 Check your code at `+r+":"+t+"."}return""}}var Se={};function gr(e){{var r=Oe();if(!r){var t=typeof e=="string"?e:e.displayName||e.name;t&&(r=`
 
-Check the top-level render call using <`+t+">.")}return r}}function Ce(e,r){{if(!e._store||e._store.validated||e.key!=null)return;e._store.validated=!0;var t=gr(r);if(Se[t])return;Se[t]=!0;var a="";e&&e._owner&&e._owner!==ee.current&&(a=" It was passed a child from "+S(e._owner.type)+"."),A(e),g('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',t,a),A(null)}}function Ne(e,r){{if(typeof e!="object")return;if(Z(e))for(var t=0;t<e.length;t++){var a=e[t];te(a)&&Ce(a,r)}else if(te(e))e._store&&(e._store.validated=!0);else if(e){var l=Je(e);if(typeof l=="function"&&l!==e.entries)for(var d=l.call(e),s;!(s=d.next()).done;)te(s.value)&&Ce(s.value,r)}}}function yr(e){{var r=e.type;if(r==null||typeof r=="string")return;var t;if(typeof r=="function")t=r.propTypes;else if(typeof r=="object"&&(r.$$typeof===m||r.$$typeof===w))t=r.propTypes;else return;if(t){var a=S(r);sr(t,e.props,"prop",a,e)}else if(r.PropTypes!==void 0&&!re){re=!0;var l=S(r);g("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",l||"Unknown")}typeof r.getDefaultProps=="function"&&!r.getDefaultProps.isReactClassApproved&&g("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function Rr(e){{for(var r=Object.keys(e.props),t=0;t<r.length;t++){var a=r[t];if(a!=="children"&&a!=="key"){A(e),g("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",a),A(null);break}}e.ref!==null&&(A(e),g("Invalid attribute `ref` supplied to `React.Fragment`."),A(null))}}function je(e,r,t,a,l,d){{var s=er(e);if(!s){var o="";(e===void 0||typeof e=="object"&&e!==null&&Object.keys(e).length===0)&&(o+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var y=kr(l);y?o+=y:o+=Oe();var h;e===null?h="null":Z(e)?h="array":e!==void 0&&e.$$typeof===c?(h="<"+(S(e.type)||"Unknown")+" />",o=" Did you accidentally export a JSX literal instead of a component?"):h=typeof e,g("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",h,o)}var b=_r(e,r,t,l,d);if(b==null)return b;if(s){var P=r.children;if(P!==void 0)if(a)if(Z(P)){for(var I=0;I<P.length;I++)Ne(P[I],e);Object.freeze&&Object.freeze(P)}else g("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else Ne(P,e)}return e===u?Rr(b):yr(b),b}}function Er(e,r,t){return je(e,r,t,!0)}function Pr(e,r,t){return je(e,r,t,!1)}var Tr=Pr,wr=Er;$.Fragment=u,$.jsx=Tr,$.jsxs=wr}()),$}(function(n){process.env.NODE_ENV==="production"?n.exports=Ae():n.exports=Ie()})(De);const oe=W.Fragment,i=W.jsx,T=W.jsxs,N=({className:n,name:c,viewBox:p="0 0 32 32",...u})=>{const v=[n,"balle"].filter(Boolean).join(" ");return i("svg",{...u,className:v,viewBox:p,children:i("use",{href:`#${c}`})})},We=({children:n,className:c,iconName:p="user",secondIconName:u="user",size:v="medium",skin:f="primary",type:R="button",variant:_="label-only",...m})=>{const x=[c,"pkt-btn",v&&`pkt-btn--${v}`,f&&`pkt-btn--${f}`,_&&`pkt-btn--${_}`].filter(Boolean).join(" ");return T("button",{...m,className:x,type:R,children:[i(N,{className:"pkt-btn__icon",name:p}),i("span",{className:"pkt-btn__text",children:n}),_==="icons-right-and-left"&&i(N,{className:"pkt-btn__icon",name:u})]})},Ye=({children:n,className:c,logoLink:p="https://www.oslo.kommune.no/",isLoggedIn:u=!1,representing:v="",canChangeRepresentation:f=!1,showLogInButton:R=!0,onLogIn:_,onLogOut:m,onChangeRepresentation:x,...E})=>{const w=[c,"pkt-header"].filter(Boolean).join(" ");return T("header",{id:"pkt-header",className:w,"aria-label":"Topp",children:[i("div",{className:"pkt-header__logo",children:i("a",{"aria-label":"Tilbake til forside",className:"pkt-header__logo-link",href:p,children:i(N,{name:"oslologo",className:"pkt-header__logo-svg",viewBox:"0 0 60 31","aria-hidden":"true"})})}),T("div",{className:"pkt-header__actions",children:[u&&f&&T("button",{className:"pkt-btn pkt-btn--secondary pkt-btn--icon-right","aria-label":`Bytt bruker fra ${v}`,onClick:x,children:[i(N,{name:"user",className:"pkt-btn__icon pkt-show-tablet-up"}),i("span",{className:"pkt-header__action-change pkt-hide pkt-show-tablet-up ml-size-15",children:"Endre"}),i("span",{className:"pkt-btn__text pkt-hide-tablet-up",children:"Endre"}),i("span",{className:"pkt-btn__text--representing pkt-hide pkt-show-tablet-up",children:v})]}),u&&!f&&T("div",{className:"pkt-header__action",children:[i("span",{className:"pkt-header__action-text",children:i("span",{className:"pkt-btn__text pkt-header__action-textrow text-row-inline truncate-text",children:v})}),i("span",{className:"pkt-header__action-icon pkt-show-phablet-up",children:i(N,{name:"user"})})]}),R&&u&&T("button",{className:"pkt-btn pkt-btn--flat pkt-btn--icon-right","aria-label":"Logg ut",onClick:m,children:[i(N,{className:"pkt-btn__icon pkt-show-tablet-up",name:"exit"}),i("span",{className:"pkt-btn__text",children:"Logg ut"})]}),R&&!u&&T("button",{className:"pkt-btn pkt-btn--flat pkt-btn--icon-right","aria-label":"Logg inn",onClick:_,children:[i(N,{className:"pkt-btn__icon",name:"user"}),i("span",{className:"pkt-btn__text",children:"Logg inn"})]})]})]})},ie=O.forwardRef(({label:n,id:c,children:p,...u},v)=>T("div",{className:"pkt-form-group",children:[i("label",{htmlFor:c,className:"pkt-form-label",children:n}),i("input",{className:"pkt-form-input",id:c,...u,ref:v}),p]}));ie.displayName="PktInput";const se=O.forwardRef(({id:n,label:c,...p},u)=>T("div",{className:"pkt-form-group",children:[i("label",{htmlFor:n,className:"pkt-form-label",children:c}),i("textarea",{className:"pkt-form-textarea",id:n,ref:u,...p})]}));se.displayName="PktTextarea";const le=O.forwardRef(({id:n,name:c,label:p,value:u,...v},f)=>T("div",{className:"pkt-form-group",children:[i("input",{type:"radio",className:"pkt-form-check-input",id:n,name:c,value:u,ref:f,...v}),i("label",{className:"pkt-form-label",htmlFor:n,children:p})]}));le.displayName="PktRadio";const $e=({label:n,children:c})=>T(oe,{children:[i("p",{children:n}),i("div",{className:"pkt-form-group",children:c})]});var z={},Le={get exports(){return z},set exports(n){z=n}};/*!
+Check the top-level render call using <`+t+">.")}return r}}function Ce(e,r){{if(!e._store||e._store.validated||e.key!=null)return;e._store.validated=!0;var t=gr(r);if(Se[t])return;Se[t]=!0;var a="";e&&e._owner&&e._owner!==ee.current&&(a=" It was passed a child from "+S(e._owner.type)+"."),A(e),g('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',t,a),A(null)}}function Ne(e,r){{if(typeof e!="object")return;if(Z(e))for(var t=0;t<e.length;t++){var a=e[t];te(a)&&Ce(a,r)}else if(te(e))e._store&&(e._store.validated=!0);else if(e){var l=Je(e);if(typeof l=="function"&&l!==e.entries)for(var d=l.call(e),s;!(s=d.next()).done;)te(s.value)&&Ce(s.value,r)}}}function yr(e){{var r=e.type;if(r==null||typeof r=="string")return;var t;if(typeof r=="function")t=r.propTypes;else if(typeof r=="object"&&(r.$$typeof===m||r.$$typeof===w))t=r.propTypes;else return;if(t){var a=S(r);sr(t,e.props,"prop",a,e)}else if(r.PropTypes!==void 0&&!re){re=!0;var l=S(r);g("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",l||"Unknown")}typeof r.getDefaultProps=="function"&&!r.getDefaultProps.isReactClassApproved&&g("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function Rr(e){{for(var r=Object.keys(e.props),t=0;t<r.length;t++){var a=r[t];if(a!=="children"&&a!=="key"){A(e),g("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",a),A(null);break}}e.ref!==null&&(A(e),g("Invalid attribute `ref` supplied to `React.Fragment`."),A(null))}}function je(e,r,t,a,l,d){{var s=er(e);if(!s){var o="";(e===void 0||typeof e=="object"&&e!==null&&Object.keys(e).length===0)&&(o+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var y=kr(l);y?o+=y:o+=Oe();var h;e===null?h="null":Z(e)?h="array":e!==void 0&&e.$$typeof===c?(h="<"+(S(e.type)||"Unknown")+" />",o=" Did you accidentally export a JSX literal instead of a component?"):h=typeof e,g("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",h,o)}var b=_r(e,r,t,l,d);if(b==null)return b;if(s){var P=r.children;if(P!==void 0)if(a)if(Z(P)){for(var I=0;I<P.length;I++)Ne(P[I],e);Object.freeze&&Object.freeze(P)}else g("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else Ne(P,e)}return e===u?Rr(b):yr(b),b}}function Er(e,r,t){return je(e,r,t,!0)}function Pr(e,r,t){return je(e,r,t,!1)}var Tr=Pr,wr=Er;$.Fragment=u,$.jsx=Tr,$.jsxs=wr}()),$}(function(n){process.env.NODE_ENV==="production"?n.exports=Ae():n.exports=Ie()})(De);const oe=W.Fragment,i=W.jsx,T=W.jsxs,N=({className:n,name:c,viewBox:p="0 0 32 32",...u})=>{const v=[n,"balle"].filter(Boolean).join(" ");return i("svg",{...u,className:v,viewBox:p,children:i("use",{href:`#${c}`})})},We=({children:n,className:c,iconName:p="user",secondIconName:u="user",size:v="medium",skin:f="primary",type:R="button",variant:_="label-only",...m})=>{const x=[c,"pkt-btn",v&&`pkt-btn--${v}`,f&&`pkt-btn--${f}`,_&&`pkt-btn--${_}`].filter(Boolean).join(" ");return T("button",{...m,className:x,type:R,children:[i(N,{className:"pkt-btn__icon",name:p}),i("span",{className:"pkt-btn__text",children:n}),_==="icons-right-and-left"&&i(N,{className:"pkt-btn__icon",name:u})]})},Ye=({children:n,className:c,logoLink:p="https://www.oslo.kommune.no/",isLoggedIn:u=!1,representing:v="",canChangeRepresentation:f=!1,showLogInButton:R=!0,onLogIn:_,onLogOut:m,onChangeRepresentation:x,...E})=>{const w=[c,"pkt-header"].filter(Boolean).join(" ");return T("header",{id:"pkt-header",className:w,"aria-label":"Topp",children:[i("div",{className:"pkt-header__logo",children:i("a",{"aria-label":"Tilbake til forside",className:"pkt-header__logo-link",href:p,children:i(N,{name:"oslologo",className:"pkt-header__logo-svg",viewBox:"0 0 60 31","aria-hidden":"true"})})}),T("div",{className:"pkt-header__actions",children:[u&&f&&T("button",{className:"pkt-btn pkt-btn--secondary pkt-btn--icon-right","aria-label":`Bytt bruker fra ${v}`,onClick:x,children:[i(N,{name:"user",className:"pkt-btn__icon pkt-show-tablet-up"}),i("span",{className:"pkt-header__action-change pkt-hide pkt-show-tablet-up ml-size-15",children:"Endre"}),i("span",{className:"pkt-btn__text pkt-hide-tablet-up",children:"Endre"}),i("span",{className:"pkt-btn__text--representing pkt-hide pkt-show-tablet-up",children:v})]}),u&&!f&&T("div",{className:"pkt-header__action",children:[i("span",{className:"pkt-header__action-text",children:i("span",{className:"pkt-btn__text pkt-header__action-textrow text-row-inline truncate-text",children:v})}),i("span",{className:"pkt-header__action-icon pkt-show-phablet-up",children:i(N,{name:"user"})})]}),R&&u&&T("button",{className:"pkt-btn pkt-btn--tertiary pkt-btn--icon-right","aria-label":"Logg ut",onClick:m,children:[i(N,{className:"pkt-btn__icon pkt-show-tablet-up",name:"exit"}),i("span",{className:"pkt-btn__text",children:"Logg ut"})]}),R&&!u&&T("button",{className:"pkt-btn pkt-btn--tertiary pkt-btn--icon-right","aria-label":"Logg inn",onClick:_,children:[i(N,{className:"pkt-btn__icon",name:"user"}),i("span",{className:"pkt-btn__text",children:"Logg inn"})]})]})]})},ie=O.forwardRef(({label:n,id:c,children:p,...u},v)=>T("div",{className:"pkt-form-group",children:[i("label",{htmlFor:c,className:"pkt-form-label",children:n}),i("input",{className:"pkt-form-input",id:c,...u,ref:v}),p]}));ie.displayName="PktInput";const se=O.forwardRef(({id:n,label:c,...p},u)=>T("div",{className:"pkt-form-group",children:[i("label",{htmlFor:n,className:"pkt-form-label",children:c}),i("textarea",{className:"pkt-form-textarea",id:n,ref:u,...p})]}));se.displayName="PktTextarea";const le=O.forwardRef(({id:n,name:c,label:p,value:u,...v},f)=>T("div",{className:"pkt-form-group",children:[i("input",{type:"radio",className:"pkt-form-check-input",id:n,name:c,value:u,ref:f,...v}),i("label",{className:"pkt-form-label",htmlFor:n,children:p})]}));le.displayName="PktRadio";const $e=({label:n,children:c})=>T(oe,{children:[i("p",{children:n}),i("div",{className:"pkt-form-group",children:c})]});var z={},Le={get exports(){return z},set exports(n){z=n}};/*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
 	http://jedwatson.github.io/classnames

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -27,15 +27,11 @@
     "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
     "lint:fix": "eslint --fix 'src/**/*.{jsx,ts,tsx}'",
     "format": "prettier --write src//**/*.{ts,tsx,css} --config ./.prettierrc",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "preview": "vite preview --outDir dist-app"
   },
   "devDependencies": {
-    "@oslokommune/punkt-assets": "^2.0.0",
-    "@oslokommune/punkt-css": "^2.0.0",
+    "@oslokommune/punkt-assets": "^2.0.1",
+    "@oslokommune/punkt-css": "^2.0.1",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.4.0",
     "@types/node": "^18.14.1",
@@ -56,8 +52,8 @@
   "peerDependencies": {
     "@oslokommune/punkt-assets": ">=1.0.0",
     "@oslokommune/punkt-css": ">=1.0.0",
-    "react": ">=18.2.0",
-    "react-dom": ">=18.2.0"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "engines": {
     "node": ">=16.0.0"
@@ -84,5 +80,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "3506407f2b0d9e777e2e7d9322faefeca0ae8201"
+  "gitHead": "cca1a5d6965b048b9712c814c19a3cd57b694c10"
 }

package/src/components/header/Header.tsx

@@ -30,7 +30,12 @@ export const PktHeader: React.FC<HeaderProps> = ({
     <header id="pkt-header" className={classNames} aria-label="Topp">
       <div className="pkt-header__logo">
         <a aria-label="Tilbake til forside" className="pkt-header__logo-link" href={logoLink}>
-          <PktIcon name="oslologo" className="pkt-header__logo-svg" viewBox="0 0 60 31" aria-hidden="true" />
+          <PktIcon
+            name="oslologo"
+            className="pkt-header__logo-svg"
+            viewBox="0 0 60 31"
+            aria-hidden="true"
+          />
         </a>
       </div>
       <div className="pkt-header__actions">
@@ -42,10 +47,14 @@ export const PktHeader: React.FC<HeaderProps> = ({
           >
             <PktIcon name="user" className="pkt-btn__icon pkt-show-tablet-up" />
 
-            <span className="pkt-header__action-change pkt-hide pkt-show-tablet-up ml-size-15">Endre</span>
+            <span className="pkt-header__action-change pkt-hide pkt-show-tablet-up ml-size-15">
+              Endre
+            </span>
 
             <span className="pkt-btn__text pkt-hide-tablet-up">Endre</span>
-            <span className="pkt-btn__text--representing pkt-hide pkt-show-tablet-up">{representing}</span>
+            <span className="pkt-btn__text--representing pkt-hide pkt-show-tablet-up">
+              {representing}
+            </span>
           </button>
         )}
 
@@ -63,14 +72,22 @@ export const PktHeader: React.FC<HeaderProps> = ({
         )}
 
         {showLogInButton && isLoggedIn && (
-          <button className="pkt-btn pkt-btn--flat pkt-btn--icon-right" aria-label="Logg ut" onClick={onLogOut}>
+          <button
+            className="pkt-btn pkt-btn--tertiary pkt-btn--icon-right"
+            aria-label="Logg ut"
+            onClick={onLogOut}
+          >
             <PktIcon className="pkt-btn__icon pkt-show-tablet-up" name="exit" />
             <span className="pkt-btn__text">Logg ut</span>
           </button>
         )}
 
         {showLogInButton && !isLoggedIn && (
-          <button className="pkt-btn pkt-btn--flat pkt-btn--icon-right" aria-label="Logg inn" onClick={onLogIn}>
+          <button
+            className="pkt-btn pkt-btn--tertiary pkt-btn--icon-right"
+            aria-label="Logg inn"
+            onClick={onLogIn}
+          >
             <PktIcon className="pkt-btn__icon" name="user" />
             <span className="pkt-btn__text">Logg inn</span>
           </button>