@ndla/ui 3.0.14 → 3.1.1-alpha.13

package/lib/index.d.ts

@@ -46,3 +46,4 @@ export { default as ResourceGroup } from './ResourceGroup';
 export { default as LayoutItem, OneColumn, PageContainer, Content } from './Layout';
 export { SubjectAbout, SubjectArchive, SubjectCarousel, SubjectChildContent, SubjectContent, SubjectFilter, SubjectFlexChild, SubjectFlexWrapper, SubjectHeader, SubjectLinks, SubjectNewContent, SubjectSecondaryContent, SubjectSectionTitle, SubjectShortcuts, SubjectSidebarWrapper, SubjectSocialContent, SubjectSocialSection, SubjectTopics, SubjectBanner, } from './Subject';
 export { default as ContentCard } from './ContentCard';
+export { default as CopyParagraphButton } from './CopyParagraphButton';

package/lib/locale/messages-en.d.ts

@@ -342,6 +342,7 @@ declare const messages: {
         multipleAuthorsLabelAriaConjunction: string;
         copyPageLink: string;
         copyPageLinkCopied: string;
+        copyHeaderLink: string;
         conjunction: string;
         supplierLabel: string;
         multipleSuppliersLabel: string;

package/lib/locale/messages-en.js

@@ -137,7 +137,7 @@ var messages = _objectSpread(_objectSpread({
       showingCompetenceGoalSearchPhrase: 'Showing results for competence goals {text}',
       searchPhraseSuggestion: 'Search instead for:',
       notionLabels: 'Used in',
-      notionsHeading: 'Begrepsforklaring',
+      notionsHeading: 'Explanations',
       notionsRemove: 'Remove',
       showVideo: 'Watch video',
       showNotion: 'Show notion'

package/lib/locale/messages-nb.d.ts

@@ -342,6 +342,7 @@ declare const messages: {
         multipleAuthorsLabelAriaConjunction: string;
         copyPageLink: string;
         copyPageLinkCopied: string;
+        copyHeaderLink: string;
         conjunction: string;
         supplierLabel: string;
         multipleSuppliersLabel: string;

package/lib/locale/messages-nb.js

@@ -737,8 +737,8 @@ var messages = _objectSpread(_objectSpread({
     showLongerDescription: 'Vis hele emnebeskrivelsen',
     showShorterDescription: 'Skjul emnebeskrivelsen',
     topics: 'Emner',
-    additionalTopic: 'Tillegsemne',
-    additionalTopics: 'Tillegsemner',
+    additionalTopic: 'Tilleggsemne',
+    additionalTopics: 'Tilleggsemner',
     loadingText: 'Laster emne'
   },
   multidisciplinarySubject: {

package/lib/locale/messages-nn.d.ts

@@ -342,6 +342,7 @@ declare const messages: {
         multipleAuthorsLabelAriaConjunction: string;
         copyPageLink: string;
         copyPageLinkCopied: string;
+        copyHeaderLink: string;
         conjunction: string;
         supplierLabel: string;
         multipleSuppliersLabel: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "3.0.14",
+  "version": "3.1.1-alpha.13+a107d8a2e",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -41,7 +41,7 @@
     "@ndla/safelink": "^1.0.5",
     "@ndla/switch": "^0.0.32",
     "@ndla/tabs": "^1.0.8",
-    "@ndla/tooltip": "^0.2.46",
+    "@ndla/tooltip": "^0.2.47",
     "@ndla/util": "^2.0.0",
     "@reach/menu-button": "^0.12.1",
     "@reach/slider": "^0.12.1",
@@ -92,5 +92,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a88d6d0127b02faf0822488bf4a71f857554c917"
+  "gitHead": "a107d8a2e1064e49834d15188e956bb6af67d3fb"
 }

package/src/Article/ArticleContent.tsx

@@ -13,6 +13,7 @@ import {
   // @ts-ignore
 } from '@ndla/article-scripts';
 import { initAudioPlayers } from '../AudioPlayer';
+import { initCopyParagraphButtons } from '../CopyParagraphButton';
 import { Locale } from '../types';
 
 type Props = {
@@ -24,6 +25,7 @@ const ArticleContent = ({ content, locale, ...rest }: Props) => {
     removeEventListenerForResize();
     initArticleScripts();
     initAudioPlayers(locale);
+    initCopyParagraphButtons();
     return () => {
       removeEventListenerForResize();
     };

package/src/CopyParagraphButton/CopyParagraphButton.tsx

@@ -0,0 +1,88 @@
+/**
+ * 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 React, { useEffect, useState } from 'react';
+
+import styled from '@emotion/styled';
+import { Link } from '@ndla/icons/common';
+import { useTranslation } from 'react-i18next';
+// @ts-ignore
+import Tooltip from '@ndla/tooltip';
+import { copyTextToClipboard } from '@ndla/util';
+
+const IconButton = styled.button`
+  float: left;
+  position: relative;
+  left: -3em;
+  top: 0.1em;
+  background: none;
+  border: 0;
+  z-index: 1;
+  transition: 0.2s;
+  opacity: 0;
+
+  & svg {
+    width: 30px;
+    height: 30px;
+  }
+`;
+
+const ContainerDiv = styled.div`
+  &:hover button {
+    cursor: pointer;
+    opacity: 0.5;
+  }
+
+  & h2 {
+    position: relative;
+    left: -2em;
+  }
+`;
+
+interface Props {
+  title?: string | null;
+  content?: string | null;
+}
+
+const CopyParagraphButton = ({ title, content }: Props) => {
+  const { t } = useTranslation();
+  const [hasCopied, setHasCopied] = useState(false);
+  useEffect(() => {
+    if (hasCopied) {
+      setTimeout(() => setHasCopied(false), 3000);
+    }
+  }, [hasCopied]);
+
+  if (!title) return null;
+
+  const onCopyClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void => {
+    setHasCopied(true);
+    const copyId = event.currentTarget.getAttribute('data-title');
+    const { location } = window;
+    const newHash = `#${copyId}`;
+    const port = location.port ? `:${location.port}` : '';
+    const urlToCopy = `${location.protocol}//${location.hostname}${port}${location.pathname}${location.search}${newHash}`;
+
+    copyTextToClipboard(urlToCopy);
+  };
+
+  const sanitizedTitle = encodeURIComponent(title.replace(/ /g, '-'));
+  const tooltip = hasCopied ? t('article.copyPageLinkCopied') : t('article.copyHeaderLink');
+  return (
+    <ContainerDiv data-header-copy-container data-title={title}>
+      <IconButton onClick={onCopyClick} data-title={sanitizedTitle}>
+        <Tooltip tooltip={tooltip}>
+          <Link title={''} />
+        </Tooltip>
+      </IconButton>
+      <h2 id={sanitizedTitle} tabIndex={0} dangerouslySetInnerHTML={{ __html: content || '' }}></h2>
+    </ContainerDiv>
+  );
+};
+
+export default CopyParagraphButton;

package/src/CopyParagraphButton/index.tsx

@@ -0,0 +1,13 @@
+/**
+ * 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 CopyParagraphButton from './CopyParagraphButton';
+import initCopyParagraphButtons from './initCopyParagraphButtons';
+
+export { CopyParagraphButton, initCopyParagraphButtons };
+export default CopyParagraphButton;

package/src/CopyParagraphButton/initCopyParagraphButtons.tsx

@@ -0,0 +1,27 @@
+/**
+ * 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 React from 'react';
+import ReactDOM from 'react-dom';
+import CopyParagraphButton from './CopyParagraphButton';
+
+const forEachElement = (selector: string, callback: Function) => {
+  const nodeList = document.querySelectorAll(selector);
+  for (let i = 0; i < nodeList.length; i += 1) {
+    callback(nodeList[i], i);
+  }
+};
+
+const initCopyParagraphButtons = () => {
+  forEachElement('[data-header-copy-container]', (el: HTMLElement) => {
+    const title = el.getAttribute('data-title');
+    const content = el.innerHTML;
+    ReactDOM.hydrate(<CopyParagraphButton title={title} content={content} />, el);
+  });
+};
+
+export default initCopyParagraphButtons;

package/src/ResourceGroup/ResourceItem.tsx

@@ -7,11 +7,11 @@
  */
 
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import css from '@emotion/css';
 import { keyframes } from '@emotion/core';
 import SafeLink from '@ndla/safelink';
-import { useTranslation } from 'react-i18next';
 import { Additional, Core, HumanMaleBoard } from '@ndla/icons/common';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 

package/src/index.ts

@@ -135,3 +135,5 @@ export {
 } from './Subject';
 
 export { default as ContentCard } from './ContentCard';
+
+export { default as CopyParagraphButton } from './CopyParagraphButton';

package/src/locale/messages-en.ts

@@ -134,7 +134,7 @@ const messages = {
       showingCompetenceGoalSearchPhrase: 'Showing results for competence goals {text}',
       searchPhraseSuggestion: 'Search instead for:',
       notionLabels: 'Used in',
-      notionsHeading: 'Begrepsforklaring',
+      notionsHeading: 'Explanations',
       notionsRemove: 'Remove',
       showVideo: 'Watch video',
       showNotion: 'Show notion',
@@ -327,6 +327,7 @@ const messages = {
     multipleAuthorsLabelAriaConjunction: 'and',
     copyPageLink: 'Copy page-link',
     copyPageLinkCopied: 'Link copied',
+    copyHeaderLink: 'Copy link to header',
     conjunction: 'and',
     supplierLabel: 'Rightsholder: {{name}}',
     multipleSuppliersLabel: 'Rightsholders: {{names}}',

package/src/locale/messages-nb.ts

@@ -326,6 +326,7 @@ const messages = {
     multipleAuthorsLabelAriaConjunction: 'og',
     copyPageLink: 'Kopier lenke til siden',
     copyPageLinkCopied: 'Lenke kopiert',
+    copyHeaderLink: 'Kopier lenke til overskriften',
     conjunction: 'og',
     supplierLabel: 'Rettighetshaver: {{name}}',
     multipleSuppliersLabel: 'Rettighetshavere: {{names}}',
@@ -764,8 +765,8 @@ const messages = {
     showLongerDescription: 'Vis hele emnebeskrivelsen',
     showShorterDescription: 'Skjul emnebeskrivelsen',
     topics: 'Emner',
-    additionalTopic: 'Tillegsemne',
-    additionalTopics: 'Tillegsemner',
+    additionalTopic: 'Tilleggsemne',
+    additionalTopics: 'Tilleggsemner',
     loadingText: 'Laster emne',
   },
   multidisciplinarySubject: {

package/src/locale/messages-nn.ts

@@ -327,6 +327,7 @@ const messages = {
     multipleAuthorsLabelAriaConjunction: 'og',
     copyPageLink: 'Kopier lenke til sida',
     copyPageLinkCopied: 'Lenke kopiert',
+    copyHeaderLink: 'Kopier lenke til overskrifta',
     conjunction: 'og',
     supplierLabel: 'Rettshavar: {{name}}',
     multipleSuppliersLabel: 'Rettshavarar: {{names}}',