@ndla/ui 4.3.2 → 5.0.0

package/src/Notion/FigureNotion.tsx

@@ -0,0 +1,86 @@
+/**
+ * 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 Button from '@ndla/button';
+import { getGroupedContributorDescriptionList, getLicenseByAbbreviation } from '@ndla/licenses';
+import React, { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Figure, FigureCaption, FigureLicenseDialog } from '..';
+import { Copyright } from '../types';
+
+interface Props {
+  resizeIframe?: boolean;
+  figureId: string;
+  children: ReactNode | ((params: { typeClass: string }) => ReactNode);
+  id: string;
+  title: string;
+  copyright?: Partial<Copyright>;
+  licenseString: string;
+  type: 'video' | 'h5p' | 'image' | 'concept';
+  hideFigCaption?: boolean;
+}
+
+const FigureNotion = ({
+  resizeIframe,
+  figureId,
+  children,
+  id,
+  copyright,
+  licenseString,
+  title,
+  type,
+  hideFigCaption,
+}: Props) => {
+  const { t, i18n } = useTranslation();
+  const license = getLicenseByAbbreviation(licenseString, i18n.language);
+  const { creators, processors, rightsholders } = copyright ?? {};
+  const contributors = getGroupedContributorDescriptionList(
+    {
+      creators: creators ?? [],
+      processors: processors ?? [],
+      rightsholders: rightsholders ?? [],
+    },
+    i18n.language,
+  ).map((i) => ({ name: i.description, type: i.label }));
+
+  return (
+    <Figure resizeIframe={resizeIframe} id={figureId} type={'full-column'}>
+      {({ typeClass }) => (
+        <>
+          {typeof children === 'function' ? children({ typeClass }) : children}
+          <FigureCaption
+            hideFigcaption={hideFigCaption}
+            figureId={figureId}
+            id={id}
+            caption={title}
+            reuseLabel={t(`${type}.reuse`)}
+            authors={contributors}
+            licenseRights={license.rights}>
+            <FigureLicenseDialog
+              id={id}
+              authors={contributors}
+              locale={i18n.language}
+              title={title}
+              origin={copyright?.origin}
+              license={license}
+              messages={{
+                close: t('close'),
+                rulesForUse: t('license.concept.rules'),
+                source: t('source'),
+                learnAboutLicenses: t('license.learnMore'),
+                title: t('title'),
+              }}>
+              {type === 'image' && <Button outline>{t('license.copyTitle')}</Button>}
+            </FigureLicenseDialog>
+          </FigureCaption>
+        </>
+      )}
+    </Figure>
+  );
+};
+
+export default FigureNotion;

package/src/Notion/Notion.tsx

@@ -1,118 +1,248 @@
+/**
+ * Copyright (c) 2021-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 { useTranslation } from 'react-i18next';
 import HTMLReactParser from 'html-react-parser';
-import React, { MouseEventHandler, ReactNode } from 'react';
+import React, { Fragment, ReactNode } from 'react';
+import { keyframes } from '@emotion/core';
 import Button from '@ndla/button';
-import { joinArrayWithConjunction } from '@ndla/util';
-import { colors, fonts } from '@ndla/core';
-import { getLicenseByAbbreviation } from '@ndla/licenses';
-import { Locale } from '../types';
-
-const NotionContainer = styled.div`
-  border-bottom: 1px solid ${colors.brand.greyLighter};
-  margin-bottom: 3.5rem;
-`;
+import { animations, breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
+import { CursorClick } from '@ndla/icons/action';
+import { Play, ArrowCollapse } from '@ndla/icons/common';
+import { ImageCrop, ImageFocalPoint, makeSrcQueryString } from '../Image';
 
-const AuthorsContainer = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  margin: 0 0 1.5rem;
-  font-size: 0.875rem;
+const NotionContainer = styled.div``;
 
-  p {
+const ContentWrapper = styled.div`
+  ${mq.range({ until: breakpoints.tabletWide })} {
+    display: flex;
+    flex-direction: column-reverse;
+  }
+  .c-figure {
     margin: 0;
-
-    &:not(:only-child) {
-      margin-right: 1rem;
+    position: relative !important;
+    left: 0 !important;
+    width: 25% !important;
+    padding: 0 0 0 20px;
+    float: right;
+    &.expanded {
+      width: 100% !important;
+      padding: 0;
+      margin-bottom: ${spacing.normal};
+    }
+    ${mq.range({ until: breakpoints.tabletWide })} {
+      width: 100% !important;
+      padding: 0;
     }
   }
 `;
+const TextWrapper = styled.div`
+  width: 75%;
+  ${mq.range({ until: breakpoints.tabletWide })} {
+    width: 100%;
+  }
+  font-family: ${fonts.serif};
+  ${fonts.sizes('18px', '28px')};
+  ${ContentWrapper} .c-figure.expanded + & {
+    width: 100%;
+  }
+`;
 
-const LabelsContainer = styled.div`
-  display: flex;
+const ImageElement = styled.img``;
+
+const fadeInMediaKeyframe = keyframes`
+  0% {
+    opacity: 0;
+    height: auto;
+  }
+  100% {
+    opacity: 1;
+  }
+`;
+const fadeOutMediaKeyframe = keyframes`
+  0% {
+    opacity: 1;
+    height: auto;
+  }
+  100% {
+    opacity: 0;
+    height:0;
+    overflow: hidden;
+  }
+`;
+
+const ImageWrapper = styled.div`
+  float: right;
+  width: 25%;
+  padding-left: ${spacing.normal};
+  position: relative;
+
+  ${mq.range({ until: breakpoints.tabletWide })} {
+    width: 100%;
+    padding-left: 0;
+  }
+`;
+
+const ExpandVisualElementButton = styled(Button)`
+  position: absolute;
+  right: 8px;
+  bottom: 8px;
+  transition: all ${animations.durations.normal};
+  &,
+  &:focus,
+  &:active {
+    background-color: rgba(255, 255, 255, 0.65);
+  }
+
+  color: ${colors.brand.primary};
+  border-radius: 50%;
+  border: 0;
+  width: 40px;
+  height: 40px;
+  display: inline-flex;
+  justify-content: center;
   align-items: center;
-  font-size: 0.875rem;
-  margin-bottom: 1rem;
 
-  p {
-    margin: 0;
+  svg {
+    transition: transform ${animations.durations.normal} ease-out;
+  }
+  ${ContentWrapper}:hover & {
+    background-color: #fff;
+    svg {
+      transform: scale(1.2);
+    }
+  }
+`;
+
+const ExpandIcon = styled.span`
+  ${ExpandVisualElementButton}.expanded & {
+    display: none;
+  }
+`;
+const CollapseIcon = styled.span`
+  display: none;
+  ${ExpandVisualElementButton}.expanded & {
+    display: inline-block;
   }
+`;
+
+const ClearWrapper = styled.div`
+  clear: both;
+`;
 
-  > :not(:last-child) {
-    margin-right: 0.5rem;
+const MediaContainer = styled.div`
+  opacity: 0;
+  height: 0;
+  overflow: hidden;
+  &.expanded {
+    animation-name: ${fadeInMediaKeyframe};
+    animation-duration: 2.8s;
+    opacity: 1;
+    height: auto;
+  }
+  &.fadeOut {
+    animation-name: ${fadeOutMediaKeyframe};
+    animation-duration: 2.8s;
   }
 `;
 
-const Label = styled.span`
+const LabelsContainer = styled.div`
+  display: flex;
+  align-items: center;
   ${fonts.sizes('14px', '24px')};
-  font-weight: 600;
-  padding: 0 0.25rem;
-  background-color: ${colors.brand.greyLightest};
-  vertical-align: center;
+  font-family: ${fonts.sans};
+  margin: ${spacing.small} 0;
 `;
 
+type VisualElementProps = {
+  type: 'video' | 'other';
+  element: ReactNode;
+  metaImage?: {
+    url: string;
+    alt: string;
+    crop?: ImageCrop;
+    focalPoint?: ImageFocalPoint;
+  };
+};
+
 export type NotionProps = {
-  authors?: { name: string }[];
-  id: string;
+  id: string | number;
   labels?: string[];
-  license?: string;
-  locale?: Locale;
-  media?: ReactNode;
-  onReferenceClick?: MouseEventHandler<HTMLButtonElement>;
   renderMarkdown?: (text: string) => string;
   text: ReactNode;
   title: string;
+  visualElement?: VisualElementProps;
+  imageElement?: ReactNode;
+  children?: ReactNode;
 };
 
 const Notion = ({
-  authors = [],
   id,
   labels = [],
-  license,
-  locale,
-  media,
-  onReferenceClick,
   renderMarkdown,
   text,
   title,
+  visualElement,
+  imageElement,
+  children,
 }: NotionProps) => {
   const { t } = useTranslation();
+
   return (
     <NotionContainer>
-      <div>
-        {HTMLReactParser(
-          renderMarkdown ? renderMarkdown(`**${title}** \u2013 ${text}`) : `<b>${title}</b> \u2013 ${text}`,
+      {visualElement && <MediaContainer id={`notion-media-${id}`}>{visualElement.element}</MediaContainer>}
+      <ContentWrapper>
+        {imageElement}
+        {visualElement && visualElement.metaImage && (
+          <ImageWrapper>
+            <ImageElement
+              src={`${visualElement.metaImage.url}?${makeSrcQueryString(
+                400,
+                visualElement.metaImage.crop,
+                visualElement.metaImage.focalPoint,
+              )}`}
+              alt={visualElement.metaImage.alt}
+            />
+            <ExpandVisualElementButton
+              stripped
+              data-notion-expand-media={true}
+              data-notion-media-id={`notion-media-${id}`}>
+              <ExpandIcon>
+                {visualElement.type === 'video' && <Play style={{ width: '24px', height: '24px' }} />}
+                {visualElement.type === 'other' && <CursorClick style={{ width: '24px', height: '24px' }} />}
+              </ExpandIcon>
+              <CollapseIcon>
+                <ArrowCollapse style={{ width: '24px', height: '24px' }} />
+              </CollapseIcon>
+            </ExpandVisualElementButton>
+          </ImageWrapper>
         )}
-      </div>
-      {!!media && media}
-      {!!authors.length && (
-        <AuthorsContainer>
-          <p>
-            {t('article.writtenBy', {
-              authors: joinArrayWithConjunction(
-                authors.map((author) => author.name),
-                {
-                  conjunction: ` ${t('article.conjunction')} `,
-                },
-              ),
-            })}
-            {license && ` (${getLicenseByAbbreviation(license, locale).abbreviation})`}
-          </p>
-          {onReferenceClick && (
-            <Button link onClick={onReferenceClick}>
-              {t('article.citeNotion')}
-            </Button>
+        <TextWrapper>
+          {HTMLReactParser(
+            renderMarkdown ? renderMarkdown(`**${title}** \u2013 ${text}`) : `<b>${title}</b> \u2013 ${text}`,
+          )}
+          {!!labels.length && (
+            <LabelsContainer>
+              {t('searchPage.resultType.notionLabels')}
+              {labels.map((label, i) => (
+                <Fragment key={`notion-${id}-label-${i + 1}`}>
+                  {' '}
+                  {label}
+                  {i < labels?.length - 1 && <> &#8226;</>}
+                </Fragment>
+              ))}
+            </LabelsContainer>
           )}
-        </AuthorsContainer>
-      )}
-      {!!labels.length && (
-        <LabelsContainer>
-          <p>{t('searchPage.resultType.notionLabels')}</p>
-          {labels.map((label, i) => (
-            <Label key={`notion-${id}-label-${i + 1}`}>{label}</Label>
-          ))}
-        </LabelsContainer>
-      )}
+        </TextWrapper>
+        <ClearWrapper />
+      </ContentWrapper>
+      {children}
     </NotionContainer>
   );
 };

package/src/Notion/NotionImage.tsx

@@ -0,0 +1,51 @@
+/**
+ * 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 { Image, FigureExpandButton } from '..';
+import { Copyright } from '../types';
+import FigureNotion from './FigureNotion';
+interface Props {
+  id: string;
+  src: string;
+  alt: string;
+  imageCopyright?: Partial<Copyright>;
+}
+export const NotionImage = ({ id, src, alt, imageCopyright }: Props) => {
+  const { t } = useTranslation();
+
+  const imageId = `image-${id}`;
+  const imageFigureId = `image-figure-${id}`;
+
+  return (
+    <FigureNotion
+      hideFigCaption
+      figureId={imageFigureId}
+      id={imageId}
+      title={alt}
+      copyright={imageCopyright}
+      licenseString={imageCopyright?.license?.license ?? ''}
+      type={'image'}>
+      {({ typeClass }) => (
+        <Image
+          alt={alt}
+          src={src}
+          expandButton={
+            <FigureExpandButton
+              typeClass={typeClass}
+              messages={{
+                zoomImageButtonLabel: t('license.images.itemImage.zoomImageButtonLabel'),
+                zoomOutImageButtonLabel: t('license.image.itemImage.zoomOutImageButtonLabel'),
+              }}
+            />
+          }
+        />
+      )}
+    </FigureNotion>
+  );
+};

package/src/Notion/NotionVisualElement.tsx

@@ -0,0 +1,50 @@
+/**
+ * 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 { Copyright } from '../types';
+import FigureNotion from './FigureNotion';
+
+export type NotionVisualElementType = {
+  resource?: string;
+  title?: string;
+  url?: string;
+  copyright?: Partial<Copyright>;
+  image?: {
+    src: string;
+    alt?: string;
+  };
+};
+
+interface Props {
+  visualElement: NotionVisualElementType;
+}
+
+const supportedEmbedTypes = ['brightcove', 'h5p'];
+const NotionVisualElement = ({ visualElement }: Props) => {
+  const id = '1';
+  const figureId = 'figure-1';
+  if (!visualElement.resource || !supportedEmbedTypes.includes(visualElement.resource)) {
+    return <p>Embed type is not supported!</p>;
+  }
+
+  const type = visualElement.resource === 'brightcove' ? 'video' : 'h5p';
+  return (
+    <FigureNotion
+      resizeIframe
+      id={id}
+      figureId={figureId}
+      title={visualElement.title ?? ''}
+      copyright={visualElement.copyright}
+      licenseString={visualElement.copyright?.license?.license ?? ''}
+      type={type}>
+      <iframe title={visualElement.title} src={visualElement.url} />
+    </FigureNotion>
+  );
+};
+
+export default NotionVisualElement;

package/src/Notion/index.ts

@@ -1 +1,2 @@
 export { default as Notion } from './Notion';
+export { default as ConceptNotion } from './ConceptNotion';

package/src/SearchTypeResult/ActiveFilterContent.tsx

@@ -19,6 +19,11 @@ export const StyledActiveFilterTitle = styled.span`
   font-weight: ${fonts.weight.semibold};
 `;
 
+const StyledButton = styled(Button)`
+  display: grid;
+  grid-template-columns: 1fr auto;
+`;
+
 export type FilterProps = {
   value: string;
   title: string;
@@ -31,7 +36,7 @@ type Props = {
 };
 
 const ActiveFilterContent = ({ filter, onFilterRemove, t }: Props & WithTranslation) => (
-  <Button
+  <StyledButton
     aria-label={t('searchPage.searchFilterMessages.removeFilter', {
       filterName: filter.title,
     })}
@@ -41,7 +46,7 @@ const ActiveFilterContent = ({ filter, onFilterRemove, t }: Props & WithTranslat
     onClick={() => onFilterRemove(filter.value, filter.name)}>
     <StyledActiveFilterTitle>{filter.title}</StyledActiveFilterTitle>
     <Cross />
-  </Button>
+  </StyledButton>
 );
 
 export default withTranslation()(ActiveFilterContent);

package/src/SearchTypeResult/ActiveFilters.tsx

@@ -7,31 +7,39 @@
  */
 
 import React, { ReactElement } from 'react';
