@norges-domstoler/dds-components 0.0.2 → 0.0.6

package/README.md

@@ -1,15 +1,61 @@
-# Components
-
-UI komponenter til bruk i Domstolenes løsninger.
-
-## Installasjon
-
-innholdet kommer snart
-
-## Bruk
-
-innholdet kommer snart
-
-## Komponenter
-
-innholdet kommer snart
+# @norges-domstoler/dds-components
+
+[![Version](https://img.shields.io/npm/v/@norges-domstoler/dds-components)](https://www.npmjs.com/package/@norges-domstoler/dds-components)
+
+_biblioteket er under arbeid_
+
+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
+
+```sh
+npm install @norges-domstoler/dds-components
+```
+
+## Bruk
+
+```js
+import * as React from 'react';
+import { render } from 'react-dom';
+import { Button, TextInput } from '@norges-domstoler/dds-components';
+
+const App = () => (
+  <>
+    <TextInput label="Input" />
+    <Button label="Primary" />
+    <Button purpose="secondary" appearance="ghost" label="Secondary" />
+  </>
+);
+
+render(<App />, document.getElementById('root'));
+```
+
+## Komponenter
+
+Sjekk [komponentstatus](https://design.domstol.no/987b33f71/p/438035-komponenter/b/160db9) for oppdatert status.
+
+Tilgjengelige komponenter:
+
+- Breadcrumbs
+- Button
+- Checkbox
+- DescriptionList
+- Divider
+- GlobalMessage
+- IconWrapper
+- List
+- LocalMessage
+- Pagination
+- RadioButton
+- Search
+- Select
+- Spinner
+- Table
+- TextInput
+- Typography
+
+## For bidragsytere
+
+Sjekk ut [guiden for bidragsytere](https://design.domstol.no/987b33f71/p/34c962-bidra/b/3611d5).

package/dist/components/Breadcrumbs/Breadcrumb.d.ts

@@ -0,0 +1,4 @@
+import { AnchorHTMLAttributes } from 'react';
+import { TypographyProps } from '../Typography';
+export declare type BreadcrumbProps = {} & (TypographyProps & AnchorHTMLAttributes<HTMLAnchorElement>);
+export declare const Breadcrumb: import("react").ForwardRefExoticComponent<BreadcrumbProps & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/components/Breadcrumbs/Breadcrumb.tokens.d.ts

@@ -0,0 +1,7 @@
+import { CSSObject } from 'styled-components';
+export declare const breadcrumbTokens: {
+    icon: {
+        base: CSSObject;
+        size: string;
+    };
+};

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts

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

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

@@ -0,0 +1,2 @@
+export * from './Breadcrumb';
+export * from './Breadcrumbs';

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

@@ -0,0 +1,35 @@
+import React, { ButtonHTMLAttributes } from 'react';
+import { SvgIconTypeMap } from '@material-ui/core/SvgIcon';
+import { OverridableComponent } from '@material-ui/core/OverridableComponent';
+export declare type ButtonPurpose = 'primary' | 'secondary' | 'danger';
+export declare type ButtonSize = 'small' | 'medium' | 'large';
+export declare type ButtonAppearance = 'filled' | 'ghost' | 'rounded' | 'borderless';
+export declare type IconPosition = 'left' | 'right';
+export declare type ButtonProps = {
+    size?: ButtonSize;
+    label?: string;
+    purpose?: ButtonPurpose;
+    iconPosition?: IconPosition;
+    appearance?: ButtonAppearance;
+    href?: string;
+    target?: string;
+    loading?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    Icon?: OverridableComponent<SvgIconTypeMap<{}, 'svg'>>;
+    fullWidth?: boolean;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+export declare const Button: React.ForwardRefExoticComponent<{
+    size?: ButtonSize | undefined;
+    label?: string | undefined;
+    purpose?: ButtonPurpose | undefined;
+    iconPosition?: IconPosition | undefined;
+    appearance?: ButtonAppearance | undefined;
+    href?: string | undefined;
+    target?: string | undefined;
+    loading?: boolean | undefined;
+    className?: string | undefined;
+    style?: React.CSSProperties | undefined;
+    Icon?: OverridableComponent<SvgIconTypeMap<{}, "svg">> | undefined;
+    fullWidth?: boolean | undefined;
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,192 @@
+import { CSSObject } from 'styled-components';
+export declare const buttonTokens: {
+    base: CSSObject;
+    focusOutline: {
+        color: string;
+        width: string;
+    };
+    sizes: {
+        small: {
+            justIcon: {
+                base: CSSObject;
+            };
+            justIconWrapper: {
+                base: CSSObject;
+            };
+            text: {
+                base: CSSObject;
+            };
+            iconWithTextMargin: string;
+        };
+        medium: {
+            justIcon: {
+                base: CSSObject;
+            };
+            justIconWrapper: {
+                base: CSSObject;
+            };
+            text: {
+                base: CSSObject;
+            };
+            iconWithTextMargin: string;
+        };
+        large: {
+            justIcon: {
+                base: CSSObject;
+            };
+            justIconWrapper: {
+                base: CSSObject;
+            };
+            text: {
+                base: CSSObject;
+            };
+            iconWithTextMargin: string;
+        };
+    };
+    appearance: {
+        filled: {
+            base: CSSObject;
+            primary: {
+                base: CSSObject;
+                hover: {
+                    base: CSSObject;
+                };
+                active: {
+                    base: CSSObject;
+                };
+            };
+            secondary: {
+                base: CSSObject;
+                hover: {
+                    base: CSSObject;
+                };
+                active: {
+                    base: CSSObject;
+                };
+            };
+            danger: {
+                base: CSSObject;
+                hover: {
+                    base: CSSObject;
+                };
+                active: {
+                    base: CSSObject;
+                };
+            };
+        };
+        ghost: {
+            base: CSSObject;
+            primary: {
+                base: CSSObject;
+                hover: {
+                    base: CSSObject;
+                };
+                active: {
+                    base: CSSObject;
+                };
+            };
+            secondary: {
+                base: CSSObject;
+                hover: {
+                    base: CSSObject;
+                };
+                active: {
+                    base: CSSObject;
+                };
+            };
+            danger: {
+                base: CSSObject;
+                hover: {
+                    base: CSSObject;
+                };
+                active: {
+                    base: CSSObject;
+                };
+            };
+        };
+        borderless: {
+            base: CSSObject;
+            primary: {
+                base: CSSObject;
+                hover: {
+                    base: CSSObject;
+                };
+                active: {
+                    base: CSSObject;
+                };
+                justIcon: {
+                    hover: {
+                        base: CSSObject;
+                    };
+                    active: {
+                        base: CSSObject;
+                    };
+                };
+            };
+            secondary: {
+                base: CSSObject;
+                hover: {
+                    base: CSSObject;
+                };
+                active: {
+                    base: CSSObject;
+                };
+                justIcon: {
+                    hover: {
+                        base: CSSObject;
+                    };
+                    active: {
+                        base: CSSObject;
+                    };
+                };
+            };
+            danger: {
+                base: CSSObject;
+                hover: {
+                    base: CSSObject;
+                };
+                active: {
+                    base: CSSObject;
+                };
+                justIcon: {
+                    hover: {
+                        base: CSSObject;
+                    };
+                    active: {
+                        base: CSSObject;
+                    };
+                };
+            };
+        };
+        rounded: {
+            base: CSSObject;
+            primary: {
+                base: CSSObject;
+                hover: {
+                    base: CSSObject;
+                };
+                active: {
+                    base: CSSObject;
+                };
+            };
+            secondary: {
+                base: CSSObject;
+                hover: {
+                    base: CSSObject;
+                };
+                active: {
+                    base: CSSObject;
+                };
+            };
+            danger: {
+                base: CSSObject;
+                hover: {
+                    base: CSSObject;
+                };
+                active: {
+                    base: CSSObject;
+                };
+            };
+        };
+    };
+};

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

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

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

@@ -1,15 +1,19 @@
 import React, { InputHTMLAttributes } from 'react';
 export declare type CheckboxProps = {
-    label: string;
+    label?: string;
     error?: boolean;
     disabled?: boolean;
+    readOnly?: boolean;
+    indeterminate?: boolean;
     className?: string;
     style?: React.CSSProperties;
 } & InputHTMLAttributes<HTMLInputElement>;
 export declare const Checkbox: React.ForwardRefExoticComponent<{
-    label: string;
+    label?: string | undefined;
     error?: boolean | undefined;
     disabled?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    indeterminate?: boolean | undefined;
     className?: string | undefined;
     style?: React.CSSProperties | undefined;
 } & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,66 @@
+import { CSSObject } from 'styled-components';
+export declare const checkboxTokens: {
+    checkbox: {
+        base: CSSObject;
+        spaceLeft: string;
+        hover: {
+            base: CSSObject;
+        };
+        disabled: {
+            base: CSSObject;
+        };
+        readOnly: {
+            base: CSSObject;
+        };
+        checked: {
+            base: CSSObject;
+            hover: {
+                base: CSSObject;
+            };
+            disabled: {
+                base: CSSObject;
+            };
+            readOnly: {
+                base: CSSObject;
+            };
+        };
+        indeterminate: {
+            base: CSSObject;
+            hover: {
+                base: CSSObject;
+            };
+            disabled: {
+                base: CSSObject;
+            };
+            readOnly: {
+                base: CSSObject;
+            };
+        };
+        danger: {
+            base: CSSObject;
+            hover: {
+                base: CSSObject;
+            };
+        };
+    };
+    checkmark: {
+        base: CSSObject;
+        color: string;
+        indeterminate: {
+            base: CSSObject;
+        };
+    };
+    container: {
+        base: CSSObject;
+        focusOutline: {
+            color: string;
+            width: string;
+        };
+        withLabel: {
+            base: CSSObject;
+        };
+        noLabel: {
+            base: CSSObject;
+        };
+    };
+};

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

@@ -0,0 +1,14 @@
+import React, { HTMLAttributes } from 'react';
+declare type Direction = 'column' | 'row';
+export declare type CheckboxGroupProps = {
+    label?: string;
+    direction?: Direction;
+    groupId?: string;
+    errorMessage?: string;
+    required?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const CheckboxGroup: ({ label, direction, errorMessage, required, groupId, children, className, style, ...rest }: CheckboxGroupProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,5 @@
+export declare const checkboxGroupTokens: {
+    label: {
+        spaceLeft: string;
+    };
+};

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

@@ -1 +1,2 @@
 export * from './Checkbox';
+export * from './CheckboxGroup';

package/dist/components/CheckboxTest/CheckboxTest.d.ts

@@ -0,0 +1,15 @@
+import React, { InputHTMLAttributes } from 'react';
+export declare type CheckboxTestProps = {
+    label: string;
+    error?: boolean;
+    disabled?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+} & InputHTMLAttributes<HTMLInputElement>;
+export declare const CheckboxTest: React.ForwardRefExoticComponent<{
+    label: string;
+    error?: boolean | undefined;
+    disabled?: boolean | undefined;
+    className?: string | undefined;
+    style?: React.CSSProperties | undefined;
+} & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;

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

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

package/dist/components/DescriptionList/DescriptionList.d.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from 'react';
+export declare type DescriptionListAppearance = 'small' | 'bold';
+export declare type DescriptionListProps = {
+    appearance?: DescriptionListAppearance;
+} & HTMLAttributes<HTMLDListElement>;
+export declare const DescriptionList: import("react").ForwardRefExoticComponent<{
+    appearance?: DescriptionListAppearance | undefined;
+} & HTMLAttributes<HTMLDListElement> & import("react").RefAttributes<HTMLDListElement>>;

package/dist/components/DescriptionList/DescriptionListDesc.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from 'react';
+import { OverridableComponent } from '@material-ui/core/OverridableComponent';
+import { SvgIconTypeMap } from '@material-ui/core';
+export declare type DescriptionListDescProps = {
+    Icon?: OverridableComponent<SvgIconTypeMap<{}, 'svg'>>;
+} & HTMLAttributes<HTMLElement>;
+export declare const DescriptionListDesc: import("react").ForwardRefExoticComponent<{
+    Icon?: OverridableComponent<SvgIconTypeMap<{}, "svg">> | undefined;
+} & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;

package/dist/components/DescriptionList/DescriptionListDesc.tokens.d.ts

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

package/dist/components/DescriptionList/DescriptionListGroup.d.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from 'react';
+import * as CSS from 'csstype';
+export declare type DescriptionListGroupProps = {
+    margin?: CSS.MarginProperty<string>;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const DescriptionListGroup: import("react").ForwardRefExoticComponent<{
+    margin?: string | undefined;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/DescriptionList/DescriptionListGroup.tokens.d.ts

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

package/dist/components/DescriptionList/DescriptionListTerm.d.ts

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

package/dist/components/DescriptionList/DescriptionListTerm.tokens.d.ts

@@ -0,0 +1,13 @@
+import { CSSObject } from 'styled-components';
+export declare const descriptionListTermTokens: {
+    appearance: {
+        small: {
+            base: CSSObject;
+        };
+        bold: {
+            base: CSSObject;
+        };
+    };
+    unwrappedTopAndBottomSpace: string;
+    unwrappedBetweenSpace: string;
+};

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

@@ -0,0 +1,4 @@
+export * from './DescriptionList';
+export * from './DescriptionListTerm';
+export * from './DescriptionListDesc';
+export * from './DescriptionListGroup';

package/dist/components/Divider/Divider.d.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from 'react';
+export declare type DividerColor = 'primary' | 'primaryLighter';
+export declare type DividerProps = {
+    color?: DividerColor;
+} & HTMLAttributes<HTMLHRElement>;
+export declare const Divider: import("react").ForwardRefExoticComponent<{
+    color?: DividerColor | undefined;
+} & HTMLAttributes<HTMLHRElement> & import("react").RefAttributes<HTMLHRElement>>;

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

@@ -0,0 +1,8 @@
+import { CSSObject } from 'styled-components';
+export declare const dividerColors: {
+    primary: string;
+    primaryLighter: string;
+};
+export declare const dividerTokens: {
+    base: CSSObject;
+};

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

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

package/dist/components/GlobalMessage/GlobalMessage.d.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes } from 'react';
+export declare type GlobalMessagePurpose = 'info' | 'warning' | 'danger';
+export declare type GlobalMessageProps = {
+    message?: string;
+    purpose?: GlobalMessagePurpose;
+    closable?: boolean;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const GlobalMessage: import("react").ForwardRefExoticComponent<{
+    message?: string | undefined;
+    purpose?: GlobalMessagePurpose | undefined;
+    closable?: boolean | undefined;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,47 @@
+import { CSSObject } from 'styled-components';
+export declare const globalMessageTokens: {
+    container: {
+        base: CSSObject;
+        info: {
+            base: CSSObject;
+        };
+        danger: {
+            base: CSSObject;
+        };
+        warning: {
+            base: CSSObject;
+        };
+    };
+    contentContainer: {
+        base: CSSObject;
+        withClosable: {
+            base: CSSObject;
+        };
+    };
+    icon: {
+        marginRight: string;
+        info: {
+            icon: import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").SvgIconTypeMap<{}, "svg">>;
+            color: string;
+        };
+        danger: {
+            icon: import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").SvgIconTypeMap<{}, "svg">>;
+            color: string;
+        };
+        warning: {
+            icon: import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").SvgIconTypeMap<{}, "svg">>;
+            color: string;
+        };
+    };
+    button: {
+        info: {
+            purpose: string;
+        };
+        danger: {
+            purpose: string;
+        };
+        warning: {
+            purpose: string;
+        };
+    };
+};

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

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

package/dist/components/List/List.d.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes } from 'react';
+import { TypographyBodyType } from '../Typography';
+export declare type ListType = 'ordered' | 'unordered';
+export declare type ListTypographyType = TypographyBodyType | 'inherit';
+export declare type ListProps = {
+    listType?: ListType;
+    typographyType?: ListTypographyType;
+} & HTMLAttributes<HTMLUListElement | HTMLOListElement>;
+export declare const List: import("react").ForwardRefExoticComponent<{
+    listType?: ListType | undefined;
+    typographyType?: ListTypographyType | undefined;
+} & HTMLAttributes<HTMLUListElement | HTMLOListElement> & import("react").RefAttributes<HTMLUListElement | HTMLOListElement>>;

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

@@ -0,0 +1,16 @@
+import { CSSObject } from 'styled-components';
+export declare const listTokens: {
+    base: CSSObject;
+    spaceLeft: string;
+    sizes: {
+        bodySans01: CSSObject;
+        bodySans02: CSSObject;
+        bodySans03: CSSObject;
+        bodySans04: CSSObject;
+        bodySerif01: CSSObject;
+        bodySerif02: CSSObject;
+        bodySerif03: CSSObject;
+        bodySerif04: CSSObject;
+        inherit: CSSObject;
+    };
+};

package/dist/components/List/ListItem.d.ts

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