@helsenorge/designsystem-react 11.0.0-beta.3 → 11.0.0-beta.4

package/components/Panel/styles.module.scss

@@ -0,0 +1,224 @@
+@use 'sass:map';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/breakpoints' as breakpoints;
+@use '../../scss/font-settings' as fonts;
+@use '../Button/styles.module' as button;
+@import '../../scss/supernova/styles/colors.css';
+
+.panel {
+  $panel: &;
+
+  display: flex;
+  flex-flow: column;
+  padding: spacers.getSpacer(s);
+
+  & > *:not(:last-child) {
+    // because of a problem with gap this margin gives space between elements
+    margin-bottom: spacers.getSpacer(2xs);
+  }
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    padding: spacers.getSpacer(m);
+  }
+
+  &--icon {
+    padding-left: calc(3.5rem + spacers.getSpacer(s));
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      padding-left: calc(4rem + spacers.getSpacer(m));
+    }
+  }
+
+  &__pre-container {
+    width: 100%;
+  }
+
+  &__content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-flow: column;
+    gap: spacers.getSpacer(m);
+
+    &__item {
+      width: 100%;
+      height: 100%;
+    }
+
+    &--b-first {
+      .panel__content__item--b {
+        order: -1;
+      }
+    }
+
+    &--horizontal {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+        flex-flow: row;
+      }
+    }
+
+    &--vertical {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+        flex-flow: column;
+      }
+    }
+
+    &--combined {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+        display: grid;
+        grid-template-areas:
+          'contentA contentB'
+          'contentC contentC';
+
+        & .panel__content__item--a {
+          grid-area: contentA;
+        }
+
+        & .panel__content__item--b {
+          grid-area: contentB;
+        }
+
+        & .panel__content__item--c {
+          grid-area: contentC;
+        }
+      }
+    }
+
+    &--bAsRightCol {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+        display: grid;
+        grid-template-areas:
+          'contentA contentB'
+          'contentC contentB';
+
+        & .panel__content__item--a {
+          grid-area: contentA;
+        }
+
+        & .panel__content__item--b {
+          grid-area: contentB;
+        }
+
+        & .panel__content__item--c {
+          grid-area: contentC;
+        }
+      }
+    }
+  }
+
+  &--white {
+    background-color: var(--color-base-background-white);
+  }
+
+  &--neutral {
+    background-color: var(--color-base-background-neutral);
+  }
+
+  &--line {
+    background-color: transparent;
+  }
+
+  &__border {
+    &--outline {
+      &--outer {
+        border: 1px solid var(--core-color-neutral-300);
+      }
+
+      &--inner {
+        border: 8px solid var(--core-color-neutral-100);
+      }
+    }
+
+    &--line {
+      border-top: 1px solid var(--core-color-neutral-600);
+      border-bottom: 1px solid var(--core-color-neutral-600);
+      border-right: none;
+      border-left: none;
+      padding: spacers.getSpacer(xs) 0;
+    }
+
+    &--fill--neutral {
+      border: 1px solid var(--core-color-neutral-300);
+    }
+  }
+
+  &--border {
+    border: 2px solid var(--color-base-background-white);
+  }
+
+  &--status {
+    border-left: 6px;
+    border-left-style: solid;
+    border-left-color: transparent;
+  }
+
+  &--new {
+    border-left-color: var(--core-color-blueberry-500);
+  }
+
+  &--draft {
+    border-left: dotted 6px var(--core-color-neutral-500);
+  }
+
+  &--error {
+    border-left-color: var(--core-color-cherry-500);
+  }
+
+  &__expander {
+    &__border {
+      &--expanded {
+        border-left: 2px solid var(--color-base-border-onlight-emphasized);
+      }
+
+      &--not-expanded {
+        &--white {
+          border-left: 2px solid var(--color-base-background-white);
+        }
+
+        &--neutral {
+          border-left: 2px solid var(--color-base-background-neutral);
+        }
+
+        &--line {
+          border-left: 2px solid transparent;
+        }
+      }
+    }
+
+    &__separator {
+      height: 1px;
+      width: 40px;
+      background-color: var(--color-base-border-onlight);
+    }
+
+    &__content {
+      margin-top: spacers.getSpacer(s);
+    }
+  }
+
+  &__button-bottom {
+    margin-top: spacers.getSpacer(2xs);
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      margin-top: spacers.getSpacer(s);
+    }
+  }
+}
+
+.expander {
+  // This is a copy of the button class in Expander
+  &__button {
+    position: relative;
+    padding-right: getSpacer(s);
+    text-align: left;
+    width: fit-content;
+
+    &--expanded {
+      @include button.outline-borderless-hover;
+    }
+  }
+
+  &__button &__button__text {
+    @include button.outline-borderless-text-hover;
+  }
+}

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

