@norges-domstoler/dds-components 21.3.0 → 21.4.0

package/dist/index.js

@@ -348,6 +348,7 @@ __export(index_exports, {
   focusVisibleInset: () => focusVisibleInset,
   focusVisibleTransitionValue: () => focusVisibleTransitionValue,
   getBaseHTMLProps: () => getBaseHTMLProps,
+  getColorCn: () => getColorCn,
   getDefaultText: () => getDefaultText,
   getElementType: () => getElementType,
   getInputWidth: () => getInputWidth,
@@ -438,7 +439,30 @@ var typographyStyles_default = {
   "text-color--default": "typographyStyles_text-color--default",
   "text-color--medium": "typographyStyles_text-color--medium",
   "text-color--subtle": "typographyStyles_text-color--subtle",
-  "text-color--on-inverse": "typographyStyles_text-color--on-inverse"
+  "text-color--requiredfield": "typographyStyles_text-color--requiredfield",
+  "text-color--action-resting": "typographyStyles_text-color--action-resting",
+  "text-color--action-hover": "typographyStyles_text-color--action-hover",
+  "text-color--action-visited": "typographyStyles_text-color--action-visited",
+  "text-color--on-action": "typographyStyles_text-color--on-action",
+  "text-color--on-status-default": "typographyStyles_text-color--on-status-default",
+  "text-color--on-status-strong": "typographyStyles_text-color--on-status-strong",
+  "text-color--on-notification": "typographyStyles_text-color--on-notification",
+  "text-color--on-inverse": "typographyStyles_text-color--on-inverse",
+  "icon-color--default": "typographyStyles_icon-color--default",
+  "icon-color--medium": "typographyStyles_icon-color--medium",
+  "icon-color--subtle": "typographyStyles_icon-color--subtle",
+  "icon-color--on-action": "typographyStyles_icon-color--on-action",
+  "icon-color--action-resting": "typographyStyles_icon-color--action-resting",
+  "icon-color--action-hover": "typographyStyles_icon-color--action-hover",
+  "icon-color--on-info-default": "typographyStyles_icon-color--on-info-default",
+  "icon-color--on-info-strong": "typographyStyles_icon-color--on-info-strong",
+  "icon-color--on-success-default": "typographyStyles_icon-color--on-success-default",
+  "icon-color--on-success-strong": "typographyStyles_icon-color--on-success-strong",
+  "icon-color--on-danger-default": "typographyStyles_icon-color--on-danger-default",
+  "icon-color--on-danger-strong": "typographyStyles_icon-color--on-danger-strong",
+  "icon-color--on-warning-default": "typographyStyles_icon-color--on-warning-default",
+  "icon-color--on-warning-strong": "typographyStyles_icon-color--on-warning-strong",
+  "icon-color--on-inverse": "typographyStyles_icon-color--on-inverse"
 };
 
 // src/components/helpers/styling/utilStyles.module.css
@@ -493,36 +517,36 @@ var Backdrop_default = {
 };
 
 // src/utils/color.tsx
-var textColors = {
-  textOnAction: "var(--dds-color-text-on-action)",
-  textOnInverse: "var(--dds-color-text-on-inverse)",
-  textOnStatusDefault: "var(--dds-color-text-on-status-default)",
-  textOnStatusStrong: "var(--dds-color-text-on-status-strong)",
-  textActionResting: "var(--dds-color-text-action-resting)",
-  textActionHover: "var(--dds-color-text-action-hover)",
-  textActionVisited: "var(--dds-color-text-action-visited)",
-  textDefault: "var(--dds-color-text-default)",
-  textRequiredfield: "var(--dds-color-text-requiredfield)",
-  textSubtle: "var(--dds-color-text-subtle)",
-  textMedium: "var(--dds-color-text-medium)",
-  textOnNotification: "var(--dds-color-text-on-notification)",
-  iconOnAction: "var(--dds-color-icon-on-action)",
-  iconOnInfoDefault: "var(--dds-color-icon-on-info-default)",
-  iconOnSuccessDefault: "var(--dds-color-icon-on-success-default)",
-  iconOnDangerDefault: "var(--dds-color-icon-on-danger-default)",
-  iconOnWarningDefault: "var(--dds-color-icon-on-warning-default)",
-  iconOnInfoStrong: "var(--dds-color-icon-on-info-strong)",
-  iconOnSuccessStrong: "var(--dds-color-icon-on-success-strong)",
-  iconOnDangerStrong: "var(--dds-color-icon-on-danger-strong)",
-  iconOnWarningStrong: "var(--dds-color-icon-on-warning-strong)",
-  iconOnInverse: "var(--dds-color-icon-on-inverse)",
-  iconActionResting: "var(--dds-color-icon-action-resting)",
-  iconActionHover: "var(--dds-color-icon-action-hover)",
-  iconDefault: "var(--dds-color-icon-default)",
-  iconSubtle: "var(--dds-color-icon-subtle)",
-  iconMedium: "var(--dds-color-icon-medium)"
-};
-var textColorsArray = [
+var TEXT_COLORS = [
+  "text-on-action",
+  "text-on-inverse",
+  "text-on-status-default",
+  "text-on-status-strong",
+  "text-action-resting",
+  "text-action-hover",
+  "text-action-visited",
+  "text-default",
+  "text-requiredfield",
+  "text-subtle",
+  "text-medium",
+  "text-on-notification",
+  "icon-on-action",
+  "icon-on-info-default",
+  "icon-on-success-default",
+  "icon-on-danger-default",
+  "icon-on-warning-default",
+  "icon-on-info-strong",
+  "icon-on-success-strong",
+  "icon-on-danger-strong",
+  "icon-on-warning-strong",
+  "icon-on-inverse",
+  "icon-action-resting",
+  "icon-action-hover",
+  "icon-default",
+  "icon-subtle",
+  "icon-medium"
+];
+var TEXT_COLORS_CAMEL = [
   "textOnAction",
   "textOnInverse",
   "textOnStatusDefault",
@@ -551,11 +575,30 @@ var textColorsArray = [
   "iconSubtle",
   "iconMedium"
 ];
-function isTextColor(color) {
-  return textColorsArray.indexOf(color) !== -1;
-}
+var TEXT_COLOR_VALUES_CAMEL = TEXT_COLORS_CAMEL.reduce(
+  (acc, key) => {
+    const kebab = key.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+    acc[key] = `var(--dds-color-${kebab})`;
+    return acc;
+  },
+  {}
+);
+var TEXT_COLOR_VALUES_KEBAB = TEXT_COLORS.reduce(
+  (acc, key) => {
+    acc[key] = `var(--dds-color-${key})`;
+    return acc;
+  },
+  {}
+);
+var isTextColorCamel = (value) => {
+  return typeof value === "string" && TEXT_COLORS_CAMEL.includes(value);
+};
+var isTextColor = (value) => {
+  return typeof value === "string" && TEXT_COLORS.includes(value);
+};
 var getTextColor = (color) => {
-  if (isTextColor(color)) return textColors[color];
+  if (isTextColorCamel(color)) return TEXT_COLOR_VALUES_CAMEL[color];
+  if (isTextColor(color)) return TEXT_COLOR_VALUES_KEBAB[color];
   return color;
 };
 
@@ -1051,6 +1094,12 @@ var isInlineElement = (as) => inlineElements.indexOf(as) !== -1;
 function getTypographyCn(value) {
   return convertCamelToHyphen(value);
 }
+var getColorCn = (color) => {
+  if (!isTextColor(color)) return null;
+  const [prefix2] = color.split("-", 1);
+  const key = `${prefix2}-color--${color.slice(prefix2.length + 1)}`;
+  return typographyStyles_default[key] || null;
+};
 
 // src/components/Icon/Icon.tsx
 var getSize = (iconSize) => {
@@ -2422,6 +2471,7 @@ var Typography = (props) => {
         id,
         cn(
           className,
+          getColorCn(color),
           Typography_default.container,
           externalLinkProp && typographyStyles_default["a--external"],
           typographyStyles_default[typographyCn],
@@ -2440,7 +2490,7 @@ var Typography = (props) => {
       style: {
         ...htmlPropsStyle,
         ...style,
-        color: color && getTextColor(color)
+        color: color && !isTextColor(color) ? getTextColor(color) : void 0
       },
       rel: relProp,
       target: targetProp,
@@ -2587,15 +2637,18 @@ var import_jsx_runtime173 = require("react/jsx-runtime");
 var Link = ({
   id,
   className,
-  htmlProps,
+  htmlProps = {},
   children,
   typographyType,
   withMargins,
   withVisited,
   external,
   target,
+  style,
+  color,
   ...rest
 }) => {
+  const { style: htmlPropsStyle, ...restHtmlProps } = htmlProps;
   return /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)(
     "a",
     {
@@ -2608,14 +2661,20 @@ var Link = ({
           withVisited && typographyStyles_default["a--visited"],
           typographyType && typographyStyles_default[getTypographyCn(typographyType)],
           typographyType && withMargins && typographyStyles_default[`${getTypographyCn(typographyType)}--margins`],
-          focusable
+          focusable,
+          getColorCn(color)
         ),
-        htmlProps,
+        restHtmlProps,
         rest
       ),
       ...rest,
       rel: "noopener noreferer",
       target: external ? "_blank" : target,
+      style: {
+        ...htmlPropsStyle,
+        ...style,
+        color: color && !isTextColor(color) ? getTextColor(color) : void 0
+      },
       children: [
         children,
         external && /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(Icon, { iconSize: "inherit", icon: OpenExternalIcon })
@@ -4635,9 +4694,6 @@ var Card_default = {
   "container--border": "Card_container--border",
   "container--navigation": "Card_container--navigation",
   "container--selection-control": "Card_container--selection-control",
-  "container--selection-control--disabled": "Card_container--selection-control--disabled",
-  "container--selection-control--readonly": "Card_container--selection-control--readonly",
-  "container--selection-control--error": "Card_container--selection-control--error",
   "container--expandable": "Card_container--expandable"
 };
 
@@ -4873,11 +4929,8 @@ var SelectionControl_default = {
   "group--column": "SelectionControl_group--column",
   label: "SelectionControl_label",
   "selection-control": "SelectionControl_selection-control",
-  "label--readonly": "SelectionControl_label--readonly",
   "label--checkbox": "SelectionControl_label--checkbox",
   "label--radio": "SelectionControl_label--radio",
-  "label--disabled": "SelectionControl_label--disabled",
-  "label--error": "SelectionControl_label--error",
   "label--no-text": "SelectionControl_label--no-text",
   "selection-control--radio": "SelectionControl_selection-control--radio"
 };
@@ -4901,8 +4954,6 @@ var SelectionControl = ({
 );
 var Label2 = ({
   disabled,
-  readOnly,
-  hasError,
   hasText,
   controlType,
   className,
@@ -4923,10 +4974,7 @@ var Label2 = ({
         SelectionControl_default[`label--${controlType}`],
         !hasText && SelectionControl_default["label--no-text"],
         typographyStyles_default["text-color--default"],
-        disabled && SelectionControl_default["label--disabled"],
-        disabled && typographyStyles_default["text-color--subtle"],
-        readOnly && SelectionControl_default["label--readonly"],
-        hasError && SelectionControl_default["label--error"]
+        disabled && typographyStyles_default["text-color--subtle"]
       ),
       ...rest
     }
@@ -4999,9 +5047,7 @@ var Checkbox = ({
   return /* @__PURE__ */ (0, import_jsx_runtime209.jsxs)(
     Label2,
     {
-      hasError,
       disabled: isDisabled,
-      readOnly: isReadOnly,
       htmlFor: uniqueId,
       hasText: hasLabel || hasChildren,
       controlType: "checkbox",
@@ -5259,9 +5305,7 @@ var RadioButton = ({
   return /* @__PURE__ */ (0, import_jsx_runtime212.jsxs)(
     Label2,
     {
-      hasError,
       disabled: isDisabled,
-      readOnly: isReadOnly,
       style,
       className: cn(className, htmlPropsClassName),
       hasText: hasLabel || hasChildren,
@@ -5473,6 +5517,10 @@ var CardSelectable = (props) => {
   const { cardType: cardTypeContext, tipId } = useCardSelectableContext();
   const cardType = cardTypeProp != null ? cardTypeProp : cardTypeContext;
   const group = cardTypeContext === "radio" ? radioGroup : checkboxGroup;
+  if (!cardType)
+    throw new Error(`
+Error: <CardSelectable> requires a \`cardType\` prop.
+Provide \`cardType\` either via a parent <CardSelectableGroup> or directly on the component.`);
   const {
     disabled = group == null ? void 0 : group.disabled,
     readOnly = group == null ? void 0 : group.readOnly,
@@ -5487,9 +5535,6 @@ var CardSelectable = (props) => {
     Card_default.container,
     Card_default[`container--${appearance}`],
     Card_default[`container--selection-control`],
-    readOnly && Card_default[`container--selection-control--readonly`],
-    disabled && Card_default[`container--selection-control--disabled`],
-    error && Card_default[`container--selection-control--error`],
     focus_default["has-focusable-input"]
   );
   const radioContextProps = {
@@ -5867,13 +5912,26 @@ CalendarCell.displayName = "CalendarCell";
 
 // src/components/VisuallyHidden/VisuallyHidden.tsx
 var import_jsx_runtime222 = require("react/jsx-runtime");
-var VisuallyHidden = (props) => {
-  const { id, className, htmlProps, as, ...rest } = props;
-  const cl = cn(className, utilStyles_default["visually-hidden"]);
-  if (as === "div") {
-    return /* @__PURE__ */ (0, import_jsx_runtime222.jsx)("div", { ...getBaseHTMLProps(id, cl, htmlProps, rest) });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime222.jsx)("span", { ...getBaseHTMLProps(id, cl, htmlProps, rest) });
+var VisuallyHidden = ({
+  id,
+  as: asProp,
+  className,
+  htmlProps,
+  ...rest
+}) => {
+  const as = asProp != null ? asProp : "span";
+  return /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(
+    ElementAs,
+    {
+      as,
+      ...getBaseHTMLProps(
+        id,
+        cn(className, utilStyles_default["visually-hidden"]),
+        htmlProps,
+        rest
+      )
+    }
+  );
 };
 VisuallyHidden.displayName = "VisuallyHidden";
 
@@ -6120,7 +6178,7 @@ function CalendarGrid({ state, ...props }) {
               className: cn(DateInput_default["calendar__grid-element"], ...typographyCn),
               children: [
                 "# ",
-                /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(VisuallyHidden, { as: "span", children: "Ukenummer" })
+                /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(VisuallyHidden, { children: "Ukenummer" })
               ]
             }
           ),
@@ -8176,7 +8234,7 @@ var FileUploader = (props) => {
                 }
               ),
               dropAreaLabel,
-              /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(VisuallyHidden, { as: "span", children: "velg fil med p\xE5f\xF8lgende knapp" }),
+              /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(VisuallyHidden, { children: "velg fil med p\xE5f\xF8lgende knapp" }),
               button
             ]
           }
@@ -8442,7 +8500,7 @@ var InlineEdit_default = {
 
 // src/components/InlineEdit/InlineEdit.utils.tsx
 var import_jsx_runtime267 = require("react/jsx-runtime");
-var inlineEditVisuallyHidden = (id, emptiable) => /* @__PURE__ */ (0, import_jsx_runtime267.jsxs)(VisuallyHidden, { id, as: "span", children: [
+var inlineEditVisuallyHidden = (id, emptiable) => /* @__PURE__ */ (0, import_jsx_runtime267.jsxs)(VisuallyHidden, { id, children: [
   "Escape, Enter eller Tab for \xE5 lagre.",
   " ",
   !emptiable && "Inputfeltet er ikke t\xF8mmbar."
@@ -11031,9 +11089,9 @@ var ProgressTrackerItem = (props) => {
           typographyStyles_default["body-medium"]
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime287.jsx)(VisuallyHidden, { as: "span", children: getVisuallyHiddenTextBefore(index) }),
+          /* @__PURE__ */ (0, import_jsx_runtime287.jsx)(VisuallyHidden, { children: getVisuallyHiddenTextBefore(index) }),
           children,
-          /* @__PURE__ */ (0, import_jsx_runtime287.jsx)(VisuallyHidden, { as: "span", children: getVisuallyHiddenTextAfter(completed) })
+          /* @__PURE__ */ (0, import_jsx_runtime287.jsx)(VisuallyHidden, { children: getVisuallyHiddenTextAfter(completed) })
         ]
       }
     )
@@ -11535,7 +11593,7 @@ var Search = ({
               componentSize
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime292.jsx)(VisuallyHidden, { id: suggestionsDescriptionId, as: "span", children: "Bla i s\xF8keforslag med piltaster n\xE5r listen er utvidet." })
+          /* @__PURE__ */ (0, import_jsx_runtime292.jsx)(VisuallyHidden, { id: suggestionsDescriptionId, children: "Bla i s\xF8keforslag med piltaster n\xE5r listen er utvidet." })
         ] }),
         hasValue && /* @__PURE__ */ (0, import_jsx_runtime292.jsx)(
           Button,
@@ -12090,7 +12148,7 @@ var CollapsibleRow = ({
       definingColumnCells,
       /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)(Table2.Cell, { type: "head", layout: "center", children: [
         "Utvid",
-        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(VisuallyHidden, { as: "span", children: "raden" })
+        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(VisuallyHidden, { children: "raden" })
       ] })
     ] }) });
   };
@@ -12944,7 +13002,7 @@ var Toggle = ({
           ),
           children,
           " ",
-          isLoading && /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(VisuallyHidden, { as: "span", children: "Innlastning p\xE5g\xE5r" })
+          isLoading && /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(VisuallyHidden, { children: "Innlastning p\xE5g\xE5r" })
         ] })
       ]
     }
@@ -13526,6 +13584,7 @@ ToggleButtonGroup.displayName = "ToggleButtonGroup";
   focusVisibleInset,
   focusVisibleTransitionValue,
   getBaseHTMLProps,
+  getColorCn,
   getDefaultText,
   getElementType,
   getInputWidth,