@oslokommune/punkt-elements 18.4.0 → 18.5.0

package/src/components/button/button.ts

@@ -58,7 +58,7 @@ export class PktButton extends PktElementWithSlot<IPktButton> implements IPktBut
   @property({ type: String }) color?: TPktButtonColor
   @property({ type: String }) skin: TPktButtonSkin = 'primary'
   @property({ type: String }) variant: TPktButtonVariant = 'label-only'
-  @property({ type: String, reflect: true }) state?: TPktButtonState = 'normal'
+  @property({ type: String, reflect: true }) state?: TPktButtonState = undefined
   @property({ type: String, reflect: true }) type: THTMLButtonType = 'button'
   @property({ type: String }) form: string | undefined = undefined
   @property({ type: Boolean, reflect: true }) isLoading: Booleanish = false
@@ -109,6 +109,8 @@ export class PktButton extends PktElementWithSlot<IPktButton> implements IPktBut
     'aria-haspopup',
     'aria-expanded',
     'aria-controls',
+    'aria-label',
+    'tabindex',
   ] as const
 
   @state() private relocatedAria: Record<string, string> = {}
@@ -153,7 +155,6 @@ export class PktButton extends PktElementWithSlot<IPktButton> implements IPktBut
       [`pkt-btn--${this.state}`]: !!this.state,
       'pkt-btn--full': !!this.fullWidth,
       'pkt-btn--full-small': !!this.fullWidthOnMobile,
-      'pkt-btn--disabled': !!this.disabled,
       'pkt-btn--isLoading': !!this.isLoading,
     }
 
@@ -167,30 +168,38 @@ export class PktButton extends PktElementWithSlot<IPktButton> implements IPktBut
         aria-haspopup=${ifDefined(this.relocatedAria['aria-haspopup'])}
         aria-expanded=${ifDefined(this.relocatedAria['aria-expanded'])}
         aria-controls=${ifDefined(this.relocatedAria['aria-controls'])}
+        aria-label=${ifDefined(this.relocatedAria['aria-label'])}
+        tabindex=${ifDefined(this.relocatedAria['tabindex'])}
         form=${ifDefined(formId)}
       >
-        ${this.isLoading
-          ? html`<pkt-icon
-              class="pkt-btn__icon pkt-btn__spinner"
-              name="spinner-blue"
-              path=${ifDefined(this.loadingAnimationPath)}
-            ></pkt-icon>`
-          : nothing}
-        ${this.variant !== 'label-only'
-          ? html`<pkt-icon
-              class="pkt-btn__icon pkt-icon"
-              name=${this.iconName}
-              path=${ifDefined(this.iconPath)}
-            ></pkt-icon>`
-          : nothing}
+        ${
+          this.isLoading
+            ? html`<pkt-icon
+                class="pkt-btn__icon pkt-btn__spinner"
+                name="spinner-blue"
+                path=${ifDefined(this.loadingAnimationPath)}
+              ></pkt-icon>`
+            : nothing
+        }
+        ${
+          this.variant !== 'label-only'
+            ? html`<pkt-icon
+                class="pkt-btn__icon pkt-icon"
+                name=${this.iconName}
+                path=${ifDefined(this.iconPath)}
+              ></pkt-icon>`
+            : nothing
+        }
         <span class="pkt-btn__text">${slotContent(this)}</span>
