@norges-domstoler/dds-components 4.0.2 → 4.2.0

package/dist/cjs/types/BaseComponentProps.d.ts

@@ -0,0 +1,58 @@
+import { HTMLAttributes, PropsWithChildren } from 'react';
+/**
+ * Basetype for props som eksponeres til konsumenter av designsystemet.
+ * Lager en intersection-type med props som sendes inn og `id` og `htmlProps`
+ * slik at man kan ha `HTMLAttributes`-props på komponenter som eksponeres
+ * av designsystemet. Se også {@link BaseComponentPropsWithChildren} og
+ * {@link getBaseHTMLProps}.
+ *
+ * @template TElement Element-type som genereres av komponenten.
+ * @template TOtherProps Andre props komponenten skal eksponere til konsumenter.
+ * @template THTMLAttributesProps Standard `HTMLAttributes<T>` men kan overstyres for f.eks knapper hvis man trenger en annen basetype for `htmlProps`.
+ */
+export declare type BaseComponentProps<TElement extends Element, TOtherProps extends Record<string, unknown> = Record<string, unknown>, THTMLAttributesProps extends HTMLAttributes<TElement> = HTMLAttributes<TElement>> = {
+    /**Ekstra HTML-attributter som vil settes på elementet som genereres. Untatt `id` og `className` som settes på toppnivå. */
+    htmlProps?: THTMLAttributesProps;
+} & Pick<THTMLAttributesProps, 'id' | 'className'> & TOtherProps;
+/**
+ * Utvidelese av {@link BaseComponentProps} med prop for `children`.
+ *
+ * {@link BaseComponentProps}
+ */
+export declare type BaseComponentPropsWithChildren<T extends Element, TProps extends Record<string, unknown>, THTMLProps extends HTMLAttributes<T> = HTMLAttributes<T>> = BaseComponentProps<T, PropsWithChildren<TProps>, THTMLProps>;
+export declare const joinClassNames: (...classNames: (string | undefined)[]) => string;
+declare type GetBaseHTMLProps = {
+    <T extends Element>(id: HTMLAttributes<T>['id'], className: HTMLAttributes<T>['className'], htmlProps: HTMLAttributes<T> | undefined, unknownProps: object): HTMLAttributes<T> & object;
+    <T extends Element>(id: HTMLAttributes<T>['id'], htmlProps: HTMLAttributes<T> | undefined, unknownProps: object): HTMLAttributes<T> & object;
+};
+/**
+ * Slår sammen id, className, htmlProps og unknownProps til ett objekt
+ * som kan spreades som baseprops for en komponent. `unknownProps` er
+ * med for å sikre at aria- og data- attributter blir spreadet, alle
+ * komponenter må derfor ta hensyn til `...rest` når de leser props.
+ *
+ * Typisk bruk:
+ * ```
+ * const Props = BaseComponentProps<HTMLElement, {
+ *   propA: string,
+ *   propB: string,
+ * }>
+ *
+ * const MyComponent = (props: Props) => {
+ *   const { propA, propB, id, className, htmlProps, ...rest } = props;
+ *
+ *   const wrapperProps = getBaseHTMLProps(id, className, htmlProps, rest)
+ *
+ *   return <div {...wrapperProps}>innhold</div>
+ * }
+ * ```
+ * @param id id fra props til komponenten.
+ * @param className className for komponenten.
+ * @param htmlProps htmlProps fra komponenten.
+ * @param unknownProps andre ukjente props som skal spreades, kommer typisk fra `...rest` når man leser props til komponenten.
+ * @returns Objekt med alle argumentene som kan spreades.
+ *
+ * Kan også kalles uten `className`-parameteret. Oppførselen er lik.
+ */
+export declare const getBaseHTMLProps: GetBaseHTMLProps;
+export {};

package/dist/cjs/types/Direction.d.ts

@@ -0,0 +1 @@
+export declare type Direction = 'row' | 'column';

package/dist/cjs/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Direction';
+export * from './BaseComponentProps';

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

@@ -0,0 +1,8 @@
+/**
+ * Gir tilbake `T` med properties fra `K` som påkrevd gitt at `Condition` er `true`
+ *
+ * @template Condition
+ * @template T
+ * @template K
+ */
+export declare type WithRequiredIf<Condition extends boolean, T, K extends keyof T> = Omit<T, K> & Pick<true extends Condition ? Required<T> : T, K>;

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

@@ -0,0 +1,6 @@
+export declare type ColorAlphaFormat = 'hex8' | 'decimal';
+export declare const convertAlpha: (value: number | string, typeFrom: ColorAlphaFormat, typeTo: ColorAlphaFormat) => string | number | undefined;
+export declare const hexToRGBA: (hex: string) => string;
+export declare const addAlphaToRGB: (rgb: string, alpha: number | string) => string;
+export declare const RGBToHex: (value: string) => string;
+export declare const changeRGBAAlpha: (value: string, alpha: number) => string;

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

@@ -0,0 +1 @@
+export declare const combineHandlers: <T>(handler1?: Callback<T> | undefined, handler2?: Callback<T> | undefined) => Callback<T>;

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

