@navikt/ds-react 0.13.3 → 0.14.0

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 (14) hide show
  1. package/cjs/loader/Loader.js +1 -1
  2. package/esm/loader/Loader.js +1 -1
  3. package/esm/loader/Loader.js.map +1 -1
  4. package/package.json +5 -4
  5. package/src/grid/stories/grid.stories.mdx +3 -3
  6. package/src/guide-panel/stories/example.css +4 -4
  7. package/src/guide-panel/stories/guidepanel.stories.mdx +7 -7
  8. package/src/guide-panel/stories/guidepanel.stories.tsx +6 -6
  9. package/src/loader/Loader.tsx +1 -1
  10. package/src/loader/stories/loader.stories.mdx +0 -16
  11. package/src/popover/stories/popover.stories.tsx +1 -1
  12. package/src/speech-bubble/stories/speechbubble.stories.mdx +4 -4
  13. package/src/speech-bubble/stories/speechbubble.stories.tsx +2 -2
  14. package/src/typography/stories/index.css +1 -1
package/cjs/loader/Loader.js CHANGED
@@ -44,6 +44,6 @@ const Loader = (0, react_1.forwardRef)((_a, ref) => {
44
44
  }), focusable: "false", viewBox: "0 0 50 50", preserveAspectRatio: "xMidYMid" }, rest),
45
45
  react_1.default.createElement("title", { id: id !== null && id !== void 0 ? id : `loader-${internalId}` }, title),
46
46
  react_1.default.createElement("circle", { className: "navds-loader__background", xmlns: "http://www.w3.org/2000/svg", cx: "25", cy: "25", r: "20", fill: "none", strokeWidth: "5" }),
47
- react_1.default.createElement("circle", { className: "navds-loader__foreground", cx: "25", cy: "25", r: "20", stroke: "var(--navds-color-gray-40)", fill: "none", strokeWidth: "5", strokeDasharray: "50 155", strokeLinecap: "round" })));
47
+ react_1.default.createElement("circle", { className: "navds-loader__foreground", cx: "25", cy: "25", r: "20", stroke: "var(--navds-global-color-gray-400)", fill: "none", strokeWidth: "5", strokeDasharray: "50 155", strokeLinecap: "round" })));
48
48
  });
49
49
  exports.default = Loader;
package/esm/loader/Loader.js CHANGED
@@ -20,7 +20,7 @@ const Loader = forwardRef((_a, ref) => {
20
20
  }), focusable: "false", viewBox: "0 0 50 50", preserveAspectRatio: "xMidYMid" }, rest),
21
21
  React.createElement("title", { id: id !== null && id !== void 0 ? id : `loader-${internalId}` }, title),
22
22
  React.createElement("circle", { className: "navds-loader__background", xmlns: "http://www.w3.org/2000/svg", cx: "25", cy: "25", r: "20", fill: "none", strokeWidth: "5" }),
23
- React.createElement("circle", { className: "navds-loader__foreground", cx: "25", cy: "25", r: "20", stroke: "var(--navds-color-gray-40)", fill: "none", strokeWidth: "5", strokeDasharray: "50 155", strokeLinecap: "round" })));
23
+ React.createElement("circle", { className: "navds-loader__foreground", cx: "25", cy: "25", r: "20", stroke: "var(--navds-global-color-gray-400)", fill: "none", strokeWidth: "5", strokeDasharray: "50 155", strokeLinecap: "round" })));
24
24
  });
25
25
  export default Loader;
26
26
  //# sourceMappingURL=Loader.js.map
