@norges-domstoler/dds-components 5.4.0 → 5.5.0

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

@@ -0,0 +1,10 @@
+import { BaseComponentPropsWithChildren } from '../../../types';
+import { BaseTypographyProps } from '../Typography';
+export declare type LegendProps = BaseComponentPropsWithChildren<HTMLLegendElement, BaseTypographyProps>;
+export declare const Legend: 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>>;

package/dist/cjs/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/cjs/components/Typography/Legend/index.d.ts

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

package/dist/cjs/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/cjs/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/cjs/components/Typography/Link/index.d.ts

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

package/dist/cjs/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/cjs/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/cjs/components/Typography/Paragraph/index.d.ts

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

package/dist/cjs/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 → cjs/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/cjs/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/cjs/components/Typography/Typography/index.d.ts

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