@navikt/ds-react 0.14.10-next.0 → 0.14.13

package/src/button/stories/button.stories.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { Button } from "../index";
 import { Success } from "@navikt/ds-icons";
 
@@ -37,6 +37,13 @@ const varSwitch = {
 };
 
 export const All = () => {
+  const [loadingState, setLoadingState] = useState(true);
+  const [content, setContent] = useState<string>("");
+
+  const toggleLoading = () => {
+    setLoadingState(!loadingState);
+  };
+
   return (
     <div style={{ paddingLeft: "1rem" }}>
       <h1>Button</h1>
@@ -82,7 +89,7 @@ export const All = () => {
       <Section>
         {variants.map((variant) => (
           <Button key={variant} variant={variant}>
-            <span className="sr-only">Success ikon</span>
+            <span className="navds-sr-only">Success ikon</span>
             <Success />
           </Button>
         ))}
@@ -98,11 +105,42 @@ export const All = () => {
       <Section>
         {variants.map((variant) => (
           <Button key={variant} variant={variant} size="small">
-            <span className="sr-only">Success ikon</span>
+            <span className="navds-sr-only">Success ikon</span>
             <Success />
           </Button>
         ))}
       </Section>
+      <h2>Button w/loader</h2>
+      <Button onClick={toggleLoading}>Toggle loaders</Button>
+      <Button onClick={() => setContent((content) => `${content} wat`)}>
+        Change content
+      </Button>
+      <Section>
+        {variants.map((variant) => (
+          <Button
+            key={variant}
+            variant={variant}
+            loading={loadingState}
+            onClick={toggleLoading}
+          >
+            {content || varSwitch[variant]}
+          </Button>
+        ))}
+      </Section>
+      <h2>Small w/loader</h2>
+      <Section>
+        {variants.map((variant) => (
+          <Button
+            key={variant}
+            variant={variant}
+            size="small"
+            loading={loadingState}
+            onClick={toggleLoading}
+          >
+            {varSwitch[variant]}
+          </Button>
+        ))}
+      </Section>
     </div>
   );
 };

package/src/form/Fieldset/Fieldset.tsx

@@ -96,7 +96,7 @@ const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
             size={size}
             as="legend"
             className={cl("navds-fieldset__legend", {
-              "sr-only": !!hideLegend,
+              "navds-sr-only": !!hideLegend,
             })}
           >
             {legend}
@@ -105,7 +105,7 @@ const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
             (size === "medium" ? (
               <BodyShort
                 className={cl("navds-fieldset__description", {
-                  "sr-only": !!hideLegend,
+                  "navds-sr-only": !!hideLegend,
                 })}
                 id={inputDescriptionId}
                 size="small"
@@ -116,7 +116,7 @@ const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
             ) : (
               <Detail
                 className={cl("navds-fieldset__description", {
-                  "sr-only": !!hideLegend,
+                  "navds-sr-only": !!hideLegend,
                 })}
                 id={inputDescriptionId}
                 size="small"

package/src/form/Select.tsx

@@ -63,7 +63,7 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
         size={size}
         as="label"
         className={cl("navds-select__label", {
-          "sr-only": hideLabel,
+          "navds-sr-only": hideLabel,
         })}
       >
         {label}
@@ -72,7 +72,7 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
         <BodyShort
           as="div"
           className={cl("navds-select__description", {
-            "sr-only": hideLabel,
+            "navds-sr-only": hideLabel,
           })}
           id={inputDescriptionId}
           size={size}

package/src/form/Switch.tsx

@@ -115,7 +115,7 @@ const Switch = forwardRef<HTMLInputElement, SwitchProps>((props, ref) => {
       <label htmlFor={inputProps.id} className="navds-switch__label-wrapper">
         <div
           className={cl("navds-switch__content", {
-            "sr-only": hideLabel,
+            "navds-sr-only": hideLabel,
             "navds-switch--with-description": !!description && !hideLabel,
           })}
         >

package/src/form/TextField.tsx

@@ -62,7 +62,9 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
         htmlFor={inputProps.id}
         size={size}
         as="label"
-        className={cl("navds-text-field__label", { "sr-only": hideLabel })}
+        className={cl("navds-text-field__label", {
+          "navds-sr-only": hideLabel,
+        })}
       >
         {label}
       </Label>
@@ -72,7 +74,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
           {size === "medium" ? (
             <BodyShort
               className={cl("navds-text-field__description", {
-                "sr-only": hideLabel,
+                "navds-sr-only": hideLabel,
               })}
               id={inputDescriptionId}
               size="small"
@@ -83,7 +85,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
           ) : (
             <Detail
               className={cl("navds-text-field__description", {
-                "sr-only": hideLabel,
+                "navds-sr-only": hideLabel,
               })}
               id={inputDescriptionId}
               size="small"

package/src/form/Textarea.tsx

@@ -77,7 +77,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           size={size}
           as="label"
           className={cl("navds-textarea__label", {
-            "sr-only": hideLabel,
+            "navds-sr-only": hideLabel,
           })}
         >
           {label}
@@ -86,7 +86,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           <BodyShort
             as="div"
             className={cl("navds-textarea__description", {
-              "sr-only": hideLabel,
+              "navds-sr-only": hideLabel,
             })}
             id={inputDescriptionId}
             size={size}
@@ -113,7 +113,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           />
           {hasMaxLength && (
             <>
-              <span id={maxLengthId} className="sr-only">
+              <span id={maxLengthId} className="navds-sr-only">
                 Tekstområde med plass til {maxLength} tegn., Textarea can have{" "}
                 {maxLength} signs.
               </span>

package/src/form/checkbox/Checkbox.tsx

@@ -58,7 +58,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
       <label htmlFor={inputProps.id} className="navds-checkbox__label">
         <div
           className={cl("navds-checkbox__content", {
-            "sr-only": props.hideLabel,
+            "navds-sr-only": props.hideLabel,
           })}
         >
           <BodyShort as="div" size={size}>

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

@@ -1,21 +1,35 @@
-import { Close, Search } from "@navikt/ds-icons";
 import cl from "classnames";
-import React, {
-  forwardRef,
-  InputHTMLAttributes,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-import mergeRefs from "react-merge-refs";
-import { BodyShort, Label, omit, useEventListener } from "../..";
-import { FormFieldProps } from "../useFormField";
-import { useSearchField } from "./useSearchField";
+import React, { forwardRef } from "react";
+import { BodyShort, Label, omit } from "../..";
+import ErrorMessage from "../ErrorMessage";
+import { FormFieldProps, useFormField } from "../useFormField";
+import SearchFieldButton, { SearchFieldButtonType } from "./SearchFieldButton";
+import SearchFieldClearButton, {
+  SearchFieldClearButtonType,
+} from "./SearchFieldClearButton";
+import SearchFieldInput, { SearchFieldInputType } from "./SearchFieldInput";
+
+export interface SearchFieldContextProps {
+  inputProps: {
+    id: string;
+    "aria-invalid": boolean;
+    "aria-describedby"?: string;
+    disabled?: boolean;
+  };
+  size?: "medium" | "small";
+}
+
+export const SearchFieldContext = React.createContext<SearchFieldContextProps | null>(
+  null
+);
 
 export interface SearchFieldProps
-  extends Omit<FormFieldProps, "error" | "errorId">,
-    Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> {
+  extends FormFieldProps,
+    React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * SearchFieldInput & SearchFieldButton
+   */
+  children: React.ReactNode;
   /**
    * If enabled shows the label and description for screenreaders only
    */
@@ -24,101 +38,50 @@ export interface SearchFieldProps
    * SearchField label
    */
   label: React.ReactNode;
-  /**
-   * Inverts color theme
-   * @default false
-   */
-  inverted?: boolean;
-  /**
-   * Customize aria-label on clear button
-   * @default "Slett tekst i felt"
-   */
-  clearButtonLabel?: string;
-  /**
-   * Callback for when user manually clears input with button or Escape
-   */
-  onClear?: () => void;
-  /**
-   * Callback for value in input after change
-   */
-  onChange?: (value: string) => void;
-  /**
-   * Toggles display of "clear"-button when there is text in field
-   */
-  clearButton?: boolean;
 }
 
-const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
+interface SearchFieldComponent
+  extends React.ForwardRefExoticComponent<
+    SearchFieldProps & React.RefAttributes<HTMLDivElement>
+  > {
+  Button: SearchFieldButtonType;
+  Clear: SearchFieldClearButtonType;
+  Input: SearchFieldInputType;
+}
+
+const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
   (props, ref) => {
-    const { inputProps, size, inputDescriptionId } = useSearchField(
-      props,
-      "searchfield"
-    );
+    const {
+      inputProps,
+      errorId,
+      showErrorMsg,
+      hasError,
+      size,
+      inputDescriptionId,
+    } = useFormField(props, "searchfield");
 
     const {
       className,
       hideLabel,
+      children,
       label,
       description,
-      value,
-      clearButtonLabel,
-      onClear,
-      inverted = false,
-      clearButton = true,
+      error,
       ...rest
     } = props;
 
-    const [controlledValue, setControlledValue] = useState(value ?? "");
-    const searchRef = useRef<HTMLInputElement | null>(null);
-    const mergedRef = mergeRefs([searchRef, ref]);
-    const [wrapperRef, setWrapperRef] = useState<HTMLDivElement | null>(null);
-
-    const handleChange = useCallback(
-      (v: string) => {
-        if (searchRef.current && value === undefined) {
-          searchRef.current.value = v;
-          setControlledValue(v);
-        }
-        props?.onChange?.(v);
-      },
-      [props, value]
-    );
-
-    const handleClear = useCallback(() => {
-      onClear?.();
-      handleChange("");
-      searchRef.current && searchRef.current?.focus?.();
-    }, [handleChange, onClear]);
-
-    useEventListener(
-      "keydown",
-      useCallback(
-        (e) => {
-          if (e.key === "Escape") {
-            e.preventDefault();
-            handleClear();
-          }
-        },
-        [handleClear]
-      ),
-      wrapperRef
-    );
-
-    useEffect(() => {
-      value !== undefined && setControlledValue(value);
-    }, [value]);
-
     return (
       <div
-        ref={setWrapperRef}
+        ref={ref}
+        {...omit(rest, ["id", "error", "errorId", "size", "disabled"])}
         className={cl(
           className,
           "navds-form-field",
           `navds-form-field--${size ?? "medium"}`,
           "navds-search-field",
           {
+            "navds-search-field--error": hasError,
             "navds-search-field--disabled": !!inputProps.disabled,
-            "navds-search-field--inverted": inverted,
           }
         )}
       >
@@ -144,44 +107,26 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
             {description}
           </BodyShort>
         )}
-        <div
-          data-value={!!controlledValue}
-          className="navds-search-field__input-wrapper"
-        >
-          <span className="navds-search-field__input-icon">
-            <Search aria-hidden />
-          </span>
-          <input
-            ref={mergedRef}
-            {...omit(rest, ["size"])}
-            {...inputProps}
-            {...(props.value !== undefined && { value: props.value })}
-            onChange={(e) => handleChange(e.target.value)}
-            type="search"
-            role="searchbox"
-            className={cl(
-              className,
-              "navds-search-field__input",
-              "navds-text-field__input",
-              "navds-body-short",
-              `navds-body-${size ?? "medium"}`
-            )}
-          />
-          {controlledValue && clearButton && (
-            <button
-              onClick={() => handleClear()}
-              className="navds-search-field__clear-button"
-            >
-              <span className="navds-sr-only">
-                {clearButtonLabel ? clearButtonLabel : "Slett tekst i felt"}
-              </span>
-              <Close aria-hidden />
-            </button>
-          )}
+        <div className="navds-search-field__input-wrapper">
+          <SearchFieldContext.Provider
+            value={{
+              inputProps,
+              size,
+            }}
+          >
+            {children}
+          </SearchFieldContext.Provider>
+        </div>
+        <div id={errorId} aria-relevant="additions removals" aria-live="polite">
+          {showErrorMsg && <ErrorMessage size={size}>{error}</ErrorMessage>}
         </div>
       </div>
     );
   }
-);
+) as SearchFieldComponent;
+
+SearchField.Button = SearchFieldButton;
+SearchField.Clear = SearchFieldClearButton;
+SearchField.Input = SearchFieldInput;
 
 export default SearchField;

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

@@ -0,0 +1,47 @@
+import React, { forwardRef, useContext } from "react";
+import cl from "classnames";
+import { SearchFieldContext } from "./SearchField";
+import { Button, ButtonProps } from "../..";
+
+export interface SearchFieldButtonProps extends Omit<ButtonProps, "size"> {
+  /**
+   * Button text
+   * @example <Search /> <span>Søk</span>
+   */
+  children: React.ReactNode;
+  /**
+   * Changes design and interactions
+   * @default "primary"
+   */
+  variant?: "primary" | "secondary";
+}
+
+export type SearchFieldButtonType = React.ForwardRefExoticComponent<
+  SearchFieldButtonProps & React.RefAttributes<HTMLButtonElement>
+>;
+
+const SearchFieldButton: SearchFieldButtonType = forwardRef(
+  ({ className, variant = "primary", disabled, ...rest }, ref) => {
+    const searchField = useContext(SearchFieldContext);
+
+    if (searchField === null) {
+      console.warn("SearchFieldButton has to be wrapped in <SearchField />");
+      return null;
+    }
+
+    const { size, inputProps } = searchField;
+
+    return (
+      <Button
+        ref={ref}
+        className={cl(className, "navds-search-field__button")}
+        {...rest}
+        size={size}
+        variant={variant}
+        disabled={disabled ?? inputProps?.disabled}
+      />
+    );
+  }
+);
+
+export default SearchFieldButton;

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

@@ -0,0 +1,49 @@
+import React, { forwardRef, useContext } from "react";
+import cl from "classnames";
+import { SearchFieldContext } from "./SearchField";
+import { Button, ButtonProps } from "../..";
+
+export interface SearchFieldClearButtonProps extends Omit<ButtonProps, "size"> {
+  /**
+   * Button text
+   * @example <Close /> <span>Søk</span>
+   */
+  children: React.ReactNode;
+  /**
+   * Changes design and interactions
+   * @default "secondary"
+   */
+  variant?: "primary" | "secondary";
+}
+
+export type SearchFieldClearButtonType = React.ForwardRefExoticComponent<
+  SearchFieldClearButtonProps & React.RefAttributes<HTMLButtonElement>
+>;
+
+const SearchFieldClearButton: SearchFieldClearButtonType = forwardRef(
+  ({ className, variant = "secondary", disabled, ...rest }, ref) => {
+    const searchField = useContext(SearchFieldContext);
+
+    if (searchField === null) {
+      console.warn(
+        "SearchFieldClearButton has to be wrapped in <SearchField />"
+      );
+      return null;
+    }
+
+    const { size, inputProps } = searchField;
+
+    return (
+      <Button
+        {...rest}
+        ref={ref}
+        className={cl(className, "navds-search-field__clear-button")}
+        size={size}
+        variant={variant}
+        disabled={disabled ?? inputProps?.disabled}
+      />
+    );
+  }
+);
+
+export default SearchFieldClearButton;

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

@@ -0,0 +1,42 @@
+import React, { forwardRef, InputHTMLAttributes, useContext } from "react";
+import cl from "classnames";
+import { SearchFieldContext } from "./SearchField";
+
+export interface SearchFieldInputProps
+  extends InputHTMLAttributes<HTMLInputElement> {}
+
+export type SearchFieldInputType = React.ForwardRefExoticComponent<
+  SearchFieldInputProps & React.RefAttributes<HTMLInputElement>
+>;
+
+const SearchFieldInput: SearchFieldInputType = forwardRef(
+  ({ className, ...rest }, ref) => {
+    const searchField = useContext(SearchFieldContext);
+
+    if (searchField === null) {
+      console.warn("SearchFieldInput has to be wrapped in <SearchField />");
+      return null;
+    }
+
+    const { size, inputProps } = searchField;
+
+    return (
+      <input
+        {...rest}
+        {...inputProps}
+        type="search"
+        role="searchbox"
+        ref={ref}
+        className={cl(
+          className,
+          "navds-search-field__input",
+          "navds-text-field__input",
+          "navds-body-short",
+          `navds-body-${size ?? "medium"}`
+        )}
+      />
+    );
+  }
+);
+
+export default SearchFieldInput;

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

@@ -0,0 +1,25 @@
+import React, { useState } from "react";
+import { Close, Search } from "@navikt/ds-icons";
+import { SearchField } from "../index";
+
+export const Example = ({ size = "medium" }: { size: "medium" | "small" }) => {
+  const [value, setValue] = useState("");
+
+  return (
+    <SearchField size={size} label="Skriv i søkefeltet for å vise clearbutton">
+      <SearchField.Input
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+      />
+      {!!value && (
+        <SearchField.Clear onClick={() => setValue("")}>
+          <Close />
+          Tøm
+        </SearchField.Clear>
+      )}
+      <SearchField.Button>
+        <Search /> Søk
+      </SearchField.Button>
+    </SearchField>
+  );
+};