@norges-domstoler/dds-components 5.4.0 → 5.5.0

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

@@ -1,230 +1,531 @@
-import { CSSObject } from 'styled-components';
-export declare const textColors: {
-    interactive: string;
-    primary: string;
-    danger: string;
-    success: string;
-    warning: string;
-    onLight: string;
-    onDark: string;
-    gray1: string;
-    gray2: string;
-    gray3: string;
-    gray4: string;
-    gray5: string;
-    gray6: string;
-    gray7: string;
-    gray8: string;
-    gray9: string;
-};
-export declare const textColorsArray: string[];
 export declare const typographyTokens: {
-    selection: {
-        base: CSSObject;
-    };
     typographyType: {
         a: {
-            base: CSSObject;
-            hover: {
-                base: CSSObject;
+            base: {
+                color: string;
+                gap: string;
             };
             margins: {
-                base: CSSObject;
-            };
-            focus: {
-                base: CSSObject;
-            };
-            bold: {
-                base: CSSObject;
+                marginTop: number;
+                marginBottom: string;
             };
-            icon: {
-                marginLeft: string;
+            hover: {
+                color: string;
             };
         };
         headingSans01: {
-            base: CSSObject;
+            base: {
+                color: string;
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+            };
             margins: {
-                base: CSSObject;
+                marginTop: number;
+                marginBottom: string;
+                paddingTop: string;
             };
         };
         headingSans02: {
-            base: CSSObject;
+            base: {
+                color: string;
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+            };
             margins: {
-                base: CSSObject;
+                marginTop: number;
+                marginBottom: string;
+                paddingTop: string;
             };
         };
         headingSans03: {
-            base: CSSObject;
+            base: {
+                color: string;
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+            };
             margins: {
-                base: CSSObject;
+                marginTop: number;
+                marginBottom: string;
+                paddingTop: string;
             };
         };
         headingSans04: {
-            base: CSSObject;
+            base: {
+                color: string;
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+            };
             margins: {
-                base: CSSObject;
+                marginTop: number;
+                marginBottom: string;
+                paddingTop: string;
             };
         };
         headingSans05: {
-            base: CSSObject;
+            base: {
+                color: string;
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+            };
             margins: {
-                base: CSSObject;
+                marginTop: number;
+                marginBottom: string;
+                paddingTop: string;
             };
         };
         headingSans06: {
-            base: CSSObject;
+            base: {
+                color: string;
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+            };
             margins: {
-                base: CSSObject;
+                marginTop: number;
+                marginBottom: string;
+                paddingTop: string;
             };
         };
         headingSans07: {
-            base: CSSObject;
+            base: {
+                color: string;
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+            };
             margins: {
-                base: CSSObject;
+                marginTop: number;
+                marginBottom: string;
+                paddingTop: string;
             };
         };
         headingSans08: {
-            base: CSSObject;
+            base: {
+                color: string;
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+            };
             margins: {
-                base: CSSObject;
+                marginTop: number;
+                marginBottom: string;
+                paddingTop: string;
             };
         };
         bodySans01: {
-            base: CSSObject;
+            base: {
+                color: string;
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+            };
             margins: {
-                base: CSSObject;
+                marginTop: number;
+                marginBottom: string;
             };
         };
         bodySans02: {
-            base: CSSObject;
+            base: {
+                color: string;
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+            };
             margins: {
-                base: CSSObject;
+                marginTop: number;
+                marginBottom: string;
             };
         };
         bodySans03: {
-            base: CSSObject;
+            base: {
+                color: string;
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+            };
             margins: {
-                base: CSSObject;
+                marginTop: number;
+                marginBottom: string;
             };
         };
         bodySans04: {
-            base: CSSObject;
+            base: {
+                color: string;
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+            };
             margins: {
-                base: CSSObject;
+                marginTop: number;
+                marginBottom: string;
             };
         };
         bodySerif01: {
-            base: CSSObject;
+            base: {
+                color: string;
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+            };
             margins: {
-                base: CSSObject;
+                marginTop: number;
+                marginBottom: string;
             };
         };
         bodySerif02: {
-            base: CSSObject;
+            base: {
+                color: string;
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+            };
             margins: {
-                base: CSSObject;
+                marginTop: number;
+                marginBottom: string;
             };
         };
         bodySerif03: {
-            base: CSSObject;
+            base: {
+                color: string;
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+            };
             margins: {
-                base: CSSObject;
+                marginTop: number;
+                marginBottom: string;
             };
         };
         bodySerif04: {
-            base: CSSObject;
+            base: {
+                color: string;
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+            };
             margins: {
-                base: CSSObject;
+                marginTop: number;
+                marginBottom: string;
             };
         };
         leadSans01: {
-            base: CSSObject;
+            base: {
+                color: string;
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+            };
             margins: {
-                base: CSSObject;
+                marginTop: number;
+                marginBottom: string;
             };
         };
         leadSans02: {
-            base: CSSObject;
+            base: {
+                color: string;
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+            };
             margins: {
-                base: CSSObject;
+                marginTop: number;
+                marginBottom: string;
             };
         };
         leadSans03: {
-            base: CSSObject;
+            base: {
+                color: string;
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+            };
             margins: {
-                base: CSSObject;
+                marginTop: number;
+                marginBottom: string;
             };
         };
         leadSans04: {
-            base: CSSObject;
+            base: {
+                color: string;
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+            };
             margins: {
-                base: CSSObject;
+                marginTop: number;
+                marginBottom: string;
             };
         };
         leadSans05: {
-            base: CSSObject;
+            base: {
+                color: string;
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+            };
             margins: {
-                base: CSSObject;
+                marginTop: number;
+                marginBottom: string;
             };
         };
         supportingStyleLabel01: {
-            base: CSSObject;
+            base: {
+                color: string;
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+                margin: number;
+            };
             margins: {
-                base: CSSObject;
+                marginTop: string;
+                marginBottom: string;
             };
         };
         supportingStyleHelperText01: {
-            base: CSSObject;
+            base: {
+                color: string;
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+                margin: number;
+            };
             margins: {
-                base: CSSObject;
+                marginTop: string;
+                marginBottom: string;
             };
         };
         supportingStyleInputText01: {
-            base: CSSObject;
+            base: {
+                color: string;
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+                margin: number;
+            };
             margins: {
-                base: CSSObject;
+                marginTop: string;
+                marginBottom: string;
             };
         };
         supportingStyleInputText02: {
-            base: CSSObject;
+            base: {
+                color: string;
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+                margin: number;
+            };
             margins: {
-                base: CSSObject;
+                marginTop: string;
+                marginBottom: string;
             };
         };
         supportingStyleInputText03: {
-            base: CSSObject;
+            base: {
+                color: string;
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+                margin: number;
+            };
             margins: {
-                base: CSSObject;
+                marginTop: string;
+                marginBottom: string;
             };
         };
         supportingStylePlaceholderText01: {
-            base: CSSObject;
+            base: {
+                color: string;
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+                margin: number;
+            };
             margins: {
-                base: CSSObject;
+                marginTop: string;
+                marginBottom: string;
             };
         };
         supportingStyleTiny01: {
-            base: CSSObject;
+            base: {
+                color: string;
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+                margin: number;
+            };
             margins: {
-                base: CSSObject;
+                marginTop: string;
+                marginBottom: string;
             };
         };
         supportingStyleTiny02: {
-            base: CSSObject;
+            base: {
+                color: string;
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+                margin: number;
+            };
             margins: {
-                base: CSSObject;
+                marginTop: string;
+                marginBottom: string;
             };
         };
     };
     style: {
         bold: {
-            base: CSSObject;
-        };
-        italic: {
-            base: CSSObject;
-        };
-        underline: {
-            base: CSSObject;
+            fontWeight: number;
         };
     };
 };

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

@@ -0,0 +1,9 @@
+import { ElementType } from 'react';
+import { TypographyType, TypographyHeadingType, InlineElement, TypographyInteractionStyling, StaticTypographyType } from './Typography/Typography.types';
+export declare const getElementType: (element: string) => ElementType;
+export declare const isHeading: (type: TypographyType) => type is TypographyHeadingType;
+export declare const inlineElements: ElementType[];
+export declare const isInlineElement: (as: ElementType) => as is InlineElement;
+export declare const getAdditionalFontStyle: (bold?: boolean, italic?: boolean, underline?: boolean) => import("styled-components").FlattenSimpleInterpolation;
+export declare const getMarginStyling: (typographyType: TypographyType, element: ElementType, withMargins?: boolean) => import("styled-components").FlattenSimpleInterpolation;
+export declare const getAnchorStyling: (external?: boolean, interactionStyling?: TypographyInteractionStyling, typographyType?: StaticTypographyType, withMargins?: boolean) => import("styled-components").FlattenSimpleInterpolation;

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

@@ -1,2 +1,7 @@
 export * from './Typography';
-export * from './Typography.types';
+export * from './Label';
+export * from './Paragraph';
+export * from './Heading';
+export * from './Link';
+export * from './Legend';
+export * from './Caption';

package/dist/cjs/components/Typography/stories/Examples.stories.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Article: () => JSX.Element;

package/dist/cjs/components/Typography/stories/TypographyComponents.stories.d.ts

@@ -0,0 +1,42 @@
+declare const _default: {
+    title: string;
+    argTypes: {
+        typographyType: {
+            control: {
+                type: string;
+            };
+        };
+        bold: {
+            control: {
+                type: string;
+            };
+        };
+        italic: {
+            control: {
+                type: string;
+            };
+        };
+        underline: {
+            control: {
+                type: string;
+            };
+        };
+        withMargins: {
+            control: {
+                type: string;
+            };
+        };
+        color: {
+            control: {
+                type: string;
+            };
+        };
+        text: {
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const ComponentsOverview: () => JSX.Element;