@norges-domstoler/dds-components 5.4.0 → 5.5.0

package/dist/components/Typography/Legend/Legend.js

@@ -0,0 +1,23 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { getBaseHTMLProps } from '../../../types/BaseComponentProps.js';
+import { Typography } from '../Typography/Typography.js';
+
+var Legend = /*#__PURE__*/forwardRef(function (props, ref) {
+  var id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      children = props.children,
+      rest = __rest(props, ["id", "className", "htmlProps", "children"]);
+
+  return jsx(Typography, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+    ref: ref,
+    as: "legend",
+    typographyType: "headingSans03"
+  }, {
+    children: children
+  }));
+});
+
+export { Legend };

package/dist/components/Typography/Legend/Legend.stories.d.ts

@@ -0,0 +1,28 @@
+import { LegendProps } from '..';
+declare type StoryTProps = {
+    text: string;
+} & LegendProps;
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLLegendElement>, "id" | "className"> & {
+        withMargins?: boolean | undefined;
+    } & {
+        children?: import("react").ReactNode;
+    } & Pick<import("react").HTMLAttributes<HTMLElement>, "style"> & {
+        htmlProps?: import("react").HTMLAttributes<HTMLLegendElement> | undefined;
+    } & import("react").RefAttributes<HTMLLegendElement>>;
+    argTypes: {
+        withMargins: {
+            control: {
+                type: string;
+            };
+        };
+        text: {
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: (args: StoryTProps) => JSX.Element;

package/dist/components/Typography/Legend/index.d.ts

@@ -0,0 +1 @@
+export * from './Legend';

package/dist/components/Typography/Link/Link.d.ts

@@ -0,0 +1,23 @@
+import { AnchorHTMLAttributes } from 'react';
+import { BaseComponentPropsWithChildren } from '../../../types';
+import { BaseTypographyProps, TypographyBodyType } from '../Typography/Typography.types';
+declare type PickedHTMLAttributes = Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'onClick' | 'href' | 'target'>;
+export declare type LinkProps = BaseComponentPropsWithChildren<HTMLAnchorElement, {
+    /**Spesifiserer om lenken fører til et eksternt nettsted eller åpnes i nytt vindu. Påvirker styling og setter `target` prop. */
+    external?: boolean;
+    /**Spesifiserer typografistil basert på utvalget for brødtekst.  */
+    typographyType?: TypographyBodyType;
+} & BaseTypographyProps & PickedHTMLAttributes, Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof PickedHTMLAttributes>>;
+export declare const Link: import("react").ForwardRefExoticComponent<Pick<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "target" | "onClick">, "className" | "id"> & {
+    /**Spesifiserer om lenken fører til et eksternt nettsted eller åpnes i nytt vindu. Påvirker styling og setter `target` prop. */
+    external?: boolean | undefined;
+    /**Spesifiserer typografistil basert på utvalget for brødtekst.  */
+    typographyType?: TypographyBodyType | undefined;
+} & {
+    withMargins?: boolean | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & Pick<import("react").HTMLAttributes<HTMLElement>, "style"> & PickedHTMLAttributes & {
+    htmlProps?: Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "target" | "onClick"> | undefined;
+} & import("react").RefAttributes<HTMLAnchorElement>>;
+export {};

package/dist/components/Typography/Link/Link.js

@@ -0,0 +1,45 @@
+import { __rest } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { getBaseHTMLProps } from '../../../types/BaseComponentProps.js';
+import { getAnchorStyling } from '../Typography.utils.js';
+import { Icon } from '../../Icon/Icon.js';
+import '../../../icons/utils/StyledSvg.js';
+import { OpenExternalIcon } from '../../../icons/tsx/openExternal.js';
+
+var StyledLink = styled.a.withConfig({
+  displayName: "Link__StyledLink",
+  componentId: "sc-6r1xu5-0"
+})(["", ""], function (_ref) {
+  var external = _ref.external,
+      typographyType = _ref.typographyType,
+      withMargins = _ref.withMargins;
+  return getAnchorStyling(external, undefined, typographyType, withMargins);
+});
+var Link = /*#__PURE__*/forwardRef(function (props, ref) {
+  var id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      children = props.children,
+      typographyType = props.typographyType,
+      external = props.external,
+      target = props.target,
+      rest = __rest(props, ["id", "className", "htmlProps", "children", "typographyType", "external", "target"]);
+
+  var linkProps = Object.assign(Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
+    typographyType: typographyType,
+    ref: ref,
+    rel: 'noopener noreferer',
+    target: external ? '_blank' : target ? target : undefined,
+    external: external
+  }), rest);
+  return jsxs(StyledLink, Object.assign({}, linkProps, {
+    children: [children, external && jsx(Icon, {
+      icon: OpenExternalIcon,
+      iconSize: "inherit"
+    })]
+  }));
+});
+
+export { Link };

package/dist/components/Typography/Link/Link.stories.d.ts

@@ -0,0 +1,47 @@
+import { LinkProps } from '.';
+declare type StoryTProps = {
+    text: string;
+} & LinkProps;
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "href" | "target">, "id" | "className"> & {
+        external?: boolean | undefined;
+        typographyType?: import("..").TypographyBodyType | undefined;
+    } & {
+        withMargins?: boolean | undefined;
+    } & {
+        children?: import("react").ReactNode;
+    } & Pick<import("react").HTMLAttributes<HTMLElement>, "style"> & {
+        onClick?: import("react").MouseEventHandler<HTMLAnchorElement> | undefined;
+        href?: string | undefined;
+        target?: import("react").HTMLAttributeAnchorTarget | undefined;
+    } & {
+        htmlProps?: Omit<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "href" | "target"> | undefined;
+    } & import("react").RefAttributes<HTMLAnchorElement>>;
+    argTypes: {
+        typographyType: {
+            control: {
+                type: string;
+            };
+        };
+        withMargins: {
+            control: {
+                type: string;
+            };
+        };
+        text: {
+            control: {
+                type: string;
+            };
+        };
+        href: {
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Overview: (args: StoryTProps) => JSX.Element;
+export declare const Default: (args: StoryTProps) => JSX.Element;
+export declare const Examples: () => JSX.Element;

package/dist/components/Typography/Link/index.d.ts

@@ -0,0 +1 @@
+export * from './Link';

package/dist/components/Typography/Paragraph/Paragraph.d.ts

@@ -0,0 +1,16 @@
+import { BaseComponentPropsWithChildren } from '../../../types';
+import { BaseTypographyProps, TypographyBodyType, TypographyLeadType } from '../Typography';
+export declare type ParagraphProps = BaseComponentPropsWithChildren<HTMLParagraphElement, {
+    /**Spesifiserer typografistil basert på utvalget for brødtekst og ingress.  */
+    typographyType?: TypographyBodyType | TypographyLeadType;
+} & BaseTypographyProps>;
+export declare const Paragraph: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLParagraphElement>, "id" | "className"> & {
+    /**Spesifiserer typografistil basert på utvalget for brødtekst og ingress.  */
+    typographyType?: TypographyBodyType | TypographyLeadType | undefined;
+} & {
+    withMargins?: boolean | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & Pick<import("react").HTMLAttributes<HTMLElement>, "style"> & {
+    htmlProps?: import("react").HTMLAttributes<HTMLParagraphElement> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>>;

package/dist/components/Typography/Paragraph/Paragraph.js

@@ -0,0 +1,25 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { getBaseHTMLProps } from '../../../types/BaseComponentProps.js';
+import { Typography } from '../Typography/Typography.js';
+
+var Paragraph = /*#__PURE__*/forwardRef(function (props, ref) {
+  var id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      children = props.children,
+      _props$typographyType = props.typographyType,
+      typographyType = _props$typographyType === void 0 ? 'bodySans02' : _props$typographyType,
+      rest = __rest(props, ["id", "className", "htmlProps", "children", "typographyType"]);
+
+  var paragraphProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
+    typographyType: typographyType,
+    ref: ref
+  });
+  return jsx(Typography, Object.assign({}, paragraphProps, {
+    children: children
+  }));
+});
+
+export { Paragraph };

package/dist/components/Typography/Paragraph/Paragraph.stories.d.ts

@@ -0,0 +1,35 @@
+import { ParagraphProps } from '.';
+declare type StoryTProps = {
+    text: string;
+} & ParagraphProps;
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLParagraphElement>, "id" | "className"> & {
+        typographyType?: import("..").TypographyBodyType | import("..").TypographyLeadType | undefined;
+    } & {
+        withMargins?: boolean | undefined;
+    } & {
+        children?: import("react").ReactNode;
+    } & Pick<import("react").HTMLAttributes<HTMLElement>, "style"> & {
+        htmlProps?: import("react").HTMLAttributes<HTMLParagraphElement> | undefined;
+    } & import("react").RefAttributes<HTMLParagraphElement>>;
+    argTypes: {
+        typographyType: {
+            control: {
+                type: string;
+            };
+        };
+        withMargins: {
+            control: {
+                type: string;
+            };
+        };
+        text: {
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: (args: StoryTProps) => JSX.Element;

package/dist/components/Typography/Paragraph/index.d.ts

@@ -0,0 +1 @@
+export * from './Paragraph';

package/dist/components/Typography/Typography/Typography.d.ts

@@ -0,0 +1,25 @@
+import { HTMLAttributes, AnchorHTMLAttributes } from 'react';
+import { OtherTypographyType, AnchorTypographyType, LabelTypographyType, TypographyComponentProps } from './Typography.types';
+import { BaseComponentProps } from '../../../types';
+declare type AnchorTypographyProps = BaseComponentProps<HTMLAnchorElement, TypographyComponentProps & {
+    /**nativ `href`-prop ved `typographyType='a'`.  */
+    href?: string | undefined;
+    /** Spesifiserer om lenka er ekstern ved `typographyType='a'` eller `as='a'`.*/
+    externalLink?: boolean;
+    /**nativ `target`-prop ved `typographyType='a'`.  */
+    target?: string;
+}, AnchorHTMLAttributes<HTMLAnchorElement>>;
+declare type LabelTypographyProps = BaseComponentProps<HTMLLabelElement, TypographyComponentProps, HTMLAttributes<HTMLLabelElement>>;
+declare type OtherTypographyProps = BaseComponentProps<HTMLElement, TypographyComponentProps, HTMLAttributes<HTMLElement>>;
+export declare type TypographyProps = ({
+    /**Styling basert på det typografiske utvalget definert i Figma. Returnerer default HTML tag for hver type. **OBS!** Ved bruk av `'a'` er det flere tilgjengelige props, se under.  */
+    typographyType?: AnchorTypographyType;
+} & AnchorTypographyProps) | ({
+    /**Styling basert på det typografiske utvalget definert i Figma. Returnerer default HTML tag for hver type. **OBS!** Ved bruk av `'a'` er det flere tilgjengelige props, se under.  */
+    typographyType?: LabelTypographyType;
+} & LabelTypographyProps) | ({
+    /**Styling basert på det typografiske utvalget definert i Figma. Returnerer default HTML tag for hver type. **OBS!** Ved bruk av `'a'` er det flere tilgjengelige props, se under.  */
+    typographyType?: OtherTypographyType;
+} & OtherTypographyProps);
+export declare const Typography: import("react").ForwardRefExoticComponent<TypographyProps & import("react").RefAttributes<HTMLElement>>;
+export {};

package/dist/components/Typography/Typography/Typography.js

@@ -0,0 +1,101 @@
+import { __rest } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { typographyTokens } from '../Typography.tokens.js';
+import { Icon } from '../../Icon/Icon.js';
+import '../../../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 { getBaseHTMLProps } from '../../../types/BaseComponentProps.js';
+import '../../../icons/utils/StyledSvg.js';
+import { OpenExternalIcon } from '../../../icons/tsx/openExternal.js';
+import { getAnchorStyling, getMarginStyling, getAdditionalFontStyle, getElementType } from '../Typography.utils.js';
+import { getTextColor } from '../../../utils/color.js';
+
+var StyledTypography = styled.p.withConfig({
+  displayName: "Typography__StyledTypography",
+  componentId: "sc-1tegrnl-0"
+})(["&::selection,*::selection{", "}", " ", " ", " color:", ";", " ", ";"], selection, function (_ref) {
+  var typographyType = _ref.typographyType,
+      externalLink = _ref.externalLink,
+      interactionProps = _ref.interactionProps;
+  return typographyType === 'a' ? css(["", ""], getAnchorStyling(externalLink, interactionProps)) : css(["color:", ";", ";"], typographyTokens.typographyType[typographyType].base.color, typographyTokens.typographyType[typographyType].base.font);
+}, function (_ref2) {
+  var interactionProps = _ref2.interactionProps;
+  return interactionProps && interactionProps.hover && css(["&:hover{", "}"], interactionProps.hover);
+}, function (_ref3) {
+  var interactionProps = _ref3.interactionProps;
+  return interactionProps && interactionProps.active && css(["&:active{", "}"], interactionProps.active);
+}, function (_ref4) {
+  var color = _ref4.color;
+  return getTextColor(color);
+}, function (_ref5) {
+  var typographyType = _ref5.typographyType,
+      as = _ref5.as,
+      withMargins = _ref5.withMargins;
+  return getMarginStyling(typographyType, as, withMargins);
+}, function (_ref6) {
+  var bold = _ref6.bold,
+      italic = _ref6.italic,
+      underline = _ref6.underline;
+  return getAdditionalFontStyle(bold, italic, underline);
+});
+
+var isAnchorProps = function isAnchorProps(props) {
+  return props.typographyType === 'a';
+};
+
+var Typography = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _a;
+
+  var _props$typographyType = props.typographyType,
+      typographyType = _props$typographyType === void 0 ? 'bodySans02' : _props$typographyType,
+      propAs = props.as,
+      children = props.children,
+      style = props.style,
+      id = props.id,
+      className = props.className,
+      _props$htmlProps = props.htmlProps,
+      htmlProps = _props$htmlProps === void 0 ? {} : _props$htmlProps,
+      rest = __rest(props, ["typographyType", "as", "children", "style", "id", "className", "htmlProps"]);
+
+  var htmlPropsStyle = htmlProps.style,
+      restHtmlProps = __rest(htmlProps, ["style"]);
+
+  var as = propAs ? propAs : getElementType(typographyType);
+  var relProp;
+  var targetProp;
+  var externalLinkProp;
+  var renderIcon = false;
+
+  if (isAnchorProps(props)) {
+    var externalLink = props.externalLink,
+        target = props.target;
+    renderIcon = (_a = as === 'a' && externalLink) !== null && _a !== void 0 ? _a : false;
+    relProp = as === 'a' ? 'noopener noreferer' : undefined;
+    targetProp = as !== 'a' ? undefined : externalLink ? '_blank' : target;
+    externalLinkProp = as === 'a' && externalLink ? externalLink : undefined;
+  }
+
+  var typographyProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, restHtmlProps, rest)), {
+    typographyType: typographyType,
+    as: as,
+    style: Object.assign(Object.assign({}, htmlPropsStyle), style),
+    rel: relProp,
+    target: targetProp,
+    externalLink: externalLinkProp
+  });
+  return jsxs(StyledTypography, Object.assign({
+    ref: ref
+  }, typographyProps, {
+    children: [children, renderIcon && jsx(Icon, {
+      icon: OpenExternalIcon,
+      iconSize: "inherit"
+    })]
+  }));
+});
+
+export { Typography };

