@ndla/ui 21.0.0 → 22.0.2

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,21 +80,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,
+  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} />}
-          {menuItems && menuItems.length > 0 && <MenuButton size="small" menuItems={menuItems} />}
+          {menuItems && menuItems.length > 0 && <MenuButton alignRight size="small" menuItems={menuItems} />}
         </RightRow>
       </BlockInfoWrapper>
     </BlockElementWrapper>

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,24 +115,98 @@ 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 size="small" menuItems={menuItems} />}
+        {menuItems && menuItems.length > 0 && <MenuButton alignRight size="small" menuItems={menuItems} />}
       </TagsandActionMenu>
     </ResourceWrapper>
   );

package/src/ResourceGroup/ResourceGroup.tsx

@@ -36,7 +36,7 @@ const StyledHeading = styled.h1`
 type Props = {
   invertedStyle?: boolean;
   toggleAdditionalResources: () => void;
-  onToggleAddToFavorites: (id: string | number, add: string) => void;
+  onToggleAddToFavorites: (id: string) => void;
   showAddToFavoriteButton: boolean;
 };
 

package/src/ResourceGroup/ResourceItem.tsx

@@ -229,7 +229,7 @@ type Props = {
   showAdditionalResources?: boolean;
   access?: 'teacher';
   isFavorite?: boolean;
-  onToggleAddToFavorites: (id: string, add: boolean) => void;
+  onToggleAddToFavorites: (id: string) => void;
   showAddToFavoriteButton: boolean;
 };
 
@@ -305,7 +305,7 @@ const ResourceItem = ({
           <ArticleFavoritesButton
             isFavorite={isFavorite}
             articleId={id}
-            onToggleAddToFavorites={() => onToggleAddToFavorites(id, true)}
+            onToggleAddToFavorites={() => onToggleAddToFavorites(id)}
           />
         )}
       </TypeWrapper>

package/src/ResourceGroup/ResourceList.tsx

@@ -48,7 +48,7 @@ export type ResourceListProps = {
   contentType?: string;
   title?: string;
   showAdditionalResources?: boolean;
-  onToggleAddToFavorites: (id: string, add: boolean) => void;
+  onToggleAddToFavorites: (id: string) => void;
   showAddToFavoriteButton: boolean;
 };
 

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/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/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/TopicMenu/TopicMenuButton.jsx

@@ -9,7 +9,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/core';
-import { spacing, fonts, colors } from '@ndla/core';
+import { spacing, fonts, colors, mq, breakpoints } from '@ndla/core';
 import { Menu } from '@ndla/icons/common';
 import Button from '@ndla/button';
 
@@ -38,6 +38,10 @@ const style = css`
     background: ${colors.white};
     color: ${colors.brand.primary};
   }
+  ${mq.range({ until: breakpoints.tablet })} {
+    padding-left: ${spacing.xsmall};
+    padding-right: ${spacing.xsmall};
+  }
 `;
 
 const TopicMenuButton = ({ ndlaFilm, children, ...rest }) => (