@navikt/ds-react 0.13.3 → 0.14.0-beta.1

package/esm/loader/Loader.js

@@ -20,7 +20,7 @@ const Loader = forwardRef((_a, ref) => {
         }), focusable: "false", viewBox: "0 0 50 50", preserveAspectRatio: "xMidYMid" }, rest),
         React.createElement("title", { id: id !== null && id !== void 0 ? id : `loader-${internalId}` }, title),
         React.createElement("circle", { className: "navds-loader__background", xmlns: "http://www.w3.org/2000/svg", cx: "25", cy: "25", r: "20", fill: "none", strokeWidth: "5" }),
-        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" })));
+        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" })));
 });
 export default Loader;
 //# sourceMappingURL=Loader.js.map

package/esm/loader/Loader.js.map

@@ -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"}
+{"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

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.13.3",
+  "version": "0.14.0-beta.1",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -24,7 +24,8 @@
   "files": [
     "/cjs",
     "/esm",
-    "/src"
+    "/src",
+    "/dist"
   ],
   "scripts": {
     "create-package-json-pointers-to-esm": "node ../../../utilities/scripts/createPackageJsonsWithESMPointers.js",
@@ -35,7 +36,7 @@
   },
   "dependencies": {
     "@material-ui/core": "^4.12.3",
-    "@navikt/ds-icons": "^0.6.3",
+    "@navikt/ds-icons": "^0.7.0",
     "@popperjs/core": "^2.10.1",
     "classnames": "^2.2.6",
     "react-collapse": "^5.1.0",
@@ -45,6 +46,8 @@
     "uuid": "^8.3.2"
   },
   "devDependencies": {
+    "webpack-node-externals": "^3.0.0",
+    "webpack": "^5.65.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.1.0",
     "@testing-library/user-event": "^13.2.1",
@@ -61,7 +64,7 @@
     "ts-jest": "^27.0.5"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0"
-  },
-  "gitHead": "f6c4f853afefa13244fe3f9bd55126d7caaa0b70"
+    "@types/react": "^17.0.30",
+    "react": "^17.0.0"
+  }
 }

package/src/grid/stories/grid.stories.mdx

@@ -31,13 +31,13 @@ Stylingen som blir satt av den:
 .navds-content-container {
   margin-left: auto;
   margin-right: auto;
-  max-width: var(--navds-content-container-max-width); # 79.5rem (1272px)
-  padding: var(--navds-content-container-padding-small); # 1rem
+  max-width: 79.5rem; # (1272px)
+  padding: var(--navds-spacing-4); # 1rem
 }
 
 @media (min-width: 448px) {
   .navds-content-container {
-    padding: var(--navds-content-container-padding-medium-and-larger); # 1.5rem
+    padding: var(--navds-spacing-6); # 1.5rem
   }
 }
 ```

package/src/guide-panel/stories/example.css

@@ -1,13 +1,13 @@
 .sb-guidepanel__tokens--purple {
-  --navds-guide-panel-color-border: var(--navds-color-purple-40);
+  --navds-guide-panel-color-border: var(--navds-global-color-purple-400);
   --navds-guide-panel-color-illustration-background: var(
-    --navds-color-purple-20
+    --navds-global-color-purple-200
   );
 }
 
 .sb-guidepanel__tokens--green {
-  --navds-guide-panel-color-border: var(--navds-color-green-40);
+  --navds-guide-panel-color-border: var(--navds-global-color-green-400);
   --navds-guide-panel-color-illustration-background: var(
-    --navds-color-green-20
+    --navds-global-color-green-200
   );
 }

package/src/guide-panel/stories/guidepanel.stories.mdx

@@ -38,9 +38,9 @@ Istedenfor fargetema/themes slik som tidligere veileder brukte velger man nå se
 overskrive tokens. Det anbefalses å gjøre dette med eks Styled-Components eller css-klasser, men kan inlines også
 
 ```css
