@ndla/ui 50.10.3 → 50.11.1

package/src/ResourceGroup/ResourceItem.tsx

@@ -25,8 +25,8 @@ const listElementActiveColor = (contentType?: string) => {
       return colors.tasksAndActivities.dark;
     case contentTypes.ASSESSMENT_RESOURCES:
       return colors.assessmentResource.dark;
-    case contentTypes.EXTERNAL_LEARNING_RESOURCES:
-      return colors.externalLearningResource.dark;
+    case contentTypes.CONCEPT:
+      return colors.concept.text;
     case contentTypes.SOURCE_MATERIAL:
       return colors.sourceMaterial.dark;
     case contentTypes.LEARNING_PATH:
@@ -63,9 +63,15 @@ const ListElement = styled.li`
   border-radius: ${misc.borderRadius};
   background: ${colors.white};
   margin-bottom: ${spacing.xsmall};
-  display: flex;
-  justify-content: space-between;
+  display: grid;
   align-items: center;
+  grid-template-areas:
+    "badge resourceType typeWrapper"
+    "badge resourceLink typeWrapper";
+  grid-row-gap: ${spacing.xsmall};
+  grid-template-columns: auto 1fr auto;
+  grid-template-rows: auto auto;
+
   padding: ${spacing.small};
   &[data-additional="true"] {
     border-style: dashed;
@@ -96,9 +102,28 @@ const ListElement = styled.li`
   &[hidden] {
     display: none;
   }
+  [data-badge-wrapper="true"] {
+    &:has(+ a:hover) {
+      svg {
+        width: 20px;
+        height: 20px;
+      }
+    }
+  }
+  &:not([data-content-type]) {
+    grid-template-areas: "badge resourceLink typeWrapper";
+    grid-row-gap: 0;
+    align-items: center;
+  }
+  ${mq.range({ from: breakpoints.desktop })} {
+    grid-template-areas: "badge resourceLink resourceType typeWrapper";
+    grid-row-gap: 0;
+    align-items: center;
+  }
 `;
 
 const ResourceLink = styled(SafeLink)`
+  grid-area: resourceLink;
   display: flex;
   width: 100%;
   align-items: center;
@@ -118,35 +143,21 @@ const ResourceLink = styled(SafeLink)`
   }
   &:hover {
     text-decoration: none;
-    [data-badge-wrapper="true"] {
-      [data-badge] {
-        width: ${spacing.mediumlarge};
-        height: ${spacing.mediumlarge};
-
-        svg {
-          width: 20px;
-          height: 20px;
-        }
-        [data-type="subject-material"],
-        [data-type="learning-path"],
-        [data-type="source-material"],
-        [data-type="external-learning-resources"] {
-          svg {
-            width: ${spacing.medium};
-            height: ${spacing.medium};
-          }
-        }
-      }
-    }
   }
 `;
 
-const InlineContainer = styled.div`
-  display: inline;
-  width: 100%;
+const TitleContainer = styled.div`
+  align-items: normal;
+  display: flex;
+  flex-direction: column;
+  ${mq.range({ from: breakpoints.desktop })} {
+    align-items: center;
+    flex-direction: row;
+  }
 `;
 
 const ContentBadgeWrapper = styled.div`
+  grid-area: badge;
   display: flex;
   flex: 0 0 auto;
   text-align: center;
@@ -161,29 +172,43 @@ const ContentBadgeWrapper = styled.div`
     padding-left: ${spacing.xsmall};
   }
   ${mq.range({ from: breakpoints.desktop })} {
+    align-items: center;
     padding-right: ${spacing.nsmall};
   }
 `;
 
 const TypeWrapper = styled.div`
+  grid-area: typeWrapper;
   display: flex;
   align-items: center;
   gap: ${spacing.xsmall};
+  ${mq.range({ from: breakpoints.desktop })} {
+    align-items: center;
+  }
 `;
 
 const ContentTypeName = styled.span`
+  grid-area: resourceType;
   font-family: ${fonts.sans};
   ${fonts.sizes("14px", "18px")};
   font-weight: ${fonts.weight.semibold};
   color: ${colors.text.light};
-  text-align: right;
+  text-align: left;
+  ${mq.range({ from: breakpoints.desktop })} {
+    padding-left: 0;
+    text-align: right;
+    margin: 0 ${spacing.xsmall};
+  }
 `;
 
 const CurrentSmall = styled.small`
-  margin-left: ${spacing.xsmall};
   text-decoration: none;
   color: ${colors.text.primary};
   font-weight: ${fonts.weight.normal};
+  white-space: nowrap;
+  ${mq.range({ from: breakpoints.desktop })} {
+    padding: 0 ${spacing.xsmall};
+  }
 `;
 
 interface Props {
@@ -236,8 +261,12 @@ const ResourceItem = ({
       hidden={hidden && !active}
       data-active={active}
       data-additional={additional}
+      data-content-type={contentTypeName}
       style={listElementVars}
     >
+      <ContentBadgeWrapper data-badge-wrapper={!active}>
+        <ContentTypeBadge type={contentType ?? ""} background border={false} />
+      </ContentBadgeWrapper>
       <ResourceLink
         to={path}
         lang={language === "nb" ? "no" : language}
@@ -246,16 +275,13 @@ const ResourceItem = ({
         disabled={active}
         data-active={active}
       >
-        <ContentBadgeWrapper data-badge-wrapper={!active}>
-          <ContentTypeBadge type={contentType ?? ""} background border={false} />
-        </ContentBadgeWrapper>
-        <InlineContainer>
-          {name}
+        <TitleContainer>
+          <div>{name}</div>
           {active ? <CurrentSmall>{t("resource.youAreHere")}</CurrentSmall> : undefined}
-        </InlineContainer>
+        </TitleContainer>
       </ResourceLink>
+      {contentTypeName && <ContentTypeName>{contentTypeName}</ContentTypeName>}
       <TypeWrapper>
-        {contentTypeName && <ContentTypeName>{contentTypeName}</ContentTypeName>}
         {access && access === "teacher" && (
           <IconWrapper aria-label={t("article.access.onlyTeacher")} title={t("article.access.onlyTeacher")}>
             <HumanMaleBoard id={accessId} />

package/src/ResourceGroup/ResourceList.tsx

@@ -44,38 +44,36 @@ const ResourceList = ({
     resources.filter((res) => !res.additional).length === 0;
 
   return (
-    <div>
-      <StyledResourceList>
-        {resources.map(({ id, ...resource }) => (
-          <ResourceItem
-            id={id}
-            key={id}
-            contentType={contentType}
-            showAdditionalResources={showAdditionalResources}
-            heartButton={heartButton}
-            {...resource}
-            contentTypeDescription={
-              resource.additional ? t("resource.tooltipAdditionalTopic") : t("resource.tooltipCoreTopic")
+    <StyledResourceList>
+      {resources.map(({ id, ...resource }) => (
+        <ResourceItem
+          id={id}
+          key={id}
+          contentType={contentType}
+          showAdditionalResources={showAdditionalResources}
+          heartButton={heartButton}
+          {...resource}
+          contentTypeDescription={
+            resource.additional ? t("resource.tooltipAdditionalTopic") : t("resource.tooltipCoreTopic")
+          }
+        />
+      ))}
+      {renderAdditionalResourceTrigger && (
+        <li>
+          <NoContentBox
+            onClick={onClick}
+            buttonText={t("resource.toggleFilterLabel")}
+            text={
+              title
+                ? t("resource.noCoreResourcesAvailable", {
+                    name: title.toLowerCase(),
+                  })
+                : t("resource.noCoreResourcesAvailableUnspecific")
             }
           />
-        ))}
-        {renderAdditionalResourceTrigger && (
-          <li>
-            <NoContentBox
-              onClick={onClick}
-              buttonText={t("resource.toggleFilterLabel")}
-              text={
-                title
-                  ? t("resource.noCoreResourcesAvailable", {
-                      name: title.toLowerCase(),
-                    })
-                  : t("resource.noCoreResourcesAvailableUnspecific")
-              }
-            />
-          </li>
-        )}
-      </StyledResourceList>
-    </div>
+        </li>
+      )}
+    </StyledResourceList>
   );
 };
 

package/src/SearchTypeResult/SearchTypeResult.tsx

@@ -44,7 +44,7 @@ export type ContentType =
   | typeof constants.contentTypes.SUBJECT_MATERIAL
   | typeof constants.contentTypes.TASKS_AND_ACTIVITIES
   | typeof constants.contentTypes.ASSESSMENT_RESOURCES
-  | typeof constants.contentTypes.EXTERNAL_LEARNING_RESOURCES
+  | typeof constants.contentTypes.CONCEPT
   | typeof constants.contentTypes.SOURCE_MATERIAL
   | typeof constants.contentTypes.LEARNING_PATH
   | typeof constants.contentTypes.TOPIC

package/src/index.ts

@@ -74,10 +74,10 @@ export {
   TasksAndActivitiesHero,
   AssessmentResourcesHero,
   SubjectHero,
-  ExternalLearningResourcesHero,
   SourceMaterialHero,
   Hero,
   NdlaFilmHero,
+  ConceptHero,
   HeroContent,
 } from "./Hero";
 
@@ -175,8 +175,8 @@ export {
   AssessmentResourcesBadge,
   LearningPathBadge,
   SubjectBadge,
-  ExternalLearningResourcesBadge,
   SourceMaterialBadge,
+  ConceptBadge,
 } from "./ContentTypeBadge";
 
 export { SubjectHeader, SubjectBanner } from "./Subject";

package/src/locale/messages-en.ts

@@ -548,7 +548,6 @@ const messages = {
     "learning-path": "Learning path",
     "subject-material": "Subject material",
     "tasks-and-activities": "Task and activities",
-    "external-learning-resources": "External learning resources",
     "source-material": "Source material",
     "assessment-resources": "Assessment resource",
     topic: "Topic",

package/src/locale/messages-nb.ts

@@ -548,7 +548,6 @@ const messages = {
     "learning-path": "Læringssti",
     "subject-material": "Fagstoff",
     "tasks-and-activities": "Oppgaver og aktiviteter",
-    "external-learning-resources": "Ekstern læringsressurs",
     "source-material": "Kildemateriale",
     "assessment-resources": "Vurderingsressurs",
     topic: "Emne",

package/src/locale/messages-nn.ts

@@ -548,7 +548,6 @@ const messages = {
     "learning-path": "Læringssti",
     "subject-material": "Fagstoff",
     "tasks-and-activities": "Oppgåver og aktivitetar",
-    "external-learning-resources": "Ekstern læringsressurs",
     "source-material": "Kjeldemateriale",
     "assessment-resources": "Vurderingsressurs",
     topic: "Emne",

package/src/locale/messages-se.ts

@@ -550,7 +550,6 @@ const messages = {
     "learning-path": "Oahppanbálggis",
     "subject-material": "Fágaávdnasat",
     "tasks-and-activities": "Bihtát ja doaimmat",
-    "external-learning-resources": "Olgguldas oahppanresursa",
     "source-material": "Gáldomateriála",
     "assessment-resources": "Árvoštallanresursa",
     topic: "Fáddá",

package/src/locale/messages-sma.ts

@@ -552,7 +552,6 @@ const messages = {
     "learning-path": "Lïeremebaalka",
     "subject-material": "Faage-aamhtese",
     "tasks-and-activities": "Laavenjassh jïh darjomh",
-    "external-learning-resources": "Byjngetje lïeremevierhtie",
     "source-material": "Gaaltijevierhtieh",
     "assessment-resources": "Vuarjasjimmievierhtie",
     topic: "Teema",

package/src/model/ContentType.ts

@@ -10,41 +10,44 @@ export const SUBJECT_MATERIAL = "subject-material";
 export const TASKS_AND_ACTIVITIES = "tasks-and-activities";
 export const ASSESSMENT_RESOURCES = "assessment-resources";
 export const SUBJECT = "subject";
-export const EXTERNAL_LEARNING_RESOURCES = "external-learning-resources";
 export const SOURCE_MATERIAL = "source-material";
 export const LEARNING_PATH = "learning-path";
 export const TOPIC = "topic";
 export const MULTIDISCIPLINARY_TOPIC = "multidisciplinary-topic";
+export const CONCEPT = "concept";
+export const EXTERNAL = "external";
 
 export const contentTypes = {
   SUBJECT_MATERIAL,
   TASKS_AND_ACTIVITIES,
   ASSESSMENT_RESOURCES,
   SUBJECT,
-  EXTERNAL_LEARNING_RESOURCES,
   SOURCE_MATERIAL,
   LEARNING_PATH,
   TOPIC,
   MULTIDISCIPLINARY_TOPIC,
+  CONCEPT,
+  EXTERNAL,
 };
 
 export const RESOURCE_TYPE_LEARNING_PATH = "urn:resourcetype:learningPath";
 export const RESOURCE_TYPE_SUBJECT_MATERIAL = "urn:resourcetype:subjectMaterial";
 export const RESOURCE_TYPE_TASKS_AND_ACTIVITIES = "urn:resourcetype:tasksAndActivities";
 export const RESOURCE_TYPE_ASSESSMENT_RESOURCES = "urn:resourcetype:reviewResource";
-export const RESOURCE_TYPE_EXTERNAL_LEARNING_RESOURCES = "urn:resourcetype:externalResource";
 export const RESOURCE_TYPE_SOURCE_MATERIAL = "urn:resourcetype:SourceMaterial";
+export const RESOURCE_TYPE_CONCEPT = "urn:resourcetype:concept";
 
 export const ListOfContentTypes = [
   "SUBJECT_MATERIAL",
   "TASKS_AND_ACTIVITIES",
   "ASSESSMENT_RESOURCES",
   "SUBJECT",
-  "EXTERNAL_LEARNING_RESOURCES",
   "SOURCE_MATERIAL",
   "LEARNING_PATH",
   "TOPIC",
   "MULTIDISIPLINARY_TOPIC",
+  "CONCEPT",
+  "EXTERNAL",
 ];
 
 export const contentTypeMapping: Record<string, string> = {
@@ -52,8 +55,8 @@ export const contentTypeMapping: Record<string, string> = {
   [RESOURCE_TYPE_SUBJECT_MATERIAL]: SUBJECT_MATERIAL,
   [RESOURCE_TYPE_TASKS_AND_ACTIVITIES]: TASKS_AND_ACTIVITIES,
   [RESOURCE_TYPE_ASSESSMENT_RESOURCES]: ASSESSMENT_RESOURCES,
-  [RESOURCE_TYPE_EXTERNAL_LEARNING_RESOURCES]: EXTERNAL_LEARNING_RESOURCES,
   [RESOURCE_TYPE_SOURCE_MATERIAL]: SOURCE_MATERIAL,
+  [RESOURCE_TYPE_CONCEPT]: CONCEPT,
   default: SUBJECT_MATERIAL,
 };
 

package/src/utils/resourceTypeColor.tsx

@@ -23,8 +23,8 @@ export const resourceTypeColor = (type: string) => {
       return colors.tasksAndActivities.light;
     case contentTypes.ASSESSMENT_RESOURCES:
       return colors.assessmentResource.light;
-    case contentTypes.EXTERNAL_LEARNING_RESOURCES:
-      return colors.externalLearningResource.light;
+    case contentTypes.CONCEPT:
+      return colors.concept.light;
     case contentTypes.SOURCE_MATERIAL:
       return colors.sourceMaterial.light;
     case contentTypes.LEARNING_PATH: