@norges-domstoler/dds-components 22.8.2 → 22.9.0

package/dist/index.d.mts

@@ -3537,9 +3537,11 @@ type HeadingProps = BaseComponentPropsWithChildren<HTMLHeadingElement, {
     level: HeadingLevel;
     /**Spesifiserer typografistil basert på utvalget for HTML heading elementer.  */
     typographyType?: TypographyHeadingType;
+    /**Setter standard spacing for `<Heading>` som er over et inputelement. */
+    withMarginsOverInput?: boolean;
 } & BaseTypographyProps, Omit<HTMLAttributes<HTMLHeadingElement>, 'color'>>;
 declare const Heading: {
-    ({ id, className, style, htmlProps, children, typographyType, level, ...rest }: HeadingProps): react_jsx_runtime.JSX.Element;
+    ({ id, className, style, htmlProps, children, typographyType, level, withMargins, withMarginsOverInput, ...rest }: HeadingProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -3561,9 +3563,11 @@ declare const Label: {
 type LegendProps = BaseComponentPropsWithChildren<HTMLLegendElement, BaseTypographyProps & {
     /**Typografistil basert på utvalget for HTML heading elementer.  */
     typographyType?: TypographyHeadingType;
+    /**Setter standard spacing for `<Legend>` som er over et inputelement. */
+    withMarginsOverInput?: boolean;
 }, Omit<HTMLAttributes<HTMLLegendElement>, 'color'>>;
 declare const Legend: {
-    ({ id, className, style, htmlProps, typographyType, ...rest }: LegendProps): react_jsx_runtime.JSX.Element;
+    ({ id, className, style, htmlProps, typographyType, withMarginsOverInput, withMargins, ...rest }: LegendProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/index.d.ts

@@ -3537,9 +3537,11 @@ type HeadingProps = BaseComponentPropsWithChildren<HTMLHeadingElement, {
     level: HeadingLevel;
     /**Spesifiserer typografistil basert på utvalget for HTML heading elementer.  */
     typographyType?: TypographyHeadingType;
+    /**Setter standard spacing for `<Heading>` som er over et inputelement. */
+    withMarginsOverInput?: boolean;
 } & BaseTypographyProps, Omit<HTMLAttributes<HTMLHeadingElement>, 'color'>>;
 declare const Heading: {
-    ({ id, className, style, htmlProps, children, typographyType, level, ...rest }: HeadingProps): react_jsx_runtime.JSX.Element;
+    ({ id, className, style, htmlProps, children, typographyType, level, withMargins, withMarginsOverInput, ...rest }: HeadingProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -3561,9 +3563,11 @@ declare const Label: {
 type LegendProps = BaseComponentPropsWithChildren<HTMLLegendElement, BaseTypographyProps & {
     /**Typografistil basert på utvalget for HTML heading elementer.  */
     typographyType?: TypographyHeadingType;
+    /**Setter standard spacing for `<Legend>` som er over et inputelement. */
+    withMarginsOverInput?: boolean;
 }, Omit<HTMLAttributes<HTMLLegendElement>, 'color'>>;
 declare const Legend: {
-    ({ id, className, style, htmlProps, typographyType, ...rest }: LegendProps): react_jsx_runtime.JSX.Element;
+    ({ id, className, style, htmlProps, typographyType, withMarginsOverInput, withMargins, ...rest }: LegendProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/index.js

@@ -469,9 +469,11 @@ var typographyStyles_default = {
   "heading-xlarge--margins": "typographyStyles_heading-xlarge--margins",
   "heading-xxlarge": "typographyStyles_heading-xxlarge",
   "heading-xxlarge--margins": "typographyStyles_heading-xxlarge--margins",
+  "heading--margins-over-input": "typographyStyles_heading--margins-over-input",
   "label-medium": "typographyStyles_label-medium",
   "label-medium--margins": "typographyStyles_label-medium--margins",
   legend: "typographyStyles_legend",
+  "legend--margins-over-input": "typographyStyles_legend--margins-over-input",
   caption: "typographyStyles_caption",
   "caption--withMargins": "typographyStyles_caption--withMargins",
   bold: "typographyStyles_bold",
@@ -782,6 +784,12 @@ function cn(...classNames) {
 function convertCamelToHyphen(value) {
   return value.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/([a-z])([0-9])/g, "$1-$2").toLowerCase();
 }
+function optAttr(value, keepZero) {
+  if (keepZero && value === 0) {
+    return value;
+  }
+  return value ? value : void 0;
+}
 
 // src/utils/getFocusableElements.ts
 function getFocusableElements(elementRef) {
@@ -4325,6 +4333,8 @@ var Heading = ({
   children,
   typographyType,
   level,
+  withMargins,
+  withMarginsOverInput,
   ...rest
 }) => {
   const headingElement = getHeadingElement(level);
@@ -4332,9 +4342,19 @@ var Heading = ({
   return /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(
     Typography,
     {
-      ...getBaseHTMLProps(id, className, style, htmlProps, rest),
+      ...getBaseHTMLProps(
+        id,
+        cn(
+          className,
+          withMarginsOverInput && typographyStyles_default["heading--margins-over-input"]
+        ),
+        style,
+        htmlProps,
+        rest
+      ),
       typographyType: standardTypographyType,
       as: headingElement,
+      withMargins: optAttr(withMargins || withMarginsOverInput),
       children
     }
   );
@@ -4413,14 +4433,26 @@ var Legend = ({
   style,
   htmlProps,
   typographyType = "headingLarge",
+  withMarginsOverInput,
+  withMargins,
   ...rest
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
     Typography,
     {
-      ...getBaseHTMLProps(id, className, style, htmlProps, rest),
+      ...getBaseHTMLProps(
+        id,
+        cn(
+          className,
+          withMarginsOverInput && typographyStyles_default["legend--margins-over-input"]
+        ),
+        style,
+        htmlProps,
+        rest
+      ),
       as: "legend",
-      typographyType
+      typographyType,
+      withMargins: optAttr(withMargins || withMarginsOverInput)
     }
   );
 };