@@ -0,0 +1 @@
+export declare function getScrollbarSize(document: Document): number;

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

@@ -0,0 +1,3 @@
+export declare const derivativeIdGenerator: (prefix: string, suffix: string, value?: string | number | boolean) => string | undefined;
+export declare const idArrayGenerator: (values: (string | undefined)[]) => string[] | undefined;
+export declare const spaceSeparatedIdListGenerator: (values: (string | undefined)[]) => string | undefined;

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

@@ -0,0 +1,5 @@
+export * from './combineHandlers';
+export * from './idGenerator';
+export * from './getScrollbarSize';
+export * from './text';
+export * from './color';

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

@@ -0,0 +1,2 @@
+export declare const calculateHeightWithLineHeight: (lineHeight: number, fontSize: number) => number;
+export declare const firstLetterToUpperCase: (text: string) => string;

package/dist/components/Breadcrumbs/Breadcrumb.js

@@ -0,0 +1,34 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Typography } from '../Typography/Typography.js';
+
+var isAnchorTypographyProps = function isAnchorTypographyProps(props) {
+  return props.href != undefined;
+};
+
+var Breadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+      rest = __rest(props, ["children"]);
+
+  if (isAnchorTypographyProps(props)) {
+    return jsx(Typography, Object.assign({
+      htmlProps: rest,
+      ref: ref,
+      typographyType: "a"
+    }, {
+      children: children
+    }));
+  }
+
+  return jsx(Typography, Object.assign({
+    htmlProps: rest,
+    ref: ref,
+    as: "span",
+    color: "interactive"
+  }, {
+    children: children
+  }));
+});
+
+export { Breadcrumb };

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

@@ -0,0 +1,22 @@
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+
+var Colors = ddsBaseTokens.colors,
+    Spacing = ddsBaseTokens.spacing,
+    FontPackages = ddsBaseTokens.fontPackages;
+var iconBase = {
+  color: Colors.DdsColorInteractiveBase,
+  marginLeft: Spacing.SizesDdsSpacingLocalX05,
+  marginRight: Spacing.SizesDdsSpacingLocalX05
+};
+var breadcrumbBase = Object.assign({}, FontPackages.body_sans_02.base);
+var breadcrumbTokens = {
+  breadcrumb: {
+    base: breadcrumbBase
+  },
+  icon: {
+    base: iconBase,
+    size: 'small'
+  }
+};
+
+export { breadcrumbTokens };

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,62 @@
+import { __rest } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, Children } from 'react';
+import styled from 'styled-components';
+import ChevronRightOutlinedIcon from '@mui/icons-material/ChevronRightOutlined';
+import ArrowBackOutlinedIcon from '@mui/icons-material/ArrowBackOutlined';
+import { breadcrumbTokens } from './Breadcrumb.tokens.js';
+import { IconWrapper } from '../IconWrapper/IconWrapper.js';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+
+var List = styled.ol.withConfig({
+  displayName: "Breadcrumbs__List",
+  componentId: "sc-xdj21o-0"
+})(["list-style:none;display:flex;flex-wrap:wrap;align-items:center;"]);
+var ListItem = styled.li.withConfig({
+  displayName: "Breadcrumbs__ListItem",
+  componentId: "sc-xdj21o-1"
+})(["align-items:center;display:flex;", ""], breadcrumbTokens.breadcrumb.base);
+var BreadcrumbIcon = styled(ChevronRightOutlinedIcon).withConfig({
+  displayName: "Breadcrumbs__BreadcrumbIcon",
+  componentId: "sc-xdj21o-2"
+})(["", ""], breadcrumbTokens.icon.base);
+var BackIcon = styled(ArrowBackOutlinedIcon).withConfig({
+  displayName: "Breadcrumbs__BackIcon",
+  componentId: "sc-xdj21o-3"
+})(["", ""], breadcrumbTokens.icon.base);
+var Breadcrumbs = /*#__PURE__*/forwardRef(function (props, ref) {
+  var smallScreen = props.smallScreen,
+      children = props.children,
+      id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["smallScreen", "children", "id", "className", "htmlProps"]);
+
+  var breadcrumbIconSize = breadcrumbTokens.icon.size;
+  var childrenArray = Children.toArray(children);
+  var breadcrumbChildren = smallScreen ? jsxs(ListItem, {
+    children: [jsx(IconWrapper, {
+      Icon: BackIcon,
+      iconSize: breadcrumbIconSize,
+      color: breadcrumbTokens.icon.base.color
+    }), childrenArray[childrenArray.length - 2]]
+  }) : childrenArray.map(function (item, index) {
+    return jsxs(ListItem, {
+      children: [index !== 0 ? jsx(IconWrapper, {
+        Icon: BreadcrumbIcon,
+        iconSize: breadcrumbIconSize,
+        color: breadcrumbTokens.icon.base.color
+      }) : '', item]
+    }, "breadcrumb-".concat(index));
+  });
+  return jsx("nav", Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+    ref: ref,
+    "aria-label": "br\xF8dsmulesti"
+  }, {
+    children: jsx(List, {
+      children: breadcrumbChildren
+    })
+  }));
+});
+
+export { Breadcrumbs };