-        ${this.variant === 'icons-right-and-left'
-          ? html`<pkt-icon
-              class="pkt-btn__icon"
-              name=${this.secondIconName}
-              path=${ifDefined(this.secondIconPath)}
-            ></pkt-icon>`
-          : nothing}
+        ${
+          this.variant === 'icons-right-and-left'
+            ? html`<pkt-icon
+                class="pkt-btn__icon"
+                name=${this.secondIconName}
+                path=${ifDefined(this.secondIconPath)}
+              ></pkt-icon>`
+            : nothing
+        }
       </button>
     `
   }

package/src/components/card/card.test.ts

@@ -106,7 +106,7 @@ describe('PktCard', () => {
       expect(card.tagPosition).toBe('top')
       expect(card.imageShape).toBe('square')
       expect(card.openLinkInNewTab).toBe(false)
-      expect(card.headinglevel).toBe(3)
+      expect(card.headingLevel).toBe(3)
 
       const article = card.querySelector('article')
       expect(article).toHaveClass('pkt-card--outlined')
@@ -220,9 +220,9 @@ describe('PktCard', () => {
 
       expect(card.heading).toBe('Test Card Title')
 
-      const heading = card.querySelector('pkt-heading')
+      const heading = card.querySelector('.pkt-card__heading')
       expect(heading).toBeInTheDocument()
-      expect(heading).toHaveClass('pkt-card__heading')
+      expect(heading?.tagName).toBe('H3')
       expect(heading?.textContent?.trim()).toBe('Test Card Title')
     })
 
@@ -241,10 +241,10 @@ describe('PktCard', () => {
       const { card } = await createCardTest({ heading: 'Test', headingLevel: 2 })
       await card.updateComplete
 
-      expect(card.headinglevel).toBe(2)
+      expect(card.headingLevel).toBe(2)
 
-      const heading = card.querySelector('pkt-heading')
-      expect(heading?.getAttribute('level')).toBe('2')
+      const heading = card.querySelector('.pkt-card__heading')
+      expect(heading?.tagName).toBe('H2')
     })
 
     test('does not render header when no heading or subheading', async () => {
@@ -263,7 +263,7 @@ describe('PktCard', () => {
 
       expect(card.clickCardLink).toBe(null)
 
-      const heading = card.querySelector('pkt-heading')
+      const heading = card.querySelector('.pkt-card__heading')
       const link = card.querySelector('.pkt-card__link')
       expect(heading).toBeInTheDocument()
       expect(link).not.toBeInTheDocument()

package/src/components/card/card.ts

@@ -8,14 +8,14 @@ import { slotContent } from '@/directives/slot-content'
 import { IPktHeading } from '../heading'
 import specs from 'componentSpecs/card.json'
 import '@/components/icon'
-/* eslint-disable no-duplicate-imports -- There's a different between the import methods */
+
 import '@/components/tag'
-import '@/components/heading'
 import type { IAriaAttributes, TCardSkin, TLayout } from 'shared-types'
 
 export type { TCardSkin, TLayout }
 export type TCardPadding = 'none' | 'default'
 export type TCardImageShape = 'square' | 'round'
+export type TCardImageAspect = 'auto' | '1-1' | '4-3' | '3-2' | '16-9' | '19-10'
 export type TCardTagPosition = 'top' | 'bottom'
 
 export interface IPktCard {
@@ -27,9 +27,12 @@ export interface IPktCard {
   headingLevel?: IPktHeading['level']
   image?: { src: string; alt: string }
   imageShape?: TCardImageShape
+  imageAspect?: TCardImageAspect | null
+  restrictImageHeight?: boolean | null
   clickCardLink?: string | null
   openLinkInNewTab?: boolean | null
   borderOnHover?: boolean | null
+  zoom?: boolean | null
   padding?: TCardPadding
   skin?: TCardSkin
   subheading?: string
@@ -43,11 +46,16 @@ export class PktCard extends PktElementWithSlot implements IPktCard {
   @property({ type: String }) ariaLabel: string = ''
   @property({ type: String }) metaLead: string | null = null
   @property({ type: Boolean }) borderOnHover: boolean = true
+  @property({ type: Boolean }) zoom: boolean = false
+  @property({ type: String }) imageAspect: TCardImageAspect | null = null
+  @property({ type: Boolean }) restrictImageHeight: boolean = false
   @property({ type: String, reflect: true }) clickCardLink: IPktCard['clickCardLink'] = null
   @property({ type: String }) metaTrail: string | null = null
   @property({ type: String }) layout: TLayout = specs.props.layout.default as TLayout
   @property({ type: String }) heading: string = ''
-  @property({ type: Number }) headinglevel: IPktHeading['level'] = 3
+  // Attributtet beholder gamle `headinglevel` så eksisterende markup ikke brekker.
+  @property({ type: Number, attribute: 'headinglevel' })
+  headingLevel: IPktHeading['level'] = 3
   @property({ type: Object }) image: { src: string; alt: string } = {
     src: '',
     alt: '',
@@ -97,6 +105,7 @@ export class PktCard extends PktElementWithSlot implements IPktCard {
       [`pkt-card--${this.layout}`]: this.layout,
       [`pkt-card--padding-${this.padding}`]: this.padding,
       [`pkt-card--border-on-hover`]: this.borderOnHover,
+      [`pkt-card--zoom`]: this.zoom,
      
     }
 
@@ -127,59 +136,61 @@ export class PktCard extends PktElementWithSlot implements IPktCard {
     const imageClasses = {
       'pkt-card__image': true,
       [`pkt-card__image-${this.imageShape}`]: this.imageShape,
+      [`pkt-card__image-aspect-${this.imageAspect}`]: Boolean(this.imageAspect),
+      'pkt-card__image-restricted': this.restrictImageHeight,
     }
 
     return html`
