Updated Safelink components + package bump

package.json

@@ -43,12 +43,12 @@
     "@graphql-codegen/typescript": "^4.0.6",
     "@graphql-codegen/typescript-operations": "^4.2.0",
     "@graphql-eslint/eslint-plugin": "^3.20.1",
-    "@ndla/preset-panda": "^0.0.9",
+    "@ndla/preset-panda": "^0.0.10",
     "@ndla/scripts": "^2.1.2",
     "@ndla/types-backend": "^0.2.88",
     "@ndla/types-embed": "^4.1.8",
     "@ndla/types-taxonomy": "^1.0.26",
-    "@pandacss/dev": "^0.41.0",
+    "@pandacss/dev": "^0.42.0",
     "@playwright/test": "^1.43.1",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^15.0.2",
@@ -91,27 +91,27 @@
     "@fontsource/source-sans-pro": "^4.5.9",
     "@fontsource/source-serif-pro": "^4.5.7",
     "@lexical/react": "^0.12.4",
-    "@ndla/article-converter": "^9.0.12-alpha.0",
-    "@ndla/button": "^14.0.5-alpha.0",
-    "@ndla/carousel": "^5.0.5-alpha.0",
+    "@ndla/article-converter": "^9.0.13-alpha.0",
+    "@ndla/button": "^14.0.6-alpha.0",
+    "@ndla/carousel": "^5.0.6-alpha.0",
     "@ndla/core": "^5.0.1",
     "@ndla/dropdown-menu": "^1.0.38",
     "@ndla/error-reporter": "^2.0.2",
-    "@ndla/forms": "^9.0.5-alpha.0",
-    "@ndla/icons": "^7.0.6-alpha.0",
+    "@ndla/forms": "^9.0.6-alpha.0",
+    "@ndla/icons": "^7.0.7-alpha.0",
     "@ndla/licenses": "^8.0.0-alpha.0",
-    "@ndla/modal": "^7.0.5-alpha.0",
-    "@ndla/pager": "^3.0.20",
-    "@ndla/primitives": "^0.0.16",
-    "@ndla/safelink": "^5.1.14",
-    "@ndla/select": "^5.0.4-alpha.0",
-    "@ndla/styled-system": "^0.0.7",
+    "@ndla/modal": "^7.0.6-alpha.0",
+    "@ndla/pager": "^4.0.0-alpha.0",
+    "@ndla/primitives": "^0.0.17",
+    "@ndla/safelink": "^6.0.0-alpha.0",
+    "@ndla/select": "^5.0.5-alpha.0",
+    "@ndla/styled-system": "^0.0.8",
     "@ndla/switch": "^1.1.44",
     "@ndla/tabs": "^4.0.8",
     "@ndla/tracker": "^5.0.7",
-    "@ndla/typography": "^0.4.22",
-    "@ndla/ui": "^55.0.12-alpha.0",
-    "@ndla/util": "^4.0.4",
+    "@ndla/typography": "^0.4.23",
+    "@ndla/ui": "^55.0.13-alpha.0",
+    "@ndla/util": "^4.1.0",
     "cross-env": "^7.0.3",
     "date-fns": "^2.30.0",
     "express": "^4.19.2",

src/components/CompetenceGoalTab.tsx

@@ -10,8 +10,7 @@ import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
 import { spacing } from "@ndla/core";
 import { MenuBook } from "@ndla/icons/action";
-import { Search } from "@ndla/icons/common";
-import { SafeLink, SafeLinkButton } from "@ndla/safelink";
+import { SafeLink } from "@ndla/safelink";
 import { Heading, Text } from "@ndla/typography";
 import { CompetenceGoalsType } from "../interfaces";
 
@@ -141,8 +140,10 @@ const ItemWrapper = styled.div`
   }
 `;
 
-const StyledSafeLinkButton = styled(SafeLinkButton)`
-  text-align: start;
+const CoreElementWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${spacing.small};
 `;
 
 export const CompetenceItem = ({ item, isOembed, showLinks }: CompetenceItemProps) => {
@@ -163,27 +164,25 @@ export const CompetenceItem = ({ item, isOembed, showLinks }: CompetenceItemProp
                       {goal.text}
                     </Text>
                     {showLinks && (
-                      <StyledSafeLinkButton to={goal.url} target={isOembed ? "_blank" : "_self"} variant="outline">
-                        <Search />
+                      <SafeLink to={goal.url} target={isOembed ? "_blank" : "_self"}>
                         {t("competenceGoals.competenceGoalResourceSearchText", { code: goal.id })}
-                      </StyledSafeLinkButton>
+                      </SafeLink>
                     )}
                   </ItemWrapper>
                 </InnerListItem>
               ))}
             </InnerList>
           ) : (
-            <ItemWrapper data-show-links={showLinks}>
+            <CoreElementWrapper>
               <Text textStyle="content-alt" margin="none">
                 {element.text}
               </Text>
               {showLinks && (
-                <StyledSafeLinkButton to={element.url} target={isOembed ? "_blank" : "_self"} variant="outline">
-                  <Search />
+                <SafeLink to={element.url} target={isOembed ? "_blank" : "_self"}>
                   {t("competenceGoals.coreResourceSearchText", { code: element.id })}
-                </StyledSafeLinkButton>
+                </SafeLink>
               )}
-            </ItemWrapper>
+            </CoreElementWrapper>
           )}
         </OuterListItem>
       ))}

