@ndla/ui 13.2.1 → 15.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "13.2.1",
+  "version": "15.0.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,18 +31,18 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^2.2.1",
-    "@ndla/carousel": "^1.2.7",
+    "@ndla/button": "^2.3.0",
+    "@ndla/carousel": "^1.2.8",
     "@ndla/core": "^2.1.1",
     "@ndla/hooks": "^1.1.4",
-    "@ndla/icons": "^1.7.1",
-    "@ndla/licenses": "^4.1.2",
-    "@ndla/modal": "^1.2.8",
-    "@ndla/notion": "^3.1.9",
-    "@ndla/safelink": "^2.0.2",
+    "@ndla/icons": "^1.8.0",
+    "@ndla/licenses": "^4.1.4",
+    "@ndla/modal": "^1.2.9",
+    "@ndla/notion": "^3.1.11",
+    "@ndla/safelink": "^2.0.3",
     "@ndla/switch": "^0.1.5",
-    "@ndla/tabs": "^1.1.6",
-    "@ndla/tooltip": "^0.3.5",
+    "@ndla/tabs": "^1.1.7",
+    "@ndla/tooltip": "^2.0.0",
     "@ndla/util": "^3.0.0",
     "@reach/menu-button": "^0.16.2",
     "@reach/slider": "^0.16.0",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7bfb84eed8afc1f5a1d39d384260375e31702e43"
+  "gitHead": "dba041a7d8ccfcb4fb60f68625e2dfde162aa6fa"
 }

package/src/Article/Article.tsx

@@ -14,10 +14,12 @@ import styled from '@emotion/styled';
 
 import { useIntersectionObserver } from '@ndla/hooks';
 import { resizeObserver } from '@ndla/util';
+import { spacing, spacingUnit, mq, breakpoints } from '@ndla/core';
 import { Article as ArticleType, Locale } from '../types';
 import ArticleFootNotes from './ArticleFootNotes';
 import ArticleContent from './ArticleContent';
 import ArticleByline from './ArticleByline';
+import ArticleFavoritesButton from './ArticleFavoritesButton';
 import LayoutItem from '../Layout';
 import ArticleHeaderWrapper from './ArticleHeaderWrapper';
 import ArticleNotions, { NotionRelatedContent } from './ArticleNotions';
@@ -97,6 +99,22 @@ const MSGboxWrapper = styled.div`
   margin-bottom: 50px;
 `;
 
+const ArticleFavoritesButtonWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  transform: translate(${spacing.xsmall}, -${spacing.normal});
+  height: 0;
+  ${mq.range({ from: breakpoints.tablet })} {
+    transform: translate(${spacing.normal}, -${spacing.medium});
+  }
+  ${mq.range({ from: breakpoints.tabletWide })} {
+    transform: translate(${spacing.large}, -${spacing.medium});
+  }
+  ${mq.range({ from: breakpoints.desktop })} {
+    transform: translate(${spacingUnit * 5.5}px, -${spacing.medium});
+  }
+`;
+
 type Props = {
   article: ArticleType;
   icon?: ReactNode;
@@ -117,6 +135,8 @@ type Props = {
   printUrl?: string;
   notions?: { list: ConceptNotionType[]; related: NotionRelatedContent[] };
   accessMessage?: string;
+  isFavorite?: boolean;
+  onToggleAddToFavorites?: (id: string, add: boolean) => void;
 };
 
 const getArticleContent = (content: any, locale: Locale) => {
@@ -147,6 +167,8 @@ export const Article = ({
   printUrl,
   renderMarkdown,
   accessMessage,
+  onToggleAddToFavorites,
+  isFavorite,
 }: Props) => {
   const [articleRef, { entry }] = useIntersectionObserver({
     root: null,
@@ -196,6 +218,15 @@ export const Article = ({
             </MSGboxWrapper>
           )}
           <ArticleHeaderWrapper competenceGoals={competenceGoals} competenceGoalTypes={competenceGoalTypes}>
+            {onToggleAddToFavorites && (
+              <ArticleFavoritesButtonWrapper>
+                <ArticleFavoritesButton
+                  articleId={id}
+                  isFavorite={isFavorite}
+                  onToggleAddToFavorites={onToggleAddToFavorites}
+                />
+              </ArticleFavoritesButtonWrapper>
+            )}
             <ArticleTitle icon={icon} label={messages.label}>
               {title}
             </ArticleTitle>

package/src/Article/ArticleFavoritesButton.tsx

@@ -0,0 +1,40 @@
+/**
+ * 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 { IconButtonDualStates } from '@ndla/button';
+import { Heart, HeartOutline } from '@ndla/icons/action';
+import Tooltip from '@ndla/tooltip';
+import { useTranslation } from 'react-i18next';
+
+export interface Props {
+  isFavorite?: boolean;
+  onToggleAddToFavorites: (id: string, add: boolean) => void;
+  articleId: string;
+}
+
+export const ArticleFavoritesButton = ({ isFavorite, onToggleAddToFavorites, articleId }: Props) => {
+  const { t } = useTranslation();
+  const removeFromFavoritesLabel = t('myNdla.resource.addToMyNdla');
+  const addToFavoritesLabel = t('myNdla.resource.addedToMyNdla');
+  return (
+    <Tooltip tooltip={isFavorite ? removeFromFavoritesLabel : addToFavoritesLabel}>
+      <IconButtonDualStates
+        ariaLabelActive={addToFavoritesLabel}
+        ariaLabelInActive={removeFromFavoritesLabel}
+        activeIcon={<Heart />}
+        inactiveIcon={<HeartOutline />}
+        active={isFavorite}
+        size="small"
+        onClick={() => onToggleAddToFavorites(articleId, !isFavorite)}
+      />
+    </Tooltip>
+  );
+};
+
+export default ArticleFavoritesButton;

package/src/Article/index.ts

@@ -12,6 +12,7 @@ import ArticleContent from './ArticleContent';
 import ArticleFootNotes from './ArticleFootNotes';
 import ArticleHeaderWrapper from './ArticleHeaderWrapper';
 import ArticleSideBar from './ArticleSideBar';
+import ArticleFavoritesButton from './ArticleFavoritesButton';
 
 export {
   ArticleByline,
@@ -22,5 +23,6 @@ export {
   ArticleTitle,
   ArticleIntroduction,
   ArticleWrapper,
+  ArticleFavoritesButton,
 };
 export default Article;

package/src/Breadcrumb/ActionBreadcrumb.tsx

@@ -0,0 +1,68 @@
+/**
+ * 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 { colors, fonts, spacing } from '@ndla/core';
+import { ChevronRight } from '@ndla/icons/common';
+import SafeLink from '@ndla/safelink';
+import React from 'react';
+import { MenuButton } from '@ndla/button';
+import { MenuItemProps } from '@ndla/button';
+import Breadcrumb from './Breadcrumb';
+import { IndexedBreadcrumbItem, SimpleBreadcrumbItem } from './BreadcrumbItem';
+
+const StyledRightChevron = styled(ChevronRight)`
+  color: ${colors.text.primary};
+  margin: ${spacing.xxsmall};
+  height: 24px;
+  width: 24px;
+`;
+
+const StyledSpan = styled.span`
+  color: ${colors.text.primary};
+  font-weight: ${fonts.weight.bold};
+`;
+
+const StyledSafeLink = styled(SafeLink)`
+  color: ${colors.text.primary};
+  box-shadow: none;
+  font-weight: ${fonts.weight.bold};
+  :hover {
+    color: ${colors.brand.primary};
+  }
+`;
+
+interface Props {
+  items: SimpleBreadcrumbItem[];
+  actionItems: MenuItemProps[];
+}
+
+const ActionBreadcrumb = ({ items, actionItems }: Props) => {
+  const renderItem = (item: IndexedBreadcrumbItem, totalCount: number) => {
+    if (item.index === totalCount - 1) {
+      return (
+        <MenuButton menuItems={actionItems} size="small">
+          <StyledSpan>{item.name}</StyledSpan>
+        </MenuButton>
+      );
+    }
+    return <StyledSafeLink to={item.to}>{item.name}</StyledSafeLink>;
+  };
+
+  const renderSeparator = (item: IndexedBreadcrumbItem, totalCount: number) => {
+    if (item.index === totalCount - 1) {
+      return null;
+    }
+
+    return <StyledRightChevron />;
+  };
+
+  return <Breadcrumb items={items} renderItem={renderItem} renderSeparator={renderSeparator} />;
+};
+
+export default ActionBreadcrumb;

package/src/Breadcrumb/index.ts

@@ -14,4 +14,6 @@ export { default as HeaderBreadcrumb } from './HeaderBreadcrumb';
 
 export { default as HomeBreadcrumb } from './HomeBreadcrumb';
 
+export { default as ActionBreadcrumb } from './ActionBreadcrumb';
+
 export default Breadcrumb;

package/src/Footer/FooterAuth.tsx

@@ -6,15 +6,13 @@
  *
  */
 
-import React from 'react';
-import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
+import Button from '@ndla/button';
 import { animations, colors, fonts, spacing } from '@ndla/core';
 import { ChevronDown, FeideText, LogIn, LogOut } from '@ndla/icons/common';
-import Button from '@ndla/button';
-
-import { AuthModalProps } from '../User/AuthModal';
-import AuthModal from '../User';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import AuthModal, { AuthModalProps } from '../User/AuthModal';
 
 const Wrapper = styled.div`
   display: flex;
