@ndla/ui 22.2.0 → 24.0.0

package/lib/index-javascript.js

@@ -23,78 +23,6 @@ Object.defineProperty(exports, "FilterButtons", {
     return _Filter.FilterButtons;
   }
 });
-Object.defineProperty(exports, "SearchOverlay", {
-  enumerable: true,
-  get: function get() {
-    return _Search.SearchOverlay;
-  }
-});
-Object.defineProperty(exports, "SearchField", {
-  enumerable: true,
-  get: function get() {
-    return _Search.SearchField;
-  }
-});
-Object.defineProperty(exports, "SearchPage", {
-  enumerable: true,
-  get: function get() {
-    return _Search.SearchPage;
-  }
-});
-Object.defineProperty(exports, "SearchResult", {
-  enumerable: true,
-  get: function get() {
-    return _Search.SearchResult;
-  }
-});
-Object.defineProperty(exports, "SearchResultAuthor", {
-  enumerable: true,
-  get: function get() {
-    return _Search.SearchResultAuthor;
-  }
-});
-Object.defineProperty(exports, "SearchResultList", {
-  enumerable: true,
-  get: function get() {
-    return _Search.SearchResultList;
-  }
-});
-Object.defineProperty(exports, "SearchResultItem", {
-  enumerable: true,
-  get: function get() {
-    return _Search.SearchResultItem;
-  }
-});
-Object.defineProperty(exports, "SearchFilter", {
-  enumerable: true,
-  get: function get() {
-    return _Search.SearchFilter;
-  }
-});
-Object.defineProperty(exports, "SearchFilterList", {
-  enumerable: true,
-  get: function get() {
-    return _Search.SearchFilterList;
-  }
-});
-Object.defineProperty(exports, "SearchPopoverFilter", {
-  enumerable: true,
-  get: function get() {
-    return _Search.SearchPopoverFilter;
-  }
-});
-Object.defineProperty(exports, "ActiveFilters", {
-  enumerable: true,
-  get: function get() {
-    return _Search.ActiveFilters;
-  }
-});
-Object.defineProperty(exports, "ToggleSearchButton", {
-  enumerable: true,
-  get: function get() {
-    return _Search.ToggleSearchButton;
-  }
-});
 Object.defineProperty(exports, "TopicIntroductionList", {
   enumerable: true,
   get: function get() {
@@ -146,8 +74,6 @@ Object.defineProperty(exports, "CompetenceGoalsDialog", {
 
 var _Filter = require("./Filter");
 
-var _Search = require("./Search");
-
 var _TopicIntroductionList = _interopRequireDefault(require("./TopicIntroductionList"));
 
 var _TopicMenu = _interopRequireWildcard(require("./TopicMenu"));

package/lib/index.d.ts

@@ -89,3 +89,4 @@ export type { Snack, SnackContext } from './SnackBar';
 export { InfoBlock } from './InfoBlock';
 export { TreeStructure } from './TreeStructure';
 export type { FolderType, TreeStructureProps, TreeStructureMenuProps } from './TreeStructure';
+export { SearchField, SearchResultList, SearchResultItem, ActiveFilters, ToggleSearchButton } from './Search';

package/lib/index.js

@@ -188,7 +188,12 @@ var _exportNames = {
   BaseSnack: true,
   DefaultSnackbar: true,
   InfoBlock: true,
-  TreeStructure: true
+  TreeStructure: true,
+  SearchField: true,
+  SearchResultList: true,
+  SearchResultItem: true,
+  ActiveFilters: true,
+  ToggleSearchButton: true
 };
 Object.defineProperty(exports, "ArticleByline", {
   enumerable: true,
@@ -1288,6 +1293,36 @@ Object.defineProperty(exports, "TreeStructure", {
     return _TreeStructure.TreeStructure;
   }
 });
+Object.defineProperty(exports, "SearchField", {
+  enumerable: true,
+  get: function get() {
+    return _Search.SearchField;
+  }
+});
+Object.defineProperty(exports, "SearchResultList", {
+  enumerable: true,
+  get: function get() {
+    return _Search.SearchResultList;
+  }
+});
+Object.defineProperty(exports, "SearchResultItem", {
+  enumerable: true,
+  get: function get() {
+    return _Search.SearchResultItem;
+  }
+});
+Object.defineProperty(exports, "ActiveFilters", {
+  enumerable: true,
+  get: function get() {
+    return _Search.ActiveFilters;
+  }
+});
+Object.defineProperty(exports, "ToggleSearchButton", {
+  enumerable: true,
+  get: function get() {
+    return _Search.ToggleSearchButton;
+  }
+});
 
 var _indexJavascript = require("./index-javascript");
 
@@ -1440,6 +1475,8 @@ var _InfoBlock = require("./InfoBlock");
 
 var _TreeStructure = require("./TreeStructure");
 
+var _Search = require("./Search");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

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

@@ -86,6 +86,8 @@ declare const messages: {
         detailView: string;
         shortView: string;
         myPage: {
+            confirmDeleteAccount: string;
+            confirmDeleteAccountButton: string;
             myPage: string;
             logout: string;
             loginTerms: string;

package/lib/locale/messages-en.js

@@ -987,6 +987,8 @@ var messages = _objectSpread(_objectSpread({
     detailView: 'Detailed listview',
     shortView: 'Short view',
     myPage: {
+      confirmDeleteAccount: 'Are you sure you want to delete your account?',
+      confirmDeleteAccountButton: 'Delete account',
       myPage: 'My page',
       logout: 'Log out of My NDLA',
       loginTerms: 'Log in with Feide to receive access. By logging on your accept your terms of service',

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

@@ -86,6 +86,8 @@ declare const messages: {
         detailView: string;
         shortView: string;
         myPage: {
+            confirmDeleteAccount: string;
+            confirmDeleteAccountButton: string;
             myPage: string;
             deleteAccount: string;
             logout: string;

package/lib/locale/messages-nb.js

@@ -987,6 +987,8 @@ var messages = _objectSpread(_objectSpread({
     detailView: 'Detaljrik listevisning',
     shortView: 'Kort visning',
     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',

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

@@ -86,6 +86,8 @@ declare const messages: {
         detailView: string;
         shortView: string;
         myPage: {
+            confirmDeleteAccount: string;
+            confirmDeleteAccountButton: string;
             myPage: string;
             deleteAccount: string;
             logout: string;

package/lib/locale/messages-nn.js

@@ -987,6 +987,8 @@ var messages = _objectSpread(_objectSpread({
     detailView: 'Detaljrik listevisning',
     shortView: 'Kort visning',
     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',

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

@@ -86,6 +86,8 @@ declare const messages: {
         detailView: string;
         shortView: string;
         myPage: {
+            confirmDeleteAccount: string;
+            confirmDeleteAccountButton: string;
             myPage: string;
             deleteAccount: string;
             logout: string;

package/lib/locale/messages-se.js

@@ -987,6 +987,8 @@ var messages = _objectSpread(_objectSpread({
     detailView: 'Detaljrik listevisning',
     shortView: 'Kort visning',
     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',

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

@@ -86,6 +86,8 @@ declare const messages: {
         detailView: string;
         shortView: string;
         myPage: {
+            confirmDeleteAccount: string;
+            confirmDeleteAccountButton: string;
             myPage: string;
             deleteAccount: string;
             logout: string;

package/lib/locale/messages-sma.js

@@ -987,6 +987,8 @@ var messages = _objectSpread(_objectSpread({
     detailView: 'Detaljrik listevisning',
     shortView: 'Kort visning',
     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',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "22.2.0",
+  "version": "24.0.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,21 +31,22 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^3.3.0",
-    "@ndla/carousel": "^1.2.15",
-    "@ndla/core": "^2.3.3",
-    "@ndla/forms": "^3.1.3",
-    "@ndla/hooks": "^1.1.4",
-    "@ndla/icons": "^1.11.3",
-    "@ndla/licenses": "^5.0.6",
-    "@ndla/modal": "^1.2.17",
-    "@ndla/notion": "^3.1.29",
-    "@ndla/safelink": "^2.2.6",
-    "@ndla/switch": "^0.1.10",
-    "@ndla/tabs": "^1.1.14",
-    "@ndla/tooltip": "^2.1.5",
+    "@ndla/article-scripts": "^3.0.1",
+    "@ndla/button": "^3.3.1",
+    "@ndla/carousel": "^1.2.16",
+    "@ndla/core": "^2.3.4",
+    "@ndla/forms": "^3.1.4",
+    "@ndla/hooks": "^1.1.5",
+    "@ndla/icons": "^1.11.4",
+    "@ndla/licenses": "^5.0.8",
+    "@ndla/modal": "^1.2.18",
+    "@ndla/notion": "^3.1.31",
+    "@ndla/safelink": "^2.2.7",
+    "@ndla/switch": "^0.1.11",
+    "@ndla/tabs": "^1.1.15",
+    "@ndla/tooltip": "^2.2.0",
     "@ndla/types-learningpath-api": "^0.0.12",
-    "@ndla/util": "^3.0.0",
+    "@ndla/util": "^3.0.1",
     "@reach/menu-button": "^0.16.2",
     "@reach/slider": "^0.16.0",
     "focus-trap-react": "^8.9.2",
@@ -84,5 +85,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "12ed2984919fd75fbb7f1b1e55c1d5903fd51d51"
+  "gitHead": "5ae8101f78ef46929de137ecbdd3275a5ef72649"
 }

package/src/Animation/DisplayOnPageYOffset.tsx

@@ -8,7 +8,7 @@
 
 import React, { Component, ReactNode } from 'react';
 import PropTypes from 'prop-types';
-import throttle from 'lodash/throttle';
+import { throttle } from 'lodash';
 import Fade from './Fade';
 
 interface Props {

package/src/Article/Article.tsx

@@ -8,7 +8,7 @@
 
 import React, { ComponentType, ReactNode, useEffect, useRef, useState, forwardRef } from 'react';
 import BEMHelper from 'react-bem-helper';
-import isString from 'lodash/isString';
+import { isString } from 'lodash';
 import parse from 'html-react-parser';
 import styled from '@emotion/styled';
 

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/ArticleByline.tsx

@@ -13,8 +13,7 @@ import Button, { CopyButton } from '@ndla/button';
 import { colors, fonts, spacing } from '@ndla/core';
 import { copyTextToClipboard, printPage } from '@ndla/util';
 import { useTranslation } from 'react-i18next';
-import { LicenseByline } from '@ndla/licenses';
-import { getLicenseByAbbreviation } from '@ndla/licenses';
+import { LicenseByline, getLicenseByAbbreviation } from '@ndla/licenses';
 import { TFunction } from 'i18next';
 
 const Wrapper = styled.div`

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/Breadcrumb/ActionBreadcrumb.tsx

@@ -11,8 +11,7 @@ import { colors, fonts, spacing } from '@ndla/core';
 import { ChevronRight } from '@ndla/icons/common';
 import SafeLink from '@ndla/safelink';
 import React from 'react';
-import { MenuButton } from '@ndla/button';
-import { MenuItemProps } from '@ndla/button';
+import { MenuButton, MenuItemProps } from '@ndla/button';
 import Breadcrumb from './Breadcrumb';
 import { IndexedBreadcrumbItem, SimpleBreadcrumbItem } from './BreadcrumbItem';
 

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/Figure/FigureOpenDialogButton.tsx

@@ -8,8 +8,7 @@
 
 import React from 'react';
 import { Play } from '@ndla/icons/common';
-import { ExpandTwoArrows } from '@ndla/icons/action';
-import { CursorClick } from '@ndla/icons/action';
+import { ExpandTwoArrows, CursorClick } from '@ndla/icons/action';
 
 interface Props {
   type?: 'image' | 'video' | 'h5p' | 'iframe' | 'external';