@navikt/ds-react 0.7.7 → 0.8.0

package/src/form/Select.tsx

@@ -58,7 +58,7 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
       <Label
         htmlFor={inputProps.id}
         size={size}
-        component="label"
+        as="label"
         className={cl("navds-select__label", {
           "sr-only": hideLabel,
         })}
@@ -85,7 +85,7 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
             className,
             "navds-select__input",
             "navds-body-short",
-            `navds-body--${size ?? "m"}`
+            `navds-body--${size ?? "medium"}`
           )}
           size={props.htmlSize}
         >

package/src/form/TextField.tsx

@@ -52,7 +52,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
       <Label
         htmlFor={inputProps.id}
         size={size}
-        component="label"
+        as="label"
         className={cl("navds-text-field__label", { "sr-only": hideLabel })}
       >
         {label}

package/src/form/Textarea.tsx

@@ -72,7 +72,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
         <Label
           htmlFor={inputProps.id}
           size={size}
-          component="label"
+          as="label"
           className={cl("navds-textarea__label", {
             "sr-only": hideLabel,
           })}
@@ -99,7 +99,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
               className,
               "navds-textarea__input",
               "navds-body-short",
-              `navds-body-${size ?? "m"}`,
+              `navds-body-${size ?? "medium"}`,
               {
                 "navds-textarea--counter": hasMaxLength,
               }

package/src/form/checkbox/Checkbox.tsx

@@ -59,7 +59,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
         ref={ref}
       />
       <BodyShort
-        component="label"
+        as="label"
         htmlFor={inputProps.id}
         size={size}
         className="navds-checkbox__label"

package/src/form/checkbox/CheckboxGroup.tsx

