HelpText: Justert eksempel og refaktorert type (#2607)

navikt · Jan 11, 2024 · 7bc697b · 7bc697b
1 parent a6baa67
commit 7bc697b
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 30 deletions.
diff --git a/@navikt/core/react/src/help-text/HelpText.tsx b/@navikt/core/react/src/help-text/HelpText.tsx
@@ -13,23 +13,6 @@ export interface HelpTextProps
    * @default "hjelp"
    */
   title?: string;
-  /**
-   * Default dialog-placement on open
-   * @default "top"
-   */
-  placement?:
-    | "top"
-    | "bottom"
-    | "right"
-    | "left"
-    | "top-start"
-    | "top-end"
-    | "bottom-start"
-    | "bottom-end"
-    | "right-start"
-    | "right-end"
-    | "left-start"
-    | "left-end";
   /**
    * Classname for wrapper
    */
@@ -54,7 +37,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
     {
       className,
       children,
-      placement = "top",
+      placement,
       strategy = "absolute",
       title = "hjelp",
       onClick,

diff --git a/@navikt/core/react/src/popover/Popover.tsx b/@navikt/core/react/src/popover/Popover.tsx
@@ -41,7 +41,7 @@ export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
    */
   onClose: () => void;
   /**
-   * Orientation for popover
+   * Default orientation of popover
    * @note Try to keep general usage to "top", "bottom", "left", "right"
    * @default "top"
    */

diff --git a/aksel.nav.no/website/pages/eksempler/helptext/placement.tsx b/aksel.nav.no/website/pages/eksempler/helptext/placement.tsx
@@ -1,22 +1,22 @@
-import { HelpText } from "@navikt/ds-react";
+import { HelpText, VStack } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return (
-    <div className="grid gap-4">
-      <HelpText title="Hvor kommer dette fra?">
-        Informasjonen er hentet fra X sin statistikk fra 2021
+    <VStack gap="4">
+      <HelpText title="top" placement="top">
+        placement = top
       </HelpText>
-      <HelpText title="Hvor kommer dette fra?" placement="right">
-        Informasjonen er hentet fra X sin statistikk fra 2021
+      <HelpText title="right" placement="right">
+        placement = right
       </HelpText>
-      <HelpText title="Hvor kommer dette fra?" placement="bottom">
-        Informasjonen er hentet fra X sin statistikk fra 2021
+      <HelpText title="bottom" placement="bottom">
+        placement = bottom
       </HelpText>
-      <HelpText title="Hvor kommer dette fra?" placement="left">
-        Informasjonen er hentet fra X sin statistikk fra 2021
+      <HelpText title="left" placement="left">
+        placement = left
       </HelpText>
-    </div>
+    </VStack>
   );
 };