@@ -0,0 +1,71 @@
+export type Styles = {
+  button: string;
+  button__arrow: string;
+  'button__arrow--both-icons': string;
+  'button__both-icons': string;
+  'button__left-icon': string;
+  'button__only-icon': string;
+  'button__right-icon': string;
+  'button__right-unicode-arrow': string;
+  button__text: string;
+  'button__text--centered': string;
+  'button__text--ellipsis': string;
+  'button--arrow': string;
+  'button--arrow--both-icons': string;
+  'button--borderless': string;
+  'button--both-icons': string;
+  'button--destructive': string;
+  'button--large': string;
+  'button--left-icon': string;
+  'button--normal': string;
+  'button--on-dark': string;
+  'button--only-icon': string;
+  'button--outline': string;
+  'button--right-icon': string;
+  'button-wrapper': string;
+  'button-wrapper--fluid': string;
+  diagonal: string;
+  diagonal__line: string;
+  'diagonal--on-dark': string;
+  expander__button: string;
+  expander__button__text: string;
+  'expander__button--expanded': string;
+  panel: string;
+  'panel__border--fill--neutral': string;
+  'panel__border--line': string;
+  'panel__border--outline--inner': string;
+  'panel__border--outline--outer': string;
+  'panel__button-bottom': string;
+  panel__content: string;
+  panel__content__item: string;
+  'panel__content__item--a': string;
+  'panel__content__item--b': string;
+  'panel__content__item--c': string;
+  'panel__content--b-first': string;
+  'panel__content--bAsRightCol': string;
+  'panel__content--combined': string;
+  'panel__content--horizontal': string;
+  'panel__content--vertical': string;
+  'panel__expander__border--expanded': string;
+  'panel__expander__border--not-expanded--line': string;
+  'panel__expander__border--not-expanded--neutral': string;
+  'panel__expander__border--not-expanded--white': string;
+  panel__expander__content: string;
+  panel__expander__separator: string;
+  'panel__pre-container': string;
+  'panel--border': string;
+  'panel--draft': string;
+  'panel--error': string;
+  'panel--icon': string;
+  'panel--line': string;
+  'panel--neutral': string;
+  'panel--new': string;
+  'panel--status': string;
+  'panel--white': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/PanelList/PanelList.d.ts

@@ -1,10 +1,10 @@
 import { default as React } from 'react';
-import { PanelOldVariant } from '../PanelOld';
+import { PanelVariant } from '../Panel/Panel';
 export interface PanelListProps {
     /** Panels to render inside the PanelList */
     children?: React.ReactNode;
     /** Changes the visual representation of the panel. Default: fill */
-    variant?: keyof typeof PanelOldVariant;
+    variant?: PanelVariant;
     /** Sets the data-testid attribute. */
     testId?: string;
 }

package/components/PanelList/index.js

@@ -2,17 +2,25 @@ import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import classNames from "classnames";
 import { AnalyticsId } from "../../constants.js";
-import { b as PanelOldVariant, P as PanelOld } from "../../PanelOld.js";
+import { b as PanelVariant, P as Panel } from "../../Panel.js";
 import styles from "./styles.module.scss";
-const isPanelComponent = (element) => React__default.isValidElement(element) && element.type === PanelOld;
+const isPanelComponent = (element) => React__default.isValidElement(element) && element.type === Panel;
 const PanelList = React__default.forwardRef(function BadgeForwardedRef(props, ref) {
-  const { testId, children, variant = PanelOldVariant.fill } = props;
-  const renderPanel = (panel, firstChild) => React__default.cloneElement(panel, {
+  const { testId, children, variant = PanelVariant.fill } = props;
+  const renderPanel = (panel) => React__default.cloneElement(panel, {
     variant,
-    noTopBorder: variant === PanelOldVariant.line && !firstChild,
-    className: classNames(panel.props.className, variant !== PanelOldVariant.line && styles["panel-list__panel"])
+    className: classNames(panel.props.className, styles[`panel-list__panel--${variant}`])
   });
-  return /* @__PURE__ */ jsx("div", { ref, "data-testid": testId, "data-analyticsid": AnalyticsId.PanelList, children: React__default.Children.map(children, (child, index) => isPanelComponent(child) ? renderPanel(child, index === 0) : child) });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-testid": testId,
+      "data-analyticsid": AnalyticsId.PanelList,
+      className: classNames({ [styles["panel-list--outline"]]: variant === PanelVariant.outline }),
+      children: React__default.Children.map(children, (child) => isPanelComponent(child) ? renderPanel(child) : child)
+    }
+  );
 });
 export {
   PanelList as default

package/components/PanelList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/PanelList/PanelList.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport PanelOld, { PanelOldProps, PanelOldVariant } from '../PanelOld';\n\nimport styles from './styles.module.scss';\n\nexport interface PanelListProps {\n  /** Panels to render inside the PanelList */\n  children?: React.ReactNode;\n  /** Changes the visual representation of the panel. Default: fill */\n  variant?: keyof typeof PanelOldVariant;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst isPanelComponent = (element: {} | null | undefined): element is React.ReactElement<PanelOldProps> =>\n  React.isValidElement<PanelOldProps>(element) && (element as React.ReactElement).type === PanelOld;\n\nconst PanelList = React.forwardRef(function BadgeForwardedRef(props: PanelListProps, ref: React.ForwardedRef<HTMLDivElement>) {\n  const { testId, children, variant = PanelOldVariant.fill } = props;\n\n  const renderPanel = (panel: React.ReactElement<PanelOldProps>, firstChild: boolean) =>\n    React.cloneElement(panel, {\n      variant: variant,\n      noTopBorder: variant === PanelOldVariant.line && !firstChild,\n      className: classNames(panel.props.className, variant !== PanelOldVariant.line && styles['panel-list__panel']),\n    });\n\n  return (\n    <div ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.PanelList}>\n      {React.Children.map(children, (child, index) => (isPanelComponent(child) ? renderPanel(child, index === 0) : child))}\n    </div>\n  );\n});\n\nexport default PanelList;\n"],"names":["React"],"mappings":";;;;;;AAkBA,MAAM,mBAAmB,CAAC,YACxBA,eAAM,eAA8B,OAAO,KAAM,QAA+B,SAAS;AAE3F,MAAM,YAAYA,eAAM,WAAW,SAAS,kBAAkB,OAAuB,KAAyC;AAC5H,QAAM,EAAE,QAAQ,UAAU,UAAU,gBAAgB,SAAS;AAE7D,QAAM,cAAc,CAAC,OAA0C,eAC7DA,eAAM,aAAa,OAAO;AAAA,IACxB;AAAA,IACA,aAAa,YAAY,gBAAgB,QAAQ,CAAC;AAAA,IAClD,WAAW,WAAW,MAAM,MAAM,WAAW,YAAY,gBAAgB,QAAQ,OAAO,mBAAmB,CAAC;AAAA,EAAA,CAC7G;AAGD,SAAA,oBAAC,OAAI,EAAA,KAAU,eAAa,QAAQ,oBAAkB,YAAY,WAC/D,UAAMA,eAAA,SAAS,IAAI,UAAU,CAAC,OAAO,UAAW,iBAAiB,KAAK,IAAI,YAAY,OAAO,UAAU,CAAC,IAAI,KAAM,EACrH,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/PanelList/PanelList.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport Panel, { PanelProps, PanelVariant } from '../Panel/Panel';\n\nimport styles from './styles.module.scss';\n\nexport interface PanelListProps {\n  /** Panels to render inside the PanelList */\n  children?: React.ReactNode;\n  /** Changes the visual representation of the panel. Default: fill */\n  variant?: PanelVariant;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst isPanelComponent = (element: {} | null | undefined): element is React.ReactElement<PanelProps> =>\n  React.isValidElement<PanelProps>(element) && (element as React.ReactElement).type === Panel;\n\nconst PanelList = React.forwardRef(function BadgeForwardedRef(props: PanelListProps, ref: React.ForwardedRef<HTMLDivElement>) {\n  const { testId, children, variant = PanelVariant.fill } = props;\n\n  const renderPanel = (panel: React.ReactElement<PanelProps>): React.ReactElement<PanelProps> =>\n    React.cloneElement(panel, {\n      variant: variant,\n      className: classNames(panel.props.className, styles[`panel-list__panel--${variant}`]),\n    });\n\n  return (\n    <div\n      ref={ref}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.PanelList}\n      className={classNames({ [styles['panel-list--outline']]: variant === PanelVariant.outline })}\n    >\n      {React.Children.map(children, child => (isPanelComponent(child) ? renderPanel(child) : child))}\n    </div>\n  );\n});\n\nexport default PanelList;\n"],"names":["React"],"mappings":";;;;;;AAkBA,MAAM,mBAAmB,CAAC,YACxBA,eAAM,eAA2B,OAAO,KAAM,QAA+B,SAAS;AAExF,MAAM,YAAYA,eAAM,WAAW,SAAS,kBAAkB,OAAuB,KAAyC;AAC5H,QAAM,EAAE,QAAQ,UAAU,UAAU,aAAa,SAAS;AAE1D,QAAM,cAAc,CAAC,UACnBA,eAAM,aAAa,OAAO;AAAA,IACxB;AAAA,IACA,WAAW,WAAW,MAAM,MAAM,WAAW,OAAO,sBAAsB,OAAO,EAAE,CAAC;AAAA,EAAA,CACrF;AAGD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MACb,oBAAkB,YAAY;AAAA,MAC9B,WAAW,WAAW,EAAE,CAAC,OAAO,qBAAqB,CAAC,GAAG,YAAY,aAAa,SAAS;AAAA,MAE1F,UAAAA,eAAM,SAAS,IAAI,UAAU,CAAA,UAAU,iBAAiB,KAAK,IAAI,YAAY,KAAK,IAAI,KAAM;AAAA,IAAA;AAAA,EAC/F;AAEJ,CAAC;"}

package/components/PanelList/styles.module.scss

@@ -4,11 +4,26 @@
 @use '../../scss/breakpoints' as breakpoints;
 
 .panel-list {
-  &__panel:not(:last-child) {
-    margin-bottom: spacers.getSpacer(2xs);
+  &--outline {
+    border: 1px solid var(--core-color-neutral-300);
 
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      margin-bottom: spacers.getSpacer(s);
+    & > div {
+      // overstyrer så ikke hvert panel har egen border
+      border: none;
+    }
+  }
+
+  &__panel {
+    &--line:not(:last-child) {
+      margin-bottom: -1px;
+    }
+
+    &--outline:not(:last-child) {
+      margin-bottom: -9px;
+    }
+
+    &--fill:not(:last-child) {
+      margin-bottom: spacers.getSpacer(xs);
     }
   }
 }

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

@@ -1,5 +1,8 @@
 export type Styles = {
-  'panel-list__panel': string;
+  'panel-list__panel--fill': string;
+  'panel-list__panel--line': string;
+  'panel-list__panel--outline': string;
+  'panel-list--outline': string;
 };
 
 export type ClassNames = keyof Styles;

package/components/PanelListOld/PanelListOld.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { PanelOldVariant } from '../PanelOld';
+export interface PanelListOldProps {
+    /** Panels to render inside the PanelList */
+    children?: React.ReactNode;
+    /** Changes the visual representation of the panel. Default: fill */
+    variant?: keyof typeof PanelOldVariant;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+declare const PanelListOld: React.ForwardRefExoticComponent<PanelListOldProps & React.RefAttributes<HTMLDivElement>>;
+export default PanelListOld;

package/components/PanelListOld/PanelListOld.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/PanelListOld/index.d.ts

@@ -0,0 +1,3 @@
+import { default as PanelListOld } from './PanelListOld';
+export * from './PanelListOld';
+export default PanelListOld;

package/components/PanelListOld/index.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import classNames from "classnames";
+import { AnalyticsId } from "../../constants.js";
+import { b as PanelOldVariant, P as PanelOld } from "../../PanelOld.js";
+import styles from "./styles.module.scss";
+const isPanelComponent = (element) => React__default.isValidElement(element) && element.type === PanelOld;
+const PanelListOld = React__default.forwardRef(function BadgeForwardedRef(props, ref) {
+  const { testId, children, variant = PanelOldVariant.fill } = props;
+  const renderPanel = (panel, firstChild) => React__default.cloneElement(panel, {
+    variant,
+    noTopBorder: variant === PanelOldVariant.line && !firstChild,
+    className: classNames(panel.props.className, variant !== PanelOldVariant.line && styles["panel-list__panel"])
+  });
+  return /* @__PURE__ */ jsx("div", { ref, "data-testid": testId, "data-analyticsid": AnalyticsId.PanelList, children: React__default.Children.map(children, (child, index) => isPanelComponent(child) ? renderPanel(child, index === 0) : child) });
+});
+export {
+  PanelListOld as default
+};
+//# sourceMappingURL=index.js.map

package/components/PanelListOld/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/PanelListOld/PanelListOld.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport PanelOld, { PanelOldProps, PanelOldVariant } from '../PanelOld';\n\nimport styles from './styles.module.scss';\n\nexport interface PanelListOldProps {\n  /** Panels to render inside the PanelList */\n  children?: React.ReactNode;\n  /** Changes the visual representation of the panel. Default: fill */\n  variant?: keyof typeof PanelOldVariant;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst isPanelComponent = (element: {} | null | undefined): element is React.ReactElement<PanelOldProps> =>\n  React.isValidElement<PanelOldProps>(element) && (element as React.ReactElement).type === PanelOld;\n\nconst PanelListOld = React.forwardRef(function BadgeForwardedRef(props: PanelListOldProps, ref: React.ForwardedRef<HTMLDivElement>) {\n  const { testId, children, variant = PanelOldVariant.fill } = props;\n\n  const renderPanel = (panel: React.ReactElement<PanelOldProps>, firstChild: boolean) =>\n    React.cloneElement(panel, {\n      variant: variant,\n      noTopBorder: variant === PanelOldVariant.line && !firstChild,\n      className: classNames(panel.props.className, variant !== PanelOldVariant.line && styles['panel-list__panel']),\n    });\n\n  return (\n    <div ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.PanelList}>\n      {React.Children.map(children, (child, index) => (isPanelComponent(child) ? renderPanel(child, index === 0) : child))}\n    </div>\n  );\n});\n\nexport default PanelListOld;\n"],"names":["React"],"mappings":";;;;;;AAkBA,MAAM,mBAAmB,CAAC,YACxBA,eAAM,eAA8B,OAAO,KAAM,QAA+B,SAAS;AAE3F,MAAM,eAAeA,eAAM,WAAW,SAAS,kBAAkB,OAA0B,KAAyC;AAClI,QAAM,EAAE,QAAQ,UAAU,UAAU,gBAAgB,SAAS;AAE7D,QAAM,cAAc,CAAC,OAA0C,eAC7DA,eAAM,aAAa,OAAO;AAAA,IACxB;AAAA,IACA,aAAa,YAAY,gBAAgB,QAAQ,CAAC;AAAA,IAClD,WAAW,WAAW,MAAM,MAAM,WAAW,YAAY,gBAAgB,QAAQ,OAAO,mBAAmB,CAAC;AAAA,EAAA,CAC7G;AAGD,SAAA,oBAAC,OAAI,EAAA,KAAU,eAAa,QAAQ,oBAAkB,YAAY,WAC/D,UAAMA,eAAA,SAAS,IAAI,UAAU,CAAC,OAAO,UAAW,iBAAiB,KAAK,IAAI,YAAY,OAAO,UAAU,CAAC,IAAI,KAAM,EACrH,CAAA;AAEJ,CAAC;"}

package/components/PanelListOld/styles.module.scss

@@ -0,0 +1,14 @@
+@use 'sass:map';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/palette' as palette;
+@use '../../scss/breakpoints' as breakpoints;
+
+.panel-list {
+  &__panel:not(:last-child) {
+    margin-bottom: spacers.getSpacer(2xs);
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      margin-bottom: spacers.getSpacer(s);
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+export type Styles = {
+  'panel-list__panel': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/StatusDot/styles.module.scss

@@ -2,6 +2,7 @@
 @use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
+@use '../../scss/font-mixins' as fonts;
 @use '../../scss/screen-reader' as *;
 @use '../../scss/breakpoints' as breakpoints;
 @import '../../scss/supernova/styles/colors.css';
@@ -11,32 +12,19 @@ $status-dot-size: 1rem;
 .statusdot {
   position: relative;
   display: inline-flex;
-  align-items: flex-start;
-  font-size: font-settings.$font-size-xs;
-  line-height: 1.4rem;
-  font-weight: 400;
-
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
-    font-size: font-settings.$font-size-sm;
-    line-height: 1.6rem;
-  }
+  align-items: center;
+  gap: spacers.getSpacer(2xs);
 
   &__dot {
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
-    top: 0.15rem;
-    margin-right: spacers.getSpacer(2xs);
     width: $status-dot-size;
     height: $status-dot-size;
     min-width: $status-dot-size;
     min-height: $status-dot-size;
 
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
-      top: spacers.getSpacer(3xs);
-    }
-
     &--success {
       fill: var(--color-notification-graphics-success);
     }
@@ -93,8 +81,12 @@ $status-dot-size: 1rem;
   }
 
   &__label {
+    color: var(--core-color-neutral-800);
+
+    @include fonts.sublabel-subdued;
+
     &--on-dark {
-      color: palette.$white;
+      color: var(--color-base-text-ondark);
     }
   }
 }

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

@@ -18,6 +18,7 @@ export type Styles = {
   'statusdot__dot--success': string;
   'statusdot__dot--transparent': string;
   'statusdot__dot--unknown': string;
+  statusdot__label: string;
   'statusdot__label--on-dark': string;
 };
 

package/hooks/useBreakpoint.js

@@ -20,7 +20,9 @@ function getCurrentBreakpoint() {
   return (matched == null ? void 0 : matched.breakpoint) ?? Breakpoint.xxs;
 }
 const useBreakpoint = () => {
-  const [breakpoint, setBreakpoint] = useState(() => getCurrentBreakpoint());
+  const [breakpoint, setBreakpoint] = useState(
+    typeof window.matchMedia !== "undefined" ? getCurrentBreakpoint() : Breakpoint.xxs
+  );
   useEffect(() => {
     const handleMediaQueryEvent = (event) => {
       switch (event.media) {

package/hooks/useBreakpoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"useBreakpoint.js","sources":["../../src/hooks/useBreakpoint.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\n\nimport { breakpoints, screen } from '../theme/grid';\n\nexport enum Breakpoint {\n  xxs = breakpoints.xxs,\n  xs = breakpoints.xs,\n  sm = breakpoints.sm,\n  md = breakpoints.md,\n  lg = breakpoints.lg,\n  xl = breakpoints.xl,\n}\n\nfunction getCurrentBreakpoint(): Breakpoint {\n  // We read from largest -> smallest or vice versa\n  // so that the first match is the \"highest\" one that applies\n  const mediaQueryList = Object.entries(screen)\n    .reverse() // e.g. check xl, lg, md, etc. in descending order\n    .map(([size, mediaQuery]) => {\n      return {\n        breakpoint: Breakpoint[size as keyof typeof Breakpoint],\n        mq: window.matchMedia(mediaQuery),\n      };\n    });\n\n  const matched = mediaQueryList.find(entry => entry.mq.matches);\n  return matched?.breakpoint ?? Breakpoint.xxs;\n}\n\nexport const useBreakpoint = (): Breakpoint => {\n  const [breakpoint, setBreakpoint] = useState<Breakpoint>(() => getCurrentBreakpoint());\n\n  useEffect(() => {\n    const handleMediaQueryEvent = (event: MediaQueryListEvent): void => {\n      switch (event.media) {\n        case screen.xl:\n          setBreakpoint(event.matches ? Breakpoint.xl : Breakpoint.lg);\n          return;\n        case screen.lg:\n          setBreakpoint(event.matches ? Breakpoint.lg : Breakpoint.md);\n          return;\n        case screen.md:\n          setBreakpoint(event.matches ? Breakpoint.md : Breakpoint.sm);\n          return;\n        case screen.sm:\n          setBreakpoint(event.matches ? Breakpoint.sm : Breakpoint.xs);\n          return;\n        case screen.xs:\n          setBreakpoint(event.matches ? Breakpoint.xs : Breakpoint.xxs);\n          return;\n        default:\n          setBreakpoint(Breakpoint.xxs);\n      }\n    };\n\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const mediaQueryList = Object.entries(screen).map(([_size, mediaQuery]) => {\n      const mq = window.matchMedia(mediaQuery);\n      // iOS <=13 har ikke støtte for addEventListener/removeEventListener på MediaQueryList,\n      // men har støtte for addListener\n      if (mq.addEventListener) {\n        mq.addEventListener('change', handleMediaQueryEvent);\n      } else if (mq.addListener) {\n        mq.addListener(handleMediaQueryEvent);\n      }\n      return mq;\n    });\n\n    return (): void => {\n      mediaQueryList.forEach(mq => {\n        if (mq.removeEventListener) {\n          mq.removeEventListener('change', handleMediaQueryEvent);\n        } else if (mq.removeListener) {\n          mq.removeListener(handleMediaQueryEvent);\n        }\n      });\n    };\n  }, []);\n\n  return breakpoint;\n};\n"],"names":["Breakpoint"],"mappings":";;AAIY,IAAA,cAAL,CAAKA,gBAAL;AACLA,cAAAA,YAAA,KAAM,IAAA,YAAY,GAAlB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AANUA,SAAAA;AAAA,GAAA,cAAA,CAAA,CAAA;AASZ,SAAS,uBAAmC;AAG1C,QAAM,iBAAiB,OAAO,QAAQ,MAAM,EACzC,QACA,EAAA,IAAI,CAAC,CAAC,MAAM,UAAU,MAAM;AACpB,WAAA;AAAA,MACL,YAAY,WAAW,IAA+B;AAAA,MACtD,IAAI,OAAO,WAAW,UAAU;AAAA,IAClC;AAAA,EAAA,CACD;AAEH,QAAM,UAAU,eAAe,KAAK,CAAS,UAAA,MAAM,GAAG,OAAO;AACtD,UAAA,mCAAS,eAAc,WAAW;AAC3C;AAEO,MAAM,gBAAgB,MAAkB;AAC7C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAqB,MAAM,sBAAsB;AAErF,YAAU,MAAM;AACR,UAAA,wBAAwB,CAAC,UAAqC;AAClE,cAAQ,MAAM,OAAO;AAAA,QACnB,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,EAAE;AAC3D;AAAA,QACF,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,EAAE;AAC3D;AAAA,QACF,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,EAAE;AAC3D;AAAA,QACF,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,EAAE;AAC3D;AAAA,QACF,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,GAAG;AAC5D;AAAA,QACF;AACE,wBAAc,WAAW,GAAG;AAAA,MAAA;AAAA,IAElC;AAGM,UAAA,iBAAiB,OAAO,QAAQ,MAAM,EAAE,IAAI,CAAC,CAAC,OAAO,UAAU,MAAM;AACnE,YAAA,KAAK,OAAO,WAAW,UAAU;AAGvC,UAAI,GAAG,kBAAkB;AACpB,WAAA,iBAAiB,UAAU,qBAAqB;AAAA,MAAA,WAC1C,GAAG,aAAa;AACzB,WAAG,YAAY,qBAAqB;AAAA,MAAA;AAE/B,aAAA;AAAA,IAAA,CACR;AAED,WAAO,MAAY;AACjB,qBAAe,QAAQ,CAAM,OAAA;AAC3B,YAAI,GAAG,qBAAqB;AACvB,aAAA,oBAAoB,UAAU,qBAAqB;AAAA,QAAA,WAC7C,GAAG,gBAAgB;AAC5B,aAAG,eAAe,qBAAqB;AAAA,QAAA;AAAA,MACzC,CACD;AAAA,IACH;AAAA,EACF,GAAG,EAAE;AAEE,SAAA;AACT;"}
+{"version":3,"file":"useBreakpoint.js","sources":["../../src/hooks/useBreakpoint.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\n\nimport { breakpoints, screen } from '../theme/grid';\n\nexport enum Breakpoint {\n  xxs = breakpoints.xxs,\n  xs = breakpoints.xs,\n  sm = breakpoints.sm,\n  md = breakpoints.md,\n  lg = breakpoints.lg,\n  xl = breakpoints.xl,\n}\n\nfunction getCurrentBreakpoint(): Breakpoint {\n  // We read from largest -> smallest or vice versa\n  // so that the first match is the \"highest\" one that applies\n  const mediaQueryList = Object.entries(screen)\n    .reverse() // e.g. check xl, lg, md, etc. in descending order\n    .map(([size, mediaQuery]) => {\n      return {\n        breakpoint: Breakpoint[size as keyof typeof Breakpoint],\n        mq: window.matchMedia(mediaQuery),\n      };\n    });\n\n  const matched = mediaQueryList.find(entry => entry.mq.matches);\n  return matched?.breakpoint ?? Breakpoint.xxs;\n}\n\nexport const useBreakpoint = (): Breakpoint => {\n  const [breakpoint, setBreakpoint] = useState<Breakpoint>(\n    typeof window.matchMedia !== 'undefined' ? getCurrentBreakpoint() : Breakpoint.xxs\n  );\n\n  useEffect(() => {\n    const handleMediaQueryEvent = (event: MediaQueryListEvent): void => {\n      switch (event.media) {\n        case screen.xl:\n          setBreakpoint(event.matches ? Breakpoint.xl : Breakpoint.lg);\n          return;\n        case screen.lg:\n          setBreakpoint(event.matches ? Breakpoint.lg : Breakpoint.md);\n          return;\n        case screen.md:\n          setBreakpoint(event.matches ? Breakpoint.md : Breakpoint.sm);\n          return;\n        case screen.sm:\n          setBreakpoint(event.matches ? Breakpoint.sm : Breakpoint.xs);\n          return;\n        case screen.xs:\n          setBreakpoint(event.matches ? Breakpoint.xs : Breakpoint.xxs);\n          return;\n        default:\n          setBreakpoint(Breakpoint.xxs);\n      }\n    };\n\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const mediaQueryList = Object.entries(screen).map(([_size, mediaQuery]) => {\n      const mq = window.matchMedia(mediaQuery);\n      // iOS <=13 har ikke støtte for addEventListener/removeEventListener på MediaQueryList,\n      // men har støtte for addListener\n      if (mq.addEventListener) {\n        mq.addEventListener('change', handleMediaQueryEvent);\n      } else if (mq.addListener) {\n        mq.addListener(handleMediaQueryEvent);\n      }\n      return mq;\n    });\n\n    return (): void => {\n      mediaQueryList.forEach(mq => {\n        if (mq.removeEventListener) {\n          mq.removeEventListener('change', handleMediaQueryEvent);\n        } else if (mq.removeListener) {\n          mq.removeListener(handleMediaQueryEvent);\n        }\n      });\n    };\n  }, []);\n\n  return breakpoint;\n};\n"],"names":["Breakpoint"],"mappings":";;AAIY,IAAA,cAAL,CAAKA,gBAAL;AACLA,cAAAA,YAAA,KAAM,IAAA,YAAY,GAAlB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AANUA,SAAAA;AAAA,GAAA,cAAA,CAAA,CAAA;AASZ,SAAS,uBAAmC;AAG1C,QAAM,iBAAiB,OAAO,QAAQ,MAAM,EACzC,QACA,EAAA,IAAI,CAAC,CAAC,MAAM,UAAU,MAAM;AACpB,WAAA;AAAA,MACL,YAAY,WAAW,IAA+B;AAAA,MACtD,IAAI,OAAO,WAAW,UAAU;AAAA,IAClC;AAAA,EAAA,CACD;AAEH,QAAM,UAAU,eAAe,KAAK,CAAS,UAAA,MAAM,GAAG,OAAO;AACtD,UAAA,mCAAS,eAAc,WAAW;AAC3C;AAEO,MAAM,gBAAgB,MAAkB;AACvC,QAAA,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC,OAAO,OAAO,eAAe,cAAc,qBAAA,IAAyB,WAAW;AAAA,EACjF;AAEA,YAAU,MAAM;AACR,UAAA,wBAAwB,CAAC,UAAqC;AAClE,cAAQ,MAAM,OAAO;AAAA,QACnB,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,EAAE;AAC3D;AAAA,QACF,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,EAAE;AAC3D;AAAA,QACF,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,EAAE;AAC3D;AAAA,QACF,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,EAAE;AAC3D;AAAA,QACF,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,GAAG;AAC5D;AAAA,QACF;AACE,wBAAc,WAAW,GAAG;AAAA,MAAA;AAAA,IAElC;AAGM,UAAA,iBAAiB,OAAO,QAAQ,MAAM,EAAE,IAAI,CAAC,CAAC,OAAO,UAAU,MAAM;AACnE,YAAA,KAAK,OAAO,WAAW,UAAU;AAGvC,UAAI,GAAG,kBAAkB;AACpB,WAAA,iBAAiB,UAAU,qBAAqB;AAAA,MAAA,WAC1C,GAAG,aAAa;AACzB,WAAG,YAAY,qBAAqB;AAAA,MAAA;AAE/B,aAAA;AAAA,IAAA,CACR;AAED,WAAO,MAAY;AACjB,qBAAe,QAAQ,CAAM,OAAA;AAC3B,YAAI,GAAG,qBAAqB;AACvB,aAAA,oBAAoB,UAAU,qBAAqB;AAAA,QAAA,WAC7C,GAAG,gBAAgB;AAC5B,aAAG,eAAe,qBAAqB;AAAA,QAAA;AAAA,MACzC,CACD;AAAA,IACH;AAAA,EACF,GAAG,EAAE;AAEE,SAAA;AACT;"}

package/package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/helsenorge/designsystem.git"
   },
   "homepage": "https://helsenorge.design",
-  "version": "11.0.0-beta.3",
+  "version": "11.0.0-beta.4",
   "author": "Helsenorge",
   "license": "MIT",
   "dependencies": {

package/scss/helsenorge.scss

@@ -1,8 +1,8 @@
-@use 'reset' as *;
-@use 'spacers' as *;
-@use 'breakpoints' as *;
-@use 'palette' as *;
-@use 'fonts' as *;
-@use 'body' as *;
-@use 'print' as *;
+@forward 'reset';
+@forward 'spacers';
+@forward 'breakpoints';
+@forward 'palette';
+@forward 'fonts';
+@forward 'body';
+@forward 'print';
 @import './bootstrap/scss/bootstrap-grid';