refactor: ta i bruk chip og opprydning i combobox

fremtind · Nov 15, 2024 · a6e191a · a6e191a
1 parent d12207b
commit a6e191a
Show file tree

Hide file tree

Showing 17 changed files with 532 additions and 481 deletions.
diff --git a/packages/chip-react/src/Chip.tsx b/packages/chip-react/src/Chip.tsx
@@ -1,6 +1,6 @@
 import { CheckIcon, CloseIcon } from "@fremtind/jkl-icons-react";
 import cl from "classnames";
-import React, { FC, HTMLAttributes } from "react";
+import React, { forwardRef, HTMLAttributes } from "react";
 
 type Size = "small" | "large";
 
@@ -18,25 +18,25 @@ export type ChipVariant =
 
 export type ChipProps = ChipVariant & HTMLAttributes<HTMLButtonElement>;
 
-export const Chip: FC<ChipProps> = ({
-    className,
-    variant,
-    onClick,
-    children,
-    selected,
-    size = "small",
-    ...rest
-}) => {
+export const Chip = forwardRef<HTMLButtonElement, ChipProps>(function Chip(
+    {
+        className,
+        variant,
+        onClick,
+        children,
+        selected,
+        size = "small",
+        ...rest
+    },
+    ref,
+) {
     return (
         <button
+            ref={ref}
             className={cl(
                 "jkl-chip",
-                {
-                    "jkl-chip--input": variant === "input",
-                    "jkl-chip--filter": variant === "filter",
-                    "jkl-chip--small": size === "small",
-                    "jkl-chip--large": size === "large",
-                },
+                `jkl-chip--${size}`,
+                `jkl-chip--${variant}`,
                 className,
             )}
             onClick={onClick}
@@ -53,11 +53,13 @@ export const Chip: FC<ChipProps> = ({
             )}
             {variant === "input" && (
                 <CloseIcon
-                    className="jkl-chip__icon lol"
+                    className="jkl-chip__icon"
                     variant="small"
                     data-testid="jkl-close-icon"
                 />
             )}
         </button>
     );
-};
+});
+
+Chip.displayName = "Chip";
diff --git a/packages/combobox-react/documentation/ComboboxExample.tsx b/packages/combobox-react/documentation/ComboboxExample.tsx
@@ -1,4 +1,4 @@
-import type { LabelVariant } from "@fremtind/jkl-input-group-react";
+import { type LabelVariant } from "@fremtind/jkl-input-group-react";
 import React, { FC, useState } from "react";
 import { ExampleComponentProps, ExampleKnobsProps } from "../../../doc-utils";
 import { Combobox, type ComboboxValuePair } from "../src";
