@ndla/ui 22.0.0 → 22.0.3

package/src/ContentLoader/index.tsx

@@ -6,18 +6,14 @@
  *
  */
 
-import React, { ReactNode } from 'react';
+import React, { ReactNode, SVGProps } from 'react';
 import { uuid } from '@ndla/util';
 
-interface Props {
+interface Props extends Omit<SVGProps<SVGSVGElement>, 'viewBox'> {
   children?: ReactNode;
-  speed?: number;
-  width?: number;
-  height?: number;
   primaryColor?: string;
   secondaryColor?: string;
-  preserveAspectRatio?: string;
-  className?: string;
+  viewBox?: string | null;
 }
 
 const ContentLoader = ({
@@ -29,18 +25,22 @@ const ContentLoader = ({
   primaryColor = '#f0f0f0',
   secondaryColor = '#e0e0e0',
   speed = 2,
+  viewBox: viewBoxProp,
   ...rest
 }: Props) => {
   const idClip = uuid();
   const idGradient = uuid();
+  const viewBox = viewBoxProp === undefined ? `0 0 ${width} ${height}` : viewBoxProp;
 
   return (
     <svg
-      viewBox={`0 0 ${width} ${height}`}
+      viewBox={viewBox ?? undefined}
       version="1.1"
       preserveAspectRatio={preserveAspectRatio}
       className={className}
-      {...rest}>
+      {...rest}
+      height={typeof height === 'string' ? height : undefined}
+      width={typeof width === 'string' ? width : undefined}>
       <rect
         style={{ fill: `url(#${idGradient})` }}
         clipPath={`url(#${idClip})`}

package/src/Filter/FilterButtons.tsx

@@ -128,6 +128,7 @@ export const FilterButtons = ({ heading, items, onFilterToggle, onRemoveAllFilte
             </StyledButtonElementWrapper>
           ))}
           <Modal
+            label={t('searchPage.searchFilterMessages.resourceTypeFilter.button')}
             size="fullscreen"
             animation="subtle"
             backgroundColor="white"

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,6 +13,7 @@ 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;
@@ -22,6 +23,7 @@ interface BlockResourceProps {
   tags?: string[];
   description?: string;
   menuItems?: MenuItemProps[];
+  isLoading?: boolean;
 }
 
 const BlockElementWrapper = styled(SafeLink)`
@@ -78,17 +80,76 @@ 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,
+  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} />}

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};
 `;
@@ -114,21 +115,95 @@ export interface ListResourceProps {
   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,
+  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} />}
         {menuItems && menuItems.length > 0 && <MenuButton alignRight size="small" menuItems={menuItems} />}

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/Search/ContentTypeResult.tsx

@@ -129,7 +129,6 @@ const ContentTypeResult = ({
             return (
               <StyledListItem key={path} delayAnimation={delayAnimation}>
                 <SafeLink
-                  tabIndex={-1}
                   css={shouldHighlight && highlightStyle}
                   data-highlighted={shouldHighlight || false}
                   {...linkProps}

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/SearchItem.tsx

@@ -154,7 +154,6 @@ const ItemText = styled.div<ItemTypeProps>`
 
 const ContextWrapper = styled.div`
   background: white;
-  z-index: 1;
   padding: 0 ${spacing.normal} ${spacing.small};
   transition: all ${animations.durations.fast} ease-in-out;
   ${ItemWrapper}:hover & {

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