@norges-domstoler/dds-components 9.2.0-beta.0 → 9.2.0

package/dist/cjs/utils/color.d.ts

@@ -27,4 +27,4 @@ export declare type DDSTextColor = 'interactive' | 'primary' | 'danger' | 'warni
 export declare const textColorsArray: string[];
 export declare type TextColor = DDSTextColor | Property.Color;
 export declare function isTextColor(color: string): color is DDSTextColor;
-export declare const getTextColor: (color: TextColor) => string;
+export declare const getTextColor: (color: TextColor) => TextColor;

package/dist/components/Breadcrumbs/Breadcrumb.tokens.d.ts

@@ -1,16 +1,10 @@
+import { StaticTypographyType } from '../Typography';
+export declare const typographyType: StaticTypographyType;
 export declare const breadcrumbTokens: {
     list: {
         gap: string;
     };
     listItem: {
-        font: {
-            lineHeight: any;
-            fontSize: string;
-            letterSpacing: any;
-            fontFamily: any;
-            fontWeight: any;
-            fontStyle: any;
-        };
         gap: string;
     };
     icon: {

package/dist/components/Breadcrumbs/Breadcrumb.tokens.js

@@ -1,13 +1,12 @@
 import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
 
 var colors = ddsBaseTokens.colors,
-    spacing = ddsBaseTokens.spacing,
-    fontPackages = ddsBaseTokens.fontPackages;
+    spacing = ddsBaseTokens.spacing;
+var typographyType = 'bodySans02';
 var icon = {
   color: colors.DdsColorInteractiveBase
 };
 var listItem = {
-  font: fontPackages.body_sans_02.base,
   gap: spacing.SizesDdsSpacingLocalX05
 };
 var list = {
@@ -19,4 +18,4 @@ var breadcrumbTokens = {
   icon: icon
 };
 
-export { breadcrumbTokens };
+export { breadcrumbTokens, typographyType };

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -2,13 +2,14 @@ import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, Children } from 'react';
 import styled from 'styled-components';
-import { breadcrumbTokens } from './Breadcrumb.tokens.js';
+import { breadcrumbTokens, typographyType } from './Breadcrumb.tokens.js';
 import { Icon } from '../Icon/Icon.js';
 import '../../icons/utils/StyledSvg.js';
 import { ArrowLeftIcon } from '../../icons/tsx/arrowLeft.js';
 import { ChevronRightIcon } from '../../icons/tsx/chevronRight.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import { removeListStyling } from '../../helpers/styling/removeListStyling.js';
+import { getFontStyling } from '../Typography/Typography.utils.js';
 
 var icon = breadcrumbTokens.icon,
     list = breadcrumbTokens.list,
@@ -20,7 +21,7 @@ var List = styled.ol.withConfig({
 var ListItem = styled.li.withConfig({
   displayName: "Breadcrumbs__ListItem",
   componentId: "sc-xdj21o-1"
-})(["align-items:center;display:flex;gap:", ";", ""], listItem.gap, listItem.font);
+})(["align-items:center;display:flex;gap:", ";", ""], listItem.gap, getFontStyling(typographyType));
 var StyledIcon = styled(Icon).withConfig({
   displayName: "Breadcrumbs__StyledIcon",
   componentId: "sc-xdj21o-2"

package/dist/components/Button/Button.js

@@ -7,6 +7,9 @@ import { Spinner } from '../Spinner/Spinner.js';
 import { StyledIconWrapperSpan, ButtonWrapper, Label } from './Button.styles.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 
+var _tokens$button = buttonTokens.button,
+    sizes = _tokens$button.sizes,
+    appearances = _tokens$button.appearances;
 var Button = /*#__PURE__*/forwardRef(function (props, ref) {
   var label = props.label,
       _props$purpose = props.purpose,
@@ -57,9 +60,9 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
   var isIconButton = !hasLabel && hasIcon;
 
   var iconElement = icon && jsx(StyledIconWrapperSpan, Object.assign({
-    iconPosition: isIconButton ? undefined : iconPosition,
     size: size,
-    isHidden: hasIcon && loading
+    isHidden: hasIcon && loading,
+    justIcon: isIconButton
   }, {
     children: jsx(Icon, {
       icon: icon,
@@ -80,8 +83,8 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
       absolutePosition: hasIcon || hasLabel
     }, {
       children: jsx(Spinner, {
-        color: buttonTokens.appearance[appearance][purpose].base.color,
-        size: buttonTokens.sizes[size].justIcon.base.fontSize
+        color: appearances[appearance].purpose[purpose].base.color,
+        size: sizes[size].justIcon.icon.fontSize
       })
     }))]
   }));

package/dist/components/Button/Button.stories.d.ts

@@ -1,7 +1,7 @@
 import { ButtonProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "onFocus" | "onBlur" | "onClick" | "type">, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onClick" | "onFocus" | "onBlur">, "id" | "className"> & {
         size?: import("./Button.types").ButtonSize | undefined;
         label?: string | undefined;
         purpose?: import("./Button.types").ButtonPurpose | undefined;
@@ -13,12 +13,12 @@ declare const _default: {
         href?: string | undefined;
         target?: string | undefined;
     } & {
+        type?: "button" | "submit" | "reset" | undefined;
+        onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
         onFocus?: import("react").FocusEventHandler<HTMLButtonElement> | undefined;
         onBlur?: import("react").FocusEventHandler<HTMLButtonElement> | undefined;
-        onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
-        type?: "button" | "submit" | "reset" | undefined;
     } & {
-        htmlProps?: Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "onFocus" | "onBlur" | "onClick" | "type"> | undefined;
+        htmlProps?: Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onClick" | "onFocus" | "onBlur"> | undefined;
     } & import("react").RefAttributes<HTMLButtonElement>>;
     argTypes: {
         label: {

package/dist/components/Button/Button.styles.d.ts

@@ -15,6 +15,7 @@ declare type StyledIconWrapperSpanProps = {
     size: ButtonSize;
     absolutePosition?: boolean;
     isHidden?: boolean;
+    justIcon?: boolean;
 };
 export declare const StyledIconWrapperSpan: import("styled-components").StyledComponent<"span", any, StyledIconWrapperSpanProps, never>;
 declare type LabelProps = {

package/dist/components/Button/Button.styles.js

@@ -1,58 +1,83 @@
 import styled, { css } from 'styled-components';
-import { focusVisibleTransitionValue } from '../../helpers/styling/focusVisible.js';
+import { focusVisibleTransitionValue, focusVisible } from '../../helpers/styling/focusVisible.js';
 import '../../helpers/styling/hover.js';
 import '../../helpers/styling/focus.js';
 import '../../helpers/styling/danger.js';
 import { selection } from '../../helpers/styling/selection.js';
-import { buttonTokens } from './Button.tokens.js';
+import { getFontStyling } from '../Typography/Typography.utils.js';
+import { typographyTypes, buttonTokens } from './Button.tokens.js';
+
+var _tokens$button = buttonTokens.button,
+    base = _tokens$button.base,
+    sizes = _tokens$button.sizes,
+    appearances = _tokens$button.appearances;
+
+var getAppearanceAndPurposeStyling = function getAppearanceAndPurposeStyling(appearance, purpose) {
+  switch (appearance) {
+    case 'filled':
+    case 'rounded':
+      return css(["background-color:", ";border-color:", ";&:hover{background-color:", ";border-color:", ";}&:active{background-color:", ";border-color:", ";}"], appearances[appearance].purpose[purpose].base.backgroundColor, appearances[appearance].purpose[purpose].base.borderColor, appearances[appearance].purpose[purpose].hover.backgroundColor, appearances[appearance].purpose[purpose].hover.borderColor, appearances[appearance].purpose[purpose].active.backgroundColor, appearances[appearance].purpose[purpose].active.borderColor);
+
+    case 'ghost':
+      return css(["background-color:", ";border-color:", ";&:hover{color:", ";border-color:", ";box-shadow:", ";}&:active{color:", ";border-color:", ";box-shadow:", ";}"], appearances.ghost.base.backgroundColor, appearances.ghost.purpose[purpose].base.borderColor, appearances.ghost.purpose[purpose].hover.color, appearances.ghost.purpose[purpose].hover.borderColor, appearances.ghost.purpose[purpose].hover.boxShadow, appearances.ghost.purpose[purpose].active.color, appearances.ghost.purpose[purpose].active.borderColor, appearances.ghost.purpose[purpose].active.boxShadow);
+
+    case 'borderless':
+      return css(["background-color:", ";border-color:", ";text-decoration:", ";text-decoration-color:", ";&:hover{color:", ";text-decoration-color:", ";}&:active{color:", ";text-decoration-color:", ";}"], appearances.borderless.base.backgroundColor, appearances.borderless.base.borderColor, appearances.borderless.base.textDecoration, appearances.borderless.base.textDecorationColor, appearances.borderless.purpose[purpose].hover.color, appearances.borderless.purpose[purpose].hover.textDecorationColor, appearances.borderless.purpose[purpose].active.color, appearances.borderless.purpose[purpose].active.textDecorationColor);
+  }
+};
 
 var ButtonWrapper = styled.button.withConfig({
   displayName: "Buttonstyles__ButtonWrapper",
   componentId: "sc-14dutqk-0"
-})(["", " user-select:text;display:inline-flex;align-items:center;justify-content:center;height:fit-content;width:", ";cursor:pointer;box-shadow:none;text-decoration:none;@media (prefers-reduced-motion:no-preference){transition:background-color 0.2s,text-decoration-color 0.2s,box-shadow 0.2s,border-color 0.2s,color 0.2s,", ";}", " ", " ", " ", " &:focus-visible,&.focus-visible{", "}*::selection{", "}"], buttonTokens.base, function (_ref) {
+})(["border:", ";user-select:text;display:inline-flex;align-items:center;justify-content:center;height:fit-content;width:", ";cursor:pointer;box-shadow:none;text-decoration:none;@media (prefers-reduced-motion:no-preference){transition:background-color 0.2s,text-decoration-color 0.2s,box-shadow 0.2s,border-color 0.2s,color 0.2s,", ";}", " ", " ", " ", " ", " &:focus-visible,&.focus-visible{", "}*::selection{", "}"], base.border, function (_ref) {
   var fullWidth = _ref.fullWidth;
   return fullWidth ? '100%' : 'fit-content';
 }, focusVisibleTransitionValue, function (_ref2) {
   var appearance = _ref2.appearance,
       purpose = _ref2.purpose;
-  return css(["", " ", " &:hover{", "}&:active{", "}"], buttonTokens.appearance[appearance].base, buttonTokens.appearance[appearance][purpose].base, buttonTokens.appearance[appearance][purpose].hover.base, buttonTokens.appearance[appearance][purpose].active.base);
+  return css(["border-radius:", ";box-shadow:", ";color:", ";", ""], appearances[appearance].base.borderRadius, appearances[appearance].base.boxShadow, appearances[appearance].purpose[purpose].base.color, getAppearanceAndPurposeStyling(appearance, purpose));
 }, function (_ref3) {
   var hasIcon = _ref3.hasIcon,
       hasLabel = _ref3.hasLabel,
       appearance = _ref3.appearance,
       purpose = _ref3.purpose;
-  return hasIcon && !hasLabel && appearance === 'borderless' && css(["&:hover{", "}&:active{", "}"], buttonTokens.appearance[appearance][purpose].justIcon.hover.base, buttonTokens.appearance[appearance][purpose].justIcon.active.base);
+  return hasIcon && !hasLabel && appearance === 'borderless' && css(["&:hover{border-color:", ";box-shadow:", ";}&:active{border-color::", ";box-shadow:", ";}"], appearances[appearance].purpose[purpose].icon.hover.borderColor, appearances[appearance].purpose[purpose].icon.hover.boxShadow, appearances[appearance].purpose[purpose].icon.active.borderColor, appearances[appearance].purpose[purpose].icon.active.boxShadow);
 }, function (_ref4) {
-  var size = _ref4.size,
-      hasLabel = _ref4.hasLabel;
-  return hasLabel ? css(["", ""], buttonTokens.sizes[size].text.base) : css(["", ""], buttonTokens.sizes[size].justIcon.base);
+  var hasIcon = _ref4.hasIcon,
+      hasLabel = _ref4.hasLabel,
+      size = _ref4.size;
+  return hasIcon && hasLabel && css(["gap:", ";"], sizes[size].textAndIcon.gap);
 }, function (_ref5) {
-  var fullWidth = _ref5.fullWidth,
-      hasIcon = _ref5.hasIcon,
-      hasLabel = _ref5.hasLabel,
-      isLoading = _ref5.isLoading,
-      iconPosition = _ref5.iconPosition;
+  var size = _ref5.size,
+      hasLabel = _ref5.hasLabel;
+  return hasLabel ? css(["", " padding:", ";"], getFontStyling(typographyTypes[size]), sizes[size].text.padding) : css(["font-size:", ";padding:", ";"], sizes[size].justIcon.icon.fontSize, sizes[size].justIcon.icon.padding);
+}, function (_ref6) {
+  var fullWidth = _ref6.fullWidth,
+      hasIcon = _ref6.hasIcon,
+      hasLabel = _ref6.hasLabel,
+      isLoading = _ref6.isLoading,
+      iconPosition = _ref6.iconPosition;
   return fullWidth && (!hasIcon || !hasLabel || isLoading ? css(["justify-content:center;"]) : hasIcon && hasLabel && iconPosition === 'left' ? css(["justify-content:left;"]) : css(["justify-content:space-between;"]));
-}, buttonTokens.focus.base, selection);
+}, focusVisible, selection);
 var StyledIconWrapperSpan = styled.span.withConfig({
   displayName: "Buttonstyles__StyledIconWrapperSpan",
   componentId: "sc-14dutqk-1"
-})(["display:flex;align-items:center;justify-content:center;", " ", " ", ""], function (_ref6) {
-  var absolutePosition = _ref6.absolutePosition;
+})(["display:flex;align-items:center;justify-content:center;", " ", " ", ""], function (_ref7) {
+  var absolutePosition = _ref7.absolutePosition;
   return absolutePosition && css(["position:absolute;"]);
-}, function (_ref7) {
-  var isHidden = _ref7.isHidden;
-  return isHidden && css(["visibility:hidden;"]);
 }, function (_ref8) {
-  var size = _ref8.size,
-      iconPosition = _ref8.iconPosition;
-  return iconPosition === 'left' ? css(["margin-inline-end:", ";"], buttonTokens.sizes[size].iconWithTextMargin) : iconPosition === 'right' ? css(["margin-inline-start:", ";"], buttonTokens.sizes[size].iconWithTextMargin) : css(["", ""], buttonTokens.sizes[size].justIconWrapper.base);
+  var isHidden = _ref8.isHidden;
+  return isHidden && css(["visibility:hidden;"]);
+}, function (_ref9) {
+  var justIcon = _ref9.justIcon,
+      size = _ref9.size;
+  return justIcon && css(["height:", ";width:", ";"], sizes[size].justIcon.wrapper.height, sizes[size].justIcon.wrapper.width);
 });
 var Label = styled.span.withConfig({
   displayName: "Buttonstyles__Label",
   componentId: "sc-14dutqk-2"
-})(["", ""], function (_ref9) {
-  var isHidden = _ref9.isHidden;
+})(["", ""], function (_ref10) {
+  var isHidden = _ref10.isHidden;
   return isHidden && css(["visibility:hidden;"]);
 });