package/esm/loader/Loader.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Loader.js","sourceRoot":"","sources":["../../src/loader/Loader.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAY,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC;AAyB3B,MAAM,MAAM,GAAG,UAAU,CACvB,CACE,EASC,EACD,GAAG,EACH,EAAE;QAXF,EACE,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,WAAW,EACnB,WAAW,GAAG,KAAK,EACnB,OAAO,GAAG,SAAS,EACnB,EAAE,OAEH,EADI,IAAI,cART,0EASC,CADQ;IAIT,MAAM,UAAU,GAAG,KAAK,EAAE,CAAC;IAE3B,OAAO,CACL,8DACmB,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,UAAU,UAAU,EAAE,EAC7C,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,cAAc,EACd,SAAS,EACT,iBAAiB,IAAI,EAAE,EACvB,iBAAiB,OAAO,EAAE,EAC1B;YACE,2BAA2B,EAAE,WAAW;SACzC,CACF,EACD,SAAS,EAAC,OAAO,EACjB,OAAO,EAAC,WAAW,EACnB,mBAAmB,EAAC,UAAU,IAC1B,IAAI;QAER,+BAAO,EAAE,EAAE,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,UAAU,UAAU,EAAE,IAAG,KAAK,CAAS;QACxD,gCACE,SAAS,EAAC,0BAA0B,EACpC,KAAK,EAAC,4BAA4B,EAClC,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,EACX,WAAW,EAAC,GAAG,GACf;QACF,gCACE,SAAS,EAAC,0BAA0B,EACpC,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,MAAM,EAAE,4BAA4B,EACpC,IAAI,EAAC,MAAM,EACX,WAAW,EAAC,GAAG,EACf,eAAe,EAAC,QAAQ,EACxB,aAAa,EAAC,OAAO,GACrB,CACE,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"Loader.js","sourceRoot":"","sources":["../../src/loader/Loader.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAY,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC;AAyB3B,MAAM,MAAM,GAAG,UAAU,CACvB,CACE,EASC,EACD,GAAG,EACH,EAAE;QAXF,EACE,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,WAAW,EACnB,WAAW,GAAG,KAAK,EACnB,OAAO,GAAG,SAAS,EACnB,EAAE,OAEH,EADI,IAAI,cART,0EASC,CADQ;IAIT,MAAM,UAAU,GAAG,KAAK,EAAE,CAAC;IAE3B,OAAO,CACL,8DACmB,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,UAAU,UAAU,EAAE,EAC7C,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,cAAc,EACd,SAAS,EACT,iBAAiB,IAAI,EAAE,EACvB,iBAAiB,OAAO,EAAE,EAC1B;YACE,2BAA2B,EAAE,WAAW;SACzC,CACF,EACD,SAAS,EAAC,OAAO,EACjB,OAAO,EAAC,WAAW,EACnB,mBAAmB,EAAC,UAAU,IAC1B,IAAI;QAER,+BAAO,EAAE,EAAE,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,UAAU,UAAU,EAAE,IAAG,KAAK,CAAS;QACxD,gCACE,SAAS,EAAC,0BAA0B,EACpC,KAAK,EAAC,4BAA4B,EAClC,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,EACX,WAAW,EAAC,GAAG,GACf;QACF,gCACE,SAAS,EAAC,0BAA0B,EACpC,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,MAAM,EAAE,oCAAoC,EAC5C,IAAI,EAAC,MAAM,EACX,WAAW,EAAC,GAAG,EACf,eAAe,EAAC,QAAQ,EACxB,aAAa,EAAC,OAAO,GACrB,CACE,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-react",
3
- "version": "0.13.3",
3
+ "version": "0.14.0",
4
4
  "private": false,
5
5
  "description": "NAV designsystem react components",
6
6
  "author": "NAV Designsystem team",
@@ -35,7 +35,7 @@
35
35
  },
36
36
  "dependencies": {
37
37
  "@material-ui/core": "^4.12.3",
38
- "@navikt/ds-icons": "^0.6.3",
38
+ "@navikt/ds-icons": "^0.7.0",
39
39
  "@popperjs/core": "^2.10.1",
40
40
  "classnames": "^2.2.6",
41
41
  "react-collapse": "^5.1.0",
@@ -61,7 +61,8 @@
61
61
  "ts-jest": "^27.0.5"
62
62
  },
63
63
  "peerDependencies": {
64
- "react": "^16.8.0 || ^17.0.0"
64
+ "@types/react": "^17.0.30",
65
+ "react": "^17.0.0"
65
66
  },
66
- "gitHead": "f6c4f853afefa13244fe3f9bd55126d7caaa0b70"
67
+ "gitHead": "36d98e1d190652c21d78a259cf3d8942d271c167"
67
68
  }
package/src/grid/stories/grid.stories.mdx CHANGED
@@ -31,13 +31,13 @@ Stylingen som blir satt av den:
31
31
  .navds-content-container {
32
32
  margin-left: auto;
33
33
  margin-right: auto;
34
- max-width: var(--navds-content-container-max-width); # 79.5rem (1272px)
35
- padding: var(--navds-content-container-padding-small); # 1rem
34
+ max-width: 79.5rem; # (1272px)
35
+ padding: var(--navds-spacing-4); # 1rem
36
36
  }
37
37
 
38
38
  @media (min-width: 448px) {
39
39
  .navds-content-container {
40
- padding: var(--navds-content-container-padding-medium-and-larger); # 1.5rem
40
+ padding: var(--navds-spacing-6); # 1.5rem
41
41
  }
42
42
  }
