@ndla/ui 35.0.19 → 35.0.20

package/lib/index.d.ts

@@ -95,3 +95,4 @@ export { TreeStructure } from './TreeStructure';
 export type { TreeStructureProps } from './TreeStructure';
 export { SearchField, SearchResultList, SearchResultItem, ActiveFilters, ToggleSearchButton } from './Search';
 export { default as LetterFilter } from './LetterFilter';
+export { BlogPostV2 } from './BlogPost';

package/lib/index.js

@@ -148,6 +148,12 @@ Object.defineProperty(exports, "BlogPost", {
     return _BlogPosts.BlogPost;
   }
 });
+Object.defineProperty(exports, "BlogPostV2", {
+  enumerable: true,
+  get: function get() {
+    return _BlogPost.BlogPostV2;
+  }
+});
 Object.defineProperty(exports, "BlogPostWrapper", {
   enumerable: true,
   get: function get() {
@@ -1329,6 +1335,7 @@ var _InfoBlock = require("./InfoBlock");
 var _TreeStructure = require("./TreeStructure");
 var _Search = require("./Search");
 var _LetterFilter = _interopRequireDefault(require("./LetterFilter"));
+var _BlogPost = require("./BlogPost");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "35.0.19",
+  "version": "35.0.20",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -32,19 +32,19 @@
   ],
   "dependencies": {
     "@ndla/article-scripts": "^3.0.17",
-    "@ndla/button": "^10.0.8",
-    "@ndla/carousel": "^3.0.9",
+    "@ndla/button": "^10.0.9",
+    "@ndla/carousel": "^3.0.10",
     "@ndla/core": "^3.1.3",
-    "@ndla/forms": "^4.2.17",
+    "@ndla/forms": "^4.2.18",
     "@ndla/hooks": "^2.0.4",
-    "@ndla/icons": "^2.2.9",
+    "@ndla/icons": "^2.2.10",
     "@ndla/licenses": "^7.0.4",
-    "@ndla/modal": "^2.2.13",
-    "@ndla/notion": "^4.2.14",
-    "@ndla/safelink": "^4.0.18",
+    "@ndla/modal": "^2.2.14",
+    "@ndla/notion": "^4.2.15",
+    "@ndla/safelink": "^4.0.19",
     "@ndla/switch": "^1.0.8",
-    "@ndla/tabs": "^2.1.15",
-    "@ndla/tooltip": "^4.0.16",
+    "@ndla/tabs": "^2.1.16",
+    "@ndla/tooltip": "^4.0.17",
     "@ndla/types-learningpath-api": "^0.0.20",
     "@ndla/util": "^3.1.12",
     "@radix-ui/react-accordion": "1.1.0",
@@ -75,7 +75,7 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.11.0",
-    "@ndla/types-embed": "^1.0.6",
+    "@ndla/types-embed": "^1.0.7",
     "@ndla/types-image-api": "0.0.10",
     "@types/reach__dialog": "^0.1.0",
     "css-loader": "^6.7.3",
@@ -87,5 +87,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0bb06868e530d50c49d3a934559764b24326f250"
+  "gitHead": "496319a9a156a2ec659bb9cf119d35654281417b"
 }

package/src/BlogPost/BlogPost.stories.tsx

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2023-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 React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import BlogPost from './BlogPost';
+import { defaultParameters } from '../../../../stories/defaults';
+
+export default {
+  title: 'Enkle komponenter/Blog Post',
+  component: BlogPost,
+  parameters: {
+    ...defaultParameters,
+  },
+  args: {
+    title: { title: 'Min bloggpost', language: 'nb-no' },
+    author: 'Ola Nordmann',
+    url: '#',
+    headingLevel: 'h3',
+    size: 'large',
+    metaImage: {
+      alt: 'Yonghetempelet i Beijing. Foto.',
+      url: 'https://api.test.ndla.no/image-api/raw/20080101-032119-ag.jpg',
+    },
+  },
+} as ComponentMeta<typeof BlogPost>;
+
+export const BlogPostStory: ComponentStory<typeof BlogPost> = ({ ...args }) => {
+  return <BlogPost {...args} />;
+};
+
+BlogPostStory.storyName = 'BlogPost';

package/src/BlogPost/BlogPost.tsx

@@ -0,0 +1,102 @@
+/**
+ * Copyright (c) 2023-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 styled from '@emotion/styled';
+import { css } from '@emotion/react';
+import SafeLink from '@ndla/safelink';
+import { colors, fonts, misc, spacing } from '@ndla/core';
+import { Quote } from '@ndla/icons/editor';
+import { HeadingLevel } from '../types';
+
+interface Props {
+  title: {
+    title: string;
+    language: string;
+  };
+  author?: string;
+  url: string;
+  headingLevel?: HeadingLevel;
+  size?: 'normal' | 'large';
+  metaImage: {
+    url: string;
+    alt: string;
+  };
+}
+
+const Container = styled(SafeLink)`
+  display: flex;
+  flex-direction: column;
+  color: ${colors.text.primary};
+  max-width: 350px;
+  min-width: 350px;
+  max-height: 415px;
+  min-height: 415px;
+  gap: ${spacing.nsmall};
+  box-shadow: none;
+  border: 1px solid ${colors.brand.lightest};
+  border-radius: ${misc.borderRadius};
+  padding: ${spacing.normal} ${spacing.medium};
+  &[data-size='large'] {
+    min-width: 532px;
+    max-width: 532px;
+    min-height: 550px;
+    max-height: 550px;
+  }
+  &:hover,
+  &:focus-within {
+    .blog-title {
+      box-shadow: inset 0 -1px;
+    }
+  }
+`;
+
+const headingCss = css`
+  display: inline-block;
+  width: fit-content;
+  margin: 0;
+  font-weight: ${fonts.weight.semibold};
+  ${fonts.sizes('26px', '36px')};
+`;
+
+const AuthorContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${spacing.xsmall};
+  svg {
+    color: rgba(78, 81, 242, 1);
+  }
+  text-transform: uppercase;
+`;
+
+const StyledImg = styled.img`
+  border-radius: ${misc.borderRadius};
+  flex: 1;
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  border: 0;
+`;
+
+const BlogPost = ({ title, author, url, metaImage, headingLevel: Heading = 'h3', size = 'normal' }: Props) => {
+  return (
+    <Container data-size={size} to={url}>
+      <Heading className="blog-title" css={headingCss} lang={title.language}>
+        {title.title}
+      </Heading>
+      <StyledImg src={metaImage.url} alt={metaImage.alt} />
+      {!!author && (
+        <AuthorContainer>
+          <Quote />
+          {author}
+        </AuthorContainer>
+      )}
+    </Container>
+  );
+};
+
+export default BlogPost;

package/src/BlogPost/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-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 BlogPostV2 } from './BlogPost';

package/src/TreeStructure/ComboboxButton.tsx

@@ -144,7 +144,7 @@ const ComboboxButton = forwardRef<HTMLButtonElement, Props>(
             onKeyDown={onKeyDown}
             onClick={() => {
               innerRef.current?.focus();
-              onToggleTree(!showTree);
+              onToggleTree(showTree);
             }}
           >
             {selectedFolder?.name}

package/src/TreeStructure/TreeStructure.tsx

@@ -11,7 +11,7 @@ import styled from '@emotion/styled';
 import { colors, fonts, misc, utils } from '@ndla/core';
 import { css } from '@emotion/react';
 import uniq from 'lodash/uniq';
-import { IFolder } from '@ndla/types-learningpath-api';
+import { IFolder } from '@ndla/types-backend/learningpath-api';
 import FolderItems from './FolderItems';
 import { flattenFolders, treestructureId } from './helperFunctions';
 import { CommonTreeStructureProps, NewFolderInputFunc, TreeStructureType } from './types';

package/src/index.ts

@@ -269,3 +269,4 @@ export type { TreeStructureProps } from './TreeStructure';
 
 export { SearchField, SearchResultList, SearchResultItem, ActiveFilters, ToggleSearchButton } from './Search';
 export { default as LetterFilter } from './LetterFilter';
+export { BlogPostV2 } from './BlogPost';