@ndla/ui 56.0.14-alpha.0 → 56.0.16-alpha.0

package/lib/CampaignBlock/CampaignBlock.js

@@ -22,7 +22,9 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 
 const Container = (0, _jsx2.styled)("div", {
   base: {
+    width: "100%",
     display: "flex",
+    gap: "medium",
     flexDirection: "column",
     border: "1px solid",
     borderColor: "stroke.default",
@@ -41,6 +43,17 @@ const LinkText = (0, _jsx2.styled)(_primitives.Text, {
     display: "flex",
     gap: "xxsmall",
     textDecoration: "underline",
+    _hover: {
+      textDecoration: "none"
+    },
+    paddingBlock: "xsmall",
+    fontWeight: "bold"
+  }
+});
+const LinkHeader = (0, _jsx2.styled)(_primitives.Text, {
+  base: {
+    display: "flex",
+    textDecoration: "underline",
     _hover: {
       textDecoration: "none"
     }
@@ -52,8 +65,11 @@ const StyledImg = (0, _jsx2.styled)("img", {
     objectFit: "cover",
     width: "100%",
     height: "215px",
-    desktop: {
+    mobileWide: {
       height: "340px"
+    },
+    tabletWide: {
+      width: "auto"
     }
   }
 });
@@ -63,12 +79,24 @@ const ContentWrapper = (0, _jsx2.styled)("div", {
     position: "relative",
     display: "flex",
     flexDirection: "column",
-    gap: "xsmall",
+    gap: "medium",
     alignItems: "flex-start",
+    justifyContent: "center",
     paddingBlock: "medium",
     paddingInline: "medium"
   }
 });
+const StyledText = (0, _jsx2.styled)(_primitives.Text, {
+  base: {
+    tabletWide: {
+      display: "block",
+      overflow: "hidden",
+      position: "relative",
+      lineClamp: 4,
+      boxOrient: "vertical"
+    }
+  }
+});
 const StyledSafeLink = (0, _jsx2.styled)(_safelink.SafeLink, {
   base: {
     color: "inherit"
@@ -103,7 +131,7 @@ const CampaignBlock = _ref2 => {
     width: 455,
     alt: image.alt
   });
-  const HeaderComponent = url?.url ? LinkText : _primitives.Text;
+  const HeaderComponent = url?.url ? LinkHeader : _primitives.Text;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
     className: className,
     "data-embed-type": "campaign-block",
@@ -119,8 +147,8 @@ const CampaignBlock = _ref2 => {
             children: (0, _htmlReactParser.default)(title)
           })
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
-        textStyle: "body.large",
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledText, {
+        textStyle: "body.xlarge",
         children: (0, _htmlReactParser.default)(description)
       }), !!url?.url && /*#__PURE__*/(0, _jsxRuntime.jsx)(MaybeLinkText, {
         url: url.url,

package/lib/ContentTypeBadge/ContentTypeBadge.js

@@ -23,6 +23,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  *
  */
 
+// TODO: Remove this component
+
 const StyledContentTypeBadge = (0, _jsx2.styled)("div", {
   base: {
     display: "inline-flex",

package/lib/TreeStructure/TreeStructure.d.ts

@@ -1,14 +1,16 @@
 /**
- * Copyright (c) 2022-present, NDLA.
+ * Copyright (c) 2024-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 { IFolder } from "@ndla/types-backend/myndla-api";
-import { CommonTreeStructureProps, NewFolderInputFunc } from "./types";
+import { IFolder, IResource } from "@ndla/types-backend/myndla-api";
+import { NewFolderInputFunc } from "./types";
 export declare const MAX_LEVEL_FOR_FOLDERS = 5;
-export interface TreeStructureProps extends CommonTreeStructureProps {
+export interface TreeStructureProps {
+    loading?: boolean;
+    targetResource?: IResource;
     defaultOpenFolders?: string[];
     folders: IFolder[];
     label?: string;
@@ -17,5 +19,4 @@ export interface TreeStructureProps extends CommonTreeStructureProps {
     onSelectFolder?: (id: string) => void;
     ariaDescribedby?: string;
 }
-declare const TreeStructure: ({ defaultOpenFolders, folders, label, loading, maxLevel, onSelectFolder, targetResource, type, newFolderInput, ariaDescribedby, }: TreeStructureProps) => import("react/jsx-runtime").JSX.Element;
-export default TreeStructure;
+export declare const TreeStructure: ({ folders, defaultOpenFolders, newFolderInput, label, targetResource, loading, maxLevel, onSelectFolder, ariaDescribedby, }: TreeStructureProps) => import("react/jsx-runtime").JSX.Element;