@helsenorge/designsystem-react 4.3.0 → 4.4.0

package/components/ServiceMessage/styles.module.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import '../../scss/spacers';
 @import '../../scss/palette';
 @import '../../scss/breakpoints';
@@ -5,322 +6,222 @@
 @import '../../scss/grid';
 
 .service-message {
-  font-family: 'Source Sans Pro', Arial, Verdana, sans-serif;
+  $servicemessage: &;
 
-  &__outer-wrapper {
-    &--success {
-      background-color: $kiwi50;
-    }
-
-    &--info {
-      background-color: $blueberry50;
-    }
+  border-width: 1px;
+  border-bottom-style: solid;
 
-    &--warn {
-      background-color: $banana50;
-    }
-
-    &--alert {
-      background-color: $cherry50;
-    }
+  &:first-of-type {
+    border-top-style: solid;
   }
 
-  &__wrapper {
-    padding: getSpacer(3xs) getSpacer(xs);
+  &--success {
+    background-color: $kiwi50;
 
-    @media (min-width: map-get($grid-breakpoints, md)) {
-      padding: getSpacer(2xs) getSpacer(l);
+    &:hover {
+      background-color: rgba-to-rgb(rgba($kiwi500, 0.1), $kiwi50);
     }
 
-    &--inner {
-      @media (min-width: map-get($grid-breakpoints, lg)) {
-        @include make-container;
-        @include make-container-max-widths;
-      }
+    &#{$servicemessage},
+    &#{$servicemessage}__label-container {
+      border-color: $kiwi900;
     }
+  }
 
-    &--success {
-      background-color: $kiwi50;
+  &--info {
+    background-color: $blueberry50;
 
-      &:hover {
-        background-color: rgb(51 190 132 / 10%);
-      }
-
-      &--expanded {
-        border-bottom: 0.0625rem solid $kiwi900;
-      }
+    &:hover {
+      background-color: rgba-to-rgb(rgba($blueberry500, 0.1), $blueberry50);
     }
 
-    &--info {
-      background-color: $blueberry50;
-
-      &:hover {
-        background-color: rgb(24 128 151 / 10%);
-      }
-
-      &--expanded {
-        border-bottom: 0.0625rem solid $blueberry700;
-      }
+    &#{$servicemessage},
+    &#{$servicemessage}__label-container {
+      border-color: $blueberry700;
     }
+  }
 
-    &--warn {
-      background-color: $banana50;
-
-      &:hover {
-        background-color: rgb(221 171 6 / 10%);
-      }
+  &--warn {
+    background-color: $banana50;
 
-      &--expanded {
-        border-bottom: 0.0625rem solid $banana700;
-      }
+    &:hover {
+      background-color: rgba-to-rgb(rgba($banana500, 0.1), $banana50);
     }
 
-    &--alert {
-      background-color: $cherry50;
-
-      &:hover {
-        background-color: rgb(200 53 33 / 10%);
-      }
-
-      &--expanded {
-        border-bottom: 0.0625rem solid $cherry700;
-      }
+    &#{$servicemessage},
+    &#{$servicemessage}__label-container {
+      border-color: $banana700;
     }
+  }
 
-    &__border {
-      &--success {
-        border: 0.0625rem solid $kiwi900;
-      }
-
-      &--info {
-        border: 0.0625rem solid $blueberry700;
-      }
-
-      &--warn {
-        border: 0.0625rem solid $banana700;
-      }
+  &--alert {
+    background-color: $cherry50;
 
-      &--alert {
-        border: 0.0625rem solid $cherry700;
-      }
+    &:hover {
+      background-color: rgba-to-rgb(rgba($cherry500, 0.1), $cherry50);
     }
 
-    &__btn {
-      background-color: transparent;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-
-      &--width {
-        width: 100%;
-      }
-
-      &--not-first {
-        border-top-color: transparent;
-        border-right-color: transparent;
-        border-left-color: transparent;
-      }
+    &#{$servicemessage},
+    &#{$servicemessage}__label-container {
+      border-color: $cherry700;
+    }
+  }
 
-      &:focus {
-        border: none;
-        outline: 0.125rem solid #000;
-        outline-offset: -2px;
+  &__container {
+    @include make-container;
+    @include make-container-max-widths;
+  }
 
-        // offset colliding border.
-        margin-top: -1px;
-        padding-top: 0.375rem;
-        padding-bottom: 0.3125rem;
+  &__row {
+    @include make-row;
+  }
 
-        @media (min-width: map-get($grid-breakpoints, md)) {
-          padding-top: 0.625rem;
-          padding-bottom: 0.5625rem;
-        }
-      }
+  &__col {
+    @include make-col-ready;
+    @include make-col(12);
+  }
 
-      &--first {
-        border-right-color: transparent;
-        border-left-color: transparent;
+  &__label-container {
+    position: relative;
+    padding-top: getSpacer(3xs);
+    padding-bottom: getSpacer(3xs);
 
-        @media (max-width: map-get($grid-breakpoints, lg)) {
-          border-top-color: transparent;
-        }
+    @media (min-width: map-get($grid-breakpoints, lg)) {
+      padding-top: getSpacer(2xs);
+      padding-bottom: getSpacer(2xs);
+    }
 
-        &:focus {
-          padding-top: 0.3125rem;
-          padding-bottom: 0.3125rem;
-          margin-top: 0;
+    &--has-expander:has(:focus-visible) {
+      box-shadow: inset 0 0 0 2px $black;
+    }
+  }
 
-          @media (min-width: map-get($grid-breakpoints, md)) {
-            padding-top: 0.5625rem;
-            padding-bottom: 0.5625rem;
-          }
-        }
-      }
+  &__label {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    gap: getSpacer(2xs);
 
-      &--expanded {
-        border-bottom-color: transparent;
-      }
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      gap: getSpacer(m);
     }
   }
 
-  &__content {
-    display: block;
-    margin: 0 3.75rem;
+  &__title {
+    width: 100%;
+    font-weight: 700;
     font-size: $font-size-xs;
     line-height: 1.25rem;
-    padding: getSpacer(3xs) 0 getSpacer(xs) 0;
 
     @media (min-width: map-get($grid-breakpoints, md)) {
-      margin: 0 getSpacer(4xl);
-    }
-
-    @media (min-width: map-get($grid-breakpoints, lg)) {
-      padding: getSpacer(2xs) 0 getSpacer(s) 0;
-      margin: 0 4.5625rem;
-    }
-
-    &__info {
-      display: block;
-      font-size: $font-size-xs;
-      line-height: 1.25rem;
-
-      @media (min-width: map-get($grid-breakpoints, lg)) {
-        padding-top: getSpacer(xs);
-        line-height: 1.625rem;
-        font-size: $font-size-sm;
-      }
-
-      &--smaller {
-        display: block;
-        font-size: 0.875rem;
-        padding-top: getSpacer(2xs);
-        line-height: 1.25rem;
-
-        @media (min-width: map-get($grid-breakpoints, lg)) {
-          padding-top: getSpacer(xs);
-          font-size: $font-size-xs;
-          line-height: $lineheight-size-xs;
-        }
-      }
+      font-size: $font-size-sm;
     }
+  }
 
-    &--spacing {
-      margin-top: getSpacer(2xs);
+  &__toggle {
+    all: unset;
 
-      @media (min-width: map-get($grid-breakpoints, lg)) {
-        margin-top: 0;
-        padding: 0 getSpacer(l);
-      }
+    // Triks for at hele labelen skal trigge klikk på knappen
+    &::after {
+      inset: 0;
+      content: '';
+      position: absolute;
     }
   }
 
-  &__icon {
-    &--signal {
-      display: flex;
-      align-items: center;
-      margin-right: getSpacer(2xs);
+  &__content {
+    margin-left: calc(38px + getSpacer(2xs));
+    margin-right: calc(38px + getSpacer(2xs));
+    padding-top: getSpacer(xs);
+    padding-bottom: getSpacer(xs);
 
-      @media (min-width: map-get($grid-breakpoints, md)) {
-        margin-right: getSpacer(m);
-      }
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      margin-left: calc(38px + getSpacer(m));
+      margin-right: calc(38px + getSpacer(m));
     }
 
-    &--expander {
-      margin-left: auto;
-      display: flex;
-      align-items: center;
+    @media (min-width: map-get($grid-breakpoints, lg)) {
+      margin-left: calc(48px + getSpacer(m));
+      margin-right: calc(48px + getSpacer(m));
+      padding-top: getSpacer(2xs);
+      padding-bottom: getSpacer(s);
     }
   }
 
-  &__label {
-    text-align: left;
-    font-weight: 700;
+  &__info {
     font-size: $font-size-xs;
     line-height: 1.25rem;
+    margin: 0;
 
-    @media (min-width: map-get($grid-breakpoints, md)) {
+    @media (min-width: map-get($grid-breakpoints, lg)) {
+      margin-top: getSpacer(xs);
+      line-height: 1.625rem;
       font-size: $font-size-sm;
     }
-  }
-
-  &__top-row {
-    line-height: $lineheight-size-xs;
-    align-items: center;
 
-    @media (min-width: map-get($grid-breakpoints, md)) {
-      font-size: $font-size-sm;
-      line-height: 1.25rem;
-    }
+    &--extra {
+      font-size: 0.875rem;
+      margin-top: getSpacer(2xs);
 
-    &--container {
-      display: flex;
-      width: 100%;
-      align-items: center;
+      @media (min-width: map-get($grid-breakpoints, lg)) {
+        margin-top: getSpacer(xs);
+        font-size: $font-size-xs;
+        line-height: $lineheight-size-xs;
+      }
     }
   }
 
-  &__bottom-row {
+  &__actions {
     display: flex;
     justify-content: space-between;
     flex-flow: column wrap;
-    padding: getSpacer(2xs) 0 0 0;
     gap: getSpacer(2xs);
+    margin-top: getSpacer(2xs);
 
     @media (min-width: map-get($grid-breakpoints, sm)) {
       flex-direction: row;
     }
 
     @media (min-width: map-get($grid-breakpoints, lg)) {
-      padding: getSpacer(s) 0 0 0;
+      margin-top: getSpacer(s);
     }
+  }
 
-    &--only-close-button {
-      @media (min-width: map-get($grid-breakpoints, sm)) {
-        flex-direction: row-reverse;
-      }
+  &__action {
+    display: flex;
+    align-items: center;
+    border: none;
+    width: fit-content;
+    color: $blueberry700;
+    font-weight: 600;
+    font-size: $font-size-xs;
+    line-height: 1.25rem;
+    background-color: transparent;
+    text-decoration: none;
+    padding: 0.5rem;
+    margin-left: -0.5rem;
+    gap: getSpacer(xs);
+
+    &:hover,
+    &:active {
+      background-color: rgb(88 170 187 / 10%);
     }
 
-    &__button {
-      display: flex;
-      align-items: center;
-      border: none;
-      width: fit-content;
-      color: $blueberry700;
-      font-weight: 600;
-      font-size: $font-size-xs;
-      line-height: 1.25rem;
+    &:focus-visible {
+      box-shadow: 0 0 0 2px $black;
       background-color: transparent;
-      text-decoration: none;
-      padding: 0.5rem;
-      margin-left: -0.5rem;
-
-      &:hover,
-      &:active {
-        background-color: rgb(88 170 187 / 10%);
-      }
-
-      &:focus {
-        box-shadow: 0 0 0 2px $black;
-        background-color: transparent;
-        border-radius: 0;
-        border: 0;
-        outline: none;
-      }
-
-      svg {
-        margin-left: getSpacer(xs);
-      }
+      border: 0;
+      outline: none;
     }
 
-    &__close-button {
-      &--top {
+    &--close {
+      @media (min-width: map-get($grid-breakpoints, lg)) {
         margin-left: auto;
-        padding: 0;
-
-        svg {
-          margin-left: 0;
-        }
       }
     }
   }
+
+  &__close {
+    z-index: 1;
+  }
 }

package/components/ServiceMessage/styles.module.scss.d.ts

@@ -1,41 +1,24 @@
 export type Styles = {
   'service-message': string;
-  'service-message__bottom-row': string;
-  'service-message__bottom-row__button': string;
-  'service-message__bottom-row__close-button--top': string;
-  'service-message__bottom-row--only-close-button': string;
+  'service-message__action': string;
+  'service-message__action--close': string;
+  'service-message__actions': string;
+  'service-message__close': string;
+  'service-message__col': string;
+  'service-message__container': string;
   'service-message__content': string;
-  'service-message__content__info': string;
-  'service-message__content__info--smaller': string;
-  'service-message__content--spacing': string;
-  'service-message__icon--expander': string;
-  'service-message__icon--signal': string;
+  'service-message__info': string;
+  'service-message__info--extra': string;
   'service-message__label': string;
-  'service-message__outer-wrapper--alert': string;
-  'service-message__outer-wrapper--info': string;
-  'service-message__outer-wrapper--success': string;
-  'service-message__outer-wrapper--warn': string;
-  'service-message__top-row': string;
-  'service-message__top-row--container': string;
-  'service-message__wrapper': string;
-  'service-message__wrapper__border--alert': string;
-  'service-message__wrapper__border--info': string;
-  'service-message__wrapper__border--success': string;
-  'service-message__wrapper__border--warn': string;
-  'service-message__wrapper__btn': string;
-  'service-message__wrapper__btn--expanded': string;
-  'service-message__wrapper__btn--first': string;
-  'service-message__wrapper__btn--not-first': string;
-  'service-message__wrapper__btn--width': string;
-  'service-message__wrapper--alert': string;
-  'service-message__wrapper--alert--expanded': string;
-  'service-message__wrapper--info': string;
-  'service-message__wrapper--info--expanded': string;
-  'service-message__wrapper--inner': string;
-  'service-message__wrapper--success': string;
-  'service-message__wrapper--success--expanded': string;
-  'service-message__wrapper--warn': string;
-  'service-message__wrapper--warn--expanded': string;
+  'service-message__label-container': string;
+  'service-message__label-container--has-expander': string;
+  'service-message__row': string;
+  'service-message__title': string;
+  'service-message__toggle': string;
+  'service-message--alert': string;
+  'service-message--info': string;
+  'service-message--success': string;
+  'service-message--warn': string;
 };
 
 export type ClassNames = keyof Styles;

package/components/Step/Step.d.ts

@@ -14,6 +14,8 @@ interface StepProps {
     additionalButtons?: React.ReactElement<ButtonProps>[];
     /** Knapp for å avbryte eller fortsette senere. Vises med "borderless" variant. */
     cancelButton?: React.ReactElement<ButtonProps>;
+    /** Knappene vil vises sticky nederst på skjermen dersom innholdet i Step tar mer plass enn vinduet. Default: false  */
+    stickyButtons?: boolean;
 }
 declare const Step: React.FC<StepProps>;
 export default Step;

package/components/Step/Step.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../../src/components/Step/Step.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAI1C,UAAU,SAAS;IACjB,gCAAgC;IAChC,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;IAC3C,uBAAuB;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,2DAA2D;IAC3D,UAAU,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;IAC7C,uDAAuD;IACvD,aAAa,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;IAChD,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,CAAC;IACtD,kFAAkF;IAClF,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;CAChD;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAiC7B,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../../src/components/Step/Step.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAKtC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAI1C,UAAU,SAAS;IACjB,gCAAgC;IAChC,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;IAC3C,uBAAuB;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,2DAA2D;IAC3D,UAAU,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;IAC7C,uDAAuD;IACvD,aAAa,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;IAChD,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,CAAC;IACtD,kFAAkF;IAClF,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;IAC/C,uHAAuH;IACvH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAoE7B,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/components/Step/componentdata.json

@@ -1 +1 @@
-{"props":{"stepper":{"defaultValue":null,"description":"Stepper viser fremdriften","name":"stepper","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"}],"required":false,"type":{"name":"ReactElement<StepperProps, string | JSXElementConstructor<any>>"}},"children":{"defaultValue":null,"description":"Innhold i steget","name":"children","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}},"backButton":{"defaultValue":null,"description":"Knapp for å gå tilbake. Vises med \"outline\" variant.","name":"backButton","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"}],"required":false,"type":{"name":"ReactElement<ButtonProps, string | JSXElementConstructor<any>>"}},"forwardButton":{"defaultValue":null,"description":"Knapp for å gå videre. Vises med \"fill\" variant.","name":"forwardButton","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"}],"required":false,"type":{"name":"ReactElement<ButtonProps, string | JSXElementConstructor<any>>"}},"additionalButtons":{"defaultValue":null,"description":"Ekstra knapper. Valgfritt utseende.","name":"additionalButtons","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"}],"required":false,"type":{"name":"ReactElement<ButtonProps, string | JSXElementConstructor<any>>[]"}},"cancelButton":{"defaultValue":null,"description":"Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant.","name":"cancelButton","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"}],"required":false,"type":{"name":"ReactElement<ButtonProps, string | JSXElementConstructor<any>>"}}}}
+{"props":{"stepper":{"defaultValue":null,"description":"Stepper viser fremdriften","name":"stepper","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"}],"required":false,"type":{"name":"ReactElement<StepperProps, string | JSXElementConstructor<any>>"}},"children":{"defaultValue":null,"description":"Innhold i steget","name":"children","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}},"backButton":{"defaultValue":null,"description":"Knapp for å gå tilbake. Vises med \"outline\" variant.","name":"backButton","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"}],"required":false,"type":{"name":"ReactElement<ButtonProps, string | JSXElementConstructor<any>>"}},"forwardButton":{"defaultValue":null,"description":"Knapp for å gå videre. Vises med \"fill\" variant.","name":"forwardButton","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"}],"required":false,"type":{"name":"ReactElement<ButtonProps, string | JSXElementConstructor<any>>"}},"additionalButtons":{"defaultValue":null,"description":"Ekstra knapper. Valgfritt utseende.","name":"additionalButtons","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"}],"required":false,"type":{"name":"ReactElement<ButtonProps, string | JSXElementConstructor<any>>[]"}},"cancelButton":{"defaultValue":null,"description":"Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant.","name":"cancelButton","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"}],"required":false,"type":{"name":"ReactElement<ButtonProps, string | JSXElementConstructor<any>>"}},"stickyButtons":{"defaultValue":{"value":"false"},"description":"Knappene vil vises sticky nederst på skjermen dersom innholdet i Step tar mer plass enn vinduet. Default: false","name":"stickyButtons","parent":{"fileName":"src/components/Step/Step.tsx","name":"StepProps"},"declarations":[{"fileName":"src/components/Step/Step.tsx","name":"StepProps"}],"required":false,"type":{"name":"boolean"}}}}

