🎨 make inline-flex version opt-in, improve prop naming

navikt · Aug 8, 2023 · b2dba6a · b2dba6a
1 parent 1f76891
commit b2dba6a
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 4 deletions.
diff --git a/@navikt/core/css/link.css b/@navikt/core/css/link.css
@@ -3,6 +3,12 @@
   text-decoration: underline;
 }
 
+.navds-link.navds-link--inline {
+  display: inline-flex;
+  align-items: baseline;
+  gap: var(--a-spacing-1);
+}
+
 .navds-link:visited {
   color: var(--ac-link-visited-text, var(--a-text-visited));
 }
@@ -11,6 +17,10 @@
   margin: 0 -0.1em -0.15em;
 }
 
+.navds-link.navds-link--inline > svg {
+  transform: translateY(0.15em);
+}
+
 .navds-link:hover {
   text-decoration: none;
 }

diff --git a/@navikt/core/react/src/link/Link.tsx b/@navikt/core/react/src/link/Link.tsx
@@ -8,9 +8,14 @@ export interface LinkProps
    * Inverts when the underline appears. If this is true,
    * the underline does not appear by default, but does appear when the link is hovered.
    * This makes it more suitable for use when inlined in text.
+   * @default true
+   */
+  underline?: boolean;
+  /*
+   * Wether or not to render the link as a flex-inline element.
    * @default false
    */
-  "remove-underline"?: boolean;
+  inline?: boolean;
   /**
    * Variant of the component to use.
    * @default "action"
@@ -41,8 +46,9 @@ export const Link: OverridableComponent<LinkProps, HTMLAnchorElement> =
       {
         as: Component = "a",
         className,
-        "remove-underline": removeUnderline = false,
+        underline = true,
         variant = "action",
+        inline,
         ...rest
       },
       ref
@@ -51,7 +57,8 @@ export const Link: OverridableComponent<LinkProps, HTMLAnchorElement> =
         {...rest}
         ref={ref}
         className={cl("navds-link", className, `navds-link--${variant}`, {
-          "navds-link--remove-underline": removeUnderline,
+          "navds-link--remove-underline": !underline,
+          "navds-link--inline": inline,
         })}
       />
     )

diff --git a/@navikt/core/react/src/link/link.stories.tsx b/@navikt/core/react/src/link/link.stories.tsx
@@ -19,13 +19,15 @@ const LinkWrapper = ({
   iconLeft = false,
   variant = "action",
   "remove-underline": removeUnderline = false,
+  inline = false,
 }) => (
   <>
     {" "}
     <Link
       href="#"
       remove-underline={removeUnderline}
       variant={variant as "action" | "neutral" | "subtle"}
+      inline={inline}
     >
       {iconLeft && (
         <>
@@ -85,7 +87,7 @@ export const Default = {
   },
 };
 
-export const Inline = {
+export const InlineInsideBodyLong = {
   render: ({ iconLeft, iconRight }) => {
     return (
       <div
@@ -102,12 +104,14 @@ export const Inline = {
             remove-underline
             iconLeft={iconLeft}
             iconRight={iconRight}
+            inline={true}
           />
           Eiusmod aute.
           <LinkWrapper
             remove-underline
             iconLeft={iconLeft}
             iconRight={iconRight}
+            inline={true}
           />
           Culpa sit aute est duis minim in in voluptate velit Incididunt laborum
           nisi nisi Lorem officia adipisicing non veniam
@@ -148,6 +152,26 @@ export const Inline = {
   },
 };
 
+export const InlineFlex = {
+  render: ({ iconLeft, iconRight }) => {
+    return (
+      <div>
+        <LinkWrapper
+          remove-underline
+          iconLeft={iconLeft}
+          iconRight={iconRight}
+          inline={true}
+        />
+        Eiusmod aute.
+      </div>
+    );
+  },
+  args: {
+    iconLeft: false,
+    iconRight: false,
+  },
+};
+
 const DemoLink = () => (
   <Link href="#">
     <PlusCircleFillIcon aria-hidden /> Ex aliqua incididunt{" "}