@ndla/ui 3.3.7 → 3.3.12

package/src/MediaList/MediaList.tsx

@@ -0,0 +1,158 @@
+/*
+ * Copyright (c) 2016-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, { ReactNode } from 'react';
+import {
+  LicenseDescription,
+  getLicenseByAbbreviation,
+  getResourceTypeNamespace,
+  isCreativeCommonsLicense,
+  metaTypes,
+} from '@ndla/licenses';
+import BEMHelper from 'react-bem-helper';
+import { uuid } from '@ndla/util';
+
+const oClasses = new BEMHelper({
+  name: 'media',
+  prefix: 'o-',
+});
+
+const cClasses = new BEMHelper({
+  name: 'medialist',
+  prefix: 'c-',
+});
+
+interface MediaListProps {
+  children: ReactNode;
+}
+
+export const MediaList = ({ children }: MediaListProps) => <ul {...cClasses()}>{children}</ul>;
+
+interface MediaListItemProps {
+  children: ReactNode;
+}
+export const MediaListItem = ({ children }: MediaListItemProps) => (
+  <li {...oClasses(undefined, undefined, cClasses('item').className)}>{children}</li>
+);
+
+interface MediaListItemImageProps {
+  children: ReactNode;
+}
+export const MediaListItemImage = ({ children }: MediaListItemImageProps) => (
+  <div {...oClasses('img', undefined, cClasses('img').className)}>
+    <div>{children}</div>
+  </div>
+);
+
+interface MediaListCCLinkProps {
+  children: ReactNode;
+  url: string;
+}
+export const MediaListCCLink = ({ children, url }: MediaListCCLinkProps) => (
+  <a className="c-figure-license__link" target="_blank" rel="noopener noreferrer license" href={url}>
+    {children}
+  </a>
+);
+
+interface MediaListItemBodyProps {
+  children: ReactNode;
+  license: string;
+  locale: string;
+  resourceUrl?: string;
+  resourceType?: 'video' | 'image' | 'audio' | 'text' | 'h5p';
+  messages?: {
+    modelPremission?: string;
+  };
+  title?: string;
+}
+
+export const MediaListItemBody = ({
+  children,
+  license: licenseAbbreviation,
+  messages,
+  title,
+  locale,
+  resourceUrl = '', // defaults to current page
+  resourceType,
+}: MediaListItemBodyProps) => {
+  const license = getLicenseByAbbreviation(licenseAbbreviation, locale);
+  const containerProps = isCreativeCommonsLicense(license.rights)
+    ? {
+        ...oClasses('body', undefined, cClasses('body').className),
+        'xmlns:cc': 'https://creativecommons.org/ns#',
+        'xmlns:dct': 'http://purl.org/dc/terms/',
+        about: resourceUrl,
+      }
+    : {
+        ...oClasses('body', undefined, cClasses('body').className),
+      };
+
+  const metaResourceType = getResourceTypeNamespace(resourceType);
+
+  return (
+    <div {...containerProps}>
+      {/* @ts-ignore */}
+      {metaResourceType && <span rel="dct:type" href={metaResourceType} style={{ display: 'none' }} />}
+      {title ? <h3 className="c-medialist__title">{title} </h3> : null}
+      <LicenseDescription locale={locale} messages={messages} licenseRights={license.rights} highlightCC />
+      <MediaListCCLink url={license.url}>{license.linkText}</MediaListCCLink>
+      {children}
+    </div>
+  );
+};
+
+interface MediaListItemActionsProps {
+  children: ReactNode;
+}
+export const MediaListItemActions = ({ children }: MediaListItemActionsProps) => (
+  <div {...cClasses('actions')}>{children}</div>
+);
+
+const isLink = (text: string) => text.startsWith('http') || text.startsWith('https');
+
+interface HandleLinkProps {
+  text: string;
+  children: ReactNode;
+}
+
+export const HandleLink = ({ text, children }: HandleLinkProps) => {
+  if (isLink(text)) {
+    return (
+      <a href={text} target="_blank" rel="noopener noreferrer">
+        {children}
+      </a>
+    );
+  }
+  return <span>{children}</span>;
+};
+
+const attributionTypes = [metaTypes.author, metaTypes.copyrightHolder, metaTypes.contributor];
+
+interface MediaListItemMetaProps {
+  items?: {
+    label: string;
+    description: string;
+    metaType: string;
+  }[];
+}
+
+export const MediaListItemMeta = ({ items = [] }: MediaListItemMetaProps) => {
+  const attributionItems = items.filter((item) => attributionTypes.some((type) => type === item.metaType));
+  const attributionMeta = attributionItems.map((item) => `${item.label}: ${item.description}`).join(', ');
+
+  return (
+    //@ts-ignore
+    <ul {...cClasses('actions')} property="cc:attributionName" content={attributionMeta}>
+      {items.map((item) => (
+        <li key={uuid()} className="c-medialist__meta-item">
+          {item.label}: <HandleLink text={item.description}>{item.description}</HandleLink>
+        </li>
+      ))}
+    </ul>
+  );
+};