-      ${this.image.src &&
-      html`
-        <div class=${classMap(imageClasses)}>
-          <img src=${this.image.src} alt=${this.image.alt || ''} />
-        </div>
-      `}
+      ${
+        this.image.src &&
+        html`
+          <div class=${classMap(imageClasses)}>
+            <img src=${this.image.src} alt=${this.image.alt || ''} />
+          </div>
+        `
+      }
     `
   }
 
+  private renderHeadingTag(classes: string, content: unknown) {
+    const level =
+      this.headingLevel && this.headingLevel >= 1 && this.headingLevel <= 6 ? this.headingLevel : 3
+    // Bruker pkt-heading sine klasser her, for å unngå forskjeller i markup
+    const all = `pkt-heading pkt-heading--medium pkt-heading--fw-regular ${classes}`
+    switch (level) {
+      case 1:
+        return html`<h1 class=${all}>${content}</h1>`
+      case 2:
+        return html`<h2 class=${all}>${content}</h2>`
+      case 4:
+        return html`<h4 class=${all}>${content}</h4>`
+      case 5:
+        return html`<h5 class=${all}>${content}</h5>`
+      case 6:
+        return html`<h6 class=${all}>${content}</h6>`
+      default:
+        return html`<h3 class=${all}>${content}</h3>`
+    }
+  }
+
   // Do not render heading if link is present, render link heading instead
-  // Combine the rendering for headings into a renderHeader method
   renderHeading() {
-    return html`
-      ${this.heading && !this.clickCardLink
-        ? html`
-            <pkt-heading
-              class="pkt-card__heading"
-              .level=${this.headinglevel || 3}
-              size="medium"
-              nospacing
-              weight="regular"
-            >
-              ${this.heading}
-            </pkt-heading>
-          `
-        : nothing}
-    `
+    if (!this.heading || this.clickCardLink) return nothing
+    return this.renderHeadingTag('pkt-card__heading', this.heading)
   }
 
   renderLinkHeading() {
-    return html`
-      ${this.clickCardLink
-        ? html`
-            <pkt-heading
-              class="pkt-card__link-heading pkt-card__heading"
-              .level=${this.headinglevel || 3}
-              size="medium"
-              weight="regular"
-              nospacing
-            >
-              <a
-                class="pkt-card__link"
-                href=${this.clickCardLink}
-                target=${this.openLinkInNewTab ? '_blank' : '_self'}
-                >${this.heading}</a
-              >
-            </pkt-heading>
-          `
-        : nothing}
-    `
+    if (!this.clickCardLink) return nothing
+    return this.renderHeadingTag(
+      'pkt-card__link-heading pkt-card__heading',
+      html`<a
+        class="pkt-card__link"
+        href=${this.clickCardLink}
+        target=${this.openLinkInNewTab ? '_blank' : '_self'}
+        rel=${ifDefined(this.openLinkInNewTab ? 'noopener noreferrer' : undefined)}
+        >${this.heading}</a
+      >`,
+    )
   }
 
   renderSubheading() {
@@ -212,29 +223,31 @@ export class PktCard extends PktElementWithSlot implements IPktCard {
       [`pkt-card__tags-${this.tagPosition}`]: this.tagPosition,
     }
     return html`
