@ndla/ui 3.0.13 → 3.1.0

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/index.js

@@ -103,7 +103,8 @@ var _exportNames = {
   SubjectSocialSection: true,
   SubjectTopics: true,
   SubjectBanner: true,
-  ContentCard: true
+  ContentCard: true,
+  CopyParagraphButton: true
 };
 Object.defineProperty(exports, "ArticleByline", {
   enumerable: true,
@@ -693,6 +694,12 @@ Object.defineProperty(exports, "ContentCard", {
     return _ContentCard["default"];
   }
 });
+Object.defineProperty(exports, "CopyParagraphButton", {
+  enumerable: true,
+  get: function get() {
+    return _CopyParagraphButton["default"];
+  }
+});
 
 var _indexJavascript = require("./index-javascript");
 
@@ -781,6 +788,8 @@ var _Subject = require("./Subject");
 
 var _ContentCard = _interopRequireDefault(require("./ContentCard"));
 
+var _CopyParagraphButton = _interopRequireDefault(require("./CopyParagraphButton"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

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

@@ -303,6 +303,7 @@ var messages = _objectSpread(_objectSpread({
     multipleAuthorsLabelAriaConjunction: 'and',
     copyPageLink: 'Copy page-link',
     copyPageLinkCopied: 'Link copied',
+    copyHeaderLink: 'Copy link to header',
     conjunction: 'and',
     supplierLabel: 'Rightsholder: {{name}}',
     multipleSuppliersLabel: 'Rightsholders: {{names}}',

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

@@ -303,6 +303,7 @@ var messages = _objectSpread(_objectSpread({
     multipleAuthorsLabelAriaConjunction: 'og',
     copyPageLink: 'Kopier lenke til siden',
     copyPageLinkCopied: 'Lenke kopiert',
+    copyHeaderLink: 'Kopier lenke til overskriften',
     conjunction: 'og',
     supplierLabel: 'Rettighetshaver: {{name}}',
     multipleSuppliersLabel: 'Rettighetshavere: {{names}}',

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/lib/locale/messages-nn.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "3.0.13",
+  "version": "3.1.0",
   "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": "815d8d7d88d2a021c35f96421eb357925c0c2b6b"
+  "gitHead": "fa15cb6ceb74c400580f44372988b0d9d98e2f3d"
 }

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,89 @@
+/**
+ * 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;
+}
+
+const CopyParagraphButton = ({ title }: 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}>
+        {title}
+      </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,26 @@
+/**
+ * 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');
+    ReactDOM.hydrate(<CopyParagraphButton title={title} />, 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';
 
@@ -247,7 +247,7 @@ const ResourceItem = ({
   return (
     <ListElement
       contentType={contentType}
-      hidden={hidden}
+      hidden={hidden && !active}
       active={active}
       additional={additional}
       extraBottomMargin={extraBottomMargin}>

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

@@ -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}}',

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}}',