package/src/MessageBox/MessageBox.tsx

@@ -1,63 +1,92 @@
-import React from 'react';
+/**
+ * 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 React, { useState } from 'react';
 import styled from '@emotion/styled';
 import Sticky from 'react-sticky-el';
 import { breakpoints, fonts, mq, spacing } from '@ndla/core';
-// @ts-ignore
-import Button from '@ndla/button';
-import { Cross } from '@ndla/icons/action';
-import { InformationOutline } from '@ndla/icons/common';
+import { InformationOutline, HumanMaleBoard } from '@ndla/icons/common';
 import { WithTranslation, withTranslation } from 'react-i18next';
+import { CloseButton } from '../CloseButton';
 
+export enum MessageBoxType {
+  ghost = 'ghost',
+  fullpage = 'fullpage',
+  medium = 'medium',
+}
 type WrapperProps = {
-  boxType?: 'info';
+  boxType?: MessageBoxType;
 };
 
-const colorsByType = (type: WrapperProps['boxType']) => {
-  const colors = {
-    color: '#551700',
-    backgroundColor: '#FEEFB3',
-  };
+const StyleByType = (type: WrapperProps['boxType']) => {
+  const styles = {
+    margin: '1px',
+    color: '#444444',
+    backgroundColor: '#f9f4c8',
+    border: 'none',
+    display: 'flex',
+    width: 'auto',
+    position: 'relative',
+    transform: 'auto',
+    left: 'auto',
+  }; //Different CSS properties for different types of message-boxes
   switch (type) {
-    case 'info':
-    default:
+    case 'fullpage':
+      styles.margin = '0 auto';
+      styles.display = 'none';
+      styles.width = '100vw';
+      styles.position = 'relative';
+      styles.left = '50%';
+      styles.transform = 'translateX(-50%)';
+      break;
+    case 'medium':
+      styles.margin = '0px';
+      break;
+    case 'ghost':
+      styles.backgroundColor = 'transparent';
+      styles.border = '1px solid #D1D6DB';
+      styles.color = '#444444';
+
       break;
   }
-  return colors;
+  return styles;
 };
 
 const Wrapper = styled.div<WrapperProps>`
-  background: ${(props) => colorsByType(props.boxType).backgroundColor};
-  color: ${(props) => colorsByType(props.boxType).color};
+  background: ${(props) => StyleByType(props.boxType).backgroundColor};
+  color: ${(props) => StyleByType(props.boxType).color};
   font-size: 18px;
   line-height: 32px;
-  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12);
+  font-family: ${fonts.sans};
   display: flex;
   padding: ${spacing.small};
-  position: relative;
+  position: ${(props) => StyleByType(props.boxType).position};
+  border: ${(props) => StyleByType(props.boxType).border};
+  border-radius: 5px;
+  transform: ${(props) => StyleByType(props.boxType).transform};
+  left: ${(props) => StyleByType(props.boxType).left};
+  z-index: 10;
+  width: ${(props) => StyleByType(props.boxType).width};
 `;
 
-const Label = styled.label`
-  font-weight: ${fonts.weight.bold};
-  display: inline-block;
-  margin-right: ${spacing.small};
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    font-size: 18px;
-    font-weight: ${fonts.weight.semibold};
-  }
-`;
-
-const InfoWrapper = styled.div`
-  margin: 0 auto;
-  padding: 0 100px;
+const InfoWrapper = styled.div<WrapperProps>`
+  margin: ${(props) => StyleByType(props.boxType).margin};
+  padding: 10px;
   display: flex;
   ${mq.range({ until: breakpoints.tabletWide })} {
     padding: 0 90px 0 0;
   }
   ${mq.range({ until: breakpoints.mobileWide })} {
-    padding: 0 50px 0 0;
+    padding: 0 5px 0 0;
+    font-size: 16px;
   }
 `;
-const TextWrapper = styled.div`
+const TextWrapper = styled.div<WrapperProps>`
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -67,88 +96,80 @@ const TextWrapper = styled.div`
   }
 `;
 
-const IconWrapper = styled.div`
+const IconWrapper = styled.div<WrapperProps>`
   padding-right: ${spacing.small};
-  display: flex;
+  display: ${(props) => StyleByType(props.boxType).display};
   align-items: flex-start;
   ${mq.range({ from: breakpoints.tabletWide })} {
     padding-top: 4px;
   }
 `;
 
-const CloseButtonWrapper = styled.div`
-  position: absolute;
-  top: 13px;
-  right: ${spacing.small};
-  display: flex;
-  justify-content: flex-end;
-  ${mq.range({ from: breakpoints.tabletWide })} {
-    top: 16px;
-  }
-`;
-
-const CloseButton = styled(Button)`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-weight: ${fonts.weight.semibold};
-  font-size: 16px;
-  color: ${(props) => colorsByType(props.boxType).color};
-  &:hover {
-    color: ${(props) => colorsByType(props.boxType).color};
-  }
+const LinkWrapper = styled.div`
+  display: block;
+  width: 100%;
+  background-color: #f9f4c8;
+  padding-bottom: 20px;
+  margin-top: -2px;
+  padding-left: 58px;
+  border-radius: 0px 0px 5px 5px;
   ${mq.range({ until: breakpoints.mobileWide })} {
-    flex-direction: column-reverse;
+    padding-left: 45px;
   }
 `;
-
-const CloseButtonText = styled.span`
-  margin-right: ${spacing.small};
-  line-height: 1;
+const Link = styled.a`
+  color: #20588f;
+  font-size: 16px;
+  padding-bottom: 1px;
+  margin: 0px 40px 1px 2px;
+  font-family: ${fonts.sans};
   ${mq.range({ until: breakpoints.mobileWide })} {
-    margin-right: 0;
-    ${fonts.sizes('14px', '18px')};
-    font-weight: ${fonts.weight.normal};
+    margin: 0px 15px 1px 5px;
+    box-shadow: none;
   }
 `;
 
+type LinkProps = {
+  href?: string;
+  text?: string;
+};
 type Props = {
   type?: WrapperProps['boxType'];
-  heading?: string;
   sticky?: boolean;
-  onClose?: () => void;
-  children: React.ReactNode;
+  onClose?: boolean;
+  children?: string;
+  links?: LinkProps[];
 };
 
-export const MessageBox = ({
-  heading,
-  type = 'info',
-  sticky = true,
-  onClose,
-  children,
-  t,
-}: Props & WithTranslation) => (
-  <Sticky disabled={!sticky} stickyStyle={{ zIndex: 9999 }}>
-    <Wrapper boxType={type}>
-      <InfoWrapper>
-        <IconWrapper>
-          <InformationOutline style={{ width: '24px', height: '24px' }} />
-        </IconWrapper>
-        <TextWrapper>
-          {heading && <Label>{heading}</Label>}
-          {children}
-        </TextWrapper>
-      </InfoWrapper>
-      {onClose && (
-        <CloseButtonWrapper>
-          <CloseButton link onClick={onClose}>
-            <CloseButtonText>{t('close')}</CloseButtonText>
-            <Cross style={{ width: '24px', height: '24px' }} />
-          </CloseButton>
-        </CloseButtonWrapper>
+export const MessageBox = ({ type, sticky = false, onClose, children, links, t }: Props & WithTranslation) => {
+  const [hideMessageBox, setHideMessageBox] = useState(false);
+  const onCloseMessageBox = () => {
+    setHideMessageBox(true);
+  };
+  const Icon = type === 'ghost' ? HumanMaleBoard : InformationOutline;
+  return (
+    //StickyStyle top:84 makes sure that the messagebox sits beneath the masthead (header ) and the topOffsett sets it so that it applies when reaching the top of the messagebox
+    <Sticky disabled={!sticky} stickyStyle={{ zIndex: 9998, top: 84 }} topOffset={-84}>
+      <Wrapper boxType={type} style={{ display: hideMessageBox ? 'none' : 'flex' }}>
+        <InfoWrapper boxType={type}>
+          <IconWrapper boxType={type}>
+            <Icon style={{ width: '24px', height: '24px' }} />
+          </IconWrapper>
+          <TextWrapper>{children}</TextWrapper>
+        </InfoWrapper>
+        {onClose && <CloseButton onClick={onCloseMessageBox} color="#444444" />}
+      </Wrapper>
+
+      {links && (
+        //loops through the links passed in as properties if there are any and creates a working link for each of them
+        <LinkWrapper style={{ display: hideMessageBox ? 'none' : 'flex' }}>
+          {links.map((x) => (
+            <Link href={x.href}>{x.text}</Link>
+          ))}
+        </LinkWrapper>
       )}
-    </Wrapper>
-  </Sticky>
-);
+    </Sticky>
+  );
+};
 
 export default withTranslation()(MessageBox);

package/src/MessageBox/MessageBoxTag.tsx

@@ -0,0 +1,35 @@
+/**
+ * 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 React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import styled from '@emotion/styled';
+
+const MiniMesssage = styled.div`
+  background-color: #f9f4c8;
+  text-align: center;
+  display: inline-block;
+  padding: 5px;
+  text-transform: uppercase;
+  font-weight: 600;
+  font-size: 14px;
+  margin-left: 10px;
+  margin-bottom: 10px;
+  border-radius: 5px;
+`;
+
+type Props = {
+  tagMessage: string;
+};
+export const MessageBoxTag = ({ tagMessage }: Props) => {
+  const { t } = useTranslation();
+  return <MiniMesssage>{t(tagMessage)}</MiniMesssage>;
+};
+
+export default MessageBoxTag;

package/src/MessageBox/index.ts

@@ -7,5 +7,7 @@
  */
 
 import MessageBox from './MessageBox';
+import MessageBoxTag from './MessageBoxTag';
+import { MessageBoxType } from './MessageBox';
 
-export { MessageBox };
+export { MessageBox, MessageBoxTag, MessageBoxType };