@norges-domstoler/dds-components 0.0.28 → 1.0.0

package/README.md

@@ -6,13 +6,13 @@ React UI komponenter til bruk i Domstolenes tjenester.
 
 Sjekk ut [Domstolenes designsystem Elsa](https://design.domstol.no/) og [Storybook](https://domstolene.github.io/designsystem) for mer dokumentasjon og demoer.
 
-## Installasjon
+## 📦 Installasjon
 
 ```sh
 npm install @norges-domstoler/dds-components
 ```
 
-## Bruk
+## 🔨 Bruk
 
 ```js
 import * as React from 'react';
@@ -30,7 +30,7 @@ const App = () => (
 render(<App />, document.getElementById('root'));
 ```
 
-## Komponenter
+## 📃 Komponenter
 
 Sjekk [komponentstatus](https://design.domstol.no/987b33f71/p/438035-komponenter/b/160db9) for oppdatert status.
 
@@ -59,7 +59,7 @@ Tilgjengelige komponenter:
 - TextInput
 - Typography
 
-## Release av ny versjon
+## ⏫ Release av ny versjon
 
 Det brukes en egen workflow for release av ny versjon av `@norges-domstoler/dds-components` som kjører på publisering av ny github release. Her brukes `npm publish` for å publisere en ny versjon av pakken til npm sitt pakkeregister, hvor det nye versjonsnummeret leses fra `package.json`. For å lage en ny release gjøres følgende:
 
@@ -70,6 +70,6 @@ Det brukes en egen workflow for release av ny versjon av `@norges-domstoler/dds-
 
 For versjonering brukes [_semantisk versjonering_](https://semver.org/) for å holde ting organisert og for å enkelt kommunisere utviklingsløpet til pakken.
 
-## For bidragsytere
+## ⌨️ For bidragsytere
 
 Sjekk ut [guiden for bidragsytere](https://design.domstol.no/987b33f71/p/34c962-bidra/b/3611d5).

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

@@ -1,4 +1,3 @@
-import { IconWrapper } from '../../helpers/IconWrapper';
 import { ButtonAppearance, ButtonPurpose, ButtonSize, IconPosition } from './Button.types';
 declare type ButtonWrapperProps = {
     appearance: ButtonAppearance;
@@ -8,16 +7,13 @@ declare type ButtonWrapperProps = {
     hasIcon: boolean;
     hasLabel: boolean;
     isLoading: boolean;
+    iconPosition?: IconPosition;
 };
 export declare const ButtonWrapper: import("styled-components").StyledComponent<"button", any, ButtonWrapperProps, never>;
-declare type IconWithTextWrapperProps = {
-    iconPosition: IconPosition;
+declare type StyledIconWrapperSpanProps = {
+    iconPosition?: IconPosition;
     size: ButtonSize;
 };
-export declare const IconWithTextWrapper: import("styled-components").StyledComponent<typeof IconWrapper, any, IconWithTextWrapperProps, never>;
-declare type JustIconWrapperProps = {
-    size: ButtonSize;
-};
-export declare const JustIconWrapper: import("styled-components").StyledComponent<"span", any, JustIconWrapperProps, never>;
+export declare const StyledIconWrapperSpan: import("styled-components").StyledComponent<"span", any, StyledIconWrapperSpanProps, never>;
 export declare const Label: import("styled-components").StyledComponent<"span", any, {}, never>;
 export {};

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

@@ -42,6 +42,18 @@ export declare const buttonTokens: {
             };
             iconWithTextMargin: string;
         };
+        tiny: {
+            justIcon: {
+                base: CSSObject;
+            };
+            justIconWrapper: {
+                base: CSSObject;
+            };
+            text: {
+                base: CSSObject;
+            };
+            iconWithTextMargin: string;
+        };
     };
     appearance: {
         filled: {

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

@@ -2,7 +2,7 @@ import { SvgIconTypeMap } from '@material-ui/core/SvgIcon';
 import { OverridableComponent } from '@material-ui/core/OverridableComponent';
 import React, { ButtonHTMLAttributes } from 'react';
 export declare type ButtonPurpose = 'primary' | 'secondary' | 'danger';
-export declare type ButtonSize = 'small' | 'medium' | 'large';
+export declare type ButtonSize = 'tiny' | 'small' | 'medium' | 'large';
 export declare type ButtonAppearance = 'filled' | 'ghost' | 'rounded' | 'borderless';
 export declare type IconPosition = 'left' | 'right';
 export declare type ButtonProps = {

package/dist/components/Card/CardAccordion/CardAccordionBody.d.ts

@@ -1,9 +1,12 @@
 import { HTMLAttributes } from 'react';
+import * as CSS from 'csstype';
 export declare type CardAccordionBodyProps = {
     isExpanded?: boolean;
     headerId?: string;
+    paddingTop?: CSS.PaddingTopProperty<string>;
 } & HTMLAttributes<HTMLDivElement>;
 export declare const CardAccordionBody: import("react").ForwardRefExoticComponent<{
     isExpanded?: boolean | undefined;
     headerId?: string | undefined;
+    paddingTop?: string | undefined;
 } & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Card/CardAccordion/CardAccordionHeader.d.ts

@@ -1,11 +1,11 @@
-import { HTMLAttributes } from 'react';
+import { ButtonHTMLAttributes } from 'react';
 export declare type CardAccordionHeaderProps = {
     isExpanded?: boolean;
     toggleExpanded?: () => void;
     bodyId?: string;
-} & HTMLAttributes<HTMLDivElement>;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
 export declare const CardAccordionHeader: import("react").ForwardRefExoticComponent<{
     isExpanded?: boolean | undefined;
     toggleExpanded?: (() => void) | undefined;
     bodyId?: string | undefined;
-} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+} & ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Card/CardAccordion/CardAccordionHeader.tokens.d.ts

@@ -7,4 +7,11 @@ export declare const cardAccordionHeaderTokens: {
     hover: {
         base: CSSObject;
     };
+    chevronWrapper: {
+        base: CSSObject;
+    };
+    chevron: {
+        width: string;
+        height: string;
+    };
 };

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

@@ -0,0 +1,9 @@
+import { CSSObject } from 'styled-components';
+export declare const datepickerTokens: {
+    calendarIndicator: {
+        base: CSSObject;
+        focus: {
+            base: CSSObject;
+        };
+    };
+};

package/dist/components/InternalHeader/InternalHeader.styles.d.ts

@@ -1,6 +1,9 @@
 import { InternalHeaderProps } from './InternalHeader.types';
 export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const BannerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare type BannerProps = {
+    hasContextMenu?: boolean;
+};
+export declare const BannerWrapper: import("styled-components").StyledComponent<"div", any, BannerProps, never>;
 export declare const BannerLeftWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ApplicationNameWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const LovisaWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -15,4 +18,5 @@ export declare const ContextMenuList: import("styled-components").StyledComponen
 export declare const StyledDivider: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
     color?: import("../Divider").DividerColor | undefined;
 } & import("react").HTMLAttributes<HTMLHRElement> & import("react").RefAttributes<HTMLHRElement>>, any, {}, never>;
+export declare const ContextMenuGroup: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

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

@@ -11,6 +11,7 @@ export declare const internalHeaderTokens: {
     };
     banner: {
         base: CSSObject;
+        contextMenuSpacing: string;
     };
     bannerLeft: {
         base: CSSObject;
@@ -55,4 +56,7 @@ export declare const internalHeaderTokens: {
     icon: {
         base: CSSObject;
     };
+    contextGroup: {
+        base: CSSObject;
+    };
 };

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,15 @@
+import { HTMLAttributes, ReactNode, RefObject } from 'react';
+export declare type ModalProps = {
+    onClose?: () => void;
+    isOpen?: boolean;
+    parentElement?: HTMLElement;
+    header?: string | ReactNode;
+    triggerRef?: RefObject<HTMLElement>;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const Modal: import("react").ForwardRefExoticComponent<{
+    onClose?: (() => void) | undefined;
+    isOpen?: boolean | undefined;
+    parentElement?: HTMLElement | undefined;
+    header?: string | ReactNode;
+    triggerRef?: RefObject<HTMLElement> | undefined;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,19 @@
+import { CSSObject } from 'styled-components';
+export declare const modalTokens: {
+    base: CSSObject;
+    focus: {
+        base: CSSObject;
+    };
+    contentContainer: {
+        base: CSSObject;
+    };
+    actionsContainer: {
+        base: CSSObject;
+    };
+    bodyScrollable: {
+        base: CSSObject;
+        focus: {
+            base: CSSObject;
+        };
+    };
+};

package/dist/components/Modal/ModalActions.d.ts

@@ -0,0 +1,3 @@
+import { HTMLAttributes } from 'react';
+export declare type ModalActionsProps = HTMLAttributes<HTMLDivElement>;
+export declare const ModalActions: import("react").ForwardRefExoticComponent<ModalActionsProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Modal/ModalBody.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+export declare type ModalBodyProps = {
+    scrollable?: boolean;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const ModalBody: import("react").ForwardRefExoticComponent<{
+    scrollable?: boolean | undefined;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,3 @@
+export * from './Modal';
+export * from './ModalBody';
+export * from './ModalActions';

package/dist/helpers/Backdrop/Backdrop.d.ts

@@ -0,0 +1,5 @@
+declare type BackdropProps = {
+    isOpen: boolean;
+};
+export declare const Backdrop: import("styled-components").StyledComponent<"div", any, BackdropProps, never>;
+export {};

package/dist/helpers/Backdrop/Backdrop.utils.d.ts

@@ -0,0 +1,2 @@
+export declare function handleElementWithBackdropMount(container: HTMLElement): void;
+export declare function handleElementWithBackdropUnmount(container: HTMLElement): void;

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

@@ -0,0 +1,2 @@
+export * from './Backdrop';
+export * from './Backdrop.utils';

package/dist/helpers/Chevron/AnimatedChevronUpDown.d.ts

@@ -1,2 +1,8 @@
-import { SvgChevronProps } from './AnimatedChevronUpDown.styles';
-export declare const AnimatedChevronUpDown: ({ isUp }: SvgChevronProps) => JSX.Element;
+import * as CSS from 'csstype';
+declare type SvgChevronProps = {
+    isUp?: boolean;
+    height?: CSS.HeightProperty<string>;
+    width?: CSS.WidthProperty<string>;
+};
+export declare const AnimatedChevronUpDown: ({ isUp, height, width }: SvgChevronProps) => JSX.Element;
+export {};

package/dist/helpers/Chevron/AnimatedChevronUpDown.styles.d.ts

@@ -1,7 +1,7 @@
-export declare type SvgChevronProps = {
+export declare type StyledSvgChevronProps = {
     isUp?: boolean;
 };
-export declare const SvgChevron: import("styled-components").StyledComponent<"svg", any, SvgChevronProps, never>;
-export declare const SvgChevronlGroup: import("styled-components").StyledComponent<"g", any, SvgChevronProps, never>;
-export declare const SvgChevronlLeft: import("styled-components").StyledComponent<"path", any, SvgChevronProps, never>;
-export declare const SvgChevronlRight: import("styled-components").StyledComponent<"path", any, SvgChevronProps, never>;
+export declare const SvgChevron: import("styled-components").StyledComponent<"svg", any, StyledSvgChevronProps, never>;
+export declare const SvgChevronlGroup: import("styled-components").StyledComponent<"g", any, StyledSvgChevronProps, never>;
+export declare const SvgChevronlLeft: import("styled-components").StyledComponent<"path", any, StyledSvgChevronProps, never>;
+export declare const SvgChevronlRight: import("styled-components").StyledComponent<"path", any, StyledSvgChevronProps, never>;

package/dist/helpers/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/helpers/styling/index.d.ts

@@ -1 +1,2 @@
 export * from './removeButtonStyling';
+export * from './visibilityTransition';

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

@@ -0,0 +1 @@
+export declare const visibilityTransition: (open: boolean) => import("styled-components").FlattenSimpleInterpolation;

package/dist/hooks/index.d.ts

@@ -3,3 +3,5 @@ export * from './useOnClickOutside';
 export * from './useOnKeyDown';
 export * from './useReactPopper';
 export * from './useRoveFocus';
+export * from './useFocusTrap';
+export * from './useMountTransition';

package/dist/hooks/useFocusTrap.d.ts

@@ -0,0 +1 @@
+export declare function useFocusTrap<T extends HTMLElement>(active: boolean): import("react").RefObject<T>;

package/dist/hooks/useMountTransition.d.ts

@@ -0,0 +1 @@
+export declare const useMountTransition: (isMounted: boolean, unmountDelay: number) => boolean;

package/dist/index.d.ts

@@ -22,4 +22,5 @@ export * from './components/InternalHeader';
 export * from './components/Datepicker';
 export * from './components/SkipToContent';
 export * from './components/Tooltip';
+export * from './components/Modal';
 export * from './components/Popover';