@ndla/ui 25.1.0 → 25.3.0

package/src/Search/SearchField.tsx

@@ -139,7 +139,12 @@ const SearchField = ({
           {t('welcomePage.resetSearch')}
         </button>
       )}
-      <button tabIndex={-1} {...classes('button', 'searchIcon')} type="submit" value="Search">
+      <button
+        tabIndex={-1}
+        {...classes('button', 'searchIcon')}
+        type="submit"
+        value="Search"
+        aria-label={t('siteNav.search')}>
         <SearchIcon />
       </button>
     </div>

package/src/Search/SearchFieldForm.tsx

@@ -58,7 +58,7 @@ const StyledForm = styled.form<StyledProps>`
 
 export const SearchFieldForm = ({ children, inputHasFocus, onSubmit }: Props) => {
   return (
-    <StyledForm action="/search/" inputHasFocus={inputHasFocus} onSubmit={onSubmit}>
+    <StyledForm role="search" action="/search/" inputHasFocus={inputHasFocus} onSubmit={onSubmit}>
       {children}
     </StyledForm>
   );

package/src/Search/ToggleSearchButton.tsx

@@ -32,7 +32,7 @@ const StyledButton = styled(Button)<StyledButtonProps>`
   color: ${(p) => (p.ndlaFilm ? '#fff' : colors.brand.primary)};
   padding: ${spacing.small} ${spacingUnit * 0.75}px ${spacing.small} ${spacing.normal};
   align-items: center;
