@helsenorge/designsystem-react 12.7.0 → 13.0.0-beta.1

package/components/PanelOld/styles.module.scss

@@ -1,433 +0,0 @@
-@use 'sass:map';
-@use '../../scss/spacers' as spacers;
-@use '../../scss/palette' as palette;
-@use '../../scss/font-settings' as font-settings;
-@use '../../scss/breakpoints' as breakpoints;
-
-@mixin panel-padding {
-  padding: spacers.getSpacer(s);
-
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-    padding: spacers.getSpacer(l) spacers.getSpacer(m) spacers.getSpacer(l) spacers.getSpacer(l);
-  }
-}
-
-@mixin panel-padding-icon {
-  padding: spacers.getSpacer(m) spacers.getSpacer(s) spacers.getSpacer(l);
-
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-    padding: spacers.getSpacer(m) spacers.getSpacer(m) spacers.getSpacer(l);
-  }
-}
-
-@mixin hover-and-focus-effects($background-color, $box-shadow-color) {
-  &:hover {
-    background-color: $background-color;
-  }
-
-  &:focus {
-    box-shadow: inset 0 0 0 3px $box-shadow-color;
-  }
-}
-
-$layout-sm-gap: spacers.getSpacer(s);
-$layout-md-col-gap: spacers.getSpacer(m);
-
-.panel-wrapper {
-  width: 100%;
-  outline: none;
-}
-
-.panel {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  outline: none;
-  position: relative;
-  width: 100%;
-  box-sizing: border-box;
-
-  @include panel-padding;
-
-  &__layout-1,
-  &__layout-2,
-  &__layout-3 {
-    display: grid;
-    grid-auto-rows: auto;
-    grid-template-columns: 1fr;
-    gap: $layout-sm-gap $layout-sm-gap;
-    width: 100%;
-
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      column-gap: $layout-md-col-gap;
-    }
-  }
-
-  &__layout-1 {
-    &--with-icon {
-      grid-template-columns: auto 1fr;
-    }
-
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      grid-template-rows: auto auto;
-      grid-template-columns: 1fr auto;
-
-      &--with-icon {
-        grid-template-columns: auto 1fr auto;
-      }
-
-      &__content-a {
-        grid-column: span 2;
-      }
-    }
-  }
-
-  &__layout-2 {
-    &--with-icon {
-      grid-template-columns: auto 1fr;
-    }
-
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      grid-template-rows: auto auto;
-      grid-template-columns: 1fr auto;
-
-      &--with-icon {
-        grid-template-columns: auto 1fr auto;
-      }
-
-      &__content-a {
-        grid-row: span 2;
-      }
-
-      &__last-column {
-        max-width: 200px;
-      }
-    }
-
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
-      grid-template-columns: minmax(auto, 760px) auto;
-
-      &--with-icon {
-        grid-template-columns: auto minmax(auto, 760px) auto;
-      }
-    }
-  }
-
-  &__layout-3 {
-    &--with-icon {
-      grid-template-columns: auto 1fr;
-    }
-
-    &__last-column {
-      display: grid;
-      row-gap: $layout-sm-gap;
-    }
-
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
-      grid-template-rows: auto;
-
-      &--a {
-        grid-template-columns: 3fr 2fr;
-      }
-      &--a#{&}--with-icon {
-        grid-template-columns: auto 3fr 2fr;
-      }
-
-      &--b {
-        grid-template-columns: 4.5fr 5.5fr;
-      }
-      &--b#{&}--with-icon {
-        grid-template-columns: auto 4.5fr 5.5fr;
-      }
-
-      &--c {
-        grid-template-columns: 3.5fr 6.5fr;
-      }
-      &--c#{&}--with-icon {
-        grid-template-columns: auto 3.5fr 6.5fr;
-      }
-
-      &__last-column {
-        grid-template-columns: 1fr auto;
-        column-gap: $layout-md-col-gap;
-
-        &__content-b {
-          flex: 1;
-        }
-      }
-    }
-  }
-
-  &--with-icon {
-    @include panel-padding-icon;
-  }
-
-  &__icon {
-    grid-row: span 3;
-
-    &--no-content {
-      grid-row: span 2;
-    }
-
-    &--layout-1,
-    &--layout-2 {
-      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-        grid-row: span 2;
-        padding-right: spacers.getSpacer(2xs);
-      }
-    }
-
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
-      grid-row: span 2;
-      padding-right: spacers.getSpacer(2xs);
-    }
-
-    &--layout-3 {
-      grid-row: span 2;
-
-      @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
-        grid-row: span 1;
-      }
-    }
-  }
-
-  &__badge {
-    display: inline-block;
-    vertical-align: text-bottom;
-    flex-shrink: 0;
-  }
-
-  &__btn-container {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-
-    &--no-content-b {
-      @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
-        flex-direction: row;
-        grid-column: span 2;
-      }
-    }
-
-    &--no-button {
-      flex-direction: column;
-    }
-  }
-
-  &__details-btn {
-    align-self: flex-start;
-
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
-      align-self: flex-end;
-      margin-left: auto;
-    }
-  }
-
-  &__expand {
-    position: unset;
-
-    &::after {
-      inset: 0;
-      content: '';
-      position: absolute;
-    }
-  }
-
-  &--fill {
-    background-color: palette.$neutral50;
-  }
-
-  &--fill#{&}--selected {
-    background-color: palette.$neutral100;
-  }
-
-  &--fill#{&}--selected#{&}--clickable {
-    &:hover {
-      background-color: palette.$neutral200;
-    }
-  }
-
-  &--white {
-    background-color: palette.$white;
-  }
-
-  &--fill#{&}--clickable,
-  &--white#{&}--clickable {
-    @include hover-and-focus-effects(palette.$neutral100, palette.$neutral600);
-  }
-
-  &--white#{&}--selected {
-    box-shadow: inset 0 0 0 6px palette.$neutral100;
-  }
-
-  &--stroke {
-    border: 6px solid palette.$neutral100;
-  }
-
-  &--stroke#{&}--clickable {
-    @include hover-and-focus-effects(palette.$neutral50, palette.$neutral100);
-
-    &:focus {
-      border-color: palette.$neutral600;
-    }
-  }
-
-  &--line {
-    background-color: palette.$white;
-    border-color: palette.$neutral500;
-    border-top: 1px solid;
-    border-bottom: 1px solid;
-  }
-
-  &--line#{&}--clickable {
-    @include hover-and-focus-effects(palette.$neutral50, palette.$neutral600);
-  }
-
-  &--line#{&}--selected {
-    background-color: palette.$neutral50;
-    border-bottom: 0;
-  }
-
-  &--line#{&}--selected#{&}--clickable {
-    &:hover {
-      background-color: palette.$neutral100;
-    }
-  }
-
-  &--no-top-border#{&}--line {
-    border-top: none;
-  }
-
-  &--button {
-    cursor: pointer;
-  }
-
-  &--status {
-    &::before {
-      content: '';
-      position: absolute;
-      border-left: 0.375rem;
-      top: 0;
-      left: 0;
-      height: 100%;
-      border-left-style: solid;
-    }
-  }
-
-  &--new {
-    &::before {
-      border-left-color: palette.$blueberry600;
-    }
-  }
-
-  &--draft {
-    &::before {
-      border-left-style: dashed;
-      border-left-color: palette.$neutral500;
-    }
-  }
-
-  &--error {
-    &::before {
-      border-left-color: palette.$cherry500;
-    }
-  }
-}
-
-.title-container {
-  padding-bottom: spacers.getSpacer(s);
-
-  &--no-content-a {
-    padding-bottom: 0;
-  }
-
-  &__title {
-    vertical-align: top;
-    display: inline;
-
-    &--badge {
-      padding-right: spacers.getSpacer(2xs);
-    }
-  }
-
-  @media (max-width: map.get(breakpoints.$grid-max-breakpoints, xs)) {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-}
-
-.panel-details {
-  background-color: palette.$neutral50;
-  display: none;
-
-  @include panel-padding;
-
-  @media print {
-    display: flex;
-    flex-direction: column;
-  }
-
-  &--open {
-    display: flex;
-    flex-direction: column;
-  }
-
-  &--line {
-    background: palette.$white;
-    border-bottom: 1px solid palette.$neutral500;
-  }
-
-  &--white {
-    background: palette.$white;
-  }
-}
-
-.status-message {
-  font-size: font-settings.$font-size-sm;
-  color: palette.$cherry500;
-  display: flex;
-  margin-bottom: spacers.getSpacer(2xs) * -1;
-  grid-column: 1 / -1;
-
-  span {
-    padding-left: 5px;
-    align-self: center;
-    font-size: font-settings.$font-size-sm;
-  }
-
-  &--new {
-    color: palette.$blueberry800;
-  }
-}
-
-.header-container {
-  grid-column: 1 / -1;
-}
-
-.datetime-container {
-  display: flex;
-  flex-direction: column;
-
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
-    padding-top: spacers.getSpacer(xs);
-    flex-direction: row;
-  }
-
-  &__icon {
-    display: flex;
-    align-items: center;
-    padding-bottom: spacers.getSpacer(2xs);
-
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
-      padding-top: 0;
-      padding-right: spacers.getSpacer(m);
-      padding-bottom: 0;
-    }
-
-    span {
-      padding-left: spacers.getSpacer(2xs);
-      font-size: font-settings.$font-size-sm;
-    }
-  }
-}

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

