@navikt/ds-react 0.17.17 → 0.17.20

package/src/form/search/Search.tsx

@@ -1,10 +1,9 @@
-import { Close } from "@navikt/ds-icons";
+import { Close, Search as SearchIcon } from "@navikt/ds-icons";
 import cl from "classnames";
 import React, {
   forwardRef,
   InputHTMLAttributes,
   useCallback,
-  useEffect,
   useRef,
   useState,
 } from "react";
@@ -59,9 +58,9 @@ export interface SearchProps
   clearButton?: boolean;
   /**
    * Changes button-variant
-   * @default "tertiary"
+   * @default "primary"
    */
-  variant?: "tertiary" | "primary";
+  variant?: "primary" | "secondary" | "simple";
 }
 
 interface SearchComponent
@@ -74,8 +73,8 @@ interface SearchComponent
 export interface SearchContextProps {
   disabled?: boolean;
   size: "medium" | "small";
-  variant?: "tertiary" | "primary";
-  onSearch?: () => void;
+  variant: "primary" | "secondary" | "simple";
+  onSearch: () => void;
 }
 
 export const SearchContext = React.createContext<SearchContextProps | null>(
@@ -99,7 +98,9 @@ const Search = forwardRef<HTMLInputElement, SearchProps>((props, ref) => {
     clearButton = true,
     children,
     onSearch,
-    variant = "tertiary",
+    variant = "primary",
+    defaultValue,
+    onChange,
     ...rest
   } = props;
 
@@ -107,26 +108,23 @@ const Search = forwardRef<HTMLInputElement, SearchProps>((props, ref) => {
   const mergedRef = mergeRefs([searchRef, ref]);
   const [wrapperRef, setWrapperRef] = useState<HTMLDivElement | null>(null);
 
-  const [controlledValue, setControlledValue] = useState(value ?? "");
+  const [internalValue, setInternalValue] = useState(defaultValue ?? "");
 
   const handleChange = useCallback(
     (v: string) => {
-      searchRef.current && value === undefined && setControlledValue(v);
-      props?.onChange?.(v);
+      value === undefined && setInternalValue(v);
+      onChange?.(v);
     },
-    [props, value]
+    [onChange, value]
   );
 
   const handleClear = useCallback(
     (event: SearchClearEvent) => {
       onClear?.(event);
       handleChange("");
-      if (searchRef.current && value === undefined) {
-        searchRef.current.value = "";
-      }
       searchRef.current && searchRef.current?.focus?.();
     },
-    [handleChange, onClear, value]
+    [handleChange, onClear]
   );
 
   useEventListener(
@@ -143,10 +141,6 @@ const Search = forwardRef<HTMLInputElement, SearchProps>((props, ref) => {
     wrapperRef
   );
 
-  useEffect(() => {
-    value !== undefined && setControlledValue(value);
-  }, [value]);
-
   return (
     <div
       ref={setWrapperRef}
@@ -184,23 +178,27 @@ const Search = forwardRef<HTMLInputElement, SearchProps>((props, ref) => {
       )}
       <div className="navds-search__wrapper">
         <div className="navds-search__wrapper-inner">
+          {variant === "simple" && (
+            <SearchIcon aria-hidden className="navds-search__search-icon" />
+          )}
           <input
             ref={mergedRef}
             {...omit(rest, ["size"])}
             {...inputProps}
-            {...(props.value !== undefined && { value: props.value })}
+            value={value ?? internalValue}
             onChange={(e) => handleChange(e.target.value)}
             type="search"
             role="searchbox"
             className={cl(
               className,
               "navds-search__input",
+              `navds-search__input--${variant}`,
               "navds-text-field__input",
               "navds-body-short",
-              `navds-body-${size ?? "medium"}`
+              `navds-body-${size}`
             )}
           />
-          {controlledValue && clearButton && (
+          {(value ?? internalValue) && clearButton && (
             <button
               type="button"
               onClick={(e) => handleClear({ trigger: "Click", event: e })}
@@ -218,10 +216,10 @@ const Search = forwardRef<HTMLInputElement, SearchProps>((props, ref) => {
             size,
             disabled: inputProps.disabled,
             variant,
-            onSearch: () => onSearch?.(controlledValue),
+            onSearch: () => onSearch?.(value ?? internalValue),
           }}
         >
-          {children ? children : <SearchButton />}
+          {children ? children : variant !== "simple" && <SearchButton />}
         </SearchContext.Provider>
       </div>
     </div>

package/src/form/search/SearchButton.tsx

@@ -33,7 +33,7 @@ const SearchButton: SearchButtonType = forwardRef(
         {...rest}
         ref={ref}
         size={size}
-        variant={variant}
+        variant={variant === "secondary" ? "secondary" : "primary"}
         className={cl("navds-search__button-search", className)}
         disabled={context?.disabled ?? disabled}
         onClick={(e) => {

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

@@ -0,0 +1,52 @@
+import { Meta } from "@storybook/react/types-6-0";
+import React from "react";
+import { Heading } from "../..";
+import { Search } from "..";
+
+export default {
+  title: "ds-react/form/search",
+  component: Search,
+} as Meta;
+
+export const LightTheme = () => (
+  <div
+    style={{ maxWidth: 400, display: "flex", flexDirection: "column", gap: 16 }}
+  >
+    <Heading size="xlarge">Search</Heading>
+    <Heading level="2" size="large">
+      size medium
+    </Heading>
+    <Search label="hidden label" placeholder="Søk" />
+    <Search label="hidden label" variant="secondary" defaultValue="dagpenger" />
+    <Search label="hidden label" variant="simple" placeholder="Søk" />
+    <Search label="with label" hideLabel={false} />
+
+    <Heading level="2" size="large">
+      size small
+    </Heading>
+    <Search label="hidden label" size="small" placeholder="Søk" />
+    <Search
+      label="hidden label"
+      variant="secondary"
+      size="small"
+      defaultValue="dagpenger"
+    />
+    <Search
+      label="hidden label"
+      variant="simple"
+      size="small"
+      placeholder="Søk"
+    />
+    <Search label="with label" hideLabel={false} size="small" />
+  </div>
+);
+
+export const DarkTheme = () => (
+  <div data-theme="dark">
+    <LightTheme />
+  </div>
+);
+
+DarkTheme.parameters = {
+  backgrounds: { default: "dark" },
+};

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

@@ -21,11 +21,18 @@ export const All = () => {
       <h1>Search</h1>
 
       <Search label="Søk alle sider om X og Y" onSearch={console.log}></Search>
-      <h2>Primary search</h2>
+      <h2>Secondary</h2>
       <Search
         label="Søk alle sider om X og Y"
         onSearch={console.log}
-        variant="primary"
+        variant="secondary"
+      ></Search>
+
+      <h2>No button</h2>
+      <Search
+        label="Søk alle sider om X og Y"
+        onSearch={console.log}
+        variant="simple"
       ></Search>
 
       <h2>Search small</h2>
@@ -42,7 +49,7 @@ export const All = () => {
         description="Beskrivelse av søket"
         size="small"
         hideLabel
-        variant="primary"
+        variant="secondary"
       >
         <Search.Button />
       </Search>

package/src/page-header/stories/header.stories.mdx

@@ -2,7 +2,7 @@ import { Meta, Canvas } from "@storybook/addon-docs";
 import { PageHeader } from "../index";
 import { illustrationPictogram } from "./pictogram";
 
-<Meta title="ds-react/page-header/intro" />
+<Meta title="ds-react(deprecated)/page-header/intro" />
 
 # Hvordan ta i bruk PageHeader
 

package/src/page-header/stories/header.stories.tsx

@@ -3,7 +3,7 @@ import { PageHeader } from "../index";
 import { Meta } from "@storybook/react/types-6-0";
 import { illustrationPictogram } from "./pictogram";
 export default {
-  title: "ds-react/page-header",
+  title: "ds-react(deprecated)/page-header",
   component: PageHeader,
 } as Meta;
 

package/src/step-indicator/stories/step-indicator.stories.mdx

@@ -2,7 +2,7 @@ import { Meta, Canvas } from "@storybook/addon-docs";
 import { StepIndicator } from "..";
 import { Example } from "./Example";
 
-<Meta title="ds-react/step-indicator/intro" />
+<Meta title="ds-react(deprecated)/step-indicator/intro" />
 
 # Hvordan ta i bruk StepIndicator
 

package/src/step-indicator/stories/step-indicator.stories.tsx

@@ -4,7 +4,7 @@ import { Meta } from "@storybook/react/types-6-0";
 import { Link, HashRouter as Router, useLocation } from "react-router-dom";
 
 export default {
-  title: "ds-react/step-indicator",
+  title: "ds-react(deprecated)/step-indicator",
   component: StepIndicator,
 } as Meta;