@navikt/ds-react 4.9.1 → 4.10.1

package/_docs.json

@@ -5154,6 +5154,69 @@
     "filePath": "src/link/Link.tsx",
     "displayName": "Link",
     "props": {
+      "underline": {
+        "defaultValue": {
+          "value": "true"
+        },
+        "description": "Inverts when the underline appears. If this is false,\nthe underline does not appear by default, but does appear when the link is hovered.\nThis makes it more suitable for use when inlined in text.",
+        "name": "underline",
+        "parent": {
+          "fileName": "src/link/Link.tsx",
+          "name": "LinkProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/link/Link.tsx",
+            "name": "LinkProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "inlineText": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "Renders link with `display: inline` for better wrapping in text.",
+        "name": "inlineText",
+        "parent": {
+          "fileName": "src/link/Link.tsx",
+          "name": "LinkProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/link/Link.tsx",
+            "name": "LinkProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "variant": {
+        "defaultValue": {
+          "value": "action"
+        },
+        "description": "Variant of the component to use.",
+        "name": "variant",
+        "parent": {
+          "fileName": "src/link/Link.tsx",
+          "name": "LinkProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/link/Link.tsx",
+            "name": "LinkProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"action\" | \"neutral\" | \"subtle\""
+        }
+      },
       "children": {
         "defaultValue": null,
         "description": "Link text",

package/cjs/link/Link.js

@@ -52,9 +52,20 @@ const clsx_1 = __importDefault(require("clsx"));
  * <Link href="#">lenke til ny side</Link>
  * <Link as={ReactRouter.Link} to="#">lenke til ny side</Link>
  * ```
+ * @example
+ * ```jsx
+ * <BodyLong>
+ * ...
+ *  <Link href="#" inlineText>lenke til ny side</Link>
+ * ...
+ * </BodyLong>
+ * ```
  */
 exports.Link = (0, react_1.forwardRef)((_a, ref) => {
-    var { as: Component = "a", className } = _a, rest = __rest(_a, ["as", "className"]);
-    return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-link", className) })));
+    var { as: Component = "a", className, underline = true, variant = "action", inlineText = false } = _a, rest = __rest(_a, ["as", "className", "underline", "variant", "inlineText"]);
+    return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-link", className, `navds-link--${variant}`, {
+            "navds-link--remove-underline": !underline,
+            "navds-link--inline-text": inlineText,
+        }) })));
 });
 exports.default = exports.Link;

package/cjs/util/RandomIcon.js

@@ -0,0 +1,37 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RandomIcon = void 0;
+const AllIcons = __importStar(require("@navikt/aksel-icons"));
+const react_1 = __importDefault(require("react"));
+const icons = Object.keys(AllIcons).map((key) => AllIcons[key]);
+const RandomIcon = () => {
+    const Icon = icons[Math.floor(Math.random() * icons.length)];
+    return react_1.default.createElement(Icon, null);
+};
+exports.RandomIcon = RandomIcon;

package/esm/link/Link.d.ts

@@ -1,6 +1,23 @@
 import React from "react";
 import { OverridableComponent } from "../util/OverridableComponent";
 export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * Inverts when the underline appears. If this is false,
+     * 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;
+    /**
+     * Renders link with `display: inline` for better wrapping in text.
+     * @default false
+     */
+    inlineText?: boolean;
+    /**
+     * Variant of the component to use.
+     * @default "action"
+     */
+    variant?: "action" | "neutral" | "subtle";
     /**
      * Link text
      */
@@ -18,6 +35,14 @@ export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>
  * <Link href="#">lenke til ny side</Link>
  * <Link as={ReactRouter.Link} to="#">lenke til ny side</Link>
  * ```
+ * @example
+ * ```jsx
+ * <BodyLong>
+ * ...
+ *  <Link href="#" inlineText>lenke til ny side</Link>
+ * ...
+ * </BodyLong>
+ * ```
  */
 export declare const Link: OverridableComponent<LinkProps, HTMLAnchorElement>;
 export default Link;

package/esm/link/Link.js

@@ -23,10 +23,21 @@ import cl from "clsx";
  * <Link href="#">lenke til ny side</Link>
  * <Link as={ReactRouter.Link} to="#">lenke til ny side</Link>
  * ```
+ * @example
+ * ```jsx
+ * <BodyLong>
+ * ...
+ *  <Link href="#" inlineText>lenke til ny side</Link>
+ * ...
+ * </BodyLong>
+ * ```
  */
 export const Link = forwardRef((_a, ref) => {
-    var { as: Component = "a", className } = _a, rest = __rest(_a, ["as", "className"]);
-    return (React.createElement(Component, Object.assign({}, rest, { ref: ref, className: cl("navds-link", className) })));
+    var { as: Component = "a", className, underline = true, variant = "action", inlineText = false } = _a, rest = __rest(_a, ["as", "className", "underline", "variant", "inlineText"]);
+    return (React.createElement(Component, Object.assign({}, rest, { ref: ref, className: cl("navds-link", className, `navds-link--${variant}`, {
+            "navds-link--remove-underline": !underline,
+            "navds-link--inline-text": inlineText,
+        }) })));
 });
 export default Link;
 //# sourceMappingURL=Link.js.map

package/esm/link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../src/link/Link.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,MAAM,CAAC;AAWtB;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,IAAI,GACf,UAAU,CAAC,CAAC,EAA2C,EAAE,GAAG,EAAE,EAAE;QAApD,EAAE,EAAE,EAAE,SAAS,GAAG,GAAG,EAAE,SAAS,OAAW,EAAN,IAAI,cAAzC,mBAA2C,CAAF;IAAY,OAAA,CAC/D,oBAAC,SAAS,oBAAK,IAAI,IAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,IAAI,CAC1E,CAAA;CAAA,CAAC,CAAC;AAEL,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../src/link/Link.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,MAAM,CAAC;AA4BtB;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,IAAI,GACf,UAAU,CACR,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,EAAE,EAAE,SAAS,GAAG,GAAG,EACnB,SAAS,EACT,SAAS,GAAG,IAAI,EAChB,OAAO,GAAG,QAAQ,EAClB,UAAU,GAAG,KAAK,OAEnB,EADI,IAAI,cANT,yDAOC,CADQ;IAGN,OAAA,CACH,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE,eAAe,OAAO,EAAE,EAAE;YAC/D,8BAA8B,EAAE,CAAC,SAAS;YAC1C,yBAAyB,EAAE,UAAU;SACtC,CAAC,IACF,CACH,CAAA;CAAA,CACF,CAAC;AAEJ,eAAe,IAAI,CAAC"}

package/esm/util/RandomIcon.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const RandomIcon: () => React.JSX.Element;

package/esm/util/RandomIcon.js

@@ -0,0 +1,8 @@
+import * as AllIcons from "@navikt/aksel-icons";
+import React from "react";
+const icons = Object.keys(AllIcons).map((key) => AllIcons[key]);
+export const RandomIcon = () => {
+    const Icon = icons[Math.floor(Math.random() * icons.length)];
+    return React.createElement(Icon, null);
+};
+//# sourceMappingURL=RandomIcon.js.map

package/esm/util/RandomIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RandomIcon.js","sourceRoot":"","sources":["../../src/util/RandomIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,qBAAqB,CAAC;AAChD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;AAEhE,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE;IAC7B,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IAC7D,OAAO,oBAAC,IAAI,OAAG,CAAC;AAClB,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "4.9.1",
+  "version": "4.10.1",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.24.1",
-    "@navikt/aksel-icons": "^4.9.1",
+    "@navikt/aksel-icons": "^4.10.1",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

package/src/link/Link.tsx

@@ -4,6 +4,23 @@ import { OverridableComponent } from "../util/OverridableComponent";
 
 export interface LinkProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  /**
+   * Inverts when the underline appears. If this is false,
+   * 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;
+  /**
+   * Renders link with `display: inline` for better wrapping in text.
+   * @default false
+   */
+  inlineText?: boolean;
+  /**
+   * Variant of the component to use.
+   * @default "action"
+   */
+  variant?: "action" | "neutral" | "subtle";
   /**
    * Link text
    */
@@ -22,10 +39,37 @@ export interface LinkProps
  * <Link href="#">lenke til ny side</Link>
  * <Link as={ReactRouter.Link} to="#">lenke til ny side</Link>
  * ```
+ * @example
+ * ```jsx
+ * <BodyLong>
+ * ...
+ *  <Link href="#" inlineText>lenke til ny side</Link>
+ * ...
+ * </BodyLong>
+ * ```
  */
 export const Link: OverridableComponent<LinkProps, HTMLAnchorElement> =
-  forwardRef(({ as: Component = "a", className, ...rest }, ref) => (
-    <Component {...rest} ref={ref} className={cl("navds-link", className)} />
-  ));
+  forwardRef(
+    (
+      {
+        as: Component = "a",
+        className,
+        underline = true,
+        variant = "action",
+        inlineText = false,
+        ...rest
+      },
+      ref
+    ) => (
+      <Component
+        {...rest}
+        ref={ref}
+        className={cl("navds-link", className, `navds-link--${variant}`, {
+          "navds-link--remove-underline": !underline,
+          "navds-link--inline-text": inlineText,
+        })}
+      />
+    )
+  );
 
 export default Link;

package/src/link/link.stories.tsx

@@ -6,29 +6,76 @@ import {
   ConfirmationPanel as DsConfirmationPanel,
   Link,
 } from "..";
+import { RandomIcon } from "../util/RandomIcon";
+
 export default {
   title: "ds-react/Link",
   component: Link,
 };
 
+const LinkWrapper = ({
+  children = "Ex aliqua incididunt",
+  iconRight = false,
+  iconLeft = false,
+  variant = "action",
+  underline = false,
+  inlineText = true,
+}) => (
+  <>
+    {" "}
+    <Link
+      href="#"
+      underline={underline}
+      variant={variant as "action" | "neutral" | "subtle"}
+      inlineText={inlineText}
+    >
+      {iconLeft && (
+        <>
+          <RandomIcon />{" "}
+        </>
+      )}
+      {children}
+      {iconRight && (
+        <>
+          {" "}
+          <RandomIcon />
+        </>
+      )}
+    </Link>{" "}
+  </>
+);
+
 export const Default = {
-  render: (props) => {
+  render: ({ icon, inline }) => {
     const LinkD = () => (
-      <Link href="#">
-        {props.icon && <PlusCircleFillIcon />}Ex aliqua incididunt{" "}
-        {props.icon && <PlusCircleFillIcon />}
-      </Link>
+      <>
+        {" "}
+        <Link href="#" underline={!inline} inlineText={inline}>
+          {icon && <PlusCircleFillIcon />}Ex aliqua incididunt
+          {icon && <PlusCircleFillIcon />}
+        </Link>{" "}
+      </>
     );
 
-    if (props.inline) {
+    if (inline) {
       return (
-        <BodyLong>
-          Incididunt laborum nisi nisi Lorem <LinkD /> in. Laborum aute fugiat
-          officia adipisicing non veniam dolor nulla non ex consectetur fugiat
-          eiusmod aute. Culpa sit aute est duis minim in in voluptate velit
-          fugiat. Laboris est id deserunt ut ea Lorem eu. Esse elit laboris aute
-          commodo sint laborum fugiat aliqua.
-        </BodyLong>
+        <div
+          className="colgap"
+          style={{
+            width: "800px",
+            border: "1px solid black",
+            borderRadius: "8px",
+          }}
+        >
+          <BodyLong>
+            Incididunt laborum nisi nisi Lorem
+            <LinkD />
+            in. Laborum aute fugiat officia adipisicing non veniam dolor nulla
+            non ex consectetur fugiat eiusmod aute. Culpa sit aute est duis
+            minim in in voluptate velit fugiat. Laboris est id deserunt ut ea
+            Lorem eu. Esse elit laboris aute commodo sint laborum fugiat aliqua.
+          </BodyLong>
+        </div>
       );
     }
     return <LinkD />;
@@ -40,6 +87,49 @@ export const Default = {
   },
 };
 
+export const InlineInsideBodyLong = {
+  render: ({ iconLeft, iconRight }) => {
+    return (
+      <div
+        className="colgap"
+        style={{
+          width: "800px",
+          border: "1px solid black",
+          borderRadius: "8px",
+        }}
+      >
+        <style>{`.storybook-custom-spacing { white-space: pre;}`}</style>
+        <BodyLong>
+          <LinkWrapper underline iconLeft={iconLeft} iconRight={iconRight} />
+          Eiusmod aute.
+          <LinkWrapper underline iconLeft={iconLeft} iconRight={iconRight} />
+          Culpa sit aute est duis minim in in voluptate velit Incididunt laborum
+          nisi nisi Lorem officia adipisicing non veniam
+          <LinkWrapper underline iconLeft={iconLeft} iconRight={iconRight}>
+            blah blah blah blah blah blah blah blah blah blah blah blah blah
+            blah blah blah blah blah blah blah blah
+          </LinkWrapper>
+          dolor eu. Esse elit laboris aute commodo sint laborum fugiat aliqua.
+          <LinkWrapper underline iconLeft={iconLeft} iconRight={iconRight}>
+            Link
+          </LinkWrapper>
+        </BodyLong>
+        <BodyLong className="storybook-custom-spacing">
+          Custom{"   "}
+          <LinkWrapper underline iconLeft={iconLeft} iconRight={iconRight}>
+            link
+          </LinkWrapper>
+          {"     "}spacing.
+        </BodyLong>
+      </div>
+    );
+  },
+  args: {
+    iconLeft: false,
+    iconRight: false,
+  },
+};
+
 const DemoLink = () => (
   <Link href="#">
     <PlusCircleFillIcon aria-hidden /> Ex aliqua incididunt{" "}
@@ -83,3 +173,43 @@ export const ConfirmationPanel = () => {
     </div>
   );
 };
+
+export const Variants = {
+  render: ({ iconLeft, iconRight }) => {
+    return (
+      <div className="colgap">
+        {["action", "neutral", "subtle"].map((variant) => (
+          <>
+            <div>
+              <LinkWrapper
+                iconLeft={iconLeft}
+                iconRight={iconRight}
+                variant={variant}
+              />
+            </div>
+          </>
+        ))}
+      </div>
+    );
+  },
+  args: {
+    iconLeft: false,
+    iconRight: false,
+  },
+};
+
+export const InlineLink = {
+  render: () => (
+    <BodyLong>
+      Officia incididunt Culpa sit aute est duis minim in in voluptate velit
+      Incididunt laborum nisi nisi Lorem officia adipisicing non veniam{" "}
+      <Link href="#" inlineText={true}>
+        lenke til ny side
+        <PlusCircleFillIcon aria-hidden />
+      </Link>{" "}
+      Culpa sit aute est duis minim in in voluptate velit Incididunt laborum
+      nisi nisi Lorem officia adipisicing non veniam occaecat commodo id ad
+      aliquip.
+    </BodyLong>
+  ),
+};

package/src/util/RandomIcon.tsx

@@ -0,0 +1,9 @@
+import * as AllIcons from "@navikt/aksel-icons";
+import React from "react";
+
+const icons = Object.keys(AllIcons).map((key) => AllIcons[key]);
+
+export const RandomIcon = () => {
+  const Icon = icons[Math.floor(Math.random() * icons.length)];
+  return <Icon />;
+};