Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Updated Safelink components + package bump #1910

Merged
merged 8 commits into from
Jul 11, 2024
Merged

Updated Safelink components + package bump #1910

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
d5f7d00
Bump packages
katrinewi Jul 10, 2024
eb8efaf
Image from primitives
katrinewi Jul 10, 2024
4072040
Bump @pandacss/dev
katrinewi Jul 10, 2024
031d45b
Use new Safelink components
katrinewi Jul 10, 2024
ebd815b
Snapshots
katrinewi Jul 10, 2024
22b71c3
Use ZendeskButton from ndla/ui
Jonas-C Jul 10, 2024
f80fbb9
Remove some custom styling
katrinewi Jul 11, 2024
004b387
Fix CompetenceGoalTab safelinks. Update styling.
katrinewi Jul 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 16 additions & 16 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions src/components/CompetenceGoalTab.tsx
View file
Open in desktop
katrinewi marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ export const CompetenceItem = ({ item, isOembed, showLinks }: CompetenceItemProp
{goal.text}
</Text>
{showLinks && (
<StyledSafeLinkButton to={goal.url} target={isOembed ? "_blank" : "_self"} variant="outline">
<StyledSafeLinkButton to={goal.url} target={isOembed ? "_blank" : "_self"} variant="secondary">
<Search />
{t("competenceGoals.competenceGoalResourceSearchText", { code: goal.id })}
</StyledSafeLinkButton>
Expand All @@ -178,7 +178,7 @@ export const CompetenceItem = ({ item, isOembed, showLinks }: CompetenceItemProp
{element.text}
</Text>
{showLinks && (
<StyledSafeLinkButton to={element.url} target={isOembed ? "_blank" : "_self"} variant="outline">
<StyledSafeLinkButton to={element.url} target={isOembed ? "_blank" : "_self"} variant="secondary">
<Search />
{t("competenceGoals.coreResourceSearchText", { code: element.id })}
</StyledSafeLinkButton>
Expand Down
8 changes: 1 addition & 7 deletions src/components/FeideLoginButton/FeideLoginButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,13 +38,7 @@ const FeideLoginButton = ({ children }: Props) => {

if (authenticated) {
return (
<StyledLink
variant="ghost"
colorTheme="light"
shape="pill"
to={routes.myNdla.root}
aria-label={t("myNdla.myNDLA")}
>
<StyledLink variant="tertiary" to={routes.myNdla.root} aria-label={t("myNdla.myNDLA")}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sjekker du også at ting trenger å være stylet, eller tenker du at vi tar det senere?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Jeg har egentlig prøvd å rydde opp i det og, men har nok glemt noen steder, som her 😅

{children}
</StyledLink>
);
Expand Down
3 changes: 2 additions & 1 deletion src/components/MyNdla/BlockResource.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
3 changes: 2 additions & 1 deletion src/components/MyNdla/ListResource.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
6 changes: 1 addition & 5 deletions src/components/MyNdla/resourceComponents.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 2 additions & 4 deletions src/components/NavigationBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};
Expand Down Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/components/license/AudioLicenseList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/components/license/ConceptLicenseList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/components/license/CopyTextButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/components/license/H5pLicenseList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions src/components/license/ImageLicenseList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/components/license/PodcastLicenseList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/components/license/TextLicenseList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)}
Expand Down
4 changes: 2 additions & 2 deletions src/components/license/VideoLicenseList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
8 changes: 3 additions & 5 deletions src/containers/AboutPage/AboutPageFooter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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}
Expand Down
18 changes: 10 additions & 8 deletions src/containers/ErrorPage/__tests__/__snapshots__/ErrorPage-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -597,6 +597,7 @@ exports[`ErrorPage renderers correctly 1`] = `
>
<a
aria-label="Nasjonal digital læringsarena"
class=""
href="/"
title="Nasjonal digital læringsarena"
>
Expand Down Expand Up @@ -661,6 +662,7 @@ exports[`ErrorPage renderers correctly 1`] = `
class="emotion-17 emotion-18"
>
<a
class=""
href="/"
>
Gå til forsiden
Expand All @@ -680,7 +682,7 @@ exports[`ErrorPage renderers correctly 1`] = `
>
<svg
aria-hidden="true"
class="d_inline-block fill_currentcolor v-align_middle leading_1em shrink_0 w_medium h_medium emotion-23"
class="d_inline-block fill_currentcolor va_middle lh_1em flex-sh_0 w_medium h_medium emotion-23"
data-icon=""
data-license="Apache License 2.0"
data-source="Material Design"
Expand Down Expand Up @@ -731,7 +733,7 @@ exports[`ErrorPage renderers correctly 1`] = `
>
<svg
aria-hidden="true"
class="d_inline-block fill_currentcolor v-align_middle leading_1em shrink_0 w_medium h_medium"
class="d_inline-block fill_currentcolor va_middle lh_1em flex-sh_0 w_medium h_medium"
data-icon=""
data-license="Apache License 2.0"
data-source="Material Design"
Expand Down Expand Up @@ -760,7 +762,7 @@ exports[`ErrorPage renderers correctly 1`] = `
>
<svg
aria-hidden="true"
class="d_inline-block fill_currentcolor v-align_middle leading_1em shrink_0 w_medium h_medium"
class="d_inline-block fill_currentcolor va_middle lh_1em flex-sh_0 w_medium h_medium"
data-icon=""
data-license="Apache License 2.0"
data-name="Instagram"
Expand All @@ -787,7 +789,7 @@ exports[`ErrorPage renderers correctly 1`] = `
>
<svg
aria-hidden="true"
class="d_inline-block fill_currentcolor v-align_middle leading_1em shrink_0 w_medium h_medium"
class="d_inline-block fill_currentcolor va_middle lh_1em flex-sh_0 w_medium h_medium"
data-icon=""
data-license="Apache License 2.0"
data-name="LinkedIn"
Expand All @@ -814,7 +816,7 @@ exports[`ErrorPage renderers correctly 1`] = `
>
<svg
aria-hidden="true"
class="d_inline-block fill_currentcolor v-align_middle leading_1em shrink_0 w_medium h_medium"
class="d_inline-block fill_currentcolor va_middle lh_1em flex-sh_0 w_medium h_medium"
data-icon=""
data-license="Apache License 2.0"
data-source="Material Design"
Expand Down Expand Up @@ -855,7 +857,7 @@ exports[`ErrorPage renderers correctly 1`] = `
>
<svg
aria-hidden="true"
class="d_inline-block fill_currentcolor v-align_middle leading_1em shrink_0 w_medium h_medium"
class="d_inline-block fill_currentcolor va_middle lh_1em flex-sh_0 w_medium h_medium"
data-icon=""
data-license="Apache License 2.0"
data-source="Material Design"
Expand Down Expand Up @@ -932,7 +934,7 @@ exports[`ErrorPage renderers correctly 1`] = `
</a>
<svg
aria-hidden="true"
class="d_inline-block fill_currentcolor v-align_middle leading_1em shrink_0 w_medium h_medium"
class="d_inline-block fill_currentcolor va_middle lh_1em flex-sh_0 w_medium h_medium"
data-icon=""
data-license="Apache License 2.0"
data-source="Material Design"
Expand Down Expand Up @@ -961,7 +963,7 @@ exports[`ErrorPage renderers correctly 1`] = `
</a>
<svg
aria-hidden="true"
class="d_inline-block fill_currentcolor v-align_middle leading_1em shrink_0 w_medium h_medium"
class="d_inline-block fill_currentcolor va_middle lh_1em flex-sh_0 w_medium h_medium"
data-icon=""
data-license="Apache License 2.0"
data-source="Material Design"
Expand Down
Loading
Loading