@navikt/ds-react 4.10.2 → 4.11.0

package/src/layout/utilities/css.ts

@@ -21,36 +21,58 @@ export type SpacingScale =
   | "24"
   | "32";
 
-export type ResponsiveProp<T> =
-  | T
-  | {
-      // eslint-disable-next-line no-unused-vars
-      [Breakpoint in BreakpointsAlias]?: T;
-    };
+type ResponsivePropConfig<T = string> = {
+  // eslint-disable-next-line no-unused-vars
+  [Breakpoint in BreakpointsAlias]?: T;
+};
+
+export type ResponsiveProp<T> = T | ResponsivePropConfig<T>;
+
+export type ResponsiveValue<T = string> = undefined | ResponsiveProp<T>;
 
-export function getResponsiveProps(
+export function getResponsiveProps<T = string>(
   componentName: string,
   componentProp: string,
   tokenSubgroup: string,
-  responsiveProp?:
-    | string
-    | {
-        // eslint-disable-next-line no-unused-vars
-        [Breakpoint in BreakpointsAlias]?: string;
-      }
+  responsiveProp?: ResponsiveProp<T>
 ) {
-  if (!responsiveProp) return {};
+  if (!responsiveProp) {
+    return {};
+  }
 
   if (typeof responsiveProp === "string") {
     return {
-      [`--ac-${componentName}-${componentProp}-xs`]: `var(--a-${tokenSubgroup}-${responsiveProp})`,
+      [`--__ac-${componentName}-${componentProp}-xs`]: `var(--a-${tokenSubgroup}-${responsiveProp})`,
     };
   }
 
   return Object.fromEntries(
     Object.entries(responsiveProp).map(([breakpointAlias, aliasOrScale]) => [
-      `--ac-${componentName}-${componentProp}-${breakpointAlias}`,
+      `--__ac-${componentName}-${componentProp}-${breakpointAlias}`,
       `var(--a-${tokenSubgroup}-${aliasOrScale})`,
     ])
   );
 }
+
+export function getResponsiveValue<T = string>(
+  componentName: string,
+  componentProp: string,
+  responsiveProp?: ResponsiveValue<T>
+) {
+  if (!responsiveProp) {
+    return {};
+  }
+
+  if (typeof responsiveProp === "string") {
+    return {
+      [`--__ac-${componentName}-${componentProp}-xs`]: responsiveProp,
+    };
+  }
+
+  return Object.fromEntries(
+    Object.entries(responsiveProp).map(([breakpointAlias, responsiveValue]) => [
+      `--__ac-${componentName}-${componentProp}-${breakpointAlias}`,
+      responsiveValue,
+    ])
+  );
+}

package/esm/grid/ContentContainer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ContentContainer.js","sourceRoot":"","sources":["../../src/grid/ContentContainer.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,MAAM,CAAC;AAStB,MAAM,CAAC,MAAM,gBAAgB,GAAG,UAAU,CAGxC,CAAC,EAAsB,EAAE,GAAG,EAAE,EAAE;QAA/B,EAAE,SAAS,OAAW,EAAN,IAAI,cAApB,aAAsB,CAAF;IAAY,OAAA,CACjC,2CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE,SAAS,CAAC,IAC/C,IAAI,EACR,CACH,CAAA;CAAA,CAAC,CAAC;AAEH,eAAe,gBAAgB,CAAC"}