@ndla/ui 30.8.2 → 30.8.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "30.8.2",
+  "version": "30.8.3",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,22 +31,22 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/article-scripts": "^3.0.9",
-    "@ndla/button": "^6.0.2",
-    "@ndla/carousel": "^2.0.7",
-    "@ndla/core": "^3.0.2",
-    "@ndla/forms": "^4.0.14",
-    "@ndla/hooks": "^1.1.13",
-    "@ndla/icons": "^2.0.7",
-    "@ndla/licenses": "^6.0.9",
-    "@ndla/modal": "^2.1.2",
-    "@ndla/notion": "^4.0.16",
-    "@ndla/safelink": "^3.0.14",
-    "@ndla/switch": "^1.0.2",
-    "@ndla/tabs": "^2.0.9",
-    "@ndla/tooltip": "^3.0.5",
+    "@ndla/article-scripts": "^3.0.10",
+    "@ndla/button": "^6.0.3",
+    "@ndla/carousel": "^2.0.8",
+    "@ndla/core": "^3.0.3",
+    "@ndla/forms": "^4.0.15",
+    "@ndla/hooks": "^1.1.14",
+    "@ndla/icons": "^2.0.8",
+    "@ndla/licenses": "^6.0.10",
+    "@ndla/modal": "^2.1.3",
+    "@ndla/notion": "^4.0.17",
+    "@ndla/safelink": "^3.0.15",
+    "@ndla/switch": "^1.0.3",
+    "@ndla/tabs": "^2.0.10",
+    "@ndla/tooltip": "^3.0.6",
     "@ndla/types-learningpath-api": "^0.0.17",
-    "@ndla/util": "^3.1.7",
+    "@ndla/util": "^3.1.8",
     "@reach/menu-button": "^0.16.2",
     "@reach/slider": "^0.16.0",
     "focus-trap-react": "^8.9.2",
@@ -86,5 +86,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "87a608977cc0558fcf41dcf7c9f6e6414d7c7c02"
+  "gitHead": "069ef3ed8a9641137f8d4de51ab6415985bca997"
 }

package/src/CopyParagraphButton/CopyParagraphButton.tsx

@@ -13,6 +13,11 @@ import { Link } from '@ndla/icons/common';
 import { useTranslation } from 'react-i18next';
 import Tooltip from '@ndla/tooltip';
 import { copyTextToClipboard } from '@ndla/util';
+import { colors } from '@ndla/core';
+
+const ContainerDiv = styled.div`
+  position: relative;
+`;
 
 const IconButton = styled.button`
   position: absolute;
@@ -23,18 +28,17 @@ const IconButton = styled.button`
   z-index: 1;
   transition: 0.2s;
   opacity: 0;
+  color: ${colors.brand.grey};
 
   & svg {
     width: 30px;
     height: 30px;
   }
-`;
 
-const ContainerDiv = styled.div`
-  position: relative;
-  &:hover button {
+  ${ContainerDiv}:hover &,
+  &:focus, &:focus-visible, &:active {
     cursor: pointer;
-    opacity: 0.5;
+    opacity: 1;
   }
 `;
 
@@ -54,12 +58,12 @@ interface CopyButtonProps {
 const CopyButton = ({ onClick, title, tooltip, content }: CopyButtonProps) => {
   return (
     <div>
-      <IconButton onClick={onClick} data-title={title}>
-        <Tooltip tooltip={tooltip}>
+      <Tooltip tooltip={tooltip}>
+        <IconButton onClick={onClick} data-title={title} aria-label={`${tooltip}: ${title}`}>
           <Link title={''} />
-        </Tooltip>
-      </IconButton>
-      <h2 id={title} tabIndex={0} dangerouslySetInnerHTML={{ __html: content || '' }} />
+        </IconButton>
+      </Tooltip>
+      <h2 id={title} tabIndex={-1} dangerouslySetInnerHTML={{ __html: content || '' }} />
     </div>
   );
 };

package/src/Frontpage/FrontpageSearch.tsx

@@ -141,6 +141,7 @@ const FrontpageSearch = ({
     return () => {
       noScroll(false, 'preventPageScroll');
       window.removeEventListener('scroll', resetScroll);
+      inputHasFocusRef.current = false;
     };
   }, [inputHasFocus]);
 

package/src/TopicMenu/component.topic-menu.scss

@@ -264,8 +264,7 @@ $navigation-row-width: 980px / 3;
 
     @include mq(desktop) {
       padding: $spacing--large;
-      margin: -($spacing + $spacing--small) $spacing + $spacing--small 0 $spacing +
-        $spacing--small;
+      margin: -($spacing + $spacing--small) $spacing + $spacing--small 0 $spacing + $spacing--small;
     }
 
     & > * {
@@ -362,7 +361,8 @@ $navigation-row-width: 980px / 3;
         @include inuit-font-size(26px);
       }
 
-      a, button {
+      a,
+      button {
         padding: 0;
         padding-right: $spacing--small;
         border: 0;
@@ -374,7 +374,8 @@ $navigation-row-width: 980px / 3;
         svg {
           transition: transform 100ms ease;
         }
-        &:hover, &:focus {
+        &:hover,
+        &:focus {
           svg {
             transform: translateX($spacing--small / 4);
           }
@@ -386,7 +387,8 @@ $navigation-row-width: 980px / 3;
 
       @include mq($until: tabletWide) {
         width: 100%;
-        a, button {
+        a,
+        button {
           background: $brand-color--lighter;
           box-shadow: none;
           width: 100%;
@@ -402,13 +404,14 @@ $navigation-row-width: 980px / 3;
         }
       }
       @include mq($until: mobileWide) {
-        a, button {
+        a,
+        button {
           padding: 0 $left-margin-narrow-screen;
         }
       }
     }
     &__menu-filter {
-      display:flex;
+      display: flex;
       flex-wrap: wrap;
       margin-top: -$spacing--small;
       button {
@@ -453,7 +456,7 @@ $navigation-row-width: 980px / 3;
 .c-topic-menu__back-button {
   display: flex;
   align-items: center;
-  cursor:pointer;
+  cursor: pointer;
   border: 0;
   padding: 0;
   color: $brand-color;
@@ -484,7 +487,7 @@ $navigation-row-width: 980px / 3;
   .c-topic-menu__back-button-slides {
     display: flex;
     align-items: center;
-    cursor:pointer;
+    cursor: pointer;
     border: 0;
     padding: 0;
     color: $brand-color;
@@ -734,7 +737,6 @@ $navigation-row-width: 980px / 3;
     &:active,
     &:focus {
       background-color: $brand-color--light;
-
     }
   }
 
@@ -745,13 +747,13 @@ $navigation-row-width: 980px / 3;
     height: auto;
     min-height: $link-height;
 
-    .c-topic-menu__link-wrapper{
+    .c-topic-menu__link-wrapper {
       border-bottom: 1px solid $brand-color--dark;
       padding-bottom: $spacing--small;
       display: flex;
       flex-wrap: wrap;
       @include mq($until: tabletWide) {
-        border:0;
+        border: 0;
         padding-bottom: 0;
       }
     }
@@ -871,6 +873,7 @@ $navigation-row-width: 980px / 3;
 
   &-right {
     justify-content: flex-end;
+    margin-right: 16px;
   }
 }
 .c-topic-menu__search {
@@ -940,7 +943,7 @@ $navigation-row-width: 980px / 3;
     padding-right: $spacing + $spacing--small;
   }
   & > nav:first-child {
-    margin-top:0;
+    margin-top: 0;
   }
 }