@@ -8,7 +8,7 @@ export const comboboxExampleKnobs: ExampleKnobsProps = {
         "Med hjelpetekst",
         "Med feil",
         "Med empty state",
-        "Med tagHover",
+        "Tooltip ved hover på valgt alternativ",
     ],
     choiceProps: [
         {
@@ -25,47 +25,55 @@ export const ComboboxExample: FC<ExampleComponentProps> = ({
 }) => {
     const variant = choiceValues && (choiceValues["Variant"] as LabelVariant);
 
-    const items: ComboboxValuePair[] = [
-        { value: "a080", label: "A080 - Rotavirusenteritt", tagLabel: "A080" },
+    const options: ComboboxValuePair[] = [
+        {
+            value: "a080",
+            label: "A080 - Rotavirusenteritt",
+            selectedOptionLabel: "A080",
+        },
         {
             value: "a081",
             label: "A081 - Akutt gastroenteritt som skyldes norovirus",
-            tagLabel: "A081",
+            selectedOptionLabel: "A081",
+        },
+        {
+            value: "a082",
+            label: "A082 - Adenovirusenteritt",
+            selectedOptionLabel: "A082",
         },
-        { value: "a082", label: "A082 - Adenovirusenteritt", tagLabel: "A082" },
         {
             value: "a083",
             label: "A083 - Annen virusenteritt",
-            tagLabel: "A083",
+            selectedOptionLabel: "A083",
         },
         {
             value: "a084",
             label: "A084 - Uspesifisert virusinfeksjon i mage-tarmkanalen",
-            tagLabel: "A084",
+            selectedOptionLabel: "A084",
         },
         {
             value: "a085",
             label: "A085 - Annen spesifisert mage-tarminfeksjon",
-            tagLabel: "A085",
+            selectedOptionLabel: "A085",
         },
         {
             value: "a090",
             label: "A090 - Annen eller uspesifisert gastroenteritt eller kolitt av infeksiøs årsak",
-            tagLabel: "A090",
+            selectedOptionLabel: "A090",
         },
         {
             value: "a099",
             label: "A099 - Gastroenteritt eller kolitt av uspesifisert årsak",
-            tagLabel: "A099",
+            selectedOptionLabel: "A099",
         },
         {
             value: "a150",
             label: "A150 - Lungetuberkulose bekreftet ved mikroskopi av sputum med eller uten kultur",
-            tagLabel: "A150",
+            selectedOptionLabel: "A150",
         },
     ];
 
-    const [selectedValues, setSelectedValues] = useState<
+    const [selectedOptions, setSelectedOptions] = useState<
         Array<ComboboxValuePair>
     >([]);
 
@@ -81,8 +89,10 @@ export const ComboboxExample: FC<ExampleComponentProps> = ({
         boolValues && boolValues["Med empty state"]
             ? "Ingen valg matcher søket"
             : undefined;
-    const hasTagHover =
-        boolValues && boolValues["Med tagHover"] ? true : undefined;
+    const selectedOptionTooltip =
+        boolValues && boolValues["Tooltip ved hover på valgt alternativ"]
+            ? true
+            : undefined;
 
     return (
         <Combobox
@@ -95,11 +105,11 @@ export const ComboboxExample: FC<ExampleComponentProps> = ({
             errorLabel={errorLabel}
             label="Velg sykdommer"
             noMatchingOption={noMatchingOption}
-            hasTagHover={hasTagHover}
-            items={items}
-            value={selectedValues}
+            selectedOptionTooltip={selectedOptionTooltip}
+            options={options}
+            selectedOptions={selectedOptions}
             onChange={(event) => {
-                setSelectedValues(event.target.selectedOptions);
+                setSelectedOptions(event.target.selectedOptions);
                 console.log("Change: ", event);
             }}
         />
@@ -129,27 +139,31 @@ export const comboboxExampleCode = ({
             ? `"Ingen valg matcher søket"`
             : `{undefined}`
     }
-    hasTagHover=${!!boolValues?.["Med tagHover"] ? `{true}` : `{undefined}`}
-    items={[
-        { value: "a080", label: "A080 - Rotavirusenteritt", tagLabel: "A080" },
-        { value: "a081", label: "A081 - Akutt gastroenteritt som skyldes norovirus", tagLabel: "A081" },
-        { value: "a082", label: "A082 - Adenovirusenteritt", tagLabel: "A082" },
-        { value: "a083", label: "A083 - Annen virusenteritt", tagLabel: "A083" },
-        { value: "a084", label: "A084 - Uspesifisert virusinfeksjon i mage-tarmkanalen", tagLabel: "A084" },
-        { value: "a085", label: "A085 - Annen spesifisert mage-tarminfeksjon", tagLabel: "A085" },
+    selectedOptionTooltip=${
+        !!boolValues?.["Tooltip ved hover på valgt alternativ"]
+            ? `{true}`
+            : `{undefined}`
+    }
+    options={[
+        { value: "a080", label: "A080 - Rotavirusenteritt", selectedOptionLabel: "A080" },
+        { value: "a081", label: "A081 - Akutt gastroenteritt som skyldes norovirus", selectedOptionLabel: "A081" },
+        { value: "a082", label: "A082 - Adenovirusenteritt", selectedOptionLabel: "A082" },
+        { value: "a083", label: "A083 - Annen virusenteritt", selectedOptionLabel: "A083" },
+        { value: "a084", label: "A084 - Uspesifisert virusinfeksjon i mage-tarmkanalen", selectedOptionLabel: "A084" },
+        { value: "a085", label: "A085 - Annen spesifisert mage-tarminfeksjon", selectedOptionLabel: "A085" },
         {
             value: "a090",
             label: "A090 - Annen eller uspesifisert gastroenteritt eller kolitt av infeksiøs årsak",
-            tagLabel: "A090",
+            selectedOptionLabel: "A090",
         },
-        { value: "a099", label: "A099 - Gastroenteritt eller kolitt av uspesifisert årsak", tagLabel: "A099" },
+        { value: "a099", label: "A099 - Gastroenteritt eller kolitt av uspesifisert årsak", selectedOptionLabel: "A099" },
         {
             value: "a150",
             label: "A150 - Lungetuberkulose bekreftet ved mikroskopi av sputum med eller uten kultur",
-            tagLabel: "A150",
+            selectedOptionLabel: "A150",
         },
     ]}
-    value={selectedValues}
-    onChange={setSelectedValues}
+    selectedOptions={selectedOptions}
+    onChange={setSelectedOptions}
     />
 `;
diff --git a/packages/combobox-react/documentation/Example.tsx b/packages/combobox-react/documentation/Example.tsx
@@ -6,7 +6,7 @@ import {
     comboboxExampleKnobs,
 } from "./ComboboxExample";
 import "../../combobox/combobox.scss";
-import "../../tag/tag.scss";
+import "../../chip/chip.scss";
 import "../../icon-button/icon-button.scss";
 import "../../icons/icons.scss";
 

diff --git a/packages/combobox-react/package.json b/packages/combobox-react/package.json
@@ -36,6 +36,7 @@
         "dev": "run-p dev:*"
     },
     "dependencies": {
+        "@fremtind/jkl-chip-react": "^1.0.0",
         "@fremtind/jkl-combobox": "^2.2.26",
         "@fremtind/jkl-core": "^14.8.5",
         "@fremtind/jkl-icon-button-react": "^5.0.25",