@ndla/ui 22.3.0 → 24.1.0

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

package/src/InfoWidget/InfoWidget.tsx

@@ -1,13 +1,67 @@
+import styled from '@emotion/styled';
+import { css } from '@emotion/core';
 import React, { ReactNode } from 'react';
-import BEMHelper from 'react-bem-helper';
 import { Forward } from '@ndla/icons/common';
-
 import SafeLink from '@ndla/safelink';
+import { colors, fonts, spacing } from '@ndla/core';
 
 import SectionHeading from '../SectionHeading';
 
-const classes = BEMHelper('c-info-widget');
+interface InfoWidgetSectionProps {
+  center?: boolean;
+}
+const InfoWidgetSection = styled.section<InfoWidgetSectionProps>`
+  max-width: 600px;
+  margin: ${(p) => p.center && '0 auto'};
+`;
+
+const InfoWidgetDescription = styled.div`
+  padding: ${spacing.normal};
+  background: ${colors.brand.lighter};
+  color: ${colors.brand.dark};
+  ${fonts.sizes('18px', '26px')};
+
+  p {
+    margin-top: 0;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+`;
+
+const InfoWidgetLinksContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+`;
+
+const iconLinkStyle = css`
+  width: 47px;
+  height: 47px;
+  border-radius: 100%;
+  background: ${colors.brand.lighter};
+  color: ${colors.brand.dark};
+  box-shadow: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: ${spacing.small};
 
+  .c-icon {
+    width: 20px;
+    height: 20px;
+  }
+`;
+
+const IconSafeLink = styled(SafeLink)(iconLinkStyle);
+
+const IconAnchor = styled.a(iconLinkStyle);
+const IconSpan = styled.span(iconLinkStyle);
+
+const StyledMainLink = styled.a`
+  color: ${colors.brand.dark};
+  ${fonts.sizes('16px', '24px')};
+`;
 interface Props {
   heading: string;
   description: string;
@@ -26,36 +80,33 @@ interface Props {
 }
 
 const InfoWidget = ({ heading, description, mainLink, iconLinks, center = false }: Props) => (
-  <section {...classes('', { center })}>
-    <SectionHeading large className={classes('heading').className}>
-      {heading}
-    </SectionHeading>
-    <div {...classes('description')}>
+  <InfoWidgetSection center={center}>
+    <SectionHeading large>{heading}</SectionHeading>
+    <InfoWidgetDescription>
       <p>{description}</p>
-    </div>
-    <div {...classes('links')}>
-      {iconLinks &&
-        iconLinks.map((link) => {
-          if (link.url) {
-            return (
-              <SafeLink key={link.url} {...classes('icon-link')} to={link.url} aria-label={link.name}>
-                {link.icon}
-              </SafeLink>
-            );
-          }
-          if (link.href) {
-            return (
-              <a key={link.href} href={link.href} {...classes('icon-link')} aria-label={link.name}>
-                {link.icon}
-              </a>
-            );
-          }
+    </InfoWidgetDescription>
+    <InfoWidgetLinksContainer>
+      {iconLinks?.map((link) => {
+        if (link.url) {
+          return (
+            <IconSafeLink key={link.url} to={link.url} aria-label={link.name}>
+              {link.icon}
+            </IconSafeLink>
+          );
+        }
+        if (link.href) {
           return (
-            <span key={link.name} {...classes('icon-link')} aria-label={link.name}>
+            <IconAnchor key={link.href} href={link.href} aria-label={link.name}>
               {link.icon}
-            </span>
+            </IconAnchor>
           );
-        })}
+        }
+        return (
+          <IconSpan key={link.name} aria-label={link.name}>
+            {link.icon}
+          </IconSpan>
+        );
+      })}
       {mainLink.url ? (
         <div className="o-text-link__wrapper o-text-link__wrapper--right">
           <SafeLink className="o-text-link" to={mainLink.url}>
@@ -63,12 +114,10 @@ const InfoWidget = ({ heading, description, mainLink, iconLinks, center = false
           </SafeLink>
         </div>
       ) : (
-        <a {...classes('main-link')} href={mainLink.href}>
-          {mainLink.name}
-        </a>
+        <StyledMainLink href={mainLink.href}>{mainLink.name}</StyledMainLink>
       )}
-    </div>
-  </section>
+    </InfoWidgetLinksContainer>
+  </InfoWidgetSection>
 );
 
 export default InfoWidget;

package/src/MyNdla/Resource/FolderInput.tsx

@@ -15,6 +15,7 @@ import { useTranslation } from 'react-i18next';
 import { colors, spacing } from '@ndla/core';
 import { Input } from '@ndla/forms';
 import { css } from '@emotion/core';
+import { Done } from '@ndla/icons/editor';
 
 // Source: https://kovart.github.io/dashed-border-generator/
 const borderStyle = `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='${encodeURIComponent(
