@ndla/ui 50.5.0 → 50.5.2

package/src/ContentTypeBadge/ContentTypeBadge.tsx

@@ -6,8 +6,11 @@
  *
  */
 
-import BEMHelper from 'react-bem-helper';
+import { CSSProperties, ComponentProps, useMemo } from 'react';
 
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { breakpoints, colors, mq } from '@ndla/core';
 import { MenuBook } from '@ndla/icons/action';
 import {
   SubjectMaterial,
@@ -24,12 +27,7 @@ import { Concept, ImageNormal, SquareAudio, SquareVideo } from '@ndla/icons/edit
 
 import * as contentTypes from '../model/ContentType';
 
-const classes = new BEMHelper({
-  name: 'content-type-badge',
-  prefix: 'c-',
-});
-
-interface Props {
+interface Props extends ComponentProps<'div'> {
   size?: 'xx-small' | 'x-small' | 'small' | 'large';
   type: string;
   title?: string;
@@ -38,70 +36,170 @@ interface Props {
   className?: string;
 }
 
-export const ContentTypeBadge = ({ type, background, title, size = 'small', border = true, className }: Props) => {
-  const modifiers = [type, size];
-
-  let embedResource = false;
-
-  let icon = null;
-  switch (type) {
-    case contentTypes.SUBJECT_MATERIAL:
-      icon = <SubjectMaterial title={title} />;
-      break;
-    case contentTypes.TASKS_AND_ACTIVITIES:
-      icon = <TasksAndActivities title={title} />;
-      break;
-    case contentTypes.ASSESSMENT_RESOURCES:
-      icon = <AssessmentResource title={title} />;
-      break;
-    case contentTypes.SUBJECT:
-      icon = <MenuBook title={title} />;
-      break;
-    case contentTypes.EXTERNAL_LEARNING_RESOURCES:
-      icon = <ExternalLearningResource title={title} />;
-      break;
-    case contentTypes.SOURCE_MATERIAL:
-      icon = <SharedResource title={title} />;
-      break;
-    case contentTypes.LEARNING_PATH:
-      icon = <LearningPath title={title} />;
-      break;
-    case contentTypes.TOPIC:
-      icon = <Subject title={title} />;
-      break;
-    case contentTypes.MULTIDISCIPLINARY_TOPIC:
-      icon = <MultidisciplinaryTopic />;
-      break;
-    case contentTypes.resourceEmbedTypeMapping.image:
-      icon = <ImageNormal />;
-      embedResource = true;
-      break;
-    case contentTypes.resourceEmbedTypeMapping.audio:
-      icon = <SquareAudio />;
-      embedResource = true;
-      break;
-    case contentTypes.resourceEmbedTypeMapping.video:
-      icon = <SquareVideo />;
-      embedResource = true;
-      break;
-    case contentTypes.resourceEmbedTypeMapping.concept:
-      icon = <Concept />;
-      embedResource = true;
-      break;
-    default:
-      break;
-  }
-
-  if (embedResource) {
-    modifiers.push('embed-resource');
-  }
-  if (background) {
-    modifiers.push('background');
-  }
-  if (border) {
-    modifiers.push('border');
-  }
-  return <div {...classes('', modifiers, className)}>{icon}</div>;
+const sizes = {
+  'xx-small': css`
+    width: 20px;
+    height: 20px;
+    border: 1px solid;
+    svg {
+      width: 10px;
+      height: 10x;
+    }
+  `,
+  'x-small': css`
+    width: 20px;
+    height: 20px;
+    border: 1px solid;
+    ${mq.range({ from: breakpoints.tablet })} {
+      height: 26px;
+      width: 26px;
+    }
+    svg {
+      width: 10px;
+      height: 10x;
+      ${mq.range({ from: breakpoints.tablet })} {
+        width: 12px;
+        height: 12px;
+      }
+    }
+  `,
+  small: '',
+  large: css`
+    width: 50px;
+    height: 50px;
+    svg {
+      width: 25px;
+      height: 25px;
+    }
+  `,
+} as const;
+
+const BaseContentTypeBadge = styled.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100%;
+  width: 34px;
+  height: 34px;
+  color: var(--icon-color);
+`;
+
+const borderStyle = css`
+  border: 2px solid;
+  border-color: var(--icon-color);
+`;
+
+const backgroundStyle = css`
+  background-color: var(--background-color);
+`;
+
+const iconMap = {
+  [contentTypes.SUBJECT_MATERIAL]: {
+    icon: SubjectMaterial,
+    iconColor: colors.subjectMaterial.dark,
+    backgroundColor: colors.subjectMaterial.light,
+  },
+  [contentTypes.TASKS_AND_ACTIVITIES]: {
+    icon: TasksAndActivities,
+    iconColor: colors.tasksAndActivities.dark,
+    backgroundColor: colors.tasksAndActivities.light,
+  },
+  [contentTypes.ASSESSMENT_RESOURCES]: {
+    icon: AssessmentResource,
+    iconColor: colors.assessmentResource.dark,
+    backgroundColor: colors.assessmentResource.light,
+  },
+  [contentTypes.SUBJECT]: {
+    icon: MenuBook,
+    iconColor: colors.subject.dark,
+    backgroundColor: colors.subject.light,
+  },
+  [contentTypes.EXTERNAL_LEARNING_RESOURCES]: {
+    icon: ExternalLearningResource,
+    iconColor: colors.externalLearningResource.dark,
+    backgroundColor: colors.externalLearningResource.light,
+  },
+  [contentTypes.SOURCE_MATERIAL]: {
+    icon: SharedResource,
+    iconColor: colors.sourceMaterial.dark,
+    backgroundColor: colors.sourceMaterial.light,
+  },
+  [contentTypes.LEARNING_PATH]: {
+    icon: LearningPath,
+    iconColor: colors.learningPath.dark,
+    backgroundColor: colors.learningPath.light,
+  },
+  [contentTypes.TOPIC]: {
+    icon: Subject,
+    iconColor: colors.subject.dark,
+    backgroundColor: colors.subject.light,
+  },
+  [contentTypes.MULTIDISCIPLINARY_TOPIC]: {
+    icon: MultidisciplinaryTopic,
+    backgroundColor: '#b9b37b',
+  },
+  [contentTypes.resourceEmbedTypeMapping.image]: {
+    icon: ImageNormal,
+    iconColor: colors.brand.grey,
+    backgroundColor: colors.brand.greyLight,
+  },
+  [contentTypes.resourceEmbedTypeMapping.audio]: {
+    icon: SquareAudio,
+    iconColor: colors.brand.grey,
+    backgroundColor: colors.brand.greyLight,
+  },
+  [contentTypes.resourceEmbedTypeMapping.video]: {
+    icon: SquareVideo,
+    iconColor: colors.brand.grey,
+    backgroundColor: colors.brand.greyLight,
+  },
+  [contentTypes.resourceEmbedTypeMapping.concept]: {
+    icon: Concept,
+    iconColor: colors.brand.grey,
+    backgroundColor: colors.brand.greyLight,
+  },
+} as const;
+
+export const ContentTypeBadge = ({
+  type,
+  background,
+  title,
+  size = 'small',
+  border = true,
+  className,
+  ...rest
+}: Props) => {
+  const { Icon, style } = useMemo(() => {
+    const fromMap = iconMap[type];
+    const style = { '--icon-color': fromMap.iconColor, '--background-color': fromMap.backgroundColor } as CSSProperties;
+    return { Icon: fromMap.icon, style };
+  }, [type]);
+
+  const cssStyles = useMemo(() => {
+    const styles = [sizes[size]];
+    if (background) {
+      styles.push(backgroundStyle);
+    }
+    if (border) {
+      styles.push(borderStyle);
+    }
+    return styles;
+  }, [background, border, size]);
+
+  return (
+    <BaseContentTypeBadge
+      css={cssStyles}
+      title={title}
+      style={style}
+      aria-label={title}
+      className={className}
+      data-badge=""
+      data-type={type}
+      {...rest}
+    >
+      <Icon />
+    </BaseContentTypeBadge>
+  );
 };
 
 export const SubjectMaterialBadge = (props: Omit<Props, 'type'>) => (

package/src/FramedContent/FramedContent.tsx

@@ -6,24 +6,47 @@
  *
  */
 
-import { HTMLAttributes, useMemo } from 'react';
+import { HTMLAttributes } from 'react';
+import styled from '@emotion/styled';
+import { colors, spacing } from '@ndla/core';
 
 interface Props extends HTMLAttributes<HTMLDivElement> {}
 
-const FramedContent = ({ className, children, ...rest }: Props) => {
-  const classes = useMemo(() => {
-    const classes = ['c-bodybox'];
-    if (className) {
-      classes.push(className);
+const StyledFramedContent = styled.div`
+  padding: ${spacing.mediumlarge};
+  margin: ${spacing.large} 0;
+  border: 1px solid ${colors.brand.tertiary};
+  overflow: hidden;
+
+  .c-figure {
+    width: 100% !important;
+    left: auto !important;
+    padding: 0;
+
+    &.u-float-right,
+    &.u-float-small-right {
+      width: 50% !important;
+      margin-right: 0;
+    }
+
+    &.u-float-left,
+    &.u-float-small-left {
+      width: 50% !important;
+      margin-left: 0;
     }
-    return classes.join(' ');
-  }, [className]);
-
-  return (
-    <div className={classes} {...rest}>
-      {children}
-    </div>
-  );
+  }
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+
+const FramedContent = ({ children, ...rest }: Props) => {
+  return <StyledFramedContent {...rest}>{children}</StyledFramedContent>;
 };
 
 export default FramedContent;

package/src/ResourceGroup/ResourceItem.tsx

@@ -158,7 +158,7 @@ const ResourceWrapper = styled.div`
   gap: ${spacing.xsmall};
   align-items: center;
   :hover {
-    .c-content-type-badge {
+    [data-badge] {
       width: 38px;
       height: 38px;
 
@@ -166,10 +166,10 @@ const ResourceWrapper = styled.div`
         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 {
+      [data-type='subject-material'],
+      [data-type='learning-path'],
+      [data-type='source-material'],
+      [data-type='external-learning-resources'] {
         svg {
           width: 26px;
           height: 26px;

package/src/SearchTypeResult/components/ItemResourceHeader.tsx

@@ -34,7 +34,7 @@ const NoImageElement = styled.div<ItemTypeProps>`
   display: flex;
   align-items: center;
   justify-content: center;
-  .c-content-type-badge {
+  [data-badge] {
     width: 58px;
     height: 58px;
     opacity: 0.2;

package/src/SearchTypeResult/components/ItemTopicHeader.tsx

@@ -27,7 +27,7 @@ const Label = styled.div`
   align-items: center;
   margin: ${spacing.small} 0;
 
-  .c-content-type-badge {
+  [data-badge] {
     width: 26px;
     height: 26px;
     margin-right: ${spacing.xsmall};

package/src/locale/messages-en.ts

@@ -966,7 +966,8 @@ const messages = {
       title: 'Arena',
       category: {
         title: 'Categories',
-        posts: 'Posts',
+        posts: 'post',
+        posts_plural: 'posts',
       },
       new: {
         post: 'Write a reply',
@@ -1000,11 +1001,13 @@ const messages = {
       publish: 'Publish',
       topic: {
         isDeleted: 'The topic has been deleted and can not be displayed.',
-        responses: 'Responses',
+        responses: 'response',
+        responses_plural: 'responses',
         topicContent: 'Write your topic here',
         fetchMore: 'Fetch more topics',
       },
       posts: {
+        title: 'Posts',
         notify: 'Get notified of new answers',
         dropdownMenu: {
           report: 'Report post to moderator',
@@ -1012,6 +1015,7 @@ const messages = {
           delete: 'Delete post',
         },
         fetchMore: 'Fetch more answers',
+        deleted: 'This post has been deleted by the author.',
       },
       flag: {
         title: 'Report post / comment',
@@ -1027,8 +1031,7 @@ const messages = {
         maxLength: 'The maximum length for the text field is reached',
         error: 'The field is required',
       },
-      bottomText:
-        'Are you missing a category? You can request new categories. Use "Ask NDLA" or send an email to moderator@ndla.no',
+      bottomText: 'Are you missing a category? Let our moderator know at moderator@ndla.no',
       notification: {
         title: 'Notifications',
         showAll: 'View all notifications',

package/src/locale/messages-nb.ts

@@ -965,7 +965,8 @@ const messages = {
       title: 'Arena',
       category: {
         title: 'Kategorier',
-        posts: 'Innlegg',
+        posts: 'innlegg',
+        posts_plural: 'innlegg',
       },
       publish: 'Publiser',
       new: {
@@ -999,11 +1000,13 @@ const messages = {
       },
       topic: {
         isDeleted: 'Innlegget har blitt slettet og kan ikke vises.',
-        responses: 'Svar',
+        responses: 'svar',
+        responses_plural: 'svar',
         topicContent: 'Skriv innlegget ditt her',
         fetchMore: 'Hent flere innlegg',
       },
       posts: {
+        title: 'Innlegg',
         notify: 'Få varsel om nye svar',
         dropdownMenu: {
           report: 'Rapporter innlegg til moderator',
@@ -1011,6 +1014,7 @@ const messages = {
           delete: 'Slett innlegget',
         },
         fetchMore: 'Hent flere svar',
+        deleted: 'Dette innlegget er slettet av forfatteren.',
       },
       flag: {
         title: 'Rapporter innlegg / kommentar',
@@ -1026,8 +1030,7 @@ const messages = {
         maxLength: 'Maksimal lengde for tekstfeltet er nådd',
         error: 'Feltet er påkrevd',
       },
-      bottomText:
-        'Savner du en kategori? Du kan be om nye kategorier. Bruk “Spør NDLA” eller send en epost til moderator@ndla.no',
+      bottomText: 'Savner du en kategori? Gi vår moderator beskjed på moderator@ndla.no',
       notification: {
         title: 'Varslinger',
         showAll: 'Se alle varslinger',

package/src/locale/messages-nn.ts

@@ -965,7 +965,8 @@ const messages = {
       title: 'Arena',
       category: {
         title: 'Kategoriar',
-        posts: 'Innlegg',
+        posts: 'innlegg',
+        posts_plural: 'innlegg',
       },
       publish: 'Publiser',
       new: {
@@ -991,7 +992,8 @@ const messages = {
       },
       topic: {
         isDeleted: 'Innlegget har vorte sletta og kan ikkje visast.',
-        responses: 'Svar',
+        responses: 'svar',
+        responses_plural: 'svar',
         topicContent: 'Skriv innlegget ditt her',
         fetchMore: 'Hent fleire innlegg',
       },
@@ -1004,6 +1006,7 @@ const messages = {
         topic: 'Innlegget har blitt oppdatert.',
       },
       posts: {
+        title: 'Innlegg',
         notify: 'Få varsel om nye svar',
         dropdownMenu: {
           report: 'Rapporter innlegg til moderator',
@@ -1011,6 +1014,7 @@ const messages = {
           delete: 'Slett innlegget',
         },
         fetchMore: 'Hent fleire svar',
+        deleted: 'Dette innlegget er sletta av forfatteren.',
       },
       flag: {
         title: 'Rapporter innlegg / kommentar',
@@ -1026,8 +1030,7 @@ const messages = {
         maxLength: 'Maksimal lengd for tekstfeltet er nådd',
         error: 'Feltet er påkravd',
       },
-      bottomText:
-        'Saknar du ein kategori? Du kan be om nye kategoriar. Bruk "Spør NDLA" eller send ein epost til moderator@ndla.no',
+      bottomText: 'Saknar du ein kategori? Gi moderatoren vår beskjed på moderator@ndla.no',
       notification: {
         title: 'Varslingar',
         showAll: 'Sjå alle varslingar',

package/src/locale/messages-se.ts

@@ -967,7 +967,8 @@ const messages = {
       title: 'Arena',
       category: {
         title: 'Lágit',
-        posts: 'Sáhkavuorru',
+        posts: 'sáhkavuorru',
+        posts_plural: 'sáhkavuorru',
       },
       publish: 'Almmuheaddji',
       new: {
@@ -1001,11 +1002,13 @@ const messages = {
       },
       topic: {
         isDeleted: 'Čálus lea sihkojuvvon iige sáhte čájehuvvot.',
-        responses: 'Vástidan',
+        responses: 'vástidan',
+        responses_plural: 'vástidan',
         topicContent: 'Čále sáhkavuoru dása',
         fetchMore: 'Viečča eanet čállosiid',
       },
       posts: {
+        title: 'Sáhkavuorru',
         notify: 'Oaččo dieđu ođđa vástádusaid birra',
         dropdownMenu: {
           report: 'Raportere čállosa moderatorii',
@@ -1013,6 +1016,7 @@ const messages = {
           delete: 'Sihko čállosa',
         },
         fetchMore: 'Viečča eanet vástádusaid',
+        deleted: 'Čálli lea sihkon dán sáhkavuoru.',
       },
       flag: {
         title: 'Rapportere čállosa / kommentára',
@@ -1028,8 +1032,7 @@ const messages = {
         maxLength: 'Teakstagieddeguhkkodat lea joavdan',
         error: 'Fealta gáibiduvvo',
       },
-      bottomText:
-        'Váillahat go ovtta lági? Sáhtát jearrat ođđa lágiid. Geavat "Gihtten NDLA" dahje sádde e-poastta moderatator@ndla.no',
+      bottomText: 'Váillahat go ovtta lági? Atte min moderatora dieđu dása moderator@ndla.no',
       notification: {
         title: 'Muittuhusat',
         showAll: 'Čájet buot dieđuid',

package/src/locale/messages-sma.ts

@@ -969,7 +969,8 @@ const messages = {
       title: 'Sijjie',
       category: {
         title: 'Lïhtsh',
-        posts: 'Håaleme',
+        posts: 'håaleme',
+        posts_plural: 'håaleme',
       },
       publish: 'Bæjhkoehtidh',
       new: {
@@ -1003,11 +1004,13 @@ const messages = {
       },
       topic: {
         isDeleted: 'Tjaalege lea sliejhteme jïh ij maehtieh dam vuesiehtidh.',
-        responses: 'Vaestiedasse',
+        responses: 'vaestiedasse',
+        responses_plural: 'vaestiedasse',
         topicContent: 'Tjaelieh dov håalemem daesnie',
         fetchMore: 'Veedtjh jienebh saadtegh',
       },
       posts: {
+        title: 'Håaleme',
         notify: 'Bïeljelh mejtie orre vaestiedassh',
         dropdownMenu: {
           report: 'Reekth håalemem moderatovrese',
@@ -1015,6 +1018,7 @@ const messages = {
           delete: 'Slett innlegget',
         },
         fetchMore: 'Jienebh vaestiedassh veedtjedh',
+        deleted: 'Daate tjaalege lea tjaalegen tjïrrh sliejhteme.',
       },
       flag: {
         title: 'Påastem reektehtidh / kommentaarem',
@@ -1030,8 +1034,7 @@ const messages = {
         maxLength: 'Jeenjemes gåhkoe tjaalegegievleste båateme',
         error: 'Bielie daerpies',
       },
-      bottomText:
-        'Akte kategorije datne ohtsedh ? Datne maahtah orre kategoriji bïjre rohkelidh Nuhtjh "Gihtjh NDLA" jallh seedth e-påastem moderaator@ndla.no',
+      bottomText: 'Akte kategorije datne ohtsedh? Vedtieh mijjen moderatovrese bieljelimmiem moderatore@ndla.no',
       notification: {
         title: 'Bïeljelimmie',
         showAll: 'Gaajhkh bæjhkoehtimmieh vuartasjidh',

package/src/main.scss

@@ -4,9 +4,6 @@
 @import 'Logo/component.logo';
 @import 'Article/component.article';
 
-@import 'global/components/component.bodybox';
 @import 'Figure/component.figure';
-@import 'Aside/component.aside';
-@import 'ContentTypeBadge/component.content-type-badge';
 @import 'Filter/component.filter';
 @import 'Search/component.search';

package/src/Aside/component.aside.scss

@@ -1,91 +0,0 @@
-/**
-** Aside
-** Used to display "facts box" or secondary column for older articles (using --float modifier).
-**/
-
-.c-aside {
-  position: relative;
-  margin: $spacing--large 0;
-  @include font-size(16px, 1.5);
-  z-index: 1;
-
-  @include mq(tablet) {
-    @include float(3, 4, 'right');
-    max-width: 350px;
-  }
-
-  border-left: 4px solid $background-color--dark;
-
-  &--wideScreen {
-    display: none;
-    @include mq(tablet) {
-      display: block;
-    }
-  }
-
-  &--narrowScreen {
-    @include mq(tablet) {
-      display: none;
-    }
-  }
-  &--alwaysShow {
-    display: block !important;
-  }
-}
-
-.c-aside__content {
-  color: $brand-grey-dark;
-  padding: $spacing;
-
-  & > *:first-child {
-    margin-top: 0;
-  }
-  & > *:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.c-aside img {
-  box-shadow: 0px 0px 9px -3px $brand-grey;
-}
-
-.c-aside figure {
-  // Overrule default images width
-  width: 100% !important;
-  left: 0 !important;
-  padding: 0;
-}
-
-.c-aside h1 {
-  margin-top: 0;
-  margin-bottom: $spacing;
-  @include font-size(22px, 34px);
-  font-weight: $font-weight-bold;
-  position: relative;
-  z-index: 2;
-}
-
-.c-aside h2,
-.c-aside h3,
-.c-aside h4,
-.c-aside h5 {
-  display: block;
-  @include font-size(16px, 1.5);
-  letter-spacing: 0.1em;
-  margin-top: $spacing;
-  margin-bottom: $spacing--small;
-}
-
-.c-aside__content > ul:not([class]),
-.c-aside__content :not(li) > ul:not([class]) {
-  @include mq(desktop) {
-    margin-left: $spacing;
-  }
-}
-
-.c-aside__content > ol:not([class]),
-.c-aside__content :not(li) > ol:not([class]) {
-  @include mq(desktop) {
-    margin-left: $spacing--large;
-  }
-}