@ndla/ui 50.4.1 → 50.5.0

package/lib/locale/messages-en.d.ts

@@ -973,8 +973,10 @@ declare const messages: {
             };
             publish: string;
             topic: {
+                isDeleted: string;
                 responses: string;
                 topicContent: string;
+                fetchMore: string;
             };
             posts: {
                 notify: string;
@@ -983,6 +985,7 @@ declare const messages: {
                     edit: string;
                     delete: string;
                 };
+                fetchMore: string;
             };
             flag: {
                 title: string;

package/lib/locale/messages-en.js

@@ -992,8 +992,10 @@ const messages = {
       },
       publish: 'Publish',
       topic: {
+        isDeleted: 'The topic has been deleted and can not be displayed.',
         responses: 'Responses',
-        topicContent: 'Write your topic here'
+        topicContent: 'Write your topic here',
+        fetchMore: 'Fetch more topics'
       },
       posts: {
         notify: 'Get notified of new answers',
@@ -1001,7 +1003,8 @@ const messages = {
           report: 'Report post to moderator',
           edit: 'Edit post',
           delete: 'Delete post'
-        }
+        },
+        fetchMore: 'Fetch more answers'
       },
       flag: {
         title: 'Report post / comment',
@@ -1031,7 +1034,7 @@ const messages = {
     iconMenu: {
       folders: 'Folders',
       tags: 'Tags',
-      subjects: 'Favourite subjects',
+      subjects: 'Subjects',
       profile: 'Profile',
       more: 'More'
     },

package/lib/locale/messages-nb.d.ts

@@ -973,8 +973,10 @@ declare const messages: {
                 topic: string;
             };
             topic: {
+                isDeleted: string;
                 responses: string;
                 topicContent: string;
+                fetchMore: string;
             };
             posts: {
                 notify: string;
@@ -983,6 +985,7 @@ declare const messages: {
                     edit: string;
                     delete: string;
                 };
+                fetchMore: string;
             };
             flag: {
                 title: string;

package/lib/locale/messages-nb.js

@@ -992,8 +992,10 @@ const messages = {
         topic: 'Innlegget har blitt oppdatert.'
       },
       topic: {
+        isDeleted: 'Innlegget har blitt slettet og kan ikke vises.',
         responses: 'Svar',
-        topicContent: 'Skriv innlegget ditt her'
+        topicContent: 'Skriv innlegget ditt her',
+        fetchMore: 'Hent flere innlegg'
       },
       posts: {
         notify: 'Få varsel om nye svar',
@@ -1001,7 +1003,8 @@ const messages = {
           report: 'Rapporter innlegg til moderator',
           edit: 'Rediger innlegg',
           delete: 'Slett innlegget'
-        }
+        },
+        fetchMore: 'Hent flere svar'
       },
       flag: {
         title: 'Rapporter innlegg / kommentar',

package/lib/locale/messages-nn.d.ts

@@ -965,8 +965,10 @@ declare const messages: {
                 topic: string;
             };
             topic: {
+                isDeleted: string;
                 responses: string;
                 topicContent: string;
+                fetchMore: string;
             };
             deleted: {
                 post: string;
@@ -983,6 +985,7 @@ declare const messages: {
                     edit: string;
                     delete: string;
                 };
+                fetchMore: string;
             };
             flag: {
                 title: string;

package/lib/locale/messages-nn.js

@@ -984,8 +984,10 @@ const messages = {
         topic: 'Slett innlegg'
       },
       topic: {
+        isDeleted: 'Innlegget har vorte sletta og kan ikkje visast.',
         responses: 'Svar',
-        topicContent: 'Skriv innlegget ditt her'
+        topicContent: 'Skriv innlegget ditt her',
+        fetchMore: 'Hent fleire innlegg'
       },
       deleted: {
         post: 'Kommentaren din har blitt sletta.',
@@ -1001,7 +1003,8 @@ const messages = {
           report: 'Rapporter innlegg til moderator',
           edit: 'Rediger innlegg',
           delete: 'Slett innlegget'
-        }
+        },
+        fetchMore: 'Hent fleire svar'
       },
       flag: {
         title: 'Rapporter innlegg / kommentar',

package/lib/locale/messages-se.d.ts

@@ -973,8 +973,10 @@ declare const messages: {
                 topic: string;
             };
             topic: {
+                isDeleted: string;
                 responses: string;
                 topicContent: string;
+                fetchMore: string;
             };
             posts: {
                 notify: string;
@@ -983,6 +985,7 @@ declare const messages: {
                     edit: string;
                     delete: string;
                 };
+                fetchMore: string;
             };
             flag: {
                 title: string;

package/lib/locale/messages-se.js

@@ -992,8 +992,10 @@ const messages = {
         topic: 'Sáhkavuorru lea ođasmahttojuvvon.'
       },
       topic: {
+        isDeleted: 'Čálus lea sihkojuvvon iige sáhte čájehuvvot.',
         responses: 'Vástidan',
-        topicContent: 'Čále sáhkavuoru dása'
+        topicContent: 'Čále sáhkavuoru dása',
+        fetchMore: 'Viečča eanet čállosiid'
       },
       posts: {
         notify: 'Oaččo dieđu ođđa vástádusaid birra',
@@ -1001,7 +1003,8 @@ const messages = {
           report: 'Raportere čállosa moderatorii',
           edit: 'Doaimmat čállosa',
           delete: 'Sihko čállosa'
-        }
+        },
+        fetchMore: 'Viečča eanet vástádusaid'
       },
       flag: {
         title: 'Rapportere čállosa / kommentára',

package/lib/locale/messages-sma.d.ts

@@ -973,8 +973,10 @@ declare const messages: {
                 topic: string;
             };
             topic: {
+                isDeleted: string;
                 responses: string;
                 topicContent: string;
+                fetchMore: string;
             };
             posts: {
                 notify: string;
@@ -983,6 +985,7 @@ declare const messages: {
                     edit: string;
                     delete: string;
                 };
+                fetchMore: string;
             };
             flag: {
                 title: string;

package/lib/locale/messages-sma.js

@@ -992,8 +992,10 @@ const messages = {
         topic: 'Håaleme lea orrestahteme.'
       },
       topic: {
+        isDeleted: 'Tjaalege lea sliejhteme jïh ij maehtieh dam vuesiehtidh.',
         responses: 'Vaestiedasse',
-        topicContent: 'Tjaelieh dov håalemem daesnie'
+        topicContent: 'Tjaelieh dov håalemem daesnie',
+        fetchMore: 'Veedtjh jienebh saadtegh'
       },
       posts: {
         notify: 'Bïeljelh mejtie orre vaestiedassh',
@@ -1001,7 +1003,8 @@ const messages = {
           report: 'Reekth håalemem moderatovrese',
           edit: 'Jarkelimmie håalemistie',
           delete: 'Slett innlegget'
-        }
+        },
+        fetchMore: 'Jienebh vaestiedassh veedtjedh'
       },
       flag: {
         title: 'Påastem reektehtidh / kommentaarem',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "50.4.1",
+  "version": "50.5.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,23 +31,23 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^3.0.12",
-    "@ndla/button": "^12.0.17",
-    "@ndla/carousel": "^4.0.18",
-    "@ndla/core": "^4.2.9",
-    "@ndla/dropdown-menu": "^1.0.19",
-    "@ndla/forms": "^5.2.7",
+    "@ndla/accordion": "^3.0.13",
+    "@ndla/button": "^12.0.18",
+    "@ndla/carousel": "^4.0.19",
+    "@ndla/core": "^4.3.0",
+    "@ndla/dropdown-menu": "^1.0.20",
+    "@ndla/forms": "^5.2.8",
     "@ndla/hooks": "^2.1.4",
-    "@ndla/icons": "^4.2.4",
+    "@ndla/icons": "^4.2.5",
     "@ndla/licenses": "^7.2.4",
-    "@ndla/modal": "^5.0.17",
-    "@ndla/notion": "^6.0.18",
-    "@ndla/safelink": "^4.1.42",
-    "@ndla/select": "^3.2.4",
-    "@ndla/switch": "^1.1.25",
-    "@ndla/tabs": "^3.2.5",
-    "@ndla/tooltip": "^6.0.7",
-    "@ndla/typography": "^0.4.2",
+    "@ndla/modal": "^5.0.18",
+    "@ndla/notion": "^6.0.19",
+    "@ndla/safelink": "^4.1.43",
+    "@ndla/select": "^3.2.5",
+    "@ndla/switch": "^1.1.26",
+    "@ndla/tabs": "^3.2.6",
+    "@ndla/tooltip": "^6.0.8",
+    "@ndla/typography": "^0.4.3",
     "@ndla/util": "^4.0.3",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-slider": "^1.1.2",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e482b4679b927b5dea2d9f149a4a2fc51a907992"
+  "gitHead": "33f14792431d5c46241455f1f5e05ac9a81ab7d6"
 }

package/src/Footer/Footer.tsx

@@ -26,17 +26,15 @@ const StyledBackground = styled.div`
   background: linear-gradient(96deg, rgba(0, 117, 160, 1) 0%, rgba(32, 88, 143, 0) 100%);
 `;
 
-type StyledFooterProps = {
-  addMargin?: boolean;
-};
-
-const StyledDiv = styled.div<StyledFooterProps>`
+const StyledDiv = styled.div`
   color: #fff;
   position: relative;
   background: ${colors.brand.dark};
   overflow: hidden;
   z-index: 0;
-  ${(props) => props.addMargin && `margin-top: ${spacingUnit * 4}px;`}
+  &[data-margin='true'] {
+    margin-top: ${spacing.xxlarge};
+  }
 `;
 
 const StyledOneColumn = styled(OneColumn)`
@@ -61,8 +59,8 @@ const StyledFooterHeaderIcon = styled(FooterHeaderIcon)`
   width: ${spacing.large};
   height: ${spacing.large};
   ${mq.range({ from: breakpoints.tabletWide })} {
-    width: ${spacingUnit * 3}px;
-    height: ${spacingUnit * 3}px;
+    width: ${spacing.xlarge};
+    height: ${spacing.xlarge};
   }
 `;
 
@@ -163,7 +161,7 @@ const Footer = ({ children, commonLinks, links, languageSelector, auth, privacyL
   return (
     <>
       <footer>
-        <StyledDiv addMargin={!languageSelector}>
+        <StyledDiv data-margin={!languageSelector}>
           {languageSelector && <StyledLanguageWrapper>{languageSelector}</StyledLanguageWrapper>}
           <StyledOneColumn cssModifier="large">{footerContent}</StyledOneColumn>
           <StyledBackground />

package/src/Footer/FooterLinks.tsx

@@ -22,7 +22,7 @@ const StyledLinksWrapper = styled.div`
   }
   ${mq.range({ from: breakpoints.desktop })} {
     div:first-of-type {
-      margin-right: ${spacingUnit * 4}px;
+      margin-right: ${spacing.xxlarge};
     }
   }
   ${mq.range({ until: breakpoints.tabletWide })} {

package/src/FrontpageArticle/FrontpageArticle.tsx

@@ -43,16 +43,16 @@ const StyledArticle = styled.article`
   }
 
   div[data-type='grid'] + div[data-type='grid'] {
-    margin-top: ${spacingUnit * 4}px;
+    margin-top: ${spacing.xxlarge};
   }
 
   &[data-wide='true'] {
     max-width: 1100px;
     h2[id] {
-      margin-top: ${spacingUnit * 4}px;
+      margin-top: ${spacing.xxlarge};
     }
     div[data-type='campaign-block'] {
-      margin: ${spacingUnit * 4}px 0px;
+      margin: ${spacing.xxlarge} 0px;
     }
   }
 `;

package/src/LearningPaths/LearningPathInformation.tsx

@@ -22,7 +22,7 @@ const StyledWrapper = styled.div<StyledWrapperProps>`
   margin: ${spacingUnit * 0.75}px ${spacing.normal} ${spacing.xsmall} 0 !important;
   ${mq.range({ from: breakpoints.desktop })} {
     margin: ${spacingUnit * 0.75}px ${spacing.normal} ${spacing.xsmall} 0 !important;
-    padding: ${spacing.normal} ${spacing.large} ${spacing.large} ${spacingUnit * 4}px;
+    padding: ${spacing.normal} ${spacing.large} ${spacing.large} ${spacing.xxlarge};
     ul {
       margin-left: ${spacing.normal};
     }

package/src/LearningPaths/LearningPathLastStepNavigation.tsx

@@ -10,7 +10,7 @@ import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import { fonts, spacing, spacingUnit } from '@ndla/core';
+import { fonts, spacing } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
 import { OneColumn, LayoutItem } from '../index';
 
@@ -38,7 +38,7 @@ const StyledLinkWrapper = styled.div`
 
 const OneColumnCss = css`
   background: #fff;
-  padding-top: ${spacingUnit * 3}px;
+  padding-top: ${spacing.xlarge};
   margin-top: -${spacing.normal};
 `;
 

package/src/LearningPaths/LearningPathMenuAside.tsx

@@ -47,7 +47,7 @@ type StyledAsideProps = {
 
 const StyledAside = styled.aside<StyledAsideProps>`
   display: none;
-  padding-left: ${spacingUnit * 2.25}px;
+  padding-left: ${spacing.xlarge};
   ${mq.range({ from: breakpoints.desktop })} {
     display: block;
   }

package/src/LearningPaths/LearningPathMenuContent.tsx

@@ -99,7 +99,7 @@ const StyledMenuItem = styled.li<StyledMenuItemProps>`
     width: 2px;
     background: ${colors.brand.greyLight};
     position: absolute;
-    transform: translate(29px, -${spacingUnit * 3}px);
+    transform: translate(29px, -${spacing.xlarge});
   }
   ${(props) =>
     !props.afterCurrent &&
@@ -115,7 +115,7 @@ const StyledMenuItem = styled.li<StyledMenuItemProps>`
     &:after {
       width: 4px;
       background: ${colors.text.light};
-      transform: translate(28px, -${spacingUnit * 3}px);
+      transform: translate(28px, -${spacing.xlarge});
     }
   `}
   ${(props) =>

package/src/Logo/component.logo.scss

@@ -1,4 +1,7 @@
 .c-logo {
+  a {
+    box-shadow: none;
+  }
   width: 120px;
   margin: 0;
   position: relative;

package/src/MediaList/MediaList.tsx

@@ -6,10 +6,9 @@
  *
  */
 
-import { ReactNode } from 'react';
-import BEMHelper from 'react-bem-helper';
+import { ComponentProps, ReactNode } from 'react';
 import styled from '@emotion/styled';
-import { breakpoints, colors, mq, spacing } from '@ndla/core';
+import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import { Launch } from '@ndla/icons/common';
 import {
   getLicenseByAbbreviation,
@@ -19,29 +18,40 @@ import {
 } from '@ndla/licenses';
 import type { MetaType } from '@ndla/licenses';
 import { LicenseDescription } from '@ndla/notion';
+import SafeLink from '@ndla/safelink';
+import { Heading, Text } from '@ndla/typography';
 import { uuid } from '@ndla/util';
 
-const oClasses = new BEMHelper({
-  name: 'media',
-  prefix: 'o-',
-});
+const StyledMediaList = styled.ul`
+  padding-left: 0;
+  display: flex;
+  flex-direction: column;
+  margin: ${spacing.normal} 0;
+`;
 
-const cClasses = new BEMHelper({
-  name: 'medialist',
-  prefix: 'c-',
-});
+export const MediaList = ({ children, ...rest }: ComponentProps<'ul'>) => (
+  <StyledMediaList {...rest}>{children}</StyledMediaList>
+);
 
-interface MediaListProps {
-  children: ReactNode;
-}
+const StyledMediaListItem = styled.li`
+  margin-bottom: ${spacing.small};
+  padding: ${spacing.small} 0;
+  border-bottom: 1px solid ${colors.brand.tertiary};
+  ${mq.range({ from: breakpoints.tablet })} {
+    display: flex;
+    flex-direction: row;
+  }
 
-export const MediaList = ({ children }: MediaListProps) => <ul {...cClasses()}>{children}</ul>;
+  &:last-of-type {
+    border-bottom: none;
+  }
+  img {
+    width: 100%;
+  }
+`;
 
-interface MediaListItemProps {
-  children: ReactNode;
-}
-export const MediaListItem = ({ children }: MediaListItemProps) => (
-  <li {...oClasses(undefined, undefined, cClasses('item').className)}>{children}</li>
+export const MediaListItem = ({ children, ...rest }: ComponentProps<'li'>) => (
+  <StyledMediaListItem {...rest}>{children}</StyledMediaListItem>
 );
 
 interface MediaListItemImageProps {
@@ -99,16 +109,6 @@ export const MediaListItemImage = ({ children, canOpen }: MediaListItemImageProp
   </ImageWrapper>
 );
 
-interface MediaListCCLinkProps {
-  children: ReactNode;
-  url: string;
-}
-export const MediaListCCLink = ({ children, url }: MediaListCCLinkProps) => (
-  <a rel="noopener noreferrer license" href={url}>
-    {children}
-  </a>
-);
-
 interface MediaListItemBodyProps {
   children: ReactNode;
   license: string;
@@ -121,6 +121,25 @@ interface MediaListItemBodyProps {
   title?: string;
 }
 
+const StyledMediaListItemBody = styled.div`
+  ${fonts.size.text.metaText.small};
+  ${mq.range({ from: breakpoints.tablet })} {
+    max-width: 70%;
+  }
+  ${mq.range({ from: breakpoints.desktop })} {
+    max-width: 75%;
+  }
+`;
+
+const BodyTitle = styled(Text)`
+  color: ${colors.brand.primary};
+  font-weight: ${fonts.weight.bold};
+  margin-bottom: ${spacing.xsmall};
+  + p {
+    margin-top: ${spacing.small};
+  }
+`;
+
 export const MediaListItemBody = ({
   children,
   license: licenseAbbreviation,
@@ -133,34 +152,44 @@ export const MediaListItemBody = ({
   const license = getLicenseByAbbreviation(licenseAbbreviation, locale);
   const containerProps = isCreativeCommonsLicense(license.rights)
     ? {
-        ...oClasses('body', undefined, cClasses('body').className),
         'xmlns:cc': 'https://creativecommons.org/ns#',
         'xmlns:dct': 'http://purl.org/dc/terms/',
         about: resourceUrl,
       }
-    : {
-        ...oClasses('body', undefined, cClasses('body').className),
-      };
+    : {};
 
   const metaResourceType = getResourceTypeNamespace(resourceType);
 
   return (
-    <div {...containerProps}>
+    <StyledMediaListItemBody {...containerProps}>
       {/* @ts-ignore */}
       {metaResourceType && <span rel="dct:type" href={metaResourceType} style={{ display: 'none' }} />}
-      {title ? <h3 className="c-medialist__title">{title} </h3> : null}
+      {title ? (
+        <BodyTitle element="h3" margin="none" textStyle="meta-text-medium">
+          {title}
+        </BodyTitle>
+      ) : null}
       <LicenseDescription locale={locale} messages={messages} licenseRights={license.rights} highlightCC />
-      <MediaListCCLink url={license.url}>{license.linkText}</MediaListCCLink>
+      <SafeLink rel="noopener noreferrer license" target="_blank" to={license.url}>
+        {license.linkText}
+      </SafeLink>
       {children}
-    </div>
+    </StyledMediaListItemBody>
   );
 };
 
-interface MediaListItemActionsProps {
-  children: ReactNode;
-}
-export const MediaListItemActions = ({ children }: MediaListItemActionsProps) => (
-  <div {...cClasses('actions')}>{children}</div>
+const StyledMediaListItemActions = styled.div`
+  margin: ${spacing.small} 0;
+  list-style: none;
+  width: 100%;
+  button,
+  a {
+    margin: 0 ${spacing.small} ${spacing.small} 0;
+  }
+`;
+
+export const MediaListItemActions = ({ children, ...rest }: ComponentProps<'div'>) => (
+  <StyledMediaListItemActions {...rest}>{children}</StyledMediaListItemActions>
 );
 
 const isLink = (text: string) => text.startsWith('http') || text.startsWith('https');
@@ -173,9 +202,9 @@ interface HandleLinkProps {
 export const HandleLink = ({ text, children }: HandleLinkProps) => {
   if (isLink(text)) {
     return (
-      <a href={text} target="_blank" rel="noopener noreferrer">
+      <SafeLink to={text} target="_blank" rel="noopener noreferrer">
         {children}
-      </a>
+      </SafeLink>
     );
   }
   return <span>{children}</span>;
@@ -221,18 +250,32 @@ function isAttributionItem(item: ItemType): item is ItemTypeWithDescription {
   return attributionTypes.some((type) => type === item.metaType);
 }
 
+const StyledMediaListItemMeta = styled.ul`
+  margin: ${spacing.small} 0;
+  list-style: none;
+  width: 100%;
+  button,
+  a {
+    margin: 0 ${spacing.small} ${spacing.small} 0;
+  }
+`;
+
+const StyledMediaListMetaItem = styled.li`
+  margin: 0;
+  padding: 0;
+`;
+
 export const MediaListItemMeta = ({ items = [] }: MediaListItemMetaProps) => {
   const attributionItems = items.filter(isAttributionItem);
   const attributionMeta = attributionItems.map((item) => `${item.label}: ${item.description}`).join(', ');
 
   return (
-    // eslint-disable-next-line react/no-unknown-property
-    <ul {...cClasses('actions')} property="cc:attributionName" content={attributionMeta}>
+    <StyledMediaListItemMeta property="cc:attributionName" content={attributionMeta}>
       {items.map((item) => (
-        <li key={uuid()} className="c-medialist__meta-item">
+        <StyledMediaListMetaItem key={uuid()}>
           <ItemText item={item} />
-        </li>
+        </StyledMediaListMetaItem>
       ))}
-    </ul>
+    </StyledMediaListItemMeta>
   );
 };

package/src/NDLAFilm/MovieGrid.tsx

@@ -8,7 +8,7 @@
 
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
-import { breakpoints, mq, spacing, spacingUnit } from '@ndla/core';
+import { breakpoints, mq, spacing } from '@ndla/core';
 import FilmContentCard from './FilmContentCard';
 import { setAnimations, StyledHeadingH1 } from './filmStyles';
 import { MovieResourceType, MovieType } from './types';
@@ -27,8 +27,8 @@ const MovieListing = styled.div<MovieListingProps>`
   margin-left: ${spacing.normal};
   margin-right: ${spacing.normal};
   ${mq.range({ from: breakpoints.desktop })} {
-    margin-left: ${spacingUnit * 3}px;
-    margin-right: ${spacingUnit * 3}px;
+    margin-left: ${spacing.xlarge};
+    margin-right: ${spacing.xlarge};
   }
   > div {
     opacity: 0;