@norges-domstoler/dds-components 0.0.5 → 0.0.6

package/README.md

@@ -6,12 +6,12 @@ _biblioteket er under arbeid_
 
 React UI komponenter til bruk i Domstolenes tjenester.
 
-Sjekk ut [Domstolenes designsystem (DDS)](https://design.domstol.no/) og [Storybook](https://domstolene.github.io/designsystem) for mer dokumentasjon og demoer.
+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 styled-components
+npm install @norges-domstoler/dds-components
 ```
 
 ## Bruk
@@ -34,17 +34,24 @@ render(<App />, document.getElementById('root'));
 
 ## Komponenter
 
-Alle komponenter er under arbeid, ta kontakt for status.
+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

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

@@ -2,15 +2,15 @@ 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';
-declare type Size = 'small' | 'medium' | 'large';
-declare type Appearance = 'filled' | 'ghost' | 'rounded' | 'borderless';
-declare type IconPosition = 'left' | 'right';
+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?: Size;
+    size?: ButtonSize;
     label?: string;
     purpose?: ButtonPurpose;
     iconPosition?: IconPosition;
-    appearance?: Appearance;
+    appearance?: ButtonAppearance;
     href?: string;
     target?: string;
     loading?: boolean;
@@ -20,11 +20,11 @@ export declare type ButtonProps = {
     fullWidth?: boolean;
 } & ButtonHTMLAttributes<HTMLButtonElement>;
 export declare const Button: React.ForwardRefExoticComponent<{
-    size?: Size | undefined;
+    size?: ButtonSize | undefined;
     label?: string | undefined;
     purpose?: ButtonPurpose | undefined;
     iconPosition?: IconPosition | undefined;
-    appearance?: Appearance | undefined;
+    appearance?: ButtonAppearance | undefined;
     href?: string | undefined;
     target?: string | undefined;
     loading?: boolean | undefined;
@@ -33,4 +33,3 @@ export declare const Button: React.ForwardRefExoticComponent<{
     Icon?: OverridableComponent<SvgIconTypeMap<{}, "svg">> | undefined;
     fullWidth?: boolean | undefined;
 } & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
-export {};

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

@@ -1,6 +1,5 @@
 import { HTMLAttributes } from 'react';
 export declare type DividerColor = 'primary' | 'primaryLighter';
-export declare type DividerDirection = 'horisontal' | 'vertical';
 export declare type DividerProps = {
     color?: DividerColor;
 } & HTMLAttributes<HTMLHRElement>;

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>>;

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

@@ -0,0 +1,5 @@
+import { CSSObject } from 'styled-components';
+export declare const listItemTokens: {
+    base: CSSObject;
+    bulletSpacing: string;
+};

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

@@ -0,0 +1,2 @@
+export * from './List';
+export * from './ListItem';

package/dist/components/Spinner/Spinner.d.ts

@@ -0,0 +1,7 @@
+import * as CSS from 'csstype';
+import { TextColor } from '../Typography';
+export declare type SpinnerProps = {
+    color?: TextColor | string;
+    size?: CSS.WidthProperty<string>;
+};
+export declare function Spinner({ size, color }: SpinnerProps): JSX.Element;

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

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

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

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

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

@@ -4,5 +4,5 @@ export declare type TableCellLayout = 'left' | 'right' | 'center' | 'text and ic
 export declare type TableCellProps = {
     type?: TableCellType;
     layout?: TableCellLayout;
-} & (TdHTMLAttributes<HTMLTableDataCellElement> | ThHTMLAttributes<HTMLTableHeaderCellElement>);
-export declare const Cell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLTableDataCellElement | HTMLTableHeaderCellElement>>;
+} & (TdHTMLAttributes<HTMLTableCellElement> | ThHTMLAttributes<HTMLTableCellElement>);
+export declare const Cell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;

package/dist/components/Table/Foot.d.ts

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

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

@@ -4,3 +4,4 @@ export * from './Head';
 export * from './Row';
 export * from './Cell';
 export * from './SortCell';
+export * from './Foot';

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

@@ -1,6 +1,13 @@
 import { HTMLAttributes, ElementType, AnchorHTMLAttributes, LabelHTMLAttributes } from 'react';
-export declare type TypographyType = 'a' | 'headingSans01' | 'headingSans02' | 'headingSans03' | 'headingSans04' | 'headingSans05' | 'headingSans06' | 'headingSans07' | 'headingSans08' | 'bodySans01' | 'bodySans02' | 'bodySans03' | 'bodySans04' | 'bodySerif01' | 'bodySerif02' | 'bodySerif03' | 'bodySerif04' | 'leadSans01' | 'leadSans02' | 'leadSans03' | 'leadSans04' | 'leadSans05' | 'supportingStyleLabel01' | 'supportingStyleInputText01' | 'supportingStyleInputText02' | 'supportingStyleInputText03' | 'supportingStyleHelperText01' | 'supportingStylePlaceholderText01' | 'supportingStyleTiny01';
-export declare type TextColor = 'interactive' | 'primary' | 'danger' | 'warning' | 'success' | 'default';
+import { CSSObject } from 'styled-components';
+import { TypographyType } from './Typography.types';
+export declare function isTextColor(color: string): color is TextColor;
+export declare const getTextColor: (color: TextColor | string) => string;
+export declare type TextColor = 'interactive' | 'primary' | 'danger' | 'warning' | 'success' | 'onLight' | 'onDark' | 'gray1' | 'gray2' | 'gray3' | 'gray4' | 'gray5' | 'gray6' | 'gray7' | 'gray8' | 'gray9';
+export declare type TypographyInteractionProps = {
+    hover?: CSSObject;
+    active?: CSSObject;
+};
 export declare type TypographyProps = {
     typographyType?: TypographyType;
     as?: ElementType;
@@ -8,7 +15,9 @@ export declare type TypographyProps = {
     color?: TextColor | string;
     bold?: boolean;
     italic?: boolean;
+    underline?: boolean;
     withMargins?: boolean;
+    interactionProps?: TypographyInteractionProps;
     target?: string;
 } & (HTMLAttributes<HTMLElement> | LabelHTMLAttributes<HTMLLabelElement> | AnchorHTMLAttributes<HTMLAnchorElement>);
 export declare const Typography: import("react").ForwardRefExoticComponent<TypographyProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/Typography/{typographyTokens.d.ts → Typography.tokens.d.ts}

@@ -5,8 +5,19 @@ export declare const textColors: {
     danger: string;
     success: string;
     warning: string;
-    default: 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;
@@ -206,5 +217,8 @@ export declare const typographyTokens: {
         italic: {
             base: CSSObject;
         };
+        underline: {
+            base: CSSObject;
+        };
     };
 };

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

@@ -0,0 +1,7 @@
+export declare type TypographyBodySansType = 'bodySans01' | 'bodySans02' | 'bodySans03' | 'bodySans04';
+export 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';
+export declare type TypographySupportingType = 'supportingStyleLabel01' | 'supportingStyleInputText01' | 'supportingStyleInputText02' | 'supportingStyleInputText03' | 'supportingStyleHelperText01' | 'supportingStylePlaceholderText01' | 'supportingStyleTiny01';
+export declare type TypographyType = 'a' | TypographyHeadingType | TypographyBodyType | TypographyLeadType | TypographySupportingType;

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

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

package/dist/index.d.ts

@@ -14,3 +14,6 @@ export * from './components/Breadcrumbs';
 export * from './helpers/IconWrapper';
 export * from './components/Pagination';
 export * from './components/Divider';
+export * from './components/List';
+export * from './components/DescriptionList';
+export * from './components/Spinner';