@@ -40,6 +41,9 @@ const inputWrapperStyle = css`
 
 const StyledInput = styled(Input)`
   && {
+    flex-grow: 1;
+    flex-basis: 0;
+    min-width: 0;
     line-height: 1.75em;
     color: ${colors.brand.primary};
     ::selection {
@@ -48,6 +52,12 @@ const StyledInput = styled(Input)`
   }
 `;
 
+const Row = styled.div`
+  display: flex;
+  gap: ${spacing.xsmall};
+  padding-right: ${spacing.small};
+`;
+
 interface Props {
   onAddFolder: (name: string) => void;
   onClose: () => void;
@@ -90,9 +100,14 @@ const FolderInput = ({ onAddFolder, onClose, autoSelect }: Props) => {
         </StyledFolderIcon>
       }
       iconRight={
-        <IconButton aria-label={t('close')} size="small" ghostPill onClick={onClose}>
-          <Cross />
-        </IconButton>
+        <Row>
+          <IconButton aria-label={t('close')} size="small" ghostPill onClick={onClose}>
+            <Cross />
+          </IconButton>
+          <IconButton aria-label={t('save')} size="small" ghostPill onClick={() => onAddFolder(input)}>
+            <Done />
+          </IconButton>
+        </Row>
       }
     />
   );

package/src/NoContentBox/NoContentBox.tsx

@@ -7,21 +7,16 @@
  */
 
 import React from 'react';
-import BEMHelper from 'react-bem-helper';
 import Button from '@ndla/button';
 
-const classes = new BEMHelper({
-  name: 'topic-resource',
-  prefix: 'c-',
-});
-
 interface Props {
   onClick?: () => void;
   buttonText?: string;
   text: string;
 }
+
 export const NoContentBox = ({ buttonText, text, onClick }: Props) => (
-  <div {...classes('additional-resources-trigger')}>
+  <div>
     <span>
       <div>
         <p>{text}</p>

package/src/Portrait/Portrait.tsx

@@ -6,13 +6,25 @@
  *
  */
 
+import styled from '@emotion/styled';
 import React from 'react';
-import BEMHelper from 'react-bem-helper';
 
-const classes = new BEMHelper({
-  name: 'portrait',
-  prefix: 'c-',
-});
+interface PortraitWrapperProps {
+  size: string;
+}
+const PortraitWrapper = styled.div<PortraitWrapperProps>`
+  width: ${(p) => p.size};
+  height: ${(p) => p.size};
+  span {
+    display: block;
+    border-radius: 50%;
+    background-color: rgba(0, 0, 0, 0.16);
+    background-size: cover;
+    background-position: center center;
+    width: ${(p) => p.size};
+    height: ${(p) => p.size};
+  }
+`;
 
 interface Props {
   src: string;
@@ -21,10 +33,13 @@ interface Props {
   modifier?: 'small' | 'large';
 }
 
-const Portrait = ({ src, alt, modifier, className }: Props) => (
-  <div {...classes('', modifier, className)}>
-    <span role="img" aria-label={alt} style={{ backgroundImage: `url(${src})` }} />
-  </div>
-);
+const Portrait = ({ src, alt, modifier, className }: Props) => {
+  const size = modifier === 'small' ? '4rem' : modifier === 'large' ? '10rem' : '7rem';
+  return (
+    <PortraitWrapper size={size} className={className}>
+      <span role="img" aria-label={alt} style={{ backgroundImage: `url(${src})` }} />
+    </PortraitWrapper>
+  );
+};
 
 export default Portrait;

package/src/Resource/BlockResource.tsx

@@ -94,7 +94,7 @@ const BlockImage = ({ image, loading }: BlockImageProps) => {
       </ContentLoader>
     );
   }
-  return <Image alt={image.alt} src={image.src} />;
+  return <Image alt={image.alt} src={image.src} fallbackWidth={300} />;
 };
 
 interface BlockTitleProps {

package/src/Resource/ListResource.tsx

@@ -127,7 +127,9 @@ interface ListResourceImageProps {
 
 const ListResourceImage = ({ resourceImage, loading, type }: ListResourceImageProps) => {
   if (!loading) {
-    return <StyledImage alt={resourceImage.alt} src={resourceImage.src} />;
+    return (
+      <StyledImage alt={resourceImage.alt} src={resourceImage.src} fallbackWidth={type === 'compact' ? 56 : 136} />
+    );
   }
   return (
     <ContentLoader height={'100%'} width={'100%'} viewBox={null} preserveAspectRatio="none">

package/src/ResourceBox/ResourceBox.tsx

@@ -10,7 +10,6 @@ import React from 'react';
 import { breakpoints, fonts, mq, colors, spacing } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
 import { Launch } from '@ndla/icons/common';
-import { LicenseByline } from '@ndla/licenses';
 import { SafeLinkButton } from '@ndla/safelink';
 import styled from '@emotion/styled';
 import Image from '../Image';
@@ -81,12 +80,6 @@ const StyledImage = styled(Image)`
   }
 `;
 
-const LincenseWrapper = styled.div`
-  position: absolute;
-  top: 9px;
-  right: 0;
-`;
-
 interface ImageMeta {
   src: string;
   alt: string;
@@ -96,25 +89,13 @@ interface Props {
   image: ImageMeta;
   title: string;
   caption: string;
-  licenseRights: string[];
-  authors?: string[];
-  locale?: string;
   url: string;
 }
 
-export const ResourceBox = ({ image, title, caption, licenseRights, locale, authors, url }: Props) => {
+export const ResourceBox = ({ image, title, caption, url }: Props) => {
   const { t } = useTranslation();
   return (
     <ResourceBoxContainer>
-      <LincenseWrapper>
-        <LicenseByline licenseRights={licenseRights} locale={locale} marginRight color={colors.brand.tertiary}>
-          {authors && authors.length > 0 && (
-            <div className="c-figure__byline-author-buttons">
-              <span className="c-figure__byline-authors">{authors.join(' ')}</span>
-            </div>
-          )}
-        </LicenseByline>
-      </LincenseWrapper>
       <StyledImage src={image.src} alt={image.alt} />
       <ContentWrapper>
         <Title>{title}</Title>

package/src/Search/{ActiveFilterContent.jsx → ActiveFilterContent.tsx}

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { Cross } from '@ndla/icons/action';
 import { spacing, mq, breakpoints, colors, misc, fonts } from '@ndla/core';
@@ -32,7 +31,17 @@ export const StyledActiveFilterTitle = styled('span')`
   padding-right: ${spacing.small};
 `;
 
-const ActiveFilterContent = ({ filter, onFilterRemove, ariaLabel }) => (
+interface Props {
+  filter: {
+    value: string;
+    title: string;
+    filterName?: string;
+  };
+  onFilterRemove: (value: string, filterName?: string) => void;
+  ariaLabel: string;
+}
+
+const ActiveFilterContent = ({ filter, onFilterRemove, ariaLabel }: Props) => (
   <StyledActiveFilter
     aria-label={ariaLabel}
     type="button"
@@ -42,14 +51,4 @@ const ActiveFilterContent = ({ filter, onFilterRemove, ariaLabel }) => (
   </StyledActiveFilter>
 );
 
-ActiveFilterContent.propTypes = {
-  filter: PropTypes.shape({
-    value: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-    filterName: PropTypes.string,
-  }),
-  onFilterRemove: PropTypes.func.isRequired,
-  ariaLabel: PropTypes.string.isRequired,
-};
-
 export default ActiveFilterContent;

package/src/Search/{ActiveFilters.jsx → ActiveFilters.tsx}

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { spacing, mq, breakpoints } from '@ndla/core';
@@ -7,7 +6,12 @@ import Tooltip from '@ndla/tooltip';
 import { useTranslation } from 'react-i18next';
 import ActiveFilterContent, { StyledActiveFilterTitle } from './ActiveFilterContent';
 
-const StyledActiveFilters = styled('ul')`
+interface StyledActiveFiltersProps {
+  showOnSmallScreen?: boolean;
+  filterLength?: number;
+}
+
+const StyledActiveFilters = styled('ul')<StyledActiveFiltersProps>`
   margin: 0;
   padding: 0;
   flex-direction: column;
@@ -70,10 +74,22 @@ const StyledActiveFilterWrapper = styled('li')`
   }
 `;
 
-const getFilterLength = (filters) =>
+const getFilterLength = (filters: Filter[]) =>
   filters.filter((filter) => filter.filterName === 'filter_subjects' && filter.title).length;
 
-const ActiveFilters = ({ filters, onFilterRemove, showOnSmallScreen }) => {
+interface Filter {
+  title: string;
+  value: string;
+  filterName?: string;
+}
+
+interface Props {
+  filters: Filter[];
+  onFilterRemove: (value: string, filterName?: string) => void;
+  showOnSmallScreen?: boolean;
+}
+
+const ActiveFilters = ({ filters, onFilterRemove, showOnSmallScreen }: Props) => {
   const { t } = useTranslation();
   if (filters && filters.length > 0) {
     const filterLength = getFilterLength(filters);
@@ -90,7 +106,6 @@ const ActiveFilters = ({ filters, onFilterRemove, showOnSmallScreen }) => {
               })}>
               <ActiveFilterContent
                 filter={filter}
-                filterLength={filterLength}
                 ariaLabel={t('searchPage.searchFilterMessages.removeFilter', {
                   filterName: filter.title,
                 })}
@@ -100,7 +115,6 @@ const ActiveFilters = ({ filters, onFilterRemove, showOnSmallScreen }) => {
           ) : (
             <ActiveFilterContent
               filter={filter}
-              filterLength={filterLength}
               onFilterRemove={onFilterRemove}
               ariaLabel={t('searchPage.searchFilterMessages.removeFilter', {
                 filterName: filter.title,
@@ -121,15 +135,4 @@ const ActiveFilters = ({ filters, onFilterRemove, showOnSmallScreen }) => {
   return null;
 };
 
-ActiveFilters.propTypes = {
-  filters: PropTypes.arrayOf(
-    PropTypes.shape({
-      value: PropTypes.string.isRequired,
-      title: PropTypes.string.isRequired,
-      filterName: PropTypes.string,
-    }),
-  ),
-  onFilterRemove: PropTypes.func.isRequired,
-};
-
 export default ActiveFilters;