@ndla/ui 50.4.1 → 50.5.0

package/src/NDLAFilm/filmStyles.ts

@@ -8,7 +8,7 @@
 
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import { fonts, spacing, colors, mq, breakpoints, spacingUnit } from '@ndla/core';
+import { fonts, spacing, colors, mq, breakpoints } from '@ndla/core';
 
 export const setAnimations = () => {
   const styles: any = {};
@@ -35,8 +35,8 @@ const headingStyle = css`
   margin-left: ${spacing.normal};
   margin-right: ${spacing.normal};
   ${mq.range({ from: breakpoints.desktop })} {
-    margin-left: ${spacingUnit * 3}px;
-    margin-right: ${spacingUnit * 3}px;
+    margin-left: ${spacing.xlarge};
+    margin-right: ${spacing.xlarge};
   }
 `;
 

package/src/Resource/BlockResource.stories.tsx

@@ -27,9 +27,6 @@ export default {
     resourceTypes: {
       control: false,
     },
-    headingLevel: {
-      control: false,
-    },
     menu: {
       control: false,
     },

package/src/Resource/BlockResource.tsx

@@ -8,7 +8,8 @@
 
 import { ReactNode } from 'react';
 import styled from '@emotion/styled';
-import { colors, fonts, spacing } from '@ndla/core';
+import { colors, spacing } from '@ndla/core';
+import { Text } from '@ndla/typography';
 import {
   CompressedTagList,
   ResourceImageProps,
@@ -58,12 +59,10 @@ const BlockElementWrapper = styled.div`
   }
 `;
 
-const BlockDescription = styled.p`
+const BlockDescription = styled(Text)`
   display: -webkit-box;
   line-clamp: 2;
-  ${fonts.sizes(16)};
   height: 0em;
-  margin: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   transition: height 0.2s ease-out;
@@ -146,7 +145,6 @@ interface Props {
   resourceImage: ResourceImageProps;
   tags?: string[];
   description?: string;
-  headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
   menu?: ReactNode;
   isLoading?: boolean;
   targetBlank?: boolean;
@@ -163,7 +161,6 @@ const BlockResource = ({
   description,
   menu,
   isLoading,
-  headingLevel: Heading = 'h2',
   targetBlank,
   resourceTypes,
 }: Props) => {
@@ -186,11 +183,15 @@ const BlockResource = ({
         <ContentWrapper>
           <ResourceTypeAndTitleLoader loading={isLoading}>
             <ResourceTitleLink data-link="" title={title} target={targetBlank ? '_blank' : undefined} to={link}>
-              <Heading css={resourceHeadingStyle}>{title}</Heading>
+              <Text element="span" textStyle="label-small" css={resourceHeadingStyle}>
+                {title}
+              </Text>
             </ResourceTitleLink>
           </ResourceTypeAndTitleLoader>
           <ResourceTypeList resourceTypes={resourceTypes} />
-          <BlockDescription data-description="">{description}</BlockDescription>
+          <BlockDescription element="p" textStyle="meta-text-small" margin="none" data-description="">
+            {description}
+          </BlockDescription>
         </ContentWrapper>
         <TagsAndActionMenu>
           {tags && tags.length > 0 && <CompressedTagList tagLinkPrefix={tagLinkPrefix} tags={tags} />}

package/src/Resource/ListResource.stories.tsx

@@ -27,9 +27,6 @@ export default {
     resourceTypes: {
       control: false,
     },
-    headingLevel: {
-      control: false,
-    },
     menu: {
       control: false,
     },

package/src/Resource/ListResource.tsx

@@ -8,7 +8,8 @@
 
 import { ReactNode } from 'react';
 import styled from '@emotion/styled';
-import { fonts, spacing, colors, breakpoints, mq } from '@ndla/core';
+import { spacing, colors, breakpoints, mq } from '@ndla/core';
+import { Text } from '@ndla/typography';
 import {
   CompressedTagList,
   ResourceImageProps,
@@ -81,17 +82,15 @@ const StyledImage = styled(Image)`
   aspect-ratio: 4/3;
 `;
 
-const StyledResourceDescription = styled.p`
+const StyledResourceDescription = styled(Text)`
   grid-area: description;
   line-clamp: 2;
-  line-height: 1em;
   height: 3.1em;
   margin: 0 ${spacing.small} ${spacing.small} 0;
   ${mq.range({ until: breakpoints.mobileWide })} {
     margin: 0 ${spacing.small};
   }
   overflow: hidden;
-  ${fonts.sizes(16)};
   text-overflow: ellipsis;
   // Unfortunate css needed for multi-line text overflow ellipsis.
   display: -webkit-box;
@@ -190,7 +189,11 @@ const Description = ({ description, loading }: ResourceDescriptionProps) => {
       </ContentLoader>
     );
   }
-  return <StyledResourceDescription>{description}</StyledResourceDescription>;
+  return (
+    <StyledResourceDescription element="p" textStyle="meta-text-small">
+      {description}
+    </StyledResourceDescription>
+  );
 };
 
 export interface ListResourceProps {
@@ -227,7 +230,7 @@ const ListResource = ({
 
   return (
     <ListResourceWrapper id={id}>
-      <ImageWrapper imageSize={imageType}>
+      <ImageWrapper imageSize={imageType} data-image-size={imageType}>
         <ListResourceImage
           resourceImage={resourceImage}
           loading={isLoading}
@@ -239,9 +242,9 @@ const ListResource = ({
       <TopicAndTitleWrapper>
         <TypeAndTitleLoader loading={isLoading}>
           <StyledLink to={link} data-link="" target={targetBlank ? '_blank' : undefined}>
-            <h1 css={resourceHeadingStyle} title={title}>
+            <Text element="span" textStyle="label-small" css={resourceHeadingStyle} title={title}>
               {title}
-            </h1>
+            </Text>
           </StyledLink>
           <ResourceTypeList resourceTypes={resourceTypes} />
         </TypeAndTitleLoader>

package/src/Resource/resourceComponents.tsx

@@ -46,7 +46,6 @@ export const resourceHeadingStyle = css`
   margin: 0;
   overflow: hidden;
   text-overflow: ellipsis;
-  font-weight: ${fonts.weight.bold};
   // Unfortunate css needed for multi-line text overflow ellipsis.
   line-height: 1;
   display: -webkit-box;
@@ -54,7 +53,6 @@ export const resourceHeadingStyle = css`
   line-clamp: 1;
   -webkit-box-orient: vertical;
   grid-area: resourceTitle;
-  ${fonts.sizes('16px', '20px')};
 `;
 
 const StyledTagList = styled.ul`

package/src/Subject/SubjectHeader.tsx

@@ -8,7 +8,7 @@
 
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import { colors, fonts, mq, spacing, spacingUnit, breakpoints } from '@ndla/core';
+import { colors, fonts, mq, spacing, breakpoints } from '@ndla/core';
 import OneColumn from '../Layout/OneColumn';
 
 type Types = 'mobile' | 'tablet' | 'desktop' | 'wide';
@@ -77,12 +77,12 @@ const StyledHeading = styled.h1`
   ${mq.range({ from: breakpoints.tablet })} {
     margin: 0;
     ${fonts.sizes('40px', '40px')};
-    padding: 0 0 0 ${spacingUnit * 3}px;
+    padding: 0 0 0 ${spacing.xlarge};
   }
   ${mq.range({ from: breakpoints.desktop })} {
     margin: 0;
     ${fonts.sizes('52px', '52px')};
-    padding: 0 0 0 ${spacingUnit * 3}px;
+    padding: 0 0 0 ${spacing.xlarge};
   }
 `;
 

package/src/locale/messages-en.ts

@@ -999,8 +999,10 @@ const messages = {
       },
       publish: 'Publish',
       topic: {
+        isDeleted: 'The topic has been deleted and can not be displayed.',
         responses: 'Responses',
         topicContent: 'Write your topic here',
+        fetchMore: 'Fetch more topics',
       },
       posts: {
         notify: 'Get notified of new answers',
@@ -1009,6 +1011,7 @@ const messages = {
           edit: 'Edit post',
           delete: 'Delete post',
         },
+        fetchMore: 'Fetch more answers',
       },
       flag: {
         title: 'Report post / comment',
@@ -1042,7 +1045,7 @@ const messages = {
     iconMenu: {
       folders: 'Folders',
       tags: 'Tags',
-      subjects: 'Favourite subjects',
+      subjects: 'Subjects',
       profile: 'Profile',
       more: 'More',
     },

package/src/locale/messages-nb.ts

@@ -998,8 +998,10 @@ const messages = {
         topic: 'Innlegget har blitt oppdatert.',
       },
       topic: {
+        isDeleted: 'Innlegget har blitt slettet og kan ikke vises.',
         responses: 'Svar',
         topicContent: 'Skriv innlegget ditt her',
+        fetchMore: 'Hent flere innlegg',
       },
       posts: {
         notify: 'Få varsel om nye svar',
@@ -1008,6 +1010,7 @@ const messages = {
           edit: 'Rediger innlegg',
           delete: 'Slett innlegget',
         },
+        fetchMore: 'Hent flere svar',
       },
       flag: {
         title: 'Rapporter innlegg / kommentar',

package/src/locale/messages-nn.ts

@@ -990,8 +990,10 @@ const messages = {
         topic: 'Slett innlegg',
       },
       topic: {
+        isDeleted: 'Innlegget har vorte sletta og kan ikkje visast.',
         responses: 'Svar',
         topicContent: 'Skriv innlegget ditt her',
+        fetchMore: 'Hent fleire innlegg',
       },
       deleted: {
         post: 'Kommentaren din har blitt sletta.',
@@ -1008,6 +1010,7 @@ const messages = {
           edit: 'Rediger innlegg',
           delete: 'Slett innlegget',
         },
+        fetchMore: 'Hent fleire svar',
       },
       flag: {
         title: 'Rapporter innlegg / kommentar',

package/src/locale/messages-se.ts

@@ -1000,8 +1000,10 @@ const messages = {
         topic: 'Sáhkavuorru lea ođasmahttojuvvon.',
       },
       topic: {
+        isDeleted: 'Čálus lea sihkojuvvon iige sáhte čájehuvvot.',
         responses: 'Vástidan',
         topicContent: 'Čále sáhkavuoru dása',
+        fetchMore: 'Viečča eanet čállosiid',
       },
       posts: {
         notify: 'Oaččo dieđu ođđa vástádusaid birra',
@@ -1010,6 +1012,7 @@ const messages = {
           edit: 'Doaimmat čállosa',
           delete: 'Sihko čállosa',
         },
+        fetchMore: 'Viečča eanet vástádusaid',
       },
       flag: {
         title: 'Rapportere čállosa / kommentára',

package/src/locale/messages-sma.ts

@@ -1002,8 +1002,10 @@ const messages = {
         topic: 'Håaleme lea orrestahteme.',
       },
       topic: {
+        isDeleted: 'Tjaalege lea sliejhteme jïh ij maehtieh dam vuesiehtidh.',
         responses: 'Vaestiedasse',
         topicContent: 'Tjaelieh dov håalemem daesnie',
+        fetchMore: 'Veedtjh jienebh saadtegh',
       },
       posts: {
         notify: 'Bïeljelh mejtie orre vaestiedassh',
@@ -1012,6 +1014,7 @@ const messages = {
           edit: 'Jarkelimmie håalemistie',
           delete: 'Slett innlegget',
         },
+        fetchMore: 'Jienebh vaestiedassh veedtjedh',
       },
       flag: {
         title: 'Påastem reektehtidh / kommentaarem',

package/src/main.scss

@@ -7,8 +7,6 @@
 @import 'global/components/component.bodybox';
 @import 'Figure/component.figure';
 @import 'Aside/component.aside';
-@import 'global/components/component.logo';
-@import 'MediaList/component.medialist';
 @import 'ContentTypeBadge/component.content-type-badge';
 @import 'Filter/component.filter';
 @import 'Search/component.search';

package/src/MediaList/component.medialist.scss

@@ -1,93 +0,0 @@
-/**
-** MEDIALIST
-** List all types of media (used in general license box)
-**/
-
-.c-medialist {
-  padding-left: 0;
-  display: flex;
-  flex-direction: column;
-  margin: $spacing 0;
-}
-
-.c-medialist__item {
-  margin-bottom: $spacing--small;
-  padding: $spacing--small 0;
-  border-bottom: 1px solid $brand-color--tertiary;
-  @include mq(tablet) {
-    display: flex;
-    flex-direction: row;
-  }
-
-  &:last-child {
-    border-bottom: none;
-  }
-  img {
-    width: 100%;
-  }
-}
-
-.c-medialist__body {
-  @include font-size(14px, 24px);
-  @include mq(tablet) {
-    max-width: 70% !important;
-  }
-  @include mq(970px) {
-    max-width: 75% !important;
-  }
-}
-
-.c-medialist__actions {
-  margin-top: $spacing--small;
-  margin-bottom: $spacing--small;
-  margin-left: 0;
-  padding-left: 0;
-  list-style: none;
-  width: 100%;
-  button,
-  a {
-    margin: 0 $spacing--small $spacing--small 0;
-  }
-}
-.c-medialist__meta {
-  margin-bottom: $spacing--small;
-  padding-bottom: $spacing--small;
-}
-.c-medialist__meta-item {
-  width: 100%;
-  padding-right: $spacing--small;
-  margin: $spacing--small / 4 0;
-  line-height: 1.1rem;
-}
-.c-medialist__ref {
-  background: $white;
-  padding: $spacing--small $spacing;
-  @include mq(tablet) {
-    padding-left: $spacing--small + 24px;
-  }
-  margin-top: $spacing--small;
-  margin-right: $spacing;
-  width: 100%;
-  @include mq($until: tablet) {
-    button,
-    a {
-      width: 100%;
-      margin: $spacing--small / 4 0;
-    }
-  }
-}
-.c-medialist__icon {
-  color: $brand-color;
-  width: $spacing * 3;
-  height: auto !important;
-  margin: $spacing;
-}
-.c-medialist__title {
-  margin-top: 0;
-  margin-bottom: $spacing--small/2;
-  @include font-size(16px, 1.5);
-  color: $brand-color;
-  + p {
-    margin-top: 0;
-  }
-}

package/src/global/components/component.logo.scss

@@ -1,5 +0,0 @@
-.c-logo {
-  a {
-    box-shadow: none;
-  }
-}