@ndla/ui 56.0.150-alpha.0 → 56.0.151-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/Article/Article.mjs +1 -1
- package/es/Article/Article.mjs.map +1 -1
- package/es/RelatedArticleList/RelatedArticleList.mjs +1 -1
- package/es/RelatedArticleList/RelatedArticleList.mjs.map +1 -1
- package/lib/Article/Article.js +1 -1
- package/lib/Article/Article.js.map +1 -1
- package/lib/RelatedArticleList/RelatedArticleList.js +1 -1
- package/lib/RelatedArticleList/RelatedArticleList.js.map +1 -1
- package/package.json +2 -2
- package/src/Article/Article.tsx +1 -1
- package/src/RelatedArticleList/RelatedArticleList.tsx +1 -1
package/es/Article/Article.mjs
CHANGED
|
@@ -74,7 +74,7 @@ const StyledWrapper = styled("div", { base: {
|
|
|
74
74
|
} });
|
|
75
75
|
const ArticleTitle = ({ badges, heartButton, title, lang, id, introduction, competenceGoals, disclaimer }) => {
|
|
76
76
|
return /* @__PURE__ */ jsxs(ArticleHeader, { children: [
|
|
77
|
-
/* @__PURE__ */ jsxs(ArticleHGroup, { children: [(!!badges || !!heartButton) && /* @__PURE__ */ jsxs(InfoWrapper, { children: [/* @__PURE__ */ jsx(BadgesContainer, { children: badges }), heartButton] }), /* @__PURE__ */ jsx(Heading, {
|
|
77
|
+
/* @__PURE__ */ jsxs(ArticleHGroup, { children: [(!!badges || !!heartButton) && /* @__PURE__ */ jsxs(InfoWrapper, { children: [!!badges && /* @__PURE__ */ jsx(BadgesContainer, { children: badges }), heartButton] }), /* @__PURE__ */ jsx(Heading, {
|
|
78
78
|
textStyle: "heading.medium",
|
|
79
79
|
id,
|
|
80
80
|
lang,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Article.mjs","names":[],"sources":["../../src/Article/Article.tsx"],"sourcesContent":["/**\n * Copyright (c) 2016-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ComponentPropsWithRef, type ReactNode, forwardRef } from \"react\";\nimport { ark, type HTMLArkProps } from \"@ark-ui/react\";\nimport { Heading, Text } from \"@ndla/primitives\";\nimport { cx } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { ArticleByline } from \"./ArticleByline\";\nimport { BadgesContainer } from \"./BadgesContainer\";\nimport type { Article as ArticleType } from \"../types\";\n\nconst StyledArticleContent = styled(ark.section, {}, { baseComponent: true });\n\nexport const ArticleContent = forwardRef<HTMLElement, HTMLArkProps<\"div\"> & StyledProps>(\n ({ className, ...props }, ref) => (\n <StyledArticleContent className={cx(\"ndla-article\", className)} {...props} ref={ref} />\n ),\n);\n\nconst StyledArticleWrapper = styled(\n ark.article,\n {\n base: {\n background: \"background.default\",\n display: \"flex\",\n flexDirection: \"column\",\n color: \"text.default\",\n alignItems: \"center\",\n width: \"100%\",\n overflowWrap: \"break-word\",\n position: \"relative\",\n \"& mjx-stretchy-v > mjx-ext > mjx-c\": {\n transform: \"scaleY(100) translateY(0.075em)\",\n },\n _after: {\n content: \"\",\n display: \"table\",\n clear: \"both\",\n },\n },\n },\n { baseComponent: true },\n);\n\nexport const ArticleWrapper = forwardRef<HTMLElement, ComponentPropsWithRef<\"article\"> & StyledProps>((props, ref) => (\n <StyledArticleWrapper data-ndla-article=\"\" ref={ref} {...props} />\n));\n\nexport const ArticleHGroup = styled(\n ark.hgroup,\n {\n base: {\n display: \"flex\",\n width: \"100%\",\n flexDirection: \"column\",\n alignItems: \"flex-start\",\n \"& h1\": {\n overflowWrap: \"anywhere\",\n },\n },\n },\n { baseComponent: true },\n);\n\nexport const ArticleHeader = styled(\n ark.header,\n {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"medium\",\n alignItems: \"flex-start\",\n width: \"100%\",\n paddingBlockStart: \"xxlarge\",\n overflowWrap: \"anywhere\",\n },\n },\n { baseComponent: true },\n);\n\nexport const ArticleFooter = styled(\n ark.footer,\n {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xxlarge\",\n width: \"100%\",\n \"& > :is(:last-child)\": {\n paddingBlockEnd: \"5xlarge\",\n },\n },\n },\n { baseComponent: true },\n);\n\nconst InfoWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n gap: \"small\",\n width: \"100%\",\n minHeight: \"xxlarge\",\n },\n});\n\nconst StyledWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n gap: \"small\",\n flexWrap: \"wrap\",\n alignItems: \"center\",\n },\n});\n\ninterface ArticleTitleProps {\n badges?: ReactNode;\n heartButton?: ReactNode;\n competenceGoals?: ReactNode;\n id: string;\n lang?: string;\n title?: ReactNode;\n introduction?: ReactNode;\n disclaimer?: ReactNode;\n}\n\nexport const ArticleTitle = ({\n badges,\n heartButton,\n title,\n lang,\n id,\n introduction,\n competenceGoals,\n disclaimer,\n}: ArticleTitleProps) => {\n return (\n <ArticleHeader>\n <ArticleHGroup>\n {(!!badges || !!heartButton) && (\n <InfoWrapper>\n <BadgesContainer>{badges}</BadgesContainer
|
|
1
|
+
{"version":3,"file":"Article.mjs","names":[],"sources":["../../src/Article/Article.tsx"],"sourcesContent":["/**\n * Copyright (c) 2016-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ComponentPropsWithRef, type ReactNode, forwardRef } from \"react\";\nimport { ark, type HTMLArkProps } from \"@ark-ui/react\";\nimport { Heading, Text } from \"@ndla/primitives\";\nimport { cx } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { ArticleByline } from \"./ArticleByline\";\nimport { BadgesContainer } from \"./BadgesContainer\";\nimport type { Article as ArticleType } from \"../types\";\n\nconst StyledArticleContent = styled(ark.section, {}, { baseComponent: true });\n\nexport const ArticleContent = forwardRef<HTMLElement, HTMLArkProps<\"div\"> & StyledProps>(\n ({ className, ...props }, ref) => (\n <StyledArticleContent className={cx(\"ndla-article\", className)} {...props} ref={ref} />\n ),\n);\n\nconst StyledArticleWrapper = styled(\n ark.article,\n {\n base: {\n background: \"background.default\",\n display: \"flex\",\n flexDirection: \"column\",\n color: \"text.default\",\n alignItems: \"center\",\n width: \"100%\",\n overflowWrap: \"break-word\",\n position: \"relative\",\n \"& mjx-stretchy-v > mjx-ext > mjx-c\": {\n transform: \"scaleY(100) translateY(0.075em)\",\n },\n _after: {\n content: \"\",\n display: \"table\",\n clear: \"both\",\n },\n },\n },\n { baseComponent: true },\n);\n\nexport const ArticleWrapper = forwardRef<HTMLElement, ComponentPropsWithRef<\"article\"> & StyledProps>((props, ref) => (\n <StyledArticleWrapper data-ndla-article=\"\" ref={ref} {...props} />\n));\n\nexport const ArticleHGroup = styled(\n ark.hgroup,\n {\n base: {\n display: \"flex\",\n width: \"100%\",\n flexDirection: \"column\",\n alignItems: \"flex-start\",\n \"& h1\": {\n overflowWrap: \"anywhere\",\n },\n },\n },\n { baseComponent: true },\n);\n\nexport const ArticleHeader = styled(\n ark.header,\n {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"medium\",\n alignItems: \"flex-start\",\n width: \"100%\",\n paddingBlockStart: \"xxlarge\",\n overflowWrap: \"anywhere\",\n },\n },\n { baseComponent: true },\n);\n\nexport const ArticleFooter = styled(\n ark.footer,\n {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xxlarge\",\n width: \"100%\",\n \"& > :is(:last-child)\": {\n paddingBlockEnd: \"5xlarge\",\n },\n },\n },\n { baseComponent: true },\n);\n\nconst InfoWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n gap: \"small\",\n width: \"100%\",\n minHeight: \"xxlarge\",\n },\n});\n\nconst StyledWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n gap: \"small\",\n flexWrap: \"wrap\",\n alignItems: \"center\",\n },\n});\n\ninterface ArticleTitleProps {\n badges?: ReactNode;\n heartButton?: ReactNode;\n competenceGoals?: ReactNode;\n id: string;\n lang?: string;\n title?: ReactNode;\n introduction?: ReactNode;\n disclaimer?: ReactNode;\n}\n\nexport const ArticleTitle = ({\n badges,\n heartButton,\n title,\n lang,\n id,\n introduction,\n competenceGoals,\n disclaimer,\n}: ArticleTitleProps) => {\n return (\n <ArticleHeader>\n <ArticleHGroup>\n {(!!badges || !!heartButton) && (\n <InfoWrapper>\n {!!badges && <BadgesContainer>{badges}</BadgesContainer>}\n {heartButton}\n </InfoWrapper>\n )}\n <Heading textStyle=\"heading.medium\" id={id} lang={lang} property=\"dct:title\">\n {title}\n </Heading>\n </ArticleHGroup>\n {!!introduction && (\n <Text lang={lang} textStyle=\"body.xlarge\" asChild consumeCss>\n <div>{introduction}</div>\n </Text>\n )}\n <StyledWrapper>\n {competenceGoals}\n {disclaimer}\n </StyledWrapper>\n </ArticleHeader>\n );\n};\n\ninterface Props {\n badges?: ReactNode;\n heartButton?: ReactNode;\n article: ArticleType;\n licenseBox?: ReactNode;\n children?: ReactNode;\n competenceGoals?: ReactNode;\n id: string;\n lang?: string;\n disclaimer?: ReactNode;\n}\n\nexport const Article = ({\n badges,\n article,\n licenseBox,\n children,\n competenceGoals,\n id,\n heartButton,\n lang,\n disclaimer,\n}: Props) => {\n const { title, introduction, published, content, footNotes, copyright } = article;\n\n const authors =\n copyright?.creators.length || copyright?.rightsholders.length ? copyright.creators : copyright?.processors;\n\n return (\n <ArticleWrapper>\n <ArticleTitle\n id={id}\n badges={badges}\n heartButton={heartButton}\n title={title}\n introduction={introduction}\n competenceGoals={competenceGoals}\n lang={lang}\n disclaimer={disclaimer}\n />\n <ArticleContent>{content}</ArticleContent>\n <ArticleFooter>\n <ArticleByline\n lang={lang}\n footnotes={footNotes}\n authors={authors}\n suppliers={copyright?.rightsholders}\n published={published}\n licenseBox={licenseBox}\n />\n {children}\n </ArticleFooter>\n </ArticleWrapper>\n );\n};\n"],"mappings":";;;;;;;;;;AAkBA,MAAM,uBAAuB,OAAO,IAAI,SAAS,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAE7E,MAAa,iBAAiB,YAC3B,EAAE,UAAW,GAAG,SAAS,QACxB,oBAAC;CAAqB,WAAW,GAAG,gBAAgB,UAAU;CAAE,GAAI;CAAY;EAAO,CAE1F;AAED,MAAM,uBAAuB,OAC3B,IAAI,SACJ,EACE,MAAM;CACJ,YAAY;CACZ,SAAS;CACT,eAAe;CACf,OAAO;CACP,YAAY;CACZ,OAAO;CACP,cAAc;CACd,UAAU;CACV,sCAAsC,EACpC,WAAW,mCACZ;CACD,QAAQ;EACN,SAAS;EACT,SAAS;EACT,OAAO;EACR;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,iBAAiB,YAAyE,OAAO,QAC5G,oBAAC;CAAqB,qBAAkB;CAAQ;CAAK,GAAI;EAAS,CAClE;AAEF,MAAa,gBAAgB,OAC3B,IAAI,QACJ,EACE,MAAM;CACJ,SAAS;CACT,OAAO;CACP,eAAe;CACf,YAAY;CACZ,QAAQ,EACN,cAAc,YACf;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,gBAAgB,OAC3B,IAAI,QACJ,EACE,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,YAAY;CACZ,OAAO;CACP,mBAAmB;CACnB,cAAc;CACf,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,gBAAgB,OAC3B,IAAI,QACJ,EACE,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,OAAO;CACP,wBAAwB,EACtB,iBAAiB,WAClB;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,KAAK;CACL,OAAO;CACP,WAAW;CACZ,EACF,CAAC;AAEF,MAAM,gBAAgB,OAAO,OAAO,EAClC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,UAAU;CACV,YAAY;CACb,EACF,CAAC;AAaF,MAAa,gBAAgB,EAC3B,QACA,aACA,OACA,MACA,IACA,cACA,iBACA,iBACuB;AACvB,QACE,qBAAC;EACC,qBAAC,6BACG,CAAC,CAAC,UAAU,CAAC,CAAC,gBACd,qBAAC,0BACE,CAAC,CAAC,UAAU,oBAAC,6BAAiB,SAAyB,EACvD,eACW,EAEhB,oBAAC;GAAQ,WAAU;GAAqB;GAAU;GAAM,UAAS;aAC9D;IACO,IACI;EACf,CAAC,CAAC,gBACD,oBAAC;GAAW;GAAM,WAAU;GAAc;GAAQ;aAChD,oBAAC,mBAAK,eAAmB;IACpB;EAET,qBAAC,4BACE,iBACA,cACa;KACF;;AAgBpB,MAAa,WAAW,EACtB,QACA,SACA,YACA,UACA,iBACA,IACA,aACA,MACA,iBACW;CACX,MAAM,EAAE,OAAO,cAAc,WAAW,SAAS,WAAW,cAAc;CAE1E,MAAM,UACJ,WAAW,SAAS,UAAU,WAAW,cAAc,SAAS,UAAU,WAAW,WAAW;AAElG,QACE,qBAAC;EACC,oBAAC;GACK;GACI;GACK;GACN;GACO;GACG;GACX;GACM;IACZ;EACF,oBAAC,4BAAgB,UAAyB;EAC1C,qBAAC,4BACC,oBAAC;GACO;GACN,WAAW;GACF;GACT,WAAW,WAAW;GACX;GACC;IACZ,EACD,YACa;KACD"}
|
|
@@ -17,7 +17,7 @@ const RelatedArticle = ({ title, introduction, to, badges, linkInfo = "", target
|
|
|
17
17
|
return /* @__PURE__ */ jsx(CardRoot, {
|
|
18
18
|
"data-embed-type": "related-article",
|
|
19
19
|
children: /* @__PURE__ */ jsxs(CardContent, { children: [
|
|
20
|
-
/* @__PURE__ */ jsx(BadgesContainer, { children: badges }),
|
|
20
|
+
!!badges && /* @__PURE__ */ jsx(BadgesContainer, { children: badges }),
|
|
21
21
|
/* @__PURE__ */ jsx(CardHeading, {
|
|
22
22
|
asChild: true,
|
|
23
23
|
consumeCss: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RelatedArticleList.mjs","names":[],"sources":["../../src/RelatedArticleList/RelatedArticleList.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Children, type ComponentPropsWithoutRef, type ReactElement, type ReactNode, useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ExternalLinkLine } from \"@ndla/icons\";\nimport { CardContent, CardHeading, CardRoot, Text, Heading, Button } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { linkOverlay } from \"@ndla/styled-system/patterns\";\nimport { BadgesContainer } from \"../Article/BadgesContainer\";\nimport type { HeadingLevel } from \"../types\";\n\ninterface RelatedArticleProps {\n title: string;\n introduction: string;\n to: string;\n linkInfo?: string;\n target?: string;\n badges?: ReactNode;\n}\n\nconst StyledSpan = styled(\"span\", {\n base: {\n display: \"flex\",\n gap: \"3xsmall\",\n },\n});\n\nexport const RelatedArticle = ({\n title,\n introduction,\n to,\n badges,\n linkInfo = \"\",\n target = \"\",\n}: RelatedArticleProps) => {\n return (\n <CardRoot data-embed-type=\"related-article\">\n <CardContent>\n <BadgesContainer>{badges}</BadgesContainer
|
|
1
|
+
{"version":3,"file":"RelatedArticleList.mjs","names":[],"sources":["../../src/RelatedArticleList/RelatedArticleList.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Children, type ComponentPropsWithoutRef, type ReactElement, type ReactNode, useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ExternalLinkLine } from \"@ndla/icons\";\nimport { CardContent, CardHeading, CardRoot, Text, Heading, Button } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { linkOverlay } from \"@ndla/styled-system/patterns\";\nimport { BadgesContainer } from \"../Article/BadgesContainer\";\nimport type { HeadingLevel } from \"../types\";\n\ninterface RelatedArticleProps {\n title: string;\n introduction: string;\n to: string;\n linkInfo?: string;\n target?: string;\n badges?: ReactNode;\n}\n\nconst StyledSpan = styled(\"span\", {\n base: {\n display: \"flex\",\n gap: \"3xsmall\",\n },\n});\n\nexport const RelatedArticle = ({\n title,\n introduction,\n to,\n badges,\n linkInfo = \"\",\n target = \"\",\n}: RelatedArticleProps) => {\n return (\n <CardRoot data-embed-type=\"related-article\">\n <CardContent>\n {!!badges && <BadgesContainer>{badges}</BadgesContainer>}\n <CardHeading asChild consumeCss>\n <span>\n <SafeLink\n unstyled\n to={to}\n target={target}\n rel={linkInfo ? \"noopener noreferrer\" : undefined}\n css={linkOverlay.raw()}\n >\n <StyledSpan>\n {title}\n {target === \"_blank\" && <ExternalLinkLine />}\n </StyledSpan>\n </SafeLink>\n </span>\n </CardHeading>\n <Text dangerouslySetInnerHTML={{ __html: introduction }} />\n <Text color=\"text.subtle\" textStyle=\"label.small\">\n {linkInfo}\n </Text>\n </CardContent>\n </CardRoot>\n );\n};\n\nconst HeadingWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n width: \"100%\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n alignSelf: \"flex-start\",\n },\n});\n\nconst ArticlesWrapper = styled(\"div\", {\n base: {\n display: \"grid\",\n width: \"100%\",\n gridTemplateColumns: \"repeat(2, 1fr)\",\n gap: \"medium\",\n tabletDown: {\n gridTemplateColumns: \"1fr\",\n },\n },\n});\n\nconst StyledSection = styled(\"section\", {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n gap: \"medium\",\n clear: \"both\",\n },\n});\n\nconst StyledButton = styled(Button, {\n base: {\n marginBlockStart: \"xsmall\",\n },\n});\n\ninterface Props extends ComponentPropsWithoutRef<\"section\"> {\n children?: ReactElement[];\n articleCount?: number;\n headingLevel?: HeadingLevel;\n headingButtons?: ReactNode;\n}\n\nexport const RelatedArticleList = ({\n children = [],\n articleCount,\n headingLevel: HeadingElement = \"h2\",\n headingButtons,\n ...rest\n}: Props) => {\n const [expanded, setExpanded] = useState(false);\n const { t } = useTranslation();\n const childCount = useMemo(() => articleCount ?? Children.count(children), [children, articleCount]);\n const childrenToShow = useMemo(\n () => (childCount > 2 && !expanded ? children?.slice(0, 2) : children),\n [childCount, children, expanded],\n );\n\n return (\n <StyledSection {...rest} data-embed-type=\"related-content-list\">\n <HeadingWrapper>\n <Heading asChild consumeCss textStyle=\"title.large\" fontWeight=\"bold\">\n <HeadingElement>{t(\"related.title\")}</HeadingElement>\n </Heading>\n {headingButtons}\n </HeadingWrapper>\n <ArticlesWrapper>{childrenToShow}</ArticlesWrapper>\n {childCount > 2 ? (\n <StyledButton variant=\"secondary\" onClick={() => setExpanded((p) => !p)}>\n {t(`related.show${expanded ? \"Less\" : \"More\"}`)}\n </StyledButton>\n ) : null}\n </StyledSection>\n );\n};\n"],"mappings":";;;;;;;;;;;AA2BA,MAAM,aAAa,OAAO,QAAQ,EAChC,MAAM;CACJ,SAAS;CACT,KAAK;CACN,EACF,CAAC;AAEF,MAAa,kBAAkB,EAC7B,OACA,cACA,IACA,QACA,WAAW,IACX,SAAS,SACgB;AACzB,QACE,oBAAC;EAAS,mBAAgB;YACxB,qBAAC;GACE,CAAC,CAAC,UAAU,oBAAC,6BAAiB,SAAyB;GACxD,oBAAC;IAAY;IAAQ;cACnB,oBAAC,oBACC,oBAAC;KACC;KACI;KACI;KACR,KAAK,WAAW,wBAAwB;KACxC,KAAK,YAAY,KAAK;eAEtB,qBAAC,yBACE,OACA,WAAW,YAAY,oBAAC,qBAAmB,IACjC;MACJ,GACN;KACK;GACd,oBAAC,QAAK,yBAAyB,EAAE,QAAQ,cAAc,GAAI;GAC3D,oBAAC;IAAK,OAAM;IAAc,WAAU;cACjC;KACI;MACK;GACL;;AAIf,MAAM,iBAAiB,OAAO,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,OAAO;CACP,gBAAgB;CAChB,YAAY;CACZ,WAAW;CACZ,EACF,CAAC;AAEF,MAAM,kBAAkB,OAAO,OAAO,EACpC,MAAM;CACJ,SAAS;CACT,OAAO;CACP,qBAAqB;CACrB,KAAK;CACL,YAAY,EACV,qBAAqB,OACtB;CACF,EACF,CAAC;AAEF,MAAM,gBAAgB,OAAO,WAAW,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,YAAY;CACZ,KAAK;CACL,OAAO;CACR,EACF,CAAC;AAEF,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM,EACJ,kBAAkB,UACnB,EACF,CAAC;AASF,MAAa,sBAAsB,EACjC,WAAW,EAAE,EACb,cACA,cAAc,iBAAiB,MAC/B,eACA,GAAG,WACQ;CACX,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAC/C,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,aAAa,cAAc,gBAAgB,SAAS,MAAM,SAAS,EAAE,CAAC,UAAU,aAAa,CAAC;CACpG,MAAM,iBAAiB,cACd,aAAa,KAAK,CAAC,WAAW,UAAU,MAAM,GAAG,EAAE,GAAG,UAC7D;EAAC;EAAY;EAAU;EAAS,CACjC;AAED,QACE,qBAAC;EAAc,GAAI;EAAM,mBAAgB;;GACvC,qBAAC,6BACC,oBAAC;IAAQ;IAAQ;IAAW,WAAU;IAAc,YAAW;cAC7D,oBAAC,4BAAgB,EAAE,gBAAgB,GAAkB;KAC7C,EACT,kBACc;GACjB,oBAAC,6BAAiB,iBAAiC;GAClD,aAAa,IACZ,oBAAC;IAAa,SAAQ;IAAY,eAAe,aAAa,MAAM,CAAC,EAAE;cACpE,EAAE,eAAe,WAAW,SAAS,SAAS;KAClC,GACb;;GACU"}
|
package/lib/Article/Article.js
CHANGED
|
@@ -81,7 +81,7 @@ const StyledWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
|
|
|
81
81
|
} });
|
|
82
82
|
const ArticleTitle = ({ badges, heartButton, title, lang, id, introduction, competenceGoals, disclaimer }) => {
|
|
83
83
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ArticleHeader, { children: [
|
|
84
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ArticleHGroup, { children: [(!!badges || !!heartButton) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(InfoWrapper, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BadgesContainer.BadgesContainer, { children: badges }), heartButton] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Heading, {
|
|
84
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ArticleHGroup, { children: [(!!badges || !!heartButton) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(InfoWrapper, { children: [!!badges && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BadgesContainer.BadgesContainer, { children: badges }), heartButton] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Heading, {
|
|
85
85
|
textStyle: "heading.medium",
|
|
86
86
|
id,
|
|
87
87
|
lang,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Article.js","names":["ark","BadgesContainer","Heading","Text","ArticleByline"],"sources":["../../src/Article/Article.tsx"],"sourcesContent":["/**\n * Copyright (c) 2016-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ComponentPropsWithRef, type ReactNode, forwardRef } from \"react\";\nimport { ark, type HTMLArkProps } from \"@ark-ui/react\";\nimport { Heading, Text } from \"@ndla/primitives\";\nimport { cx } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { ArticleByline } from \"./ArticleByline\";\nimport { BadgesContainer } from \"./BadgesContainer\";\nimport type { Article as ArticleType } from \"../types\";\n\nconst StyledArticleContent = styled(ark.section, {}, { baseComponent: true });\n\nexport const ArticleContent = forwardRef<HTMLElement, HTMLArkProps<\"div\"> & StyledProps>(\n ({ className, ...props }, ref) => (\n <StyledArticleContent className={cx(\"ndla-article\", className)} {...props} ref={ref} />\n ),\n);\n\nconst StyledArticleWrapper = styled(\n ark.article,\n {\n base: {\n background: \"background.default\",\n display: \"flex\",\n flexDirection: \"column\",\n color: \"text.default\",\n alignItems: \"center\",\n width: \"100%\",\n overflowWrap: \"break-word\",\n position: \"relative\",\n \"& mjx-stretchy-v > mjx-ext > mjx-c\": {\n transform: \"scaleY(100) translateY(0.075em)\",\n },\n _after: {\n content: \"\",\n display: \"table\",\n clear: \"both\",\n },\n },\n },\n { baseComponent: true },\n);\n\nexport const ArticleWrapper = forwardRef<HTMLElement, ComponentPropsWithRef<\"article\"> & StyledProps>((props, ref) => (\n <StyledArticleWrapper data-ndla-article=\"\" ref={ref} {...props} />\n));\n\nexport const ArticleHGroup = styled(\n ark.hgroup,\n {\n base: {\n display: \"flex\",\n width: \"100%\",\n flexDirection: \"column\",\n alignItems: \"flex-start\",\n \"& h1\": {\n overflowWrap: \"anywhere\",\n },\n },\n },\n { baseComponent: true },\n);\n\nexport const ArticleHeader = styled(\n ark.header,\n {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"medium\",\n alignItems: \"flex-start\",\n width: \"100%\",\n paddingBlockStart: \"xxlarge\",\n overflowWrap: \"anywhere\",\n },\n },\n { baseComponent: true },\n);\n\nexport const ArticleFooter = styled(\n ark.footer,\n {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xxlarge\",\n width: \"100%\",\n \"& > :is(:last-child)\": {\n paddingBlockEnd: \"5xlarge\",\n },\n },\n },\n { baseComponent: true },\n);\n\nconst InfoWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n gap: \"small\",\n width: \"100%\",\n minHeight: \"xxlarge\",\n },\n});\n\nconst StyledWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n gap: \"small\",\n flexWrap: \"wrap\",\n alignItems: \"center\",\n },\n});\n\ninterface ArticleTitleProps {\n badges?: ReactNode;\n heartButton?: ReactNode;\n competenceGoals?: ReactNode;\n id: string;\n lang?: string;\n title?: ReactNode;\n introduction?: ReactNode;\n disclaimer?: ReactNode;\n}\n\nexport const ArticleTitle = ({\n badges,\n heartButton,\n title,\n lang,\n id,\n introduction,\n competenceGoals,\n disclaimer,\n}: ArticleTitleProps) => {\n return (\n <ArticleHeader>\n <ArticleHGroup>\n {(!!badges || !!heartButton) && (\n <InfoWrapper>\n <BadgesContainer>{badges}</BadgesContainer
|
|
1
|
+
{"version":3,"file":"Article.js","names":["ark","BadgesContainer","Heading","Text","ArticleByline"],"sources":["../../src/Article/Article.tsx"],"sourcesContent":["/**\n * Copyright (c) 2016-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ComponentPropsWithRef, type ReactNode, forwardRef } from \"react\";\nimport { ark, type HTMLArkProps } from \"@ark-ui/react\";\nimport { Heading, Text } from \"@ndla/primitives\";\nimport { cx } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { ArticleByline } from \"./ArticleByline\";\nimport { BadgesContainer } from \"./BadgesContainer\";\nimport type { Article as ArticleType } from \"../types\";\n\nconst StyledArticleContent = styled(ark.section, {}, { baseComponent: true });\n\nexport const ArticleContent = forwardRef<HTMLElement, HTMLArkProps<\"div\"> & StyledProps>(\n ({ className, ...props }, ref) => (\n <StyledArticleContent className={cx(\"ndla-article\", className)} {...props} ref={ref} />\n ),\n);\n\nconst StyledArticleWrapper = styled(\n ark.article,\n {\n base: {\n background: \"background.default\",\n display: \"flex\",\n flexDirection: \"column\",\n color: \"text.default\",\n alignItems: \"center\",\n width: \"100%\",\n overflowWrap: \"break-word\",\n position: \"relative\",\n \"& mjx-stretchy-v > mjx-ext > mjx-c\": {\n transform: \"scaleY(100) translateY(0.075em)\",\n },\n _after: {\n content: \"\",\n display: \"table\",\n clear: \"both\",\n },\n },\n },\n { baseComponent: true },\n);\n\nexport const ArticleWrapper = forwardRef<HTMLElement, ComponentPropsWithRef<\"article\"> & StyledProps>((props, ref) => (\n <StyledArticleWrapper data-ndla-article=\"\" ref={ref} {...props} />\n));\n\nexport const ArticleHGroup = styled(\n ark.hgroup,\n {\n base: {\n display: \"flex\",\n width: \"100%\",\n flexDirection: \"column\",\n alignItems: \"flex-start\",\n \"& h1\": {\n overflowWrap: \"anywhere\",\n },\n },\n },\n { baseComponent: true },\n);\n\nexport const ArticleHeader = styled(\n ark.header,\n {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"medium\",\n alignItems: \"flex-start\",\n width: \"100%\",\n paddingBlockStart: \"xxlarge\",\n overflowWrap: \"anywhere\",\n },\n },\n { baseComponent: true },\n);\n\nexport const ArticleFooter = styled(\n ark.footer,\n {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xxlarge\",\n width: \"100%\",\n \"& > :is(:last-child)\": {\n paddingBlockEnd: \"5xlarge\",\n },\n },\n },\n { baseComponent: true },\n);\n\nconst InfoWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n gap: \"small\",\n width: \"100%\",\n minHeight: \"xxlarge\",\n },\n});\n\nconst StyledWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n gap: \"small\",\n flexWrap: \"wrap\",\n alignItems: \"center\",\n },\n});\n\ninterface ArticleTitleProps {\n badges?: ReactNode;\n heartButton?: ReactNode;\n competenceGoals?: ReactNode;\n id: string;\n lang?: string;\n title?: ReactNode;\n introduction?: ReactNode;\n disclaimer?: ReactNode;\n}\n\nexport const ArticleTitle = ({\n badges,\n heartButton,\n title,\n lang,\n id,\n introduction,\n competenceGoals,\n disclaimer,\n}: ArticleTitleProps) => {\n return (\n <ArticleHeader>\n <ArticleHGroup>\n {(!!badges || !!heartButton) && (\n <InfoWrapper>\n {!!badges && <BadgesContainer>{badges}</BadgesContainer>}\n {heartButton}\n </InfoWrapper>\n )}\n <Heading textStyle=\"heading.medium\" id={id} lang={lang} property=\"dct:title\">\n {title}\n </Heading>\n </ArticleHGroup>\n {!!introduction && (\n <Text lang={lang} textStyle=\"body.xlarge\" asChild consumeCss>\n <div>{introduction}</div>\n </Text>\n )}\n <StyledWrapper>\n {competenceGoals}\n {disclaimer}\n </StyledWrapper>\n </ArticleHeader>\n );\n};\n\ninterface Props {\n badges?: ReactNode;\n heartButton?: ReactNode;\n article: ArticleType;\n licenseBox?: ReactNode;\n children?: ReactNode;\n competenceGoals?: ReactNode;\n id: string;\n lang?: string;\n disclaimer?: ReactNode;\n}\n\nexport const Article = ({\n badges,\n article,\n licenseBox,\n children,\n competenceGoals,\n id,\n heartButton,\n lang,\n disclaimer,\n}: Props) => {\n const { title, introduction, published, content, footNotes, copyright } = article;\n\n const authors =\n copyright?.creators.length || copyright?.rightsholders.length ? copyright.creators : copyright?.processors;\n\n return (\n <ArticleWrapper>\n <ArticleTitle\n id={id}\n badges={badges}\n heartButton={heartButton}\n title={title}\n introduction={introduction}\n competenceGoals={competenceGoals}\n lang={lang}\n disclaimer={disclaimer}\n />\n <ArticleContent>{content}</ArticleContent>\n <ArticleFooter>\n <ArticleByline\n lang={lang}\n footnotes={footNotes}\n authors={authors}\n suppliers={copyright?.rightsholders}\n published={published}\n licenseBox={licenseBox}\n />\n {children}\n </ArticleFooter>\n </ArticleWrapper>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,MAAM,4DAA8BA,mBAAI,SAAS,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAE7E,MAAa,wCACV,EAAE,UAAW,GAAG,SAAS,QACxB,2CAAC;CAAqB,4CAAc,gBAAgB,UAAU;CAAE,GAAI;CAAY;EAAO,CAE1F;AAED,MAAM,4DACJA,mBAAI,SACJ,EACE,MAAM;CACJ,YAAY;CACZ,SAAS;CACT,eAAe;CACf,OAAO;CACP,YAAY;CACZ,OAAO;CACP,cAAc;CACd,UAAU;CACV,sCAAsC,EACpC,WAAW,mCACZ;CACD,QAAQ;EACN,SAAS;EACT,SAAS;EACT,OAAO;EACR;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,wCAA0F,OAAO,QAC5G,2CAAC;CAAqB,qBAAkB;CAAQ;CAAK,GAAI;EAAS,CAClE;AAEF,MAAa,qDACXA,mBAAI,QACJ,EACE,MAAM;CACJ,SAAS;CACT,OAAO;CACP,eAAe;CACf,YAAY;CACZ,QAAQ,EACN,cAAc,YACf;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,qDACXA,mBAAI,QACJ,EACE,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,YAAY;CACZ,OAAO;CACP,mBAAmB;CACnB,cAAc;CACf,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,qDACXA,mBAAI,QACJ,EACE,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,OAAO;CACP,wBAAwB,EACtB,iBAAiB,WAClB;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAM,mDAAqB,OAAO,EAChC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,KAAK;CACL,OAAO;CACP,WAAW;CACZ,EACF,CAAC;AAEF,MAAM,qDAAuB,OAAO,EAClC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,UAAU;CACV,YAAY;CACb,EACF,CAAC;AAaF,MAAa,gBAAgB,EAC3B,QACA,aACA,OACA,MACA,IACA,cACA,iBACA,iBACuB;AACvB,QACE,4CAAC;EACC,4CAAC,6BACG,CAAC,CAAC,UAAU,CAAC,CAAC,gBACd,4CAAC,0BACE,CAAC,CAAC,UAAU,2CAACC,qDAAiB,SAAyB,EACvD,eACW,EAEhB,2CAACC;GAAQ,WAAU;GAAqB;GAAU;GAAM,UAAS;aAC9D;IACO,IACI;EACf,CAAC,CAAC,gBACD,2CAACC;GAAW;GAAM,WAAU;GAAc;GAAQ;aAChD,2CAAC,mBAAK,eAAmB;IACpB;EAET,4CAAC,4BACE,iBACA,cACa;KACF;;AAgBpB,MAAa,WAAW,EACtB,QACA,SACA,YACA,UACA,iBACA,IACA,aACA,MACA,iBACW;CACX,MAAM,EAAE,OAAO,cAAc,WAAW,SAAS,WAAW,cAAc;CAE1E,MAAM,UACJ,WAAW,SAAS,UAAU,WAAW,cAAc,SAAS,UAAU,WAAW,WAAW;AAElG,QACE,4CAAC;EACC,2CAAC;GACK;GACI;GACK;GACN;GACO;GACG;GACX;GACM;IACZ;EACF,2CAAC,4BAAgB,UAAyB;EAC1C,4CAAC,4BACC,2CAACC;GACO;GACN,WAAW;GACF;GACT,WAAW,WAAW;GACX;GACC;IACZ,EACD,YACa;KACD"}
|
|
@@ -26,7 +26,7 @@ const RelatedArticle = ({ title, introduction, to, badges, linkInfo = "", target
|
|
|
26
26
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.CardRoot, {
|
|
27
27
|
"data-embed-type": "related-article",
|
|
28
28
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.CardContent, { children: [
|
|
29
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BadgesContainer.BadgesContainer, { children: badges }),
|
|
29
|
+
!!badges && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BadgesContainer.BadgesContainer, { children: badges }),
|
|
30
30
|
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.CardHeading, {
|
|
31
31
|
asChild: true,
|
|
32
32
|
consumeCss: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RelatedArticleList.js","names":["CardRoot","CardContent","BadgesContainer","CardHeading","SafeLink","linkOverlay","ExternalLinkLine","Text","Button","Children","Heading"],"sources":["../../src/RelatedArticleList/RelatedArticleList.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Children, type ComponentPropsWithoutRef, type ReactElement, type ReactNode, useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ExternalLinkLine } from \"@ndla/icons\";\nimport { CardContent, CardHeading, CardRoot, Text, Heading, Button } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { linkOverlay } from \"@ndla/styled-system/patterns\";\nimport { BadgesContainer } from \"../Article/BadgesContainer\";\nimport type { HeadingLevel } from \"../types\";\n\ninterface RelatedArticleProps {\n title: string;\n introduction: string;\n to: string;\n linkInfo?: string;\n target?: string;\n badges?: ReactNode;\n}\n\nconst StyledSpan = styled(\"span\", {\n base: {\n display: \"flex\",\n gap: \"3xsmall\",\n },\n});\n\nexport const RelatedArticle = ({\n title,\n introduction,\n to,\n badges,\n linkInfo = \"\",\n target = \"\",\n}: RelatedArticleProps) => {\n return (\n <CardRoot data-embed-type=\"related-article\">\n <CardContent>\n <BadgesContainer>{badges}</BadgesContainer
|
|
1
|
+
{"version":3,"file":"RelatedArticleList.js","names":["CardRoot","CardContent","BadgesContainer","CardHeading","SafeLink","linkOverlay","ExternalLinkLine","Text","Button","Children","Heading"],"sources":["../../src/RelatedArticleList/RelatedArticleList.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Children, type ComponentPropsWithoutRef, type ReactElement, type ReactNode, useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ExternalLinkLine } from \"@ndla/icons\";\nimport { CardContent, CardHeading, CardRoot, Text, Heading, Button } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { linkOverlay } from \"@ndla/styled-system/patterns\";\nimport { BadgesContainer } from \"../Article/BadgesContainer\";\nimport type { HeadingLevel } from \"../types\";\n\ninterface RelatedArticleProps {\n title: string;\n introduction: string;\n to: string;\n linkInfo?: string;\n target?: string;\n badges?: ReactNode;\n}\n\nconst StyledSpan = styled(\"span\", {\n base: {\n display: \"flex\",\n gap: \"3xsmall\",\n },\n});\n\nexport const RelatedArticle = ({\n title,\n introduction,\n to,\n badges,\n linkInfo = \"\",\n target = \"\",\n}: RelatedArticleProps) => {\n return (\n <CardRoot data-embed-type=\"related-article\">\n <CardContent>\n {!!badges && <BadgesContainer>{badges}</BadgesContainer>}\n <CardHeading asChild consumeCss>\n <span>\n <SafeLink\n unstyled\n to={to}\n target={target}\n rel={linkInfo ? \"noopener noreferrer\" : undefined}\n css={linkOverlay.raw()}\n >\n <StyledSpan>\n {title}\n {target === \"_blank\" && <ExternalLinkLine />}\n </StyledSpan>\n </SafeLink>\n </span>\n </CardHeading>\n <Text dangerouslySetInnerHTML={{ __html: introduction }} />\n <Text color=\"text.subtle\" textStyle=\"label.small\">\n {linkInfo}\n </Text>\n </CardContent>\n </CardRoot>\n );\n};\n\nconst HeadingWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n width: \"100%\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n alignSelf: \"flex-start\",\n },\n});\n\nconst ArticlesWrapper = styled(\"div\", {\n base: {\n display: \"grid\",\n width: \"100%\",\n gridTemplateColumns: \"repeat(2, 1fr)\",\n gap: \"medium\",\n tabletDown: {\n gridTemplateColumns: \"1fr\",\n },\n },\n});\n\nconst StyledSection = styled(\"section\", {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n gap: \"medium\",\n clear: \"both\",\n },\n});\n\nconst StyledButton = styled(Button, {\n base: {\n marginBlockStart: \"xsmall\",\n },\n});\n\ninterface Props extends ComponentPropsWithoutRef<\"section\"> {\n children?: ReactElement[];\n articleCount?: number;\n headingLevel?: HeadingLevel;\n headingButtons?: ReactNode;\n}\n\nexport const RelatedArticleList = ({\n children = [],\n articleCount,\n headingLevel: HeadingElement = \"h2\",\n headingButtons,\n ...rest\n}: Props) => {\n const [expanded, setExpanded] = useState(false);\n const { t } = useTranslation();\n const childCount = useMemo(() => articleCount ?? Children.count(children), [children, articleCount]);\n const childrenToShow = useMemo(\n () => (childCount > 2 && !expanded ? children?.slice(0, 2) : children),\n [childCount, children, expanded],\n );\n\n return (\n <StyledSection {...rest} data-embed-type=\"related-content-list\">\n <HeadingWrapper>\n <Heading asChild consumeCss textStyle=\"title.large\" fontWeight=\"bold\">\n <HeadingElement>{t(\"related.title\")}</HeadingElement>\n </Heading>\n {headingButtons}\n </HeadingWrapper>\n <ArticlesWrapper>{childrenToShow}</ArticlesWrapper>\n {childCount > 2 ? (\n <StyledButton variant=\"secondary\" onClick={() => setExpanded((p) => !p)}>\n {t(`related.show${expanded ? \"Less\" : \"More\"}`)}\n </StyledButton>\n ) : null}\n </StyledSection>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA2BA,MAAM,kDAAoB,QAAQ,EAChC,MAAM;CACJ,SAAS;CACT,KAAK;CACN,EACF,CAAC;AAEF,MAAa,kBAAkB,EAC7B,OACA,cACA,IACA,QACA,WAAW,IACX,SAAS,SACgB;AACzB,QACE,2CAACA;EAAS,mBAAgB;YACxB,4CAACC;GACE,CAAC,CAAC,UAAU,2CAACC,qDAAiB,SAAyB;GACxD,2CAACC;IAAY;IAAQ;cACnB,2CAAC,oBACC,2CAACC;KACC;KACI;KACI;KACR,KAAK,WAAW,wBAAwB;KACxC,KAAKC,0CAAY,KAAK;eAEtB,4CAAC,yBACE,OACA,WAAW,YAAY,2CAACC,kCAAmB,IACjC;MACJ,GACN;KACK;GACd,2CAACC,0BAAK,yBAAyB,EAAE,QAAQ,cAAc,GAAI;GAC3D,2CAACA;IAAK,OAAM;IAAc,WAAU;cACjC;KACI;MACK;GACL;;AAIf,MAAM,sDAAwB,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,OAAO;CACP,gBAAgB;CAChB,YAAY;CACZ,WAAW;CACZ,EACF,CAAC;AAEF,MAAM,uDAAyB,OAAO,EACpC,MAAM;CACJ,SAAS;CACT,OAAO;CACP,qBAAqB;CACrB,KAAK;CACL,YAAY,EACV,qBAAqB,OACtB;CACF,EACF,CAAC;AAEF,MAAM,qDAAuB,WAAW,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,YAAY;CACZ,KAAK;CACL,OAAO;CACR,EACF,CAAC;AAEF,MAAM,oDAAsBC,0BAAQ,EAClC,MAAM,EACJ,kBAAkB,UACnB,EACF,CAAC;AASF,MAAa,sBAAsB,EACjC,WAAW,EAAE,EACb,cACA,cAAc,iBAAiB,MAC/B,eACA,GAAG,WACQ;CACX,MAAM,CAAC,UAAU,mCAAwB,MAAM;CAC/C,MAAM,EAAE,yCAAsB;CAC9B,MAAM,sCAA2B,gBAAgBC,eAAS,MAAM,SAAS,EAAE,CAAC,UAAU,aAAa,CAAC;CACpG,MAAM,0CACG,aAAa,KAAK,CAAC,WAAW,UAAU,MAAM,GAAG,EAAE,GAAG,UAC7D;EAAC;EAAY;EAAU;EAAS,CACjC;AAED,QACE,4CAAC;EAAc,GAAI;EAAM,mBAAgB;;GACvC,4CAAC,6BACC,2CAACC;IAAQ;IAAQ;IAAW,WAAU;IAAc,YAAW;cAC7D,2CAAC,4BAAgB,EAAE,gBAAgB,GAAkB;KAC7C,EACT,kBACc;GACjB,2CAAC,6BAAiB,iBAAiC;GAClD,aAAa,IACZ,2CAAC;IAAa,SAAQ;IAAY,eAAe,aAAa,MAAM,CAAC,EAAE;cACpE,EAAE,eAAe,WAAW,SAAS,SAAS;KAClC,GACb;;GACU"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ndla/ui",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "56.0.
|
|
4
|
+
"version": "56.0.151-alpha.0",
|
|
5
5
|
"description": "UI component library for NDLA",
|
|
6
6
|
"license": "GPL-3.0",
|
|
7
7
|
"exports": {
|
|
@@ -62,5 +62,5 @@
|
|
|
62
62
|
"publishConfig": {
|
|
63
63
|
"access": "public"
|
|
64
64
|
},
|
|
65
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "d929f9ec2e7ebd56cbb54609beb562562add8a5b"
|
|
66
66
|
}
|
package/src/Article/Article.tsx
CHANGED
|
@@ -147,7 +147,7 @@ export const ArticleTitle = ({
|
|
|
147
147
|
<ArticleHGroup>
|
|
148
148
|
{(!!badges || !!heartButton) && (
|
|
149
149
|
<InfoWrapper>
|
|
150
|
-
<BadgesContainer>{badges}</BadgesContainer>
|
|
150
|
+
{!!badges && <BadgesContainer>{badges}</BadgesContainer>}
|
|
151
151
|
{heartButton}
|
|
152
152
|
</InfoWrapper>
|
|
153
153
|
)}
|
|
@@ -43,7 +43,7 @@ export const RelatedArticle = ({
|
|
|
43
43
|
return (
|
|
44
44
|
<CardRoot data-embed-type="related-article">
|
|
45
45
|
<CardContent>
|
|
46
|
-
<BadgesContainer>{badges}</BadgesContainer>
|
|
46
|
+
{!!badges && <BadgesContainer>{badges}</BadgesContainer>}
|
|
47
47
|
<CardHeading asChild consumeCss>
|
|
48
48
|
<span>
|
|
49
49
|
<SafeLink
|