@ndla/ui 23.0.0 → 24.1.1

package/lib/locale/messages-sma.js

@@ -424,11 +424,12 @@ var messages = _objectSpread(_objectSpread({
       files: 'Filer',
       embedlink: 'Innbyggingslenke',
       concept: 'Forklaringer',
+      podcast: 'Podkast',
       other: 'Annet innhold'
     },
     embedlink: {
       heading: 'Slik viser du artikkelen i annet innhold',
-      description: 'Denne lenken viser artikkelen uten kontekst(meny og bunntekst)',
+      description: 'Denne lenken viser artikkelen uten kontekst (meny og bunntekst)',
       copyTitle: 'Kopier lenke',
       hasCopiedTitle: 'Lenke kopiert'
     },
@@ -460,6 +461,11 @@ var messages = _objectSpread(_objectSpread({
       description: 'Husk å kopiere teksten som skal legges ved lydfilen der du bruker den.',
       rules: 'Regler for bruk av lydfilen:'
     },
+    podcast: {
+      heading: 'Slik gjenbruker du podkaster',
+      description: 'Husk å kopiere teksten som skal legges ved podkasten der du bruker den.',
+      rules: 'Regler for bruk av podkasten:'
+    },
     video: {
       heading: 'Slik gjenbruker du videoer',
       description: 'Husk å kopiere teksten som skal legges ved videoen der du bruker den.',
@@ -481,16 +487,16 @@ var messages = _objectSpread(_objectSpread({
       rules: 'Regler for bruk av H5P:'
     },
     concept: {
-      embedlink: {
-        heading: 'Slik viser du forklaringa i anna innhald',
-        description: 'Denne lenka viser forklaringa utan kontekst (meny og botntekst)',
-        copyTitle: 'Kopier innbyggingslenke',
-        hasCopiedTitle: 'Innbyggingslenke kopiert'
-      },
       heading: 'Slik gjenbruker du forklaringer',
       description: 'Du finner retningslinjene for bruk av innholdet i forklaring-elementet',
       rules: 'Regler for bruk av forklaring:',
-      title: 'Tittel'
+      title: 'Tittel',
+      embedlink: {
+        heading: 'Slik viser du forklaringen i annet innhold',
+        description: 'Denne lenken viser forklaringen uten kontekst (meny og bunntekst)',
+        copyTitle: 'Kopier innbyggingslenke',
+        hasCopiedTitle: 'Innbyggingslenke kopiert'
+      }
     },
     files: {
       heading: 'Slik gjenbruker du filer',
@@ -501,10 +507,10 @@ var messages = _objectSpread(_objectSpread({
       }
     },
     title: 'Tittel',
-    originator: 'Opphavar',
-    rightsholder: 'Rettshavar',
-    source: 'Kjelde',
-    published: 'Publiseringsdato'
+    originator: 'Opphaver',
+    published: 'Publiseringsdato',
+    rightsholder: 'Rettighetshaver',
+    source: 'Kilde'
   },
   errorMessage: {
     title: 'Ops, noe gikk galt',
@@ -773,12 +779,12 @@ var messages = _objectSpread(_objectSpread({
     content: 'Ressursen',
     text: 'er hentet fra',
     concept: {
-      content: 'Forklaringa',
-      text: 'er utarbeida av'
+      content: 'Forklaringen',
+      text: 'er utarbeidet av'
     },
     listing: {
-      content: 'Lista',
-      text: 'er utarbeida av'
+      content: 'Listen',
+      text: 'er utarbeidet av'
     }
   },
   fagfornyelse: {
@@ -829,24 +835,24 @@ var messages = _objectSpread(_objectSpread({
     open: 'Åpne meny',
     close: 'Lukk meny'
   },
-  cancel: 'Avbryt',
   close: 'Lukk',
   title: 'Tittel',
+  cancel: 'Avbryt',
   save: 'Lagre',
   image: {
     altText: 'Alt-tekst',
-    caption: 'Bilettekst',
+    caption: 'Bildetekst',
     type: 'Filtype',
-    width: 'Breidde',
-    height: 'Høgde',
+    width: 'Bredde',
+    height: 'Høyde',
     size: 'Størrelse (bytes)',
     modelReleased: {
       label: 'Modellklarert',
       yes: 'Ja',
       no: 'Nei',
-      'not-applicable': 'Ikkje relevant',
-      'not-set': 'Ikkje valgt',
-      description: 'Om bildet er modellklarert eller ikkje:'
+      'not-applicable': 'Ikke relevant',
+      'not-set': 'Ikke valgt',
+      description: 'Om bildet er modellklarert eller ikke:'
     },
     download: 'Last ned bildet',
     reuse: 'Bruk bildet',
@@ -936,10 +942,10 @@ var messages = _objectSpread(_objectSpread({
     resource: {
       accessDenied: 'Vi beklager, men denne ressursen er bare for lærere innlogget med Feide.'
     },
-    primarySchool: 'Hovudskule',
-    name: 'Namn',
+    primarySchool: 'Hovedskole',
+    name: 'Navn',
     mail: 'E-post',
-    username: 'Brukarnamn',
+    username: 'Brukernavn',
     groupTypes: {
       basic: 'Basisgruppe',
       teaching: 'Undervisningsgruppe',
@@ -966,7 +972,7 @@ var messages = _objectSpread(_objectSpread({
       "delete": 'Slett',
       edit: 'Rediger',
       missingName: 'Mappenavn er påkrevd',
-      folderDeleted: '"{{folderName}}" er sletta'
+      folderDeleted: '"{{folderName}}" er slettet'
     },
     tags: '{{count}} tag',
     tags_plural: '{{count}} tags',
@@ -985,15 +991,15 @@ var messages = _objectSpread(_objectSpread({
     more: 'Flere valg',
     listView: 'Listevisning',
     detailView: 'Detaljrik listevisning',
-    shortView: 'Kort visning',
+    shortView: 'Kortvisning',
     myPage: {
       confirmDeleteAccount: 'Er du sikker på at du vil slette kontoen?',
       confirmDeleteAccountButton: 'Slett konto',
       myPage: 'Min side',
       deleteAccount: 'Slett Min NDLA',
       logout: 'Logg ut av Min NDLA',
-      loginTerms: 'Logg på med Feide for å få tilgang. Ved å logge på godkjennar du våre vilkår for bruk',
-      loginResourcePitch: 'Ønsker du å favorittmerke denne sida?',
+      loginTerms: 'Logg på med Feide for å få tilgang. Ved å logge på godkjenner du våre vilkår for bruk',
+      loginResourcePitch: 'Ønsker du å favorittmerke denne siden?',
       loginWelcome: 'Velkommen til NDLA! Her kan du organisere fagstoffet på <i>din</i> måte!',
       welcome: 'Velkommen til Min NDLA! Nå kan du lagre dine favorittressurser fra NDLA og organisere dem slik du ønsker i mapper og med tags.',
       read: {
@@ -1016,7 +1022,7 @@ var messages = _objectSpread(_objectSpread({
       feide: 'Dette henter vi om deg fra Feide',
       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.'
+        text: 'Når du ønsker å lagre en ressurs, kan du gjøre dette ved å klikke på hjerteknappen der den er tilgjengelig. Du vil da få mulighet til å lagre ressursen i en mappe.'
       },
       folderInfo: {
         title: 'Slik organiserer du dine favorittressurser i mapper',
@@ -1031,12 +1037,12 @@ var messages = _objectSpread(_objectSpread({
       add: 'Legg til mappe/tag',
       remove: 'Fjern',
       removeTitle: 'Fjern ressurs',
-      confirmRemove: 'Er du sikker på at du ønsker å fjerne ressursen frå denne mappen?',
+      confirmRemove: 'Er du sikker på at du ønsker å fjerne ressursen fra denne mappen?',
       copyLink: 'Kopier lenke til siden',
-      linkCopied: 'Kopiert til utklippstavla',
+      linkCopied: 'Kopiert til utklippstavle',
       addToMyNdla: 'Legg i Min NDLA',
       addedToMyNdla: 'Lagt i Min NDLA',
-      addedToFolder: 'Ressurs er lagt i "{{folderName}}"',
+      addedToFolder: 'Ressurs er lagt i ',
       removedFromFolder: 'Fjernet fra "{{folderName}}"',
       titleUpdated: 'Tittel oppdatert',
       tagsUpdated: 'Tags oppdatert',
@@ -1049,12 +1055,12 @@ var messages = _objectSpread(_objectSpread({
   labels: {
     category: 'Kategori',
     subject: 'Fag',
-    other: 'Anna'
+    other: 'Annet'
   },
   listingPage: {
     or: 'eller',
-    noFilters: 'Har ikkje noko å filtrera',
-    loadMore: 'Last meir'
+    noFilters: 'Har ingenting å filtrere',
+    loadMore: 'Last mer'
   },
   siteNav: {
     search: 'Søk',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "23.0.0",
+  "version": "24.1.1",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -32,20 +32,20 @@
   ],
   "dependencies": {
     "@ndla/article-scripts": "^3.0.1",
-    "@ndla/button": "^3.3.1",
+    "@ndla/button": "^3.3.2",
     "@ndla/carousel": "^1.2.16",
     "@ndla/core": "^2.3.4",
-    "@ndla/forms": "^3.1.4",
+    "@ndla/forms": "^3.1.5",
     "@ndla/hooks": "^1.1.5",
     "@ndla/icons": "^1.11.4",
-    "@ndla/licenses": "^5.0.7",
-    "@ndla/modal": "^1.2.18",
-    "@ndla/notion": "^3.1.30",
-    "@ndla/safelink": "^2.2.7",
+    "@ndla/licenses": "^5.0.9",
+    "@ndla/modal": "^1.3.0",
+    "@ndla/notion": "^3.1.33",
+    "@ndla/safelink": "^2.2.8",
     "@ndla/switch": "^0.1.11",
     "@ndla/tabs": "^1.1.15",
-    "@ndla/tooltip": "^2.1.6",
-    "@ndla/types-learningpath-api": "^0.0.12",
+    "@ndla/tooltip": "^2.2.0",
+    "@ndla/types-learningpath-api": "^0.0.13",
     "@ndla/util": "^3.0.1",
     "@reach/menu-button": "^0.16.2",
     "@reach/slider": "^0.16.0",
@@ -85,5 +85,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2f0095b2f2c730ff16d8c71fa8e867db87607c66"
+  "gitHead": "da8118a5337c64c6eb9109f6300369ae537d0cb2"
 }

package/src/Article/ArticleAuthorContent.tsx

@@ -78,7 +78,7 @@ const ArticleAuthorContent = ({ showAuthor, authors, onSelectAuthor }: Props) =>
   return (
     <div {...classes()}>
       <div {...classes('author-info')}>
-        {image && <Portrait src={image} alt={name} {...classes('portrait')} />}
+        {image && <Portrait src={image} alt={name} />}
         <section>
           <h1>{name}</h1>
           <hr />

package/src/Article/ArticleFavoritesButton.tsx

@@ -25,8 +25,8 @@ export const ArticleFavoritesButton = ({ isFavorite, onToggleAddToFavorites, art
   return (
     <Tooltip tooltip={isFavorite ? addToFavoritesLabel : removeFromFavoritesLabel}>
       <IconButtonDualStates
-        ariaLabelActive={t('myNdla.addToFavourites')}
-        ariaLabelInActive={t('myNdla.alreadyFavourited')}
+        ariaLabelActive={t('myNdla.alreadyFavourited')}
+        ariaLabelInActive={t('myNdla.addToFavourites')}
         activeIcon={<Heart />}
         inactiveIcon={<HeartOutline />}
         active={isFavorite}

package/src/AuthorInfo/AuthorInfo.tsx

@@ -7,16 +7,11 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import BEMHelper from 'react-bem-helper';
+import styled from '@emotion/styled';
 import SafeLink from '@ndla/safelink';
+import { breakpoints, fonts, mq, spacing } from '@ndla/core';
 import Portrait from '../Portrait';
 
-const classes = new BEMHelper({
-  name: 'author-info',
-  prefix: 'c-',
-});
-
 interface Props {
   authorName: string;
   authorRole: string;
@@ -25,24 +20,63 @@ interface Props {
   image?: string;
 }
 
+const AuthorInfoSection = styled.section`
+  display: flex;
+  align-items: flex-start;
+  padding-bottom: ${spacing.large};
+  font-family: ${fonts.sans};
+  p,
+  a {
+    margin: 0;
+    ${mq.range({ until: breakpoints.tablet })} {
+      ${fonts.sizes('14px', '22px')};
+    }
+  }
+`;
+
+const StyledPortrait = styled(Portrait)`
+  margin-right: ${spacing.large};
+  ${mq.range({ until: breakpoints.desktop })} {
+    margin-right: ${spacing.medium};
+    width: 7rem;
+    height: 7rem;
+    span {
+      width: 7rem;
+      height: 7rem;
+    }
+  }
+  ${mq.range({ until: breakpoints.desktop })} {
+    margin-right: ${spacing.small};
+    width: 4rem;
+    height: 4rem;
+    span {
+      width: 4rem;
+      height: 4rem;
+    }
+  } ;
+`;
+
+const StyledHeading = styled.h1`
+  margin: 0 0 ${spacing.small};
+  ${mq.range({ until: breakpoints.desktop })} {
+    ${fonts.sizes('22px', '22px')};
+  }
+  ${mq.range({ until: breakpoints.tablet })} {
+    ${fonts.sizes('18px', '18px')};
+    margin-bottom: ${spacing.xsmall};
+  }
+`;
+
 const AuthorInfo = ({ authorName, authorRole, email, image, phone }: Props) => (
-  <section {...classes('')}>
-    {image && <Portrait src={image} alt={authorName} modifier="large" {...classes('portrait-image')} />}
+  <AuthorInfoSection>
+    {image && <StyledPortrait src={image} alt={authorName} modifier="large" />}
     <div>
-      <h1 {...classes('heading')}>{authorName}</h1>
+      <StyledHeading>{authorName}</StyledHeading>
       <p>{authorRole}</p>
       {phone && <p>{phone}</p>}
       {email && <SafeLink to={`mailto:${email}`}>{email}</SafeLink>}
     </div>
-  </section>
+  </AuthorInfoSection>
 );
 
-AuthorInfo.propTypes = {
-  authorName: PropTypes.string.isRequired,
-  authorRole: PropTypes.string.isRequired,
-  phone: PropTypes.string,
-  email: PropTypes.string,
-  image: PropTypes.string,
-};
-
 export default AuthorInfo;

package/src/ContentCard/ContentCard.tsx

@@ -1,11 +1,123 @@
 import React from 'react';
-import BEMHelper from 'react-bem-helper';
-import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
 import { Play } from '@ndla/icons/common';
 import SafeLink from '@ndla/safelink';
 import type { SafeLinkProps } from '@ndla/safelink';
+import { breakpoints, colors, fonts, mq, spacing, spacingUnit } from '@ndla/core';
 
-const classes = BEMHelper('c-content-card');
+interface ContentCardContainerProps {
+  columnWidth: number;
+}
+const ContentCardContainer = styled.article<ContentCardContainerProps>`
+  position: relative;
+  display: block;
+  width: ${(p) => `${p.columnWidth}px`};
+`;
+
+const StyledHeading = styled.h1`
+  font-weight: ${fonts.weight.semibold};
+  ${fonts.sizes('14px', '16px')};
+  margin: ${spacing.xsmall} 0;
+  color: ${colors.brand.primary};
+
+  ${mq.range({ from: breakpoints.tablet })} {
+    margin: ${spacing.small} 0 ${spacing.xsmall};
+    ${fonts.sizes('20px', '22px')};
+  }
+`;
+
+const ContentCardLink = styled(SafeLink)`
+  color: ${colors.text.primary};
+  &:hover,
+  &:focus {
+    ${StyledHeading} {
+      text-decoration: underline;
+    }
+  }
+`;
+
+const ImageWrapper = styled.div`
+  width: 100%;
+  height: 72px;
+  border-radius: 5px;
+  position: relative;
+  overflow: hidden;
+  background: ${colors.background.grayDark};
+  ${mq.range({ from: breakpoints.tablet })} {
+    height: ${spacingUnit * 4.5}px;
+  }
+`;
+
+interface BackgroundImageProps {
+  image: string;
+}
+const BackgroundImage = styled.div<BackgroundImageProps>`
+  display: flex;
+  height: 100%;
+  width: 100%;
+  background-position: center center;
+  background-size: cover;
+  background-image: url(${(p) => p.image});
+`;
+
+const PlayBackground = styled.div`
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate3d(-50%, -50%, 0);
+  height: 35px;
+  width: 35px;
+  background-color: rgba(0, 0, 0, 0.48);
+  border-radius: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  ${mq.range({ from: breakpoints.tablet })} {
+    height: 42px;
+    width: 42px;
+  }
+
+  .c-icon {
+    color: ${colors.white};
+    height: 20px;
+    width: 20px;
+    margin-right: -1px;
+
+    ${mq.range({ from: breakpoints.tablet })} {
+      height: 25px;
+      width: 25px;
+    }
+  }
+`;
+
+const StyledContentType = styled.p`
+  ${fonts.sizes('12px', '20px')};
+  position: absolute;
+  left: ${spacing.small};
+  bottom: ${spacing.small};
+  display: inline-block;
+  background: ${colors.brand.greyLightest};
+  border-radius: 2px;
+  font-weight: 600;
+  margin: 0;
+  padding: 0 ${spacing.xxsmall};
+
+  display: none;
+  ${mq.range({ from: breakpoints.tablet })} {
+    display: inline-block;
+  }
+`;
+
+const StyledDescription = styled.p`
+  ${fonts.sizes('16px')};
+  line-height: 1.25rem;
+  margin: 0;
+  display: none;
+
+  ${mq.range({ from: breakpoints.tablet })} {
+    display: block;
+  }
+`;
 
 interface Props {
   title: string;
@@ -18,43 +130,23 @@ interface Props {
 }
 
 const ContentCard = ({ title, text, image, type, isFilm = false, toLinkProps, columnWidth }: Props) => (
-  <article {...classes()} style={{ width: `${columnWidth}px` }}>
-    <SafeLink {...toLinkProps()} title={title} {...classes('link')}>
+  <ContentCardContainer columnWidth={columnWidth}>
+    <ContentCardLink {...toLinkProps()} title={title}>
       <header>
-        <div {...classes('image-wrapper')}>
-          <div
-            {...classes('background-image')}
-            role="img"
-            aria-label={title}
-            style={{
-              backgroundImage: `url(${image})`,
-            }}
-          />
+        <ImageWrapper>
+          <BackgroundImage image={image} role="img" aria-label={title} />
           {isFilm && (
-            <div {...classes('play-background')}>
+            <PlayBackground>
               <Play />
-            </div>
+            </PlayBackground>
           )}
-          <p {...classes('type')}>{type}</p>
-        </div>
-        <h1 {...classes('heading')}>{title}</h1>
+          <StyledContentType>{type}</StyledContentType>
+        </ImageWrapper>
+        <StyledHeading>{title}</StyledHeading>
       </header>
-      <p {...classes('description')}>{text}</p>
-    </SafeLink>
-  </article>
+      <StyledDescription>{text}</StyledDescription>
+    </ContentCardLink>
+  </ContentCardContainer>
 );
 
-ContentCard.propTypes = {
-  title: PropTypes.string.isRequired,
-  text: PropTypes.string.isRequired,
-  type: PropTypes.string.isRequired,
-  image: PropTypes.string.isRequired,
-  isFilm: PropTypes.bool,
-  toLinkProps: PropTypes.func.isRequired,
-};
-
-ContentCard.defaultProps = {
-  isFilm: false,
-};
-
 export default ContentCard;

package/src/FileList/File.tsx

@@ -1,11 +1,36 @@
+import styled from '@emotion/styled';
+import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import { Download } from '@ndla/icons/common';
 import SafeLink from '@ndla/safelink';
 import Tooltip from '@ndla/tooltip';
 import React from 'react';
-import BEMHelper from 'react-bem-helper';
 import { FileFormat, FileType } from './FileList';
 
-const classes = BEMHelper('c-file-list');
+const LinkText = styled.span`
+  & > span {
+    box-shadow: inset 0 -1px;
+  }
+`;
+const FileLink = styled(SafeLink)`
+  box-shadow: none;
+  position: relative;
+  color: ${colors.brand.primary};
+  margin-right: ${spacing.normal};
+  display: flex;
+  align-items: center;
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  &:hover,
+  &:focus,
+  &:active {
+    ${LinkText} {
+      box-shadow: none;
+    }
+  }
+`;
 
 const renderFormat = (format: FileFormat, title: string, isPrimary: boolean, id: string, isDeadLink: boolean) => {
   const titleWithFormat = `${title} (${format.fileType.toUpperCase()})`;
@@ -22,20 +47,14 @@ const renderFormat = (format: FileFormat, title: string, isPrimary: boolean, id:
   }
 
   return (
-    <SafeLink
-      {...classes('link')}
-      key={format.url}
-      to={format.url}
-      target="_blank"
-      aria-label={titleWithFormat}
-      aria-describedby={formatId}>
+    <FileLink key={format.url} to={format.url} target="_blank" aria-label={titleWithFormat} aria-describedby={formatId}>
       <Download />
       <Tooltip tooltip={format.tooltip}>
-        <span {...classes('link-text')}>
+        <LinkText>
           <span>{isPrimary ? titleWithFormat : `(${format.fileType.toUpperCase()})`}</span>
-        </span>
+        </LinkText>
       </Tooltip>
-    </SafeLink>
+    </FileLink>
   );
 };
 
@@ -44,16 +63,27 @@ interface Props {
   file: FileType;
 }
 
+const FileListItem = styled.li`
+  ${fonts.sizes('18px', '26px')};
+  font-weight: ${fonts.weight.semibold};
+  min-height: 60px;
+  background: ${colors.brand.greyLighter};
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-bottom: ${spacing.xsmall};
+  padding: ${spacing.small};
+  ${mq.range({ from: breakpoints.tablet })} {
+    padding: ${spacing.small} ${spacing.normal};
+  }
+`;
+
 const File = ({ file, id }: Props) => {
   const formatLinks = file.formats.map((format, index) =>
     renderFormat(format, file.title, index === 0, id, !file.fileExists),
   );
 
-  return (
-    <li {...classes('item')} key={file.title}>
-      {formatLinks}
-    </li>
-  );
+  return <FileListItem key={file.title}>{formatLinks}</FileListItem>;
 };
 
 export default File;