@ndla/ui 41.2.6 → 41.3.0

package/src/Image/__tests__/__snapshots__/Image-test.jsx.snap

@@ -5,8 +5,34 @@ exports[`Image renderers correctly 1`] = `
   position: relative;
 }
 
+.emotion-0[data-svg='true'] {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+
+.emotion-0[data-in-grid='true'] {
+  border: 1px solid #a5bcd3;
+  border-bottom: 0;
+  border-radius: 4px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.emotion-1[data-in-grid='true'] {
+  border-radius: 3px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
 <div
   class="emotion-0"
+  data-svg="false"
 >
   <picture>
     <source
@@ -15,6 +41,7 @@ exports[`Image renderers correctly 1`] = `
     />
     <img
       alt="example"
+      class="emotion-1"
       src="https://example.com/image.png?width=1024"
     />
   </picture>
@@ -26,8 +53,34 @@ exports[`Image with crop and focalpoint props renderers correctly 1`] = `
   position: relative;
 }
 
+.emotion-0[data-svg='true'] {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+
+.emotion-0[data-in-grid='true'] {
+  border: 1px solid #a5bcd3;
+  border-bottom: 0;
+  border-radius: 4px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.emotion-1[data-in-grid='true'] {
+  border-radius: 3px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
 <div
   class="emotion-0"
+  data-svg="false"
 >
   <picture>
     <source
@@ -36,6 +89,7 @@ exports[`Image with crop and focalpoint props renderers correctly 1`] = `
     />
     <img
       alt="example"
+      class="emotion-1"
       src="https://example.com/image.png?width=1024&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28"
     />
   </picture>
@@ -47,6 +101,25 @@ exports[`Lazyloaded image renderers correctly 1`] = `
   position: relative;
 }
 
+.emotion-0[data-svg='true'] {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+
+.emotion-0[data-in-grid='true'] {
+  border: 1px solid #a5bcd3;
+  border-bottom: 0;
+  border-radius: 4px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
 <div
   class="emotion-0"
 >

package/src/Layout/LayoutItem.tsx

@@ -6,14 +6,14 @@
  *
  */
 
-import React, { ReactNode } from 'react';
+import React, { HTMLAttributes, ReactNode } from 'react';
 
-interface Props {
+interface Props extends HTMLAttributes<HTMLElement> {
   children?: ReactNode;
   layout?: string;
 }
 
-export const LayoutItem = ({ children, layout }: Props) => {
+export const LayoutItem = ({ children, layout, ...rest }: Props) => {
   switch (layout) {
     case 'extend': {
       return (
@@ -29,7 +29,11 @@ export const LayoutItem = ({ children, layout }: Props) => {
       return <section className="u-1/1@desktop">{children}</section>;
     }
     default: {
-      return <section className="o-layout__item">{children}</section>;
+      return (
+        <section className="o-layout__item" {...rest}>
+          {children}
+        </section>
+      );
     }
   }
 };

package/src/LearningPaths/LearningPathWrapper.tsx

@@ -8,14 +8,9 @@
 
 import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
-import { css } from '@emotion/react';
 import { spacing, spacingUnit, breakpoints, mq } from '@ndla/core';
 
-type PropStyledWrapper = {
-  invertedStyle?: boolean;
-};
-
-const StyledWrapper = styled.section<PropStyledWrapper>`
+const StyledWrapper = styled.section`
   max-width: ${1402 + spacingUnit}px;
   padding: 0 ${spacing.normal};
   margin: 0 auto;
@@ -23,21 +18,12 @@ const StyledWrapper = styled.section<PropStyledWrapper>`
     padding-right: 0;
     padding-left: 0;
   }
