@ndla/ui 34.0.0 → 34.1.0

package/src/NDLAFilm/filmStyles.ts

@@ -21,7 +21,7 @@ export const StyledHeadingH1 = styled.h1<StyledHeadingProps>`
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: ${colors.white};
-  margin: ${spacing.small} 0;
+  margin: ${spacing.xsmall} 0;
   margin-left: ${(props) => props.marginLeft && `${props.marginLeft}px`};
   small {
     font-weight: normal;

package/src/ResourceGroup/ResourceItem.tsx

@@ -59,13 +59,14 @@ const fadeInAdditionalsKeyframe = keyframes`
   }
 `;
 
-type ListElementProps = {
+interface ListElementProps {
   additional?: boolean;
   extraBottomMargin?: boolean;
   contentType?: string;
   active?: boolean;
   hidden?: boolean;
-};
+}
+
 const ListElement = styled.li<ListElementProps>`
   border: 1px solid #d1d6db;
   border-radius: 5px;
@@ -74,7 +75,7 @@ const ListElement = styled.li<ListElementProps>`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding-right: 1rem;
+  padding: ${spacing.small};
 
   ${(props) =>
     props.additional &&
@@ -108,48 +109,12 @@ const ListElement = styled.li<ListElementProps>`
   ${({ hidden }) => hidden && `display:none; opacity:0;`}
 `;
 
-const LinkStyle = css`
-  display: flex;
-  color: ${colors.brand.dark};
-  align-items: center;
-  width: auto;
-  padding: ${spacing.small};
-  box-shadow: none;
-  min-height: 70px;
-`;
-
-const ActiveWrapper = styled.div`
-  ${LinkStyle}
-`;
 const ResourceLink = styled(SafeLink)`
-  ${LinkStyle}
-  &:hover .c-content-type-badge {
-    width: 38px;
-    height: 38px;
-
-    svg {
-      width: 20px;
-      height: 20px;
-    }
-    &.c-content-type-badge--subject-material,
-    &.c-content-type-badge--learning-path,
-    &.c-content-type-badge--source-material,
-    &.c-content-type-badge--external-learning-resources {
-      svg {
-        width: 26px;
-        height: 26px;
-      }
-    }
-  }
-`;
-
-const headingStyle = css`
   font-weight: ${fonts.weight.semibold};