package/dist/{cjs/components → components/Typography}/Typography/Typography.stories.d.ts

@@ -1,4 +1,4 @@
-import { TypographyProps } from '.';
+import { TypographyProps } from '..';
 declare type StoryTProps = {
     text: string;
 } & TypographyProps;
@@ -60,3 +60,4 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: (args: StoryTProps) => JSX.Element;
+export declare const Article: () => JSX.Element;

package/dist/components/Typography/Typography/Typography.types.d.ts

@@ -0,0 +1,37 @@
+import { CSSProperties, ElementType, HTMLAttributes, PropsWithChildren } from 'react';
+import { TextColor } from '../../../utils';
+declare type TypographyBodySansType = 'bodySans01' | 'bodySans02' | 'bodySans03' | 'bodySans04';
+declare type TypographyBodySerifType = 'bodySerif01' | 'bodySerif02' | 'bodySerif03' | 'bodySerif04';
+export declare type TypographyBodyType = TypographyBodySansType | TypographyBodySerifType;
+export declare type TypographyHeadingType = 'headingSans01' | 'headingSans02' | 'headingSans03' | 'headingSans04' | 'headingSans05' | 'headingSans06' | 'headingSans07' | 'headingSans08';
+export declare type TypographyLeadType = 'leadSans01' | 'leadSans02' | 'leadSans03' | 'leadSans04' | 'leadSans05';
+declare type TypographySupportingType = 'supportingStyleInputText01' | 'supportingStyleInputText02' | 'supportingStyleInputText03' | 'supportingStyleHelperText01' | 'supportingStylePlaceholderText01' | 'supportingStyleTiny01' | 'supportingStyleTiny02';
+export declare type AnchorTypographyType = 'a';
+export declare type LabelTypographyType = 'supportingStyleLabel01';
+export declare type OtherTypographyType = TypographyHeadingType | TypographyBodyType | TypographyLeadType | TypographySupportingType;
+export declare type TypographyType = AnchorTypographyType | LabelTypographyType | OtherTypographyType;
+export declare type StaticTypographyType = OtherTypographyType | LabelTypographyType;
+export declare type InlineElement = 'a' | 'abbr' | 'audio' | 'b' | 'bdi' | 'bdo' | 'big' | 'br' | 'button' | 'canvas' | 'cite' | 'code' | 'data' | 'datalist' | 'del' | 'dfn' | 'em' | 'embed' | 'i' | 'iframe' | 'img' | 'input' | 'ins' | 'kbd' | 'label' | 'map' | 'mark' | 'meter' | 'noscript' | 'object' | 'output' | 'picture' | 'progress' | 'q' | 'ruby' | 's' | 'samp' | 'script' | 'select' | 'slot' | 'small' | 'span' | 'strong' | 'sub' | 'sup' | 'svg' | 'template' | 'textarea' | 'time' | 'u' | 'var' | 'video' | 'wbr';
+export declare type TypographyInteractionStyling = {
+    hover?: CSSProperties;
+    active?: CSSProperties;
+};
+export declare type BaseTypographyProps = PropsWithChildren<{
+    /**Spesifiserer om tekstelementet skal ha spacing definert i Elsa. Brukes hovedsakelig i artikler og lignende. **OBS!** har forskjellig virkning på ulike typografityper. `body` og `lead`-typer får margin på bunnen, `heading`-typer får margin på bunnen og padding på toppen mens `supportingStyles` får margin topp og bunn. */
+    withMargins?: boolean;
+}> & Pick<HTMLAttributes<HTMLElement>, 'style'>;
+export declare type TypographyComponentProps = BaseTypographyProps & {
+    /**Tekstfarge fra utvalget eller custom. **OBS!** Bruk farger fra `@dds-design-tokens`. */
+    color?: TextColor;
+    /**Setter `bold` styling. */
+    bold?: boolean;
+    /**Setter `italic` styling. */
+    italic?: boolean;
+    /**Setter en linje under. */
+    underline?: boolean;
+    /**HTML tag som skal brukes istedenfor default definert via `typographyType`.  */
+    as?: ElementType;
+    /**Støtte for å enkelt kunne endre på hover- og active-styling. Bruk `@dds-design-tokens` til farger osv. */
+    interactionProps?: TypographyInteractionStyling;
+};
+export {};

package/dist/components/Typography/Typography/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Typography';
+export * from './Typography.types';