@ndla/ui 8.2.3 → 9.0.0

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/ResourceBox/ResourceBox.tsx

@@ -15,124 +15,75 @@ import { SafeLinkButton } from '@ndla/safelink';
 import styled from '@emotion/styled';
 import Image from '../Image';
 
-const BoxWrapper = styled.div`
+const ResourceBoxContainer = styled.div`
   display: flex;
-  padding-top: 20px;
-  padding-bottom: 20px;
+  padding: 20px;
   border-radius: 5px;
   border: 1px solid ${colors.brand.light};
   position: relative;
-  left: -16.6666666667%;
-  width: 133.3333333333%;
-  align-items: stretch;
-  margin-bottom: 24px;
   font-family: ${fonts.sans};
   box-shadow: 0px 20px 35px -15px rgba(32, 88, 143, 0.15);
   gap: 40px;
 
   ${mq.range({ until: breakpoints.desktop })} {
-    gap: 1px;
+    gap: 0;
     flex-direction: column;
-    margin: 0 auto;
-    width: 80%;
-    left: 0;
-    padding-left: 24px;
-    padding-right: 24px;
-    padding-bottom: 0;
-    margin-bottom: 24px;
-    height: auto;
+    padding-top: 30px;
     text-align: center;
   }
 `;
 
-const Boxtitle = styled.h3`
+const Title = styled.h3`
   font-weight: ${fonts.weight.bold};
   font-size: ${fonts.sizes(18)};
   margin-top: 0;
-  ${mq.range({ until: breakpoints.desktop })} {
-    text-align: center;
-    width: 100%;
-  }
 `;
 
-const Boxcaption = styled.p`
+const Caption = styled.p`
   font-size: ${fonts.sizes(14)};
+  max-width: 600px;
 
   ${mq.range({ until: breakpoints.desktop })} {
     line-height: 22px;
   }
 `;
 
-const StyledButtonDiv = styled.div`
+const TextWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
   align-items: flex-start;
   ${mq.range({ until: breakpoints.desktop })} {
-    padding-bottom: 10px;
-    margin: 0 auto;
+    align-items: center;
+    padding-top: 10px;
   }
 `;
-const ResourceBoxStyledButton = styled(SafeLinkButton)`
+
+const StyledButton = styled(SafeLinkButton)`
   border: 1px solid ${colors.brand.tertiary};
   :hover {
     background-color: ${colors.brand.primary};
+    border: 1px solid ${colors.brand.primary};
     color: white;
   }
-  ${mq.range({ until: breakpoints.desktop })} {
-    width: 210px;
-  }
 `;