-  margin-left: ${spacing.normal};
+  margin-left: ${spacing.medium};
 
   .c-icon {
     height: 24px;
@@ -43,7 +43,7 @@ const StyledButton = styled(Button)<StyledButtonProps>`
 
   ${mq.range({ from: breakpoints.desktop })} {
     display: ${(p) => (p.hideOnWideScreen ? 'none' : 'flex')};
-    margin-right: ${spacing.medium};
+    margin-right: ${spacing.nsmall};
     padding: ${spacing.small} ${spacing.normal};
   }
   &:hover,

package/src/Subject/SubjectHeader.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
-import { breakpoints } from '@ndla/util';
-import { colors, fonts, mq, spacing, spacingUnit } from '@ndla/core';
+import { colors, fonts, mq, spacing, spacingUnit, breakpoints } from '@ndla/core';
 import OneColumn from '../Layout/OneColumn';
 
 type Types = 'mobile' | 'tablet' | 'desktop' | 'wide';

package/src/TagSelector/SuggestionInput.tsx

@@ -254,7 +254,7 @@ const SuggestionInput = ({
               ariaLabelActive={t('tagSelector.showAllTags')}
               ariaLabelInActive={t('tagSelector.hideAllTags')}
               active={expanded}
-              greyLighter
+              colorTheme="lighter"
               inactiveIcon={<ChevronDown />}
               activeIcon={<ChevronUp />}
               size="small"

package/src/Topic/Topic.tsx

@@ -339,6 +339,7 @@ const Topic = ({
               {onToggleShowContent && (
                 <StyledButtonWrapper invertedStyle={invertedStyle}>
                   <Button
+                    aria-expanded={!!showContent}
                     link
                     onClick={() => {
                       onToggleShowContent();

package/src/TopicMenu/TopicMenu.jsx

@@ -13,11 +13,13 @@ import React, { Fragment, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import BEMHelper from 'react-bem-helper';
 import { debounce } from 'lodash';
+import { spacing } from '@ndla/core';
+import styled from '@emotion/styled';
 
 import { Home, Back, Additional, ChevronRight } from '@ndla/icons/common';
 import { Cross } from '@ndla/icons/action';
 import { ModalHeader } from '@ndla/modal';
-import Button from '@ndla/button';
+import { ButtonV2 as Button } from '@ndla/button';
 import SafeLink from '@ndla/safelink';
 import Tooltip from '@ndla/tooltip';
 import { useTranslation } from 'react-i18next';
@@ -35,6 +37,10 @@ const classes = new BEMHelper({
   prefix: 'c-',
 });
 
+const StyledButton = styled(Button)`
+  padding: ${spacing.xsmall} ${spacing.small};
+`;
+
 export const renderAdditionalIcon = (isAdditional, label) => {
   if (isAdditional && label) {
     return (
@@ -192,40 +198,40 @@ export const TopicMenu = ({
           <div {...classes('subject__header')}>
             <div {...classes('subject__header__menu-filter')}>
               {subjectTitle && (
-                <Button
+                <StyledButton
                   onClick={() => setSelectedMenu(MENU_CURRENT_SUBJECT)}
-                  lighter={selectedMenu !== MENU_CURRENT_SUBJECT}
+                  colorTheme={selectedMenu !== MENU_CURRENT_SUBJECT ? 'lighter' : 'primary'}
                   size="small"
-                  borderShape="rounded">
+                  shape="pill">
                   {subjectTitle}
-                </Button>
+                </StyledButton>
               )}
               {currentProgramme && (
-                <Button
+                <StyledButton
                   onClick={() => setSelectedMenu(MENU_CURRENT_PROGRAMME)}
-                  lighter={selectedMenu !== MENU_CURRENT_PROGRAMME}
+                  colorTheme={selectedMenu !== MENU_CURRENT_PROGRAMME ? 'lighter' : 'primary'}
                   size="small"
-                  borderShape="rounded">
+                  shape="pill">
                   {currentProgramme.name}
-                </Button>
+                </StyledButton>
               )}
               {programmes && (
-                <Button
+                <StyledButton
                   onClick={() => setSelectedMenu(MENU_PROGRAMMES)}
-                  lighter={selectedMenu !== MENU_PROGRAMMES}
+                  colorTheme={selectedMenu !== MENU_PROGRAMMES ? 'lighter' : 'primary'}
                   size="small"
-                  borderShape="rounded">
+                  shape="pill">
                   {t('frontpageMenu.program')}
-                </Button>
+                </StyledButton>
               )}
               {subjectCategories && (
-                <Button
+                <StyledButton
                   onClick={() => setSelectedMenu(MENU_ALL_SUBJECTS)}
-                  lighter={selectedMenu !== MENU_ALL_SUBJECTS}
+                  colorTheme={selectedMenu !== MENU_ALL_SUBJECTS ? 'lighter' : 'primary'}
                   size="small"
-                  borderShape="rounded">
+                  shape="pill">
                   {t('frontpageMenu.allsubjects')}
-                </Button>
+                </StyledButton>
               )}
             </div>
           </div>

package/src/TopicMenu/TopicMenuButton.jsx

@@ -11,14 +11,13 @@ import PropTypes from 'prop-types';
 import { css } from '@emotion/core';
 import { spacing, fonts, colors, mq, breakpoints } from '@ndla/core';
 import { Menu } from '@ndla/icons/common';
-import Button from '@ndla/button';
+import { ButtonV2 as Button } from '@ndla/button';
 
 const style = css`
+  display: block;
   position: relative;
   background: transparent;
-  padding: ${spacing.small};
-  padding-right: ${spacing.normal};
-  padding-left: ${spacing.normal};
+  padding: ${spacing.small} ${spacing.normal};
   font-weight: ${fonts.weight.normal};
 
   svg {
@@ -28,13 +27,13 @@ const style = css`
     margin-right: ${spacing.xsmall};
   }
   &:hover {
-    border: 3px solid transparent;
+    border-color: transparent;
     background: ${colors.brand.primary};
     color: ${colors.white};
   }
   &:active,
   &:focus {
-    border: 2px solid ${colors.brand.lighter};
+    border-color: ${colors.brand.lighter};
     background: ${colors.white};
     color: ${colors.brand.primary};
   }
@@ -45,7 +44,7 @@ const style = css`
 `;
 
 const TopicMenuButton = ({ ndlaFilm, children, ...rest }) => (
-  <Button invertedOutline={ndlaFilm} outline={!ndlaFilm} css={style} {...rest}>
+  <Button inverted={ndlaFilm} variant="outline" css={style} {...rest}>
     <Menu /> {children}
   </Button>
 );

package/src/locale/messages-en.ts

@@ -248,13 +248,6 @@ const messages = {
         name: 'Follow us',
       },
     },
-    category: {
-      fellesfag: 'Common',
-      yrkesfag: 'Vocational',
-      studiespesialiserende: 'Specialization',
-      imported: 'Imported subjects',
-      heading: 'What will you learn?',
-    },
     film: {
       header: 'NDLA film',
       text: 'NDLA film is a service in collaboration with Norgesfilm. This service allows you to watch a range of feature films, short films, documentaries and series. You can also watch educational films and movie clips. Welcome to the world of cinema!',
@@ -353,8 +346,7 @@ const messages = {
       'Your browser is outdated. Update it, or find a safe and updated browser on https://browsehappy.com.',
     noContent: 'We are sorry, but we do not yet offer any program courses.',
     feide: 'This resource is accessible only to teachers who are logged in with Feide.',
-    resources:
-      'This is not a complete course produced by NDLA, but a collection of resources we hope you will find useful.',
+    resources: 'This is not a complete course, but a collection of resources we hope you will find useful.',
     subjectOutdated: 'This course is not updated to the current curriculum.',
     subjectBeta: 'This course is in beta. New resources are being added continously.',
     newVersion:
@@ -825,18 +817,6 @@ const messages = {
       text: 'is created by',
     },
   },
-  fagfornyelse: {
-    frontpage: {
-      heading: 'Welcome to a sneak peek at Fagfornyelsen at NDLA',
-      text: 'The new curricula will take effect in the fall 2020. At NDLA we have already started this work. Those responsible for our content make new great learning resources every day, resources that are adapted to the new curricula. On this page you can already see them.',
-      blogHeading: 'Do you want to know more?',
-    },
-    badge: {
-      heading: 'This page is adapted for Fagfornyelsen 2020',
-      text: 'The content is in progress. Not what you were looking for?',
-      linkText: "Go to ndla.no for today's content",
-    },
-  },
   frontPageToolbox: {
     heading: 'Toolbox',
     text: 'Do you want to become good at presenting, or do you want to learn to study smarter using the right study technique? Need advice on how to read most effectively for the exam? In the NDLA Toolbox you will find lots of great tips and advice!',
@@ -1008,14 +988,15 @@ const messages = {
     folders_plural: '{{count}} Folders',
     folder: {
       folder: 'Folder',
-      delete: 'Delete',
-      edit: 'Edit',
+      delete: 'Delete folder',
+      edit: 'Edit folder',
       missingName: 'Folder name required',
       folderDeleted: '"{{folderName}}" deleted',
     },
     tags: '{{count}} tag',
     tags_plural: '{{count}} tags',
-    confirmDeleteFolder: 'Are you sure you want to delete this folder? This process cannot be undone.',
+    confirmDeleteFolder:
+      'Are you sure you want to delete this folder? Subfolders of this folder will also be deleted. This action cannot be undone.',
     confirmDeleteTag: 'Are you sure you want to delete this tag? This process cannot be undone.',
     myFolders: 'My folders',
     myTags: 'My tags',
@@ -1036,6 +1017,9 @@ const messages = {
       confirmDeleteAccountButton: 'Delete account',
       myPage: 'My page',
       logout: 'Log out of My NDLA',
+      loginText:
+        'Log in with Feide to receive access to My NDLA. We ask you not to write offensive or personally sensitive information in text fields. Read our ',
+      loginTextLink: 'privacy policy here',
       loginTerms: 'Log in with Feide to receive access. By logging on your accept your terms of service',
       loginResourcePitch: 'Do you want to favorite this page?',
       loginWelcome: 'Welcome to My NDLA! This page allows you to organize your articles in your <i>own</i> way!',

package/src/locale/messages-nb.ts

@@ -247,13 +247,6 @@ const messages = {
         name: 'Følg oss',
       },
     },
-    category: {
-      fellesfag: 'Fellesfag',
-      yrkesfag: 'Yrkesfag',
-      studiespesialiserende: 'Studieforberedende',
-      imported: 'Spolte fag',
-      heading: 'Hva lærer du?',
-    },
     errorDescription: 'Beklager, en feil oppstod under lasting av fagene.',
     film: {
       header: 'NDLA film',
@@ -352,8 +345,7 @@ const messages = {
       'Nettleseren din er utdatert. Oppdater den, eller finn en trygg og oppdatert nettleser på https://browsehappy.com.',
     noContent: 'Vi har dessverre ikke noen programfag ennå.',
     feide: 'Denne ressursen er bare tilgjengelig for lærere som er pålogget med Feide.',
-    resources:
-      'Dette er ikke et komplett læremiddel produsert av NDLA, men ei ressurssamling som vi håper kan være nyttig for deg.',
+    resources: 'Dette er ikke et komplett læremiddel, men ei ressurssamling som vi håper kan være nyttig for deg.',
     subjectOutdated: 'Dette faget følger en utgått læreplan.',
     subjectBeta: 'Dette faget er i betaversjon. Vi fyller på med ressurser fortløpende.',
     newVersion:
@@ -823,18 +815,6 @@ const messages = {
       text: 'er utarbeidet av',
     },
   },
-  fagfornyelse: {
-    frontpage: {
-      heading: 'Velkommen til sniktitt på Fagfornyelsen i NDLA',
-      text: 'Høsten 2020 og 2021 vil de nye læreplanene tre i kraft. I NDLA har vi startet med dette arbeidet allerede. Våre innholdsansvarlige lager hver dag nye supre læringsressurser som er tilrettelagt for de nye planene. På denne siden kan du se dem allerede nå.',
-      blogHeading: 'Vil du vite mer?',
-    },
-    badge: {
-      heading: 'Denne siden er tilrettelagt for fagfornyelsen 2020/2021',
-      text: 'Innholdet er under arbeid. Ikke på jakt etter dette?',
-      linkText: 'Gå til ndla.no for dagens innhold',
-    },
-  },
   frontPageToolbox: {
     heading: 'Verktøykassa',
     text: 'Har du lyst til å bli god til å presentere, eller vil du lære å studere smartere ved hjelp av riktig studieteknikk? Trenger du råd om hvordan du leser mest mulig effektivt til eksamen? I verktøykassa til NDLA finner du masse gode tips og råd!',
@@ -1006,14 +986,15 @@ const messages = {
     folders_plural: '{{count}} mapper',
     folder: {
       folder: 'Mappe',
-      delete: 'Slett',
-      edit: 'Rediger',
+      delete: 'Slett mappe',
+      edit: 'Rediger mappe',
       missingName: 'Skriv navn på mappe',
       folderDeleted: '"{{folderName}}" er slettet',
     },
     tags: '{{count}} emneknagg',
     tags_plural: '{{count}} emneknagger',
-    confirmDeleteFolder: 'Er du sikker på at du vil slette mappen? Denne handlingen kan ikke endres.',
+    confirmDeleteFolder:
+      'Er du sikker på at du vil slette mappen? Dersom mappen har undermapper vil disse også slettes. Handlingen kan ikke endres.',
     confirmDeleteTag: 'Er du sikker på at du vil slette emneknagg? Denne handlingen kan ikke endres.',
     myFolders: 'Mine mapper',
     myTags: 'Mine emneknagger',
@@ -1035,12 +1016,15 @@ const messages = {
       myPage: 'Min side',
       deleteAccount: 'Slett Min NDLA',
       logout: 'Logg ut av Min NDLA',
+      loginText:
+        'Logg på med Feide for å få tilgang til Min NDLA. Vi ber om at du ikke skriver noe støtende, personsensitiv informasjon eller andre persondata i tekstfelt. Les vår ',
+      loginTextLink: 'personvernerklæring her',
       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 emneknagger.',
-      read: { our: 'Les våre', ours: 'Les vår' },
+      read: { our: 'Les vår', ours: 'Les våre' },
       privacy: 'personvernerklæring her',
       questions: { question: 'Lurer du på noe?', ask: 'Spør oss i chatten' },
       wishToDelete: 'Vil du ikke ha brukerprofil hos oss lenger?',
@@ -1074,7 +1058,7 @@ const messages = {
       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: 'Emneknagger oppdatert',

package/src/locale/messages-nn.ts

@@ -247,13 +247,6 @@ const messages = {
         name: 'Følg oss',
       },
     },
-    category: {
-      fellesfag: 'Fellesfag',
-      yrkesfag: 'Yrkesfag',
-      studiespesialiserende: 'Studieførebuande',
-      imported: 'Spolte fag',
-      heading: 'Kva lærer du?',
-    },
     film: {
       header: 'NDLA film',
       text: 'NDLA film er ei teneste i samarbeid med Norgesfilm. Denne tenesta lar deg sjå ei rekkje spelefilmar, kortfilmar, dokumentarar og seriar. Du kan òg sjå undervisningsfilm og filmklipp. Velkomen inn i filmen si verd!',
@@ -353,8 +346,7 @@ const messages = {
       'Nettlesaren din er utdatert. Oppdater han, eller finn ein trygg og oppdatert nettlesar på https://browsehappy.com. ',
     noContent: 'Vi har dessverre ikkje nokon programfag enno.',
     feide: 'Denne ressursen er berre tilgjengeleg for lærarar som er pålogga med Feide.',
-    resources:
-      'Dette er ikkje eit komplett læremiddel produsert av NDLA, men ei ressurssamling som vi håper kan vere nyttig for deg.',
+    resources: 'Dette er ikkje eit komplett læremiddel, men ei ressurssamling som vi håper kan vere nyttig for deg.',
     subjectOutdated: 'Dette faget følgjer ein utgått læreplan.',
     subjectBeta: 'Dette faget er i betaversjon. Vi fyller på med ressurser fortløpande.',
     newVersion:
@@ -824,18 +816,6 @@ const messages = {
       text: 'er utarbeida av',
     },
   },
-  fagfornyelse: {
-    frontpage: {
-      heading: 'Velkommen til sniktitt på Fagfornyelsen i NDLA',
-      text: 'Hausten 2020 og 2021 vil dei nye læreplanane tre i kraft. I NDLA har vi starta dette arbeidet allereie. Dei innhaldsansvarlege i NDLA lagar kvar dag nye supre læringsressursar som er tilrettelagte for dei nye planane. På denne sida kan du sjå dei allereie nå.',
-      blogHeading: 'Vil du vite meir?',
-    },
-    badge: {
-      heading: 'Denne sida er tilrettelagt for fagfornyelsen 2020/2021',
-      text: 'Innhaldet er under arbeid. Ikkje på jakt etter dette?',
-      linkText: 'Gå til ndla.no for dagens innhald',
-    },
-  },
   frontPageToolbox: {
     heading: 'Verktøykassa',
     text: 'Har du lyst til å bli god til å presentere, eller vil du lære å studere smartare ved hjelp av riktig studieteknikk? Treng du råd om korleis du les mest mogleg effektivt til eksamen? I verktøykassa til NDLA finn du masse gode tips og råd!',
@@ -1007,14 +987,15 @@ const messages = {
     folders_plural: '{{count}} mapper',
     folder: {
       folder: 'Mappe',
-      delete: 'Slett',
-      edit: 'Rediger',
+      delete: 'Slett mappe',
+      edit: 'Rediger mappe',
       missingName: 'Skriv namn på mappe',
       folderDeleted: '"{{folderName}}" er sletta',
     },
     tags: '{{count}} emneknagg',
     tags_plural: '{{count}} emneknaggar',
-    confirmDeleteFolder: 'Er du sikker på at du vil slette mappa? Denne handlinga kan ikkje endrast.',
+    confirmDeleteFolder:
+      'Er du sikker på at du vil slette mappa? Dersom mappa har undermapper vil desse også slettast. Denne handlinga kan ikkje endrast.',
     confirmDeleteTag: 'Er du sikker på at du vil slette tag? Denne handlinga kan ikkje endrast.',
     myFolders: 'Mine mapper',
     myTags: 'Emneknaggane mine',
@@ -1036,12 +1017,15 @@ const messages = {
       myPage: 'Mi side',
       deleteAccount: 'Slett Min NDLA',
       logout: 'Logg ut av Min NDLA',
+      loginText:
+        'Logg på med Feide for å få tilgang til Min NDLA. Vi ber om at du ikkje skriv noko støtande, personsensitiv informasjon eller andre persondata i tekstfelt. Les vår ',
+      loginTextLink: 'personvernerklæring her',
       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?',
       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: { our: 'Les våre', ours: 'Les vår' },
+      read: { our: 'Les vår', ours: 'Les våre' },
       privacy: 'personvernerklæring her',
       questions: { question: 'Lurer du på noko?', ask: 'Spør oss i chatten' },
       wishToDelete: 'Vil du ikkje ha brukerprofil hos oss lenger?',