@ndla/ui 33.1.4 → 33.3.0

package/src/Figure/FigureLicenseDialog.tsx

@@ -20,9 +20,9 @@ export const FigureLicenseDialog = ({ children, messages, id, authors, origin, t
   return (
     <Dialog id={id} labelledby={headingLabelId} messages={messages}>
       <div {...classLicenses()}>
-        <h3 id={headingLabelId} {...classLicenses('title')}>
+        <h1 id={headingLabelId} {...classLicenses('title')}>
           {messages.rulesForUse}
-        </h3>
+        </h1>
         <FigureLicenseByline license={license} messages={messages} locale={locale} />
         <FigureLicenseCta authors={authors} title={title} origin={origin} messages={messages}>
           {children}

package/src/Layout/Content.tsx

@@ -7,7 +7,6 @@
  */
 
 import React, { ReactNode } from 'react';
-import PropTypes from 'prop-types';
 
 interface Props {
   children: ReactNode;
@@ -15,8 +14,4 @@ interface Props {
 
 export const Content = ({ children }: Props) => <div className="o-content">{children}</div>;
 
-Content.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
 export default Content;

package/src/Layout/LayoutItem.tsx

@@ -7,7 +7,6 @@
  */
 
 import React, { ReactNode } from 'react';
-import PropTypes from 'prop-types';
 
 interface Props {
   children?: ReactNode;
@@ -35,9 +34,4 @@ export const LayoutItem = ({ children, layout }: Props) => {
   }
 };
 
-LayoutItem.propTypes = {
-  children: PropTypes.node,
-  layout: PropTypes.string,
-};
-
 export default LayoutItem;

package/src/Layout/OneColumn.tsx

@@ -7,7 +7,6 @@
  */
 
 import React, { ReactNode } from 'react';
-import PropTypes from 'prop-types';
 import BEMHelper from 'react-bem-helper';
 
 const classes = BEMHelper({
@@ -47,13 +46,4 @@ export const OneColumn = ({ children, className, cssModifier, wide, noPadding, e
   return <div className={`${classes('', modifiers)} ${className}`}>{children}</div>;
 };
 
-OneColumn.propTypes = {
-  children: PropTypes.node,
-  cssModifier: PropTypes.string,
-  wide: PropTypes.bool,
-  noPadding: PropTypes.bool,
-  extraPadding: PropTypes.bool,
-  className: PropTypes.string,
-};
-
 export default OneColumn;

package/src/Layout/PageContainer.tsx

@@ -7,7 +7,6 @@
  */
 
 import React, { ReactNode } from 'react';
-import PropTypes from 'prop-types';
 import BEMHelper from 'react-bem-helper';
 
 const classes = new BEMHelper({
@@ -31,18 +30,4 @@ export const PageContainer = ({
   learningPath = false,
 }: Props) => <div {...classes('', { background, backgroundWide, ndlaFilm, learningPath })}>{children}</div>;
 
-PageContainer.propTypes = {
-  children: PropTypes.node,
-  background: PropTypes.bool,
-  backgroundWide: PropTypes.bool,
-  ndlaFilm: PropTypes.bool,
-};
-
-PageContainer.defaultProps = {
-  background: false,
-  backgroundWide: false,
-  ndlaFilm: false,
-  learningPath: false,
-};
-
 export default PageContainer;

package/src/LearningPaths/LearningPathSticky.tsx

@@ -7,7 +7,6 @@
  */
 
 import React, { ReactNode } from 'react';
-import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import { colors, spacing, animations, mq, breakpoints } from '@ndla/core';
@@ -46,10 +45,6 @@ interface Props {
 
 export const LearningPathSticky = ({ children }: Props) => <StyledFooter>{children}</StyledFooter>;
 
-LearningPathSticky.propTypes = {
-  children: PropTypes.node,
-};
-
 const SafeLinkCSS = css`
   display: flex;
   box-shadow: none;

package/src/Programme/Programme.tsx

@@ -67,15 +67,7 @@ type Props = GradesProps & {
   headingId?: string;
 };
 
-export const Programme = ({
-  heading,
-  image,
-  grades,
-  selectedGrade,
-  onChangeGrade,
-  messageBoxText,
-  headingId,
-}: Props) => {
+export const Programme = ({ heading, image, grades, selectedGrade, messageBoxText, headingId }: Props) => {
   const { t } = useTranslation();
   return (
     <StyledWrapper>
@@ -87,7 +79,7 @@ export const Programme = ({
               <NavigationHeading headingId={headingId}>{heading}</NavigationHeading>
               {messageBoxText && <MessageBox>{t(messageBoxText)}</MessageBox>}
               <SubjectsWrapper>
-                <ProgrammeSubjects grades={grades} selectedGrade={selectedGrade} onChangeGrade={onChangeGrade} />
+                <ProgrammeSubjects grades={grades} selectedGrade={selectedGrade} />
               </SubjectsWrapper>
             </StyledContentWrapper>
           </LayoutItem>

package/src/Programme/ProgrammeSubjects.tsx

@@ -6,30 +6,24 @@
  *
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
-import Button from '@ndla/button';
-import { breakpoints, mq } from '@ndla/core';
+import { spacing } from '@ndla/core';
+import { SafeLinkButton } from '@ndla/safelink';
 import { NavigationBox } from '../Navigation';
 import { MessageBox } from '../Messages';
 
-const GradesMenu = styled.div`
-  margin-bottom: 28px;
-  > * {
-    margin-right: 10px;
-  }
-  > *:last-of-type {
-    margin-right: 0;
-  }
-  ${mq.range({ from: breakpoints.tablet })} {
-    margin-bottom: 40px;
+const GradesMenu = styled.ul`
+  display: flex;
+  gap: ${spacing.small};
+  li {
+    list-style: none;
   }
 `;
 
 export type GradesProps = {
   selectedGrade?: string;
-  onChangeGrade: (newGrade: string) => void;
   grades: {
     missingProgrammeSubjects?: boolean;
     name: string;
@@ -47,22 +41,32 @@ type Props = GradesProps & {
   onNavigate?: () => void;
 };
 
-const ProgrammeSubjects = ({ grades, onNavigate, onChangeGrade, selectedGrade = 'vg1' }: Props) => {
+const ProgrammeSubjects = ({ grades, onNavigate, selectedGrade = 'vg1' }: Props) => {
   const { t } = useTranslation();
-  const grade = grades.find((grade) => grade.name.toLowerCase() === selectedGrade) ?? grades[0];
+
+  const grade = useMemo(
+    () => grades.find((grade) => grade.name.toLowerCase() === selectedGrade) ?? grades[0],
+    [grades, selectedGrade],
+  );
+
   return (
     <>
-      <GradesMenu>
-        {grades.map((item) => (
-          <Button
-            key={item.name}
-            onClick={() => onChangeGrade(item.name.toLowerCase())}
-            lighter={item !== grade}
-            size="normal"
-            borderShape="rounded">
-            {item.name}
-          </Button>
-        ))}
+      <GradesMenu aria-label={t('programme.grades')}>
+        {grades.map((item) => {
+          const current = item.name.toLowerCase() === selectedGrade;
+          return (
+            <li key={item.name}>
+              <SafeLinkButton
+                to={current ? '' : item.name.toLowerCase()}
+                lighter={item !== grade}
+                borderShape="rounded"
+                buttonSize="normal"
+                aria-current={current}>
+                {item.name}
+              </SafeLinkButton>
+            </li>
+          );
+        })}
       </GradesMenu>
       {grade.missingProgrammeSubjects && <MessageBox>{t('messageBoxInfo.noContent')}</MessageBox>}
       {grade.categories.map((category) => (

package/src/Table/Table.tsx

@@ -8,60 +8,27 @@
 
 import React, { ReactNode } from 'react';
 import BEMHelper from 'react-bem-helper';
-import { ZoomOutMap } from '@ndla/icons/common';
-
-import { uuid } from '@ndla/util';
-import Dialog from '../Dialog';
 
 const classes = BEMHelper('c-table');
 
 interface Props {
   id?: string;
-  messages: {
-    dialogCloseButton: string;
-    expandButtonLabel: string;
-  };
   children?: ReactNode;
   dangerouslySetInnerHTML?: {
     __html: string;
   };
 }
 
-const Table = ({ children, messages, id, ...rest }: Props) => {
-  const tableId = id || uuid();
-  const dialogId = `dialog-${tableId}`;
-
+const Table = ({ children, id, ...rest }: Props) => {
   return (
     <div {...classes('wrapper')}>
       <div {...classes('content')}>
         <div {...classes('left-shadow')} />
-        <table id={tableId} {...classes({ extra: ['o-table'] })} {...rest}>
+        <table id={id} {...classes({ extra: ['o-table'] })} {...rest}>
           {children}
         </table>
-        <button
-          type="button"
-          data-dialog-trigger-id={dialogId}
-          data-dialog-source-id={tableId}
-          data-table-id={tableId}
-          {...classes('expand-button')}
-          aria-label={messages.expandButtonLabel}>
-          <ZoomOutMap />
-        </button>
         <div {...classes('right-shadow')} />
       </div>
-      <Dialog
-        id={dialogId}
-        label={messages.expandButtonLabel}
-        messages={{
-          close: messages.dialogCloseButton,
-        }}
-        modifier="fullscreen">
-        <div {...classes('dialog')}>
-          <div {...classes('expanded-table-wrapper')}>
-            <div {...classes('content')} />
-          </div>
-        </div>
-      </Dialog>
     </div>
   );
 };

package/src/Table/component.tables.scss

@@ -26,39 +26,6 @@
     @include mq($from: desktop) {
       @include grids-expand(4, 6, 2);
     }
-
-    &--has-scroll {
-      .c-table {
-        padding-bottom: $spacing;
-
-        &__expand-button {
-          @include mq($from: wide) {
-            display: block;
-          }
-        }
-      }
-    }
-  }
-
-  &__expand-button {
-    display: none;
-    background: $brand-color--lighter;
-    border: 0;
-    height: 38px;
-    width: 38px;
-    border-radius: 0;
-    margin: $spacing 0 0 auto;
-  }
-
-  &__expanded-table-wrapper {
-    display: inline-block;
-    background: $white;
-    padding: $spacing--medium $spacing--medium $spacing--large $spacing--medium;
-    margin: $spacing--large;
-  }
-
-  &__dialog {
-    text-align: center;
   }
 
   &__content {

package/src/TopicMenu/SubtopicLinkList.jsx

@@ -7,7 +7,6 @@
  */
 
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import { Back, ChevronRight } from '@ndla/icons/common';
 import { Switch } from '@ndla/switch';
 import styled from '@emotion/styled';
@@ -15,7 +14,6 @@ import { css } from '@emotion/react';
 import { mq, breakpoints, fonts, spacing } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
 import { withTranslation } from 'react-i18next';
-import { TopicShape } from '../shapes';
 import ContentTypeResult from '../Search/ContentTypeResult';
 import { renderAdditionalIcon } from './TopicMenu';
 
@@ -85,17 +83,6 @@ const SubtopicLink = ({
   );
 };
 
-SubtopicLink.propTypes = {
-  classes: PropTypes.func.isRequired,
-  subtopic: TopicShape.isRequired,
-  to: PropTypes.string.isRequired,
-  onSubtopicExpand: PropTypes.func,
-  expandedSubtopicId: PropTypes.string,
-  toTopic: PropTypes.func,
-  subtopicId: PropTypes.string,
-  additionalTooltipLabel: PropTypes.string,
-};
-
 class SubtopicLinkList extends Component {
   constructor(props) {
     super(props);
@@ -257,21 +244,4 @@ class SubtopicLinkList extends Component {
   }
 }
 
-SubtopicLinkList.propTypes = {
-  resourceToLinkProps: PropTypes.func.isRequired,
-  expandedSubtopicId: PropTypes.string,
-  onSubtopicExpand: PropTypes.func,
-  classes: PropTypes.func.isRequired,
-  className: PropTypes.string,
-  closeMenu: PropTypes.func.isRequired,
-  topic: TopicShape.isRequired,
-  toTopic: PropTypes.func.isRequired,
-  onGoBack: PropTypes.func.isRequired,
-  backLabel: PropTypes.string.isRequired,
-  defaultCount: PropTypes.number,
-  t: PropTypes.func.isRequired,
-  lastOpen: PropTypes.bool,
-  isUngrouped: PropTypes.bool,
-};
-
 export default withTranslation()(SubtopicLinkList);

package/src/TopicMenu/TopicMenu.jsx

@@ -10,7 +10,6 @@
 /* eslint jsx-a11y/no-noninteractive-element-to-interactive-role: 1 */
 
 import React, { Fragment, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
 import BEMHelper from 'react-bem-helper';
 import debounce from 'lodash/debounce';
 import { spacing } from '@ndla/core';
@@ -24,7 +23,6 @@ import SafeLink from '@ndla/safelink';
 import Tooltip from '@ndla/tooltip';
 import { useTranslation } from 'react-i18next';
 import SubtopicLinkList from './SubtopicLinkList';
-import { TopicShape } from '../shapes';
 
 import Logo from '../Logo';
 import FrontpageAllSubjects from '../Frontpage/FrontpageAllSubjects';
@@ -365,74 +363,6 @@ export const TopicMenu = ({
   );
 };
 
-TopicMenu.propTypes = {
-  topics: PropTypes.arrayOf(TopicShape).isRequired,
-  toFrontpage: PropTypes.func.isRequired,
-  toTopic: PropTypes.func,
-  closeAlert: PropTypes.func,
-  toSubject: PropTypes.func,
-  close: PropTypes.func,
-  defaultCount: PropTypes.number,
-  subjectTitle: PropTypes.string,
-  resourceToLinkProps: PropTypes.func.isRequired,
-  onNavigate: PropTypes.func.isRequired,
-  expandedTopicId: PropTypes.string,
-  expandedSubtopicsId: PropTypes.arrayOf(PropTypes.string).isRequired,
-  hideSearch: PropTypes.bool,
-  searchFieldComponent: PropTypes.node,
-  locale: PropTypes.string,
-  messages: PropTypes.arrayOf(
-    PropTypes.shape({
-      content: PropTypes.string.isRequired,
-      closable: PropTypes.bool.isRequired,
-      number: PropTypes.number.isRequired,
-    }),
-  ),
-  subjectCategories: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string.isRequired,
-      subjects: PropTypes.arrayOf(
-        PropTypes.shape({
-          name: PropTypes.string.isRequired,
-          url: PropTypes.string.isRequired,
-        }),
-      ),
-    }),
-  ),
-  programmes: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.string.isRequired,
-      url: PropTypes.string.isRequired,
-    }),
-  ),
-  currentProgramme: PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    grades: PropTypes.arrayOf(
-      PropTypes.shape({
-        name: PropTypes.string.isRequired,
-        categories: PropTypes.arrayOf(
-          PropTypes.shape({
-            name: PropTypes.string,
-            subjects: PropTypes.arrayOf(
-              PropTypes.shape({
-                label: PropTypes.string.isRequired,
-                url: PropTypes.string.isRequired,
-              }),
-            ),
-          }),
-        ),
-      }),
-    ).isRequired,
-    selectedGradeIndex: PropTypes.number,
-  }),
-  initialSelectedMenu: PropTypes.oneOf([
-    MENU_CURRENT_SUBJECT,
-    MENU_CURRENT_PROGRAMME,
-    MENU_PROGRAMMES,
-    MENU_ALL_SUBJECTS,
-  ]),
-};
-
 TopicMenu.defaultProps = {
   defaultCount: 12,
 };

package/src/TopicMenu/TopicMenuButton.jsx

@@ -7,7 +7,6 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import { spacing, fonts, colors, mq, breakpoints } from '@ndla/core';
 import { Menu } from '@ndla/icons/common';
@@ -49,9 +48,4 @@ const TopicMenuButton = ({ ndlaFilm, children, ...rest }) => (
   </Button>
 );
 
-TopicMenuButton.propTypes = {
-  children: PropTypes.node.isRequired,
-  ndlaFilm: PropTypes.bool,
-};
-
 export default TopicMenuButton;

package/src/locale/messages-en.ts

@@ -253,8 +253,15 @@ const messages = {
     archived: 'This is an expired and unmaintained subject.',
   },
   subjectsPage: {
+    allSubjects: 'All subjects',
     chooseSubject: 'Choose subject',
     errorDescription: 'Sorry, an error occurred while loading the subjects.',
+    confirmRemove: 'Are you sure you want to remove {{subject}} from your favorite subjects?',
+    addFavorite: 'Add favorite subject',
+    removeFavorite: 'Remove favorite subject',
+    removeConfirmed: '{{subject}} is removed from your favorite subjects',
+    addConfirmed: '{{subject}} is added to your favorite subjects',
+    shows: 'Shows',
   },
   topicPage: {
     articleErrorDescription: 'Sorry, an error occurred while loading the topic description.',
@@ -845,6 +852,7 @@ const messages = {
     searching: 'Searching...',
     create: 'Create new',
     isSelectedItem: 'Added',
+    selected: '{{count}} selected',
   },
   blogPosts: {
     blog1: {
@@ -1088,6 +1096,7 @@ const messages = {
     confirmDeleteTag: 'Are you sure you want to delete this tag? This process cannot be undone.',
     myFolders: 'My folders',
     myTags: 'My tags',
+    mySubjects: 'My subjects',
     newFolder: 'New folder',
     newFolderUnder: 'Create new folder under {{folderName}}',
     myAccount: 'My account',
@@ -1190,6 +1199,9 @@ const messages = {
     contact: 'Contact',
     help: 'Help',
   },
+  programme: {
+    grades: 'Grades',
+  },
 };
 
 export default messages;

package/src/locale/messages-nb.ts

@@ -252,8 +252,15 @@ const messages = {
     archived: 'Dette er et utgått fag som ikke vedlikeholdes.',
   },
   subjectsPage: {
+    allSubjects: 'Alle fag',
     errorDescription: 'Beklager, en feil oppstod under lasting av fagene.',
     chooseSubject: 'Velg fag',
+    confirmRemove: 'Er du sikker på at du vil fjerne {{subject}} fra favorittfag?',
+    addFavorite: 'Legg til favorittfag',
+    removeFavorite: 'Fjern favorittfag',
+    removeConfirmed: '{{subject}} er fjernet fra favorittfag',
+    addConfirmed: '{{subject}} er lagt til som favorittfag',
+    shows: 'Viser',
   },
   topicPage: {
     articleErrorDescription: 'Beklager, en feil oppstod under lasting av emnebeskrivelsen.',
@@ -844,6 +851,7 @@ const messages = {
     searching: 'Søker...',
     create: 'Opprett ny',
     isSelectedItem: 'Lagt til',
+    selected: '{{count}} valgte',
   },
   blogPosts: {
     blog1: {
@@ -1086,6 +1094,7 @@ const messages = {
     confirmDeleteTag: 'Er du sikker på at du vil slette emneknagg? Denne handlingen kan ikke endres.',
     myFolders: 'Mine mapper',
     myTags: 'Mine emneknagger',
+    mySubjects: 'Mine fag',
     newFolder: 'Ny mappe',
     newFolderUnder: 'Lag ny mappe under {{folderName}}',
     myAccount: 'Min konto',
@@ -1187,6 +1196,9 @@ const messages = {
     contact: 'Kontakt',
     help: 'Hjelp',
   },
+  programme: {
+    grades: 'Trinn',
+  },
 };
 
 export default messages;

package/src/locale/messages-nn.ts

@@ -252,8 +252,15 @@ const messages = {
     archived: 'Dette er eit utgått fag som ikkje blir halde ved like.',
   },
   subjectsPage: {
+    allSubjects: 'Alle fag',
     errorDescription: 'Orsak, ein feil oppstod under lasting av faga.',
     chooseSubject: 'Vel fag',
+    confirmRemove: 'Er du sikker på at du vil fjerne {{subject}} fra favorittfag?',
+    addFavorite: 'Legg til favorittfag',
+    removeFavorite: 'Fjern favorittfag',
+    removeConfirmed: '{{subject}} er fjerna frå favorittfag',
+    addConfirmed: '{{subject}} er lagt til som favorittfag',
+    shows: 'Viser',
   },
   topicPage: {
     articleErrorDescription: 'Orsak, ein feil oppstod under lasting av emneskildringa.',
@@ -845,6 +852,7 @@ const messages = {
     searching: 'Søkjer...',
     create: 'Opprett ny',
     isSelectedItem: 'Lagt til',
+    selected: '{{count}} valgte',
   },
   blogPosts: {
     blog1: {
@@ -1087,6 +1095,7 @@ const messages = {
     confirmDeleteTag: 'Er du sikker på at du vil slette tag? Denne handlinga kan ikkje endrast.',
     myFolders: 'Mine mapper',
     myTags: 'Mine emneknaggar',
+    mySubjects: 'Mine fag',
     newFolder: 'Ny mappe',
     newFolderUnder: 'Lag ny mappe under {{folderName}}',
     myAccount: 'Min konto',
@@ -1188,6 +1197,9 @@ const messages = {
     contact: 'Kontakt',
     help: 'Hjelp',
   },
+  programme: {
+    grades: 'Trinn',
+  },
 };
 
 export default messages;

package/src/locale/messages-se.ts

@@ -252,8 +252,15 @@ const messages = {
     archived: 'Dát leat heaittihuvvon fága mii ii ođasmahttojuvvo.',
   },
   subjectsPage: {
+    allSubjects: 'Buot fágat',
     errorDescription: 'Šállošat, boasttuvuohta čuožžilii fágaid viežžamis.',
     chooseSubject: 'Vállje fága',
+    confirmRemove: 'Er du sikker på at du vil fjerne {{subject}} fra favorittfag?',
+    addFavorite: 'Legg til favorittfag',
+    removeFavorite: 'Fjern favorittfag',
+    removeConfirmed: '{{subject}} er fjernet fra favorittfag',
+    addConfirmed: '{{subject}} er lagt til som favorittfag',
+    shows: 'Viser',
   },
   topicPage: {
     articleErrorDescription: 'Šállošat, boasttuvuohta čuožžilii fáddáčilgehusa viežžamis.',
@@ -845,6 +852,7 @@ const messages = {
     searching: 'Ohcá...',
     create: 'Ráhkat ođđa',
     isSelectedItem: 'Lasihuvvon',
+    selected: '{{count}} valgte',
   },
   blogPosts: {
     blog1: {
@@ -1087,6 +1095,7 @@ const messages = {
     confirmDeleteTag: 'Leat go sihkar ahte dáhtut sihkkut fáddágilkora? Dan ii sáhte gáhtat.',
     myFolders: 'Mu máhpat',
     myTags: 'Mu fáddágilkorat',
+    mySubjects: 'Mine fag',
     newFolder: 'Ođđa máhppa',
     newFolderUnder: 'Ráhkat ođđa máhpa dán vuolde {{folderName}}',
     myAccount: 'Mu kontu',
@@ -1189,6 +1198,9 @@ const messages = {
     contact: 'Váldde oktavuođa',
     help: 'Veahket',
   },
+  programme: {
+    grades: 'Trinn',
+  },
 };
 
 export default messages;