-const ResourceBoxLaunchIcon = styled(Launch)`
+
+const StyledLaunchIcon = styled(Launch)`
   margin-left: 8px;
   height: 15px;
   width: 15px;
 `;
 
-const BoxImage = styled(Image)`
-  object-fit: cover;
-  width: 134px;
-  height: 134px;
-  border-radius: 5px;
-
-  ${mq.range({ until: breakpoints.desktop })} {
-    width: 200px;
-    height: 200px;
-  }
-`;
-const ImageSectionWrapper = styled.div`
-  align-items: flex-start;
-  display: flex;
-  justify-content: center;
-  margin-left: 20px;
-  ${mq.range({ until: breakpoints.desktop })} {
-    margin: 0 auto;
-    padding-top: 10px;
-  }
-`;
-
-const CaptionSectionWrapper = styled.div`
-  max-width: 600px;
-  ${mq.range({ until: breakpoints.desktop })} {
-    margin: 0 auto;
-  }
-`;
-
-const CenterItems = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  flex-flow: column;
-  ${mq.range({ until: breakpoints.desktop })} {
-    width: 100%;
-  }
-`;
+const ImageWrapper = styled.div`
+  img {
+    object-fit: cover;
+    width: 134px;
+    height: 134px;
+    border-radius: 5px;
 
-const TitleAndLicence = styled.div`
-  display: flex;
-  justify-content: space-between;
-  ${mq.range({ until: breakpoints.desktop })} {
-    text-align: center;
-    padding-top: 10px;
-    max-width: 200px;
-    margin: 0 auto;
+    ${mq.range({ until: breakpoints.desktop })} {
+      width: 200px;
+      height: 200px;
+    }
   }
 `;
 
@@ -157,33 +108,27 @@ type Props = {
 export const ResourceBox = ({ image, title, caption, licenseRights, locale, authors, url }: Props) => {
   const { t } = useTranslation();
   return (
-    <BoxWrapper>
-      <ImageSectionWrapper>
-        <BoxImage alt={title} src={image} sizes="25, 25" />
-      </ImageSectionWrapper>
-      <CenterItems>
-        <CaptionSectionWrapper>
-          <TitleAndLicence>
-            <Boxtitle>{title}</Boxtitle>
-            <LincenseWrapper>
-              <LicenseByline licenseRights={licenseRights} locale={locale} marginRight color={colors.brand.tertiary}>
-                <div className="c-figure__byline-author-buttons">
-                  <span className="c-figure__byline-authors">{authors?.map((author) => author.name).join(' ')}</span>
-                </div>
-              </LicenseByline>
-            </LincenseWrapper>
-          </TitleAndLicence>
-          <Boxcaption>{caption}</Boxcaption>
-        </CaptionSectionWrapper>
+    <ResourceBoxContainer>
+      <LincenseWrapper>
+        <LicenseByline licenseRights={licenseRights} locale={locale} marginRight color={colors.brand.tertiary}>
+          <div className="c-figure__byline-author-buttons">
+            <span className="c-figure__byline-authors">{authors?.map((author) => author.name).join(' ')}</span>
+          </div>
+        </LicenseByline>
+      </LincenseWrapper>
+      <ImageWrapper>
+        <Image alt={title} src={image} />
+      </ImageWrapper>
+      <TextWrapper>
+        <Title>{title}</Title>
+        <Caption>{caption}</Caption>
 
-        <StyledButtonDiv>
-          <ResourceBoxStyledButton to={url} target="_blank" outline borderShape="rounded">
-            {t('license.other.itemImage.ariaLabel')}
-            <ResourceBoxLaunchIcon aria-hidden />
-          </ResourceBoxStyledButton>
-        </StyledButtonDiv>
-      </CenterItems>
-    </BoxWrapper>
+        <StyledButton to={url} target="_blank" outline borderShape="rounded">
+          {t('license.other.itemImage.ariaLabel')}
+          <StyledLaunchIcon aria-hidden />
+        </StyledButton>
+      </TextWrapper>
+    </ResourceBoxContainer>
   );
 };
 

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

@@ -81,7 +81,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 +119,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 +219,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

@@ -9,7 +9,7 @@
 import { contributorTypes } from '@ndla/licenses';
 import constants from '../model';
 
-export const { contentTypes, subjectCategories } = constants;
+export const { contentTypes, subjectCategories, subjectTypes } = constants;
 
 const titleTemplate = ' - NDLA';
 
@@ -53,6 +53,10 @@ const messages = {
     [subjectCategories.PROGRAMME_SUBJECTS]: 'Programme subj. SF',
     [subjectCategories.SPECIALIZED_SUBJECTS]: 'Programme subj. YF',
   },
+  subjectTypes: {
+    [subjectTypes.SUBJECT]: 'Subject',
+    [subjectTypes.RESOURCE_COLLECTION]: 'Resource collection',
+  },
   searchPage: {
     noHits: 'Your search - {{query}} - did not match any articles. ',
     noHitsShort: 'No results for search: {{query}}',
@@ -409,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

@@ -9,7 +9,7 @@
 import { contributorTypes } from '@ndla/licenses';
 import constants from '../model';
 
-export const { contentTypes, subjectCategories } = constants;
+export const { contentTypes, subjectCategories, subjectTypes } = constants;
 
 const titleTemplate = ' - NDLA';
 
@@ -53,6 +53,10 @@ const messages = {
     [subjectCategories.PROGRAMME_SUBJECTS]: 'Programfag SF',
     [subjectCategories.SPECIALIZED_SUBJECTS]: 'Yrkesfag',
   },
+  subjectTypes: {
+    [subjectTypes.SUBJECT]: 'Fag',
+    [subjectTypes.RESOURCE_COLLECTION]: 'Ressurssamling',
+  },
   searchPage: {
     noHits: 'Ingen artikler samsvarte med søket ditt på: {{query}}',
     noHitsShort: 'Ingen treff på søk: {{query}}',
@@ -422,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

@@ -9,7 +9,7 @@
 import { contributorTypes } from '@ndla/licenses';
 import constants from '../model';
 
-export const { contentTypes, subjectCategories } = constants;
+export const { contentTypes, subjectCategories, subjectTypes } = constants;
 
 const titleTemplate = ' - NDLA';
 
@@ -53,6 +53,10 @@ const messages = {
     [subjectCategories.PROGRAMME_SUBJECTS]: 'Programfag SF',
     [subjectCategories.SPECIALIZED_SUBJECTS]: 'Yrkesfag',
   },
+  subjectTypes: {
+    [subjectTypes.SUBJECT]: 'Fag',
+    [subjectTypes.RESOURCE_COLLECTION]: 'Ressurssamling',
+  },
   searchPage: {
     noHits: 'Ingen artiklar samsvarte med søket ditt på: {{query}}',
     noHitsShort: 'Ingen treff på søk: {{query}}',
@@ -423,7 +427,7 @@ const messages = {
       images: 'Bilete',
       audio: 'Lyd',
       video: 'Video',
-      h5p: 'H5P',
+      h5p: 'h5p',
       files: 'Filer',
       embedlink: 'Innbyggingslenke',
       other: 'Anna innhald',

package/src/locale/messages-se.ts

@@ -9,7 +9,7 @@
 import { contributorTypes } from '@ndla/licenses';
 import constants from '../model';
 
-export const { contentTypes, subjectCategories } = constants;
+export const { contentTypes, subjectCategories, subjectTypes } = constants;
 
 const titleTemplate = ' - NDLA';
 
@@ -53,6 +53,10 @@ const messages = {
     [subjectCategories.PROGRAMME_SUBJECTS]: 'Programfag SF',
     [subjectCategories.SPECIALIZED_SUBJECTS]: 'Yrkesfag',
   },
+  subjectTypes: {
+    [subjectTypes.SUBJECT]: 'Fag',
+    [subjectTypes.RESOURCE_COLLECTION]: 'Ressurssamling',
+  },
   searchPage: {
     noHits: 'Ingen artikler samsvarte med søket ditt på: {{query}}',
     noHitsShort: 'Ingen treff på søk: {{query}}',

package/src/locale/messages-sma.ts

@@ -9,7 +9,7 @@
 import { contributorTypes } from '@ndla/licenses';
 import constants from '../model';
 
-export const { contentTypes, subjectCategories } = constants;
+export const { contentTypes, subjectCategories, subjectTypes } = constants;
 
 const titleTemplate = ' - NDLA';
 
@@ -53,6 +53,10 @@ const messages = {
     [subjectCategories.PROGRAMME_SUBJECTS]: 'Programfag SF',
     [subjectCategories.SPECIALIZED_SUBJECTS]: 'Yrkesfag',
   },
+  subjectTypes: {
+    [subjectTypes.SUBJECT]: 'Fag',
+    [subjectTypes.RESOURCE_COLLECTION]: 'Ressurssamling',
+  },
   searchPage: {
     noHits: 'Ingen artikler samsvarte med søket ditt på: {{query}}',
     noHitsShort: 'Ingen treff på søk: {{query}}',

package/{lib/CloseButton/index.d.ts → src/model/SubjectTypes.ts}

@@ -1,10 +1,10 @@
 /**
- * Copyright (c) 2019-present, NDLA.
+ * 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 CloseButton from './CloseButton';
-export { CloseButton };
-export default CloseButton;
+
+export const SUBJECT = 'subject';
+export const RESOURCE_COLLECTION = 'resourceCollection';

package/src/model/index.ts

@@ -8,10 +8,12 @@
 
 import * as contentTypes from './ContentType';
 import * as subjectCategories from './SubjectCategories';
+import * as subjectTypes from './SubjectTypes';
 
 const model = {
   contentTypes,
   subjectCategories,
+  subjectTypes,
 };
 
 export default model;

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/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.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;

package/src/CloseButton/CloseButton.tsx

@@ -1,36 +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 React, { ButtonHTMLAttributes } from 'react';
-import styled from '@emotion/styled';
-import { Cross } from '@ndla/icons/action';
-import { useTranslation } from 'react-i18next';
-import { colors } from '@ndla/core';
-
-const StyledButton = styled.button`
-  background-color: transparent;
-  border: none;
-  display: flex;
-  cursor: pointer;
-`;
-
-const StyledCross = styled(Cross)`
-  height: 24px;
-  width: 24px;
-  color: ${colors.text.primary};
-`;
-
-export const CloseButton = (props: ButtonHTMLAttributes<HTMLButtonElement>) => {
-  const { t } = useTranslation();
-  return (
-    <StyledButton aria-label={t('close')} {...props}>
-      <StyledCross />
-    </StyledButton>
-  );
-};
-
-export default CloseButton;

package/src/CloseButton/index.ts

@@ -1,13 +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;