@helsenorge/designsystem-react 13.0.0-beta.2 → 13.0.0-beta.4

package/components/DropdownOld/styles.module.scss

@@ -0,0 +1,230 @@
+@use 'sass:map';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/palette' as palette;
+@use '../../scss/font-settings' as font-settings;
+@use '../../scss/screen-reader' as *;
+@use '../../scss/breakpoints' as breakpoints;
+
+.dropdown {
+  position: relative;
+  width: fit-content;
+
+  &__label {
+    @include sr-only;
+  }
+
+  &__toggle {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    border-radius: 0;
+    border-width: 2px;
+    border-style: solid;
+    padding: 0 spacers.getSpacer(3xs) 0 spacers.getSpacer(s);
+    font-family: inherit;
+    font-size: font-settings.$font-size-sm;
+    line-height: 1.3rem; // Custom fordi teksten skal henge bedre sammen om den går over to linjer
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      padding: spacers.getSpacer(3xs) spacers.getSpacer(3xs) spacers.getSpacer(3xs) spacers.getSpacer(s);
+      font-size: font-settings.$font-size-md;
+      line-height: 1.5rem;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:disabled {
+      cursor: initial;
+      color: palette.$neutral700;
+      background-color: transparent;
+      border-color: palette.$neutral600;
+      border-style: dashed;
+    }
+
+    &--on-white,
+    &--on-grey {
+      border-color: palette.$neutral700;
+      background-color: palette.$white;
+
+      &:hover {
+        background-color: palette.$neutral50;
+        box-shadow: 0 0 0 1px palette.$neutral700;
+      }
+
+      &:focus {
+        border-color: palette.$black;
+        box-shadow: 0 0 0 1px palette.$black;
+      }
+    }
+
+    &--on-blueberry {
+      border-color: palette.$blueberry500;
+      background-color: palette.$white;
+
+      &:hover {
+        background-color: palette.$blueberry50;
+        box-shadow: 0 0 0 1px palette.$blueberry500;
+      }
+
+      &:focus {
+        border-color: palette.$black;
+        box-shadow: 0 0 0 1px palette.$black;
+      }
+    }
+
+    &--on-cherry {
+      border-color: palette.$cherry500;
+      background-color: palette.$white;
+
+      &:hover {
+        background-color: palette.$cherry50;
+        box-shadow: 0 0 0 1px palette.$cherry500;
+      }
+
+      &:focus {
+        border-color: palette.$black;
+        box-shadow: 0 0 0 1px palette.$black;
+      }
+    }
+
+    &--open#{&}--on-white,
+    &--open#{&}--on-grey {
+      background-color: palette.$neutral50;
+
+      &:hover {
+        background-color: palette.$white;
+      }
+    }
+
+    &--open#{&}--on-blueberry {
+      background-color: palette.$blueberry50;
+
+      &:hover {
+        background-color: palette.$white;
+      }
+    }
+
+    &--open#{&}--on-cherry {
+      background-color: palette.$cherry50;
+
+      &:hover {
+        background-color: palette.$white;
+      }
+    }
+
+    &--transparent {
+      background-color: transparent;
+    }
+
+    &--transparent#{&}--on-grey {
+      &:hover {
+        background-color: palette.$neutral100;
+      }
+    }
+
+    &--transparent#{&}--on-blueberry {
+      &:hover {
+        background-color: palette.$blueberry100;
+      }
+    }
+
+    &--transparent#{&}--on-cherry {
+      &:hover {
+        background-color: palette.$cherry100;
+      }
+    }
+
+    &--transparent#{&}--open#{&}--on-grey {
+      background-color: palette.$neutral100;
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
+    &--transparent#{&}--open#{&}--on-blueberry {
+      background-color: palette.$blueberry100;
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
+    &--transparent#{&}--open#{&}--on-cherry {
+      background-color: palette.$cherry100;
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
+    &--fluid {
+      width: 100%;
+    }
+
+    &__label {
+      padding: spacers.getSpacer(3xs) 0;
+
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+        padding: spacers.getSpacer(2xs) 0;
+      }
+    }
+  }
+
+  &__icon {
+    margin-left: spacers.getSpacer(2xs);
+  }
+
+  &__content {
+    display: none;
+    position: absolute;
+    background-color: palette.$white;
+    margin-top: spacers.getSpacer(2xs);
+    box-shadow: 0 0 0 2px palette.$blueberry500;
+    z-index: 1;
+
+    &--open {
+      display: block;
+    }
+  }
+
+  &__options {
+    overflow: hidden auto;
+    max-height: 384px;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      max-height: 464px;
+    }
+  }
+
+  &__close {
+    padding: spacers.getSpacer(s);
+  }
+
+  &__input {
+    border-bottom: 1px solid palette.$neutral300;
+    padding: 0 spacers.getSpacer(s);
+
+    &[role='menuitemradio'] {
+      padding: 0 spacers.getSpacer(s);
+    }
+
+    &[role='menuitemcheckbox'] {
+      padding: 1px spacers.getSpacer(s) spacers.getSpacer(2xs) spacers.getSpacer(s);
+    }
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      padding: spacers.getSpacer(s);
+    }
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+export type Styles = {
+  dropdown: string;
+  dropdown__close: string;
+  dropdown__content: string;
+  'dropdown__content--open': string;
+  dropdown__icon: string;
+  dropdown__input: string;
+  dropdown__label: string;
+  dropdown__options: string;
+  dropdown__toggle: string;
+  dropdown__toggle__label: string;
+  'dropdown__toggle--fluid': string;
+  'dropdown__toggle--on-blueberry': string;
+  'dropdown__toggle--on-cherry': string;
+  'dropdown__toggle--on-grey': string;
+  'dropdown__toggle--on-white': string;
+  'dropdown__toggle--open': string;
+  'dropdown__toggle--transparent': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/Duolist/index.js

@@ -1,8 +1,6 @@
-import { D as Duolist } from "../../Duolist.js";
-import { a } from "../../Duolist.js";
-export {
-  Duolist,
-  a as DuolistGroup,
-  Duolist as default
-};
-//# sourceMappingURL=index.js.map
+import "../../constants2.js";
+import "../../grid.js";
+import "../../useBreakpoint.js";
+import "../../Spacer.js";
+import { n as Duolist, r as DuolistGroup, t as Duolist_default } from "../../Duolist.js";
+export { Duolist, DuolistGroup, Duolist_default as default };

package/components/ElementHeader/ElementHeaderText/index.js

@@ -1,6 +1,13 @@
-import { E as ElementHeaderText } from "../../../ElementHeaderText.js";
-export {
-  ElementHeaderText,
-  ElementHeaderText as default
-};
-//# sourceMappingURL=index.js.map
+import "../../../uuid.js";
+import "../../../environment.js";
+import "../../../constants2.js";
+import "../../../grid.js";
+import "../../../useBreakpoint.js";
+import "../../../Spacer.js";
+import "../../../Duolist.js";
+import "../../../Highlighter.js";
+import { n as ElementHeaderText_default$1, t as ElementHeaderText } from "../../../ElementHeaderText.js";
+var ElementHeaderText_default = ElementHeaderText_default$1;
+export { ElementHeaderText, ElementHeaderText_default as default };
+
+//# sourceMappingURL=index.js.map

package/components/ElementHeader/ElementHeaderText/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/ElementHeader/ElementHeaderText/index.ts"],"sourcesContent":["import ElementHeaderText from './ElementHeaderText';\nexport * from './ElementHeaderText';\nexport default ElementHeaderText;\n"],"mappings":";;;;;;;;;AAEA,IAAA,4BAAe"}

package/components/ElementHeader/StatusDotList/index.js

@@ -1,6 +1,36 @@
-import { S as StatusDotList } from "../../../StatusDotList.js";
-export {
-  StatusDotList,
-  StatusDotList as default
-};
-//# sourceMappingURL=index.js.map
+import "../../../uuid.js";
+import "../../../environment.js";
+import "../../../constants2.js";
+import "../../../usePseudoClasses.js";
+import "../../../grid.js";
+import "../../../palette.js";
+import "../../../spacers.js";
+import "../../../theme.js";
+import "../../../color.js";
+import "../../../spacing.js";
+import "../../../currys.js";
+import "../../../Icon.js";
+import "../../../_rolldown_dynamic_import_helper.js";
+import "../../../useIsServerSide.js";
+import "../../../LazyIcon.js";
+import "../../../useBreakpoint.js";
+import "../../../useElementList.js";
+import "../../../useFocusableElements.js";
+import "../../../useFocusToggle.js";
+import "../../../focus.js";
+import "../../../useFocusTrap.js";
+import "../../../useIntersectionObserver.js";
+import "../../../useIsVisible.js";
+import "../../../debounce.js";
+import "../../../useLayoutEvent.js";
+import "../../../usePrevious.js";
+import "../../../useSize.js";
+import "../../../useResizeObserver.js";
+import "../../../useToggle.js";
+import "../../../useKeyboardEvent.js";
+import "../../../useOutsideEvent.js";
+import "../../../mobile.js";
+import "../../../src.js";
+import "../../../StatusDot.js";
+import { n as StatusDotList, t as StatusDotList_default } from "../../../StatusDotList.js";
+export { StatusDotList, StatusDotList_default as default };

package/components/ElementHeader/index.js

@@ -1,9 +1,53 @@
-import { E as ElementHeader } from "../../ElementHeader.js";
-import { a, m, r } from "../../ElementHeader.js";
-export {
-  a as ElementHeaderRoot,
-  ElementHeader as default,
-  m as mapChildren,
-  r as renderElementHeader
-};
-//# sourceMappingURL=index.js.map
+import "../../uuid.js";
+import "../../environment.js";
+import "../../constants2.js";
+import "../../usePseudoClasses.js";
+import "../../grid.js";
+import "../../palette.js";
+import "../../spacers.js";
+import "../../theme.js";
+import "../../color.js";
+import "../../spacing.js";
+import "../../currys.js";
+import "../../Icon.js";
+import "../../Check.js";
+import "../../Avatar.js";
+import "../../CheckFill.js";
+import "../../ErrorSignFill.js";
+import "../../InfoSignFill.js";
+import "../../TriangleX.js";
+import "../../NotificationBadge.js";
+import "../../Badge.js";
+import "../../_rolldown_dynamic_import_helper.js";
+import "../../useIsServerSide.js";
+import "../../LazyIcon.js";
+import "../../component.js";
+import "../../useBreakpoint.js";
+import "../../Spacer.js";
+import "../../useElementList.js";
+import "../../useFocusableElements.js";
+import "../../useFocusToggle.js";
+import "../../focus.js";
+import "../../useFocusTrap.js";
+import "../../useIntersectionObserver.js";
+import "../../useIsVisible.js";
+import "../../debounce.js";
+import "../../useLayoutEvent.js";
+import "../../usePrevious.js";
+import "../../useSize.js";
+import "../../useResizeObserver.js";
+import "../../useToggle.js";
+import "../../useKeyboardEvent.js";
+import "../../useOutsideEvent.js";
+import "../../mobile.js";
+import "../../src.js";
+import "../../StatusDot.js";
+import "../../Duolist.js";
+import "../../Highlighter.js";
+import "../../ElementHeaderText.js";
+import "../../StatusDotList.js";
+import { i as renderElementHeader, n as ElementHeader_default$1, r as mapChildren, t as ElementHeaderRoot } from "../../ElementHeader.js";
+var ElementHeader_default = ElementHeader_default$1;
+export { ElementHeaderRoot, ElementHeader_default as default, mapChildren, renderElementHeader };
+
+//# sourceMappingURL=index.js.map

package/components/ElementHeader/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/ElementHeader/index.ts"],"sourcesContent":["import ElementHeader from './ElementHeader';\nexport * from './ElementHeader';\nexport default ElementHeader;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAA,wBAAe"}