@ndla/ui 22.0.1 → 22.1.0

package/src/Footer/FooterPrivacy.tsx

@@ -69,7 +69,10 @@ const StyledFooterText = styled.div`
 
 const FooterPrivacy = ({ lang, label }: FooterPrivacyProps) => (
   <StyledFooterText>
-    <Modal activateButton={<StyledPrivacyButton type="button">{label}</StyledPrivacyButton>} size="fullscreen">
+    <Modal
+      label={label}
+      activateButton={<StyledPrivacyButton type="button">{label}</StyledPrivacyButton>}
+      size="fullscreen">
       {(onClose: () => void) => (
         <OneColumn cssModifier="medium">
           <ModalHeader>

package/src/Masthead/MastheadSearchModal.tsx

@@ -117,6 +117,7 @@ const MastheadSearchModal = ({
   t,
 }: Props & WithTranslation) => (
   <Modal
+    label={t('searchPage.searchFieldPlaceholder')}
     backgroundColor="grey"
     animation="slide-down"
     animationDuration={200}

package/src/Resource/BlockResource.tsx

@@ -13,15 +13,18 @@ import { colors, fonts, spacing } from '@ndla/core';
 import { MenuButton, MenuItemProps } from '@ndla/button';
 import Image from '../Image';
 import { CompressedTagList, ResourceImageProps, ResourceTitle, Row, TopicList } from './resourceComponents';
+import ContentLoader from '../ContentLoader';
 
 interface BlockResourceProps {
   link: string;
+  tagLinkPrefix?: string;
   title: string;
   resourceImage: ResourceImageProps;
   topics: string[];
   tags?: string[];
   description?: string;
   menuItems?: MenuItemProps[];
+  isLoading?: boolean;
 }
 
 const BlockElementWrapper = styled(SafeLink)`
@@ -45,7 +48,7 @@ const BlockDescription = styled.p`
   overflow: hidden;
   text-overflow: ellipsis;
   transition: height 0.2s ease-out;
-  ${() => BlockElementWrapper}:hover & {
+  ${() => BlockElementWrapper}:hover &, ${() => BlockElementWrapper}:focus & {
     // Unfortunate css needed for multi-line text overflow ellipsis.
     height: 3.1em;
     -webkit-line-clamp: 2;
@@ -78,20 +81,80 @@ const ImageWrapper = styled.div`
   }
 `;
 
-const BlockResource = ({ link, title, tags, resourceImage, topics, description, menuItems }: BlockResourceProps) => {
+interface BlockImageProps {
+  image: ResourceImageProps;
+  loading?: boolean;
+}
+
+const BlockImage = ({ image, loading }: BlockImageProps) => {
+  if (loading) {
+    return (
+      <ContentLoader height={'100%'} width={'100%'} viewBox={null} preserveAspectRatio="none">
+        <rect x="0" y="0" rx="3" ry="3" width="100%" height="100%" />
+      </ContentLoader>
+    );
+  }
+  return <Image alt={image.alt} src={image.src} />;
+};
+
+interface BlockTitleProps {
+  title: string;
+  loading?: boolean;
+}
+
+const BlockTitle = ({ title, loading }: BlockTitleProps) => {
+  if (loading) {
+    return (
+      <ContentLoader height={'18px'} width={'100%'} viewBox={null} preserveAspectRatio="none">
+        <rect x="0" y="0" rx="3" ry="3" width="100%" height="18px" />
+      </ContentLoader>
+    );
+  }
+  return <ResourceTitle>{title}</ResourceTitle>;
+};
+
+interface BlockTopicListProps {
+  topics: string[];
+  loading?: boolean;
+}
+
+const BlockTopicList = ({ topics, loading }: BlockTopicListProps) => {
+  if (loading) {
+    return (
+      <ContentLoader height={'18px'} width={'100%'} viewBox={null} preserveAspectRatio="none">
+        <rect x="0" y="0" rx="3" ry="3" width="20%" height="18px" />
+        <rect x="25%" y="0" rx="3" ry="3" width="20%" height="18px" />
+      </ContentLoader>
+    );
+  }
+
+  return <TopicList topics={topics} />;
+};
+
+const BlockResource = ({
+  link,
+  tagLinkPrefix,
+  title,
+  tags,
+  resourceImage,
+  topics,
+  description,
+  menuItems,
+  isLoading,
+}: BlockResourceProps) => {
   return (
     <BlockElementWrapper to={link}>
       <ImageWrapper>
-        <Image alt={resourceImage.alt} src={resourceImage.src} />
+        <BlockImage image={resourceImage} loading={isLoading} />
       </ImageWrapper>
       <BlockInfoWrapper>
         <div>
-          <ResourceTitle>{title}</ResourceTitle>
+          <BlockTitle title={title} loading={isLoading} />
         </div>
-        <TopicList topics={topics} />
+        <BlockTopicList topics={topics} loading={isLoading} />
         <BlockDescription>{description}</BlockDescription>
         <RightRow>
-          {tags && <CompressedTagList tags={tags} />}
+          {tags && <CompressedTagList tagLinkPrefix={tagLinkPrefix} tags={tags} />}
           {menuItems && menuItems.length > 0 && <MenuButton alignRight size="small" menuItems={menuItems} />}
         </RightRow>
       </BlockInfoWrapper>

package/src/Resource/ListResource.tsx

@@ -13,8 +13,9 @@ import { fonts, spacing, colors, breakpoints, mq } from '@ndla/core';
 import { MenuButton, MenuItemProps } from '@ndla/button';
 import Image from '../Image';
 import { CompressedTagList, ResourceImageProps, ResourceTitle, TopicList } from './resourceComponents';
+import ContentLoader from '../ContentLoader';
 
-const ResourceDescription = styled.p`
+const StyledResourceDescription = styled.p`
   grid-area: description;
   line-clamp: 2;
   line-height: 1em;
@@ -97,7 +98,7 @@ const StyledImage = styled(Image)`
   object-fit: cover;
 `;
 
-const TopicAndTitle = styled.div`
+const TopicAndTitleWrapper = styled.div`
   grid-area: topicAndTitle;
   margin-top: ${spacing.xxsmall};
 `;