-/* default */
---navds-guide-panel-color-border: var(--navds-color-blue-40);
---navds-guide-panel-color-illustration-background: var(--navds-color-blue-20);
+/* Tokens */
+--navds-guide-panel-color-border
+--navds-guide-panel-color-illustration-background
 ```
 
 ```jsx
@@ -55,16 +55,16 @@ overskrive tokens. Det anbefalses å gjøre dette med eks Styled-Components elle
 /* Inline */
 <GuidePanel
   style={{
-    ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-color-orange-20)",
-    ["--navds-guide-panel-color-border" as any]: "var(--navds-color-orange-40)",
+    ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-global-color-orange-200)",
+    ["--navds-guide-panel-color-border" as any]: "var(--navds-global-color-orange-400)",
   }}
 >
     Cupidatat proident adipisicing eu nulla laborum dolore irure aliqua.
   </GuidePanel>
 <GuidePanel
     style={{
-    ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-color-orange-20)",
-    ["--navds-guide-panel-color-border" as any]: "var(--navds-color-orange-40)",
+    ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-global-color-orange-200)",
+    ["--navds-guide-panel-color-border" as any]: "var(--navds-global-color-orange-400)",
   }}
 >
   Cupidatat proident adipisicing eu nulla laborum dolore irure aliqua.

package/src/guide-panel/stories/guidepanel.stories.tsx

@@ -21,24 +21,24 @@ export const All = () => {
       <h2>custom colors</h2>
       <GuidePanel
         style={{
-          ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-color-purple-20)",
-          ["--navds-guide-panel-color-border" as any]: "var(--navds-color-purple-40)",
+          ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-global-color-purple-200)",
+          ["--navds-guide-panel-color-border" as any]: "var(--navds-global-color-purple-400)",
         }}
       >
         {panelText}
       </GuidePanel>
       <GuidePanel
         style={{
-          ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-color-green-20)",
-          ["--navds-guide-panel-color-border" as any]: "var(--navds-color-green-40)",
+          ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-global-color-green-200)",
+          ["--navds-guide-panel-color-border" as any]: "var(--navds-global-color-green-400)",
         }}
       >
         {panelText}
       </GuidePanel>
       <GuidePanel
         style={{
-          ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-color-orange-20)",
-          ["--navds-guide-panel-color-border" as any]: "var(--navds-color-orange-40)",
+          ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-global-color-orange-200)",
+          ["--navds-guide-panel-color-border" as any]: "var(--navds-global-color-orange-400)",
         }}
       >
         {panelText}Ullamco reprehenderit fugiat reprehenderit ad nisi aliqua

package/src/loader/Loader.tsx