package/components/Step/index.js

@@ -1,2 +1,2 @@
-import e from"react";import s from"classnames";import t from"./styles.module.scss";const _=({stepper:n,children:p,backButton:a,forwardButton:l,additionalButtons:m,cancelButton:r})=>e.createElement(e.Fragment,null,n&&e.createElement("div",{className:t.step__stepper},n),e.createElement("div",{className:t.step__content},p),e.createElement("div",{className:t.step__navigation},(a||l)&&e.createElement("div",{className:s(t.step__buttons,t["step__buttons--navigation"])},a&&e.cloneElement(a,{variant:"outline",wrapperClassName:s(t["step__button--back"])}),l&&e.cloneElement(l,{variant:"fill",wrapperClassName:s(t["step__button--forward"])})),m&&e.createElement("div",{className:s(t.step__buttons,t["step__buttons--additional"])},m),r&&e.createElement("div",{className:t.step__buttons},e.cloneElement(r,{variant:"borderless"})))),v=_;export{v as default};
+import t,{useRef as d}from"react";import s from"classnames";import{useSticky as h}from"../../hooks/useSticky.js";import e from"./styles.module.scss";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";const y=({stepper:m,children:f,backButton:n,forwardButton:i,additionalButtons:o,cancelButton:l,stickyButtons:a=!1})=>{const p=d(null),c=d(null),{isOutsideWindow:g,offsetHeight:r,contentWidth:_}=h(p,c,"bottom"),N=a&&g,v=n||i||o||l,E=s(!v&&e["step__content--no-navigation"]),b=s(e.step__navigation,!v&&e["step__navigation--hidden"],a&&e["step__navigation--has-sticky-buttons"],N&&e["step__navigation--is-sticky"]);return t.createElement("div",{className:s(a&&e["step--has-sticky-buttons"])},m&&t.createElement("div",{className:e.step__stepper},m),t.createElement("div",{className:E,ref:p,style:{paddingBottom:a&&r?`${r}px`:void 0}},f),t.createElement("div",{className:b,ref:c,style:{width:a&&_?`${_}px`:void 0}},(n||i)&&t.createElement("div",{className:s(e.step__buttons,e["step__buttons--navigation"])},n&&t.cloneElement(n,{variant:"outline",wrapperClassName:s(e["step__button--back"])}),i&&t.cloneElement(i,{variant:"fill",wrapperClassName:s(e["step__button--forward"])})),o&&t.createElement("div",{className:s(e.step__buttons,e["step__buttons--additional"])},o),l&&t.createElement("div",{className:e.step__buttons},t.cloneElement(l,{variant:"borderless"}))))},w=y;export{w as default};
 //# sourceMappingURL=index.js.map