+import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import css from '@emotion/css';
 import { spacing, mq, breakpoints } from '@ndla/core';
 import Tooltip from '@ndla/tooltip';
-import { useTranslation } from 'react-i18next';
+import Button from '@ndla/button';
 import ActiveFilterContent, { FilterProps, StyledActiveFilterTitle } from './ActiveFilterContent';
 
 type StyledActiveFiltersProps = {
   showOnSmallScreen?: boolean;
   filterLength?: number;
 };
+
 const StyledActiveFilters = styled.ul<StyledActiveFiltersProps>`
   margin: 0;
   padding: 0;
   display: none;
-
-  ${({ showOnSmallScreen }) =>
-    showOnSmallScreen &&
-    `
-    ${mq.range({ until: breakpoints.desktop })} {
+  ${(props: StyledActiveFiltersProps) =>
+    props.showOnSmallScreen &&
+    css`
+      ${StyledActiveFilterTitle} {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        padding-right: ${spacing.small};
+        display: block;
+        /* max-width: 200px; */
+      }
+      ${mq.range({ until: breakpoints.desktop })} {
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
       }
-    ${mq.range({ until: breakpoints.tablet })} {
+      ${mq.range({ until: breakpoints.tablet })} {
         display: flex;
         flex-direction: column;
         align-items: stretch;
@@ -88,46 +96,72 @@ type Props = {
   onFilterRemove: (value: string, name: string) => void;
   showOnSmallScreen?: boolean;
   customElements?: ReactElement[];
+  onClickShowHiddenSubjects: () => void;
 };
 
-const ActiveFilters = ({ filters, onFilterRemove, showOnSmallScreen, customElements }: Props) => {
+const ActiveFilters = ({
+  filters,
+  onFilterRemove,
+  showOnSmallScreen,
+  customElements,
+  onClickShowHiddenSubjects,
+}: Props) => {
   const { t } = useTranslation();
-  if (filters && filters.length > 0) {
-    const filterLength = filters.length;
+  if (!filters) return null;
+  const showFilterCount = 3;
+  const filterLength = filters.length;
 
-    const filterItems = filters.map((filter) => {
-      const filterKey = filter.name ? `${filter.name}${filter.value}` : filter.value;
+  const visibleFilters = filterLength > showFilterCount ? filters.slice(0, showFilterCount - 1) : filters;
 
-      return (
-        <StyledActiveFilterWrapper key={filterKey}>
-          {filterLength > 1 ? (
-            <Tooltip
-              delay={2000}
-              align="bottom"
-              tooltip={t('searchPage.searchFilterMessages.removeFilter', {
-                filterName: filter.title,
-              })}>
-              <ActiveFilterContent filter={filter} onFilterRemove={onFilterRemove} />
-            </Tooltip>
-          ) : (
-            <ActiveFilterContent filter={filter} onFilterRemove={onFilterRemove} />
-          )}
-        </StyledActiveFilterWrapper>
-      );
-    });
+  const filterItems = visibleFilters.map((filter) => {
+    const filterKey = filter.name ? `${filter.name}${filter.value}` : filter.value;
 
     return (
-      <StyledActiveFilters showOnSmallScreen={showOnSmallScreen} filterLength={filterLength}>
-        {filterItems}
-        {customElements &&
-          customElements.map((item, index) => (
-            <StyledActiveFilterWrapper key={index}>{item}</StyledActiveFilterWrapper>
-          ))}
-      </StyledActiveFilters>
+      <StyledActiveFilterWrapper key={filterKey}>
+        {filterLength > 1 ? (
+          <Tooltip
+            delay={2000}
+            align="bottom"
+            tooltip={t('searchPage.searchFilterMessages.removeFilter', {
+              filterName: filter.title,
+            })}>
+            <ActiveFilterContent filter={filter} onFilterRemove={onFilterRemove} />
+          </Tooltip>
+        ) : (
+          <ActiveFilterContent filter={filter} onFilterRemove={onFilterRemove} />
+        )}
+      </StyledActiveFilterWrapper>
     );
-  }
+  });
 
-  return null;
+  return (
+    <StyledActiveFilters showOnSmallScreen={showOnSmallScreen} filterLength={filterLength}>
+      {filterItems}
+      {filterLength > showFilterCount && (
+        <StyledActiveFilterWrapper>
+          <Tooltip delay={2000} align="bottom" tooltip={t('searchPage.searchFilterMessages.noValuesButtonText')}>
+            <Button
+              aria-label={t('searchPage.searchFilterMessages.additionalSubjectFilters', {
+                count: filterLength - showFilterCount + 1,
+              })}
+              type="button"
+              size="normal"
+              borderShape="rounded"
+              onClick={onClickShowHiddenSubjects}>
+              <StyledActiveFilterTitle>
+                {t('searchPage.searchFilterMessages.additionalSubjectFilters', {
+                  count: filterLength - showFilterCount + 1,
+                })}
+              </StyledActiveFilterTitle>
+            </Button>
+          </Tooltip>
+        </StyledActiveFilterWrapper>
+      )}
+      {customElements?.map((item, index) => (
+        <StyledActiveFilterWrapper key={index}>{item}</StyledActiveFilterWrapper>
+      ))}
+    </StyledActiveFilters>
+  );
 };
 
 export default ActiveFilters;