@helsenorge/designsystem-react 14.10.0 → 14.11.0

package/lib/components/Illustrations/Doctor.js

@@ -1,4 +1,4 @@
-import { n as getIllustration } from "../../utils4.js";
+import { n as getIllustration } from "../../utils3.js";
 import { t as DoctorMedium_default } from "../../DoctorMedium.js";
 import { t as DoctorSmall_default } from "../../DoctorSmall.js";
 import { jsx } from "react/jsx-runtime";

package/lib/components/Illustrations/EyeContact.d.ts

@@ -0,0 +1,8 @@
+import { SvgIllustrationProps } from '../Illustration';
+export interface Palette {
+    skin: string;
+    mother: string;
+    baby: string;
+}
+declare const EyeContact: React.FC<SvgIllustrationProps>;
+export default EyeContact;

package/lib/components/Illustrations/EyeContact.js

@@ -0,0 +1,16 @@
+import { n as getIllustration } from "../../utils3.js";
+import { t as EyeContactMedium_default } from "../../EyeContactMedium.js";
+import { jsx } from "react/jsx-runtime";
+var EyeContact = ({ size = 512, color, ...rest }) => {
+	return getIllustration({
+		size,
+		medium: /* @__PURE__ */ jsx(EyeContactMedium_default, {
+			color,
+			...rest
+		})
+	});
+};
+var EyeContact_default = EyeContact;
+export { EyeContact_default as default };
+
+//# sourceMappingURL=EyeContact.js.map

package/lib/components/Illustrations/EyeContact.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EyeContact.js","names":["EyeContact: React.FC<SvgIllustrationProps>"],"sources":["../../../src/components/Illustrations/EyeContact.tsx"],"sourcesContent":["import type { SvgIllustrationProps } from '../Illustration';\n\nimport EyeContactMedium from './EyeContactMedium';\nimport { getIllustration } from '../Illustration/utils';\n\nexport interface Palette {\n  skin: string;\n  mother: string;\n  baby: string;\n}\n\nconst EyeContact: React.FC<SvgIllustrationProps> = ({ size = 512, color, ...rest }) => {\n  const medium = <EyeContactMedium color={color} {...rest} />;\n\n  return getIllustration({ size, medium });\n};\n\nexport default EyeContact;\n"],"mappings":";;;AAWA,IAAMA,cAA8C,EAAE,OAAO,KAAK,OAAO,GAAG,WAAW;AAGrF,QAAO,gBAAgB;EAAE;EAAM,QAFhB,oBAAC,0BAAA;GAAwB;GAAO,GAAI;IAAQ;EAEpB,CAAC;;AAG1C,IAAA,qBAAe"}

package/lib/components/Illustrations/EyeContactMedium.d.ts

@@ -0,0 +1,3 @@
+import { BaseSvgIllustrationProps } from '../Illustration';
+declare const EyeContactMedium: React.FC<BaseSvgIllustrationProps>;
+export default EyeContactMedium;

package/lib/components/Illustrations/EyeContactMedium.js

@@ -0,0 +1,2 @@
+import { t as EyeContactMedium_default } from "../../EyeContactMedium.js";
+export { EyeContactMedium_default as default };

package/lib/components/Illustrations/FacialRecognitionFingerprint.js

