@ndla/ui 15.1.3 → 16.0.0

package/src/Filter/FilterButtons.tsx

@@ -24,15 +24,14 @@ const StyledHeading = styled.h3`
 `;
 
 const StyledButtonsWrapper = styled.div`
-  display: flex;
-  flex-wrap: nowrap;
-  position: relative;
+  display: inline-flex;
+  flex-wrap: wrap;
 `;
 
 const StyledButtonElementWrapper = styled.div`
   margin: 0 ${spacing.xsmall} ${spacing.xsmall} 0;
   break-inside: avoid;
-  flex: 1 0 auto;
+  flex-shrink: 0;
 `;
 
 const StyledList = styled.ul`

package/src/Filter/FilterCarousel.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactChild, useLayoutEffect, useRef, useState } from 'react';
+import React, { ReactChild, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
@@ -31,7 +31,6 @@ const Inner = styled.div`
 `;
 
 const NavButton = styled('button')<{
-  hide?: boolean;
   alignRight?: boolean;
 }>`
   box-sizing: border-box;
@@ -58,25 +57,12 @@ const NavButton = styled('button')<{
     cursor: pointer;
   }
 
-  ${(props) =>
-    props.hide &&
-    `
-        opacity: 0;
-        transform: translate(-40px, 0px);
-    `}
-
   ${(props) =>
     props.alignRight &&
     `
         right: 2px;
         left: unset;
-    `}
 