-      ${this.tags.length > 0
-        ? html`
-            <div
-              class=${classMap(tagClasses)}
-              role="list"
-              aria-label=${this.tags.length > 1 ? 'merkelapper' : 'merkelapp'}
-            >
-              ${this.tags.map(
-                (tag) => html`
-                  <pkt-tag
-                    role="listitem"
-                    textStyle="normal-text"
-                    size="medium"
-                    skin=${ifDefined(tag.skin)}
-                    iconName=${ifDefined(tag.iconName)}
-                  >
-                    <span>${tag.text}</span>
-                  </pkt-tag>
-                `,
-              )}
-            </div>
-          `
-        : nothing}
+      ${
+        this.tags.length > 0
+          ? html`
+              <div
+                class=${classMap(tagClasses)}
+                role="list"
+                aria-label=${this.tags.length > 1 ? 'merkelapper' : 'merkelapp'}
+              >
+                ${this.tags.map(
+                  (tag) => html`
+                    <pkt-tag
+                      role="listitem"
+                      textStyle="normal-text"
+                      size="medium"
+                      skin=${ifDefined(tag.skin)}
+                      iconName=${ifDefined(tag.iconName)}
+                    >
+                      <span>${tag.text}</span>
+                    </pkt-tag>
+                  `,
+                )}
+              </div>
+            `
+          : nothing
+      }
     `
   }
 
@@ -244,18 +257,24 @@ export class PktCard extends PktElementWithSlot implements IPktCard {
 
   renderMetadata() {
     return html`
-      ${this.metaLead || this.metaTrail
-        ? html`
-            <footer class="pkt-card__metadata">
-              ${this.metaLead
-                ? html`<span class="pkt-card__metadata-lead">${this.metaLead}</span>`
-                : nothing}
-              ${this.metaTrail
-                ? html`<span class="pkt-card__metadata-trail">${this.metaTrail}</span>`
-                : nothing}
-            </footer>
-          `
-        : nothing}
+      ${
+        this.metaLead || this.metaTrail
+          ? html`
+              <footer class="pkt-card__metadata">
+                ${
+                  this.metaLead
+                    ? html`<span class="pkt-card__metadata-lead">${this.metaLead}</span>`
+                    : nothing
+                }
+                ${
+                  this.metaTrail
+                    ? html`<span class="pkt-card__metadata-trail">${this.metaTrail}</span>`
+                    : nothing
+                }
+              </footer>
+            `
+          : nothing
+      }
     `
   }
 }

package/src/components/helptext/helptext.ts

@@ -77,8 +77,8 @@ export class PktHelptext extends PktElementWithSlot<IPktStringsProps<'forms'>> {
     const helptextElement = () => {
       return html`<div class="${helptextClasses}">
         <div class="pkt-inputwrapper__helptext" id="${this.forId}-helptext">
-          <div class="pkt-contents" name="helptext">${slotContent(this)}</div>
-          ${this.helptext && unsafeHTML(this.helptext)}
+          <div class="pkt-contents">${slotContent(this)}</div>
+          ${this.helptext ? html`<span>${unsafeHTML(this.helptext)}</span>` : nothing}
         </div>
         ${helptextDropdown()}
       </div>`

package/src/components/input-wrapper/input-wrapper.ts

@@ -193,6 +193,7 @@ export class PktInputWrapper extends PktElementWithSlot<Props> {
           <pkt-alert
             skin="error"
             .size=${errorAlertSize}
+            .role=${'alert'}
             id=${`${this.forId}-error`}
             aria-live="assertive"
             aria-atomic="true"

package/src/components/link/link.ts

@@ -30,14 +30,16 @@ export class PktLink extends PktElementWithSlot {
       'pkt-link--icon-right': !!this.iconName && this.iconPosition === 'right',
       'pkt-link--external': this.external,
     }
+    const target = this.target && this.target !== '_self' ? this.target : nothing
+
     return html`<a
       class=${classMap(classes)}
       href=${this.href}
