@ndla/ui 36.0.1 → 37.0.0

package/src/LicenseByline/EmbedByline.tsx

@@ -0,0 +1,165 @@
+/**
+ * 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 { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
+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 {
+  type: 'image';
+  copyright: ImageCopyright;
+}
+
+interface BrightcoveProps extends BaseProps {
+  type: 'video';
+  copyright: BrightcoveCopyright;
+}
+
+interface AudioProps extends BaseProps {
+  type: 'audio';
+  copyright: AudioCopyright;
+}
+
+interface PodcastProps extends BaseProps {
+  type: 'podcast';
+  copyright: AudioCopyright;
+}
+
+interface ConceptProps extends BaseProps {
+  type: 'concept';
+  copyright: ConceptCopyright;
+}
+
+export type EmbedBylineTypeProps = ImageProps | BrightcoveProps | AudioProps | PodcastProps | ConceptProps;
+
+type Props = EmbedBylineTypeProps | EmbedBylineErrorProps;
+
+export type LicenseType = ReturnType<typeof getLicenseByAbbreviation>;
+
+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.nsmall} ${spacing.normal};
+  border: 1px solid ${colors.brand.tertiary};
+  border-top: none;
+
+  &[data-top-rounded='true'] {
+    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};
+  }
+`;
+
+const RightsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${spacing.nsmall};
+
+  ${mq.range({ until: breakpoints.tablet })} {
+    align-items: flex-start;
+    gap: ${spacing.xsmall};
+    flex-direction: column;
+  }
+`;
+
+const StyledSpan = styled.span`
+  font-style: italic;
+  color: grey;
+`;
+
+const LicenseInformationWrapper = styled.div`
+  flex: 1;
+`;
+
+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} 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} />
+        <LicenseInformationWrapper>
+          <span>
+            <b>{t(`embed.type.${type}`)}: </b>
+            {captionAuthors.map((author) => author.name).join(', ')}
+          </span>
+        </LicenseInformationWrapper>
+        {children}
+      </RightsWrapper>
+    </BylineWrapper>
+  );
+};
+
+export default EmbedByline;

package/src/LicenseByline/LicenseDescription.tsx

@@ -0,0 +1,43 @@
+/**
+ * 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 { colors, spacing } from '@ndla/core';
+import { ReactNode } from 'react';
+
+interface Props {
+  description: string;
+  icon?: ReactNode;
+}
+
+const StyledParagraph = styled.p`
+  margin: 0;
+`;
+
+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, icon }: Props) => {
+  return (
+    <StyledFigCaption>
+      {icon}
+      <StyledParagraph>{description}</StyledParagraph>
+    </StyledFigCaption>
+  );
+};
+
+export default LicenseDescription;

package/src/LicenseByline/LicenseLink.tsx

@@ -0,0 +1,42 @@
+/**
+ * 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 SafeLink from '@ndla/safelink';
+import { colors, fonts } from '@ndla/core';
+import { LicenseType } from './EmbedByline';
+
+interface Props {
+  license: LicenseType;
+  asLink?: boolean;
+}
+
+const StyledSafeLink = styled(SafeLink)`
+  color: ${colors.brand.primary};
+  font-weight: ${fonts.weight.bold};
+  text-decoration: underline;
+  box-shadow: none;
+  &:hover,
+  &:focus-within {
+    text-decoration: none;
+  }
+`;
+
+const StyledSpan = styled.span`
+  font-weight: ${fonts.weight.bold};
+`;
+
+const LicenseLink = ({ license, asLink = true }: Props) => {
+  if (asLink) {
+    return <StyledSafeLink to={license.url}>{license.abbreviation}</StyledSafeLink>;
+  } else {
+    return <StyledSpan>{license.abbreviation}</StyledSpan>;
+  }
+};
+
+export default LicenseLink;

package/src/LicenseByline/index.tsx

@@ -0,0 +1 @@
+export { default as EmbedByline } from './EmbedByline';

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>
       ))}

package/src/Table/component.tables.scss

@@ -83,31 +83,6 @@ article table {
 
   // scrolling shadows on left/right
 
-  @include chinese() {
-    th {
-      @include font-size(18px, 22px);
-
-      @include mq(tablet) {
-        @include font-size(18px, 30px);
-      }
-    }
-
-    thead tr:nth-child(2) th {
-      @include font-size(16px, 18px);
-
-      @include mq(tablet) {
-        @include font-size(18px, 26px);
-      }
-    }
-
-    td {
-      @include font-size(16px, 22px);
-      @include mq(tablet) {
-        @include font-size(18px, 30px);
-      }
-    }
-  }
-
   &:after,
   &:before {
     content: '';
@@ -144,13 +119,6 @@ article table {
     @include mq(tablet) {
       @include font-size(16px, 30px);
     }
-
-    @include chinese() {
-      @include font-size(18px, 22px);
-      @include mq(tablet) {
-        @include font-size(18px, 30px);
-      }
-    }
   }
 
   tbody th {
@@ -174,13 +142,6 @@ article table {
     &:empty {
       background-color: transparent;
     }
-
-    @include chinese() {
-      @include font-size(16px, 18px);
-      @include mq(tablet) {
-        @include font-size(18px, 26px);
-      }
-    }
   }
 
   td {
@@ -193,13 +154,6 @@ article table {
       @include font-size(15px, 30px);
     }
 
-    @include chinese() {
-      @include font-size(16px, 22px);
-      @include mq(tablet) {
-        @include font-size(18px, 30px);
-      }
-    }
-
     p {
       line-height: 1.6em;
     }