@oslokommune/punkt-css 11.14.1 → 11.14.2

package/dist/scss/components/_index.scss

@@ -1,6 +1,5 @@
 @forward 'accordion';
 @forward 'alert';
-@forward 'tag';
 @forward 'backlink';
 @forward 'badge';
 @forward 'breadcrumbs';
@@ -9,12 +8,14 @@
 @forward 'header';
 @forward 'icon';
 @forward 'inputwrapper';
-@forward 'tabs';
-@forward 'teaserlist';
-@forward 'messagebox';
 @forward 'linkcard';
 @forward 'loader';
+@forward 'messagebox';
+@forward 'progressbar';
+@forward 'searchinput';
+@forward 'stepper';
+@forward 'tabs';
+@forward 'tag';
 @forward 'tag';
+@forward 'teaserlist';
 @forward 'textinput';
-@forward 'searchinput';
-@forward 'progressbar';

package/dist/scss/components/_stepper.scss

@@ -0,0 +1,212 @@
+/*
+ *  Stepper component
+ */
+
+@use 'sass:map';
+@use '../abstracts/variables';
+@use '../abstracts/mixins/breakpoints' as *;
+@use '../abstracts/' as *;
+
+// GENERELL STEPPER OG STEP
+.pkt-stepper {
+  --pkt-steps-indicator-width: 24px;
+  --pkt-steps-indicator-height: 24px;
+  --pkt-steps-indicator-color: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-steps-border-width: 2.5px;
+  --pkt-steps-line-length: 1.5rem;
+
+  color: var(--pkt-color-brand-dark-blue-1000);
+  font-size: map.get(variables.$font-size, 'size-18');
+  font-weight: map.get(variables.$font-weight, 'medium');
+  letter-spacing: map.get(variables.$letter-spacing, 'tight');
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  .pkt-step {
+    display: grid;
+
+    &__wrapper {
+      grid-column: title / content;
+      grid-row: title / content;
+    }
+
+    &__title {
+      font-weight: map.get(variables.$font-weight, 'medium');
+      width: max-content;
+      width: 100%;
+    }
+
+    &__content {
+      font-weight: map.get(variables.$font-weight, 'light');
+      padding-bottom: map.get(variables.$spacing, 'size-24');
+      width: 100%;
+    }
+
+    &__indicator {
+      z-index: 2;
+      grid-area: indicator;
+    }
+
+    &__line {
+      background-color: var(--pkt-color-brand-dark-blue-1000);
+
+      &--1 {
+        grid-area: indicator;
+      }
+      &--2 {
+        grid-area: indicator;
+      }
+
+      &--3 {
+        grid-area: line;
+        height: fit-content;
+      }
+    }
+  }
+}
+
+// VERTICAL STEPPER (default)
+.pkt-stepper--vertical {
+  display: grid;
+  grid-template-columns: 1fr;
+
+  .pkt-step {
+    grid-template-areas: 'indicator title' 'line content';
+    grid-template-columns: var(--pkt-steps-indicator-width) auto;
+    grid-template-rows: var(--pkt-steps-indicator-height) minmax(min-content, max-content);
+    grid-gap: 0 1rem;
+    justify-items: flex-start;
+
+    &--current {
+      .pkt-step__title,
+      .pkt-step__content {
+        padding: map-get(variables.$spacing, 'size-16') map-get(variables.$spacing, 'size-24');
+        background-color: var(--pkt-color-surface-subtle-pale-blue);
+      }
+
+      .pkt-step__wrapper {
+        margin-bottom: map-get(variables.$spacing, 'size-24');
+      }
+    }
+
+    &__indicator {
+      & > svg {
+        vertical-align: baseline;
+      }
+    }
+
+    &__line {
+      min-height: min-content;
+      height: 100%;
+      margin: auto;
+      width: var(--pkt-steps-border-width);
+
+      &--1 {
+        height: 50%;
+        transform: translateY(-55%);
+      }
+      &--2 {
+        height: 50%;
+        transform: translateY(55%);
+      }
+
+      &--3 {
+        min-height: map.get(variables.$spacing, 'size-64');
+      }
+    }
+  }
+}
+
+// HORIZONTAL STEPPER
+.pkt-stepper--horizontal {
+  display: flex;
+
+  .pkt-step {
+    grid-template-areas: 'indicator line' 'title title' 'content content';
+    grid-template-columns: var(--pkt-steps-indicator-width) auto;
+    grid-template-rows: var(--pkt-steps-indicator-width) min-content min-content;
+    justify-items: flex-start;
+
+    &__wrapper {
+      min-width: fit-content;
+    }
+    &__title {
+      padding: map-get(variables.$spacing, 'size-24') map-get(variables.$spacing, 'size-16')
+        map-get(variables.$spacing, 'size-24') 0;
+    }
+
+    &__content {
+      padding: 0 map-get(variables.$spacing, 'size-16') map-get(variables.$spacing, 'size-16') 0;
+    }
+
+    &__indicator > svg {
+      vertical-align: baseline;
+    }
+
+    &__line {
+      min-width: min-content;
+      width: 100%;
+      margin: auto;
+
+      height: var(--pkt-steps-border-width);
+
+      &--1 {
+        width: 50%;
+        transform: translateX(-55%);
+      }
+      &--2 {
+        width: 50%;
+        transform: translateX(55%);
+      }
+
+      &--3 {
+        min-width: map.get(variables.$spacing, 'size-80');
+      }
+    }
+  }
+}
+
+// FIRST STEP
+.pkt-step:first-of-type {
+  .pkt-step__line--1 {
+    display: none;
+  }
+}
+
+// INCOMPLETE STEP
+.pkt-step--incomplete {
+  .pkt-step__line {
+    background-color: var(--pkt-color-grays-gray-200);
+  }
+
+  .pkt-step__title,
+  .pkt-step__content {
+    color: var(--pkt-color-grays-gray-600);
+  }
+}
+
+//  FIRST INCOMPLETE STEP
+.pkt-step--current + .pkt-step--incomplete {
+  .pkt-step__line--1 {
+    background-color: var(--pkt-color-brand-dark-blue-1000);
+  }
+  .pkt-step__line--2 {
+    background-color: var(--pkt-color-grays-gray-200);
+  }
+}
+
+// LAST STEP
+.pkt-step:last-of-type {
+  .pkt-step__line--3,
+  .pkt-step__line--2 {
+    display: none;
+  }
+}
+
+// ALL STEP CONTENT EXCEPT CURRENT
+.pkt-step--hidden:not(.pkt-step--current) {
+  .pkt-step__content {
+    display: none;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "11.14.1",
+  "version": "11.14.2",
   "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": "962e2a838414c5c286a385a815ee48051c12cc41"
+  "gitHead": "817b273dbc62a68c7c9bf259e08bacd26bc538a1"
 }