@ndla/ui 50.5.4 → 50.6.1

package/src/Navigation/NavigationBox.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2020-present, NDLA.
+ * Copyright (c) 2019-present, NDLA.
  *
  * This source code is licensed under the GPLv3 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -12,15 +12,16 @@ import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { ButtonV2 } from '@ndla/button';
 import { breakpoints, colors, misc, mq, spacing } from '@ndla/core';
-import { HumanMaleBoard } from '@ndla/icons/common';
+import { Additional, HumanMaleBoard } from '@ndla/icons/common';
 import { SafeLinkButton } from '@ndla/safelink';
 import { Switch } from '@ndla/switch';
 import { Heading } from '@ndla/typography';
 import { uuid } from '@ndla/util';
 
 const StyledWrapper = styled.nav`
-  margin: 20px 0 34px;
+  margin: ${spacing.normal} 0 ${spacing.mediumlarge};
 `;
+
 const StyledHeadingWrapper = styled.div`
   display: flex;
   justify-content: space-between;
@@ -33,77 +34,37 @@ const StyledHeading = styled(Heading)`
   }
 `;
 
-type listProps = {
-  direction?: 'horizontal' | 'vertical' | 'floating';
-};
-const StyledList = styled.ul<listProps>`
+const StyledList = styled.ul`
   list-style: none;
   margin: 0;
   padding: 0;
-  ${(props) =>
-    props.direction !== 'floating' &&
-    css`
-      ${mq.range({ from: breakpoints.tablet })} {
-        column-count: 2;
-        column-gap: 20px;
-        ${props.direction === 'horizontal' &&
-        css`
-          display: grid;
-          grid-template-columns: repeat(2, 1fr);
-        `}
-      }
-      ${mq.range({ from: breakpoints.tabletWide })} {
-        column-count: 3;
-        column-gap: 20px;
-        ${props.direction === 'horizontal' &&
-        css`
-          grid-template-columns: repeat(3, 1fr);
-        `}
-      }
-    `};
+
+  &[data-direction='horizontal'] {
+    ${mq.range({ from: breakpoints.tablet })} {
+      column-count: 2;
+      column-gap: 20px;
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+    }
+    ${mq.range({ from: breakpoints.tabletWide })} {
+      column-count: 3;
+      column-gap: 20px;
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
 `;
-type additionalResourceProps = {
-  isAdditionalResource?: boolean;
-  isRestrictedResource?: boolean;
-  lighter?: boolean;
-  selected?: boolean;
-  listDirection?: listProps['direction'];
-};
 
-const StyledListItem = styled.li<additionalResourceProps>`
+const StyledListItem = styled.li`
   margin-bottom: 0;
   break-inside: avoid;
-  ${(props) =>
-    props.listDirection === 'floating' &&
-    css`
-      display: inline-block;
-      margin: 0 ${spacing.xsmall} ${spacing.xsmall} 0;
-      ${mq.range({ until: breakpoints.mobileWide })} {
-        display: block;
-      }
-    `}
-`;
 
-const StyledListElementWrapper = styled.div<additionalResourceProps>`
-  position: relative;
-  ${(props) =>
-    props.isAdditionalResource &&
-    css`
-      & > * {
-        border: 1px dashed ${props.lighter && !props.selected ? `${colors.brand.tertiary}` : `${colors.brand.dark}`};
-        background-clip: padding-box;
-        :hover,
-        :focus {
-          border: 1px dashed ${colors.brand.dark};
-          background-clip: padding-box;
-          color: ${colors.white};
-          ${StyledAdditionalResourceMark} {
-            color: ${colors.white};
-            border-color: ${colors.white};
-          }
-        }
-      }
-    `}
+  &[data-direction='floating'] {
+    display: inline-block;
+    margin: 0 ${spacing.xsmall} ${spacing.xsmall} 0;
+    ${mq.range({ until: breakpoints.mobileWide })} {
+      display: block;
+    }
+  }
 `;
 
 const StyledSpacingElement = styled.span`
@@ -122,21 +83,22 @@ const StyledButtonContent = styled.span`
   align-items: center;
 `;
 
-const StyledButtonContentText = styled.span<additionalResourceProps>`
-  ${(props) => {
-    if (props.isAdditionalResource && props.isRestrictedResource) {
-      return `padding-left: ${spacing.medium};`;
-    }
-    if (props.isAdditionalResource || props.isRestrictedResource) {
-      return `padding-left: ${spacing.small};`;
-    }
-  }}
+const StyledButtonContentText = styled.span`
+  &[data-additional='true'][data-restricted='true'] {
+    padding-left: ${spacing.medium};
+  }
+  &[data-additional='true'] {
+    padding-left: ${spacing.small};
+  }
+  &[data-restricted='true'] {
+    padding-left: ${spacing.small};
+  }
 `;
 
 const StyledMarksWrapper = styled.span`
   position: absolute;