43
43
  ```
package/src/guide-panel/stories/example.css CHANGED
@@ -1,13 +1,13 @@
1
1
  .sb-guidepanel__tokens--purple {
2
- --navds-guide-panel-color-border: var(--navds-color-purple-40);
2
+ --navds-guide-panel-color-border: var(--navds-global-color-purple-400);
3
3
  --navds-guide-panel-color-illustration-background: var(
4
- --navds-color-purple-20
4
+ --navds-global-color-purple-200
5
5
  );
6
6
  }
7
7
 
8
8
  .sb-guidepanel__tokens--green {
9
- --navds-guide-panel-color-border: var(--navds-color-green-40);
9
+ --navds-guide-panel-color-border: var(--navds-global-color-green-400);
10
10
  --navds-guide-panel-color-illustration-background: var(
11
- --navds-color-green-20
11
+ --navds-global-color-green-200
12
12
  );
13
13
  }
package/src/guide-panel/stories/guidepanel.stories.mdx CHANGED
@@ -38,9 +38,9 @@ Istedenfor fargetema/themes slik som tidligere veileder brukte velger man nå se
38
38
  overskrive tokens. Det anbefalses å gjøre dette med eks Styled-Components eller css-klasser, men kan inlines også
39
39
 
40
40
  ```css
41
- /* default */
42
- --navds-guide-panel-color-border: var(--navds-color-blue-40);
43
- --navds-guide-panel-color-illustration-background: var(--navds-color-blue-20);
41
+ /* Tokens */
42
+ --navds-guide-panel-color-border
43
+ --navds-guide-panel-color-illustration-background
44
44
  ```
45
45
 
46
46
  ```jsx
@@ -55,16 +55,16 @@ overskrive tokens. Det anbefalses å gjøre dette med eks Styled-Components elle
55
55
  /* Inline */
56
56
  <GuidePanel
57
57
  style={{
58
- ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-color-orange-20)",
59
- ["--navds-guide-panel-color-border" as any]: "var(--navds-color-orange-40)",
58
+ ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-global-color-orange-200)",
59
+ ["--navds-guide-panel-color-border" as any]: "var(--navds-global-color-orange-400)",
60
60
  }}
61
61
  >
62
62
  Cupidatat proident adipisicing eu nulla laborum dolore irure aliqua.
63
63
  </GuidePanel>
64
64
  <GuidePanel
65
65
  style={{
66
- ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-color-orange-20)",
67
- ["--navds-guide-panel-color-border" as any]: "var(--navds-color-orange-40)",
66
+ ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-global-color-orange-200)",
67
+ ["--navds-guide-panel-color-border" as any]: "var(--navds-global-color-orange-400)",
68
68
  }}
69
69
  >
70
70
  Cupidatat proident adipisicing eu nulla laborum dolore irure aliqua.
package/src/guide-panel/stories/guidepanel.stories.tsx CHANGED
@@ -21,24 +21,24 @@ export const All = () => {
21
21
  <h2>custom colors</h2>
22
22
  <GuidePanel
23
23
  style={{
24
- ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-color-purple-20)",
25
- ["--navds-guide-panel-color-border" as any]: "var(--navds-color-purple-40)",
24
+ ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-global-color-purple-200)",
25
+ ["--navds-guide-panel-color-border" as any]: "var(--navds-global-color-purple-400)",
26
26
  }}
27
27
  >
28
28
  {panelText}
29
29
  </GuidePanel>
30
30
  <GuidePanel
31
31
  style={{
32
- ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-color-green-20)",
33
- ["--navds-guide-panel-color-border" as any]: "var(--navds-color-green-40)",
32
+ ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-global-color-green-200)",
33
+ ["--navds-guide-panel-color-border" as any]: "var(--navds-global-color-green-400)",
34
34
  }}
35
35
  >
36
36
  {panelText}
37
37
  </GuidePanel>
38
38
  <GuidePanel
39
39
  style={{
40
- ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-color-orange-20)",
41
- ["--navds-guide-panel-color-border" as any]: "var(--navds-color-orange-40)",
40
+ ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-global-color-orange-200)",
41
+ ["--navds-guide-panel-color-border" as any]: "var(--navds-global-color-orange-400)",
42
42
  }}
43
43
  >
44
44
  {panelText}Ullamco reprehenderit fugiat reprehenderit ad nisi aliqua
