From 02f57a1dcfafbf3594bc5089a82be5a501f3e7c9 Mon Sep 17 00:00:00 2001 From: Katrine Wist Date: Fri, 13 Dec 2024 15:00:12 +0100 Subject: [PATCH 1/6] Add accessible icon --- .../icons/src/icons/AccessibilityFill.tsx | 20 +++++++++++++++++++ packages/icons/src/icons/index.ts | 1 + packages/icons/svg/AccessibilityFill.svg | 4 ++++ 3 files changed, 25 insertions(+) create mode 100644 packages/icons/src/icons/AccessibilityFill.tsx create mode 100644 packages/icons/svg/AccessibilityFill.svg diff --git a/packages/icons/src/icons/AccessibilityFill.tsx b/packages/icons/src/icons/AccessibilityFill.tsx new file mode 100644 index 0000000000..aabd17e8ae --- /dev/null +++ b/packages/icons/src/icons/AccessibilityFill.tsx @@ -0,0 +1,20 @@ +/** + * Copyright (c) 2024-present, NDLA. + * + * This source code is licensed under the GPLv3 license found in the + * LICENSE file in the root directory of this source tree. + * + */ +// N.B! AUTOGENERATED FILE. DO NOT EDIT; +import Icon, { type Props } from "../Icon"; +const AccessibilityFill = (props: Props) => ( + + + + +); +export default AccessibilityFill; diff --git a/packages/icons/src/icons/index.ts b/packages/icons/src/icons/index.ts index 4527253c7a..a0cef44563 100644 --- a/packages/icons/src/icons/index.ts +++ b/packages/icons/src/icons/index.ts @@ -7,6 +7,7 @@ */ // N.B! AUTOGENERATED FILE. DO NOT EDIT +export { default as AccessibilityFill } from "./AccessibilityFill"; export { default as AccountCircleFill } from "./AccountCircleFill"; export { default as AccountCircleLine } from "./AccountCircleLine"; export { default as AddLine } from "./AddLine"; diff --git a/packages/icons/svg/AccessibilityFill.svg b/packages/icons/svg/AccessibilityFill.svg new file mode 100644 index 0000000000..b5f293a965 --- /dev/null +++ b/packages/icons/svg/AccessibilityFill.svg @@ -0,0 +1,4 @@ + + + + From 02a477e61b70b8be6591a261cb1c783a7b51081d Mon Sep 17 00:00:00 2001 From: Katrine Wist Date: Fri, 13 Dec 2024 15:01:06 +0100 Subject: [PATCH 2/6] UU-disclaimer to new design --- .../src/Embed/UuDisclaimerEmbed.stories.tsx | 30 +++------ .../ndla-ui/src/Embed/UuDisclaimerEmbed.tsx | 62 +++++++------------ packages/types-embed/src/index.ts | 8 +-- packages/types-embed/src/uuDisclaimerTypes.ts | 11 +--- 4 files changed, 33 insertions(+), 78 deletions(-) diff --git a/packages/ndla-ui/src/Embed/UuDisclaimerEmbed.stories.tsx b/packages/ndla-ui/src/Embed/UuDisclaimerEmbed.stories.tsx index 9101cb9fa2..bcd46e6445 100644 --- a/packages/ndla-ui/src/Embed/UuDisclaimerEmbed.stories.tsx +++ b/packages/ndla-ui/src/Embed/UuDisclaimerEmbed.stories.tsx @@ -47,23 +47,7 @@ export const Regular: StoryObj = { resource: "uu-disclaimer", status: "success", embedData: embedData, - data: {}, - }, - }, -}; - -export const WithLink: StoryObj = { - args: { - embed: { - resource: "uu-disclaimer", - status: "success", - embedData: embedData, - data: { - disclaimerLink: { - href: "https://ndla.no/article/123", - text: "Navn på artikkel med innhold", - }, - }, + data: null, }, }, }; @@ -74,7 +58,7 @@ export const WithIframe: StoryObj = { resource: "uu-disclaimer", status: "success", embedData: embedData, - data: {}, + data: null, }, children: ( = { resource: "uu-disclaimer", status: "success", embedData: embedData, - data: {}, + data: null, }, children: ( = { resource: "uu-disclaimer", status: "success", embedData: embedData, - data: {}, + data: null, }, children: ( <> @@ -155,7 +139,7 @@ export const WithFramedContent: StoryObj = { resource: "uu-disclaimer", status: "success", embedData: embedData, - data: {}, + data: null, }, children: ( @@ -171,7 +155,7 @@ export const WithFactBox: StoryObj = { resource: "uu-disclaimer", status: "success", embedData: embedData, - data: {}, + data: null, }, children: ( @@ -187,7 +171,7 @@ export const WithCopyParagraphLink: StoryObj = { resource: "uu-disclaimer", status: "success", embedData: embedData, - data: {}, + data: null, }, children: ( diff --git a/packages/ndla-ui/src/Embed/UuDisclaimerEmbed.tsx b/packages/ndla-ui/src/Embed/UuDisclaimerEmbed.tsx index b1b44bfc7d..7929c4dfd0 100644 --- a/packages/ndla-ui/src/Embed/UuDisclaimerEmbed.tsx +++ b/packages/ndla-ui/src/Embed/UuDisclaimerEmbed.tsx @@ -7,9 +7,9 @@ */ import { type ReactNode } from "react"; -import { InformationLine } from "@ndla/icons"; -import { MessageBox } from "@ndla/primitives"; -import { SafeLink } from "@ndla/safelink"; +import { Portal } from "@ark-ui/react"; +import { AccesibilityLine } from "@ndla/icons"; +import { Text, IconButton, PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primitives"; import { styled } from "@ndla/styled-system/jsx"; import type { UuDisclaimerMetaData } from "@ndla/types-embed"; @@ -18,30 +18,17 @@ interface Props { children?: ReactNode; } -const StyledMessageBox = styled(MessageBox, { +const DisclaimerWrapper = styled("div", { base: { display: "flex", - alignItems: "center", - marginBlockEnd: "xsmall", + flexDirection: "column", + gap: "3xsmall", }, }); -const Disclaimer = styled("div", { - base: { - textStyle: "body.medium", - }, -}); -const StyledSafeLink = styled(SafeLink, { + +const StyledIconButton = styled(IconButton, { base: { - paddingInlineStart: "4xsmall", - color: "text.link", - textDecoration: "underline", - whiteSpace: "nowrap", - _hover: { - textDecoration: "none", - }, - _focusWithin: { - textDecoration: "none", - }, + alignSelf: "flex-end", }, }); @@ -50,25 +37,24 @@ const UuDisclaimerEmbed = ({ embed, children }: Props) => { return null; } - const { embedData, data } = embed; - - const disclaimerLink = data?.disclaimerLink ? ( - - {data.disclaimerLink.text} - - ) : null; + const { embedData } = embed; return ( -
- - - - {embedData.disclaimer} - {disclaimerLink} - - + + + + + + + + + + {embedData.disclaimer} + + +
{children}
-
+ ); }; diff --git a/packages/types-embed/src/index.ts b/packages/types-embed/src/index.ts index c552682031..6ec7c7022b 100644 --- a/packages/types-embed/src/index.ts +++ b/packages/types-embed/src/index.ts @@ -47,12 +47,7 @@ import type { KeyFigureEmbedData, KeyFigureMeta, KeyFigureMetaData } from "./key import type { LinkBlockEmbedData, LinkBlockMetaData } from "./linkBlockTypes"; import type { PitchEmbedData, PitchMetaData, PitchMeta } from "./pitchTypes"; import type { RelatedContentData, RelatedContentEmbedData, RelatedContentMetaData } from "./relatedContentTypes"; -import type { - DisclaimerLink, - UuDisclaimerData, - UuDisclaimerEmbedData, - UuDisclaimerMetaData, -} from "./uuDisclaimerTypes"; +import type { UuDisclaimerEmbedData, UuDisclaimerMetaData } from "./uuDisclaimerTypes"; export type EmbedData = | AudioEmbedData @@ -155,7 +150,6 @@ export type { AudioMeta }; export type { H5pData }; export type { CampaignBlockMeta }; export type { OembedProxyData, H5pPreviewResponse, H5pOembedData, H5pLicenseInformation, H5pInfo }; -export type { UuDisclaimerData, DisclaimerLink }; interface MetaDataFailure { resource: T["resource"]; diff --git a/packages/types-embed/src/uuDisclaimerTypes.ts b/packages/types-embed/src/uuDisclaimerTypes.ts index bf1b870ab5..dcb35be720 100644 --- a/packages/types-embed/src/uuDisclaimerTypes.ts +++ b/packages/types-embed/src/uuDisclaimerTypes.ts @@ -8,19 +8,10 @@ import type { MetaData } from "."; -export interface DisclaimerLink { - text: string; - href: string; -} - export interface UuDisclaimerEmbedData { resource: "uu-disclaimer"; disclaimer: string; articleId?: string; } -export interface UuDisclaimerData { - disclaimerLink?: DisclaimerLink; -} - -export type UuDisclaimerMetaData = MetaData; +export type UuDisclaimerMetaData = MetaData; From de6d69281d2541c4c9469dd9f9216ca3bfe7d8a7 Mon Sep 17 00:00:00 2001 From: Katrine Wist Date: Fri, 13 Dec 2024 15:25:59 +0100 Subject: [PATCH 3/6] Fix import --- packages/ndla-ui/src/Embed/UuDisclaimerEmbed.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ndla-ui/src/Embed/UuDisclaimerEmbed.tsx b/packages/ndla-ui/src/Embed/UuDisclaimerEmbed.tsx index 7929c4dfd0..f47a1cb46f 100644 --- a/packages/ndla-ui/src/Embed/UuDisclaimerEmbed.tsx +++ b/packages/ndla-ui/src/Embed/UuDisclaimerEmbed.tsx @@ -8,7 +8,7 @@ import { type ReactNode } from "react"; import { Portal } from "@ark-ui/react"; -import { AccesibilityLine } from "@ndla/icons"; +import { AccessibilityFill } from "@ndla/icons"; import { Text, IconButton, PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primitives"; import { styled } from "@ndla/styled-system/jsx"; import type { UuDisclaimerMetaData } from "@ndla/types-embed"; @@ -44,7 +44,7 @@ const UuDisclaimerEmbed = ({ embed, children }: Props) => { - + From 7e501a6a7f40d29d93ae93fc0288bd36b9936d95 Mon Sep 17 00:00:00 2001 From: Katrine Wist Date: Fri, 13 Dec 2024 15:44:35 +0100 Subject: [PATCH 4/6] Add title/aria-label to uu disclaimer iconbutton. Add PopoverTitle. --- packages/ndla-ui/src/Embed/UuDisclaimerEmbed.tsx | 12 ++++++++++-- packages/ndla-ui/src/locale/messages-en.ts | 1 + packages/ndla-ui/src/locale/messages-nb.ts | 1 + packages/ndla-ui/src/locale/messages-nn.ts | 1 + packages/ndla-ui/src/locale/messages-se.ts | 1 + packages/ndla-ui/src/locale/messages-sma.ts | 1 + 6 files changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/ndla-ui/src/Embed/UuDisclaimerEmbed.tsx b/packages/ndla-ui/src/Embed/UuDisclaimerEmbed.tsx index f47a1cb46f..56d91d5195 100644 --- a/packages/ndla-ui/src/Embed/UuDisclaimerEmbed.tsx +++ b/packages/ndla-ui/src/Embed/UuDisclaimerEmbed.tsx @@ -7,9 +7,10 @@ */ import { type ReactNode } from "react"; +import { useTranslation } from "react-i18next"; import { Portal } from "@ark-ui/react"; import { AccessibilityFill } from "@ndla/icons"; -import { Text, IconButton, PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primitives"; +import { Text, IconButton, PopoverContent, PopoverRoot, PopoverTrigger, PopoverTitle } from "@ndla/primitives"; import { styled } from "@ndla/styled-system/jsx"; import type { UuDisclaimerMetaData } from "@ndla/types-embed"; @@ -33,6 +34,7 @@ const StyledIconButton = styled(IconButton, { }); const UuDisclaimerEmbed = ({ embed, children }: Props) => { + const { t } = useTranslation(); if (embed.status === "error") { return null; } @@ -43,12 +45,18 @@ const UuDisclaimerEmbed = ({ embed, children }: Props) => { - + + {t("uuDisclaimer.title")} {embedData.disclaimer} diff --git a/packages/ndla-ui/src/locale/messages-en.ts b/packages/ndla-ui/src/locale/messages-en.ts index e6760f3a1c..a43e9b14ef 100644 --- a/packages/ndla-ui/src/locale/messages-en.ts +++ b/packages/ndla-ui/src/locale/messages-en.ts @@ -1441,6 +1441,7 @@ const messages = { code: "Code block", }, }, + uuDisclaimer: { title: "Accessibility" }, gloss: { examples: "Examples", showExamples: "Show examples", diff --git a/packages/ndla-ui/src/locale/messages-nb.ts b/packages/ndla-ui/src/locale/messages-nb.ts index 195c4890e2..0afc9c1c44 100644 --- a/packages/ndla-ui/src/locale/messages-nb.ts +++ b/packages/ndla-ui/src/locale/messages-nb.ts @@ -1442,6 +1442,7 @@ const messages = { code: "Kodeblokk", }, }, + uuDisclaimer: { title: "Tilgjengelighet" }, gloss: { examples: "Eksempler", showExamples: "Vis eksempler", diff --git a/packages/ndla-ui/src/locale/messages-nn.ts b/packages/ndla-ui/src/locale/messages-nn.ts index 480ef4b6e4..bbdf49fc85 100644 --- a/packages/ndla-ui/src/locale/messages-nn.ts +++ b/packages/ndla-ui/src/locale/messages-nn.ts @@ -1441,6 +1441,7 @@ const messages = { code: "Kodeblokk", }, }, + uuDisclaimer: { title: "Tilgjengelighet" }, gloss: { examples: "Eksempler", showExamples: "Vis eksempler", diff --git a/packages/ndla-ui/src/locale/messages-se.ts b/packages/ndla-ui/src/locale/messages-se.ts index 3e948631b5..ba71aa8c32 100644 --- a/packages/ndla-ui/src/locale/messages-se.ts +++ b/packages/ndla-ui/src/locale/messages-se.ts @@ -1443,6 +1443,7 @@ const messages = { code: "Kodeblokk", }, }, + uuDisclaimer: { title: "Tilgjengelighet" }, gloss: { examples: "Ovdamearkkat", showExamples: "Vis eksempler", diff --git a/packages/ndla-ui/src/locale/messages-sma.ts b/packages/ndla-ui/src/locale/messages-sma.ts index 28bc6be713..3b377f9248 100644 --- a/packages/ndla-ui/src/locale/messages-sma.ts +++ b/packages/ndla-ui/src/locale/messages-sma.ts @@ -1445,6 +1445,7 @@ const messages = { code: "Kodeblokk", }, }, + uuDisclaimer: { title: "Tilgjengelighet" }, gloss: { examples: "Eksempler", showExamples: "Vis eksempler", From 8c15da52c673544999e0ddee9337a6820ef7d365 Mon Sep 17 00:00:00 2001 From: Katrine Wist Date: Tue, 17 Dec 2024 08:55:51 +0100 Subject: [PATCH 5/6] Remove articleId from UUDisclaimerEmbedData interface --- packages/ndla-ui/src/Embed/UuDisclaimerEmbed.stories.tsx | 1 - packages/types-embed/src/uuDisclaimerTypes.ts | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/ndla-ui/src/Embed/UuDisclaimerEmbed.stories.tsx b/packages/ndla-ui/src/Embed/UuDisclaimerEmbed.stories.tsx index bcd46e6445..8f61e3d034 100644 --- a/packages/ndla-ui/src/Embed/UuDisclaimerEmbed.stories.tsx +++ b/packages/ndla-ui/src/Embed/UuDisclaimerEmbed.stories.tsx @@ -19,7 +19,6 @@ import FactBox from "../FactBox"; const embedData: UuDisclaimerEmbedData = { resource: "uu-disclaimer", disclaimer: "Dette inholdet er ikke tastaturvennlig.", - articleId: "123", }; const meta: Meta = { diff --git a/packages/types-embed/src/uuDisclaimerTypes.ts b/packages/types-embed/src/uuDisclaimerTypes.ts index dcb35be720..404a3ec28a 100644 --- a/packages/types-embed/src/uuDisclaimerTypes.ts +++ b/packages/types-embed/src/uuDisclaimerTypes.ts @@ -11,7 +11,6 @@ import type { MetaData } from "."; export interface UuDisclaimerEmbedData { resource: "uu-disclaimer"; disclaimer: string; - articleId?: string; } export type UuDisclaimerMetaData = MetaData; From d02f251e124bf9ce3458d29bc86c279cd717fa70 Mon Sep 17 00:00:00 2001 From: Katrine Wist Date: Tue, 17 Dec 2024 12:55:35 +0100 Subject: [PATCH 6/6] Parse disclaimer content --- packages/ndla-ui/src/Embed/UuDisclaimerEmbed.stories.tsx | 2 +- packages/ndla-ui/src/Embed/UuDisclaimerEmbed.tsx | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/ndla-ui/src/Embed/UuDisclaimerEmbed.stories.tsx b/packages/ndla-ui/src/Embed/UuDisclaimerEmbed.stories.tsx index 8f61e3d034..7bd040b7af 100644 --- a/packages/ndla-ui/src/Embed/UuDisclaimerEmbed.stories.tsx +++ b/packages/ndla-ui/src/Embed/UuDisclaimerEmbed.stories.tsx @@ -18,7 +18,7 @@ import FactBox from "../FactBox"; const embedData: UuDisclaimerEmbedData = { resource: "uu-disclaimer", - disclaimer: "Dette inholdet er ikke tastaturvennlig.", + disclaimer: "Dette inholdet er ikke tastaturvennlig.", }; const meta: Meta = { diff --git a/packages/ndla-ui/src/Embed/UuDisclaimerEmbed.tsx b/packages/ndla-ui/src/Embed/UuDisclaimerEmbed.tsx index 56d91d5195..9df4f4de3a 100644 --- a/packages/ndla-ui/src/Embed/UuDisclaimerEmbed.tsx +++ b/packages/ndla-ui/src/Embed/UuDisclaimerEmbed.tsx @@ -6,11 +6,12 @@ * */ +import parse from "html-react-parser"; import { type ReactNode } from "react"; import { useTranslation } from "react-i18next"; import { Portal } from "@ark-ui/react"; import { AccessibilityFill } from "@ndla/icons"; -import { Text, IconButton, PopoverContent, PopoverRoot, PopoverTrigger, PopoverTitle } from "@ndla/primitives"; +import { IconButton, PopoverContent, PopoverRoot, PopoverTrigger, PopoverTitle } from "@ndla/primitives"; import { styled } from "@ndla/styled-system/jsx"; import type { UuDisclaimerMetaData } from "@ndla/types-embed"; @@ -57,7 +58,7 @@ const UuDisclaimerEmbed = ({ embed, children }: Props) => { {t("uuDisclaimer.title")} - {embedData.disclaimer} +
{parse(embedData.disclaimer)}