@ndla/ui 4.1.3 → 4.2.1

package/src/Article/ArticleByline.tsx

@@ -15,6 +15,7 @@ import { copyTextToClipboard, printPage } from '@ndla/util';
 import { useTranslation } from 'react-i18next';
 import { LicenseByline } from '@ndla/licenses';
 import { getLicenseByAbbreviation } from '@ndla/licenses';
+import { TFunction } from 'i18next';
 
 const Wrapper = styled.div`
   margin-top: ${spacing.normal};
@@ -38,7 +39,7 @@ const ButtonWrapper = styled.div`
   }
 `;
 
-const AuthorsWrapper = styled.span`
+const PrimaryContributorsWrapper = styled.span`
   margin-left: ${spacing.xxsmall};
 `;
 
@@ -61,9 +62,27 @@ type Props = {
   locale?: string;
 };
 
+const renderContributors = (contributors: SupplierProps[] | AuthorProps[], t: TFunction) => {
+  const contributorsArray = contributors.map((contributor, index) => {
+    if (index < 1) return contributor.name;
+    const sep = index === contributors.length - 1 ? ` ${t('article.conjunction')} ` : ', ';
+    return `${sep}${contributor.name}`;
+  });
+  return contributorsArray.join('');
+};
+
+const getSuppliersText = (suppliers: SupplierProps[], t: TFunction) => {
+  if (suppliers.length === 0) {
+    return '';
+  }
+  return suppliers.length > 1
+    ? t('article.multipleSuppliersLabel', { names: renderContributors(suppliers, t) })
+    : t('article.supplierLabel', { name: renderContributors(suppliers, t) });
+};
+
 const ArticleByline = ({
   authors = [],
-  suppliers,
+  suppliers = [],
   license,
   licenseBox,
   published,
@@ -78,42 +97,30 @@ const ArticleByline = ({
     }
   };
 
-  const renderContributors = (contributors: SupplierProps[] | AuthorProps[]) => {
-    const contributorsArray = contributors.map((contributor, index) => {
-      let separator = '';
-      if (index > 0) {
-        if (index === contributors.length - 1) {
-          separator = ` ${t('article.conjunction')} `;
-        } else {
-          separator = ', ';
-        }
-      }
-      return `${separator}${contributor.name}`;
-    });
-    return contributorsArray.join('');
-  };
   const licenseRights = getLicenseByAbbreviation(license, locale).rights;
+
+  const showPrimaryContributors = suppliers.length > 0 || authors.length > 0;
+  const showSecondaryContributors = suppliers.length > 0 && authors.length > 0;
+
   return (
     <Wrapper>
       <div>
         {t('article.lastUpdated')} {published}
       </div>
-      {(authors.length > 0 || licenseRights.length > 0) && (
+      {(showPrimaryContributors || licenseRights.length > 0) && (
         <TextWrapper>
           <LicenseByline licenseRights={licenseRights}>
-            {authors.length > 0 && (
-              <AuthorsWrapper>{t('article.authorsLabel', { names: renderContributors(authors) })}</AuthorsWrapper>
+            {showPrimaryContributors && (
+              <PrimaryContributorsWrapper>
+                {authors.length > 0
+                  ? t('article.authorsLabel', { names: renderContributors(authors, t) })
+                  : getSuppliersText(suppliers, t)}
+              </PrimaryContributorsWrapper>
             )}
           </LicenseByline>
         </TextWrapper>
       )}
-      {suppliers && (
-        <TextWrapper>
-          {suppliers.length > 1
-            ? t('article.multipleSuppliersLabel', { names: renderContributors(suppliers) })
-            : t('article.supplierLabel', { name: renderContributors(suppliers) })}
-        </TextWrapper>
-      )}
+      {showSecondaryContributors && <TextWrapper>{getSuppliersText(suppliers, t)}</TextWrapper>}
       <ButtonWrapper>
         {licenseBox && (
           <Modal

package/src/RelatedArticleList/RelatedArticleList.tsx

@@ -31,14 +31,14 @@ export const RelatedArticle = ({
   const iconWithClass = cloneElement(icon, { className: 'c-icon--medium' });
   return (
     <article {...classes('item', modifier)}>
-      <h1 {...classes('title')}>
+      <h3 {...classes('title')}>
         {iconWithClass}
         <span {...classes('link-wrapper')}>
           <SafeLink to={to} {...classes('link')} target={target} rel={linkInfo ? 'noopener noreferrer' : undefined}>
             {title}
           </SafeLink>
         </span>
-      </h1>
+      </h3>
       <p {...classes('description')} dangerouslySetInnerHTML={{ __html: introduction }} />
       {linkInfo && <p {...classes('link-info')}>{linkInfo}</p>}
     </article>

package/src/SearchTypeResult/SearchFieldHeader.tsx

@@ -73,6 +73,11 @@ const SearchInput = styled.input`
   margin-left: 3px;
 `;
 
+const iconStyle = {
+  width: '24px',
+  height: '24px',
+};
+
 type Props = {
   onSubmit: (event: FormEvent<HTMLFormElement>) => void;
   value?: string;
@@ -135,11 +140,11 @@ const SearchFieldHeader = ({ value, onSubmit, onChange, filters, activeFilters }
               inputRef.current.focus();
             }
           }}>
-          <CrossIcon style={{ width: '24px', height: '24px' }} />
+          <CrossIcon style={iconStyle} title={t<string>('welcomePage.resetSearch')} />
         </ClearButton>
       )}
       <SearchButton type="submit" value={t<string>('searchPage.search')}>
-        <SearchIcon style={{ width: '24px', height: '24px' }} />
+        <SearchIcon style={iconStyle} title={t<string>('searchPage.search')} />
       </SearchButton>
     </StyledForm>
   );

package/src/SectionHeading/SectionHeading.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ElementType, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import BEMHelper from 'react-bem-helper';
 
@@ -9,9 +9,10 @@ interface Props {
   large?: boolean;
   className?: string;
 }
-const SectionHeading = ({ children, large = false, className }: Props) => (
-  <h1 {...classes('', { large }, className)}>{children}</h1>
-);
+const SectionHeading = ({ children, large = false, className }: Props) => {
+  const Wrapper: ElementType = large ? 'h1' : 'h2';
+  return <Wrapper {...classes('', { large: !!large }, className)}>{children}</Wrapper>;
+};
 
 export default SectionHeading;
 

package/src/locale/messages-en.ts

@@ -48,7 +48,7 @@ const messages = {
   subjectCategories: {
     [subjectCategories.ACTIVE_SUBJECTS]: 'Active',
     [subjectCategories.ARCHIVE_SUBJECTS]: 'Expired',
-    [subjectCategories.BETA_SUBJECTS]: 'Coming',
+    [subjectCategories.BETA_SUBJECTS]: 'Revised',
     [subjectCategories.COMMON_SUBJECTS]: 'Common core subj.',
     [subjectCategories.PROGRAMME_SUBJECTS]: 'Programme subj. SF',
     [subjectCategories.SPECIALIZED_SUBJECTS]: 'Programme subj. YF',
@@ -328,7 +328,7 @@ const messages = {
     newVersion:
       'This learning resource is not updated to the current curriculum. You can find an updated version here: ',
     frontPageBeta:
-      'Coming subjects are adapted to the new curriculum valid from autumn 2022. Beta versions of subjects are subjects we are still working on. We hope, however, that the learning resources available by now may come in useful already.',
+      'Revised subjects have been revised in accordance with the new curriculum that will be put into effect from August 2022. Beta versions of subjects are subjects we are still working on. We hope, however, that the learning resources available by now may come in useful already.',
     frontPageExpired:
       'Expired subjects are not being taught any longer, but it may still be possible to take exams in these subjects.',
     frontPageRevised: