@ndla/ui 22.0.1 → 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,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/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/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';

package/src/locale/messages-en.ts

@@ -996,6 +996,7 @@ const messages = {
       delete: 'Delete',
       edit: 'Edit',
       missingName: 'Folder name required',
+      folderDeleted: '"{{folderName}}" deleted',
     },
     tags: '{{count}} tag',
     tags_plural: '{{count}} tags',
@@ -1056,8 +1057,14 @@ const messages = {
       removeTitle: 'Remove resource',
       confirmRemove: 'Are you sure you want to remove the resource from this folder?',
       copyLink: 'Copy link to this page',
+      linkCopied: 'Copied to clipboard',
       addToMyNdla: 'Add to My NDLA',
       addedToMyNdla: 'Added to My NDLA',
+      addedToFolder: 'Resource added to "{{folderName}}"',
+      removedFromFolder: 'Removed from "{{folderName}}"',
+      titleUpdated: 'Title updated',
+      tagsUpdated: 'Tags updated',
+      show: 'Show',
     },
   },
   snackbar: {

package/src/locale/messages-nb.ts

@@ -994,6 +994,7 @@ const messages = {
       delete: 'Slett',
       edit: 'Rediger',
       missingName: 'Mappenavn er påkrevd',
+      folderDeleted: '"{{folderName}}" er slettet',
     },
     tags: '{{count}} tag',
     tags_plural: '{{count}} tags',
@@ -1054,8 +1055,14 @@ const messages = {
       removeTitle: 'Fjern ressurs',
       confirmRemove: 'Er du sikker på at du ønsker å fjerne ressursen fra denne mappen?',
       copyLink: 'Kopier lenke til siden',
+      linkCopied: 'Kopiert til utklippstavle',
       addToMyNdla: 'Legg i Min NDLA',
       addedToMyNdla: 'Lagt i Min NDLA',
+      addedToFolder: 'Ressurs er lagt i "{{folderName}}"',
+      removedFromFolder: 'Fjernet fra "{{folderName}}"',
+      titleUpdated: 'Tittel oppdatert',
+      tagsUpdated: 'Tags oppdatert',
+      show: 'Vis',
     },
   },
   snackbar: {

package/src/locale/messages-nn.ts

@@ -995,6 +995,7 @@ const messages = {
       delete: 'Slett',
       edit: 'Rediger',
       missingName: 'Mappenavn er påkrevd',
+      folderDeleted: '"{{folderName}}" er sletta',
     },
     tags: '{{count}} tag',
     tags_plural: '{{count}} tags',
@@ -1054,8 +1055,14 @@ const messages = {
       removeTitle: 'Fjern ressurs',
       confirmRemove: 'Er du sikker på at du ønsker å fjerne ressursen frå denne mappen?',
       copyLink: 'Kopier lenke til sida',
+      linkCopied: 'Kopiert til utklippstavla',
       addToMyNdla: 'Legg i Min NDLA',
       addedToMyNdla: 'Lagt i Min NDLA',
+      addedToFolder: 'Ressurs er lagt i "{{folderName}}"',
+      removedFromFolder: 'Fjernet fra "{{folderName}}"',
+      titleUpdated: 'Tittel oppdatert',
+      tagsUpdated: 'Tags oppdatert',
+      show: 'Vis',
     },
   },
   snackbar: {

package/src/locale/messages-se.ts

@@ -994,6 +994,7 @@ const messages = {
       delete: 'Slett',
       edit: 'Rediger',
       missingName: 'Mappenavn er påkrevd',
+      folderDeleted: '"{{folderName}}" er sletta',
     },
     tags: '{{count}} tag',
     tags_plural: '{{count}} tags',
@@ -1054,8 +1055,14 @@ const messages = {
       removeTitle: 'Fjern ressurs',
       confirmRemove: 'Er du sikker på at du ønsker å fjerne ressursen frå denne mappen?',
       copyLink: 'Kopier lenke til siden',
+      linkCopied: 'Kopiert til utklippstavla',
       addToMyNdla: 'Legg i Min NDLA',
       addedToMyNdla: 'Lagt i Min NDLA',
+      addedToFolder: 'Ressurs er lagt i "{{folderName}}"',
+      removedFromFolder: 'Fjernet fra "{{folderName}}"',
+      titleUpdated: 'Tittel oppdatert',
+      tagsUpdated: 'Tags oppdatert',
+      show: 'Vis',
     },
   },
   snackbar: {

package/src/locale/messages-sma.ts

@@ -994,6 +994,7 @@ const messages = {
       delete: 'Slett',
       edit: 'Rediger',
       missingName: 'Mappenavn er påkrevd',
+      folderDeleted: '"{{folderName}}" er sletta',
     },
     tags: '{{count}} tag',
     tags_plural: '{{count}} tags',
@@ -1054,8 +1055,14 @@ const messages = {
       removeTitle: 'Fjern ressurs',
       confirmRemove: 'Er du sikker på at du ønsker å fjerne ressursen frå denne mappen?',
       copyLink: 'Kopier lenke til siden',
+      linkCopied: 'Kopiert til utklippstavla',
       addToMyNdla: 'Legg i Min NDLA',
       addedToMyNdla: 'Lagt i Min NDLA',
+      addedToFolder: 'Ressurs er lagt i "{{folderName}}"',
+      removedFromFolder: 'Fjernet fra "{{folderName}}"',
+      titleUpdated: 'Tittel oppdatert',
+      tagsUpdated: 'Tags oppdatert',
+      show: 'Vis',
     },
   },
   snackbar: {