@@ -54,7 +54,7 @@ const CheckboxGroup = forwardRef<HTMLFieldSetElement, CheckboxGroupProps>(
         className={cl(
           className,
           "navds-checkbox-group",
-          `navds-checkbox-group--${rest.size ?? fieldset?.size ?? "m"}`
+          `navds-checkbox-group--${rest.size ?? fieldset?.size ?? "medium"}`
         )}
       >
         <CheckboxGroupContext.Provider

package/src/form/checkbox/stories/checkbox.stories.mdx

@@ -95,10 +95,14 @@ Man kan både sette en description på CheckboxGroup og selve checkbox
 
 ## Sizing
 
-Checkboxer har default 44px høy klikkflate. Med size="s" blir denne til 24px slik som før
+Checkboxer har default 44px høy klikkflate. Med size="small" blir denne til 24px slik som før
 
 ```jsx
-<CheckboxGroup legend="Mollit eiusmod" error="Boks nr 2 må være valgt" size="s">
+<CheckboxGroup
+  legend="Mollit eiusmod"
+  error="Boks nr 2 må være valgt"
+  size="small"
+>
   <Checkbox value="Apple">Apple</Checkbox>
   <Checkbox value="Orange">Orange</Checkbox>
   <Checkbox value="Melon">Melon</Checkbox>
@@ -109,7 +113,7 @@ Checkboxer har default 44px høy klikkflate. Med size="s" blir denne til 24px sl
   <CheckboxGroup
     legend="Mollit eiusmod"
     error="Boks nr 2 må være valgt"
-    size="s"
+    size="small"
   >
     <Checkbox value="Apple">Apple</Checkbox>
     <Checkbox value="Orange" error="Boksen må være valgt">

package/src/form/checkbox/stories/checkbox.stories.tsx

@@ -48,7 +48,7 @@ export const All = () => {
       <CheckboxGroup
         legend="Mollit eiusmod"
         error="Boks nr 2 må være valgt"
-        size="s"
+        size="small"
       >
         <Checkbox value="Apple">Apple</Checkbox>
         <Checkbox value="Orange">Orange</Checkbox>

package/src/form/error-summary/ErrorSummary.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "classnames";
-import { Title } from "../..";
+import { Heading, BodyShort } from "../..";
 
 export interface ErrorSummaryProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -9,9 +9,9 @@ export interface ErrorSummaryProps extends HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   /**
    * Changes padding and font-sizes
-   * @default "m"
+   * @default "medium"
    */
-  size?: "m" | "s";
+  size?: "medium" | "small";
   /**
    * Heading above links
    */
@@ -25,7 +25,14 @@ export interface ErrorSummaryProps extends HTMLAttributes<HTMLDivElement> {
 
 const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
   (
-    { children, className, size = "m", headingTag = "h2", heading, ...rest },
+    {
+      children,
+      className,
+      size = "medium",
+      headingTag = "h2",
+      heading,
+      ...rest
+    },
     ref
   ) => {
     return (
@@ -40,24 +47,18 @@ const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
         tabIndex={-1}
         role="region"
       >
-        <Title
-          className="navds-error-summary__title"
-          component={headingTag}
-          size="s"
+        <Heading
+          className="navds-error-summary__heading"
+          as={headingTag}
+          size="small"
         >
           {heading}
-        </Title>
-        <ul
-          className={cl(
-            "navds-error-summary__list",
-            "navds-body-short",
-            `navds-body--${size}`
-          )}
-        >
+        </Heading>
+        <BodyShort as="ul" size={size} className="navds-error-summary__list">
           {React.Children.map(children, (child) => {
             return <li key={child?.toString()}>{child}</li>;
           })}
-        </ul>
+        </BodyShort>
       </div>
     );
   }

package/src/form/error-summary/ErrorSummaryItem.tsx

@@ -2,20 +2,20 @@ import React, { forwardRef } from "react";
 import cl from "classnames";
 import { OverridableComponent } from "../..";
 
-export type ErrorType = OverridableComponent<ErrorSummaryItemProps>;
-
-export interface ErrorSummaryItemProps {
-  props: {
-    /**
-     * Link text
-     */
-    children: React.ReactNode;
-  } & React.HTMLAttributes<HTMLAnchorElement>;
-  defaultComponent: "a";
+export interface ErrorSummaryItemProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  /**
+   * Link text
+   */
+  children: React.ReactNode;
 }
 
+export type ErrorType = OverridableComponent<
+  ErrorSummaryItemProps,
+  HTMLAnchorElement
+>;
 const ErrorSummaryItem: ErrorType = forwardRef(
-  ({ children, component: Component = "a", className, ...rest }, ref) => {
+  ({ children, as: Component = "a", className, ...rest }, ref) => {
     return (
       <Component
         {...rest}

package/src/form/error-summary/stories/error-summary.stories.tsx

@@ -16,8 +16,8 @@ export const All = () => {
           Tekstfeltet må ha en godkjent e-mail
         </ErrorSummaryItem>
       </ErrorSummary>
-      <h2>size s</h2>
-      <ErrorSummary size="s" heading="Feiloppsummering komponent">
+      <h2>size small</h2>
+      <ErrorSummary size="small" heading="Feiloppsummering komponent">
         <ErrorSummaryItem href="#1">Checkbox må fylles ut</ErrorSummaryItem>
         <ErrorSummaryItem href="#2">
           Tekstfeltet må ha en godkjent e-mail

package/src/form/radio/Radio.tsx

@@ -46,7 +46,7 @@ const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
         ref={ref}
       />
       <BodyShort
-        component="label"
+        as="label"
         htmlFor={inputProps.id}
         size={size}
         className="navds-radio__label"

package/src/form/radio/RadioGroup.tsx

@@ -67,7 +67,7 @@ const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(
         className={cl(
           className,
           "navds-radio-group",
-          `navds-radio-group--${rest.size ?? fieldset?.size ?? "m"}`
+          `navds-radio-group--${rest.size ?? fieldset?.size ?? "medium"}`
         )}
       >
         <RadioGroupContext.Provider

package/src/form/radio/stories/radio.stories.mdx

@@ -95,10 +95,14 @@ Man kan både sette en description på RadioGroup og selve Radio
 
 ## Sizing
 
-Radioer har default 44px høy klikkflate. Med size="s" blir denne til 24px slik som før
+Radioer har default 44px høy klikkflate. Med size="small" blir denne til 24px slik som før
 
 ```jsx
-<RadioGroup legend="Mollit eiusmod" error="Boks nr 2 må være valgt" size="s">
+<RadioGroup
+  legend="Mollit eiusmod"
+  error="Boks nr 2 må være valgt"
+  size="small"
+>
   <Radio value="Apple">Apple</Radio>
   <Radio value="Orange">Orange</Radio>
   <Radio value="Melon">Melon</Radio>
@@ -106,7 +110,11 @@ Radioer har default 44px høy klikkflate. Med size="s" blir denne til 24px slik
 ```
 
 <Canvas>
-  <RadioGroup legend="Mollit eiusmod" error="Boks nr 2 må være valgt" size="s">
+  <RadioGroup
+    legend="Mollit eiusmod"
+    error="Boks nr 2 må være valgt"
+    size="small"
+  >
     <Radio value="Apple">Apple</Radio>
     <Radio value="Orange" error="Boksen må være valgt">
       Orange

package/src/form/radio/stories/radio.stories.tsx

@@ -45,7 +45,7 @@ export const All = () => {
       <RadioGroup
         legend="Mollit eiusmod"
         error="Boks nr 2 må være valgt"
-        size="s"
+        size="small"
       >
         <Radio value="Apple">Apple</Radio>
         <Radio value="Orange">Orange</Radio>

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

@@ -11,7 +11,7 @@ export interface SearchFieldContextProps {
     "aria-describedby"?: string;
     disabled?: boolean;
   };
-  size?: "m" | "s";
+  size?: "medium" | "small";
 }
 
 export const SearchFieldContext = React.createContext<SearchFieldContextProps | null>(
@@ -63,7 +63,7 @@ const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
         className={cl(
           className,
           "navds-form-field",
-          `navds-form-field--${size ?? "m"}`,
+          `navds-form-field--${size ?? "medium"}`,
           "navds-search-field",
           { "navds-search-field--error": hasError }
         )}
@@ -71,7 +71,7 @@ const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
         <Label
           htmlFor={inputProps.id}
           size={size}
-          component="label"
+          as="label"
           className={cl("navds-text-field__label", {
             "sr-only": hideLabel,
           })}

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

@@ -11,13 +11,13 @@ export interface SearchFieldButtonProps extends Omit<ButtonProps, "size"> {
   children: React.ReactNode;
   /**
    * Changes design and interactions
-   * @default "action"
+   * @default "primary"
    */
-  variant?: "primary" | "action";
+  variant?: "primary" | "secondary";
 }
 
 const SearchFieldButton = forwardRef<HTMLButtonElement, SearchFieldButtonProps>(
-  ({ className, variant = "action", disabled, ...rest }, ref) => {
+  ({ className, variant = "primary", disabled, ...rest }, ref) => {
     const searchField = useContext(SearchFieldContext);
 
     if (searchField === null) {

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

@@ -11,15 +11,15 @@ export interface SearchFieldClearButtonProps extends Omit<ButtonProps, "size"> {
   children: React.ReactNode;
   /**
    * Changes design and interactions
-   * @default "primary"
+   * @default "secondary"
    */
-  variant?: "primary" | "action";
+  variant?: "primary" | "secondary";
 }
 
 const SearchFieldClearButton = forwardRef<
   HTMLButtonElement,
   SearchFieldClearButtonProps
->(({ className, variant = "primary", disabled, ...rest }, ref) => {
+>(({ className, variant = "secondary", disabled, ...rest }, ref) => {
   const searchField = useContext(SearchFieldContext);
 
   if (searchField === null) {
@@ -31,9 +31,9 @@ const SearchFieldClearButton = forwardRef<
 
   return (
     <Button
-      ref={ref}
-      className={cl(className, "navds-search-field__button")}
       {...rest}
+      ref={ref}
+      className={cl(className, "navds-search-field__clear-button")}
       size={size}
       variant={variant}
       disabled={disabled ?? inputProps?.disabled}

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

@@ -20,14 +20,15 @@ const SearchFieldInput = forwardRef<HTMLInputElement, SearchFieldInputProps>(
       <input
         {...rest}
         {...inputProps}
+        type="search"
+        role="searchbox"
         ref={ref}
-        type="text"
         className={cl(
           className,
           "navds-search-field__input",
           "navds-text-field__input",
           "navds-body-short",
-          `navds-body-${size ?? "m"}`
+          `navds-body-${size ?? "medium"}`
         )}
       />
     );

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

@@ -7,24 +7,23 @@ import {
   SearchFieldClearButton,
 } from "../index";
 
-export const Example = () => {
+export const Example = ({ size = "medium" }: { size: "medium" | "small" }) => {
   const [value, setValue] = useState("");
 
   return (
-    <SearchField
-      label="Mollit eiusmod"
-      description="Ea cupidatat eu sunt commodo"
-    >
+    <SearchField size={size} label="Skriv i søkefeltet for å vise clearbutton">
       <SearchFieldInput
         value={value}
         onChange={(e) => setValue(e.target.value)}
       />
-      <SearchFieldClearButton onClick={() => setValue("")}>
-        <Close />
-        <span>Tøm</span>
-      </SearchFieldClearButton>
+      {!!value && (
+        <SearchFieldClearButton onClick={() => setValue("")}>
+          <Close />
+          Tøm
+        </SearchFieldClearButton>
+      )}
       <SearchFieldButton>
-        <Search /> <span>Søk</span>
+        <Search /> Søk
       </SearchFieldButton>
     </SearchField>
   );

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

@@ -24,7 +24,7 @@ Komponenten er ikke testet eller gått gjennom et design-review, så anbefalses
 <SearchField label="Mollit eiusmod" description="Ea cupidatat eu sunt commodo">
   <SearchFieldInput />
   <SearchFieldButton>
-    <Search /> <span>Søk</span>
+    <Search /> Søk
   </SearchFieldButton>
 </SearchField>
 ```
@@ -36,7 +36,7 @@ Komponenten er ikke testet eller gått gjennom et design-review, så anbefalses
   >
     <SearchFieldInput />
     <SearchFieldButton>
-      <Search /> <span>Søk</span>
+      <Search /> Søk
     </SearchFieldButton>
   </SearchField>
 </Canvas>
@@ -54,7 +54,7 @@ Vi har satt `label` som required siden man vil bruke den i sammenheng med denne
 >
   <SearchFieldInput />
   <SearchFieldButton>
-    <Search /> <span>Søk</span>
+    <Search /> Søk
   </SearchFieldButton>
 </SearchField>
 ```
@@ -67,7 +67,7 @@ Vi har satt `label` som required siden man vil bruke den i sammenheng med denne
   >
     <SearchFieldInput />
     <SearchFieldButton>
-      <Search /> <span>Søk</span>
+      <Search /> Søk
     </SearchFieldButton>
   </SearchField>
 </Canvas>
@@ -79,11 +79,11 @@ Vi har satt `label` som required siden man vil bruke den i sammenheng med denne
   label="Mollit eiusmod"
   description="Ea cupidatat eu sunt commodo"
   hideLabel
-  size="s"
+  size="small"
 >
   <SearchFieldInput />
   <SearchFieldButton>
-    <Search /> <span>Søk</span>
+    <Search /> Søk
   </SearchFieldButton>
 </SearchField>
 ```
@@ -93,11 +93,11 @@ Vi har satt `label` som required siden man vil bruke den i sammenheng med denne
     label="Mollit eiusmod"
     description="Ea cupidatat eu sunt commodo"
     hideLabel
-    size="s"
+    size="small"
   >
     <SearchFieldInput />
     <SearchFieldButton>
-      <Search /> <span>Søk</span>
+      <Search /> Søk
     </SearchFieldButton>
   </SearchField>
 </Canvas>
@@ -113,7 +113,7 @@ Vi har satt `label` som required siden man vil bruke den i sammenheng med denne
 >
   <SearchFieldInput />
   <SearchFieldButton>
-    <Search /> <span>Søk</span>
+    <Search /> Søk
   </SearchFieldButton>
 </SearchField>
 ```
@@ -127,80 +127,35 @@ Vi har satt `label` som required siden man vil bruke den i sammenheng med denne
   >
     <SearchFieldInput />
     <SearchFieldButton>
-      <Search /> <span>Søk</span>
+      <Search /> Søk
     </SearchFieldButton>
   </SearchField>
 </Canvas>
 
-## Plassering av knapp
-
-```jsx
-<SearchField
-  label="Mollit eiusmod"
-  description="Ea cupidatat eu sunt commodo"
-  hideLabel
->
-  <SearchFieldButton>
-    <Search /> <span>Søk</span>
-  </SearchFieldButton>
-  <SearchFieldInput />
-</SearchField>
-<SearchField
-  label="Mollit eiusmod"
-  description="Ea cupidatat eu sunt commodo"
-  hideLabel
->
-  <SearchFieldInput />
-  <SearchFieldButton>
-    <Search /> <span>Søk</span>
-  </SearchFieldButton>
-</SearchField>
-```
-
-<Canvas>
-  <div>
-    <SearchField
-      label="Mollit eiusmod"
-      description="Ea cupidatat eu sunt commodo"
-      hideLabel
-    >
-      <SearchFieldButton>
-        <Search /> <span>Søk</span>
-      </SearchFieldButton>
-      <SearchFieldInput />
-    </SearchField>
-    <br />
-    <SearchField
-      label="Mollit eiusmod"
-      description="Ea cupidatat eu sunt commodo"
-      hideLabel
-    >
-      <SearchFieldInput />
-      <SearchFieldButton>
-        <Search /> <span>Søk</span>
-      </SearchFieldButton>
-    </SearchField>
-  </div>
-</Canvas>
-
-<h2>ClearButton</h2>
+## ClearButton
 
 Man kan bruke `SearchFieldClearButton` for å håndtere clearing av value i `<input />`. For å bruke denne
 kreves det da at `SearchFieldInput` er controlled slik at man styrer state selv slik som eksemplet under.
+Hvis man bare ønsker at den bare skal vises når bruker har begynt å skrive, anbefaler vi bare å rendre
+den når inputvalue ikke er empty.
 
 ```jsx
 <SearchField label="Mollit eiusmod" description="Ea cupidatat eu sunt commodo">
   <SearchFieldInput value={value} onChange={(e) => setValue(e.target.value)} />
-  <SearchFieldClearButton onClick={() => setValue("")}>
-    <Close />
-    <span>Tøm</span>
-  </SearchFieldClearButton>
+  {!!value && (
+    <SearchFieldClearButton onClick={() => setValue("")}>
+      <Close /> Tøm
+    </SearchFieldClearButton>
+  )}
   <SearchFieldButton>
-    <Search /> <span>Søk</span>
+    <Search /> Søk
   </SearchFieldButton>
 </SearchField>
 ```
 
 <Canvas>
-  <Example />
+  <div>
+    <Example />
+    <Example size="small" />
+  </div>
 </Canvas>