@ndla/ui 13.2.1 → 15.0.0

package/src/Notion/FigureNotion.tsx

@@ -7,7 +7,7 @@
 
 import styled from '@emotion/styled';
 import { colors, spacing } from '@ndla/core';
-import { getLicenseByAbbreviation, getLicenseCredits } from '@ndla/licenses';
+import { getGroupedContributorDescriptionList, getLicenseByAbbreviation, getLicenseCredits } from '@ndla/licenses';
 import React, { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Figure, FigureCaption, FigureLicenseDialog, FigureType } from '../Figure';
@@ -23,7 +23,7 @@ interface Props {
   figureId: string;
   children: ReactNode | ((params: { typeClass: string }) => ReactNode);
   id: string;
-  title?: string;
+  title: string;
   copyright?: Partial<Copyright>;
   licenseString: string;
   type: 'video' | 'h5p' | 'image' | 'concept' | 'other';
@@ -47,10 +47,16 @@ const FigureNotion = ({
 }: Props) => {
   const { t, i18n } = useTranslation();
   const license = getLicenseByAbbreviation(licenseString, i18n.language);
-  const { creators, rightsholders, processors } = getLicenseCredits(copyright);
+  const licenseCredits = getLicenseCredits(copyright);
+  const { creators, rightsholders, processors } = licenseCredits;
 
   const authors = creators.length || rightsholders.length ? [...creators, ...rightsholders] : [...processors];
 
+  const groupedAuthors = getGroupedContributorDescriptionList(licenseCredits, i18n.language).map((item) => ({
+    name: item.description,
+    type: item.label,
+  }));
+
   return (
     <Figure resizeIframe={resizeIframe} id={figureId} type={figureType || 'full-column'}>
       {({ typeClass }) => (
@@ -67,7 +73,7 @@ const FigureNotion = ({
               hideIconsAndAuthors={hideIconsAndAuthors}>
               <FigureLicenseDialog
                 id={id}
-                authors={authors}
+                authors={groupedAuthors}
                 locale={i18n.language}
                 title={title}
                 origin={copyright?.origin}
@@ -78,7 +84,8 @@ const FigureNotion = ({
                   source: t('source'),
                   learnAboutLicenses: t('license.learnMore'),
                   title: t('title'),
-                }}></FigureLicenseDialog>
+                }}
+              />
             </FigureCaption>
           ) : (
             <BottomBorder />

package/src/Notion/NotionVisualElement.tsx

@@ -68,7 +68,7 @@ const NotionVisualElement = ({ visualElement, id, figureId }: Props) => {
       {visualElement.image?.src ? (
         <img src={visualElement.image?.src} alt={visualElement.image.alt} />
       ) : (
-        <StyledIframe type={type} src={visualElement.url} title={visualElement.title} />
+        <StyledIframe allowFullScreen type={type} src={visualElement.url} title={visualElement.title} />
       )}
     </FigureNotion>
   );

package/src/Resource/BlockResource.tsx

@@ -0,0 +1,101 @@
+/**
+ * Copyright (c) 2022-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 React, { ReactNode } from 'react';
+import SafeLink from '@ndla/safelink';
+import { colors, fonts, spacing } from '@ndla/core';
+import Image from '../Image';
+import { CompressTagsLength, ResourceImageProps, ResourceTitle, Row, TopicList } from './resourceComponents';
+
+interface BlockResourceProps {
+  link: string;
+  title: string;
+  resourceImage: ResourceImageProps;
+  topics: string[];
+  tags?: string[];
+  description?: string;
+  actionMenu?: ReactNode;
+}
+
+const BlockElementWrapper = styled(SafeLink)`
+  display: flex;
+  text-decoration: none;
+  box-shadow: none;
+  flex-direction: column;
+  max-width: 300px;
+  max-height: 240px;
+  border: 1px solid ${colors.brand.light};
+  border-radius: 2px;
+  color: ${colors.brand.greyDark};
+`;
+
+const BlockDescription = styled.p`
+  display: -webkit-box;
+  line-clamp: 2;
+  ${fonts.sizes(16)};
+  height: 0em;
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: height 0.2s ease-out;
+  ${() => BlockElementWrapper}:hover & {
+    // Unfortunate css needed for multi-line text overflow ellipsis.
+    height: 3.1em;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+`;
+
+const RightRow = styled(Row)`
+  justify-content: flex-end;
+`;
+
+const BlockInfoWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: ${spacing.small};
+  gap: ${spacing.xxsmall};
+`;
+
+const ImageWrapper = styled.div`
+  display: flex;
+  width: 100%;
+  overflow: hidden;
+  align-items: center;
+  div {
+    min-width: 100%;
+  }
+  img {
+    min-width: 100%;
+  }
+`;
+
+const BlockResource = ({ link, title, tags, resourceImage, topics, description, actionMenu }: BlockResourceProps) => {
+  return (
+    <BlockElementWrapper to={link}>
+      <ImageWrapper>
+        <Image alt={resourceImage.alt} src={resourceImage.src} />
+      </ImageWrapper>
+      <BlockInfoWrapper>
+        <div>
+          <ResourceTitle>{title}</ResourceTitle>
+        </div>
+        <TopicList topics={topics} />
+        <BlockDescription>{description}</BlockDescription>
+        <RightRow>
+          {tags && CompressTagsLength(tags)}
+          {actionMenu}
+        </RightRow>
+      </BlockInfoWrapper>
+    </BlockElementWrapper>
+  );
+};
+
+export default BlockResource;

package/src/Resource/ListResource.tsx

@@ -0,0 +1,111 @@
+/**
+ * Copyright (c) 2022-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 React, { ReactNode } from 'react';
+import SafeLink from '@ndla/safelink';
+import { fonts, spacing, colors } from '@ndla/core';
+import Image from '../Image';
+import { CompressTagsLength, ResourceImageProps, ResourceTitle, Row, TopicList } from './resourceComponents';
+
+const ResourceDescription = styled.p`
+  line-clamp: 2;
+  line-height: 1em;
+  height: 3.1em;
+  margin: 0;
+  overflow: hidden;
+  ${fonts.sizes(16)};
+  text-overflow: ellipsis;
+  // Unfortunate css needed for multi-line text overflow ellipsis.
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+`;
+
+const ResourceWrapper = styled(SafeLink)`
+  display: grid;
+  grid-template-columns: auto 1fr;
+  text-decoration: none;
+  box-shadow: none;
+  padding: ${spacing.small};
+  border: 1px solid ${colors.brand.light};
+  border-radius: 2px;
+  color: ${colors.brand.greyDark};
+  gap: ${spacing.small};
+  &:hover {
+    box-shadow: 1px 1px 6px 2px rgba(9, 55, 101, 0.08);
+    transition-duration: 0.2s;
+    ${ResourceTitle} {
+      color: ${colors.brand.primary};
+      text-decoration: underline;
+    }
+    a {
+      display: flex;
+      align-items: center;
+    }
+  }
+`;
+
+const ResourceInfoWrapper = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  overflow: hidden;
+`;
+
+interface StyledImageProps {
+  imageSize: 'normal' | 'compact';
+}
+
+const StyledImage = styled(Image)<StyledImageProps>`
+  display: flex;
+  border-radius: 2px;
+  object-fit: cover;
+  width: ${(p) => (p.imageSize === 'normal' ? '136px' : '56px')};
+  min-width: ${(p) => (p.imageSize === 'normal' ? '136px' : '56px')};
+  height: ${(p) => (p.imageSize === 'normal' ? '96px' : '40px')};
+`;
+
+export interface ListResourceProps {
+  link: string;
+  title: string;
+  resourceImage: ResourceImageProps;
+  topics: string[];
+  tags?: string[];
+  description?: string;
+  actionMenu?: ReactNode;
+}
+
+const ListResource = ({ link, title, tags, resourceImage, topics, description, actionMenu }: ListResourceProps) => {
+  const showDescription = description !== undefined;
+
+  return (
+    <ResourceWrapper to={link}>
+      <StyledImage alt={resourceImage.alt} src={resourceImage.src} imageSize={showDescription ? 'normal' : 'compact'} />
+      <ResourceInfoWrapper>
+        <Row>
+          <ResourceTitle>{title}</ResourceTitle>
+          {tags && CompressTagsLength(tags)}
+          {actionMenu}
+        </Row>
+        <Row>
+          <TopicList topics={topics} />
+        </Row>
+        {showDescription && (
+          <Row>
+            <ResourceDescription>{description}</ResourceDescription>
+          </Row>
+        )}
+      </ResourceInfoWrapper>
+    </ResourceWrapper>
+  );
+};
+
+export default ListResource;

package/src/Resource/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2022-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 { ListResourceProps } from './ListResource';
+export type { ListResourceProps };
+export { default as ListResource } from './ListResource';
+export { default as BlockResource } from './BlockResource';

package/src/Resource/resourceComponents.tsx

@@ -0,0 +1,143 @@
+/**
+ * Copyright (c) 2022-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 styled from '@emotion/styled';
+import { fonts, colors, spacing } from '@ndla/core';
+
+import { MenuButton } from '@ndla/button';
+
+export interface ResourceImageProps {
+  alt: string;
+  src: string;
+}
+
+export const ResourceTitle = styled.h2`
+  ${fonts.sizes(18)};
+  min-width: 50px;
+  font-weight: ${fonts.weight.bold};
+  margin: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  // Unfortunate css needed for multi-line text overflow ellipsis.
+  line-height: 1;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  -webkit-box-orient: vertical;
+`;
+
+const StyledTagList = styled.ul`
+  list-style: none;
+  display: flex;
+  margin: 0;
+  padding: 0;
+  gap: ${spacing.xsmall};
+  overflow: hidden;
+`;
+
+const StyledTagListElement = styled.li`
+  color: ${colors.brand.grey};
+  margin: 0;
+  ${fonts.sizes(14)};
+  ::before {
+    content: '#';
+  }
+`;
+
+const StyledTopicList = styled.ul`
+  list-style: none;
+  display: flex;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+`;
+
+const StyledTopicListElement = styled.li`
+  ${fonts.sizes(12)};
+  margin: 0;
+  line-height: 1.5;
+  padding: 0;
+`;
+
+const StyledTopicDivider = styled.span`
+  margin: 0;
+  padding: 0 ${spacing.xxsmall};
+`;
+
+export const Row = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${spacing.xsmall};
+`;
+
+const TagCounterWrapper = styled.p`
+  color: ${colors.brand.primary};
+  box-shadow: none;
+  margin: 0;
+  font-weight: ${fonts.weight.semibold};
+  ${fonts.sizes(16)}
+`;
+
+interface TagListProps {
+  tags?: string[];
+}
+
+export const TagList = ({ tags }: TagListProps) => {
+  if (!tags) return null;
+  return (
+    <StyledTagList>
+      {tags.map((tag, i) => (
+        <StyledTagListElement key={`tag-${i}`}>{tag}</StyledTagListElement>
+      ))}
+    </StyledTagList>
+  );
+};
+
+export const CompressTagsLength = (tags: string[]) => {
+  const tagCounter = tags?.length - 3;
+  const slicedTags = tags.slice(0, 3);
+  const remainingTags = tags.slice(3, tags.length).map((tag) => {
+    return {
+      text: '#' + tag,
+      onClick: () => {},
+    };
+  });
+
+  return (
+    <>
+      <TagList tags={slicedTags} />
+      {remainingTags.length > 0 && (
+        <MenuButton hideMenuIcon={true} menuItems={remainingTags}>
+          <TagCounterWrapper>+ {tagCounter}</TagCounterWrapper>
+        </MenuButton>
+      )}
+    </>
+  );
+};
+
+interface TopicListProps {
+  topics?: string[];
+}
+
+export const TopicList = ({ topics }: TopicListProps) => {
+  if (!topics) return null;
+  return (
+    <StyledTopicList>
+      {topics.map((topic, i) => (
+        <StyledTopicListElement key={topic}>
+          <>
+            {topic}
+            {i !== topics.length - 1 && <StyledTopicDivider>•</StyledTopicDivider>}
+          </>
+        </StyledTopicListElement>
+      ))}
+    </StyledTopicList>
+  );
+};

package/src/ResourceGroup/ResourceGroup.tsx

@@ -36,6 +36,7 @@ const StyledHeading = styled.h1`
 type Props = {
   invertedStyle?: boolean;
   toggleAdditionalResources: () => void;
+  onToggleAddToFavorites: (id: string | number, add: string) => void;
 };
 
 const ResourceGroup = ({
@@ -45,6 +46,7 @@ const ResourceGroup = ({
   toggleAdditionalResources,
   contentType,
   invertedStyle,
+  onToggleAddToFavorites,
 }: Props & ResourceListProps) => (
   <Wrapper>
     {title && (
@@ -59,6 +61,7 @@ const ResourceGroup = ({
         showAdditionalResources={showAdditionalResources}
         contentType={contentType}
         resources={resources}
+        onToggleAddToFavorites={onToggleAddToFavorites}
       />
     ) : null}
   </Wrapper>

package/src/ResourceGroup/ResourceItem.tsx

@@ -15,6 +15,7 @@ import SafeLink from '@ndla/safelink';
 import { Additional, Core, HumanMaleBoard } from '@ndla/icons/common';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import Tooltip from '@ndla/tooltip';
+import { ArticleFavoritesButton } from '../Article';
 import { Resource } from '../types';
 import ContentTypeBadge from '../ContentTypeBadge';
 import * as contentTypes from '../model/ContentType';
@@ -208,6 +209,7 @@ const IconWrapper = styled.div`
 const TypeWrapper = styled.div`
   display: flex;
   align-items: center;
+  gap: ${spacing.xsmall};
 `;
 
 const ContentTypeName = styled.span`
@@ -219,15 +221,20 @@ const ContentTypeName = styled.span`
 `;
 
 type Props = {
+  id: string;
   showContentTypeDescription?: boolean;
   contentTypeName?: string;
   contentTypeDescription?: string;
   extraBottomMargin?: boolean;
   showAdditionalResources?: boolean;
   access?: 'teacher';
+  isFavorite?: boolean;
+  onToggleAddToFavorites: (id: string, add: boolean) => void;
+  hideAddToFavoriteButton?: boolean;
 };
 
 const ResourceItem = ({
+  id,
   contentTypeName,
   contentTypeDescription,
   name,
@@ -238,6 +245,9 @@ const ResourceItem = ({
   extraBottomMargin,
   showAdditionalResources,
   access,
+  onToggleAddToFavorites,
+  isFavorite,
+  hideAddToFavoriteButton,
 }: Props & Resource) => {
   const { t } = useTranslation();
   const hidden = additional ? !showAdditionalResources : false;
@@ -273,24 +283,31 @@ const ResourceItem = ({
       <TypeWrapper>
         {contentTypeName && <ContentTypeName>{contentTypeName}</ContentTypeName>}
         {access && access === 'teacher' && (
-          <Tooltip tooltip={t('article.access.onlyTeacher')} align="left">
+          <Tooltip tooltip={t('article.access.onlyTeacher')}>
             <HumanMaleBoard className="c-icon--20 u-margin-left-tiny c-topic-resource__list__additional-icons" />
           </Tooltip>
         )}
         {showAdditionalResources && contentTypeDescription && (
           <>
             {additional && (
-              <Tooltip tooltip={contentTypeDescription} align="left">
+              <Tooltip tooltip={contentTypeDescription}>
                 <Additional className="c-icon--20 u-margin-left-tiny c-topic-resource__list__additional-icons" />
               </Tooltip>
             )}
             {!additional && (
-              <Tooltip tooltip={contentTypeDescription} align="left">
+              <Tooltip tooltip={contentTypeDescription}>
                 <Core className="c-icon--20 u-margin-left-tiny c-topic-resource__list__additional-icons" />
               </Tooltip>
             )}
           </>
         )}
+        {!hideAddToFavoriteButton && (
+          <ArticleFavoritesButton
+            isFavorite={isFavorite}
+            articleId={id}
+            onToggleAddToFavorites={() => onToggleAddToFavorites(id, true)}
+          />
+        )}
       </TypeWrapper>
     </ListElement>
   );

package/src/ResourceGroup/ResourceList.tsx

@@ -48,9 +48,19 @@ export type ResourceListProps = {
   contentType?: string;
   title?: string;
   showAdditionalResources?: boolean;
+  onToggleAddToFavorites: (id: string, add: boolean) => void;
+  hideAddToFavoriteButton?: boolean;
 };
 
-const ResourceList = ({ resources, onClick, contentType, title, showAdditionalResources }: ResourceListProps) => {
+const ResourceList = ({
+  resources,
+  onClick,
+  onToggleAddToFavorites,
+  contentType,
+  title,
+  showAdditionalResources,
+  hideAddToFavoriteButton,
+}: ResourceListProps) => {
   const { t } = useTranslation();
   const renderAdditionalResourceTrigger =
     !showAdditionalResources &&
@@ -60,11 +70,14 @@ const ResourceList = ({ resources, onClick, contentType, title, showAdditionalRe
   return (
     <div>
       <StyledResourceList showAdditionalResources={showAdditionalResources}>
-        {resources.map((resource) => (
+        {resources.map(({ id, ...resource }) => (
           <ResourceItem
-            key={resource.id}
+            id={id}
+            key={id}
             contentType={contentType}
             showAdditionalResources={showAdditionalResources}
+            hideAddToFavoriteButton={hideAddToFavoriteButton}
+            onToggleAddToFavorites={onToggleAddToFavorites}
             {...resource}
             contentTypeDescription={
               resource.additional ? t('resource.tooltipAdditionalTopic') : t('resource.tooltipCoreTopic')

package/src/Search/ActiveFilters.jsx

@@ -85,7 +85,6 @@ const ActiveFilters = ({ filters, onFilterRemove, showOnSmallScreen }) => {
         <StyledActiveFilterWrapper key={filterKey}>
           {filterLength > 1 ? (
             <Tooltip
-              align="top"
               tooltip={t('searchPage.searchFilterMessages.removeFilter', {
                 filterName: filter.title,
               })}>

package/src/Search/ContentTypeResult.tsx

@@ -1,29 +1,28 @@
-import React, { useState, useEffect, useRef, ReactElement } from 'react';
 import Button from '@ndla/button';
-import Tooltip from '@ndla/tooltip';
-import { Additional, ChevronUp, ChevronDown } from '@ndla/icons/common';
+import { Additional, ChevronDown, ChevronUp } from '@ndla/icons/common';
 import SafeLink from '@ndla/safelink';
+import Tooltip from '@ndla/tooltip';
+import React, { ReactElement, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import ContentTypeBadge from '../ContentTypeBadge';
 import { ContentTypeResultType, Resource } from '../types';
 import {
   highlightStyle,
+  noWidthhighlightStyle,
   showAllButtonStyle,
-  tooltipStyle,
-  StyledNoHit,
-  StyledWrapper,
   StyledHeader,
-  StyledListItem,
   StyledList,
+  StyledListItem,
+  StyledNoHit,
   StyledTag,
-  noWidthhighlightStyle,
+  StyledWrapper,
 } from './ContentTypeResultStyles';
 import { isPathToHighlight } from './IsPathToHighlight';
 
 const renderAdditionalIcon = (label: string, isAdditional?: boolean): ReactElement | null => {
   if (isAdditional && label) {
     return (
-      <Tooltip tooltip={label} align="top" css={tooltipStyle}>
+      <Tooltip tooltip={label}>
         <Additional className="c-icon--20" />
       </Tooltip>
     );

package/src/SearchTypeResult/ActiveFilters.tsx

@@ -120,8 +120,6 @@ const ActiveFilters = ({
       <StyledActiveFilterWrapper key={filterKey}>
         {filterLength > 1 ? (
           <Tooltip
-            delay={2000}
-            align="bottom"
             tooltip={t('searchPage.searchFilterMessages.removeFilter', {
               filterName: filter.title,
             })}>
@@ -139,7 +137,7 @@ const ActiveFilters = ({
       {filterItems}
       {filterLength > showFilterCount && (
         <StyledActiveFilterWrapper>
-          <Tooltip delay={2000} align="bottom" tooltip={t('searchPage.searchFilterMessages.noValuesButtonText')}>
+          <Tooltip tooltip={t('searchPage.searchFilterMessages.noValuesButtonText')}>
             <Button
               aria-label={t('searchPage.searchFilterMessages.additionalSubjectFilters', {
                 count: filterLength - showFilterCount + 1,

package/src/SearchTypeResult/SearchViewType.tsx

@@ -16,7 +16,7 @@ import { useTranslation } from 'react-i18next';
 
 const Wrapper = styled.div`
   display: inline-flex;
-  justify-content: center;
+  justify-content: right;
   align-items: center;
   flex: 1;
   ${mq.range({ until: breakpoints.tablet })} {