package/components/Step/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Step/Step.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { ButtonProps } from '../Button';\nimport { StepperProps } from '../Stepper';\n\nimport styles from './styles.module.scss';\n\ninterface StepProps {\n  /** Stepper viser fremdriften */\n  stepper?: React.ReactElement<StepperProps>;\n  /** Innhold i steget */\n  children: React.ReactNode;\n  /** Knapp for å gå tilbake. Vises med \"outline\" variant. */\n  backButton?: React.ReactElement<ButtonProps>;\n  /** Knapp for å gå videre. Vises med \"fill\" variant. */\n  forwardButton?: React.ReactElement<ButtonProps>;\n  /** Ekstra knapper. Valgfritt utseende. */\n  additionalButtons?: React.ReactElement<ButtonProps>[];\n  /** Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant. */\n  cancelButton?: React.ReactElement<ButtonProps>;\n}\n\nconst Step: React.FC<StepProps> = ({ stepper, children, backButton, forwardButton, additionalButtons, cancelButton }) => {\n  return (\n    <>\n      {stepper && <div className={styles.step__stepper}>{stepper}</div>}\n      <div className={styles.step__content}>{children}</div>\n      <div className={styles.step__navigation}>\n        {(backButton || forwardButton) && (\n          <div className={classNames(styles.step__buttons, styles['step__buttons--navigation'])}>\n            {backButton &&\n              React.cloneElement(backButton, {\n                variant: 'outline',\n                wrapperClassName: classNames(styles['step__button--back']),\n              })}\n            {forwardButton &&\n              React.cloneElement(forwardButton, {\n                variant: 'fill',\n                wrapperClassName: classNames(styles['step__button--forward']),\n              })}\n          </div>\n        )}\n        {additionalButtons && (\n          <div className={classNames(styles.step__buttons, styles['step__buttons--additional'])}>{additionalButtons}</div>\n        )}\n        {cancelButton && (\n          <div className={styles.step__buttons}>\n            {React.cloneElement(cancelButton, {\n              variant: 'borderless',\n            })}\n          </div>\n        )}\n      </div>\n    </>\n  );\n};\n\nexport default Step;\n"],"names":["Step","stepper","children","backButton","forwardButton","additionalButtons","cancelButton","React","styles","classNames","Step$1"],"mappings":"mFAwBA,MAAMA,EAA4B,CAAC,CAAE,QAAAC,EAAS,SAAAC,EAAU,WAAAC,EAAY,cAAAC,EAAe,kBAAAC,EAAmB,aAAAC,qCAG/FL,GAAWM,EAAA,cAAC,MAAI,CAAA,UAAWC,EAAO,eAAgBP,CAAQ,EAC3DM,EAAA,cAAC,OAAI,UAAWC,EAAO,aAAgB,EAAAN,CAAS,EAC/CK,EAAA,cAAA,MAAA,CAAI,UAAWC,EAAO,mBACnBL,GAAcC,IACbG,EAAA,cAAA,MAAA,CAAI,UAAWE,EAAWD,EAAO,cAAeA,EAAO,2BAA2B,CAAC,CAAA,EACjFL,GACCI,EAAM,aAAaJ,EAAY,CAC7B,QAAS,UACT,iBAAkBM,EAAWD,EAAO,oBAAoB,CAAC,CAC1D,CAAA,EACFJ,GACCG,EAAM,aAAaH,EAAe,CAChC,QAAS,OACT,iBAAkBK,EAAWD,EAAO,uBAAuB,CAAC,CAC7D,CAAA,CACL,EAEDH,GACCE,EAAA,cAAC,OAAI,UAAWE,EAAWD,EAAO,cAAeA,EAAO,2BAA2B,CAAC,GAAIH,CAAkB,EAE3GC,GACEC,EAAA,cAAA,MAAA,CAAI,UAAWC,EAAO,aAAA,EACpBD,EAAM,aAAaD,EAAc,CAChC,QAAS,YAAA,CACV,CACH,CAEJ,CACF,EAIJI,EAAeV"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Step/Step.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useSticky } from '../../hooks/useSticky';\nimport { ButtonProps } from '../Button';\nimport { StepperProps } from '../Stepper';\n\nimport styles from './styles.module.scss';\n\ninterface StepProps {\n  /** Stepper viser fremdriften */\n  stepper?: React.ReactElement<StepperProps>;\n  /** Innhold i steget */\n  children: React.ReactNode;\n  /** Knapp for å gå tilbake. Vises med \"outline\" variant. */\n  backButton?: React.ReactElement<ButtonProps>;\n  /** Knapp for å gå videre. Vises med \"fill\" variant. */\n  forwardButton?: React.ReactElement<ButtonProps>;\n  /** Ekstra knapper. Valgfritt utseende. */\n  additionalButtons?: React.ReactElement<ButtonProps>[];\n  /** Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant. */\n  cancelButton?: React.ReactElement<ButtonProps>;\n  /** Knappene vil vises sticky nederst på skjermen dersom innholdet i Step tar mer plass enn vinduet. Default: false  */\n  stickyButtons?: boolean;\n}\n\nconst Step: React.FC<StepProps> = ({\n  stepper,\n  children,\n  backButton,\n  forwardButton,\n  additionalButtons,\n  cancelButton,\n  stickyButtons = false,\n}) => {\n  const contentRef = useRef<HTMLDivElement>(null);\n  const navigationRef = useRef<HTMLDivElement>(null);\n  const { isOutsideWindow, offsetHeight, contentWidth } = useSticky(contentRef, navigationRef, 'bottom');\n\n  const isSticky = stickyButtons && isOutsideWindow;\n  const hasNavigation = backButton || forwardButton || additionalButtons || cancelButton;\n\n  const contentClasses = classNames(!hasNavigation && styles['step__content--no-navigation']);\n  const navigationClasses = classNames(\n    styles.step__navigation,\n    !hasNavigation && styles['step__navigation--hidden'],\n    stickyButtons && styles['step__navigation--has-sticky-buttons'],\n    isSticky && styles['step__navigation--is-sticky']\n  );\n\n  return (\n    <div className={classNames(stickyButtons && styles['step--has-sticky-buttons'])}>\n      {stepper && <div className={styles.step__stepper}>{stepper}</div>}\n      <div\n        className={contentClasses}\n        ref={contentRef}\n        style={{ paddingBottom: stickyButtons && offsetHeight ? `${offsetHeight}px` : undefined }}\n      >\n        {children}\n      </div>\n      <div\n        className={navigationClasses}\n        ref={navigationRef}\n        style={{\n          width: stickyButtons && contentWidth ? `${contentWidth}px` : undefined,\n        }}\n      >\n        {(backButton || forwardButton) && (\n          <div className={classNames(styles.step__buttons, styles['step__buttons--navigation'])}>\n            {backButton &&\n              React.cloneElement(backButton, {\n                variant: 'outline',\n                wrapperClassName: classNames(styles['step__button--back']),\n              })}\n            {forwardButton &&\n              React.cloneElement(forwardButton, {\n                variant: 'fill',\n                wrapperClassName: classNames(styles['step__button--forward']),\n              })}\n          </div>\n        )}\n        {additionalButtons && (\n          <div className={classNames(styles.step__buttons, styles['step__buttons--additional'])}>{additionalButtons}</div>\n        )}\n        {cancelButton && (\n          <div className={styles.step__buttons}>\n            {React.cloneElement(cancelButton, {\n              variant: 'borderless',\n            })}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Step;\n"],"names":["Step","stepper","children","backButton","forwardButton","additionalButtons","cancelButton","stickyButtons","contentRef","useRef","navigationRef","isOutsideWindow","offsetHeight","contentWidth","useSticky","isSticky","hasNavigation","contentClasses","classNames","styles","navigationClasses","React","Step$1"],"mappings":"2NA2BA,MAAMA,EAA4B,CAAC,CACjC,QAAAC,EACA,SAAAC,EACA,WAAAC,EACA,cAAAC,EACA,kBAAAC,EACA,aAAAC,EACA,cAAAC,EAAgB,EAClB,IAAM,CACE,MAAAC,EAAaC,EAAuB,IAAI,EACxCC,EAAgBD,EAAuB,IAAI,EAC3C,CAAE,gBAAAE,EAAiB,aAAAC,EAAc,aAAAC,CAAA,EAAiBC,EAAUN,EAAYE,EAAe,QAAQ,EAE/FK,EAAWR,GAAiBI,EAC5BK,EAAgBb,GAAcC,GAAiBC,GAAqBC,EAEpEW,EAAiBC,EAAW,CAACF,GAAiBG,EAAO,8BAA8B,CAAC,EACpFC,EAAoBF,EACxBC,EAAO,iBACP,CAACH,GAAiBG,EAAO,0BAA0B,EACnDZ,GAAiBY,EAAO,sCAAsC,EAC9DJ,GAAYI,EAAO,6BAA6B,CAAA,EAGlD,uBACG,MAAI,CAAA,UAAWD,EAAWX,GAAiBY,EAAO,0BAA0B,CAAC,CAC3E,EAAAlB,mBAAY,MAAI,CAAA,UAAWkB,EAAO,eAAgBlB,CAAQ,EAC3DoB,EAAA,cAAC,MAAA,CACC,UAAWJ,EACX,IAAKT,EACL,MAAO,CAAE,cAAeD,GAAiBK,EAAe,GAAGA,MAAmB,MAAU,CAAA,EAEvFV,CAEH,EAAAmB,EAAA,cAAC,MAAA,CACC,UAAWD,EACX,IAAKV,EACL,MAAO,CACL,MAAOH,GAAiBM,EAAe,GAAGA,MAAmB,MAC/D,CAAA,GAEEV,GAAcC,IACbiB,EAAA,cAAA,MAAA,CAAI,UAAWH,EAAWC,EAAO,cAAeA,EAAO,2BAA2B,CAAC,CAAA,EACjFhB,GACCkB,EAAM,aAAalB,EAAY,CAC7B,QAAS,UACT,iBAAkBe,EAAWC,EAAO,oBAAoB,CAAC,CAC1D,CAAA,EACFf,GACCiB,EAAM,aAAajB,EAAe,CAChC,QAAS,OACT,iBAAkBc,EAAWC,EAAO,uBAAuB,CAAC,CAAA,CAC7D,CACL,EAEDd,GACEgB,EAAA,cAAA,MAAA,CAAI,UAAWH,EAAWC,EAAO,cAAeA,EAAO,2BAA2B,CAAC,CAAA,EAAId,CAAkB,EAE3GC,mBACE,MAAI,CAAA,UAAWa,EAAO,aACpB,EAAAE,EAAM,aAAaf,EAAc,CAChC,QAAS,YAAA,CACV,CACH,CAAA,CAGN,CAEJ,EAEAgB,EAAetB"}

