@norges-domstoler/dds-components 0.0.22 → 0.0.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/README.md +74 -63
  2. package/dist/components/Select/Select.d.ts +6 -4
  3. package/dist/components/Select/Select.styles.d.ts +3 -2
  4. package/dist/components/Table/SortCell.d.ts +2 -2
  5. package/dist/components/Table/tableData.d.ts +1 -1
  6. package/dist/index.css +60 -60
  7. package/dist/index.es.css +60 -60
  8. package/dist/index.es.js +600 -759
  9. package/dist/index.js +599 -758
  10. package/dist/styles/fontStyles.css +60 -60
  11. package/package.json +107 -108
  12. package/dist/helpers/inputFieldStylingBase.d.ts +0 -1
package/README.md CHANGED
@@ -1,63 +1,74 @@
1
- # @norges-domstoler/dds-components
2
-
3
- [![Version](https://img.shields.io/npm/v/@norges-domstoler/dds-components)](https://www.npmjs.com/package/@norges-domstoler/dds-components)
4
-
5
- React UI komponenter til bruk i Domstolenes tjenester.
6
-
7
- Sjekk ut [Domstolenes designsystem Elsa](https://design.domstol.no/) og [Storybook](https://domstolene.github.io/designsystem) for mer dokumentasjon og demoer.
8
-
9
- ## Installasjon
10
-
11
- ```sh
12
- npm install @norges-domstoler/dds-components
13
- ```
14
-
15
- ## Bruk
16
-
17
- ```js
18
- import * as React from 'react';
19
- import { render } from 'react-dom';
20
- import { Button, TextInput } from '@norges-domstoler/dds-components';
21
-
22
- const App = () => (
23
- <>
24
- <TextInput label="Input" />
25
- <Button label="Primary" />
26
- <Button purpose="secondary" appearance="ghost" label="Secondary" />
27
- </>
28
- );
29
-
30
- render(<App />, document.getElementById('root'));
31
- ```
32
-
33
- ## Komponenter
34
-
35
- Sjekk [komponentstatus](https://design.domstol.no/987b33f71/p/438035-komponenter/b/160db9) for oppdatert status.
36
-
37
- Tilgjengelige komponenter:
38
-
39
- - Breadcrumbs
40
- - Button
41
- - Card (inkludert CardAccordion)
42
- - Checkbox
43
- - Datepicker
44
- - DescriptionList
45
- - Divider
46
- - GlobalMessage
47
- - IconWrapper
48
- - InternaHeader
49
- - List
50
- - LocalMessage
51
- - Pagination
52
- - RadioButton
53
- - Search
54
- - Select
55
- - SkipToContent
56
- - Spinner
57
- - Table
58
- - TextInput
59
- - Typography
60
-
61
- ## For bidragsytere
62
-
63
- Sjekk ut [guiden for bidragsytere](https://design.domstol.no/987b33f71/p/34c962-bidra/b/3611d5).
1
+ # @norges-domstoler/dds-components
2
+
3
+ [![Version](https://img.shields.io/npm/v/@norges-domstoler/dds-components)](https://www.npmjs.com/package/@norges-domstoler/dds-components)
4
+
5
+ React UI komponenter til bruk i Domstolenes tjenester.
6
+
7
+ Sjekk ut [Domstolenes designsystem Elsa](https://design.domstol.no/) og [Storybook](https://domstolene.github.io/designsystem) for mer dokumentasjon og demoer.
8
+
9
+ ## Installasjon
10
+
11
+ ```sh
12
+ npm install @norges-domstoler/dds-components
13
+ ```
14
+
15
+ ## Bruk
16
+
17
+ ```js
18
+ import * as React from 'react';
19
+ import { render } from 'react-dom';
20
+ import { Button, TextInput } from '@norges-domstoler/dds-components';
21
+
22
+ const App = () => (
23
+ <>
24
+ <TextInput label="Input" />
25
+ <Button label="Primary" />
26
+ <Button purpose="secondary" appearance="ghost" label="Secondary" />
27
+ </>
28
+ );
29
+
30
+ render(<App />, document.getElementById('root'));
31
+ ```
32
+
33
+ ## Komponenter
34
+
35
+ Sjekk [komponentstatus](https://design.domstol.no/987b33f71/p/438035-komponenter/b/160db9) for oppdatert status.
36
+
37
+ Tilgjengelige komponenter:
38
+
39
+ - Breadcrumbs
40
+ - Button
41
+ - Card (inkludert CardAccordion)
42
+ - Checkbox
43
+ - Datepicker
44
+ - DescriptionList
45
+ - Divider
46
+ - GlobalMessage
47
+ - IconWrapper
48
+ - InternaHeader
49
+ - List
50
+ - LocalMessage
51
+ - Pagination
52
+ - RadioButton
53
+ - Search
54
+ - Select
55
+ - SkipToContent
56
+ - Spinner
57
+ - Table
58
+ - TextInput
59
+ - Typography
60
+
61
+ ## Release av ny versjon
62
+
63
+ 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:
64
+
65
+ 1. Versjonsnummeret i `package.json` må oppdateres manuelt med en egen commit i forkant av publisering av ny github release.
66
+
67
+ 2. Lag en ny release på github med _release tag = versjonsnummer_ for best mulig oversikt, og legg ved en passende beskrivelse av hva som er nytt i denne versjonen. Publiser så releasen når alt er klart.
68
+ Man kan også lage en Draft-release i forkant, og publisere denne releasen når alt som skal være med er merget inn i master.
69
+
70
+ For versjonering brukes [_semantisk versjonering_](https://semver.org/) for å holde ting organisert og for å enkelt kommunisere utviklingsløpet til pakken.
71
+
72
+ ## For bidragsytere
73
+
74
+ Sjekk ut [guiden for bidragsytere](https://design.domstol.no/987b33f71/p/34c962-bidra/b/3611d5).
package/dist/components/Select/Select.d.ts CHANGED
@@ -1,13 +1,13 @@
1
1
  import * as CSS from 'csstype';
2
2
  import React from 'react';
3
- import { default as ReactSelect, Props as ReactSelectProps } from 'react-select';
3
+ import { GroupBase, Props as ReactSelectProps, SelectInstance } from 'react-select';
4
4
  export declare function searchFilter(text: string, search: string): boolean;
5
5
  export declare type SelectOption = {
6
6
  label: string;
7
7
  value: string | number;
8
8
  data?: unknown;
9
9
  };
10
- export declare type SelectProps = {
10
+ export declare type SelectProps<IsMulti extends boolean> = {
11
11
  label?: string;
12
12
  required?: boolean;
13
13
  readOnly?: boolean;
@@ -16,5 +16,7 @@ export declare type SelectProps = {
16
16
  width?: CSS.WidthProperty<string>;
17
17
  className?: string;
18
18
  style?: React.CSSProperties;
19
- } & ReactSelectProps<SelectOption>;
20
- export declare const Select: React.ForwardRefExoticComponent<Pick<SelectProps, keyof ReactSelectProps<SelectOption, false, import("react-select").GroupTypeBase<SelectOption>>> & React.RefAttributes<ReactSelect<SelectOption, false, import("react-select").GroupTypeBase<SelectOption>, import("react-select/src/Select").default<SelectOption, false, import("react-select").GroupTypeBase<SelectOption>>>>>;
19
+ } & ReactSelectProps<SelectOption, IsMulti, GroupBase<SelectOption>>;
20
+ declare type ForwardRefType<IsMulti extends boolean> = React.ForwardedRef<SelectInstance<SelectOption, IsMulti, GroupBase<SelectOption>>>;
21
+ export declare const Select: <IsMulti extends boolean = false>({ id, label, errorMessage, tip, required, readOnly, options, isMulti, value, defaultValue, width, closeMenuOnSelect, className, style, isDisabled, isClearable, placeholder, ...rest }: SelectProps<IsMulti>, ref: ForwardRefType<IsMulti>) => JSX.Element;
22
+ export {};
package/dist/components/Select/Select.styles.d.ts CHANGED
@@ -1,5 +1,6 @@
1
- import { Styles } from 'react-select';
1
+ import { GroupBase, StylesConfig } from 'react-select';
2
2
  import { IconWrapper } from '../../helpers/IconWrapper';
3
+ import { SelectOption } from './Select';
3
4
  export declare const prefix = "dds-select";
4
5
  export declare const Label: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Typography").TypographyProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
5
6
  declare type StyledContainerProps = {
@@ -14,5 +15,5 @@ export declare const Wrapper: import("styled-components").StyledComponent<"div",
14
15
  width?: string | number | undefined;
15
16
  }, never>;
16
17
  export declare const SelectedIconWrapper: import("styled-components").StyledComponent<typeof IconWrapper, any, {}, never>;
17
- export declare const CustomStyles: Partial<Styles<any, false, any>>;
18
+ export declare const CustomStyles: Partial<StylesConfig<SelectOption, boolean, GroupBase<SelectOption>>>;
18
19
  export {};
package/dist/components/Table/SortCell.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { MouseEvent } from 'react';
2
2
  import { TableCellProps } from './Cell';
3
- export declare type SortOrder = 'ascending' | 'descending' | 'none';
3
+ export declare type SortOrder = 'ascending' | 'descending';
4
4
  export declare type SortCellProps = {
5
5
  isSorted?: boolean;
6
6
  sortOrder?: SortOrder;
@@ -10,4 +10,4 @@ export declare const SortCell: import("react").ForwardRefExoticComponent<{
10
10
  isSorted?: boolean | undefined;
11
11
  sortOrder?: SortOrder | undefined;
12
12
  onClick: (event: MouseEvent<HTMLButtonElement>) => void;
13
- } & Omit<TableCellProps, "type"> & import("react").RefAttributes<HTMLTableHeaderCellElement>>;
13
+ } & Omit<TableCellProps, "type"> & import("react").RefAttributes<HTMLTableCellElement>>;
package/dist/components/Table/tableData.d.ts CHANGED
@@ -2,7 +2,7 @@ import { SortOrder } from './SortCell';
2
2
  export declare type HeaderCellToSort = {
3
3
  name: string;
4
4
  dataName: string;
5
- sortOrder?: SortOrder;
5
+ sortOrder?: SortOrder | 'none';
6
6
  isSorted?: boolean;
7
7
  };
8
8
  export declare const headerCells: HeaderCellToSort[];
package/dist/index.css CHANGED
@@ -1,60 +1,60 @@
1
- @font-face {
2
- font-family: IBM Plex Sans;
3
- font-style: normal;
4
- font-weight: 400;
5
- font-display: swap;
6
- src: local('IBM Plex Sans'), local('IBMPlexSans'),
7
- url('../assets/fonts/IBMPlexSans-Regular.woff2') format('woff2'),
8
- url('../assets/fonts/IBMPlexSans-Regular.woff') format('woff');
9
- }
10
-
11
- @font-face {
12
- font-family: IBM Plex Sans;
13
- font-style: italic;
14
- font-weight: 400;
15
- font-display: swap;
16
- src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'),
17
- url('../assets/fonts/IBMPlexSans-Italic.woff2') format('woff2'),
18
- url('../assets/fonts/IBMPlexSans-Italic.woff') format('woff');
19
- }
20
-
21
- @font-face {
22
- font-family: IBM Plex Sans;
23
- font-style: normal;
24
- font-weight: 300;
25
- font-display: swap;
26
- src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'),
27
- url('../assets/fonts/IBMPlexSans-Light.woff2') format('woff2'),
28
- url('../assets/fonts/IBMPlexSans-Light.woff') format('woff');
29
- }
30
-
31
- @font-face {
32
- font-family: IBM Plex Sans;
33
- font-style: italic;
34
- font-weight: 300;
35
- font-display: swap;
36
- src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'),
37
- url('../assets/fonts/IBMPlexSans-LightItalic.woff2') format('woff2'),
38
- url('../assets/fonts/IBMPlexSans-LightItalic.woff') format('woff');
39
- }
40
-
41
- @font-face {
42
- font-family: IBM Plex Sans;
43
- font-style: normal;
44
- font-weight: 600;
45
- font-display: swap;
46
- src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
47
- url('../assets/fonts/IBMPlexSans-SemiBold.woff2') format('woff2'),
48
- url('../assets/fonts/IBMPlexSans-SemiBold.woff') format('woff');
49
- }
50
-
51
- @font-face {
52
- font-family: IBM Plex Sans;
53
- font-style: italic;
54
- font-weight: 600;
55
- font-display: swap;
56
- src: local('IBM Plex Sans SemiBold Italic'),
57
- local('IBMPlexSans-SemiBoldItalic'),
58
- url('../assets/fonts/IBMPlexSans-SemiBoldItalic.woff2') format('woff2'),
59
- url('../assets/fonts/IBMPlexSans-SemiBoldItalic.woff') format('woff');
60
- }
1
+ @font-face {
2
+ font-family: IBM Plex Sans;
3
+ font-style: normal;
4
+ font-weight: 400;
5
+ font-display: swap;
6
+ src: local('IBM Plex Sans'), local('IBMPlexSans'),
7
+ url('../assets/fonts/IBMPlexSans-Regular.woff2') format('woff2'),
8
+ url('../assets/fonts/IBMPlexSans-Regular.woff') format('woff');
9
+ }
10
+
11
+ @font-face {
12
+ font-family: IBM Plex Sans;
13
+ font-style: italic;
14
+ font-weight: 400;
15
+ font-display: swap;
16
+ src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'),
17
+ url('../assets/fonts/IBMPlexSans-Italic.woff2') format('woff2'),
18
+ url('../assets/fonts/IBMPlexSans-Italic.woff') format('woff');
19
+ }
20
+
21
+ @font-face {
22
+ font-family: IBM Plex Sans;
23
+ font-style: normal;
24
+ font-weight: 300;
25
+ font-display: swap;
26
+ src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'),
27
+ url('../assets/fonts/IBMPlexSans-Light.woff2') format('woff2'),
28
+ url('../assets/fonts/IBMPlexSans-Light.woff') format('woff');
29
+ }
30
+
31
+ @font-face {
32
+ font-family: IBM Plex Sans;
33
+ font-style: italic;
34
+ font-weight: 300;
35
+ font-display: swap;
36
+ src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'),
37
+ url('../assets/fonts/IBMPlexSans-LightItalic.woff2') format('woff2'),
38
+ url('../assets/fonts/IBMPlexSans-LightItalic.woff') format('woff');
39
+ }
40
+
41
+ @font-face {
42
+ font-family: IBM Plex Sans;
43
+ font-style: normal;
44
+ font-weight: 600;
45
+ font-display: swap;
46
+ src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
47
+ url('../assets/fonts/IBMPlexSans-SemiBold.woff2') format('woff2'),
48
+ url('../assets/fonts/IBMPlexSans-SemiBold.woff') format('woff');
49
+ }
50
+
51
+ @font-face {
52
+ font-family: IBM Plex Sans;
53
+ font-style: italic;
54
+ font-weight: 600;
55
+ font-display: swap;
56
+ src: local('IBM Plex Sans SemiBold Italic'),
57
+ local('IBMPlexSans-SemiBoldItalic'),
58
+ url('../assets/fonts/IBMPlexSans-SemiBoldItalic.woff2') format('woff2'),
59
+ url('../assets/fonts/IBMPlexSans-SemiBoldItalic.woff') format('woff');
60
+ }
package/dist/index.es.css CHANGED
@@ -1,60 +1,60 @@
1
- @font-face {
2
- font-family: IBM Plex Sans;
3
- font-style: normal;
4
- font-weight: 400;
5
- font-display: swap;
6
- src: local('IBM Plex Sans'), local('IBMPlexSans'),
7
- url('../assets/fonts/IBMPlexSans-Regular.woff2') format('woff2'),
8
- url('../assets/fonts/IBMPlexSans-Regular.woff') format('woff');
9
- }
10
-
11
- @font-face {
12
- font-family: IBM Plex Sans;
13
- font-style: italic;
14
- font-weight: 400;
15
- font-display: swap;
16
- src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'),
17
- url('../assets/fonts/IBMPlexSans-Italic.woff2') format('woff2'),
18
- url('../assets/fonts/IBMPlexSans-Italic.woff') format('woff');
19
- }
20
-
21
- @font-face {
22
- font-family: IBM Plex Sans;
23
- font-style: normal;
24
- font-weight: 300;
25
- font-display: swap;
26
- src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'),
27
- url('../assets/fonts/IBMPlexSans-Light.woff2') format('woff2'),
28
- url('../assets/fonts/IBMPlexSans-Light.woff') format('woff');
29
- }
30
-
31
- @font-face {
32
- font-family: IBM Plex Sans;
33
- font-style: italic;
34
- font-weight: 300;
35
- font-display: swap;
36
- src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'),
37
- url('../assets/fonts/IBMPlexSans-LightItalic.woff2') format('woff2'),
38
- url('../assets/fonts/IBMPlexSans-LightItalic.woff') format('woff');
39
- }
40
-
41
- @font-face {
42
- font-family: IBM Plex Sans;
43
- font-style: normal;
44
- font-weight: 600;
45
- font-display: swap;
46
- src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
47
- url('../assets/fonts/IBMPlexSans-SemiBold.woff2') format('woff2'),
48
- url('../assets/fonts/IBMPlexSans-SemiBold.woff') format('woff');
49
- }
50
-
51
- @font-face {
52
- font-family: IBM Plex Sans;
53
- font-style: italic;
54
- font-weight: 600;
55
- font-display: swap;
56
- src: local('IBM Plex Sans SemiBold Italic'),
57
- local('IBMPlexSans-SemiBoldItalic'),
58
- url('../assets/fonts/IBMPlexSans-SemiBoldItalic.woff2') format('woff2'),
59
- url('../assets/fonts/IBMPlexSans-SemiBoldItalic.woff') format('woff');
60
- }
1
+ @font-face {
2
+ font-family: IBM Plex Sans;
3
+ font-style: normal;
4
+ font-weight: 400;
5
+ font-display: swap;
6
+ src: local('IBM Plex Sans'), local('IBMPlexSans'),
7
+ url('../assets/fonts/IBMPlexSans-Regular.woff2') format('woff2'),
8
+ url('../assets/fonts/IBMPlexSans-Regular.woff') format('woff');
9
+ }
10
+
11
+ @font-face {
12
+ font-family: IBM Plex Sans;
13
+ font-style: italic;
14
+ font-weight: 400;
15
+ font-display: swap;
16
+ src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'),
17
+ url('../assets/fonts/IBMPlexSans-Italic.woff2') format('woff2'),
18
+ url('../assets/fonts/IBMPlexSans-Italic.woff') format('woff');
19
+ }
20
+
21
+ @font-face {
22
+ font-family: IBM Plex Sans;
23
+ font-style: normal;
24
+ font-weight: 300;
25
+ font-display: swap;
26
+ src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'),
27
+ url('../assets/fonts/IBMPlexSans-Light.woff2') format('woff2'),
28
+ url('../assets/fonts/IBMPlexSans-Light.woff') format('woff');
29
+ }
30
+
31
+ @font-face {
32
+ font-family: IBM Plex Sans;
33
+ font-style: italic;
34
+ font-weight: 300;
35
+ font-display: swap;
36
+ src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'),
37
+ url('../assets/fonts/IBMPlexSans-LightItalic.woff2') format('woff2'),
38
+ url('../assets/fonts/IBMPlexSans-LightItalic.woff') format('woff');
39
+ }
40
+
41
+ @font-face {
42
+ font-family: IBM Plex Sans;
43
+ font-style: normal;
44
+ font-weight: 600;
45
+ font-display: swap;
46
+ src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
47
+ url('../assets/fonts/IBMPlexSans-SemiBold.woff2') format('woff2'),
48
+ url('../assets/fonts/IBMPlexSans-SemiBold.woff') format('woff');
49
+ }
50
+
51
+ @font-face {
52
+ font-family: IBM Plex Sans;
53
+ font-style: italic;
54
+ font-weight: 600;
55
+ font-display: swap;
56
+ src: local('IBM Plex Sans SemiBold Italic'),
57
+ local('IBMPlexSans-SemiBoldItalic'),
58
+ url('../assets/fonts/IBMPlexSans-SemiBoldItalic.woff2') format('woff2'),
59
+ url('../assets/fonts/IBMPlexSans-SemiBoldItalic.woff') format('woff');
60
+ }