@ndla/ui 23.0.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "23.0.0",
+  "version": "24.0.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -38,13 +38,13 @@
     "@ndla/forms": "^3.1.4",
     "@ndla/hooks": "^1.1.5",
     "@ndla/icons": "^1.11.4",
-    "@ndla/licenses": "^5.0.7",
+    "@ndla/licenses": "^5.0.8",
     "@ndla/modal": "^1.2.18",
-    "@ndla/notion": "^3.1.30",
+    "@ndla/notion": "^3.1.31",
     "@ndla/safelink": "^2.2.7",
     "@ndla/switch": "^0.1.11",
     "@ndla/tabs": "^1.1.15",
-    "@ndla/tooltip": "^2.1.6",
+    "@ndla/tooltip": "^2.2.0",
     "@ndla/types-learningpath-api": "^0.0.12",
     "@ndla/util": "^3.0.1",
     "@reach/menu-button": "^0.16.2",
@@ -85,5 +85,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2f0095b2f2c730ff16d8c71fa8e867db87607c66"
+  "gitHead": "5ae8101f78ef46929de137ecbdd3275a5ef72649"
 }

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/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;

package/src/FileList/FileList.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
-import BEMHelper from 'react-bem-helper';
+import styled from '@emotion/styled';
+import { colors, fonts, spacing } from '@ndla/core';
 import File from './File';
 
-const classes = BEMHelper('c-file-list');
-
 export interface FileType {
   title: string;
   formats: FileFormat[];
@@ -22,15 +21,45 @@ interface Props {
   files: FileType[];
 }
 
+const FileListSection = styled.section`
+  margin: ${spacing.large} 0;
+  padding: ${spacing.small} 0 ${spacing.normal} ${spacing.normal};
+  border-left: 2px solid ${colors.brand.greyLightest};
+  font-family: ${fonts.sans};
+
+  .c-icon {
+    margin-top: 3px;
+    flex-shrink: 0;
+    margin-right: ${spacing.small};
+    height: 18px;
+    width: 18px;
+  }
+`;
+
+const FileListHeading = styled.h1`
+  ${fonts.sizes('16px', '18px')};
+  letter-spacing: 0.05em;
+  margin: 0 0 ${spacing.xsmall} 0;
+  padding-bottom: ${spacing.xsmall};
+  border-bottom: 2px solid ${colors.brand.greyLight};
+  font-weight: ${fonts.weight.bold};
+  text-transform: uppercase;
+`;
+
+const FilesList = styled.ul`
+  margin: 0;
+  padding: 0;
+`;
+
 const FileList = ({ files, heading, id }: Props) => (
-  <section {...classes()}>
-    <h1 {...classes('heading')}>{heading}</h1>
-    <ul {...classes('files')}>
+  <FileListSection>
+    <FileListHeading>{heading}</FileListHeading>
+    <FilesList>
       {files.map((file) => (
         <File key={`file-${id}-${file.title}`} file={file} id={id} />
       ))}
-    </ul>
-  </section>
+    </FilesList>
+  </FileListSection>
 );
 
 export default FileList;

package/src/InfoBox/InfoBox.tsx

@@ -1,11 +1,31 @@
+import styled from '@emotion/styled';
+import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core/src';
 import React, { ReactNode } from 'react';
-import BEMHelper from 'react-bem-helper';
-
-const classes = BEMHelper('c-info-box');
 
 interface Props {
   children?: ReactNode;
 }
-const InfoBox = ({ children }: Props) => <div {...classes()}>{children}</div>;
+
+const StyledInfoBox = styled.div`
+  background: ${colors.support.yellowLight};
+  padding: ${spacing.small} ${spacing.normal};
+  font-family: ${fonts.sans};
+  ${fonts.sizes('14px', '18px')};
+  margin-bottom: ${spacing.medium};
+  ${mq.range({ from: breakpoints.tablet })} {
+    ${fonts.sizes('16px', '20px')};
+    padding: ${spacing.normal};
+  }
+
+  & > *:first-child {
+    margin-top: 0;
+  }
+
+  & > *:last-child {
+    margin-bottom: 0;
+  }
+`;
+
+const InfoBox = ({ children }: Props) => <StyledInfoBox>{children}</StyledInfoBox>;
 
 export default InfoBox;