src/components/FeideLoginButton/FeideLoginButton.tsx

@@ -8,25 +8,13 @@
 
 import { ReactNode, useContext } from "react";
 import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { spacing } from "@ndla/core";
 import { Modal, ModalTrigger } from "@ndla/modal";
 import { Button } from "@ndla/primitives";
 import { SafeLinkButton } from "@ndla/safelink";
 import { routes } from "../../routeHelpers";
 import { AuthContext } from "../AuthenticationContext";
 import LoginModalContent from "../MyNdla/LoginModalContent";
 
-const StyledLink = styled(SafeLinkButton)`
-  display: flex;
-  gap: ${spacing.small};
-  white-space: nowrap;
-  svg {
-    width: 20px;
-    height: 20px;
-  }
-`;
-
 interface Props {
   footer?: boolean;
   children?: ReactNode;
@@ -38,15 +26,9 @@ const FeideLoginButton = ({ children }: Props) => {
 
   if (authenticated) {
     return (
-      <StyledLink
-        variant="ghost"
-        colorTheme="light"
-        shape="pill"
-        to={routes.myNdla.root}
-        aria-label={t("myNdla.myNDLA")}
-      >
+      <SafeLinkButton variant="tertiary" to={routes.myNdla.root} aria-label={t("myNdla.myNDLA")}>
         {children}
-      </StyledLink>
+      </SafeLinkButton>
     );
   }
 

src/components/MyNdla/BlockResource.tsx

@@ -10,8 +10,9 @@
 import { ReactNode, useMemo } from "react";
 import styled from "@emotion/styled";
 import { colors, spacing, stackOrder } from "@ndla/core";
+import { Image } from "@ndla/primitives";
 import { Text } from "@ndla/typography";
-import { ContentLoader, ContentTypeBadge, Image } from "@ndla/ui";
+import { ContentLoader, ContentTypeBadge } from "@ndla/ui";
 import {
   ResourceImageProps,
   ContentIconWrapper,

src/components/MyNdla/ListResource.tsx

@@ -10,8 +10,9 @@
 import { ReactNode, useMemo } from "react";
 import styled from "@emotion/styled";
 import { spacing, colors, breakpoints, mq, stackOrder } from "@ndla/core";
+import { Image } from "@ndla/primitives";
 import { Text } from "@ndla/typography";
-import { ContentTypeBadge, ContentLoader, Image } from "@ndla/ui";
+import { ContentTypeBadge, ContentLoader } from "@ndla/ui";
 import {
   ResourceImageProps,
   ContentIconWrapper,

src/components/MyNdla/resourceComponents.tsx

@@ -203,11 +203,7 @@ export const CompressedTagList = ({ tags, tagLinkPrefix }: CompressedTagListProp
           <DropdownContent showArrow>
             {remainingTags.map((tag, i) => (
               <DropdownItem key={`tag-${i}`}>
-                <SafeLinkButton
-                  to={`${tagLinkPrefix ?? ""}/${encodeURIComponent(tag)}`}
-                  variant="ghost"
-                  colorTheme="light"
-                >
+                <SafeLinkButton to={`${tagLinkPrefix ?? ""}/${encodeURIComponent(tag)}`} variant="tertiary">
                   <HashTag />
                   {tag}
                 </SafeLinkButton>

src/components/NavigationBox.tsx

@@ -89,7 +89,6 @@ const StyledListElementWrapper = styled.div`
 const StyledSafeLinkButton = styled(SafeLinkButton)`
   display: flex;
   flex: 1;
-  width: 100%;
   height: 100%;
   text-align: left;
   padding-left: ${spacing.xxsmall};
@@ -136,9 +135,8 @@ export const NavigationBox = ({ heading, colorMode = "primary", items, listDirec
             >
               <StyledSafeLinkButton
                 to={item.url ?? ""}
-                colorTheme={item.selected ? "darker" : colorMode}
-                size="medium"
-                shape="sharp"
+                // TODO: Fix handling of active safeLinkButton according to design
+                variant={item.selected ? "secondary" : "primary"}
               >
                 <StyledButtonContentText>
                   <StyledMarksWrapper>

src/components/license/AudioLicenseList.tsx

@@ -113,12 +113,12 @@ const AudioLicenseInfo = ({ audio }: AudioLicenseInfoProps) => {
       </LicenseAndButtonWrapper>
       {!isCopyrighted(audio.copyright.license.license) && (
         <MediaListItemActions>
-          <SafeLinkButton to={audio.src} download variant="outline">
+          <SafeLinkButton to={audio.src} download variant="secondary">
             <Download />
             {t("license.download")}
           </SafeLinkButton>
           {shouldShowLink && (
-            <SafeLinkButton to={pageUrl} target="_blank" variant="outline" rel="noopener noreferrer">
+            <SafeLinkButton to={pageUrl} target="_blank" variant="secondary" rel="noopener noreferrer">
               <Launch />
               {t("license.openLink")}
             </SafeLinkButton>

src/components/license/ConceptLicenseList.tsx

@@ -117,7 +117,7 @@ const ConceptLicenseInfo = ({ concept, type }: ConceptLicenseInfoProps) => {
       {!isCopyrighted(concept.copyright?.license?.license) && (
         <MediaListItemActions>
           {concept.src && (
-            <SafeLinkButton to={downloadUrl(concept.src)} variant="outline">
+            <SafeLinkButton to={downloadUrl(concept.src)} variant="secondary">
               <Download />
               {t("license.download")}
             </SafeLinkButton>
@@ -128,7 +128,7 @@ const ConceptLicenseInfo = ({ concept, type }: ConceptLicenseInfoProps) => {
             hasCopiedTitle={t("license.embedCopied")}
           />
           {shouldShowLink && (
-            <SafeLinkButton to={pageUrl} target="_blank" rel="noopener noreferrer" variant="outline">
+            <SafeLinkButton to={pageUrl} target="_blank" rel="noopener noreferrer" variant="secondary">
               <Launch />
               {t("license.openLink")}
             </SafeLinkButton>

src/components/license/CopyTextButton.tsx

@@ -57,7 +57,7 @@ class CopyTextButton extends Component<Props, State> {
           this.buttonContainer = r;
         }}
       >
-        <Button variant="secondary" size="small" disabled={hasCopied} onClick={this.handleClick}>
+        <Button variant="secondary" disabled={hasCopied} onClick={this.handleClick}>
           {children}
           {hasCopied ? hasCopiedTitle : copyTitle}
         </Button>

src/components/license/H5pLicenseList.tsx

@@ -81,7 +81,7 @@ const H5pLicenseInfo = ({ h5p }: H5pLicenseInfoProps) => {
             hasCopiedTitle={t("license.embedCopied")}
           />
           {shouldShowLink && (
-            <SafeLinkButton to={pageUrl} target="_blank" rel="noopener noreferrer" variant="outline">
+            <SafeLinkButton to={pageUrl} target="_blank" rel="noopener noreferrer" variant="secondary">
               <Launch />
               {t("license.openLink")}
             </SafeLinkButton>

src/components/license/ImageLicenseList.tsx

@@ -17,8 +17,8 @@ import { spacing } from "@ndla/core";
 import { Copy } from "@ndla/icons/action";
 import { Download, Launch } from "@ndla/icons/common";
 import { metaTypes, getGroupedContributorDescriptionList, figureApa7CopyString } from "@ndla/licenses";
+import { Image } from "@ndla/primitives";
 import { SafeLinkButton } from "@ndla/safelink";
-import { Image } from "@ndla/ui";
 import CopyTextButton from "./CopyTextButton";
 import { licenseListCopyrightFragment } from "./licenseFragments";
 import { isCopyrighted, licenseCopyrightToCopyrightType } from "./licenseHelpers";
@@ -125,7 +125,7 @@ const ImageLicenseInfo = ({ image }: ImageLicenseInfoProps) => {
       <Image alt={image.altText} src={image.src} />
       {!isCopyrighted(image.copyright.license.license) && (
         <MediaListItemActions>
-          <SafeLinkButton to={downloadUrl(image.src)} variant="outline" download>
+          <SafeLinkButton to={downloadUrl(image.src)} variant="secondary" download>
             <Download />
             {t("license.download")}
           </SafeLinkButton>
@@ -135,7 +135,7 @@ const ImageLicenseInfo = ({ image }: ImageLicenseInfoProps) => {
             hasCopiedTitle={t("license.embedCopied")}
           />
           {shouldShowLink && (
-            <SafeLinkButton to={pageUrl} target="_blank" variant="outline" rel="noopener noreferrer">
+            <SafeLinkButton to={pageUrl} target="_blank" variant="secondary" rel="noopener noreferrer">
               <Launch />
               {t("license.openLink")}
             </SafeLinkButton>

src/components/license/PodcastLicenseList.tsx

@@ -113,7 +113,7 @@ const PodcastLicenseInfo = ({ podcast }: PodcastLicenseInfoProps) => {
       </LicenseAndButtonWrapper>
       {!isCopyrighted(podcast.copyright.license.license) && (
         <MediaListItemActions>
-          <SafeLinkButton to={podcast.src} download variant="outline">
+          <SafeLinkButton to={podcast.src} download variant="secondary">
             <Download />
             {t("license.download")}
           </SafeLinkButton>
@@ -123,7 +123,7 @@ const PodcastLicenseInfo = ({ podcast }: PodcastLicenseInfoProps) => {
             hasCopiedTitle={t("license.embedCopied")}
           />
           {shouldShowLink && (
-            <SafeLinkButton to={pageUrl} target="_blank" variant="outline" rel="noopener noreferrer">
+            <SafeLinkButton to={pageUrl} target="_blank" variant="secondary" rel="noopener noreferrer">
               <Launch />
               {t("license.openLink")}
             </SafeLinkButton>

src/components/license/TextLicenseList.tsx

@@ -76,7 +76,7 @@ const TextLicenseInfo = ({ text, printUrl }: TextLicenseInfoProps) => {
       />
       <MediaListItemActions>
         {printUrl && (
-          <Button variant="secondary" size="small" onClick={() => printPage(printUrl)}>
+          <Button variant="secondary" onClick={() => printPage(printUrl)}>
             {t("article.printPage")}
           </Button>
         )}

src/components/license/VideoLicenseList.tsx

@@ -100,7 +100,7 @@ const VideoLicenseInfo = ({ video }: VideoLicenseInfoProps) => {
       {!isCopyrighted(video.copyright?.license.license) && (
         <MediaListItemActions>
           {video.download && (
-            <SafeLinkButton to={video.download} download variant="outline">
+            <SafeLinkButton to={video.download} download variant="secondary">
               <Download />
               {t("license.download")}
             </SafeLinkButton>
@@ -111,7 +111,7 @@ const VideoLicenseInfo = ({ video }: VideoLicenseInfoProps) => {
             hasCopiedTitle={t("license.embedCopied")}
           />
           {shouldShowLink && (
-            <SafeLinkButton to={pageUrl} target="_blank" variant="outline" rel="noopener noreferrer">
+            <SafeLinkButton to={pageUrl} target="_blank" variant="secondary" rel="noopener noreferrer">
               <Launch />
               {t("license.openLink")}
             </SafeLinkButton>

src/containers/AboutPage/AboutPageFooter.tsx

@@ -111,14 +111,13 @@ const AboutPageFooter = ({ frontpage }: Props) => {
       </Heading>
       <StyledNav aria-labelledby="aboutNavTitle">
         <StyledList>
+          {/* TODO: change according to design */}
           {menu?.map((menuItem) => (
             <li key={menuItem.article.slug}>
               {isRoot ? (
                 <StyledSafeLinkButton
                   to={toAbout(menuItem.article.slug)}
-                  variant="ghost"
-                  colorTheme="light"
-                  shape="sharp"
+                  variant="secondary"
                   aria-current={menuItem.article.slug === slug ? "page" : false}
                 >
                   {menuItem.article.title}
@@ -127,8 +126,7 @@ const AboutPageFooter = ({ frontpage }: Props) => {
               ) : (
                 <StyledSubSafeLinkButton
                   to={toAbout(menuItem.article.slug)}
-                  variant="ghost"
-                  colorTheme="light"
+                  variant="secondary"
                   aria-current={menuItem.article.slug === slug ? "page" : false}
                 >
                   {menuItem.article.title}

src/containers/ErrorPage/ErrorPage.tsx

@@ -9,10 +9,9 @@
 import { Helmet } from "react-helmet-async";
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
-import { ZendeskButton } from "@ndla/button";
 import { stackOrder } from "@ndla/core";
 import { MissingRouterContext } from "@ndla/safelink";
-import { Logo, PageContainer } from "@ndla/ui";
+import { Logo, PageContainer, ZendeskButton } from "@ndla/ui";
 import { Status } from "../../components";
 import DefaultErrorMessage from "../../components/DefaultErrorMessage";
 import config from "../../config";