package/src/loader/Loader.tsx CHANGED
@@ -74,7 +74,7 @@ const Loader = forwardRef<SVGSVGElement, LoaderProps>(
74
74
  cx="25"
75
75
  cy="25"
76
76
  r="20"
77
- stroke={"var(--navds-color-gray-40)"}
77
+ stroke={"var(--navds-global-color-gray-400)"}
78
78
  fill="none"
79
79
  strokeWidth="5"
80
80
  strokeDasharray="50 155"
package/src/loader/stories/loader.stories.mdx CHANGED
@@ -85,19 +85,3 @@ Størrelsen justeres også automatisk, slik at alt man trenger er å sette Loade
85
85
  <Loader />
86
86
  </Button>
87
87
  </Canvas>
88
-
89
- ## Overskrive farger for å sikre kontrast
90
-
91
- I de casene der man må justere fargene for å ha bedre kontrast så kan man endre på selve css-variablene som bli brukt
92
-
93
- ```css
94
- --navds-loader-color-foreground: var(--navds-color-gray-40);
95
- --navds-loader-color-background: var(--navds-color-gray-10);
96
- --navds-loader-color-neutral-foreground: var(--navds-color-gray-40);
97
- --navds-loader-color-interaction-foreground: var(--navds-color-blue-50);
98
- --navds-loader-color-inverted-foreground: var(--navds-color-white);
99
- --navds-loader-color-inverted-background: rgba(255, 255, 255, 0.3);
100
- --navds-loader-color-transparent-background: transparent;
101
- --navds-loader-color-on-button-background: rgba(255, 255, 255, 0.3);
102
- --navds-loader-color-on-button-foreground: currentColor;
103
- ```
package/src/popover/stories/popover.stories.tsx CHANGED
@@ -17,7 +17,7 @@ const Template = (props) => {
17
17
  <>
18
18
  <div
19
19
  style={{
20
- background: "var(--navds-color-gray-60)",
20
+ background: "var(--navds-global-color-gray-600)",
21
21
  textAlign: "center",
22
22
  width: "2rem",
23
23
  height: "2rem",
package/src/speech-bubble/stories/speechbubble.stories.mdx CHANGED
@@ -80,8 +80,8 @@ Man kan endre bakgrunnsfargen selv med `illustrationBgColor` og `backgroundColor
80
80
  <SpeechBubble
81
81
  illustration="OLA"
82
82
  position="left"
83
- illustrationBgColor="var(--navds-color-lightblue-10)"
84
- backgroundColor="var(--navds-color-lightblue-20)"
83
+ illustrationBgColor="var(--navds-global-color-lightblue-100)"
84
+ backgroundColor="var(--navds-global-color-lightblue-200)"
85
85
  >
86
86
  <SpeechBubble.Bubble>
87
87
  Aute minim nisi sunt mollit duis sunt nulla minim non proident.
@@ -93,8 +93,8 @@ Man kan endre bakgrunnsfargen selv med `illustrationBgColor` og `backgroundColor
93
93
  <SpeechBubble
94
94
  illustration="OLA"
95
95
  position="left"
96
- illustrationBgColor="var(--navds-color-lightblue-10)"
97
- backgroundColor="var(--navds-color-lightblue-20)"
96
+ illustrationBgColor="var(--navds-global-color-lightblue-100)"
97
+ backgroundColor="var(--navds-global-color-lightblue-200)"
98
98
  >
99
99
  <SpeechBubble.Bubble>
100
100
  Aute minim nisi sunt mollit duis sunt nulla minim non proident.
package/src/speech-bubble/stories/speechbubble.stories.tsx CHANGED
@@ -14,7 +14,7 @@ export const All = () => {
14
14
  <SpeechBubble
15
15
  illustration={<Illustration />}
16
16
  topText="Ola Normann 01.01.21 14:00"
17
- backgroundColor="var(--navds-color-lightblue-20)"
17
+ backgroundColor="var(--navds-global-color-lightblue-200)"
18
18
  >
19
19
  <SpeechBubble.Bubble>
20
20
  Aute minim nisi sunt mollit duis sunt nulla minim non proident.
@@ -42,7 +42,7 @@ export const All = () => {
42
42
  </div>
43
43
  }
44
44
  position="right"
45
- backgroundColor="var(--navds-color-gray-10)"
45
+ backgroundColor="var(--navds-global-color-gray-100)"
46
46
  >
47
47
  <SpeechBubble.Bubble>
48
48
  Aute minim nisi sunt mollit duis sunt nulla minim non proident.
package/src/typography/stories/index.css CHANGED
@@ -1,3 +1,3 @@
1
1
  .typo-story > div:nth-child(even) {
2
- background: var(--navds-color-gray-20);
2
+ background: var(--navds-global-color-gray-200);
3
3
  }