@norges-domstoler/dds-components 1.1.0 → 1.2.0

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

@@ -1,9 +1,8 @@
 import { CSSObject } from 'styled-components';
 export declare const buttonTokens: {
     base: CSSObject;
-    focusOutline: {
-        color: string;
-        width: string;
+    focus: {
+        base: CSSObject;
     };
     sizes: {
         small: {

package/dist/components/Checkbox/Checkbox.tokens.d.ts

@@ -52,9 +52,8 @@ export declare const checkboxTokens: {
     };
     container: {
         base: CSSObject;
-        focusOutline: {
-            color: string;
-            width: string;
+        focus: {
+            base: CSSObject;
         };
         withLabel: {
             base: CSSObject;

package/dist/components/Checkbox/CheckboxGroup.tokens.d.ts

@@ -1,5 +1,19 @@
+import { CSSObject } from 'styled-components';
 export declare const checkboxGroupTokens: {
     label: {
         spaceLeft: string;
     };
+    container: {
+        base: CSSObject;
+    };
+    groupContainer: {
+        direction: {
+            row: {
+                base: CSSObject;
+            };
+            column: {
+                base: CSSObject;
+            };
+        };
+    };
 };

package/dist/components/Drawer/Drawer.d.ts

@@ -0,0 +1,29 @@
+import { HTMLAttributes, ReactNode, RefObject } from 'react';
+import { WidthProperty, MinWidthProperty, MaxWidthProperty } from 'csstype';
+export declare type DrawerSize = 'small' | 'large';
+export declare type DrawerPlacement = 'left' | 'right';
+export declare type WidthProps = {
+    minWidth?: MinWidthProperty<string>;
+    maxWidth?: MaxWidthProperty<string>;
+    width?: WidthProperty<string>;
+};
+export declare type DrawerProps = {
+    isOpen?: boolean;
+    placement?: DrawerPlacement;
+    size?: DrawerSize;
+    onClose?: () => void;
+    parentElement?: HTMLElement;
+    header?: string | ReactNode;
+    widthProps?: WidthProps;
+    triggerRef?: RefObject<HTMLElement>;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const Drawer: import("react").ForwardRefExoticComponent<{
+    isOpen?: boolean | undefined;
+    placement?: DrawerPlacement | undefined;
+    size?: DrawerSize | undefined;
+    onClose?: (() => void) | undefined;
+    parentElement?: HTMLElement | undefined;
+    header?: string | ReactNode;
+    widthProps?: WidthProps | undefined;
+    triggerRef?: RefObject<HTMLElement> | undefined;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Drawer/Drawer.tokens.d.ts

@@ -0,0 +1,17 @@
+import { CSSObject } from 'styled-components';
+export declare const drawerTokens: {
+    container: {
+        base: CSSObject;
+        size: {
+            large: {
+                base: CSSObject;
+            };
+            small: {
+                base: CSSObject;
+            };
+        };
+    };
+    contentContainer: {
+        base: CSSObject;
+    };
+};

package/dist/components/Drawer/DrawerGroup.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+declare type drawerGroupProps = {
+    children: ReactNode;
+    drawerId?: string;
+    onOpen?: () => void;
+    onClose?: () => void;
+};
+export declare const DrawerGroup: ({ children, drawerId, onOpen, onClose }: drawerGroupProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+export * from './Drawer';
+export * from './DrawerGroup';

package/dist/components/RadioButton/RadioButton.tokens.d.ts

@@ -36,9 +36,8 @@ export declare const radioButtonTokens: {
     };
     container: {
         base: CSSObject;
-        focusOutline: {
-            color: string;
-            width: string;
+        focus: {
+            base: CSSObject;
         };
     };
 };

package/dist/components/RadioButton/RadioButtonGroup.tokens.d.ts

@@ -1,5 +1,19 @@
+import { CSSObject } from 'styled-components';
 export declare const radioButtonGroupTokens: {
     label: {
         spaceLeft: string;
     };
+    container: {
+        base: CSSObject;
+    };
+    groupContainer: {
+        direction: {
+            row: {
+                base: CSSObject;
+            };
+            column: {
+                base: CSSObject;
+            };
+        };
+    };
 };

package/dist/components/Select/Select.tokens.d.ts

@@ -49,7 +49,7 @@ export declare const selectTokens: {
     placeholder: {
         base: CSSObject;
     };
-    optionsList: {
+    menu: {
         base: CSSObject;
         spaceTop: number;
     };

package/dist/components/Table/Cell.tokens.d.ts

@@ -15,6 +15,9 @@ export declare const cellTokens: {
             icon: {
                 base: CSSObject;
             };
+            focus: {
+                base: CSSObject;
+            };
         };
     };
     data: {

package/dist/components/Table/Row.tokens.d.ts

@@ -17,6 +17,9 @@ export declare const rowTokens: {
         hover: {
             base: CSSObject;
         };
+        focus: {
+            base: CSSObject;
+        };
         mode: {
             sum: {
                 base: CSSObject;

package/dist/helpers/Paper/Paper.d.ts

@@ -0,0 +1 @@
+export declare const Paper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/helpers/Paper/Paper.tokens.d.ts

@@ -0,0 +1,4 @@
+import { CSSObject } from 'styled-components';
+export declare const paperTokens: {
+    base: CSSObject;
+};

package/dist/helpers/Paper/index.d.ts

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

package/dist/helpers/styling/danger.d.ts

@@ -0,0 +1,4 @@
+export declare const dangerInputfield: {
+    borderColor: string;
+    boxShadow: string;
+};

package/dist/helpers/styling/focus.d.ts

@@ -0,0 +1,9 @@
+export declare const focusInputfield: {
+    outline: string;
+    borderColor: string;
+    boxShadow: string;
+};
+export declare const focusDangerInputfield: {
+    borderColor: string;
+    boxShadow: string;
+};

package/dist/helpers/styling/focusVisible.d.ts

@@ -0,0 +1,35 @@
+export declare const outlineOffset = "2px";
+export declare const focusVisible: {
+    outline: string;
+    outlineOffset: string;
+};
+export declare const focusVisibleOnDark: {
+    outline: string;
+    outlineOffset: string;
+};
+export declare const focusVisibleLink: {
+    outline: string;
+    backgroundColor: string;
+    color: string;
+    textDecoration: string;
+};
+export declare const focusVisibleLinkOnDark: {
+    outline: string;
+    backgroundColor: string;
+    color: string;
+    textDecoration: string;
+};
+export declare const focusVisibleWithBorder: {
+    outline: string;
+    borderColor: string;
+    boxShadow: string;
+};
+export declare const focusVisibleThickWithBorderOnDark: {
+    outline: string;
+    borderColor: string;
+    boxShadow: string;
+};
+export declare const focusVisibleInset: {
+    outline: string;
+    boxShadow: string;
+};

package/dist/helpers/styling/hover.d.ts

@@ -0,0 +1,14 @@
+export declare const hoverWithBorder: {
+    borderColor: string;
+    boxShadow: string;
+};
+export declare const hoverInputfield: {
+    borderColor: string;
+    boxShadow: string;
+    backgroundColor: string;
+};
+export declare const hoverDangerInputfield: {
+    borderColor: string;
+    boxShadow: string;
+    backgroundColor: string;
+};

package/dist/helpers/styling/index.d.ts

@@ -1,2 +1,6 @@
 export * from './removeButtonStyling';
 export * from './visibilityTransition';
+export * from './focusVisible';
+export * from './hover';
+export * from './focus';
+export * from './danger';

package/dist/index.d.ts

@@ -24,5 +24,6 @@ export * from './components/Datepicker';
 export * from './components/SkipToContent';
 export * from './components/Tooltip';
 export * from './components/Modal';
+export * from './components/Drawer';
 export * from './components/OverflowMenu';
 export * from './components/Popover';