@ndla/ui 8.2.5 → 9.0.2

package/src/Notion/FigureNotion.tsx

@@ -5,11 +5,10 @@
  * 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 { Figure, FigureCaption, FigureLicenseDialog } from '../Figure';
 import { Copyright } from '../types';
 
 interface Props {
@@ -17,11 +16,12 @@ interface Props {
   figureId: string;
   children: ReactNode | ((params: { typeClass: string }) => ReactNode);
   id: string;
-  title: string;
+  title?: string;
   copyright?: Partial<Copyright>;
   licenseString: string;
   type: 'video' | 'h5p' | 'image' | 'concept';
   hideFigCaption?: boolean;
+  hideIconsAndAuthors?: boolean;
 }
 
 const FigureNotion = ({
@@ -34,6 +34,7 @@ const FigureNotion = ({
   title,
   type,
   hideFigCaption,
+  hideIconsAndAuthors,
 }: Props) => {
   const { t, i18n } = useTranslation();
   const license = getLicenseByAbbreviation(licenseString, i18n.language);
@@ -59,7 +60,8 @@ const FigureNotion = ({
               id={id}
               reuseLabel={t(`${type}.reuse`)}
               authors={contributors}
-              licenseRights={license.rights}>
+              licenseRights={license.rights}
+              hideIconsAndAuthors={hideIconsAndAuthors}>
               <FigureLicenseDialog
                 id={id}
                 authors={contributors}
@@ -73,9 +75,7 @@ const FigureNotion = ({
                   source: t('source'),
                   learnAboutLicenses: t('license.learnMore'),
                   title: t('title'),
-                }}>
-                {type === 'image' && <Button outline>{t('license.copyTitle')}</Button>}
-              </FigureLicenseDialog>
+                }}></FigureLicenseDialog>
             </FigureCaption>
           )}
         </>

package/src/Notion/Notion.tsx

@@ -5,17 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-
+import React, { Fragment, ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { useTranslation } from 'react-i18next';
 import { parseMarkdown } from '@ndla/util';
-import React, { Fragment, ReactNode } from 'react';
-import { keyframes } from '@emotion/core';
-import Button from '@ndla/button';
-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';
+import { breakpoints, fonts, mq, spacing } from '@ndla/core';
 
 const NotionContainer = styled.div``;
 
@@ -26,11 +20,7 @@ const ContentWrapper = styled.div`
   }
   .c-figure {
     margin: 0;
-    position: relative !important;
-    left: 0 !important;
-    width: 25% !important;
     padding: 0 0 0 20px;
-    float: right;
     &.expanded {
       width: 100% !important;
       padding: 0;
@@ -44,114 +34,21 @@ const ContentWrapper = styled.div`
 `;
 const TextWrapper = styled.div<{ hasVisualElement: boolean }>`
   width: ${(props) => (props.hasVisualElement ? '75%' : '100%')};
+
   ${mq.range({ until: breakpoints.tabletWide })} {
     width: 100%;
   }
-  font-family: ${fonts.serif};
+  font-family: ${fonts.sans};
   ${fonts.sizes('18px', '28px')};
   ${ContentWrapper} .c-figure.expanded + & {
     width: 100%;
   }
 `;
 
-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;
-
-  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;
 `;
 
-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 LabelsContainer = styled.div`
   display: flex;
   align-items: center;
@@ -160,23 +57,12 @@ const LabelsContainer = styled.div`
   margin: ${spacing.small} 0;
 `;
 
-type VisualElementProps = {
-  type: 'video' | 'other';
-  element: ReactNode;
-  metaImage?: {
-    url: string;
-    alt: string;
-    crop?: ImageCrop;
-    focalPoint?: ImageFocalPoint;
-  };
-};
-
 export type NotionProps = {
   id: string | number;
   labels?: string[];
   text: ReactNode;
   title: string;
-  visualElement?: VisualElementProps;
+  visualElement: ReactNode;
   imageElement?: ReactNode;
   children?: ReactNode;
 };
@@ -186,34 +72,10 @@ const Notion = ({ id, labels = [], text, title, visualElement, imageElement, chi
 
   return (
     <NotionContainer>
-      {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>
-        )}
-        <TextWrapper hasVisualElement={!!(imageElement || visualElement?.metaImage)}>
+        {visualElement}
+        <TextWrapper hasVisualElement={!!(imageElement || visualElement)}>
           {parseMarkdown(`**${title}** \u2013 ${text}`, 'body')}
           {!!labels.length && (
             <LabelsContainer>

package/src/Notion/NotionImage.tsx

@@ -6,17 +6,45 @@
  */
 
 import React from 'react';
+import styled from '@emotion/styled';
+import { animations, breakpoints, mq, spacing } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
-import { Image, FigureExpandButton } from '..';
+import Image from '../Image';
+import { FigureOpenDialogButton } from '../Figure';
 import { Copyright } from '../types';
 import FigureNotion from './FigureNotion';
+
+const StyledImageWrapper = styled.div`
+  overflow: hidden;
+  width: 260px;
+  padding-top: ${spacing.small};
+  ${mq.range({ until: breakpoints.tabletWide })} {
+    margin: 0 auto;
+  }
+`;
+
+const StyledImage = styled(Image)`
+  object-fit: cover;
+  max-height: 162px;
+  transition: transform ${animations.durations.fast};
+  &:hover {
+    transform: scale(1.1);
+    opacity: 1.1;
+    transition-duration: 0.5s;
+  }
+  ${mq.range({ until: breakpoints.tabletWide })} {
+    min-width: 260px;
+  }
+`;
+
 interface Props {
+  type?: 'image' | 'video' | 'h5p' | 'iframe' | 'external';
   id: string;
   src: string;
   alt: string;
   imageCopyright?: Partial<Copyright>;
 }
-export const NotionImage = ({ id, src, alt, imageCopyright }: Props) => {
+export const NotionImage = ({ id, src, alt, imageCopyright, type }: Props) => {
   const { t } = useTranslation();
 
   const imageId = `image-${id}`;
@@ -32,19 +60,21 @@ export const NotionImage = ({ id, src, alt, imageCopyright }: Props) => {
       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'),
-              }}
-            />
-          }
-        />
+        <StyledImageWrapper>
+          <StyledImage
+            alt={alt}
+            src={src}
+            expandButton={
+              <FigureOpenDialogButton
+                type={type}
+                messages={{
+                  zoomImageButtonLabel: t('license.images.itemImage.zoomImageButtonLabel'),
+                  zoomOutImageButtonLabel: t('license.image.itemImage.zoomOutImageButtonLabel'),
+                }}
+              />
+            }
+          />
+        </StyledImageWrapper>
       )}
     </FigureNotion>
   );

package/src/Notion/NotionVisualElement.tsx

@@ -4,12 +4,24 @@
  * 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 { css } from '@emotion/core';
+import styled from '@emotion/styled';
+import React, { ReactNode } from 'react';
 import { Copyright } from '../types';
 import FigureNotion from './FigureNotion';
 
+const StyledIframe = styled.iframe<{ type: string }>`
+  ${(props) =>
+    props.type === 'video'
+      ? css`
+          min-height: 400px;
+        `
+      : ''}
+`;
+
 export type NotionVisualElementType = {
+  element?: ReactNode;
+  type?: 'video' | 'image' | 'h5p';
   resource?: string;
   title?: string;
   url?: string;
@@ -22,17 +34,28 @@ export type NotionVisualElementType = {
 
 interface Props {
   visualElement: NotionVisualElementType;
+  id: string;
+  figureId: string;
 }
+const supportedEmbedTypes = ['brightcove', 'h5p', 'iframe', 'external', 'image'];
 
-const supportedEmbedTypes = ['brightcove', 'h5p', 'iframe', 'external'];
-const NotionVisualElement = ({ visualElement }: Props) => {
-  const id = '1';
-  const figureId = 'figure-1';
+const getType = (resource: string) => {
+  if (resource === 'brightcove') {
+    return 'video';
+  }
+  if (resource === 'image') {
+    return 'image';
+  }
+  return 'h5p';
+};
+
+const NotionVisualElement = ({ visualElement, id, figureId }: Props) => {
   if (!visualElement.resource || !supportedEmbedTypes.includes(visualElement.resource)) {
     return <p>Embed type is not supported!</p>;
   }
 
-  const type = visualElement.resource === 'brightcove' ? 'video' : 'h5p';
+  const type = getType(visualElement.resource);
+
   return (
     <FigureNotion
       resizeIframe
@@ -42,7 +65,11 @@ const NotionVisualElement = ({ visualElement }: Props) => {
       copyright={visualElement.copyright}
       licenseString={visualElement.copyright?.license?.license ?? ''}
       type={type}>
-      <iframe title={visualElement.title} src={visualElement.url} />
+      {visualElement.image?.src ? (
+        <img src={visualElement.image?.src} alt={visualElement.image.alt} />
+      ) : (
+        <StyledIframe type={type} src={visualElement.url} title={visualElement.title} />
+      )}
     </FigureNotion>
   );
 };

package/src/Topic/Topic.tsx

@@ -277,7 +277,7 @@ const Topic = ({
                             <ShowVisualElementWrapper>
                               <TopicHeaderImage
                                 src={`${topic.image.url}?${makeSrcQueryString(
-                                  400,
+                                  800,
                                   topic.image.crop,
                                   topic.image.focalPoint,
                                 )}`}

package/src/index.ts

@@ -65,8 +65,7 @@ export {
 
 export { default as FactBox } from './FactBox';
 
-export { default as Image, ImageLink } from './Image';
-export { makeSrcQueryString } from './Image';
+export { default as Image, ImageLink, makeSrcQueryString } from './Image';
 
 export {
   SubjectMaterialHero,
@@ -81,7 +80,7 @@ export {
 
 export { Footer, EditorName, FooterText, FooterAuth } from './Footer';
 
-export { Figure, FigureCaption, FigureLicenseDialog, FigureExpandButton } from './Figure';
+export { Figure, FigureCaption, FigureLicenseDialog, FigureExpandButton, FigureOpenDialogButton } from './Figure';
 
 export { LanguageSelector } from './LanguageSelector';
 
@@ -119,7 +118,6 @@ export { MessageBox, MessageBoxTag, MessageBoxType } from './MessageBox';
 
 export { ResourceBox } from './ResourceBox';
 
-export { default as CloseButton } from './CloseButton';
 export { default as AudioPlayer, initAudioPlayers } from './AudioPlayer';
 
 export { NavigationHeading, NavigationBox, NavigationTopicAbout } from './Navigation';
@@ -220,4 +218,5 @@ export { default as CopyParagraphButton } from './CopyParagraphButton';
 
 export { default as ContentPlaceholder } from './ContentPlaceholder';
 export { Notion, ConceptNotion } from './Notion';
+
 export { BannerCard } from './BannerCard';

package/src/locale/messages-en.ts

@@ -413,7 +413,7 @@ const messages = {
       images: 'Images',
       audio: 'Audio',
       video: 'Video',
-      h5p: 'H5P',
+      h5p: 'h5p',
       files: 'Files',
       embedlink: 'Embedded link',
       other: 'Other content',

package/src/locale/messages-nb.ts

@@ -426,7 +426,7 @@ const messages = {
       images: 'Bilder',
       audio: 'Lyd',
       video: 'Video',
-      h5p: 'H5P',
+      h5p: 'h5p',
       files: 'Filer',
       embedlink: 'Innbyggingslenke',
       concept: 'Forklaringer',

package/src/locale/messages-nn.ts

@@ -427,7 +427,7 @@ const messages = {
       images: 'Bilete',
       audio: 'Lyd',
       video: 'Video',
-      h5p: 'H5P',
+      h5p: 'h5p',
       files: 'Filer',
       embedlink: 'Innbyggingslenke',
       other: 'Anna innhald',

package/es/CloseButton/CloseButton.js

@@ -1,46 +0,0 @@
-import _styled from "@emotion/styled-base";
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-
-/**
- * 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 { Cross } from '@ndla/icons/action';
-import { useTranslation } from 'react-i18next';
-import { colors } from '@ndla/core';
-import { jsx as ___EmotionJSX } from "@emotion/core";
-
-var StyledButton = _styled("button", {
-  target: "e4bzt4x0",
-  label: "StyledButton"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1x6nvfn",
-  styles: "background-color:transparent;border:none;display:flex;cursor:pointer;"
-} : {
-  name: "1x6nvfn",
-  styles: "background-color:transparent;border:none;display:flex;cursor:pointer;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNsb3NlQnV0dG9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFha0MiLCJmaWxlIjoiQ2xvc2VCdXR0b24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjItcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuaW1wb3J0IFJlYWN0LCB7IEJ1dHRvbkhUTUxBdHRyaWJ1dGVzIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgQ3Jvc3MgfSBmcm9tICdAbmRsYS9pY29ucy9hY3Rpb24nO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0JztcbmltcG9ydCB7IGNvbG9ycyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuXG5jb25zdCBTdHlsZWRCdXR0b24gPSBzdHlsZWQuYnV0dG9uYFxuICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgYm9yZGVyOiBub25lO1xuICBkaXNwbGF5OiBmbGV4O1xuICBjdXJzb3I6IHBvaW50ZXI7XG5gO1xuXG5jb25zdCBTdHlsZWRDcm9zcyA9IHN0eWxlZChDcm9zcylgXG4gIGhlaWdodDogMjRweDtcbiAgd2lkdGg6IDI0cHg7XG4gIGNvbG9yOiAke2NvbG9ycy50ZXh0LnByaW1hcnl9O1xuYDtcblxuZXhwb3J0IGNvbnN0IENsb3NlQnV0dG9uID0gKHByb3BzOiBCdXR0b25IVE1MQXR0cmlidXRlczxIVE1MQnV0dG9uRWxlbWVudD4pID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICByZXR1cm4gKFxuICAgIDxTdHlsZWRCdXR0b24gYXJpYS1sYWJlbD17dCgnY2xvc2UnKX0gey4uLnByb3BzfT5cbiAgICAgIDxTdHlsZWRDcm9zcyAvPlxuICAgIDwvU3R5bGVkQnV0dG9uPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgQ2xvc2VCdXR0b247XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-
-var StyledCross = /*#__PURE__*/_styled(Cross, {
-  target: "e4bzt4x1",
-  label: "StyledCross"
-})("height:24px;width:24px;color:", colors.text.primary, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNsb3NlQnV0dG9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvQmlDIiwiZmlsZSI6IkNsb3NlQnV0dG9uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIyLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cbmltcG9ydCBSZWFjdCwgeyBCdXR0b25IVE1MQXR0cmlidXRlcyB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IENyb3NzIH0gZnJvbSAnQG5kbGEvaWNvbnMvYWN0aW9uJztcbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSAncmVhY3QtaTE4bmV4dCc7XG5pbXBvcnQgeyBjb2xvcnMgfSBmcm9tICdAbmRsYS9jb3JlJztcblxuY29uc3QgU3R5bGVkQnV0dG9uID0gc3R5bGVkLmJ1dHRvbmBcbiAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGJvcmRlcjogbm9uZTtcbiAgZGlzcGxheTogZmxleDtcbiAgY3Vyc29yOiBwb2ludGVyO1xuYDtcblxuY29uc3QgU3R5bGVkQ3Jvc3MgPSBzdHlsZWQoQ3Jvc3MpYFxuICBoZWlnaHQ6IDI0cHg7XG4gIHdpZHRoOiAyNHB4O1xuICBjb2xvcjogJHtjb2xvcnMudGV4dC5wcmltYXJ5fTtcbmA7XG5cbmV4cG9ydCBjb25zdCBDbG9zZUJ1dHRvbiA9IChwcm9wczogQnV0dG9uSFRNTEF0dHJpYnV0ZXM8SFRNTEJ1dHRvbkVsZW1lbnQ+KSA9PiB7XG4gIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24oKTtcbiAgcmV0dXJuIChcbiAgICA8U3R5bGVkQnV0dG9uIGFyaWEtbGFiZWw9e3QoJ2Nsb3NlJyl9IHsuLi5wcm9wc30+XG4gICAgICA8U3R5bGVkQ3Jvc3MgLz5cbiAgICA8L1N0eWxlZEJ1dHRvbj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IENsb3NlQnV0dG9uO1xuIl19 */"));
-
-export var CloseButton = function CloseButton(props) {
-  var _useTranslation = useTranslation(),
-      t = _useTranslation.t;
-
-  return ___EmotionJSX(StyledButton, _extends({
-    "aria-label": t('close')
-  }, props), ___EmotionJSX(StyledCross, null));
-};
-export default CloseButton;

package/es/CloseButton/index.js

@@ -1,10 +0,0 @@
-/**
- * Copyright (c) 2019-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 CloseButton from './CloseButton';
-export { CloseButton };
-export default CloseButton;

package/lib/CloseButton/CloseButton.d.ts

@@ -1,10 +0,0 @@
-/**
- * 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 { ButtonHTMLAttributes } from 'react';
-export declare const CloseButton: (props: ButtonHTMLAttributes<HTMLButtonElement>) => JSX.Element;
-export default CloseButton;

package/lib/CloseButton/CloseButton.js

@@ -1,54 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.CloseButton = void 0;
-
-var _styledBase = _interopRequireDefault(require("@emotion/styled-base"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _action = require("@ndla/icons/action");
-
-var _reactI18next = require("react-i18next");
-
-var _core = require("@ndla/core");
-
-var _core2 = require("@emotion/core");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-
-var StyledButton = (0, _styledBase["default"])("button", {
-  target: "e4bzt4x0",
-  label: "StyledButton"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1x6nvfn",
-  styles: "background-color:transparent;border:none;display:flex;cursor:pointer;"
-} : {
-  name: "1x6nvfn",
-  styles: "background-color:transparent;border:none;display:flex;cursor:pointer;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNsb3NlQnV0dG9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFha0MiLCJmaWxlIjoiQ2xvc2VCdXR0b24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjItcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuaW1wb3J0IFJlYWN0LCB7IEJ1dHRvbkhUTUxBdHRyaWJ1dGVzIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgQ3Jvc3MgfSBmcm9tICdAbmRsYS9pY29ucy9hY3Rpb24nO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0JztcbmltcG9ydCB7IGNvbG9ycyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuXG5jb25zdCBTdHlsZWRCdXR0b24gPSBzdHlsZWQuYnV0dG9uYFxuICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgYm9yZGVyOiBub25lO1xuICBkaXNwbGF5OiBmbGV4O1xuICBjdXJzb3I6IHBvaW50ZXI7XG5gO1xuXG5jb25zdCBTdHlsZWRDcm9zcyA9IHN0eWxlZChDcm9zcylgXG4gIGhlaWdodDogMjRweDtcbiAgd2lkdGg6IDI0cHg7XG4gIGNvbG9yOiAke2NvbG9ycy50ZXh0LnByaW1hcnl9O1xuYDtcblxuZXhwb3J0IGNvbnN0IENsb3NlQnV0dG9uID0gKHByb3BzOiBCdXR0b25IVE1MQXR0cmlidXRlczxIVE1MQnV0dG9uRWxlbWVudD4pID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICByZXR1cm4gKFxuICAgIDxTdHlsZWRCdXR0b24gYXJpYS1sYWJlbD17dCgnY2xvc2UnKX0gey4uLnByb3BzfT5cbiAgICAgIDxTdHlsZWRDcm9zcyAvPlxuICAgIDwvU3R5bGVkQnV0dG9uPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgQ2xvc2VCdXR0b247XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var StyledCross = ( /*#__PURE__*/0, _styledBase["default"])(_action.Cross, {
-  target: "e4bzt4x1",
-  label: "StyledCross"
-})("height:24px;width:24px;color:", _core.colors.text.primary, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNsb3NlQnV0dG9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvQmlDIiwiZmlsZSI6IkNsb3NlQnV0dG9uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIyLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cbmltcG9ydCBSZWFjdCwgeyBCdXR0b25IVE1MQXR0cmlidXRlcyB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IENyb3NzIH0gZnJvbSAnQG5kbGEvaWNvbnMvYWN0aW9uJztcbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSAncmVhY3QtaTE4bmV4dCc7XG5pbXBvcnQgeyBjb2xvcnMgfSBmcm9tICdAbmRsYS9jb3JlJztcblxuY29uc3QgU3R5bGVkQnV0dG9uID0gc3R5bGVkLmJ1dHRvbmBcbiAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGJvcmRlcjogbm9uZTtcbiAgZGlzcGxheTogZmxleDtcbiAgY3Vyc29yOiBwb2ludGVyO1xuYDtcblxuY29uc3QgU3R5bGVkQ3Jvc3MgPSBzdHlsZWQoQ3Jvc3MpYFxuICBoZWlnaHQ6IDI0cHg7XG4gIHdpZHRoOiAyNHB4O1xuICBjb2xvcjogJHtjb2xvcnMudGV4dC5wcmltYXJ5fTtcbmA7XG5cbmV4cG9ydCBjb25zdCBDbG9zZUJ1dHRvbiA9IChwcm9wczogQnV0dG9uSFRNTEF0dHJpYnV0ZXM8SFRNTEJ1dHRvbkVsZW1lbnQ+KSA9PiB7XG4gIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24oKTtcbiAgcmV0dXJuIChcbiAgICA8U3R5bGVkQnV0dG9uIGFyaWEtbGFiZWw9e3QoJ2Nsb3NlJyl9IHsuLi5wcm9wc30+XG4gICAgICA8U3R5bGVkQ3Jvc3MgLz5cbiAgICA8L1N0eWxlZEJ1dHRvbj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IENsb3NlQnV0dG9uO1xuIl19 */"));
-
-var CloseButton = function CloseButton(props) {
-  var _useTranslation = (0, _reactI18next.useTranslation)(),
-      t = _useTranslation.t;
-
-  return (0, _core2.jsx)(StyledButton, _extends({
-    "aria-label": t('close')
-  }, props), (0, _core2.jsx)(StyledCross, null));
-};
-
-exports.CloseButton = CloseButton;
-var _default = CloseButton;
-exports["default"] = _default;

package/lib/CloseButton/index.d.ts

@@ -1,10 +0,0 @@
-/**
- * Copyright (c) 2019-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 CloseButton from './CloseButton';
-export { CloseButton };
-export default CloseButton;

package/lib/CloseButton/index.js

@@ -1,26 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "CloseButton", {
-  enumerable: true,
-  get: function get() {
-    return _CloseButton["default"];
-  }
-});
-exports["default"] = void 0;
-
-var _CloseButton = _interopRequireDefault(require("./CloseButton"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-/**
- * Copyright (c) 2019-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-var _default = _CloseButton["default"];
-exports["default"] = _default;