@@ -74,7 +74,7 @@ const Loader = forwardRef<SVGSVGElement, LoaderProps>(
           cx="25"
           cy="25"
           r="20"
-          stroke={"var(--navds-color-gray-40)"}
+          stroke={"var(--navds-global-color-gray-400)"}
           fill="none"
           strokeWidth="5"
           strokeDasharray="50 155"

package/src/loader/stories/loader.stories.mdx

@@ -85,19 +85,3 @@ Størrelsen justeres også automatisk, slik at alt man trenger er å sette Loade
     <Loader />
   </Button>
 </Canvas>
-
-## Overskrive farger for å sikre kontrast
-
-I de casene der man må justere fargene for å ha bedre kontrast så kan man endre på selve css-variablene som bli brukt
-
-```css
---navds-loader-color-foreground: var(--navds-color-gray-40);
---navds-loader-color-background: var(--navds-color-gray-10);
---navds-loader-color-neutral-foreground: var(--navds-color-gray-40);
---navds-loader-color-interaction-foreground: var(--navds-color-blue-50);
---navds-loader-color-inverted-foreground: var(--navds-color-white);
---navds-loader-color-inverted-background: rgba(255, 255, 255, 0.3);
---navds-loader-color-transparent-background: transparent;
---navds-loader-color-on-button-background: rgba(255, 255, 255, 0.3);
---navds-loader-color-on-button-foreground: currentColor;
-```

package/src/popover/stories/popover.stories.tsx

@@ -17,7 +17,7 @@ const Template = (props) => {
     <>
       <div
         style={{
-          background: "var(--navds-color-gray-60)",
+          background: "var(--navds-global-color-gray-600)",
           textAlign: "center",
           width: "2rem",
           height: "2rem",

package/src/speech-bubble/stories/speechbubble.stories.mdx

@@ -80,8 +80,8 @@ Man kan endre bakgrunnsfargen selv med `illustrationBgColor` og `backgroundColor
 <SpeechBubble
   illustration="OLA"
   position="left"
-  illustrationBgColor="var(--navds-color-lightblue-10)"
-  backgroundColor="var(--navds-color-lightblue-20)"
+  illustrationBgColor="var(--navds-global-color-lightblue-100)"
+  backgroundColor="var(--navds-global-color-lightblue-200)"
 >
   <SpeechBubble.Bubble>
     Aute minim nisi sunt mollit duis sunt nulla minim non proident.
@@ -93,8 +93,8 @@ Man kan endre bakgrunnsfargen selv med `illustrationBgColor` og `backgroundColor
   <SpeechBubble
     illustration="OLA"
     position="left"
-    illustrationBgColor="var(--navds-color-lightblue-10)"
-    backgroundColor="var(--navds-color-lightblue-20)"
+    illustrationBgColor="var(--navds-global-color-lightblue-100)"
+    backgroundColor="var(--navds-global-color-lightblue-200)"
   >
     <SpeechBubble.Bubble>
       Aute minim nisi sunt mollit duis sunt nulla minim non proident.

package/src/speech-bubble/stories/speechbubble.stories.tsx

@@ -14,7 +14,7 @@ export const All = () => {
       <SpeechBubble
         illustration={<Illustration />}
         topText="Ola Normann 01.01.21 14:00"
-        backgroundColor="var(--navds-color-lightblue-20)"
+        backgroundColor="var(--navds-global-color-lightblue-200)"
       >
         <SpeechBubble.Bubble>
           Aute minim nisi sunt mollit duis sunt nulla minim non proident.
@@ -42,7 +42,7 @@ export const All = () => {
           </div>
         }
         position="right"
-        backgroundColor="var(--navds-color-gray-10)"
+        backgroundColor="var(--navds-global-color-gray-100)"
       >
         <SpeechBubble.Bubble>
           Aute minim nisi sunt mollit duis sunt nulla minim non proident.

package/src/typography/stories/index.css

@@ -1,3 +1,3 @@
 .typo-story > div:nth-child(even) {
-  background: var(--navds-color-gray-20);
+  background: var(--navds-global-color-gray-200);
 }

package/LICENCE

@@ -1,31 +0,0 @@
-Font License
-
-The Source Sans Pro font files in packages/node_modules/nav-frontend-typografi-style/assets are a subset of Source Sans Pro, licensed under the SIL Open Font License, and copyright Adobe Systems Incorporated, with Reserved Font Name 'Source'. All Rights Reserved. Source is a trademark of Adobe Systems Incorporated in the United States and/or other countries.
-
-Icon License
-
-This project uses Streamline Icons. If you use nav-frontend-moduler in your project please adhere to the Streamline Icons license agreement found here: https://streamlineicons.com/ux/extended-license.html
-
-The rest of the codebase (excluding 3rd party dependencies):
-
-# The MIT License
-
-Copyright 2019 NAV (Arbeids- og velferdsdirektoratet) - The Norwegian Labour and Welfare Administration
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the "Software"),
-to deal in the Software without restriction, including without limitation
-the rights to use, copy, modify, merge, publish, distribute, sublicense,
-and/or sell copies of the Software, and to permit persons to whom the
-Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included
-in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
-IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
-DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
-OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
-USE OR OTHER DEALINGS IN THE SOFTWARE.