@ndla/ui 33.3.2 → 33.3.3

package/package.json

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

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>
             )}
           </>