-      .target=${this.target}
+      target=${target}
       .rel=${this.external ? 'noopener noreferrer' : nothing}
       >${this.iconName
         ? html`<pkt-icon name=${this.iconName} class="pkt-link__icon"></pkt-icon>`
-        : ''} <span>${slotContent(this)}</span></a
+        : ''}${slotContent(this)}</a
     >`
   }
 }

package/src/components/linkcard/linkcard.test.ts

@@ -64,7 +64,7 @@ describe('PktLinkCard', () => {
       expect(linkCard.href).toBe('#')
       expect(linkCard.iconName).toBe('')
       expect(linkCard.openInNewTab).toBe(false)
-      expect(linkCard.skin).toBe('normal')
+      expect(linkCard.skin).toBeUndefined()
       expect(linkCard.external).toBe(false)
 
       expect(link.getAttribute('href')).toBe('#')
@@ -209,7 +209,7 @@ describe('PktLinkCard', () => {
     test('applies default skin class', async () => {
       const { link } = await createLinkCardTest()
       expect(link).toHaveClass('pkt-linkcard')
-      expect(link).toHaveClass('pkt-linkcard--normal')
+      expect(link).not.toHaveClass('pkt-linkcard--normal')
     })
 
     test('applies different skin classes correctly', async () => {
@@ -312,7 +312,7 @@ describe('PktLinkCard', () => {
 
       expect(linkCard.href).toBe('/minimal')
       expect(link.getAttribute('href')).toBe('/minimal')
-      expect(link).toHaveClass('pkt-linkcard--normal')
+      expect(link).not.toHaveClass('pkt-linkcard--normal')
 
       // Should not have title or icon
       expect(linkCard.querySelector('.pkt-linkcard__title')).not.toBeInTheDocument()

package/src/components/linkcard/linkcard.ts

@@ -16,7 +16,7 @@ export class PktLinkCard extends PktElementWithSlot<IPktLinkCard> implements IPk
   @property({ type: String, reflect: true }) iconName: string = ''
   @property({ type: Boolean, reflect: true }) external: boolean = false
   @property({ type: Boolean, reflect: true }) openInNewTab: boolean = false
-  @property({ type: String, reflect: true }) skin: TLinkCardSkin = 'normal'
+  @property({ type: String, reflect: true }) skin?: TLinkCardSkin = undefined
 
   render() {
     const classes = ['pkt-linkcard', this.skin && `pkt-linkcard--${this.skin}`]

package/src/components/loader/loader.test.ts

@@ -83,7 +83,7 @@ describe('PktLoader', () => {
       expect(loader.isLoading).toBe(true)
       expect(loader.inline).toBe(false)
       expect(loader.size).toBe('medium')
-      expect(loader.variant).toBe('shapes')
+      expect(loader.variant).toBe('rainbow')
       expect(loader.delay).toBe(0)
     })
 

package/src/components/loader/loader.ts

@@ -40,8 +40,8 @@ export interface IPktLoader {
    */
   size?: TPktSize
   /**
-   * The variant of the loader. Default is "shapes" which is the OSLO wave loader.
-   * Other variants are "blue" and "rainbow" which are spinner variants.
+   * The variant of the loader. Default is "rainbow".
+   * "shapes" is the OSLO wave loader, "blue" a blue spinner.
    */
   variant?: TPktLoaderVariant
   /**
@@ -56,7 +56,7 @@ export class PktLoader extends PktElementWithSlot implements IPktLoader {
   @property({ type: Boolean }) isLoading: boolean = true
   @property({ type: String }) message: string | null = null
   @property({ type: String }) size: TPktSize = 'medium'
-  @property({ type: String }) variant: TPktLoaderVariant = 'shapes'
+  @property({ type: String }) variant: TPktLoaderVariant = 'rainbow'
   @property({ type: String }) loadingAnimationPath: string | undefined =
     typeof window !== 'undefined' ? window.pktAnimationPath : defaultAnimationPath
 

package/src/components/messagebox/messagebox.test.ts

@@ -72,7 +72,7 @@ describe('PktMessagebox', () => {
       expect(messagebox.closable).toBe(false)
       expect(messagebox.compact).toBe(false)
       expect(messagebox.title).toBe('')
-      expect(messagebox.skin).toBe('beige')
+      expect(messagebox.skin).toBeUndefined()
     })
 
     test('sets properties correctly', async () => {

package/src/components/messagebox/messagebox.ts

@@ -29,7 +29,7 @@ export class PktMessagebox extends PktElementWithSlot implements IPktMessagebox
   @property({ type: Boolean, reflect: true }) closable = specs.props.closable.default
   @property({ type: Boolean, reflect: true }) compact = specs.props.compact.default
   @property({ type: String, reflect: true }) title = ''
-  @property({ type: String, reflect: true }) skin = specs.props.skin.default as TMessageboxSkin
+  @property({ type: String, reflect: true }) skin?: TMessageboxSkin = undefined
 
   @state() _isClosed: boolean = false
 
@@ -49,7 +49,7 @@ export class PktMessagebox extends PktElementWithSlot implements IPktMessagebox
     const classes = {
       'pkt-messagebox': true,
       'pkt-messagebox--compact': this.compact,
-      [`pkt-messagebox--${this.skin}`]: this.skin,
+      [`pkt-messagebox--${this.skin}`]: !!this.skin,
       'pkt-messagebox--closable': this.closable,
       'pkt-hide': this._isClosed,
     }

package/src/components/progressbar/progressbar.test.ts

@@ -38,7 +38,7 @@ describe('PktProgressbar', () => {
       const { progressbar } = await createProgressbarTest({ valueCurrent: 50 })
 
       expect(progressbar.valueCurrent).toBe(50)
-      expect(progressbar.getAttribute('role')).toBe('progressbar')
+      expect(progressbar.querySelector('.pkt-progressbar')?.getAttribute('role')).toBe('progressbar')
     })
   })
 
@@ -150,10 +150,11 @@ describe('PktProgressbar', () => {
         ariaLabel: 'File upload progress',
       })
 
-      expect(progressbar.getAttribute('aria-valuemin')).toBe('0')
-      expect(progressbar.getAttribute('aria-valuemax')).toBe('100')
-      expect(progressbar.getAttribute('aria-valuenow')).toBe('60')
-      expect(progressbar.getAttribute('aria-label')).toBe('File upload progress')
+      const root = progressbar.querySelector('.pkt-progressbar')
+      expect(root?.getAttribute('aria-valuemin')).toBe('0')
+      expect(root?.getAttribute('aria-valuemax')).toBe('100')
+      expect(root?.getAttribute('aria-valuenow')).toBe('60')
+      expect(root?.getAttribute('aria-label')).toBe('File upload progress')
     })
 
     test('updates aria-valuenow when value changes', async () => {
@@ -162,7 +163,7 @@ describe('PktProgressbar', () => {
       progressbar.valueCurrent = 80
       await progressbar.updateComplete
 
-      expect(progressbar.getAttribute('aria-valuenow')).toBe('80')
+      expect(progressbar.querySelector('.pkt-progressbar')?.getAttribute('aria-valuenow')).toBe('80')
     })
   })
 
@@ -170,13 +171,14 @@ describe('PktProgressbar', () => {
     test('uses progressbar role by default', async () => {
       const { progressbar } = await createProgressbarTest()
 
-      expect(progressbar.getAttribute('role')).toBe('progressbar')
+      expect(progressbar.querySelector('.pkt-progressbar')?.getAttribute('role')).toBe('progressbar')
+      expect(progressbar.hasAttribute('role')).toBe(false)
     })
 
     test('uses meter role when specified', async () => {
       const { progressbar } = await createProgressbarTest({ role: 'meter' })
 
-      expect(progressbar.getAttribute('role')).toBe('meter')
+      expect(progressbar.querySelector('.pkt-progressbar')?.getAttribute('role')).toBe('meter')
     })
   })