@ndla/ui 56.0.119-alpha.0 → 56.0.121-alpha.0

package/es/Article/ArticleByline.js

@@ -8,7 +8,7 @@
 
 import { forwardRef, useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 import { ArrowDownShortLine } from "@ndla/icons";
 import { AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger, AccordionRoot, Heading } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";

package/es/FileList/File.js

@@ -45,7 +45,9 @@ export const File = /*#__PURE__*/forwardRef((_ref, ref) => {
   const {
     t
   } = useTranslation();
-  const tooltip = `${t("download")} ${url.split("/").pop()}`;
+  const filename = `${title}-${url.split("/").pop() ?? ""}`;
+  const downloadUrl = `${url}?download=${filename}`;
+  const tooltip = `${t("download")} ${filename}`;
   return /*#__PURE__*/_jsxs(StyledHStack, {
     justify: "space-between",
     ref: ref,
@@ -55,7 +57,7 @@ export const File = /*#__PURE__*/forwardRef((_ref, ref) => {
       children: [/*#__PURE__*/_jsx(DownloadLine, {}), fileExists ? /*#__PURE__*/_jsx(StyledSafeLink, {
         unstyled: true,
         css: linkOverlay.raw(),
-        to: url,
+        to: downloadUrl,
         title: tooltip,
         children: title
       }) : /*#__PURE__*/_jsx(Text, {

package/es/index.js

@@ -41,6 +41,5 @@ export { Grid, GridParallaxItem } from "./Grid";
 export { Gloss, GlossExample } from "./Gloss";
 export { LinkBlock, LinkBlockSection } from "./LinkBlock";
 export { CodeBlock, codeLanguageOptions } from "./CodeBlock";
-export { TargetBlankIcon } from "./TargetBlankIcon";
 export { ZendeskButton } from "./ZendeskButton/ZendeskButton";
 export { licenseAttributes } from "./utils/licenseAttributes";

package/lib/Article/ArticleByline.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ArticleBylineAccordionItem = exports.ArticleByline = void 0;
 var _react = require("react");
 var _reactI18next = require("react-i18next");
-var _reactRouterDom = require("react-router-dom");
+var _reactRouter = require("react-router");
 var _icons = require("@ndla/icons");
 var _primitives = require("@ndla/primitives");
 var _jsx2 = require("@ndla/styled-system/jsx");
@@ -100,7 +100,7 @@ const ArticleByline = _ref => {
   } = (0, _reactI18next.useTranslation)();
   const {
     pathname
-  } = (0, _reactRouterDom.useLocation)();
+  } = (0, _reactRouter.useLocation)();
   const [openAccordions, setOpenAccordions] = (0, _react.useState)([]);
   const accordionItemValue = "rulesForUse";
   const onHashChange = (0, _react.useCallback)(e => {

package/lib/FileList/File.js

@@ -51,7 +51,9 @@ const File = exports.File = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const {
     t
   } = (0, _reactI18next.useTranslation)();
-  const tooltip = `${t("download")} ${url.split("/").pop()}`;
+  const filename = `${title}-${url.split("/").pop() ?? ""}`;
+  const downloadUrl = `${url}?download=${filename}`;
+  const tooltip = `${t("download")} ${filename}`;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledHStack, {
     justify: "space-between",
     ref: ref,
@@ -61,7 +63,7 @@ const File = exports.File = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DownloadLine, {}), fileExists ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSafeLink, {
         unstyled: true,
         css: _patterns.linkOverlay.raw(),
-        to: url,
+        to: downloadUrl,
         title: tooltip,
         children: title
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {

package/lib/index.d.ts

@@ -48,7 +48,6 @@ export { Gloss, GlossExample } from "./Gloss";
 export { LinkBlock, LinkBlockSection } from "./LinkBlock";
 export type { Article as ArticleType, HeadingLevel } from "./types";
 export { CodeBlock, codeLanguageOptions } from "./CodeBlock";
-export { TargetBlankIcon } from "./TargetBlankIcon";
 export { ZendeskButton } from "./ZendeskButton/ZendeskButton";
 export type { ZendeskButtonProps } from "./ZendeskButton/ZendeskButton";
 export { licenseAttributes } from "./utils/licenseAttributes";

package/lib/index.js

@@ -411,12 +411,6 @@ Object.defineProperty(exports, "TagSelectorTrigger", {
     return _TagSelector.TagSelectorTrigger;
   }
 });
-Object.defineProperty(exports, "TargetBlankIcon", {
-  enumerable: true,
-  get: function () {
-    return _TargetBlankIcon.TargetBlankIcon;
-  }
-});
 Object.defineProperty(exports, "UnknownEmbed", {
   enumerable: true,
   get: function () {
@@ -593,7 +587,6 @@ var _Grid = require("./Grid");
 var _Gloss = require("./Gloss");
 var _LinkBlock = require("./LinkBlock");
 var _CodeBlock = require("./CodeBlock");
-var _TargetBlankIcon = require("./TargetBlankIcon");
 var _ZendeskButton = require("./ZendeskButton/ZendeskButton");
 var _licenseAttributes = require("./utils/licenseAttributes");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.119-alpha.0",
+  "version": "56.0.121-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -33,12 +33,12 @@
   ],
   "dependencies": {
     "@ndla/core": "^6.0.0-alpha.0",
-    "@ndla/icons": "^8.0.57-alpha.0",
+    "@ndla/icons": "^8.0.58-alpha.0",
     "@ndla/licenses": "^9.0.1",
-    "@ndla/primitives": "^1.0.86-alpha.0",
-    "@ndla/safelink": "^7.0.87-alpha.0",
+    "@ndla/primitives": "^1.0.87-alpha.0",
+    "@ndla/safelink": "^7.0.89-alpha.0",
     "@ndla/styled-system": "^0.0.34",
-    "@ndla/util": "^5.0.7-alpha.0",
+    "@ndla/util": "^5.0.8-alpha.0",
     "html-react-parser": "^5.1.19"
   },
   "peerDependencies": {
@@ -46,10 +46,10 @@
     "react": ">= 18",
     "react-dom": ">= 18",
     "react-i18next": "^15.4.1",
-    "react-router-dom": "> 6.0.0"
+    "react-router": ">= 6.0.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.53",
+    "@ndla/preset-panda": "^0.0.54",
     "@ndla/types-backend": "^1.0.40",
     "@ndla/types-embed": "^5.0.14-alpha.0",
     "@pandacss/dev": "^0.53.6"
@@ -57,5 +57,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0f292ecf99e2b24151c55d6da3f360854fc9d4ea"
+  "gitHead": "d9ad62bb693321e31691b09d045af548f650c049"
 }

package/src/Article/ArticleByline.tsx

@@ -9,7 +9,7 @@
 import type { TFunction } from "i18next";
 import { type ReactNode, forwardRef, useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 import { ArrowDownShortLine } from "@ndla/icons";
 import {
   AccordionItem,

package/src/FileList/File.tsx

@@ -58,14 +58,16 @@ const StyledHStack = styled(HStack, {
 export const File = forwardRef<HTMLDivElement, FileProps>(
   ({ title, url, fileExists, fileType, fileSize, ...rest }, ref) => {
     const { t } = useTranslation();
-    const tooltip = `${t("download")} ${url.split("/").pop()}`;
+    const filename = `${title}-${url.split("/").pop() ?? ""}`;
+    const downloadUrl = `${url}?download=${filename}`;
+    const tooltip = `${t("download")} ${filename}`;
 
     return (
       <StyledHStack justify="space-between" ref={ref} {...rest}>
         <HStack gap="xxsmall">
           <DownloadLine />
           {fileExists ? (
-            <StyledSafeLink unstyled css={linkOverlay.raw()} to={url} title={tooltip}>
+            <StyledSafeLink unstyled css={linkOverlay.raw()} to={downloadUrl} title={tooltip}>
               {title}
             </StyledSafeLink>
           ) : (

package/src/index.ts

@@ -132,8 +132,6 @@ export type { Article as ArticleType, HeadingLevel } from "./types";
 
 export { CodeBlock, codeLanguageOptions } from "./CodeBlock";
 
-export { TargetBlankIcon } from "./TargetBlankIcon";
-
 export { ZendeskButton } from "./ZendeskButton/ZendeskButton";
 
 export type { ZendeskButtonProps } from "./ZendeskButton/ZendeskButton";

package/es/TargetBlankIcon/TargetBlankIcon.js

@@ -1,21 +0,0 @@
-/**
- * Copyright (c) 2025-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import { useTranslation } from "react-i18next";
-import { ExternalLinkLine } from "@ndla/icons";
-import { jsx as _jsx } from "react/jsx-runtime";
-const TargetBlankIcon = () => {
-  const {
-    t
-  } = useTranslation();
-  return /*#__PURE__*/_jsx(ExternalLinkLine, {
-    size: "small",
-    "aria-label": t("license.openLink")
-  });
-};
-export default TargetBlankIcon;

package/es/TargetBlankIcon/index.js

@@ -1,9 +0,0 @@
-/**
- * Copyright (c) 2025-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-export { default as TargetBlankIcon } from "./TargetBlankIcon";

package/lib/TargetBlankIcon/TargetBlankIcon.d.ts

@@ -1,9 +0,0 @@
-/**
- * Copyright (c) 2025-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-declare const TargetBlankIcon: () => import("react/jsx-runtime").JSX.Element;
-export default TargetBlankIcon;

package/lib/TargetBlankIcon/TargetBlankIcon.js

@@ -1,27 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _reactI18next = require("react-i18next");
-var _icons = require("@ndla/icons");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Copyright (c) 2025-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-const TargetBlankIcon = () => {
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ExternalLinkLine, {
-    size: "small",
-    "aria-label": t("license.openLink")
-  });
-};
-var _default = exports.default = TargetBlankIcon;

package/lib/TargetBlankIcon/index.d.ts

@@ -1,8 +0,0 @@
-/**
- * Copyright (c) 2025-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-export { default as TargetBlankIcon } from "./TargetBlankIcon";

package/lib/TargetBlankIcon/index.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "TargetBlankIcon", {
-  enumerable: true,
-  get: function () {
-    return _TargetBlankIcon.default;
-  }
-});
-var _TargetBlankIcon = _interopRequireDefault(require("./TargetBlankIcon"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/src/TargetBlankIcon/TargetBlankIcon.tsx

@@ -1,17 +0,0 @@
-/**
- * Copyright (c) 2025-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import { useTranslation } from "react-i18next";
-import { ExternalLinkLine } from "@ndla/icons";
-
-const TargetBlankIcon = () => {
-  const { t } = useTranslation();
-  return <ExternalLinkLine size="small" aria-label={t("license.openLink")} />;
-};
-
-export default TargetBlankIcon;

package/src/TargetBlankIcon/index.ts

@@ -1,9 +0,0 @@
-/**
- * Copyright (c) 2025-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-export { default as TargetBlankIcon } from "./TargetBlankIcon";