-  transform: translateY(-1px);
-  text-transform: none;
-  letter-spacing: 0;
-  margin: 0;
-  display: inline;
+  box-shadow: none;
+  text-decoration: underline;
+  text-underline-offset: 5px;
+  color: ${colors.brand.dark};
   ${fonts.sizes('16px', '26px')};
   ${mq.range({ from: breakpoints.tablet })} {
     ${fonts.sizes('18px', '26px')};
@@ -157,25 +122,12 @@ const headingStyle = css`
   ${mq.range({ from: breakpoints.desktop })} {
     ${fonts.sizes('20px', '26px')};
   }
-
-  box-shadow: ${colors.link};
-
-  ${ResourceLink}:hover &,
-  ${ResourceLink}:focus & {
-    box-shadow: ${colors.linkHover};
-  }
-`;
-
-const activeHeadingStyle = css`
-  color: ${colors.brand.greyDark};
-  box-shadow: none;
-  small {
-    padding-left: ${spacing.small};
-    font-weight: ${fonts.weight.normal};
+  &:hover {
+    text-decoration: none;
   }
 `;
 
-const IconWrapper = styled.div`
+const ContentBadgeWrapper = styled.div`
   display: flex;
   flex: 0 0 auto;
   text-align: center;
@@ -208,7 +160,41 @@ const ContentTypeName = styled.span`
   text-align: right;
 `;
 
-type Props = {
+const InlineContainer = styled.div`
+  display: inline;
+`;
+
+const ResourceWrapper = styled.div`
+  display: flex;
+  gap: ${spacing.xsmall};
+  align-items: center;
+  :hover {
+    .c-content-type-badge {
+      width: 38px;
+      height: 38px;
+
+      svg {
+        width: 20px;
+        height: 20px;
+      }
+      &.c-content-type-badge--subject-material,
+      &.c-content-type-badge--learning-path,
+      &.c-content-type-badge--source-material,
+      &.c-content-type-badge--external-learning-resources {
+        svg {
+          width: 26px;
+          height: 26px;
+        }
+      }
+    }
+  }
+`;
+
+const CurrentSmall = styled.small`
+  margin-left: ${spacing.xsmall};
+`;
+
+interface Props {
   id: string;
   showContentTypeDescription?: boolean;
   contentTypeName?: string;
@@ -217,7 +203,16 @@ type Props = {
   showAdditionalResources?: boolean;
   access?: 'teacher';
   heartButton?: (path: string) => ReactNode;
-};
+}
+
+const IconWrapper = styled.div`
+  display: flex;
+  flex-grow: 1;
+  svg {
+    width: 26px;
+    height: 26px;
+  }
+`;
 
 const ResourceItem = ({
   id,
@@ -234,6 +229,10 @@ const ResourceItem = ({
   heartButton,
 }: Props & Resource) => {
   const { t } = useTranslation();
+  const accessId = `${id}-teacher`;
+  const coreId = `${id}-core`;
+  const additionalId = `${id}-additional`;
+  const describedBy = `${coreId} ${additionalId} ${accessId}`;
   const hidden = additional ? !showAdditionalResources : false;
   return (
     <ListElement
@@ -243,54 +242,40 @@ const ResourceItem = ({
       active={active}
       additional={additional}
       extraBottomMargin={extraBottomMargin}>
-      {active ? (
-        <ActiveWrapper>
-          <IconWrapper>
-            <ContentTypeBadge type={contentType ?? ''} background border={false} />
-          </IconWrapper>
-          <span css={[headingStyle, activeHeadingStyle]}>
+      <ResourceWrapper>
+        <ContentBadgeWrapper>
+          <ContentTypeBadge type={contentType ?? ''} background border={false} />
+        </ContentBadgeWrapper>
+        <InlineContainer>
+          <ResourceLink to={path} aria-current={active ? 'page' : undefined} aria-describedby={describedBy}>
             {name}
-            <small>{t('resource.youAreHere')}</small>
-          </span>
-        </ActiveWrapper>
-      ) : (
-        <ResourceLink to={path}>
-          <IconWrapper>
-            <ContentTypeBadge type={contentType ?? ''} background border={false} />
-          </IconWrapper>
-          <span css={headingStyle}>{name}</span>
-        </ResourceLink>
-      )}
+          </ResourceLink>
+          {active ? <CurrentSmall>{t('resource.youAreHere')}</CurrentSmall> : undefined}
+        </InlineContainer>
+      </ResourceWrapper>
       <TypeWrapper>
         {contentTypeName && <ContentTypeName>{contentTypeName}</ContentTypeName>}
         {access && access === 'teacher' && (
           <Tooltip tooltip={t('article.access.onlyTeacher')}>
-            <HumanMaleBoard
-              className="c-icon--20 u-margin-left-tiny c-topic-resource__list__additional-icons"
-              aria-label={t('article.access.onlyTeacher')}
-            />
+            <IconWrapper>
+              <HumanMaleBoard id={accessId} aria-label={t('article.access.onlyTeacher')} />
+            </IconWrapper>
           </Tooltip>
         )}
         {showAdditionalResources && contentTypeDescription && (
           <>
             {additional && (
               <Tooltip tooltip={contentTypeDescription}>
-                <div>
-                  <Additional
-                    className="c-icon--20 u-margin-left-tiny c-topic-resource__list__additional-icons"
-                    aria-label={contentTypeDescription}
-                  />
-                </div>
+                <IconWrapper>
+                  <Additional id={additionalId} aria-label={contentTypeDescription} />
+                </IconWrapper>
               </Tooltip>
             )}
             {!additional && (
               <Tooltip tooltip={contentTypeDescription}>
-                <div>
-                  <Core
-                    className="c-icon--20 u-margin-left-tiny c-topic-resource__list__additional-icons"
-                    aria-label={contentTypeDescription}
-                  />
-                </div>
+                <IconWrapper>
+                  <Core id={coreId} aria-label={contentTypeDescription} />
+                </IconWrapper>
               </Tooltip>
             )}
           </>

package/src/ResourceGroup/ResourceList.tsx

@@ -10,6 +10,7 @@ import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { css, keyframes } from '@emotion/react';
 import { useTranslation } from 'react-i18next';
+import { fonts } from '@ndla/core';
 import NoContentBox from '../NoContentBox';
 import ResourceItem from './ResourceItem';
 import { Resource } from '../types';
@@ -33,6 +34,7 @@ const StyledResourceList = styled.ul<StyledListProps>`
   list-style: none;
   margin: 0;
   padding: 0;
+  font-family: ${fonts.sans};
   ${({ showAdditionalResources }) =>
     showAdditionalResources &&
     css`

package/src/Search/ActiveFilterContent.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import styled from '@emotion/styled';
 import { Cross } from '@ndla/icons/action';
 import { spacing, mq, breakpoints, colors, misc, fonts } from '@ndla/core';
@@ -41,14 +41,15 @@ interface Props {
   ariaLabel: string;
 }
 
-const ActiveFilterContent = ({ filter, onFilterRemove, ariaLabel }: Props) => (
+const ActiveFilterContent = forwardRef<HTMLButtonElement, Props>(({ filter, onFilterRemove, ariaLabel }, ref) => (
   <StyledActiveFilter
     aria-label={ariaLabel}
     type="button"
+    ref={ref}
     onClick={() => onFilterRemove(filter.value, filter.filterName)}>
     <StyledActiveFilterTitle>{filter.title}</StyledActiveFilterTitle>
     <Cross />
   </StyledActiveFilter>
-);
+));
 
 export default ActiveFilterContent;

package/src/Search/ContentTypeResult.tsx

@@ -23,7 +23,9 @@ const renderAdditionalIcon = (label: string, isAdditional?: boolean): ReactEleme
   if (isAdditional && label) {
     return (
       <Tooltip tooltip={label}>
-        <Additional className="c-icon--20" />
+        <div>
+          <Additional className="c-icon--20" aria-hidden={false} />
+        </div>
       </Tooltip>
     );
   }

package/src/SearchTypeResult/ActiveFilterContent.tsx

@@ -6,11 +6,11 @@
  *
  */
 
-import React from 'react';
+import React, { forwardRef } from 'react';
 import styled from '@emotion/styled';
 import { Cross } from '@ndla/icons/action';
 import { spacing, fonts } from '@ndla/core';
-import Button from '@ndla/button';
+import { ButtonV2 } from '@ndla/button';
 import { useTranslation } from 'react-i18next';
 
 export const StyledActiveFilterTitle = styled.span`
@@ -19,7 +19,7 @@ export const StyledActiveFilterTitle = styled.span`
   font-weight: ${fonts.weight.semibold};
 `;
 
-const StyledButton = styled(Button)`
+const StyledButton = styled(ButtonV2)`
   display: grid;
   grid-template-columns: 1fr auto;
 `;
@@ -35,21 +35,20 @@ type Props = {
   onFilterRemove: (value: string, name: string) => void;
 };
 
-const ActiveFilterContent = ({ filter, onFilterRemove }: Props) => {
+const ActiveFilterContent = forwardRef<HTMLButtonElement, Props>(({ filter, onFilterRemove }, ref) => {
   const { t } = useTranslation();
   return (
     <StyledButton
       aria-label={t('searchPage.searchFilterMessages.removeFilter', {
         filterName: filter.title,
       })}
-      type="button"
-      size="normal"
-      borderShape="rounded"
+      ref={ref}
+      shape="pill"
       onClick={() => onFilterRemove(filter.value, filter.name)}>
       <StyledActiveFilterTitle>{filter.title}</StyledActiveFilterTitle>
       <Cross />
     </StyledButton>
   );
-};
+});
 
 export default ActiveFilterContent;