@@ -1,61 +0,0 @@
-export type Styles = {
-  'datetime-container': string;
-  'datetime-container__icon': string;
-  'header-container': string;
-  panel: string;
-  panel__badge: string;
-  'panel__btn-container': string;
-  'panel__btn-container--no-button': string;
-  'panel__btn-container--no-content-b': string;
-  'panel__details-btn': string;
-  panel__expand: string;
-  panel__icon: string;
-  'panel__icon--layout-1': string;
-  'panel__icon--layout-2': string;
-  'panel__icon--layout-3': string;
-  'panel__icon--no-content': string;
-  'panel__layout-1': string;
-  'panel__layout-1__content-a': string;
-  'panel__layout-1--with-icon': string;
-  'panel__layout-2': string;
-  'panel__layout-2__content-a': string;
-  'panel__layout-2__last-column': string;
-  'panel__layout-2--with-icon': string;
-  'panel__layout-3': string;
-  'panel__layout-3__last-column': string;
-  'panel__layout-3__last-column__content-b': string;
-  'panel__layout-3--a': string;
-  'panel__layout-3--b': string;
-  'panel__layout-3--c': string;
-  'panel__layout-3--with-icon': string;
-  'panel--button': string;
-  'panel--clickable': string;
-  'panel--draft': string;
-  'panel--error': string;
-  'panel--fill': string;
-  'panel--line': string;
-  'panel--new': string;
-  'panel--no-top-border': string;
-  'panel--selected': string;
-  'panel--status': string;
-  'panel--stroke': string;
-  'panel--white': string;
-  'panel--with-icon': string;
-  'panel-details': string;
-  'panel-details--line': string;
-  'panel-details--open': string;
-  'panel-details--white': string;
-  'panel-wrapper': string;
-  'status-message': string;
-  'status-message--new': string;
-  'title-container': string;
-  'title-container__title': string;
-  'title-container__title--badge': string;
-  'title-container--no-content-a': string;
-};
-
-export type ClassNames = keyof Styles;
-
-declare const styles: Styles;
-
-export default styles;

