@oslokommune/punkt-css 11.1.1 → 11.2.0

package/dist/scripts/pkt-tabs.js

@@ -0,0 +1,88 @@
+export default class PktTabs {
+  /*
+   * Punkt Tabs
+   * Inspired by the tabs example in the ARIA Authoring Practices Guide from W3C
+   * https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
+   *
+   */
+  constructor(tabListNode, panelNode = null) {
+    this.tabs = Array.from(tabListNode.querySelectorAll('[role=tab]'))
+    this.panels = panelNode
+      ? Array.from(panelNode.querySelectorAll('[role=tabpanel]'))
+      : []
+    this.first = this.tabs[0]
+    this.last = this.tabs[this.tabs.length - 1]
+    this.current = this.first
+
+    for (var i = 0; i < this.tabs.length; i++) {
+      var tab = this.tabs[i]
+
+      if (
+        tab.getAttribute('aria-selected') === 'true' ||
+        tab.classList.contains('active')
+      ) {
+        this.current = tab
+      }
+      tab.addEventListener('keydown', this.onKeydown.bind(this))
+    }
+
+    this.setActive(this.current)
+  }
+
+  setActive(current) {
+    for (var i = 0; i < this.tabs.length; i++) {
+      var tab = this.tabs[i]
+      if (current === tab) {
+        tab.setAttribute('aria-selected', 'true')
+        tab.removeAttribute('tabindex')
+        tab.classList.add('active')
+        this.panels.length && this.panels[i].classList.remove('pkt-hide')
+      } else {
+        tab.setAttribute('aria-selected', 'false')
+        tab.setAttribute('tabindex', '-1')
+        tab.classList.remove('active')
+        this.panels.length && this.panels[i].classList.add('pkt-hide')
+      }
+    }
+  }
+
+  setActiveByIndex(index) {
+    this.setActive(this.tabs[index])
+  }
+
+  previous(current) {
+    current !== this.first && this.tabs[this.tabs.indexOf(current) - 1].focus()
+  }
+
+  next(current) {
+    current !== this.last && this.tabs[this.tabs.indexOf(current) + 1].focus()
+  }
+
+  onKeydown(event) {
+    var target = event.currentTarget
+    var hasInteracted = false
+
+    switch (event.code) {
+      case 'ArrowLeft':
+        this.previous(target)
+        hasInteracted = true
+        break
+      case 'ArrowRight':
+        this.next(target)
+        hasInteracted = true
+        break
+      case 'ArrowDown':
+      case 'Space':
+        target.click()
+        hasInteracted = true
+        break
+      default:
+        break
+    }
+
+    if (hasInteracted) {
+      event.stopPropagation()
+      event.preventDefault()
+    }
+  }
+}

package/dist/scss/abstracts/variables/_index.scss

@@ -6,7 +6,7 @@
 @forward 'spacing';
 
 // Default icon path
-$icon-path: 'https://punkt-cdn.oslo.kommune.no/11.1/icons' !default;
+$icon-path: 'https://punkt-cdn.oslo.kommune.no/11.2/icons' !default;
 
 // Borders
 $border-width: (

package/dist/scss/base/_containers.scss

@@ -19,6 +19,7 @@ $-gapsMedium: map.get(variables.$spacing, 'size-32');
   padding-left: $-gapsSmall;
   padding-right: $-gapsSmall;
   width: 100%;
+  max-width: 100vw;
 
   @include bp('tablet-up') {
     padding-left: $-gapsMedium;

package/dist/scss/base/_typography.scss

@@ -45,7 +45,7 @@ a,
   cursor: pointer;
 
   // visited
-  &:visited:not(.pkt-linkcard):not(.pkt-btn) {
+  &:visited:not(.pkt-linkcard):not(.pkt-btn):not(.pkt-tabs__link) {
     color: inherit;
   }
 

package/dist/scss/components/_index.scss

@@ -7,6 +7,7 @@
 @forward 'header';
 @forward 'icon';
 @forward 'inputwrapper';
+@forward 'tabs';
 @forward 'teaserlist';
 @forward 'messagebox';
 @forward 'linkcard';

package/dist/scss/components/_tabs.scss

@@ -0,0 +1,93 @@
+@use 'sass:map';
+@use '../abstracts/variables';
+@use '../abstracts/mixins/typography';
+
+.pkt-tabs {
+  --pkt-tabs-bg: var(--pkt-color-background-default);
+  background-color: var(--pkt-tabs-bg);
+  position: relative;
+  border-bottom: 1px solid var(--pkt-color-border-gray);
+  &__list {
+    position: relative;
+    width: auto;
+    width: 100%;
+    overflow-x: scroll;
+    scrollbar-width: thin;
+    padding: 0.25rem 4rem 0 0.25rem;
+    margin: 0;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: flex-start;
+  }
+  &__button {
+    border: 0;
+    padding: 0;
+    background: none;
+    border-radius: 0;
+  }
+  &__link,
+  &__button {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem;
+    color: var(--pkt-color-text-action-disabled);
+    border-bottom: 0.25rem solid transparent;
+    @include typography.get-text('pkt-txt-16');
+    white-space: nowrap;
+    .pkt-icon {
+      --fg-color: currentColor;
+    }
+    &,
+    &:hover,
+    &:active {
+      text-decoration: none;
+    }
+    &:focus:not(:active),
+    &:focus-visible:not(:active) {
+      border: 0;
+      box-shadow: none;
+      background-color: var(--pkt-color-surface-default-gray);
+      outline: 0.25rem solid var(--pkt-color-border-states-focus);
+      outline-offset: 0;
+    }
+    &.active:focus,
+    &.active:focus-visible {
+      box-shadow: none;
+      border-bottom: 0.25rem solid var(--pkt-color-border-blue);
+    }
+    &:hover,
+    &:focus,
+    &:focus-visible,
+    &:focus-visible:is(:active),
+    &:focus:is(:active),
+    &:active {
+      outline: 0;
+      color: var(--pkt-color-text-action-active);
+      border-bottom: 0.25rem solid var(--pkt-color-border-states-hover);
+    }
+    &.active {
+      color: var(--pkt-color-text-action-normal);
+      border-bottom: 0.25rem solid var(--pkt-color-border-blue);
+      @include typography.get-text('pkt-txt-16-medium');
+    }
+  }
+
+  &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    z-index: 3;
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      var(--pkt-color-background-default) 100%
+    );
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 5rem;
+    pointer-events: none;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "11.1.1",
+  "version": "11.2.0",
   "description": "CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -55,5 +55,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "02d537df3e46bb6087e79b4f5a7c966157abbd9d"
+  "gitHead": "fec4dbecc80967363e57146603fd5618b107c879"
 }