@ndla/ui 50.5.0 → 50.5.1

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

@@ -986,6 +986,7 @@ declare const messages: {
                     delete: string;
                 };
                 fetchMore: string;
+                deleted: string;
             };
             flag: {
                 title: string;

package/lib/locale/messages-en.js

@@ -1004,7 +1004,8 @@ const messages = {
           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 +1019,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

@@ -986,6 +986,7 @@ declare const messages: {
                     delete: string;
                 };
                 fetchMore: string;
+                deleted: string;
             };
             flag: {
                 title: string;

package/lib/locale/messages-nb.js

@@ -1004,7 +1004,8 @@ const messages = {
           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 +1019,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

@@ -986,6 +986,7 @@ declare const messages: {
                     delete: string;
                 };
                 fetchMore: string;
+                deleted: string;
             };
             flag: {
                 title: string;

package/lib/locale/messages-nn.js

@@ -1004,7 +1004,8 @@ const messages = {
           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 +1019,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

@@ -986,6 +986,7 @@ declare const messages: {
                     delete: string;
                 };
                 fetchMore: string;
+                deleted: string;
             };
             flag: {
                 title: string;

package/lib/locale/messages-se.js

@@ -1004,7 +1004,8 @@ const messages = {
           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 +1019,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

@@ -986,6 +986,7 @@ declare const messages: {
                     delete: string;
                 };
                 fetchMore: string;
+                deleted: string;
             };
             flag: {
                 title: string;

package/lib/locale/messages-sma.js

@@ -1004,7 +1004,8 @@ const messages = {
           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 +1019,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.1",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "33f14792431d5c46241455f1f5e05ac9a81ab7d6"
+  "gitHead": "e2746547c6056cd97e80ced58fe8a3be9edf3c4b"
 }

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>
+);

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'>) => (