@@ -66,7 +64,7 @@ const AuthedButton = styled(Button)`
   }
 `;
 
-const FooterAuth = ({ isAuthenticated, onAuthenticateClick, authorizedRole, ...rest }: AuthModalProps) => {
+const FooterAuth = ({ isAuthenticated, user, onAuthenticateClick, ...rest }: AuthModalProps) => {
   const { t } = useTranslation();
   return (
     <Wrapper>
@@ -78,11 +76,11 @@ const FooterAuth = ({ isAuthenticated, onAuthenticateClick, authorizedRole, ...r
           <AuthModal
             {...rest}
             isAuthenticated={isAuthenticated}
+            user={user}
             onAuthenticateClick={onAuthenticateClick}
-            authorizedRole={authorizedRole}
             activateButton={
               <AuthedButton ghostPill size="medium">
-                {t('user.loggedInAsButton', { role: authorizedRole })}
+                {t('user.loggedInAsButton', { role: user?.eduPersonPrimaryAffiliation })}
                 <ChevronDown />
               </AuthedButton>
             }

package/src/InfoBlock/InfoBlock.tsx

@@ -0,0 +1,61 @@
+/*
+ * 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, { ReactNode } from 'react';
+import styled from '@emotion/styled';
+import { spacing, fonts, colors } from '@ndla/core';
+
+const InfoBlockWrapper = styled.div`
+  border-bottom: 1px solid ${colors.brand.neutral7};
+  padding: ${spacing.small} 0;
+`;
+
+const IconWrapper = styled.div`
+  align-items: flex-start;
+  display: flex;
+
+  svg {
+    height: 25px;
+    width: 25px;
+  }
+`;
+
+const StyledTextWrapper = styled.div`
+  ${fonts.sizes(18)}
+`;
+
+const TitleWrapper = styled.div`
+  display: flex;
+
+  gap: ${spacing.small};
+`;
+
+const StyledTitle = styled.h2`
+  ${fonts.sizes('18')}
+  font-weight: 700;
+  margin: 0;
+`;
+
+interface InfoBlockProps {
+  icon?: ReactNode;
+  title?: string;
+  children?: ReactNode;
+}
+export const InfoBlock = ({ icon, title, children }: InfoBlockProps) => {
+  return (
+    <InfoBlockWrapper>
+      <TitleWrapper>
+        <IconWrapper>{icon}</IconWrapper>
+        <StyledTitle>{title}</StyledTitle>
+      </TitleWrapper>
+      <StyledTextWrapper>{children}</StyledTextWrapper>
+    </InfoBlockWrapper>
+  );
+};
+
+export default InfoBlock;

package/src/InfoBlock/index.ts

@@ -0,0 +1 @@
+export { InfoBlock } from './InfoBlock';

package/src/LearningPaths/LearningPathMenu.tsx

@@ -123,7 +123,7 @@ const LearningPathMenu = ({
               css={css`
                 padding-left: ${spacing.small};
               `}>
-              <Tooltip align="right" tooltip={t('learningPath.openMenuTooltip')}>
+              <Tooltip tooltip={t('learningPath.openMenuTooltip')}>
                 <StyledToggleMenubutton type="button" onClick={() => toggleOpenState(!isOpen)}>
                   {!isOpen ? <ArrowExpandRight /> : <ArrowExpandLeft />}
                 </StyledToggleMenubutton>

package/src/Masthead/MastheadAuthModal.tsx

@@ -11,8 +11,7 @@ import styled from '@emotion/styled';
 import Button from '@ndla/button';
 import { Feide } from '@ndla/icons/common';
 
-import AuthModal from '../User';
-import { AuthModalProps } from '../User/AuthModal';
+import AuthModal, { AuthModalProps } from '../User/AuthModal';
 
 type FeideWrapperProps = {
   inverted?: boolean;
@@ -31,11 +30,11 @@ const StyledButton = styled(Button)<FeideWrapperProps>`
   }
 `;
 
-type Props = {
+interface Props extends AuthModalProps {
   inverted?: boolean;
-};
+}
 
-const MastheadAuthModal = ({ inverted, ...rest }: Props & AuthModalProps) => {
+const MastheadAuthModal = ({ inverted, ...rest }: Props) => {
   return (
     <AuthModal
       {...rest}

package/src/MyNdla/Navigation/VerticalNavigation.tsx

@@ -0,0 +1,93 @@
+/*
+ * 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, { ReactNode } from 'react';
+import styled from '@emotion/styled';
+import { colors, spacing } from '@ndla/core';
+import SafeLinkButton from '@ndla/safelink';
+import { mq, breakpoints } from '@ndla/core';
+
+const NavigationWrapper = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  margin: 0;
+  max-width: 20vw;
+  border-right: 1px solid ${colors.brand.greyLighter};
+  height: 100%;
+  ${mq.range({ until: breakpoints.tabletWide })} {
+    display: none;
+  }
+`;
+
+const Navigation = styled.div`
+  padding: ${spacing.large};
+`;
+
+const NavigationElementText = styled.div`
+  color: ${colors.text.primary};
+`;
+
+const NavigationElement = styled(SafeLinkButton)`
+  display: flex;
+  align-items: center;
+  gap: 11px;
+  height: 30px;
+  box-shadow: none;
+  &:hover {
+    background-color: ${colors.brand.lighter};
+    border-radius: 5%;
+    svg {
+      fill: ${colors.brand.primary};
+    }
+    ${NavigationElementText} {
+      color: ${colors.brand.primary};
+    }
+  }
+  &:focus {
+    svg {
+      fill: ${colors.brand.primary};
+    }
+    ${NavigationElementText} {
+      color: ${colors.brand.primary};
+    }
+  }
+`;
+
+const IconWrapper = styled.div`
+  svg {
+    fill: ${colors.text.primary};
+    height: 20px;
+    width: 20px;
+  }
+`;
+
+interface NavProps {
+  navElements?: {
+    icon: ReactNode;
+    url: string;
+    name: string;
+  }[];
+}
+export const VerticalNavigation = ({ navElements }: NavProps) => {
+  return (
+    <NavigationWrapper>
+      <Navigation>
+        {navElements?.map((element) => {
+          return (
+            <NavigationElement to={element.url}>
+              <IconWrapper>{element.icon}</IconWrapper>
+              <NavigationElementText>{element.name}</NavigationElementText>
+            </NavigationElement>
+          );
+        })}
+      </Navigation>
+    </NavigationWrapper>
+  );
+};
+
+export default VerticalNavigation;

package/src/MyNdla/Navigation/index.ts

@@ -0,0 +1,2 @@
+import VerticalNavigation from './VerticalNavigation';
+export { VerticalNavigation };

package/src/MyNdla/Resource/Folder.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 styled from '@emotion/styled';
+import React, { ReactNode } from 'react';
+import { FolderOutlined } from '@ndla/icons/contentType';
+import { FileDocumentOutline } from '@ndla/icons/common';
+import { fonts, spacing, colors } from '@ndla/core';
+import { css } from '@emotion/core';
+import { useTranslation } from 'react-i18next';
+import SafeLink from '@ndla/safelink';
+import { MenuButton } from '@ndla/button';
+
+interface FolderIconWrapperProps {
+  type?: LayoutType;
+}
+
+const FolderIconWrapper = styled.div<FolderIconWrapperProps>`
+  display: flex;
+  border-radius: 100%;
+  padding: 11px;
+  background-color: ${colors.brand.greyLighter};
+  svg {
+    width: 18px;
+    height: 18px;
+  }
+  ${(p) =>
+    p.type === 'block' &&
+    css`
+    background-color: transparent;
+    ${FolderWrapper}:hover & {
+      background-color: ${colors.brand.light};
+      transition-duration 0.5s;
+    }
+  `};
+`;
+
+const FolderTitle = styled.h2`
+  ${fonts.sizes(18)};
+  font-weight: ${fonts.weight.normal};
+  margin: 0;
+  flex: 1;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  // Unfortunate css needed for multi-line text overflow ellipsis.
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  -webkit-box-orient: vertical;
+`;
+
+const FolderWrapper = styled(SafeLink)`
+  display: flex;
+  align-items: center;
+  padding: ${spacing.small};
+  border: 1px solid ${colors.brand.light};
+  border-radius: 2px;
+  box-shadow: none;
+  text-decoration: none;
+  color: ${colors.brand.greyDark};
+  font-family: ${fonts.sans};
+  transition-duration: 0.2s;
+  gap: ${spacing.small};
+  &:hover {
+    box-shadow: 1px 1px 6px 2px rgba(9, 55, 101, 0.08);
+    transition-duration: 0.2s;
+    ${FolderTitle} {
+      color: ${colors.brand.primary};
+      text-decoration: underline;
+    }
+  }
+`;
+
+interface Props {
+  title: string;
+  subFolders?: number;
+  subResources?: number;
+  description?: string;
+  link: string;
+  type: LayoutType;
+  actionMenu?: ReactNode;
+}
+
+interface IconCountProps {
+  type: 'resource' | 'folder';
+  count?: number;
+  layoutType: LayoutType;
+}
+
+interface IconCountWrapperProps {
+  type: LayoutType;
+}
+const IconCountWrapper = styled.div<IconCountWrapperProps>`
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  ${fonts.sizes(16)};
+  ${(p) =>
+    p.type === 'block' &&
+    css`
+      opacity: 0;
+      ${FolderWrapper}:hover & {
+        opacity: 1;
+      }
+    `};
+`;
+const IconCount = ({ type, count, layoutType }: IconCountProps) => {
+  const Icon = type === 'resource' ? FileDocumentOutline : FolderOutlined;
+  const { t } = useTranslation();
+  if (!count) return null;
+
+  return (
+    <IconCountWrapper type={layoutType}>
+      <Icon aria-label={t(`myNdla.${type}s`)} />
+      <span>{layoutType === 'block' ? count : t(`myNdla.${type}s`, { count: 3 })}</span>
+    </IconCountWrapper>
+  );
+};
+
+type LayoutType = 'list' | 'block';
+
+const Folder = ({ link, title, subFolders, subResources, type = 'list', actionMenu }: Props) => {
+  const { t } = useTranslation();
+  return (
+    <FolderWrapper to={link}>
+      <FolderIconWrapper type={type}>
+        <FolderOutlined aria-label={t('myNdla.folder')} />
+      </FolderIconWrapper>
+      <FolderTitle>{title}</FolderTitle>
+      <IconCount layoutType={type} type={'folder'} count={subFolders} />
+      <IconCount layoutType={type} type={'resource'} count={subResources} />
+      <MenuButton size="small" />
+    </FolderWrapper>
+  );
+};
+
+export default Folder;

package/src/MyNdla/Resource/index.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 Folder from './Folder';
+export { Folder };

package/src/MyNdla/index.ts

@@ -1,5 +1,3 @@
-import { ResourceElement } from './ResourceDash';
-import { ResourcesView } from './ResourceDash';
-import { Breadcrumbs } from './ResourceDash';
-
-export { ResourceElement, ResourcesView, Breadcrumbs };
+import Folder from './Resource/Folder';
+import { VerticalNavigation } from './Navigation';
+export { VerticalNavigation, Folder };

package/src/Notion/ConceptNotion.tsx

@@ -74,6 +74,7 @@ const ConceptNotion = ({ concept, disableScripts, type, hideIconsAndAuthors, fig
     <FigureNotion
       resizeIframe
       id={figureId}
+      title={concept.title}
       figureId={visualElementId}
       copyright={concept.copyright}
       licenseString={concept.copyright?.license?.license ?? ''}