@oslokommune/punkt-react 12.36.1 → 12.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "12.36.1",
+  "version": "12.37.0",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -38,7 +38,7 @@
   "dependencies": {
     "@lit-labs/ssr-dom-shim": "^1.2.1",
     "@lit/react": "^1.0.7",
-    "@oslokommune/punkt-elements": "^12.36.1",
+    "@oslokommune/punkt-elements": "^12.37.0",
     "angular-html-parser": "^6.0.2",
     "html-format": "^1.1.7",
     "prettier": "^3.3.3",
@@ -48,8 +48,8 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
-    "@oslokommune/punkt-assets": "^12.34.4",
-    "@oslokommune/punkt-css": "^12.36.0",
+    "@oslokommune/punkt-assets": "^12.37.0",
+    "@oslokommune/punkt-css": "^12.37.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -112,5 +112,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "3e6857ec0117cd4ecc12b9ab56ffb3174c04d816"
+  "gitHead": "119c31d1536757ed597224baa05966cf8bca5ecc"
 }

package/src/components/backlink/BackLink.tsx

@@ -1,5 +1,5 @@
 import React, { ForwardRefExoticComponent, LegacyRef, AnchorHTMLAttributes, MouseEventHandler } from 'react'
-import { createComponent, EventName } from '@lit/react'
+import { createComponent } from '@lit/react'
 import { PktBackLink as PktElBackLink } from '@oslokommune/punkt-elements'
 import type { IPktBackLink as IPktElBackLink } from '@oslokommune/punkt-elements'
 

package/src/components/consent/Consent.tsx

@@ -0,0 +1,21 @@
+import React, { ForwardRefExoticComponent, LegacyRef } from 'react'
+import { createComponent, EventName } from '@lit/react'
+import { PktConsent as PktElConsent } from '@oslokommune/punkt-elements'
+import type { IPktConsent as IPktElConsent } from '@oslokommune/punkt-elements'
+
+export interface IPktConsent extends IPktElConsent {
+  ref?: LegacyRef<HTMLDivElement>
+  onToggleConsent?: (e: CustomEvent) => void
+}
+
+export const PktConsent: ForwardRefExoticComponent<IPktConsent> = createComponent({
+  tagName: 'pkt-consent',
+  elementClass: PktElConsent,
+  react: React,
+  displayName: 'PktConsent',
+  events: {
+    onToggleConsent: 'toggle-consent' as EventName<CustomEvent>,
+  },
+}) as ForwardRefExoticComponent<IPktConsent>
+
+PktConsent.displayName = 'PktConsent'

package/src/components/footer/Footer.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 
 import { PktIcon } from '../icon/Icon'
+import { PktConsent } from '../consent/Consent'
 
 interface Link {
   href: string
@@ -29,6 +30,10 @@ export interface IPktFooter extends React.HTMLAttributes<HTMLDivElement> {
   personvernOgInfoLink?: string
   tilgjengelighetLink?: string
   openLinksInNewTab?: boolean
+  includeConsent?: boolean
+  hotjarId?: string | null
+  googleAnalyticsId?: string | null
+  onToggleConsent?: (e: CustomEvent) => void
 }
 
 export const PktFooter: React.FC<IPktFooter> = ({
@@ -39,8 +44,15 @@ export const PktFooter: React.FC<IPktFooter> = ({
   openLinksInNewTab = false,
   personvernOgInfoLink = 'https://www.oslo.kommune.no/personvern-og-informasjonskapsler/',
   tilgjengelighetLink = 'https://www.oslo.kommune.no/tilgjengelighet/',
+  includeConsent = false,
+  hotjarId = null,
+  googleAnalyticsId = null,
+  onToggleConsent = (e: CustomEvent) => {
+    console.log(e.detail)
+  },
 }) => {
   const classNames = [className, 'pkt-footer'].filter(Boolean).join(' ')
+
   return (
     <footer className={classNames} data-mode="dark">
       <div className="pkt-footer__container">
@@ -108,6 +120,16 @@ export const PktFooter: React.FC<IPktFooter> = ({
                   Tilgjengelighet
                 </a>
               </li>
+              {includeConsent && (
+                <li className="pkt-footer__list-item">
+                  <PktConsent
+                    triggerType="footerlink"
+                    hotjarId={hotjarId}
+                    googleAnalyticsId={googleAnalyticsId}
+                    onToggleConsent={onToggleConsent}
+                  />
+                </li>
+              )}
             </ul>
           </div>
         </div>

package/src/components/footerSimple/FooterSimple.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 
 import { PktIcon } from '../icon/Icon'
+import { PktConsent } from '../consent/Consent'
 
 export interface IPktFooterSimple extends React.HTMLAttributes<HTMLDivElement> {
   links?: Array<{
@@ -12,6 +13,9 @@ export interface IPktFooterSimple extends React.HTMLAttributes<HTMLDivElement> {
   personvernOgInfoLink?: string
   tilgjengelighetLink?: string
   openLinksInNewTab?: boolean
+  includeConsent?: boolean
+  hotjarId?: string | null
+  googleAnalyticsId?: string | null
 }
 
 export const PktFooterSimple: React.FC<IPktFooterSimple> = ({
@@ -19,6 +23,9 @@ export const PktFooterSimple: React.FC<IPktFooterSimple> = ({
   openLinksInNewTab = false,
   personvernOgInfoLink = 'https://www.oslo.kommune.no/personvern-og-informasjonskapsler/',
   tilgjengelighetLink = 'https://www.oslo.kommune.no/tilgjengelighet/',
+  includeConsent = false,
+  hotjarId = null,
+  googleAnalyticsId = null,
   className,
 }) => {
   const classNames = [className, 'pkt-footer-simple'].filter(Boolean).join(' ')
@@ -61,6 +68,11 @@ export const PktFooterSimple: React.FC<IPktFooterSimple> = ({
               Tilgjengelighet
             </a>
           </li>
+          {includeConsent && (
+            <li className="pkt-footer-simple__list-item">
+              <PktConsent triggerType="footerlink" hotjarId={hotjarId} googleAnalyticsId={googleAnalyticsId} />
+            </li>
+          )}
         </ul>
       </div>
     </footer>

package/src/components/index.ts

@@ -7,6 +7,7 @@ export { PktButton } from './button/Button'
 export { PktCard } from './card/Card'
 export { PktCheckbox } from './checkbox/Checkbox'
 export { PktCombobox } from './combobox/Combobox'
+export { PktConsent } from './consent/Consent'
 export { PktDatepicker } from './datepicker/Datepicker'
 export { PktFooter } from './footer/Footer'
 export { PktFooterSimple } from './footerSimple/FooterSimple'