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

package/src/form/radio/useRadio.ts

@@ -2,6 +2,7 @@ import { useContext } from "react";
 import { useFormField } from "../useFormField";
 import { RadioProps } from "./Radio";
 import { RadioGroupContext } from "./RadioGroup";
+import { omit } from "../..";
 
 /**
  * Handles props for Radios in context with Fieldset and RadioGroup
@@ -9,7 +10,10 @@ import { RadioGroupContext } from "./RadioGroup";
 export const useRadio = (props: RadioProps) => {
   const radioGroup = useContext(RadioGroupContext);
 
-  const { inputProps, ...rest } = useFormField(props, "radio");
+  const { inputProps, ...rest } = useFormField(
+    omit(props, ["description"]),
+    "radio"
+  );
 
   if (!radioGroup) {
     console.warn("<Radio> must be used inside <RadioGroup>.");

package/src/form/search-field/SearchField.tsx

@@ -79,7 +79,10 @@ const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
           "navds-form-field",
           `navds-form-field--${size ?? "medium"}`,
           "navds-search-field",
-          { "navds-search-field--error": hasError }
+          {
+            "navds-search-field--error": hasError,
+            "navds-search-field--disabled": !!inputProps.disabled,
+          }
         )}
       >
         <Label
@@ -94,6 +97,7 @@ const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
         </Label>
         {!!description && (
           <BodyShort
+            as="div"
             className={cl("navds-text-field__description", {
               "sr-only": hideLabel,
             })}

package/src/form/search-field/stories/search-field.stories.tsx

@@ -15,7 +15,7 @@ export const All = () => {
       <h1>SearchField</h1>
       <SearchField
         label="Mollit eiusmod"
-        description="Ea cupidatat eu sunt commodo"
+        description={<div>Ea cupidatat eu sunt commodo</div>}
       >
         <SearchField.Input />
         <SearchField.Button>
@@ -170,6 +170,30 @@ export const All = () => {
           <SearchField.Input />
         </SearchField>
       </Fieldset>
+
+      <h2>Disabled </h2>
+      <SearchField
+        disabled
+        label="Mollit eiusmod"
+        description="Ea cupidatat eu sunt commodo"
+      >
+        <SearchField.Input />
+        <SearchField.Button>
+          <Search /> Søk
+        </SearchField.Button>
+      </SearchField>
+      <Fieldset legend="Filter" disabled>
+        <SearchField
+          label="Mollit eiusmod"
+          description="Ea cupidatat eu sunt commodo"
+          error="Errormsg"
+        >
+          <SearchField.Input />
+          <SearchField.Button>
+            <Search /> Søk
+          </SearchField.Button>
+        </SearchField>
+      </Fieldset>
     </>
   );
 };

package/src/form/stories/fieldset.stories.tsx

@@ -21,9 +21,13 @@ export const All = () => {
 
       <Fieldset
         legend="Mollit eiusmod"
-        description="Quis reprehenderit esse cillum"
+        description={<div>Quis reprehenderit esse cillum</div>}
       >
-        <TextField label="Textfield label" hideLabel />
+        <TextField
+          label="Textfield label"
+          hideLabel
+          description={<div>Quis reprehenderit esse cillum</div>}
+        />
         <TextField label="Textfield label" hideLabel />
       </Fieldset>
 

package/src/form/stories/select.stories.tsx

@@ -19,7 +19,7 @@ export const All = () => {
 
       <h2>Description</h2>
 
-      <Select label="Ipsum enim quis culpa" description="Aute enim">
+      <Select label="Ipsum enim quis culpa" description={<div>Aute enim</div>}>
         <option value="">Velg land</option>
         <option value="norge">Norge</option>
         <option value="sverige">Sverige</option>

package/src/form/stories/text-field.stories.tsx

@@ -15,7 +15,10 @@ export const All = () => {
 
       <h2>Description</h2>
 
-      <TextField label="Laborum excepteur" description="Cillum mollit" />
+      <TextField
+        label="Laborum excepteur"
+        description={<div>Cillum mollit</div>}
+      />
 
       <h2>Passord-type</h2>
       <TextField label="Passord" type="password" />
@@ -52,6 +55,25 @@ export const All = () => {
         description="Cillum mollit"
         disabled
       />
+      <TextField
+        size="small"
+        label="Laborum excepteur"
+        description="Cillum mollit"
+        disabled
+      />
+      <h2>Readonly</h2>
+
+      <TextField
+        label="Laborum excepteur"
+        description="Cillum mollit"
+        readOnly
+      />
+      <TextField
+        label="Laborum excepteur"
+        description="Cillum mollit"
+        size="small"
+        readOnly
+      />
     </div>
   );
 };

package/src/form/stories/textarea.stories.tsx

@@ -23,7 +23,7 @@ export const All = () => {
 
       <Textarea
         label="In anim elit"
-        description="Reprehenderit esse proident"
+        description={<div>Reprehenderit esse proident</div>}
         value={value}
         onChange={handleChange}
       />
@@ -78,7 +78,17 @@ export const All = () => {
         description="Reprehenderit esse proident"
         maxLength={400}
         disabled
-        value={value}
+        value="Consectetur commodo mollit voluptate esse minim elit deserunt fugiat consectetur laboris."
+        onChange={handleChange}
+      />
+      <h2>Readonly</h2>
+
+      <Textarea
+        label="In anim elit"
+        description="Reprehenderit esse proident"
+        maxLength={400}
+        readOnly
+        value="Consectetur commodo mollit voluptate esse minim elit deserunt fugiat consectetur laboris."
         onChange={handleChange}
       />
     </div>

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.