@ndla/ui 33.2.0 → 33.3.0

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

@@ -202,6 +202,9 @@ declare const messages: {
         contact: string;
         help: string;
     };
+    programme: {
+        grades: string;
+    };
     treeStructure: {
         folderChildOptions: {
             edit: string;
@@ -445,6 +448,7 @@ declare const messages: {
         removeFavorite: string;
         removeConfirmed: string;
         addConfirmed: string;
+        shows: string;
     };
     topicPage: {
         articleErrorDescription: string;
@@ -1006,6 +1010,7 @@ declare const messages: {
         searching: string;
         create: string;
         isSelectedItem: string;
+        selected: string;
     };
     blogPosts: {
         blog1: {

package/lib/locale/messages-en.js

@@ -251,7 +251,8 @@ var messages = _objectSpread(_objectSpread({
     addFavorite: 'Add favorite subject',
     removeFavorite: 'Remove favorite subject',
     removeConfirmed: '{{subject}} is removed from your favorite subjects',
-    addConfirmed: '{{subject}} is added to your favorite subjects'
+    addConfirmed: '{{subject}} is added to your favorite subjects',
+    shows: 'Shows'
   },
   topicPage: {
     articleErrorDescription: 'Sorry, an error occurred while loading the topic description.',
@@ -803,7 +804,8 @@ var messages = _objectSpread(_objectSpread({
     numberHits: "Search returned {{hits}} hits",
     searching: 'Searching...',
     create: 'Create new',
-    isSelectedItem: 'Added'
+    isSelectedItem: 'Added',
+    selected: '{{count}} selected'
   },
   blogPosts: {
     blog1: {
@@ -1147,6 +1149,9 @@ var messages = _objectSpread(_objectSpread({
     search: 'Search',
     contact: 'Contact',
     help: 'Help'
+  },
+  programme: {
+    grades: 'Grades'
   }
 });
 var _default = messages;

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

@@ -202,6 +202,9 @@ declare const messages: {
         contact: string;
         help: string;
     };
+    programme: {
+        grades: string;
+    };
     treeStructure: {
         folderChildOptions: {
             edit: string;
@@ -445,6 +448,7 @@ declare const messages: {
         removeFavorite: string;
         removeConfirmed: string;
         addConfirmed: string;
+        shows: string;
     };
     topicPage: {
         articleErrorDescription: string;
@@ -1006,6 +1010,7 @@ declare const messages: {
         searching: string;
         create: string;
         isSelectedItem: string;
+        selected: string;
     };
     blogPosts: {
         blog1: {

package/lib/locale/messages-nb.js

@@ -251,7 +251,8 @@ var messages = _objectSpread(_objectSpread({
     addFavorite: 'Legg til favorittfag',
     removeFavorite: 'Fjern favorittfag',
     removeConfirmed: '{{subject}} er fjernet fra favorittfag',
-    addConfirmed: '{{subject}} er lagt til som favorittfag'
+    addConfirmed: '{{subject}} er lagt til som favorittfag',
+    shows: 'Viser'
   },
   topicPage: {
     articleErrorDescription: 'Beklager, en feil oppstod under lasting av emnebeskrivelsen.',
@@ -803,7 +804,8 @@ var messages = _objectSpread(_objectSpread({
     numberHits: "S\xF8ket gav {{hits}} treff",
     searching: 'Søker...',
     create: 'Opprett ny',
-    isSelectedItem: 'Lagt til'
+    isSelectedItem: 'Lagt til',
+    selected: '{{count}} valgte'
   },
   blogPosts: {
     blog1: {
@@ -1147,6 +1149,9 @@ var messages = _objectSpread(_objectSpread({
     search: 'Søk',
     contact: 'Kontakt',
     help: 'Hjelp'
+  },
+  programme: {
+    grades: 'Trinn'
   }
 });
 var _default = messages;

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

@@ -202,6 +202,9 @@ declare const messages: {
         contact: string;
         help: string;
     };
+    programme: {
+        grades: string;
+    };
     treeStructure: {
         folderChildOptions: {
             edit: string;
@@ -445,6 +448,7 @@ declare const messages: {
         removeFavorite: string;
         removeConfirmed: string;
         addConfirmed: string;
+        shows: string;
     };
     topicPage: {
         articleErrorDescription: string;
@@ -1006,6 +1010,7 @@ declare const messages: {
         searching: string;
         create: string;
         isSelectedItem: string;
+        selected: string;
     };
     blogPosts: {
         blog1: {

package/lib/locale/messages-nn.js

@@ -251,7 +251,8 @@ var messages = _objectSpread(_objectSpread({
     addFavorite: 'Legg til favorittfag',
     removeFavorite: 'Fjern favorittfag',
     removeConfirmed: '{{subject}} er fjerna frå favorittfag',
-    addConfirmed: '{{subject}} er lagt til som favorittfag'
+    addConfirmed: '{{subject}} er lagt til som favorittfag',
+    shows: 'Viser'
   },
   topicPage: {
     articleErrorDescription: 'Orsak, ein feil oppstod under lasting av emneskildringa.',
@@ -803,7 +804,8 @@ var messages = _objectSpread(_objectSpread({
     numberHits: "S\xF8ket gav {{hits}} treff",
     searching: 'Søkjer...',
     create: 'Opprett ny',
-    isSelectedItem: 'Lagt til'
+    isSelectedItem: 'Lagt til',
+    selected: '{{count}} valgte'
   },
   blogPosts: {
     blog1: {
@@ -1147,6 +1149,9 @@ var messages = _objectSpread(_objectSpread({
     search: 'Søk',
     contact: 'Kontakt',
     help: 'Hjelp'
+  },
+  programme: {
+    grades: 'Trinn'
   }
 });
 var _default = messages;

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

@@ -202,6 +202,9 @@ declare const messages: {
         contact: string;
         help: string;
     };
+    programme: {
+        grades: string;
+    };
     treeStructure: {
         folderChildOptions: {
             edit: string;
@@ -445,6 +448,7 @@ declare const messages: {
         removeFavorite: string;
         removeConfirmed: string;
         addConfirmed: string;
+        shows: string;
     };
     topicPage: {
         articleErrorDescription: string;
@@ -1006,6 +1010,7 @@ declare const messages: {
         searching: string;
         create: string;
         isSelectedItem: string;
+        selected: string;
     };
     blogPosts: {
         blog1: {

package/lib/locale/messages-se.js

@@ -251,7 +251,8 @@ var messages = _objectSpread(_objectSpread({
     addFavorite: 'Legg til favorittfag',
     removeFavorite: 'Fjern favorittfag',
     removeConfirmed: '{{subject}} er fjernet fra favorittfag',
-    addConfirmed: '{{subject}} er lagt til som favorittfag'
+    addConfirmed: '{{subject}} er lagt til som favorittfag',
+    shows: 'Viser'
   },
   topicPage: {
     articleErrorDescription: 'Šállošat, boasttuvuohta čuožžilii fáddáčilgehusa viežžamis.',
@@ -803,7 +804,8 @@ var messages = _objectSpread(_objectSpread({
     numberHits: "Ohcamis ledje {{hits}} deaivama",
     searching: 'Ohcá...',
     create: 'Ráhkat ođđa',
-    isSelectedItem: 'Lasihuvvon'
+    isSelectedItem: 'Lasihuvvon',
+    selected: '{{count}} valgte'
   },
   blogPosts: {
     blog1: {
@@ -1147,6 +1149,9 @@ var messages = _objectSpread(_objectSpread({
     search: 'Oza',
     contact: 'Váldde oktavuođa',
     help: 'Veahket'
+  },
+  programme: {
+    grades: 'Trinn'
   }
 });
 var _default = messages;

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

@@ -202,6 +202,9 @@ declare const messages: {
         contact: string;
         help: string;
     };
+    programme: {
+        grades: string;
+    };
     treeStructure: {
         folderChildOptions: {
             edit: string;
@@ -445,6 +448,7 @@ declare const messages: {
         removeFavorite: string;
         removeConfirmed: string;
         addConfirmed: string;
+        shows: string;
     };
     topicPage: {
         articleErrorDescription: string;
@@ -1006,6 +1010,7 @@ declare const messages: {
         searching: string;
         create: string;
         isSelectedItem: string;
+        selected: string;
     };
     blogPosts: {
         blog1: {

package/lib/locale/messages-sma.js

@@ -251,7 +251,8 @@ var messages = _objectSpread(_objectSpread({
     addFavorite: 'Legg til favorittfag',
     removeFavorite: 'Fjern favorittfag',
     removeConfirmed: '{{subject}} er fjernet fra favorittfag',
-    addConfirmed: '{{subject}} er lagt til som favorittfag'
+    addConfirmed: '{{subject}} er lagt til som favorittfag',
+    shows: 'Viser'
   },
   topicPage: {
     articleErrorDescription: 'Beklager, en feil oppstod under lasting av emnebeskrivelsen.',
@@ -803,7 +804,8 @@ var messages = _objectSpread(_objectSpread({
     numberHits: "S\xF8ket gav {{hits}} treff",
     searching: 'Søker...',
     create: 'Opprett ny',
-    isSelectedItem: 'Lagt til'
+    isSelectedItem: 'Lagt til',
+    selected: '{{count}} valgte'
   },
   blogPosts: {
     blog1: {
@@ -1147,6 +1149,9 @@ var messages = _objectSpread(_objectSpread({
     search: 'Søk',
     contact: 'Kontakt',
     help: 'Hjelp'
+  },
+  programme: {
+    grades: 'Trinn'
   }
 });
 var _default = messages;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "33.2.0",
+  "version": "33.3.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,20 +31,20 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/article-scripts": "^3.0.13",
-    "@ndla/button": "^7.0.2",
-    "@ndla/carousel": "^2.1.0",
+    "@ndla/article-scripts": "^3.0.14",
+    "@ndla/button": "^7.0.3",
+    "@ndla/carousel": "^2.1.1",
     "@ndla/core": "^3.0.3",
-    "@ndla/forms": "^4.1.6",
+    "@ndla/forms": "^4.1.7",
     "@ndla/hooks": "^1.2.0",
-    "@ndla/icons": "^2.1.0",
-    "@ndla/licenses": "^6.1.4",
-    "@ndla/modal": "^2.2.1",
-    "@ndla/notion": "^4.1.8",
-    "@ndla/safelink": "^3.1.6",
+    "@ndla/icons": "^2.1.1",
+    "@ndla/licenses": "^6.1.5",
+    "@ndla/modal": "^2.2.2",
+    "@ndla/notion": "^4.1.9",
+    "@ndla/safelink": "^3.1.7",
     "@ndla/switch": "^1.0.3",
-    "@ndla/tabs": "^2.1.0",
-    "@ndla/tooltip": "^4.0.2",
+    "@ndla/tabs": "^2.1.1",
+    "@ndla/tooltip": "^4.0.3",
     "@ndla/types-learningpath-api": "^0.0.17",
     "@ndla/util": "^3.1.9",
     "@reach/menu-button": "^0.16.2",
@@ -56,7 +56,7 @@
     "invariant": "^2.2.3",
     "react-bem-helper": "1.4.1",
     "react-device-detect": "^2.2.2",
-    "react-select": "^5.4.0",
+    "react-select": "^5.7.0",
     "react-swipeable": "^7.0.0",
     "remarkable": "^2.0.1",
     "shave": "^2.5.10"
@@ -66,7 +66,6 @@
     "@emotion/styled": "^11.10.4",
     "i18next": "^21.9.2",
     "lodash": "^4.17.20",
-    "prop-types": "^15.8.1",
     "react": "^16.8.4 || ^17.0.0",
     "react-i18next": "^11.18.6",
     "react-router-dom": "^6.3.0"
@@ -74,14 +73,14 @@
   "devDependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.11.0",
     "@types/reach__dialog": "^0.1.0",
-    "css-loader": "^2.1.0",
-    "mini-css-extract-plugin": "^0.5.0",
-    "sass-loader": "^7.1.0",
-    "webpack": "^4.44.1",
-    "webpack-cli": "^4.10.0"
+    "css-loader": "^6.7.3",
+    "mini-css-extract-plugin": "^2.7.2",
+    "sass-loader": "^13.2.0",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f2dcda65a73ee4236afeda1d8e051bdfe6eccb7e"
+  "gitHead": "48dd90f1aea68b7f7107d331ea9ca9df4e51b3be"
 }

package/src/Animation/DisplayOnPageYOffset.tsx

@@ -7,7 +7,6 @@
  */
 
 import React, { Component, ReactNode } from 'react';
-import PropTypes from 'prop-types';
 import throttle from 'lodash/throttle';
 import Fade from './Fade';
 
@@ -60,11 +59,6 @@ export default class DisplayOnPageYOffset extends Component<Props, State> {
     const { children } = this.props;
     return <Fade show={this.state.show}>{children}</Fade>;
   }
-  static propTypes = {
-    children: PropTypes.node.isRequired,
-    yOffsetMin: PropTypes.number.isRequired,
-    yOffsetMax: PropTypes.number,
-  };
 
   static defaultProps = {
     yOffsetMax: null,

package/src/Article/ArticleHeaderWrapper.tsx

@@ -9,9 +9,8 @@
 import React, { ComponentType, ReactNode, useEffect, useState } from 'react';
 import BEMHelper from 'react-bem-helper';
 import { useTranslation } from 'react-i18next';
-import Button from '@ndla/button';
+import { ButtonV2 } from '@ndla/button';
 import { isMobile } from 'react-device-detect';
-import { fonts, colors } from '@ndla/core';
 
 import styled from '@emotion/styled';
 import { FooterHeaderIcon } from '@ndla/icons/common';
@@ -22,50 +21,10 @@ const classes = new BEMHelper({
   prefix: 'c-',
 });
 
-type OpenButtonProps = {
-  onClick: () => void;
-  children: ReactNode;
-};
-
-export const OpenButton = ({ children, onClick }: OpenButtonProps) => (
-  <Button size="xsmall" lighter borderShape="rounded" onClick={onClick}>
-    {children}
-  </Button>
-);
-
-const CompetenceWrapper = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-const CompetenceBadge = styled.span`
-  display: inline-flex;
-  background: ${colors.brand.greyLighter};
-  border-radius: 36px;
-  font-weight: ${fonts.weight.semibold};
-  ${fonts.sizes('12px', '15px')};
-  align-items: center;
-  color: ${colors.text.primary};
-  font-family: ${fonts.sans};
-  padding: 0 6px;
-  height: 25px;
-  margin-right: 7px;
-`;
-
 const CompetenceBadgeText = styled.span`
   padding: 0 5px;
 `;
 
-type CompetenceButtonWrapperProps = {
-  addSpace: boolean | undefined;
-};
-
-const CompetenceButtonWrapper = styled.div<CompetenceButtonWrapperProps>`
-  display: flex;
-  align-items: center;
-  ${(props) => props.addSpace && `padding-left: 12px;`}
-`;
-
 type Props = {
   competenceGoals?:
     | ((inp: { Dialog: ComponentType; dialogProps: { isOpen: boolean; onClose: () => void } }) => ReactNode)
@@ -118,21 +77,10 @@ const ArticleHeaderWrapper = ({ children, competenceGoals, competenceGoalTypes }
   return (
     <div {...classes('header')}>
       {children}
-      <CompetenceWrapper>
-        {competenceGoalTypes &&
-          competenceGoalTypes.map((type) => (
-            <CompetenceBadge key={type}>
-              <FooterHeaderIcon />
-              <CompetenceBadgeText>{type}</CompetenceBadgeText>
-            </CompetenceBadge>
-          ))}
-        <CompetenceButtonWrapper addSpace={competenceGoalTypes && competenceGoalTypes.length > 0}>
-          <OpenButton onClick={openDialog}>
-            <FooterHeaderIcon />
-            <CompetenceBadgeText>{t('competenceGoals.showCompetenceGoals')}</CompetenceBadgeText>
-          </OpenButton>
-        </CompetenceButtonWrapper>
-      </CompetenceWrapper>
+      <ButtonV2 size="xsmall" colorTheme="light" shape="pill" onClick={openDialog}>
+        <FooterHeaderIcon />
+        <CompetenceBadgeText>{t('competenceGoals.showCompetenceGoals')}</CompetenceBadgeText>
+      </ButtonV2>
       {dialog}
     </div>
   );

package/src/Aside/Aside.tsx

@@ -7,7 +7,6 @@
  */
 
 import React, { ReactNode } from 'react';
-import PropTypes from 'prop-types';
 import BEMHelper from 'react-bem-helper';
 
 const classes = BEMHelper({
@@ -38,13 +37,4 @@ const Aside = ({ children, narrowScreen = false, dangerouslySetInnerHTML, wideSc
   );
 };
 
-Aside.propTypes = {
-  dangerouslySetInnerHTML: PropTypes.shape({
-    __html: PropTypes.string.isRequired,
-  }),
-  children: PropTypes.node,
-  narrowScreen: PropTypes.bool,
-  wideScreen: PropTypes.bool,
-};
-
 export default Aside;

package/src/ContentTypeBadge/ContentTypeBadge.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import BEMHelper from 'react-bem-helper';
 
 import {
@@ -16,8 +15,6 @@ import {
 import { MenuBook } from '@ndla/icons/action';
 
 import * as contentTypes from '../model/ContentType';
-// @ts-ignore
-import { ContentTypeShape } from '../shapes';
 
 const classes = new BEMHelper({
   name: 'content-type-badge',
@@ -77,14 +74,6 @@ export const ContentTypeBadge = ({ type, background, title, size = 'small', bord
   return <div {...classes('', modifiers)}>{icon}</div>;
 };
 
-ContentTypeBadge.propTypes = {
-  size: PropTypes.oneOf(['xx-small', 'x-small', 'small', 'large']),
-  type: ContentTypeShape,
-  title: PropTypes.string,
-  background: PropTypes.bool,
-  border: PropTypes.bool,
-};
-
 ContentTypeBadge.defaultProps = {
   size: 'small',
   border: true,

package/src/CopyParagraphButton/CopyParagraphButton.tsx

@@ -59,7 +59,7 @@ const CopyButton = ({ onClick, title, tooltip, content }: CopyButtonProps) => {
   return (
     <div>
       <Tooltip tooltip={tooltip}>
-        <IconButton onClick={onClick} data-title={title} aria-label={`${tooltip}: ${title}`}>
+        <IconButton onClick={onClick} data-title={title} aria-label={`${tooltip}: ${content}`}>
           <Link title={''} />
         </IconButton>
       </Tooltip>

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>