@ndla/ui 33.3.2 → 33.4.0

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

@@ -440,6 +440,11 @@ declare const messages: {
         archived: string;
     };
     subjectsPage: {
+        filterSubjects: string;
+        scrollToGroup: string;
+        goToTop: string;
+        alphabeticSort: string;
+        subjectGroup: string;
         allSubjects: string;
         chooseSubject: string;
         errorDescription: string;
@@ -787,6 +792,7 @@ declare const messages: {
     };
     footer: {
         aboutNDLA: string;
+        socialMedia: string;
         selectLanguage: string;
         info: string;
         editorInChief: string;

package/lib/locale/messages-en.js

@@ -244,6 +244,11 @@ var messages = _objectSpread(_objectSpread({
     archived: 'This is an expired and unmaintained subject.'
   },
   subjectsPage: {
+    filterSubjects: 'Filter subjects',
+    scrollToGroup: 'Scroll to group',
+    goToTop: 'Scroll to top',
+    alphabeticSort: 'Subjects grouped alphabetically',
+    subjectGroup: 'Group "{{ category }}"',
     allSubjects: 'All subjects',
     chooseSubject: 'Choose subject',
     errorDescription: 'Sorry, an error occurred while loading the subjects.',
@@ -582,6 +587,7 @@ var messages = _objectSpread(_objectSpread({
   },
   footer: {
     aboutNDLA: 'About NDLA',
+    socialMedia: 'Social media',
     selectLanguage: 'Choose language (språk): ',
     info: 'This webapplication is developed by NDLA as Open Source code.',
     editorInChief: 'Editor in chief: ',

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

@@ -440,6 +440,11 @@ declare const messages: {
         archived: string;
     };
     subjectsPage: {
+        filterSubjects: string;
+        scrollToGroup: string;
+        goToTop: string;
+        alphabeticSort: string;
+        subjectGroup: string;
         allSubjects: string;
         errorDescription: string;
         chooseSubject: string;
@@ -787,6 +792,7 @@ declare const messages: {
     };
     footer: {
         aboutNDLA: string;
+        socialMedia: string;
         selectLanguage: string;
         vision: string;
         linksHeader: string;

package/lib/locale/messages-nb.js

@@ -244,6 +244,11 @@ var messages = _objectSpread(_objectSpread({
     archived: 'Dette er et utgått fag som ikke vedlikeholdes.'
   },
   subjectsPage: {
+    filterSubjects: 'Filtrer fag',
+    scrollToGroup: 'Hopp til gruppe',
+    goToTop: 'Gå til toppen',
+    alphabeticSort: 'Fag gruppert alfabetisk',
+    subjectGroup: 'Gruppe "{{ category }}"',
     allSubjects: 'Alle fag',
     errorDescription: 'Beklager, en feil oppstod under lasting av fagene.',
     chooseSubject: 'Velg fag',
@@ -582,6 +587,7 @@ var messages = _objectSpread(_objectSpread({
   },
   footer: {
     aboutNDLA: 'Om NDLA',
+    socialMedia: 'Sosiale medier',
     selectLanguage: 'Velg språk (language): ',
     vision: 'Sammen skaper vi framtidas læring',
     linksHeader: 'Andre NDLA-nettsteder',

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

@@ -440,6 +440,11 @@ declare const messages: {
         archived: string;
     };
     subjectsPage: {
+        filterSubjects: string;
+        scrollToGroup: string;
+        goToTop: string;
+        alphabeticSort: string;
+        subjectGroup: string;
         allSubjects: string;
         errorDescription: string;
         chooseSubject: string;
@@ -787,6 +792,7 @@ declare const messages: {
     };
     footer: {
         aboutNDLA: string;
+        socialMedia: string;
         selectLanguage: string;
         vision: string;
         linksHeader: string;

package/lib/locale/messages-nn.js

@@ -244,6 +244,11 @@ var messages = _objectSpread(_objectSpread({
     archived: 'Dette er eit utgått fag som ikkje blir halde ved like.'
   },
   subjectsPage: {
+    filterSubjects: 'Filtrer fag',
+    scrollToGroup: 'Hopp til gruppe',
+    goToTop: 'Gå til toppen',
+    alphabeticSort: 'Fag gruppert alfabetisk',
+    subjectGroup: 'Gruppe "{{ category }}"',
     allSubjects: 'Alle fag',
     errorDescription: 'Orsak, ein feil oppstod under lasting av faga.',
     chooseSubject: 'Vel fag',
@@ -582,6 +587,7 @@ var messages = _objectSpread(_objectSpread({
   },
   footer: {
     aboutNDLA: 'Om NDLA',
+    socialMedia: 'Sosiale media',
     selectLanguage: 'Vel språk (language): ',
     vision: 'Saman skapar vi framtidas læring',
     linksHeader: 'Andre NDLA-nettstader',

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

@@ -440,6 +440,11 @@ declare const messages: {
         archived: string;
     };
     subjectsPage: {
+        filterSubjects: string;
+        scrollToGroup: string;
+        goToTop: string;
+        alphabeticSort: string;
+        subjectGroup: string;
         allSubjects: string;
         errorDescription: string;
         chooseSubject: string;
@@ -787,6 +792,7 @@ declare const messages: {
     };
     footer: {
         aboutNDLA: string;
+        socialMedia: string;
         selectLanguage: string;
         vision: string;
         linksHeader: string;

package/lib/locale/messages-se.js

@@ -244,6 +244,11 @@ var messages = _objectSpread(_objectSpread({
     archived: 'Dát leat heaittihuvvon fága mii ii ođasmahttojuvvo.'
   },
   subjectsPage: {
+    filterSubjects: 'Filtrer fag',
+    scrollToGroup: 'Hopp til gruppe',
+    goToTop: 'Gå til toppen',
+    alphabeticSort: 'Fag gruppert alfabetisk',
+    subjectGroup: 'Gruppe "{{ category }}"',
     allSubjects: 'Buot fágat',
     errorDescription: 'Šállošat, boasttuvuohta čuožžilii fágaid viežžamis.',
     chooseSubject: 'Vállje fága',
@@ -582,6 +587,7 @@ var messages = _objectSpread(_objectSpread({
   },
   footer: {
     aboutNDLA: 'NDLA birra',
+    socialMedia: 'Sosiale medier',
     selectLanguage: 'Vállje giela (language): ',
     vision: 'Ovttas hábmet boahtteáiggi oahppama',
     linksHeader: 'Eará NDLA neahttabáikkit',

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

@@ -440,6 +440,11 @@ declare const messages: {
         archived: string;
     };
     subjectsPage: {
+        filterSubjects: string;
+        scrollToGroup: string;
+        goToTop: string;
+        alphabeticSort: string;
+        subjectGroup: string;
         allSubjects: string;
         errorDescription: string;
         chooseSubject: string;
@@ -787,6 +792,7 @@ declare const messages: {
     };
     footer: {
         aboutNDLA: string;
+        socialMedia: string;
         selectLanguage: string;
         vision: string;
         linksHeader: string;

package/lib/locale/messages-sma.js

@@ -244,6 +244,11 @@ var messages = _objectSpread(_objectSpread({
     archived: 'Dette er et utgått fag som ikke vedlikeholdes.'
   },
   subjectsPage: {
+    filterSubjects: 'Filtrer fag',
+    scrollToGroup: 'Hopp til gruppe',
+    goToTop: 'Gå til toppen',
+    alphabeticSort: 'Fag gruppert alfabetisk',
+    subjectGroup: 'Gruppe "{{ category }}"',
     allSubjects: 'Alle fag',
     errorDescription: 'Beklager, en feil oppstod under lasting av fagene.',
     chooseSubject: 'Velg fag',
@@ -582,6 +587,7 @@ var messages = _objectSpread(_objectSpread({
   },
   footer: {
     aboutNDLA: 'Om NDLA',
+    socialMedia: 'Sosiale medier',
     selectLanguage: 'Velg språk (language): ',
     vision: 'Sammen skaper vi framtidas læring',
     linksHeader: 'Andre NDLA-nettsteder',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "33.3.2",
+  "version": "33.4.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -82,5 +82,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2cbff26d49ef6ed78bb1d789d6cca7b69461b269"
+  "gitHead": "71660738efc896fc54a66aa024262947cdd4cf3f"
 }

package/src/Footer/Footer.tsx

@@ -30,7 +30,7 @@ type StyledFooterProps = {
   addMargin?: boolean;
 };
 
-const StyledFooter = styled.footer<StyledFooterProps>`
+const StyledDiv = styled.div<StyledFooterProps>`
   color: #fff;
   position: relative;
   background: ${colors.brand.dark};
@@ -159,11 +159,13 @@ const Footer = ({ children, links, languageSelector, auth, privacyLinks }: Props
   return (
     <>
       {languageSelector && <StyledLanguageWrapper>{languageSelector}</StyledLanguageWrapper>}
-      <StyledFooter addMargin={!languageSelector}>
-        <OneColumn cssModifier="large">{footerContent}</OneColumn>
-        <StyledBackground />
-      </StyledFooter>
-      {auth}
+      <footer>
+        <StyledDiv addMargin={!languageSelector}>
+          <OneColumn cssModifier="large">{footerContent}</OneColumn>
+          <StyledBackground />
+        </StyledDiv>
+        {auth}
+      </footer>
     </>
   );
 };

package/src/Footer/FooterLinks.tsx

@@ -8,17 +8,18 @@ import { useTranslation } from 'react-i18next';
 const StyledLinksWrapper = styled.div`
   display: flex;
   align-items: flex-start;
-  section:first-of-type {
+  gap: ${spacing.normal};
+  div:first-of-type {
     margin-right: ${spacing.large};
   }
   ${mq.range({ from: breakpoints.desktop })} {
-    section:first-of-type {
+    div:first-of-type {
       margin-right: ${spacingUnit * 4}px;
     }
   }
   ${mq.range({ until: breakpoints.tabletWide })} {
     flex-direction: column;
-    > section {
+    > div {
       margin-top: ${spacing.large};
     }
   }
@@ -86,7 +87,7 @@ const StyledSocialMediaLinkWrapper = styled.div`
   align-items: center;
 `;
 
-const StyledHeaderLinks = styled.h1`
+const StyledHeaderLinks = styled.h3`
   ${fonts.sizes(16, 1.5)};
   font-weight: ${fonts.weight.semibold};
   margin: ${spacing.xsmall} 0;
@@ -97,11 +98,11 @@ const FooterLinks = ({ links }: FooterLinksProps) => {
   return (
     <>
       <StyledLinksWrapper>
-        <section>
-          <StyledHeaderLinks>
+        <div>
+          <StyledHeaderLinks id="otherLinks">
             {t('footer.linksHeader')} <Launch />
           </StyledHeaderLinks>
-          <StyledNav>
+          <StyledNav aria-labelledby="otherLinks">
             {commonLinks.map((link) => (
               <div key={link.url}>
                 <StyledSafeLink
@@ -115,20 +116,18 @@ const FooterLinks = ({ links }: FooterLinksProps) => {
               </div>
             ))}
           </StyledNav>
-        </section>
-        <section>
-          <StyledNav>
-            {links.map((link) => (
-              <StyledSocialMediaLinkWrapper key={link.to}>
-                <StyledSocialMediaIcon>{link.icon}</StyledSocialMediaIcon>
-                <StyledSafeLink to={link.to}>
-                  {link.text}
-                  <Forward />
-                </StyledSafeLink>
-              </StyledSocialMediaLinkWrapper>
-            ))}
-          </StyledNav>
-        </section>
+        </div>
+        <StyledNav aria-label={t('footer.socialMedia')}>
+          {links.map((link) => (
+            <StyledSocialMediaLinkWrapper key={link.to}>
+              <StyledSocialMediaIcon>{link.icon}</StyledSocialMediaIcon>
+              <StyledSafeLink to={link.to}>
+                {link.text}
+                <Forward />
+              </StyledSafeLink>
+            </StyledSocialMediaLinkWrapper>
+          ))}
+        </StyledNav>
       </StyledLinksWrapper>
     </>
   );

package/src/ResourceGroup/ResourceGroup.tsx

@@ -8,35 +8,33 @@
 
 import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
-import { fonts, spacing } from '@ndla/core';
+import { css } from '@emotion/react';
+import { colors, fonts, spacing } from '@ndla/core';
 
 import ResourceList, { ResourceListProps } from './ResourceList';
+import { HeadingLevel } from '../types';
 
 const Wrapper = styled.section`
   margin-bottom: ${spacing.large};
 `;
 
-type StyledHeaderProps = {
-  invertedStyle?: boolean;
-};
-
-const StyledHeader = styled.header<StyledHeaderProps>`
-  margin: ${spacing.small} 0 ${spacing.xsmall};
-  ${(props) => props.invertedStyle && `color: #fff`};
-`;
-
-const StyledHeading = styled.h1`
+const headingStyle = css`
   ${fonts.sizes('16px', '18px')};
   font-weight: ${fonts.weight.bold};
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  margin: 0;
+  margin: ${spacing.small} 0 ${spacing.xsmall};
+`;
+
+const invertedStyle = css`
+  color: ${colors.white};
 `;
 
 type Props = {
   invertedStyle?: boolean;
   toggleAdditionalResources: () => void;
   heartButton?: (path: string) => ReactNode;
+  headingLevel?: HeadingLevel;
 };
 
 const ResourceGroup = ({
@@ -45,15 +43,12 @@ const ResourceGroup = ({
   showAdditionalResources,
   toggleAdditionalResources,
   contentType,
-  invertedStyle,
+  invertedStyle: invertedStyleProp,
+  headingLevel: Heading = 'h1',
   heartButton,
 }: Props & ResourceListProps) => (
   <Wrapper>
-    {title && (
-      <StyledHeader invertedStyle={invertedStyle}>
-        <StyledHeading>{title}</StyledHeading>
-      </StyledHeader>
-    )}
+    {title && <Heading css={[headingStyle, invertedStyleProp ? invertedStyle : undefined]}>{title}</Heading>}
     {resources.length > 0 ? (
       <ResourceList
         title={title}

package/src/ResourceGroup/ResourceItem.tsx

@@ -80,9 +80,9 @@ const ListElement = styled.li<ListElementProps>`
     props.additional &&
     css`
       border-style: dashed;
-      animation-name: ${fadeInAdditionalsKeyframe};
       animation-duration: 0.8s;
       animation-fill-mode: forwards;
+      animation: ${fadeInAdditionalsKeyframe};
     `}
   ${(props) => props.extraBottomMargin && `margin-bottom: ${spacing.large};`}
 
@@ -143,10 +143,7 @@ const ResourceLink = styled(SafeLink)`
   }
 `;
 
-type ActiveProps = {
-  active?: boolean;
-};
-const Heading = styled.h2<ActiveProps>`
+const headingStyle = css`
   font-weight: ${fonts.weight.semibold};
   transform: translateY(-1px);
   text-transform: none;
@@ -161,28 +158,21 @@ const Heading = styled.h2<ActiveProps>`
     ${fonts.sizes('20px', '26px')};
   }
 
-  span {
-    box-shadow: ${colors.link};
-  }
+  box-shadow: ${colors.link};
 
   ${ResourceLink}:hover &,
   ${ResourceLink}:focus & {
-    span {
-      box-shadow: ${colors.linkHover};
-    }
+    box-shadow: ${colors.linkHover};
+  }
+`;
+
+const activeHeadingStyle = css`
+  color: ${colors.brand.greyDark};
+  box-shadow: none;
+  small {
+    padding-left: ${spacing.small};
+    font-weight: ${fonts.weight.normal};
   }
-  ${(props) =>
-    props.active &&
-    css`
-      color: ${colors.brand.greyDark};
-      span {
-        box-shadow: none;
-      }
-      small {
-        padding-left: ${spacing.small};
-        font-weight: ${fonts.weight.normal};
-      }
-    `}
 `;
 
 const IconWrapper = styled.div`
@@ -247,6 +237,7 @@ const ResourceItem = ({
   const hidden = additional ? !showAdditionalResources : false;
   return (
     <ListElement
+      aria-current={active ? 'page' : undefined}
       contentType={contentType}
       hidden={hidden && !active}
       active={active}
@@ -257,21 +248,17 @@ const ResourceItem = ({
           <IconWrapper>
             <ContentTypeBadge type={contentType ?? ''} background border={false} />
           </IconWrapper>
-          <Heading active>
-            <span>
-              {name}
-              <small>{t('resource.youAreHere')}</small>
-            </span>
-          </Heading>
+          <span css={[headingStyle, activeHeadingStyle]}>
+            {name}
+            <small>{t('resource.youAreHere')}</small>
+          </span>
         </ActiveWrapper>
       ) : (
         <ResourceLink to={path}>
           <IconWrapper>
             <ContentTypeBadge type={contentType ?? ''} background border={false} />
           </IconWrapper>
-          <Heading>
-            <span>{name}</span>
-          </Heading>
+          <span css={headingStyle}>{name}</span>
         </ResourceLink>
       )}
       <TypeWrapper>
@@ -288,18 +275,22 @@ const ResourceItem = ({
           <>
             {additional && (
               <Tooltip tooltip={contentTypeDescription}>
-                <Additional
-                  className="c-icon--20 u-margin-left-tiny c-topic-resource__list__additional-icons"
-                  aria-label={contentTypeDescription}
-                />
+                <div>
+                  <Additional
+                    className="c-icon--20 u-margin-left-tiny c-topic-resource__list__additional-icons"
+                    aria-label={contentTypeDescription}
+                  />
+                </div>
               </Tooltip>
             )}
             {!additional && (
               <Tooltip tooltip={contentTypeDescription}>
-                <Core
-                  className="c-icon--20 u-margin-left-tiny c-topic-resource__list__additional-icons"
-                  aria-label={contentTypeDescription}
-                />
+                <div>
+                  <Core
+                    className="c-icon--20 u-margin-left-tiny c-topic-resource__list__additional-icons"
+                    aria-label={contentTypeDescription}
+                  />
+                </div>
               </Tooltip>
             )}
           </>

package/src/locale/messages-en.ts

@@ -253,6 +253,11 @@ const messages = {
     archived: 'This is an expired and unmaintained subject.',
   },
   subjectsPage: {
+    filterSubjects: 'Filter subjects',
+    scrollToGroup: 'Scroll to group',
+    goToTop: 'Scroll to top',
+    alphabeticSort: 'Subjects grouped alphabetically',
+    subjectGroup: 'Group "{{ category }}"',
     allSubjects: 'All subjects',
     chooseSubject: 'Choose subject',
     errorDescription: 'Sorry, an error occurred while loading the subjects.',
@@ -624,6 +629,7 @@ const messages = {
   },
   footer: {
     aboutNDLA: 'About NDLA',
+    socialMedia: 'Social media',
     selectLanguage: 'Choose language (språk): ',
     info: 'This webapplication is developed by NDLA as Open Source code.',
     editorInChief: 'Editor in chief: ',

package/src/locale/messages-nb.ts

@@ -252,6 +252,11 @@ const messages = {
     archived: 'Dette er et utgått fag som ikke vedlikeholdes.',
   },
   subjectsPage: {
+    filterSubjects: 'Filtrer fag',
+    scrollToGroup: 'Hopp til gruppe',
+    goToTop: 'Gå til toppen',
+    alphabeticSort: 'Fag gruppert alfabetisk',
+    subjectGroup: 'Gruppe "{{ category }}"',
     allSubjects: 'Alle fag',
     errorDescription: 'Beklager, en feil oppstod under lasting av fagene.',
     chooseSubject: 'Velg fag',
@@ -623,6 +628,7 @@ const messages = {
   },
   footer: {
     aboutNDLA: 'Om NDLA',
+    socialMedia: 'Sosiale medier',
     selectLanguage: 'Velg språk (language): ',
     vision: 'Sammen skaper vi framtidas læring',
     linksHeader: 'Andre NDLA-nettsteder',

package/src/locale/messages-nn.ts

@@ -252,6 +252,11 @@ const messages = {
     archived: 'Dette er eit utgått fag som ikkje blir halde ved like.',
   },
   subjectsPage: {
+    filterSubjects: 'Filtrer fag',
+    scrollToGroup: 'Hopp til gruppe',
+    goToTop: 'Gå til toppen',
+    alphabeticSort: 'Fag gruppert alfabetisk',
+    subjectGroup: 'Gruppe "{{ category }}"',
     allSubjects: 'Alle fag',
     errorDescription: 'Orsak, ein feil oppstod under lasting av faga.',
     chooseSubject: 'Vel fag',
@@ -624,6 +629,7 @@ const messages = {
   },
   footer: {
     aboutNDLA: 'Om NDLA',
+    socialMedia: 'Sosiale media',
     selectLanguage: 'Vel språk (language): ',
     vision: 'Saman skapar vi framtidas læring',
     linksHeader: 'Andre NDLA-nettstader',

package/src/locale/messages-se.ts

@@ -252,6 +252,11 @@ const messages = {
     archived: 'Dát leat heaittihuvvon fága mii ii ođasmahttojuvvo.',
   },
   subjectsPage: {
+    filterSubjects: 'Filtrer fag',
+    scrollToGroup: 'Hopp til gruppe',
+    goToTop: 'Gå til toppen',
+    alphabeticSort: 'Fag gruppert alfabetisk',
+    subjectGroup: 'Gruppe "{{ category }}"',
     allSubjects: 'Buot fágat',
     errorDescription: 'Šállošat, boasttuvuohta čuožžilii fágaid viežžamis.',
     chooseSubject: 'Vállje fága',
@@ -624,6 +629,7 @@ const messages = {
   },
   footer: {
     aboutNDLA: 'NDLA birra',
+    socialMedia: 'Sosiale medier',
     selectLanguage: 'Vállje giela (language): ',
     vision: 'Ovttas hábmet boahtteáiggi oahppama',
     linksHeader: 'Eará NDLA neahttabáikkit',

package/src/locale/messages-sma.ts

@@ -252,6 +252,11 @@ const messages = {
     archived: 'Dette er et utgått fag som ikke vedlikeholdes.',
   },
   subjectsPage: {
+    filterSubjects: 'Filtrer fag',
+    scrollToGroup: 'Hopp til gruppe',
+    goToTop: 'Gå til toppen',
+    alphabeticSort: 'Fag gruppert alfabetisk',
+    subjectGroup: 'Gruppe "{{ category }}"',
     allSubjects: 'Alle fag',
     errorDescription: 'Beklager, en feil oppstod under lasting av fagene.',
     chooseSubject: 'Velg fag',
@@ -624,6 +629,7 @@ const messages = {
   },
   footer: {
     aboutNDLA: 'Om NDLA',
+    socialMedia: 'Sosiale medier',
     selectLanguage: 'Velg språk (language): ',
     vision: 'Sammen skaper vi framtidas læring',
     linksHeader: 'Andre NDLA-nettsteder',