@ndla/ui 50.5.0 → 50.5.2

package/lib/locale/messages-en.d.ts

@@ -942,6 +942,7 @@ declare const messages: {
             category: {
                 title: string;
                 posts: string;
+                posts_plural: string;
             };
             new: {
                 post: string;
@@ -975,10 +976,12 @@ declare const messages: {
             topic: {
                 isDeleted: string;
                 responses: string;
+                responses_plural: string;
                 topicContent: string;
                 fetchMore: string;
             };
             posts: {
+                title: string;
                 notify: string;
                 dropdownMenu: {
                     report: string;
@@ -986,6 +989,7 @@ declare const messages: {
                     delete: string;
                 };
                 fetchMore: string;
+                deleted: string;
             };
             flag: {
                 title: string;

package/lib/locale/messages-en.js

@@ -960,7 +960,8 @@ const messages = {
       title: 'Arena',
       category: {
         title: 'Categories',
-        posts: 'Posts'
+        posts: 'post',
+        posts_plural: 'posts'
       },
       new: {
         post: 'Write a reply',
@@ -993,18 +994,21 @@ 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',
           edit: 'Edit post',
           delete: 'Delete post'
         },
-        fetchMore: 'Fetch more answers'
+        fetchMore: 'Fetch more answers',
+        deleted: 'This post has been deleted by the author.'
       },
       flag: {
         title: 'Report post / comment',
@@ -1018,7 +1022,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/lib/locale/messages-nb.d.ts

@@ -942,6 +942,7 @@ declare const messages: {
             category: {
                 title: string;
                 posts: string;
+                posts_plural: string;
             };
             publish: string;
             new: {
@@ -975,10 +976,12 @@ declare const messages: {
             topic: {
                 isDeleted: string;
                 responses: string;
+                responses_plural: string;
                 topicContent: string;
                 fetchMore: string;
             };
             posts: {
+                title: string;
                 notify: string;
                 dropdownMenu: {
                     report: string;
@@ -986,6 +989,7 @@ declare const messages: {
                     delete: string;
                 };
                 fetchMore: string;
+                deleted: string;
             };
             flag: {
                 title: string;

package/lib/locale/messages-nb.js

@@ -960,7 +960,8 @@ const messages = {
       title: 'Arena',
       category: {
         title: 'Kategorier',
-        posts: 'Innlegg'
+        posts: 'innlegg',
+        posts_plural: 'innlegg'
       },
       publish: 'Publiser',
       new: {
@@ -993,18 +994,21 @@ 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',
           edit: 'Rediger innlegg',
           delete: 'Slett innlegget'
         },
-        fetchMore: 'Hent flere svar'
+        fetchMore: 'Hent flere svar',
+        deleted: 'Dette innlegget er slettet av forfatteren.'
       },
       flag: {
         title: 'Rapporter innlegg / kommentar',
@@ -1018,7 +1022,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/lib/locale/messages-nn.d.ts

@@ -942,6 +942,7 @@ declare const messages: {
             category: {
                 title: string;
                 posts: string;
+                posts_plural: string;
             };
             publish: string;
             new: {
@@ -967,6 +968,7 @@ declare const messages: {
             topic: {
                 isDeleted: string;
                 responses: string;
+                responses_plural: string;
                 topicContent: string;
                 fetchMore: string;
             };
@@ -979,6 +981,7 @@ declare const messages: {
                 topic: string;
             };
             posts: {
+                title: string;
                 notify: string;
                 dropdownMenu: {
                     report: string;
@@ -986,6 +989,7 @@ declare const messages: {
                     delete: string;
                 };
                 fetchMore: string;
+                deleted: string;
             };
             flag: {
                 title: string;

package/lib/locale/messages-nn.js

@@ -960,7 +960,8 @@ const messages = {
       title: 'Arena',
       category: {
         title: 'Kategoriar',
-        posts: 'Innlegg'
+        posts: 'innlegg',
+        posts_plural: 'innlegg'
       },
       publish: 'Publiser',
       new: {
@@ -985,7 +986,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'
       },
@@ -998,13 +1000,15 @@ const messages = {
         topic: 'Innlegget har blitt oppdatert.'
       },
       posts: {
+        title: 'Innlegg',
         notify: 'Få varsel om nye svar',
         dropdownMenu: {
           report: 'Rapporter innlegg til moderator',
           edit: 'Rediger innlegg',
           delete: 'Slett innlegget'
         },
-        fetchMore: 'Hent fleire svar'
+        fetchMore: 'Hent fleire svar',
+        deleted: 'Dette innlegget er sletta av forfatteren.'
       },
       flag: {
         title: 'Rapporter innlegg / kommentar',
@@ -1018,7 +1022,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/lib/locale/messages-se.d.ts

@@ -942,6 +942,7 @@ declare const messages: {
             category: {
                 title: string;
                 posts: string;
+                posts_plural: string;
             };
             publish: string;
             new: {
@@ -975,10 +976,12 @@ declare const messages: {
             topic: {
                 isDeleted: string;
                 responses: string;
+                responses_plural: string;
                 topicContent: string;
                 fetchMore: string;
             };
             posts: {
+                title: string;
                 notify: string;
                 dropdownMenu: {
                     report: string;
@@ -986,6 +989,7 @@ declare const messages: {
                     delete: string;
                 };
                 fetchMore: string;
+                deleted: string;
             };
             flag: {
                 title: string;

package/lib/locale/messages-se.js

@@ -960,7 +960,8 @@ const messages = {
       title: 'Arena',
       category: {
         title: 'Lágit',
-        posts: 'Sáhkavuorru'
+        posts: 'sáhkavuorru',
+        posts_plural: 'sáhkavuorru'
       },
       publish: 'Almmuheaddji',
       new: {
@@ -993,18 +994,21 @@ 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',
           edit: 'Doaimmat čállosa',
           delete: 'Sihko čállosa'
         },
-        fetchMore: 'Viečča eanet vástádusaid'
+        fetchMore: 'Viečča eanet vástádusaid',
+        deleted: 'Čálli lea sihkon dán sáhkavuoru.'
       },
       flag: {
         title: 'Rapportere čállosa / kommentára',
@@ -1018,7 +1022,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/lib/locale/messages-sma.d.ts

@@ -942,6 +942,7 @@ declare const messages: {
             category: {
                 title: string;
                 posts: string;
+                posts_plural: string;
             };
             publish: string;
             new: {
@@ -975,10 +976,12 @@ declare const messages: {
             topic: {
                 isDeleted: string;
                 responses: string;
+                responses_plural: string;
                 topicContent: string;
                 fetchMore: string;
             };
             posts: {
+                title: string;
                 notify: string;
                 dropdownMenu: {
                     report: string;
@@ -986,6 +989,7 @@ declare const messages: {
                     delete: string;
                 };
                 fetchMore: string;
+                deleted: string;
             };
             flag: {
                 title: string;

package/lib/locale/messages-sma.js

@@ -960,7 +960,8 @@ const messages = {
       title: 'Sijjie',
       category: {
         title: 'Lïhtsh',
-        posts: 'Håaleme'
+        posts: 'håaleme',
+        posts_plural: 'håaleme'
       },
       publish: 'Bæjhkoehtidh',
       new: {
@@ -993,18 +994,21 @@ 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',
           edit: 'Jarkelimmie håalemistie',
           delete: 'Slett innlegget'
         },
-        fetchMore: 'Jienebh vaestiedassh veedtjedh'
+        fetchMore: 'Jienebh vaestiedassh veedtjedh',
+        deleted: 'Daate tjaalege lea tjaalegen tjïrrh sliejhteme.'
       },
       flag: {
         title: 'Påastem reektehtidh / kommentaarem',
@@ -1018,7 +1022,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "50.5.0",
+  "version": "50.5.2",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "33f14792431d5c46241455f1f5e05ac9a81ab7d6"
+  "gitHead": "6f4d9ec848fdae323b8bcb1dd0078599a616bfaa"
 }

package/src/Article/component.article.scss

@@ -145,7 +145,7 @@
     padding-left: 0;
   }
 
-  .c-content-type-badge {
+  [data-badge] {
     position: absolute;
     left: 0;
 

package/src/Aside/Aside.tsx

@@ -6,42 +6,107 @@
  *
  */
 
-import { ReactNode } from 'react';
-import BEMHelper from 'react-bem-helper';
-
-const classes = BEMHelper({
-  prefix: 'c-',
-  name: 'aside',
-});
-
-interface Props {
-  dangerouslySetInnerHTML?: {
-    __html: string;
-  };
-  children?: ReactNode;
+import { ComponentProps, useMemo } from 'react';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
+
+interface Props extends ComponentProps<'aside'> {
   narrowScreen?: boolean;
   wideScreen?: boolean;
   alwaysShow?: boolean;
 }
 
-const Aside = ({
-  children,
-  narrowScreen = false,
-  dangerouslySetInnerHTML,
-  wideScreen = false,
-  alwaysShow = false,
-}: Props) => {
-  const modifiers = {
-    narrowScreen,
-    wideScreen,
-    alwaysShow,
-  };
+const StyledAside = styled.aside`
+  position: relative;
+  margin: ${spacing.large} 0px;
+  ${mq.range({ from: breakpoints.tablet })} {
+    max-width: 350px;
+    float: right;
+    clear: right;
+    width: 50%;
+    left: auto !important;
+    padding: 0;
+    padding-left: ${spacing.small};
+    ${mq.range({ from: breakpoints.desktop })} {
+      width: 75%;
+    }
+  }
+
+  border-left: 4px solid ${colors.background.dark};
+`;
+
+const wideScreenStyle = css`
+  display: none;
+  ${mq.range({ from: breakpoints.tablet })} {
+    display: block;
+  }
+`;
+
+const narrowScreenStyle = css`
+  ${mq.range({ from: breakpoints.tablet })} {
+    display: none;
+  }
+`;
+
+const alwaysShowStyle = css`
+  display: block !important;
+`;
+
+const StyledAsideContent = styled.div`
+  color: ${colors.brand.greyDark};
+  padding: ${spacing.normal};
+
+  & > *:first-child {
+    margin-top: 0;
+  }
+  & > *:last-child {
+    margin-bottom: 0;
+  }
+
+  h2,
+  h3,
+  h4,
+  h5 {
+    ${fonts.size.text.metaText.small};
+    margin-top: ${spacing.normal};
+    margin-bottom: ${spacing.small};
+  }
+
+  & > ul:not([class]),
+  :not(li) > ul:not([class]) {
+    ${mq.range({ from: breakpoints.desktop })} {
+      margin-left: ${spacing.normal};
+    }
+  }
+
+  & > ol:not([class]),
+  :not(li) > ol:not([class]) {
+    ${mq.range({ from: breakpoints.desktop })} {
+      margin-left: ${spacing.large};
+    }
+  }
+`;
+
+const Aside = ({ children, narrowScreen = false, wideScreen = false, alwaysShow = false, ...rest }: Props) => {
+  const styling = useMemo(() => {
+    const styles = [];
+    if (narrowScreen) {
+      styles.push(narrowScreenStyle);
+    }
+    if (wideScreen) {
+      styles.push(wideScreenStyle);
+    }
+    if (alwaysShow) {
+      styles.push(alwaysShowStyle);
+    }
+    return styles;
+  }, [alwaysShow, narrowScreen, wideScreen]);
+
   return (
-    <aside {...classes('', modifiers)}>
-      <div {...classes('content')} dangerouslySetInnerHTML={dangerouslySetInnerHTML}>
-        {children}
-      </div>
-    </aside>
+    <StyledAside css={styling} {...rest}>
+      <StyledAsideContent>{children}</StyledAsideContent>
+    </StyledAside>
   );
 };
 

package/src/ContentTypeBadge/ContentTypeBadge.stories.tsx

@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import styled from '@emotion/styled';
+import { Meta, StoryFn, StoryObj } from '@storybook/react';
+import { spacing } from '@ndla/core';
+import { ContentTypeBadge } from './ContentTypeBadge';
+import { defaultParameters } from '../../../../stories/defaults';
+import * as contentTypes from '../model/ContentType';
+
+export default {
+  title: 'Components/ContentTypeBadge',
+  tags: ['autodocs'],
+  parameters: {
+    inlineStories: true,
+    ...defaultParameters,
+  },
+  args: {
+    size: 'small',
+    border: true,
+    type: 'subject-material',
+    background: true,
+    title: "I'm a badge",
+  },
+  argTypes: {
+    children: { control: false },
+  },
+  component: ContentTypeBadge,
+} as Meta<typeof ContentTypeBadge>;
+
+export const Default: StoryObj<typeof ContentTypeBadge> = {};
+
+export const Sizes: StoryFn<typeof ContentTypeBadge> = ({ ...args }) => (
+  <>
+    <ContentTypeBadge {...args} size="xx-small" />
+    <ContentTypeBadge {...args} size="x-small" />
+    <ContentTypeBadge {...args} size="small" />
+    <ContentTypeBadge {...args} size="large" />
+  </>
+);
+
+export const NoBorder: StoryObj<typeof ContentTypeBadge> = {
+  args: {
+    border: false,
+  },
+};
+
+export const NoBackground: StoryObj<typeof ContentTypeBadge> = {
+  args: {
+    background: false,
+  },
+};
+
+const BadgesWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${spacing.small};
+`;
+
+export const AllBadges: StoryFn<typeof ContentTypeBadge> = ({ ...args }) => (
+  <BadgesWrapper>
+    <ContentTypeBadge {...args} type={contentTypes.SUBJECT_MATERIAL} />
+    <ContentTypeBadge {...args} type={contentTypes.TASKS_AND_ACTIVITIES} />
+    <ContentTypeBadge {...args} type={contentTypes.ASSESSMENT_RESOURCES} />
+    <ContentTypeBadge {...args} type={contentTypes.SUBJECT} />
+    <ContentTypeBadge {...args} type={contentTypes.EXTERNAL_LEARNING_RESOURCES} />
+    <ContentTypeBadge {...args} type={contentTypes.SOURCE_MATERIAL} />
+    <ContentTypeBadge {...args} type={contentTypes.LEARNING_PATH} />
+    <ContentTypeBadge {...args} type={contentTypes.TOPIC} />
+    <ContentTypeBadge {...args} type={contentTypes.MULTIDISCIPLINARY_TOPIC} />
+    <ContentTypeBadge {...args} type={contentTypes.resourceEmbedTypeMapping.image} />
+    <ContentTypeBadge {...args} type={contentTypes.resourceEmbedTypeMapping.audio} />
+    <ContentTypeBadge {...args} type={contentTypes.resourceEmbedTypeMapping.video} />
+    <ContentTypeBadge {...args} type={contentTypes.resourceEmbedTypeMapping.concept} />
+  </BadgesWrapper>
+);