package/dist/components/Button/Button.js

@@ -0,0 +1,90 @@
+import { __rest } from 'tslib';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { buttonTokens } from './Button.tokens.js';
+import { StyledIconWrapperSpan, ButtonWrapper, Label } from './Button.styles.js';
+import { Spinner } from '../Spinner/Spinner.js';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+import { IconWrapper } from '../IconWrapper/IconWrapper.js';
+
+var Button = /*#__PURE__*/forwardRef(function (props, ref) {
+  var label = props.label,
+      _props$purpose = props.purpose,
+      purpose = _props$purpose === void 0 ? 'primary' : _props$purpose,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'medium' : _props$size,
+      _props$iconPosition = props.iconPosition,
+      iconPosition = _props$iconPosition === void 0 ? 'left' : _props$iconPosition,
+      _props$appearance = props.appearance,
+      appearance = _props$appearance === void 0 ? 'filled' : _props$appearance,
+      href = props.href,
+      target = props.target,
+      _props$loading = props.loading,
+      loading = _props$loading === void 0 ? false : _props$loading,
+      _props$fullWidth = props.fullWidth,
+      fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
+      Icon = props.Icon,
+      onClick = props.onClick,
+      onFocus = props.onFocus,
+      onBlur = props.onBlur,
+      id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["label", "purpose", "size", "iconPosition", "appearance", "href", "target", "loading", "fullWidth", "Icon", "onClick", "onFocus", "onBlur", "id", "className", "htmlProps"]);
+
+  var as = href ? 'a' : 'button';
+  var hasLabel = !!label;
+  var hasIcon = !!Icon;
+  var wrapperProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
+    href: href,
+    label: label,
+    as: as,
+    rel: href ? 'noreferrer noopener' : undefined,
+    target: href && target ? target : undefined,
+    ref: ref,
+    appearance: appearance,
+    purpose: purpose,
+    iconPosition: iconPosition,
+    fullWidth: fullWidth,
+    hasLabel: hasLabel,
+    hasIcon: hasIcon,
+    isLoading: loading,
+    size: size,
+    onClick: onClick,
+    onFocus: onFocus,
+    onBlur: onBlur
+  });
+  var isIconButton = !hasLabel && hasIcon;
+
+  var iconElement = Icon && jsx(StyledIconWrapperSpan, Object.assign({
+    iconPosition: isIconButton ? undefined : iconPosition,
+    size: size,
+    isHidden: hasIcon && loading
+  }, {
+    children: jsx(IconWrapper, {
+      Icon: Icon,
+      iconSize: "inline"
+    })
+  }));
+
+  return jsxs(ButtonWrapper, Object.assign({}, wrapperProps, {
+    children: [!isIconButton && jsxs(Fragment, {
+      children: [iconPosition === 'left' && iconElement, jsx(Label, Object.assign({
+        isHidden: loading,
+        "aria-hidden": loading
+      }, {
+        children: label
+      })), iconPosition === 'right' && iconElement]
+    }), isIconButton && iconElement, loading && jsx(StyledIconWrapperSpan, Object.assign({
+      size: size,
+      absolutePosition: hasIcon || hasLabel
+    }, {
+      children: jsx(Spinner, {
+        color: buttonTokens.appearance[appearance][purpose].base.color,
+        size: buttonTokens.sizes[size].justIcon.base.fontSize
+      })
+    }))]
+  }));
+});
+
+export { Button };

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

@@ -0,0 +1,56 @@
+import styled, { css } from 'styled-components';
+import { typographyTokens } from '../Typography/Typography.tokens.js';
+import { buttonTokens } from './Button.tokens.js';
+import { focusVisibleTransitionValue } from '../../helpers/styling/focusVisible.js';
+
+var ButtonWrapper = styled.button.withConfig({
+  displayName: "Buttonstyles__ButtonWrapper",
+  componentId: "sc-14dutqk-0"
+})(["", " 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) {
+  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);
+}, 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);
+}, function (_ref4) {
+  var size = _ref4.size,
+      hasLabel = _ref4.hasLabel;
+  return hasLabel ? css(["", ""], buttonTokens.sizes[size].text.base) : css(["", ""], buttonTokens.sizes[size].justIcon.base);
+}, function (_ref5) {
+  var fullWidth = _ref5.fullWidth,
+      hasIcon = _ref5.hasIcon,
+      hasLabel = _ref5.hasLabel,
+      isLoading = _ref5.isLoading,
+      iconPosition = _ref5.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, typographyTokens.selection.base);
+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;
+  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 Label = styled.span.withConfig({
+  displayName: "Buttonstyles__Label",
+  componentId: "sc-14dutqk-2"
+})(["", ""], function (_ref9) {
+  var isHidden = _ref9.isHidden;
+  return isHidden && css(["visibility:hidden;"]);
+});
+
+export { ButtonWrapper, Label, StyledIconWrapperSpan };