@@ -1,4 +1,4 @@
-import { n as getIllustration } from "../../utils4.js";
+import { n as getIllustration } from "../../utils3.js";
 import { t as FacialRecognitionFingerprintMedium_default } from "../../FacialRecognitionFingerprintMedium.js";
 import { jsx } from "react/jsx-runtime";
 var FacialRecognitionFingerprint = ({ size = 512, color, ...rest }) => {

package/lib/components/Illustrations/GiveBabyFood.js

@@ -1,4 +1,4 @@
-import { n as getIllustration } from "../../utils4.js";
+import { n as getIllustration } from "../../utils3.js";
 import { t as GiveBabyFoodMedium_default } from "../../GiveBabyFoodMedium.js";
 import { jsx } from "react/jsx-runtime";
 var GiveBabyFood = ({ size = 512, color, ...rest }) => {

package/lib/components/Illustrations/HealthcarePersonnel.js

@@ -1,4 +1,4 @@
-import { n as getIllustration } from "../../utils4.js";
+import { n as getIllustration } from "../../utils3.js";
 import { t as HealthcarePersonnelMedium_default } from "../../HealthcarePersonnelMedium.js";
 import { t as HealthcarePersonnelSmall_default } from "../../HealthcarePersonnelSmall.js";
 import { jsx } from "react/jsx-runtime";

package/lib/components/Illustrations/IllustrationNames.d.ts

@@ -1,5 +1,5 @@
 /** AUTO-GENERATED - DO NOT CHANGE MANUALLY **/
-export declare const IllustrationList: readonly ["BabyMobile", "Child", "Doctor", "FacialRecognitionFingerprint", "GiveBabyFood", "HealthcarePersonnel", "ReadLetters", "Stork", "Stroller", "Support2", "Thinking"];
+export declare const IllustrationList: readonly ["BabyMobile", "Child", "Doctor", "EyeContact", "FacialRecognitionFingerprint", "GiveBabyFood", "HealthcarePersonnel", "ReadLetters", "SkinToSkin", "Stork", "Stroller", "Support2", "Thinking"];
 export interface IllustrationSize {
     small?: string;
     medium?: string;

package/lib/components/Illustrations/ReadLetters.js

@@ -1,4 +1,4 @@
-import { n as getIllustration } from "../../utils4.js";
+import { n as getIllustration } from "../../utils3.js";
 import { t as ReadLettersMedium_default } from "../../ReadLettersMedium.js";
 import { jsx } from "react/jsx-runtime";
 var ReadLetters = ({ size = 512, color, ...rest }) => {

package/lib/components/Illustrations/SkinToSkin.d.ts

@@ -0,0 +1,8 @@
+import { SvgIllustrationProps } from '../Illustration';
+export interface Palette {
+    hair: string;
+    skin: string;
+    clothes: string;
+}
+declare const SkinToSkin: React.FC<SvgIllustrationProps>;
+export default SkinToSkin;

package/lib/components/Illustrations/SkinToSkin.js

@@ -0,0 +1,16 @@
+import { n as getIllustration } from "../../utils3.js";
+import { t as SkinToSkinMedium_default } from "../../SkinToSkinMedium.js";
+import { jsx } from "react/jsx-runtime";
+var SkinToSkin = ({ size = 512, color, ...rest }) => {
+	return getIllustration({
+		size,
+		medium: /* @__PURE__ */ jsx(SkinToSkinMedium_default, {
+			color,
+			...rest
+		})
+	});
+};
+var SkinToSkin_default = SkinToSkin;
+export { SkinToSkin_default as default };
+
+//# sourceMappingURL=SkinToSkin.js.map

package/lib/components/Illustrations/SkinToSkin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkinToSkin.js","names":["SkinToSkin: React.FC<SvgIllustrationProps>"],"sources":["../../../src/components/Illustrations/SkinToSkin.tsx"],"sourcesContent":["import type { SvgIllustrationProps } from '../Illustration';\n\nimport SkinToSkinMedium from './SkinToSkinMedium';\nimport { getIllustration } from '../Illustration/utils';\n\nexport interface Palette {\n  hair: string;\n  skin: string;\n  clothes: string;\n}\n\nconst SkinToSkin: React.FC<SvgIllustrationProps> = ({ size = 512, color, ...rest }) => {\n  const medium = <SkinToSkinMedium color={color} {...rest} />;\n\n  return getIllustration({ size, medium });\n};\n\nexport default SkinToSkin;\n"],"mappings":";;;AAWA,IAAMA,cAA8C,EAAE,OAAO,KAAK,OAAO,GAAG,WAAW;AAGrF,QAAO,gBAAgB;EAAE;EAAM,QAFhB,oBAAC,0BAAA;GAAwB;GAAO,GAAI;IAAQ;EAEpB,CAAC;;AAG1C,IAAA,qBAAe"}

package/lib/components/Illustrations/SkinToSkinMedium.d.ts

@@ -0,0 +1,3 @@
+import { BaseSvgIllustrationProps } from '../Illustration';
+declare const SkinToSkinMedium: React.FC<BaseSvgIllustrationProps>;
+export default SkinToSkinMedium;

package/lib/components/Illustrations/SkinToSkinMedium.js

@@ -0,0 +1,2 @@
+import { t as SkinToSkinMedium_default } from "../../SkinToSkinMedium.js";
+export { SkinToSkinMedium_default as default };

package/lib/components/Illustrations/Stork.js

@@ -1,4 +1,4 @@
-import { n as getIllustration } from "../../utils4.js";
+import { n as getIllustration } from "../../utils3.js";
 import { t as StorkMedium_default } from "../../StorkMedium.js";
 import { jsx } from "react/jsx-runtime";
 var Stork = ({ size = 512, color, ...rest }) => {

package/lib/components/Illustrations/Stroller.js

@@ -1,4 +1,4 @@
-import { n as getIllustration } from "../../utils4.js";
+import { n as getIllustration } from "../../utils3.js";
 import { t as StrollerMedium_default } from "../../StrollerMedium.js";
 import { jsx } from "react/jsx-runtime";
 var Stroller = ({ size = 512, color, ...rest }) => {

package/lib/components/Illustrations/Support2.js

@@ -1,4 +1,4 @@
-import { n as getIllustration } from "../../utils4.js";
+import { n as getIllustration } from "../../utils3.js";
 import { t as Support2Medium_default } from "../../Support2Medium.js";
 import { jsx } from "react/jsx-runtime";
 var Support2 = ({ size = 512, color, ...rest }) => {

package/lib/components/Illustrations/Thinking.js

@@ -1,4 +1,4 @@
-import { n as getIllustration } from "../../utils4.js";
+import { n as getIllustration } from "../../utils3.js";
 import { t as ThinkingMedium_default } from "../../ThinkingMedium.js";
 import { jsx } from "react/jsx-runtime";
 var Thinking = ({ size = 512, color, ...rest }) => {

package/lib/components/Panel/index.js

@@ -8,7 +8,7 @@ import { t as ChevronUp_default } from "../../ChevronUp.js";
 import { t as Highlighter_default } from "../../Highlighter.js";
 import { t as useExpand } from "../../useExpand.js";
 import { t as ChevronRight_default } from "../../ChevronRight.js";
-import { a as PanelVariant, i as PanelStatus, n as PanelLayout, r as PanelStacking, t as PanelListContext } from "../../utils5.js";
+import { a as PanelVariant, i as PanelStatus, n as PanelLayout, r as PanelStacking, t as PanelListContext } from "../../utils4.js";
 import { t as PanelTitle_default } from "../../PanelTitle.js";
 import classNames from "classnames";
 import React from "react";

package/lib/components/PanelList/index.js

@@ -1,5 +1,5 @@
 import { n as AnalyticsId } from "../../constants2.js";
-import { a as PanelVariant, t as PanelListContext } from "../../utils5.js";
+import { a as PanelVariant, t as PanelListContext } from "../../utils4.js";
 import classNames from "classnames";
 import React from "react";
 import { jsx } from "react/jsx-runtime";

package/lib/components/RadioButton/RadioMarker/RadioMarker.d.ts

@@ -0,0 +1,20 @@
+import { FormOnColor, FormSize } from '../../../constants';
+export interface RadioMarkerProps {
+    /** Whether the radio is checked. Controls the inner dot visibility. */
+    checked?: boolean;
+    /** Disables the visual state of the marker. */
+    disabled?: boolean;
+    /** Activates error styling. */
+    error?: boolean;
+    /** Background context the marker is rendered on. */
+    onColor?: keyof typeof FormOnColor;
+    /** Size variant of the marker. */
+    size?: keyof typeof FormSize;
+    /** Adds custom classes to the marker wrapper. */
+    className?: string;
+}
+/**
+ * Does not render an <input>; consumers render this on their end.
+ */
+export declare const RadioMarker: React.FC<RadioMarkerProps>;
+export default RadioMarker;

package/lib/components/RadioButton/RadioMarker/styles.module.scss

@@ -0,0 +1,259 @@
+@use '../../../scss/spacers' as spacers;
+@use '../../../scss/palette' as palette;
+@use 'sass:meta';
+@use 'sass:string';
+
+@mixin dashed-border() {
+  box-shadow: none;
+  position: relative;
+
+  &::after {
+    position: absolute;
+    content: '';
+
+    $encoded-color: string.slice(meta.inspect(palette.$neutral600), 2);
+
+    // Variabler for å lettere styre dashen i background-imaget under
+    $stroke: 4;
+    $dash: 0.2;
+    $gap: 7;
+    $scale: 1;
+    $stroke-scaled: $stroke * $scale;
+    $dash-scaled: $dash * $scale;
+    $gap-scaled: $gap * $scale;
+
+    border-radius: 100px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='%23#{$encoded-color}' stroke-width='#{$stroke-scaled}' stroke-dasharray='#{$dash-scaled},#{$gap-scaled}' stroke-linecap='square'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    width: 28px;
+    height: 28px;
+    inset: -2px;
+  }
+}
+
+.radio {
+  &__marker {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 10rem;
+    height: 1.5rem;
+    width: 1.5rem;
+    min-height: 1.5rem;
+    min-width: 1.5rem;
+    color: palette.$neutral700;
+    box-shadow: 0 0 0 spacers.getSpacer(4xs);
+
+    // Vi overstyrer farger satt ved high-contrast mode i nettleser/os
+    @media (forced-colors: active) {
+      forced-color-adjust: none;
+      background-color: transparent !important;
+      color: #fff !important;
+    }
+
+    &--on-blueberry {
+      color: palette.$blueberry500;
+    }
+
+    &--on-dark {
+      color: palette.$neutral200;
+    }
+
+    &--invalid {
+      color: palette.$cherry600;
+    }
+
+    &__regular {
+      &--checked {
+        color: palette.$blueberry500;
+      }
+
+      &--checked--invalid {
+        color: palette.$cherry600;
+      }
+
+      &--checked--on-dark {
+        color: palette.$blueberry200;
+      }
+
+      &--checked--disabled {
+        color: palette.$neutral600;
+      }
+    }
+
+    &__large {
+      &--checked {
+        color: palette.$blueberry100;
+      }
+
+      &--checked--invalid {
+        color: palette.$cherry500;
+      }
+
+      &--checked--disabled {
+        color: palette.$neutral600;
+      }
+    }
+
+    &--disabled,
+    &--disabled#{&}--invalid,
+    &--disabled#{&}--on-dark {
+      @include dashed-border;
+
+      background-color: transparent;
+    }
+
+    // Focus styles when an input inside the wrapping label is focus-visible
+    label:has(:focus-visible) &#{&} {
+      box-shadow: 0 0 0 spacers.getSpacer(3xs);
+      color: palette.$black;
+
+      &--on-dark {
+        color: palette.$white;
+      }
+
+      &__regular--checked {
+        color: palette.$black;
+      }
+
+      &__regular--checked--on-dark {
+        color: palette.$white;
+      }
+
+      &__large--checked {
+        color: palette.$white;
+      }
+
+      &__large--checked--invalid {
+        color: palette.$black;
+      }
+    }
+
+    // Hover styles via wrapping label
+    label:hover &,
+    label:active & {
+      box-shadow: 0 0 0 spacers.getSpacer(3xs);
+    }
+
+    label:hover &--on-white,
+    label:hover &--on-grey {
+      background-color: palette.$neutral100;
+    }
+
+    label:active &--on-white,
+    label:active &--on-grey {
+      background-color: palette.$blueberry100;
+    }
+
+    label:hover &--on-blueberry {
+      background-color: palette.$blueberry100;
+    }
+
+    label:active &--on-blueberry {
+      background-color: palette.$blueberry200;
+    }
+
+    label:hover &--on-invalid {
+      background-color: palette.$cherry100;
+    }
+
+    label:active &--on-invalid {
+      background-color: palette.$cherry200;
+    }
+
+    label:hover &--on-dark {
+      background-color: palette.$inverted-hover-old;
+    }
+
+    label:hover &__regular--checked {
+      background-color: palette.$blueberry50;
+    }
+
+    label:active &__regular--checked {
+      background-color: palette.$blueberry100;
+    }
+
+    label:hover &__regular--checked--invalid {
+      background-color: palette.$cherry100;
+    }
+
+    label:active &__regular--checked--invalid {
+      background-color: palette.$cherry200;
+    }
+
+    label:hover &__regular--checked--on-dark {
+      background-color: palette.$inverted-hover-old;
+    }
+
+    label:hover &__large--checked {
+      background-color: unset;
+    }
+
+    label:hover &__large--checked--invalid {
+      background-color: transparent;
+    }
+
+    label:hover &--disabled,
+    label:hover &--disabled#{&}--invalid,
+    label:hover &--disabled#{&}--on-dark {
+      box-shadow: none;
+      background-color: transparent;
+    }
+  }
+
+  &__marker-dot {
+    display: block;
+    background-color: palette.$blueberry500;
+    width: 0.875rem;
+    height: 0.875rem;
+    border-radius: 10rem;
+
+    // Vi overstyrer farger satt ved high-contrast mode i nettleser/os
+    @media (forced-colors: active) {
+      forced-color-adjust: none;
+      background-color: #fff !important;
+    }
+  }
+
+  // Dot color follows the marker state (so the focus ring can turn black
+  // without recoloring the dot).
+  &__marker--on-dark &__marker-dot {
+    background-color: palette.$blueberry200;
+  }
+
+  &__marker--invalid &__marker-dot {
+    background-color: palette.$cherry600;
+  }
+
+  &__marker--disabled &__marker-dot {
+    background-color: palette.$neutral600;
+  }
+
+  &__marker__large--checked &__marker-dot {
+    background-color: palette.$blueberry100;
+  }
+
+  &__marker__large--checked--invalid &__marker-dot {
+    background-color: palette.$cherry500;
+  }
+
+  label:active &__marker-dot {
+    background-color: palette.$blueberry800;
+  }
+
+  label:active &__marker--on-dark &__marker-dot {
+    background-color: palette.$blueberry300;
+  }
+
+  label:active &__marker--invalid &__marker-dot {
+    background-color: palette.$cherry800;
+  }
+
+  label:active &__marker__large--checked &__marker-dot {
+    background-color: palette.$blueberry200;
+  }
+
+  label:active &__marker__large--checked--invalid &__marker-dot {
+    background-color: palette.$cherry700;
+  }
+}

package/lib/components/RadioButton/RadioMarker/styles.module.scss.d.ts

@@ -0,0 +1,24 @@
+export type Styles = {
+  radio__marker: string;
+  'radio__marker__large--checked': string;
+  'radio__marker__large--checked--disabled': string;
+  'radio__marker__large--checked--invalid': string;
+  'radio__marker__regular--checked': string;
+  'radio__marker__regular--checked--disabled': string;
+  'radio__marker__regular--checked--invalid': string;
+  'radio__marker__regular--checked--on-dark': string;
+  'radio__marker--disabled': string;
+  'radio__marker--invalid': string;
+  'radio__marker--on-blueberry': string;
+  'radio__marker--on-dark': string;
+  'radio__marker--on-grey': string;
+  'radio__marker--on-invalid': string;
+  'radio__marker--on-white': string;
+  'radio__marker-dot': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/lib/components/RadioButton/index.d.ts

@@ -1,4 +1,3 @@
 import { default as RadioButton } from './RadioButton';
 export * from './RadioButton';
-export * from './utils';
 export default RadioButton;

package/lib/components/RadioButton/index.js

@@ -1,3 +1,3 @@
-import { n as RadioButton, t as getRadioLabelClasses } from "../../utils3.js";
-import { t as RadioButton_default } from "../../RadioButton.js";
-export { RadioButton, RadioButton_default as default, getRadioLabelClasses };
+import { t as RadioButton } from "../../RadioButton.js";
+import { t as RadioButton_default } from "../../RadioButton2.js";
+export { RadioButton, RadioButton_default as default };