-    ${(props) =>
-    props.alignRight &&
-    props.hide &&
-    `
-        transform: translate(40px, 0px);
     `}
 `;
 
@@ -94,7 +80,7 @@ const FilterCarousel = ({ children }: Props) => {
   const innerRef: { current: HTMLDivElement | null } = useRef(null);
 
   // Check if we need to show the nav buttons
-  useLayoutEffect(() => {
+  const showButtons = () => {
     if (carouselRef.current && innerRef.current) {
       const carouselWidth = carouselRef.current.offsetWidth || 0;
       const innerWidth = innerRef.current.scrollWidth;
@@ -106,8 +92,21 @@ const FilterCarousel = ({ children }: Props) => {
     } else {
       setHideNext(true);
     }
+  };
+
+  useLayoutEffect(() => {
+    showButtons();
   }, [children]);
 
+  useEffect(() => {
+    const resetTranslateX = () => {
+      setTranslateX(0);
+      showButtons();
+    };
+    window.addEventListener('resize', resetTranslateX);
+    return () => window.removeEventListener('resize', resetTranslateX);
+  }, []);
+
   const updateIndex = (direction: string) => {
     const carousel = carouselRef.current;
     const inner = innerRef.current;
@@ -153,12 +152,16 @@ const FilterCarousel = ({ children }: Props) => {
           {children}
         </Inner>
       </Carousel>
-      <NavButton title={t('carousel.back')} onClick={() => updateIndex('PREV')} hide={translateX < 1}>
-        <ChevronLeft style={{ width: '18px', height: '18px' }} aria-hidden title="" />
-      </NavButton>
-      <NavButton title={t('carousel.forward')} onClick={() => updateIndex('NEXT')} alignRight hide={hideNext}>
-        <ChevronRight style={{ width: '18px', height: '18px' }} aria-hidden title="" />
-      </NavButton>
+      {!hideNext && (
+        <NavButton title={t('carousel.forward')} onClick={() => updateIndex('NEXT')} alignRight>
+          <ChevronRight style={{ width: '18px', height: '18px' }} aria-hidden title="" />
+        </NavButton>
+      )}
+      {translateX >= 1 && (
+        <NavButton title={t('carousel.back')} onClick={() => updateIndex('PREV')}>
+          <ChevronLeft style={{ width: '18px', height: '18px' }} aria-hidden title="" />
+        </NavButton>
+      )}
     </div>
   );
 };

package/src/MyNdla/Resource/Folder.tsx

@@ -10,7 +10,7 @@ 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 { fonts, spacing, colors, mq, breakpoints } from '@ndla/core';
 import { css } from '@emotion/core';
 import { useTranslation } from 'react-i18next';
 import SafeLink from '@ndla/safelink';
@@ -110,6 +110,10 @@ const IconCountWrapper = styled.div<IconCountWrapperProps>`
         opacity: 1;
       }
     `};
+
+  ${mq.range({ until: breakpoints.tabletWide })} {
+    display: none;
+  }
 `;
 
 const IconCount = ({ type, count, layoutType }: IconCountProps) => {

package/src/Resource/BlockResource.tsx

@@ -11,7 +11,7 @@ import React, { ReactNode } from 'react';
 import SafeLink from '@ndla/safelink';
 import { colors, fonts, spacing } from '@ndla/core';
 import Image from '../Image';
-import { CompressTagsLength, ResourceImageProps, ResourceTitle, Row, TopicList } from './resourceComponents';
+import { CompressedTags, ResourceImageProps, ResourceTitle, Row, TopicList } from './resourceComponents';
 
 interface BlockResourceProps {
   link: string;
@@ -90,7 +90,7 @@ const BlockResource = ({ link, title, tags, resourceImage, topics, description,
         <TopicList topics={topics} />
         <BlockDescription>{description}</BlockDescription>
         <RightRow>
-          {tags && CompressTagsLength(tags)}
+          {tags && CompressedTags(tags)}
           {actionMenu}
         </RightRow>
       </BlockInfoWrapper>

package/src/Resource/ListResource.tsx

@@ -9,11 +9,12 @@
 import styled from '@emotion/styled';
 import React, { ReactNode } from 'react';
 import SafeLink from '@ndla/safelink';
-import { fonts, spacing, colors } from '@ndla/core';
+import { fonts, spacing, colors, breakpoints, mq } from '@ndla/core';
 import Image from '../Image';
-import { CompressTagsLength, ResourceImageProps, ResourceTitle, Row, TopicList } from './resourceComponents';
+import { CompressedTags, ResourceImageProps, ResourceTitle, TopicList } from './resourceComponents';
 
 const ResourceDescription = styled.p`
+  grid-area: description;
   line-clamp: 2;
   line-height: 1em;
   height: 3.1em;
@@ -30,14 +31,26 @@ const ResourceDescription = styled.p`
 
 const ResourceWrapper = styled(SafeLink)`
   display: grid;
-  grid-template-columns: auto 1fr;
+  flex: 1;
+  grid-template-areas:
+    'image  topicAndTitle   tags'
+    'image  description     description';
+  grid-template-columns: auto 1fr auto;
+  ${mq.range({ until: breakpoints.mobileWide })} {
+    grid-template-columns: auto 1fr;
+    grid-template-areas:
+      'image                topicAndTitle'
+      'description          description'
+      'tags                 tags';
+  }
+
   text-decoration: none;
   box-shadow: none;
   padding: ${spacing.small};
   border: 1px solid ${colors.brand.light};
   border-radius: 2px;
   color: ${colors.brand.greyDark};
-  gap: ${spacing.small};
+  gap: 0 ${spacing.small};
   &:hover {
     box-shadow: 1px 1px 6px 2px rgba(9, 55, 101, 0.08);
     transition-duration: 0.2s;
@@ -52,27 +65,43 @@ const ResourceWrapper = styled(SafeLink)`
   }
 `;
 
-const ResourceInfoWrapper = styled.div`
-  flex: 1;
+const TagsandActionMenu = styled.div`
+  grid-area: tags;
   display: flex;
-  flex-direction: column;
-  max-width: 100%;
+  align-items: center;
+  width: 100%;
   overflow: hidden;
+  gap: ${spacing.small};
+  align-self: flex-start;
+  justify-self: flex-end;
+  justify-content: flex-end;
 `;
 
-interface StyledImageProps {
-  imageSize: 'normal' | 'compact';
-}
+const StyledImageWrapper = styled.div<StyledImageProps>`
+  grid-area: image;
+  width: ${(p) => (p.imageSize === 'normal' ? '136px' : '56px')};
+  height: ${(p) => (p.imageSize === 'normal' ? '96px' : '40px')};
+  ${mq.range({ until: breakpoints.mobileWide })} {
+    width: 54px;
+    height: 40px;
+  }
+`;
 
-const StyledImage = styled(Image)<StyledImageProps>`
+const StyledImage = styled(Image)`
   display: flex;
   border-radius: 2px;
   object-fit: cover;
-  width: ${(p) => (p.imageSize === 'normal' ? '136px' : '56px')};
-  min-width: ${(p) => (p.imageSize === 'normal' ? '136px' : '56px')};
-  height: ${(p) => (p.imageSize === 'normal' ? '96px' : '40px')};
 `;
 
+const TopicAndTitle = styled.div`
+  grid-area: topicAndTitle;
+  margin-top: ${spacing.xxsmall};
+`;
+
+interface StyledImageProps {
+  imageSize: 'normal' | 'compact';
+}
+
 export interface ListResourceProps {
   link: string;
   title: string;
@@ -88,22 +117,18 @@ const ListResource = ({ link, title, tags, resourceImage, topics, description, a
 
   return (
     <ResourceWrapper to={link}>
-      <StyledImage alt={resourceImage.alt} src={resourceImage.src} imageSize={showDescription ? 'normal' : 'compact'} />
-      <ResourceInfoWrapper>
-        <Row>
-          <ResourceTitle>{title}</ResourceTitle>
-          {tags && CompressTagsLength(tags)}
-          {actionMenu}
-        </Row>
-        <Row>
-          <TopicList topics={topics} />
-        </Row>
-        {showDescription && (
-          <Row>
-            <ResourceDescription>{description}</ResourceDescription>
-          </Row>
-        )}
-      </ResourceInfoWrapper>
+      <StyledImageWrapper imageSize={showDescription ? 'normal' : 'compact'}>
+        <StyledImage alt={resourceImage.alt} src={resourceImage.src} />
+      </StyledImageWrapper>
+      <TopicAndTitle>
+        <ResourceTitle>{title}</ResourceTitle>
+        <TopicList topics={topics} />
+      </TopicAndTitle>
+      {showDescription && <ResourceDescription>{description}</ResourceDescription>}
+      <TagsandActionMenu>
+        {tags && CompressedTags(tags)}
+        {actionMenu}
+      </TagsandActionMenu>
     </ResourceWrapper>
   );
 };

package/src/Resource/resourceComponents.tsx

@@ -31,6 +31,7 @@ export const ResourceTitle = styled.h2`
   -webkit-line-clamp: 1;
   line-clamp: 1;
   -webkit-box-orient: vertical;
+  grid-area: resourceTitle;
 `;
 
 const StyledTagList = styled.ul`
@@ -57,6 +58,7 @@ const StyledTopicList = styled.ul`
   margin: 0;
   padding: 0;
   overflow: hidden;
+  grid-area: topicList;
 `;
 
 const StyledTopicListElement = styled.li`
@@ -100,9 +102,8 @@ export const TagList = ({ tags }: TagListProps) => {
   );
 };
 
-export const CompressTagsLength = (tags: string[]) => {
-  const tagCounter = tags?.length - 3;
-  const slicedTags = tags.slice(0, 3);
+export const CompressedTags = (tags: string[]) => {
+  const visibleTags = tags.slice(0, 3);
   const remainingTags = tags.slice(3, tags.length).map((tag) => {
     return {
       text: '#' + tag,
@@ -112,10 +113,10 @@ export const CompressTagsLength = (tags: string[]) => {
 
   return (
     <>
-      <TagList tags={slicedTags} />
+      <TagList tags={visibleTags} />
       {remainingTags.length > 0 && (
         <MenuButton hideMenuIcon={true} menuItems={remainingTags}>
-          <TagCounterWrapper>+{tagCounter}</TagCounterWrapper>
+          <TagCounterWrapper>{`+${remainingTags.length}`}</TagCounterWrapper>
         </MenuButton>
       )}
     </>
@@ -132,10 +133,8 @@ export const TopicList = ({ topics }: TopicListProps) => {
     <StyledTopicList>
       {topics.map((topic, i) => (
         <StyledTopicListElement key={topic}>
-          <>
-            {topic}
-            {i !== topics.length - 1 && <StyledTopicDivider>•</StyledTopicDivider>}
-          </>
+          {topic}
+          {i !== topics.length - 1 && <StyledTopicDivider>•</StyledTopicDivider>}
         </StyledTopicListElement>
       ))}
     </StyledTopicList>

package/src/ResourceGroup/ResourceGroup.tsx

@@ -37,6 +37,7 @@ type Props = {
   invertedStyle?: boolean;
   toggleAdditionalResources: () => void;
   onToggleAddToFavorites: (id: string | number, add: string) => void;
+  showAddToFavoriteButton: boolean;
 };
 
 const ResourceGroup = ({
@@ -47,6 +48,7 @@ const ResourceGroup = ({
   contentType,
   invertedStyle,
   onToggleAddToFavorites,
+  showAddToFavoriteButton = false,
 }: Props & ResourceListProps) => (
   <Wrapper>
     {title && (
@@ -62,6 +64,7 @@ const ResourceGroup = ({
         contentType={contentType}
         resources={resources}
         onToggleAddToFavorites={onToggleAddToFavorites}
+        showAddToFavoriteButton={showAddToFavoriteButton}
       />
     ) : null}
   </Wrapper>

package/src/ResourceGroup/ResourceItem.tsx

@@ -230,7 +230,7 @@ type Props = {
   access?: 'teacher';
   isFavorite?: boolean;
   onToggleAddToFavorites: (id: string, add: boolean) => void;
-  hideAddToFavoriteButton?: boolean;
+  showAddToFavoriteButton: boolean;
 };
 
 const ResourceItem = ({
@@ -247,7 +247,7 @@ const ResourceItem = ({
   access,
   onToggleAddToFavorites,
   isFavorite,
-  hideAddToFavoriteButton,
+  showAddToFavoriteButton,
 }: Props & Resource) => {
   const { t } = useTranslation();
   const hidden = additional ? !showAdditionalResources : false;
@@ -301,7 +301,7 @@ const ResourceItem = ({
             )}
           </>
         )}
-        {!hideAddToFavoriteButton && (
+        {showAddToFavoriteButton && (
           <ArticleFavoritesButton
             isFavorite={isFavorite}
             articleId={id}

package/src/ResourceGroup/ResourceList.tsx

@@ -49,7 +49,7 @@ export type ResourceListProps = {
   title?: string;
   showAdditionalResources?: boolean;
   onToggleAddToFavorites: (id: string, add: boolean) => void;
-  hideAddToFavoriteButton?: boolean;
+  showAddToFavoriteButton: boolean;
 };
 
 const ResourceList = ({
@@ -59,7 +59,7 @@ const ResourceList = ({
   contentType,
   title,
   showAdditionalResources,
-  hideAddToFavoriteButton,
+  showAddToFavoriteButton,
 }: ResourceListProps) => {
   const { t } = useTranslation();
   const renderAdditionalResourceTrigger =
@@ -76,7 +76,7 @@ const ResourceList = ({
             key={id}
             contentType={contentType}
             showAdditionalResources={showAdditionalResources}
-            hideAddToFavoriteButton={hideAddToFavoriteButton}
+            showAddToFavoriteButton={showAddToFavoriteButton}
             onToggleAddToFavorites={onToggleAddToFavorites}
             {...resource}
             contentTypeDescription={

package/src/locale/messages-en.ts

@@ -1007,10 +1007,6 @@ const messages = {
       terms: 'terms of use',
       feide: 'We have retrieved this information from Feide',
       newFavourite: 'Recently favourited',
-      resource: {
-        addToMyNdla: 'Add to My NDLA',
-        addedToMyNdla: 'Added to My NDLA',
-      },
       storageInfo: {
         title: 'How to save your favourite resources from NDLA',
         text: 'When you wish to save a resource, you can do so by clicking the heart on the top right corner of the page. You will then get an option to store the resource in a folder',
@@ -1024,6 +1020,10 @@ const messages = {
         text: 'When you save a resource, you will have the option to tag it with a keyword. This tag can be used to find the resource across folders. By selecting my tags on the menu to the left, you will see all the tags your have used. You can also see which resources are tagget with which keyword.',
       },
     },
+    resource: {
+      addToMyNdla: 'Add to My NDLA',
+      addedToMyNdla: 'Added to My NDLA',
+    },
   },
   snackbar: {
     close: 'Close notification',

package/src/locale/messages-nb.ts

@@ -1005,10 +1005,6 @@ const messages = {
       terms: 'vilkår for bruk',
       newFavourite: 'Nylig lagt til',
       feide: 'Dette henter vi om deg fra Feide',
-      resource: {
-        addToMyNdla: 'Legg i Min NDLA',
-        addedToMyNdla: 'Lagt i Min NDLA',
-      },
       storageInfo: {
         title: 'Slik lagrer du dine favorittressurser fra NDLA',
         text: 'Når du ønsker å lagre en ressurs, kan du gjøre dette ved å klikke på hjertet øverst til høyre på siden. Du vil da få mulighet til å lagre ressursen i en mappe.',
@@ -1022,6 +1018,10 @@ const messages = {
         text: 'Når du lagrer en ressurs får du mulighet til å tagge ressursen med et nøkkelord. Du kan senere bruke taggene til å finne tilbake til ressurser på tvers av mapper.  Ved å velge mine tagger i venstremenyen får du oversikt over alle taggene du har brukt og du kan også her se hvilke ressurser som du har tagget med det bestemte nøkkelordet.',
       },
     },
+    resource: {
+      addToMyNdla: 'Legg i Min NDLA',
+      addedToMyNdla: 'Lagt i Min NDLA',
+    },
   },
   snackbar: {
     close: 'Lukk melding',

package/src/locale/messages-nn.ts

@@ -1006,10 +1006,6 @@ const messages = {
       terms: 'vilkår for bruk',
       newFavourite: 'Nylig lagt til',
       feide: 'Dette henter vi om deg fra Feide',
-      resource: {
-        addToMyNdla: 'Legg i Min NDLA',
-        addedToMyNdla: 'Lagt i Min NDLA',
-      },
       storageInfo: {
         title: 'Slik lagrer du dine favorittressurser fra NDLA',
         text: 'Når du ønsker å lagre en ressurs, kan du gjøre dette ved å klikke på hjertet øverst til høyre på siden. Du vil da få mulighet til å lagre ressursen i en mappe.',
@@ -1023,6 +1019,10 @@ const messages = {
         text: 'Når du lagrer en ressurs får du mulighet til å tagge ressursen med et nøkkelord. Du kan senere bruke taggene til å finne tilbake til ressurser på tvers av mapper.  Ved å velge mine tagger i venstremenyen får du oversikt over alle taggene du har brukt og du kan også her se hvilke ressurser som du har tagget med det bestemte nøkkelordet.',
       },
     },
+    resource: {
+      addToMyNdla: 'Legg i Min NDLA',
+      addedToMyNdla: 'Lagt i Min NDLA',
+    },
   },
   snackbar: {
     close: 'Lukk melding',

package/src/locale/messages-se.ts

@@ -1005,10 +1005,6 @@ const messages = {
       terms: 'vilkår for bruk',
       newFavourite: 'Nylig lagt til',
       feide: 'Dette henter vi om deg fra Feide',
-      resource: {
-        addToMyNdla: 'Legg i Min NDLA',
-        addedToMyNdla: 'Lagt i Min NDLA',
-      },
       storageInfo: {
         title: 'Slik lagrer du dine favorittressurser fra NDLA',
         text: 'Når du ønsker å lagre en ressurs, kan du gjøre dette ved å klikke på hjertet øverst til høyre på siden. Du vil da få mulighet til å lagre ressursen i en mappe.',
@@ -1022,6 +1018,10 @@ const messages = {
         text: 'Når du lagrer en ressurs får du mulighet til å tagge ressursen med et nøkkelord. Du kan senere bruke taggene til å finne tilbake til ressurser på tvers av mapper.  Ved å velge mine tagger i venstremenyen får du oversikt over alle taggene du har brukt og du kan også her se hvilke ressurser som du har tagget med det bestemte nøkkelordet.',
       },
     },
+    resource: {
+      addToMyNdla: 'Legg i Min NDLA',
+      addedToMyNdla: 'Lagt i Min NDLA',
+    },
   },
   snackbar: {
     close: 'Lukk melding',

package/src/locale/messages-sma.ts

@@ -1005,10 +1005,6 @@ const messages = {
       terms: 'vilkår for bruk',
       newFavourite: 'Nylig lagt til',
       feide: 'Dette henter vi om deg fra Feide',
-      resource: {
-        addToMyNdla: 'Legg i Min NDLA',
-        addedToMyNdla: 'Lagt i Min NDLA',
-      },
       storageInfo: {
         title: 'Slik lagrer du dine favorittressurser fra NDLA',
         text: 'Når du ønsker å lagre en ressurs, kan du gjøre dette ved å klikke på hjertet øverst til høyre på siden. Du vil da få mulighet til å lagre ressursen i en mappe.',
@@ -1022,6 +1018,10 @@ const messages = {
         text: 'Når du lagrer en ressurs får du mulighet til å tagge ressursen med et nøkkelord. Du kan senere bruke taggene til å finne tilbake til ressurser på tvers av mapper.  Ved å velge mine tagger i venstremenyen får du oversikt over alle taggene du har brukt og du kan også her se hvilke ressurser som du har tagget med det bestemte nøkkelordet.',
       },
     },
+    resource: {
+      addToMyNdla: 'Legg i Min NDLA',
+      addedToMyNdla: 'Lagt i Min NDLA',
+    },
   },
   snackbar: {
     close: 'Lukk melding',