package/components/Step/styles.module.scss

@@ -6,19 +6,41 @@
 @import '../../scss/screen-reader';
 
 .step {
+  &--has-sticky-buttons {
+    position: relative;
+  }
+
   &__stepper {
     margin-bottom: getSpacer(m);
   }
 
   &__content {
-    margin-bottom: getSpacer(m);
+    &--no-navigation {
+      margin-bottom: getSpacer(m);
+    }
   }
 
   &__navigation {
+    padding-top: getSpacer(m);
+    padding-bottom: getSpacer(s);
     display: flex;
     flex-wrap: wrap;
     column-gap: getSpacer(l);
     row-gap: getSpacer(m);
+
+    &--hidden {
+      display: none;
+    }
+
+    &--has-sticky-buttons {
+      position: absolute;
+      bottom: 0;
+    }
+
+    &--is-sticky {
+      background-color: $white;
+      position: fixed;
+    }
   }
 
   &__buttons {

package/components/Step/styles.module.scss.d.ts

@@ -3,9 +3,13 @@ export type Styles = {
   'step__button--forward': string;
   step__buttons: string;
   'step__buttons--additional': string;
-  step__content: string;
+  'step__content--no-navigation': string;
   step__navigation: string;
+  'step__navigation--has-sticky-buttons': string;
+  'step__navigation--hidden': string;
+  'step__navigation--is-sticky': string;
   step__stepper: string;
+  'step--has-sticky-buttons': string;
 };
 
 export type ClassNames = keyof Styles;