-  left: 7px;
-  top: 6px;
+  left: ${spacing.xxsmall};
+  top: ${spacing.xsmall};
   display: flex;
   align-items: center;
   & > * {
@@ -146,32 +108,45 @@ const StyledMarksWrapper = styled.span`
     margin-left: 0;
   }
 `;
-const StyledAdditionalResourceMark = styled.span<additionalResourceProps>`
-  color: ${(props) => (props.lighter && !props.selected ? `${colors.brand.dark}` : `${colors.white}`)};
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 18px;
-  text-align: center;
-  display: inline-block;
-  width: 20px;
-  height: 20px;
-  border: 1px solid ${(props) => (props.lighter && !props.selected ? `${colors.brand.dark}` : `${colors.white}`)};
-  border-radius: 100px;
-  transition: ${misc.transition.default};
+
+const StyledAdditional = styled(Additional)`
+  fill: ${colors.white};
+  width: ${spacing.nsmall};
+  height: ${spacing.nsmall};
 `;
 
 const StyledHumanBoardIconWrapper = styled.span`
   display: flex;
 `;
+
 const StyledButtonContentSelected = styled.span`
   width: 10px;
   height: 10px;
-  border-radius: 50%;
+  border-radius: ${misc.borderRadiusLarge};
   background: ${colors.white};
   flex-shrink: 0;
   margin-left: ${spacing.small};
 `;
 
+const StyledListElementWrapper = styled.div`
+  position: relative;
+  &[data-additional='true'] {
+    & > * {
+      border: 1px dashed ${colors.brand.dark};
+      background-clip: padding-box;
+      :hover,
+      :focus {
+        border: 1px dashed ${colors.brand.dark};
+        background-clip: padding-box;
+        color: ${colors.white};
+      }
+      &[data-color-mode='light'][data-selected='false'] {
+        border: 1px dashed ${colors.brand.tertiary};
+      }
+    }
+  }
+`;
+
 const listElementStyle = css`
   display: flex;
   flex: 1;
@@ -186,6 +161,7 @@ export type ItemProps = {
   isAdditionalResource?: boolean;
   isRestrictedResource?: boolean;
 };
+
 type Props = {
   heading?: string;
   colorMode?: 'primary' | 'darker' | 'light' | 'greyLightest' | 'greyLighter';
@@ -194,7 +170,7 @@ type Props = {
   onClick?: (event: MouseEvent<HTMLElement>, id?: string) => void;
   hasAdditionalResources?: boolean;
   showAdditionalResources?: boolean;
-  listDirection?: listProps['direction'];
+  listDirection?: 'horizontal' | 'floating';
   invertedStyle?: boolean;
   onToggleAdditionalResources?: (checked: boolean) => void;
 };
@@ -231,13 +207,13 @@ export const NavigationBox = ({
           />
         )}
       </StyledHeadingWrapper>
-      <StyledList data-testid="nav-box-list" direction={listDirection}>
+      <StyledList data-testid="nav-box-list" data-direction={listDirection}>
         {items?.map((item: ItemProps) => (
-          <StyledListItem key={item.label} listDirection={listDirection} data-testid="nav-box-item">
+          <StyledListItem key={item.label} data-direction={listDirection} data-testid="nav-box-item">
             <StyledListElementWrapper
-              isAdditionalResource={item.isAdditionalResource}
-              lighter={colorMode === 'light'}
-              selected={item.selected}
+              data-additional={item.isAdditionalResource}
+              data-color-mode={colorMode}
+              data-selected={item.selected}
             >
               <ListElementType
                 to={item.url ?? ''}
@@ -253,16 +229,12 @@ export const NavigationBox = ({
               >
                 <StyledButtonContent>
                   <StyledButtonContentText
-                    isAdditionalResource={item.isAdditionalResource}
-                    isRestrictedResource={item.isRestrictedResource}
-                    lighter={colorMode === 'light'}
+                    data-additional={item.isAdditionalResource}
+                    data-restricted={item.isRestrictedResource}
+                    data-color-mode={colorMode}
                   >
                     <StyledMarksWrapper>
-                      {item.isAdditionalResource && (
-                        <StyledAdditionalResourceMark lighter={colorMode === 'light'} selected={item.selected}>
-                          T
-                        </StyledAdditionalResourceMark>
-                      )}
+                      {item.isAdditionalResource && <StyledAdditional aria-label={t('resource.additionalTooltip')} />}
                       {item.isRestrictedResource && (
                         <StyledHumanBoardIconWrapper>
                           <HumanMaleBoard />

package/src/ResourceGroup/ResourceItem.tsx

@@ -264,12 +264,12 @@ const ResourceItem = ({
           <>
             {additional && (
               <IconWrapper id={additionalId} aria-label={contentTypeDescription} title={contentTypeDescription}>
-                <Additional />
+                <Additional color={colors.brand.dark} />
               </IconWrapper>
             )}
             {!additional && (
               <IconWrapper id={coreId} aria-label={contentTypeDescription} title={contentTypeDescription}>
-                <Core />
+                <Core color={colors.brand.primary} />
               </IconWrapper>
             )}
           </>

package/src/Search/ContentTypeResult.tsx

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

package/src/Search/SearchResult.tsx

@@ -223,9 +223,9 @@ const StyledBreadcrumb = styled.div`
   ${mq.range({ from: breakpoints.desktop })} {
     ${fonts.sizes('16px', '24px')};
   }
-  .c-icon {
-    width: 12px;
-    height: 12px;
+  [data-icon] {
+    width: ${spacing.small};
+    height: ${spacing.small};
     margin: 0 ${spacingUnit / 3}px;
 
     ${mq.range({ from: breakpoints.desktop })} {

package/src/Search/SearchResultSleeve.tsx

@@ -298,7 +298,7 @@ const SearchResultSleeve = ({
       <StyledScrollableContent extendHeight={frontpage ? 0 : 52}>
         {infoText && (
           <StyledAside>
-            <Wrench className="c-icon--22" />
+            <Wrench size="normal" />
             <span>{infoText}</span>
           </StyledAside>
         )}
@@ -309,7 +309,7 @@ const SearchResultSleeve = ({
               to={allResultUrl}
               tabIndex={-1}
             >
-              <SearchIcon className="c-icon--22" />
+              <SearchIcon size="normal" />
               <strong ref={searchAllRef}>{searchString}</strong>
               <small>{t('welcomePage.searchAllInfo')}</small>
             </StyledSearchLink>
@@ -319,7 +319,7 @@ const SearchResultSleeve = ({
                 to={suggestionUrl}
                 tabIndex={-1}
               >
-                <SearchIcon className="c-icon--22" />
+                <SearchIcon size="normal" />
                 <small>{t('searchPage.resultType.searchPhraseSuggestion')}</small>
                 <strong ref={searchSuggestionRef}>{suggestion}</strong>
               </StyledSearchLink>

package/src/Search/component.search-result.scss

@@ -259,7 +259,7 @@
       @include font-size(16px, 24px);
     }
 
-    .c-icon {
+    [data-icon] {
       width: 12px;
       height: 12px;
       margin: 0 $spacing--small/3;

package/src/SearchTypeResult/components/ItemContexts.tsx

@@ -102,7 +102,11 @@ const ItemContexts = ({ contexts, id, title }: ItemContextsType) => {
                   <ContextListItem key={context.url}>
                     <SafeLink to={context.url}>{title}</SafeLink>
                     <Breadcrumb breadcrumb={context.breadcrumb}>
-                      {context.isAdditional ? <Additional style={iconStyle} /> : <Core style={iconStyle} />}
+                      {context.isAdditional ? (
+                        <Additional style={iconStyle} color={colors.brand.dark} />
+                      ) : (
+                        <Core style={iconStyle} color={colors.brand.primary} />
+                      )}
                     </Breadcrumb>
                   </ContextListItem>
                 ))}

package/src/Topic/Topic.tsx

@@ -11,10 +11,9 @@ import { useTranslation } from 'react-i18next';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { ButtonV2 } from '@ndla/button';
-import { animations, breakpoints, colors, mq, spacing } from '@ndla/core';
+import { animations, breakpoints, colors, misc, mq, spacing } from '@ndla/core';
 import { CursorClick, ExpandTwoArrows } from '@ndla/icons/action';
-import { ChevronDown, ChevronUp, PlayCircleFilled } from '@ndla/icons/common';
-
+import { Additional, ChevronDown, ChevronUp, PlayCircleFilled } from '@ndla/icons/common';
 import { ModalCloseButton, ModalContent, Modal, ModalHeader, ModalTrigger } from '@ndla/modal';
 import { EmbedMetaData } from '@ndla/types-embed';
 import { Text, Heading } from '@ndla/typography';
@@ -25,10 +24,6 @@ import { MessageBox } from '../Messages';
 import { NavigationBox } from '../Navigation';
 import { ItemProps } from '../Navigation/NavigationBox';
 
-type InvertItProps = {
-  invertedStyle?: boolean;
-};
-
 const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
@@ -67,7 +62,7 @@ const TopicHeaderVisualElementWrapper = styled.div`
 `;
 
 const ShowVisualElementWrapper = styled.div`
-  border-radius: 50%;
+  border-radius: ${misc.borderRadiusLarge};
   width: 100%;
   height: 100%;
   overflow: hidden;
@@ -83,7 +78,7 @@ const VisualElementButton = styled(ButtonV2)`
 `;
 
 const TopicHeaderImage = styled.img`
-  border-radius: 50%;
+  border-radius: ${misc.borderRadiusLarge};
   aspect-ratio: 1;
   width: 100%;
   height: 100%;
@@ -121,7 +116,7 @@ const TopicHeaderOverlay = styled.div`
   left: 0;
   bottom: 0;
   right: 0;
-  border-radius: 50%;
+  border-radius: ${misc.borderRadiusLarge};
   transition: opacity ${animations.durations.fast};
   ${VisualElementButton}:hover & {
     opacity: 0.1;
@@ -144,37 +139,33 @@ const HeadingWrapper = styled.hgroup`
   }
 `;
 
-const StyledButtonWrapper = styled.div<InvertItProps>`
+const StyledButtonWrapper = styled.div`
   margin-top: ${spacing.small};
   padding: ${spacing.xsmall} 0 ${spacing.xsmall} ${spacing.medium};
-  border-left: 6px solid ${colors.brand.light};
-  ${(props) =>
-    props.invertedStyle &&
-    css`
-      button {
-        color: #fff;
-        &:hover,
-        &:focus {
-          color: #fff;
-        }
+  border-left: ${spacing.xsmall} solid ${colors.brand.light};
+  &[data-inverted='true'] {
+    button {
+      color: ${colors.white};
+      &:hover,
+      &:focus {
+        color: ${colors.white};
       }
-    `}
+    }
+  }
 `;
 
-const AdditionalIcon = styled.span`
+const StyledAdditional = styled(Additional)`
+  color: ${colors.brand.dark};
+  height: ${spacing.normal};
+  width: ${spacing.normal};
   padding: 1px;
-  border: 1px solid currentColor;
-  border-radius: 100%;
-  font-size: 15px;
-  width: 25px;
-  text-align: center;
 `;
 
-const StyledContentWrapper = styled.div<InvertItProps>`
-  padding-top: ${spacing.normal};
-  border-left: 6px solid ${colors.brand.light};
-  color: ${colors.text.primary};
+const StyledContentWrapper = styled.div`
   background-color: ${colors.white};
+  border-left: ${spacing.xsmall} solid ${colors.brand.light};
+  color: ${colors.text.primary};
+  padding-top: ${spacing.normal};
 `;
 
 const StyledModalHeader = styled(ModalHeader)`
@@ -268,7 +259,7 @@ const Topic = ({
             </Heading>
             {isAdditionalTopic && (
               <>
-                <AdditionalIcon aria-hidden="true">T</AdditionalIcon>
+                <StyledAdditional aria-hidden="true" />
                 <span>{t('navigation.additionalTopic')}</span>
               </>
             )}
@@ -320,7 +311,7 @@ const Topic = ({
       {messageBox && <MessageBox>{messageBox}</MessageBox>}
       <div>
         {onToggleShowContent && (
-          <StyledButtonWrapper invertedStyle={invertedStyle}>
+          <StyledButtonWrapper data-inverted={invertedStyle}>
             <ButtonV2
               aria-expanded={!!showContent}
               aria-controls={contentId}
@@ -339,11 +330,7 @@ const Topic = ({
             </ButtonV2>
           </StyledButtonWrapper>
         )}
-        {showContent && (
-          <StyledContentWrapper id={contentId} invertedStyle={invertedStyle}>
-            {children}
-          </StyledContentWrapper>
-        )}
+        {showContent && <StyledContentWrapper id={contentId}>{children}</StyledContentWrapper>}
       </div>
       {subTopics && subTopics.length !== 0 && (
         <NavigationBox

package/src/all.scss

@@ -1,4 +1,3 @@
 @import '~@ndla/core/scss/core';
-@import '~@ndla/icons/scss/icons';
 @import './main';
 @import '~@ndla/core/scss/utilities';

package/src/index.ts

@@ -56,7 +56,7 @@ export { default as RelatedArticleList, RelatedArticle } from './RelatedArticleL
 
 export { ErrorResourceAccessDenied, default as ErrorMessage } from './ErrorMessage';
 
-export { default as FileList, File, PdfFile } from './FileList';
+export { default as FileList, File, PdfFile, Format } from './FileList';
 
 export { default as Logo } from './Logo';