🎨 Helptext har nå en prop for wrapperClassName (#2056)

navikt · Jun 19, 2023 · dfbbe92 · dfbbe92
1 parent 42b5af6
commit dfbbe92
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 3 deletions.
diff --git a/.changeset/old-roses-add.md b/.changeset/old-roses-add.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+La til `wrapperClassname`-prop for HelpText
diff --git a/@navikt/core/css/help-text.css b/@navikt/core/css/help-text.css
@@ -33,7 +33,7 @@
 
 .navds-help-text__popover.navds-popover {
   background-color: var(--ac-help-text-popover-bg, var(--a-surface-info-subtle));
-  max-width: 65ch;
+  max-width: min(65ch, 90vw);
 
   --ac-popover-border: var(--a-border-info);
 }

diff --git a/@navikt/core/react/src/help-text/HelpText.tsx b/@navikt/core/react/src/help-text/HelpText.tsx
@@ -29,6 +29,10 @@ export interface HelpTextProps
     | "right-end"
     | "left-start"
     | "left-end";
+  /**
+   * Classname for wrapper
+   */
+  wrapperClassName?: string;
 }
 
 /**
@@ -53,6 +57,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
       strategy = "absolute",
       title = "hjelp",
       onClick,
+      wrapperClassName,
       ...rest
     },
     ref
@@ -62,7 +67,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
     const [open, setOpen] = useState(false);
 
     return (
-      <div className="navds-help-text">
+      <div className={cl("navds-help-text", wrapperClassName)}>
         <button
           {...rest}
           ref={mergedRef}

diff --git a/@navikt/core/react/src/help-text/help-text.stories.tsx b/@navikt/core/react/src/help-text/help-text.stories.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from "react";
-import { HelpText } from "..";
+import { BodyLong, Heading, HelpText } from "..";
 
 export default {
   title: "ds-react/HelpText",
@@ -65,3 +65,36 @@ export const Open = () => {
     </HelpText>
   );
 };
+
+export const WrapperClassName = {
+  render: () => {
+    return (
+      <div>
+        <BodyLong spacing>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
+          perspiciatis vero voluptatum, asperiores cumque, deserunt accusantium
+          ullam ipsa accusamus officia cupiditate quae unde esse culpa, ratione
+          ab quam ea quas?
+        </BodyLong>
+
+        <Heading level="2" size="medium">
+          67 år og 1 måneder øklasdjkl askdak døkasøk daøkdkølasøkld asølkdøka
+          <HelpText wrapperClassName="testClass">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
+            perspiciatis vero voluptatum, asperiores cumque, deserunt
+            accusantium ullam ipsa accusamus officia cupiditate quae unde esse
+            culpa, ratione ab quam ea quas?
+          </HelpText>
+          <style>{`.testClass {display: inline-block; margin-left: 0.5rem; vertical-align: middle;}`}</style>
+        </Heading>
+
+        <BodyLong spacing>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
+          perspiciatis vero voluptatum, asperiores cumque, deserunt accusantium
+          ullam ipsa accusamus officia cupiditate quae unde esse culpa, ratione
+          ab quam ea quas?
+        </BodyLong>
+      </div>
+    );
+  },
+};