@ndla/ui 36.0.2 → 37.0.0

package/src/Figure/component.figure.scss

@@ -154,7 +154,7 @@
   margin-bottom: $spacing--small;
   font-family: $font;
   color: $primary-color;
-  @include inuit-font-size(16px, 24px);
+  @include font-size(16px, 24px);
   @include mq($from: tablet) {
     flex: 2;
     margin-bottom: $spacing--small;

package/src/KeyFigure/KeyFigure.stories.tsx

@@ -0,0 +1,36 @@
+/**
+ * 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 React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { defaultParameters } from '../../../../stories/defaults';
+import KeyFigure from './KeyFigure';
+
+export default {
+  title: 'Enkle komponenter/Nøkkeltall',
+  component: KeyFigure,
+  tags: ['autodocs'],
+  parameters: {
+    ...defaultParameters,
+    layout: 'centered',
+  },
+  args: {
+    title: '500',
+    subtitle: 'TVERRFAGLIGE RESSURSER',
+    image: {
+      alt: 'Nøkkeltall tverrfaglig',
+      src: 'https://api.test.ndla.no/image-api/raw/wMowCjRg.svg',
+    },
+  },
+} as Meta<typeof KeyFigure>;
+
+export const KeyFigureStory: StoryFn<typeof KeyFigure> = ({ ...args }) => {
+  return <KeyFigure {...args} />;
+};
+
+KeyFigureStory.storyName = 'Nøkkeltall';

package/src/{KeyPerformanceIndicator/KeyPerformanceIndicator.tsx → KeyFigure/KeyFigure.tsx}

@@ -8,7 +8,6 @@
 
 import styled from '@emotion/styled';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
-import { IImageMetaInformationV3 } from '@ndla/types-backend/build/image-api';
 
 const ContentWrapper = styled.div`
   display: flex;
@@ -48,19 +47,22 @@ const SubTitleWrapper = styled.div`
 `;
 
 interface Props {
-  image?: IImageMetaInformationV3;
+  image?: {
+    src?: string;
+    alt?: string;
+  };
   title: string;
-  subTitle: string;
+  subtitle: string;
 }
 
-const KeyPerformanceIndicator = ({ image, title, subTitle }: Props) => {
+const KeyFigure = ({ image, title, subtitle }: Props) => {
   return (
     <ContentWrapper>
-      <StyledImage src={image?.image.imageUrl} alt={image?.alttext.alttext} />
+      <StyledImage src={image?.src} alt={image?.alt} />
       <TitleWrapper>{title}</TitleWrapper>
-      <SubTitleWrapper>{subTitle}</SubTitleWrapper>
+      <SubTitleWrapper>{subtitle}</SubTitleWrapper>
     </ContentWrapper>
   );
 };
 
-export default KeyPerformanceIndicator;
+export default KeyFigure;

package/src/{KeyPerformanceIndicator → KeyFigure}/index.ts

@@ -6,4 +6,4 @@
  *
  */
 
-export { default as KeyPerformanceIndicator } from './KeyPerformanceIndicator';
+export { default as KeyFigure } from './KeyFigure';

package/src/LicenseByline/EmbedByline.stories.tsx

@@ -36,6 +36,7 @@ export default {
   },
   args: {
     topRounded: true,
+    bottomRounded: true,
     visibleAlt: 'Synlig alt-tekst kan legges her, eller fjernes helt',
     type: 'image',
     children: (

package/src/LicenseByline/EmbedByline.tsx

@@ -9,20 +9,29 @@
 import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
-import { breakpoints, colors, misc, mq, spacing } from '@ndla/core';
+import { breakpoints, colors, fonts, misc, mq, spacing } from '@ndla/core';
 import { getLicenseByAbbreviation, getLicenseCredits } from '@ndla/licenses';
 import { ICopyright as ImageCopyright } from '@ndla/types-backend/image-api';
 import { ICopyright as AudioCopyright } from '@ndla/types-backend/audio-api';
 import { ICopyright as ConceptCopyright } from '@ndla/types-backend/concept-api';
 import { BrightcoveCopyright } from '@ndla/types-embed';
+import { WarningOutline } from '@ndla/icons/common';
 import LicenseLink from './LicenseLink';
 import LicenseDescription from './LicenseDescription';
 
 interface BaseProps {
   topRounded?: boolean;
+  bottomRounded?: boolean;
   description?: string;
   children?: ReactNode;
   visibleAlt?: string;
+  error?: true | false;
+  first?: boolean;
+}
+
+export interface EmbedBylineErrorProps extends BaseProps {
+  type: EmbedBylineTypeProps['type'] | 'h5p' | 'external';
+  error: true;
 }
 
 interface ImageProps extends BaseProps {
@@ -50,7 +59,9 @@ interface ConceptProps extends BaseProps {
   copyright: ConceptCopyright;
 }
 
-type Props = ImageProps | BrightcoveProps | AudioProps | PodcastProps | ConceptProps;
+export type EmbedBylineTypeProps = ImageProps | BrightcoveProps | AudioProps | PodcastProps | ConceptProps;
+
+type Props = EmbedBylineTypeProps | EmbedBylineErrorProps;
 
 export type LicenseType = ReturnType<typeof getLicenseByAbbreviation>;
 
@@ -58,14 +69,29 @@ const BylineWrapper = styled.div`
   display: flex;
   flex-direction: column;
   gap: ${spacing.small};
+  font-family: ${fonts.sans};
+  ${fonts.sizes('18px', '24px')};
   background-color: ${colors.brand.lightest};
-  padding: ${spacing.small} ${spacing.normal};
+  padding: ${spacing.nsmall} ${spacing.normal};
   border: 1px solid ${colors.brand.tertiary};
-  border-bottom-right-radius: ${misc.borderRadius};
-  border-bottom-left-radius: ${misc.borderRadius};
+  border-top: none;
 
   &[data-top-rounded='true'] {
-    border-radius: ${misc.borderRadius};
+    border-top-right-radius: ${misc.borderRadius};
+    border-top-left-radius: ${misc.borderRadius};
+  }
+
+  &[data-bottom-rounded='true'] {
+    border-bottom-right-radius: ${misc.borderRadius};
+    border-bottom-left-radius: ${misc.borderRadius};
+  }
+
+  &[data-error='true'] {
+    border: none;
+    background-color: ${colors.support.redLightest};
+  }
+  &[data-first='true'] {
+    border-top: 1px solid ${colors.brand.tertiary};
   }
 `;
 
@@ -90,15 +116,37 @@ const LicenseInformationWrapper = styled.div`
   flex: 1;
 `;
 
-const EmbedByline = ({ type, topRounded, description, copyright, children, visibleAlt }: Props) => {
+const EmbedByline = ({
+  type,
+  topRounded,
+  bottomRounded,
+  description,
+  children,
+  visibleAlt,
+  first = true,
+  ...props
+}: Props) => {
   const { t, i18n } = useTranslation();
+  const strippedDescription = description?.trim();
+
+  if (props.error) {
+    const typeString = type === 'h5p' ? 'H5P' : t(`embed.type.${type}`).toLowerCase();
+    return (
+      <BylineWrapper data-top-rounded={topRounded} data-bottom-rounded={bottomRounded} data-error={true}>
+        <LicenseDescription description={t('embed.embedError', { type: typeString })} icon={<WarningOutline />} />
+      </BylineWrapper>
+    );
+  }
+
+  const { copyright } = props;
+
   const license = getLicenseByAbbreviation(copyright.license?.license ?? '', i18n.language);
   const authors = getLicenseCredits(copyright);
   const captionAuthors = Object.values(authors).find((i) => i.length > 0) ?? [];
 
   return (
-    <BylineWrapper data-top-rounded={topRounded}>
-      {!!description && <LicenseDescription description={description} />}
+    <BylineWrapper data-top-rounded={topRounded} data-bottom-rounded={bottomRounded} data-first={first}>
+      {!!strippedDescription?.length && description && <LicenseDescription description={description} />}
       {visibleAlt ? <StyledSpan>{`Alt: ${visibleAlt}`}</StyledSpan> : null}
       <RightsWrapper>
         <LicenseLink license={license} asLink={!!license.url.length} />

package/src/LicenseByline/LicenseDescription.tsx

@@ -8,27 +8,33 @@
 
 import styled from '@emotion/styled';
 import { colors, spacing } from '@ndla/core';
+import { ReactNode } from 'react';
 
 interface Props {
   description: string;
+  icon?: ReactNode;
 }
 
 const StyledParagraph = styled.p`
   margin: 0;
-  padding-bottom: ${spacing.xsmall};
-  border-bottom: 1px solid ${colors.brand.tertiary};
 `;
 
 const StyledFigCaption = styled.figcaption`
+  display: flex;
+  gap: ${spacing.small};
+  align-items: center;
   background: unset;
   padding: unset;
   font-size: unset;
   color: unset;
+  padding-bottom: ${spacing.xsmall};
+  border-bottom: inherit;
 `;
 
-const LicenseDescription = ({ description }: Props) => {
+const LicenseDescription = ({ description, icon }: Props) => {
   return (
     <StyledFigCaption>
+      {icon}
       <StyledParagraph>{description}</StyledParagraph>
     </StyledFigCaption>
   );

package/src/List/OrderedList.tsx

@@ -0,0 +1,115 @@
+/**
+ * Copyright (c) 2022-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 { fonts, spacing, spacingUnit } from '@ndla/core';
+import { forwardRef, HTMLAttributes } from 'react';
+
+export const generateListResets = () => {
+  let styles = '';
+  for (let $i = 0; $i < 50; $i++) {
+    styles += ` 
+      ol.ol-reset-${$i} { counter-reset: item ${$i - 1} }  
+    `;
+  }
+
+  return styles;
+};
+
+const listSpacing = {
+  xlarge: `${spacingUnit * 2.5}px`,
+  xxlarge: `${spacingUnit * 3}px`,
+};
+
+const StyledOl = styled.ol`
+  margin-top: 0;
+  margin-left: 0;
+  ${fonts.sizes('18px', '29px')};
+  list-style-type: none;
+
+  // Child ordered lists
+  ol {
+    padding-left: ${spacing.normal};
+  }
+  // List item
+  li {
+    margin-top: ${spacing.normal};
+  }
+
+  &[data-type='letters'] {
+    counter-reset: item 0;
+    > li {
+      counter-increment: item;
+      &:before {
+        position: absolute;
+        transform: translateX(-100%);
+        content: counter(item, upper-alpha) '.';
+        padding-right: 0.25em;
+      }
+
+      > ol[data-type='letters'] {
+        > li:before {
+          content: counter(item, lower-alpha) '.';
+        }
+        ol[data-type='letters'] {
+          padding-left: ${spacing.normal};
+          > li:before {
+            content: counter(item, lower-roman) '.';
+          }
+        }
+      }
+    }
+  }
+
+  &:not([data-type='letters']) {
+    counter-reset: item 0;
+    > li {
+      counter-increment: item;
+      &:before {
+        position: absolute;
+        transform: translateX(-100%);
+        padding-right: 0.25em;
+        content: counters(item, '.') '.';
+      }
+
+      > ol:not([data-type='letters']) {
+        padding-left: ${spacing.medium};
+        > li {
+          > ol:not([data-type='letters']) {
+            padding-left: ${spacing.large};
+            > li {
+              > ol:not([data-type='letters']) {
+                padding-left: ${listSpacing.xlarge};
+                ol:not([data-type='letters']) {
+                  padding-left: ${listSpacing.xxlarge};
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  // List reset classes
+  ${generateListResets()}
+`;
+
+interface Props extends HTMLAttributes<HTMLOListElement> {
+  type?: 'letters';
+  start?: number;
+}
+
+const OrderedList = forwardRef<HTMLOListElement, Props>(({ type, children, ...rest }, ref) => {
+  return (
+    <StyledOl data-type={type} ref={ref} {...rest}>
+      {children}
+    </StyledOl>
+  );
+});
+
+export default OrderedList;

package/src/List/UnOrderedList.tsx

@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) 2022-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 { colors, fonts, spacing } from '@ndla/core';
+import { forwardRef, HTMLAttributes } from 'react';
+import { generateListResets } from './OrderedList';
+
+const StyledUl = styled.ul`
+  > li {
+    ::marker {
+      color: ${colors.brand.secondary};
+    }
+  }
+  ul {
+    list-style-image: none;
+    padding-left: ${spacing.mediumlarge};
+  }
+  margin-top: 0;
+  margin-left: 0;
+  ${fonts.sizes('18px', '29px')};
+
+  // List item
+  li {
+    margin-top: ${spacing.normal};
+  }
+
+  // Child unordered lists
+  ul {
+    padding-left: ${spacing.nsmall};
+  }
+  // List reset classes
+  ${generateListResets()}
+`;
+
+const UnOrderedList = forwardRef<HTMLUListElement, HTMLAttributes<HTMLUListElement>>(({ children, ...rest }, ref) => {
+  return (
+    <StyledUl ref={ref} {...rest}>
+      {children}
+    </StyledUl>
+  );
+});
+
+export default UnOrderedList;

package/src/List/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2022-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+export { default as OrderedList } from './OrderedList';
+export { default as UnOrderedList } from './UnOrderedList';

package/src/MediaList/component.medialist.scss

@@ -28,7 +28,7 @@
 }
 
 .c-medialist__body {
-  @include inuit-font-size(14px, 24px);
+  @include font-size(14px, 24px);
   @include mq(tablet) {
     max-width: 70% !important;
   }
@@ -143,7 +143,7 @@
 .c-medialist__title {
   margin-top: 0;
   margin-bottom: $spacing--small/2;
-  @include inuit-font-size(16px);
+  @include font-size(16px, 1.5);
   color: $brand-color;
   + p {
     margin-top: 0;

package/src/Navigation/NavigationBox.tsx

@@ -8,6 +8,7 @@ import { Switch } from '@ndla/switch';
 import { uuid } from '@ndla/util';
 import { useTranslation } from 'react-i18next';
 import { HumanMaleBoard } from '@ndla/icons/common';
+import { Heading } from '../Typography';
 
 const StyledWrapper = styled.nav`
   margin: 20px 0 34px;
@@ -18,19 +19,10 @@ const StyledHeadingWrapper = styled.div`
   align-items: baseline;
 `;
 
-type InvertItProps = {
-  invertedStyle?: boolean;
-};
-
-const StyledHeading = styled.h2<InvertItProps>`
-  ${fonts.sizes('18px', '32px')};
-  text-transform: uppercase;
-  margin: 0 0 10px;
-  ${(props) =>
-    props.invertedStyle &&
-    css`
-      color: #fff;
-    `}
+const StyledHeading = styled(Heading)`
+  &[data-inverted='true'] {
+    color: ${colors.white};
+  }
 `;
 
 type listProps = {
@@ -216,7 +208,11 @@ export const NavigationBox = ({
   return (
     <StyledWrapper>
       <StyledHeadingWrapper>
-        {heading && <StyledHeading invertedStyle={invertedStyle}>{heading}</StyledHeading>}
+        {heading && (
+          <StyledHeading element="h2" margin="small" headingStyle="list-title" data-inverted={invertedStyle}>
+            {heading}
+          </StyledHeading>
+        )}
         {hasAdditionalResources && (
           <Switch
             id={uuid()}

package/src/Navigation/NavigationHeading.tsx

@@ -1,29 +1,12 @@
 import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-import { breakpoints, fonts, mq } from '@ndla/core';
+import { breakpoints, colors, fonts, mq } from '@ndla/core';
+import { Heading } from '../Typography';
 
-type InvertItProps = {
-  invertedStyle?: boolean;
-};
-
-const StyledH1 = styled.h1<InvertItProps>`
-  ${fonts.sizes('24px', '28px')};
-  margin: 30px 0 20px 0;
-  font-weight: ${fonts.weight.bold};
-  ${mq.range({ from: breakpoints.tablet })} {
-    margin: 40px 0 22px;
-    ${fonts.sizes('40px', '48px')};
-  }
-  ${mq.range({ from: breakpoints.desktop })} {
-    margin: 50px 0 24px;
-    ${fonts.sizes('52px', '65px')};
+const StyledHeading = styled(Heading)`
+  &[data-inverted='true'] {
+    color: ${colors.white};
   }
-  ${(props) =>
-    props.invertedStyle &&
-    css`
-      color: #fff;
-    `}
 `;
 const StyledMainText = styled.span`
   display: block;
@@ -49,10 +32,18 @@ type Props = {
 };
 
 export const NavigationHeading = ({ subHeading, children, invertedStyle, headingId }: Props) => (
-  <StyledH1 invertedStyle={invertedStyle} id={headingId} tabIndex={-1}>
+  <StyledHeading
+    element="h1"
+    margin="xlarge"
+    headingStyle="h1"
+    serif
+    data-inverted={invertedStyle}
+    id={headingId}
+    tabIndex={-1}
+  >
     {subHeading && <StyledSubText>{subHeading}</StyledSubText>}
     <StyledMainText>{children}</StyledMainText>
-  </StyledH1>
+  </StyledHeading>
 );
 
 export default NavigationHeading;

package/src/Notion/Notion.tsx

@@ -83,7 +83,7 @@ const Notion = ({ id, labels = [], text, title, visualElement, imageElement, chi
         {imageElement}
         {visualElement}
         <TextWrapper hasVisualElement={!!(imageElement || visualElement)}>
-          {parseMarkdown(`**${title}** \u2013 ${text}`, 'body')}
+          {parseMarkdown(`**${title.trim()}** \u2013 ${text}`, 'body')}
           {!!labels.length && (
             <LabelsContainer>
               {t('searchPage.resultType.notionLabels')}

package/src/RelatedArticleList/component.related-articles.scss

@@ -77,15 +77,11 @@
   }
 
   &__title {
-    @include font-size(18px);
+    @include font-size(18px, 1.33);
     margin: 0 0 $spacing--small 0;
     font-weight: $font-weight-semibold;
     display: flex;
 
-    @include chinese() {
-      @include font-size(20px);
-    }
-
     .c-content-type-badge {
       flex-shrink: 0;
       margin-top: 1px;
@@ -93,16 +89,10 @@
   }
 
   &__description {
-    @include font-size(16px);
-
-    @include chinese() {
-      @include font-size(18px);
-    }
+    @include font-size(16px, 1.5);
 
     span {
-      @include chinese() {
-        @include font-size(18px);
-      }
+      @include font-size(16px, 1.5);
     }
 
     margin: 0;

package/src/Resource/resourceComponents.tsx

@@ -8,13 +8,15 @@
 
 import styled from '@emotion/styled';
 import { colors, fonts, spacing } from '@ndla/core';
-import React, { MouseEvent, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { MenuButton } from '@ndla/button';
 import SafeLink from '@ndla/safelink';
 import { useNavigate } from 'react-router-dom';
 import { HashTag } from '@ndla/icons/common';
 import resourceTypeColor from '../utils/resourceTypeColor';
+import { resourceTypeMapping } from '../model/ContentType';
+
 export interface ResourceImageProps {
   alt: string;
   src: string;
@@ -196,7 +198,7 @@ export const ResourceTypeList = ({ resourceTypes }: ResourceTypeListProps) => {
     <StyledResourceTypeList aria-label={t('navigation.topics')}>
       {resourceTypes.map((resource, i) => (
         <StyledResourceListElement key={resource.id}>
-          {resource.name}
+          {resourceTypeMapping[resource.id] ? t(`embed.type.${resourceTypeMapping[resource.id]}`) : resource.name}
           {i !== resourceTypes.length - 1 && <StyledTopicDivider aria-hidden="true">•</StyledTopicDivider>}
         </StyledResourceListElement>
       ))}