-  .c-hero__content {
-    display: none;
-  }
-  ${mq.range({ from: breakpoints.tablet })} {
-    .c-hero__content {
-      display: flex;
+
+  &[data-inverted='true'] {
+    ${mq.range({ until: breakpoints.tablet })} {
+      background: #fff;
     }
   }
-  ${(props) =>
-    props.invertedStyle &&
-    css`
-      ${mq.range({ until: breakpoints.tablet })} {
-        background: #fff;
-      }
-    `}
 `;
 
 interface Props {
@@ -46,5 +32,5 @@ interface Props {
 }
 
 export const LearningPathWrapper = ({ children, invertedStyle }: Props) => (
-  <StyledWrapper invertedStyle={invertedStyle}>{children}</StyledWrapper>
+  <StyledWrapper data-inverted={!!invertedStyle}>{children}</StyledWrapper>
 );

package/src/LicenseByline/EmbedByline.tsx

@@ -9,6 +9,7 @@
 import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
+import { css } from '@emotion/react';
 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';
@@ -27,6 +28,7 @@ interface BaseProps {
   visibleAlt?: string;
   error?: true | false;
   first?: boolean;
+  inGrid?: boolean;
 }
 
 export interface EmbedBylineErrorProps extends BaseProps {
@@ -95,15 +97,23 @@ const BylineWrapper = styled.div`
   }
 `;
 
+const mobileStyling = css`
+  align-items: flex-start;
+  gap: ${spacing.xsmall};
+  flex-direction: column;
+`;
+
 const RightsWrapper = styled.div`
   display: flex;
   align-items: center;
   gap: ${spacing.nsmall};
 
+  &[data-grid='true'] {
+    ${mobileStyling}
+  }
+
   ${mq.range({ until: breakpoints.tablet })} {
-    align-items: flex-start;
-    gap: ${spacing.xsmall};
-    flex-direction: column;
+    ${mobileStyling}
   }
 `;
 
@@ -125,6 +135,7 @@ const EmbedByline = ({
   children,
   visibleAlt,
   first = true,
+  inGrid = false,
   ...props
 }: Props) => {
   const { t, i18n } = useTranslation();
@@ -149,7 +160,7 @@ const EmbedByline = ({
     <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>
+      <RightsWrapper data-grid={inGrid}>
         <LicenseLink license={license} asLink={!!license.url.length} />
         <LicenseInformationWrapper>
           <span>

package/src/index.ts

@@ -34,7 +34,6 @@ export {
   ArticleTitle,
   ArticleWrapper,
   ArticleHeaderWrapper,
-  ArticleSideBar,
   default as Article,
 } from './Article';
 
@@ -90,6 +89,7 @@ export {
   SourceMaterialHero,
   Hero,
   NdlaFilmHero,
+  HeroContent,
 } from './Hero';
 
 export { FilterList, FilterListPhone, FilterButtons, ToggleItem } from './Filter';
@@ -268,4 +268,6 @@ export { Grid } from './Grid';
 export type { GridType } from './Grid';
 export { Heading } from './Typography';
 export type { HeadingLevel } from './types';
+
+export { default as FrontpageArticle } from './FrontpageArticle';
 export { DefinitionTerm, DefinitionDescription } from './DefinitionList';

package/src/locale/messages-en.ts

@@ -1215,7 +1215,7 @@ const messages = {
         'In order to use the My NDLA service you have to be a student or work at a school in a county that partakes in the NDLA collaboration. We ask you not to write offensive or personally sensitive information in text fields. Read our ',
       loginTextLink: 'privacy policy here',
       loginTerms: 'Log in with Feide to receive access. By logging on your accept your terms of service',
-      loginResourcePitch: 'Do you want to favorite this page?',
+      loginResourcePitch: 'Do you want to favorite this resource?',
       loginWelcome: 'Welcome to My NDLA! This page allows you to organize your articles in your <i>own</i> way!',
       deleteAccount: 'Delete My NDLA',
       welcome:

package/src/locale/messages-nb.ts

@@ -1213,7 +1213,7 @@ const messages = {
         'For å kunne bruke tjenesten Min NDLA må du være elev eller jobbe på en skole i et fylke som er med i NDLA-samarbeidet. Vi ber om at du ikke skriver noe støtende, personsensitiv informasjon eller andre persondata i tekstfelt. Les vår ',
       loginTextLink: 'personvernerklæring her',
       loginTerms: 'Logg på med Feide for å få tilgang. Ved å logge på godkjenner du våre vilkår for bruk',
-      loginResourcePitch: 'Ønsker du å favorittmerke denne siden?',
+      loginResourcePitch: 'Ønsker du å favorittmerke denne ressursen?',
       loginWelcome: 'Velkommen til NDLA! Her kan du organisere fagstoffet på <i>din</i> måte!',
       welcome:
         'Velkommen til Min NDLA! Nå kan du lagre favorittressursene dine fra NDLA og organisere dem i mapper og med emneknagger.',

package/src/locale/messages-nn.ts

@@ -1213,7 +1213,7 @@ const messages = {
         'For å kunne bruke tjenesten Min NDLA må du vere elev eller jobbe på ein skule i eit fylke som er med i NDLA-samarbeidet. Vi ber om at du ikkje skriv noko støtande, personsensitiv informasjon eller andre persondata i tekstfelt. Les vår ',
       loginTextLink: 'personvernerklæring her',
       loginTerms: 'Logg på med Feide for å få tilgang. Ved å logge på godkjennar du våre vilkår for bruk',
-      loginResourcePitch: 'Ønsker du å favorittmerke denne sida?',
+      loginResourcePitch: 'Ønsker du å favorittmerke denne resursen?',
       loginWelcome: 'Velkommen til NDLA! Her kan du organisere fagstoffet på <i>din</i> måte!',
       welcome:
         'Velkommen til Min NDLA! No kan du lagre favorittressursane dine frå NDLA og organisere dei i mapper og med emneknaggar.',

package/src/locale/messages-se.ts

@@ -1215,7 +1215,7 @@ const messages = {
         'Jus galggat sáhttit geavahit bálvalusa Mu NDLA fertet leat oahppi dahje bargat muhtin skuvllas fylkkas mii lea mielde NDLA-ovttasbarggus. Mii bivdit ahte it čále maidege unohasaid, persovdnasensitiivvalaš dieđuid dahje eará persovdnadáhtaid min teakstagieddái. Loga min ',
       loginTextLink: 'personsuodjalusjulggaštusa dákko',
       loginTerms: 'Logge Feide bokte vai oaččut beassanlobi. Go logget sisa de dohkkehat min geavahaneavttuid.',
-      loginResourcePitch: 'Dáhtut go merket siiddu oiddohin?',
+      loginResourcePitch: 'Ønsker du å favorittmerke denne ressursen?',
       loginWelcome: 'Bures boahtin NDLA:ii! Dáppe sáhtát fágaávdnasiid ordnet iežat vuogi mielde',
       welcome:
         'Bures boahtin Mu NDLA:ii! Dál sáhtát vurket iežat oiddotresurssaid NDLA:s ja ordnet daid nu go dáhtut máhpaide ja fáddágilkoriiguin.',

package/src/locale/messages-sma.ts

@@ -1218,7 +1218,7 @@ const messages = {
         'For å kunne bruke tjenesten Min NDLA må du vere elev eller jobbe på ein skule i eit fylke som er med i NDLA-samarbeidet. Vi ber om at du ikkje skriv noko støtande, personsensitiv informasjon eller andre persondata i tekstfelt. Les vår ',
       loginTextLink: 'personvernerklæring her',
       loginTerms: 'Logg på med Feide for å få tilgang. Ved å logge på godkjenner du våre vilkår for bruk',
-      loginResourcePitch: 'Ønsker du å favorittmerke denne siden?',
+      loginResourcePitch: 'Ønsker du å favorittmerke denne ressursen?',
       loginWelcome: 'Velkommen til NDLA! Her kan du organisere fagstoffet på <i>din</i> måte!',
       welcome:
         'Velkommen til Min NDLA! Nå kan du lagre favorittressursene dine fra NDLA og organisere dem i mapper og med emneknagger.',

package/src/main.scss

@@ -2,7 +2,6 @@
 
 // COMPONENTS
 @import 'Logo/component.logo';
-@import 'Hero/component.hero';
 @import 'Article/component.article';
 
 @import 'global/components/component.bodybox';

package/es/Article/ArticleSideBar.js

@@ -1,78 +0,0 @@
-import _styled from "@emotion/styled/base";
-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)."; }
-import React from 'react';
-import { CopyButton, ButtonV2 } from '@ndla/button';
-import { ModalHeader, ModalBody, ModalCloseButton, Modal } from '@ndla/modal';
-import { copyTextToClipboard } from '@ndla/util';
-import { useTranslation } from 'react-i18next';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { Fragment as _Fragment } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-var Wrapper = /*#__PURE__*/_styled("div", {
-  target: "e1vl4tfq1",
-  label: "Wrapper"
-})(process.env.NODE_ENV === "production" ? {
-  name: "ngugnp",
-  styles: "width:160px;margin:6px 10px;display:flex;flex-direction:column;align-items:center"
-} : {
-  name: "ngugnp",
-  styles: "width:160px;margin:6px 10px;display:flex;flex-direction:column;align-items:center",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkFydGljbGVTaWRlQmFyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPMEIiLCJmaWxlIjoiQXJ0aWNsZVNpZGVCYXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IENvcHlCdXR0b24sIEJ1dHRvblYyIH0gZnJvbSAnQG5kbGEvYnV0dG9uJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IE1vZGFsSGVhZGVyLCBNb2RhbEJvZHksIE1vZGFsQ2xvc2VCdXR0b24sIE1vZGFsIH0gZnJvbSAnQG5kbGEvbW9kYWwnO1xuaW1wb3J0IHsgY29weVRleHRUb0NsaXBib2FyZCB9IGZyb20gJ0BuZGxhL3V0aWwnO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0JztcblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIHdpZHRoOiAxNjBweDtcbiAgbWFyZ2luOiA2cHggMTBweDtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbmA7XG5cbmNvbnN0IEJ1dHRvbldyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBtYXJnaW4tYm90dG9tOiA4cHg7XG4gIHdpZHRoOiAxMDAlO1xuYDtcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgY29weVBhZ2VVcmxMaW5rPzogc3RyaW5nO1xuICBsaWNlbnNlQm94PzogUmVhY3ROb2RlO1xufVxuXG5jb25zdCBBcnRpY2xlU2lkZUJhciA9ICh7IGNvcHlQYWdlVXJsTGluaywgbGljZW5zZUJveCB9OiBQcm9wcykgPT4ge1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG4gIGNvbnN0IGNvcHlMaW5rSGFuZGxlciA9ICgpID0+IHtcbiAgICBpZiAoY29weVBhZ2VVcmxMaW5rKSB7XG4gICAgICBjb3B5VGV4dFRvQ2xpcGJvYXJkKGNvcHlQYWdlVXJsTGluayk7XG4gICAgfVxuICB9O1xuXG4gIHJldHVybiAoXG4gICAgPFdyYXBwZXI+XG4gICAgICB7Y29weVBhZ2VVcmxMaW5rICYmIChcbiAgICAgICAgPEJ1dHRvbldyYXBwZXI+XG4gICAgICAgICAgPENvcHlCdXR0b25cbiAgICAgICAgICAgIG9uQ2xpY2s9e2NvcHlMaW5rSGFuZGxlcn1cbiAgICAgICAgICAgIHNpemU9XCJzbWFsbFwiXG4gICAgICAgICAgICB2YXJpYW50PVwib3V0bGluZVwiXG4gICAgICAgICAgICBhcmlhLWxpdmU9XCJhc3NlcnRpdmVcIlxuICAgICAgICAgICAgY29weU5vZGU9e3QoJ2FydGljbGUuY29weVBhZ2VMaW5rQ29waWVkJyl9XG4gICAgICAgICAgICBkYXRhLWNvcHktc3RyaW5nPXtjb3B5UGFnZVVybExpbmt9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge3QoJ2FydGljbGUuY29weVBhZ2VMaW5rJyl9XG4gICAgICAgICAgPC9Db3B5QnV0dG9uPlxuICAgICAgICA8L0J1dHRvbldyYXBwZXI+XG4gICAgICApfVxuICAgICAge2xpY2Vuc2VCb3ggJiYgKFxuICAgICAgICA8TW9kYWxcbiAgICAgICAgICBhY3RpdmF0ZUJ1dHRvbj17XG4gICAgICAgICAgICA8QnV0dG9uVjIgc2l6ZT1cInNtYWxsXCIgdmFyaWFudD1cIm91dGxpbmVcIj5cbiAgICAgICAgICAgICAge3QoJ2FydGljbGUudXNlQ29udGVudCcpfVxuICAgICAgICAgICAgPC9CdXR0b25WMj5cbiAgICAgICAgICB9XG4gICAgICAgICAgc2l6ZT1cIm5vcm1hbFwiXG4gICAgICAgID5cbiAgICAgICAgICB7KG9uQ2xvc2U6ICgpID0+IHZvaWQpID0+IChcbiAgICAgICAgICAgIDw+XG4gICAgICAgICAgICAgIDxNb2RhbEhlYWRlcj5cbiAgICAgICAgICAgICAgICA8TW9kYWxDbG9zZUJ1dHRvbiBvbkNsaWNrPXtvbkNsb3NlfSB0aXRsZT17dCgnYXJ0aWNsZS5jbG9zZUxhYmVsJyl9IC8+XG4gICAgICAgICAgICAgIDwvTW9kYWxIZWFkZXI+XG4gICAgICAgICAgICAgIDxNb2RhbEJvZHk+e2xpY2Vuc2VCb3h9PC9Nb2RhbEJvZHk+XG4gICAgICAgICAgICA8Lz5cbiAgICAgICAgICApfVxuICAgICAgICA8L01vZGFsPlxuICAgICAgKX1cbiAgICA8L1dyYXBwZXI+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBBcnRpY2xlU2lkZUJhcjtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var ButtonWrapper = /*#__PURE__*/_styled("div", {
-  target: "e1vl4tfq0",
-  label: "ButtonWrapper"
-})(process.env.NODE_ENV === "production" ? {
-  name: "zdttou",
-  styles: "margin-bottom:8px;width:100%"
-} : {
-  name: "zdttou",
-  styles: "margin-bottom:8px;width:100%",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkFydGljbGVTaWRlQmFyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFlZ0MiLCJmaWxlIjoiQXJ0aWNsZVNpZGVCYXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IENvcHlCdXR0b24sIEJ1dHRvblYyIH0gZnJvbSAnQG5kbGEvYnV0dG9uJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IE1vZGFsSGVhZGVyLCBNb2RhbEJvZHksIE1vZGFsQ2xvc2VCdXR0b24sIE1vZGFsIH0gZnJvbSAnQG5kbGEvbW9kYWwnO1xuaW1wb3J0IHsgY29weVRleHRUb0NsaXBib2FyZCB9IGZyb20gJ0BuZGxhL3V0aWwnO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0JztcblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIHdpZHRoOiAxNjBweDtcbiAgbWFyZ2luOiA2cHggMTBweDtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbmA7XG5cbmNvbnN0IEJ1dHRvbldyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBtYXJnaW4tYm90dG9tOiA4cHg7XG4gIHdpZHRoOiAxMDAlO1xuYDtcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgY29weVBhZ2VVcmxMaW5rPzogc3RyaW5nO1xuICBsaWNlbnNlQm94PzogUmVhY3ROb2RlO1xufVxuXG5jb25zdCBBcnRpY2xlU2lkZUJhciA9ICh7IGNvcHlQYWdlVXJsTGluaywgbGljZW5zZUJveCB9OiBQcm9wcykgPT4ge1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG4gIGNvbnN0IGNvcHlMaW5rSGFuZGxlciA9ICgpID0+IHtcbiAgICBpZiAoY29weVBhZ2VVcmxMaW5rKSB7XG4gICAgICBjb3B5VGV4dFRvQ2xpcGJvYXJkKGNvcHlQYWdlVXJsTGluayk7XG4gICAgfVxuICB9O1xuXG4gIHJldHVybiAoXG4gICAgPFdyYXBwZXI+XG4gICAgICB7Y29weVBhZ2VVcmxMaW5rICYmIChcbiAgICAgICAgPEJ1dHRvbldyYXBwZXI+XG4gICAgICAgICAgPENvcHlCdXR0b25cbiAgICAgICAgICAgIG9uQ2xpY2s9e2NvcHlMaW5rSGFuZGxlcn1cbiAgICAgICAgICAgIHNpemU9XCJzbWFsbFwiXG4gICAgICAgICAgICB2YXJpYW50PVwib3V0bGluZVwiXG4gICAgICAgICAgICBhcmlhLWxpdmU9XCJhc3NlcnRpdmVcIlxuICAgICAgICAgICAgY29weU5vZGU9e3QoJ2FydGljbGUuY29weVBhZ2VMaW5rQ29waWVkJyl9XG4gICAgICAgICAgICBkYXRhLWNvcHktc3RyaW5nPXtjb3B5UGFnZVVybExpbmt9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge3QoJ2FydGljbGUuY29weVBhZ2VMaW5rJyl9XG4gICAgICAgICAgPC9Db3B5QnV0dG9uPlxuICAgICAgICA8L0J1dHRvbldyYXBwZXI+XG4gICAgICApfVxuICAgICAge2xpY2Vuc2VCb3ggJiYgKFxuICAgICAgICA8TW9kYWxcbiAgICAgICAgICBhY3RpdmF0ZUJ1dHRvbj17XG4gICAgICAgICAgICA8QnV0dG9uVjIgc2l6ZT1cInNtYWxsXCIgdmFyaWFudD1cIm91dGxpbmVcIj5cbiAgICAgICAgICAgICAge3QoJ2FydGljbGUudXNlQ29udGVudCcpfVxuICAgICAgICAgICAgPC9CdXR0b25WMj5cbiAgICAgICAgICB9XG4gICAgICAgICAgc2l6ZT1cIm5vcm1hbFwiXG4gICAgICAgID5cbiAgICAgICAgICB7KG9uQ2xvc2U6ICgpID0+IHZvaWQpID0+IChcbiAgICAgICAgICAgIDw+XG4gICAgICAgICAgICAgIDxNb2RhbEhlYWRlcj5cbiAgICAgICAgICAgICAgICA8TW9kYWxDbG9zZUJ1dHRvbiBvbkNsaWNrPXtvbkNsb3NlfSB0aXRsZT17dCgnYXJ0aWNsZS5jbG9zZUxhYmVsJyl9IC8+XG4gICAgICAgICAgICAgIDwvTW9kYWxIZWFkZXI+XG4gICAgICAgICAgICAgIDxNb2RhbEJvZHk+e2xpY2Vuc2VCb3h9PC9Nb2RhbEJvZHk+XG4gICAgICAgICAgICA8Lz5cbiAgICAgICAgICApfVxuICAgICAgICA8L01vZGFsPlxuICAgICAgKX1cbiAgICA8L1dyYXBwZXI+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBBcnRpY2xlU2lkZUJhcjtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var ArticleSideBar = function ArticleSideBar(_ref) {
-  var copyPageUrlLink = _ref.copyPageUrlLink,
-    licenseBox = _ref.licenseBox;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var copyLinkHandler = function copyLinkHandler() {
-    if (copyPageUrlLink) {
-      copyTextToClipboard(copyPageUrlLink);
-    }
-  };
-  return _jsxs(Wrapper, {
-    children: [copyPageUrlLink && _jsx(ButtonWrapper, {
-      children: _jsx(CopyButton, {
-        onClick: copyLinkHandler,
-        size: "small",
-        variant: "outline",
-        "aria-live": "assertive",
-        copyNode: t('article.copyPageLinkCopied'),
-        "data-copy-string": copyPageUrlLink,
-        children: t('article.copyPageLink')
-      })
-    }), licenseBox && _jsx(Modal, {
-      activateButton: _jsx(ButtonV2, {
-        size: "small",
-        variant: "outline",
-        children: t('article.useContent')
-      }),
-      size: "normal",
-      children: function children(onClose) {
-        return _jsxs(_Fragment, {
-          children: [_jsx(ModalHeader, {
-            children: _jsx(ModalCloseButton, {
-              onClick: onClose,
-              title: t('article.closeLabel')
-            })
-          }), _jsx(ModalBody, {
-            children: licenseBox
-          })]
-        });
-      }
-    })]
-  });
-};
-export default ArticleSideBar;

package/lib/Article/ArticleSideBar.d.ts

@@ -1,7 +0,0 @@
-import { ReactNode } from 'react';
-interface Props {
-    copyPageUrlLink?: string;
-    licenseBox?: ReactNode;
-}
-declare const ArticleSideBar: ({ copyPageUrlLink, licenseBox }: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
-export default ArticleSideBar;

package/lib/Article/ArticleSideBar.js

@@ -1,84 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _react = _interopRequireDefault(require("react"));
-var _button = require("@ndla/button");
-var _modal = require("@ndla/modal");
-var _util = require("@ndla/util");
-var _reactI18next = require("react-i18next");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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 Wrapper = /*#__PURE__*/(0, _base.default)("div", {
-  target: "e1vl4tfq1",
-  label: "Wrapper"
-})(process.env.NODE_ENV === "production" ? {
-  name: "ngugnp",
-  styles: "width:160px;margin:6px 10px;display:flex;flex-direction:column;align-items:center"
-} : {
-  name: "ngugnp",
-  styles: "width:160px;margin:6px 10px;display:flex;flex-direction:column;align-items:center",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkFydGljbGVTaWRlQmFyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPMEIiLCJmaWxlIjoiQXJ0aWNsZVNpZGVCYXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IENvcHlCdXR0b24sIEJ1dHRvblYyIH0gZnJvbSAnQG5kbGEvYnV0dG9uJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IE1vZGFsSGVhZGVyLCBNb2RhbEJvZHksIE1vZGFsQ2xvc2VCdXR0b24sIE1vZGFsIH0gZnJvbSAnQG5kbGEvbW9kYWwnO1xuaW1wb3J0IHsgY29weVRleHRUb0NsaXBib2FyZCB9IGZyb20gJ0BuZGxhL3V0aWwnO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0JztcblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIHdpZHRoOiAxNjBweDtcbiAgbWFyZ2luOiA2cHggMTBweDtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbmA7XG5cbmNvbnN0IEJ1dHRvbldyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBtYXJnaW4tYm90dG9tOiA4cHg7XG4gIHdpZHRoOiAxMDAlO1xuYDtcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgY29weVBhZ2VVcmxMaW5rPzogc3RyaW5nO1xuICBsaWNlbnNlQm94PzogUmVhY3ROb2RlO1xufVxuXG5jb25zdCBBcnRpY2xlU2lkZUJhciA9ICh7IGNvcHlQYWdlVXJsTGluaywgbGljZW5zZUJveCB9OiBQcm9wcykgPT4ge1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG4gIGNvbnN0IGNvcHlMaW5rSGFuZGxlciA9ICgpID0+IHtcbiAgICBpZiAoY29weVBhZ2VVcmxMaW5rKSB7XG4gICAgICBjb3B5VGV4dFRvQ2xpcGJvYXJkKGNvcHlQYWdlVXJsTGluayk7XG4gICAgfVxuICB9O1xuXG4gIHJldHVybiAoXG4gICAgPFdyYXBwZXI+XG4gICAgICB7Y29weVBhZ2VVcmxMaW5rICYmIChcbiAgICAgICAgPEJ1dHRvbldyYXBwZXI+XG4gICAgICAgICAgPENvcHlCdXR0b25cbiAgICAgICAgICAgIG9uQ2xpY2s9e2NvcHlMaW5rSGFuZGxlcn1cbiAgICAgICAgICAgIHNpemU9XCJzbWFsbFwiXG4gICAgICAgICAgICB2YXJpYW50PVwib3V0bGluZVwiXG4gICAgICAgICAgICBhcmlhLWxpdmU9XCJhc3NlcnRpdmVcIlxuICAgICAgICAgICAgY29weU5vZGU9e3QoJ2FydGljbGUuY29weVBhZ2VMaW5rQ29waWVkJyl9XG4gICAgICAgICAgICBkYXRhLWNvcHktc3RyaW5nPXtjb3B5UGFnZVVybExpbmt9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge3QoJ2FydGljbGUuY29weVBhZ2VMaW5rJyl9XG4gICAgICAgICAgPC9Db3B5QnV0dG9uPlxuICAgICAgICA8L0J1dHRvbldyYXBwZXI+XG4gICAgICApfVxuICAgICAge2xpY2Vuc2VCb3ggJiYgKFxuICAgICAgICA8TW9kYWxcbiAgICAgICAgICBhY3RpdmF0ZUJ1dHRvbj17XG4gICAgICAgICAgICA8QnV0dG9uVjIgc2l6ZT1cInNtYWxsXCIgdmFyaWFudD1cIm91dGxpbmVcIj5cbiAgICAgICAgICAgICAge3QoJ2FydGljbGUudXNlQ29udGVudCcpfVxuICAgICAgICAgICAgPC9CdXR0b25WMj5cbiAgICAgICAgICB9XG4gICAgICAgICAgc2l6ZT1cIm5vcm1hbFwiXG4gICAgICAgID5cbiAgICAgICAgICB7KG9uQ2xvc2U6ICgpID0+IHZvaWQpID0+IChcbiAgICAgICAgICAgIDw+XG4gICAgICAgICAgICAgIDxNb2RhbEhlYWRlcj5cbiAgICAgICAgICAgICAgICA8TW9kYWxDbG9zZUJ1dHRvbiBvbkNsaWNrPXtvbkNsb3NlfSB0aXRsZT17dCgnYXJ0aWNsZS5jbG9zZUxhYmVsJyl9IC8+XG4gICAgICAgICAgICAgIDwvTW9kYWxIZWFkZXI+XG4gICAgICAgICAgICAgIDxNb2RhbEJvZHk+e2xpY2Vuc2VCb3h9PC9Nb2RhbEJvZHk+XG4gICAgICAgICAgICA8Lz5cbiAgICAgICAgICApfVxuICAgICAgICA8L01vZGFsPlxuICAgICAgKX1cbiAgICA8L1dyYXBwZXI+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBBcnRpY2xlU2lkZUJhcjtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var ButtonWrapper = /*#__PURE__*/(0, _base.default)("div", {
-  target: "e1vl4tfq0",
-  label: "ButtonWrapper"
-})(process.env.NODE_ENV === "production" ? {
-  name: "zdttou",
-  styles: "margin-bottom:8px;width:100%"
-} : {
-  name: "zdttou",
-  styles: "margin-bottom:8px;width:100%",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkFydGljbGVTaWRlQmFyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFlZ0MiLCJmaWxlIjoiQXJ0aWNsZVNpZGVCYXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IENvcHlCdXR0b24sIEJ1dHRvblYyIH0gZnJvbSAnQG5kbGEvYnV0dG9uJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IE1vZGFsSGVhZGVyLCBNb2RhbEJvZHksIE1vZGFsQ2xvc2VCdXR0b24sIE1vZGFsIH0gZnJvbSAnQG5kbGEvbW9kYWwnO1xuaW1wb3J0IHsgY29weVRleHRUb0NsaXBib2FyZCB9IGZyb20gJ0BuZGxhL3V0aWwnO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0JztcblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIHdpZHRoOiAxNjBweDtcbiAgbWFyZ2luOiA2cHggMTBweDtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbmA7XG5cbmNvbnN0IEJ1dHRvbldyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBtYXJnaW4tYm90dG9tOiA4cHg7XG4gIHdpZHRoOiAxMDAlO1xuYDtcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgY29weVBhZ2VVcmxMaW5rPzogc3RyaW5nO1xuICBsaWNlbnNlQm94PzogUmVhY3ROb2RlO1xufVxuXG5jb25zdCBBcnRpY2xlU2lkZUJhciA9ICh7IGNvcHlQYWdlVXJsTGluaywgbGljZW5zZUJveCB9OiBQcm9wcykgPT4ge1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG4gIGNvbnN0IGNvcHlMaW5rSGFuZGxlciA9ICgpID0+IHtcbiAgICBpZiAoY29weVBhZ2VVcmxMaW5rKSB7XG4gICAgICBjb3B5VGV4dFRvQ2xpcGJvYXJkKGNvcHlQYWdlVXJsTGluayk7XG4gICAgfVxuICB9O1xuXG4gIHJldHVybiAoXG4gICAgPFdyYXBwZXI+XG4gICAgICB7Y29weVBhZ2VVcmxMaW5rICYmIChcbiAgICAgICAgPEJ1dHRvbldyYXBwZXI+XG4gICAgICAgICAgPENvcHlCdXR0b25cbiAgICAgICAgICAgIG9uQ2xpY2s9e2NvcHlMaW5rSGFuZGxlcn1cbiAgICAgICAgICAgIHNpemU9XCJzbWFsbFwiXG4gICAgICAgICAgICB2YXJpYW50PVwib3V0bGluZVwiXG4gICAgICAgICAgICBhcmlhLWxpdmU9XCJhc3NlcnRpdmVcIlxuICAgICAgICAgICAgY29weU5vZGU9e3QoJ2FydGljbGUuY29weVBhZ2VMaW5rQ29waWVkJyl9XG4gICAgICAgICAgICBkYXRhLWNvcHktc3RyaW5nPXtjb3B5UGFnZVVybExpbmt9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge3QoJ2FydGljbGUuY29weVBhZ2VMaW5rJyl9XG4gICAgICAgICAgPC9Db3B5QnV0dG9uPlxuICAgICAgICA8L0J1dHRvbldyYXBwZXI+XG4gICAgICApfVxuICAgICAge2xpY2Vuc2VCb3ggJiYgKFxuICAgICAgICA8TW9kYWxcbiAgICAgICAgICBhY3RpdmF0ZUJ1dHRvbj17XG4gICAgICAgICAgICA8QnV0dG9uVjIgc2l6ZT1cInNtYWxsXCIgdmFyaWFudD1cIm91dGxpbmVcIj5cbiAgICAgICAgICAgICAge3QoJ2FydGljbGUudXNlQ29udGVudCcpfVxuICAgICAgICAgICAgPC9CdXR0b25WMj5cbiAgICAgICAgICB9XG4gICAgICAgICAgc2l6ZT1cIm5vcm1hbFwiXG4gICAgICAgID5cbiAgICAgICAgICB7KG9uQ2xvc2U6ICgpID0+IHZvaWQpID0+IChcbiAgICAgICAgICAgIDw+XG4gICAgICAgICAgICAgIDxNb2RhbEhlYWRlcj5cbiAgICAgICAgICAgICAgICA8TW9kYWxDbG9zZUJ1dHRvbiBvbkNsaWNrPXtvbkNsb3NlfSB0aXRsZT17dCgnYXJ0aWNsZS5jbG9zZUxhYmVsJyl9IC8+XG4gICAgICAgICAgICAgIDwvTW9kYWxIZWFkZXI+XG4gICAgICAgICAgICAgIDxNb2RhbEJvZHk+e2xpY2Vuc2VCb3h9PC9Nb2RhbEJvZHk+XG4gICAgICAgICAgICA8Lz5cbiAgICAgICAgICApfVxuICAgICAgICA8L01vZGFsPlxuICAgICAgKX1cbiAgICA8L1dyYXBwZXI+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBBcnRpY2xlU2lkZUJhcjtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var ArticleSideBar = function ArticleSideBar(_ref) {
-  var copyPageUrlLink = _ref.copyPageUrlLink,
-    licenseBox = _ref.licenseBox;
-  var _useTranslation = (0, _reactI18next.useTranslation)(),
-    t = _useTranslation.t;
-  var copyLinkHandler = function copyLinkHandler() {
-    if (copyPageUrlLink) {
-      (0, _util.copyTextToClipboard)(copyPageUrlLink);
-    }
-  };
-  return (0, _jsxRuntime.jsxs)(Wrapper, {
-    children: [copyPageUrlLink && (0, _jsxRuntime.jsx)(ButtonWrapper, {
-      children: (0, _jsxRuntime.jsx)(_button.CopyButton, {
-        onClick: copyLinkHandler,
-        size: "small",
-        variant: "outline",
-        "aria-live": "assertive",
-        copyNode: t('article.copyPageLinkCopied'),
-        "data-copy-string": copyPageUrlLink,
-        children: t('article.copyPageLink')
-      })
-    }), licenseBox && (0, _jsxRuntime.jsx)(_modal.Modal, {
-      activateButton: (0, _jsxRuntime.jsx)(_button.ButtonV2, {
-        size: "small",
-        variant: "outline",
-        children: t('article.useContent')
-      }),
-      size: "normal",
-      children: function children(onClose) {
-        return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [(0, _jsxRuntime.jsx)(_modal.ModalHeader, {
-            children: (0, _jsxRuntime.jsx)(_modal.ModalCloseButton, {
-              onClick: onClose,
-              title: t('article.closeLabel')
-            })
-          }), (0, _jsxRuntime.jsx)(_modal.ModalBody, {
-            children: licenseBox
-          })]
-        });
-      }
-    })]
-  });
-};
-var _default = ArticleSideBar;
-exports.default = _default;

package/src/Article/ArticleSideBar.tsx

@@ -1,73 +0,0 @@
-import React, { ReactNode } from 'react';
-import { CopyButton, ButtonV2 } from '@ndla/button';
-import styled from '@emotion/styled';
-import { ModalHeader, ModalBody, ModalCloseButton, Modal } from '@ndla/modal';
-import { copyTextToClipboard } from '@ndla/util';
-import { useTranslation } from 'react-i18next';
-
-const Wrapper = styled.div`
-  width: 160px;
-  margin: 6px 10px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-
-const ButtonWrapper = styled.div`
-  margin-bottom: 8px;
-  width: 100%;
-`;
-
-interface Props {
-  copyPageUrlLink?: string;
-  licenseBox?: ReactNode;
-}
-
-const ArticleSideBar = ({ copyPageUrlLink, licenseBox }: Props) => {
-  const { t } = useTranslation();
-  const copyLinkHandler = () => {
-    if (copyPageUrlLink) {
-      copyTextToClipboard(copyPageUrlLink);
-    }
-  };
-
-  return (
-    <Wrapper>
-      {copyPageUrlLink && (
-        <ButtonWrapper>
-          <CopyButton
-            onClick={copyLinkHandler}
-            size="small"
-            variant="outline"
-            aria-live="assertive"
-            copyNode={t('article.copyPageLinkCopied')}
-            data-copy-string={copyPageUrlLink}
-          >
-            {t('article.copyPageLink')}
-          </CopyButton>
-        </ButtonWrapper>
-      )}
-      {licenseBox && (
-        <Modal
-          activateButton={
-            <ButtonV2 size="small" variant="outline">
-              {t('article.useContent')}
-            </ButtonV2>
-          }
-          size="normal"
-        >
-          {(onClose: () => void) => (
-            <>
-              <ModalHeader>
-                <ModalCloseButton onClick={onClose} title={t('article.closeLabel')} />
-              </ModalHeader>
-              <ModalBody>{licenseBox}</ModalBody>
-            </>
-          )}
-        </Modal>
-      )}
-    </Wrapper>
-  );
-};
-
-export default ArticleSideBar;