@@ -108,29 +109,105 @@ interface StyledImageProps {
 
 export interface ListResourceProps {
   link: string;
+  tagLinkPrefix?: string;
   title: string;
   resourceImage: ResourceImageProps;
   topics: string[];
   tags?: string[];
   description?: string;
   menuItems?: MenuItemProps[];
+  isLoading?: boolean;
 }
 
-const ListResource = ({ link, title, tags, resourceImage, topics, description, menuItems }: ListResourceProps) => {
+interface ListResourceImageProps {
+  resourceImage: ResourceImageProps;
+  loading?: boolean;
+  type: 'normal' | 'compact';
+}
+
+const ListResourceImage = ({ resourceImage, loading, type }: ListResourceImageProps) => {
+  if (!loading) {
+    return <StyledImage alt={resourceImage.alt} src={resourceImage.src} />;
+  }
+  return (
+    <ContentLoader height={'100%'} width={'100%'} viewBox={null} preserveAspectRatio="none">
+      <rect
+        x="0"
+        y="0"
+        rx="3"
+        ry="3"
+        width={type === 'compact' ? '56' : '136'}
+        height={type === 'compact' ? '40' : '96'}
+      />
+    </ContentLoader>
+  );
+};
+
+interface TopicAndTitleProps {
+  title: string;
+  topics: string[];
+  loading?: boolean;
+}
+
+const TopicAndTitle = ({ title, topics, loading }: TopicAndTitleProps) => {
+  if (loading) {
+    return (
+      <ContentLoader height={'40px'} width={'100%'} viewBox={null} preserveAspectRatio="none">
+        <rect x="0" y="0" rx="3" ry="3" width={'100%'} height={'16'} />
+        <rect x="0" y="18" rx="3" ry="3" width={'70'} height={'16'} />
+        <rect x="80" y="18" rx="3" ry="3" width={'70'} height={'16'} />
+      </ContentLoader>
+    );
+  }
+  return (
+    <>
+      <ResourceTitle>{title}</ResourceTitle>
+      <TopicList topics={topics} />
+    </>
+  );
+};
+
+interface ResourceDescriptionProps {
+  description?: string;
+  loading?: boolean;
+}
+
+const ResourceDescription = ({ description, loading }: ResourceDescriptionProps) => {
+  if (loading) {
+    return (
+      <ContentLoader height={'20px'} width={'100%'} viewBox={null} preserveAspectRatio="none">
+        <rect x="0" y="0" width="100%" height="20" />
+      </ContentLoader>
+    );
+  }
+  return <StyledResourceDescription>{description}</StyledResourceDescription>;
+};
+
+const ListResource = ({
+  link,
+  tagLinkPrefix,
+  title,
+  tags,
+  resourceImage,
+  topics,
+  description,
+  menuItems,
+  isLoading = false,
+}: ListResourceProps) => {
   const showDescription = description !== undefined;
+  const imageType = showDescription ? 'normal' : 'compact';
 
   return (
     <ResourceWrapper to={link}>
-      <StyledImageWrapper imageSize={showDescription ? 'normal' : 'compact'}>
-        <StyledImage alt={resourceImage.alt} src={resourceImage.src} />
+      <StyledImageWrapper imageSize={imageType}>
+        <ListResourceImage resourceImage={resourceImage} loading={isLoading} type={imageType} />
       </StyledImageWrapper>
-      <TopicAndTitle>
-        <ResourceTitle>{title}</ResourceTitle>
-        <TopicList topics={topics} />
-      </TopicAndTitle>
-      {showDescription && <ResourceDescription>{description}</ResourceDescription>}
+      <TopicAndTitleWrapper>
+        <TopicAndTitle topics={topics} title={title} loading={isLoading} />
+      </TopicAndTitleWrapper>
+      {showDescription && <ResourceDescription description={description} loading={isLoading} />}
       <TagsandActionMenu>
-        {tags && <CompressedTagList tags={tags} />}
+        {tags && <CompressedTagList tagLinkPrefix={tagLinkPrefix} tags={tags} />}
         {menuItems && menuItems.length > 0 && <MenuButton alignRight size="small" menuItems={menuItems} />}
       </TagsandActionMenu>
     </ResourceWrapper>

package/src/Resource/resourceComponents.tsx

@@ -6,11 +6,13 @@
  *
  */
 
-import React from 'react';
 import styled from '@emotion/styled';
-import { fonts, colors, spacing } from '@ndla/core';
+import { colors, fonts, spacing } from '@ndla/core';
+import React, { MouseEvent } from 'react';
 
 import { MenuButton } from '@ndla/button';
+import SafeLink from '@ndla/safelink';
+import { useNavigate } from 'react-router-dom';
 
 export interface ResourceImageProps {
   alt: string;
@@ -42,9 +44,13 @@ const StyledTagList = styled.ul`
 `;
 
 const StyledTagListElement = styled.li`
-  color: ${colors.brand.grey};
   margin: 0;
   ${fonts.sizes(14)};
+`;
+
+const StyledSafeLink = styled(SafeLink)`
+  box-shadow: none;
+  color: ${colors.brand.grey};
   ::before {
     content: '#';
   }
@@ -90,14 +96,20 @@ const TagCounterWrapper = styled.p`
 
 interface TagListProps {
   tags?: string[];
+  tagLinkPrefix?: string;
 }
-
-export const TagList = ({ tags }: TagListProps) => {
+export const TagList = ({ tags, tagLinkPrefix }: TagListProps) => {
   if (!tags) return null;
   return (
     <StyledTagList>
       {tags.map((tag, i) => (
-        <StyledTagListElement key={`tag-${i}`}>{tag}</StyledTagListElement>
+        <StyledTagListElement key={`tag-${i}`}>
+          <StyledSafeLink
+            onClick={(e: MouseEvent<HTMLAnchorElement | HTMLElement>) => e.stopPropagation()}
+            to={`${tagLinkPrefix ? tagLinkPrefix : ''}/${tag}`}>
+            {tag}
+          </StyledSafeLink>
+        </StyledTagListElement>
       ))}
     </StyledTagList>
   );
@@ -105,20 +117,24 @@ export const TagList = ({ tags }: TagListProps) => {
 
 interface CompressedTagListProps {
   tags: string[];
+  tagLinkPrefix?: string;
 }
 
-export const CompressedTagList = ({ tags }: CompressedTagListProps) => {
+export const CompressedTagList = ({ tags, tagLinkPrefix }: CompressedTagListProps) => {
+  const navigate = useNavigate();
   const visibleTags = tags.slice(0, 3);
   const remainingTags = tags.slice(3, tags.length).map((tag) => {
     return {
       text: '#' + tag,
-      onClick: () => {},
+      onClick: () => {
+        navigate(`${tagLinkPrefix ? tagLinkPrefix : ''}/${tag}`);
+      },
     };
   });
 
   return (
     <>
-      <TagList tags={visibleTags} />
+      <TagList tagLinkPrefix={tagLinkPrefix} tags={visibleTags} />
       {remainingTags.length > 0 && (
         <MenuButton hideMenuIcon={true} menuItems={remainingTags}>
           <TagCounterWrapper>{`+${remainingTags.length}`}</TagCounterWrapper>

package/src/ResourcesWrapper/ResourcesTopicTitle.tsx

@@ -66,6 +66,9 @@ const ResourcesTopicTitle = ({
   } else {
     heading = <h1 {...classes('topic-title', 'single')}>{messages.label}</h1>;
   }
+
+  const tooltipId = 'popupDialogTooltip';
+
   return (
     <header {...classes('topic-title-wrapper', { invertedStyle })}>
       <div>
@@ -82,6 +85,7 @@ const ResourcesTopicTitle = ({
             css={invertedStyle ? invertedSwitchCSS : switchCSS}
           />
           <Modal
+            labelledBy={tooltipId}
             narrow
             wrapperFunctionForButton={(activateButton: ReactNode) => (
               <TooltipWrapper>
@@ -89,7 +93,7 @@ const ResourcesTopicTitle = ({
               </TooltipWrapper>
             )}
             activateButton={
-              <TooltipButton aria-label={t('resource.dialogTooltip')}>
+              <TooltipButton id={tooltipId} aria-label={t('resource.dialogTooltip')}>
                 <HelpIcon invertedStyle={invertedStyle} />
               </TooltipButton>
             }>

package/src/SearchTypeResult/PopupFilter.tsx

@@ -92,9 +92,11 @@ const PopupFilter = ({
 }: PopupFilterProps) => {
   const { t } = useTranslation();
   const [selectedMenu, setSelectedMenu] = useState(MENU_ALL_SUBJECTS);
+  const headingId = 'popupFilterHeading';
 
   return (
     <Modal
+      labelledBy={headingId}
       controllable
       backgroundColor="white"
       animation="subtle"
@@ -107,7 +109,7 @@ const PopupFilter = ({
           <ModalWrapper>
             <ModalContent>
               <ModalHeaderWrapper>
-                <ModalHeading>{t('searchPage.searchFilterMessages.filterLabel')}</ModalHeading>
+                <ModalHeading id={headingId}>{t('searchPage.searchFilterMessages.filterLabel')}</ModalHeading>
                 <ModalCloseButton onClick={() => onClose()} title={t('searchPage.close')} />
               </ModalHeaderWrapper>
               {subjectCategories && programmes && (

package/src/SearchTypeResult/components/ItemContexts.tsx

@@ -98,6 +98,7 @@ const ItemContexts = ({ contexts, id, title }: ItemContextsType) => {
        
       {contexts.length > 1 && (
         <Modal
+          label={t('searchPage.contextModal.ariaLabel')}
           activateButton={
             <ModalButton link>
               {t('searchPage.contextModal.button', {

package/src/SnackBar/DefaultSnackbar.tsx

@@ -0,0 +1,70 @@
+/**
+ * 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 { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
+import { IconButton } from '@ndla/button';
+import { breakpoints, colors, fonts, misc, mq, shadows, spacing } from '@ndla/core';
+import { Cross } from '@ndla/icons/action';
+import { Snack, useSnack } from './SnackbarProvider';
+
+const DefaultSnackContainer = styled.div`
+  display: flex;
+  gap: ${spacing.small};
+  padding: ${spacing.small};
+  background-color: ${colors.text.primary};
+  color: ${colors.white};
+  border-radius: ${misc.borderRadius};
+  margin: 0 ${spacing.large};
+  pointer-events: all;
+  box-shadow: ${shadows.levitate1};
+  font-family: ${fonts.sans};
+  font-size: 18px;
+  align-items: center;
+`;
+
+const StyledCloseButton = styled(IconButton)`
+  svg {
+    color: ${colors.brand.greyMedium};
+  }
+  &:hover,
+  &:focus {
+    background: ${colors.brand.greyDark};
+    svg {
+      color: ${colors.brand.greyLightest};
+    }
+  }
+`;
+
+const ButtonWrapper = styled.div`
+  ${mq.range({ from: breakpoints.tablet })} {
+    gap: ${spacing.xxsmall};
+  }
+`;
+
+const DefaultSnack = (snack: Snack) => {
+  const { closable = true, icon } = snack;
+  const { t } = useTranslation();
+  const { closeSnack } = useSnack();
+  return (
+    <DefaultSnackContainer>
+      {icon}
+      {snack.content}
+      <ButtonWrapper>
+        {closable && (
+          <StyledCloseButton size="xsmall" outline onClick={() => closeSnack(snack)} aria-label={t('snackbar.close')}>
+            <Cross />
+          </StyledCloseButton>
+        )}
+      </ButtonWrapper>
+    </DefaultSnackContainer>
+  );
+};
+
+export default DefaultSnack;

package/src/SnackBar/SnackbarProvider.tsx

@@ -0,0 +1,147 @@
+/**
+ * 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, { useCallback, useMemo, createContext, ReactNode, useState, useContext, useEffect } from 'react';
+import { keyframes } from '@emotion/core';
+import styled from '@emotion/styled';
+import { spacing } from '@ndla/core';
+import DefaultSnack from './DefaultSnackbar';
+
+export interface Snack {
+  content?: ReactNode;
+  duration?: number;
+  render?: (id: string, onClose?: () => void) => ReactNode;
+  id: string;
+  icon?: ReactNode;
+  closable?: boolean;
+}
+
+export interface SnackContext {
+  addSnack: (snack: Snack) => void;
+  removeSnack: (id: string) => void;
+  clearSnacks: () => void;
+  closeSnack: (snack: Snack) => void;
+}
+
+const SnackbarContext = createContext<SnackContext | undefined>(undefined);
+
+export const useSnack = () => {
+  const context = useContext(SnackbarContext);
+  if (!context) {
+    throw new Error('useSnack can only be used within a SnackbarProvider!');
+  }
+
+  return context;
+};
+
+interface Props {
+  children: ReactNode;
+}
+
+export const SnackbarProvider = ({ children }: Props) => {
+  const [snacks, setSnacks] = useState<Snack[]>([]);
+
+  const addSnack = useCallback((snack: Snack) => {
+    setSnacks((prev) => prev.filter((s) => s.id !== snack.id).concat(snack));
+  }, []);
+
+  const removeSnack = useCallback((snackId: string) => {
+    setSnacks((prev) => prev.filter(({ id }) => snackId !== id));
+  }, []);
+
+  const closeSnack = useCallback((snack: Snack) => {
+    setSnacks((prev) => prev.map((p) => (p.id === snack.id ? { ...p, duration: 0 } : p)));
+  }, []);
+
+  const clearSnacks = useCallback(() => setSnacks([]), []);
+
+  const value = useMemo(
+    () => ({ addSnack, removeSnack, clearSnacks, closeSnack }),
+    [addSnack, removeSnack, clearSnacks, closeSnack],
+  );
+
+  return (
+    <SnackbarContext.Provider value={value}>
+      {children}
+      <SnackbarContainer snacks={snacks} />
+    </SnackbarContext.Provider>
+  );
+};
+
+interface BaseSnackProps extends Snack {
+  children: ReactNode;
+}
+
+interface BaseSnackContainerProps {
+  expired: boolean;
+}
+
+const snackbarInAnimation = keyframes({
+  '0%': { transform: `translateY(${spacing.medium})`, opacity: 0 },
+  '100%': { opacity: 1 },
+});
+
+const snackbarOutAnimation = keyframes({
+  '0%': { opacity: 1 },
+  '100%': { transform: `translateY(${spacing.medium})`, opacity: 0 },
+});
+
+const BaseSnackContainer = styled.li<BaseSnackContainerProps>`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  animation: ${(p) => (p.expired ? snackbarOutAnimation : snackbarInAnimation)} 200ms ease-in-out;
+  animation-fill-mode: forwards;
+`;
+
+export const BaseSnack = ({ duration = 5000, id, children }: BaseSnackProps) => {
+  const { removeSnack } = useSnack();
+  const [expired, setExpired] = useState(false);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => setExpired(true), duration);
+    return () => clearTimeout(timeout);
+  }, [duration]);
+
+  return (
+    <BaseSnackContainer expired={expired} onAnimationEnd={() => expired && removeSnack(id)}>
+      {children}
+    </BaseSnackContainer>
+  );
+};
+
+interface SnackbarContainerProps {
+  snacks: Snack[];
+}
+
+const StyledSnackList = styled.ul`
+  position: fixed;
+  z-index: 99999;
+  display: flex;
+  flex-direction: column;
+  pointer-events: none;
+  margin: 0 auto;
+  padding: 0;
+  bottom: env(safe-area-inset-bottom, 40px);
+  right: env(safe-area-inset-right, 0px);
+  left: env(safe-area-inset-left, 0px);
+`;
+
+const SnackbarContainer = ({ snacks }: SnackbarContainerProps) => {
+  return (
+    <StyledSnackList aria-live="polite" role="region">
+      {snacks.map((snack) => (
+        <BaseSnack key={snack.id} {...snack}>
+          {snack.render?.(snack.id) ?? <DefaultSnack {...snack} />}
+        </BaseSnack>
+      ))}
+    </StyledSnackList>
+  );
+};
+
+export default SnackbarProvider;

package/src/SnackBar/index.ts

@@ -6,8 +6,6 @@
  *
  */
 
-import SnackBar from './SnackBar';
-
-export type { SnackBarItem } from './SnackBar';
-
-export { SnackBar };
+export type { Snack, SnackContext } from './SnackbarProvider';
+export { SnackbarProvider, useSnack, BaseSnack } from './SnackbarProvider';
+export { default as DefaultSnackbar } from './DefaultSnackbar';

package/src/Topic/Topic.tsx

@@ -268,6 +268,7 @@ const Topic = ({
                   {topic.visualElement ? (
                     <>
                       <Modal
+                        label={t('topicPage.imageModal')}
                         activateButton={
                           <VisualElementButton
                             stripped

package/src/User/AuthModal.tsx

@@ -83,7 +83,8 @@ const AuthModal = ({
       position={position}
       isOpen={isOpen}
       onClose={onClose}
-      controllable={!activateButton}>
+      controllable={!activateButton}
+      label={isAuthenticated ? t('user.modal.isAuth') : t('user.modal.isNotAuth')}>
       {(onClose: () => void) => (
         <StyledModalBody>
           <StyledModalHeader>

package/src/index.ts

@@ -240,8 +240,8 @@ export type { ListResourceProps } from './Resource';
 export type { TagType } from './TagSelector';
 export { TagSelector } from './TagSelector';
 
-export type { SnackBarItem } from './SnackBar';
-export { SnackBar } from './SnackBar';
+export { SnackbarProvider, useSnack, BaseSnack, DefaultSnackbar } from './SnackBar';
+export type { Snack, SnackContext } from './SnackBar';
 export { InfoBlock } from './InfoBlock';
 export { TreeStructure } from './TreeStructure';
 export type { FolderType, TreeStructureProps, TreeStructureMenuProps } from './TreeStructure';