@ndla/ui 35.0.19 → 35.0.21

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/Embed/AudioEmbed.tsx

@@ -7,7 +7,7 @@
  */
 
 import { AudioMetaData } from '@ndla/types-embed';
-import { ICopyright } from '@ndla/types-image-api';
+import { ICopyright } from '@ndla/types-backend/image-api';
 import {
   figureApa7CopyString,
   getGroupedContributorDescriptionList,

package/src/TreeStructure/AddFolderButton.tsx

@@ -12,7 +12,7 @@ import Tooltip from '@ndla/tooltip';
 import styled from '@emotion/styled';
 import { ButtonV2 as Button } from '@ndla/button';
 import { Plus } from '@ndla/icons/action';
-import { IFolder } from '@ndla/types-learningpath-api';
+import { IFolder } from '@ndla/types-backend/learningpath-api';
 
 interface AddFolderButtonProps {
   canAddFolder: boolean;

package/src/TreeStructure/ComboboxButton.tsx

@@ -11,7 +11,7 @@ import styled from '@emotion/styled';
 import { useForwardedRef } from '@ndla/util';
 import { breakpoints, colors, mq, spacing } from '@ndla/core';
 import { ChevronUp, ChevronDown } from '@ndla/icons/common';
-import { IFolder } from '@ndla/types-learningpath-api';
+import { IFolder } from '@ndla/types-backend/learningpath-api';
 import { ButtonV2 as Button, IconButtonV2 as IconButton } from '@ndla/button';
 import { treestructureId } from './helperFunctions';
 import { TreeStructureType } from './types';
@@ -144,7 +144,7 @@ const ComboboxButton = forwardRef<HTMLButtonElement, Props>(
             onKeyDown={onKeyDown}
             onClick={() => {
               innerRef.current?.focus();
-              onToggleTree(!showTree);
+              onToggleTree(showTree);
             }}
           >
             {selectedFolder?.name}

package/src/TreeStructure/FolderItem.tsx

@@ -14,7 +14,7 @@ import { Done } from '@ndla/icons/editor';
 import { ButtonV2 as Button } from '@ndla/button';
 import { colors, spacing, animations, spacingUnit, misc, fonts } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
-import { IFolder } from '@ndla/types-learningpath-api';
+import { IFolder } from '@ndla/types-backend/learningpath-api';
 import { CommonFolderItemsProps } from './types';
 import { arrowNavigation } from './arrowNavigation';
 import { treestructureId } from './helperFunctions';

package/src/TreeStructure/FolderItems.tsx

@@ -9,7 +9,7 @@
 import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { animations } from '@ndla/core';
-import { IFolder } from '@ndla/types-learningpath-api';
+import { IFolder } from '@ndla/types-backend/learningpath-api';
 import FolderItem from './FolderItem';
 import { CommonFolderItemsProps, NewFolderInputFunc, OnCreatedFunc, TreeStructureType } from './types';
 import { treestructureId } from './helperFunctions';

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/TreeStructure/arrowNavigation.ts

@@ -6,7 +6,7 @@
  *
  */
 
-import { IFolder } from '@ndla/types-learningpath-api';
+import { IFolder } from '@ndla/types-backend/learningpath-api';
 import { KeyboardEvent } from 'react';
 
 const navigateVertical = (

package/src/TreeStructure/helperFunctions.ts

@@ -1,4 +1,4 @@
-import { IFolder } from '@ndla/types-learningpath-api';
+import { IFolder } from '@ndla/types-backend/learningpath-api';
 import { TreeStructureType } from './types';
 
 export const flattenFolders = (folders: IFolder[], openFolders?: string[]): IFolder[] => {

package/src/TreeStructure/types.ts

@@ -7,7 +7,7 @@
  */
 
 import { ReactNode } from 'react';
-import { IFolder, IResource } from '@ndla/types-learningpath-api';
+import { IFolder, IResource } from '@ndla/types-backend/learningpath-api';
 
 export type TreeStructureType = 'navigation' | 'picker';
 

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';