package/hooks/useHover.d.ts

@@ -1,10 +0,0 @@
-import { RefObject } from 'react';
-/**
- * Få vite når et element hovres over eller mottar fokus.
- * @param ref Element som skal observeres
- * @returns Objekt med ref og om objekt er hovered/focused
- */
-export declare const useHover: <T extends HTMLElement | SVGElement>(ref?: RefObject<T>, includeFocus?: boolean) => {
-    hoverRef: RefObject<T>;
-    isHovered: boolean;
-};

package/hooks/useHover.js

@@ -1,9 +0,0 @@
-import { usePseudoClasses } from "./usePseudoClasses.js";
-const useHover = (ref, includeFocus = true) => {
-  const { refObject, isHovered, isFocused } = usePseudoClasses(ref);
-  return { hoverRef: refObject, isHovered: isHovered || includeFocus && isFocused };
-};
-export {
-  useHover
-};
-//# sourceMappingURL=useHover.js.map

package/hooks/useHover.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useHover.js","sources":["../../src/hooks/useHover.ts"],"sourcesContent":["import { RefObject } from 'react';\n\nimport { usePseudoClasses } from './usePseudoClasses';\n\n/**\n * Få vite når et element hovres over eller mottar fokus.\n * @param ref Element som skal observeres\n * @returns Objekt med ref og om objekt er hovered/focused\n */\nexport const useHover = <T extends HTMLElement | SVGElement>(\n  ref?: RefObject<T>,\n  includeFocus: boolean = true\n): { hoverRef: RefObject<T>; isHovered: boolean } => {\n  const { refObject, isHovered, isFocused } = usePseudoClasses(ref);\n\n  return { hoverRef: refObject, isHovered: isHovered || (includeFocus && isFocused) };\n};\n"],"names":[],"mappings":";AASO,MAAM,WAAW,CACtB,KACA,eAAwB,SAC2B;AACnD,QAAM,EAAE,WAAW,WAAW,UAAA,IAAc,iBAAiB,GAAG;AAEhE,SAAO,EAAE,UAAU,WAAW,WAAW,aAAc,gBAAgB,UAAA;AACzE;"}

package/hooks/useUuid.d.ts

@@ -1,6 +0,0 @@
-/**
- * Returner unik uuid som ikke endrer seg for hver render
- * @param initial id som vil overstyre id fra uuid-utility
- * @returns uuid-string
- */
-export declare const useUuid: (initial?: string) => string;

package/hooks/useUuid.js

@@ -1,10 +0,0 @@
-import { useState } from "react";
-import { u as uuid } from "../uuid.js";
-const useUuid = (initial) => {
-  const [id] = useState(initial || uuid());
-  return id;
-};
-export {
-  useUuid
-};
-//# sourceMappingURL=useUuid.js.map

package/hooks/useUuid.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useUuid.js","sources":["../../src/hooks/useUuid.ts"],"sourcesContent":["import { useState } from 'react';\n\nimport { uuid } from '../utils/uuid';\n\n/**\n * Returner unik uuid som ikke endrer seg for hver render\n * @param initial id som vil overstyre id fra uuid-utility\n * @returns uuid-string\n */\nexport const useUuid = (initial?: string): string => {\n  const [id] = useState(initial || uuid());\n\n  return id;\n};\n"],"names":[],"mappings":";;AASO,MAAM,UAAU,CAAC,YAA6B;AACnD,QAAM,CAAC,EAAE,IAAI,SAAS,WAAW,MAAM;AAEvC,SAAO;AACT;"}