feat: fjern dismissable fra tag komponent

fremtind · Nov 15, 2024 · 2323a80 · 2323a80
1 parent e10c983
commit 2323a80
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 195 deletions.
diff --git a/packages/jokul/src/components/tag/Tag.tsx b/packages/jokul/src/components/tag/Tag.tsx
@@ -1,23 +1,9 @@
 import clsx from "clsx";
-import React, {
-    ButtonHTMLAttributes,
-    FC,
-    HTMLAttributes,
-    MouseEventHandler,
-} from "react";
+import React, { FC, HTMLAttributes } from "react";
 import { Density } from "../../core/types.js";
-import { CloseIcon } from "../icon/icons/CloseIcon.js";
-import { IconButton } from "../icon-button/IconButton.js";
-
-export interface DismissAction
-    extends Exclude<ButtonHTMLAttributes<HTMLButtonElement>, "disabled"> {
-    label: string;
-    onClick: MouseEventHandler<HTMLButtonElement>;
-}
 
 export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
     density?: Density;
-    dismissAction?: DismissAction;
 }
 
 type Variant = "info" | "error" | "warning" | "success";
@@ -38,13 +24,7 @@ function getDisplayName(variant?: Variant) {
 }
 
 function tagFactory(variant?: Variant) {
-    const Tag: FC<TagProps> = ({
-        className,
-        density,
-        dismissAction,
-        children,
-        ...rest
-    }) => (
+    const Tag: FC<TagProps> = ({ className, density, children, ...rest }) => (
         <span
             className={clsx(
                 "jkl-tag",
@@ -60,18 +40,6 @@ function tagFactory(variant?: Variant) {
             {...rest}
         >
             {children}
-            {dismissAction && (
-                <IconButton
-                    className="jkl-tag__dismiss-action"
-                    density={density}
-                    title={dismissAction.label}
-                    onClick={dismissAction.onClick}
-                    onFocus={dismissAction.onFocus}
-                    onBlur={dismissAction.onBlur}
-                >
-                    <CloseIcon variant="small" bold />
-                </IconButton>
-            )}
         </span>
     );
     Tag.displayName = getDisplayName(variant);

diff --git a/packages/jokul/src/components/tag/documentation/Example.tsx b/packages/jokul/src/components/tag/documentation/Example.tsx
@@ -1,13 +1,7 @@
 import { DevExample } from "doc-utils/DevExample.js";
 import React from "react";
-import { TagExample, tagExampleKnobs } from "./TagExample.js";
+import { TagExample } from "./TagExample.js";
 
 export default function Example() {
-    return (
-        <DevExample
-            title="Tag"
-            component={TagExample}
-            knobs={tagExampleKnobs}
-        />
-    );
+    return <DevExample title="Tag" component={TagExample} />;
 }
diff --git a/packages/jokul/src/components/tag/documentation/TagExample.tsx b/packages/jokul/src/components/tag/documentation/TagExample.tsx
@@ -1,10 +1,6 @@
-import { ExampleComponentProps, ExampleKnobsProps } from "doc-utils/index.js";
-import React, { FC, useState } from "react";
-import { ErrorTag, InfoTag, SuccessTag, Tag, WarningTag } from "../Tag.js";
-
-export const tagExampleKnobs: ExampleKnobsProps = {
-    boolProps: ["Dismissable"],
-};
+import { ExampleComponentProps } from "doc-utils/index.js";
+import React, { FC } from "react";
+import { Tag, InfoTag, SuccessTag, WarningTag, ErrorTag } from "../Tag.js";
 
 type TagType = "Info" | "Success" | "Warning" | "Error";
 
@@ -40,41 +36,32 @@ const getTagContent = (typeofTag?: TagType): string => {
 
 const ExampleTagWrapper: React.FC<
     ExampleComponentProps & { variant?: TagType }
-> = ({ boolValues, variant }) => {
-    const [dismissed, setDismissed] = useState(false);
-    const C = getTypeOfTag(variant);
-    const dismissAction = boolValues?.["Dismissable"]
-        ? {
-              onClick: () => {
-                  setDismissed(true);
-                  setTimeout(() => setDismissed(false), 2600);
-              },
-              label: "Fjern filter",
-          }
-        : undefined;
-
-    if (dismissed) {
-        return null;
-    }
+> = ({ variant }) => {
+    const TagComponent = getTypeOfTag(variant);
 
     return (
-        <C
-            className="jkl-spacing-2xs--right jkl-spacing-2xs--top"
-            dismissAction={dismissAction}
-        >
+        <TagComponent className="jkl-spacing-2xs--right jkl-spacing-2xs--top">
             {getTagContent(variant)}
-        </C>
+        </TagComponent>
     );
 };
 
-export const TagExample: FC<ExampleComponentProps> = ({ boolValues }) => {
+export const TagExample: FC<ExampleComponentProps> = () => {
     return (
         <div>
-            <ExampleTagWrapper boolValues={boolValues} />
-            <ExampleTagWrapper boolValues={boolValues} variant="Info" />
-            <ExampleTagWrapper boolValues={boolValues} variant="Success" />
-            <ExampleTagWrapper boolValues={boolValues} variant="Warning" />
-            <ExampleTagWrapper boolValues={boolValues} variant="Error" />
+            <ExampleTagWrapper />
+            <ExampleTagWrapper variant="Info" />
+            <ExampleTagWrapper variant="Success" />
+            <ExampleTagWrapper variant="Warning" />
+            <ExampleTagWrapper variant="Error" />
         </div>
     );
 };
+
+export const tagExampleCode = (): string => `
+    <Tag className="jkl-spacing-2xs--right jkl-spacing-2xs--top">Emne</Tag>
+    <InfoTag className="jkl-spacing-2xs--right jkl-spacing-2xs--top">Info Tag</InfoTag>
+    <SuccessTag className="jkl-spacing-2xs--right jkl-spacing-2xs--top">Success Tag</SuccessTag>
+    <WarningTag className="jkl-spacing-2xs--right jkl-spacing-2xs--top">Warning Tag</WarningTag>
+    <ErrorTag className="jkl-spacing-2xs--right jkl-spacing-2xs--top">Error Tag</ErrorTag>
+`;
diff --git a/packages/jokul/src/components/tag/index.ts b/packages/jokul/src/components/tag/index.ts
@@ -5,5 +5,4 @@ export {
     WarningTag,
     SuccessTag,
     type TagProps,
-    type DismissAction,
 } from "./Tag.js";
diff --git a/packages/tag-react/documentation/Example.tsx b/packages/tag-react/documentation/Example.tsx
@@ -1,15 +1,9 @@
 import React from "react";
 import { DevExample } from "../../../doc-utils";
-import { TagExample, tagExampleKnobs } from "./TagExample";
+import { TagExample } from "./TagExample";
 import "../../tag/tag.scss";
 import "../../icon-button/icon-button.scss";
 
 export default function Example() {
-    return (
-        <DevExample
-            title="Tag"
-            component={TagExample}
-            knobs={tagExampleKnobs}
-        />
-    );
+    return <DevExample title="Tag" component={TagExample} />;
 }
diff --git a/packages/tag-react/documentation/TagExample.tsx b/packages/tag-react/documentation/TagExample.tsx
@@ -1,11 +1,7 @@
-import React, { FC, useState } from "react";
-import { ExampleComponentProps, ExampleKnobsProps } from "../../../doc-utils";
+import React, { FC } from "react";
+import { ExampleComponentProps } from "../../../doc-utils";
 import { Tag, InfoTag, SuccessTag, WarningTag, ErrorTag } from "../src";
 
-export const tagExampleKnobs: ExampleKnobsProps = {
-    boolProps: ["Dismissable"],
-};
-
 type TagType = "Info" | "Success" | "Warning" | "Error";
 
 const getTypeOfTag = (typeofTag?: TagType) => {
@@ -40,86 +36,32 @@ const getTagContent = (typeofTag?: TagType): string => {
 
 const ExampleTagWrapper: React.FC<
     ExampleComponentProps & { variant?: TagType }
-> = ({ boolValues, variant }) => {
-    const [dismissed, setDismissed] = useState(false);
-    const C = getTypeOfTag(variant);
-    const dismissAction = boolValues?.["Dismissable"]
-        ? {
-              onClick: () => {
-                  setDismissed(true);
-                  setTimeout(() => setDismissed(false), 2600);
-              },
-              label: "Fjern filter",
-          }
-        : undefined;
-
-    if (dismissed) {
-        return null;
-    }
+> = ({ variant }) => {
+    const TagComponent = getTypeOfTag(variant);
 
     return (
-        <C
-            className="jkl-spacing-2xs--right jkl-spacing-2xs--top"
-            dismissAction={dismissAction}
-        >
+        <TagComponent className="jkl-spacing-2xs--right jkl-spacing-2xs--top">
             {getTagContent(variant)}
-        </C>
+        </TagComponent>
     );
 };
 
-export const TagExample: FC<ExampleComponentProps> = ({ boolValues }) => {
+export const TagExample: FC<ExampleComponentProps> = () => {
     return (
         <div>
-            <ExampleTagWrapper boolValues={boolValues} />
-            <ExampleTagWrapper boolValues={boolValues} variant="Info" />
-            <ExampleTagWrapper boolValues={boolValues} variant="Success" />
-            <ExampleTagWrapper boolValues={boolValues} variant="Warning" />
-            <ExampleTagWrapper boolValues={boolValues} variant="Error" />
+            <ExampleTagWrapper />
+            <ExampleTagWrapper variant="Info" />
+            <ExampleTagWrapper variant="Success" />
+            <ExampleTagWrapper variant="Warning" />
+            <ExampleTagWrapper variant="Error" />
         </div>
     );
 };
 
-export const tagExampleCode = ({
-    boolValues,
-}: ExampleComponentProps): string => `
-    <Tag className="jkl-spacing-2xs--right jkl-spacing-2xs--top"${
-        boolValues?.["Dismissable"]
-            ? `{
-        onClick: () => setDismissed(true),
-        label: "Fjern filter",
-    }`
-            : ""
-    }>Emne</Tag>
-    <InfoTag className="jkl-spacing-2xs--right jkl-spacing-2xs--top"${
-        boolValues?.["Dismissable"]
-            ? `{
-        onClick: () => setDismissed(true),
-        label: "Fjern filter",
-    }`
-            : ""
-    }>Info</InfoTag>
-    <SuccessTag className="jkl-spacing-2xs--right jkl-spacing-2xs--top"${
-        boolValues?.["Dismissable"]
-            ? `{
-        onClick: () => setDismissed(true),
-        label: "Fjern filter",
-    }`
-            : ""
-    }>Suksess</SuccessTag>
-    <WarningTag className="jkl-spacing-2xs--right jkl-spacing-2xs--top"${
-        boolValues?.["Dismissable"]
-            ? `{
-        onClick: () => setDismissed(true),
-        label: "Fjern filter",
-    }`
-            : ""
-    }>Advarsel</WarningTag>
-    <ErrorTag className="jkl-spacing-2xs--right jkl-spacing-2xs--top"${
-        boolValues?.["Dismissable"]
-            ? `{
-        onClick: () => setDismissed(true),
-        label: "Fjern filter",
-    }`
-            : ""
-    }>Feil</ErrorTag>
+export const tagExampleCode = (): string => `
+    <Tag className="jkl-spacing-2xs--right jkl-spacing-2xs--top">Emne</Tag>
+    <InfoTag className="jkl-spacing-2xs--right jkl-spacing-2xs--top">Info Tag</InfoTag>
+    <SuccessTag className="jkl-spacing-2xs--right jkl-spacing-2xs--top">Success Tag</SuccessTag>
+    <WarningTag className="jkl-spacing-2xs--right jkl-spacing-2xs--top">Warning Tag</WarningTag>
+    <ErrorTag className="jkl-spacing-2xs--right jkl-spacing-2xs--top">Error Tag</ErrorTag>
 `;
diff --git a/packages/tag-react/src/Tag.tsx b/packages/tag-react/src/Tag.tsx
@@ -1,23 +1,9 @@
 import { Density } from "@fremtind/jkl-core";
-import { IconButton } from "@fremtind/jkl-icon-button-react";
-import { CloseIcon } from "@fremtind/jkl-icons-react";
 import cx from "classnames";
-import React, {
-    ButtonHTMLAttributes,
-    FC,
-    HTMLAttributes,
-    MouseEventHandler,
-} from "react";
-
-export interface DismissAction
-    extends Exclude<ButtonHTMLAttributes<HTMLButtonElement>, "disabled"> {
-    label: string;
-    onClick: MouseEventHandler<HTMLButtonElement>;
-}
+import React, { FC, HTMLAttributes } from "react";
 
 export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
     density?: Density;
-    dismissAction?: DismissAction;
 }
 
 type Variant = "info" | "error" | "warning" | "success";
@@ -38,13 +24,7 @@ function getDisplayName(variant?: Variant) {
 }
 
 function tagFactory(variant?: Variant) {
-    const Tag: FC<TagProps> = ({
-        className,
-        density,
-        dismissAction,
-        children,
-        ...rest
-    }) => (
+    const Tag: FC<TagProps> = ({ className, density, children, ...rest }) => (
         <span
             className={cx(
                 "jkl-tag",
@@ -60,18 +40,6 @@ function tagFactory(variant?: Variant) {
             {...rest}
         >
             {children}
-            {dismissAction && (
-                <IconButton
-                    className="jkl-tag__dismiss-action"
-                    density={density}
-                    title={dismissAction.label}
-                    onClick={dismissAction.onClick}
-                    onFocus={dismissAction.onFocus}
-                    onBlur={dismissAction.onBlur}
-                >
-                    <CloseIcon variant="small" bold />
-                </IconButton>
-            )}
         </span>
     );
     Tag.displayName = getDisplayName(variant);